@next-bricks/diagram 0.49.0 → 0.49.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.265be22b.js → index.1945c3e6.js} +2 -2
  4. package/dist/{index.265be22b.js.map → index.1945c3e6.js.map} +1 -1
  5. package/dist/manifest.json +186 -186
  6. package/dist/types.json +4093 -4093
  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.265be22b.js"
19
+ "filePath": "bricks/diagram/dist/index.1945c3e6.js"
20
20
  }
package/dist/examples.json CHANGED
@@ -2,13 +2,13 @@
2
2
  "eo-diagram": {
3
3
  "doc": "构件 `eo-diagram`\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"600px\"\nbrick: div\nproperties:\n style:\n position: fixed\n height: 100vh\n width: 100vw\n top: 0px\n left: 0px\ncontext:\n - name: activeTarget\n value: null\n - name: nodes\n value:\n - id: kspacey\n label: Kevin Spacey\n - id: swilliams\n label: Saul Williams\n - id: bpitt\n label: Brad Pitt\n # - id: hford\n # label: Harrison Ford\n - id: lwilson\n label: Luke Wilson\n - id: kbacon\n label: Kevin Bacon\n - name: edges\n value:\n - source: kspacey\n target: swilliams\n - source: swilliams\n target: kbacon\n - source: bpitt\n target: kbacon\n # - source: hford\n # target: lwilson\n - source: lwilson\n target: kbacon\nchildren:\n - brick: eo-button\n properties:\n textContent: Add Harrison Ford\n events:\n click:\n - action: context.replace\n args:\n - nodes\n - |\n <%\n CTX.nodes.concat({\n id: \"hford\",\n label: \"Harrison Ford\",\n })\n %>\n - action: context.replace\n args:\n - edges\n - |\n <%\n CTX.edges.concat({\n source: \"hford\",\n target: \"lwilson\",\n })\n %>\n - target: _self\n properties:\n style:\n visibility: hidden\n - brick: eo-button\n properties:\n textContent: Remove Kevin Spacey\n events:\n click:\n - action: context.replace\n args:\n - nodes\n - |\n <%\n CTX.nodes.filter(node => node.id !== \"kspacey\")\n %>\n - action: context.replace\n args:\n - edges\n - |\n <%\n CTX.edges.filter(({ source, target }) => source !== \"kspacey\" && target !== \"kspacey\")\n %>\n - target: _self\n properties:\n style:\n visibility: hidden\n - brick: eo-diagram\n properties:\n layout: dagre\n nodes: <%= CTX.nodes %>\n edges: <%= CTX.edges %>\n lines:\n - arrow: true\n activeTarget: <%= CTX.activeTarget %>\n nodeBricks:\n - useBrick:\n # if: <% DATA.node.id !== \"kbacon\" %>\n brick: div\n properties:\n style: |\n <%=\n {\n width: \"180px\",\n height: \"100px\",\n border: \"2px solid green\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n outline: CTX.activeTarget?.type === \"node\" && CTX.activeTarget.nodeId === DATA.node.id ? \"2px solid orange\" : \"none\",\n outlineOffset: \"2px\",\n }\n %>\n children:\n - brick: span\n properties:\n textContent: <% DATA.node.label %>\n events:\n click:\n action: context.replace\n args:\n - activeTarget\n - type: node\n nodeId: <% DATA.node.id %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"position: fixed; height: 100vh; width: 100vw; top: 0px; left: 0px\">\n# <eo-button id=\"brick-1\">Add Harrison Ford</eo-button>\n# <eo-button id=\"brick-2\">Remove Kevin Spacey</eo-button>\n# <eo-diagram layout=\"dagre\" id=\"brick-3\"></eo-diagram>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"click\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"click\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"click\", (e) => {\n# const brick = e.target;\n# brick.style = {\n# visibility: \"hidden\",\n# };\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.addEventListener(\"click\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_2.addEventListener(\"click\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_2.addEventListener(\"click\", (e) => {\n# const brick = e.target;\n# brick.style = {\n# visibility: \"hidden\",\n# };\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.nodes = \"<%= CTX.nodes %>\";\n# brick_3.edges = \"<%= CTX.edges %>\";\n# brick_3.lines = [\n# {\n# arrow: true,\n# },\n# ];\n# brick_3.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_3.nodeBricks = [\n# {\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style:\n# '<%=\\n {\\n width: \"180px\",\\n height: \"100px\",\\n border: \"2px solid green\",\\n display: \"flex\",\\n alignItems: \"center\",\\n justifyContent: \"center\",\\n outline: CTX.activeTarget?.type === \"node\" && CTX.activeTarget.nodeId === DATA.node.id ? \"2px solid orange\" : \"none\",\\n outlineOffset: \"2px\",\\n }\\n%>\\n',\n# },\n# children: [\n# {\n# brick: \"span\",\n# properties: {\n# textContent: \"<% DATA.node.label %>\",\n# },\n# },\n# ],\n# events: {\n# click: {\n# action: \"context.replace\",\n# args: [\n# \"activeTarget\",\n# {\n# type: \"node\",\n# nodeId: \"<% DATA.node.id %>\",\n# },\n# ],\n# },\n# },\n# },\n# },\n# ];\n# brick_3.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n\n### Page Architecture\n\n```yaml preview minHeight=\"600px\"\nbrick: div\nproperties:\n style:\n position: fixed\n height: 100vh\n width: 100vw\n top: 0px\n left: 0px\ncontext:\n - name: activeTarget\n value: null\n - name: tempNodeId\n - name: targetNode\n - name: editingLabelNodes\n value: []\n - name: editingLabelEdges\n value: []\n - name: nodes\n value:\n - type: board\n id: 60bf6078b095f\n name: Visual Builder\n depth: 0\n parentId:\n description: 某某产品\n - type: page\n id: 60bf60848d6d2\n name: 项目列表\n depth: 1\n parentId: 60bf6078b095f\n description: 列表页\n - type: page\n id: 60d533eba4ab2\n name: ccc\n depth: 1\n parentId: 60bf6078b095f\n description: cccc\n - type: link\n id: 60bf6091a1089\n name: 新建项目\n pageType: information:form:basic-form\n description: 新建页213\n to:\n \"@\":\n description: 无项目\n instanceId: 60c5fea301b32\n description: 新建页213\n instanceId: 60bf6091a1089\n module: []\n name: 新建项目\n pageType: information:form:basic-form\n depth: -1\n parentId:\n - type: link\n id: 60bf60a258613\n name: 项目首页-路由管理\n description: 路由管理\n to:\n description: 路由管理\n instanceId: 60bf60a258613\n module:\n - instanceId: 60bf609b26889\n name: Project\n name: 项目首页-路由管理\n depth: -1\n parentId:\n - type: link\n id: 60c5f39a2c2e1\n name: Launchpad 出厂配置\n description: Launchpad 出厂配置\n to:\n description: Launchpad 出厂配置\n instanceId: 60c5f39a2c2e1\n module: []\n name: Launchpad 出厂配置\n depth: -1\n parentId:\n - name: edges\n value:\n - type: menu\n source: 60bf6078b095f\n target: 60bf60848d6d2\n - type: menu\n source: 60bf6078b095f\n target: 60d533eba4ab2\n - type: link\n source: 60bf60848d6d2\n target: 60bf6091a1089\n description: 无项目\n - type: link\n source: 60bf60848d6d2\n target: 60bf60a258613\n - type: link\n source: 60bf60848d6d2\n target: 60c5f39a2c2e1\nchildren:\n - brick: eo-diagram\n properties:\n layout: dagre\n nodes: <%= CTX.nodes %>\n edges: <%= CTX.edges %>\n lines:\n - edgeType: link\n strokeColor: var(--theme-blue-color)\n arrow: true\n interactable: true\n label:\n useBrick:\n brick: diagram.editable-label\n properties:\n label: <% DATA.edge.description %>\n type: line\n events:\n label.change:\n if: <% (DATA.edge.description || \"\") !== (EVENT.detail || \"\") %>\n action: context.replace\n args:\n - edges\n - |-\n <%\n CTX.edges.map((edge) =>\n edge.source === DATA.edge.source &&\n edge.target === DATA.edge.target\n ? { ...edge, description: EVENT.detail }\n : edge\n )\n %>\n label.editing.change:\n action: context.replace\n args:\n - editingLabelEdges\n - |-\n <%\n EVENT.detail\n ? CTX.editingLabelEdges.concat(\n `${DATA.edge.source}-:-${DATA.edge.target}`\n )\n : CTX.editingLabelEdges.filter(\n (id) =>\n id !== `${DATA.edge.source}-:-${DATA.edge.target}`\n )\n %>\n click:\n action: context.replace\n args:\n - activeTarget\n - type: edge\n edge: <% DATA.edge %>\n - edgeType: menu\n strokeColor: var(--palette-gray-5)\n arrow: true\n interactable: true\n layoutOptions:\n nodePadding: [4, 10, 10]\n activeTarget: <%= CTX.activeTarget %>\n disableKeyboardAction: <%= CTX.editingLabelNodes.length > 0 || CTX.editingLabelEdges.length > 0 %>\n connectNodes:\n arrow: true\n strokeColor: |-\n <%\n DATA.source.type === \"board\"\n ? \"var(--palette-gray-5)\"\n : \"var(--theme-blue-color)\"\n %>\n nodeBricks:\n - useBrick:\n brick: visual-builder.page-arch-node\n properties:\n label: <% DATA.node.name %>\n type: <% DATA.node.type %>\n autoFocusOnce: |\n <% DATA.node.$temp ? DATA.node.id : undefined %>\n active: <%= CTX.activeTarget?.type === \"node\" && CTX.activeTarget.nodeId === DATA.node.id %>\n events:\n click:\n action: context.replace\n args:\n - activeTarget\n - type: node\n nodeId: <% DATA.node.id %>\n label.editing.change:\n action: context.replace\n args:\n - editingLabelNodes\n - |\n <%\n EVENT.detail\n ? CTX.editingLabelNodes.concat(DATA.node.id)\n : CTX.editingLabelNodes.filter(\n id => id !== DATA.node.id\n )\n %>\n label.change:\n - if: <% CTX.nodes.find(({id}) => id === DATA.node.id)?.$temp %>\n action: context.replace\n args:\n args:\n - nodes\n - |\n <%\n CTX.nodes.map((node) => (\n node.id === DATA.node.id\n ? { ...node, $temp: false, name: EVENT.detail }\n : node\n ))\n %>\n # Take reaction only if the label has been changed\n - if: <% CTX.nodes.find(({id}) => id === DATA.node.id)?.name !== EVENT.detail %>\n action: context.replace\n args:\n - nodes\n - |\n <%\n CTX.nodes.map((node) => (\n node.id === DATA.node.id\n ? { ...node, name: EVENT.detail }\n : node\n ))\n %>\n child.append:\n - action: context.replace\n args:\n - tempNodeId\n - <% _.uniqueId('$temp-') %>\n - action: context.replace\n args:\n - nodes\n - |\n <% CTX.nodes.concat({ id: CTX.tempNodeId, name: \"未命名\", $temp: true }) %>\n - action: context.replace\n args:\n - edges\n - |\n <% CTX.edges.concat({ source: DATA.node.id, target: CTX.tempNodeId, name: \"未命名\", type: \"link\", $temp: true }) %>\n - action: context.replace\n args:\n - activeTarget\n - type: node\n nodeId: <% CTX.tempNodeId %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n node.delete:\n - action: context.replace\n args:\n - targetNode\n - <% EVENT.detail %>\n - useProvider: basic.show-dialog\n args:\n - type: delete\n title: Delete Confirm\n content: Please enter {{ expect }} to delete the node.\n expect: <% EVENT.detail.name || \"未命名\" %>\n callback:\n success:\n - action: context.replace\n args:\n - nodes\n - |-\n <%\n CTX.nodes.filter(\n ({ id }) => id !== CTX.targetNode.id\n )\n %>\n - action: context.replace\n args:\n - edges\n - |-\n <%\n CTX.edges.filter(\n ({ source, target }) =>\n source !== CTX.targetNode.id &&\n target !== CTX.targetNode.id\n )\n %>\n edge.delete:\n action: context.replace\n args:\n - edges\n - |-\n <%\n CTX.edges.filter(\n ({ source, target }) =>\n source !== EVENT.detail.source ||\n target !== EVENT.detail.target\n )\n %>\n line.click:\n action: context.replace\n args:\n - activeTarget\n - type: edge\n edge: <% EVENT.detail.edge %>\n line.dblclick:\n target: _self\n method: callOnLineLabel\n args:\n - <% `${EVENT.detail.id}-center` %>\n - enableEditing\n nodes.connect:\n if: |-\n <%\n EVENT.detail.target.type !== \"board\" &&\n !CTX.edges.some(\n (edge) =>\n edge.source === EVENT.detail.source.id &&\n edge.target === EVENT.detail.target.id\n )\n %>\n action: context.replace\n args:\n - edges\n - |-\n <%\n CTX.edges.concat({\n source: EVENT.detail.source.id,\n target: EVENT.detail.target.id,\n type:\n EVENT.detail.source.type === \"board\"\n ? \"menu\"\n : \"link\",\n })\n %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"position: fixed; height: 100vh; width: 100vw; top: 0px; left: 0px\">\n# <eo-diagram layout=\"dagre\" disable-keyboard-action id=\"brick-1\"></eo-diagram>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.nodes = \"<%= CTX.nodes %>\";\n# brick_1.edges = \"<%= CTX.edges %>\";\n# brick_1.lines = [\n# {\n# edgeType: \"link\",\n# strokeColor: \"var(--theme-blue-color)\",\n# arrow: true,\n# interactable: true,\n# label: {\n# useBrick: {\n# brick: \"diagram.editable-label\",\n# properties: {\n# label: \"<% DATA.edge.description %>\",\n# type: \"line\",\n# },\n# events: {\n# \"label.change\": {\n# if: '<% (DATA.edge.description || \"\") !== (EVENT.detail || \"\") %>',\n# action: \"context.replace\",\n# args: [\n# \"edges\",\n# \"<%\\n CTX.edges.map((edge) =>\\n edge.source === DATA.edge.source &&\\n edge.target === DATA.edge.target\\n ? { ...edge, description: EVENT.detail }\\n : edge\\n )\\n%>\",\n# ],\n# },\n# \"label.editing.change\": {\n# action: \"context.replace\",\n# args: [\n# \"editingLabelEdges\",\n# \"<%\\n EVENT.detail\\n ? CTX.editingLabelEdges.concat(\\n `${DATA.edge.source}-:-${DATA.edge.target}`\\n )\\n : CTX.editingLabelEdges.filter(\\n (id) =>\\n id !== `${DATA.edge.source}-:-${DATA.edge.target}`\\n )\\n%>\",\n# ],\n# },\n# click: {\n# action: \"context.replace\",\n# args: [\n# \"activeTarget\",\n# {\n# type: \"edge\",\n# edge: \"<% DATA.edge %>\",\n# },\n# ],\n# },\n# },\n# },\n# },\n# },\n# {\n# edgeType: \"menu\",\n# strokeColor: \"var(--palette-gray-5)\",\n# arrow: true,\n# interactable: true,\n# },\n# ];\n# brick_1.layoutOptions = {\n# nodePadding: [4, 10, 10],\n# };\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.connectNodes = {\n# arrow: true,\n# strokeColor:\n# '<%\\n DATA.source.type === \"board\"\\n ? \"var(--palette-gray-5)\"\\n : \"var(--theme-blue-color)\"\\n%>',\n# };\n# brick_1.nodeBricks = [\n# {\n# useBrick: {\n# brick: \"visual-builder.page-arch-node\",\n# properties: {\n# label: \"<% DATA.node.name %>\",\n# type: \"<% DATA.node.type %>\",\n# autoFocusOnce: \"<% DATA.node.$temp ? DATA.node.id : undefined %>\\n\",\n# active:\n# '<%= CTX.activeTarget?.type === \"node\" && CTX.activeTarget.nodeId === DATA.node.id %>',\n# },\n# events: {\n# click: {\n# action: \"context.replace\",\n# args: [\n# \"activeTarget\",\n# {\n# type: \"node\",\n# nodeId: \"<% DATA.node.id %>\",\n# },\n# ],\n# },\n# \"label.editing.change\": {\n# action: \"context.replace\",\n# args: [\n# \"editingLabelNodes\",\n# \"<%\\n EVENT.detail\\n ? CTX.editingLabelNodes.concat(DATA.node.id)\\n : CTX.editingLabelNodes.filter(\\n id => id !== DATA.node.id\\n )\\n%>\\n\",\n# ],\n# },\n# \"label.change\": [\n# {\n# if: \"<% CTX.nodes.find(({id}) => id === DATA.node.id)?.$temp %>\",\n# action: \"context.replace\",\n# args: [\n# \"nodes\",\n# \"<%\\n CTX.nodes.map((node) => (\\n node.id === DATA.node.id\\n ? { ...node, $temp: false, name: EVENT.detail }\\n : node\\n ))\\n%>\\n\",\n# ],\n# },\n# {\n# if: \"<% CTX.nodes.find(({id}) => id === DATA.node.id)?.name !== EVENT.detail %>\",\n# action: \"context.replace\",\n# args: [\n# \"nodes\",\n# \"<%\\n CTX.nodes.map((node) => (\\n node.id === DATA.node.id\\n ? { ...node, name: EVENT.detail }\\n : node\\n ))\\n%>\\n\",\n# ],\n# },\n# ],\n# \"child.append\": [\n# {\n# action: \"context.replace\",\n# args: [\"tempNodeId\", \"<% _.uniqueId('$temp-') %>\"],\n# },\n# {\n# action: \"context.replace\",\n# args: [\n# \"nodes\",\n# '<% CTX.nodes.concat({ id: CTX.tempNodeId, name: \"未命名\", $temp: true }) %>\\n',\n# ],\n# },\n# {\n# action: \"context.replace\",\n# args: [\n# \"edges\",\n# '<% CTX.edges.concat({ source: DATA.node.id, target: CTX.tempNodeId, name: \"未命名\", type: \"link\", $temp: true }) %>\\n',\n# ],\n# },\n# {\n# action: \"context.replace\",\n# args: [\n# \"activeTarget\",\n# {\n# type: \"node\",\n# nodeId: \"<% CTX.tempNodeId %>\",\n# },\n# ],\n# },\n# ],\n# },\n# },\n# },\n# ];\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"node.delete\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"node.delete\", (e) => {\n# const provider = document.createElement(\"basic.show-dialog\");\n# const promise = Promise.resolve(\n# provider.resolve({\n# type: \"delete\",\n# title: \"Delete Confirm\",\n# content: \"Please enter {{ expect }} to delete the node.\",\n# expect: '<% EVENT.detail.name || \"未命名\" %>',\n# })\n# );\n# promise.then((r) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# promise.then((r) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# });\n# brick_1.addEventListener(\"edge.delete\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"line.click\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_1.addEventListener(\"line.dblclick\", (e) => {\n# const brick = e.target;\n# brick.callOnLineLabel(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% `${EVENT.detail.id}-center` %>\",\n# \"enableEditing\"\n# );\n# });\n# brick_1.addEventListener(\"nodes.connect\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n\n### Force\n\n```yaml preview minHeight=\"600px\"\nbrick: div\nproperties:\n style:\n position: fixed\n height: 100vh\n width: 100vw\n top: 0px\n left: 0px\ncontext:\n - name: activeTarget\n value: null\n - name: nodes\n value:\n - id: 产品评价\n - id: 产品线\n - id: 用户角色\n - id: 模型视图\n - id: 产品\n - id: 业务场景\n - id: 业务规则\n - id: 模型\n - id: 产品模块\n - id: 产品价值点\n - id: 工作流\n - id: 测试用例\n - id: 功能点\n # - id: 其他\n - name: edges\n value:\n - source: 产品\n target: 产品评价\n sourceName: 评价列表\n targetName: 所属产品\n sourceConstraints:\n required: true\n targetConstraints:\n multiple: true\n - source: 产品\n target: 产品线\n sourceName: 所属产品线\n targetName: 产品列表\n sourceConstraints:\n multiple: true\n targetConstraints:\n required: true\n - source: 产品\n target: 用户角色\n sourceName: 负责人\n targetName: 负责的产品\n sourceConstraints:\n multiple: true\n targetConstraints:\n multiple: true\n - source: 产品\n target: 模型视图\n sourceName: 模型视图列表\n targetName: 所属产品\n sourceConstraints:\n required: true\n targetConstraints:\n multiple: true\n - source: 产品\n target: 业务场景\n sourceName: 业务场景列表\n targetName: 所属产品\n sourceConstraints:\n required: true\n targetConstraints:\n multiple: true\n - source: 业务场景\n target: 业务场景\n - source: 业务场景\n target: 业务规则\n sourceName: 业务规则列表\n targetName: 所属业务场景\n sourceConstraints:\n required: true\n targetConstraints:\n multiple: true\n - source: 业务场景\n target: 用户角色\n sourceName: 负责人\n targetName: 负责的业务场景\n sourceConstraints:\n multiple: true\n targetConstraints:\n multiple: true\n - source: 产品\n target: 模型\n sourceName: 模型列表\n targetName: 关联的产品\n sourceConstraints:\n required: true\n targetConstraints:\n multiple: true\n - source: 产品\n target: 产品模块\n sourceName: 模块列表\n targetName: 所属产品\n sourceConstraints:\n required: true\n targetConstraints:\n multiple: true\n - source: 产品\n target: 产品价值点\n sourceName: 价值点列表\n targetName: 所属产品\n sourceConstraints:\n required: true\n targetConstraints:\n multiple: true\n - source: 业务场景\n target: 产品价值点\n sourceName: 价值点列表\n targetName: 关联的业务场景\n - source: 业务场景\n target: 工作流\n - source: 业务规则\n target: 工作流\n - source: 产品模块\n target: 产品模块\n - source: 产品模块\n target: 测试用例\n sourceName: 测试用例列表\n targetName: 所属产品模块\n sourceConstraints:\n multiple: true\n targetConstraints:\n multiple: true\n - source: 产品模块\n target: 功能点\n sourceName: 功能点列表\n targetName: 所属产品模块\n sourceConstraints:\n required: true\n targetConstraints:\n multiple: true\n - source: 测试用例\n target: 功能点\n sourceName: 关联的功能点\n targetName: 关联的测试用例\n sourceConstraints:\n multiple: true\n targetConstraints:\n multiple: true\n # - source: 产品线\n # target: 模型视图\nchildren:\n - brick: eo-diagram\n properties:\n layout: force\n dragNodes: {}\n nodes: <%= CTX.nodes %>\n edges: <%= CTX.edges %>\n activeTarget: <%= CTX.activeTarget %>\n layoutOptions:\n # nodePadding: 5\n dummyNodesOnEdges: 1\n collide:\n dummyRadius: 10\n radiusDiff: 40\n # rankdir: LR\n # acyclicer: greedy\n # align: DL\n lines:\n - label:\n - useBrick:\n brick: span\n properties:\n hidden: <%= CTX.activeTarget?.type !== \"node\" || (DATA.edge.source !== CTX.activeTarget.nodeId && DATA.edge.target !== CTX.activeTarget.nodeId) %>\n textContent: |\n <%= DATA.edge.source === CTX.activeTarget?.nodeId ? DATA.edge.sourceName : DATA.edge.target === CTX.activeTarget?.nodeId ? DATA.edge.targetName : \"\" %>\n style:\n color: var(--palette-gray-6)\n overrides:\n activeRelated:\n strokeColor: var(--palette-blue-4)\n nodeBricks:\n - useBrick:\n # if: <% DATA.node.id !== \"kbacon\" %>\n brick: div\n properties:\n style: |\n <%=\n {\n width: \"160px\",\n height: \"50px\",\n background: \"var(--palette-green-1)\",\n border: \"1px solid var(--palette-gray-4)\",\n borderRadius: \"8px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n outline: CTX.activeTarget?.type === \"node\" && DATA.node.id === CTX.activeTarget.nodeId ? \"2px solid orange\" : \"none\",\n outlineOffset: \"2px\",\n cursor: \"pointer\",\n userSelect: \"none\",\n }\n %>\n children:\n - brick: span\n properties:\n textContent: <% DATA.node.id %>\n events:\n click:\n action: context.replace\n args:\n - activeTarget\n - type: node\n nodeId: <% DATA.node.id %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"position: fixed; height: 100vh; width: 100vw; top: 0px; left: 0px\">\n# <eo-diagram layout=\"force\" id=\"brick-1\"></eo-diagram>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.dragNodes = {};\n# brick_1.nodes = \"<%= CTX.nodes %>\";\n# brick_1.edges = \"<%= CTX.edges %>\";\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.layoutOptions = {\n# dummyNodesOnEdges: 1,\n# collide: {\n# dummyRadius: 10,\n# radiusDiff: 40,\n# },\n# };\n# brick_1.lines = [\n# {\n# label: [\n# {\n# useBrick: {\n# brick: \"span\",\n# properties: {\n# hidden:\n# '<%= CTX.activeTarget?.type !== \"node\" || (DATA.edge.source !== CTX.activeTarget.nodeId && DATA.edge.target !== CTX.activeTarget.nodeId) %>',\n# textContent:\n# '<%= DATA.edge.source === CTX.activeTarget?.nodeId ? DATA.edge.sourceName : DATA.edge.target === CTX.activeTarget?.nodeId ? DATA.edge.targetName : \"\" %>\\n',\n# style: {\n# color: \"var(--palette-gray-6)\",\n# },\n# },\n# },\n# },\n# ],\n# overrides: {\n# activeRelated: {\n# strokeColor: \"var(--palette-blue-4)\",\n# },\n# },\n# },\n# ];\n# brick_1.nodeBricks = [\n# {\n# useBrick: {\n# brick: \"div\",\n# properties: {\n# style:\n# '<%=\\n {\\n width: \"160px\",\\n height: \"50px\",\\n background: \"var(--palette-green-1)\",\\n border: \"1px solid var(--palette-gray-4)\",\\n borderRadius: \"8px\",\\n display: \"flex\",\\n alignItems: \"center\",\\n justifyContent: \"center\",\\n outline: CTX.activeTarget?.type === \"node\" && DATA.node.id === CTX.activeTarget.nodeId ? \"2px solid orange\" : \"none\",\\n outlineOffset: \"2px\",\\n cursor: \"pointer\",\\n userSelect: \"none\",\\n }\\n%>\\n',\n# },\n# children: [\n# {\n# brick: \"span\",\n# properties: {\n# textContent: \"<% DATA.node.id %>\",\n# },\n# },\n# ],\n# events: {\n# click: {\n# action: \"context.replace\",\n# args: [\n# \"activeTarget\",\n# {\n# type: \"node\",\n# nodeId: \"<% DATA.node.id %>\",\n# },\n# ],\n# },\n# },\n# },\n# },\n# ];\n# brick_1.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# </script>\n# \n```\n"
4
4
  },
5
+ "eo-draw-canvas": {
6
+ "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 var(--palette-gray-6)\"\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 layoutOptions:\n snap:\n # grid: true\n object: 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 === \"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 - if: <% !DATA.edge.data?.virtual %>\n dotted: true\n showStartArrow: true\n markers:\n - placement: end\n type: circle\n - placement: start\n type: arrow\n cells: <% CTX.initialCells %>\n lineConnector: true\n lineSettings:\n type: polyline\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 edge.add:\n action: message.info\n args:\n - |\n <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n edge.view.change:\n action: message.info\n args:\n - |\n <% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\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 var(--palette-gray-6);\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.layoutOptions = {\n# snap: {\n# object: true,\n# },\n# };\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# if: \"<% !DATA.edge.data?.virtual %>\",\n# dotted: true,\n# showStartArrow: true,\n# markers: [\n# {\n# placement: \"end\",\n# type: \"circle\",\n# },\n# {\n# placement: \"start\",\n# type: \"arrow\",\n# },\n# ],\n# },\n# ];\n# brick_6.cells = \"<% CTX.initialCells %>\";\n# brick_6.lineConnector = true;\n# brick_6.lineSettings = {\n# type: \"polyline\",\n# };\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(\"edge.add\", (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: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n# });\n# });\n# brick_6.addEventListener(\"edge.view.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: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n# });\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### Line settings\n\n设置属性 `lineSettings` 来调整新的连线的样式，例如使用折线或直线。注意，该设置不影响已有的 edge 的连线样式。\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n flexDirection: column\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"node\",\n id: \"X\",\n data: {\n name: \"Node X\",\n },\n view: {\n x: 100,\n y: 100,\n width: 60,\n height: 60,\n }\n },\n {\n type: \"node\",\n id: \"Y\",\n data: {\n name: \"Node Y\",\n },\n view: {\n x: 0,\n y: 300,\n width: 60,\n height: 60,\n }\n },\n {\n type: \"node\",\n id: \"Z\",\n data: {\n name: \"Node Z\",\n },\n view: {\n x: 300,\n y: 200,\n width: 60,\n height: 60,\n }\n },\n ]\n %>\n - name: dragging\n - name: activeTarget\n - name: targetCell\n - name: scale\n value: 1\n - name: lineType\n value: polyline\n children:\n - brick: div\n children:\n - brick: eo-radio\n properties:\n type: button\n value: polyline\n options:\n - polyline\n - straight\n events:\n change:\n action: context.replace\n args:\n - lineType\n - <% EVENT.detail.value %>\n - brick: div\n properties:\n style:\n flex: 1\n minHeight: 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 dragBehavior: lasso\n layoutOptions:\n snap:\n object: true\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 cells: <% CTX.initialCells %>\n lineConnector: true\n lineSettings: |\n <%= { type: CTX.lineType } %>\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 edge.add:\n action: message.info\n args:\n - |\n <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n edge.view.change:\n action: message.info\n args:\n - |\n <% `Edge view changed: ${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; flex-direction: column; height: 600px; gap: 1em\">\n# <div>\n# <eo-radio\n# type=\"button\"\n# value=\"polyline\"\n# options=\"polyline,straight\"\n# id=\"brick-1\"\n# ></eo-radio>\n# </div>\n# <div style=\"flex: 1; min-height: 0\">\n# <eo-draw-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# drag-behavior=\"lasso\"\n# id=\"brick-2\"\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-3\"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_2.layoutOptions = {\n# snap: {\n# object: true,\n# },\n# };\n# brick_2.defaultNodeSize = [60, 60];\n# brick_2.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_2.cells = \"<% CTX.initialCells %>\";\n# brick_2.lineConnector = true;\n# brick_2.lineSettings = \"<%= { type: CTX.lineType } %>\\n\";\n# brick_2.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_2.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_2.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_2.addEventListener(\"edge.add\", (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: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n# });\n# });\n# brick_2.addEventListener(\"edge.view.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: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n# });\n# });\n# brick_2.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.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"
7
+ },
5
8
  "eo-display-canvas": {
6
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 {\n type: \"edge\",\n source: \"W\",\n target: \"Z\",\n view: {\n entryPosition: { x: 0, y: 0.5 },\n exitPosition: {x: 0.5, y: 0}\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 showStartArrow: true\n markers:\n - placement: end\n type: circle\n - placement: start\n type: arrow\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: true,\n# strokeWidth: \"<% DATA.edge?.data?.strokeWidth %>\",\n# animate: \"<% DATA.edge?.data?.animate %>\",\n# markers: [\n# {\n# placement: \"end\",\n# type: \"circle\",\n# },\n# {\n# placement: \"start\",\n# type: \"arrow\",\n# },\n# ],\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"
7
10
  },
8
11
  "diagram.editable-label": {
9
12
  "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"
10
- },
11
- "eo-draw-canvas": {
12
- "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 var(--palette-gray-6)\"\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 layoutOptions:\n snap:\n # grid: true\n object: 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 === \"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 - if: <% !DATA.edge.data?.virtual %>\n dotted: true\n showStartArrow: true\n markers:\n - placement: end\n type: circle\n - placement: start\n type: arrow\n cells: <% CTX.initialCells %>\n lineConnector: true\n lineSettings:\n type: polyline\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 edge.add:\n action: message.info\n args:\n - |\n <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n edge.view.change:\n action: message.info\n args:\n - |\n <% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\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 var(--palette-gray-6);\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.layoutOptions = {\n# snap: {\n# object: true,\n# },\n# };\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# if: \"<% !DATA.edge.data?.virtual %>\",\n# dotted: true,\n# showStartArrow: true,\n# markers: [\n# {\n# placement: \"end\",\n# type: \"circle\",\n# },\n# {\n# placement: \"start\",\n# type: \"arrow\",\n# },\n# ],\n# },\n# ];\n# brick_6.cells = \"<% CTX.initialCells %>\";\n# brick_6.lineConnector = true;\n# brick_6.lineSettings = {\n# type: \"polyline\",\n# };\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(\"edge.add\", (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: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n# });\n# });\n# brick_6.addEventListener(\"edge.view.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: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n# });\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### Line settings\n\n设置属性 `lineSettings` 来调整新的连线的样式，例如使用折线或直线。注意，该设置不影响已有的 edge 的连线样式。\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n flexDirection: column\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n },\n {\n type: \"node\",\n id: \"X\",\n data: {\n name: \"Node X\",\n },\n view: {\n x: 100,\n y: 100,\n width: 60,\n height: 60,\n }\n },\n {\n type: \"node\",\n id: \"Y\",\n data: {\n name: \"Node Y\",\n },\n view: {\n x: 0,\n y: 300,\n width: 60,\n height: 60,\n }\n },\n {\n type: \"node\",\n id: \"Z\",\n data: {\n name: \"Node Z\",\n },\n view: {\n x: 300,\n y: 200,\n width: 60,\n height: 60,\n }\n },\n ]\n %>\n - name: dragging\n - name: activeTarget\n - name: targetCell\n - name: scale\n value: 1\n - name: lineType\n value: polyline\n children:\n - brick: div\n children:\n - brick: eo-radio\n properties:\n type: button\n value: polyline\n options:\n - polyline\n - straight\n events:\n change:\n action: context.replace\n args:\n - lineType\n - <% EVENT.detail.value %>\n - brick: div\n properties:\n style:\n flex: 1\n minHeight: 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 dragBehavior: lasso\n layoutOptions:\n snap:\n object: true\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 cells: <% CTX.initialCells %>\n lineConnector: true\n lineSettings: |\n <%= { type: CTX.lineType } %>\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 edge.add:\n action: message.info\n args:\n - |\n <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n edge.view.change:\n action: message.info\n args:\n - |\n <% `Edge view changed: ${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; flex-direction: column; height: 600px; gap: 1em\">\n# <div>\n# <eo-radio\n# type=\"button\"\n# value=\"polyline\"\n# options=\"polyline,straight\"\n# id=\"brick-1\"\n# ></eo-radio>\n# </div>\n# <div style=\"flex: 1; min-height: 0\">\n# <eo-draw-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# drag-behavior=\"lasso\"\n# id=\"brick-2\"\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-3\"\n# ></eo-context-menu>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# \n# const brick_2 = document.getElementById(\"brick-2\");\n# brick_2.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_2.layoutOptions = {\n# snap: {\n# object: true,\n# },\n# };\n# brick_2.defaultNodeSize = [60, 60];\n# brick_2.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_2.cells = \"<% CTX.initialCells %>\";\n# brick_2.lineConnector = true;\n# brick_2.lineSettings = \"<%= { type: CTX.lineType } %>\\n\";\n# brick_2.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_2.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_2.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_2.addEventListener(\"edge.add\", (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: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n# });\n# });\n# brick_2.addEventListener(\"edge.view.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: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n# });\n# });\n# brick_2.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# \n# const brick_3 = document.getElementById(\"brick-3\");\n# brick_3.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"
13
13
  }
14
14
  }