@next-bricks/diagram 0.42.12 → 0.43.0

package/dist/examples.json

@@ -5,10 +5,10 @@
   "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-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: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: id===\"W\"?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                x: Math.round(\n                  id === \"X\"\n                    ? 200 + Math.random() * 200\n                    : id === \"Y\"\n                    ? Math.random() * 300\n                    : 300 + Math.random() * 300\n                ),\n                y: (id === \"X\" ? 0 : 300) + Math.round((Math.random() * 200)),\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n          border-right: \"1px solid #ccc\"\n          overflow: scroll\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n            - container.top\n            - container.right\n            - container.bottom\n            - container.left\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM.split(\".\")[0]} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM.split(\".\")[0] %>\n                        text: <% ITEM %>\n                        direction: <% ITEM.split(\".\").pop() %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            allowEdgeToArea: true\n            dragBehavior: lasso\n            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            cells: <% CTX.initialCells %>\n            lineConnector: true\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            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            node.container.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          - target: eo-draw-canvas\n            method: addEdge\n            args:\n              - source: <% EVENT.detail.source.id %>\n                target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div\n#     style=\"\n#       width: 180px;\n#       display: flex;\n#       flex-direction: column;\n#       gap: 1em;\n#       border-right: 1px solid #ccc;\n#       overflow: scroll;\n#     \"\n#   >\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       allow-edge-to-area\n#       drag-behavior=\"lasso\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: '<% ITEM.split(\".\")[0] %>',\n#       text: \"<% ITEM %>\",\n#       direction: '<% ITEM.split(\".\").pop() %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.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#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.lineConnector = true;\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(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"node.container.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Force layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n             {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"X\",\"Y\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM %>\n                        text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: force\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cell.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        CTX.targetCell?.type === \"node\" ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"force\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   CTX.targetCell?.type === \"node\" ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: \"<% ITEM %>\",\n#       text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cell.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Dagre layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"W\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM %>\n                        text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: dagre\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cell.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        CTX.targetCell?.type === \"node\" ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"dagre\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   CTX.targetCell?.type === \"node\" ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: \"<% ITEM %>\",\n#       text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cell.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n"
+  },
   "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          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"X\",\"Y\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                x: Math.round(\n                  id === \"X\"\n                    ? 200 + Math.random() * 200\n                    : id === \"Y\"\n                    ? Math.random() * 300\n                    : 300 + Math.random() * 300\n                ),\n                y: (id === \"X\" ? 0 : 300) + Math.round((Math.random() * 200)),\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([ \n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },  \n          ])\n        %>\n    - name: activeTarget\n    - name: targetCell\n  children:\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-display-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: true\n                dashed: <% DATA.edge?.data?.virtual %>\n                strokeColor: <% DATA.edge?.data?.strokeColor %>\n                showStartArrow: <% DATA.edge?.data?.showStartArrow %>\n                strokeWidth: <% DATA.edge?.data?.strokeWidth %>\n                animate: <% DATA.edge?.data?.animate %>\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-display-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       id=\"brick-1\"\n#     ></eo-display-canvas>\n#   </div>\n# </div>\n# <eo-context-menu\n#   actions=\"&lt;%=\n#   [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_1.defaultNodeSize = [60, 60];\n#   brick_1.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.defaultEdgeLines = [\n#     {\n#       if: true,\n#       dashed: \"<% DATA.edge?.data?.virtual %>\",\n#       strokeColor: \"<% DATA.edge?.data?.strokeColor %>\",\n#       showStartArrow: \"<% DATA.edge?.data?.showStartArrow %>\",\n#       strokeWidth: \"<% DATA.edge?.data?.strokeWidth %>\",\n#       animate: \"<% DATA.edge?.data?.animate %>\",\n#     },\n#   ];\n#   brick_1.cells = \"<% CTX.initialCells %>\";\n#   brick_1.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# </script>\n# \n```\n\n### Force layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: activeTarget\n    - name: targetCell\n  children:\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-display-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: force\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-display-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"force\"\n#       id=\"brick-1\"\n#     ></eo-display-canvas>\n#   </div>\n# </div>\n# <eo-context-menu\n#   actions=\"&lt;%=\n#   [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_1.defaultNodeSize = [60, 60];\n#   brick_1.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_1.cells = \"<% CTX.initialCells %>\";\n#   brick_1.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# </script>\n# \n```\n\n### Dagre layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: activeTarget\n    - name: targetCell\n  children:\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-display-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: dagre\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-display-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"dagre\"\n#       id=\"brick-1\"\n#     ></eo-display-canvas>\n#   </div>\n# </div>\n# <eo-context-menu\n#   actions=\"&lt;%=\n#   [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_1.defaultNodeSize = [60, 60];\n#   brick_1.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_1.cells = \"<% CTX.initialCells %>\";\n#   brick_1.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# </script>\n# \n```\n\n### Degraded diagram\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          ((...seeds) => seeds.map((seed) => ({\n            type: \"node\",\n            id: seed,\n            data: {\n              name: seed,\n            },\n          })))(\n            ...(\n              new Array(500).fill(null).map((_, i) => String(i))\n            )\n          )\n        %>\n    - name: activeTarget\n    - name: targetCell\n  children:\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-display-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: force\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: true\n                dashed: <% DATA.edge?.data?.virtual %>\n                strokeColor: <% DATA.edge?.data?.strokeColor %>\n                showStartArrow: <% DATA.edge?.data?.showStartArrow %>\n                strokeWidth: <% DATA.edge?.data?.strokeWidth %>\n                animate: <% DATA.edge?.data?.animate %>\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-display-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"force\"\n#       id=\"brick-1\"\n#     ></eo-display-canvas>\n#   </div>\n# </div>\n# <eo-context-menu\n#   actions=\"&lt;%=\n#   [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# \"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_1.defaultNodeSize = [60, 60];\n#   brick_1.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.defaultEdgeLines = [\n#     {\n#       if: true,\n#       dashed: \"<% DATA.edge?.data?.virtual %>\",\n#       strokeColor: \"<% DATA.edge?.data?.strokeColor %>\",\n#       showStartArrow: \"<% DATA.edge?.data?.showStartArrow %>\",\n#       strokeWidth: \"<% DATA.edge?.data?.strokeWidth %>\",\n#       animate: \"<% DATA.edge?.data?.animate %>\",\n#     },\n#   ];\n#   brick_1.cells = \"<% CTX.initialCells %>\";\n#   brick_1.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_1.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# </script>\n# \n```\n"
