@next-bricks/diagram 0.18.0 → 0.20.0

package/docs/eo-draw-canvas.md

@@ -7,297 +7,324 @@
 ### Basic
 
 ```yaml preview minHeight="600px"
-brick: div
-properties:
-  style:
-    display: flex
-    height: 600px
-    gap: 1em
-context:
-  - name: dragging
-  - name: activeTarget
-  - name: targetCell
-children:
-  - brick: div
-    properties:
-      style:
-        width: 180px
-        display: flex
-        flexDirection: column
-        gap: 1em
-    children:
-      - brick: eo-button
-        properties:
-          textContent: Add random nodes
-        events:
-          click:
-            target: eo-draw-canvas
-            method: addNodes
-            args:
-              - |
-                <%
-                  ((...seeds) => seeds.map((seed) => ({
-                    id: seed,
-                    data: {
-                      name: String(seed),
-                    },
-                  })))(
-                    Math.round(Math.random() * 1e6),
-                    Math.round(Math.random() * 1e6),
-                    Math.round(Math.random() * 1e6),
-                  )
-                %>
-            callback:
-              success:
-                action: console.log
-                args:
-                  - Added nodes
-                  - <% EVENT.detail %>
-      - brick: eo-button
-        properties:
-          textContent: "Add edge: Y => Z"
-        events:
-          click:
-            target: eo-draw-canvas
-            method: addEdge
-            args:
-              - source: Y
-                target: Z
-      - brick: hr
-        properties:
-          style:
-            width: 100%
-      - brick: h3
-        properties:
-          textContent: Drag nodes below
-      - brick: :forEach
-        dataSource: |
-          <%
-            ["A", "B", "C"].map((id) => ({
-              type: "node",
-              id,
-              data: {
-                name: `Node ${id}`,
-              },
-            }))
-          %>
-        children:
-          - brick: diagram.experimental-node
-            properties:
-              textContent: <% ITEM.data.name %>
-              usage: library
-            events:
-              drag.move:
-                action: context.replace
-                args:
-                  - dragging
-                  - |
-                    <% {position: EVENT.detail, ...ITEM} %>
-              drag.end:
-                - action: context.replace
-                  args:
-                    - dragging
-                    - null
-                - target: eo-draw-canvas
-                  method: dropNode
+- brick: div
+  properties:
+    style:
+      display: flex
+      height: 600px
+      gap: 1em
+  context:
+    - name: dragging
+    - name: activeTarget
+    - name: targetCell
+    - name: scale
+      value: 1
+  children:
+    - brick: div
+      properties:
+        style:
+          width: 180px
+          display: flex
+          flexDirection: column
+          gap: 1em
+      children:
+        - brick: eo-button
+          properties:
+            textContent: Add random nodes
+          events:
+            click:
+              target: eo-draw-canvas
+              method: addNodes
+              args:
+                - |
+                  <%
+                    ((...seeds) => seeds.map((seed) => ({
+                      id: seed,
+                      data: {
+                        name: String(seed),
+                      },
+                    })))(
+                      Math.round(Math.random() * 1e6),
+                      Math.round(Math.random() * 1e6),
+                      Math.round(Math.random() * 1e6),
+                    )
+                  %>
+              callback:
+                success:
+                  action: console.log
                   args:
-                    - position: <% EVENT.detail %>
-                      id: <% ITEM.id %>
-                      data: <% ITEM.data %>
-                  callback:
-                    success:
-                      if: <% EVENT.detail %>
-                      then:
-                        # action: message.success
-                        # args:
-                        #   - <% JSON.stringify(EVENT.detail) %>
-                      else:
-                        action: message.warn
-                        args:
-                          - Unexpected drop position
-      - brick: hr
-        properties:
-          style:
-            width: 100%
-      - brick: h3
-        properties:
-          textContent: Drag decorators below
-      - brick: :forEach
-        dataSource:
-          - area
-          - text
-        children:
-          - brick: diagram.experimental-node
-            properties:
-              textContent: <% _.upperFirst(ITEM) %>
-              usage: library
-            events:
-              drag.move:
-                action: context.replace
-                args:
-                  - dragging
-                  - |
-                    <% {position: EVENT.detail, type: "decorator", decorator: ITEM} %>
-              drag.end:
-                - action: context.replace
+                    - Added nodes
+                    - <% EVENT.detail %>
+        - brick: eo-button
+          properties:
+            textContent: "Add edge: Y => Z"
+          events:
+            click:
+              target: eo-draw-canvas
+              method: addEdge
+              args:
+                - source: Y
+                  target: Z
+        - brick: hr
+          properties:
+            style:
+              width: 100%
+        - brick: h3
+          properties:
+            textContent: Drag nodes below
+        - brick: :forEach
+          dataSource: |
+            <%
+              ["A", "B", "C"].map((id) => ({
+                type: "node",
+                id,
+                data: {
+                  name: `Node ${id}`,
+                },
+              }))
+            %>
+          children:
+            - brick: diagram.experimental-node
+              properties:
+                textContent: <% ITEM.data.name %>
+                usage: library
+              events:
+                drag.move:
+                  action: context.replace
                   args:
                     - dragging
-                    - null
-                - target: eo-draw-canvas
-                  method: dropDecorator
+                    - |
+                      <% {position: EVENT.detail, ...ITEM} %>
+                drag.end:
+                  - action: context.replace
+                    args:
+                      - dragging
+                      - null
+                  - target: eo-draw-canvas
+                    method: dropNode
+                    args:
+                      - position: <% EVENT.detail %>
+                        id: <% ITEM.id %>
+                        data: <% ITEM.data %>
+                    callback:
+                      success:
+                        if: <% EVENT.detail %>
+                        then:
+                          # action: message.success
+                          # args:
+                          #   - <% JSON.stringify(EVENT.detail) %>
+                        else:
+                          action: message.warn
+                          args:
+                            - Unexpected drop position
+        - brick: hr
+          properties:
+            style:
+              width: 100%
+        - brick: h3
+          properties:
+            textContent: Drag decorators below
+        - brick: :forEach
+          dataSource:
+            - area
+            - text
+          children:
+            - brick: diagram.experimental-node
+              properties:
+                textContent: <% _.upperFirst(ITEM) %>
+                usage: library
+              events:
+                drag.move:
+                  action: context.replace
                   args:
-                    - position: <% EVENT.detail %>
-                      decorator: <% ITEM %>
-                  callback:
-                    success:
-                      if: <% EVENT.detail %>
-                      then:
-                        # action: message.success
-                        # args:
-                        #   - <% JSON.stringify(EVENT.detail) %>
-                      else:
-                        action: message.warn
-                        args:
-                          - Unexpected drop position
-  - brick: div
-    properties:
-      style:
-        flex: 1
-        minWidth: 0
-    children:
-      - brick: eo-draw-canvas
-        properties:
-          style:
-            width: 100%
-            height: 100%
-          activeTarget: <%= CTX.activeTarget %>
-          # Initial nodes only
-          defaultNodeSize: [60, 60]
-          defaultNodeBricks:
-            - useBrick:
-                brick: diagram.experimental-node
-                properties:
-                  textContent: <% `Node ${DATA.node.id}` %>
-                  status: |
-                    <%=
-                      CTX.activeTarget?.type === "node" && CTX.activeTarget.id === DATA.node.id
-                        ? "highlighted"
-                        // : CTX.activeTarget && CTX.activeTarget?.id !== DATA.node.id
-                        // ? "faded"
-                        : "default"
-                    %>
-          cells: |
-            <%
-              [
-                {
-                  type: "decorator",
-                  id: "area-1",
-                  decorator: "area",
-                  view: {
-                    x: 10,
-                    y: 20,
-                    width: 400,
-                    height: 300,
+                    - dragging
+                    - |
+                      <% {position: EVENT.detail, type: "decorator", decorator: ITEM} %>
+                drag.end:
+                  - action: context.replace
+                    args:
+                      - dragging
+                      - null
+                  - target: eo-draw-canvas
+                    method: dropDecorator
+                    args:
+                      - position: <% EVENT.detail %>
+                        decorator: <% ITEM %>
+                    callback:
+                      success:
+                        if: <% EVENT.detail %>
+                        then:
+                          # action: message.success
+                          # args:
+                          #   - <% JSON.stringify(EVENT.detail) %>
+                        else:
+                          action: message.warn
+                          args:
+                            - Unexpected drop position
+    - brick: div
+      properties:
+        style:
+          flex: 1
+          minWidth: 0
+      children:
+        - brick: eo-draw-canvas
+          properties:
+            style:
+              width: 100%
+              height: 100%
+            activeTarget: <%= CTX.activeTarget %>
+            # Initial nodes only
+            defaultNodeSize: [60, 60]
+            defaultNodeBricks:
+              - useBrick:
+                  brick: diagram.experimental-node
+                  properties:
+                    textContent: <% `Node ${DATA.node.id}` %>
+                    status: |
+                      <%=
+                        CTX.activeTarget?.type === "node" && CTX.activeTarget.id === DATA.node.id
+                          ? "highlighted"
+                          // : CTX.activeTarget && CTX.activeTarget?.id !== DATA.node.id
+                          // ? "faded"
+                          : "default"
+                      %>
+            cells: |
+              <%
+                [
+                  {
+                    type: "decorator",
+                    id: "area-1",
+                    decorator: "area",
+                    view: {
+                      x: 10,
+                      y: 20,
+                      width: 400,
+                      height: 300,
+                    },
                   },
-                },
-                {
-                  type: "decorator",
-                  id: "text-1",
-                  decorator: "text",
-                  view: {
-                    x: 100,
-                    y: 120,
-                    width: 100,
-                    height: 20,
-                    text: "Hello!"
+                  {
+                    type: "decorator",
+                    id: "text-1",
+                    decorator: "text",
+                    view: {
+                      x: 100,
+                      y: 120,
+                      width: 100,
+                      height: 20,
+                      text: "Hello!"
+                    },
                   },
-                },
-                {
-                  type: "edge",
-                  source: "X",
-                  target: "Y",
-                },
-                {
-                  type: "edge",
-                  source: "X",
-                  target: "Z",
-                },
-              ].concat(
-                ["X", "Y", "Z"].map((id) => ({
-                  type: "node",
-                  id,
-                  data: {
-                    name: `Node ${id}`,
+                  {
+                    type: "edge",
+                    source: "X",
+                    target: "Y",
                   },
-                  view: {
-                    x: Math.round(
-                      id === "X"
-                        ? 200 + Math.random() * 200
-                        : id === "Y"
-                        ? Math.random() * 300
-                        : 300 + Math.random() * 300
-                    ),
-                    y: (id === "X" ? 0 : 300) + Math.round((Math.random() * 200)),
-                    width: 60,
-                    height: 60,
-                  }
-                }))
-              )
-            %>
-        events:
-          activeTarget.change:
-            action: context.replace
-            args:
-              - activeTarget
-              - <% EVENT.detail %>
-          cell.move:
-            action: message.info
-            args:
-              - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>
-          cell.resize:
-            action: message.info
-            args:
-              - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>
-          cell.delete:
-            action: message.warn
-            args:
-              - |
-                <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === "edge" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>
-          cell.contextmenu:
-            - target: eo-context-menu
-              method: open
+                  {
+                    type: "edge",
+                    source: "X",
+                    target: "Z",
+                  },
+                ].concat(
+                  ["X", "Y", "Z"].map((id) => ({
+                    type: "node",
+                    id,
+                    data: {
+                      name: `Node ${id}`,
+                    },
+                    view: {
+                      x: Math.round(
+                        id === "X"
+                          ? 200 + Math.random() * 200
+                          : id === "Y"
+                          ? Math.random() * 300
+                          : 300 + Math.random() * 300
+                      ),
+                      y: (id === "X" ? 0 : 300) + Math.round((Math.random() * 200)),
+                      width: 60,
+                      height: 60,
+                    }
+                  }))
+                )
+              %>
+          events:
+            activeTarget.change:
+              action: context.replace
               args:
-                - position:
-                    - <% EVENT.detail.clientX %>
-                    - <% EVENT.detail.clientY %>
-            - action: context.replace
+                - activeTarget
+                - <% EVENT.detail %>
+            cell.move:
+              action: message.info
               args:
-                - targetCell
-                - <% EVENT.detail.cell %>
-  - brick: diagram.experimental-node
-    properties:
-      usage: dragging
-      textContent: |
-        <%= CTX.dragging?.type === "decorator" ? (CTX.dragging.decorator === "text" ? "未命名" : null) : CTX.dragging?.data.name %>
-      decorator: |
-        <%= CTX.dragging?.type === "decorator" ? CTX.dragging.decorator : null %>
-      style: |
-        <%=
+                - <% `You just moved ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.x)}, ${Math.round(EVENT.detail.y)})` %>
+            cell.resize:
+              action: message.info
+              args:
+                - <% `You just resized ${EVENT.detail.type} ${EVENT.detail.id} to (${Math.round(EVENT.detail.width)}, ${Math.round(EVENT.detail.height)})` %>
+            cell.delete:
+              action: message.warn
+              args:
+                - |
+                  <% `You wanna delete ${EVENT.detail.type} ${EVENT.detail.type === "edge" ? `(${EVENT.detail.source} => ${EVENT.detail.target})` : EVENT.detail.id}?` %>
+            cell.contextmenu:
+              - target: eo-context-menu
+                method: open
+                args:
+                  - position:
+                      - <% EVENT.detail.clientX %>
+                      - <% EVENT.detail.clientY %>
+              - action: context.replace
+                args:
+                  - targetCell
+                  - <% EVENT.detail.cell %>
+            scale.change:
+              action: context.replace
+              args:
+                - scale
+                - <% EVENT.detail %>
+- brick: diagram.experimental-node
+  properties:
+    usage: dragging
+    textContent: |
+      <%= CTX.dragging?.type === "decorator" ? (CTX.dragging.decorator === "text" ? "未命名" : null) : CTX.dragging?.data.name %>
+    decorator: |
+      <%= CTX.dragging?.type === "decorator" ? CTX.dragging.decorator : null %>
+    style: |
+      <%=
+        {
+          left: `${CTX.dragging?.position[0]}px`,
+          top: `${CTX.dragging?.position[1]}px`,
+          transform: `scale(${CTX.scale})`,
+          transformOrigin: "0 0",
+        }
+      %>
+    hidden: <%= !CTX.dragging %>
+- brick: eo-context-menu
+  properties:
+    actions: |
+      <%=
+        CTX.targetCell?.type === "node" ? [
+          {
+            text: "添加边",
+            event: "add-edge",
+          }
+        ] : [
           {
-            left: `${CTX.dragging?.position[0]}px`,
-            top: `${CTX.dragging?.position[1]}px`,
+            text: `Test ${CTX.targetCell?.type}`,
+            event: `test-${CTX.targetCell?.type}`,
           }
-        %>
-      hidden: <%= !CTX.dragging %>
-  - brick: eo-context-menu
-    properties:
-      actions: |
-        <%=
-          [
-            {
-              text: `Test ${CTX.targetCell?.type}`,
-              event: "test-${CTX.targetCell?.type}",
-            }
-          ]
-        %>
+        ]
+      %>
+  events:
+    add-edge:
+      target: eo-draw-canvas
+      method: manuallyConnectNodes
+      args:
+        - <% CTX.targetCell.id %>
+      callback:
+        success:
+          target: eo-draw-canvas
+          method: addEdge
+          args:
+            - source: <% EVENT.detail.source.id %>
+              target: <% EVENT.detail.target.id %>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/diagram",
-  "version": "0.18.0",
+  "version": "0.20.0",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/diagram",
   "repository": {
     "type": "git",
@@ -38,7 +38,8 @@
     "@next-core/test-next": "^1.0.15"
   },
   "peerDependencies": {
+    "@next-bricks/basic": "*",
     "@next-bricks/icons": "*"
   },
-  "gitHead": "c53fb5e5b7ac3f7cc42ec3af7411eb1123763ac7"
+  "gitHead": "ef33c9f839151daaefef8ae52efd37b9a5c8e662"
 }