@flowgram-vue/free-container-plugin 0.2.0

package/src/sub-canvas/components/tips/sub-canvas-tips.vue

@@ -0,0 +1,157 @@
+<script lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, type PropType, type VNode } from 'vue';
+
+import { I18n } from '@flowgram-vue/i18n';
+
+import { useControlTips } from './use-control';
+import { isMacOS } from './is-mac-os';
+
+function IconClose() {
+  return h(
+    'svg',
+    {
+      xmlns: 'http://www.w3.org/2000/svg',
+      width: '16',
+      height: '16',
+      fill: 'none',
+      viewBox: '0 0 16 16',
+    },
+    [
+      h('path', {
+        fill: '#060709',
+        'fill-opacity': '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',
+      }),
+    ]
+  );
+}
+
+export default defineComponent({
+  name: 'SubCanvasTips',
+  props: {
+    tipText: {
+      type: [String, Object] as PropType<string | VNode>,
+      default: undefined,
+    },
+    neverRemindText: {
+      type: [String, Object] as PropType<string | VNode>,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const { visible, close, closeForever } = useControlTips();
+
+    return () => {
+      const displayContent =
+        props.tipText || I18n.t('Hold {{key}} to drag node out', { key: isMacOS ? 'Cmd ⌘' : 'Ctrl' });
+
+      if (!visible.value) {
+        return null;
+      }
+
+      return h('div', { class: 'sub-canvas-tips' }, [
+        h('div', { class: 'container' }, [
+          h('div', { class: 'content' }, [
+            typeof displayContent === 'string'
+              ? h('p', { class: 'text' }, displayContent)
+              : h('div', { class: 'custom-content' }, [displayContent]),
+            h('div', { class: 'space', style: { width: '0px' } }),
+          ]),
+          h('div', { class: 'actions' }, [
+            h(
+              'p',
+              { class: 'close-forever', onClick: closeForever },
+              props.neverRemindText || I18n.t('Never Remind')
+            ),
+            h('div', { class: 'close', onClick: close }, [IconClose()]),
+          ]),
+        ]),
+      ]);
+    };
+  },
+});
+</script>
+
+<style>
+.sub-canvas-tips {
+  pointer-events: auto;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 28px;
+}
+
+.sub-canvas-tips .container {
+  height: 100%;
+  background-color: #e4e6f5;
+  border-radius: 4px 4px 0 0;
+}
+
+.sub-canvas-tips .content {
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.sub-canvas-tips .text {
+  font-size: 14px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 20px;
+  color: rgba(15, 21, 40, 82%);
+  text-overflow: ellipsis;
+}
+
+.sub-canvas-tips .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;
+}
+
+.sub-canvas-tips .space {
+  width: 128px;
+}
+
+.sub-canvas-tips .actions {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  height: 28px;
+  padding: 0 16px;
+}
+
+.sub-canvas-tips .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%);
+}
+
+.sub-canvas-tips .close {
+  display: flex;
+  cursor: pointer;
+  height: 100%;
+  align-items: center;
+}
+</style>

package/src/sub-canvas/components/tips/use-control.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount, ref } from 'vue';
+
+import { useCurrentEntity } from '@flowgram-vue/free-layout-core';
+import { useService } from '@flowgram-vue/core';
+
+import { NodeIntoContainerService, NodeIntoContainerType } from '../../../node-into-container';
+import { TipsGlobalStore } from './global-store';
+
+export const useControlTips = () => {
+  const node = useCurrentEntity();
+  const visible = ref(false);
+  const globalStore = TipsGlobalStore.instance;
+
+  const nodeIntoContainerService = useService<NodeIntoContainerService>(NodeIntoContainerService);
+
+  const show = () => {
+    if (globalStore.isClosed()) {
+      return;
+    }
+    visible.value = true;
+  };
+
+  const close = () => {
+    globalStore.close();
+    visible.value = false;
+  };
+
+  const closeForever = () => {
+    globalStore.closeForever();
+    close();
+  };
+
+  const inDisposer = nodeIntoContainerService.on((e) => {
+    if (e.type !== NodeIntoContainerType.In) {
+      return;
+    }
+    if (e.targetContainer === node) {
+      show();
+    }
+  });
+  const outDisposer = nodeIntoContainerService.on((e) => {
+    if (e.type !== NodeIntoContainerType.Out) {
+      return;
+    }
+    if (e.sourceContainer === node && !node.blocks.length) {
+      visible.value = false;
+    }
+  });
+
+  onBeforeUnmount(() => {
+    inDisposer.dispose();
+    outDisposer.dispose();
+  });
+
+  return {
+    visible,
+    close,
+    closeForever,
+  };
+};

