@flowgram.ai/free-lines-plugin 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,613 @@
+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/components/workflow-port-render/index.tsx
+import ReactDOM from "react-dom";
+import React2, { useEffect, useState } from "react";
+import classNames from "clsx";
+import {
+  WorkflowHoverService,
+  usePlaygroundReadonlyState,
+  WorkflowLinesManager
+} from "@flowgram.ai/free-layout-core";
+import { useService } from "@flowgram.ai/core";
+
+// src/constants/points.ts
+var STROKE_WIDTH_SLECTED = 3;
+var STROKE_WIDTH = 2;
+var PORT_BG_CLASS_NAME = "workflow-port-bg";
+
+// src/components/workflow-port-render/style.ts
+import styled from "styled-components";
+var WorkflowPointStyle = styled.div`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-top: -10px;
+  margin-left: -10px;
+  left: 50%;
+  top: 50%;
+  position: absolute;
+  // 非 hover 状态下的样式
+  border: none;
+
+  & > .symbol {
+    opacity: 0;
+  }
+
+  .bg-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    background-color: #fff;
+    transform: scale(0.5);
+    transition: all 0.2s linear 0s;
+  }
+
+  .bg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #9197F1;
+    transform: scale(0.4, 0.4);
+    transition: all 0.2s linear 0s;
+
+    &.hasError {
+      background: red;
+    }
+
+    .symbol {
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      opacity: 0;
+      pointer-events: none;
+      color: #fff;
+      transition: opacity 0.2s linear 0s;
+
+      & > svg {
+        width: 14px;
+        height: 14px;
+      }
+    }
+
+    .focus-circle {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 8px;
+      height: 8px;
+      opacity: 0;
+      background: #9197f1;
+      border-radius: 50%;
+      transition: opacity 0.2s linear 0s;
+    }
+  }
+
+  &.linked .bg:not(.hasError) {
+    background: #4d53e8;
+  }
+
+  &.hovered .bg:not(.hasError) {
+    border: none;
+    cursor: crosshair;
+    transform: scale(1, 1);
+    background: #4d53e8;
+
+    & > .symbol {
+      opacity: 1;
+    }
+  }
+
+  .cross-hair {
+    position: relative;
+    left: 2px;
+    top: 2px;
+
+    &::after,
+    &::before {
+      content: '';
+      background: #fff;
+      border-radius: 2px;
+      position: absolute;
+    }
+
+    &::after {
+      left: 4px;
+      width: 2px;
+      height: 6px;
+      box-shadow: 0 4px #fff;
+    }
+
+    &::before {
+      top: 4px;
+      width: 6px;
+      height: 2px;
+      box-shadow: 4px 0 #fff;
+    }
+`;
+
+// src/components/workflow-port-render/cross-hair.tsx
+import React from "react";
+function CrossHair() {
+  return /* @__PURE__ */ React.createElement("div", { className: "symbol" }, /* @__PURE__ */ React.createElement("div", { className: "cross-hair" }));
+}
+
+// src/components/workflow-port-render/index.tsx
+var WorkflowPortRender = (
+  // eslint-disable-next-line react/display-name
+  React2.memo((props) => {
+    const hoverService = useService(WorkflowHoverService);
+    const linesManager = useService(WorkflowLinesManager);
+    const { entity, onClick } = props;
+    const { portType, relativePosition, disabled } = entity;
+    const [targetElement, setTargetElement] = useState(entity.targetElement);
+    const [posX, updatePosX] = useState(relativePosition.x);
+    const [posY, updatePosY] = useState(relativePosition.y);
+    const [hovered, setHovered] = useState(false);
+    const [linked, setLinked] = useState(Boolean(entity?.lines?.length));
+    const [hasError, setHasError] = useState(props.entity.hasError);
+    const readonly = usePlaygroundReadonlyState();
+    useEffect(() => {
+      entity.validate();
+      setHasError(entity.hasError);
+      const dispose = entity.onEntityChange(() => {
+        if (entity.targetElement) {
+          if (entity.targetElement !== targetElement) {
+            setTargetElement(entity.targetElement);
+          }
+          return;
+        }
+        const newPos = entity.relativePosition;
+        updatePosX(Math.round(newPos.x));
+        updatePosY(Math.round(newPos.y));
+      });
+      const dispose2 = hoverService.onHoveredChange((id) => {
+        setHovered(hoverService.isHovered(entity.id));
+      });
+      const dispose3 = entity.onErrorChanged(() => {
+        setHasError(entity.hasError);
+      });
+      const dispose4 = linesManager.onAvailableLinesChange(() => {
+        setTimeout(() => {
+          if (linesManager.disposed || entity.disposed) return;
+          setLinked(Boolean(entity.lines.length));
+        }, 0);
+      });
+      return () => {
+        dispose.dispose();
+        dispose2.dispose();
+        dispose3.dispose();
+        dispose4.dispose();
+      };
+    }, [hoverService, entity, targetElement]);
+    const className = classNames(props.className || "", {
+      hovered: !readonly && hovered && !disabled && portType !== "input",
+      // 有线条链接的时候深蓝色小圆点
+      linked
+    });
+    const content = /* @__PURE__ */ React2.createElement(
+      WorkflowPointStyle,
+      {
+        className,
+        style: targetElement ? props.style : { ...props.style, left: posX, top: posY },
+        onClick,
+        "data-port-entity-id": entity.id,
+        "data-port-entity-type": entity.portType,
+        "data-testid": "sdk.workflow.canvas.node.port"
+      },
+      /* @__PURE__ */ React2.createElement("div", { className: classNames("bg-circle", "workflow-bg-circle") }),
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          className: classNames({
+            bg: true,
+            [PORT_BG_CLASS_NAME]: true,
+            "workflow-point-bg": true,
+            hasError
+          })
+        },
+        /* @__PURE__ */ React2.createElement(CrossHair, null)
+      ),
+      /* @__PURE__ */ React2.createElement("div", { className: "focus-circle" })
+    );
+    if (targetElement) {
+      return ReactDOM.createPortal(content, targetElement);
+    }
+    return content;
+  })
+);
+
+// src/constants/lines.ts
+var LINE_OFFSET = 6;
+
+// src/create-free-lines-plugin.ts
+import { definePluginCreator } from "@flowgram.ai/core";
+
+// src/layer/lines-layer.tsx
+import ReactDOM2 from "react-dom";
+import React7, { useLayoutEffect, useState as useState2 } from "react";
+import { inject, injectable } from "inversify";
+import { domUtils } from "@flowgram.ai/utils";
+import {
+  nanoid,
+  WorkflowDocument,
+  WorkflowHoverService as WorkflowHoverService2,
+  WorkflowLineEntity,
+  WorkflowNodeEntity,
+  WorkflowPortEntity,
+  WorkflowSelectService
+} from "@flowgram.ai/free-layout-core";
+import { Layer, observeEntities, observeEntityDatas, TransformData } from "@flowgram.ai/core";
+
+// src/components/lines/index.tsx
+import React6, { memo } from "react";
+import { LineType } from "@flowgram.ai/free-layout-core";
+
+// src/components/lines/fold-line/index.tsx
+import React4 from "react";
+import { POINT_RADIUS } from "@flowgram.ai/free-layout-core";
+
+// src/components/lines/index.style.ts
+import styled2 from "styled-components";
+var LineStyle = styled2.div.attrs({
+  className: "gedit-flow-activity-edge"
+})`
+  position: absolute;
+
+  @keyframes flowingDash {
+    to {
+      stroke-dashoffset: -13;
+    }
+  }
+
+  .flowing-line {
+    stroke-dasharray: 8, 5;
+    animation: flowingDash 0.5s linear infinite;
+  }
+`;
+
+// src/components/lines/arrow/index.tsx
+import React3 from "react";
+function ArrowRenderer({
+  id,
+  pos,
+  reverseArrow,
+  strokeWidth,
+  vertical,
+  hide
+}) {
+  if (hide) {
+    return null;
+  }
+  const arrowPath = vertical ? reverseArrow ? `M ${pos.x - LINE_OFFSET},${pos.y} L ${pos.x},${pos.y - LINE_OFFSET} L ${pos.x + LINE_OFFSET},${pos.y}` : `M ${pos.x - LINE_OFFSET},${pos.y - LINE_OFFSET} L ${pos.x},${pos.y} L ${pos.x + LINE_OFFSET},${pos.y - LINE_OFFSET}` : reverseArrow ? `M ${pos.x},${pos.y + LINE_OFFSET} L ${pos.x - LINE_OFFSET},${pos.y} L ${pos.x},${pos.y - LINE_OFFSET}` : `M ${pos.x - LINE_OFFSET},${pos.y - LINE_OFFSET} L ${pos.x},${pos.y} L ${pos.x - LINE_OFFSET},${pos.y + LINE_OFFSET}`;
+  return /* @__PURE__ */ React3.createElement(
+    "path",
+    {
+      d: arrowPath,
+      strokeLinecap: "round",
+      stroke: `url(#${id})`,
+      fill: "none",
+      strokeWidth
+    }
+  );
+}
+
+// src/components/lines/fold-line/index.tsx
+var FoldLineRender = (props) => {
+  const { selected, color, line, children } = props;
+  const { to, from } = line.position;
+  const strokeWidth = selected ? STROKE_WIDTH_SLECTED : STROKE_WIDTH;
+  const arrowToPos = {
+    x: to.x - POINT_RADIUS,
+    y: to.y
+  };
+  const arrowFromPos = {
+    x: from.x + POINT_RADIUS + LINE_OFFSET,
+    y: from.y
+  };
+  return /* @__PURE__ */ React4.createElement(LineStyle, null, children, /* @__PURE__ */ React4.createElement("svg", { overflow: "visible" }, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement(
+    "linearGradient",
+    {
+      x1: "0%",
+      y1: "100%",
+      x2: "100%",
+      y2: "100%",
+      id: line.id,
+      gradientUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ React4.createElement("stop", { stopColor: color, offset: "0%" }),
+    /* @__PURE__ */ React4.createElement("stop", { stopColor: color, offset: "100%" })
+  )), /* @__PURE__ */ React4.createElement("g", null, /* @__PURE__ */ React4.createElement(
+    "path",
+    {
+      d: line.bezier.foldPath,
+      fill: "none",
+      strokeLinecap: "round",
+      stroke: color,
+      strokeWidth,
+      className: line.flowing || line.processing ? "flowing-line" : ""
+    }
+  ), /* @__PURE__ */ React4.createElement(
+    ArrowRenderer,
+    {
+      id: line.id,
+      reverseArrow: line.reverse,
+      pos: line.reverse ? arrowFromPos : arrowToPos,
+      strokeWidth,
+      hide: line.hideArrow
+    }
+  ))));
+};
+
+// src/components/lines/bezier-line/index.tsx
+import React5 from "react";
+import { POINT_RADIUS as POINT_RADIUS2 } from "@flowgram.ai/free-layout-core";
+var PADDING = 12;
+var BezierLineRender = (props) => {
+  const { line, color, fromColor, toColor, selected, children, strokePrefix } = props;
+  const { bbox } = line.bezier;
+  const { position, reverse, vertical, hideArrow } = line;
+  const toRelative = (p) => ({
+    x: p.x - bbox.x + PADDING,
+    y: p.y - bbox.y + PADDING
+  });
+  const fromPos = toRelative(position.from);
+  const toPos = toRelative(position.to);
+  const arrowToPos = vertical ? { x: toPos.x, y: toPos.y - POINT_RADIUS2 } : { x: toPos.x - POINT_RADIUS2, y: toPos.y };
+  const arrowFromPos = vertical ? { x: fromPos.x, y: fromPos.y + POINT_RADIUS2 + LINE_OFFSET } : { x: fromPos.x + POINT_RADIUS2 + LINE_OFFSET, y: fromPos.y };
+  const controls = line.bezier.controls.map((c) => toRelative(c));
+  const getLinearStartColor = () => {
+    if (vertical) {
+      return fromPos.y < arrowToPos.y ? fromColor : toColor;
+    }
+    return fromPos.x < arrowToPos.x ? fromColor : toColor;
+  };
+  const getLinearEndColor = () => {
+    if (vertical) {
+      return fromPos.y < arrowToPos.y ? toColor : fromColor;
+    }
+    return fromPos.x < arrowToPos.x ? toColor : fromColor;
+  };
+  const linearStartColor = getLinearStartColor();
+  const linearEndColor = getLinearEndColor();
+  const getPathData = () => {
+    const controlPoints = controls.map((s) => `${s.x} ${s.y}`).join(",");
+    const curveType = controls.length === 1 ? "S" : "C";
+    if (vertical) {
+      return `M${fromPos.x} ${fromPos.y + POINT_RADIUS2} ${curveType} ${controlPoints}, ${arrowToPos.x} ${arrowToPos.y}`;
+    }
+    return `M${fromPos.x + POINT_RADIUS2} ${fromPos.y} ${curveType} ${controlPoints}, ${arrowToPos.x} ${arrowToPos.y}`;
+  };
+  const pathData = getPathData();
+  const strokeWidth = selected ? STROKE_WIDTH_SLECTED : STROKE_WIDTH;
+  const strokeID = strokePrefix ? `${strokePrefix}-${line.id}` : line.id;
+  const path = /* @__PURE__ */ React5.createElement(
+    "path",
+    {
+      d: pathData,
+      fill: "none",
+      stroke: `url(#${strokeID})`,
+      strokeWidth,
+      className: line.processing || line.flowing ? "flowing-line" : ""
+    }
+  );
+  return /* @__PURE__ */ React5.createElement(
+    LineStyle,
+    {
+      style: {
+        left: bbox.x - PADDING,
+        top: bbox.y - PADDING,
+        position: "absolute"
+      }
+    },
+    children,
+    /* @__PURE__ */ React5.createElement("svg", { width: bbox.width + PADDING * 2, height: bbox.height + PADDING * 2 }, /* @__PURE__ */ React5.createElement("defs", null, /* @__PURE__ */ React5.createElement(
+      "linearGradient",
+      {
+        x1: vertical ? "100%" : "0%",
+        y1: vertical ? "0%" : "100%",
+        x2: "100%",
+        y2: "100%",
+        id: strokeID,
+        gradientUnits: "userSpaceOnUse"
+      },
+      /* @__PURE__ */ React5.createElement("stop", { stopColor: color || linearStartColor, offset: "0%" }),
+      /* @__PURE__ */ React5.createElement("stop", { stopColor: color || linearEndColor, offset: "100%" })
+    )), /* @__PURE__ */ React5.createElement("g", null, path, /* @__PURE__ */ React5.createElement(
+      ArrowRenderer,
+      {
+        id: strokeID,
+        reverseArrow: reverse,
+        pos: reverse ? arrowFromPos : arrowToPos,
+        strokeWidth,
+        vertical,
+        hide: hideArrow
+      }
+    ), props.showControlPoints ? controls.map((c, i) => /* @__PURE__ */ React5.createElement("circle", { key: i, cx: c.x, cy: c.y, r: "4", fill: "#ccc" })) : void 0))
+  );
+};
+
+// src/components/lines/index.tsx
+var LineTypeRender = (props) => {
+  if (props.lineType === LineType.LINE_CHART) {
+    return /* @__PURE__ */ React6.createElement(FoldLineRender, { ...props });
+  }
+  return /* @__PURE__ */ React6.createElement(BezierLineRender, { ...props });
+};
+var LineRender = memo(
+  LineTypeRender,
+  (prevProps, nextProps) => prevProps.version === nextProps.version
+);
+
+// src/layer/lines-layer.tsx
+var LinesLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.layerID = nanoid();
+    this.mountedLines = /* @__PURE__ */ new Map();
+    this._version = 0;
+    /**
+     * 节点线条
+     */
+    this.node = domUtils.createDivWithClass("gedit-playground-layer gedit-flow-lines-layer");
+  }
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  onReady() {
+    this.pipelineNode.appendChild(this.node);
+    this.toDispose.pushAll([
+      this.selectService.onSelectionChanged(() => this.render()),
+      this.hoverService.onHoveredChange(() => this.render()),
+      this.workflowDocument.linesManager.onForceUpdate(() => {
+        this.mountedLines.clear();
+        this.bumpVersion();
+        this.render();
+      })
+    ]);
+  }
+  dispose() {
+    this.mountedLines.clear();
+  }
+  render() {
+    const [, forceUpdate] = useState2({});
+    useLayoutEffect(() => {
+      const updateLines = () => {
+        let needsUpdate = false;
+        this.lines.forEach((line) => {
+          const oldVersion = line.bezierDataVersion;
+          line.refreshBezier();
+          if (line.bezierDataVersion !== oldVersion) {
+            needsUpdate = true;
+          }
+        });
+        if (needsUpdate) {
+          forceUpdate({});
+        }
+      };
+      const rafId = requestAnimationFrame(updateLines);
+      return () => cancelAnimationFrame(rafId);
+    }, [this.lines]);
+    const lines = this.lines.map((line) => this.renderLine(line));
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, lines);
+  }
+  // 用来绕过 memo
+  bumpVersion() {
+    this._version = this._version + 1;
+    if (this._version === Number.MAX_SAFE_INTEGER) {
+      this._version = 0;
+    }
+  }
+  lineProps(line) {
+    const { lineType } = this.workflowDocument.linesManager;
+    const selected = this.selectService.isSelected(line.id);
+    const { version: lineVersion, bezierDataVersion, color } = line;
+    const version = `${this._version}:${lineVersion}:${bezierDataVersion}:${lineType}:${color}:${selected}`;
+    return {
+      key: line.id,
+      color: line.color,
+      selected,
+      line,
+      lineType,
+      version,
+      strokePrefix: this.layerID
+    };
+  }
+  lineComponent(props) {
+    const RenderInsideLine = this.options.renderInsideLine ?? (() => /* @__PURE__ */ React7.createElement(React7.Fragment, null));
+    return /* @__PURE__ */ React7.createElement(LineRender, { ...props }, /* @__PURE__ */ React7.createElement(RenderInsideLine, { ...props }));
+  }
+  renderLine(line) {
+    const lineProps = this.lineProps(line);
+    const cache = this.mountedLines.get(line.id);
+    const isCached = cache !== void 0;
+    const { portal: cachedPortal, version: cachedVersion } = cache ?? {};
+    if (isCached && cachedVersion === lineProps.version) {
+      return cachedPortal;
+    }
+    if (!isCached) {
+      this.renderElement.appendChild(line.node);
+      line.onDispose(() => {
+        this.mountedLines.delete(line.id);
+        line.node.remove();
+      });
+    }
+    const portal = ReactDOM2.createPortal(this.lineComponent(lineProps), line.node);
+    this.mountedLines.set(line.id, { line, portal, version: lineProps.version });
+    return portal;
+  }
+  get renderElement() {
+    if (typeof this.options.renderElement === "function") {
+      const element = this.options.renderElement();
+      if (element) {
+        return element;
+      }
+    } else if (typeof this.options.renderElement !== "undefined") {
+      return this.options.renderElement;
+    }
+    return this.node;
+  }
+};
+LinesLayer.type = "WorkflowLinesLayer";
+__decorateClass([
+  inject(WorkflowHoverService2)
+], LinesLayer.prototype, "hoverService", 2);
+__decorateClass([
+  inject(WorkflowSelectService)
+], LinesLayer.prototype, "selectService", 2);
+__decorateClass([
+  observeEntities(WorkflowLineEntity)
+], LinesLayer.prototype, "lines", 2);
+__decorateClass([
+  observeEntities(WorkflowPortEntity)
+], LinesLayer.prototype, "ports", 2);
+__decorateClass([
+  observeEntityDatas(WorkflowNodeEntity, TransformData)
+], LinesLayer.prototype, "trans", 2);
+__decorateClass([
+  inject(WorkflowDocument)
+], LinesLayer.prototype, "workflowDocument", 2);
+LinesLayer = __decorateClass([
+  injectable()
+], LinesLayer);
+
+// src/create-free-lines-plugin.ts
+var createFreeLinesPlugin = definePluginCreator({
+  onInit: (ctx, opts) => {
+    ctx.playground.registerLayer(LinesLayer, {
+      ...opts,
+      renderElement: () => {
+        if (typeof opts.renderElement === "function") {
+          return opts.renderElement(ctx);
+        } else {
+          return opts.renderElement;
+        }
+      }
+    });
+  }
+});
+export {
+  LINE_OFFSET,
+  LinesLayer,
+  WorkflowPortRender,
+  createFreeLinesPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/workflow-port-render/index.tsx","../../src/constants/points.ts","../../src/components/workflow-port-render/style.ts","../../src/components/workflow-port-render/cross-hair.tsx","../../src/constants/lines.ts","../../src/create-free-lines-plugin.ts","../../src/layer/lines-layer.tsx","../../src/components/lines/index.tsx","../../src/components/lines/fold-line/index.tsx","../../src/components/lines/index.style.ts","../../src/components/lines/arrow/index.tsx","../../src/components/lines/bezier-line/index.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\nimport React, { useEffect, useState } from 'react';\n\nimport classNames from 'clsx';\nimport {\n  WorkflowHoverService,\n  type WorkflowPortEntity,\n  usePlaygroundReadonlyState,\n  WorkflowLinesManager,\n} from '@flowgram.ai/free-layout-core';\nimport { useService } from '@flowgram.ai/core';\n\nimport { PORT_BG_CLASS_NAME } from '../../constants/points';\nimport { WorkflowPointStyle } from './style';\nimport CrossHair from './cross-hair';\n\nexport interface WorkflowPortRenderProps {\n  entity: WorkflowPortEntity;\n  className?: string;\n  style?: React.CSSProperties;\n  onClick?: React.MouseEventHandler<HTMLDivElement>;\n}\n\nexport const WorkflowPortRender: React.FC<WorkflowPortRenderProps> =\n  // eslint-disable-next-line react/display-name\n  React.memo<WorkflowPortRenderProps>((props: WorkflowPortRenderProps) => {\n    const hoverService = useService<WorkflowHoverService>(WorkflowHoverService);\n    const linesManager = useService<WorkflowLinesManager>(WorkflowLinesManager);\n    const { entity, onClick } = props;\n    const { portType, relativePosition, disabled } = entity;\n    const [targetElement, setTargetElement] = useState(entity.targetElement);\n    const [posX, updatePosX] = useState(relativePosition.x);\n    const [posY, updatePosY] = useState(relativePosition.y);\n    const [hovered, setHovered] = useState(false);\n    const [linked, setLinked] = useState(Boolean(entity?.lines?.length));\n    const [hasError, setHasError] = useState(props.entity.hasError);\n    const readonly = usePlaygroundReadonlyState();\n\n    useEffect(() => {\n      // useEffect 时序问题可能导致 port.hasError 非最新，需重新触发一次 validate\n      entity.validate();\n      setHasError(entity.hasError);\n      const dispose = entity.onEntityChange(() => {\n        // 如果有挂载的节点，不需要更新位置信息\n        if (entity.targetElement) {\n          if (entity.targetElement !== targetElement) {\n            setTargetElement(entity.targetElement);\n          }\n          return;\n        }\n        const newPos = entity.relativePosition;\n        // 加上 round 避免点位抖动\n        updatePosX(Math.round(newPos.x));\n        updatePosY(Math.round(newPos.y));\n      });\n      const dispose2 = hoverService.onHoveredChange((id) => {\n        setHovered(hoverService.isHovered(entity.id));\n      });\n      const dispose3 = entity.onErrorChanged(() => {\n        setHasError(entity.hasError);\n      });\n      const dispose4 = linesManager.onAvailableLinesChange(() => {\n        setTimeout(() => {\n          if (linesManager.disposed || entity.disposed) return;\n          setLinked(Boolean(entity.lines.length));\n        }, 0);\n      });\n      return () => {\n        dispose.dispose();\n        dispose2.dispose();\n        dispose3.dispose();\n        dispose4.dispose();\n      };\n    }, [hoverService, entity, targetElement]);\n\n    // 监听变化\n    const className = classNames(props.className || '', {\n      hovered: !readonly && hovered && !disabled && portType !== 'input',\n      // 有线条链接的时候深蓝色小圆点\n      linked,\n    });\n    const content = (\n      <WorkflowPointStyle\n        className={className}\n        style={targetElement ? props.style : { ...props.style, left: posX, top: posY }}\n        onClick={onClick}\n        data-port-entity-id={entity.id}\n        data-port-entity-type={entity.portType}\n        data-testid=\"sdk.workflow.canvas.node.port\"\n      >\n        <div className={classNames('bg-circle', 'workflow-bg-circle')}></div>\n        <div\n          className={classNames({\n            bg: true,\n            [PORT_BG_CLASS_NAME]: true,\n            'workflow-point-bg': true,\n            hasError,\n          })}\n        >\n          <CrossHair />\n        </div>\n        <div className=\"focus-circle\" />\n      </WorkflowPointStyle>\n    );\n    if (targetElement) {\n      return ReactDOM.createPortal(content, targetElement);\n    }\n    return content;\n  });\n","// 连接点半径\n\nexport const STROKE_WIDTH_SLECTED = 3;\n\nexport const STROKE_WIDTH = 2;\n\nexport const PORT_BG_CLASS_NAME = 'workflow-port-bg';\n","import styled from 'styled-components';\n\nexport const WorkflowPointStyle = styled.div`\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  margin-top: -10px;\n  margin-left: -10px;\n  left: 50%;\n  top: 50%;\n  position: absolute;\n  // 非 hover 状态下的样式\n  border: none;\n\n  & > .symbol {\n    opacity: 0;\n  }\n\n  .bg-circle {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    background-color: #fff;\n    transform: scale(0.5);\n    transition: all 0.2s linear 0s;\n  }\n\n  .bg {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background: #9197F1;\n    transform: scale(0.4, 0.4);\n    transition: all 0.2s linear 0s;\n\n    &.hasError {\n      background: red;\n    }\n\n    .symbol {\n      position: absolute;\n      width: 14px;\n      height: 14px;\n      opacity: 0;\n      pointer-events: none;\n      color: #fff;\n      transition: opacity 0.2s linear 0s;\n\n      & > svg {\n        width: 14px;\n        height: 14px;\n      }\n    }\n\n    .focus-circle {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: 8px;\n      height: 8px;\n      opacity: 0;\n      background: #9197f1;\n      border-radius: 50%;\n      transition: opacity 0.2s linear 0s;\n    }\n  }\n\n  &.linked .bg:not(.hasError) {\n    background: #4d53e8;\n  }\n\n  &.hovered .bg:not(.hasError) {\n    border: none;\n    cursor: crosshair;\n    transform: scale(1, 1);\n    background: #4d53e8;\n\n    & > .symbol {\n      opacity: 1;\n    }\n  }\n\n  .cross-hair {\n    position: relative;\n    left: 2px;\n    top: 2px;\n\n    &::after,\n    &::before {\n      content: '';\n      background: #fff;\n      border-radius: 2px;\n      position: absolute;\n    }\n\n    &::after {\n      left: 4px;\n      width: 2px;\n      height: 6px;\n      box-shadow: 0 4px #fff;\n    }\n\n    &::before {\n      top: 4px;\n      width: 6px;\n      height: 2px;\n      box-shadow: 4px 0 #fff;\n    }\n`;\n","import React from 'react';\n\n// demo 环境自绘 cross-hair，正式环境使用 IconAdd\nexport default function CrossHair(): JSX.Element {\n  return (\n    <div className=\"symbol\">\n      <div className=\"cross-hair\" />\n    </div>\n  );\n}\n","// 箭头宽度\nexport const LINE_OFFSET = 6;\n","import { definePluginCreator, PluginContext } from '@flowgram.ai/core';\n\nimport { FreeLinesPluginOptions } from './type';\nimport { LinesLayer } from './layer';\n\nexport const createFreeLinesPlugin = definePluginCreator({\n  onInit: (ctx: PluginContext, opts: FreeLinesPluginOptions) => {\n    ctx.playground.registerLayer(LinesLayer, {\n      ...opts,\n      renderElement: () => {\n        if (typeof opts.renderElement === 'function') {\n          return opts.renderElement(ctx);\n        } else {\n          return opts.renderElement;\n        }\n      },\n    });\n  },\n});\n","import ReactDOM from 'react-dom';\nimport React, { ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { inject, injectable } from 'inversify';\nimport { domUtils } from '@flowgram.ai/utils';\nimport {\n  nanoid,\n  WorkflowDocument,\n  WorkflowHoverService,\n  WorkflowLineEntity,\n  WorkflowNodeEntity,\n  WorkflowPortEntity,\n  WorkflowSelectService,\n} from '@flowgram.ai/free-layout-core';\nimport { Layer, observeEntities, observeEntityDatas, TransformData } from '@flowgram.ai/core';\n\nimport { LineRenderProps, LinesLayerOptions } from '../type';\nimport { LineRender } from '../components/lines';\n\n@injectable()\nexport class LinesLayer extends Layer<LinesLayerOptions> {\n  static type = 'WorkflowLinesLayer';\n\n  @inject(WorkflowHoverService) hoverService: WorkflowHoverService;\n\n  @inject(WorkflowSelectService) selectService: WorkflowSelectService;\n\n  @observeEntities(WorkflowLineEntity) readonly lines: WorkflowLineEntity[];\n\n  @observeEntities(WorkflowPortEntity) readonly ports: WorkflowPortEntity[];\n\n  @observeEntityDatas(WorkflowNodeEntity, TransformData)\n  readonly trans: TransformData[];\n\n  @inject(WorkflowDocument) protected workflowDocument: WorkflowDocument;\n\n  private layerID = nanoid();\n\n  private mountedLines: Map<\n    string,\n    {\n      line: WorkflowLineEntity;\n      portal: ReactNode;\n      version: string;\n    }\n  > = new Map();\n\n  private _version = 0;\n\n  /**\n   * 节点线条\n   */\n  public node = domUtils.createDivWithClass('gedit-playground-layer gedit-flow-lines-layer');\n\n  public onZoom(scale: number): void {\n    this.node.style.transform = `scale(${scale})`;\n  }\n\n  public onReady() {\n    this.pipelineNode.appendChild(this.node);\n    this.toDispose.pushAll([\n      this.selectService.onSelectionChanged(() => this.render()),\n      this.hoverService.onHoveredChange(() => this.render()),\n      this.workflowDocument.linesManager.onForceUpdate(() => {\n        this.mountedLines.clear();\n        this.bumpVersion();\n        this.render();\n      }),\n    ]);\n  }\n\n  public dispose() {\n    this.mountedLines.clear();\n  }\n\n  public render(): JSX.Element {\n    const [, forceUpdate] = useState({});\n\n    useLayoutEffect(() => {\n      const updateLines = (): void => {\n        let needsUpdate = false;\n\n        // 批量处理所有线条的更新\n        this.lines.forEach((line) => {\n          const oldVersion = line.bezierDataVersion;\n          line.refreshBezier();\n          // 如果有任何一条线发生变化，标记需要更新\n          if (line.bezierDataVersion !== oldVersion) {\n            needsUpdate = true;\n          }\n        });\n\n        // 只在确实需要更新时触发重渲染\n        if (needsUpdate) {\n          forceUpdate({});\n        }\n      };\n\n      const rafId = requestAnimationFrame(updateLines);\n      return () => cancelAnimationFrame(rafId);\n    }, [this.lines]); // 依赖项包含 lines\n\n    const lines = this.lines.map((line) => this.renderLine(line));\n    return <>{lines}</>;\n  }\n\n  // 用来绕过 memo\n  private bumpVersion() {\n    this._version = this._version + 1;\n    if (this._version === Number.MAX_SAFE_INTEGER) {\n      this._version = 0;\n    }\n  }\n\n  private lineProps(line: WorkflowLineEntity): LineRenderProps {\n    const { lineType } = this.workflowDocument.linesManager;\n    const selected = this.selectService.isSelected(line.id);\n    const { version: lineVersion, bezierDataVersion, color } = line;\n\n    const version = `${this._version}:${lineVersion}:${bezierDataVersion}:${lineType}:${color}:${selected}`;\n    return {\n      key: line.id,\n      color: line.color,\n      selected,\n      line,\n      lineType,\n      version,\n      strokePrefix: this.layerID,\n    };\n  }\n\n  private lineComponent(props: LineRenderProps): ReactNode {\n    const RenderInsideLine = this.options.renderInsideLine ?? (() => <></>);\n    return (\n      <LineRender {...props}>\n        <RenderInsideLine {...props} />\n      </LineRender>\n    );\n  }\n\n  private renderLine(line: WorkflowLineEntity): ReactNode {\n    const lineProps = this.lineProps(line);\n    const cache = this.mountedLines.get(line.id);\n    const isCached = cache !== undefined;\n    const { portal: cachedPortal, version: cachedVersion } = cache ?? {};\n    if (isCached && cachedVersion === lineProps.version) {\n      // 如果已有缓存且版本相同，则直接返回缓存的 portal\n      return cachedPortal;\n    }\n    if (!isCached) {\n      // 如果缓存不存在，则将 line 挂载到 renderElement 上\n      this.renderElement.appendChild(line.node);\n      line.onDispose(() => {\n        this.mountedLines.delete(line.id);\n        line.node.remove();\n      });\n    }\n    // 刷新缓存\n    const portal = ReactDOM.createPortal(this.lineComponent(lineProps), line.node);\n    this.mountedLines.set(line.id, { line, portal, version: lineProps.version });\n    return portal;\n  }\n\n  private get renderElement(): HTMLElement {\n    if (typeof this.options.renderElement === 'function') {\n      const element = this.options.renderElement();\n      if (element) {\n        return element;\n      }\n    } else if (typeof this.options.renderElement !== 'undefined') {\n      return this.options.renderElement as HTMLElement;\n    }\n    return this.node;\n  }\n}\n","import React, { memo } from 'react';\n\nimport { LineType } from '@flowgram.ai/free-layout-core';\n\nimport type { LineRenderProps } from '../../type';\nimport { FoldLineRender } from './fold-line';\nimport { BezierLineRender } from './bezier-line';\n\nconst LineTypeRender = (props: LineRenderProps) => {\n  if (props.lineType === LineType.LINE_CHART) {\n    return <FoldLineRender {...props} />;\n  }\n  return <BezierLineRender {...props} />;\n};\n\nexport const LineRender = memo(\n  LineTypeRender,\n  (prevProps, nextProps) => prevProps.version === nextProps.version\n);\n","import React from 'react';\n\nimport { POINT_RADIUS } from '@flowgram.ai/free-layout-core';\n\nimport { LineStyle } from '../index.style';\nimport ArrowRenderer from '../arrow';\nimport { LineRenderProps } from '../../../type';\nimport { STROKE_WIDTH, STROKE_WIDTH_SLECTED } from '../../../constants/points';\nimport { LINE_OFFSET } from '../../../constants/lines';\n\n/**\n * 折叠线\n */\n// eslint-disable-next-line react/display-name\nexport const FoldLineRender = (props: LineRenderProps) => {\n  const { selected, color, line, children } = props;\n  const { to, from } = line.position;\n  const strokeWidth = selected ? STROKE_WIDTH_SLECTED : STROKE_WIDTH;\n\n  // 真正连接线需要到的点的位置\n  const arrowToPos = {\n    x: to.x - POINT_RADIUS,\n    y: to.y,\n  };\n  const arrowFromPos = {\n    x: from.x + POINT_RADIUS + LINE_OFFSET,\n    y: from.y,\n  };\n\n  return (\n    <LineStyle>\n      {children}\n      <svg overflow=\"visible\">\n        <defs>\n          <linearGradient\n            x1=\"0%\"\n            y1=\"100%\"\n            x2=\"100%\"\n            y2=\"100%\"\n            id={line.id}\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor={color} offset=\"0%\" />\n            <stop stopColor={color} offset=\"100%\" />\n          </linearGradient>\n        </defs>\n        <g>\n          <path\n            d={line.bezier.foldPath}\n            fill=\"none\"\n            strokeLinecap=\"round\"\n            stroke={color}\n            strokeWidth={strokeWidth}\n            className={line.flowing || line.processing ? 'flowing-line' : ''}\n          />\n          <ArrowRenderer\n            id={line.id}\n            reverseArrow={line.reverse}\n            pos={line.reverse ? arrowFromPos : arrowToPos}\n            strokeWidth={strokeWidth}\n            hide={line.hideArrow}\n          />\n        </g>\n      </svg>\n    </LineStyle>\n  );\n};\n","import styled from 'styled-components';\n\n// 添加一个固定类名，用于选中该节点\n\nexport const LineStyle = styled.div.attrs({\n  className: 'gedit-flow-activity-edge',\n})`\n  position: absolute;\n\n  @keyframes flowingDash {\n    to {\n      stroke-dashoffset: -13;\n    }\n  }\n\n  .flowing-line {\n    stroke-dasharray: 8, 5;\n    animation: flowingDash 0.5s linear infinite;\n  }\n`;\n","import React from 'react';\n\nimport { LINE_OFFSET } from '../../../constants/lines';\n\nexport default function ArrowRenderer({\n  id,\n  pos,\n  reverseArrow,\n  strokeWidth,\n  vertical,\n  hide,\n}: {\n  id: string;\n  strokeWidth: number;\n  reverseArrow: boolean;\n  pos: {\n    x: number;\n    y: number;\n  };\n  vertical?: boolean;\n  hide?: boolean;\n}) {\n  if (hide) {\n    return null;\n  }\n  const arrowPath = vertical\n    ? reverseArrow\n      ? `M ${pos.x - LINE_OFFSET},${pos.y} L ${pos.x},${pos.y - LINE_OFFSET} L ${\n          pos.x + LINE_OFFSET\n        },${pos.y}`\n      : `M ${pos.x - LINE_OFFSET},${pos.y - LINE_OFFSET} L ${pos.x},${pos.y} L ${\n          pos.x + LINE_OFFSET\n        },${pos.y - LINE_OFFSET}`\n    : reverseArrow\n    ? `M ${pos.x},${pos.y + LINE_OFFSET} L ${pos.x - LINE_OFFSET},${pos.y} L ${pos.x},${\n        pos.y - LINE_OFFSET\n      }`\n    : `M ${pos.x - LINE_OFFSET},${pos.y - LINE_OFFSET} L ${pos.x},${pos.y} L ${\n        pos.x - LINE_OFFSET\n      },${pos.y + LINE_OFFSET}`;\n\n  return (\n    <path\n      d={arrowPath}\n      strokeLinecap=\"round\"\n      stroke={`url(#${id})`}\n      fill=\"none\"\n      strokeWidth={strokeWidth}\n    />\n  );\n}\n","import React from 'react';\n\nimport { type IPoint } from '@flowgram.ai/utils';\nimport { POINT_RADIUS } from '@flowgram.ai/free-layout-core';\n\nimport { LineStyle } from '../index.style';\nimport ArrowRenderer from '../arrow';\nimport { LineRenderProps } from '../../../type';\nimport { STROKE_WIDTH_SLECTED, STROKE_WIDTH } from '../../../constants/points';\nimport { LINE_OFFSET } from '../../../constants/lines';\n\nconst PADDING = 12;\n\n// eslint-disable-next-line react/display-name\nexport const BezierLineRender = (props: LineRenderProps) => {\n  const { line, color, fromColor, toColor, selected, children, strokePrefix } = props;\n  const { bbox } = line.bezier;\n  const { position, reverse, vertical, hideArrow } = line;\n\n  // 相对位置转换函数\n  const toRelative = (p: IPoint): IPoint => ({\n    x: p.x - bbox.x + PADDING,\n    y: p.y - bbox.y + PADDING,\n  });\n\n  const fromPos = toRelative(position.from);\n  const toPos = toRelative(position.to);\n\n  // 箭头位置计算\n  const arrowToPos: IPoint = vertical\n    ? { x: toPos.x, y: toPos.y - POINT_RADIUS }\n    : { x: toPos.x - POINT_RADIUS, y: toPos.y };\n  const arrowFromPos: IPoint = vertical\n    ? { x: fromPos.x, y: fromPos.y + POINT_RADIUS + LINE_OFFSET }\n    : { x: fromPos.x + POINT_RADIUS + LINE_OFFSET, y: fromPos.y };\n\n  const controls = line.bezier.controls.map((c) => toRelative(c));\n\n  const getLinearStartColor = (): string | undefined => {\n    if (vertical) {\n      return fromPos.y < arrowToPos.y ? fromColor : toColor;\n    }\n    return fromPos.x < arrowToPos.x ? fromColor : toColor;\n  };\n\n  const getLinearEndColor = (): string | undefined => {\n    if (vertical) {\n      return fromPos.y < arrowToPos.y ? toColor : fromColor;\n    }\n    return fromPos.x < arrowToPos.x ? toColor : fromColor;\n  };\n\n  const linearStartColor = getLinearStartColor();\n  const linearEndColor = getLinearEndColor();\n\n  const getPathData = (): string => {\n    const controlPoints = controls.map((s) => `${s.x} ${s.y}`).join(',');\n    const curveType = controls.length === 1 ? 'S' : 'C';\n\n    if (vertical) {\n      return `M${fromPos.x} ${fromPos.y + POINT_RADIUS} ${curveType} ${controlPoints}, ${\n        arrowToPos.x\n      } ${arrowToPos.y}`;\n    }\n    return `M${fromPos.x + POINT_RADIUS} ${fromPos.y} ${curveType} ${controlPoints}, ${\n      arrowToPos.x\n    } ${arrowToPos.y}`;\n  };\n  const pathData = getPathData();\n\n  const strokeWidth = selected ? STROKE_WIDTH_SLECTED : STROKE_WIDTH;\n\n  const strokeID = strokePrefix ? `${strokePrefix}-${line.id}` : line.id;\n\n  const path = (\n    <path\n      d={pathData}\n      fill=\"none\"\n      stroke={`url(#${strokeID})`}\n      strokeWidth={strokeWidth}\n      className={line.processing || line.flowing ? 'flowing-line' : ''}\n    />\n  );\n\n  return (\n    <LineStyle\n      style={{\n        left: bbox.x - PADDING,\n        top: bbox.y - PADDING,\n        position: 'absolute',\n      }}\n    >\n      {children}\n      <svg width={bbox.width + PADDING * 2} height={bbox.height + PADDING * 2}>\n        <defs>\n          <linearGradient\n            x1={vertical ? '100%' : '0%'}\n            y1={vertical ? '0%' : '100%'}\n            x2=\"100%\"\n            y2=\"100%\"\n            id={strokeID}\n            gradientUnits=\"userSpaceOnUse\"\n          >\n            <stop stopColor={color || linearStartColor} offset=\"0%\" />\n            <stop stopColor={color || linearEndColor} offset=\"100%\" />\n          </linearGradient>\n        </defs>\n        <g>\n          {path}\n          <ArrowRenderer\n            id={strokeID}\n            reverseArrow={reverse}\n            pos={reverse ? arrowFromPos : arrowToPos}\n            strokeWidth={strokeWidth}\n            vertical={vertical}\n            hide={hideArrow}\n          />\n          {props.showControlPoints\n            ? controls.map((c, i) => <circle key={i} cx={c.x} cy={c.y} r=\"4\" fill=\"#ccc\" />)\n            : undefined}\n        </g>\n      </svg>\n    </LineStyle>\n  );\n};\n"],"mappings":"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","names":["React","React","ReactDOM","React","useState","WorkflowHoverService","React","React","styled","React","React","React","React","POINT_RADIUS","POINT_RADIUS","React","React","useState","React","ReactDOM","WorkflowHoverService"]}