@flowgram.ai/free-container-plugin 0.1.0-alpha.10

package/dist/index.js

@@ -0,0 +1,869 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  NodeIntoContainerService: () => NodeIntoContainerService,
+  NodeIntoContainerType: () => NodeIntoContainerType,
+  SubCanvasBackground: () => SubCanvasBackground,
+  SubCanvasBorder: () => SubCanvasBorder,
+  SubCanvasRender: () => SubCanvasRender,
+  SubCanvasTips: () => SubCanvasTips,
+  createContainerNodePlugin: () => createContainerNodePlugin,
+  useNodeSize: () => useNodeSize,
+  useSyncNodeRenderSize: () => useSyncNodeRenderSize
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/node-into-container/constant.ts
+var NodeIntoContainerType = /* @__PURE__ */ ((NodeIntoContainerType2) => {
+  NodeIntoContainerType2["In"] = "in";
+  NodeIntoContainerType2["Out"] = "out";
+  return NodeIntoContainerType2;
+})(NodeIntoContainerType || {});
+
+// src/node-into-container/service.ts
+var import_lodash = require("lodash");
+var import_inversify = require("inversify");
+var import_utils = require("@flowgram.ai/utils");
+var import_free_layout_core = require("@flowgram.ai/free-layout-core");
+var import_free_history_plugin = require("@flowgram.ai/free-history-plugin");
+var import_document = require("@flowgram.ai/document");
+var import_core = require("@flowgram.ai/core");
+var NodeIntoContainerService = class {
+  constructor() {
+    this.emitter = new import_utils.Emitter();
+    this.toDispose = new import_utils.DisposableCollection();
+    this.on = this.emitter.event;
+  }
+  init() {
+    this.initState();
+    this.toDispose.push(this.emitter);
+  }
+  ready() {
+    this.toDispose.push(this.listenDragToContainer());
+  }
+  dispose() {
+    this.initState();
+    this.toDispose.dispose();
+  }
+  /** 将节点移出容器 */
+  async moveOutContainer(params) {
+    const { node } = params;
+    const parentNode = node.parent;
+    const containerNode = parentNode?.parent;
+    const nodeJSON = this.document.toNodeJSON(node);
+    if (!parentNode || !containerNode || !this.isContainer(parentNode) || !nodeJSON.meta?.position) {
+      return;
+    }
+    const parentTransform = parentNode.getData(import_core.TransformData);
+    this.operationService.moveNode(node, {
+      parent: containerNode
+    });
+    await this.nextFrame();
+    parentTransform.fireChange();
+    this.operationService.updateNodePosition(node, {
+      x: parentTransform.position.x + nodeJSON.meta.position.x,
+      y: parentTransform.position.y + nodeJSON.meta.position.y
+    });
+    this.emitter.fire({
+      type: "out" /* Out */,
+      node,
+      sourceContainer: parentNode,
+      targetContainer: containerNode
+    });
+  }
+  /** 能否将节点移出容器 */
+  canMoveOutContainer(node) {
+    const parentNode = node.parent;
+    const containerNode = parentNode?.parent;
+    if (!parentNode || !containerNode || !this.isContainer(parentNode)) {
+      return false;
+    }
+    const canDrop = this.dragService.canDropToNode({
+      dragNodeType: node.flowNodeType,
+      dragNode: node,
+      dropNodeType: containerNode?.flowNodeType,
+      dropNode: containerNode
+    });
+    if (!canDrop.allowDrop) {
+      return false;
+    }
+    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);
+  }
+  /** 移除节点连线 */
+  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 = {
+      isDraggingNode: false,
+      isSkipEvent: false,
+      transforms: void 0,
+      dragNode: void 0,
+      dropNode: void 0,
+      sourceParent: void 0
+    };
+  }
+  /** 监听节点拖拽 */
+  listenDragToContainer() {
+    const draggingNode = (e) => this.draggingNode(e);
+    const throttledDraggingNode = (0, import_lodash.throttle)(draggingNode, 200);
+    return this.dragService.onNodesDrag(async (event) => {
+      if (this.selectService.selectedNodes.length !== 1) {
+        return;
+      }
+      if (event.type === "onDragStart") {
+        if (this.state.isSkipEvent) {
+          this.state.isSkipEvent = false;
+          return;
+        }
+        this.historyService.startTransaction();
+        this.state.isDraggingNode = true;
+        this.state.transforms = this.getContainerTransforms();
+        this.state.dragNode = this.selectService.selectedNodes[0];
+        this.state.dropNode = void 0;
+        this.state.sourceParent = this.state.dragNode?.parent;
+        await this.dragOutContainer(event);
+      }
+      if (event.type === "onDragging") {
+        throttledDraggingNode(event);
+      }
+      if (event.type === "onDragEnd") {
+        if (this.state.isSkipEvent) {
+          return;
+        }
+        throttledDraggingNode.cancel();
+        draggingNode(event);
+        await this.dropNodeToContainer();
+        await this.clearInvalidLines({
+          dragNode: this.state.dragNode,
+          sourceParent: this.state.sourceParent
+        });
+        this.setDropNode(void 0);
+        this.initState();
+        this.historyService.endTransaction();
+      }
+    });
+  }
+  /** 监听节点拖拽出容器 */
+  async dragOutContainer(event) {
+    const { dragNode } = this.state;
+    const activated = event.triggerEvent.metaKey || event.triggerEvent.ctrlKey;
+    if (!activated || // 必须按住指定按键
+    !dragNode || // 必须有一个节点
+    !this.canMoveOutContainer(dragNode)) {
+      return;
+    }
+    this.moveOutContainer({ node: dragNode });
+    this.state.isSkipEvent = true;
+    event.dragger.stop(event.dragEvent.clientX, event.dragEvent.clientY);
+    await this.nextFrame();
+    this.dragService.startDragSelectedNodes(event.triggerEvent);
+  }
+  /** 获取重叠位置 */
+  getCollisionTransform(params) {
+    const { targetRect, targetPoint, transforms, withPadding = false } = params;
+    const collisionTransform = transforms.find((transform) => {
+      const { bounds, entity } = transform;
+      const padding = withPadding ? this.document.layout.getPadding(entity) : { left: 0, right: 0 };
+      const transformRect = new import_utils.Rectangle(
+        bounds.x + padding.left + padding.right,
+        bounds.y,
+        bounds.width,
+        bounds.height
+      );
+      if (targetRect) {
+        return this.isRectIntersects(targetRect, transformRect);
+      }
+      if (targetPoint) {
+        return this.isPointInRect(targetPoint, transformRect);
+      }
+      return false;
+    });
+    return collisionTransform;
+  }
+  /** 设置放置节点高亮 */
+  setDropNode(dropNode) {
+    if (this.state.dropNode === dropNode) {
+      return;
+    }
+    if (this.state.dropNode) {
+      const renderData2 = this.state.dropNode.getData(import_document.FlowNodeRenderData);
+      const renderDom2 = renderData2.node?.children?.[0];
+      if (renderDom2) {
+        renderDom2.classList.remove("selected");
+      }
+    }
+    this.state.dropNode = dropNode;
+    if (!dropNode) {
+      return;
+    }
+    const renderData = dropNode.getData(import_document.FlowNodeRenderData);
+    const renderDom = renderData.node?.children?.[0];
+    if (renderDom) {
+      renderDom.classList.add("selected");
+    }
+  }
+  /** 获取容器节点transforms */
+  getContainerTransforms() {
+    return this.document.getAllNodes().filter((node) => {
+      if (node.originParent) {
+        return node.getNodeMeta().selectable && node.originParent.getNodeMeta().selectable;
+      }
+      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() {
+    const { dropNode, dragNode, isDraggingNode } = this.state;
+    if (!isDraggingNode || !dragNode || !dropNode) {
+      return;
+    }
+    return await this.moveIntoContainer({
+      node: dragNode,
+      containerNode: dropNode
+    });
+  }
+  /** 拖拽节点 */
+  draggingNode(nodeDragEvent) {
+    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: availableTransforms
+    });
+    const dropNode = collisionTransform?.entity;
+    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,
+      dropNodeType: dropNode?.flowNodeType,
+      dragNode,
+      dropNode
+    });
+    if (!canDrop.allowDrop) {
+      return false;
+    }
+    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;
+    this.operationService.moveNode(node, {
+      parent: containerNode
+    });
+    this.operationService.updateNodePosition(node, this.adjustSubNodePosition(node, containerNode));
+    await this.nextFrame();
+    this.emitter.fire({
+      type: "in" /* In */,
+      node,
+      sourceContainer: parentNode,
+      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;
+  }
+  /** 判断点是否在矩形内 */
+  isPointInRect(point, rect) {
+    return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+  }
+  /** 判断两个矩形是否相交 */
+  isRectIntersects(rectA, rectB) {
+    const hasHorizontalOverlap = rectA.right > rectB.left && rectA.left < rectB.right;
+    const hasVerticalOverlap = rectA.bottom > rectB.top && rectA.top < rectB.bottom;
+    return hasHorizontalOverlap && hasVerticalOverlap;
+  }
+  async nextFrame() {
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+  }
+};
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowDragService)
+], NodeIntoContainerService.prototype, "dragService", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowDocument)
+], NodeIntoContainerService.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_core.PlaygroundConfigEntity)
+], NodeIntoContainerService.prototype, "playgroundConfig", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowOperationBaseService)
+], NodeIntoContainerService.prototype, "operationService", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowLinesManager)
+], NodeIntoContainerService.prototype, "linesManager", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_history_plugin.HistoryService)
+], NodeIntoContainerService.prototype, "historyService", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core.WorkflowSelectService)
+], NodeIntoContainerService.prototype, "selectService", 2);
+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");
+var import_document2 = require("@flowgram.ai/document");
+var useNodeSize = () => {
+  const node = (0, import_free_layout_core2.useCurrentEntity)();
+  const nodeMeta = node.getNodeMeta();
+  const { size = { width: 300, height: 200 }, isContainer } = nodeMeta;
+  const transform = node.getData(import_document2.FlowNodeTransformData);
+  const [width, setWidth] = (0, import_react.useState)(size.width);
+  const [height, setHeight] = (0, import_react.useState)(size.height);
+  const updatePorts = () => {
+    const portsData = node.getData(import_free_layout_core2.WorkflowNodePortsData);
+    portsData.updateDynamicPorts();
+  };
+  const updateSize = () => {
+    if (node.blocks.length === 0) {
+      setWidth(size.width);
+      setHeight(size.height);
+      return;
+    }
+    setWidth(transform.bounds.width);
+    setHeight(transform.bounds.height);
+  };
+  (0, import_react.useEffect)(() => {
+    const dispose = transform.onDataChange(() => {
+      updateSize();
+      updatePorts();
+    });
+    return () => dispose.dispose();
+  }, [transform, width, height]);
+  (0, import_react.useEffect)(() => {
+    updateSize();
+  }, []);
+  if (!isContainer) {
+    return;
+  }
+  return {
+    width,
+    height
+  };
+};
+
+// 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");
+var import_core3 = require("@flowgram.ai/core");
+var import_background_plugin = require("@flowgram.ai/background-plugin");
+
+// src/sub-canvas/components/background/style.ts
+var import_styled_components = __toESM(require("styled-components"));
+var SubCanvasBackgroundStyle = import_styled_components.default.div`
+  width: 100%;
+  height: 100%;
+  inset: 56px 18px 18px;
+  /* 背景色现在通过 style 属性动态设置 */
+`;
+
+// src/sub-canvas/components/background/index.tsx
+var SubCanvasBackground = () => {
+  const node = (0, import_free_layout_core4.useCurrentEntity)();
+  let backgroundConfig = {};
+  try {
+    backgroundConfig = (0, import_core3.useService)(import_background_plugin.BackgroundConfig);
+  } catch (error) {
+  }
+  const gridSize = backgroundConfig.gridSize ?? 20;
+  const dotSize = backgroundConfig.dotSize ?? 1;
+  const dotColor = backgroundConfig.dotColor ?? "#eceeef";
+  const dotOpacity = backgroundConfig.dotOpacity ?? 0.5;
+  const backgroundColor = backgroundConfig.backgroundColor ?? "#f2f3f5";
+  const dotFillColor = backgroundConfig.dotFillColor === dotColor ? "" : backgroundConfig.dotFillColor;
+  const patternId = `sub-canvas-dot-pattern-${node.id}`;
+  return /* @__PURE__ */ import_react3.default.createElement(
+    SubCanvasBackgroundStyle,
+    {
+      className: "sub-canvas-background",
+      "data-flow-editor-selectable": "true",
+      style: { backgroundColor }
+    },
+    /* @__PURE__ */ import_react3.default.createElement("svg", { width: "100%", height: "100%" }, /* @__PURE__ */ import_react3.default.createElement("pattern", { id: patternId, width: gridSize, height: gridSize, patternUnits: "userSpaceOnUse" }, /* @__PURE__ */ import_react3.default.createElement(
+      "circle",
+      {
+        cx: dotSize,
+        cy: dotSize,
+        r: dotSize,
+        stroke: dotColor,
+        fill: dotFillColor,
+        fillOpacity: dotOpacity
+      }
+    )), /* @__PURE__ */ import_react3.default.createElement(
+      "rect",
+      {
+        width: "100%",
+        height: "100%",
+        fill: `url(#${patternId})`,
+        "data-node-panel-container": node.id
+      }
+    ))
+  );
+};
+
+// src/sub-canvas/components/border/index.tsx
+var import_react4 = __toESM(require("react"));
+
+// src/sub-canvas/components/border/style.ts
+var import_styled_components2 = __toESM(require("styled-components"));
+var SubCanvasBorderStyle = import_styled_components2.default.div`
+  pointer-events: none;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: transparent;
+  border: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
+  border-color: var(--coz-bg-plus, rgb(249, 249, 249));
+  border-style: solid;
+  border-width: 8px;
+  border-radius: 8px;
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    z-index: 0;
+    inset: -4px;
+
+    background-color: transparent;
+    border-color: var(--coz-bg-plus, rgb(249, 249, 249));
+    border-style: solid;
+    border-width: 4px;
+    border-radius: 8px;
+  }
+`;
+
+// src/sub-canvas/components/border/index.tsx
+var SubCanvasBorder = ({ style, children }) => /* @__PURE__ */ import_react4.default.createElement(
+  SubCanvasBorderStyle,
+  {
+    className: "sub-canvas-border",
+    style: {
+      ...style
+    }
+  },
+  children
+);
+
+// src/sub-canvas/components/render/index.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/sub-canvas/components/render/style.ts
+var import_styled_components3 = __toESM(require("styled-components"));
+var SubCanvasRenderStyle = import_styled_components3.default.div`
+  width: 100%;
+  height: 100%;
+`;
+
+// src/sub-canvas/components/tips/index.tsx
+var import_react7 = __toESM(require("react"));
+var import_i18n = require("@flowgram.ai/i18n");
+
+// 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_core4 = 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_core4.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`
+  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;
+      }
+
+      .custom-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+
+        /* 为自定义内容提供默认样式，但允许覆盖 */
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+        color: rgba(15, 21, 40, 82%);
+
+        /* 确保自定义内容不会超出容器 */
+        overflow: hidden;
+      }
+
+      .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 = ({ tipText, neverRemindText }) => {
+  const { visible, close, closeForever } = useControlTips();
+  const displayContent = tipText || import_i18n.I18n.t("Hold {{key}} to drag node out", { key: isMacOS ? "Cmd \u2318" : "Ctrl" });
+  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" }, typeof displayContent === "string" ? /* @__PURE__ */ import_react7.default.createElement("p", { className: "text" }, displayContent) : /* @__PURE__ */ import_react7.default.createElement("div", { className: "custom-content" }, displayContent), /* @__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 }, neverRemindText || import_i18n.I18n.t("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,
+  offsetY = 0,
+  tipText
+}) => {
+  const nodeSize = useNodeSize();
+  const nodeHeight = nodeSize?.height ?? 0;
+  useSyncNodeRenderSize(nodeSize);
+  return /* @__PURE__ */ import_react8.default.createElement(
+    SubCanvasRenderStyle,
+    {
+      className: `sub-canvas-render ${className ?? ""}`,
+      style: {
+        height: nodeHeight + offsetY,
+        ...style
+      },
+      "data-flow-editor-selectable": "true",
+      onDragStart: (e) => {
+        e.stopPropagation();
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(SubCanvasBorder, null, /* @__PURE__ */ import_react8.default.createElement(SubCanvasBackground, null), /* @__PURE__ */ import_react8.default.createElement(SubCanvasTips, { tipText }))
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NodeIntoContainerService,
+  NodeIntoContainerType,
+  SubCanvasBackground,
+  SubCanvasBorder,
+  SubCanvasRender,
+  SubCanvasTips,
+  createContainerNodePlugin,
+  useNodeSize,
+  useSyncNodeRenderSize
+});
+//# sourceMappingURL=index.js.map