@next-bricks/diagram 0.41.0 → 0.41.1

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.
Files changed (7) hide show
  1. package/dist/bricks.json +3 -3
  2. package/dist/examples.json +3 -3
  3. package/dist/{index.9b96d155.js → index.4a82a761.js} +2 -2
  4. package/dist/{index.9b96d155.js.map → index.4a82a761.js.map} +1 -1
  5. package/dist/manifest.json +145 -145
  6. package/dist/types.json +3231 -3231
  7. package/package.json +2 -2
package/dist/bricks.json CHANGED
@@ -6,8 +6,8 @@
6
6
  ],
7
7
  "elements": [
8
8
  "eo-diagram",
9
- "eo-display-canvas",
10
- "eo-draw-canvas"
9
+ "eo-draw-canvas",
10
+ "eo-display-canvas"
11
11
  ],
12
12
  "processors": [],
13
13
  "editors": [],
@@ -16,5 +16,5 @@
16
16
  "basic.lock-body-scroll"
17
17
  ]
18
18
  },
19
- "filePath": "bricks/diagram/dist/index.9b96d155.js"
19
+ "filePath": "bricks/diagram/dist/index.4a82a761.js"
20
20
  }
package/dist/examples.json CHANGED
@@ -5,10 +5,10 @@
5
5
  "diagram.editable-label": {
6
6
  "doc": "构件 `diagram.editable-label`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: diagram.editable-label\nproperties:\n type: line\n label: Relation\nevents:\n label.change:\n action: message.success\n args:\n - \"<% `Label changed to: ${EVENT.detail}` %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <diagram.editable-label\n# type=\"line\"\n# label=\"Relation\"\n# id=\"brick-1\"\n# ></diagram.editable-label>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"label.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% `Label changed to: ${EVENT.detail}` %>\",\n# });\n# });\n# </script>\n# \n```\n"
7
7
  },
