pict-section-flow 1.0.1 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -13
- package/docs/Architecture.md +8 -148
- package/docs/Data_Model.md +2 -11
- package/docs/README.md +8 -38
- package/docs/Theme_Integration.md +11 -11
- package/docs/_cover.md +7 -1
- package/docs/_playground.json +24 -0
- package/docs/_sidebar.md +4 -0
- package/docs/_topbar.md +1 -1
- package/docs/_version.json +3 -3
- package/docs/card-help/FREAD.md +1 -1
- package/docs/diagrams/architecture-at-a-glance.excalidraw +4270 -0
- package/docs/diagrams/architecture-at-a-glance.mmd +30 -0
- package/docs/diagrams/architecture-at-a-glance.svg +2 -0
- package/docs/diagrams/data-flow.excalidraw +1451 -0
- package/docs/diagrams/data-flow.mmd +17 -0
- package/docs/diagrams/data-flow.svg +2 -0
- package/docs/diagrams/high-level-design.excalidraw +5767 -0
- package/docs/diagrams/high-level-design.mmd +86 -0
- package/docs/diagrams/high-level-design.svg +2 -0
- package/docs/diagrams/relationships.excalidraw +3852 -0
- package/docs/diagrams/relationships.mmd +9 -0
- package/docs/diagrams/relationships.svg +2 -0
- package/docs/diagrams/service-initialization-sequence.excalidraw +1466 -0
- package/docs/diagrams/service-initialization-sequence.mmd +19 -0
- package/docs/diagrams/service-initialization-sequence.svg +2 -0
- package/docs/diagrams/svg-layer-structure.excalidraw +1060 -0
- package/docs/diagrams/svg-layer-structure.mmd +18 -0
- package/docs/diagrams/svg-layer-structure.svg +2 -0
- package/docs/examples/README.md +9 -0
- package/docs/examples/simple_cards/README.md +677 -0
- package/docs/examples/simple_cards/css/flowexample.css +65 -0
- package/docs/examples/simple_cards/index.html +32 -0
- package/docs/examples/simple_cards/js/pict.min.js +12 -0
- package/docs/examples/simple_cards/pict-section-flow-example-simple-cards.compatible.min.js +1 -0
- package/docs/index.html +6 -5
- package/docs/playground/app.json +6 -0
- package/docs/playground/appdata.json +85 -0
- package/docs/playground/application.js +23 -0
- package/docs/playground/pict.json +17 -0
- package/docs/playground/runtime/pict-application.min.js +2 -0
- package/docs/playground/runtime/pict-section-flow.min.js +2 -0
- package/docs/playground/runtime/pict-section-modal.min.js +2 -0
- package/docs/playground/runtime/pict.min.js +12 -0
- package/docs/retold-catalog.json +241 -166
- package/docs/retold-keyword-index.json +19312 -7226
- package/example_applications/simple_cards/package.json +9 -1
- package/example_applications/simple_cards/source/views/PictView-FlowExample-BottomBar.js +2 -2
- package/package.json +5 -5
- package/source/providers/PictProvider-Flow-PanelChrome.js +2 -1
- package/source/providers/layouts/Layout-Layered.js +25 -79
- package/source/providers/layouts/Layout-Rank.js +141 -0
- package/source/providers/layouts/Layout-Staggered.js +131 -0
- package/source/services/PictService-Flow-DataManager.js +6 -0
- package/source/services/PictService-Flow-InteractionManager.js +10 -1
- package/source/services/PictService-Flow-Layout.js +2 -0
- package/source/services/PictService-Flow-PanelManager.js +106 -2
- package/source/views/PictView-Flow-Node.js +41 -4
- package/source/views/PictView-Flow-PropertiesPanel.js +70 -3
- package/source/views/PictView-Flow.js +53 -0
- package/test/Layout_tests.js +208 -4
- package/test/NodeView_tests.js +49 -0
- package/test/PanelManager_tests.js +172 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
graph TB
|
|
2
|
+
subgraph SVG["SVG Canvas"]
|
|
3
|
+
Grid["Grid Background (pattern)"]
|
|
4
|
+
subgraph Viewport["Viewport Group (pan/zoom transform)"]
|
|
5
|
+
Connections["Connections Layer (bezier/orthogonal paths)"]
|
|
6
|
+
Nodes["Nodes Layer (rect + ports + labels)"]
|
|
7
|
+
Tethers["Tethers Layer (panel-to-node lines)"]
|
|
8
|
+
Panels["Panels Layer (foreignObject panels)"]
|
|
9
|
+
end
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
Grid --> Viewport
|
|
13
|
+
Connections --> Nodes
|
|
14
|
+
Nodes --> Tethers
|
|
15
|
+
Tethers --> Panels
|
|
16
|
+
|
|
17
|
+
style SVG fill:#f5f5f5,stroke:#bdbdbd,color:#333
|
|
18
|
+
style Viewport fill:#e3f2fd,stroke:#42a5f5,color:#333
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 659 889" width="659" height="889"><!-- svg-source:excalidraw --><metadata><!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXFtz2zZcdTAwMTZ+96/QqC/d2ZjB/ZK32LHTzrTdTt1pXHUwMDFmdvpAS4jENUVqKTqO08l/31x1MDAwM+pCkLqQsCSH3khWXHUwMDEyXHUwMDBiJFx1MDAwZYCD7+D7XHUwMDBlXGLl77Ner58/Tk3/Ta9vPlxywjhcdTAwMWFm4UP/lS3/aLJZlCZwiVx1MDAxNJ9n6X02KO5cdTAwMWPn+fTN69eYyFx1MDAwMMFcdTAwMGZ+w7Skcl7LxGZiknxcdTAwMDb3/Vx1MDAxYj73en9cdTAwMTd/w5VoaOtcdTAwMGXi+1lusvObP95cdTAwMTdcdTAwMTWKS8suZGaQh8koNuWlT8v2i0+P8OlcdTAwMWPr1eeHaJiPoUzQsmxsotE4h0IlysK51Tc9tCqZ5Vl6Zy7TOM1s09+pt/JakrLh23BwN8rS+2S4uifPwmQ2XHIzXHUwMDE4X3nfhyiOb/LHwjr4XGI82K+18eeik7hWvqo1XGZnY+NUg1ZH48TMZpVK6TRcdTAwMWNEufVcdTAwMDBG5TBsXHUwMDE3pz9cdTAwMGVcdTAwMGJ//1V2Klx1MDAwYifmR+vw5D6OXcPJcGF4OS+l++mi5EvZT2OsXHKNyl7UUOGW/ZImXHUwMDA1PjDmXFxRgVx1MDAwNFvdXHUwMDExzd5cdTAwMDEw8sLahzCemdLNtktXXHUwMDBlaMpB3E+H4bxcbpZcbjFGhGLUmfw4Su7qI4zTwd2GVqJkaCyS+iHqnzlj3Fx1MDAwMs44vDXxZojm5lO+XHUwMDFinaxcdTAwMWQ6XHR+XHUwMDE54KzVelx1MDAxNmxWLjxcdTAwMTGEsFwiMYko6lx1MDAwZVxiXHUwMDBi6IBHXHUwMDAxV73LMPlcdTAwMTjOnIlKk/wm+lxc9JxXSq/DSVx1MDAxNFvP8oqht3E0SlxuzEKfTdZ3/ZBHsJKvbsjTaXl1XHUwMDAwXHUwMDE2wygx2fpcdTAwMDSkWTSKkjD+fUc3w/s8/c3M5lx1MDAxZM2ze+P6wfywxDZcdTAwMGVI2dsy9nCb2PsjMlx1MDAwZtM0y9uzQzVcdTAwMDCxLD8vXHUwMDAzkOtcclx1MDAwMSgofVx1MDAxOVx1MDAxMdh1elCSuehrjEyBiOCc6vKOr1x1MDAxZJklREl7ethcdTAwMGXUXHJcdTAwMWNRx6hsh9FcdTAwMTNJ+JGEJ1x1MDAxNFx1MDAxNZFMY6FQZ5C45IgluHrvrXt630/D5PXnNJ30ilx1MDAxOfyQZpN/dJo8vPq/XHUwMDFmq9BdITtcdTAwMWKHU3P+PouG56h48bQ1sVx1MDAwMDAqUStKKC+DlqIykFdBy4VH0OJcdTAwMGJ8Tegxg5bUyr9q0HrQXG5BXrFcZpSCKGFPi+VVr8r+rSA0X+1cdTAwMWRcYsVs5bRcboyK2F1d+PJql9Ewy9KHudHLNElcdTAwMDCAMJTZooH/os1cclx1MDAxNJWcXHUwMDE2XHUwMDE2v1x1MDAxZJlcdTAwMTLZrvja5ZxcdTAwMWR8iKWohJZcdTAwMTRcdTAwMDFfXHUwMDBiLqLxenA5S0BcdTAwMTeCq/OMKFx1MDAwNfKJXCIsJEaacGd+ukKJXHUwMDE2ZL2L1VxmWk7JgbySzURIUKV0b1winETDoUtcdTAwMTC34cxYdqpybpUhd7NPnTJbjG8/ouTNRLm+XHUwMDE2Te9a86Wz3fZYROqGRFxmlbg68eWBd+mIX6RzojTTbq2DXHUwMDEy5jqU4rQjvNmiXHUwMDA11/gv6dAsm2CDLlGzaKbmndOwg6GdXGa1XGJmITcwNNNoPZxPXGbtydDKL24pMDSXvINcdTAwMWKbXHUwMDBl1no/hY8m631/az5HJntccpngOFx1MDAxZKXAdj1gtfGs85y9m1xi69T9pIHvR+aymczddWs8ap/24nJf1Hqf6jJccl5cdTAwMDU+LstOPH5YXHUwMDFlXHUwMDE3RLmQbn7aJrjEwOZH4nFcdTAwMTdFXHUwMDAzfShcdTAwMDbfl19bNDE3+7vJx+CwhflkS+r+dehbNdP3XHUwMDE27+9KrZ0948dcIlTpJuZGZD2AT8ztx9yM+T2SXHUwMDE0mlx1MDAxMSpcdTAwMTHpXHUwMDFlc1x1MDAxNzBbUpflhd4/e3b7dlx1MDAwNv9cdTAwMTZA7D5jb2O7Old7XHJ1P47WzVx1MDAxY11dntKnszRn6+dcdTAwMGVOLH3Eh55+qp0gXGJRRKjzSOGgLF3F0Wh0KJ7eh0RbmF9cdTAwMWH+NUwg8JZcdGqncuy3zSS91flcdTAwMWU0zbk+0fRxaJrrtbDcSdOcc8qZ7uBcdTAwMTb4XHUwMDAyaEv2mtqoOc/T81x1MDAwNKK0Z1x1MDAxOan7NL2d8OpE7TXY/Yj6opmoKytUyp/M08LZMjvx9DPwtPNUokXwU8FcYlHyWDRdQdHgYPvhL4BGL5tpdJtzPFhUXCJ+YtHjsChzXHUwMDE2pDaClypCqebdOeS3JNE5zJa08iHNXHUwMDAwXHUwMDExyb9u/2NTwYJkuk+iW8mozqFeY92PQ9/tXG7wto/taotUJdYpwU5sXHUwMDE3WMfrxyiRc88q1jH1XHR2ciXfSfbNkOnGw/bUK9ixgJ8uxfo0jeqcXFz+1ivnvviw+v2vV813Y9F4e4Cg81xcgUuUPZSGsCpTXHT7XHUwMDAyXHUwMDFja0FcdTAwMTiGXHUwMDAxXG6AsJa8hUksMVx1MDAxM1Jcboa4llrRqkVcdTAwMTkohlx1MDAxMGegdsBpXHUwMDFjqVx1MDAxNlx1MDAxNqks30Jw7Fx1MDAxYaQ0XHUwMDEwjHKsXHUwMDE2b9rCnqBcdTAwMDBH+3RSMoJluUZcdTAwMTT2dEBcdTAwMTVlXGJru1x1MDAxMaI0b+NFzSiSRFwi4Fx1MDAxMSzhj2uQ8Vx1MDAwMNlvd1x1MDAwMFIoXHUwMDExTMpme5iA15dvyXWlg1x1MDAxY1x1MDAwNeBgVb5bzIk9OEzB70pKjVV5xLuwJ1x1MDAwMkokp1JcdTAwMTKikcKk2Vx1MDAxY0GKI6ZcdTAwMTBGWjJafjnBvlx1MDAwNEBcdTAwMDZrJCTBnFxuyklcdTAwMGL/VWfAPr9vUUdjpjnWSiNcIlxiZMGuXHRJXHUwMDAzpJCGcSkmqGhhXHUwMDBlJk1cdTAwMGLMNSYwOMlEpUdSXHUwMDA1MFx1MDAxZSZcYpFcdTAwMTLB6FhcdTAwMGJ7XHUwMDBlZCl0xTWnWEBUiVjcXCJcdTAwMDQgloQmkkCqL1x1MDAxNFx1MDAxMbJiTlx1MDAwN1x1MDAxYXCiXHUwMDE1wUKCw1tEXHUwMDAwo0JprVx1MDAwNFGES1x1MDAwNbPv2tM8gEWSa4UkoFx1MDAxZqNcdTAwMTaAZcJBrEZVRGCEXHUwMDAzykWJ11x1MDAxNlxiY1xuPERcdMyrplrU7clcdTAwMDBmSjOOKaKYM93CnuZcdTAwMWNyV6owZbBcXOuKXHUwMDAzIfG1a1xmV1x1MDAxY2JXKYJaeJBXXHK06EK1XHUwMDA2dTB5VqtcdEnGLL9MJ5MoXHUwMDA3kvnVXHUwMDEyxFx1MDAxYfnlYZZfgKSJklE1y5ykw4Kf0+w2yp20avl11+bjfoU++FQ2XFxcdTAwMWJcdTAwMDZCleVtXrI2mDK7Nclw747uPONw4P5cdTAwMTaufWtF3diEa3JcdTAwMDRG416rqz9cdTAwMTPfplx1MDAwZjuzy6tm8dniifNu9Vn9XG5cdTAwMGZF66dcInCAYVx0XHUwMDEwyq76Vlx1MDAxMiFqzp3tn5VcdTAwMWN1toBOarSFXHUwMDFhxX6pp8CgXHUwMDE50Fx1MDAxM/dw/u/k6DlcdTAwMTBcdTAwMGZ0XHUwMDFj1mklgL5cdTAwMTVcIsb5jnJhQ1x1MDAwN0ryUmCiRmZvtklosJRcdTAwMTGFMGxcXPybLYpAV1xi0ctPXHUwMDE0tE1Vjew/Rlx1MDAxMMlzJlx1MDAwNbXGJGrBwJXaolwiZ1ij/Gnuj1x1MDAwNv3GNGFcdTAwMGJWblZojSZcdTAwMTlcdFx1MDAxNmmMXHUwMDE1Slx1MDAxNFZLrzGyXHUwMDAz9Fx1MDAwMFKbucCYJ1x1MDAwM82qsy7rXHUwMDExR5IvXHUwMDEyMj/QcMiC3KTBb4IhXHUwMDA1gGBcdTAwMDJcdTAwMTLgkF1cdTAwMTHNqWfXdWBlaZlheNVcdTAwMTa0muA1y81KbVx1MDAxMSxcdTAwMTJcdTAwMTGqraj1qy1truVoTT/MSL/btbNentWqPZvke04ldVxi5bflrMzL0nzXzZqv4fSCj95jfP18zUnvXHUwMDFkR+8p6vXAXHUwMDFlckxcdFxuXHJ353n9S9J7VL9cdTAwMDC5R1x1MDAxMfPjoGfQe6zFXHUwMDBl2LNcbj7dqE9Oem937Zrek827rMdcdTAwMTN8qsVcdTAwMWX5sVx1MDAxNJ9usVn3bSu+51FQh9B6W1x1MDAwZlxcvSy1975Z7TWdgvGRe8LRNie5d+z/osDvXHUwMDBiTyBZtF2kTnrPvvz395r3MXxcdTAwMDWfpY29mf+wilx1MDAwZjfrK/9cdTAwMWS+5meKJ8Hn3YOK4Fx1MDAxM1p7iq5DKj5PyXVcdTAwMTJ8347gey5cdTAwMTl1XGLJt+144MtSfD8sXHUwMDE039liuvvhdHqTXHUwMDAzZa9cdTAwMWNcdTAwMDMyJFx1MDAxYdZOZ87LcjPtr05mXHUwMDE2RT+D/66S8Daut9n/XHUwMDE4mYeLddX13fXFtby6WvR4wfw/38d5dFx1MDAwMy6fb/bantj+XHUwMDE1PrGSzCyKvvxcdTAwMGaSYtasIn0=<!-- payload-end --><pict-renderer-graph:source xmlns:pict-renderer-graph="https://fable-retold.github.io/pict-renderer-graph/ns/v1"><![CDATA[{"type":"flowgraph","mermaid":"graph TB\n subgraph SVG[\"SVG Canvas\"]\n Grid[\"Grid Background (pattern)\"]\n subgraph Viewport[\"Viewport Group (pan/zoom transform)\"]\n Connections[\"Connections Layer (bezier/orthogonal paths)\"]\n Nodes[\"Nodes Layer (rect + ports + labels)\"]\n Tethers[\"Tethers Layer (panel-to-node lines)\"]\n Panels[\"Panels Layer (foreignObject panels)\"]\n end\n end\n\n Grid --> Viewport\n Connections --> Nodes\n Nodes --> Tethers\n Tethers --> Panels\n\n style SVG fill:#f5f5f5,stroke:#bdbdbd,color:#333\n style Viewport fill:#e3f2fd,stroke:#42a5f5,color:#333\n","style":"notebook"}]]></pict-renderer-graph:source></metadata><defs><style class="style-fonts">
|
|
2
|
+
@font-face { font-family: Excalifont; src: url(data:font/woff2;base64,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); }</style></defs><g stroke-linecap="round" transform="translate(10 10) rotate(0 319.5 434.5)"><path d="M32 0 C149.49 -1.18, 266.62 -1.36, 607 0 M607 0 C627.66 1.12, 639.97 12.16, 639 32 M639 32 C639.66 223.96, 639.97 414.58, 639 837 M639 837 C638.68 858.07, 626.5 869.57, 607 869 M607 869 C394.72 867.8, 181.23 868.08, 32 869 M32 869 C11.85 870.65, 0.88 859.04, 0 837 M0 837 C1.36 656.1, 1.25 474.66, 0 32 M0 32 C0.55 11.88, 11.86 -1.26, 32 0" stroke="var(--diagram-deemphasis, #8A7F72)" stroke-width="1.5" fill="none" stroke-dasharray="8 9"/></g><g transform="translate(10 15) rotate(0 319.5 10.5)"><text x="319.5" y="13.215" font-family="Excalifont, Xiaolai, sans-serif, Segoe UI Emoji" font-size="15px" fill="var(--diagram-deemphasis, #8A7F72)" text-anchor="middle" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">SVG Canvas</text></g><g stroke-linecap="round" transform="translate(30 201) rotate(0 299.5 316.5)"><path d="M32 0 C140.8 -0.09, 249.62 -0.82, 567 0 M567 0 C588.79 1.84, 599.4 11.57, 599 32 M599 32 C597.87 181.03, 597.08 329.79, 599 601 M599 601 C600.01 622.89, 587.84 634.92, 567 633 M567 633 C408.53 634.17, 248.57 634.27, 32 633 M32 633 C9.51 632.95, 1.34 620.52, 0 601 M0 601 C-0.96 386.33, 0.13 170.37, 0 32 M0 32 C-1.79 12.41, 11.89 1.72, 32 0" stroke="var(--diagram-deemphasis, #8A7F72)" stroke-width="1.5" fill="none" stroke-dasharray="8 9"/></g><g transform="translate(30 206) rotate(0 299.5 10.5)"><text x="299.5" y="13.215" font-family="Excalifont, Xiaolai, sans-serif, Segoe UI Emoji" font-size="15px" fill="var(--diagram-deemphasis, #8A7F72)" text-anchor="middle" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">Viewport Group (pan/zoom transform)</text></g><g stroke-linecap="round" transform="translate(176 90) rotate(0 153.5 28)"><path d="M14 0 C70.73 -1.78, 126.7 -1.28, 293 0 M14 0 C93.25 0.31, 174.33 -0.83, 293 0 M293 0 C303.68 1.96, 308.3 6.66, 307 14 M293 0 C303.77 1.8, 308.39 5.99, 307 14 M307 14 C306.71 25.49, 305.4 35.72, 307 42 M307 14 C307.22 21.88, 306.12 29.15, 307 42 M307 42 C306.45 51.23, 303.08 55.07, 293 56 M307 42 C305.1 52.65, 302.34 57.97, 293 56 M293 56 C182.78 56.55, 71.53 56.68, 14 56 M293 56 C229.45 56.58, 166.63 56.95, 14 56 M14 56 C5.75 55.36, -1.85 52.97, 0 42 M14 56 C3.21 54.71, 1.26 50.27, 0 42 M0 42 C-0.74 33.93, -0.54 22.9, 0 14 M0 42 C0.16 30.19, 0.68 20.03, 0 14 M0 14 C-1.07 5.94, 6.16 -0.81, 14 0 M0 14 C-0.05 3.06, 6.76 1.28, 14 0" stroke="var(--diagram-ink, #1B1F23)" stroke-width="2" fill="none"/></g><g transform="translate(184 105.5) rotate(0 145.5 12.5)"><text x="145.5" y="17.619999999999997" font-family="Excalifont, Xiaolai, sans-serif, Segoe UI Emoji" font-size="20px" fill="var(--diagram-ink, #1B1F23)" text-anchor="middle" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">Grid Background (pattern)</text></g><g stroke-linecap="round" transform="translate(77 281) rotate(0 253 28)"><path d="M14 0 C111 1.5, 209.08 1.21, 492 0 M14 0 C125.77 -0.13, 238.43 0.19, 492 0 M492 0 C501.79 0.86, 504.59 3.87, 506 14 M492 0 C502.44 -1.14, 503.83 3.73, 506 14 M506 14 C505.83 22.98, 507.05 32.76, 506 42 M506 14 C505.16 24.33, 506.68 33.54, 506 42 M506 42 C507.73 50.67, 500.67 55.38, 492 56 M506 42 C504.43 51.63, 499.78 53.85, 492 56 M492 56 C386.85 54.87, 283.81 54.34, 14 56 M492 56 C322.18 55.26, 153.29 55.65, 14 56 M14 56 C2.76 57.53, 0.31 50.76, 0 42 M14 56 C2.94 55.92, 1.92 50.18, 0 42 M0 42 C-1.15 33.64, 1.72 27.07, 0 14 M0 42 C0.26 33.16, -0.94 25.32, 0 14 M0 14 C-0.96 3.4, 3.27 -1.25, 14 0 M0 14 C2.01 5.93, 5.77 -0.03, 14 0" stroke="var(--diagram-ink, #1B1F23)" stroke-width="2" fill="none"/></g><g transform="translate(85 296.5) rotate(0 245 12.5)"><text x="245" y="17.619999999999997" font-family="Excalifont, Xiaolai, sans-serif, Segoe UI Emoji" font-size="20px" fill="var(--diagram-ink, #1B1F23)" text-anchor="middle" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">Connections Layer (bezier/orthogonal paths)</text></g><g stroke-linecap="round" transform="translate(121 427) rotate(0 209 28)"><path d="M14 0 C93.31 -1.01, 172.9 -0.34, 404 0 M14 0 C96.84 -0.1, 179.24 0.5, 404 0 M404 0 C412.61 -1.66, 419.95 4.67, 418 14 M404 0 C411.62 0.57, 419.21 4.13, 418 14 M418 14 C416.78 24.32, 417.84 34.52, 418 42 M418 14 C417.96 20.68, 418.63 26.22, 418 42 M418 42 C417.88 49.45, 415.33 57.69, 404 56 M418 42 C417.48 51.68, 414.53 56.48, 404 56 M404 56 C309.01 56.56, 215.64 57.03, 14 56 M404 56 C273.46 55.04, 142.64 55.71, 14 56 M14 56 C5.72 57.47, -0.37 52.69, 0 42 M14 56 C6.6 56.46, 1.52 49.67, 0 42 M0 42 C1.25 34.38, 1.55 22.47, 0 14 M0 42 C0.43 30.54, -0.51 20.85, 0 14 M0 14 C-0.25 4.43, 4.31 0.65, 14 0 M0 14 C-0.86 3.5, 4.17 -1.19, 14 0" stroke="var(--diagram-ink, #1B1F23)" stroke-width="2" fill="none"/></g><g transform="translate(129 442.5) rotate(0 201 12.5)"><text x="201" y="17.619999999999997" font-family="Excalifont, Xiaolai, sans-serif, Segoe UI Emoji" font-size="20px" fill="var(--diagram-ink, #1B1F23)" text-anchor="middle" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">Nodes Layer (rect + ports + labels)</text></g><g stroke-linecap="round" transform="translate(121 573) rotate(0 209 28)"><path d="M14 0 C93.77 0.47, 173.45 2.43, 404 0 M14 0 C152.06 0.94, 290.62 0.94, 404 0 M404 0 C413.68 -0.31, 417.44 2.78, 418 14 M404 0 C411.09 -0.59, 418.62 3.47, 418 14 M418 14 C416.49 18.16, 419.23 25.94, 418 42 M418 14 C418.22 25.51, 417.75 34.25, 418 42 M418 42 C419.91 50.61, 413.31 56.19, 404 56 M418 42 C419.6 49.11, 411.15 58.24, 404 56 M404 56 C251.48 53.91, 98.87 55.05, 14 56 M404 56 C278.14 53.25, 153.14 53.66, 14 56 M14 56 C6.24 57.03, -0.66 49.65, 0 42 M14 56 C3.31 56.63, -1.67 50.93, 0 42 M0 42 C-0.03 29.33, -0.43 21.06, 0 14 M0 42 C0.27 35.24, 0.34 27.4, 0 14 M0 14 C1.6 3.54, 5.33 -0.93, 14 0 M0 14 C-0.78 5.97, 6.63 1.07, 14 0" stroke="var(--diagram-ink, #1B1F23)" stroke-width="2" fill="none"/></g><g transform="translate(129 588.5) rotate(0 201 12.5)"><text x="201" y="17.619999999999997" font-family="Excalifont, Xiaolai, sans-serif, Segoe UI Emoji" font-size="20px" fill="var(--diagram-ink, #1B1F23)" text-anchor="middle" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">Tethers Layer (panel-to-node lines)</text></g><g stroke-linecap="round" transform="translate(121 719) rotate(0 209 28)"><path d="M14 0 C94.08 0.7, 171.96 -0.95, 404 0 M14 0 C155.7 2.18, 296.63 1.37, 404 0 M404 0 C413.95 -0.13, 417.77 2.88, 418 14 M404 0 C411.21 0.14, 417.21 5.12, 418 14 M418 14 C417.61 19.61, 417.16 26.83, 418 42 M418 14 C418.01 21.61, 417.3 31, 418 42 M418 42 C419.36 50.2, 413.99 57.12, 404 56 M418 42 C417.48 50.72, 412.36 56.23, 404 56 M404 56 C317.79 54.38, 232.56 55.39, 14 56 M404 56 C268.72 55.68, 132.65 55.55, 14 56 M14 56 C4.99 54.19, -0.72 49.85, 0 42 M14 56 C3.88 54.52, -0.12 52.17, 0 42 M0 42 C1.61 34.76, -0.58 28.55, 0 14 M0 42 C-0.1 36.36, 0.57 30.07, 0 14 M0 14 C-1.19 3.58, 4.4 -0.55, 14 0 M0 14 C-0.86 3.46, 2.37 1.38, 14 0" stroke="var(--diagram-ink, #1B1F23)" stroke-width="2" fill="none"/></g><g transform="translate(129 734.5) rotate(0 201 12.5)"><text x="201" y="17.619999999999997" font-family="Excalifont, Xiaolai, sans-serif, Segoe UI Emoji" font-size="20px" fill="var(--diagram-ink, #1B1F23)" text-anchor="middle" style="white-space: pre;" direction="ltr" dominant-baseline="alphabetic">Panels Layer (foreignObject panels)</text></g><g stroke-linecap="round"><g transform="translate(329.5 146) rotate(0 0.3191175445253407 67.5)"><path d="M0 0 C0.35 3.42, -1 5.52, 0 16 M0 0 C0.38 6.86, -0.65 11.63, 0 16 M0 16 C0.41 17.62, -0.31 19.26, 0 21.96 M0 16 C0.2 17.62, 0.13 18.93, 0 21.96 M0 21.96 C-0.07 24.26, -0.41 26.18, 0.02 27.84 M0 21.96 C-0.15 23.65, -0.14 25.55, 0.02 27.84 M0.02 27.84 C-0.27 30.04, -0.1 30.62, 0.04 33.64 M0.02 27.84 C0.15 29.27, 0.11 30.31, 0.04 33.64 M0.04 33.64 C0.32 35.28, 0.02 36.04, 0.06 39.38 M0.04 33.64 C-0.1 35.36, 0.16 36.84, 0.06 39.38 M0.06 39.38 C0.16 40.24, 0 42.28, 0.09 45.07 M0.06 39.38 C-0.16 40.82, 0.38 42.89, 0.09 45.07 M0.09 45.07 C0 47.11, 0.31 49.27, 0.13 50.71 M0.09 45.07 C0.14 47.14, -0.13 49.13, 0.13 50.71 M0.13 50.71 C0.71 51.79, -0.29 53.77, 0.17 56.33 M0.13 50.71 C0.38 52.05, 0.29 53.5, 0.17 56.33 M0.17 56.33 C0.12 57.21, 0 58.57, 0.21 61.92 M0.17 56.33 C0.3 58.5, 0.41 60.28, 0.21 61.92 M0.21 61.92 C0.25 64, -0.31 65.79, 0.25 67.5 M0.21 61.92 C0.08 63.31, 0.36 65, 0.25 67.5 M0.25 67.5 C-0.02 69.12, 0.2 70.36, 0.29 73.08 M0.25 67.5 C0.4 68.92, 0.02 69.65, 0.29 73.08 M0.29 73.08 C0.6 74.48, 0.16 75.8, 0.33 78.67 M0.29 73.08 C0.39 75.45, 0.31 77.71, 0.33 78.67 M0.33 78.67 C0.46 80.04, 0.21 80.96, 0.37 84.29 M0.33 78.67 C0.35 80.08, 0.26 81.91, 0.37 84.29 M0.37 84.29 C0.51 85.68, 0.58 88.01, 0.41 89.93 M0.37 84.29 C0.65 85.95, 0.52 87.8, 0.41 89.93 M0.41 89.93 C0.39 92.11, 0.66 93.55, 0.44 95.62 M0.41 89.93 C0.6 91.4, 0.4 92.54, 0.44 95.62 M0.44 95.62 C0.09 97.15, 0.58 98.88, 0.46 101.36 M0.44 95.62 C0.35 96.68, 0.45 98.46, 0.46 101.36 M0.46 101.36 C-0.03 103.39, 0.14 105.73, 0.48 107.16 M0.46 101.36 C0.41 103.36, 0.21 105.24, 0.48 107.16 M0.48 107.16 C1.05 108.82, 0.22 110.54, 0.5 113.04 M0.48 107.16 C0.3 109.03, 0.3 111.02, 0.5 113.04 M0.5 113.04 C0.15 114.56, 0.3 117.4, 0.5 119 M0.5 113.04 C0.52 115.31, 0.38 117.18, 0.5 119 M0.5 119 C1.4 121.38, -0.92 126.32, 0.5 135 M0.5 119 C1.08 125.46, 1.28 131.43, 0.5 135" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g><g transform="translate(329.5 146) rotate(0 0.3191175445253407 67.5)"><path d="M-1.32 127.21 C-0.78 128.87, -1.08 129.87, 0.5 135 M-1.32 127.21 C-0.43 130.57, -0.24 132.87, 0.5 135" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g><g transform="translate(329.5 146) rotate(0 0.3191175445253407 67.5)"><path d="M4.11 127.86 C3.55 129.42, 2.13 130.29, 0.5 135 M4.11 127.86 C2.91 130.95, 1 133, 0.5 135" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g></g><mask/><g stroke-linecap="round"><g transform="translate(330 337) rotate(0 -0.06139528710855302 45)"><path d="M0 0 C-0.29 3.5, 0.02 5.99, 0 16 M0 0 C-0.31 3.94, -0.48 7.67, 0 16 M0 16 C-0.01 17.27, -0.35 18.36, 0 19.88 M0 16 C0.12 17.5, 0.12 18.8, 0 19.88 M0 19.88 C-0.17 21.02, -0.09 22.8, 0 23.52 M0 19.88 C0.12 21.42, 0.06 22.52, 0 23.52 M0 23.52 C-0.09 24.48, -0.31 26.03, 0 26.96 M0 23.52 C-0.08 24.38, -0.08 25.06, 0 26.96 M0 26.96 C0.22 27.72, 0.08 28.66, 0 30.23 M0 26.96 C0.05 27.92, -0.14 28.93, 0 30.23 M0 30.23 C0.05 30.57, -0.28 31.8, 0 33.36 M0 30.23 C-0.13 31.43, 0.03 32.56, 0 33.36 M0 33.36 C-0.25 34.59, -0.02 35.89, 0 36.37 M0 33.36 C-0.1 34.42, -0.07 35.25, 0 36.37 M0 36.37 C0.02 37, -0.17 37.46, 0 39.29 M0 36.37 C-0.08 37.24, 0.06 38.34, 0 39.29 M0 39.29 C-0.13 39.9, -0.05 40.59, 0 42.16 M0 39.29 C0.05 40.36, 0.15 41.42, 0 42.16 M0 42.16 C0.05 43.05, 0.1 44.33, 0 45 M0 42.16 C-0.1 43.2, -0.12 44.15, 0 45 M0 45 C0.12 45.85, -0.24 46.71, 0 47.84 M0 45 C-0.09 45.81, 0.11 46.39, 0 47.84 M0 47.84 C0.05 49.06, -0.28 49.74, 0 50.71 M0 47.84 C0.1 48.78, 0.05 49.55, 0 50.71 M0 50.71 C-0.21 52.04, -0.04 52.81, 0 53.63 M0 50.71 C0.05 51.83, -0.06 52.81, 0 53.63 M0 53.63 C0.09 54.51, -0.21 54.91, 0 56.64 M0 53.63 C-0.07 54.2, -0.03 54.97, 0 56.64 M0 56.64 C-0.13 57.83, 0 58.48, 0 59.77 M0 56.64 C0.17 57.37, 0.05 58.21, 0 59.77 M0 59.77 C0.1 60.95, 0.15 61.66, 0 63.04 M0 59.77 C0.07 60.82, 0.02 61.86, 0 63.04 M0 63.04 C-0.25 64.67, 0 65.71, 0 66.48 M0 63.04 C-0.04 64.3, 0 65.46, 0 66.48 M0 66.48 C-0.11 67.2, -0.19 68.71, 0 70.12 M0 66.48 C0.09 67.8, 0.09 68.98, 0 70.12 M0 70.12 C-0.22 71.13, -0.21 72.47, 0 74 M0 70.12 C-0.18 71.18, 0.06 72.48, 0 74 M0 74 C-1.26 78.4, 1.02 83.49, 0 90 M0 74 C-0.54 80.54, 0.29 86.6, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g><g transform="translate(330 337) rotate(0 -0.06139528710855302 45)"><path d="M-2.68 82.46 C-2.29 84.11, -1.59 85.25, 0 90 M-2.68 82.46 C-2.22 84.35, -1.69 86.11, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g><g transform="translate(330 337) rotate(0 -0.06139528710855302 45)"><path d="M2.79 82.5 C2.09 84.17, 1.68 85.31, 0 90 M2.79 82.5 C1.99 84.33, 1.26 86.08, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g></g><mask/><g stroke-linecap="round"><g transform="translate(330 483) rotate(0 -0.10153113909771605 45)"><path d="M0 0 C-0.53 3.22, 0.05 7.93, 0 16 M0 0 C0.05 5.3, -0.87 9.71, 0 16 M0 16 C-0.03 17.24, -0.02 17.84, 0 19.88 M0 16 C0.18 16.96, -0.12 17.84, 0 19.88 M0 19.88 C-0.2 21.02, 0.01 22.97, 0 23.52 M0 19.88 C0.09 20.62, 0.02 21.55, 0 23.52 M0 23.52 C0.09 24.41, 0.33 25.33, 0 26.96 M0 23.52 C0.13 24.6, -0.12 25.45, 0 26.96 M0 26.96 C-0.18 27.83, 0.17 28.5, 0 30.23 M0 26.96 C-0.12 28.29, 0.15 29.22, 0 30.23 M0 30.23 C0.23 31.1, -0.27 31.82, 0 33.36 M0 30.23 C0.08 30.95, -0.04 31.96, 0 33.36 M0 33.36 C-0.3 34.23, 0.11 35.52, 0 36.37 M0 33.36 C0.02 34.46, -0.04 35.37, 0 36.37 M0 36.37 C-0.1 37.29, 0.08 38.79, 0 39.29 M0 36.37 C0.08 37.27, -0.06 38.26, 0 39.29 M0 39.29 C0.25 39.92, -0.06 40.54, 0 42.16 M0 39.29 C0.11 40.08, 0.09 41.05, 0 42.16 M0 42.16 C-0.04 43.01, 0.21 44.38, 0 45 M0 42.16 C-0.12 42.74, -0.06 43.54, 0 45 M0 45 C0.17 45.82, -0.05 46.64, 0 47.84 M0 45 C0.12 46.04, -0.03 46.96, 0 47.84 M0 47.84 C-0.09 48.89, 0.09 50.06, 0 50.71 M0 47.84 C0.15 48.81, 0.13 49.74, 0 50.71 M0 50.71 C0.2 51.7, 0.15 52.45, 0 53.63 M0 50.71 C0.07 51.38, -0.01 51.96, 0 53.63 M0 53.63 C0.05 54.39, -0.12 55.16, 0 56.64 M0 53.63 C-0.11 54.43, -0.11 54.91, 0 56.64 M0 56.64 C0.29 57.26, -0.29 58.03, 0 59.77 M0 56.64 C0.09 57.9, 0.06 58.8, 0 59.77 M0 59.77 C-0.31 60.72, -0.07 61.67, 0 63.04 M0 59.77 C0.1 60.43, -0.04 60.97, 0 63.04 M0 63.04 C-0.15 64.07, -0.22 65.69, 0 66.48 M0 63.04 C-0.12 64.31, -0.04 65.45, 0 66.48 M0 66.48 C-0.02 67.28, 0.01 68.3, 0 70.12 M0 66.48 C-0.2 67.61, -0.2 68.79, 0 70.12 M0 70.12 C0.16 71.99, 0.24 72.95, 0 74 M0 70.12 C0.06 71.16, 0.06 71.76, 0 74 M0 74 C0.68 79.85, -1.03 84.59, 0 90 M0 74 C-0.55 80.36, 0.16 87.09, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g><g transform="translate(330 483) rotate(0 -0.10153113909771605 45)"><path d="M-2.8 82.51 C-2.5 84.03, -1.64 86.27, 0 90 M-2.8 82.51 C-1.94 84.98, -1.56 87.04, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g><g transform="translate(330 483) rotate(0 -0.10153113909771605 45)"><path d="M2.67 82.46 C1.86 83.97, 1.61 86.22, 0 90 M2.67 82.46 C1.9 84.99, 0.64 87.06, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g></g><mask/><g stroke-linecap="round"><g transform="translate(330 629) rotate(0 -0.12991085730971008 45)"><path d="M0 0 C0.24 1.87, 0.28 5.96, 0 16 M0 0 C-0.18 5.45, -0.16 9.77, 0 16 M0 16 C-0.02 17.23, 0.17 18.68, 0 19.88 M0 16 C0.01 16.66, -0.17 17.87, 0 19.88 M0 19.88 C0.37 20.45, 0.12 21.92, 0 23.52 M0 19.88 C0.15 20.75, 0.16 21.46, 0 23.52 M0 23.52 C-0.17 24.63, -0.27 24.9, 0 26.96 M0 23.52 C0.06 24.82, 0.04 26.06, 0 26.96 M0 26.96 C0.23 28.09, -0.1 29.62, 0 30.23 M0 26.96 C-0.05 27.72, 0.15 28.4, 0 30.23 M0 30.23 C-0.06 31.49, 0.05 32.64, 0 33.36 M0 30.23 C0.05 31.34, -0.14 32.68, 0 33.36 M0 33.36 C-0.08 34.37, 0.25 35.23, 0 36.37 M0 33.36 C0.07 34.31, -0.01 35.46, 0 36.37 M0 36.37 C-0.12 37.02, 0 37.82, 0 39.29 M0 36.37 C-0.13 37.25, -0.15 38.1, 0 39.29 M0 39.29 C-0.2 40.42, 0.26 41.26, 0 42.16 M0 39.29 C-0.07 40.16, 0.04 40.95, 0 42.16 M0 42.16 C-0.17 42.84, -0.2 43.49, 0 45 M0 42.16 C0.1 42.8, -0.04 43.4, 0 45 M0 45 C-0.13 45.52, 0.02 46.4, 0 47.84 M0 45 C0.11 45.81, 0 46.56, 0 47.84 M0 47.84 C0.02 48.17, 0.23 48.94, 0 50.71 M0 47.84 C-0.06 49.05, -0.03 50.09, 0 50.71 M0 50.71 C-0.11 51.78, -0.16 52.88, 0 53.63 M0 50.71 C-0.15 51.52, -0.04 52.15, 0 53.63 M0 53.63 C0.02 54.59, -0.28 55.86, 0 56.64 M0 53.63 C-0.01 54.55, -0.08 55.47, 0 56.64 M0 56.64 C-0.03 57.91, -0.18 58.91, 0 59.77 M0 56.64 C0.09 57.19, -0.01 57.81, 0 59.77 M0 59.77 C0.06 60.78, 0.28 62.46, 0 63.04 M0 59.77 C0.05 60.97, -0.12 62.35, 0 63.04 M0 63.04 C-0.31 63.59, 0.27 64.19, 0 66.48 M0 63.04 C-0.09 64.01, 0.1 64.64, 0 66.48 M0 66.48 C-0.31 67.02, 0.34 68.42, 0 70.12 M0 66.48 C0.11 67.65, 0.2 68.99, 0 70.12 M0 70.12 C0.01 71.28, 0.09 71.92, 0 74 M0 70.12 C0.03 70.92, 0 71.83, 0 74 M0 74 C-0.35 78.78, 0.05 79.72, 0 90 M0 74 C-0.63 78.21, -0.59 81.72, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g><g transform="translate(330 629) rotate(0 -0.12991085730971008 45)"><path d="M-3.18 82.66 C-2.41 83.44, -1.74 85.35, 0 90 M-3.18 82.66 C-2.35 85.18, -1.41 87.15, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g><g transform="translate(330 629) rotate(0 -0.12991085730971008 45)"><path d="M2.28 82.33 C1.94 83.21, 1.5 85.19, 0 90 M2.28 82.33 C1.53 84.96, 0.87 87.03, 0 90" stroke="var(--diagram-link, #2E7D74)" stroke-width="2" fill="none"/></g></g><mask/></svg>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# Example Applications
|
|
2
|
+
|
|
3
|
+
## Live Examples
|
|
4
|
+
|
|
5
|
+
<!-- docuserve:examples-index:start -->
|
|
6
|
+
| Example | Complexity | Summary | Live |
|
|
7
|
+
|---------|------------|---------|------|
|
|
8
|
+
| [Simple Cards](simple%5Fcards/README.md) | Basic | Twelve custom PictFlowCard subclasses across six categories - every panel type (Markdown / Template / Form / View), every BodyContent renderer (SVG / HTML / Canvas), wrapped in a multi-page Pict shell with router-driven navigation and a curated sample-graph catalog. | [Launch](examples/simple%5Fcards/index.html) |
|
|
9
|
+
<!-- docuserve:examples-index:end -->
|