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

package/dist/esm/index.js

@@ -0,0 +1,717 @@
+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/container-node-render/constant.ts
+var ContainerNodeRenderKey = "container-node-render-key";
+
+// src/container-node-render/render.tsx
+import React7 from "react";
+
+// src/container-node-render/components/header/index.tsx
+import React from "react";
+import { useNodeRender } from "@flowgram.ai/free-layout-core";
+
+// src/container-node-render/components/header/style.ts
+import styled from "styled-components";
+var ContainerNodeHeaderStyle = styled.div`
+  z-index: 0;
+
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+
+  width: 100%;
+  height: auto;
+
+  border-radius: 8px 8px 0 0;
+
+  .container-node-logo {
+    position: relative;
+
+    flex-shrink: 0;
+
+    width: 24px;
+    height: 24px;
+
+    border-radius: 4px;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      display: block;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: 4px;
+      box-shadow: inset 0 0 0 1px var(--coz-stroke-plus);
+    }
+
+    > img {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+    }
+  }
+
+  .container-node-title {
+    margin: 0;
+    padding: 0;
+
+    font-size: 16px;
+    font-weight: 500;
+    font-style: normal;
+    line-height: 22px;
+    color: var(--coz-fg-primary, rgba(6, 7, 9, 80%));
+    text-overflow: ellipsis;
+  }
+
+  .container-node-tooltip {
+    height: 100%;
+  }
+
+  .container-node-tooltip-icon {
+    display: flex;
+    align-items: center;
+
+    width: 16px;
+    height: 100%;
+
+    color: #a7a9b0;
+  }
+`;
+
+// src/container-node-render/components/header/index.tsx
+var ContainerNodeHeader = ({ children }) => {
+  const { startDrag, onFocus, onBlur } = useNodeRender();
+  return /* @__PURE__ */ React.createElement(
+    ContainerNodeHeaderStyle,
+    {
+      className: "container-node-header",
+      draggable: true,
+      onMouseDown: (e) => {
+        startDrag(e);
+      },
+      onFocus,
+      onBlur
+    },
+    children
+  );
+};
+
+// src/container-node-render/components/background/index.tsx
+import React2 from "react";
+import { useNodeRender as useNodeRender2 } from "@flowgram.ai/free-layout-core";
+
+// src/container-node-render/components/background/style.ts
+import styled2 from "styled-components";
+var ContainerNodeBackgroundStyle = styled2.div`
+  position: absolute;
+  inset: 56px 18px 18px;
+`;
+
+// src/container-node-render/components/background/index.tsx
+var ContainerNodeBackground = () => {
+  const { node } = useNodeRender2();
+  return /* @__PURE__ */ React2.createElement(
+    ContainerNodeBackgroundStyle,
+    {
+      className: "container-node-background",
+      "data-flow-editor-selectable": "true"
+    },
+    /* @__PURE__ */ React2.createElement("svg", { width: "100%", height: "100%" }, /* @__PURE__ */ React2.createElement(
+      "pattern",
+      {
+        id: "container-node-dot-pattern",
+        width: "20",
+        height: "20",
+        patternUnits: "userSpaceOnUse"
+      },
+      /* @__PURE__ */ React2.createElement("circle", { cx: "1", cy: "1", r: "1", stroke: "#eceeef", fillOpacity: "0.5" })
+    ), /* @__PURE__ */ React2.createElement(
+      "rect",
+      {
+        width: "100%",
+        height: "100%",
+        fill: "url(#container-node-dot-pattern)",
+        "data-node-panel-container": node.id
+      }
+    ))
+  );
+};
+
+// src/container-node-render/components/container/index.tsx
+import React3, { useEffect, useState } from "react";
+import { useNodeRender as useNodeRender4, WorkflowNodePortsData } from "@flowgram.ai/free-layout-core";
+import { FlowNodeTransformData } from "@flowgram.ai/document";
+
+// src/container-node-render/hooks/use-render-props.ts
+import { useNodeRender as useNodeRender3 } from "@flowgram.ai/free-layout-core";
+var useContainerNodeRenderProps = () => {
+  const { node } = useNodeRender3();
+  const nodeMeta = node.getNodeMeta();
+  const {
+    title = "",
+    tooltip,
+    renderPorts = [],
+    style = {}
+  } = nodeMeta?.renderContainerNode?.() ?? {};
+  return {
+    title,
+    tooltip,
+    renderPorts,
+    style
+  };
+};
+
+// src/container-node-render/components/container/style.ts
+import styled3 from "styled-components";
+var ContainerNodeContainerStyle = styled3.div`
+  display: flex;
+  align-items: flex-start;
+
+  box-sizing: border-box;
+  min-width: 400px;
+  min-height: 300px;
+
+  background-color: #f2f3f5;
+  border-radius: 8px;
+  outline: 1px solid var(--coz-stroke-plus, rgba(6, 7, 9, 15%));
+
+  .container-node-container-selected {
+    outline: 1px solid var(--coz-stroke-hglt, #4e40e5);
+  }
+`;
+
+// src/container-node-render/components/container/index.tsx
+var ContainerNodeContainer = ({ children }) => {
+  const { node, selected, selectNode, nodeRef } = useNodeRender4();
+  const nodeMeta = node.getNodeMeta();
+  const { size = { width: 300, height: 200 } } = nodeMeta;
+  const { style = {} } = useContainerNodeRenderProps();
+  const transform = node.getData(FlowNodeTransformData);
+  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();
+  }, []);
+  return /* @__PURE__ */ React3.createElement(
+    ContainerNodeContainerStyle,
+    {
+      className: "container-node-container",
+      style: {
+        width,
+        height,
+        outline: selected ? "1px solid var(--coz-stroke-hglt, #4E40E5)" : "",
+        ...style
+      },
+      ref: nodeRef,
+      "data-node-selected": String(selected),
+      onMouseDown: selectNode,
+      onClick: (e) => {
+        selectNode(e);
+      }
+    },
+    children
+  );
+};
+
+// src/container-node-render/components/border/index.tsx
+import React4 from "react";
+import { useNodeRender as useNodeRender5 } from "@flowgram.ai/free-layout-core";
+import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/document";
+
+// src/container-node-render/components/border/style.ts
+import styled4 from "styled-components";
+var ContainerNodeBorderStyle = styled4.div`
+  pointer-events: none;
+
+  position: absolute;
+
+  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;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 4%), 0 4px 12px 0 rgba(0, 0, 0, 2%);
+
+  &::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/container-node-render/components/border/index.tsx
+var ContainerNodeBorder = () => {
+  const { node } = useNodeRender5();
+  const transformData = node.getData(FlowNodeTransformData2);
+  const topWidth = Math.max(transformData.padding.top - 50, 50);
+  return /* @__PURE__ */ React4.createElement(
+    ContainerNodeBorderStyle,
+    {
+      className: "container-node-border",
+      style: {
+        borderTopWidth: topWidth
+      }
+    }
+  );
+};
+
+// src/container-node-render/components/ports/index.tsx
+import React5, { useEffect as useEffect2 } from "react";
+import { WorkflowPortRender } from "@flowgram.ai/free-lines-plugin";
+import { WorkflowNodePortsData as WorkflowNodePortsData2, useNodeRender as useNodeRender6 } from "@flowgram.ai/free-layout-core";
+var ContainerNodePorts = () => {
+  const { node, ports } = useNodeRender6();
+  const { renderPorts } = useContainerNodeRenderProps();
+  useEffect2(() => {
+    const portsData = node.getData(WorkflowNodePortsData2);
+    portsData.updateDynamicPorts();
+  }, [node]);
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, renderPorts.map((p) => /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      key: `canvas-port${p.id}`,
+      className: "container-node-port",
+      "data-port-id": p.id,
+      "data-port-type": p.type,
+      style: p.style
+    }
+  )), ports.map((p) => /* @__PURE__ */ React5.createElement(WorkflowPortRender, { key: p.id, entity: p })));
+};
+
+// src/container-node-render/components/form/index.tsx
+import React6 from "react";
+import { useNodeRender as useNodeRender7 } from "@flowgram.ai/free-layout-core";
+
+// src/container-node-render/components/form/style.ts
+import styled5 from "styled-components";
+var ContainerNodeFormStyle = styled5.div`
+  background-color: #fff;
+  border-radius: 8px 8px 0 0;
+  width: 100%;
+`;
+
+// src/container-node-render/components/form/index.tsx
+var ContainerNodeForm = () => {
+  const { form } = useNodeRender7();
+  if (!form) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(ContainerNodeFormStyle, null, form.render());
+};
+
+// src/container-node-render/render.tsx
+var ContainerNodeRender = ({ content }) => /* @__PURE__ */ React7.createElement(ContainerNodeContainer, null, /* @__PURE__ */ React7.createElement(ContainerNodeBackground, null), /* @__PURE__ */ React7.createElement(ContainerNodeBorder, null), /* @__PURE__ */ React7.createElement(ContainerNodeHeader, null, content), /* @__PURE__ */ React7.createElement(ContainerNodePorts, null));
+
+// 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 { FlowNodeTransformData as FlowNodeTransformData3, FlowNodeRenderData } 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 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);
+    if (!parentNode || !containerNode || !this.isContainer(parentNode) || !nodeJSON.meta?.position) {
+      return;
+    }
+    this.operationService.moveNode(node, {
+      parent: containerNode
+    });
+    const parentTransform = parentNode.getData(TransformData);
+    this.operationService.updateNodePosition(node, {
+      x: parentTransform.position.x + nodeJSON.meta.position.x,
+      y: parentTransform.position.y + nodeJSON.meta.position.y
+    });
+    parentTransform.fireChange();
+    await this.nextFrame();
+    parentTransform.fireChange();
+    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;
+    }
+    return true;
+  }
+  /** 初始化状态 */
+  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();
+        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);
+  }
+  /** 移除节点所有非法连线 */
+  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;
+    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.style.outline = "";
+      }
+    }
+    this.state.dropNode = dropNode;
+    if (!dropNode) {
+      return;
+    }
+    const renderData = dropNode.getData(FlowNodeRenderData);
+    const renderDom = renderData.node?.children?.[0];
+    if (renderDom) {
+      renderDom.style.outline = "1px solid var(--coz-stroke-hglt,#4e40e5)";
+    }
+  }
+  /** 获取容器节点transforms */
+  getContainerTransforms() {
+    return this.document.getRenderDatas(FlowNodeTransformData3, false).filter((transform) => {
+      const { entity } = transform;
+      if (entity.originParent) {
+        return entity.getNodeMeta().selectable && entity.originParent.getNodeMeta().selectable;
+      }
+      return entity.getNodeMeta().selectable;
+    }).filter((transform) => this.isContainer(transform.entity));
+  }
+  /** 放置节点到容器 */
+  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 || this.isContainer(dragNode) || !transforms?.length) {
+      return this.setDropNode(void 0);
+    }
+    const mousePos = this.playgroundConfig.getPosFromMouseEvent(nodeDragEvent.dragEvent);
+    const collisionTransform = this.getCollisionTransform({
+      targetPoint: mousePos,
+      transforms: this.state.transforms ?? []
+    });
+    const dropNode = collisionTransform?.entity;
+    if (!dropNode || dragNode.parent?.id === dropNode.id) {
+      return this.setDropNode(void 0);
+    }
+    const canDrop = this.dragService.canDropToNode({
+      dragNodeType: dragNode.flowNodeType,
+      dropNode
+    });
+    if (!canDrop.allowDrop) {
+      return this.setDropNode(void 0);
+    }
+    return this.setDropNode(canDrop.dropNode);
+  }
+  /** 将节点移入容器 */
+  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
+      )
+    );
+    await this.nextFrame();
+    this.emitter.fire({
+      type: "in" /* In */,
+      node,
+      sourceContainer: parentNode,
+      targetContainer: containerNode
+    });
+  }
+  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/plugin.tsx
+import React8 from "react";
+import { FlowRendererRegistry } from "@flowgram.ai/renderer";
+import { definePluginCreator } from "@flowgram.ai/core";
+var createContainerNodePlugin = definePluginCreator({
+  onBind: ({ bind }) => {
+    bind(NodeIntoContainerService).toSelf().inSingletonScope();
+  },
+  onInit(ctx, options) {
+    ctx.get(NodeIntoContainerService).init();
+    const registry = ctx.get(FlowRendererRegistry);
+    registry.registerReactComponent(ContainerNodeRenderKey, (props) => /* @__PURE__ */ React8.createElement(ContainerNodeRender, { ...props, content: options.renderContent }));
+  },
+  onReady(ctx, options) {
+    if (options.disableNodeIntoContainer !== true) {
+      ctx.get(NodeIntoContainerService).ready();
+    }
+  },
+  onDispose(ctx) {
+    ctx.get(NodeIntoContainerService).dispose();
+  }
+});
+export {
+  ContainerNodeBackground,
+  ContainerNodeBorder,
+  ContainerNodeContainer,
+  ContainerNodeForm,
+  ContainerNodeHeader,
+  ContainerNodePorts,
+  ContainerNodeRender,
+  ContainerNodeRenderKey,
+  NodeIntoContainerService,
+  NodeIntoContainerType,
+  createContainerNodePlugin
+};
+//# sourceMappingURL=index.js.map