8
- "eo-display-canvas": {
9
- "doc": "用于展示查看的画布构件。\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"decorator\",\n id: \"container-1\",\n decorator: \"container\",\n view: {\n x: 50,\n y: 400,\n width: 280,\n height: 120,\n direction: \"top\",\n text: \" 上层服务\"\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n data: {\n virtual: false,\n showStartArrow: false,\n strokeColor:\"red\",\n strokeWidth: 5,\n }\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"W\",\n data: {\n virtual: false,\n showStartArrow: true,\n strokeColor:\"pink\",\n animate:{\n useAnimate: true,\n duration: 4 \n } \n }\n }, \n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n showStartArrow: true,\n strokeColor:\"blue\",\n animate:{\n useAnimate: true \n } \n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n containerId: [\"X\",\"Y\",\"Z\"].includes(id)?\"container-1\":undefined,\n data: {\n name: `Node ${id}`,\n },\n view: {\n x: Math.round(\n id === \"X\"\n ? 200 + Math.random() * 200\n : id === \"Y\"\n ? Math.random() * 300\n : 300 + Math.random() * 300\n ),\n y: (id === \"X\" ? 0 : 300) + Math.round((Math.random() * 200)),\n width: 60,\n height: 60,\n }\n }))\n ).concat([ \n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n }, \n ])\n %>\n - name: activeTarget\n - name: targetCell\n children:\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-display-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: true\n dashed: <% DATA.edge?.data?.virtual %>\n strokeColor: <% DATA.edge?.data?.strokeColor %>\n showStartArrow: <% DATA.edge?.data?.showStartArrow %>\n strokeWidth: <% DATA.edge?.data?.strokeWidth %>\n animate: <% DATA.edge?.data?.animate %>\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-display-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# id=\"brick-1\"\n# ></eo-display-canvas>\n# </div>\n# </div>\n# <eo-context-menu\n# actions=\"&lt;%=\n# [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.defaultNodeSize = [60, 60];\n# brick_1.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_1.defaultEdgeLines = [\n# {\n# if: true,\n# dashed: \"<% DATA.edge?.data?.virtual %>\",\n# strokeColor: \"<% DATA.edge?.data?.strokeColor %>\",\n# showStartArrow: \"<% DATA.edge?.data?.showStartArrow %>\",\n# strokeWidth: \"<% DATA.edge?.data?.strokeWidth %>\",\n# animate: \"<% DATA.edge?.data?.animate %>\",\n# },\n# ];\n# brick_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n\n### Force layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n data: {\n name: `Node ${id}`,\n },\n view: {\n width: 60,\n height: 60,\n }\n }))\n ).concat([\n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n },\n ])\n %>\n - name: activeTarget\n - name: targetCell\n children:\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-display-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n layout: force\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: <% DATA.edge.data?.virtual %>\n dashed: true\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-display-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# layout=\"force\"\n# id=\"brick-1\"\n# ></eo-display-canvas>\n# </div>\n# </div>\n# <eo-context-menu\n# actions=\"&lt;%=\n# [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.defaultNodeSize = [60, 60];\n# brick_1.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_1.defaultEdgeLines = [\n# {\n# if: \"<% DATA.edge.data?.virtual %>\",\n# dashed: true,\n# },\n# ];\n# brick_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n\n### Dagre layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n data: {\n name: `Node ${id}`,\n },\n view: {\n width: 60,\n height: 60,\n }\n }))\n ).concat([\n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n },\n ])\n %>\n - name: activeTarget\n - name: targetCell\n children:\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-display-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n layout: dagre\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: <% DATA.edge.data?.virtual %>\n dashed: true\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-display-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# layout=\"dagre\"\n# id=\"brick-1\"\n# ></eo-display-canvas>\n# </div>\n# </div>\n# <eo-context-menu\n# actions=\"&lt;%=\n# [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.defaultNodeSize = [60, 60];\n# brick_1.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_1.defaultEdgeLines = [\n# {\n# if: \"<% DATA.edge.data?.virtual %>\",\n# dashed: true,\n# },\n# ];\n# brick_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n\n### Degraded diagram\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n ((...seeds) => seeds.map((seed) => ({\n type: \"node\",\n id: seed,\n data: {\n name: seed,\n },\n })))(\n ...(\n new Array(500).fill(null).map((_, i) => String(i))\n )\n )\n %>\n - name: activeTarget\n - name: targetCell\n children:\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-display-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n layout: force\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: true\n dashed: <% DATA.edge?.data?.virtual %>\n strokeColor: <% DATA.edge?.data?.strokeColor %>\n showStartArrow: <% DATA.edge?.data?.showStartArrow %>\n strokeWidth: <% DATA.edge?.data?.strokeWidth %>\n animate: <% DATA.edge?.data?.animate %>\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-display-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# layout=\"force\"\n# id=\"brick-1\"\n# ></eo-display-canvas>\n# </div>\n# </div>\n# <eo-context-menu\n# actions=\"&lt;%=\n# [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.defaultNodeSize = [60, 60];\n# brick_1.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_1.defaultEdgeLines = [\n# {\n# if: true,\n# dashed: \"<% DATA.edge?.data?.virtual %>\",\n# strokeColor: \"<% DATA.edge?.data?.strokeColor %>\",\n# showStartArrow: \"<% DATA.edge?.data?.showStartArrow %>\",\n# strokeWidth: \"<% DATA.edge?.data?.strokeWidth %>\",\n# animate: \"<% DATA.edge?.data?.animate %>\",\n# },\n# ];\n# brick_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n"
10
- },
11
8
  "eo-draw-canvas": {
12
9
  "doc": "用于手工绘图的画布。\n\n注意：将配套另外一个用于展示的画布构件。\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"decorator\",\n id: \"container-1\",\n decorator: \"container\",\n view: {\n x: 50,\n y: 400,\n width: 280,\n height: 120,\n direction: \"top\",\n text: \" 上层服务\"\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n containerId: id===\"W\"?\"container-1\":undefined,\n data: {\n name: `Node ${id}`,\n },\n view: {\n x: Math.round(\n id === \"X\"\n ? 200 + Math.random() * 200\n : id === \"Y\"\n ? Math.random() * 300\n : 300 + Math.random() * 300\n ),\n y: (id === \"X\" ? 0 : 300) + Math.round((Math.random() * 200)),\n width: 60,\n height: 60,\n }\n }))\n ).concat([\n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n },\n ])\n %>\n - name: dragging\n - name: activeTarget\n - name: targetCell\n - name: scale\n value: 1\n children:\n - brick: div\n properties:\n style:\n width: 180px\n display: flex\n flexDirection: column\n gap: 1em\n border-right: \"1px solid #ccc\"\n overflow: scroll\n children:\n - brick: eo-button\n properties:\n textContent: Add random nodes\n events:\n click:\n target: eo-draw-canvas\n method: addNodes\n args:\n - |\n <%\n ((...seeds) => seeds.map((seed) => ({\n id: seed,\n data: {\n name: String(seed),\n },\n })))(\n Math.round(Math.random() * 1e6),\n Math.round(Math.random() * 1e6),\n Math.round(Math.random() * 1e6),\n )\n %>\n callback:\n success:\n action: console.log\n args:\n - Added nodes\n - <% EVENT.detail %>\n - brick: eo-button\n properties:\n textContent: \"Add edge: Y => Z\"\n events:\n click:\n target: eo-draw-canvas\n method: addEdge\n args:\n - source: Y\n target: Z\n data:\n virtual: true\n - brick: :forEach\n dataSource:\n - X\n - Y\n children:\n - brick: eo-button\n properties:\n textContent: <% `Add nodes below ${ITEM}` %>\n events:\n click:\n target: eo-draw-canvas\n method: updateCells\n args:\n - |\n <%\n CTX.initialCells.concat([\n {\n type: \"edge\",\n source: ITEM,\n target: \"U\",\n },\n {\n type: \"edge\",\n source: ITEM,\n target: \"V\",\n },\n {\n type: \"node\",\n id: \"U\",\n data: {\n name: \"U\"\n }\n },\n {\n type: \"node\",\n id: \"V\",\n data: {\n name: \"V\"\n }\n },\n ])\n %>\n - reason: add-related-nodes\n parent: <% ITEM %>\n callback:\n success:\n action: console.log\n - brick: hr\n properties:\n style:\n width: 100%\n - brick: h3\n properties:\n textContent: Drag nodes below\n - brick: :forEach\n dataSource: |\n <%\n [\"A\", \"B\", \"C\"].map((id) => ({\n type: \"node\",\n id,\n data: {\n name: `Node ${id}`,\n },\n }))\n %>\n children:\n - brick: diagram.experimental-node\n properties:\n textContent: <% ITEM.data.name %>\n usage: library\n events:\n drag.move:\n action: context.replace\n args:\n - dragging\n - |\n <% {position: EVENT.detail, ...ITEM} %>\n drag.end:\n - action: context.replace\n args:\n - dragging\n - null\n - target: eo-draw-canvas\n method: dropNode\n args:\n - position: <% EVENT.detail %>\n id: <% ITEM.id %>\n data: <% ITEM.data %>\n callback:\n success:\n if: <% EVENT.detail %>\n then:\n action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n else:\n action: message.warn\n args:\n - Unexpected drop position\n - brick: hr\n properties:\n style:\n width: 100%\n - brick: h3\n properties:\n textContent: Drag decorators below\n - brick: :forEach\n dataSource:\n - area\n - text\n - container.top\n - container.right\n - container.bottom\n - container.left\n children:\n - brick: diagram.experimental-node\n properties:\n textContent: <% _.upperFirst(ITEM) %>\n usage: library\n events:\n drag.move:\n action: context.replace\n args:\n - dragging\n - |\n <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM.split(\".\")[0]} %>\n drag.end:\n - action: context.replace\n args:\n - dragging\n - null\n - target: eo-draw-canvas\n method: dropDecorator\n args:\n - position: <% EVENT.detail %>\n decorator: <% ITEM.split(\".\")[0] %>\n text: <% ITEM %>\n direction: <% ITEM.split(\".\").pop() %>\n callback:\n success:\n if: <% EVENT.detail %>\n then:\n # action: message.success\n # args:\n # - <% JSON.stringify(EVENT.detail) %>\n else:\n action: message.warn\n args:\n - Unexpected drop position\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-draw-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n allowEdgeToArea: true\n dragBehavior: lasso\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n (CTX.activeTarget?.type === \"multi\"\n ? CTX.activeTarget.targets\n : CTX.activeTarget\n ? [CTX.activeTarget]\n : []\n ).some((target) => (\n target.type === \"node\" && target.id === DATA.node.id\n ))\n ? \"highlighted\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: <% DATA.edge.data?.virtual %>\n dashed: true\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cells.move:\n action: message.info\n args:\n - <% `You just moved ${EVENT.detail.length} cells` %>\n cell.resize:\n action: message.info\n args:\n - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n cells.delete:\n action: message.warn\n args:\n - |\n <% `You wanna delete ${EVENT.detail.length} cells?` %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n decorator.text.change:\n action: message.info\n args:\n - <% JSON.stringify(EVENT.detail) %>\n node.container.change:\n action: message.info\n args:\n - <% JSON.stringify(EVENT.detail) %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: diagram.experimental-node\n properties:\n usage: dragging\n textContent: |\n <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n decorator: |\n <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n style: |\n <%=\n {\n left: `${CTX.dragging?.position[0]}px`,\n top: `${CTX.dragging?.position[1]}px`,\n transform: `scale(${CTX.scale})`,\n transformOrigin: \"0 0\",\n padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n }\n %>\n hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n {\n text: \"添加边\",\n event: \"add-edge\",\n }\n ] : [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n events:\n add-edge:\n target: eo-draw-canvas\n method: manuallyConnectNodes\n args:\n - <% CTX.targetCell.id %>\n callback:\n success:\n target: eo-draw-canvas\n method: addEdge\n args:\n - source: <% EVENT.detail.source.id %>\n target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div\n# style=\"\n# width: 180px;\n# display: flex;\n# flex-direction: column;\n# gap: 1em;\n# border-right: 1px solid #ccc;\n# overflow: scroll;\n# \"\n# >\n# <eo-button id=\"brick-1\">Add random nodes</eo-button>\n# <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# <hr style=\"width: 100%\" />\n# <h3>Drag nodes below</h3>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# <hr style=\"width: 100%\" />\n# <h3>Drag decorators below</h3>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </div>\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-draw-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# allow-edge-to-area\n# drag-behavior=\"lasso\"\n# id=\"brick-6\"\n# ></eo-draw-canvas>\n# </div>\n# </div>\n# <diagram.experimental-node\n# usage=\"dragging\"\n# decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n# hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n# &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n# ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n# actions='&lt;%=\n# ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n# {\n# text: \"添加边\",\n# event: \"add-edge\",\n# }\n# ] : [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# '\n# id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.addNodes(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<%\\n ((...seeds) => seeds.map((seed) => ({\\n id: seed,\\n data: {\\n name: String(seed),\\n },\\n })))(\\n Math.round(Math.random() * 1e6),\\n Math.round(Math.random() * 1e6),\\n Math.round(Math.random() * 1e6),\\n )\\n%>\\n\"\n# );\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.updateCells(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# '<%\\n CTX.initialCells.concat([\\n {\\n type: \"edge\",\\n source: ITEM,\\n target: \"U\",\\n },\\n {\\n type: \"edge\",\\n source: ITEM,\\n target: \"V\",\\n },\\n {\\n type: \"node\",\\n id: \"U\",\\n data: {\\n name: \"U\"\\n }\\n },\\n {\\n type: \"node\",\\n id: \"V\",\\n data: {\\n name: \"V\"\\n }\\n },\\n ])\\n%>\\n',\n# { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n# );\n# });\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.addEventListener(\"drag.move\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_4.addEventListener(\"drag.end\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_4.addEventListener(\"drag.end\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.dropNode({\n# position: \"<% EVENT.detail %>\",\n# id: \"<% ITEM.id %>\",\n# data: \"<% ITEM.data %>\",\n# });\n# });\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.addEventListener(\"drag.move\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_5.addEventListener(\"drag.end\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_5.addEventListener(\"drag.end\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.dropDecorator({\n# position: \"<% EVENT.detail %>\",\n# decorator: '<% ITEM.split(\".\")[0] %>',\n# text: \"<% ITEM %>\",\n# direction: '<% ITEM.split(\".\").pop() %>',\n# });\n# });\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_6.defaultNodeSize = [60, 60];\n# brick_6.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n (CTX.activeTarget?.type === \"multi\"\\n ? CTX.activeTarget.targets\\n : CTX.activeTarget\\n ? [CTX.activeTarget]\\n : []\\n ).some((target) => (\\n target.type === \"node\" && target.id === DATA.node.id\\n ))\\n ? \"highlighted\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_6.defaultEdgeLines = [\n# {\n# if: \"<% DATA.edge.data?.virtual %>\",\n# dashed: true,\n# },\n# ];\n# brick_6.cells = \"<% CTX.initialCells %>\";\n# brick_6.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_6.addEventListener(\"cells.move\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% `You just moved ${EVENT.detail.length} cells` %>\",\n# });\n# });\n# brick_6.addEventListener(\"cell.resize\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n# });\n# });\n# brick_6.addEventListener(\"cells.delete\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"warn\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% `You wanna delete ${EVENT.detail.length} cells?` %>\\n\",\n# });\n# });\n# brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_6.addEventListener(\"decorator.text.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# brick_6.addEventListener(\"node.container.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# brick_6.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.addEventListener(\"add-edge\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.manuallyConnectNodes(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% CTX.targetCell.id %>\"\n# );\n# });\n# </script>\n# \n```\n\n### Force layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"decorator\",\n id: \"container-1\",\n decorator: \"container\",\n view: {\n x: 50,\n y: 400,\n width: 280,\n height: 120,\n direction: \"top\",\n text: \" 上层服务\"\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n containerId: [\"X\",\"Y\",\"Z\"].includes(id)?\"container-1\":undefined,\n data: {\n name: `Node ${id}`,\n },\n view: {\n width: 60,\n height: 60,\n }\n }))\n ).concat([\n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n },\n ])\n %>\n - name: dragging\n - name: activeTarget\n - name: targetCell\n - name: scale\n value: 1\n children:\n - brick: div\n properties:\n style:\n width: 180px\n display: flex\n flexDirection: column\n gap: 1em\n children:\n - brick: eo-button\n properties:\n textContent: Add random nodes\n events:\n click:\n target: eo-draw-canvas\n method: addNodes\n args:\n - |\n <%\n ((...seeds) => seeds.map((seed) => ({\n id: seed,\n data: {\n name: String(seed),\n },\n })))(\n Math.round(Math.random() * 1e6),\n Math.round(Math.random() * 1e6),\n Math.round(Math.random() * 1e6),\n )\n %>\n callback:\n success:\n action: console.log\n args:\n - Added nodes\n - <% EVENT.detail %>\n - brick: eo-button\n properties:\n textContent: \"Add edge: Y => Z\"\n events:\n click:\n target: eo-draw-canvas\n method: addEdge\n args:\n - source: Y\n target: Z\n data:\n virtual: true\n - brick: :forEach\n dataSource:\n - X\n - Y\n children:\n - brick: eo-button\n properties:\n textContent: <% `Add nodes below ${ITEM}` %>\n events:\n click:\n target: eo-draw-canvas\n method: updateCells\n args:\n - |\n <%\n CTX.initialCells.concat([\n {\n type: \"edge\",\n source: ITEM,\n target: \"U\",\n },\n {\n type: \"edge\",\n source: ITEM,\n target: \"V\",\n },\n {\n type: \"node\",\n id: \"U\",\n data: {\n name: \"U\"\n }\n },\n {\n type: \"node\",\n id: \"V\",\n data: {\n name: \"V\"\n }\n },\n ])\n %>\n - reason: add-related-nodes\n parent: <% ITEM %>\n callback:\n success:\n action: console.log\n - brick: hr\n properties:\n style:\n width: 100%\n - brick: h3\n properties:\n textContent: Drag nodes below\n - brick: :forEach\n dataSource: |\n <%\n [\"A\", \"B\", \"C\"].map((id) => ({\n type: \"node\",\n id,\n data: {\n name: `Node ${id}`,\n },\n }))\n %>\n children:\n - brick: diagram.experimental-node\n properties:\n textContent: <% ITEM.data.name %>\n usage: library\n events:\n drag.move:\n action: context.replace\n args:\n - dragging\n - |\n <% {position: EVENT.detail, ...ITEM} %>\n drag.end:\n - action: context.replace\n args:\n - dragging\n - null\n - target: eo-draw-canvas\n method: dropNode\n args:\n - position: <% EVENT.detail %>\n id: <% ITEM.id %>\n data: <% ITEM.data %>\n callback:\n success:\n if: <% EVENT.detail %>\n then:\n action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n else:\n action: message.warn\n args:\n - Unexpected drop position\n - brick: hr\n properties:\n style:\n width: 100%\n - brick: h3\n properties:\n textContent: Drag decorators below\n - brick: :forEach\n dataSource:\n - area\n - text\n children:\n - brick: diagram.experimental-node\n properties:\n textContent: <% _.upperFirst(ITEM) %>\n usage: library\n events:\n drag.move:\n action: context.replace\n args:\n - dragging\n - |\n <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n drag.end:\n - action: context.replace\n args:\n - dragging\n - null\n - target: eo-draw-canvas\n method: dropDecorator\n args:\n - position: <% EVENT.detail %>\n decorator: <% ITEM %>\n text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n callback:\n success:\n if: <% EVENT.detail %>\n then:\n # action: message.success\n # args:\n # - <% JSON.stringify(EVENT.detail) %>\n else:\n action: message.warn\n args:\n - Unexpected drop position\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-draw-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n layout: force\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: <% DATA.edge.data?.virtual %>\n dashed: true\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.move:\n action: message.info\n args:\n - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n cell.resize:\n action: message.info\n args:\n - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n cell.delete:\n action: message.warn\n args:\n - |\n <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n decorator.text.change:\n action: message.info\n args:\n - <% JSON.stringify(EVENT.detail) %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: diagram.experimental-node\n properties:\n usage: dragging\n textContent: |\n <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n decorator: |\n <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n style: |\n <%=\n {\n left: `${CTX.dragging?.position[0]}px`,\n top: `${CTX.dragging?.position[1]}px`,\n transform: `scale(${CTX.scale})`,\n transformOrigin: \"0 0\",\n padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n }\n %>\n hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n CTX.targetCell?.type === \"node\" ? [\n {\n text: \"添加边\",\n event: \"add-edge\",\n }\n ] : [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n events:\n add-edge:\n target: eo-draw-canvas\n method: manuallyConnectNodes\n args:\n - <% CTX.targetCell.id %>\n callback:\n success:\n target: eo-draw-canvas\n method: addEdge\n args:\n - source: <% EVENT.detail.source.id %>\n target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n# <eo-button id=\"brick-1\">Add random nodes</eo-button>\n# <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# <hr style=\"width: 100%\" />\n# <h3>Drag nodes below</h3>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# <hr style=\"width: 100%\" />\n# <h3>Drag decorators below</h3>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </div>\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-draw-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# layout=\"force\"\n# id=\"brick-6\"\n# ></eo-draw-canvas>\n# </div>\n# </div>\n# <diagram.experimental-node\n# usage=\"dragging\"\n# decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n# hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n# &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n# ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n# actions='&lt;%=\n# CTX.targetCell?.type === \"node\" ? [\n# {\n# text: \"添加边\",\n# event: \"add-edge\",\n# }\n# ] : [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# '\n# id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.addNodes(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<%\\n ((...seeds) => seeds.map((seed) => ({\\n id: seed,\\n data: {\\n name: String(seed),\\n },\\n })))(\\n Math.round(Math.random() * 1e6),\\n Math.round(Math.random() * 1e6),\\n Math.round(Math.random() * 1e6),\\n )\\n%>\\n\"\n# );\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.updateCells(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# '<%\\n CTX.initialCells.concat([\\n {\\n type: \"edge\",\\n source: ITEM,\\n target: \"U\",\\n },\\n {\\n type: \"edge\",\\n source: ITEM,\\n target: \"V\",\\n },\\n {\\n type: \"node\",\\n id: \"U\",\\n data: {\\n name: \"U\"\\n }\\n },\\n {\\n type: \"node\",\\n id: \"V\",\\n data: {\\n name: \"V\"\\n }\\n },\\n ])\\n%>\\n',\n# { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n# );\n# });\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.addEventListener(\"drag.move\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_4.addEventListener(\"drag.end\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_4.addEventListener(\"drag.end\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.dropNode({\n# position: \"<% EVENT.detail %>\",\n# id: \"<% ITEM.id %>\",\n# data: \"<% ITEM.data %>\",\n# });\n# });\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.addEventListener(\"drag.move\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_5.addEventListener(\"drag.end\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_5.addEventListener(\"drag.end\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.dropDecorator({\n# position: \"<% EVENT.detail %>\",\n# decorator: \"<% ITEM %>\",\n# text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n# });\n# });\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_6.defaultNodeSize = [60, 60];\n# brick_6.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_6.defaultEdgeLines = [\n# {\n# if: \"<% DATA.edge.data?.virtual %>\",\n# dashed: true,\n# },\n# ];\n# brick_6.cells = \"<% CTX.initialCells %>\";\n# brick_6.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_6.addEventListener(\"cell.move\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n# });\n# });\n# brick_6.addEventListener(\"cell.resize\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n# });\n# });\n# brick_6.addEventListener(\"cell.delete\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"warn\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n# });\n# });\n# brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_6.addEventListener(\"decorator.text.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# brick_6.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.addEventListener(\"add-edge\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.manuallyConnectNodes(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% CTX.targetCell.id %>\"\n# );\n# });\n# </script>\n# \n```\n\n### Dagre layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"decorator\",\n id: \"container-1\",\n decorator: \"container\",\n view: {\n x: 50,\n y: 400,\n width: 280,\n height: 120,\n direction: \"top\",\n text: \" 上层服务\"\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n containerId: [\"W\",\"Z\"].includes(id)?\"container-1\":undefined,\n data: {\n name: `Node ${id}`,\n },\n view: {\n width: 60,\n height: 60,\n }\n }))\n ).concat([\n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n },\n ])\n %>\n - name: dragging\n - name: activeTarget\n - name: targetCell\n - name: scale\n value: 1\n children:\n - brick: div\n properties:\n style:\n width: 180px\n display: flex\n flexDirection: column\n gap: 1em\n children:\n - brick: eo-button\n properties:\n textContent: Add random nodes\n events:\n click:\n target: eo-draw-canvas\n method: addNodes\n args:\n - |\n <%\n ((...seeds) => seeds.map((seed) => ({\n id: seed,\n data: {\n name: String(seed),\n },\n })))(\n Math.round(Math.random() * 1e6),\n Math.round(Math.random() * 1e6),\n Math.round(Math.random() * 1e6),\n )\n %>\n callback:\n success:\n action: console.log\n args:\n - Added nodes\n - <% EVENT.detail %>\n - brick: eo-button\n properties:\n textContent: \"Add edge: Y => Z\"\n events:\n click:\n target: eo-draw-canvas\n method: addEdge\n args:\n - source: Y\n target: Z\n data:\n virtual: true\n - brick: :forEach\n dataSource:\n - X\n - Y\n children:\n - brick: eo-button\n properties:\n textContent: <% `Add nodes below ${ITEM}` %>\n events:\n click:\n target: eo-draw-canvas\n method: updateCells\n args:\n - |\n <%\n CTX.initialCells.concat([\n {\n type: \"edge\",\n source: ITEM,\n target: \"U\",\n },\n {\n type: \"edge\",\n source: ITEM,\n target: \"V\",\n },\n {\n type: \"node\",\n id: \"U\",\n data: {\n name: \"U\"\n }\n },\n {\n type: \"node\",\n id: \"V\",\n data: {\n name: \"V\"\n }\n },\n ])\n %>\n - reason: add-related-nodes\n parent: <% ITEM %>\n callback:\n success:\n action: console.log\n - brick: hr\n properties:\n style:\n width: 100%\n - brick: h3\n properties:\n textContent: Drag nodes below\n - brick: :forEach\n dataSource: |\n <%\n [\"A\", \"B\", \"C\"].map((id) => ({\n type: \"node\",\n id,\n data: {\n name: `Node ${id}`,\n },\n }))\n %>\n children:\n - brick: diagram.experimental-node\n properties:\n textContent: <% ITEM.data.name %>\n usage: library\n events:\n drag.move:\n action: context.replace\n args:\n - dragging\n - |\n <% {position: EVENT.detail, ...ITEM} %>\n drag.end:\n - action: context.replace\n args:\n - dragging\n - null\n - target: eo-draw-canvas\n method: dropNode\n args:\n - position: <% EVENT.detail %>\n id: <% ITEM.id %>\n data: <% ITEM.data %>\n callback:\n success:\n if: <% EVENT.detail %>\n then:\n action: message.success\n args:\n - <% JSON.stringify(EVENT.detail) %>\n else:\n action: message.warn\n args:\n - Unexpected drop position\n - brick: hr\n properties:\n style:\n width: 100%\n - brick: h3\n properties:\n textContent: Drag decorators below\n - brick: :forEach\n dataSource:\n - area\n - text\n children:\n - brick: diagram.experimental-node\n properties:\n textContent: <% _.upperFirst(ITEM) %>\n usage: library\n events:\n drag.move:\n action: context.replace\n args:\n - dragging\n - |\n <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n drag.end:\n - action: context.replace\n args:\n - dragging\n - null\n - target: eo-draw-canvas\n method: dropDecorator\n args:\n - position: <% EVENT.detail %>\n decorator: <% ITEM %>\n text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n callback:\n success:\n if: <% EVENT.detail %>\n then:\n # action: message.success\n # args:\n # - <% JSON.stringify(EVENT.detail) %>\n else:\n action: message.warn\n args:\n - Unexpected drop position\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-draw-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n layout: dagre\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: <% DATA.edge.data?.virtual %>\n dashed: true\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.move:\n action: message.info\n args:\n - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n cell.resize:\n action: message.info\n args:\n - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n cell.delete:\n action: message.warn\n args:\n - |\n <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n decorator.text.change:\n action: message.info\n args:\n - <% JSON.stringify(EVENT.detail) %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: diagram.experimental-node\n properties:\n usage: dragging\n textContent: |\n <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n decorator: |\n <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n style: |\n <%=\n {\n left: `${CTX.dragging?.position[0]}px`,\n top: `${CTX.dragging?.position[1]}px`,\n transform: `scale(${CTX.scale})`,\n transformOrigin: \"0 0\",\n padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n }\n %>\n hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n CTX.targetCell?.type === \"node\" ? [\n {\n text: \"添加边\",\n event: \"add-edge\",\n }\n ] : [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n events:\n add-edge:\n target: eo-draw-canvas\n method: manuallyConnectNodes\n args:\n - <% CTX.targetCell.id %>\n callback:\n success:\n target: eo-draw-canvas\n method: addEdge\n args:\n - source: <% EVENT.detail.source.id %>\n target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n# <eo-button id=\"brick-1\">Add random nodes</eo-button>\n# <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# <hr style=\"width: 100%\" />\n# <h3>Drag nodes below</h3>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# <hr style=\"width: 100%\" />\n# <h3>Drag decorators below</h3>\n# <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n# </div>\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-draw-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# layout=\"dagre\"\n# id=\"brick-6\"\n# ></eo-draw-canvas>\n# </div>\n# </div>\n# <diagram.experimental-node\n# usage=\"dragging\"\n# decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n# hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n# &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n# ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n# actions='&lt;%=\n# CTX.targetCell?.type === \"node\" ? [\n# {\n# text: \"添加边\",\n# event: \"add-edge\",\n# }\n# ] : [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# '\n# id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.addNodes(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<%\\n ((...seeds) => seeds.map((seed) => ({\\n id: seed,\\n data: {\\n name: String(seed),\\n },\\n })))(\\n Math.round(Math.random() * 1e6),\\n Math.round(Math.random() * 1e6),\\n Math.round(Math.random() * 1e6),\\n )\\n%>\\n\"\n# );\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.addEventListener(\"click\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.updateCells(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# '<%\\n CTX.initialCells.concat([\\n {\\n type: \"edge\",\\n source: ITEM,\\n target: \"U\",\\n },\\n {\\n type: \"edge\",\\n source: ITEM,\\n target: \"V\",\\n },\\n {\\n type: \"node\",\\n id: \"U\",\\n data: {\\n name: \"U\"\\n }\\n },\\n {\\n type: \"node\",\\n id: \"V\",\\n data: {\\n name: \"V\"\\n }\\n },\\n ])\\n%>\\n',\n# { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n# );\n# });\n# \n# const brick_4 = document.getElementById(\"brick-4\");\n# brick_4.addEventListener(\"drag.move\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_4.addEventListener(\"drag.end\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_4.addEventListener(\"drag.end\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.dropNode({\n# position: \"<% EVENT.detail %>\",\n# id: \"<% ITEM.id %>\",\n# data: \"<% ITEM.data %>\",\n# });\n# });\n# \n# const brick_5 = document.getElementById(\"brick-5\");\n# brick_5.addEventListener(\"drag.move\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_5.addEventListener(\"drag.end\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_5.addEventListener(\"drag.end\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.dropDecorator({\n# position: \"<% EVENT.detail %>\",\n# decorator: \"<% ITEM %>\",\n# text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n# });\n# });\n# \n# const brick_6 = document.getElementById(\"brick-6\");\n# brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_6.defaultNodeSize = [60, 60];\n# brick_6.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_6.defaultEdgeLines = [\n# {\n# if: \"<% DATA.edge.data?.virtual %>\",\n# dashed: true,\n# },\n# ];\n# brick_6.cells = \"<% CTX.initialCells %>\";\n# brick_6.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_6.addEventListener(\"cell.move\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n# });\n# });\n# brick_6.addEventListener(\"cell.resize\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n# });\n# });\n# brick_6.addEventListener(\"cell.delete\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"warn\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n# });\n# });\n# brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_6.addEventListener(\"decorator.text.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# brick_6.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.addEventListener(\"add-edge\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.manuallyConnectNodes(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% CTX.targetCell.id %>\"\n# );\n# });\n# </script>\n# \n```\n"
10
+ },
11
+ "eo-display-canvas": {
12
+ "doc": "用于展示查看的画布构件。\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"decorator\",\n id: \"container-1\",\n decorator: \"container\",\n view: {\n x: 50,\n y: 400,\n width: 280,\n height: 120,\n direction: \"top\",\n text: \" 上层服务\"\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n data: {\n virtual: false,\n showStartArrow: false,\n strokeColor:\"red\",\n strokeWidth: 5,\n }\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"W\",\n data: {\n virtual: false,\n showStartArrow: true,\n strokeColor:\"pink\",\n animate:{\n useAnimate: true,\n duration: 4 \n } \n }\n }, \n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n showStartArrow: true,\n strokeColor:\"blue\",\n animate:{\n useAnimate: true \n } \n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n containerId: [\"X\",\"Y\",\"Z\"].includes(id)?\"container-1\":undefined,\n data: {\n name: `Node ${id}`,\n },\n view: {\n x: Math.round(\n id === \"X\"\n ? 200 + Math.random() * 200\n : id === \"Y\"\n ? Math.random() * 300\n : 300 + Math.random() * 300\n ),\n y: (id === \"X\" ? 0 : 300) + Math.round((Math.random() * 200)),\n width: 60,\n height: 60,\n }\n }))\n ).concat([ \n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n }, \n ])\n %>\n - name: activeTarget\n - name: targetCell\n children:\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-display-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: true\n dashed: <% DATA.edge?.data?.virtual %>\n strokeColor: <% DATA.edge?.data?.strokeColor %>\n showStartArrow: <% DATA.edge?.data?.showStartArrow %>\n strokeWidth: <% DATA.edge?.data?.strokeWidth %>\n animate: <% DATA.edge?.data?.animate %>\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-display-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# id=\"brick-1\"\n# ></eo-display-canvas>\n# </div>\n# </div>\n# <eo-context-menu\n# actions=\"&lt;%=\n# [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.defaultNodeSize = [60, 60];\n# brick_1.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_1.defaultEdgeLines = [\n# {\n# if: true,\n# dashed: \"<% DATA.edge?.data?.virtual %>\",\n# strokeColor: \"<% DATA.edge?.data?.strokeColor %>\",\n# showStartArrow: \"<% DATA.edge?.data?.showStartArrow %>\",\n# strokeWidth: \"<% DATA.edge?.data?.strokeWidth %>\",\n# animate: \"<% DATA.edge?.data?.animate %>\",\n# },\n# ];\n# brick_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n\n### Force layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n data: {\n name: `Node ${id}`,\n },\n view: {\n width: 60,\n height: 60,\n }\n }))\n ).concat([\n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n },\n ])\n %>\n - name: activeTarget\n - name: targetCell\n children:\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-display-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n layout: force\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: <% DATA.edge.data?.virtual %>\n dashed: true\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-display-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# layout=\"force\"\n# id=\"brick-1\"\n# ></eo-display-canvas>\n# </div>\n# </div>\n# <eo-context-menu\n# actions=\"&lt;%=\n# [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.defaultNodeSize = [60, 60];\n# brick_1.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_1.defaultEdgeLines = [\n# {\n# if: \"<% DATA.edge.data?.virtual %>\",\n# dashed: true,\n# },\n# ];\n# brick_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n\n### Dagre layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n }\n },\n ].concat(\n [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n type: \"node\",\n id,\n data: {\n name: `Node ${id}`,\n },\n view: {\n width: 60,\n height: 60,\n }\n }))\n ).concat([\n {\n type: \"decorator\",\n id: \"text-1\",\n decorator: \"text\",\n view: {\n x: 100,\n y: 120,\n width: 100,\n height: 20,\n text: \"Hello!\"\n },\n },\n ])\n %>\n - name: activeTarget\n - name: targetCell\n children:\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-display-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n layout: dagre\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: <% DATA.edge.data?.virtual %>\n dashed: true\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-display-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# layout=\"dagre\"\n# id=\"brick-1\"\n# ></eo-display-canvas>\n# </div>\n# </div>\n# <eo-context-menu\n# actions=\"&lt;%=\n# [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.defaultNodeSize = [60, 60];\n# brick_1.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_1.defaultEdgeLines = [\n# {\n# if: \"<% DATA.edge.data?.virtual %>\",\n# dashed: true,\n# },\n# ];\n# brick_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n\n### Degraded diagram\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n ((...seeds) => seeds.map((seed) => ({\n type: \"node\",\n id: seed,\n data: {\n name: seed,\n },\n })))(\n ...(\n new Array(500).fill(null).map((_, i) => String(i))\n )\n )\n %>\n - name: activeTarget\n - name: targetCell\n children:\n - brick: div\n properties:\n style:\n flex: 1\n minWidth: 0\n children:\n - brick: eo-display-canvas\n properties:\n style:\n width: 100%\n height: 100%\n activeTarget: <%= CTX.activeTarget %>\n fadeUnrelatedCells: true\n layout: force\n # Initial nodes only\n defaultNodeSize: [60, 60]\n defaultNodeBricks:\n - useBrick:\n brick: diagram.experimental-node\n properties:\n textContent: <% `Node ${DATA.node.id}` %>\n status: |\n <%=\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n ? \"highlighted\"\n // : CTX.unrelated.some(n =>\n // n.type === \"node\" && n.id === DATA.node.id\n // )\n // ? \"faded\"\n : \"default\"\n %>\n defaultEdgeLines:\n - if: true\n dashed: <% DATA.edge?.data?.virtual %>\n strokeColor: <% DATA.edge?.data?.strokeColor %>\n showStartArrow: <% DATA.edge?.data?.showStartArrow %>\n strokeWidth: <% DATA.edge?.data?.strokeWidth %>\n animate: <% DATA.edge?.data?.animate %>\n cells: <% CTX.initialCells %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n cell.contextmenu:\n - target: eo-context-menu\n method: open\n args:\n - position:\n - <% EVENT.detail.clientX %>\n - <% EVENT.detail.clientY %>\n - action: context.replace\n args:\n - targetCell\n - <% EVENT.detail.cell %>\n scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n- brick: eo-context-menu\n properties:\n actions: |\n <%=\n [\n {\n text: `Test ${CTX.targetCell?.type}`,\n event: `test-${CTX.targetCell?.type}`,\n }\n ]\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n# <div style=\"flex: 1; min-width: 0\">\n# <eo-display-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# layout=\"force\"\n# id=\"brick-1\"\n# ></eo-display-canvas>\n# </div>\n# </div>\n# <eo-context-menu\n# actions=\"&lt;%=\n# [\n# {\n# text: `Test ${CTX.targetCell?.type}`,\n# event: `test-${CTX.targetCell?.type}`,\n# }\n# ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.defaultNodeSize = [60, 60];\n# brick_1.defaultNodeBricks = [\n# {\n# useBrick: {\n# brick: \"diagram.experimental-node\",\n# properties: {\n# textContent: \"<% `Node ${DATA.node.id}` %>\",\n# status:\n# '<%=\\n CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n ? \"highlighted\"\\n // : CTX.unrelated.some(n =>\\n // n.type === \"node\" && n.id === DATA.node.id\\n // )\\n // ? \"faded\"\\n : \"default\"\\n%>\\n',\n# },\n# },\n# },\n# ];\n# brick_1.defaultEdgeLines = [\n# {\n# if: true,\n# dashed: \"<% DATA.edge?.data?.virtual %>\",\n# strokeColor: \"<% DATA.edge?.data?.strokeColor %>\",\n# showStartArrow: \"<% DATA.edge?.data?.showStartArrow %>\",\n# strokeWidth: \"<% DATA.edge?.data?.strokeWidth %>\",\n# animate: \"<% DATA.edge?.data?.animate %>\",\n# },\n# ];\n# brick_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n"
13
13
  }
