diff --git a/fasthtml/svg.py b/fasthtml/svg.py index f0558f59..2f68c5ae 100644 --- a/fasthtml/svg.py +++ b/fasthtml/svg.py @@ -79,9 +79,9 @@ def transformd(translate=None, scale=None, rotate=None, skewX=None, skewY=None, # %% ../nbs/api/05_svg.ipynb @delegates(ft_svg) -def Line(x1, y1, x2=0, y2=0, stroke='black', w=None, stroke_width=1, **kwargs): +def Line(x1, y1, x2=0, y2=0, stroke=None, w=None, stroke_width=None, **kwargs): "A standard SVG `line` element" - if w: stroke_width=w + if w: stroke_width = w return ft_svg('line', x1=x1, y1=y1, x2=x2, y2=y2, stroke=stroke, stroke_width=stroke_width, **kwargs) # %% ../nbs/api/05_svg.ipynb diff --git a/nbs/api/00_core.ipynb b/nbs/api/00_core.ipynb index 25b039f2..2932b473 100644 --- a/nbs/api/00_core.ipynb +++ b/nbs/api/00_core.ipynb @@ -2,7 +2,7 @@ "cells": [ { "cell_type": "code", - "execution_count": 1, + "execution_count": null, "id": "fa505c58", "metadata": {}, "outputs": [], @@ -37,7 +37,7 @@ }, { "cell_type": "code", - "execution_count": 2, + "execution_count": null, "id": "23503b9e", "metadata": {}, "outputs": [], @@ -70,7 +70,7 @@ }, { "cell_type": "code", - "execution_count": 3, + "execution_count": null, "id": "7f5d0a72", "metadata": {}, "outputs": [], @@ -89,7 +89,7 @@ }, { "cell_type": "code", - "execution_count": 4, + "execution_count": null, "id": "19d3f2a7", "metadata": {}, "outputs": [], @@ -110,7 +110,7 @@ }, { "cell_type": "code", - "execution_count": 5, + "execution_count": null, "id": "e68a76c9", "metadata": {}, "outputs": [], @@ -123,7 +123,7 @@ }, { "cell_type": "code", - "execution_count": 6, + "execution_count": null, "id": "5331a3e7", "metadata": {}, "outputs": [ @@ -133,7 +133,7 @@ "datetime.datetime(2025, 11, 19, 14, 0)" ] }, - "execution_count": 6, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -144,7 +144,7 @@ }, { "cell_type": "code", - "execution_count": 7, + "execution_count": null, "id": "c40c9071", "metadata": {}, "outputs": [ @@ -154,7 +154,7 @@ "True" ] }, - "execution_count": 7, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -165,7 +165,7 @@ }, { "cell_type": "code", - "execution_count": 8, + "execution_count": null, "id": "7c820373", "metadata": {}, "outputs": [], @@ -179,7 +179,7 @@ }, { "cell_type": "code", - "execution_count": 9, + "execution_count": null, "id": "442a5aac", "metadata": {}, "outputs": [ @@ -189,7 +189,7 @@ "'Snake-Case'" ] }, - "execution_count": 9, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -200,7 +200,7 @@ }, { "cell_type": "code", - "execution_count": 10, + "execution_count": null, "id": "25f3b8f8", "metadata": {}, "outputs": [], @@ -229,7 +229,7 @@ }, { "cell_type": "code", - "execution_count": 11, + "execution_count": null, "id": "5b4b5d95", "metadata": {}, "outputs": [], @@ -249,7 +249,7 @@ }, { "cell_type": "code", - "execution_count": 12, + "execution_count": null, "id": "36e2cac0", "metadata": {}, "outputs": [ @@ -259,7 +259,7 @@ "HtmxHeaders(boosted=None, current_url=None, history_restore_request=None, prompt=None, request='1', target=None, trigger_name=None, trigger=None)" ] }, - "execution_count": 12, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -271,7 +271,7 @@ }, { "cell_type": "code", - "execution_count": 13, + "execution_count": null, "id": "1d53e8e7", "metadata": {}, "outputs": [], @@ -290,7 +290,7 @@ }, { "cell_type": "code", - "execution_count": 14, + "execution_count": null, "id": "5ab74473", "metadata": {}, "outputs": [], @@ -301,7 +301,7 @@ }, { "cell_type": "code", - "execution_count": 15, + "execution_count": null, "id": "0afb520c", "metadata": {}, "outputs": [], @@ -321,7 +321,7 @@ }, { "cell_type": "code", - "execution_count": 16, + "execution_count": null, "id": "95b1f5c9", "metadata": {}, "outputs": [], @@ -336,7 +336,7 @@ }, { "cell_type": "code", - "execution_count": 17, + "execution_count": null, "id": "c58ccadb", "metadata": {}, "outputs": [], @@ -354,7 +354,7 @@ }, { "cell_type": "code", - "execution_count": 18, + "execution_count": null, "id": "59757d76", "metadata": {}, "outputs": [], @@ -367,7 +367,7 @@ }, { "cell_type": "code", - "execution_count": 19, + "execution_count": null, "id": "5fc04751", "metadata": {}, "outputs": [], @@ -379,7 +379,7 @@ }, { "cell_type": "code", - "execution_count": 20, + "execution_count": null, "id": "94e18161", "metadata": {}, "outputs": [], @@ -393,7 +393,7 @@ }, { "cell_type": "code", - "execution_count": 21, + "execution_count": null, "id": "592d6c8e", "metadata": {}, "outputs": [ @@ -403,7 +403,7 @@ "'HX-Trigger-After-Settle'" ] }, - "execution_count": 21, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -414,7 +414,7 @@ }, { "cell_type": "code", - "execution_count": 22, + "execution_count": null, "id": "f6a2e62e", "metadata": {}, "outputs": [], @@ -429,7 +429,7 @@ }, { "cell_type": "code", - "execution_count": 23, + "execution_count": null, "id": "e89857eb", "metadata": {}, "outputs": [ @@ -439,7 +439,7 @@ "HttpHeader(k='HX-Trigger-After-Settle', v='hi')" ] }, - "execution_count": 23, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -450,7 +450,7 @@ }, { "cell_type": "code", - "execution_count": 24, + "execution_count": null, "id": "56cc589f", "metadata": {}, "outputs": [], @@ -464,7 +464,7 @@ }, { "cell_type": "code", - "execution_count": 25, + "execution_count": null, "id": "5453a684", "metadata": {}, "outputs": [ @@ -474,7 +474,7 @@ "{'a': int, 'b': str}" ] }, - "execution_count": 25, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -487,7 +487,7 @@ }, { "cell_type": "code", - "execution_count": 26, + "execution_count": null, "id": "bcad3a5a", "metadata": {}, "outputs": [ @@ -497,7 +497,7 @@ "{'x': str, 'y': str}" ] }, - "execution_count": 26, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -509,7 +509,7 @@ }, { "cell_type": "code", - "execution_count": 27, + "execution_count": null, "id": "cb4ed4aa", "metadata": {}, "outputs": [], @@ -520,7 +520,7 @@ }, { "cell_type": "code", - "execution_count": 28, + "execution_count": null, "id": "ffdde66f", "metadata": {}, "outputs": [], @@ -535,7 +535,7 @@ }, { "cell_type": "code", - "execution_count": 29, + "execution_count": null, "id": "5fe74444", "metadata": {}, "outputs": [], @@ -549,7 +549,7 @@ }, { "cell_type": "code", - "execution_count": 30, + "execution_count": null, "id": "cf80ea34", "metadata": {}, "outputs": [], @@ -563,7 +563,7 @@ }, { "cell_type": "code", - "execution_count": 31, + "execution_count": null, "id": "42c9cea0", "metadata": {}, "outputs": [], @@ -584,7 +584,7 @@ }, { "cell_type": "code", - "execution_count": 32, + "execution_count": null, "id": "33d3bc16", "metadata": {}, "outputs": [], @@ -612,7 +612,7 @@ }, { "cell_type": "code", - "execution_count": 33, + "execution_count": null, "id": "8235f17f", "metadata": {}, "outputs": [], @@ -626,7 +626,7 @@ }, { "cell_type": "code", - "execution_count": 34, + "execution_count": null, "id": "a4873835", "metadata": {}, "outputs": [], @@ -640,7 +640,7 @@ }, { "cell_type": "code", - "execution_count": 35, + "execution_count": null, "id": "4b36f60b", "metadata": {}, "outputs": [ @@ -650,7 +650,7 @@ "Foo(d={'a': 1})" ] }, - "execution_count": 35, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -661,7 +661,7 @@ }, { "cell_type": "code", - "execution_count": 36, + "execution_count": null, "id": "7cc39ba9", "metadata": {}, "outputs": [], @@ -676,7 +676,7 @@ }, { "cell_type": "code", - "execution_count": 37, + "execution_count": null, "id": "2a8b10f4", "metadata": {}, "outputs": [ @@ -704,7 +704,7 @@ }, { "cell_type": "code", - "execution_count": 38, + "execution_count": null, "id": "9246153f", "metadata": {}, "outputs": [ @@ -714,7 +714,7 @@ "\"['1', '2']\"" ] }, - "execution_count": 38, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -727,7 +727,7 @@ }, { "cell_type": "code", - "execution_count": 39, + "execution_count": null, "id": "6775cbf8", "metadata": {}, "outputs": [], @@ -778,7 +778,7 @@ }, { "cell_type": "code", - "execution_count": 40, + "execution_count": null, "id": "bf945ee8", "metadata": {}, "outputs": [ @@ -786,7 +786,7 @@ "name": "stdout", "output_type": "stream", "text": [ - "{'req': , 'this': , 'a': '1', 'b': HttpHeader(k='value1', v='value3')}\n" + "{'req': , 'this': , 'a': '1', 'b': HttpHeader(k='value1', v='value3')}\n" ] } ], @@ -804,7 +804,7 @@ }, { "cell_type": "code", - "execution_count": 41, + "execution_count": null, "id": "a3ded5ec", "metadata": {}, "outputs": [ @@ -812,7 +812,7 @@ "name": "stdout", "output_type": "stream", "text": [ - "{'req': , 'this': , 'a': '1', 'b': HttpHeader(k='value1', v='value3')}\n" + "{'req': , 'this': , 'a': '1', 'b': HttpHeader(k='value1', v='value3')}\n" ] } ], @@ -846,7 +846,7 @@ }, { "cell_type": "code", - "execution_count": 42, + "execution_count": null, "id": "c369a89c", "metadata": {}, "outputs": [ @@ -854,7 +854,7 @@ "name": "stdout", "output_type": "stream", "text": [ - "{'req': , 'this': , 'a': ''}\n" + "{'req': , 'this': , 'a': ''}\n" ] } ], @@ -880,7 +880,7 @@ }, { "cell_type": "code", - "execution_count": 43, + "execution_count": null, "id": "b33b43a7", "metadata": {}, "outputs": [ @@ -906,7 +906,7 @@ }, { "cell_type": "code", - "execution_count": 44, + "execution_count": null, "id": "7a661bfa", "metadata": {}, "outputs": [], @@ -924,7 +924,7 @@ }, { "cell_type": "code", - "execution_count": 45, + "execution_count": null, "id": "2ee5adf1", "metadata": {}, "outputs": [], @@ -936,7 +936,7 @@ }, { "cell_type": "code", - "execution_count": 46, + "execution_count": null, "id": "aacff5ac", "metadata": {}, "outputs": [], @@ -948,7 +948,7 @@ }, { "cell_type": "code", - "execution_count": 47, + "execution_count": null, "id": "78c3c357", "metadata": {}, "outputs": [], @@ -968,7 +968,7 @@ }, { "cell_type": "code", - "execution_count": 48, + "execution_count": null, "id": "f2277c02", "metadata": {}, "outputs": [], @@ -1005,7 +1005,7 @@ }, { "cell_type": "code", - "execution_count": 49, + "execution_count": null, "id": "dcc15129", "metadata": {}, "outputs": [], @@ -1039,7 +1039,7 @@ }, { "cell_type": "code", - "execution_count": 50, + "execution_count": null, "id": "983bcfe2", "metadata": {}, "outputs": [], @@ -1055,7 +1055,7 @@ }, { "cell_type": "code", - "execution_count": 51, + "execution_count": null, "id": "5b0e7677", "metadata": {}, "outputs": [], @@ -1068,7 +1068,7 @@ }, { "cell_type": "code", - "execution_count": 52, + "execution_count": null, "id": "0dd0a414", "metadata": {}, "outputs": [], @@ -1095,7 +1095,7 @@ }, { "cell_type": "code", - "execution_count": 53, + "execution_count": null, "id": "03f4c639", "metadata": {}, "outputs": [], @@ -1108,7 +1108,7 @@ }, { "cell_type": "code", - "execution_count": 54, + "execution_count": null, "id": "bdb2ac14", "metadata": {}, "outputs": [], @@ -1122,7 +1122,7 @@ }, { "cell_type": "code", - "execution_count": 55, + "execution_count": null, "id": "b80ce139", "metadata": {}, "outputs": [], @@ -1133,7 +1133,7 @@ }, { "cell_type": "code", - "execution_count": 56, + "execution_count": null, "id": "a27adc1e", "metadata": {}, "outputs": [], @@ -1151,7 +1151,7 @@ }, { "cell_type": "code", - "execution_count": 57, + "execution_count": null, "id": "46614165", "metadata": {}, "outputs": [], @@ -1165,7 +1165,7 @@ }, { "cell_type": "code", - "execution_count": 58, + "execution_count": null, "id": "c1707d59", "metadata": {}, "outputs": [], @@ -1207,7 +1207,7 @@ }, { "cell_type": "code", - "execution_count": 59, + "execution_count": null, "id": "f1e3ed2d", "metadata": {}, "outputs": [], @@ -1218,7 +1218,7 @@ }, { "cell_type": "code", - "execution_count": 60, + "execution_count": null, "id": "a407dc0e", "metadata": {}, "outputs": [], @@ -1237,7 +1237,7 @@ }, { "cell_type": "code", - "execution_count": 61, + "execution_count": null, "id": "d36402e6", "metadata": {}, "outputs": [], @@ -1250,7 +1250,7 @@ }, { "cell_type": "code", - "execution_count": 62, + "execution_count": null, "id": "7f49728d", "metadata": {}, "outputs": [], @@ -1276,7 +1276,7 @@ }, { "cell_type": "code", - "execution_count": 63, + "execution_count": null, "id": "b2007479", "metadata": {}, "outputs": [], @@ -1290,7 +1290,7 @@ }, { "cell_type": "code", - "execution_count": 64, + "execution_count": null, "id": "358badec", "metadata": {}, "outputs": [], @@ -1315,7 +1315,7 @@ }, { "cell_type": "code", - "execution_count": 65, + "execution_count": null, "id": "da449a7b", "metadata": {}, "outputs": [], @@ -1339,7 +1339,7 @@ }, { "cell_type": "code", - "execution_count": 66, + "execution_count": null, "id": "775fb66b", "metadata": {}, "outputs": [], @@ -1352,7 +1352,7 @@ }, { "cell_type": "code", - "execution_count": 67, + "execution_count": null, "id": "968d9245", "metadata": {}, "outputs": [], @@ -1380,7 +1380,7 @@ }, { "cell_type": "code", - "execution_count": 68, + "execution_count": null, "id": "eac44461", "metadata": {}, "outputs": [], @@ -1396,7 +1396,7 @@ }, { "cell_type": "code", - "execution_count": 69, + "execution_count": null, "id": "1ba52822", "metadata": {}, "outputs": [], @@ -1410,7 +1410,7 @@ }, { "cell_type": "code", - "execution_count": 70, + "execution_count": null, "id": "b0d1cbbf", "metadata": {}, "outputs": [], @@ -1441,7 +1441,7 @@ }, { "cell_type": "code", - "execution_count": 71, + "execution_count": null, "id": "deffbaaa", "metadata": {}, "outputs": [ @@ -1459,7 +1459,7 @@ }, { "cell_type": "code", - "execution_count": 72, + "execution_count": null, "id": "60cb52ea", "metadata": {}, "outputs": [], @@ -1475,7 +1475,7 @@ }, { "cell_type": "code", - "execution_count": 73, + "execution_count": null, "id": "8bd78eeb", "metadata": {}, "outputs": [], @@ -1493,7 +1493,7 @@ }, { "cell_type": "code", - "execution_count": 74, + "execution_count": null, "id": "042666e2", "metadata": {}, "outputs": [], @@ -1506,7 +1506,7 @@ }, { "cell_type": "code", - "execution_count": 75, + "execution_count": null, "id": "d276fc71", "metadata": {}, "outputs": [], @@ -1524,7 +1524,7 @@ }, { "cell_type": "code", - "execution_count": 76, + "execution_count": null, "id": "bc323fd4", "metadata": {}, "outputs": [], @@ -1552,7 +1552,7 @@ }, { "cell_type": "code", - "execution_count": 77, + "execution_count": null, "id": "ff82dc78", "metadata": {}, "outputs": [], @@ -1562,7 +1562,7 @@ }, { "cell_type": "code", - "execution_count": 78, + "execution_count": null, "id": "c0836a8f", "metadata": {}, "outputs": [], @@ -1581,7 +1581,7 @@ }, { "cell_type": "code", - "execution_count": 79, + "execution_count": null, "id": "50ebb1ee", "metadata": {}, "outputs": [], @@ -1593,7 +1593,7 @@ }, { "cell_type": "code", - "execution_count": 80, + "execution_count": null, "id": "f86690c4", "metadata": {}, "outputs": [], @@ -1609,7 +1609,7 @@ }, { "cell_type": "code", - "execution_count": 81, + "execution_count": null, "id": "2c5285ae", "metadata": {}, "outputs": [], @@ -1631,7 +1631,7 @@ }, { "cell_type": "code", - "execution_count": 82, + "execution_count": null, "id": "3327a1e9", "metadata": {}, "outputs": [], @@ -1675,7 +1675,7 @@ }, { "cell_type": "code", - "execution_count": 83, + "execution_count": null, "id": "e0accf76", "metadata": {}, "outputs": [], @@ -1693,7 +1693,7 @@ }, { "cell_type": "code", - "execution_count": 84, + "execution_count": null, "id": "246bd8d1", "metadata": {}, "outputs": [], @@ -1704,7 +1704,7 @@ }, { "cell_type": "code", - "execution_count": 85, + "execution_count": null, "id": "26b147ba", "metadata": {}, "outputs": [], @@ -1738,7 +1738,7 @@ }, { "cell_type": "code", - "execution_count": 86, + "execution_count": null, "id": "3818575c", "metadata": {}, "outputs": [], @@ -1756,7 +1756,7 @@ }, { "cell_type": "code", - "execution_count": 87, + "execution_count": null, "id": "669e76eb", "metadata": {}, "outputs": [], @@ -1771,7 +1771,7 @@ }, { "cell_type": "code", - "execution_count": 88, + "execution_count": null, "id": "919618c3", "metadata": {}, "outputs": [], @@ -1793,7 +1793,7 @@ }, { "cell_type": "code", - "execution_count": 89, + "execution_count": null, "id": "d2ecc738", "metadata": {}, "outputs": [], @@ -1806,7 +1806,7 @@ }, { "cell_type": "code", - "execution_count": 90, + "execution_count": null, "id": "c0f13ece", "metadata": {}, "outputs": [], @@ -1818,7 +1818,7 @@ }, { "cell_type": "code", - "execution_count": 91, + "execution_count": null, "id": "b218f738", "metadata": {}, "outputs": [ @@ -1828,7 +1828,7 @@ "'f_g'" ] }, - "execution_count": 91, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -1840,7 +1840,7 @@ }, { "cell_type": "code", - "execution_count": 92, + "execution_count": null, "id": "72760b09", "metadata": {}, "outputs": [], @@ -1864,7 +1864,7 @@ }, { "cell_type": "code", - "execution_count": 93, + "execution_count": null, "id": "f5cb2c2b", "metadata": {}, "outputs": [], @@ -1881,7 +1881,7 @@ }, { "cell_type": "code", - "execution_count": 94, + "execution_count": null, "id": "e6ee3a86", "metadata": {}, "outputs": [ @@ -1891,7 +1891,7 @@ "'/foo?a=bar&b=1&b=2'" ] }, - "execution_count": 94, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -1906,7 +1906,7 @@ }, { "cell_type": "code", - "execution_count": 95, + "execution_count": null, "id": "9b9f1f03", "metadata": {}, "outputs": [ @@ -1916,7 +1916,7 @@ "'/foo/bar?b=1&b=2'" ] }, - "execution_count": 95, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -1930,7 +1930,7 @@ }, { "cell_type": "code", - "execution_count": 96, + "execution_count": null, "id": "35c35a96", "metadata": {}, "outputs": [], @@ -1945,7 +1945,7 @@ }, { "cell_type": "code", - "execution_count": 97, + "execution_count": null, "id": "3a348474", "metadata": {}, "outputs": [], @@ -1976,7 +1976,7 @@ }, { "cell_type": "code", - "execution_count": 98, + "execution_count": null, "id": "8121968a", "metadata": {}, "outputs": [], @@ -1996,7 +1996,7 @@ }, { "cell_type": "code", - "execution_count": 99, + "execution_count": null, "id": "b163c933", "metadata": {}, "outputs": [ @@ -2006,7 +2006,7 @@ "'test'" ] }, - "execution_count": 99, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -2036,7 +2036,7 @@ }, { "cell_type": "code", - "execution_count": 100, + "execution_count": null, "id": "9abc3781", "metadata": {}, "outputs": [], @@ -2046,7 +2046,7 @@ }, { "cell_type": "code", - "execution_count": 101, + "execution_count": null, "id": "645d8d95", "metadata": {}, "outputs": [], @@ -2056,7 +2056,7 @@ }, { "cell_type": "code", - "execution_count": 102, + "execution_count": null, "id": "421262a8", "metadata": {}, "outputs": [ @@ -2073,7 +2073,7 @@ "'/foo?param=value'" ] }, - "execution_count": 102, + "execution_count": null, "metadata": {}, "output_type": "execute_result" } @@ -3965,21 +3965,9 @@ ], "metadata": { "kernelspec": { - "display_name": "Python 3 (ipykernel)", + "display_name": "python3", "language": "python", "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.12.8" } }, "nbformat": 4, diff --git a/nbs/api/05_svg.ipynb b/nbs/api/05_svg.ipynb index d5359d59..0a4554e8 100644 --- a/nbs/api/05_svg.ipynb +++ b/nbs/api/05_svg.ipynb @@ -3,6 +3,7 @@ { "cell_type": "code", "execution_count": null, + "id": "e339d3fd", "metadata": {}, "outputs": [], "source": [ @@ -11,6 +12,7 @@ }, { "cell_type": "markdown", + "id": "3ba9bc48", "metadata": {}, "source": [ "# SVG\n", @@ -20,6 +22,7 @@ { "cell_type": "code", "execution_count": null, + "id": "8d6cabd6", "metadata": {}, "outputs": [], "source": [ @@ -35,6 +38,7 @@ { "cell_type": "code", "execution_count": null, + "id": "9c9e4cc8", "metadata": {}, "outputs": [], "source": [ @@ -44,6 +48,7 @@ { "cell_type": "code", "execution_count": null, + "id": "fe81889e", "metadata": {}, "outputs": [], "source": [ @@ -54,6 +59,7 @@ { "cell_type": "code", "execution_count": null, + "id": "27220120", "metadata": {}, "outputs": [], "source": [ @@ -64,6 +70,7 @@ }, { "cell_type": "markdown", + "id": "ecb3d554", "metadata": {}, "source": [ "You can create SVGs directly from strings, for instance (as always, use `NotStr` or `Safe` to tell FastHTML to not escape the text):" @@ -72,6 +79,7 @@ { "cell_type": "code", "execution_count": null, + "id": "c2c2ed48", "metadata": {}, "outputs": [ { @@ -94,6 +102,7 @@ }, { "cell_type": "markdown", + "id": "dafd6677", "metadata": {}, "source": [ "You can also use libraries such as [fa6-icons](https://www.fastht.ml/docs/fa6-icons/).\n", @@ -110,6 +119,7 @@ { "cell_type": "code", "execution_count": null, + "id": "20ed33ef", "metadata": {}, "outputs": [], "source": [ @@ -124,6 +134,7 @@ }, { "cell_type": "markdown", + "id": "9760ce6c", "metadata": {}, "source": [ "To create your own SVGs, use `SVG`. It will automatically set the `viewBox` from height and width if not provided.\n", @@ -134,6 +145,7 @@ { "cell_type": "code", "execution_count": null, + "id": "d6981d37", "metadata": {}, "outputs": [], "source": [ @@ -148,6 +160,7 @@ }, { "cell_type": "markdown", + "id": "7c3cc175", "metadata": {}, "source": [ "## Basic shapes" @@ -155,6 +168,7 @@ }, { "cell_type": "markdown", + "id": "f27a4226", "metadata": {}, "source": [ "We'll define a simple function to display SVG shapes in this notebook:" @@ -163,6 +177,7 @@ { "cell_type": "code", "execution_count": null, + "id": "81ccb287", "metadata": {}, "outputs": [], "source": [ @@ -172,6 +187,7 @@ { "cell_type": "code", "execution_count": null, + "id": "6a790727", "metadata": {}, "outputs": [], "source": [ @@ -185,6 +201,7 @@ }, { "cell_type": "markdown", + "id": "3c2fe1af", "metadata": {}, "source": [ "All our shapes just create regular `FT` elements. The only extra functionality provided by most of them is to add additional defined kwargs to improve auto-complete in IDEs and notebooks, and re-order parameters so that positional args can also be used to save a bit of typing, e.g:" @@ -193,12 +210,13 @@ { "cell_type": "code", "execution_count": null, + "id": "7c4db30a", "metadata": {}, "outputs": [ { "data": { "text/html": [ - "" + "" ], "text/plain": [ "" @@ -215,6 +233,7 @@ { "cell_type": "code", "execution_count": null, + "id": "664cf47b", "metadata": {}, "outputs": [], "source": [ @@ -228,6 +247,7 @@ { "cell_type": "code", "execution_count": null, + "id": "7d06809e", "metadata": {}, "outputs": [ { @@ -250,6 +270,7 @@ { "cell_type": "code", "execution_count": null, + "id": "4efb1eab", "metadata": {}, "outputs": [], "source": [ @@ -263,6 +284,7 @@ { "cell_type": "code", "execution_count": null, + "id": "d6a43ab6", "metadata": {}, "outputs": [ { @@ -285,6 +307,7 @@ { "cell_type": "code", "execution_count": null, + "id": "222d5379", "metadata": {}, "outputs": [], "source": [ @@ -304,6 +327,7 @@ { "cell_type": "code", "execution_count": null, + "id": "fcf20d9d", "metadata": {}, "outputs": [ { @@ -325,6 +349,7 @@ { "cell_type": "code", "execution_count": null, + "id": "a5120a83", "metadata": {}, "outputs": [ { @@ -347,26 +372,28 @@ { "cell_type": "code", "execution_count": null, + "id": "8ee0681c", "metadata": {}, "outputs": [], "source": [ "#| export\n", "@delegates(ft_svg)\n", - "def Line(x1, y1, x2=0, y2=0, stroke='black', w=None, stroke_width=1, **kwargs):\n", + "def Line(x1, y1, x2=0, y2=0, stroke=None, w=None, stroke_width=None, **kwargs):\n", " \"A standard SVG `line` element\"\n", - " if w: stroke_width=w\n", + " if w: stroke_width = w\n", " return ft_svg('line', x1=x1, y1=y1, x2=x2, y2=y2, stroke=stroke, stroke_width=stroke_width, **kwargs)" ] }, { "cell_type": "code", "execution_count": null, + "id": "d4f05d4a", "metadata": {}, "outputs": [ { "data": { "text/html": [ - "" + "" ], "text/plain": [ "" @@ -377,12 +404,36 @@ } ], "source": [ - "demo(Line(20, 30, w=3))" + "demo(Line(20, 30, w=3, stroke='black'))" ] }, { "cell_type": "code", "execution_count": null, + "id": "ca8bbd71", + "metadata": {}, + "outputs": [ + { + "data": { + "text/html": [ + "" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "demo(Svg(G(Line(0, 0, 100, 100), Line(100, 0, 0, 100), stroke='red', stroke_width=3)))" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "1cc19b39", "metadata": {}, "outputs": [], "source": [ @@ -397,6 +448,7 @@ { "cell_type": "code", "execution_count": null, + "id": "63193b03", "metadata": {}, "outputs": [ { @@ -420,6 +472,7 @@ { "cell_type": "code", "execution_count": null, + "id": "d6579f73", "metadata": {}, "outputs": [ { @@ -442,6 +495,7 @@ { "cell_type": "code", "execution_count": null, + "id": "085cef57", "metadata": {}, "outputs": [], "source": [ @@ -456,6 +510,7 @@ { "cell_type": "code", "execution_count": null, + "id": "395f2d16", "metadata": {}, "outputs": [ { @@ -479,6 +534,7 @@ { "cell_type": "code", "execution_count": null, + "id": "43659957", "metadata": {}, "outputs": [ { @@ -502,6 +558,7 @@ { "cell_type": "code", "execution_count": null, + "id": "d009943a", "metadata": {}, "outputs": [], "source": [ @@ -518,6 +575,7 @@ { "cell_type": "code", "execution_count": null, + "id": "f5eda161", "metadata": {}, "outputs": [ { @@ -539,6 +597,7 @@ }, { "cell_type": "markdown", + "id": "c86c240f", "metadata": {}, "source": [ "## Paths" @@ -546,6 +605,7 @@ }, { "cell_type": "markdown", + "id": "9adaffc4", "metadata": {}, "source": [ "Paths in SVGs are more complex, so we add a small (optional) fluent interface for constructing them:" @@ -554,6 +614,7 @@ { "cell_type": "code", "execution_count": null, + "id": "db8e4090", "metadata": {}, "outputs": [], "source": [ @@ -608,6 +669,7 @@ { "cell_type": "code", "execution_count": null, + "id": "a02224c2", "metadata": {}, "outputs": [], "source": [ @@ -620,6 +682,7 @@ }, { "cell_type": "markdown", + "id": "65a13702", "metadata": {}, "source": [ "Let's create a square shape, but using `Path` instead of `Rect`:\n", @@ -636,6 +699,7 @@ { "cell_type": "code", "execution_count": null, + "id": "dbbe291a", "metadata": {}, "outputs": [ { @@ -658,6 +722,7 @@ }, { "cell_type": "markdown", + "id": "fe883181", "metadata": {}, "source": [ "Using curves we can create a spiral:" @@ -666,6 +731,7 @@ { "cell_type": "code", "execution_count": null, + "id": "8070b836", "metadata": {}, "outputs": [ { @@ -695,6 +761,7 @@ }, { "cell_type": "markdown", + "id": "4a39d15a", "metadata": {}, "source": [ "Using arcs and curves we can create a map marker icon:" @@ -703,6 +770,7 @@ { "cell_type": "code", "execution_count": null, + "id": "8bb56d72", "metadata": {}, "outputs": [ { @@ -730,6 +798,7 @@ }, { "cell_type": "markdown", + "id": "68a36f88", "metadata": {}, "source": [ "Behind the scenes it's just creating regular SVG path `d` attr -- you can pass `d` in directly if you prefer." @@ -738,6 +807,7 @@ { "cell_type": "code", "execution_count": null, + "id": "0afbae3f", "metadata": {}, "outputs": [ { @@ -755,6 +825,7 @@ { "cell_type": "code", "execution_count": null, + "id": "0cb58caa", "metadata": {}, "outputs": [ { @@ -777,8 +848,17 @@ { "cell_type": "code", "execution_count": null, + "id": "015d5e52", "metadata": {}, "outputs": [ + { + "name": "stderr", + "output_type": "stream", + "text": [ + "/Users/erikgaas/aai-ws/.venv/lib/python3.12/site-packages/tqdm/auto.py:21: TqdmWarning: IProgress not found. Please update jupyter and ipywidgets. See https://ipywidgets.readthedocs.io/en/stable/user_install.html\n", + " from .autonotebook import tqdm as notebook_tqdm\n" + ] + }, { "data": { "text/markdown": [ @@ -793,12 +873,6 @@ "*Move to.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L117){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.M\n", - "\n", "> PathFT.M (x, y)\n", "\n", "*Move to.*" @@ -816,6 +890,7 @@ { "cell_type": "code", "execution_count": null, + "id": "c16bc82e", "metadata": {}, "outputs": [ { @@ -832,12 +907,6 @@ "*Line to.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L121){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.L\n", - "\n", "> PathFT.L (x, y)\n", "\n", "*Line to.*" @@ -855,6 +924,7 @@ { "cell_type": "code", "execution_count": null, + "id": "15f41aa0", "metadata": {}, "outputs": [ { @@ -871,12 +941,6 @@ "*Horizontal line to.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L125){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.H\n", - "\n", "> PathFT.H (x)\n", "\n", "*Horizontal line to.*" @@ -894,6 +958,7 @@ { "cell_type": "code", "execution_count": null, + "id": "e83bad56", "metadata": {}, "outputs": [ { @@ -910,12 +975,6 @@ "*Vertical line to.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L129){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.V\n", - "\n", "> PathFT.V (y)\n", "\n", "*Vertical line to.*" @@ -933,6 +992,7 @@ { "cell_type": "code", "execution_count": null, + "id": "c7712b92", "metadata": {}, "outputs": [ { @@ -949,12 +1009,6 @@ "*Close path.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L133){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.Z\n", - "\n", "> PathFT.Z ()\n", "\n", "*Close path.*" @@ -972,6 +1026,7 @@ { "cell_type": "code", "execution_count": null, + "id": "d89df94f", "metadata": {}, "outputs": [ { @@ -988,12 +1043,6 @@ "*Cubic Bézier curve.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L137){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.C\n", - "\n", "> PathFT.C (x1, y1, x2, y2, x, y)\n", "\n", "*Cubic Bézier curve.*" @@ -1011,6 +1060,7 @@ { "cell_type": "code", "execution_count": null, + "id": "f6484b76", "metadata": {}, "outputs": [ { @@ -1027,12 +1077,6 @@ "*Smooth cubic Bézier curve.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L141){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.S\n", - "\n", "> PathFT.S (x2, y2, x, y)\n", "\n", "*Smooth cubic Bézier curve.*" @@ -1050,6 +1094,7 @@ { "cell_type": "code", "execution_count": null, + "id": "df4a90b6", "metadata": {}, "outputs": [ { @@ -1066,12 +1111,6 @@ "*Quadratic Bézier curve.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L145){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.Q\n", - "\n", "> PathFT.Q (x1, y1, x, y)\n", "\n", "*Quadratic Bézier curve.*" @@ -1089,6 +1128,7 @@ { "cell_type": "code", "execution_count": null, + "id": "aafb479d", "metadata": {}, "outputs": [ { @@ -1105,12 +1145,6 @@ "*Smooth quadratic Bézier curve.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L149){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.T\n", - "\n", "> PathFT.T (x, y)\n", "\n", "*Smooth quadratic Bézier curve.*" @@ -1128,6 +1162,7 @@ { "cell_type": "code", "execution_count": null, + "id": "d769ecb3", "metadata": {}, "outputs": [ { @@ -1144,12 +1179,6 @@ "*Elliptical Arc.*" ], "text/plain": [ - "---\n", - "\n", - "[source](https://github.com/AnswerDotAI/fasthtml/blob/main/fasthtml/svg.py#L153){target=\"_blank\" style=\"float:right; font-size:smaller\"}\n", - "\n", - "### PathFT.A\n", - "\n", "> PathFT.A (rx, ry, x_axis_rotation, large_arc_flag, sweep_flag, x, y)\n", "\n", "*Elliptical Arc.*" @@ -1166,6 +1195,7 @@ }, { "cell_type": "markdown", + "id": "e39b02f8", "metadata": {}, "source": [ "## HTMX helpers" @@ -1174,6 +1204,7 @@ { "cell_type": "code", "execution_count": null, + "id": "454fdced", "metadata": {}, "outputs": [], "source": [ @@ -1184,6 +1215,7 @@ { "cell_type": "code", "execution_count": null, + "id": "95c8c0c2", "metadata": {}, "outputs": [], "source": [ @@ -1195,6 +1227,7 @@ }, { "cell_type": "markdown", + "id": "fed3a349", "metadata": {}, "source": [ "When returning an SVG shape out-of-band (OOB) in HTMX, you need to wrap it with `SvgOob` to have it appear correctly. (`SvgOob` is just a shortcut for `Template(Svg(...))`, which is the trick that makes SVG OOB swaps work.)" @@ -1203,6 +1236,7 @@ { "cell_type": "code", "execution_count": null, + "id": "e1707b9b", "metadata": {}, "outputs": [], "source": [ @@ -1214,6 +1248,7 @@ }, { "cell_type": "markdown", + "id": "9f28c006", "metadata": {}, "source": [ "When returning an SVG shape in-band in HTMX, either have the calling element include `hx_select='svg>*'`, or `**svg_inb` (which are two ways of saying the same thing), or wrap the response with `SvgInb` to have it appear correctly. (`SvgInb` is just a shortcut for the tuple `(Svg(...), HtmxResponseHeaders(hx_reselect='svg>*'))`, which is the trick that makes SVG in-band swaps work.)" @@ -1221,6 +1256,7 @@ }, { "cell_type": "markdown", + "id": "ae410cf2", "metadata": {}, "source": [ "# Export -" @@ -1229,6 +1265,7 @@ { "cell_type": "code", "execution_count": null, + "id": "5b350f0c", "metadata": {}, "outputs": [], "source": [ @@ -1239,18 +1276,13 @@ { "cell_type": "code", "execution_count": null, + "id": "5113a933", "metadata": {}, "outputs": [], "source": [] } ], - "metadata": { - "kernelspec": { - "display_name": "python3", - "language": "python", - "name": "python3" - } - }, + "metadata": {}, "nbformat": 4, - "nbformat_minor": 2 + "nbformat_minor": 5 }