@flowgram.ai/free-container-plugin 0.1.25 → 0.1.27

package/dist/index.js

@@ -43,8 +43,10 @@ __export(src_exports, {
   SubCanvasBackground: () => SubCanvasBackground,
   SubCanvasBorder: () => SubCanvasBorder,
   SubCanvasRender: () => SubCanvasRender,
+  SubCanvasTips: () => SubCanvasTips,
   createContainerNodePlugin: () => createContainerNodePlugin,
-  useNodeSize: () => useNodeSize
+  useNodeSize: () => useNodeSize,
+  useSyncNodeRenderSize: () => useSyncNodeRenderSize
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -80,23 +82,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;
     }
@@ -134,6 +125,20 @@ var NodeIntoContainerService = class {
     }
     return true;
   }
+  /** 移除节点所有非法连线 */
+  async clearInvalidLines(params) {
+    const { dragNode, sourceParent } = params;
+    if (!dragNode) {
+      return;
+    }
+    if (dragNode.parent === sourceParent) {
+      return;
+    }
+    if (dragNode.parent?.flowNodeType === import_document.FlowNodeBaseType.GROUP || sourceParent?.flowNodeType === import_document.FlowNodeBaseType.GROUP) {
+      return;
+    }
+    await this.removeNodeLines(dragNode);
+  }
   /** 初始化状态 */
   initState() {
     this.state = {
@@ -176,7 +181,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();
@@ -198,18 +206,11 @@ 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;
-    }
+  /** 移除节点连线 */
+  async removeNodeLines(node) {
     const lines = this.linesManager.getAllLines();
     lines.forEach((line) => {
-      if (line.from.id !== dragNode.id && line.to?.id !== dragNode.id) {
+      if (line.from.id !== node.id && line.to?.id !== node.id) {
         return;
       }
       line.dispose();
@@ -262,13 +263,16 @@ var NodeIntoContainerService = class {
   }
   /** 获取容器节点transforms */
   getContainerTransforms() {
-    return this.document.getRenderDatas(import_document.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() {
@@ -283,44 +287,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 === import_document.FlowNodeBaseType.GROUP && dropNode.flowNodeType !== import_document.FlowNodeBaseType.GROUP) {
+      return false;
+    }
     const canDrop = this.dragService.canDropToNode({
       dragNodeType: dragNode.flowNodeType,
       dropNode
     });
     if (!canDrop.allowDrop) {
-      return this.setDropNode(void 0);
+      return false;
     }
-    return this.setDropNode(canDrop.dropNode);
+    return true;
+  }
+  /** 判断一个节点是否为另一个节点的父节点(向上查找直到根节点) */
+  isParent(node, parent) {
+    let current = node.parent;
+    while (current) {
+      if (current.id === parent.id) {
+        return true;
+      }
+      current = current.parent;
+    }
+    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 */,
@@ -329,6 +355,33 @@ var NodeIntoContainerService = class {
       targetContainer: containerNode
     });
   }
+  /**
+   * 如果存在容器节点，且传入鼠标坐标，需要用容器的坐标减去传入的鼠标坐标
+   */
+  adjustSubNodePosition(targetNode, containerNode) {
+    if (containerNode.flowNodeType === import_document.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;
   }
@@ -371,6 +424,25 @@ NodeIntoContainerService = __decorateClass([
   (0, import_inversify.injectable)()
 ], NodeIntoContainerService);
 
+// src/node-into-container/plugin.tsx
+var import_core2 = require("@flowgram.ai/core");
+var createContainerNodePlugin = (0, import_core2.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
 var import_react = require("react");
 var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
@@ -414,9 +486,23 @@ var useNodeSize = () => {
   };
 };
 
-// src/sub-canvas/components/background/index.tsx
-var import_react2 = __toESM(require("react"));
+// src/sub-canvas/hooks/use-sync-node-render-size.ts
+var import_react2 = require("react");
 var import_free_layout_core3 = require("@flowgram.ai/free-layout-core");
+var useSyncNodeRenderSize = (nodeSize) => {
+  const node = (0, import_free_layout_core3.useCurrentEntity)();
+  (0, import_react2.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
+var import_react3 = __toESM(require("react"));
+var import_free_layout_core4 = require("@flowgram.ai/free-layout-core");
 
 // src/sub-canvas/components/background/style.ts
 var import_styled_components = __toESM(require("styled-components"));
@@ -429,8 +515,8 @@ var SubCanvasBackgroundStyle = import_styled_components.default.div`
 
 // src/sub-canvas/components/background/index.tsx
 var SubCanvasBackground = () => {
-  const node = (0, import_free_layout_core3.useCurrentEntity)();
-  return /* @__PURE__ */ import_react2.default.createElement(SubCanvasBackgroundStyle, { className: "sub-canvas-background", "data-flow-editor-selectable": "true" }, /* @__PURE__ */ import_react2.default.createElement("svg", { width: "100%", height: "100%" }, /* @__PURE__ */ import_react2.default.createElement("pattern", { id: "sub-canvas-dot-pattern", width: "20", height: "20", patternUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "1", cy: "1", r: "1", stroke: "#eceeef", fillOpacity: "0.5" })), /* @__PURE__ */ import_react2.default.createElement(
+  const node = (0, import_free_layout_core4.useCurrentEntity)();
+  return /* @__PURE__ */ import_react3.default.createElement(SubCanvasBackgroundStyle, { className: "sub-canvas-background", "data-flow-editor-selectable": "true" }, /* @__PURE__ */ import_react3.default.createElement("svg", { width: "100%", height: "100%" }, /* @__PURE__ */ import_react3.default.createElement("pattern", { id: "sub-canvas-dot-pattern", width: "20", height: "20", patternUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react3.default.createElement("circle", { cx: "1", cy: "1", r: "1", stroke: "#eceeef", fillOpacity: "0.5" })), /* @__PURE__ */ import_react3.default.createElement(
     "rect",
     {
       width: "100%",
@@ -442,7 +528,7 @@ var SubCanvasBackground = () => {
 };
 
 // src/sub-canvas/components/border/index.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 
 // src/sub-canvas/components/border/style.ts
 var import_styled_components2 = __toESM(require("styled-components"));
@@ -480,7 +566,7 @@ var SubCanvasBorderStyle = import_styled_components2.default.div`
 `;
 
 // src/sub-canvas/components/border/index.tsx
-var SubCanvasBorder = ({ style, children }) => /* @__PURE__ */ import_react3.default.createElement(
+var SubCanvasBorder = ({ style, children }) => /* @__PURE__ */ import_react4.default.createElement(
   SubCanvasBorderStyle,
   {
     className: "sub-canvas-border",
@@ -492,8 +578,8 @@ var SubCanvasBorder = ({ style, children }) => /* @__PURE__ */ import_react3.def
 );
 
 // src/sub-canvas/components/render/index.tsx
-var import_react4 = __toESM(require("react"));
-var import_free_layout_core4 = require("@flowgram.ai/free-layout-core");
+var import_react8 = __toESM(require("react"));
+var import_free_layout_core6 = require("@flowgram.ai/free-layout-core");
 
 // src/sub-canvas/components/render/style.ts
 var import_styled_components3 = __toESM(require("styled-components"));
@@ -502,18 +588,200 @@ var SubCanvasRenderStyle = import_styled_components3.default.div`
   height: 100%;
 `;
 
+// src/sub-canvas/components/tips/index.tsx
+var import_react7 = __toESM(require("react"));
+
+// src/sub-canvas/components/tips/use-control.ts
+var import_react5 = require("react");
+var import_free_layout_core5 = require("@flowgram.ai/free-layout-core");
+var import_core3 = require("@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 = (0, import_free_layout_core5.useCurrentEntity)();
+  const [visible, setVisible] = (0, import_react5.useState)(false);
+  const globalStore = TipsGlobalStore.instance;
+  const nodeIntoContainerService = (0, import_core3.useService)(NodeIntoContainerService);
+  const show = (0, import_react5.useCallback)(() => {
+    if (globalStore.isClosed()) {
+      return;
+    }
+    setVisible(true);
+  }, [globalStore]);
+  const close = (0, import_react5.useCallback)(() => {
+    globalStore.close();
+    setVisible(false);
+  }, [globalStore]);
+  const closeForever = (0, import_react5.useCallback)(() => {
+    globalStore.closeForever();
+    close();
+  }, [close, globalStore]);
+  (0, import_react5.useEffect)(() => {
+    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
+var import_styled_components4 = __toESM(require("styled-components"));
+var SubCanvasTipsStyle = import_styled_components4.default.div`
+  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
+var import_react6 = __toESM(require("react"));
+var IconClose = () => /* @__PURE__ */ import_react6.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", viewBox: "0 0 16 16" }, /* @__PURE__ */ import_react6.default.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__ */ import_react7.default.createElement(SubCanvasTipsStyle, { className: "sub-canvas-tips" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "container" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "content" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text" }, `Hold ${isMacOS ? "Cmd \u2318" : "Ctrl"} to drag node out`), /* @__PURE__ */ import_react7.default.createElement(
+    "div",
+    {
+      className: "space",
+      style: {
+        width: 0
+      }
+    }
+  )), /* @__PURE__ */ import_react7.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "close-forever", onClick: closeForever }, "Never Remind"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "close", onClick: close }, /* @__PURE__ */ import_react7.default.createElement(IconClose, null)))));
+};
+
 // src/sub-canvas/components/render/index.tsx
 var SubCanvasRender = ({ className, style }) => {
-  const node = (0, import_free_layout_core4.useCurrentEntity)();
+  const node = (0, import_free_layout_core6.useCurrentEntity)();
   const nodeSize = useNodeSize();
-  const { height, width } = nodeSize ?? {};
   const nodeHeight = nodeSize?.height ?? 0;
   const { padding } = node.transform;
-  (0, import_react4.useLayoutEffect)(() => {
-    node.renderData.node.style.width = width + "px";
-    node.renderData.node.style.height = height + "px";
-  }, [height, width]);
-  return /* @__PURE__ */ import_react4.default.createElement(
+  useSyncNodeRenderSize(nodeSize);
+  return /* @__PURE__ */ import_react8.default.createElement(
     SubCanvasRenderStyle,
     {
       className: `sub-canvas-render ${className ?? ""}`,
@@ -526,28 +794,9 @@ var SubCanvasRender = ({ className, style }) => {
         e.stopPropagation();
       }
     },
-    /* @__PURE__ */ import_react4.default.createElement(SubCanvasBorder, null, /* @__PURE__ */ import_react4.default.createElement(SubCanvasBackground, null))
+    /* @__PURE__ */ import_react8.default.createElement(SubCanvasBorder, null, /* @__PURE__ */ import_react8.default.createElement(SubCanvasBackground, null), /* @__PURE__ */ import_react8.default.createElement(SubCanvasTips, null))
   );
 };
-
-// src/plugin.tsx
-var import_core2 = require("@flowgram.ai/core");
-var createContainerNodePlugin = (0, import_core2.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();
-  }
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   NodeIntoContainerService,
@@ -555,7 +804,9 @@ var createContainerNodePlugin = (0, import_core2.definePluginCreator)({
   SubCanvasBackground,
   SubCanvasBorder,
   SubCanvasRender,
+  SubCanvasTips,
   createContainerNodePlugin,
-  useNodeSize
+  useNodeSize,
+  useSyncNodeRenderSize
 });
 //# sourceMappingURL=index.js.map