@flowgram.ai/free-container-plugin 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/esm/index.js

@@ -32,7 +32,7 @@ import {
   WorkflowSelectService
 } from "@flowgram.ai/free-layout-core";
 import { HistoryService } from "@flowgram.ai/free-history-plugin";
-import { FlowNodeTransformData, FlowNodeRenderData } from "@flowgram.ai/document";
+import { FlowNodeRenderData, FlowNodeBaseType } from "@flowgram.ai/document";
 import { PlaygroundConfigEntity, TransformData } from "@flowgram.ai/core";
 var NodeIntoContainerService = class {
   constructor() {
@@ -51,23 +51,12 @@ var NodeIntoContainerService = class {
     this.initState();
     this.toDispose.dispose();
   }
-  /** 移除节点连线 */
-  async removeNodeLines(node) {
-    const lines = this.linesManager.getAllLines();
-    lines.forEach((line) => {
-      if (line.from.id !== node.id && line.to?.id !== node.id) {
-        return;
-      }
-      line.dispose();
-    });
-    await this.nextFrame();
-  }
   /** 将节点移出容器 */
   async moveOutContainer(params) {
     const { node } = params;
     const parentNode = node.parent;
     const containerNode = parentNode?.parent;
-    const nodeJSON = await this.document.toNodeJSON(node);
+    const nodeJSON = this.document.toNodeJSON(node);
     if (!parentNode || !containerNode || !this.isContainer(parentNode) || !nodeJSON.meta?.position) {
       return;
     }
@@ -105,6 +94,31 @@ var NodeIntoContainerService = class {
     }
     return true;
   }
+  /** 移除节点所有非法连线 */
+  async clearInvalidLines(params) {
+    const { dragNode, sourceParent } = params;
+    if (!dragNode) {
+      return;
+    }
+    if (dragNode.parent === sourceParent) {
+      return;
+    }
+    if (dragNode.parent?.flowNodeType === FlowNodeBaseType.GROUP || sourceParent?.flowNodeType === FlowNodeBaseType.GROUP) {
+      return;
+    }
+    await this.removeNodeLines(dragNode);
+  }
+  /** 移除节点连线 */
+  async removeNodeLines(node) {
+    const lines = this.linesManager.getAllLines();
+    lines.forEach((line) => {
+      if (line.from.id !== node.id && line.to?.id !== node.id) {
+        return;
+      }
+      line.dispose();
+    });
+    await this.nextFrame();
+  }
   /** 初始化状态 */
   initState() {
     this.state = {
@@ -147,7 +161,10 @@ var NodeIntoContainerService = class {
         throttledDraggingNode.cancel();
         draggingNode(event);
         await this.dropNodeToContainer();
-        await this.clearInvalidLines();
+        await this.clearInvalidLines({
+          dragNode: this.state.dragNode,
+          sourceParent: this.state.sourceParent
+        });
         this.setDropNode(void 0);
         this.initState();
         this.historyService.endTransaction();
@@ -169,24 +186,6 @@ var NodeIntoContainerService = class {
     await this.nextFrame();
     this.dragService.startDragSelectedNodes(event.triggerEvent);
   }
-  /** 移除节点所有非法连线 */
-  async clearInvalidLines() {
-    const { dragNode, sourceParent } = this.state;
-    if (!dragNode) {
-      return;
-    }
-    if (dragNode.parent === sourceParent) {
-      return;
-    }
-    const lines = this.linesManager.getAllLines();
-    lines.forEach((line) => {
-      if (line.from.id !== dragNode.id && line.to?.id !== dragNode.id) {
-        return;
-      }
-      line.dispose();
-    });
-    await this.nextFrame();
-  }
   /** 获取重叠位置 */
   getCollisionTransform(params) {
     const { targetRect, targetPoint, transforms, withPadding = false } = params;
@@ -233,13 +232,16 @@ var NodeIntoContainerService = class {
   }
   /** 获取容器节点transforms */
   getContainerTransforms() {
-    return this.document.getRenderDatas(FlowNodeTransformData, false).filter((transform) => {
-      const { entity } = transform;
-      if (entity.originParent) {
-        return entity.getNodeMeta().selectable && entity.originParent.getNodeMeta().selectable;
+    return this.document.getAllNodes().filter((node) => {
+      if (node.originParent) {
+        return node.getNodeMeta().selectable && node.originParent.getNodeMeta().selectable;
       }
-      return entity.getNodeMeta().selectable;
-    }).filter((transform) => this.isContainer(transform.entity));
+      return node.getNodeMeta().selectable;
+    }).filter((node) => this.isContainer(node)).sort((a, b) => {
+      const aIndex = a.renderData.stackIndex;
+      const bIndex = b.renderData.stackIndex;
+      return bIndex - aIndex;
+    }).map((node) => node.transform);
   }
   /** 放置节点到容器 */
   async dropNodeToContainer() {
@@ -254,44 +256,66 @@ var NodeIntoContainerService = class {
   }
   /** 拖拽节点 */
   draggingNode(nodeDragEvent) {
-    const { dragNode, isDraggingNode, transforms } = this.state;
-    if (!isDraggingNode || !dragNode || this.isContainer(dragNode) || !transforms?.length) {
+    const { dragNode, isDraggingNode, transforms = [] } = this.state;
+    if (!isDraggingNode || !dragNode || !transforms?.length) {
       return this.setDropNode(void 0);
     }
     const mousePos = this.playgroundConfig.getPosFromMouseEvent(nodeDragEvent.dragEvent);
+    const availableTransforms = transforms.filter(
+      (transform) => transform.entity.id !== dragNode.id
+    );
     const collisionTransform = this.getCollisionTransform({
       targetPoint: mousePos,
-      transforms: this.state.transforms ?? []
+      transforms: availableTransforms
     });
     const dropNode = collisionTransform?.entity;
-    if (!dropNode || dragNode.parent?.id === dropNode.id) {
+    const canDrop = this.canDropToContainer({
+      dragNode,
+      dropNode
+    });
+    if (!canDrop) {
       return this.setDropNode(void 0);
     }
+    return this.setDropNode(dropNode);
+  }
+  /** 判断能否将节点拖入容器 */
+  canDropToContainer(params) {
+    const { dragNode, dropNode } = params;
+    const isDropContainer = dropNode?.getNodeMeta().isContainer;
+    if (!dropNode || !isDropContainer || this.isParent(dragNode, dropNode)) {
+      return false;
+    }
+    if (dragNode.flowNodeType === FlowNodeBaseType.GROUP && dropNode.flowNodeType !== FlowNodeBaseType.GROUP) {
+      return false;
+    }
     const canDrop = this.dragService.canDropToNode({
       dragNodeType: dragNode.flowNodeType,
       dropNode
     });
     if (!canDrop.allowDrop) {
-      return this.setDropNode(void 0);
+      return false;
+    }
+    return true;
+  }
+  /** 判断一个节点是否为另一个节点的父节点(向上查找直到根节点) */
+  isParent(node, parent) {
+    let current = node.parent;
+    while (current) {
+      if (current.id === parent.id) {
+        return true;
+      }
+      current = current.parent;
     }
-    return this.setDropNode(canDrop.dropNode);
+    return false;
   }
   /** 将节点移入容器 */
   async moveIntoContainer(params) {
     const { node, containerNode } = params;
     const parentNode = node.parent;
-    const nodeJSON = await this.document.toNodeJSON(node);
     this.operationService.moveNode(node, {
       parent: containerNode
     });
-    this.operationService.updateNodePosition(
-      node,
-      this.dragService.adjustSubNodePosition(
-        nodeJSON.type,
-        containerNode,
-        nodeJSON.meta.position
-      )
-    );
+    this.operationService.updateNodePosition(node, this.adjustSubNodePosition(node, containerNode));
     await this.nextFrame();
     this.emitter.fire({
       type: "in" /* In */,
@@ -300,6 +324,33 @@ var NodeIntoContainerService = class {
       targetContainer: containerNode
     });
   }
+  /**
+   * 如果存在容器节点，且传入鼠标坐标，需要用容器的坐标减去传入的鼠标坐标
+   */
+  adjustSubNodePosition(targetNode, containerNode) {
+    if (containerNode.flowNodeType === FlowNodeBaseType.ROOT) {
+      return targetNode.transform.position;
+    }
+    const nodeWorldTransform = targetNode.transform.transform.worldTransform;
+    const containerWorldTransform = containerNode.transform.transform.worldTransform;
+    const nodePosition = {
+      x: nodeWorldTransform.tx,
+      y: nodeWorldTransform.ty
+    };
+    const isParentEmpty = !containerNode.children || containerNode.children.length === 0;
+    const containerPadding = this.document.layout.getPadding(containerNode);
+    if (isParentEmpty) {
+      return {
+        x: 0,
+        y: containerPadding.top
+      };
+    } else {
+      return {
+        x: nodePosition.x - containerWorldTransform.tx,
+        y: nodePosition.y - containerWorldTransform.ty
+      };
+    }
+  }
   isContainer(node) {
     return node?.getNodeMeta().isContainer ?? false;
   }
@@ -342,6 +393,25 @@ NodeIntoContainerService = __decorateClass([
   injectable()
 ], NodeIntoContainerService);
 
+// src/node-into-container/plugin.tsx
+import { definePluginCreator } from "@flowgram.ai/core";
+var createContainerNodePlugin = definePluginCreator({
+  onBind: ({ bind }) => {
+    bind(NodeIntoContainerService).toSelf().inSingletonScope();
+  },
+  onInit(ctx, options) {
+    ctx.get(NodeIntoContainerService).init();
+  },
+  onReady(ctx, options) {
+    if (options.disableNodeIntoContainer !== true) {
+      ctx.get(NodeIntoContainerService).ready();
+    }
+  },
+  onDispose(ctx) {
+    ctx.get(NodeIntoContainerService).dispose();
+  }
+});
+
 // src/sub-canvas/hooks/use-node-size.ts
 import { useState, useEffect } from "react";
 import {
@@ -388,9 +458,23 @@ var useNodeSize = () => {
   };
 };
 
+// src/sub-canvas/hooks/use-sync-node-render-size.ts
+import { useLayoutEffect } from "react";
+import { useCurrentEntity as useCurrentEntity2 } from "@flowgram.ai/free-layout-core";
+var useSyncNodeRenderSize = (nodeSize) => {
+  const node = useCurrentEntity2();
+  useLayoutEffect(() => {
+    if (!nodeSize) {
+      return;
+    }
+    node.renderData.node.style.width = nodeSize.width + "px";
+    node.renderData.node.style.height = nodeSize.height + "px";
+  }, [nodeSize?.width, nodeSize?.height]);
+};
+
 // src/sub-canvas/components/background/index.tsx
 import React from "react";
-import { useCurrentEntity as useCurrentEntity2 } from "@flowgram.ai/free-layout-core";
+import { useCurrentEntity as useCurrentEntity3 } from "@flowgram.ai/free-layout-core";
 
 // src/sub-canvas/components/background/style.ts
 import styled from "styled-components";
@@ -403,7 +487,7 @@ var SubCanvasBackgroundStyle = styled.div`
 
 // src/sub-canvas/components/background/index.tsx
 var SubCanvasBackground = () => {
-  const node = useCurrentEntity2();
+  const node = useCurrentEntity3();
   return /* @__PURE__ */ React.createElement(SubCanvasBackgroundStyle, { className: "sub-canvas-background", "data-flow-editor-selectable": "true" }, /* @__PURE__ */ React.createElement("svg", { width: "100%", height: "100%" }, /* @__PURE__ */ React.createElement("pattern", { id: "sub-canvas-dot-pattern", width: "20", height: "20", patternUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("circle", { cx: "1", cy: "1", r: "1", stroke: "#eceeef", fillOpacity: "0.5" })), /* @__PURE__ */ React.createElement(
     "rect",
     {
@@ -466,8 +550,7 @@ var SubCanvasBorder = ({ style, children }) => /* @__PURE__ */ React2.createElem
 );
 
 // src/sub-canvas/components/render/index.tsx
-import React3, { useLayoutEffect } from "react";
-import { useCurrentEntity as useCurrentEntity3 } from "@flowgram.ai/free-layout-core";
+import React5 from "react";
 
 // src/sub-canvas/components/render/style.ts
 import styled3 from "styled-components";
@@ -476,23 +559,204 @@ var SubCanvasRenderStyle = styled3.div`
   height: 100%;
 `;
 
+// src/sub-canvas/components/tips/index.tsx
+import React4 from "react";
+
+// src/sub-canvas/components/tips/use-control.ts
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCurrentEntity as useCurrentEntity4 } from "@flowgram.ai/free-layout-core";
+import { useService } from "@flowgram.ai/core";
+
+// src/sub-canvas/components/tips/global-store.ts
+var STORAGE_KEY = "workflow-move-into-sub-canvas-tip-visible";
+var STORAGE_VALUE = "false";
+var TipsGlobalStore = class _TipsGlobalStore {
+  constructor() {
+    this.closed = false;
+  }
+  static get instance() {
+    if (!this._instance) {
+      this._instance = new _TipsGlobalStore();
+    }
+    return this._instance;
+  }
+  isClosed() {
+    return this.isCloseForever() || this.closed;
+  }
+  close() {
+    this.closed = true;
+  }
+  isCloseForever() {
+    return localStorage.getItem(STORAGE_KEY) === STORAGE_VALUE;
+  }
+  closeForever() {
+    localStorage.setItem(STORAGE_KEY, STORAGE_VALUE);
+  }
+};
+
+// src/sub-canvas/components/tips/use-control.ts
+var useControlTips = () => {
+  const node = useCurrentEntity4();
+  const [visible, setVisible] = useState2(false);
+  const globalStore = TipsGlobalStore.instance;
+  const nodeIntoContainerService = useService(NodeIntoContainerService);
+  const show = useCallback(() => {
+    if (globalStore.isClosed()) {
+      return;
+    }
+    setVisible(true);
+  }, [globalStore]);
+  const close = useCallback(() => {
+    globalStore.close();
+    setVisible(false);
+  }, [globalStore]);
+  const closeForever = useCallback(() => {
+    globalStore.closeForever();
+    close();
+  }, [close, globalStore]);
+  useEffect2(() => {
+    const inDisposer = nodeIntoContainerService.on((e) => {
+      if (e.type !== "in" /* In */) {
+        return;
+      }
+      if (e.targetContainer === node) {
+        show();
+      }
+    });
+    const outDisposer = nodeIntoContainerService.on((e) => {
+      if (e.type !== "out" /* Out */) {
+        return;
+      }
+      if (e.sourceContainer === node && !node.blocks.length) {
+        setVisible(false);
+      }
+    });
+    return () => {
+      inDisposer.dispose();
+      outDisposer.dispose();
+    };
+  }, [nodeIntoContainerService, node, show, close, visible]);
+  return {
+    visible,
+    close,
+    closeForever
+  };
+};
+
+// src/sub-canvas/components/tips/style.ts
+import styled4 from "styled-components";
+var SubCanvasTipsStyle = styled4.div`
+  pointer-events: auto;
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+  height: 28px;
+
+  .container {
+    height: 100%;
+    background-color: #e4e6f5;
+    border-radius: 4px 4px 0 0;
+
+    .content {
+      overflow: hidden;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 100%;
+      height: 100%;
+
+      .text {
+        font-size: 14px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 20px;
+        color: rgba(15, 21, 40, 82%);
+        text-overflow: ellipsis;
+      }
+
+      .space {
+        width: 128px;
+      }
+    }
+
+    .actions {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      display: flex;
+      gap: 8px;
+      align-items: center;
+
+      height: 28px;
+      padding: 0 16px;
+
+      .close-forever {
+        cursor: pointer;
+
+        padding: 0 3px;
+
+        font-size: 12px;
+        font-weight: 400;
+        font-style: normal;
+        line-height: 12px;
+        color: rgba(32, 41, 69, 62%);
+      }
+
+      .close {
+        display: flex;
+        cursor: pointer;
+        height: 100%;
+        align-items: center;
+      }
+    }
+  }
+`;
+
+// src/sub-canvas/components/tips/is-mac-os.ts
+var isMacOS = /(Macintosh|MacIntel|MacPPC|Mac68K|iPad)/.test(navigator.userAgent);
+
+// src/sub-canvas/components/tips/icon-close.tsx
+import React3 from "react";
+var IconClose = () => /* @__PURE__ */ React3.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 16 16" }, /* @__PURE__ */ React3.createElement(
+  "path",
+  {
+    fill: "#060709",
+    fillOpacity: "0.5",
+    d: "M12.13 12.128a.5.5 0 0 0 .001-.706L8.71 8l3.422-3.423a.5.5 0 0 0-.001-.705.5.5 0 0 0-.706-.002L8.002 7.293 4.579 3.87a.5.5 0 0 0-.705.002.5.5 0 0 0-.002.705L7.295 8l-3.423 3.422a.5.5 0 0 0 .002.706c.195.195.51.197.705.001l3.423-3.422 3.422 3.422c.196.196.51.194.706-.001"
+  }
+));
+
+// src/sub-canvas/components/tips/index.tsx
+var SubCanvasTips = () => {
+  const { visible, close, closeForever } = useControlTips();
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement(SubCanvasTipsStyle, { className: "sub-canvas-tips" }, /* @__PURE__ */ React4.createElement("div", { className: "container" }, /* @__PURE__ */ React4.createElement("div", { className: "content" }, /* @__PURE__ */ React4.createElement("p", { className: "text" }, `Hold ${isMacOS ? "Cmd \u2318" : "Ctrl"} to drag node out`), /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: "space",
+      style: {
+        width: 0
+      }
+    }
+  )), /* @__PURE__ */ React4.createElement("div", { className: "actions" }, /* @__PURE__ */ React4.createElement("p", { className: "close-forever", onClick: closeForever }, "Never Remind"), /* @__PURE__ */ React4.createElement("div", { className: "close", onClick: close }, /* @__PURE__ */ React4.createElement(IconClose, null)))));
+};
+
 // src/sub-canvas/components/render/index.tsx
-var SubCanvasRender = ({ className, style }) => {
-  const node = useCurrentEntity3();
+var SubCanvasRender = ({ className, style, offsetY = 0 }) => {
   const nodeSize = useNodeSize();
-  const { height, width } = nodeSize ?? {};
   const nodeHeight = nodeSize?.height ?? 0;
-  const { padding } = node.transform;
-  useLayoutEffect(() => {
-    node.renderData.node.style.width = width + "px";
-    node.renderData.node.style.height = height + "px";
-  }, [height, width]);
-  return /* @__PURE__ */ React3.createElement(
+  useSyncNodeRenderSize(nodeSize);
+  return /* @__PURE__ */ React5.createElement(
     SubCanvasRenderStyle,
     {
       className: `sub-canvas-render ${className ?? ""}`,
       style: {
-        height: nodeHeight - padding.top,
+        height: nodeHeight + offsetY,
         ...style
       },
       "data-flow-editor-selectable": "true",
@@ -500,35 +764,18 @@ var SubCanvasRender = ({ className, style }) => {
         e.stopPropagation();
       }
     },
-    /* @__PURE__ */ React3.createElement(SubCanvasBorder, null, /* @__PURE__ */ React3.createElement(SubCanvasBackground, null))
+    /* @__PURE__ */ React5.createElement(SubCanvasBorder, null, /* @__PURE__ */ React5.createElement(SubCanvasBackground, null), /* @__PURE__ */ React5.createElement(SubCanvasTips, null))
   );
 };
-
-// src/plugin.tsx
-import { definePluginCreator } from "@flowgram.ai/core";
-var createContainerNodePlugin = definePluginCreator({
-  onBind: ({ bind }) => {
-    bind(NodeIntoContainerService).toSelf().inSingletonScope();
-  },
-  onInit(ctx, options) {
-    ctx.get(NodeIntoContainerService).init();
-  },
-  onReady(ctx, options) {
-    if (options.disableNodeIntoContainer !== true) {
-      ctx.get(NodeIntoContainerService).ready();
-    }
-  },
-  onDispose(ctx) {
-    ctx.get(NodeIntoContainerService).dispose();
-  }
-});
 export {
   NodeIntoContainerService,
   NodeIntoContainerType,
   SubCanvasBackground,
   SubCanvasBorder,
   SubCanvasRender,
+  SubCanvasTips,
   createContainerNodePlugin,
-  useNodeSize
+  useNodeSize,
+  useSyncNodeRenderSize
 };
 //# sourceMappingURL=index.js.map