@flowgram.ai/free-container-plugin 0.1.8 → 0.1.15

package/dist/esm/index.js

@@ -9,350 +9,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   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";
@@ -376,7 +32,7 @@ import {
   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 { FlowNodeTransformData, FlowNodeRenderData } from "@flowgram.ai/document";
 import { PlaygroundConfigEntity, TransformData } from "@flowgram.ai/core";
 var NodeIntoContainerService = class {
   constructor() {
@@ -440,6 +96,13 @@ var NodeIntoContainerService = class {
     if (!parentNode || !containerNode || !this.isContainer(parentNode)) {
       return false;
     }
+    const canDrop = this.dragService.canDropToNode({
+      dragNodeType: node.flowNodeType,
+      dropNode: containerNode
+    });
+    if (!canDrop.allowDrop) {
+      return false;
+    }
     return true;
   }
   /** 初始化状态 */
@@ -555,7 +218,7 @@ var NodeIntoContainerService = class {
       const renderData2 = this.state.dropNode.getData(FlowNodeRenderData);
       const renderDom2 = renderData2.node?.children?.[0];
       if (renderDom2) {
-        renderDom2.style.outline = "";
+        renderDom2.classList.remove("selected");
       }
     }
     this.state.dropNode = dropNode;
@@ -565,12 +228,12 @@ var NodeIntoContainerService = class {
     const renderData = dropNode.getData(FlowNodeRenderData);
     const renderDom = renderData.node?.children?.[0];
     if (renderDom) {
-      renderDom.style.outline = "1px solid var(--coz-stroke-hglt,#4e40e5)";
+      renderDom.classList.add("selected");
     }
   }
   /** 获取容器节点transforms */
   getContainerTransforms() {
-    return this.document.getRenderDatas(FlowNodeTransformData3, false).filter((transform) => {
+    return this.document.getRenderDatas(FlowNodeTransformData, false).filter((transform) => {
       const { entity } = transform;
       if (entity.originParent) {
         return entity.getNodeMeta().selectable && entity.originParent.getNodeMeta().selectable;
@@ -679,9 +342,169 @@ NodeIntoContainerService = __decorateClass([
   injectable()
 ], NodeIntoContainerService);
 
+// 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/components/background/index.tsx
+import React from "react";
+import { useCurrentEntity as useCurrentEntity2 } from "@flowgram.ai/free-layout-core";
+
+// src/sub-canvas/components/background/style.ts
+import styled from "styled-components";
+var SubCanvasBackgroundStyle = styled.div`
+  width: 100%;
+  height: 100%;
+  inset: 56px 18px 18px;
+  background-color: #f2f3f5;
+`;
+
+// src/sub-canvas/components/background/index.tsx
+var SubCanvasBackground = () => {
+  const node = useCurrentEntity2();
+  return /* @__PURE__ */ React.createElement(SubCanvasBackgroundStyle, { className: "sub-canvas-background", "data-flow-editor-selectable": "true" }, /* @__PURE__ */ React.createElement("svg", { width: "100%", height: "100%" }, /* @__PURE__ */ React.createElement("pattern", { id: "sub-canvas-dot-pattern", width: "20", height: "20", patternUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("circle", { cx: "1", cy: "1", r: "1", stroke: "#eceeef", fillOpacity: "0.5" })), /* @__PURE__ */ React.createElement(
+    "rect",
+    {
+      width: "100%",
+      height: "100%",
+      fill: "url(#sub-canvas-dot-pattern)",
+      "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 React3, { useLayoutEffect } from "react";
+import { useCurrentEntity as useCurrentEntity3 } from "@flowgram.ai/free-layout-core";
+
+// src/sub-canvas/components/render/style.ts
+import styled3 from "styled-components";
+var SubCanvasRenderStyle = styled3.div`
+  width: 100%;
+  height: 100%;
+`;
+
+// src/sub-canvas/components/render/index.tsx
+var SubCanvasRender = ({ className, style }) => {
+  const node = useCurrentEntity3();
+  const nodeSize = useNodeSize();
+  const { height, width } = nodeSize ?? {};
+  const nodeHeight = nodeSize?.height ?? 0;
+  const { padding } = node.transform;
+  useLayoutEffect(() => {
+    node.renderData.node.style.width = width + "px";
+    node.renderData.node.style.height = height + "px";
+  }, [height, width]);
+  return /* @__PURE__ */ React3.createElement(
+    SubCanvasRenderStyle,
+    {
+      className: `sub-canvas-render ${className ?? ""}`,
+      style: {
+        height: nodeHeight - padding.top,
+        ...style
+      },
+      "data-flow-editor-selectable": "true",
+      onDragStart: (e) => {
+        e.stopPropagation();
+      }
+    },
+    /* @__PURE__ */ React3.createElement(SubCanvasBorder, null, /* @__PURE__ */ React3.createElement(SubCanvasBackground, null))
+  );
+};
+
 // src/plugin.tsx
-import React8 from "react";
-import { FlowRendererRegistry } from "@flowgram.ai/renderer";
 import { definePluginCreator } from "@flowgram.ai/core";
 var createContainerNodePlugin = definePluginCreator({
   onBind: ({ bind }) => {
@@ -689,8 +512,6 @@ var createContainerNodePlugin = definePluginCreator({
   },
   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) {
@@ -702,16 +523,12 @@ var createContainerNodePlugin = definePluginCreator({
   }
 });
 export {
-  ContainerNodeBackground,
-  ContainerNodeBorder,
-  ContainerNodeContainer,
-  ContainerNodeForm,
-  ContainerNodeHeader,
-  ContainerNodePorts,
-  ContainerNodeRender,
-  ContainerNodeRenderKey,
   NodeIntoContainerService,
   NodeIntoContainerType,
-  createContainerNodePlugin
+  SubCanvasBackground,
+  SubCanvasBorder,
+  SubCanvasRender,
+  createContainerNodePlugin,
+  useNodeSize
 };
 //# sourceMappingURL=index.js.map