14
14
  }
package/dist/{index.9b96d155.js → index.4a82a761.js} RENAMED
@@ -1,2 +1,2 @@
1
- (()=>{"use strict";var e,t,r,n,a,o,l,i,s,d,c,u,f,h,p,m,b,v,g,x={9924:(e,t,r)=>{var n={"./eo-diagram":()=>Promise.all([r.e(4090),r.e(3790),r.e(8769),r.e(1030),r.e(4782),r.e(1389),r.e(9583),r.e(1653),r.e(3128),r.e(2416),r.e(3039)]).then((()=>()=>r(1508))),"./editable-label":()=>Promise.all([r.e(8769),r.e(4782),r.e(1389),r.e(9583),r.e(6006)]).then((()=>()=>r(3328))),"./experimental-node":()=>Promise.all([r.e(8769),r.e(4782),r.e(1389),r.e(9583),r.e(4422)]).then((()=>()=>r(5568))),"./eo-display-canvas":()=>Promise.all([r.e(7507),r.e(4090),r.e(1094),r.e(8769),r.e(1030),r.e(4782),r.e(1389),r.e(9583),r.e(9435),r.e(1653),r.e(3128),r.e(1868),r.e(9823)]).then((()=>()=>r(6094))),"./eo-draw-canvas":()=>Promise.all([r.e(7507),r.e(4090),r.e(1094),r.e(8769),r.e(1030),r.e(4782),r.e(1389),r.e(3518),r.e(9583),r.e(9435),r.e(1653),r.e(3128),r.e(1868),r.e(8939)]).then((()=>()=>r(9068)))},a=(e,t)=>(r.R=t,t=r.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),r.R=void 0,t),o=(e,t)=>{if(r.S){var n="default",a=r.S[n];if(a&&a!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return r.S[n]=e,r.I(n,t)}};r.d(t,{get:()=>a,init:()=>o})}},y={};function P(e){var t=y[e];if(void 0!==t)return t.exports;var r=y[e]={id:e,loaded:!1,exports:{}};return x[e].call(r.exports,r,r.exports,P),r.loaded=!0,r.exports}P.m=x,P.c=y,P.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return P.d(t,{a:t}),t},P.d=(e,t)=>{for(var r in t)P.o(t,r)&&!P.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},P.f={},P.e=e=>Promise.all(Object.keys(P.f).reduce(((t,r)=>(P.f[r](e,t),t)),[])),P.u=e=>"chunks/"+({3039:"eo-diagram",4422:"experimental-node",6006:"editable-label",8939:"eo-draw-canvas",9823:"eo-display-canvas"}[e]||e)+"."+{114:"9d0b78d2",726:"31d83c95",871:"c60deabc",1030:"b2de5ee5",1045:"63c485a7",1094:"866a0229",1122:"1b986d37",1302:"4f0b92f3",1370:"8d145ce9",1389:"f58efe38",1653:"58a9f5ea",1760:"54b527f9",1868:"3239b5e8",1889:"a9c5273d",1940:"3fa9b819",2052:"a8ed8891",2277:"642aada3",2416:"87926b63",3039:"88025819",3128:"83d0ab60",3144:"94428cca",3171:"c5ada5f2",3426:"ae8ab421",3518:"2f6525a6",3533:"c55d2951",3751:"c544b621",3790:"e8dc7307",3933:"83e0f620",4041:"d221940a",4090:"0a4db475",4285:"d80e3ee0",4422:"33c53c19",4658:"ff7efb11",4741:"4a7e366d",4782:"3c06b167",4837:"a2e9fe27",5250:"d0a6e755",5384:"b76b4b24",5399:"7d5e59b6",5552:"9bb497eb",5811:"63f59ae7",6006:"54bc7004",6237:"5804bacf",6314:"4496f8fc",6519:"bdf67396",6688:"0764fdb6",6773:"9e6346d4",7218:"77db5c32",7304:"14847830",7507:"f8686358",7721:"6ac62398",7733:"a27200f8",8769:"4c91b468",8939:"26a27f51",8989:"0fc5ea84",9042:"e0b0b803",9435:"904b4066",9515:"4b4e0758",9559:"436645e2",9583:"d5f62e07",9755:"0a240b26",9823:"36c4170c",9844:"4a3a83f7"}[e]+".js",P.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),P.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="@next-bricks/diagram:",P.l=(r,n,a,o)=>{if(e[r])e[r].push(n);else{var l,i;if(void 0!==a)for(var s=document.getElementsByTagName("script"),d=0;d<s.length;d++){var c=s[d];if(c.getAttribute("src")==r||c.getAttribute("data-webpack")==t+a){l=c;break}}l||(i=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,P.nc&&l.setAttribute("nonce",P.nc),l.setAttribute("data-webpack",t+a),l.src=r),e[r]=[n];var u=(t,n)=>{l.onerror=l.onload=null,clearTimeout(f);var a=e[r];if(delete e[r],l.parentNode&&l.parentNode.removeChild(l),a&&a.forEach((e=>e(n))),t)return t(n)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=u.bind(null,l.onerror),l.onload=u.bind(null,l.onload),i&&document.head.appendChild(l)}},P.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},P.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{P.S={};var e={},t={};P.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];P.o(P.S,r)||(P.S[r]={});var o=P.S[r],l="@next-bricks/diagram",i=(e,t,r,n)=>{var a=o[e]=o[e]||{},i=a[t];(!i||!i.loaded&&(!n!=!i.eager?n:l>i.from))&&(a[t]={get:r,from:l,eager:!!n})},s=[];return"default"===r&&(i("@babel/parser","7.24.4",(()=>P.e(6773).then((()=>()=>P(6773))))),i("@easyops-cn/brick-next-pipes","0.6.0",(()=>Promise.all([P.e(4741),P.e(1030),P.e(6688)]).then((()=>()=>P(4741))))),i("@next-core/cook","2.4.7",(()=>Promise.all([P.e(1122),P.e(1760)]).then((()=>()=>P(1122))))),i("@next-core/element","1.2.11",(()=>P.e(1045).then((()=>()=>P(1045))))),i("@next-core/http","1.2.6",(()=>P.e(8989).then((()=>()=>P(8989))))),i("@next-core/i18n","1.0.58",(()=>Promise.all([P.e(3518),P.e(6237),P.e(9755),P.e(5552)]).then((()=>()=>P(5552))))),i("@next-core/inject","1.0.39",(()=>Promise.all([P.e(1030),P.e(4285),P.e(2277)]).then((()=>()=>P(2277))))),i("@next-core/loader","1.6.5",(()=>P.e(5399).then((()=>()=>P(7780))))),i("@next-core/pipes","2.0.24",(()=>P.e(6519).then((()=>()=>P(6519))))),i("@next-core/react-element","1.0.30",(()=>Promise.all([P.e(8769),P.e(4782),P.e(9435),P.e(114)]).then((()=>()=>P(114))))),i("@next-core/react-runtime","1.6.17",(()=>Promise.all([P.e(8769),P.e(1030),P.e(1389),P.e(1653),P.e(4837)]).then((()=>()=>P(4837))))),i("@next-core/runtime","1.50.0",(()=>Promise.all([P.e(7507),P.e(3533),P.e(1030),P.e(3518),P.e(1302),P.e(6237),P.e(9042),P.e(5811)]).then((()=>()=>P(3533))))),i("@next-core/supply","2.1.20",(()=>Promise.all([P.e(1030),P.e(4285),P.e(1302),P.e(9559)]).then((()=>()=>P(9559))))),i("@next-core/theme","1.5.2",(()=>Promise.all([P.e(1889),P.e(2052)]).then((()=>()=>P(1889))))),i("@next-core/utils/general","1.7.16",(()=>P.e(871).then((()=>()=>P(871))))),i("@next-core/utils/storyboard","1.7.16",(()=>Promise.all([P.e(3518),P.e(9042),P.e(3933)]).then((()=>()=>P(3933))))),i("history","4.10.1",(()=>P.e(5384).then((()=>()=>P(5384))))),i("i18next-browser-languagedetector","7.2.1",(()=>P.e(726).then((()=>()=>P(726))))),i("i18next","22.5.1",(()=>P.e(7304).then((()=>()=>P(7304))))),i("js-yaml","3.14.1",(()=>P.e(9515).then((()=>()=>P(9515))))),i("lodash","4.17.21",(()=>P.e(5250).then((()=>()=>P(5250))))),i("moment/locale/zh-cn.js","2.30.1",(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(1329))))),i("moment","2.30.1",(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(9420))))),i("react-dom","0.0.0-experimental-ee8509801-20230117",(()=>Promise.all([P.e(3144),P.e(8769)]).then((()=>()=>P(3144))))),i("react","0.0.0-experimental-ee8509801-20230117",(()=>P.e(4041).then((()=>()=>P(4041)))))),e[r]=s.length?Promise.all(s).then((()=>e[r]=1)):1}}})(),(()=>{var e;P.g.importScripts&&(e=P.g.location+"");var t=P.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),P.p=e})(),r=e=>{var t=e=>e.split(".").map((e=>+e==e?+e:e)),r=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=r[1]?t(r[1]):[];return r[2]&&(n.length++,n.push.apply(n,t(r[2]))),r[3]&&(n.push([]),n.push.apply(n,t(r[3]))),n},n=(e,t)=>{e=r(e),t=r(t);for(var n=0;;){if(n>=e.length)return n<t.length&&"u"!=(typeof t[n])[0];var a=e[n],o=(typeof a)[0];if(n>=t.length)return"u"==o;var l=t[n],i=(typeof l)[0];if(o!=i)return"o"==o&&"n"==i||"s"==i||"u"==o;if("o"!=o&&"u"!=o&&a!=l)return a<l;n++}},a=e=>{var t=e[0],r="";if(1===e.length)return"*";if(t+.5){r+=0==t?">=":-1==t?"<":1==t?"^":2==t?"~":t>0?"=":"!=";for(var n=1,o=1;o<e.length;o++)n--,r+="u"==(typeof(i=e[o]))[0]?"-":(n>0?".":"")+(n=2,i);return r}var l=[];for(o=1;o<e.length;o++){var i=e[o];l.push(0===i?"not("+s()+")":1===i?"("+s()+" || "+s()+")":2===i?l.pop()+" "+l.pop():a(i))}return s();function s(){return l.pop().replace(/^\((.+)\)$/,"$1")}},o=(e,t)=>{if(0 in e){t=r(t);var n=e[0],a=n<0;a&&(n=-n-1);for(var l=0,i=1,s=!0;;i++,l++){var d,c,u=i<e.length?(typeof e[i])[0]:"";if(l>=t.length||"o"==(c=(typeof(d=t[l]))[0]))return!s||("u"==u?i>n&&!a:""==u!=a);if("u"==c){if(!s||"u"!=u)return!1}else if(s)if(u==c)if(i<=n){if(d!=e[i])return!1}else{if(a?d>e[i]:d<e[i])return!1;d!=e[i]&&(s=!1)}else if("s"!=u&&"n"!=u){if(a||i<=n)return!1;s=!1,i--}else{if(i<=n||c<u!=a)return!1;s=!1}else"s"!=u&&"n"!=u&&(s=!1,i--)}}var f=[],h=f.pop.bind(f);for(l=1;l<e.length;l++){var p=e[l];f.push(1==p?h()|h():2==p?h()&h():p?o(p,t):!h())}return!!h()},l=(e,t)=>{var r=e[t];return Object.keys(r).reduce(((e,t)=>!e||!r[e].loaded&&n(e,t)?t:e),0)},i=(e,t,r,n)=>"Unsatisfied version "+r+" from "+(r&&e[t][r].from)+" of shared singleton module "+t+" (required "+a(n)+")",s=(e,t,r,n)=>{var a=l(e,r);return o(n,a)||c(i(e,r,a,n)),u(e[r][a])},d=(e,t,r)=>{var a=e[t];return(t=Object.keys(a).reduce(((e,t)=>!o(r,t)||e&&!n(e,t)?e:t),0))&&a[t]},c=e=>{"undefined"!=typeof console&&console.warn&&console.warn(e)},u=e=>(e.loaded=1,e.get()),h=(f=e=>function(t,r,n,a){var o=P.I(t);return o&&o.then?o.then(e.bind(e,t,P.S[t],r,n,a)):e(t,P.S[t],r,n,a)})(((e,t,r,n,a)=>t&&P.o(t,r)?s(t,0,r,n):a())),p=f(((e,t,r,n,a)=>{var o=t&&P.o(t,r)&&d(t,r,n);return o?u(o):a()})),m={},b={1030:()=>h("default","lodash",[1,4,17,21],(()=>P.e(5250).then((()=>()=>P(5250))))),1204:()=>h("default","js-yaml",[1,3,14,0],(()=>P.e(9515).then((()=>()=>P(9515))))),8297:()=>h("default","moment",[1,2,27,0],(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(9420))))),1760:()=>h("default","@babel/parser",[1,7,24,7],(()=>P.e(6773).then((()=>()=>P(6773))))),3518:()=>h("default","@next-core/utils/general",[1,1,7,16],(()=>P.e(871).then((()=>()=>P(871))))),8618:()=>h("default","@next-core/i18n",[1,1,0,58],(()=>Promise.all([P.e(9755),P.e(3171)]).then((()=>()=>P(5552))))),2350:()=>h("default","i18next",[1,22,5,1],(()=>P.e(7304).then((()=>()=>P(7304))))),7072:()=>h("default","i18next-browser-languagedetector",[1,7,2,1],(()=>P.e(726).then((()=>()=>P(726))))),4285:()=>h("default","@next-core/pipes",[1,2,0,24],(()=>P.e(6519).then((()=>()=>P(6519))))),161:()=>h("default","@easyops-cn/brick-next-pipes",[2,0,6,0],(()=>Promise.all([P.e(4741),P.e(1030),P.e(6688)]).then((()=>()=>P(4741))))),8769:()=>p("default","react",[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>P.e(4041).then((()=>()=>P(4041))))),4782:()=>p("default","@next-core/element",[1,1,2,11],(()=>P.e(3426).then((()=>()=>P(1045))))),9435:()=>p("default","react-dom",[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>P.e(3144).then((()=>()=>P(3144))))),1389:()=>p("default","@next-core/react-element",[1,1,0,30],(()=>Promise.all([P.e(4782),P.e(9435),P.e(7733)]).then((()=>()=>P(114))))),1653:()=>h("default","@next-core/runtime",[1,1,50,0],(()=>Promise.all([P.e(7507),P.e(3533),P.e(3518),P.e(1302),P.e(6237),P.e(9042),P.e(5811)]).then((()=>()=>P(3533))))),1302:()=>h("default","moment",[1,2,30,1],(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(9420))))),9042:()=>h("default","@next-core/cook",[1,2,4,7],(()=>Promise.all([P.e(1122),P.e(1760)]).then((()=>()=>P(1122))))),1680:()=>h("default","@next-core/supply",[1,2,1,20],(()=>Promise.all([P.e(4285),P.e(1940)]).then((()=>()=>P(9559))))),2224:()=>h("default","@next-core/inject",[1,1,0,39],(()=>Promise.all([P.e(4285),P.e(4658)]).then((()=>()=>P(2277))))),2890:()=>h("default","history",[1,4,10,1],(()=>P.e(5384).then((()=>()=>P(5384))))),6036:()=>h("default","moment/locale/zh-cn.js",[1,2,30,1],(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(1329))))),6849:()=>h("default","@next-core/loader",[1,1,6,5],(()=>P.e(5399).then((()=>()=>P(7780))))),8202:()=>h("default","@next-core/utils/storyboard",[1,1,7,16],(()=>P.e(6314).then((()=>()=>P(3933))))),9422:()=>h("default","@next-core/http",[1,1,2,6],(()=>P.e(3751).then((()=>()=>P(8989))))),9583:()=>h("default","@next-core/theme",[1,1,5,2],(()=>P.e(1889).then((()=>()=>P(1889))))),3128:()=>p("default","@next-core/react-runtime",[1,1,6,17],(()=>P.e(7218).then((()=>()=>P(4837))))),3496:()=>h("default","@next-core/http",[1,1,0,6],(()=>P.e(1370).then((()=>()=>P(8989)))))},v={1030:[1030],1302:[1302],1389:[1389],1653:[1653],1760:[1760],2416:[3496],3128:[3128],3518:[3518],4285:[4285],4782:[4782],5811:[1680,2224,2890,6036,6849,8202,9422],6237:[8618],6519:[161],6688:[1204,8297],8769:[8769],9042:[9042],9435:[9435],9583:[9583],9755:[2350,7072]},g={},P.f.consumes=(e,t)=>{P.o(v,e)&&v[e].forEach((e=>{if(P.o(m,e))return t.push(m[e]);if(!g[e]){var r=t=>{m[e]=0,P.m[e]=r=>{delete P.c[e],r.exports=t()}};g[e]=!0;var n=t=>{delete m[e],P.m[e]=r=>{throw delete P.c[e],t}};try{var a=b[e]();a.then?t.push(m[e]=a.then(r).catch(n)):r(a)}catch(e){n(e)}}}))},(()=>{var e={2691:0};P.f.j=(t,r)=>{var n=P.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else if(/^(1(030|302|389|653|760)|9(042|435|583|755)|(312|351|668)8|4285|4782|5811|6237|8769)$/.test(t))e[t]=0;else{var a=new Promise(((r,a)=>n=e[t]=[r,a]));r.push(n[2]=a);var o=P.p+P.u(t),l=new Error;P.l(o,(r=>{if(P.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;l.message="Loading chunk "+t+" failed.\n("+a+": "+o+")",l.name="ChunkLoadError",l.type=a,l.request=o,n[1](l)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,a,[o,l,i]=r,s=0;if(o.some((t=>0!==e[t]))){for(n in l)P.o(l,n)&&(P.m[n]=l[n]);i&&i(P)}for(t&&t(r);s<o.length;s++)a=o[s],P.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=globalThis.webpackChunk_next_bricks_diagram=globalThis.webpackChunk_next_bricks_diagram||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),P.nc=void 0;var w=P(9924);window["bricks/diagram"]=w})();
2
- //# sourceMappingURL=index.9b96d155.js.map
1
+ (()=>{"use strict";var e,t,r,n,a,o,l,i,s,d,c,u,f,h,p,m,b,v,g,x={9476:(e,t,r)=>{var n={"./eo-diagram":()=>Promise.all([r.e(4090),r.e(3790),r.e(8769),r.e(1030),r.e(4782),r.e(1389),r.e(9583),r.e(1653),r.e(3128),r.e(2416),r.e(3039)]).then((()=>()=>r(1508))),"./editable-label":()=>Promise.all([r.e(8769),r.e(4782),r.e(1389),r.e(9583),r.e(6006)]).then((()=>()=>r(3328))),"./eo-draw-canvas":()=>Promise.all([r.e(7507),r.e(4090),r.e(1094),r.e(8769),r.e(1030),r.e(4782),r.e(1389),r.e(3518),r.e(9583),r.e(9435),r.e(1653),r.e(3128),r.e(1868),r.e(8939)]).then((()=>()=>r(9068))),"./experimental-node":()=>Promise.all([r.e(8769),r.e(4782),r.e(1389),r.e(9583),r.e(4422)]).then((()=>()=>r(5568))),"./eo-display-canvas":()=>Promise.all([r.e(7507),r.e(4090),r.e(1094),r.e(8769),r.e(1030),r.e(4782),r.e(1389),r.e(9583),r.e(9435),r.e(1653),r.e(3128),r.e(1868),r.e(9823)]).then((()=>()=>r(6094)))},a=(e,t)=>(r.R=t,t=r.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),r.R=void 0,t),o=(e,t)=>{if(r.S){var n="default",a=r.S[n];if(a&&a!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return r.S[n]=e,r.I(n,t)}};r.d(t,{get:()=>a,init:()=>o})}},y={};function P(e){var t=y[e];if(void 0!==t)return t.exports;var r=y[e]={id:e,loaded:!1,exports:{}};return x[e].call(r.exports,r,r.exports,P),r.loaded=!0,r.exports}P.m=x,P.c=y,P.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return P.d(t,{a:t}),t},P.d=(e,t)=>{for(var r in t)P.o(t,r)&&!P.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},P.f={},P.e=e=>Promise.all(Object.keys(P.f).reduce(((t,r)=>(P.f[r](e,t),t)),[])),P.u=e=>"chunks/"+({3039:"eo-diagram",4422:"experimental-node",6006:"editable-label",8939:"eo-draw-canvas",9823:"eo-display-canvas"}[e]||e)+"."+{114:"9d0b78d2",726:"31d83c95",871:"c60deabc",1030:"b2de5ee5",1045:"63c485a7",1094:"866a0229",1122:"1b986d37",1302:"4f0b92f3",1370:"8d145ce9",1389:"f58efe38",1653:"58a9f5ea",1760:"54b527f9",1868:"3239b5e8",1889:"a9c5273d",1940:"3fa9b819",2052:"a8ed8891",2277:"642aada3",2416:"87926b63",3039:"88025819",3128:"83d0ab60",3144:"94428cca",3171:"c5ada5f2",3426:"ae8ab421",3518:"2f6525a6",3533:"c55d2951",3751:"c544b621",3790:"e8dc7307",3933:"83e0f620",4041:"d221940a",4090:"0a4db475",4285:"d80e3ee0",4422:"33c53c19",4658:"ff7efb11",4741:"4a7e366d",4782:"3c06b167",4837:"a2e9fe27",5250:"d0a6e755",5384:"b76b4b24",5399:"7d5e59b6",5552:"9bb497eb",5811:"63f59ae7",6006:"54bc7004",6237:"5804bacf",6314:"4496f8fc",6519:"bdf67396",6688:"0764fdb6",6773:"9e6346d4",7218:"77db5c32",7304:"14847830",7507:"f8686358",7721:"6ac62398",7733:"a27200f8",8769:"4c91b468",8939:"26a27f51",8989:"0fc5ea84",9042:"e0b0b803",9435:"904b4066",9515:"4b4e0758",9559:"436645e2",9583:"d5f62e07",9755:"0a240b26",9823:"36c4170c",9844:"4a3a83f7"}[e]+".js",P.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),P.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="@next-bricks/diagram:",P.l=(r,n,a,o)=>{if(e[r])e[r].push(n);else{var l,i;if(void 0!==a)for(var s=document.getElementsByTagName("script"),d=0;d<s.length;d++){var c=s[d];if(c.getAttribute("src")==r||c.getAttribute("data-webpack")==t+a){l=c;break}}l||(i=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,P.nc&&l.setAttribute("nonce",P.nc),l.setAttribute("data-webpack",t+a),l.src=r),e[r]=[n];var u=(t,n)=>{l.onerror=l.onload=null,clearTimeout(f);var a=e[r];if(delete e[r],l.parentNode&&l.parentNode.removeChild(l),a&&a.forEach((e=>e(n))),t)return t(n)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=u.bind(null,l.onerror),l.onload=u.bind(null,l.onload),i&&document.head.appendChild(l)}},P.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},P.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{P.S={};var e={},t={};P.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];P.o(P.S,r)||(P.S[r]={});var o=P.S[r],l="@next-bricks/diagram",i=(e,t,r,n)=>{var a=o[e]=o[e]||{},i=a[t];(!i||!i.loaded&&(!n!=!i.eager?n:l>i.from))&&(a[t]={get:r,from:l,eager:!!n})},s=[];return"default"===r&&(i("@babel/parser","7.24.4",(()=>P.e(6773).then((()=>()=>P(6773))))),i("@easyops-cn/brick-next-pipes","0.6.0",(()=>Promise.all([P.e(4741),P.e(1030),P.e(6688)]).then((()=>()=>P(4741))))),i("@next-core/cook","2.4.7",(()=>Promise.all([P.e(1122),P.e(1760)]).then((()=>()=>P(1122))))),i("@next-core/element","1.2.11",(()=>P.e(1045).then((()=>()=>P(1045))))),i("@next-core/http","1.2.6",(()=>P.e(8989).then((()=>()=>P(8989))))),i("@next-core/i18n","1.0.58",(()=>Promise.all([P.e(3518),P.e(6237),P.e(9755),P.e(5552)]).then((()=>()=>P(5552))))),i("@next-core/inject","1.0.39",(()=>Promise.all([P.e(1030),P.e(4285),P.e(2277)]).then((()=>()=>P(2277))))),i("@next-core/loader","1.6.5",(()=>P.e(5399).then((()=>()=>P(7780))))),i("@next-core/pipes","2.0.24",(()=>P.e(6519).then((()=>()=>P(6519))))),i("@next-core/react-element","1.0.30",(()=>Promise.all([P.e(8769),P.e(4782),P.e(9435),P.e(114)]).then((()=>()=>P(114))))),i("@next-core/react-runtime","1.6.17",(()=>Promise.all([P.e(8769),P.e(1030),P.e(1389),P.e(1653),P.e(4837)]).then((()=>()=>P(4837))))),i("@next-core/runtime","1.50.0",(()=>Promise.all([P.e(7507),P.e(3533),P.e(1030),P.e(3518),P.e(1302),P.e(6237),P.e(9042),P.e(5811)]).then((()=>()=>P(3533))))),i("@next-core/supply","2.1.20",(()=>Promise.all([P.e(1030),P.e(4285),P.e(1302),P.e(9559)]).then((()=>()=>P(9559))))),i("@next-core/theme","1.5.2",(()=>Promise.all([P.e(1889),P.e(2052)]).then((()=>()=>P(1889))))),i("@next-core/utils/general","1.7.16",(()=>P.e(871).then((()=>()=>P(871))))),i("@next-core/utils/storyboard","1.7.16",(()=>Promise.all([P.e(3518),P.e(9042),P.e(3933)]).then((()=>()=>P(3933))))),i("history","4.10.1",(()=>P.e(5384).then((()=>()=>P(5384))))),i("i18next-browser-languagedetector","7.2.1",(()=>P.e(726).then((()=>()=>P(726))))),i("i18next","22.5.1",(()=>P.e(7304).then((()=>()=>P(7304))))),i("js-yaml","3.14.1",(()=>P.e(9515).then((()=>()=>P(9515))))),i("lodash","4.17.21",(()=>P.e(5250).then((()=>()=>P(5250))))),i("moment/locale/zh-cn.js","2.30.1",(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(1329))))),i("moment","2.30.1",(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(9420))))),i("react-dom","0.0.0-experimental-ee8509801-20230117",(()=>Promise.all([P.e(3144),P.e(8769)]).then((()=>()=>P(3144))))),i("react","0.0.0-experimental-ee8509801-20230117",(()=>P.e(4041).then((()=>()=>P(4041)))))),e[r]=s.length?Promise.all(s).then((()=>e[r]=1)):1}}})(),(()=>{var e;P.g.importScripts&&(e=P.g.location+"");var t=P.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),P.p=e})(),r=e=>{var t=e=>e.split(".").map((e=>+e==e?+e:e)),r=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=r[1]?t(r[1]):[];return r[2]&&(n.length++,n.push.apply(n,t(r[2]))),r[3]&&(n.push([]),n.push.apply(n,t(r[3]))),n},n=(e,t)=>{e=r(e),t=r(t);for(var n=0;;){if(n>=e.length)return n<t.length&&"u"!=(typeof t[n])[0];var a=e[n],o=(typeof a)[0];if(n>=t.length)return"u"==o;var l=t[n],i=(typeof l)[0];if(o!=i)return"o"==o&&"n"==i||"s"==i||"u"==o;if("o"!=o&&"u"!=o&&a!=l)return a<l;n++}},a=e=>{var t=e[0],r="";if(1===e.length)return"*";if(t+.5){r+=0==t?">=":-1==t?"<":1==t?"^":2==t?"~":t>0?"=":"!=";for(var n=1,o=1;o<e.length;o++)n--,r+="u"==(typeof(i=e[o]))[0]?"-":(n>0?".":"")+(n=2,i);return r}var l=[];for(o=1;o<e.length;o++){var i=e[o];l.push(0===i?"not("+s()+")":1===i?"("+s()+" || "+s()+")":2===i?l.pop()+" "+l.pop():a(i))}return s();function s(){return l.pop().replace(/^\((.+)\)$/,"$1")}},o=(e,t)=>{if(0 in e){t=r(t);var n=e[0],a=n<0;a&&(n=-n-1);for(var l=0,i=1,s=!0;;i++,l++){var d,c,u=i<e.length?(typeof e[i])[0]:"";if(l>=t.length||"o"==(c=(typeof(d=t[l]))[0]))return!s||("u"==u?i>n&&!a:""==u!=a);if("u"==c){if(!s||"u"!=u)return!1}else if(s)if(u==c)if(i<=n){if(d!=e[i])return!1}else{if(a?d>e[i]:d<e[i])return!1;d!=e[i]&&(s=!1)}else if("s"!=u&&"n"!=u){if(a||i<=n)return!1;s=!1,i--}else{if(i<=n||c<u!=a)return!1;s=!1}else"s"!=u&&"n"!=u&&(s=!1,i--)}}var f=[],h=f.pop.bind(f);for(l=1;l<e.length;l++){var p=e[l];f.push(1==p?h()|h():2==p?h()&h():p?o(p,t):!h())}return!!h()},l=(e,t)=>{var r=e[t];return Object.keys(r).reduce(((e,t)=>!e||!r[e].loaded&&n(e,t)?t:e),0)},i=(e,t,r,n)=>"Unsatisfied version "+r+" from "+(r&&e[t][r].from)+" of shared singleton module "+t+" (required "+a(n)+")",s=(e,t,r,n)=>{var a=l(e,r);return o(n,a)||c(i(e,r,a,n)),u(e[r][a])},d=(e,t,r)=>{var a=e[t];return(t=Object.keys(a).reduce(((e,t)=>!o(r,t)||e&&!n(e,t)?e:t),0))&&a[t]},c=e=>{"undefined"!=typeof console&&console.warn&&console.warn(e)},u=e=>(e.loaded=1,e.get()),h=(f=e=>function(t,r,n,a){var o=P.I(t);return o&&o.then?o.then(e.bind(e,t,P.S[t],r,n,a)):e(t,P.S[t],r,n,a)})(((e,t,r,n,a)=>t&&P.o(t,r)?s(t,0,r,n):a())),p=f(((e,t,r,n,a)=>{var o=t&&P.o(t,r)&&d(t,r,n);return o?u(o):a()})),m={},b={1030:()=>h("default","lodash",[1,4,17,21],(()=>P.e(5250).then((()=>()=>P(5250))))),1204:()=>h("default","js-yaml",[1,3,14,0],(()=>P.e(9515).then((()=>()=>P(9515))))),8297:()=>h("default","moment",[1,2,27,0],(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(9420))))),1760:()=>h("default","@babel/parser",[1,7,24,7],(()=>P.e(6773).then((()=>()=>P(6773))))),3518:()=>h("default","@next-core/utils/general",[1,1,7,16],(()=>P.e(871).then((()=>()=>P(871))))),8618:()=>h("default","@next-core/i18n",[1,1,0,58],(()=>Promise.all([P.e(9755),P.e(3171)]).then((()=>()=>P(5552))))),2350:()=>h("default","i18next",[1,22,5,1],(()=>P.e(7304).then((()=>()=>P(7304))))),7072:()=>h("default","i18next-browser-languagedetector",[1,7,2,1],(()=>P.e(726).then((()=>()=>P(726))))),4285:()=>h("default","@next-core/pipes",[1,2,0,24],(()=>P.e(6519).then((()=>()=>P(6519))))),161:()=>h("default","@easyops-cn/brick-next-pipes",[2,0,6,0],(()=>Promise.all([P.e(4741),P.e(1030),P.e(6688)]).then((()=>()=>P(4741))))),8769:()=>p("default","react",[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>P.e(4041).then((()=>()=>P(4041))))),4782:()=>p("default","@next-core/element",[1,1,2,11],(()=>P.e(3426).then((()=>()=>P(1045))))),9435:()=>p("default","react-dom",[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>P.e(3144).then((()=>()=>P(3144))))),1389:()=>p("default","@next-core/react-element",[1,1,0,30],(()=>Promise.all([P.e(4782),P.e(9435),P.e(7733)]).then((()=>()=>P(114))))),1653:()=>h("default","@next-core/runtime",[1,1,50,0],(()=>Promise.all([P.e(7507),P.e(3533),P.e(3518),P.e(1302),P.e(6237),P.e(9042),P.e(5811)]).then((()=>()=>P(3533))))),1302:()=>h("default","moment",[1,2,30,1],(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(9420))))),9042:()=>h("default","@next-core/cook",[1,2,4,7],(()=>Promise.all([P.e(1122),P.e(1760)]).then((()=>()=>P(1122))))),1680:()=>h("default","@next-core/supply",[1,2,1,20],(()=>Promise.all([P.e(4285),P.e(1940)]).then((()=>()=>P(9559))))),2224:()=>h("default","@next-core/inject",[1,1,0,39],(()=>Promise.all([P.e(4285),P.e(4658)]).then((()=>()=>P(2277))))),2890:()=>h("default","history",[1,4,10,1],(()=>P.e(5384).then((()=>()=>P(5384))))),6036:()=>h("default","moment/locale/zh-cn.js",[1,2,30,1],(()=>Promise.all([P.e(7721),P.e(9844)]).then((()=>()=>P(1329))))),6849:()=>h("default","@next-core/loader",[1,1,6,5],(()=>P.e(5399).then((()=>()=>P(7780))))),8202:()=>h("default","@next-core/utils/storyboard",[1,1,7,16],(()=>P.e(6314).then((()=>()=>P(3933))))),9422:()=>h("default","@next-core/http",[1,1,2,6],(()=>P.e(3751).then((()=>()=>P(8989))))),9583:()=>h("default","@next-core/theme",[1,1,5,2],(()=>P.e(1889).then((()=>()=>P(1889))))),3128:()=>p("default","@next-core/react-runtime",[1,1,6,17],(()=>P.e(7218).then((()=>()=>P(4837))))),3496:()=>h("default","@next-core/http",[1,1,0,6],(()=>P.e(1370).then((()=>()=>P(8989)))))},v={1030:[1030],1302:[1302],1389:[1389],1653:[1653],1760:[1760],2416:[3496],3128:[3128],3518:[3518],4285:[4285],4782:[4782],5811:[1680,2224,2890,6036,6849,8202,9422],6237:[8618],6519:[161],6688:[1204,8297],8769:[8769],9042:[9042],9435:[9435],9583:[9583],9755:[2350,7072]},g={},P.f.consumes=(e,t)=>{P.o(v,e)&&v[e].forEach((e=>{if(P.o(m,e))return t.push(m[e]);if(!g[e]){var r=t=>{m[e]=0,P.m[e]=r=>{delete P.c[e],r.exports=t()}};g[e]=!0;var n=t=>{delete m[e],P.m[e]=r=>{throw delete P.c[e],t}};try{var a=b[e]();a.then?t.push(m[e]=a.then(r).catch(n)):r(a)}catch(e){n(e)}}}))},(()=>{var e={2691:0};P.f.j=(t,r)=>{var n=P.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else if(/^(1(030|302|389|653|760)|9(042|435|583|755)|(312|351|668)8|4285|4782|5811|6237|8769)$/.test(t))e[t]=0;else{var a=new Promise(((r,a)=>n=e[t]=[r,a]));r.push(n[2]=a);var o=P.p+P.u(t),l=new Error;P.l(o,(r=>{if(P.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;l.message="Loading chunk "+t+" failed.\n("+a+": "+o+")",l.name="ChunkLoadError",l.type=a,l.request=o,n[1](l)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,a,[o,l,i]=r,s=0;if(o.some((t=>0!==e[t]))){for(n in l)P.o(l,n)&&(P.m[n]=l[n]);i&&i(P)}for(t&&t(r);s<o.length;s++)a=o[s],P.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=globalThis.webpackChunk_next_bricks_diagram=globalThis.webpackChunk_next_bricks_diagram||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),P.nc=void 0;var w=P(9476);window["bricks/diagram"]=w})();
2
+ //# sourceMappingURL=index.4a82a761.js.map