@next-bricks/diagram 0.63.0 → 0.63.2

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 (12) hide show
  1. package/dist/bricks.json +3 -3
  2. package/dist/chunks/{8522.dcbc8592.js → 8522.6e5772ce.js} +2 -2
  3. package/dist/chunks/8522.6e5772ce.js.map +1 -0
  4. package/dist/chunks/{main.69738be9.js → main.48677ce1.js} +2 -2
  5. package/dist/chunks/{main.69738be9.js.map → main.48677ce1.js.map} +1 -1
  6. package/dist/examples.json +3 -3
  7. package/dist/{index.b30ff5f9.js → index.82d1267c.js} +2 -2
  8. package/dist/{index.b30ff5f9.js.map → index.82d1267c.js.map} +1 -1
  9. package/dist/manifest.json +40 -40
  10. package/dist/types.json +74 -74
  11. package/package.json +2 -2
  12. package/dist/chunks/8522.dcbc8592.js.map +0 -1
package/dist/examples.json CHANGED
@@ -2,12 +2,12 @@
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
- "diagram.editable-label": {
6
- "doc": "构件 `diagram.editable-label`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: diagram.editable-label\nproperties:\n type: line\n label: Relation\nevents:\n label.change:\n action: message.success\n args:\n - \"<% `Label changed to: ${EVENT.detail}` %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <diagram.editable-label\n# type=\"line\"\n# label=\"Relation\"\n# id=\"brick-1\"\n# ></diagram.editable-label>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.addEventListener(\"label.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"success\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% `Label changed to: ${EVENT.detail}` %>\",\n# });\n# });\n# </script>\n# \n```\n"
7
- },
8
5
  "eo-draw-canvas": {
9
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 style: {\n backgroundColor: \"var(--palette-green-3)\",\n }\n },\n },\n {\n type: \"decorator\",\n id: \"rect-1\",\n decorator: \"rect\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n style: {\n borderColor: \"var(--palette-purple-3)\",\n }\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\\nWorld!\",\n style: {\n // 垂直书写（从右到左）\n writingMode: \"vertical-rl\",\n },\n },\n },\n ])\n %>\n - name: dragging\n - name: activeTarget\n - name: contextMenuDetail\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 - line\n - rect\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 - |\n <%\n ITEM === \"line\"\n ? {\n position: EVENT.detail,\n decorator: ITEM.split(\".\")[0],\n }\n : {\n position: EVENT.detail,\n decorator: ITEM.split(\".\")[0],\n text: _.upperFirst(ITEM),\n direction: ITEM.split(\".\").pop(),\n }\n %>\n callback:\n success:\n if: <% !EVENT.detail %>\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}${DATA.node.locked ? \" (locked)\" : \"\"}` %>'\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: start\n type: circle\n - placement: end\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 - contextMenuDetail\n - <% EVENT.detail %>\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.view.change:\n action: message.info\n args:\n - |\n <% `Decorator 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 !CTX.contextMenuDetail\n ? []\n : CTX.contextMenuDetail.target?.type === \"multi\"\n ? [\n {\n text: \"锁定/取消锁定\",\n event: \"toggle-lock\",\n },\n ]\n : [\n ...(CTX.contextMenuDetail.locked ? [] : [{\n text: \"添加边\",\n event: \"add-edge\",\n },{\n text: \"移除\",\n event: \"remove\"\n }]),\n {\n text: \"锁定/取消锁定\",\n event: \"toggle-lock\",\n },\n ].filter((action) =>\n CTX.contextMenuDetail.cell.type === \"node\" || (\n CTX.contextMenuDetail.cell.type === \"decorator\" &&\n CTX.contextMenuDetail.cell.decorator === \"area\"\n ) || action.event !== \"add-edge\"\n )\n %>\n events:\n remove:\n target: eo-draw-canvas\n method: updateCells\n args:\n - |\n <%\n CTX.initialCells.filter((cell) =>\n !(\n CTX.contextMenuDetail.cell.type === \"edge\"\n ? cell.type === \"edge\" && CTX.contextMenuDetail.cell.source === cell.source && CTX.contextMenuDetail.cell.target === cell.target\n : cell.id === CTX.contextMenuDetail.cell.id ||\n (cell.type === \"edge\" && (\n CTX.contextMenuDetail.cell.id === cell.source ||\n CTX.contextMenuDetail.cell.id === cell.target))\n )\n )\n %>\n add-edge:\n target: eo-draw-canvas\n method: manuallyConnectNodes\n args:\n - <% CTX.contextMenuDetail.cell.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 toggle-lock:\n target: eo-draw-canvas\n method: toggleLock\n args:\n - <% CTX.contextMenuDetail.target %>\n callback:\n success:\n action: console.log\n args:\n - \"Updated cells after toggle lock:\"\n - <% EVENT.detail %>\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# !CTX.contextMenuDetail\n# ? []\n# : CTX.contextMenuDetail.target?.type === \"multi\"\n# ? [\n# {\n# text: \"锁定/取消锁定\",\n# event: \"toggle-lock\",\n# },\n# ]\n# : [\n# ...(CTX.contextMenuDetail.locked ? [] : [{\n# text: \"添加边\",\n# event: \"add-edge\",\n# },{\n# text: \"移除\",\n# event: \"remove\"\n# }]),\n# {\n# text: \"锁定/取消锁定\",\n# event: \"toggle-lock\",\n# },\n# ].filter((action) =&gt;\n# CTX.contextMenuDetail.cell.type === \"node\" || (\n# CTX.contextMenuDetail.cell.type === \"decorator\" &amp;&amp;\n# CTX.contextMenuDetail.cell.decorator === \"area\"\n# ) || action.event !== \"add-edge\"\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# /* WARN: incompatible expressions in HTML, please try YAML: */\n# '<%\\n ITEM === \"line\"\\n ? {\\n position: EVENT.detail,\\n decorator: ITEM.split(\".\")[0],\\n }\\n : {\\n position: EVENT.detail,\\n decorator: ITEM.split(\".\")[0],\\n text: _.upperFirst(ITEM),\\n direction: ITEM.split(\".\").pop(),\\n }\\n%>\\n'\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:\n# '<% `Node ${DATA.node.id}${DATA.node.locked ? \" (locked)\" : \"\"}` %>',\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: \"start\",\n# type: \"circle\",\n# },\n# {\n# placement: \"end\",\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.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:\n# \"<% `Decorator 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(\"remove\", (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.filter((cell) =>\\n !(\\n CTX.contextMenuDetail.cell.type === \"edge\"\\n ? cell.type === \"edge\" && CTX.contextMenuDetail.cell.source === cell.source && CTX.contextMenuDetail.cell.target === cell.target\\n : cell.id === CTX.contextMenuDetail.cell.id ||\\n (cell.type === \"edge\" && (\\n CTX.contextMenuDetail.cell.id === cell.source ||\\n CTX.contextMenuDetail.cell.id === cell.target))\\n )\\n )\\n%>\\n'\n# );\n# });\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.contextMenuDetail.cell.id %>\"\n# );\n# });\n# brick_7.addEventListener(\"toggle-lock\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.toggleLock(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% CTX.contextMenuDetail.target %>\"\n# );\n# });\n# </script>\n# \n```\n\n### Line labels\n\n设置连线文字。\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 description: \"X->Y\",\n placement: \"end\",\n view: {\n type: \"polyline\"\n }\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\"\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: activeTarget\n - name: scale\n value: 1\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 defaultEdgeLines:\n - callLabelOnDoubleClick: enableEditing\n label:\n placement: <% DATA.edge.placement %>\n offset: 10\n useBrick:\n brick: diagram.editable-label\n properties:\n label: <% DATA.edge.description %>\n type: line\n # Set `readOnly: true` for eo-display-canvas\n # readOnly: true\n events:\n label.change:\n # Make sure only trigger update if label actually changed\n if: <% (DATA.edge.description || \"\") !== (EVENT.detail || \"\") %>\n action: context.replace\n args:\n - initialCells\n - |-\n <%\n CTX.initialCells.map((edge) =>\n edge.type === \"edge\" &&\n edge.source === DATA.edge.source &&\n edge.target === DATA.edge.target\n ? { ...edge, description: EVENT.detail }\n : edge\n )\n %>\n events:\n activeTarget.change:\n action: context.replace\n args:\n - activeTarget\n - <% EVENT.detail %>\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 scale.change:\n action: context.replace\n args:\n - scale\n - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; height: 600px; gap: 1em\">\n# <eo-draw-canvas\n# style=\"width: 100%; height: 100%\"\n# fade-unrelated-cells\n# drag-behavior=\"lasso\"\n# id=\"brick-1\"\n# ></eo-draw-canvas>\n# </div>\n# \n# <script>\n# const brick_1 = document.getElementById(\"brick-1\");\n# brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n# brick_1.layoutOptions = {\n# snap: {\n# object: true,\n# },\n# };\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 === \"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_1.cells = \"<% CTX.initialCells %>\";\n# brick_1.lineConnector = true;\n# brick_1.defaultEdgeLines = [\n# {\n# callLabelOnDoubleClick: \"enableEditing\",\n# label: {\n# placement: \"<% DATA.edge.placement %>\",\n# offset: 10,\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# \"initialCells\",\n# '<%\\n CTX.initialCells.map((edge) =>\\n edge.type === \"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# },\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(\"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_1.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\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: \"decorator\",\n decorator: \"line\",\n id: \"line-1\",\n view: {\n source: {\n x: 200,\n y: 200,\n },\n target: {\n x: 250,\n y: 150,\n },\n // type: \"polyline\",\n vertices: [\n {\n x: 180,\n y: 125,\n },\n ],\n markers: [{\n placement: \"end\",\n type: \"arrow\",\n }],\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 - curve\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 defaultEdgeLines:\n - jumps: true\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,curve,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.defaultEdgeLines = [\n# {\n# jumps: true,\n# },\n# ];\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 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 {\n type: \"edge\",\n source: \"Z\",\n target: \"W\",\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 )\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 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 - dashed: <% !!DATA.edge.data?.virtual %>\n strokeColor: var(--palette-blue-6)\n overrides:\n active:\n strokeWidth: <% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\n strokeColor: cyan\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# dashed: \"<% !!DATA.edge.data?.virtual %>\",\n# strokeColor: \"var(--palette-blue-6)\",\n# overrides: {\n# active: {\n# strokeWidth: \"<% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\",\n# strokeColor: \"cyan\",\n# },\n# },\n# },\n# ];\n# brick_6.cells = \"<% CTX.initialCells %>\";\n# brick_6.addEventListener(\"activeTarget.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_6.addEventListener(\"cell.move\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n# });\n# });\n# brick_6.addEventListener(\"cell.resize\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n# });\n# });\n# brick_6.addEventListener(\"cell.delete\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"warn\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message:\n# '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n# });\n# });\n# brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n# const brick = document.querySelector(\"eo-context-menu\");\n# brick.open({\n# position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n# });\n# });\n# brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# brick_6.addEventListener(\"decorator.text.change\", (e) => {\n# const message = document.createElement(\"basic.show-notification\");\n# message.resolve({\n# type: \"info\",\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# message: \"<% JSON.stringify(EVENT.detail) %>\",\n# });\n# });\n# brick_6.addEventListener(\"scale.change\", (e) => {\n# // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n# });\n# \n# const brick_7 = document.getElementById(\"brick-7\");\n# brick_7.addEventListener(\"add-edge\", (e) => {\n# const brick = document.querySelector(\"eo-draw-canvas\");\n# brick.manuallyConnectNodes(\n# /* WARN: incompatible expressions in HTML, please try YAML: */\n# \"<% CTX.targetCell.id %>\"\n# );\n# });\n# </script>\n# \n```\n"
10
7
  },
8
+ "diagram.editable-label": {
9
+ "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
11
  "eo-display-canvas": {
12
12
  "doc": "用于展示查看的画布构件。\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n properties:\n style:\n display: flex\n height: 600px\n gap: 1em\n context:\n - name: initialCells\n value: |\n <%\n [\n {\n type: \"decorator\",\n id: \"area-1\",\n decorator: \"area\",\n view: {\n x: 10,\n y: 20,\n width: 400,\n height: 300,\n },\n },\n {\n type: \"decorator\",\n id: \"container-1\",\n decorator: \"container\",\n view: {\n x: 50,\n y: 400,\n width: 280,\n height: 120,\n direction: \"top\",\n text: \" 上层服务\"\n },\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Y\",\n data: {\n virtual: false,\n showStartArrow: false,\n strokeColor:\"red\",\n strokeWidth: 5,\n }\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"W\",\n data: {\n virtual: false,\n showStartArrow: true,\n strokeColor:\"pink\",\n animate:{\n useAnimate: true,\n duration: 4\n }\n }\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n showStartArrow: true,\n strokeColor:\"blue\",\n animate:{\n useAnimate: true\n }\n }\n },\n {\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- 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# </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- 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# </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 view: {\n type: \"polyline\"\n }\n },\n {\n type: \"edge\",\n source: \"X\",\n target: \"Z\",\n data: {\n virtual: true,\n }\n },\n {\n type: \"edge\",\n source: \"Z\",\n target: \"W\",\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 )\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 layoutOptions:\n ranksep: 80\n nodesep: 80\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 - dashed: <% !!DATA.edge.data?.virtual %>\n strokeColor: var(--palette-blue-6)\n overrides:\n active:\n strokeWidth: <% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\n strokeColor: cyan\n activeRelated:\n strokeWidth: <% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\n motion:\n shape: '<% DATA.edge.data?.virtual ? \"dot\" : \"triangle\" %>'\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- 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.layoutOptions = {\n# ranksep: 80,\n# nodesep: 80,\n# };\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# dashed: \"<% !!DATA.edge.data?.virtual %>\",\n# strokeColor: \"var(--palette-blue-6)\",\n# overrides: {\n# active: {\n# strokeWidth: \"<% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\",\n# strokeColor: \"cyan\",\n# },\n# activeRelated: {\n# strokeWidth: \"<% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\",\n# motion: {\n# shape: '<% DATA.edge.data?.virtual ? \"dot\" : \"triangle\" %>',\n# },\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# </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- 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# </script>\n# \n```\n"
13
13
  }
package/dist/{index.b30ff5f9.js → index.82d1267c.js} RENAMED
@@ -1,2 +1,2 @@
1
- (()=>{"use strict";var e,t,r,n,a,o,l,i,s,c,d,u,f,h,p,m,b,v,g,x,y,P,w,k={9476:(e,t,r)=>{var n={"./eo-diagram":()=>Promise.all([r.e(7920),r.e(8769),r.e(1030),r.e(6192),r.e(9859),r.e(6477),r.e(140),r.e(6730),r.e(1361),r.e(3233),r.e(3039)]).then((()=>()=>r(1508))),"./editable-label":()=>Promise.all([r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(6006)]).then((()=>()=>r(3328))),"./eo-draw-canvas":()=>Promise.all([r.e(7920),r.e(5670),r.e(8769),r.e(1030),r.e(6192),r.e(9005),r.e(9859),r.e(6477),r.e(9435),r.e(140),r.e(6730),r.e(8522),r.e(8939)]).then((()=>()=>r(9068))),"./experimental-node":()=>Promise.all([r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(4422)]).then((()=>()=>r(5568))),"./eo-display-canvas":()=>Promise.all([r.e(7920),r.e(5670),r.e(8769),r.e(1030),r.e(6192),r.e(9005),r.e(9859),r.e(6477),r.e(9435),r.e(140),r.e(6730),r.e(8522),r.e(8939),r.e(9823)]).then((()=>()=>r(6094)))},a=(e,t)=>(r.R=t,t=r.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),r.R=void 0,t),o=(e,t)=>{if(r.S){var n="default",a=r.S[n];if(a&&a!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return r.S[n]=e,r.I(n,t)}};r.d(t,{get:()=>a,init:()=>o})}},j={};function S(e){var t=j[e];if(void 0!==t)return t.exports;var r=j[e]={id:e,loaded:!1,exports:{}};return k[e].call(r.exports,r,r.exports,S),r.loaded=!0,r.exports}S.m=k,S.c=j,S.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return S.d(t,{a:t}),t},S.d=(e,t)=>{for(var r in t)S.o(t,r)&&!S.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},S.f={},S.e=e=>Promise.all(Object.keys(S.f).reduce(((t,r)=>(S.f[r](e,t),t)),[])),S.u=e=>"chunks/"+({3039:"eo-diagram",4422:"experimental-node",6006:"editable-label",8939:"eo-draw-canvas",9823:"eo-display-canvas"}[e]||e)+"."+{114:"f4c45fb4",726:"36afa7a3",871:"cf918ecb",1045:"fc9b1386",1122:"1957b96a",1370:"ff678c2c",1889:"cd9c8220",1940:"d4e8c5b9",2052:"a8ed8891",2277:"83e80fbf",3039:"b6a11fe1",3144:"b60bf1f3",3171:"4e111cd1",3233:"df97f221",3426:"fb6ffa15",3933:"e47efe53",4041:"d0dafc02",4306:"ace26fca",4422:"fcd8f903",4658:"df491375",4837:"11c3f298",5250:"aa8a219f",5384:"b76b4b24",5399:"b1b4981d",5552:"c1fe77c8",5670:"d0d814f7",6006:"f986264b",6314:"449f20cc",6519:"4ddc3bd5",6730:"b6d7107a",6773:"ef4413a1",7218:"3d3b9880",7304:"2ae2d399",7721:"e7aaf5c2",7733:"43792e2a",7920:"367555e2",8522:"dcbc8592",8939:"7caa4a7d",8989:"1bb9349d",9140:"08761fe0",9515:"2b74919b",9559:"f28defcc",9823:"c67d5a35",9844:"4a3a83f7"}[e]+".js",S.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),S.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="@next-bricks/diagram:",S.l=(r,n,a,o)=>{if(e[r])e[r].push(n);else{var l,i;if(void 0!==a)for(var s=document.getElementsByTagName("script"),c=0;c<s.length;c++){var d=s[c];if(d.getAttribute("src")==r||d.getAttribute("data-webpack")==t+a){l=d;break}}l||(i=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,S.nc&&l.setAttribute("nonce",S.nc),l.setAttribute("data-webpack",t+a),l.src=r),e[r]=[n];var u=(t,n)=>{l.onerror=l.onload=null,clearTimeout(f);var a=e[r];if(delete e[r],l.parentNode&&l.parentNode.removeChild(l),a&&a.forEach((e=>e(n))),t)return t(n)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=u.bind(null,l.onerror),l.onload=u.bind(null,l.onload),i&&document.head.appendChild(l)}},S.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},S.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{S.S={};var e={},t={};S.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];S.o(S.S,r)||(S.S[r]={});var o=S.S[r],l="@next-bricks/diagram",i=(e,t,r,n)=>{var a=o[e]=o[e]||{},i=a[t];(!i||!i.loaded&&(!n!=!i.eager?n:l>i.from))&&(a[t]={get:r,from:l,eager:!!n})},s=[];return"default"===r&&(i("@babel/parser","7.27.2",(()=>S.e(6773).then((()=>()=>S(6773))))),i("@easyops-cn/brick-next-pipes","0.7.2",(()=>Promise.all([S.e(4306),S.e(1030),S.e(1916),S.e(5310)]).then((()=>()=>S(4306))))),i("@next-core/cook","2.5.8",(()=>Promise.all([S.e(1122),S.e(580)]).then((()=>()=>S(1122))))),i("@next-core/element","1.2.17",(()=>S.e(1045).then((()=>()=>S(1045))))),i("@next-core/http","1.2.12",(()=>S.e(8989).then((()=>()=>S(8989))))),i("@next-core/i18n","1.0.77",(()=>Promise.all([S.e(9005),S.e(7448),S.e(671),S.e(5552)]).then((()=>()=>S(5552))))),i("@next-core/inject","1.0.54",(()=>Promise.all([S.e(1030),S.e(9933),S.e(2277)]).then((()=>()=>S(2277))))),i("@next-core/loader","1.6.15",(()=>S.e(5399).then((()=>()=>S(7780))))),i("@next-core/pipes","2.0.32",(()=>S.e(6519).then((()=>()=>S(6519))))),i("@next-core/react-element","1.0.36",(()=>Promise.all([S.e(8769),S.e(6192),S.e(9435),S.e(114)]).then((()=>()=>S(114))))),i("@next-core/react-runtime","1.7.16",(()=>Promise.all([S.e(8769),S.e(1030),S.e(9859),S.e(140),S.e(4837)]).then((()=>()=>S(4837))))),i("@next-core/runtime","1.62.0",(()=>Promise.all([S.e(9140),S.e(1030),S.e(9005),S.e(1916),S.e(1361),S.e(7448),S.e(1321),S.e(9003)]).then((()=>()=>S(9140))))),i("@next-core/supply","2.3.5",(()=>Promise.all([S.e(1030),S.e(1916),S.e(9933),S.e(9559)]).then((()=>()=>S(9559))))),i("@next-core/theme","1.5.4",(()=>Promise.all([S.e(1889),S.e(2052)]).then((()=>()=>S(1889))))),i("@next-core/utils/general","1.7.35",(()=>S.e(871).then((()=>()=>S(871))))),i("@next-core/utils/storyboard","1.7.35",(()=>Promise.all([S.e(9005),S.e(1321),S.e(3933)]).then((()=>()=>S(3933))))),i("history","4.10.1",(()=>S.e(5384).then((()=>()=>S(5384))))),i("i18next-browser-languagedetector","7.2.2",(()=>S.e(726).then((()=>()=>S(726))))),i("i18next","22.5.1",(()=>S.e(7304).then((()=>()=>S(7304))))),i("js-yaml","3.14.1",(()=>S.e(9515).then((()=>()=>S(9515))))),i("lodash","4.17.21",(()=>S.e(5250).then((()=>()=>S(5250))))),i("moment/locale/zh-cn.js","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),i("moment","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),i("react-dom","0.0.0-experimental-ee8509801-20230117",(()=>Promise.all([S.e(3144),S.e(8769)]).then((()=>()=>S(3144))))),i("react","0.0.0-experimental-ee8509801-20230117",(()=>S.e(4041).then((()=>()=>S(4041)))))),e[r]=s.length?Promise.all(s).then((()=>e[r]=1)):1}}})(),(()=>{var e;S.g.importScripts&&(e=S.g.location+"");var t=S.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),S.p=e})(),r=e=>{var t=e=>e.split(".").map((e=>+e==e?+e:e)),r=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=r[1]?t(r[1]):[];return r[2]&&(n.length++,n.push.apply(n,t(r[2]))),r[3]&&(n.push([]),n.push.apply(n,t(r[3]))),n},n=(e,t)=>{e=r(e),t=r(t);for(var n=0;;){if(n>=e.length)return n<t.length&&"u"!=(typeof t[n])[0];var a=e[n],o=(typeof a)[0];if(n>=t.length)return"u"==o;var l=t[n],i=(typeof l)[0];if(o!=i)return"o"==o&&"n"==i||"s"==i||"u"==o;if("o"!=o&&"u"!=o&&a!=l)return a<l;n++}},a=e=>{var t=e[0],r="";if(1===e.length)return"*";if(t+.5){r+=0==t?">=":-1==t?"<":1==t?"^":2==t?"~":t>0?"=":"!=";for(var n=1,o=1;o<e.length;o++)n--,r+="u"==(typeof(i=e[o]))[0]?"-":(n>0?".":"")+(n=2,i);return r}var l=[];for(o=1;o<e.length;o++){var i=e[o];l.push(0===i?"not("+s()+")":1===i?"("+s()+" || "+s()+")":2===i?l.pop()+" "+l.pop():a(i))}return s();function s(){return l.pop().replace(/^\((.+)\)$/,"$1")}},o=(e,t)=>{if(0 in e){t=r(t);var n=e[0],a=n<0;a&&(n=-n-1);for(var l=0,i=1,s=!0;;i++,l++){var c,d,u=i<e.length?(typeof e[i])[0]:"";if(l>=t.length||"o"==(d=(typeof(c=t[l]))[0]))return!s||("u"==u?i>n&&!a:""==u!=a);if("u"==d){if(!s||"u"!=u)return!1}else if(s)if(u==d)if(i<=n){if(c!=e[i])return!1}else{if(a?c>e[i]:c<e[i])return!1;c!=e[i]&&(s=!1)}else if("s"!=u&&"n"!=u){if(a||i<=n)return!1;s=!1,i--}else{if(i<=n||d<u!=a)return!1;s=!1}else"s"!=u&&"n"!=u&&(s=!1,i--)}}var f=[],h=f.pop.bind(f);for(l=1;l<e.length;l++){var p=e[l];f.push(1==p?h()|h():2==p?h()&h():p?o(p,t):!h())}return!!h()},l=(e,t)=>e&&S.o(e,t),i=e=>(e.loaded=1,e.get()),s=e=>Object.keys(e).reduce(((t,r)=>(e[r].eager&&(t[r]=e[r]),t)),{}),c=(e,t,r,a)=>{var l=a?s(e[t]):e[t];return(t=Object.keys(l).reduce(((e,t)=>!o(r,t)||e&&!n(e,t)?e:t),0))&&l[t]},d=(e,t,r)=>{var a=r?s(e[t]):e[t];return Object.keys(a).reduce(((e,t)=>!e||!a[e].loaded&&n(e,t)?t:e),0)},u=(e,t,r,n)=>"Unsatisfied version "+r+" from "+(r&&e[t][r].from)+" of shared singleton module "+t+" (required "+a(n)+")",f=(e,t,r,n,o)=>{var l=e[r];return"No satisfying version ("+a(n)+")"+(o?" for eager consumption":"")+" of shared module "+r+" found in shared scope "+t+".\nAvailable versions: "+Object.keys(l).map((e=>e+" from "+l[e].from)).join(", ")},h=e=>{throw new Error(e)},p=e=>{"undefined"!=typeof console&&console.warn&&console.warn(e)},b=(e,t,r)=>r?r():((e,t)=>h("Shared module "+t+" doesn't exist in shared scope "+e))(e,t),v=(m=e=>function(t,r,n,a,o){var l=S.I(t);return l&&l.then&&!n?l.then(e.bind(e,t,S.S[t],r,!1,a,o)):e(t,S.S[t],r,n,a,o)})(((e,t,r,n,a,o)=>{if(!l(t,r))return b(e,r,o);var s=c(t,r,a,n);return s?i(s):o?o():void h(f(t,e,r,a,n))})),g=m(((e,t,r,n,a,s)=>{if(!l(t,r))return b(e,r,s);var c=d(t,r,n);return o(a,c)||p(u(t,r,c,a)),i(t[r][c])})),x={},y={1030:()=>g("default","lodash",!1,[1,4,17,21],(()=>S.e(5250).then((()=>()=>S(5250))))),1916:()=>g("default","moment",!1,[0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),5310:()=>g("default","js-yaml",!1,[0],(()=>S.e(9515).then((()=>()=>S(9515))))),580:()=>g("default","@babel/parser",!1,[0],(()=>S.e(6773).then((()=>()=>S(6773))))),9005:()=>g("default","@next-core/utils/general",!1,[1,1,7,35],(()=>S.e(871).then((()=>()=>S(871))))),7448:()=>g("default","@next-core/i18n",!1,[1,1,0,77],(()=>Promise.all([S.e(671),S.e(3171)]).then((()=>()=>S(5552))))),848:()=>g("default","i18next-browser-languagedetector",!1,[0],(()=>S.e(726).then((()=>()=>S(726))))),5630:()=>g("default","i18next",!1,[0],(()=>S.e(7304).then((()=>()=>S(7304))))),9933:()=>g("default","@next-core/pipes",!1,[0],(()=>S.e(6519).then((()=>()=>S(6519))))),8377:()=>g("default","@easyops-cn/brick-next-pipes",!1,[0],(()=>Promise.all([S.e(4306),S.e(1030),S.e(1916),S.e(5310)]).then((()=>()=>S(4306))))),8769:()=>v("default","react",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(4041).then((()=>()=>S(4041))))),6192:()=>v("default","@next-core/element",!1,[1,1,2,17],(()=>S.e(3426).then((()=>()=>S(1045))))),9435:()=>v("default","react-dom",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(3144).then((()=>()=>S(3144))))),9859:()=>v("default","@next-core/react-element",!1,[1,1,0,36],(()=>Promise.all([S.e(6192),S.e(9435),S.e(7733)]).then((()=>()=>S(114))))),140:()=>g("default","@next-core/runtime",!1,[1,1,62,0],(()=>Promise.all([S.e(9140),S.e(9005),S.e(1916),S.e(1361),S.e(7448),S.e(1321),S.e(9003)]).then((()=>()=>S(9140))))),1361:()=>g("default","@next-core/http",!1,[0],(()=>S.e(1370).then((()=>()=>S(8989))))),1321:()=>g("default","@next-core/cook",!1,[0],(()=>Promise.all([S.e(1122),S.e(580)]).then((()=>()=>S(1122))))),1732:()=>g("default","history",!1,[0],(()=>S.e(5384).then((()=>()=>S(5384))))),1858:()=>g("default","moment/locale/zh-cn.js",!1,[0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),2575:()=>g("default","@next-core/utils/storyboard",!1,[1,1,7,35],(()=>S.e(6314).then((()=>()=>S(3933))))),4167:()=>g("default","@next-core/supply",!1,[0],(()=>Promise.all([S.e(9933),S.e(1940)]).then((()=>()=>S(9559))))),5599:()=>g("default","@next-core/loader",!1,[0],(()=>S.e(5399).then((()=>()=>S(7780))))),9283:()=>g("default","@next-core/inject",!1,[0],(()=>Promise.all([S.e(9933),S.e(4658)]).then((()=>()=>S(2277))))),6477:()=>g("default","@next-core/theme",!1,[1,1,5,4],(()=>S.e(1889).then((()=>()=>S(1889))))),7390:()=>v("default","@next-core/react-runtime",!1,[1,1,7,16],(()=>S.e(7218).then((()=>()=>S(4837)))))},P={140:[140],580:[580],671:[848,5630],1030:[1030],1321:[1321],1361:[1361],1916:[1916],5310:[5310],6192:[6192],6477:[6477],6519:[8377],6730:[7390],7448:[7448],8769:[8769],9003:[1732,1858,2575,4167,5599,9283],9005:[9005],9435:[9435],9859:[9859],9933:[9933]},w={},S.f.consumes=(e,t)=>{S.o(P,e)&&P[e].forEach((e=>{if(S.o(x,e))return t.push(x[e]);if(!w[e]){var r=t=>{x[e]=0,S.m[e]=r=>{delete S.c[e],r.exports=t()}};w[e]=!0;var n=t=>{delete x[e],S.m[e]=r=>{throw delete S.c[e],t}};try{var a=y[e]();a.then?t.push(x[e]=a.then(r).catch(n)):r(a)}catch(e){n(e)}}}))},(()=>{var e={2691:0};S.f.j=(t,r)=>{var n=S.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else if(/^(1(030|321|361|40|916)|6(192|477|71)|9(00[35]|435|859|933)|5310|580|7448|8769)$/.test(t))e[t]=0;else{var a=new Promise(((r,a)=>n=e[t]=[r,a]));r.push(n[2]=a);var o=S.p+S.u(t),l=new Error;S.l(o,(r=>{if(S.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;l.message="Loading chunk "+t+" failed.\n("+a+": "+o+")",l.name="ChunkLoadError",l.type=a,l.request=o,n[1](l)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,a,[o,l,i]=r,s=0;if(o.some((t=>0!==e[t]))){for(n in l)S.o(l,n)&&(S.m[n]=l[n]);i&&i(S)}for(t&&t(r);s<o.length;s++)a=o[s],S.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=globalThis.webpackChunk_next_bricks_diagram=globalThis.webpackChunk_next_bricks_diagram||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),S.nc=void 0;var E=S(9476);window["bricks/diagram"]=E})();
2
- //# sourceMappingURL=index.b30ff5f9.js.map
1
+ (()=>{"use strict";var e,t,r,n,a,o,l,i,s,c,d,u,f,h,p,m,b,v,g,x,y,P,w,k={1112:(e,t,r)=>{var n={"./eo-diagram":()=>Promise.all([r.e(7920),r.e(8769),r.e(1030),r.e(6192),r.e(9859),r.e(6477),r.e(140),r.e(6730),r.e(1361),r.e(3233),r.e(3039)]).then((()=>()=>r(1508))),"./eo-draw-canvas":()=>Promise.all([r.e(7920),r.e(5670),r.e(8769),r.e(1030),r.e(6192),r.e(9005),r.e(9859),r.e(6477),r.e(9435),r.e(140),r.e(6730),r.e(8522),r.e(8939)]).then((()=>()=>r(9068))),"./experimental-node":()=>Promise.all([r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(4422)]).then((()=>()=>r(5568))),"./editable-label":()=>Promise.all([r.e(8769),r.e(6192),r.e(9859),r.e(6477),r.e(6006)]).then((()=>()=>r(3328))),"./eo-display-canvas":()=>Promise.all([r.e(7920),r.e(5670),r.e(8769),r.e(1030),r.e(6192),r.e(9005),r.e(9859),r.e(6477),r.e(9435),r.e(140),r.e(6730),r.e(8522),r.e(8939),r.e(9823)]).then((()=>()=>r(6094)))},a=(e,t)=>(r.R=t,t=r.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),r.R=void 0,t),o=(e,t)=>{if(r.S){var n="default",a=r.S[n];if(a&&a!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return r.S[n]=e,r.I(n,t)}};r.d(t,{get:()=>a,init:()=>o})}},j={};function S(e){var t=j[e];if(void 0!==t)return t.exports;var r=j[e]={id:e,loaded:!1,exports:{}};return k[e].call(r.exports,r,r.exports,S),r.loaded=!0,r.exports}S.m=k,S.c=j,S.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return S.d(t,{a:t}),t},S.d=(e,t)=>{for(var r in t)S.o(t,r)&&!S.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},S.f={},S.e=e=>Promise.all(Object.keys(S.f).reduce(((t,r)=>(S.f[r](e,t),t)),[])),S.u=e=>"chunks/"+({3039:"eo-diagram",4422:"experimental-node",6006:"editable-label",8939:"eo-draw-canvas",9823:"eo-display-canvas"}[e]||e)+"."+{114:"f4c45fb4",726:"36afa7a3",871:"cf918ecb",1045:"fc9b1386",1122:"1957b96a",1370:"ff678c2c",1889:"cd9c8220",1940:"d4e8c5b9",2052:"a8ed8891",2277:"83e80fbf",3039:"b6a11fe1",3144:"b60bf1f3",3171:"4e111cd1",3233:"df97f221",3426:"fb6ffa15",3933:"e47efe53",4041:"d0dafc02",4306:"ace26fca",4422:"fcd8f903",4658:"df491375",4837:"11c3f298",5250:"aa8a219f",5384:"b76b4b24",5399:"b1b4981d",5552:"c1fe77c8",5670:"d0d814f7",6006:"f986264b",6314:"449f20cc",6519:"4ddc3bd5",6730:"b6d7107a",6773:"ef4413a1",7218:"3d3b9880",7304:"2ae2d399",7721:"e7aaf5c2",7733:"43792e2a",7920:"367555e2",8522:"6e5772ce",8939:"7caa4a7d",8989:"1bb9349d",9140:"08761fe0",9515:"2b74919b",9559:"f28defcc",9823:"c67d5a35",9844:"4a3a83f7"}[e]+".js",S.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),S.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="@next-bricks/diagram:",S.l=(r,n,a,o)=>{if(e[r])e[r].push(n);else{var l,i;if(void 0!==a)for(var s=document.getElementsByTagName("script"),c=0;c<s.length;c++){var d=s[c];if(d.getAttribute("src")==r||d.getAttribute("data-webpack")==t+a){l=d;break}}l||(i=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,S.nc&&l.setAttribute("nonce",S.nc),l.setAttribute("data-webpack",t+a),l.src=r),e[r]=[n];var u=(t,n)=>{l.onerror=l.onload=null,clearTimeout(f);var a=e[r];if(delete e[r],l.parentNode&&l.parentNode.removeChild(l),a&&a.forEach((e=>e(n))),t)return t(n)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=u.bind(null,l.onerror),l.onload=u.bind(null,l.onload),i&&document.head.appendChild(l)}},S.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},S.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{S.S={};var e={},t={};S.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];S.o(S.S,r)||(S.S[r]={});var o=S.S[r],l="@next-bricks/diagram",i=(e,t,r,n)=>{var a=o[e]=o[e]||{},i=a[t];(!i||!i.loaded&&(!n!=!i.eager?n:l>i.from))&&(a[t]={get:r,from:l,eager:!!n})},s=[];return"default"===r&&(i("@babel/parser","7.27.2",(()=>S.e(6773).then((()=>()=>S(6773))))),i("@easyops-cn/brick-next-pipes","0.7.2",(()=>Promise.all([S.e(4306),S.e(1030),S.e(1916),S.e(5310)]).then((()=>()=>S(4306))))),i("@next-core/cook","2.5.8",(()=>Promise.all([S.e(1122),S.e(580)]).then((()=>()=>S(1122))))),i("@next-core/element","1.2.17",(()=>S.e(1045).then((()=>()=>S(1045))))),i("@next-core/http","1.2.12",(()=>S.e(8989).then((()=>()=>S(8989))))),i("@next-core/i18n","1.0.77",(()=>Promise.all([S.e(9005),S.e(7448),S.e(671),S.e(5552)]).then((()=>()=>S(5552))))),i("@next-core/inject","1.0.54",(()=>Promise.all([S.e(1030),S.e(9933),S.e(2277)]).then((()=>()=>S(2277))))),i("@next-core/loader","1.6.15",(()=>S.e(5399).then((()=>()=>S(7780))))),i("@next-core/pipes","2.0.32",(()=>S.e(6519).then((()=>()=>S(6519))))),i("@next-core/react-element","1.0.36",(()=>Promise.all([S.e(8769),S.e(6192),S.e(9435),S.e(114)]).then((()=>()=>S(114))))),i("@next-core/react-runtime","1.7.16",(()=>Promise.all([S.e(8769),S.e(1030),S.e(9859),S.e(140),S.e(4837)]).then((()=>()=>S(4837))))),i("@next-core/runtime","1.62.0",(()=>Promise.all([S.e(9140),S.e(1030),S.e(9005),S.e(1916),S.e(1361),S.e(7448),S.e(1321),S.e(9003)]).then((()=>()=>S(9140))))),i("@next-core/supply","2.3.5",(()=>Promise.all([S.e(1030),S.e(1916),S.e(9933),S.e(9559)]).then((()=>()=>S(9559))))),i("@next-core/theme","1.5.4",(()=>Promise.all([S.e(1889),S.e(2052)]).then((()=>()=>S(1889))))),i("@next-core/utils/general","1.7.35",(()=>S.e(871).then((()=>()=>S(871))))),i("@next-core/utils/storyboard","1.7.35",(()=>Promise.all([S.e(9005),S.e(1321),S.e(3933)]).then((()=>()=>S(3933))))),i("history","4.10.1",(()=>S.e(5384).then((()=>()=>S(5384))))),i("i18next-browser-languagedetector","7.2.2",(()=>S.e(726).then((()=>()=>S(726))))),i("i18next","22.5.1",(()=>S.e(7304).then((()=>()=>S(7304))))),i("js-yaml","3.14.1",(()=>S.e(9515).then((()=>()=>S(9515))))),i("lodash","4.17.21",(()=>S.e(5250).then((()=>()=>S(5250))))),i("moment/locale/zh-cn.js","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),i("moment","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),i("react-dom","0.0.0-experimental-ee8509801-20230117",(()=>Promise.all([S.e(3144),S.e(8769)]).then((()=>()=>S(3144))))),i("react","0.0.0-experimental-ee8509801-20230117",(()=>S.e(4041).then((()=>()=>S(4041)))))),e[r]=s.length?Promise.all(s).then((()=>e[r]=1)):1}}})(),(()=>{var e;S.g.importScripts&&(e=S.g.location+"");var t=S.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),S.p=e})(),r=e=>{var t=e=>e.split(".").map((e=>+e==e?+e:e)),r=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=r[1]?t(r[1]):[];return r[2]&&(n.length++,n.push.apply(n,t(r[2]))),r[3]&&(n.push([]),n.push.apply(n,t(r[3]))),n},n=(e,t)=>{e=r(e),t=r(t);for(var n=0;;){if(n>=e.length)return n<t.length&&"u"!=(typeof t[n])[0];var a=e[n],o=(typeof a)[0];if(n>=t.length)return"u"==o;var l=t[n],i=(typeof l)[0];if(o!=i)return"o"==o&&"n"==i||"s"==i||"u"==o;if("o"!=o&&"u"!=o&&a!=l)return a<l;n++}},a=e=>{var t=e[0],r="";if(1===e.length)return"*";if(t+.5){r+=0==t?">=":-1==t?"<":1==t?"^":2==t?"~":t>0?"=":"!=";for(var n=1,o=1;o<e.length;o++)n--,r+="u"==(typeof(i=e[o]))[0]?"-":(n>0?".":"")+(n=2,i);return r}var l=[];for(o=1;o<e.length;o++){var i=e[o];l.push(0===i?"not("+s()+")":1===i?"("+s()+" || "+s()+")":2===i?l.pop()+" "+l.pop():a(i))}return s();function s(){return l.pop().replace(/^\((.+)\)$/,"$1")}},o=(e,t)=>{if(0 in e){t=r(t);var n=e[0],a=n<0;a&&(n=-n-1);for(var l=0,i=1,s=!0;;i++,l++){var c,d,u=i<e.length?(typeof e[i])[0]:"";if(l>=t.length||"o"==(d=(typeof(c=t[l]))[0]))return!s||("u"==u?i>n&&!a:""==u!=a);if("u"==d){if(!s||"u"!=u)return!1}else if(s)if(u==d)if(i<=n){if(c!=e[i])return!1}else{if(a?c>e[i]:c<e[i])return!1;c!=e[i]&&(s=!1)}else if("s"!=u&&"n"!=u){if(a||i<=n)return!1;s=!1,i--}else{if(i<=n||d<u!=a)return!1;s=!1}else"s"!=u&&"n"!=u&&(s=!1,i--)}}var f=[],h=f.pop.bind(f);for(l=1;l<e.length;l++){var p=e[l];f.push(1==p?h()|h():2==p?h()&h():p?o(p,t):!h())}return!!h()},l=(e,t)=>e&&S.o(e,t),i=e=>(e.loaded=1,e.get()),s=e=>Object.keys(e).reduce(((t,r)=>(e[r].eager&&(t[r]=e[r]),t)),{}),c=(e,t,r,a)=>{var l=a?s(e[t]):e[t];return(t=Object.keys(l).reduce(((e,t)=>!o(r,t)||e&&!n(e,t)?e:t),0))&&l[t]},d=(e,t,r)=>{var a=r?s(e[t]):e[t];return Object.keys(a).reduce(((e,t)=>!e||!a[e].loaded&&n(e,t)?t:e),0)},u=(e,t,r,n)=>"Unsatisfied version "+r+" from "+(r&&e[t][r].from)+" of shared singleton module "+t+" (required "+a(n)+")",f=(e,t,r,n,o)=>{var l=e[r];return"No satisfying version ("+a(n)+")"+(o?" for eager consumption":"")+" of shared module "+r+" found in shared scope "+t+".\nAvailable versions: "+Object.keys(l).map((e=>e+" from "+l[e].from)).join(", ")},h=e=>{throw new Error(e)},p=e=>{"undefined"!=typeof console&&console.warn&&console.warn(e)},b=(e,t,r)=>r?r():((e,t)=>h("Shared module "+t+" doesn't exist in shared scope "+e))(e,t),v=(m=e=>function(t,r,n,a,o){var l=S.I(t);return l&&l.then&&!n?l.then(e.bind(e,t,S.S[t],r,!1,a,o)):e(t,S.S[t],r,n,a,o)})(((e,t,r,n,a,o)=>{if(!l(t,r))return b(e,r,o);var s=c(t,r,a,n);return s?i(s):o?o():void h(f(t,e,r,a,n))})),g=m(((e,t,r,n,a,s)=>{if(!l(t,r))return b(e,r,s);var c=d(t,r,n);return o(a,c)||p(u(t,r,c,a)),i(t[r][c])})),x={},y={1030:()=>g("default","lodash",!1,[1,4,17,21],(()=>S.e(5250).then((()=>()=>S(5250))))),1916:()=>g("default","moment",!1,[0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),5310:()=>g("default","js-yaml",!1,[0],(()=>S.e(9515).then((()=>()=>S(9515))))),580:()=>g("default","@babel/parser",!1,[0],(()=>S.e(6773).then((()=>()=>S(6773))))),9005:()=>g("default","@next-core/utils/general",!1,[1,1,7,35],(()=>S.e(871).then((()=>()=>S(871))))),7448:()=>g("default","@next-core/i18n",!1,[1,1,0,77],(()=>Promise.all([S.e(671),S.e(3171)]).then((()=>()=>S(5552))))),848:()=>g("default","i18next-browser-languagedetector",!1,[0],(()=>S.e(726).then((()=>()=>S(726))))),5630:()=>g("default","i18next",!1,[0],(()=>S.e(7304).then((()=>()=>S(7304))))),9933:()=>g("default","@next-core/pipes",!1,[0],(()=>S.e(6519).then((()=>()=>S(6519))))),8377:()=>g("default","@easyops-cn/brick-next-pipes",!1,[0],(()=>Promise.all([S.e(4306),S.e(1030),S.e(1916),S.e(5310)]).then((()=>()=>S(4306))))),8769:()=>v("default","react",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(4041).then((()=>()=>S(4041))))),6192:()=>v("default","@next-core/element",!1,[1,1,2,17],(()=>S.e(3426).then((()=>()=>S(1045))))),9435:()=>v("default","react-dom",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(3144).then((()=>()=>S(3144))))),9859:()=>v("default","@next-core/react-element",!1,[1,1,0,36],(()=>Promise.all([S.e(6192),S.e(9435),S.e(7733)]).then((()=>()=>S(114))))),140:()=>g("default","@next-core/runtime",!1,[1,1,62,0],(()=>Promise.all([S.e(9140),S.e(9005),S.e(1916),S.e(1361),S.e(7448),S.e(1321),S.e(9003)]).then((()=>()=>S(9140))))),1361:()=>g("default","@next-core/http",!1,[0],(()=>S.e(1370).then((()=>()=>S(8989))))),1321:()=>g("default","@next-core/cook",!1,[0],(()=>Promise.all([S.e(1122),S.e(580)]).then((()=>()=>S(1122))))),1732:()=>g("default","history",!1,[0],(()=>S.e(5384).then((()=>()=>S(5384))))),1858:()=>g("default","moment/locale/zh-cn.js",!1,[0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),2575:()=>g("default","@next-core/utils/storyboard",!1,[1,1,7,35],(()=>S.e(6314).then((()=>()=>S(3933))))),4167:()=>g("default","@next-core/supply",!1,[0],(()=>Promise.all([S.e(9933),S.e(1940)]).then((()=>()=>S(9559))))),5599:()=>g("default","@next-core/loader",!1,[0],(()=>S.e(5399).then((()=>()=>S(7780))))),9283:()=>g("default","@next-core/inject",!1,[0],(()=>Promise.all([S.e(9933),S.e(4658)]).then((()=>()=>S(2277))))),6477:()=>g("default","@next-core/theme",!1,[1,1,5,4],(()=>S.e(1889).then((()=>()=>S(1889))))),7390:()=>v("default","@next-core/react-runtime",!1,[1,1,7,16],(()=>S.e(7218).then((()=>()=>S(4837)))))},P={140:[140],580:[580],671:[848,5630],1030:[1030],1321:[1321],1361:[1361],1916:[1916],5310:[5310],6192:[6192],6477:[6477],6519:[8377],6730:[7390],7448:[7448],8769:[8769],9003:[1732,1858,2575,4167,5599,9283],9005:[9005],9435:[9435],9859:[9859],9933:[9933]},w={},S.f.consumes=(e,t)=>{S.o(P,e)&&P[e].forEach((e=>{if(S.o(x,e))return t.push(x[e]);if(!w[e]){var r=t=>{x[e]=0,S.m[e]=r=>{delete S.c[e],r.exports=t()}};w[e]=!0;var n=t=>{delete x[e],S.m[e]=r=>{throw delete S.c[e],t}};try{var a=y[e]();a.then?t.push(x[e]=a.then(r).catch(n)):r(a)}catch(e){n(e)}}}))},(()=>{var e={2691:0};S.f.j=(t,r)=>{var n=S.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else if(/^(1(030|321|361|40|916)|6(192|477|71)|9(00[35]|435|859|933)|5310|580|7448|8769)$/.test(t))e[t]=0;else{var a=new Promise(((r,a)=>n=e[t]=[r,a]));r.push(n[2]=a);var o=S.p+S.u(t),l=new Error;S.l(o,(r=>{if(S.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;l.message="Loading chunk "+t+" failed.\n("+a+": "+o+")",l.name="ChunkLoadError",l.type=a,l.request=o,n[1](l)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,a,[o,l,i]=r,s=0;if(o.some((t=>0!==e[t]))){for(n in l)S.o(l,n)&&(S.m[n]=l[n]);i&&i(S)}for(t&&t(r);s<o.length;s++)a=o[s],S.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=globalThis.webpackChunk_next_bricks_diagram=globalThis.webpackChunk_next_bricks_diagram||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),S.nc=void 0;var E=S(1112);window["bricks/diagram"]=E})();
2
+ //# sourceMappingURL=index.82d1267c.js.map