@next-bricks/diagram 0.54.8 → 0.55.1

package/dist/examples.json

@@ -9,6 +9,6 @@
     "doc": "构件 `diagram.editable-label`\n\n## Examples\n\n### Basic\n\n```yaml preview\nbrick: diagram.editable-label\nproperties:\n  type: line\n  label: Relation\nevents:\n  label.change:\n    action: message.success\n    args:\n      - \"<% `Label changed to: ${EVENT.detail}` %>\"\n# -- YAML DELIMITER (1nbbm8) --\n# <diagram.editable-label\n#   type=\"line\"\n#   label=\"Relation\"\n#   id=\"brick-1\"\n# ></diagram.editable-label>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"label.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"success\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Label changed to: ${EVENT.detail}` %>\",\n#     });\n#   });\n# </script>\n# \n```\n"
   },
   "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 var(--palette-gray-6)\"\n          overflow: scroll\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n            - container.top\n            - container.right\n            - container.bottom\n            - container.left\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM.split(\".\")[0]} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM.split(\".\")[0] %>\n                        text: <% ITEM %>\n                        direction: <% ITEM.split(\".\").pop() %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            allowEdgeToArea: true\n            dragBehavior: lasso\n            layoutOptions:\n              snap:\n                # grid: true\n                object: true\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        (CTX.activeTarget?.type === \"multi\"\n                          ? CTX.activeTarget.targets\n                          : CTX.activeTarget\n                          ? [CTX.activeTarget]\n                          : []\n                        ).some((target) => (\n                          target.type === \"node\" && target.id === DATA.node.id\n                        ))\n                          ? \"highlighted\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n              - if: <% !DATA.edge.data?.virtual %>\n                dotted: true\n                showStartArrow: true\n                markers:\n                  - placement: end\n                    type: circle\n                  - placement: start\n                    type: arrow\n            cells: <% CTX.initialCells %>\n            lineConnector: true\n            lineSettings:\n              type: polyline\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cells.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.length} cells` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cells.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.length} cells?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            edge.add:\n              action: message.info\n              args:\n                - |\n                  <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n            edge.view.change:\n              action: message.info\n              args:\n                - |\n                  <% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            node.container.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          },\n          {\n            text: \"Remove\",\n            event: \"remove\"\n          }\n        ]\n      %>\n  events:\n    remove:\n      target: eo-draw-canvas\n      method: updateCells\n      args:\n        - |\n          <%\n            CTX.initialCells.filter((cell) =>\n              !(cell.type === \"edge\" && CTX.targetCell.source === cell.source && CTX.targetCell.target === cell.target)\n            )\n          %>\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          - target: eo-draw-canvas\n            method: addEdge\n            args:\n              - source: <% EVENT.detail.source.id %>\n                target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div\n#     style=\"\n#       width: 180px;\n#       display: flex;\n#       flex-direction: column;\n#       gap: 1em;\n#       border-right: 1px solid var(--palette-gray-6);\n#       overflow: scroll;\n#     \"\n#   >\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       allow-edge-to-area\n#       drag-behavior=\"lasso\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     },\n#     {\n#       text: \"Remove\",\n#       event: \"remove\"\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: '<% ITEM.split(\".\")[0] %>',\n#       text: \"<% ITEM %>\",\n#       direction: '<% ITEM.split(\".\").pop() %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.layoutOptions = {\n#     snap: {\n#       object: true,\n#     },\n#   };\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  (CTX.activeTarget?.type === \"multi\"\\n    ? CTX.activeTarget.targets\\n    : CTX.activeTarget\\n    ? [CTX.activeTarget]\\n    : []\\n  ).some((target) => (\\n    target.type === \"node\" && target.id === DATA.node.id\\n  ))\\n    ? \"highlighted\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#     {\n#       if: \"<% !DATA.edge.data?.virtual %>\",\n#       dotted: true,\n#       showStartArrow: true,\n#       markers: [\n#         {\n#           placement: \"end\",\n#           type: \"circle\",\n#         },\n#         {\n#           placement: \"start\",\n#           type: \"arrow\",\n#         },\n#       ],\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.lineConnector = true;\n#   brick_6.lineSettings = {\n#     type: \"polyline\",\n#   };\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cells.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `You just moved ${EVENT.detail.length} cells` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cells.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `You wanna delete ${EVENT.detail.length} cells?` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"edge.add\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"edge.view.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"node.container.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"remove\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.filter((cell) =>\\n    !(cell.type === \"edge\" && CTX.targetCell.source === cell.source && CTX.targetCell.target === cell.target)\\n  )\\n%>\\n'\n#     );\n#   });\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Line labels\n\n设置连线文字。\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      flexDirection: column\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n              description: \"X->Y\",\n              placement: \"end\",\n              view: {\n                type: \"polyline\"\n              }\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\"\n            },\n            {\n              type: \"node\",\n              id: \"X\",\n              data: {\n                name: \"Node X\",\n              },\n              view: {\n                x: 100,\n                y: 100,\n                width: 60,\n                height: 60,\n              }\n            },\n            {\n              type: \"node\",\n              id: \"Y\",\n              data: {\n                name: \"Node Y\",\n              },\n              view: {\n                x: 0,\n                y: 300,\n                width: 60,\n                height: 60,\n              }\n            },\n            {\n              type: \"node\",\n              id: \"Z\",\n              data: {\n                name: \"Node Z\",\n              },\n              view: {\n                x: 300,\n                y: 200,\n                width: 60,\n                height: 60,\n              }\n            },\n          ]\n        %>\n    - name: activeTarget\n    - name: scale\n      value: 1\n  children:\n    - brick: eo-draw-canvas\n      properties:\n        style:\n          width: 100%\n          height: 100%\n        activeTarget: <%= CTX.activeTarget %>\n        fadeUnrelatedCells: true\n        dragBehavior: lasso\n        layoutOptions:\n          snap:\n            object: true\n        defaultNodeSize: [60, 60]\n        defaultNodeBricks:\n          - useBrick:\n              brick: diagram.experimental-node\n              properties:\n                textContent: <% `Node ${DATA.node.id}` %>\n                status: |\n                  <%=\n                    (CTX.activeTarget?.type === \"multi\"\n                      ? CTX.activeTarget.targets\n                      : CTX.activeTarget\n                      ? [CTX.activeTarget]\n                      : []\n                    ).some((target) => (\n                      target.type === \"node\" && target.id === DATA.node.id\n                    ))\n                      ? \"highlighted\"\n                      : \"default\"\n                  %>\n        cells: <% CTX.initialCells %>\n        lineConnector: true\n        defaultEdgeLines:\n          - callLabelOnDoubleClick: enableEditing\n            label:\n              placement: <% DATA.edge.placement %>\n              offset: 10\n              useBrick:\n                brick: diagram.editable-label\n                properties:\n                  label: <% DATA.edge.description %>\n                  type: line\n                  # Set `readOnly: true` for eo-display-canvas\n                  # readOnly: true\n                events:\n                  label.change:\n                    # Make sure only trigger update if label actually changed\n                    if: <% (DATA.edge.description || \"\") !== (EVENT.detail || \"\") %>\n                    action: context.replace\n                    args:\n                      - initialCells\n                      - |-\n                        <%\n                          CTX.initialCells.map((edge) =>\n                            edge.type === \"edge\" &&\n                            edge.source === DATA.edge.source &&\n                            edge.target === DATA.edge.target\n                              ? { ...edge, description: EVENT.detail }\n                              : edge\n                          )\n                        %>\n      events:\n        activeTarget.change:\n          action: context.replace\n          args:\n            - activeTarget\n            - <% EVENT.detail %>\n        cell.delete:\n          action: message.warn\n          args:\n            - |\n              <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n        scale.change:\n          action: context.replace\n          args:\n            - scale\n            - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; height: 600px; gap: 1em\">\n#   <eo-draw-canvas\n#     style=\"width: 100%; height: 100%\"\n#     fade-unrelated-cells\n#     drag-behavior=\"lasso\"\n#     id=\"brick-1\"\n#   ></eo-draw-canvas>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_1.layoutOptions = {\n#     snap: {\n#       object: true,\n#     },\n#   };\n#   brick_1.defaultNodeSize = [60, 60];\n#   brick_1.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  (CTX.activeTarget?.type === \"multi\"\\n    ? CTX.activeTarget.targets\\n    : CTX.activeTarget\\n    ? [CTX.activeTarget]\\n    : []\\n  ).some((target) => (\\n    target.type === \"node\" && target.id === DATA.node.id\\n  ))\\n    ? \"highlighted\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.cells = \"<% CTX.initialCells %>\";\n#   brick_1.lineConnector = true;\n#   brick_1.defaultEdgeLines = [\n#     {\n#       callLabelOnDoubleClick: \"enableEditing\",\n#       label: {\n#         placement: \"<% DATA.edge.placement %>\",\n#         offset: 10,\n#         useBrick: {\n#           brick: \"diagram.editable-label\",\n#           properties: {\n#             label: \"<% DATA.edge.description %>\",\n#             type: \"line\",\n#           },\n#           events: {\n#             \"label.change\": {\n#               if: '<% (DATA.edge.description || \"\") !== (EVENT.detail || \"\") %>',\n#               action: \"context.replace\",\n#               args: [\n#                 \"initialCells\",\n#                 '<%\\n  CTX.initialCells.map((edge) =>\\n    edge.type === \"edge\" &&\\n    edge.source === DATA.edge.source &&\\n    edge.target === DATA.edge.target\\n      ? { ...edge, description: EVENT.detail }\\n      : edge\\n  )\\n%>',\n#               ],\n#             },\n#           },\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_1.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# </script>\n# \n```\n\n### Line settings\n\n设置属性 `lineSettings` 来调整新的连线的样式，例如使用折线或直线。注意，该设置不影响已有的 edge 的连线样式。\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      flexDirection: column\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"node\",\n              id: \"X\",\n              data: {\n                name: \"Node X\",\n              },\n              view: {\n                x: 100,\n                y: 100,\n                width: 60,\n                height: 60,\n              }\n            },\n            {\n              type: \"node\",\n              id: \"Y\",\n              data: {\n                name: \"Node Y\",\n              },\n              view: {\n                x: 0,\n                y: 300,\n                width: 60,\n                height: 60,\n              }\n            },\n            {\n              type: \"node\",\n              id: \"Z\",\n              data: {\n                name: \"Node Z\",\n              },\n              view: {\n                x: 300,\n                y: 200,\n                width: 60,\n                height: 60,\n              }\n            },\n          ]\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n    - name: lineType\n      value: polyline\n  children:\n    - brick: div\n      children:\n        - brick: eo-radio\n          properties:\n            type: button\n            value: polyline\n            options:\n              - polyline\n              - curve\n              - straight\n          events:\n            change:\n              action: context.replace\n              args:\n                - lineType\n                - <% EVENT.detail.value %>\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minHeight: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            dragBehavior: lasso\n            layoutOptions:\n              snap:\n                object: true\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        (CTX.activeTarget?.type === \"multi\"\n                          ? CTX.activeTarget.targets\n                          : CTX.activeTarget\n                          ? [CTX.activeTarget]\n                          : []\n                        ).some((target) => (\n                          target.type === \"node\" && target.id === DATA.node.id\n                        ))\n                          ? \"highlighted\"\n                          : \"default\"\n                      %>\n            cells: <% CTX.initialCells %>\n            lineConnector: true\n            lineSettings: |\n              <%= { type: CTX.lineType } %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            edge.add:\n              action: message.info\n              args:\n                - |\n                  <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n            edge.view.change:\n              action: message.info\n              args:\n                - |\n                  <% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          - target: eo-draw-canvas\n            method: addEdge\n            args:\n              - source: <% EVENT.detail.source.id %>\n                target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; height: 600px; gap: 1em\">\n#   <div>\n#     <eo-radio\n#       type=\"button\"\n#       value=\"polyline\"\n#       options=\"polyline,curve,straight\"\n#       id=\"brick-1\"\n#     ></eo-radio>\n#   </div>\n#   <div style=\"flex: 1; min-height: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       drag-behavior=\"lasso\"\n#       id=\"brick-2\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-3\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_2.layoutOptions = {\n#     snap: {\n#       object: true,\n#     },\n#   };\n#   brick_2.defaultNodeSize = [60, 60];\n#   brick_2.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  (CTX.activeTarget?.type === \"multi\"\\n    ? CTX.activeTarget.targets\\n    : CTX.activeTarget\\n    ? [CTX.activeTarget]\\n    : []\\n  ).some((target) => (\\n    target.type === \"node\" && target.id === DATA.node.id\\n  ))\\n    ? \"highlighted\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_2.cells = \"<% CTX.initialCells %>\";\n#   brick_2.lineConnector = true;\n#   brick_2.lineSettings = \"<%= { type: CTX.lineType } %>\\n\";\n#   brick_2.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_2.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_2.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_2.addEventListener(\"edge.add\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_2.addEventListener(\"edge.view.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_2.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Force layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n             {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"X\",\"Y\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM %>\n                        text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: force\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cell.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        CTX.targetCell?.type === \"node\" ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"force\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   CTX.targetCell?.type === \"node\" ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: \"<% ITEM %>\",\n#       text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cell.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Dagre layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n            {\n              type: \"edge\",\n              source: \"Z\",\n              target: \"W\",\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"W\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          )\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM %>\n                        text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        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              - dashed: <% !!DATA.edge.data?.virtual %>\n                strokeColor: var(--palette-blue-6)\n                overrides:\n                  active:\n                    strokeWidth: <% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\n                    strokeColor: cyan\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cell.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        CTX.targetCell?.type === \"node\" ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"dagre\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   CTX.targetCell?.type === \"node\" ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: \"<% ITEM %>\",\n#       text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       dashed: \"<% !!DATA.edge.data?.virtual %>\",\n#       strokeColor: \"var(--palette-blue-6)\",\n#       overrides: {\n#         active: {\n#           strokeWidth: \"<% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\",\n#           strokeColor: \"cyan\",\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cell.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n"