-  },
-  "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: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: id===\"W\"?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                x: Math.round(\n                  id === \"X\"\n                    ? 200 + Math.random() * 200\n                    : id === \"Y\"\n                    ? Math.random() * 300\n                    : 300 + Math.random() * 300\n                ),\n                y: (id === \"X\" ? 0 : 300) + Math.round((Math.random() * 200)),\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n          border-right: \"1px solid #ccc\"\n          overflow: scroll\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n            - container.top\n            - container.right\n            - container.bottom\n            - container.left\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM.split(\".\")[0]} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM.split(\".\")[0] %>\n                        text: <% ITEM %>\n                        direction: <% ITEM.split(\".\").pop() %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            allowEdgeToArea: true\n            dragBehavior: lasso\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        (CTX.activeTarget?.type === \"multi\"\n                          ? CTX.activeTarget.targets\n                          : CTX.activeTarget\n                          ? [CTX.activeTarget]\n                          : []\n                        ).some((target) => (\n                          target.type === \"node\" && target.id === DATA.node.id\n                        ))\n                          ? \"highlighted\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cells.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.length} cells` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cells.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.length} cells?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            node.container.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div\n#     style=\"\n#       width: 180px;\n#       display: flex;\n#       flex-direction: column;\n#       gap: 1em;\n#       border-right: 1px solid #ccc;\n#       overflow: scroll;\n#     \"\n#   >\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       allow-edge-to-area\n#       drag-behavior=\"lasso\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: '<% ITEM.split(\".\")[0] %>',\n#       text: \"<% ITEM %>\",\n#       direction: '<% ITEM.split(\".\").pop() %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  (CTX.activeTarget?.type === \"multi\"\\n    ? CTX.activeTarget.targets\\n    : CTX.activeTarget\\n    ? [CTX.activeTarget]\\n    : []\\n  ).some((target) => (\\n    target.type === \"node\" && target.id === DATA.node.id\\n  ))\\n    ? \"highlighted\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cells.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `You just moved ${EVENT.detail.length} cells` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cells.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `You wanna delete ${EVENT.detail.length} cells?` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"node.container.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Force layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n             {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"X\",\"Y\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM %>\n                        text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: force\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cell.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        CTX.targetCell?.type === \"node\" ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"force\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   CTX.targetCell?.type === \"node\" ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: \"<% ITEM %>\",\n#       text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cell.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Dagre layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"W\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM %>\n                        text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: dagre\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cell.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        CTX.targetCell?.type === \"node\" ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"dagre\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   CTX.targetCell?.type === \"node\" ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: \"<% ITEM %>\",\n#       text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cell.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n"
   }
 }