package/src/sub-canvas/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { useNodeSize } from './use-node-size';
+export type { NodeSize } from './use-node-size';
+export { useSyncNodeRenderSize } from './use-sync-node-render-size';

package/src/sub-canvas/hooks/use-node-size.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { onBeforeUnmount, ref } from 'vue';
+
+import {
+  useCurrentEntity,
+  WorkflowNodeMeta,
+  WorkflowNodePortsData,
+} from '@flowgram-vue/free-layout-core';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+
+export interface NodeSize {
+  width: number;
+  height: number;
+}
+
+export const useNodeSize = (): NodeSize | undefined => {
+  const node = useCurrentEntity();
+  const nodeMeta = node.getNodeMeta<WorkflowNodeMeta>();
+  const { size = { width: 300, height: 200 }, isContainer } = nodeMeta;
+
+  const transform = node.getData<FlowNodeTransformData>(FlowNodeTransformData);
+  const width = ref(size.width);
+  const height = ref(size.height);
+
+  const updatePorts = () => {
+    const portsData = node.getData<WorkflowNodePortsData>(WorkflowNodePortsData);
+    portsData.updateDynamicPorts();
+  };
+
+  const updateSize = () => {
+    // 无子节点时
+    if (node.blocks.length === 0) {
+      width.value = size.width;
+      height.value = size.height;
+      return;
+    }
+    // 存在子节点时，只监听宽高变化
+    width.value = transform.bounds.width;
+    height.value = transform.bounds.height;
+  };
+
+  const dispose = transform.onDataChange(() => {
+    updateSize();
+    updatePorts();
+  });
+
+  updateSize();
+
+  onBeforeUnmount(() => {
+    dispose.dispose();
+  });
+
+  if (!isContainer) {
+    return;
+  }
+
+  return {
+    get width() {
+      return width.value;
+    },
+    get height() {
+      return height.value;
+    },
+  };
+};

package/src/sub-canvas/hooks/use-sync-node-render-size.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { watch } from 'vue';
+
+import { useCurrentEntity } from '@flowgram-vue/free-layout-core';
+
+import { NodeSize } from './use-node-size';
+
+export const useSyncNodeRenderSize = (nodeSize?: NodeSize) => {
+  const node = useCurrentEntity();
+
+  watch(
+    () => [nodeSize?.width, nodeSize?.height],
+    () => {
+      if (!nodeSize) {
+        return;
+      }
+      node.renderData.node.style.width = `${nodeSize.width}px`;
+      node.renderData.node.style.height = `${nodeSize.height}px`;
+    },
+    { immediate: true, flush: 'post' }
+  );
+};

package/src/sub-canvas/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './hooks';
+export * from './components';