+    "doc": "用于手工绘图的画布。\n\n注意：将配套另外一个用于展示的画布构件。\n\n## Examples\n\n### Basic\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"decorator\",\n              id: \"rect-1\",\n              decorator: \"rect\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: id===\"W\"?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                x: Math.round(\n                  id === \"X\"\n                    ? 200 + Math.random() * 200\n                    : id === \"Y\"\n                    ? Math.random() * 300\n                    : 300 + Math.random() * 300\n                ),\n                y: (id === \"X\" ? 0 : 300) + Math.round((Math.random() * 200)),\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n          border-right: \"1px solid var(--palette-gray-6)\"\n          overflow: scroll\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n            - container.top\n            - container.right\n            - container.bottom\n            - container.left\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM.split(\".\")[0]} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM.split(\".\")[0] %>\n                        text: <% ITEM %>\n                        direction: <% ITEM.split(\".\").pop() %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            allowEdgeToArea: true\n            dragBehavior: lasso\n            layoutOptions:\n              snap:\n                # grid: true\n                object: true\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        (CTX.activeTarget?.type === \"multi\"\n                          ? CTX.activeTarget.targets\n                          : CTX.activeTarget\n                          ? [CTX.activeTarget]\n                          : []\n                        ).some((target) => (\n                          target.type === \"node\" && target.id === DATA.node.id\n                        ))\n                          ? \"highlighted\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n              - if: <% !DATA.edge.data?.virtual %>\n                dotted: true\n                showStartArrow: true\n                markers:\n                  - placement: end\n                    type: circle\n                  - placement: start\n                    type: arrow\n            cells: <% CTX.initialCells %>\n            lineConnector: true\n            lineSettings:\n              type: polyline\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cells.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.length} cells` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cells.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.length} cells?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            edge.add:\n              action: message.info\n              args:\n                - |\n                  <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n            edge.view.change:\n              action: message.info\n              args:\n                - |\n                  <% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            node.container.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          },\n          {\n            text: \"Remove\",\n            event: \"remove\"\n          }\n        ]\n      %>\n  events:\n    remove:\n      target: eo-draw-canvas\n      method: updateCells\n      args:\n        - |\n          <%\n            CTX.initialCells.filter((cell) =>\n              !(cell.type === \"edge\" && CTX.targetCell.source === cell.source && CTX.targetCell.target === cell.target)\n            )\n          %>\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          - target: eo-draw-canvas\n            method: addEdge\n            args:\n              - source: <% EVENT.detail.source.id %>\n                target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div\n#     style=\"\n#       width: 180px;\n#       display: flex;\n#       flex-direction: column;\n#       gap: 1em;\n#       border-right: 1px solid var(--palette-gray-6);\n#       overflow: scroll;\n#     \"\n#   >\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       allow-edge-to-area\n#       drag-behavior=\"lasso\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     },\n#     {\n#       text: \"Remove\",\n#       event: \"remove\"\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: '<% ITEM.split(\".\")[0] %>',\n#       text: \"<% ITEM %>\",\n#       direction: '<% ITEM.split(\".\").pop() %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.layoutOptions = {\n#     snap: {\n#       object: true,\n#     },\n#   };\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  (CTX.activeTarget?.type === \"multi\"\\n    ? CTX.activeTarget.targets\\n    : CTX.activeTarget\\n    ? [CTX.activeTarget]\\n    : []\\n  ).some((target) => (\\n    target.type === \"node\" && target.id === DATA.node.id\\n  ))\\n    ? \"highlighted\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#     {\n#       if: \"<% !DATA.edge.data?.virtual %>\",\n#       dotted: true,\n#       showStartArrow: true,\n#       markers: [\n#         {\n#           placement: \"end\",\n#           type: \"circle\",\n#         },\n#         {\n#           placement: \"start\",\n#           type: \"arrow\",\n#         },\n#       ],\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.lineConnector = true;\n#   brick_6.lineSettings = {\n#     type: \"polyline\",\n#   };\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cells.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `You just moved ${EVENT.detail.length} cells` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cells.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `You wanna delete ${EVENT.detail.length} cells?` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"edge.add\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"edge.view.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"node.container.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"remove\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.filter((cell) =>\\n    !(cell.type === \"edge\" && CTX.targetCell.source === cell.source && CTX.targetCell.target === cell.target)\\n  )\\n%>\\n'\n#     );\n#   });\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Line labels\n\n设置连线文字。\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      flexDirection: column\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n              description: \"X->Y\",\n              placement: \"end\",\n              view: {\n                type: \"polyline\"\n              }\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\"\n            },\n            {\n              type: \"node\",\n              id: \"X\",\n              data: {\n                name: \"Node X\",\n              },\n              view: {\n                x: 100,\n                y: 100,\n                width: 60,\n                height: 60,\n              }\n            },\n            {\n              type: \"node\",\n              id: \"Y\",\n              data: {\n                name: \"Node Y\",\n              },\n              view: {\n                x: 0,\n                y: 300,\n                width: 60,\n                height: 60,\n              }\n            },\n            {\n              type: \"node\",\n              id: \"Z\",\n              data: {\n                name: \"Node Z\",\n              },\n              view: {\n                x: 300,\n                y: 200,\n                width: 60,\n                height: 60,\n              }\n            },\n          ]\n        %>\n    - name: activeTarget\n    - name: scale\n      value: 1\n  children:\n    - brick: eo-draw-canvas\n      properties:\n        style:\n          width: 100%\n          height: 100%\n        activeTarget: <%= CTX.activeTarget %>\n        fadeUnrelatedCells: true\n        dragBehavior: lasso\n        layoutOptions:\n          snap:\n            object: true\n        defaultNodeSize: [60, 60]\n        defaultNodeBricks:\n          - useBrick:\n              brick: diagram.experimental-node\n              properties:\n                textContent: <% `Node ${DATA.node.id}` %>\n                status: |\n                  <%=\n                    (CTX.activeTarget?.type === \"multi\"\n                      ? CTX.activeTarget.targets\n                      : CTX.activeTarget\n                      ? [CTX.activeTarget]\n                      : []\n                    ).some((target) => (\n                      target.type === \"node\" && target.id === DATA.node.id\n                    ))\n                      ? \"highlighted\"\n                      : \"default\"\n                  %>\n        cells: <% CTX.initialCells %>\n        lineConnector: true\n        defaultEdgeLines:\n          - callLabelOnDoubleClick: enableEditing\n            label:\n              placement: <% DATA.edge.placement %>\n              offset: 10\n              useBrick:\n                brick: diagram.editable-label\n                properties:\n                  label: <% DATA.edge.description %>\n                  type: line\n                  # Set `readOnly: true` for eo-display-canvas\n                  # readOnly: true\n                events:\n                  label.change:\n                    # Make sure only trigger update if label actually changed\n                    if: <% (DATA.edge.description || \"\") !== (EVENT.detail || \"\") %>\n                    action: context.replace\n                    args:\n                      - initialCells\n                      - |-\n                        <%\n                          CTX.initialCells.map((edge) =>\n                            edge.type === \"edge\" &&\n                            edge.source === DATA.edge.source &&\n                            edge.target === DATA.edge.target\n                              ? { ...edge, description: EVENT.detail }\n                              : edge\n                          )\n                        %>\n      events:\n        activeTarget.change:\n          action: context.replace\n          args:\n            - activeTarget\n            - <% EVENT.detail %>\n        cell.delete:\n          action: message.warn\n          args:\n            - |\n              <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n        scale.change:\n          action: context.replace\n          args:\n            - scale\n            - <% EVENT.detail %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; height: 600px; gap: 1em\">\n#   <eo-draw-canvas\n#     style=\"width: 100%; height: 100%\"\n#     fade-unrelated-cells\n#     drag-behavior=\"lasso\"\n#     id=\"brick-1\"\n#   ></eo-draw-canvas>\n# </div>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_1.layoutOptions = {\n#     snap: {\n#       object: true,\n#     },\n#   };\n#   brick_1.defaultNodeSize = [60, 60];\n#   brick_1.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  (CTX.activeTarget?.type === \"multi\"\\n    ? CTX.activeTarget.targets\\n    : CTX.activeTarget\\n    ? [CTX.activeTarget]\\n    : []\\n  ).some((target) => (\\n    target.type === \"node\" && target.id === DATA.node.id\\n  ))\\n    ? \"highlighted\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.cells = \"<% CTX.initialCells %>\";\n#   brick_1.lineConnector = true;\n#   brick_1.defaultEdgeLines = [\n#     {\n#       callLabelOnDoubleClick: \"enableEditing\",\n#       label: {\n#         placement: \"<% DATA.edge.placement %>\",\n#         offset: 10,\n#         useBrick: {\n#           brick: \"diagram.editable-label\",\n#           properties: {\n#             label: \"<% DATA.edge.description %>\",\n#             type: \"line\",\n#           },\n#           events: {\n#             \"label.change\": {\n#               if: '<% (DATA.edge.description || \"\") !== (EVENT.detail || \"\") %>',\n#               action: \"context.replace\",\n#               args: [\n#                 \"initialCells\",\n#                 '<%\\n  CTX.initialCells.map((edge) =>\\n    edge.type === \"edge\" &&\\n    edge.source === DATA.edge.source &&\\n    edge.target === DATA.edge.target\\n      ? { ...edge, description: EVENT.detail }\\n      : edge\\n  )\\n%>',\n#               ],\n#             },\n#           },\n#         },\n#       },\n#     },\n#   ];\n#   brick_1.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_1.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_1.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# </script>\n# \n```\n\n### Line settings\n\n设置属性 `lineSettings` 来调整新的连线的样式，例如使用折线或直线。注意，该设置不影响已有的 edge 的连线样式。\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      flexDirection: column\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"node\",\n              id: \"X\",\n              data: {\n                name: \"Node X\",\n              },\n              view: {\n                x: 100,\n                y: 100,\n                width: 60,\n                height: 60,\n              }\n            },\n            {\n              type: \"node\",\n              id: \"Y\",\n              data: {\n                name: \"Node Y\",\n              },\n              view: {\n                x: 0,\n                y: 300,\n                width: 60,\n                height: 60,\n              }\n            },\n            {\n              type: \"node\",\n              id: \"Z\",\n              data: {\n                name: \"Node Z\",\n              },\n              view: {\n                x: 300,\n                y: 200,\n                width: 60,\n                height: 60,\n              }\n            },\n          ]\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n    - name: lineType\n      value: polyline\n  children:\n    - brick: div\n      children:\n        - brick: eo-radio\n          properties:\n            type: button\n            value: polyline\n            options:\n              - polyline\n              - curve\n              - straight\n          events:\n            change:\n              action: context.replace\n              args:\n                - lineType\n                - <% EVENT.detail.value %>\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minHeight: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            dragBehavior: lasso\n            layoutOptions:\n              snap:\n                object: true\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        (CTX.activeTarget?.type === \"multi\"\n                          ? CTX.activeTarget.targets\n                          : CTX.activeTarget\n                          ? [CTX.activeTarget]\n                          : []\n                        ).some((target) => (\n                          target.type === \"node\" && target.id === DATA.node.id\n                        ))\n                          ? \"highlighted\"\n                          : \"default\"\n                      %>\n            cells: <% CTX.initialCells %>\n            lineConnector: true\n            lineSettings: |\n              <%= { type: CTX.lineType } %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            edge.add:\n              action: message.info\n              args:\n                - |\n                  <% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\n            edge.view.change:\n              action: message.info\n              args:\n                - |\n                  <% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          - target: eo-draw-canvas\n            method: addEdge\n            args:\n              - source: <% EVENT.detail.source.id %>\n                target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; flex-direction: column; height: 600px; gap: 1em\">\n#   <div>\n#     <eo-radio\n#       type=\"button\"\n#       value=\"polyline\"\n#       options=\"polyline,curve,straight\"\n#       id=\"brick-1\"\n#     ></eo-radio>\n#   </div>\n#   <div style=\"flex: 1; min-height: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       drag-behavior=\"lasso\"\n#       id=\"brick-2\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   ([\"node\"].includes(CTX.targetCell?.type )||CTX.targetCell?.decorator==\"area\") ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-3\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_2.layoutOptions = {\n#     snap: {\n#       object: true,\n#     },\n#   };\n#   brick_2.defaultNodeSize = [60, 60];\n#   brick_2.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  (CTX.activeTarget?.type === \"multi\"\\n    ? CTX.activeTarget.targets\\n    : CTX.activeTarget\\n    ? [CTX.activeTarget]\\n    : []\\n  ).some((target) => (\\n    target.type === \"node\" && target.id === DATA.node.id\\n  ))\\n    ? \"highlighted\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_2.cells = \"<% CTX.initialCells %>\";\n#   brick_2.lineConnector = true;\n#   brick_2.lineSettings = \"<%= { type: CTX.lineType } %>\\n\";\n#   brick_2.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_2.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_2.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_2.addEventListener(\"edge.add\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Added an nice edge: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_2.addEventListener(\"edge.view.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% `Edge view changed: ${JSON.stringify(EVENT.detail)}` %>\\n\",\n#     });\n#   });\n#   brick_2.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Force layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n             {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"X\",\"Y\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          ).concat([\n            {\n              type: \"decorator\",\n              id: \"text-1\",\n              decorator: \"text\",\n              view: {\n                x: 100,\n                y: 120,\n                width: 100,\n                height: 20,\n                text: \"Hello!\"\n              },\n            },\n          ])\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM %>\n                        text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          # action: message.success\n                          # args:\n                          #   - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n    - brick: div\n      properties:\n        style:\n          flex: 1\n          minWidth: 0\n      children:\n        - brick: eo-draw-canvas\n          properties:\n            style:\n              width: 100%\n              height: 100%\n            activeTarget: <%= CTX.activeTarget %>\n            fadeUnrelatedCells: true\n            layout: force\n            # Initial nodes only\n            defaultNodeSize: [60, 60]\n            defaultNodeBricks:\n              - useBrick:\n                  brick: diagram.experimental-node\n                  properties:\n                    textContent: <% `Node ${DATA.node.id}` %>\n                    status: |\n                      <%=\n                        CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\n                          ? \"highlighted\"\n                          // : CTX.unrelated.some(n =>\n                          //     n.type === \"node\" && n.id === DATA.node.id\n                          //   )\n                          // ? \"faded\"\n                          : \"default\"\n                      %>\n            defaultEdgeLines:\n              - if: <% DATA.edge.data?.virtual %>\n                dashed: true\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cell.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        CTX.targetCell?.type === \"node\" ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"force\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   CTX.targetCell?.type === \"node\" ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: \"<% ITEM %>\",\n#       text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       if: \"<% DATA.edge.data?.virtual %>\",\n#       dashed: true,\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cell.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n\n### Dagre layout\n\n```yaml preview minHeight=\"600px\"\n- brick: div\n  properties:\n    style:\n      display: flex\n      height: 600px\n      gap: 1em\n  context:\n    - name: initialCells\n      value: |\n        <%\n          [\n            {\n              type: \"decorator\",\n              id: \"area-1\",\n              decorator: \"area\",\n              view: {\n                x: 10,\n                y: 20,\n                width: 400,\n                height: 300,\n              },\n            },\n            {\n              type: \"decorator\",\n              id: \"container-1\",\n              decorator: \"container\",\n              view: {\n               x: 50,\n                y: 400,\n                width: 280,\n                height: 120,\n                direction: \"top\",\n                text: \" 上层服务\"\n              },\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Y\",\n            },\n            {\n              type: \"edge\",\n              source: \"X\",\n              target: \"Z\",\n              data: {\n                virtual: true,\n              }\n            },\n            {\n              type: \"edge\",\n              source: \"Z\",\n              target: \"W\",\n            },\n          ].concat(\n            [\"X\", \"Y\", \"Z\", \"W\"].map((id) => ({\n              type: \"node\",\n              id,\n              containerId: [\"W\",\"Z\"].includes(id)?\"container-1\":undefined,\n              data: {\n                name: `Node ${id}`,\n              },\n              view: {\n                width: 60,\n                height: 60,\n              }\n            }))\n          )\n        %>\n    - name: dragging\n    - name: activeTarget\n    - name: targetCell\n    - name: scale\n      value: 1\n  children:\n    - brick: div\n      properties:\n        style:\n          width: 180px\n          display: flex\n          flexDirection: column\n          gap: 1em\n      children:\n        - brick: eo-button\n          properties:\n            textContent: Add random nodes\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addNodes\n              args:\n                - |\n                  <%\n                    ((...seeds) => seeds.map((seed) => ({\n                      id: seed,\n                      data: {\n                        name: String(seed),\n                      },\n                    })))(\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                      Math.round(Math.random() * 1e6),\n                    )\n                  %>\n              callback:\n                success:\n                  action: console.log\n                  args:\n                    - Added nodes\n                    - <% EVENT.detail %>\n        - brick: eo-button\n          properties:\n            textContent: \"Add edge: Y => Z\"\n          events:\n            click:\n              target: eo-draw-canvas\n              method: addEdge\n              args:\n                - source: Y\n                  target: Z\n                  data:\n                    virtual: true\n        - brick: :forEach\n          dataSource:\n            - X\n            - Y\n          children:\n            - brick: eo-button\n              properties:\n                textContent: <% `Add nodes below ${ITEM}` %>\n              events:\n                click:\n                  target: eo-draw-canvas\n                  method: updateCells\n                  args:\n                    - |\n                      <%\n                        CTX.initialCells.concat([\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"U\",\n                          },\n                          {\n                            type: \"edge\",\n                            source: ITEM,\n                            target: \"V\",\n                          },\n                          {\n                            type: \"node\",\n                            id: \"U\",\n                            data: {\n                              name: \"U\"\n                            }\n                          },\n                          {\n                            type: \"node\",\n                            id: \"V\",\n                            data: {\n                              name: \"V\"\n                            }\n                          },\n                        ])\n                      %>\n                    - reason: add-related-nodes\n                      parent: <% ITEM %>\n                  callback:\n                    success:\n                      action: console.log\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag nodes below\n        - brick: :forEach\n          dataSource: |\n            <%\n              [\"A\", \"B\", \"C\"].map((id) => ({\n                type: \"node\",\n                id,\n                data: {\n                  name: `Node ${id}`,\n                },\n              }))\n            %>\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% ITEM.data.name %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, ...ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropNode\n                    args:\n                      - position: <% EVENT.detail %>\n                        id: <% ITEM.id %>\n                        data: <% ITEM.data %>\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        then:\n                          action: message.success\n                          args:\n                            - <% JSON.stringify(EVENT.detail) %>\n                        else:\n                          action: message.warn\n                          args:\n                            - Unexpected drop position\n        - brick: hr\n          properties:\n            style:\n              width: 100%\n        - brick: h3\n          properties:\n            textContent: Drag decorators below\n        - brick: :forEach\n          dataSource:\n            - area\n            - text\n          children:\n            - brick: diagram.experimental-node\n              properties:\n                textContent: <% _.upperFirst(ITEM) %>\n                usage: library\n              events:\n                drag.move:\n                  action: context.replace\n                  args:\n                    - dragging\n                    - |\n                      <% {position: EVENT.detail, type: \"decorator\", decorator: ITEM} %>\n                drag.end:\n                  - action: context.replace\n                    args:\n                      - dragging\n                      - null\n                  - target: eo-draw-canvas\n                    method: dropDecorator\n                    args:\n                      - position: <% EVENT.detail %>\n                        decorator: <% ITEM %>\n                        text: '<% ITEM === \"text\" ? \"Text\" : undefined %>'\n                    callback:\n                      success:\n                        if: <% EVENT.detail %>\n                        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              - dashed: <% !!DATA.edge.data?.virtual %>\n                strokeColor: var(--palette-blue-6)\n                overrides:\n                  active:\n                    strokeWidth: <% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\n                    strokeColor: cyan\n            cells: <% CTX.initialCells %>\n          events:\n            activeTarget.change:\n              action: context.replace\n              args:\n                - activeTarget\n                - <% EVENT.detail %>\n            cell.move:\n              action: message.info\n              args:\n                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\n            cell.resize:\n              action: message.info\n              args:\n                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\n            cell.delete:\n              action: message.warn\n              args:\n                - |\n                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\n            cell.contextmenu:\n              - target: eo-context-menu\n                method: open\n                args:\n                  - position:\n                      - <% EVENT.detail.clientX %>\n                      - <% EVENT.detail.clientY %>\n              - action: context.replace\n                args:\n                  - targetCell\n                  - <% EVENT.detail.cell %>\n            decorator.text.change:\n              action: message.info\n              args:\n                - <% JSON.stringify(EVENT.detail) %>\n            scale.change:\n              action: context.replace\n              args:\n                - scale\n                - <% EVENT.detail %>\n- brick: diagram.experimental-node\n  properties:\n    usage: dragging\n    textContent: |\n      <%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\" ? \"Text\" : null) : CTX.dragging?.data.name %>\n    decorator: |\n      <%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %>\n    style: |\n      <%=\n        {\n          left: `${CTX.dragging?.position[0]}px`,\n          top: `${CTX.dragging?.position[1]}px`,\n          transform: `scale(${CTX.scale})`,\n          transformOrigin: \"0 0\",\n          padding: CTX.dragging?.decorator === \"text\" ? \"0.5em\" : \"0\"\n        }\n      %>\n    hidden: <%= !CTX.dragging %>\n- brick: eo-context-menu\n  properties:\n    actions: |\n      <%=\n        CTX.targetCell?.type === \"node\" ? [\n          {\n            text: \"添加边\",\n            event: \"add-edge\",\n          }\n        ] : [\n          {\n            text: `Test ${CTX.targetCell?.type}`,\n            event: `test-${CTX.targetCell?.type}`,\n          }\n        ]\n      %>\n  events:\n    add-edge:\n      target: eo-draw-canvas\n      method: manuallyConnectNodes\n      args:\n        - <% CTX.targetCell.id %>\n      callback:\n        success:\n          target: eo-draw-canvas\n          method: addEdge\n          args:\n            - source: <% EVENT.detail.source.id %>\n              target: <% EVENT.detail.target.id %>\n# -- YAML DELIMITER (1nbbm8) --\n# <div style=\"display: flex; height: 600px; gap: 1em\">\n#   <div style=\"width: 180px; display: flex; flex-direction: column; gap: 1em\">\n#     <eo-button id=\"brick-1\">Add random nodes</eo-button>\n#     <eo-button id=\"brick-2\">Add edge: Y =&gt; Z</eo-button>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag nodes below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#     <hr style=\"width: 100%\" />\n#     <h3>Drag decorators below</h3>\n#     <!-- WARN: \":forEach\" is not supported in HTML mode, please try YAML. -->\n#   </div>\n#   <div style=\"flex: 1; min-width: 0\">\n#     <eo-draw-canvas\n#       style=\"width: 100%; height: 100%\"\n#       fade-unrelated-cells\n#       layout=\"dagre\"\n#       id=\"brick-6\"\n#     ></eo-draw-canvas>\n#   </div>\n# </div>\n# <diagram.experimental-node\n#   usage=\"dragging\"\n#   decorator='&lt;%= CTX.dragging?.type === \"decorator\" ? CTX.dragging.decorator : null %&gt;\n# '\n#   hidden=\"&lt;%= !CTX.dragging %&gt;\"\n# >\n#   &lt;%= CTX.dragging?.type === \"decorator\" ? (CTX.dragging.decorator === \"text\"\n#   ? \"Text\" : null) : CTX.dragging?.data.name %&gt;\n# </diagram.experimental-node>\n# <eo-context-menu\n#   actions='&lt;%=\n#   CTX.targetCell?.type === \"node\" ? [\n#     {\n#       text: \"添加边\",\n#       event: \"add-edge\",\n#     }\n#   ] : [\n#     {\n#       text: `Test ${CTX.targetCell?.type}`,\n#       event: `test-${CTX.targetCell?.type}`,\n#     }\n#   ]\n# %&gt;\n# '\n#   id=\"brick-7\"\n# ></eo-context-menu>\n# \n# <script>\n#   const brick_1 = document.getElementById(\"brick-1\");\n#   brick_1.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<%\\n  ((...seeds) => seeds.map((seed) => ({\\n    id: seed,\\n    data: {\\n      name: String(seed),\\n    },\\n  })))(\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n    Math.round(Math.random() * 1e6),\\n  )\\n%>\\n\"\n#     );\n#   });\n# \n#   const brick_2 = document.getElementById(\"brick-2\");\n#   brick_2.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.addEdge({ source: \"Y\", target: \"Z\", data: { virtual: true } });\n#   });\n# \n#   const brick_3 = document.getElementById(\"brick-3\");\n#   brick_3.addEventListener(\"click\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.updateCells(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       '<%\\n  CTX.initialCells.concat([\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"U\",\\n    },\\n    {\\n      type: \"edge\",\\n      source: ITEM,\\n      target: \"V\",\\n    },\\n    {\\n      type: \"node\",\\n      id: \"U\",\\n      data: {\\n        name: \"U\"\\n      }\\n    },\\n    {\\n      type: \"node\",\\n      id: \"V\",\\n      data: {\\n        name: \"V\"\\n      }\\n    },\\n  ])\\n%>\\n',\n#       { reason: \"add-related-nodes\", parent: \"<% ITEM %>\" }\n#     );\n#   });\n# \n#   const brick_4 = document.getElementById(\"brick-4\");\n#   brick_4.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_4.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropNode({\n#       position: \"<% EVENT.detail %>\",\n#       id: \"<% ITEM.id %>\",\n#       data: \"<% ITEM.data %>\",\n#     });\n#   });\n# \n#   const brick_5 = document.getElementById(\"brick-5\");\n#   brick_5.addEventListener(\"drag.move\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_5.addEventListener(\"drag.end\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.dropDecorator({\n#       position: \"<% EVENT.detail %>\",\n#       decorator: \"<% ITEM %>\",\n#       text: '<% ITEM === \"text\" ? \"Text\" : undefined %>',\n#     });\n#   });\n# \n#   const brick_6 = document.getElementById(\"brick-6\");\n#   brick_6.activeTarget = \"<%= CTX.activeTarget %>\";\n#   brick_6.defaultNodeSize = [60, 60];\n#   brick_6.defaultNodeBricks = [\n#     {\n#       useBrick: {\n#         brick: \"diagram.experimental-node\",\n#         properties: {\n#           textContent: \"<% `Node ${DATA.node.id}` %>\",\n#           status:\n#             '<%=\\n  CTX.activeTarget?.type === \"node\" && CTX.activeTarget.id === DATA.node.id\\n    ? \"highlighted\"\\n    // : CTX.unrelated.some(n =>\\n    //     n.type === \"node\" && n.id === DATA.node.id\\n    //   )\\n    // ? \"faded\"\\n    : \"default\"\\n%>\\n',\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.defaultEdgeLines = [\n#     {\n#       dashed: \"<% !!DATA.edge.data?.virtual %>\",\n#       strokeColor: \"var(--palette-blue-6)\",\n#       overrides: {\n#         active: {\n#           strokeWidth: \"<% 2 * (DATA.edge?.data?.strokeWidth ?? 1) %>\",\n#           strokeColor: \"cyan\",\n#         },\n#       },\n#     },\n#   ];\n#   brick_6.cells = \"<% CTX.initialCells %>\";\n#   brick_6.addEventListener(\"activeTarget.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"cell.move\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.resize\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         \"<% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.delete\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"warn\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message:\n#         '<% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === \"edge\" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>\\n',\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     const brick = document.querySelector(\"eo-context-menu\");\n#     brick.open({\n#       position: [\"<% EVENT.detail.clientX %>\", \"<% EVENT.detail.clientY %>\"],\n#     });\n#   });\n#   brick_6.addEventListener(\"cell.contextmenu\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n#   brick_6.addEventListener(\"decorator.text.change\", (e) => {\n#     const message = document.createElement(\"basic.show-notification\");\n#     message.resolve({\n#       type: \"info\",\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       message: \"<% JSON.stringify(EVENT.detail) %>\",\n#     });\n#   });\n#   brick_6.addEventListener(\"scale.change\", (e) => {\n#     // WARN: encountered incompatible event handlers in HTML mode, please try YAML.\n#   });\n# \n#   const brick_7 = document.getElementById(\"brick-7\");\n#   brick_7.addEventListener(\"add-edge\", (e) => {\n#     const brick = document.querySelector(\"eo-draw-canvas\");\n#     brick.manuallyConnectNodes(\n#       /* WARN: incompatible expressions in HTML, please try YAML: */\n#       \"<% CTX.targetCell.id %>\"\n#     );\n#   });\n# </script>\n# \n```\n"
   }
 }