package/dist/index.d6687c6f.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";var e,t,r,n,a,o,l,i,c,s,d,u,f,h,p,m,b,v,g,x,y,P,w,k={9476:(e,t,r)=>{var n={"./eo-diagram":()=>Promise.all([r.e(3025),r.e(8769),r.e(1030),r.e(4799),r.e(8610),r.e(6477),r.e(8566),r.e(8426),r.e(3233),r.e(3039)]).then((()=>()=>r(1508))),"./editable-label":()=>Promise.all([r.e(8769),r.e(4799),r.e(8610),r.e(6477),r.e(6006)]).then((()=>()=>r(3328))),"./eo-draw-canvas":()=>Promise.all([r.e(7507),r.e(3025),r.e(788),r.e(8769),r.e(1030),r.e(4799),r.e(5701),r.e(8610),r.e(6477),r.e(9435),r.e(8566),r.e(8426),r.e(3252),r.e(8939)]).then((()=>()=>r(9068))),"./experimental-node":()=>Promise.all([r.e(8769),r.e(4799),r.e(8610),r.e(6477),r.e(4422)]).then((()=>()=>r(5568))),"./eo-display-canvas":()=>Promise.all([r.e(7507),r.e(3025),r.e(788),r.e(8769),r.e(1030),r.e(4799),r.e(5701),r.e(8610),r.e(6477),r.e(9435),r.e(8566),r.e(8426),r.e(3252),r.e(9823)]).then((()=>()=>r(6094)))},a=(e,t)=>(r.R=t,t=r.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),r.R=void 0,t),o=(e,t)=>{if(r.S){var n="default",a=r.S[n];if(a&&a!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return r.S[n]=e,r.I(n,t)}};r.d(t,{get:()=>a,init:()=>o})}},j={};function S(e){var t=j[e];if(void 0!==t)return t.exports;var r=j[e]={id:e,loaded:!1,exports:{}};return k[e].call(r.exports,r,r.exports,S),r.loaded=!0,r.exports}S.m=k,S.c=j,S.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return S.d(t,{a:t}),t},S.d=(e,t)=>{for(var r in t)S.o(t,r)&&!S.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},S.f={},S.e=e=>Promise.all(Object.keys(S.f).reduce(((t,r)=>(S.f[r](e,t),t)),[])),S.u=e=>"chunks/"+({3039:"eo-diagram",4422:"experimental-node",6006:"editable-label",8939:"eo-draw-canvas",9823:"eo-display-canvas"}[e]||e)+"."+{114:"d27688d7",726:"31d83c95",788:"5a8dd377",799:"5e6749ba",871:"c60deabc",1030:"b2de5ee5",1045:"63c485a7",1080:"97f11068",1122:"dea87200",1302:"4f0b92f3",1370:"8d145ce9",1889:"1d67080e",1940:"e1fdb1c6",2052:"a8ed8891",2277:"0b3548af",3025:"6d94cc70",3039:"1934f2b2",3136:"ffdcaceb",3144:"94428cca",3171:"633b30e8",3233:"70157b34",3252:"0a5098f4",3426:"ae8ab421",3751:"c544b621",3933:"fca8ae82",4041:"d221940a",4422:"7441f68a",4658:"d4d0115b",4741:"4a7e366d",4799:"98992dcf",4837:"44f22425",5250:"d0a6e755",5384:"b76b4b24",5399:"1f67d9c4",5552:"ad11237e",5701:"225888d6",6006:"e65ba20e",6314:"f35cc928",6477:"1a6ac6f5",6519:"bdf67396",6688:"0764fdb6",6773:"8b791d47",7106:"fa321717",7218:"6822e904",7304:"3d0757fa",7507:"f8686358",7714:"48e8cce0",7721:"6ac62398",7733:"e752ca8f",8426:"ae7522a1",8566:"2a4c80be",8610:"6bef21d7",8769:"4c91b468",8939:"84ade234",8989:"0fc5ea84",9435:"904b4066",9515:"4b4e0758",9559:"1cd5e0b2",9654:"c3a806a4",9755:"0a240b26",9823:"f874fb2f",9844:"4a3a83f7"}[e]+".js",S.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),S.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="@next-bricks/diagram:",S.l=(r,n,a,o)=>{if(e[r])e[r].push(n);else{var l,i;if(void 0!==a)for(var c=document.getElementsByTagName("script"),s=0;s<c.length;s++){var d=c[s];if(d.getAttribute("src")==r||d.getAttribute("data-webpack")==t+a){l=d;break}}l||(i=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,S.nc&&l.setAttribute("nonce",S.nc),l.setAttribute("data-webpack",t+a),l.src=r),e[r]=[n];var u=(t,n)=>{l.onerror=l.onload=null,clearTimeout(f);var a=e[r];if(delete e[r],l.parentNode&&l.parentNode.removeChild(l),a&&a.forEach((e=>e(n))),t)return t(n)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=u.bind(null,l.onerror),l.onload=u.bind(null,l.onload),i&&document.head.appendChild(l)}},S.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},S.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{S.S={};var e={},t={};S.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];S.o(S.S,r)||(S.S[r]={});var o=S.S[r],l="@next-bricks/diagram",i=(e,t,r,n)=>{var a=o[e]=o[e]||{},i=a[t];(!i||!i.loaded&&(!n!=!i.eager?n:l>i.from))&&(a[t]={get:r,from:l,eager:!!n})},c=[];return"default"===r&&(i("@babel/parser","7.25.3",(()=>S.e(6773).then((()=>()=>S(6773))))),i("@easyops-cn/brick-next-pipes","0.6.0",(()=>Promise.all([S.e(4741),S.e(1030),S.e(6688)]).then((()=>()=>S(4741))))),i("@next-core/cook","2.4.9",(()=>Promise.all([S.e(1122),S.e(9654)]).then((()=>()=>S(1122))))),i("@next-core/element","1.2.12",(()=>S.e(1045).then((()=>()=>S(1045))))),i("@next-core/http","1.2.7",(()=>S.e(8989).then((()=>()=>S(8989))))),i("@next-core/i18n","1.0.64",(()=>Promise.all([S.e(5701),S.e(1080),S.e(9755),S.e(5552)]).then((()=>()=>S(5552))))),i("@next-core/inject","1.0.43",(()=>Promise.all([S.e(1030),S.e(7106),S.e(2277)]).then((()=>()=>S(2277))))),i("@next-core/loader","1.6.8",(()=>S.e(5399).then((()=>()=>S(7780))))),i("@next-core/pipes","2.0.25",(()=>S.e(6519).then((()=>()=>S(6519))))),i("@next-core/react-element","1.0.31",(()=>Promise.all([S.e(8769),S.e(4799),S.e(9435),S.e(114)]).then((()=>()=>S(114))))),i("@next-core/react-runtime","1.6.37",(()=>Promise.all([S.e(8769),S.e(1030),S.e(8610),S.e(8566),S.e(4837)]).then((()=>()=>S(4837))))),i("@next-core/runtime","1.54.14",(()=>Promise.all([S.e(7507),S.e(799),S.e(1030),S.e(5701),S.e(1302),S.e(1080),S.e(3136),S.e(7714)]).then((()=>()=>S(799))))),i("@next-core/supply","2.1.21",(()=>Promise.all([S.e(1030),S.e(7106),S.e(1302),S.e(9559)]).then((()=>()=>S(9559))))),i("@next-core/theme","1.5.4",(()=>Promise.all([S.e(1889),S.e(2052)]).then((()=>()=>S(1889))))),i("@next-core/utils/general","1.7.22",(()=>S.e(871).then((()=>()=>S(871))))),i("@next-core/utils/storyboard","1.7.22",(()=>Promise.all([S.e(5701),S.e(3136),S.e(3933)]).then((()=>()=>S(3933))))),i("history","4.10.1",(()=>S.e(5384).then((()=>()=>S(5384))))),i("i18next-browser-languagedetector","7.2.1",(()=>S.e(726).then((()=>()=>S(726))))),i("i18next","22.5.1",(()=>S.e(7304).then((()=>()=>S(7304))))),i("js-yaml","3.14.1",(()=>S.e(9515).then((()=>()=>S(9515))))),i("lodash","4.17.21",(()=>S.e(5250).then((()=>()=>S(5250))))),i("moment/locale/zh-cn.js","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),i("moment","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),i("react-dom","0.0.0-experimental-ee8509801-20230117",(()=>Promise.all([S.e(3144),S.e(8769)]).then((()=>()=>S(3144))))),i("react","0.0.0-experimental-ee8509801-20230117",(()=>S.e(4041).then((()=>()=>S(4041)))))),e[r]=c.length?Promise.all(c).then((()=>e[r]=1)):1}}})(),(()=>{var e;S.g.importScripts&&(e=S.g.location+"");var t=S.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),S.p=e})(),r=e=>{var t=e=>e.split(".").map((e=>+e==e?+e:e)),r=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=r[1]?t(r[1]):[];return r[2]&&(n.length++,n.push.apply(n,t(r[2]))),r[3]&&(n.push([]),n.push.apply(n,t(r[3]))),n},n=(e,t)=>{e=r(e),t=r(t);for(var n=0;;){if(n>=e.length)return n<t.length&&"u"!=(typeof t[n])[0];var a=e[n],o=(typeof a)[0];if(n>=t.length)return"u"==o;var l=t[n],i=(typeof l)[0];if(o!=i)return"o"==o&&"n"==i||"s"==i||"u"==o;if("o"!=o&&"u"!=o&&a!=l)return a<l;n++}},a=e=>{var t=e[0],r="";if(1===e.length)return"*";if(t+.5){r+=0==t?">=":-1==t?"<":1==t?"^":2==t?"~":t>0?"=":"!=";for(var n=1,o=1;o<e.length;o++)n--,r+="u"==(typeof(i=e[o]))[0]?"-":(n>0?".":"")+(n=2,i);return r}var l=[];for(o=1;o<e.length;o++){var i=e[o];l.push(0===i?"not("+c()+")":1===i?"("+c()+" || "+c()+")":2===i?l.pop()+" "+l.pop():a(i))}return c();function c(){return l.pop().replace(/^\((.+)\)$/,"$1")}},o=(e,t)=>{if(0 in e){t=r(t);var n=e[0],a=n<0;a&&(n=-n-1);for(var l=0,i=1,c=!0;;i++,l++){var s,d,u=i<e.length?(typeof e[i])[0]:"";if(l>=t.length||"o"==(d=(typeof(s=t[l]))[0]))return!c||("u"==u?i>n&&!a:""==u!=a);if("u"==d){if(!c||"u"!=u)return!1}else if(c)if(u==d)if(i<=n){if(s!=e[i])return!1}else{if(a?s>e[i]:s<e[i])return!1;s!=e[i]&&(c=!1)}else if("s"!=u&&"n"!=u){if(a||i<=n)return!1;c=!1,i--}else{if(i<=n||d<u!=a)return!1;c=!1}else"s"!=u&&"n"!=u&&(c=!1,i--)}}var f=[],h=f.pop.bind(f);for(l=1;l<e.length;l++){var p=e[l];f.push(1==p?h()|h():2==p?h()&h():p?o(p,t):!h())}return!!h()},l=(e,t)=>e&&S.o(e,t),i=e=>(e.loaded=1,e.get()),c=e=>Object.keys(e).reduce(((t,r)=>(e[r].eager&&(t[r]=e[r]),t)),{}),s=(e,t,r,a)=>{var l=a?c(e[t]):e[t];return(t=Object.keys(l).reduce(((e,t)=>!o(r,t)||e&&!n(e,t)?e:t),0))&&l[t]},d=(e,t,r)=>{var a=r?c(e[t]):e[t];return Object.keys(a).reduce(((e,t)=>!e||!a[e].loaded&&n(e,t)?t:e),0)},u=(e,t,r,n)=>"Unsatisfied version "+r+" from "+(r&&e[t][r].from)+" of shared singleton module "+t+" (required "+a(n)+")",f=(e,t,r,n,o)=>{var l=e[r];return"No satisfying version ("+a(n)+")"+(o?" for eager consumption":"")+" of shared module "+r+" found in shared scope "+t+".\nAvailable versions: "+Object.keys(l).map((e=>e+" from "+l[e].from)).join(", ")},h=e=>{throw new Error(e)},p=e=>{"undefined"!=typeof console&&console.warn&&console.warn(e)},b=(e,t,r)=>r?r():((e,t)=>h("Shared module "+t+" doesn't exist in shared scope "+e))(e,t),v=(m=e=>function(t,r,n,a,o){var l=S.I(t);return l&&l.then&&!n?l.then(e.bind(e,t,S.S[t],r,!1,a,o)):e(t,S.S[t],r,n,a,o)})(((e,t,r,n,a,o)=>{if(!l(t,r))return b(e,r,o);var c=s(t,r,a,n);return c?i(c):o?o():void h(f(t,e,r,a,n))})),g=m(((e,t,r,n,a,c)=>{if(!l(t,r))return b(e,r,c);var s=d(t,r,n);return o(a,s)||p(u(t,r,s,a)),i(t[r][s])})),x={},y={1030:()=>g("default","lodash",!1,[1,4,17,21],(()=>S.e(5250).then((()=>()=>S(5250))))),1204:()=>g("default","js-yaml",!1,[1,3,14,0],(()=>S.e(9515).then((()=>()=>S(9515))))),8297:()=>g("default","moment",!1,[1,2,27,0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),9654:()=>g("default","@babel/parser",!1,[1,7,25,4],(()=>S.e(6773).then((()=>()=>S(6773))))),5701:()=>g("default","@next-core/utils/general",!1,[1,1,7,22],(()=>S.e(871).then((()=>()=>S(871))))),1080:()=>g("default","@next-core/i18n",!1,[1,1,0,64],(()=>Promise.all([S.e(9755),S.e(3171)]).then((()=>()=>S(5552))))),2350:()=>g("default","i18next",!1,[1,22,5,1],(()=>S.e(7304).then((()=>()=>S(7304))))),7072:()=>g("default","i18next-browser-languagedetector",!1,[1,7,2,1],(()=>S.e(726).then((()=>()=>S(726))))),7106:()=>g("default","@next-core/pipes",!1,[1,2,0,25],(()=>S.e(6519).then((()=>()=>S(6519))))),161:()=>g("default","@easyops-cn/brick-next-pipes",!1,[2,0,6,0],(()=>Promise.all([S.e(4741),S.e(1030),S.e(6688)]).then((()=>()=>S(4741))))),8769:()=>v("default","react",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(4041).then((()=>()=>S(4041))))),4799:()=>v("default","@next-core/element",!1,[1,1,2,12],(()=>S.e(3426).then((()=>()=>S(1045))))),9435:()=>v("default","react-dom",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(3144).then((()=>()=>S(3144))))),8610:()=>v("default","@next-core/react-element",!1,[1,1,0,31],(()=>Promise.all([S.e(4799),S.e(9435),S.e(7733)]).then((()=>()=>S(114))))),8566:()=>g("default","@next-core/runtime",!1,[1,1,54,14],(()=>Promise.all([S.e(7507),S.e(799),S.e(5701),S.e(1302),S.e(1080),S.e(3136),S.e(7714)]).then((()=>()=>S(799))))),1302:()=>g("default","moment",!1,[1,2,30,1],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),3136:()=>g("default","@next-core/cook",!1,[1,2,4,9],(()=>Promise.all([S.e(1122),S.e(9654)]).then((()=>()=>S(1122))))),2890:()=>g("default","history",!1,[1,4,10,1],(()=>S.e(5384).then((()=>()=>S(5384))))),5096:()=>g("default","@next-core/loader",!1,[1,1,6,8],(()=>S.e(5399).then((()=>()=>S(7780))))),5967:()=>g("default","@next-core/utils/storyboard",!1,[1,1,7,22],(()=>S.e(6314).then((()=>()=>S(3933))))),6036:()=>g("default","moment/locale/zh-cn.js",!1,[1,2,30,1],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),8255:()=>g("default","@next-core/http",!1,[1,1,2,7],(()=>S.e(3751).then((()=>()=>S(8989))))),8502:()=>g("default","@next-core/supply",!1,[1,2,1,21],(()=>Promise.all([S.e(7106),S.e(1940)]).then((()=>()=>S(9559))))),9239:()=>g("default","@next-core/inject",!1,[1,1,0,43],(()=>Promise.all([S.e(7106),S.e(4658)]).then((()=>()=>S(2277))))),6477:()=>g("default","@next-core/theme",!1,[1,1,5,4],(()=>S.e(1889).then((()=>()=>S(1889))))),8426:()=>v("default","@next-core/react-runtime",!1,[1,1,6,37],(()=>S.e(7218).then((()=>()=>S(4837))))),3496:()=>g("default","@next-core/http",!1,[1,1,0,6],(()=>S.e(1370).then((()=>()=>S(8989)))))},P={1030:[1030],1080:[1080],1302:[1302],3136:[3136],3233:[3496],4799:[4799],5701:[5701],6477:[6477],6519:[161],6688:[1204,8297],7106:[7106],7714:[2890,5096,5967,6036,8255,8502,9239],8426:[8426],8566:[8566],8610:[8610],8769:[8769],9435:[9435],9654:[9654],9755:[2350,7072]},w={},S.f.consumes=(e,t)=>{S.o(P,e)&&P[e].forEach((e=>{if(S.o(x,e))return t.push(x[e]);if(!w[e]){var r=t=>{x[e]=0,S.m[e]=r=>{delete S.c[e],r.exports=t()}};w[e]=!0;var n=t=>{delete x[e],S.m[e]=r=>{throw delete S.c[e],t}};try{var a=y[e]();a.then?t.push(x[e]=a.then(r).catch(n)):r(a)}catch(e){n(e)}}}))},(()=>{var e={2691:0};S.f.j=(t,r)=>{var n=S.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else if(/^(1(030|080|302)|8(426|566|610|769)|9(435|654|755)|3136|4799|5701|6477|6688|7106|7714)$/.test(t))e[t]=0;else{var a=new Promise(((r,a)=>n=e[t]=[r,a]));r.push(n[2]=a);var o=S.p+S.u(t),l=new Error;S.l(o,(r=>{if(S.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;l.message="Loading chunk "+t+" failed.\n("+a+": "+o+")",l.name="ChunkLoadError",l.type=a,l.request=o,n[1](l)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,a,[o,l,i]=r,c=0;if(o.some((t=>0!==e[t]))){for(n in l)S.o(l,n)&&(S.m[n]=l[n]);i&&i(S)}for(t&&t(r);c<o.length;c++)a=o[c],S.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=globalThis.webpackChunk_next_bricks_diagram=globalThis.webpackChunk_next_bricks_diagram||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),S.nc=void 0;var E=S(9476);window["bricks/diagram"]=E})();
+//# sourceMappingURL=index.d6687c6f.js.map