package/src/utils/adjust-sub-node-position.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IPoint, PaddingSchema } from '@flowgram-vue/utils';
+import { WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+import { FlowNodeBaseType } from '@flowgram-vue/document';
+
+/**
+ * 如果存在容器节点，且传入鼠标坐标，需要用容器的坐标减去传入的鼠标坐标
+ */
+export const adjustSubNodePosition = (params: {
+  targetNode: WorkflowNodeEntity;
+  containerNode: WorkflowNodeEntity;
+  containerPadding: PaddingSchema;
+}): IPoint => {
+  const { targetNode, containerNode, containerPadding } = params;
+  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;
+  if (isParentEmpty) {
+    // 确保空容器节点不偏移
+    return {
+      x: 0,
+      y: containerPadding.top,
+    };
+  } else {
+    return {
+      x: nodePosition.x - containerWorldTransform.tx,
+      y: nodePosition.y - containerWorldTransform.ty,
+    };
+  }
+};

package/src/utils/get-collision-transform.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PositionSchema, Rectangle } from '@flowgram-vue/utils';
+import { WorkflowDocument } from '@flowgram-vue/free-layout-core';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+
+import { isRectIntersects } from './is-rect-intersects';
+import { isPointInRect } from './is-point-in-rect';
+
+/** 获取重叠位置 */
+export const getCollisionTransform = (params: {
+  transforms: FlowNodeTransformData[];
+  targetRect?: Rectangle;
+  targetPoint?: PositionSchema;
+  withPadding?: boolean;
+  document: WorkflowDocument;
+}): FlowNodeTransformData | undefined => {
+  const { targetRect, targetPoint, transforms, withPadding = false, document } = params;
+  const collisionTransform = transforms.find((transform) => {
+    const { bounds, entity } = transform;
+    const padding = withPadding ? 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 isRectIntersects(targetRect, transformRect);
+    }
+    if (targetPoint) {
+      return isPointInRect(targetPoint, transformRect);
+    }
+    return false;
+  });
+  return collisionTransform;
+};

package/src/utils/get-container-transforms.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+import { FlowNodeTransformData } from '@flowgram-vue/document';
+
+import { isContainer } from './is-container';
+
+/** 获取容器节点transforms */
+export const getContainerTransforms = (allNodes: WorkflowNodeEntity[]): FlowNodeTransformData[] =>
+  allNodes
+    .filter((node) => {
+      if (node.originParent) {
+        return node.getNodeMeta().selectable && node.originParent.getNodeMeta().selectable;
+      }
+      return node.getNodeMeta().selectable;
+    })
+    .filter((node) => isContainer(node))
+    .sort((a, b) => {
+      const aIndex = a.renderData.stackIndex;
+      const bIndex = b.renderData.stackIndex;
+      //  确保层级高的节点在前面
+      return bIndex - aIndex;
+    })
+    .map((node) => node.transform);

package/src/utils/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { nextFrame } from './next-frame';
+import { isContainer } from './is-container';
+import { getContainerTransforms } from './get-container-transforms';
+import { getCollisionTransform } from './get-collision-transform';
+import { adjustSubNodePosition } from './adjust-sub-node-position';
+
+export const ContainerUtils = {
+  nextFrame,
+  isContainer,
+  adjustSubNodePosition,
+  getContainerTransforms,
+  getCollisionTransform,
+};

package/src/utils/is-container.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { WorkflowNodeEntity, WorkflowNodeMeta } from '@flowgram-vue/free-layout-core';
+
+export const isContainer = (node?: WorkflowNodeEntity): boolean =>
+  node?.getNodeMeta<WorkflowNodeMeta>().isContainer ?? false;

package/src/utils/is-point-in-rect.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PositionSchema, Rectangle } from '@flowgram-vue/utils';
+
+export const isPointInRect = (point: PositionSchema, rect: Rectangle): boolean =>
+  point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;

package/src/utils/is-rect-intersects.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Rectangle } from '@flowgram-vue/utils';
+
+export const isRectIntersects = (rectA: Rectangle, rectB: Rectangle): boolean => {
+  // 检查水平方向是否有重叠
+  const hasHorizontalOverlap = rectA.right > rectB.left && rectA.left < rectB.right;
+  // 检查垂直方向是否有重叠
+  const hasVerticalOverlap = rectA.bottom > rectB.top && rectA.top < rectB.bottom;
+  // 只有当水平和垂直方向都有重叠时,两个矩形才相交
+  return hasHorizontalOverlap && hasVerticalOverlap;
+};

package/src/utils/next-frame.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export const nextFrame = async (): Promise<void> => {
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+};