package/dist/index.d0512eac.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";var e,t,r,n,a,o,l,i,s,c,d,u,f,h,p,m,b,v,g,x,y,P,w,k={3328:(e,t,r)=>{var n={"./eo-diagram":()=>Promise.all([r.e(7920),r.e(8769),r.e(1030),r.e(1123),r.e(9006),r.e(6477),r.e(2716),r.e(8436),r.e(1361),r.e(3233),r.e(3039)]).then((()=>()=>r(1508))),"./experimental-node":()=>Promise.all([r.e(8769),r.e(1123),r.e(9006),r.e(6477),r.e(4422)]).then((()=>()=>r(5568))),"./eo-display-canvas":()=>Promise.all([r.e(7920),r.e(5670),r.e(8769),r.e(1030),r.e(1123),r.e(2729),r.e(9006),r.e(6477),r.e(9435),r.e(2716),r.e(8436),r.e(9039),r.e(8939),r.e(9823)]).then((()=>()=>r(6094))),"./editable-label":()=>Promise.all([r.e(8769),r.e(1123),r.e(9006),r.e(6477),r.e(6006)]).then((()=>()=>r(947))),"./eo-draw-canvas":()=>Promise.all([r.e(7920),r.e(5670),r.e(8769),r.e(1030),r.e(1123),r.e(2729),r.e(9006),r.e(6477),r.e(9435),r.e(2716),r.e(8436),r.e(9039),r.e(8939)]).then((()=>()=>r(9068)))},a=(e,t)=>(r.R=t,t=r.o(n,e)?n[e]():Promise.resolve().then((()=>{throw new Error('Module "'+e+'" does not exist in container.')})),r.R=void 0,t),o=(e,t)=>{if(r.S){var n="default",a=r.S[n];if(a&&a!==e)throw new Error("Container initialization failed as it has already been initialized with a different share scope");return r.S[n]=e,r.I(n,t)}};r.d(t,{get:()=>a,init:()=>o})}},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:"b0805615",726:"aac643de",871:"2b767f8e",1045:"8709c6b1",1122:"44c2d625",1370:"ff678c2c",1889:"ae5b520e",1940:"d4e8c5b9",2052:"a8ed8891",2277:"83e80fbf",3039:"5c99be44",3144:"94428cca",3171:"ad783275",3233:"0f638ba1",3426:"e3be3a32",3933:"6f63c7d7",4041:"d221940a",4185:"1e71810a",4306:"af11344a",4422:"9b5d8200",4658:"df491375",4837:"177f3660",5250:"d0a6e755",5384:"b76b4b24",5399:"b1b4981d",5552:"b60ebd94",5670:"2d7e3824",6006:"5e1c0352",6314:"096c993f",6519:"4ddc3bd5",6773:"8b791d47",7218:"33e2d012",7304:"3d0757fa",7721:"6ac62398",7733:"a2c42502",7920:"e59e82e7",8436:"107dc714",8939:"2bb4e1d2",8989:"c317f6cd",9039:"bca76220",9515:"4b4e0758",9559:"f28defcc",9823:"8d14e680",9844:"4a3a83f7"}[e]+".js",S.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),S.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="@next-bricks/diagram:",S.l=(r,n,a,o)=>{if(e[r])e[r].push(n);else{var l,i;if(void 0!==a)for(var s=document.getElementsByTagName("script"),c=0;c<s.length;c++){var d=s[c];if(d.getAttribute("src")==r||d.getAttribute("data-webpack")==t+a){l=d;break}}l||(i=!0,(l=document.createElement("script")).charset="utf-8",l.timeout=120,S.nc&&l.setAttribute("nonce",S.nc),l.setAttribute("data-webpack",t+a),l.src=r),e[r]=[n];var u=(t,n)=>{l.onerror=l.onload=null,clearTimeout(f);var a=e[r];if(delete e[r],l.parentNode&&l.parentNode.removeChild(l),a&&a.forEach((e=>e(n))),t)return t(n)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:l}),12e4);l.onerror=u.bind(null,l.onerror),l.onload=u.bind(null,l.onload),i&&document.head.appendChild(l)}},S.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},S.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{S.S={};var e={},t={};S.I=(r,n)=>{n||(n=[]);var a=t[r];if(a||(a=t[r]={}),!(n.indexOf(a)>=0)){if(n.push(a),e[r])return e[r];S.o(S.S,r)||(S.S[r]={});var o=S.S[r],l="@next-bricks/diagram",i=(e,t,r,n)=>{var a=o[e]=o[e]||{},i=a[t];(!i||!i.loaded&&(!n!=!i.eager?n:l>i.from))&&(a[t]={get:r,from:l,eager:!!n})},s=[];return"default"===r&&(i("@babel/parser","7.25.3",(()=>S.e(6773).then((()=>()=>S(6773))))),i("@easyops-cn/brick-next-pipes","0.7.1",(()=>Promise.all([S.e(4306),S.e(1030),S.e(1916),S.e(5310)]).then((()=>()=>S(4306))))),i("@next-core/cook","2.5.6",(()=>Promise.all([S.e(1122),S.e(580)]).then((()=>()=>S(1122))))),i("@next-core/element","1.2.16",(()=>S.e(1045).then((()=>()=>S(1045))))),i("@next-core/http","1.2.11",(()=>S.e(8989).then((()=>()=>S(8989))))),i("@next-core/i18n","1.0.73",(()=>Promise.all([S.e(2729),S.e(3324),S.e(671),S.e(5552)]).then((()=>()=>S(5552))))),i("@next-core/inject","1.0.51",(()=>Promise.all([S.e(1030),S.e(9933),S.e(2277)]).then((()=>()=>S(2277))))),i("@next-core/loader","1.6.14",(()=>S.e(5399).then((()=>()=>S(7780))))),i("@next-core/pipes","2.0.30",(()=>S.e(6519).then((()=>()=>S(6519))))),i("@next-core/react-element","1.0.35",(()=>Promise.all([S.e(8769),S.e(1123),S.e(9435),S.e(114)]).then((()=>()=>S(114))))),i("@next-core/react-runtime","1.7.9",(()=>Promise.all([S.e(8769),S.e(1030),S.e(9006),S.e(2716),S.e(4837)]).then((()=>()=>S(4837))))),i("@next-core/runtime","1.59.2",(()=>Promise.all([S.e(4185),S.e(1030),S.e(2729),S.e(1916),S.e(1361),S.e(3324),S.e(1321),S.e(3943)]).then((()=>()=>S(4185))))),i("@next-core/supply","2.3.3",(()=>Promise.all([S.e(1030),S.e(1916),S.e(9933),S.e(9559)]).then((()=>()=>S(9559))))),i("@next-core/theme","1.5.4",(()=>Promise.all([S.e(1889),S.e(2052)]).then((()=>()=>S(1889))))),i("@next-core/utils/general","1.7.31",(()=>S.e(871).then((()=>()=>S(871))))),i("@next-core/utils/storyboard","1.7.31",(()=>Promise.all([S.e(2729),S.e(1321),S.e(3933)]).then((()=>()=>S(3933))))),i("history","4.10.1",(()=>S.e(5384).then((()=>()=>S(5384))))),i("i18next-browser-languagedetector","7.2.2",(()=>S.e(726).then((()=>()=>S(726))))),i("i18next","22.5.1",(()=>S.e(7304).then((()=>()=>S(7304))))),i("js-yaml","3.14.1",(()=>S.e(9515).then((()=>()=>S(9515))))),i("lodash","4.17.21",(()=>S.e(5250).then((()=>()=>S(5250))))),i("moment/locale/zh-cn.js","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),i("moment","2.30.1",(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),i("react-dom","0.0.0-experimental-ee8509801-20230117",(()=>Promise.all([S.e(3144),S.e(8769)]).then((()=>()=>S(3144))))),i("react","0.0.0-experimental-ee8509801-20230117",(()=>S.e(4041).then((()=>()=>S(4041)))))),e[r]=s.length?Promise.all(s).then((()=>e[r]=1)):1}}})(),(()=>{var e;S.g.importScripts&&(e=S.g.location+"");var t=S.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var n=r.length-1;n>-1&&(!e||!/^http(s?):/.test(e));)e=r[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),S.p=e})(),r=e=>{var t=e=>e.split(".").map((e=>+e==e?+e:e)),r=/^([^-+]+)?(?:-([^+]+))?(?:\+(.+))?$/.exec(e),n=r[1]?t(r[1]):[];return r[2]&&(n.length++,n.push.apply(n,t(r[2]))),r[3]&&(n.push([]),n.push.apply(n,t(r[3]))),n},n=(e,t)=>{e=r(e),t=r(t);for(var n=0;;){if(n>=e.length)return n<t.length&&"u"!=(typeof t[n])[0];var a=e[n],o=(typeof a)[0];if(n>=t.length)return"u"==o;var l=t[n],i=(typeof l)[0];if(o!=i)return"o"==o&&"n"==i||"s"==i||"u"==o;if("o"!=o&&"u"!=o&&a!=l)return a<l;n++}},a=e=>{var t=e[0],r="";if(1===e.length)return"*";if(t+.5){r+=0==t?">=":-1==t?"<":1==t?"^":2==t?"~":t>0?"=":"!=";for(var n=1,o=1;o<e.length;o++)n--,r+="u"==(typeof(i=e[o]))[0]?"-":(n>0?".":"")+(n=2,i);return r}var l=[];for(o=1;o<e.length;o++){var i=e[o];l.push(0===i?"not("+s()+")":1===i?"("+s()+" || "+s()+")":2===i?l.pop()+" "+l.pop():a(i))}return s();function s(){return l.pop().replace(/^\((.+)\)$/,"$1")}},o=(e,t)=>{if(0 in e){t=r(t);var n=e[0],a=n<0;a&&(n=-n-1);for(var l=0,i=1,s=!0;;i++,l++){var c,d,u=i<e.length?(typeof e[i])[0]:"";if(l>=t.length||"o"==(d=(typeof(c=t[l]))[0]))return!s||("u"==u?i>n&&!a:""==u!=a);if("u"==d){if(!s||"u"!=u)return!1}else if(s)if(u==d)if(i<=n){if(c!=e[i])return!1}else{if(a?c>e[i]:c<e[i])return!1;c!=e[i]&&(s=!1)}else if("s"!=u&&"n"!=u){if(a||i<=n)return!1;s=!1,i--}else{if(i<=n||d<u!=a)return!1;s=!1}else"s"!=u&&"n"!=u&&(s=!1,i--)}}var f=[],h=f.pop.bind(f);for(l=1;l<e.length;l++){var p=e[l];f.push(1==p?h()|h():2==p?h()&h():p?o(p,t):!h())}return!!h()},l=(e,t)=>e&&S.o(e,t),i=e=>(e.loaded=1,e.get()),s=e=>Object.keys(e).reduce(((t,r)=>(e[r].eager&&(t[r]=e[r]),t)),{}),c=(e,t,r,a)=>{var l=a?s(e[t]):e[t];return(t=Object.keys(l).reduce(((e,t)=>!o(r,t)||e&&!n(e,t)?e:t),0))&&l[t]},d=(e,t,r)=>{var a=r?s(e[t]):e[t];return Object.keys(a).reduce(((e,t)=>!e||!a[e].loaded&&n(e,t)?t:e),0)},u=(e,t,r,n)=>"Unsatisfied version "+r+" from "+(r&&e[t][r].from)+" of shared singleton module "+t+" (required "+a(n)+")",f=(e,t,r,n,o)=>{var l=e[r];return"No satisfying version ("+a(n)+")"+(o?" for eager consumption":"")+" of shared module "+r+" found in shared scope "+t+".\nAvailable versions: "+Object.keys(l).map((e=>e+" from "+l[e].from)).join(", ")},h=e=>{throw new Error(e)},p=e=>{"undefined"!=typeof console&&console.warn&&console.warn(e)},b=(e,t,r)=>r?r():((e,t)=>h("Shared module "+t+" doesn't exist in shared scope "+e))(e,t),v=(m=e=>function(t,r,n,a,o){var l=S.I(t);return l&&l.then&&!n?l.then(e.bind(e,t,S.S[t],r,!1,a,o)):e(t,S.S[t],r,n,a,o)})(((e,t,r,n,a,o)=>{if(!l(t,r))return b(e,r,o);var s=c(t,r,a,n);return s?i(s):o?o():void h(f(t,e,r,a,n))})),g=m(((e,t,r,n,a,s)=>{if(!l(t,r))return b(e,r,s);var c=d(t,r,n);return o(a,c)||p(u(t,r,c,a)),i(t[r][c])})),x={},y={1030:()=>g("default","lodash",!1,[1,4,17,21],(()=>S.e(5250).then((()=>()=>S(5250))))),1916:()=>g("default","moment",!1,[0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(9420))))),5310:()=>g("default","js-yaml",!1,[0],(()=>S.e(9515).then((()=>()=>S(9515))))),580:()=>g("default","@babel/parser",!1,[0],(()=>S.e(6773).then((()=>()=>S(6773))))),2729:()=>g("default","@next-core/utils/general",!1,[1,1,7,31],(()=>S.e(871).then((()=>()=>S(871))))),3324:()=>g("default","@next-core/i18n",!1,[1,1,0,73],(()=>Promise.all([S.e(671),S.e(3171)]).then((()=>()=>S(5552))))),848:()=>g("default","i18next-browser-languagedetector",!1,[0],(()=>S.e(726).then((()=>()=>S(726))))),5630:()=>g("default","i18next",!1,[0],(()=>S.e(7304).then((()=>()=>S(7304))))),9933:()=>g("default","@next-core/pipes",!1,[0],(()=>S.e(6519).then((()=>()=>S(6519))))),8377:()=>g("default","@easyops-cn/brick-next-pipes",!1,[0],(()=>Promise.all([S.e(4306),S.e(1030),S.e(1916),S.e(5310)]).then((()=>()=>S(4306))))),8769:()=>v("default","react",!1,[6,0,0,0,,"experimental-ee8509801-20230117"],(()=>S.e(4041).then((()=>()=>S(4041))))),1123:()=>v("default","@next-core/element",!1,[1,1,2,16],(()=>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))))),9006:()=>v("default","@next-core/react-element",!1,[1,1,0,35],(()=>Promise.all([S.e(1123),S.e(9435),S.e(7733)]).then((()=>()=>S(114))))),2716:()=>g("default","@next-core/runtime",!1,[1,1,59,2],(()=>Promise.all([S.e(4185),S.e(2729),S.e(1916),S.e(1361),S.e(3324),S.e(1321),S.e(3943)]).then((()=>()=>S(4185))))),1361:()=>g("default","@next-core/http",!1,[0],(()=>S.e(1370).then((()=>()=>S(8989))))),1321:()=>g("default","@next-core/cook",!1,[0],(()=>Promise.all([S.e(1122),S.e(580)]).then((()=>()=>S(1122))))),1732:()=>g("default","history",!1,[0],(()=>S.e(5384).then((()=>()=>S(5384))))),1858:()=>g("default","moment/locale/zh-cn.js",!1,[0],(()=>Promise.all([S.e(7721),S.e(9844)]).then((()=>()=>S(1329))))),3995:()=>g("default","@next-core/utils/storyboard",!1,[1,1,7,31],(()=>S.e(6314).then((()=>()=>S(3933))))),4167:()=>g("default","@next-core/supply",!1,[0],(()=>Promise.all([S.e(9933),S.e(1940)]).then((()=>()=>S(9559))))),5599:()=>g("default","@next-core/loader",!1,[0],(()=>S.e(5399).then((()=>()=>S(7780))))),9283:()=>g("default","@next-core/inject",!1,[0],(()=>Promise.all([S.e(9933),S.e(4658)]).then((()=>()=>S(2277))))),6477:()=>g("default","@next-core/theme",!1,[1,1,5,4],(()=>S.e(1889).then((()=>()=>S(1889))))),3848:()=>v("default","@next-core/react-runtime",!1,[1,1,7,9],(()=>S.e(7218).then((()=>()=>S(4837)))))},P={580:[580],671:[848,5630],1030:[1030],1123:[1123],1321:[1321],1361:[1361],1916:[1916],2716:[2716],2729:[2729],3324:[3324],3943:[1732,1858,3995,4167,5599,9283],5310:[5310],6477:[6477],6519:[8377],8436:[3848],8769:[8769],9006:[9006],9435:[9435],9933:[9933]},w={},S.f.consumes=(e,t)=>{S.o(P,e)&&P[e].forEach((e=>{if(S.o(x,e))return t.push(x[e]);if(!w[e]){var r=t=>{x[e]=0,S.m[e]=r=>{delete S.c[e],r.exports=t()}};w[e]=!0;var n=t=>{delete x[e],S.m[e]=r=>{throw delete S.c[e],t}};try{var a=y[e]();a.then?t.push(x[e]=a.then(r).catch(n)):r(a)}catch(e){n(e)}}}))},(()=>{var e={2691:0};S.f.j=(t,r)=>{var n=S.o(e,t)?e[t]:void 0;if(0!==n)if(n)r.push(n[2]);else if(/^(1(030|123|321|361|916)|27(16|29)|9(006|435|933)|3324|3943|5310|580|6477|671|8769)$/.test(t))e[t]=0;else{var a=new Promise(((r,a)=>n=e[t]=[r,a]));r.push(n[2]=a);var o=S.p+S.u(t),l=new Error;S.l(o,(r=>{if(S.o(e,t)&&(0!==(n=e[t])&&(e[t]=void 0),n)){var a=r&&("load"===r.type?"missing":r.type),o=r&&r.target&&r.target.src;l.message="Loading chunk "+t+" failed.\n("+a+": "+o+")",l.name="ChunkLoadError",l.type=a,l.request=o,n[1](l)}}),"chunk-"+t,t)}};var t=(t,r)=>{var n,a,[o,l,i]=r,s=0;if(o.some((t=>0!==e[t]))){for(n in l)S.o(l,n)&&(S.m[n]=l[n]);i&&i(S)}for(t&&t(r);s<o.length;s++)a=o[s],S.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=globalThis.webpackChunk_next_bricks_diagram=globalThis.webpackChunk_next_bricks_diagram||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),S.nc=void 0;var E=S(3328);window["bricks/diagram"]=E})();
+//# sourceMappingURL=index.d0512eac.js.map