@next-bricks/diagram 0.57.2 → 0.57.3

package/dist/examples.json

@@ -1,14 +1,14 @@
 {
-  "eo-diagram": {
-    "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"
-  },
   "diagram.editable-label": {
     "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"
   },
-  "eo-display-canvas": {
-    "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"
+  "eo-diagram": {
+    "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"
   },
   "eo-draw-canvas": {
     "doc": "用于手工绘图的画布。\n\n注意：将配套另外一个用于展示的画布构件。\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"decorator\",\n              id: \"rect-1\",\n              decorator: \"rect\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: id===\"W\"?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                x: Math.round(\n                  id === \"X\"\n                    ? 200 + Math.random() * 200\n                    : id === \"Y\"\n                    ? Math.random() * 300\n                    : 300 + Math.random() * 300\n                ),\n                y: (id === \"X\" ? 0 : 300) + Math.round((Math.random() * 200)),\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n          border-right: \"1px solid var(--palette-gray-6)\"\n          overflow: scroll\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n            - 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}` %>\n                    status: |\n                      <%=\n                        (CTX.activeTarget?.type === \"multi\"\n                          ? CTX.activeTarget.targets\n                          : CTX.activeTarget\n                          ? [CTX.activeTarget]\n                          : []\n                        ).some((target) => (\n                          target.type === \"node\" && target.id === DATA.node.id\n                        ))\n                          ? \"highlighted\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n              - if: <% !DATA.edge.data?.virtual %>\n                dotted: true\n                showStartArrow: true\n                markers:\n                  - placement: end\n                    type: circle\n                  - placement: start\n                    type: arrow\n            cells: <% CTX.initialCells %>\n            lineConnector: true\n            lineSettings:\n              type: polyline\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cells.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.length} cells` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cells.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.length} cells?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            edge.add:\n              action: message.info\n              args:\n                - |\n                  <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n            edge.view.change:\n              action: message.info\n              args:\n                - |\n                  <% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\n            decorator.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        ([\"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            text: \"Remove\",\n            event: \"remove\"\n          }\n        ]\n      %>\n  events:\n    remove:\n      target: eo-draw-canvas\n      method: updateCells\n      args:\n        - |\n          <%\n            CTX.initialCells.filter((cell) =>\n              !(cell.type === \"edge\" && CTX.targetCell.source === cell.source && CTX.targetCell.target === cell.target)\n            )\n          %>\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          - target: eo-draw-canvas\n            method: addEdge\n            args:\n              - source: <% EVENT.detail.source.id %>\n                target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div\n#     style=\"\n#       width: 180px;\n#       display: flex;\n#       flex-direction: column;\n#       gap: 1em;\n#       border-right: 1px solid var(--palette-gray-6);\n#       overflow: scroll;\n#     \"\n#   >\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       allow-edge-to-area\n#       drag-behavior=\"lasso\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     },\n#     {\n#       text: \"Remove\",\n#       event: \"remove\"\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#       /* 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: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  (CTX.activeTarget?.type === \"multi\"\\n    ? CTX.activeTarget.targets\\n    : CTX.activeTarget\\n    ? [CTX.activeTarget]\\n    : []\\n  ).some((target) => (\\n    target.type === \"node\" && target.id === DATA.node.id\\n  ))\\n    ? \"highlighted\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#     {\n#       if: \"<% !DATA.edge.data?.virtual %>\",\n#       dotted: true,\n#       showStartArrow: true,\n#       markers: [\n#         {\n#           placement: \"end\",\n#           type: \"circle\",\n#         },\n#         {\n#           placement: \"start\",\n#           type: \"arrow\",\n#         },\n#       ],\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.lineConnector = true;\n#   brick_6.lineSettings = {\n#     type: \"polyline\",\n#   };\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cells.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `You just moved ${EVENT.detail.length} cells` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cells.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `You wanna delete ${EVENT.detail.length} cells?` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"edge.add\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"edge.view.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"decorator.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    !(cell.type === \"edge\" && CTX.targetCell.source === cell.source && CTX.targetCell.target === cell.target)\\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.targetCell.id %>\"\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"
+  },
+  "eo-display-canvas": {
+    "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"
   }
 }