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

package/dist/esm/index.js

@@ -0,0 +1,840 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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/node-into-container/constant.ts
+var NodeIntoContainerType = /* @__PURE__ */ ((NodeIntoContainerType2) => {
+  NodeIntoContainerType2["In"] = "in";
+  NodeIntoContainerType2["Out"] = "out";
+  return NodeIntoContainerType2;
+})(NodeIntoContainerType || {});
+
+// src/node-into-container/service.ts
+import { throttle } from "lodash";
+import { inject, injectable } from "inversify";
+import {
+  Rectangle,
+  DisposableCollection,
+  Emitter
+} from "@flowgram.ai/utils";
+import {
+  WorkflowDocument,
+  WorkflowDragService,
+  WorkflowLinesManager,
+  WorkflowOperationBaseService,
+  WorkflowSelectService
+} from "@flowgram.ai/free-layout-core";
+import { HistoryService } from "@flowgram.ai/free-history-plugin";
+import { FlowNodeRenderData, FlowNodeBaseType } from "@flowgram.ai/document";
+import { PlaygroundConfigEntity, TransformData } from "@flowgram.ai/core";
+var NodeIntoContainerService = class {
+  constructor() {
+    this.emitter = new Emitter();
+    this.toDispose = new 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(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 === 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 = {
+      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 = 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 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(FlowNodeRenderData);
+      const renderDom2 = renderData2.node?.children?.[0];
+      if (renderDom2) {
+        renderDom2.classList.remove("selected");
+      }
+    }
+    this.state.dropNode = dropNode;
+    if (!dropNode) {
+      return;
+    }
+    const renderData = dropNode.getData(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 === FlowNodeBaseType.GROUP && dropNode.flowNodeType !== 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 === 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([
+  inject(WorkflowDragService)
+], NodeIntoContainerService.prototype, "dragService", 2);
+__decorateClass([
+  inject(WorkflowDocument)
+], NodeIntoContainerService.prototype, "document", 2);
+__decorateClass([
+  inject(PlaygroundConfigEntity)
+], NodeIntoContainerService.prototype, "playgroundConfig", 2);
+__decorateClass([
+  inject(WorkflowOperationBaseService)
+], NodeIntoContainerService.prototype, "operationService", 2);
+__decorateClass([
+  inject(WorkflowLinesManager)
+], NodeIntoContainerService.prototype, "linesManager", 2);
+__decorateClass([
+  inject(HistoryService)
+], NodeIntoContainerService.prototype, "historyService", 2);
+__decorateClass([
+  inject(WorkflowSelectService)
+], NodeIntoContainerService.prototype, "selectService", 2);
+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 {
+  useCurrentEntity,
+  WorkflowNodePortsData
+} from "@flowgram.ai/free-layout-core";
+import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/document";
+var useNodeSize = () => {
+  const node = useCurrentEntity();
+  const nodeMeta = node.getNodeMeta();
+  const { size = { width: 300, height: 200 }, isContainer } = nodeMeta;
+  const transform = node.getData(FlowNodeTransformData2);
+  const [width, setWidth] = useState(size.width);
+  const [height, setHeight] = useState(size.height);
+  const updatePorts = () => {
+    const portsData = node.getData(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);
+  };
+  useEffect(() => {
+    const dispose = transform.onDataChange(() => {
+      updateSize();
+      updatePorts();
+    });
+    return () => dispose.dispose();
+  }, [transform, width, height]);
+  useEffect(() => {
+    updateSize();
+  }, []);
+  if (!isContainer) {
+    return;
+  }
+  return {
+    width,
+    height
+  };
+};
+
+// 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 useCurrentEntity3 } from "@flowgram.ai/free-layout-core";
+import { useService } from "@flowgram.ai/core";
+import { BackgroundConfig } from "@flowgram.ai/background-plugin";
+
+// src/sub-canvas/components/background/style.ts
+import styled from "styled-components";
+var SubCanvasBackgroundStyle = styled.div`
+  width: 100%;
+  height: 100%;
+  inset: 56px 18px 18px;
+  /* 背景色现在通过 style 属性动态设置 */
+`;
+
+// src/sub-canvas/components/background/index.tsx
+var SubCanvasBackground = () => {
+  const node = useCurrentEntity3();
+  let backgroundConfig = {};
+  try {
+    backgroundConfig = useService(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__ */ React.createElement(
+    SubCanvasBackgroundStyle,
+    {
+      className: "sub-canvas-background",
+      "data-flow-editor-selectable": "true",
+      style: { backgroundColor }
+    },
+    /* @__PURE__ */ React.createElement("svg", { width: "100%", height: "100%" }, /* @__PURE__ */ React.createElement("pattern", { id: patternId, width: gridSize, height: gridSize, patternUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement(
+      "circle",
+      {
+        cx: dotSize,
+        cy: dotSize,
+        r: dotSize,
+        stroke: dotColor,
+        fill: dotFillColor,
+        fillOpacity: dotOpacity
+      }
+    )), /* @__PURE__ */ React.createElement(
+      "rect",
+      {
+        width: "100%",
+        height: "100%",
+        fill: `url(#${patternId})`,
+        "data-node-panel-container": node.id
+      }
+    ))
+  );
+};
+
+// src/sub-canvas/components/border/index.tsx
+import React2 from "react";
+
+// src/sub-canvas/components/border/style.ts
+import styled2 from "styled-components";
+var SubCanvasBorderStyle = styled2.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__ */ React2.createElement(
+  SubCanvasBorderStyle,
+  {
+    className: "sub-canvas-border",
+    style: {
+      ...style
+    }
+  },
+  children
+);
+
+// src/sub-canvas/components/render/index.tsx
+import React5 from "react";
+
+// src/sub-canvas/components/render/style.ts
+import styled3 from "styled-components";
+var SubCanvasRenderStyle = styled3.div`
+  width: 100%;
+  height: 100%;
+`;
+
+// src/sub-canvas/components/tips/index.tsx
+import React4 from "react";
+import { I18n } from "@flowgram.ai/i18n";
+
+// 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 as useService2 } 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 = useService2(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;
+      }
+
+      .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
+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 = ({ tipText, neverRemindText }) => {
+  const { visible, close, closeForever } = useControlTips();
+  const displayContent = tipText || I18n.t("Hold {{key}} to drag node out", { key: isMacOS ? "Cmd \u2318" : "Ctrl" });
+  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" }, typeof displayContent === "string" ? /* @__PURE__ */ React4.createElement("p", { className: "text" }, displayContent) : /* @__PURE__ */ React4.createElement("div", { className: "custom-content" }, displayContent), /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: "space",
+      style: {
+        width: 0
+      }
+    }
+  )), /* @__PURE__ */ React4.createElement("div", { className: "actions" }, /* @__PURE__ */ React4.createElement("p", { className: "close-forever", onClick: closeForever }, neverRemindText || I18n.t("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,
+  offsetY = 0,
+  tipText
+}) => {
+  const nodeSize = useNodeSize();
+  const nodeHeight = nodeSize?.height ?? 0;
+  useSyncNodeRenderSize(nodeSize);
+  return /* @__PURE__ */ React5.createElement(
+    SubCanvasRenderStyle,
+    {
+      className: `sub-canvas-render ${className ?? ""}`,
+      style: {
+        height: nodeHeight + offsetY,
+        ...style
+      },
+      "data-flow-editor-selectable": "true",
+      onDragStart: (e) => {
+        e.stopPropagation();
+      }
+    },
+    /* @__PURE__ */ React5.createElement(SubCanvasBorder, null, /* @__PURE__ */ React5.createElement(SubCanvasBackground, null), /* @__PURE__ */ React5.createElement(SubCanvasTips, { tipText }))
+  );
+};
+export {
+  NodeIntoContainerService,
+  NodeIntoContainerType,
+  SubCanvasBackground,
+  SubCanvasBorder,
+  SubCanvasRender,
+  SubCanvasTips,
+  createContainerNodePlugin,
+  useNodeSize,
+  useSyncNodeRenderSize
+};
+//# sourceMappingURL=index.js.map