@flowgram.ai/renderer 0.1.0

package/dist/index.js

@@ -0,0 +1,2941 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FlowContextMenuLayer: () => FlowContextMenuLayer,
+  FlowDebugLayer: () => FlowDebugLayer,
+  FlowDragEntity: () => FlowDragEntity,
+  FlowDragLayer: () => FlowDragLayer,
+  FlowLabelsLayer: () => FlowLabelsLayer,
+  FlowLinesLayer: () => FlowLinesLayer,
+  FlowNodesContentLayer: () => FlowNodesContentLayer,
+  FlowNodesTransformLayer: () => FlowNodesTransformLayer,
+  FlowRendererCommandCategory: () => FlowRendererCommandCategory,
+  FlowRendererComponentType: () => FlowRendererComponentType,
+  FlowRendererContainerModule: () => FlowRendererContainerModule,
+  FlowRendererContribution: () => FlowRendererContribution,
+  FlowRendererKey: () => FlowRendererKey,
+  FlowRendererRegistry: () => FlowRendererRegistry,
+  FlowScrollBarLayer: () => FlowScrollBarLayer,
+  FlowScrollLimitLayer: () => FlowScrollLimitLayer,
+  FlowSelectConfigEntity: () => FlowSelectConfigEntity,
+  FlowSelectorBoundsLayer: () => FlowSelectorBoundsLayer,
+  FlowSelectorBoxLayer: () => FlowSelectorBoxLayer,
+  FlowTextKey: () => FlowTextKey,
+  MARK_ACTIVATED_ARROW_ID: () => MARK_ACTIVATED_ARROW_ID,
+  MARK_ARROW_ID: () => MARK_ARROW_ID,
+  ScrollBarEvents: () => ScrollBarEvents,
+  SelectorBoxConfigEntity: () => SelectorBoxConfigEntity,
+  useBaseColor: () => useBaseColor
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/entities/flow-drag-entity.tsx
+var import_document3 = require("@flowgram.ai/document");
+var import_core2 = require("@flowgram.ai/core");
+var import_utils = require("@flowgram.ai/utils");
+
+// src/components/utils.tsx
+var import_document2 = require("@flowgram.ai/document");
+
+// src/hooks/use-base-color.ts
+var import_document = require("@flowgram.ai/document");
+var import_core = require("@flowgram.ai/core");
+var BASE_DEFAULT_COLOR = "#BBBFC4";
+var BASE_DEFAULT_ACTIVATED_COLOR = "#82A7FC";
+function useBaseColor() {
+  const options = (0, import_core.useService)(import_document.FlowDocumentOptions);
+  return {
+    baseColor: options.constants?.[import_document.ConstantKeys.BASE_COLOR] || BASE_DEFAULT_COLOR,
+    baseActivatedColor: options.constants?.[import_document.ConstantKeys.BASE_ACTIVATED_COLOR] || BASE_DEFAULT_ACTIVATED_COLOR
+  };
+}
+
+// src/components/utils.tsx
+var DEFAULT_LINE_ATTRS = {
+  stroke: BASE_DEFAULT_COLOR,
+  fill: "transparent",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var DEFAULT_RADIUS = 16;
+var DEFAULT_LABEL_ACTIVATE_HEIGHT = 32;
+function getHorizontalVertices(line, xRadius = 16, yRadius = 20) {
+  const { from, to, type } = line || {};
+  const deltaY = Math.abs(to.y - from.y);
+  const deltaX = Math.abs(to.x - from.x);
+  const radiusXCount = deltaX / xRadius;
+  const radiusYCount = deltaY / yRadius;
+  let res = [];
+  if (radiusXCount < 1) {
+    return [];
+  }
+  switch (type) {
+    case import_document2.FlowTransitionLineEnum.DIVERGE_LINE:
+    case import_document2.FlowTransitionLineEnum.DRAGGING_LINE:
+      if (radiusXCount <= 1) {
+        return [
+          {
+            x: to.x,
+            y: from.y,
+            radiusX: deltaX
+          }
+        ];
+      }
+      res = [
+        {
+          x: from.x + yRadius,
+          y: from.y
+        },
+        {
+          x: from.x + yRadius,
+          y: to.y
+        }
+      ];
+      if (radiusXCount < 2) {
+        const firstRadius = deltaX - yRadius;
+        res = [
+          {
+            x: from.x + firstRadius,
+            y: from.y,
+            // 第一个圆角收缩 y 半径
+            radiusX: firstRadius
+          },
+          {
+            x: from.x + firstRadius,
+            y: to.y
+          }
+        ];
+      }
+      if (radiusYCount < 2) {
+        res[0].moveY = deltaY / 2;
+        res[1].moveY = deltaY / 2;
+      }
+      return res;
+    case import_document2.FlowTransitionLineEnum.MERGE_LINE:
+      if (radiusXCount < 2) {
+        return [
+          {
+            x: to.x,
+            y: from.y
+          }
+        ];
+      }
+      res = [
+        {
+          x: to.x - yRadius,
+          y: from.y
+        },
+        {
+          x: to.x - yRadius,
+          y: to.y
+        }
+      ];
+      if (radiusYCount < 2) {
+        res[0].moveY = deltaY / 2;
+        res[1].moveY = deltaY / 2;
+      }
+      return res;
+    default:
+      break;
+  }
+  return [];
+}
+function getVertices(line, xRadius = 16, yRadius = 20) {
+  const { from, to, type } = line || {};
+  const deltaY = Math.abs(to.y - from.y);
+  const deltaX = Math.abs(to.x - from.x);
+  const radiusYCount = deltaY / yRadius;
+  const radiusXCount = deltaX / xRadius;
+  let res = [];
+  if (radiusYCount < 1) {
+    return [];
+  }
+  switch (type) {
+    case import_document2.FlowTransitionLineEnum.DIVERGE_LINE:
+    case import_document2.FlowTransitionLineEnum.DRAGGING_LINE:
+      if (radiusYCount <= 1) {
+        return [
+          {
+            x: to.x,
+            y: from.y,
+            radiusY: deltaY
+          }
+        ];
+      }
+      res = [
+        {
+          x: from.x,
+          y: from.y + yRadius
+        },
+        {
+          x: to.x,
+          y: from.y + yRadius
+        }
+      ];
+      if (radiusYCount < 2) {
+        const firstRadius = deltaY - yRadius;
+        res = [
+          {
+            x: from.x,
+            y: from.y + firstRadius,
+            // 第一个圆角收缩 y 半径
+            radiusY: firstRadius
+          },
+          {
+            x: to.x,
+            y: from.y + firstRadius
+          }
+        ];
+      }
+      if (radiusXCount < 2) {
+        res[0].moveX = deltaX / 2;
+        res[1].moveX = deltaX / 2;
+      }
+      return res;
+    case import_document2.FlowTransitionLineEnum.MERGE_LINE:
+      if (radiusYCount < 2) {
+        return [
+          {
+            x: from.x,
+            y: to.y
+          }
+        ];
+      }
+      res = [
+        {
+          x: from.x,
+          y: to.y - yRadius
+        },
+        {
+          x: to.x,
+          y: to.y - yRadius
+        }
+      ];
+      if (radiusXCount < 2) {
+        res[0].moveX = deltaX / 2;
+        res[1].moveX = deltaX / 2;
+      }
+      return res;
+    default:
+      break;
+  }
+  return [];
+}
+function getTransitionLabelHoverWidth(data) {
+  const { isVertical } = data.entity;
+  if (isVertical) {
+    const nextWidth = data.entity.next?.firstChild && !data.entity.next.isInlineBlocks ? data.entity.next.firstChild.getData(import_document2.FlowNodeTransformData).size.width : data.entity.next?.getData(import_document2.FlowNodeTransformData).size.width;
+    const maxWidth = Math.max(
+      data.entity.getData(import_document2.FlowNodeTransformData)?.size.width ?? import_document2.DEFAULT_SPACING[import_document2.DefaultSpacingKey.HOVER_AREA_WIDTH],
+      nextWidth || 0
+    );
+    return maxWidth;
+  }
+  if (data.transform.next) {
+    return data.transform.next.inputPoint.x - data.transform.outputPoint.x;
+  }
+  return DEFAULT_LABEL_ACTIVATE_HEIGHT;
+}
+function getTransitionLabelHoverHeight(data) {
+  const { isVertical } = data.entity;
+  if (isVertical) {
+    if (data.transform.next) {
+      return data.transform.next.inputPoint.y - data.transform.outputPoint.y;
+    }
+    return DEFAULT_LABEL_ACTIVATE_HEIGHT;
+  }
+  const nextHeight = data.entity.next?.firstChild && !data.entity.next.isInlineBlocks ? data.entity.next.firstChild.getData(import_document2.FlowNodeTransformData).size.height : data.entity.next?.getData(import_document2.FlowNodeTransformData).size.height;
+  const maxHeight = Math.max(
+    data.entity.getData(import_document2.FlowNodeTransformData)?.size.height || 280,
+    nextHeight || 0
+  );
+  return maxHeight;
+}
+
+// src/entities/flow-drag-entity.tsx
+var BRANCH_HOVER_HEIGHT = 64;
+var SCROLL_DELTA = 4;
+var SCROLL_INTERVAL = 20;
+var SCROLL_BOUNDING = 20;
+var EDITOR_LEFT_BAR_WIDTH = 60;
+var FlowDragEntity = class extends import_core2.ConfigEntity {
+  constructor(conf) {
+    super(conf);
+    this.containerX = 0;
+    this.containerY = 0;
+    this.playgroundConfigEntity = this.entityManager.getEntity(
+      import_core2.PlaygroundConfigEntity,
+      true
+    );
+  }
+  get hasScroll() {
+    return Boolean(this._scrollXInterval || this._scrollYInterval);
+  }
+  isCollision(transition, rect, isBranch) {
+    const scale = this.playgroundConfigEntity.finalScale || 0;
+    if (isBranch) {
+      return this.isBranchCollision(transition, rect, scale);
+    }
+    return this.isNodeCollision(transition, rect, scale);
+  }
+  // 检测节点维度碰撞方法
+  isNodeCollision(transition, rect, scale) {
+    const { labels } = transition;
+    const { isVertical } = transition.entity;
+    const hasCollision = labels.some((label) => {
+      if (!label || ![
+        import_document3.FlowTransitionLabelEnum.ADDER_LABEL,
+        import_document3.FlowTransitionLabelEnum.COLLAPSE_ADDER_LABEL
+      ].includes(label.type)) {
+        return false;
+      }
+      const hoverWidth = isVertical ? transition.transform.bounds.width : DEFAULT_LABEL_ACTIVATE_HEIGHT;
+      const hoverHeight = isVertical ? DEFAULT_LABEL_ACTIVATE_HEIGHT : transition.transform.bounds.height;
+      const labelRect = new import_utils.Rectangle(
+        (label.offset.x - hoverWidth / 2) * scale,
+        (label.offset.y - hoverHeight / 2) * scale,
+        hoverWidth * scale,
+        hoverHeight * scale
+      );
+      return import_utils.Rectangle.intersects(labelRect, rect);
+    });
+    return {
+      hasCollision,
+      // 节点不关心 offsetType
+      labelOffsetType: void 0
+    };
+  }
+  // 检测分支维度碰撞
+  isBranchCollision(transition, rect, scale) {
+    const { labels } = transition;
+    const { isVertical } = transition.entity;
+    let labelOffsetType = import_document3.LABEL_SIDE_TYPE.NORMAL_BRANCH;
+    const hasCollision = labels.some((label) => {
+      if (!label || label.type !== import_document3.FlowTransitionLabelEnum.BRANCH_DRAGGING_LABEL) {
+        return false;
+      }
+      const hoverHeight = isVertical ? BRANCH_HOVER_HEIGHT : label.width || 0;
+      const hoverWidth = isVertical ? label.width || 0 : BRANCH_HOVER_HEIGHT;
+      const labelRect = new import_utils.Rectangle(
+        (label.offset.x - hoverWidth / 2) * scale,
+        (label.offset.y - hoverHeight / 2) * scale,
+        hoverWidth * scale,
+        hoverHeight * scale
+      );
+      const collision = import_utils.Rectangle.intersects(labelRect, rect);
+      if (collision) {
+        labelOffsetType = label.props.side;
+      }
+      return collision;
+    });
+    return {
+      hasCollision,
+      labelOffsetType
+    };
+  }
+  _startScrollX(origin, added) {
+    if (this._scrollXInterval) {
+      return;
+    }
+    const interval = window.setInterval(() => {
+      const current = this._scrollXInterval;
+      if (!current) return;
+      const scrollX = current.origin = added ? current.origin + SCROLL_DELTA : current.origin - SCROLL_DELTA;
+      this.playgroundConfigEntity.updateConfig({
+        scrollX
+      });
+      const playgroundConfig = this.playgroundConfigEntity.config;
+      if (playgroundConfig?.scrollX === scrollX) {
+        if (added) {
+          this.containerX += SCROLL_DELTA;
+        } else {
+          this.containerX -= SCROLL_DELTA;
+        }
+        this.setDomStyle();
+      }
+    }, SCROLL_INTERVAL);
+    this._scrollXInterval = { interval, origin };
+  }
+  _stopScrollX() {
+    if (this._scrollXInterval) {
+      clearInterval(this._scrollXInterval.interval);
+      this._scrollXInterval = void 0;
+    }
+  }
+  _startScrollY(origin, added) {
+    if (this._scrollYInterval) {
+      return;
+    }
+    const interval = window.setInterval(() => {
+      const current = this._scrollYInterval;
+      if (!current) return;
+      const scrollY = current.origin = added ? current.origin + SCROLL_DELTA : current.origin - SCROLL_DELTA;
+      this.playgroundConfigEntity.updateConfig({
+        scrollY
+      });
+      const playgroundConfig = this.playgroundConfigEntity.config;
+      if (playgroundConfig?.scrollY === scrollY) {
+        if (added) {
+          this.containerY += SCROLL_DELTA;
+        } else {
+          this.containerY -= SCROLL_DELTA;
+        }
+        this.setDomStyle();
+      }
+    }, SCROLL_INTERVAL);
+    this._scrollYInterval = { interval, origin };
+  }
+  _stopScrollY() {
+    if (this._scrollYInterval) {
+      clearInterval(this._scrollYInterval.interval);
+      this._scrollYInterval = void 0;
+    }
+  }
+  stopAllScroll() {
+    this._stopScrollX();
+    this._stopScrollY();
+  }
+  setDomStyle() {
+    this.containerDom.style.left = `${this.containerX}px`;
+    this.containerDom.style.top = `${this.containerY}px`;
+  }
+  scrollDirection(e, containerDom, x, y) {
+    const playgroundConfig = this.playgroundConfigEntity.config;
+    const currentScrollX = playgroundConfig.scrollX;
+    const currentScrollY = playgroundConfig.scrollY;
+    this.containerDom = containerDom;
+    this.containerX = x;
+    this.containerY = y;
+    const mouseToBottom = playgroundConfig.height + playgroundConfig.clientY - e.clientY;
+    if (mouseToBottom < SCROLL_BOUNDING) {
+      this._startScrollY(currentScrollY, true);
+      return 1 /* BOTTOM */;
+    }
+    const mouseToTop = e.clientY - playgroundConfig.clientY;
+    if (mouseToTop < SCROLL_BOUNDING) {
+      this._startScrollY(currentScrollY, false);
+      return 0 /* TOP */;
+    }
+    this._stopScrollY();
+    const mouseToRight = playgroundConfig.width + playgroundConfig.clientX - e.clientX;
+    if (mouseToRight < SCROLL_BOUNDING) {
+      this._startScrollX(currentScrollX, true);
+      return 3 /* RIGHT */;
+    }
+    const mouseToLeft = e.clientX - playgroundConfig.clientX;
+    if (mouseToLeft < SCROLL_BOUNDING + EDITOR_LEFT_BAR_WIDTH) {
+      this._startScrollX(currentScrollX, false);
+      return 2 /* LEFT */;
+    }
+    this._stopScrollX();
+    return void 0;
+  }
+  dispose() {
+    this.toDispose.dispose();
+  }
+};
+FlowDragEntity.type = "FlowDragEntity";
+
+// src/entities/flow-select-config-entity.tsx
+var import_document4 = require("@flowgram.ai/document");
+var import_core3 = require("@flowgram.ai/core");
+var import_utils3 = require("@flowgram.ai/utils");
+
+// src/utils/find-selected-nodes.ts
+var import_lodash = require("lodash");
+function getNodePath(node) {
+  const path = [node];
+  node = node.parent;
+  while (node) {
+    path.push(node);
+    node = node.parent;
+  }
+  return path.reverse();
+}
+function findRealEntity(entity) {
+  while (entity.originParent) {
+    entity = entity.originParent;
+  }
+  return entity;
+}
+function findSelectedNodes(nodes) {
+  if (nodes.length === 0) return [];
+  const nodePathList = nodes.map((n) => getNodePath(n));
+  const minLength = Math.min(...nodePathList.map((n) => n.length));
+  let index = 0;
+  let selectedItems = [];
+  while (index < minLength) {
+    selectedItems = (0, import_lodash.uniq)(nodePathList.map((p) => p[index]));
+    if (selectedItems.length > 1) {
+      break;
+    }
+    index += 1;
+  }
+  return (0, import_lodash.uniq)(selectedItems.map((item) => findRealEntity(item)));
+}
+
+// src/entities/flow-select-config-entity.tsx
+var BOUNDS_PADDING_DEFAULT = 10;
+var FlowSelectConfigEntity = class extends import_core3.ConfigEntity {
+  constructor() {
+    super(...arguments);
+    this.boundsPadding = BOUNDS_PADDING_DEFAULT;
+  }
+  getDefaultConfig() {
+    return {
+      selectedNodes: []
+    };
+  }
+  get selectedNodes() {
+    return this.config.selectedNodes;
+  }
+  /**
+   * 选中节点
+   * @param nodes
+   */
+  set selectedNodes(nodes) {
+    nodes = findSelectedNodes(nodes);
+    if (nodes.length !== this.config.selectedNodes.length || nodes.some((n) => !this.config.selectedNodes.includes(n))) {
+      this.config.selectedNodes.forEach((oldNode) => {
+        if (!nodes.includes(oldNode)) {
+          oldNode.getData(import_document4.FlowNodeRenderData).activated = false;
+        }
+      });
+      nodes.forEach((node) => {
+        node.getData(import_document4.FlowNodeRenderData).activated = true;
+      });
+      if (import_utils3.Compare.isArrayShallowChanged(this.config.selectedNodes, nodes)) {
+        this.updateConfig({
+          selectedNodes: nodes
+        });
+      }
+    }
+  }
+  /**
+   * 清除选中节点
+   */
+  clearSelectedNodes() {
+    if (this.config.selectedNodes.length === 0) return;
+    this.config.selectedNodes.forEach((node) => {
+      node.getData(import_document4.FlowNodeRenderData).activated = false;
+    });
+    this.updateConfig({
+      selectedNodes: []
+    });
+  }
+  /**
+   * 通过选择框选中节点
+   * @param rect
+   * @param transforms
+   */
+  selectFromBounds(rect, transforms) {
+    const selectedNodes = [];
+    transforms.forEach((transform) => {
+      if (import_utils3.Rectangle.intersects(rect, transform.bounds)) {
+        if (transform.entity.originParent) {
+          selectedNodes.push(transform.entity.originParent);
+        } else {
+          selectedNodes.push(transform.entity);
+        }
+      }
+    });
+    this.selectedNodes = selectedNodes;
+  }
+  /**
+   * 获取选中节点外围的最大边框
+   */
+  getSelectedBounds() {
+    const nodes = this.selectedNodes;
+    if (nodes.length === 0) {
+      return import_utils3.Rectangle.EMPTY;
+    }
+    return import_utils3.Rectangle.enlarge(nodes.map((n) => n.getData(import_document4.FlowNodeTransformData).bounds)).pad(
+      this.boundsPadding
+    );
+  }
+};
+FlowSelectConfigEntity.type = "FlowSelectConfigEntity";
+
+// src/entities/selector-box-config-entity.ts
+var import_core4 = require("@flowgram.ai/core");
+var import_utils4 = require("@flowgram.ai/utils");
+var SelectorBoxConfigEntity = class extends import_core4.ConfigEntity {
+  get dragInfo() {
+    return this.config;
+  }
+  setDragInfo(info) {
+    this.updateConfig(info);
+  }
+  get disabled() {
+    return this.config && !!this.config.disabled;
+  }
+  set disabled(disabled) {
+    this.updateConfig({
+      disabled
+    });
+  }
+  get isStart() {
+    return this.dragInfo.isStart;
+  }
+  get isMoving() {
+    return this.dragInfo.isMoving;
+  }
+  get position() {
+    const { dragInfo } = this;
+    return {
+      x: dragInfo.startPos.x < dragInfo.endPos.x ? dragInfo.startPos.x : dragInfo.endPos.x,
+      y: dragInfo.startPos.y < dragInfo.endPos.y ? dragInfo.startPos.y : dragInfo.endPos.y
+    };
+  }
+  get size() {
+    const { dragInfo } = this;
+    return {
+      width: Math.abs(dragInfo.startPos.x - dragInfo.endPos.x),
+      height: Math.abs(dragInfo.startPos.y - dragInfo.endPos.y)
+    };
+  }
+  get collapsed() {
+    const { size } = this;
+    return size.width === 0 && size.height === 0;
+  }
+  collapse() {
+    this.setDragInfo({
+      ...this.dragInfo,
+      isMoving: false,
+      isStart: false
+    });
+  }
+  toRectangle(scale) {
+    const { position, size } = this;
+    return new import_utils4.Rectangle(
+      position.x / scale,
+      position.y / scale,
+      size.width / scale,
+      size.height / scale
+    );
+  }
+};
+SelectorBoxConfigEntity.type = "SelectorBoxConfigEntity";
+
+// src/layers/flow-nodes-transform-layer.tsx
+var import_inversify2 = require("inversify");
+var import_utils6 = require("@flowgram.ai/utils");
+var import_document5 = require("@flowgram.ai/document");
+var import_core5 = require("@flowgram.ai/core");
+
+// src/flow-renderer-resize-observer.ts
+var import_inversify = require("inversify");
+var import_utils5 = require("@flowgram.ai/utils");
+
+// src/utils/element.ts
+var import_lodash2 = require("lodash");
+var isHidden = (dom) => {
+  const style = window.getComputedStyle(dom);
+  return (0, import_lodash2.isNil)(dom?.offsetParent) || style?.display === "none";
+};
+var isRectInit = (rect) => {
+  if (!rect) {
+    return false;
+  }
+  if (rect.bottom === 0 && rect.height === 0 && rect.left === 0 && rect.right === 0 && rect.top === 0 && rect.width === 0 && rect.x === 0 && rect.y === 0) {
+    return false;
+  }
+  return true;
+};
+
+// src/flow-renderer-resize-observer.ts
+var FlowRendererResizeObserver = class {
+  /**
+   * 监听元素 size，并同步到 transform
+   * @param el
+   * @param transform
+   */
+  observe(el, transform) {
+    const observer = new ResizeObserver((entries) => {
+      window.requestAnimationFrame(() => {
+        if (!Array.isArray(entries) || !entries.length) {
+          return;
+        }
+        const entry = entries[0];
+        const { contentRect, target } = entry;
+        const isContentRectInit = isRectInit(contentRect);
+        const isLeaveDOMTree = !target.parentNode;
+        const isHiddenElement = isHidden(target.parentNode);
+        if (isContentRectInit && !isLeaveDOMTree && !isHiddenElement) {
+          transform.size = {
+            width: Math.round(contentRect.width * 10) / 10,
+            height: Math.round(contentRect.height * 10) / 10
+          };
+        }
+      });
+    });
+    observer.observe(el);
+    return import_utils5.Disposable.create(() => {
+      observer.unobserve(el);
+    });
+  }
+};
+FlowRendererResizeObserver = __decorateClass([
+  (0, import_inversify.injectable)()
+], FlowRendererResizeObserver);
+
+// src/layers/flow-nodes-transform-layer.tsx
+var FlowNodesTransformLayer = class extends import_core5.Layer {
+  constructor() {
+    super(...arguments);
+    this.node = import_utils6.domUtils.createDivWithClass("gedit-flow-nodes-layer");
+    // onViewportChange() {
+    //   this.throttleUpdate()
+    // }
+    // throttleUpdate = throttle(() => {
+    //   this.renderCache.getFromCache().forEach((cache) => cache.updateBounds())
+    // }, 100)
+    this.renderCache = import_utils6.Cache.create(
+      (transform) => {
+        const { renderState } = transform;
+        const { node } = renderState;
+        const { entity } = transform;
+        node.id = entity.id;
+        let resizeDispose;
+        const append = () => {
+          if (resizeDispose) return;
+          this.renderElement.appendChild(node);
+          resizeDispose = this.resizeObserver.observe(node, transform);
+        };
+        const dispose = () => {
+          if (!resizeDispose) return;
+          if (node.parentElement) {
+            this.renderElement.removeChild(node);
+          }
+          resizeDispose.dispose();
+          resizeDispose = void 0;
+        };
+        append();
+        return {
+          dispose,
+          updateBounds: () => {
+            const { bounds } = transform;
+            if (node.style.left !== `${bounds.x}px` || node.style.top !== `${bounds.y}px`) {
+              node.style.left = `${bounds.x}px`;
+              node.style.top = `${bounds.y}px`;
+            }
+          }
+        };
+      }
+    );
+  }
+  get transformVisibles() {
+    return this.document.getRenderDatas(import_document5.FlowNodeTransformData, false);
+  }
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  dispose() {
+    this.renderCache.dispose();
+    super.dispose();
+  }
+  onReady() {
+    this.node.style.zIndex = "10";
+  }
+  get visibeBounds() {
+    return this.transformVisibles.map((transform) => transform.bounds);
+  }
+  /**
+   * 更新节点的 bounds 数据
+   */
+  updateNodesBounds() {
+    this.renderCache.getMoreByItems(this.transformVisibles).forEach((render) => render.updateBounds());
+  }
+  autorun() {
+    if (this.documentTransformer.loading) return;
+    this.documentTransformer.refresh();
+    this.updateNodesBounds();
+  }
+  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;
+  }
+};
+__decorateClass([
+  (0, import_inversify2.inject)(import_document5.FlowDocument)
+], FlowNodesTransformLayer.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify2.inject)(FlowRendererResizeObserver)
+], FlowNodesTransformLayer.prototype, "resizeObserver", 2);
+__decorateClass([
+  (0, import_core5.observeEntity)(import_document5.FlowDocumentTransformerEntity)
+], FlowNodesTransformLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  (0, import_core5.observeEntityDatas)(import_document5.FlowNodeEntity, import_document5.FlowNodeTransformData)
+], FlowNodesTransformLayer.prototype, "_transforms", 2);
+FlowNodesTransformLayer = __decorateClass([
+  (0, import_inversify2.injectable)()
+], FlowNodesTransformLayer);
+
+// src/layers/flow-nodes-content-layer.tsx
+var import_react_dom = __toESM(require("react-dom"));
+var import_react = __toESM(require("react"));
+var import_inversify4 = require("inversify");
+var import_utils7 = require("@flowgram.ai/utils");
+var import_document6 = require("@flowgram.ai/document");
+var import_core7 = require("@flowgram.ai/core");
+
+// src/flow-renderer-registry.ts
+var import_inversify3 = require("inversify");
+var import_i18n = require("@flowgram.ai/i18n");
+var import_core6 = require("@flowgram.ai/core");
+
+// src/flow-renderer-contribution.ts
+var FlowRendererContribution = Symbol("FlowRendererContribution");
+
+// src/flow-renderer-registry.ts
+var FlowRendererComponentType = /* @__PURE__ */ ((FlowRendererComponentType2) => {
+  FlowRendererComponentType2[FlowRendererComponentType2["REACT"] = 0] = "REACT";
+  FlowRendererComponentType2[FlowRendererComponentType2["DOM"] = 1] = "DOM";
+  FlowRendererComponentType2[FlowRendererComponentType2["TEXT"] = 2] = "TEXT";
+  return FlowRendererComponentType2;
+})(FlowRendererComponentType || {});
+var FlowRendererKey = /* @__PURE__ */ ((FlowRendererKey2) => {
+  FlowRendererKey2["NODE_RENDER"] = "node-render";
+  FlowRendererKey2["ADDER"] = "adder";
+  FlowRendererKey2["COLLAPSE"] = "collapse";
+  FlowRendererKey2["BRANCH_ADDER"] = "branch-adder";
+  FlowRendererKey2["TRY_CATCH_COLLAPSE"] = "try-catch-collapse";
+  FlowRendererKey2["DRAG_NODE"] = "drag-node";
+  FlowRendererKey2["DRAGGABLE_ADDER"] = "draggable-adder";
+  FlowRendererKey2["DRAG_HIGHLIGHT_ADDER"] = "drag-highlight-adder";
+  FlowRendererKey2["DRAG_BRANCH_HIGHLIGHT_ADDER"] = "drag-branch-highlight-adder";
+  FlowRendererKey2["SELECTOR_BOX_POPOVER"] = "selector-box-popover";
+  FlowRendererKey2["CONTEXT_MENU_POPOVER"] = "context-menu-popover";
+  FlowRendererKey2["SUB_CANVAS"] = "sub-canvas";
+  FlowRendererKey2["MARKER_ARROW"] = "marker-arrow";
+  FlowRendererKey2["MARKER_ACTIVATE_ARROW"] = "marker-active-arrow";
+  return FlowRendererKey2;
+})(FlowRendererKey || {});
+var FlowTextKey = /* @__PURE__ */ ((FlowTextKey2) => {
+  FlowTextKey2["LOOP_END_TEXT"] = "loop-end-text";
+  FlowTextKey2["LOOP_TRAVERSE_TEXT"] = "loop-traverse-text";
+  FlowTextKey2["LOOP_WHILE_TEXT"] = "loop-while-text";
+  FlowTextKey2["TRY_START_TEXT"] = "try-start-text";
+  FlowTextKey2["TRY_END_TEXT"] = "try-end-text";
+  FlowTextKey2["CATCH_TEXT"] = "catch-text";
+  return FlowTextKey2;
+})(FlowTextKey || {});
+var FlowRendererCommandCategory = /* @__PURE__ */ ((FlowRendererCommandCategory2) => {
+  FlowRendererCommandCategory2["SELECTOR_BOX"] = "SELECTOR_BOX";
+  return FlowRendererCommandCategory2;
+})(FlowRendererCommandCategory || {});
+var FlowRendererRegistry = class {
+  constructor() {
+    this.componentsMap = /* @__PURE__ */ new Map();
+    this.textMap = /* @__PURE__ */ new Map();
+    this.contribs = [];
+  }
+  init() {
+    this.contribs.forEach((contrib) => contrib.registerRenderer?.(this));
+  }
+  /**
+   * 注册 组件数据
+   */
+  registerRendererComponents(renderKey, comp) {
+    this.componentsMap.set(renderKey, comp);
+  }
+  registerReactComponent(renderKey, renderer) {
+    this.componentsMap.set(renderKey, {
+      type: 0 /* REACT */,
+      renderer
+    });
+  }
+  /**
+   * 注册文案
+   */
+  registerText(configs) {
+    Object.entries(configs).forEach(([key, value]) => {
+      this.textMap.set(key, value);
+    });
+  }
+  getText(textKey) {
+    return import_i18n.I18n.t(textKey, { disableReturnKey: true }) || this.textMap.get(textKey);
+  }
+  /**
+   * TODO: support memo
+   */
+  getRendererComponent(renderKey) {
+    const comp = this.componentsMap.get(renderKey);
+    if (!comp) {
+      throw new Error(`Unknown render key ${renderKey}`);
+    }
+    return comp;
+  }
+  tryToGetRendererComponent(renderKey) {
+    return this.componentsMap.get(renderKey);
+  }
+  /**
+   * 注册画布层
+   */
+  registerLayers(...layerRegistries) {
+    layerRegistries.forEach((layer) => this.pipeline.registerLayer(layer));
+  }
+  /**
+   * 根据配置注册画布
+   * @param layerRegistry
+   * @param options
+   */
+  registerLayer(layerRegistry, options) {
+    this.pipeline.registerLayer(layerRegistry, options);
+  }
+};
+__decorateClass([
+  (0, import_inversify3.multiInject)(FlowRendererContribution),
+  (0, import_inversify3.optional)()
+], FlowRendererRegistry.prototype, "contribs", 2);
+__decorateClass([
+  (0, import_inversify3.inject)(import_core6.PipelineRegistry)
+], FlowRendererRegistry.prototype, "pipeline", 2);
+FlowRendererRegistry = __decorateClass([
+  (0, import_inversify3.injectable)()
+], FlowRendererRegistry);
+
+// src/layers/flow-nodes-content-layer.tsx
+var FlowNodesContentLayer = class extends import_core7.Layer {
+  constructor() {
+    super(...arguments);
+    this.renderMemoCache = /* @__PURE__ */ new WeakMap();
+    this.node = import_utils7.domUtils.createDivWithClass("gedit-flow-nodes-layer");
+    this.reactPortals = import_utils7.Cache.create(
+      (data) => {
+        const { node, entity } = data;
+        const { config } = this;
+        const PortalRenderer = this.getPortalRenderer(data);
+        function Portal() {
+          import_react.default.useEffect(() => {
+            if (node.clientWidth && node.clientHeight) {
+              const transform = entity.getData(import_document6.FlowNodeTransformData);
+              if (transform)
+                transform.size = {
+                  width: node.clientWidth,
+                  height: node.clientHeight
+                };
+            }
+          }, []);
+          return import_react_dom.default.createPortal(
+            /* @__PURE__ */ import_react.default.createElement(import_core7.PlaygroundEntityContext.Provider, { value: entity }, /* @__PURE__ */ import_react.default.createElement(
+              PortalRenderer,
+              {
+                node: entity,
+                version: data?.version,
+                activated: data?.activated,
+                readonly: config.readonly,
+                disabled: config.disabled
+              }
+            )),
+            node
+          );
+        }
+        return {
+          id: node.id || entity.id,
+          dispose: () => {
+          },
+          Portal
+        };
+      }
+    );
+  }
+  get renderStatesVisible() {
+    return this.document.getRenderDatas(import_document6.FlowNodeRenderData, false);
+  }
+  getPortalRenderer(data) {
+    const meta = data.entity.getNodeMeta();
+    const renderer = this.rendererRegistry.getRendererComponent(
+      meta.renderKey || "node-render" /* NODE_RENDER */
+    );
+    const reactRenderer = renderer.renderer;
+    let memoCache = this.renderMemoCache.get(reactRenderer);
+    if (!memoCache) {
+      memoCache = import_react.default.memo(reactRenderer);
+      this.renderMemoCache.set(reactRenderer, memoCache);
+    }
+    return memoCache;
+  }
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  dispose() {
+    this.reactPortals.dispose();
+    super.dispose();
+  }
+  onReady() {
+    this.node.style.zIndex = "10";
+  }
+  /**
+   * 监听readonly和 disabled 状态 并刷新layer, 并刷新节点
+   */
+  onReadonlyOrDisabledChange() {
+    this.render();
+  }
+  getPortals() {
+    return this.reactPortals.getMoreByItems(this.renderStatesVisible);
+  }
+  render() {
+    if (this.documentTransformer.loading) return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+    this.documentTransformer.refresh();
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, this.getPortals().map((portal) => /* @__PURE__ */ import_react.default.createElement(portal.Portal, { key: portal.id })));
+  }
+};
+__decorateClass([
+  (0, import_inversify4.inject)(import_document6.FlowDocument)
+], FlowNodesContentLayer.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify4.inject)(FlowRendererRegistry)
+], FlowNodesContentLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  (0, import_core7.observeEntity)(import_document6.FlowDocumentTransformerEntity)
+], FlowNodesContentLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  (0, import_core7.observeEntityDatas)(import_document6.FlowNodeEntity, import_document6.FlowNodeRenderData)
+], FlowNodesContentLayer.prototype, "_renderStates", 2);
+FlowNodesContentLayer = __decorateClass([
+  (0, import_inversify4.injectable)()
+], FlowNodesContentLayer);
+
+// src/layers/flow-lines-layer.tsx
+var import_react8 = __toESM(require("react"));
+var import_lodash4 = require("lodash");
+var import_inversify5 = require("inversify");
+var import_utils12 = require("@flowgram.ai/utils");
+var import_document9 = require("@flowgram.ai/document");
+var import_core8 = require("@flowgram.ai/core");
+
+// src/components/MarkerArrow.tsx
+var import_react2 = __toESM(require("react"));
+var MARK_ARROW_ID = "line-marker-arrow";
+var MARK_ARROW_URL = `url(#${MARK_ARROW_ID})`;
+function MarkerArrow() {
+  const { baseColor } = useBaseColor();
+  return /* @__PURE__ */ import_react2.default.createElement("marker", { id: MARK_ARROW_ID, markerWidth: "11", markerHeight: "14", refX: "10", refY: "7", orient: "auto" }, /* @__PURE__ */ import_react2.default.createElement(
+    "path",
+    {
+      d: "M9.6 5.2C10.8 6.1 10.8 7.9 9.6 8.8L3.6 13.3C2.11672 14.4125 0 13.3541 0 11.5L0 2.5C0 0.645898 2.11672 -0.412461 3.6 0.7L9.6 5.2Z",
+      fill: baseColor
+    }
+  ));
+}
+var MarkerArrow_default = MarkerArrow;
+
+// src/components/MarkerActivatedArrow.tsx
+var import_react3 = __toESM(require("react"));
+var MARK_ACTIVATED_ARROW_ID = "line-marker-arrow-activated";
+var MARK_ACTIVATED_ARROW_URL = `url(#${MARK_ACTIVATED_ARROW_ID})`;
+function MarkerActivatedArrow() {
+  const { baseActivatedColor } = useBaseColor();
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "marker",
+    {
+      id: MARK_ACTIVATED_ARROW_ID,
+      markerWidth: "11",
+      markerHeight: "14",
+      refX: "10",
+      refY: "7",
+      orient: "auto"
+    },
+    /* @__PURE__ */ import_react3.default.createElement(
+      "path",
+      {
+        d: "M9.6 5.2C10.8 6.1 10.8 7.9 9.6 8.8L3.6 13.3C2.11672 14.4125 0 13.3541 0 11.5L0 2.5C0 0.645898 2.11672 -0.412461 3.6 0.7L9.6 5.2Z",
+        fill: baseActivatedColor
+      }
+    )
+  );
+}
+var MarkerActivatedArrow_default = MarkerActivatedArrow;
+
+// src/components/LinesRenderer.tsx
+var import_react7 = __toESM(require("react"));
+var import_utils11 = require("@flowgram.ai/utils");
+var import_document7 = require("@flowgram.ai/document");
+var import_document8 = require("@flowgram.ai/document");
+
+// src/components/StraightLine.tsx
+var import_react4 = __toESM(require("react"));
+function StraightLine(props) {
+  const { from, to, activated, style } = props;
+  const { baseColor, baseActivatedColor } = useBaseColor();
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "path",
+    {
+      d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`,
+      ...DEFAULT_LINE_ATTRS,
+      stroke: activated ? baseActivatedColor : baseColor,
+      style
+    }
+  );
+}
+var StraightLine_default = StraightLine;
+
+// src/components/RoundedTurningLine.tsx
+var import_react5 = __toESM(require("react"));
+var import_lodash3 = require("lodash");
+var import_utils9 = require("@flowgram.ai/utils");
+function RoundedTurningLine(props) {
+  const { vertices, radius = DEFAULT_RADIUS, hide, xRadius, yRadius, ...line } = props;
+  const { from, to, arrow, activated, style } = line || {};
+  const { baseActivatedColor, baseColor } = useBaseColor();
+  const realVertices = vertices || (props.isHorizontal ? getHorizontalVertices(line, xRadius, yRadius) : getVertices(line, xRadius, yRadius));
+  const middleStr = (0, import_react5.useMemo)(
+    () => realVertices.map((point, idx) => {
+      const prev = realVertices[idx - 1] || from;
+      const next = realVertices[idx + 1] || to;
+      const prevDelta = { x: Math.abs(prev.x - point.x), y: Math.abs(prev.y - point.y) };
+      const nextDelta = { x: Math.abs(next.x - point.x), y: Math.abs(next.y - point.y) };
+      const isRightAngleX = prevDelta.x === 0 && nextDelta.y === 0;
+      const isRightAngleY = prevDelta.y === 0 && nextDelta.x === 0;
+      const isRightAngle = isRightAngleX || isRightAngleY;
+      if (!isRightAngle) {
+        console.error(`vertex ${point.x},${point.y} is not right angle`);
+      }
+      const inPoint = new import_utils9.Point().copyFrom(point);
+      const outPoint = new import_utils9.Point().copyFrom(point);
+      const radiusX = (0, import_lodash3.isNil)(point.radiusX) ? radius : point.radiusX;
+      const radiusY = (0, import_lodash3.isNil)(point.radiusY) ? radius : point.radiusY;
+      let rx = radiusX;
+      let ry = radiusY;
+      if (isRightAngleX) {
+        ry = Math.min(prevDelta.y, radiusY);
+        const moveY = (0, import_lodash3.isNil)(point.moveY) ? ry : point.moveY;
+        inPoint.y += from.y < point.y ? -moveY : +moveY;
+        rx = Math.min(nextDelta.x, radiusX);
+        const moveX = (0, import_lodash3.isNil)(point.moveX) ? rx : point.moveX;
+        outPoint.x += to.x < point.x ? -moveX : +moveX;
+      }
+      if (isRightAngleY) {
+        rx = Math.min(prevDelta.x, radiusX);
+        const moveX = (0, import_lodash3.isNil)(point.moveX) ? rx : point.moveX;
+        inPoint.x += from.x < point.x ? -moveX : +moveX;
+        ry = Math.min(nextDelta.y, radiusY);
+        const moveY = (0, import_lodash3.isNil)(point.moveY) ? ry : point.moveY;
+        outPoint.y += to.y < point.y ? -moveY : +moveY;
+      }
+      const crossProduct = (point.x - inPoint.x) * (outPoint.y - inPoint.y) - (point.y - inPoint.y) * (outPoint.x - inPoint.x);
+      const isClockWise = crossProduct > 0;
+      return `L ${inPoint.x} ${inPoint.y} A ${rx} ${ry} 0 0 ${isClockWise ? 1 : 0} ${outPoint.x} ${outPoint.y}`;
+    }).join(" "),
+    [realVertices]
+  );
+  if (hide) {
+    return null;
+  }
+  const pathStr = `M ${from.x} ${from.y} ${middleStr} L ${to.x} ${to.y}`;
+  return /* @__PURE__ */ import_react5.default.createElement(
+    "path",
+    {
+      d: pathStr,
+      ...DEFAULT_LINE_ATTRS,
+      stroke: activated ? baseActivatedColor : baseColor,
+      ...arrow ? {
+        markerEnd: activated ? MARK_ACTIVATED_ARROW_URL : MARK_ARROW_URL
+      } : {},
+      style
+    }
+  );
+}
+var RoundedTurningLine_default = RoundedTurningLine;
+
+// src/components/CustomLine.tsx
+var import_react6 = __toESM(require("react"));
+function CustomLine(props) {
+  const { renderKey, rendererRegistry, ...line } = props;
+  if (!renderKey) {
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null);
+  }
+  const renderer = rendererRegistry.getRendererComponent(renderKey);
+  if (!renderer) {
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null);
+  }
+  const Component = renderer.renderer;
+  return /* @__PURE__ */ import_react6.default.createElement(Component, { ...line });
+}
+var CustomLine_default = CustomLine;
+
+// src/components/LinesRenderer.tsx
+function createLines(props) {
+  const { data, rendererRegistry, linesSave, dragService } = props;
+  const { lines, entity } = data || {};
+  const xRadius = (0, import_document8.getDefaultSpacing)(entity, import_document7.DefaultSpacingKey.ROUNDED_LINE_X_RADIUS);
+  const yRadius = (0, import_document8.getDefaultSpacing)(entity, import_document7.DefaultSpacingKey.ROUNDED_LINE_Y_RADIUS);
+  const renderLine = (line, index) => {
+    const { renderData } = data;
+    const { isVertical } = data.entity;
+    const { lineActivated } = renderData || {};
+    const draggingLineHide = line.type === import_document7.FlowTransitionLineEnum.DRAGGING_LINE && !dragService.isDroppableBranch(data.entity, line.side);
+    const draggingLineActivated = line.type === import_document7.FlowTransitionLineEnum.DRAGGING_LINE && data.entity?.id === dragService.dropNodeId && line.side === dragService.labelSide;
+    switch (line.type) {
+      case import_document7.FlowTransitionLineEnum.STRAIGHT_LINE:
+        return /* @__PURE__ */ import_react7.default.createElement(StraightLine_default, { key: `${data.entity.id}${index}`, activated: lineActivated, ...line });
+      case import_document7.FlowTransitionLineEnum.DIVERGE_LINE:
+      case import_document7.FlowTransitionLineEnum.DRAGGING_LINE:
+      case import_document7.FlowTransitionLineEnum.MERGE_LINE:
+      case import_document7.FlowTransitionLineEnum.ROUNDED_LINE:
+        return /* @__PURE__ */ import_react7.default.createElement(
+          RoundedTurningLine_default,
+          {
+            key: `${data.entity.id}${index}`,
+            isHorizontal: !isVertical,
+            activated: lineActivated || draggingLineActivated,
+            ...line,
+            xRadius,
+            yRadius,
+            hide: draggingLineHide
+          }
+        );
+      case import_document7.FlowTransitionLineEnum.CUSTOM_LINE:
+        return /* @__PURE__ */ import_react7.default.createElement(
+          CustomLine_default,
+          {
+            key: `${data.entity.id}${index}`,
+            ...line,
+            rendererRegistry
+          }
+        );
+      default:
+        break;
+    }
+    return void 0;
+  };
+  lines.forEach((line, index) => {
+    const bounds = import_utils11.Rectangle.createRectangleWithTwoPoints(line.from, line.to).pad(10);
+    if (props.isViewportVisible(bounds)) {
+      const jsxEl = renderLine(line, index);
+      if (jsxEl) linesSave.push(jsxEl);
+    }
+  });
+}
+
+// src/layers/flow-lines-layer.tsx
+var FlowLinesLayer = class extends import_core8.Layer {
+  constructor() {
+    super(...arguments);
+    this.node = import_utils12.domUtils.createDivWithClass("gedit-flow-lines-layer");
+    /**
+     * 可视区域变化
+     */
+    this.onViewportChange = (0, import_lodash4.throttle)(() => {
+      this.render();
+    }, 100);
+  }
+  get transitions() {
+    return this.document.getRenderDatas(import_document9.FlowNodeTransitionData);
+  }
+  onZoom() {
+    const svgContainer = this.node.querySelector("svg.flow-lines-container");
+    svgContainer?.setAttribute?.("viewBox", this.viewBox);
+  }
+  onReady() {
+    this.node.style.zIndex = "1";
+  }
+  get viewBox() {
+    const ratio = 1e3 / this.config.finalScale;
+    return `0 0 ${ratio} ${ratio}`;
+  }
+  render() {
+    const allLines = [];
+    const isViewportVisible = this.config.isViewportVisible.bind(this.config);
+    if (this.documentTransformer.loading) return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null);
+    this.documentTransformer.refresh();
+    this.transitions.forEach((transition) => {
+      createLines({
+        data: transition,
+        rendererRegistry: this.rendererRegistry,
+        isViewportVisible,
+        linesSave: allLines,
+        dragService: this.dragService
+      });
+    });
+    const { activateLines = [], normalLines = [] } = (0, import_lodash4.groupBy)(
+      allLines,
+      (line) => line.props.activated ? "activateLines" : "normalLines"
+    );
+    const resultLines = [...normalLines, ...activateLines];
+    const arrowRenderer = this.rendererRegistry.tryToGetRendererComponent(
+      "marker-arrow" /* MARKER_ARROW */
+    );
+    const activateArrowRenderer = this.rendererRegistry.tryToGetRendererComponent(
+      "marker-active-arrow" /* MARKER_ACTIVATE_ARROW */
+    );
+    const arrow = arrowRenderer ? import_react8.default.createElement(arrowRenderer.renderer) : null;
+    const activateArrow = activateArrowRenderer ? import_react8.default.createElement(activateArrowRenderer.renderer) : null;
+    return /* @__PURE__ */ import_react8.default.createElement(
+      "svg",
+      {
+        className: "flow-lines-container",
+        width: "1000",
+        height: "1000",
+        overflow: "visible",
+        viewBox: this.viewBox,
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ import_react8.default.createElement("defs", null, arrowRenderer ? arrow : /* @__PURE__ */ import_react8.default.createElement(MarkerArrow_default, null), activateArrow ? activateArrow : /* @__PURE__ */ import_react8.default.createElement(MarkerActivatedArrow_default, null)),
+      resultLines
+    );
+  }
+};
+__decorateClass([
+  (0, import_inversify5.inject)(import_document9.FlowDocument)
+], FlowLinesLayer.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify5.inject)(import_document9.FlowDragService)
+], FlowLinesLayer.prototype, "dragService", 2);
+__decorateClass([
+  (0, import_inversify5.inject)(FlowRendererRegistry)
+], FlowLinesLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  (0, import_core8.observeEntity)(import_document9.FlowDocumentTransformerEntity)
+], FlowLinesLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  (0, import_core8.observeEntity)(import_document9.FlowRendererStateEntity)
+], FlowLinesLayer.prototype, "flowRenderState", 2);
+__decorateClass([
+  (0, import_core8.observeEntityDatas)(import_document9.FlowNodeEntity, import_document9.FlowNodeTransitionData)
+], FlowLinesLayer.prototype, "_transitions", 2);
+FlowLinesLayer = __decorateClass([
+  (0, import_inversify5.injectable)()
+], FlowLinesLayer);
+
+// src/layers/flow-labels-layer.tsx
+var import_react14 = __toESM(require("react"));
+var import_lodash5 = require("lodash");
+var import_inversify6 = require("inversify");
+var import_utils16 = require("@flowgram.ai/utils");
+var import_document15 = require("@flowgram.ai/document");
+var import_core11 = require("@flowgram.ai/core");
+
+// src/components/LabelsRenderer.tsx
+var import_react13 = __toESM(require("react"));
+var import_utils15 = require("@flowgram.ai/utils");
+var import_document14 = require("@flowgram.ai/document");
+
+// src/components/CollapseAdder.tsx
+var import_react11 = __toESM(require("react"));
+var import_document12 = require("@flowgram.ai/document");
+
+// src/components/Collapse.tsx
+var import_react9 = __toESM(require("react"));
+var import_document10 = require("@flowgram.ai/document");
+function Collapse(props) {
+  const {
+    data,
+    rendererRegistry,
+    forceVisible,
+    hoverHeight = getTransitionLabelHoverHeight(data),
+    hoverWidth = getTransitionLabelHoverWidth(data),
+    wrapperStyle,
+    ...restProps
+  } = props;
+  const { activateNode } = restProps;
+  const [hoverActivated, setHoverActivated] = (0, import_react9.useState)(false);
+  const activateData = activateNode?.getData(import_document10.FlowNodeRenderData);
+  const handleMouseEnter = (0, import_react9.useCallback)(() => {
+    setHoverActivated(true);
+    activateData?.toggleMouseEnter();
+  }, []);
+  const handleMouseLeave = (0, import_react9.useCallback)(() => {
+    setHoverActivated(false);
+    activateData?.toggleMouseLeave();
+  }, []);
+  const collapseOpener = rendererRegistry.getRendererComponent("collapse" /* COLLAPSE */);
+  const node = data.entity;
+  const child = import_react9.default.createElement(
+    collapseOpener.renderer,
+    {
+      node,
+      collapseNode: node,
+      ...restProps,
+      hoverActivated
+    }
+  );
+  const isChildVisible = data.collapsed || activateData?.hovered || hoverActivated || forceVisible;
+  return /* @__PURE__ */ import_react9.default.createElement(
+    "div",
+    {
+      className: "flow-canvas-collapse",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        width: hoverWidth,
+        height: hoverHeight,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        ...wrapperStyle
+      }
+    },
+    isChildVisible ? child : null
+  );
+}
+
+// src/components/Adder.tsx
+var import_react10 = __toESM(require("react"));
+var import_document11 = require("@flowgram.ai/document");
+var import_core9 = require("@flowgram.ai/core");
+var getFlowRenderKey = (node, { dragService }) => {
+  if (dragService && dragService.dragging && dragService.isDroppableNode(node)) {
+    if (dragService.dropNodeId === node.id) {
+      return "drag-highlight-adder" /* DRAG_HIGHLIGHT_ADDER */;
+    }
+    return "draggable-adder" /* DRAGGABLE_ADDER */;
+  }
+  return "adder" /* ADDER */;
+};
+function Adder(props) {
+  const {
+    data,
+    rendererRegistry,
+    hoverHeight = getTransitionLabelHoverHeight(data),
+    hoverWidth = getTransitionLabelHoverWidth(data),
+    ...restProps
+  } = props;
+  const [hoverActivated, setHoverActivated] = (0, import_react10.useState)(false);
+  const handleMouseEnter = (0, import_react10.useCallback)(() => setHoverActivated(true), []);
+  const handleMouseLeave = (0, import_react10.useCallback)(() => setHoverActivated(false), []);
+  const node = data.entity;
+  const dragService = (0, import_core9.useService)(import_document11.FlowDragService);
+  const flowRenderKey = getFlowRenderKey(node, { dragService });
+  const adder = rendererRegistry.getRendererComponent(flowRenderKey);
+  const from = node;
+  const to = data.entity.document.renderTree.getOriginInfo(node).next;
+  const renderTo = node.next;
+  const child = import_react10.default.createElement(
+    adder.renderer,
+    {
+      node,
+      from,
+      to,
+      renderTo,
+      hoverActivated,
+      setHoverActivated,
+      hoverWidth,
+      hoverHeight,
+      ...restProps
+    }
+  );
+  return (
+    // eslint-disable-next-line react/jsx-filename-extension
+    /* @__PURE__ */ import_react10.default.createElement(
+      "div",
+      {
+        className: "flow-canvas-adder",
+        "data-testid": "sdk.flowcanvas.line.adder",
+        "data-from": from.id,
+        "data-to": to?.id ?? "",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        style: {
+          width: hoverWidth,
+          height: hoverHeight,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }
+      },
+      child
+    )
+  );
+}
+
+// src/components/CollapseAdder.tsx
+function CollapseAdder(props) {
+  const { data, rendererRegistry, ...restProps } = props;
+  const { activateNode } = restProps;
+  const [hoverActivated, setHoverActivated] = (0, import_react11.useState)(false);
+  const activateData = activateNode?.getData(import_document12.FlowNodeRenderData);
+  const handleMouseEnter = (0, import_react11.useCallback)(() => {
+    setHoverActivated(true);
+  }, []);
+  const handleMouseLeave = (0, import_react11.useCallback)(() => {
+    setHoverActivated(false);
+  }, []);
+  const isVertical = activateNode?.isVertical;
+  const activated = activateData?.hovered || hoverActivated;
+  if (isVertical) {
+    return /* @__PURE__ */ import_react11.default.createElement(
+      "div",
+      {
+        className: "flow-canvas-collapse-adder",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      },
+      (activated || data.collapsed) && /* @__PURE__ */ import_react11.default.createElement(
+        Collapse,
+        {
+          forceVisible: true,
+          ...props,
+          wrapperStyle: {
+            alignItems: "flex-end"
+          },
+          hoverHeight: 20
+        }
+      ),
+      !data.collapsed && /* @__PURE__ */ import_react11.default.createElement(Adder, { ...props, hoverHeight: activated ? 20 : 40, hoverActivated: activated })
+    );
+  }
+  return /* @__PURE__ */ import_react11.default.createElement(
+    "div",
+    {
+      className: "flow-canvas-collapse-adder",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        display: data.collapsed ? "block" : "flex"
+      }
+    },
+    (activated || data.collapsed) && /* @__PURE__ */ import_react11.default.createElement(
+      Collapse,
+      {
+        forceVisible: true,
+        ...props,
+        wrapperStyle: {
+          justifyContent: "flex-end"
+        },
+        hoverWidth: 20
+      }
+    ),
+    !data.collapsed && /* @__PURE__ */ import_react11.default.createElement(Adder, { ...props, hoverWidth: activated ? 20 : 40, hoverActivated: activated })
+  );
+}
+
+// src/components/BranchDraggableRenderer.tsx
+var import_react12 = __toESM(require("react"));
+var import_document13 = require("@flowgram.ai/document");
+var import_core10 = require("@flowgram.ai/core");
+var getFlowRenderKey2 = (node, { dragService, side }) => {
+  if (dragService.isDragBranch && side && dragService.labelSide === side && dragService.isDroppableBranch(node, side)) {
+    if (dragService.dropNodeId === node.id) {
+      return "drag-branch-highlight-adder" /* DRAG_BRANCH_HIGHLIGHT_ADDER */;
+    }
+    return "draggable-adder" /* DRAGGABLE_ADDER */;
+  }
+  return "";
+};
+function BranchDraggableRenderer(props) {
+  const { data, rendererRegistry, side, ...restProps } = props;
+  const node = data.entity;
+  const dragService = (0, import_core10.useService)(import_document13.FlowDragService);
+  const flowRenderKey = getFlowRenderKey2(node, { side, dragService });
+  if (!flowRenderKey) {
+    return null;
+  }
+  const adder = rendererRegistry.getRendererComponent(flowRenderKey);
+  const from = node;
+  const to = data.entity.document.renderTree.getOriginInfo(node).next;
+  const renderTo = node.next;
+  const child = import_react12.default.createElement(
+    adder.renderer,
+    {
+      node,
+      from,
+      to,
+      renderTo,
+      ...restProps
+    }
+  );
+  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "flow-canvas-branch-draggable-adder" }, child);
+}
+
+// src/components/LabelsRenderer.tsx
+var TEXT_LABEL_STYLE = {
+  fontSize: 12,
+  color: "#8F959E",
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  backgroundColor: "var(--g-editor-background)",
+  lineHeight: "20px"
+};
+var LABEL_MAX_WIDTH = 150;
+var LABEL_MAX_HEIGHT = 60;
+function getLabelBounds(offset) {
+  return new import_utils15.Rectangle(
+    offset.x - LABEL_MAX_WIDTH / 2,
+    offset.y - LABEL_MAX_HEIGHT / 2,
+    LABEL_MAX_WIDTH,
+    LABEL_MAX_HEIGHT
+  );
+}
+function createLabels(labelProps) {
+  const { data, rendererRegistry, labelsSave, getLabelColor } = labelProps;
+  const { labels, renderData } = data || {};
+  const { activated } = renderData || {};
+  const renderLabel = (label, index) => {
+    const { offset, renderKey, props, rotate, type } = label || {};
+    const offsetX = offset.x;
+    const offsetY = offset.y;
+    let child = null;
+    switch (type) {
+      case import_document14.FlowTransitionLabelEnum.BRANCH_DRAGGING_LABEL:
+        child = /* @__PURE__ */ import_react13.default.createElement(BranchDraggableRenderer, { rendererRegistry, data, ...props });
+        break;
+      case import_document14.FlowTransitionLabelEnum.ADDER_LABEL:
+        child = /* @__PURE__ */ import_react13.default.createElement(Adder, { rendererRegistry, data, ...props });
+        break;
+      case import_document14.FlowTransitionLabelEnum.COLLAPSE_LABEL:
+        child = /* @__PURE__ */ import_react13.default.createElement(Collapse, { rendererRegistry, data, ...props });
+        break;
+      case import_document14.FlowTransitionLabelEnum.COLLAPSE_ADDER_LABEL:
+        child = /* @__PURE__ */ import_react13.default.createElement(CollapseAdder, { rendererRegistry, data, ...props });
+        break;
+      case import_document14.FlowTransitionLabelEnum.TEXT_LABEL:
+        if (!renderKey) {
+          return null;
+        }
+        const text = rendererRegistry.getText(renderKey) || renderKey;
+        child = /* @__PURE__ */ import_react13.default.createElement(
+          "div",
+          {
+            style: {
+              ...TEXT_LABEL_STYLE,
+              ...props?.style,
+              color: getLabelColor(activated),
+              transform: rotate ? `rotate(${rotate})` : void 0
+            }
+          },
+          text
+        );
+        break;
+      case import_document14.FlowTransitionLabelEnum.CUSTOM_LABEL:
+        if (!renderKey) {
+          return null;
+        }
+        try {
+          const renderer = rendererRegistry.getRendererComponent(renderKey);
+          child = import_react13.default.createElement(
+            renderer.renderer,
+            {
+              node: data.entity,
+              ...props
+            }
+          );
+        } catch (err) {
+          console.error(err);
+          child = renderKey;
+        }
+        break;
+      default:
+        break;
+    }
+    return /* @__PURE__ */ import_react13.default.createElement(
+      "div",
+      {
+        key: `${data.entity.id}${index}`,
+        style: {
+          position: "absolute",
+          left: offsetX,
+          top: offsetY,
+          transform: "translate(-50%, -50%)"
+        }
+      },
+      child
+    );
+  };
+  labels.forEach((label, index) => {
+    if (labelProps.isViewportVisible(getLabelBounds(label.offset))) {
+      labelsSave.push(renderLabel(label, index));
+    }
+  });
+}
+
+// src/layers/flow-labels-layer.tsx
+var FlowLabelsLayer = class extends import_core11.Layer {
+  constructor() {
+    super(...arguments);
+    this.node = import_utils16.domUtils.createDivWithClass("gedit-flow-labels-layer");
+    /**
+     * 可视区域变化
+     */
+    this.onViewportChange = (0, import_lodash5.throttle)(() => {
+      this.render();
+    }, 100);
+  }
+  get transitions() {
+    return this.document.getRenderDatas(import_document15.FlowNodeTransitionData);
+  }
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  onReady() {
+    this.node.style.zIndex = "9";
+  }
+  /**
+   * 监听readonly和 disabled 状态 并刷新layer, 并刷新
+   */
+  onReadonlyOrDisabledChange() {
+    this.render();
+  }
+  render() {
+    const labels = [];
+    if (this.documentTransformer?.loading) return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null);
+    this.documentTransformer?.refresh?.();
+    const { baseActivatedColor, baseColor } = useBaseColor();
+    const isViewportVisible = this.config.isViewportVisible.bind(this.config);
+    this.transitions.forEach((transition) => {
+      createLabels({
+        data: transition,
+        rendererRegistry: this.rendererRegistry,
+        isViewportVisible,
+        labelsSave: labels,
+        getLabelColor: (activated) => activated ? baseActivatedColor : baseColor
+      });
+    });
+    return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, labels);
+  }
+};
+__decorateClass([
+  (0, import_inversify6.inject)(import_document15.FlowDocument)
+], FlowLabelsLayer.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify6.inject)(FlowRendererRegistry)
+], FlowLabelsLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  (0, import_core11.observeEntity)(import_document15.FlowDocumentTransformerEntity)
+], FlowLabelsLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  (0, import_core11.observeEntity)(import_document15.FlowRendererStateEntity)
+], FlowLabelsLayer.prototype, "flowRenderState", 2);
+__decorateClass([
+  (0, import_core11.observeEntityDatas)(import_document15.FlowNodeEntity, import_document15.FlowNodeTransitionData)
+], FlowLabelsLayer.prototype, "_transitions", 2);
+FlowLabelsLayer = __decorateClass([
+  (0, import_inversify6.injectable)()
+], FlowLabelsLayer);
+
+// src/layers/flow-debug-layer.tsx
+var import_inversify7 = require("inversify");
+var import_utils18 = require("@flowgram.ai/utils");
+var import_document16 = require("@flowgram.ai/document");
+var import_core12 = require("@flowgram.ai/core");
+
+// src/utils/scroll-limit.ts
+var import_utils17 = require("@flowgram.ai/utils");
+var SCROLL_LIMIT_PADDING = -120;
+function getScrollViewport(scrollData, config) {
+  const scale = config.finalScale;
+  return new import_utils17.Rectangle(
+    scrollData.scrollX / scale,
+    scrollData.scrollY / scale,
+    config.config.width / scale,
+    config.config.height / scale
+  ).pad(SCROLL_LIMIT_PADDING / scale, SCROLL_LIMIT_PADDING / scale);
+}
+function scrollLimit(scroll, boundsList, config, initScroll) {
+  scroll = { ...scroll };
+  const configData = config.config;
+  const oldScroll = { scrollX: configData.scrollX, scrollY: configData.scrollY };
+  if (boundsList.length === 0 || configData.width === 0 || configData.height === 0) return scroll;
+  const viewport = getScrollViewport(scroll, config);
+  const isVisible = boundsList.find((bounds) => import_utils17.Rectangle.isViewportVisible(bounds, viewport));
+  if (!isVisible) {
+    const oldViewport = getScrollViewport(oldScroll, config);
+    const isOldVisible = boundsList.find(
+      (bounds) => import_utils17.Rectangle.isViewportVisible(bounds, oldViewport)
+    );
+    if (!isOldVisible) {
+      return initScroll();
+    }
+    return oldScroll;
+  }
+  return scroll;
+}
+
+// src/utils/scroll-bar-events.tsx
+var ScrollBarEvents = Symbol("ScrollBarEvents");
+
+// src/layers/flow-debug-layer.tsx
+var rgbTimes = 0;
+function randomColor(percent) {
+  const max = Math.min(percent / 10 * 255, 255);
+  rgbTimes += 1;
+  const rgb = rgbTimes % 3;
+  const random = () => Math.floor(Math.random() * max);
+  return `rgb(${rgb === 0 ? random() : 0}, ${rgb === 1 ? random() : 0}, ${rgb === 2 ? random() : 0})`;
+}
+var FlowDebugLayer = class extends import_core12.Layer {
+  constructor() {
+    super(...arguments);
+    this.node = document.createElement("div");
+    this.viewport = import_utils18.domUtils.createDivWithClass("gedit-flow-debug-bounds");
+    this.boundsNodes = import_utils18.domUtils.createDivWithClass("gedit-flow-debug-bounds");
+    this.pointsNodes = import_utils18.domUtils.createDivWithClass("gedit-flow-debug-points");
+    this.versionNodes = import_utils18.domUtils.createDivWithClass("gedit-flow-debug-versions gedit-hidden");
+    /**
+     * ?debug=xxxx, 则返回 xxxx
+     */
+    this.filterKey = window.location.search.match(/debug=([^&]+)/)?.[1] || "";
+    this.originLine = document.createElement("div");
+    this.domCache = /* @__PURE__ */ new WeakMap();
+  }
+  get transforms() {
+    return this.document.getRenderDatas(import_document16.FlowNodeTransformData);
+  }
+  onReady() {
+    this.node.style.zIndex = "20";
+    import_utils18.domUtils.setStyle(this.originLine, {
+      position: "absolute",
+      width: 1,
+      height: "100%",
+      left: this.pipelineNode.style.left,
+      top: 0,
+      borderLeft: "1px dashed rgba(255, 0, 0, 0.5)"
+    });
+    this.pipelineNode.parentElement.appendChild(this.originLine);
+    this.node.appendChild(this.viewport);
+    this.node.appendChild(this.versionNodes);
+    this.node.appendChild(this.boundsNodes);
+    this.node.appendChild(this.pointsNodes);
+    this.renderScrollViewportBounds();
+  }
+  onScroll() {
+    this.originLine.style.left = this.pipelineNode.style.left;
+    this.renderScrollViewportBounds();
+  }
+  onResize() {
+    this.renderScrollViewportBounds();
+  }
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+    this.renderScrollViewportBounds();
+  }
+  createBounds(transform, color, depth) {
+    if (this.filterKey && transform.key.indexOf(this.filterKey) === -1) return;
+    let cache = this.domCache.get(transform);
+    const { bounds, inputPoint, outputPoint } = transform;
+    if (!cache) {
+      const bbox = import_utils18.domUtils.createDivWithClass("");
+      const input = import_utils18.domUtils.createDivWithClass("");
+      const output = import_utils18.domUtils.createDivWithClass("");
+      const version = import_utils18.domUtils.createDivWithClass("");
+      bbox.title = transform.key;
+      input.title = transform.key + "(input)";
+      output.title = transform.key + "(output)";
+      version.title = transform.key;
+      this.boundsNodes.appendChild(bbox);
+      this.pointsNodes.appendChild(input);
+      this.pointsNodes.appendChild(output);
+      this.versionNodes.appendChild(version);
+      transform.onDispose(() => {
+        bbox.remove();
+        input.remove();
+        output.remove();
+      });
+      cache = { bbox, input, output, version, color };
+      this.domCache.set(transform, cache);
+    }
+    import_utils18.domUtils.setStyle(cache.version, {
+      position: "absolute",
+      marginLeft: "-9px",
+      marginTop: "-10px",
+      borderRadius: 12,
+      background: "#f54a45",
+      padding: 4,
+      color: "navajowhite",
+      display: transform.renderState.hidden ? "none" : "block",
+      zIndex: depth + 1e3,
+      left: bounds.center.x,
+      top: bounds.center.y
+    });
+    cache.version.innerHTML = transform.version.toString();
+    import_utils18.domUtils.setStyle(cache.input, {
+      position: "absolute",
+      width: 10,
+      height: 10,
+      marginLeft: -5,
+      marginTop: -5,
+      borderRadius: 5,
+      left: inputPoint.x,
+      top: inputPoint.y,
+      opacity: 0.4,
+      zIndex: depth,
+      backgroundColor: cache.color,
+      whiteSpace: "nowrap",
+      overflow: "visible"
+    });
+    cache.input.innerHTML = `${inputPoint.x},${inputPoint.y}`;
+    import_utils18.domUtils.setStyle(cache.output, {
+      position: "absolute",
+      width: 10,
+      height: 10,
+      marginLeft: -5,
+      marginTop: -5,
+      borderRadius: 5,
+      left: outputPoint.x,
+      top: outputPoint.y,
+      opacity: 0.4,
+      zIndex: depth,
+      backgroundColor: cache.color,
+      whiteSpace: "nowrap",
+      overflow: "visible"
+    });
+    cache.output.innerHTML = `${outputPoint.x},${outputPoint.y}`;
+    import_utils18.domUtils.setStyle(cache.bbox, {
+      position: "absolute",
+      width: bounds.width,
+      height: bounds.height,
+      left: bounds.left,
+      top: bounds.top,
+      opacity: `${depth / 30}`,
+      backgroundColor: cache.color
+    });
+  }
+  /**
+   * 显示 viewport 可滚动区域
+   */
+  renderScrollViewportBounds() {
+    const viewportBounds = getScrollViewport(
+      {
+        scrollX: this.config.config.scrollX,
+        scrollY: this.config.config.scrollY
+      },
+      this.config
+    );
+    import_utils18.domUtils.setStyle(this.viewport, {
+      position: "absolute",
+      width: viewportBounds.width - 2,
+      height: viewportBounds.height - 2,
+      left: viewportBounds.left + 1,
+      top: viewportBounds.top + 1,
+      border: "1px solid rgba(200, 200, 255, 0.5)"
+    });
+  }
+  autorun() {
+    if (this.documentTransformer.loading) return;
+    this.documentTransformer.refresh();
+    let color = randomColor(0);
+    this.document.traverse((entity, depth) => {
+      const transform = entity.getData(import_document16.FlowNodeTransformData);
+      color = randomColor(depth);
+      this.createBounds(transform, color, depth);
+    });
+    this.renderScrollViewportBounds();
+  }
+};
+__decorateClass([
+  (0, import_inversify7.inject)(import_document16.FlowDocument)
+], FlowDebugLayer.prototype, "document", 2);
+__decorateClass([
+  (0, import_core12.observeEntity)(import_document16.FlowDocumentTransformerEntity)
+], FlowDebugLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  (0, import_core12.observeEntityDatas)(import_document16.FlowNodeEntity, import_document16.FlowNodeTransformData)
+], FlowDebugLayer.prototype, "_transforms", 2);
+FlowDebugLayer = __decorateClass([
+  (0, import_inversify7.injectable)()
+], FlowDebugLayer);
+
+// src/layers/flow-scroll-bar-layer.tsx
+var import_inversify8 = require("inversify");
+var import_document17 = require("@flowgram.ai/document");
+var import_core13 = require("@flowgram.ai/core");
+var import_utils20 = require("@flowgram.ai/utils");
+var BORDER_WIDTH = 2;
+var BLOCK_OFFSET = 11;
+var SCROLL_BAR_WIDTH = "7px";
+var FlowScrollBarLayer = class extends import_core13.Layer {
+  constructor() {
+    super(...arguments);
+    // @observeEntity(FlowDocumentTransformerEntity) readonly documentTransformer: FlowDocumentTransformerEntity
+    // 右滚动区域
+    this.rightScrollBar = import_utils20.domUtils.createDivWithClass("gedit-playground-scroll-right");
+    // 右滚动条
+    this.rightScrollBarBlock = import_utils20.domUtils.createDivWithClass("gedit-playground-scroll-right-block");
+    // 底滚动区域
+    this.bottomScrollBar = import_utils20.domUtils.createDivWithClass("gedit-playground-scroll-bottom");
+    // 底滚动条
+    this.bottomScrollBarBlock = import_utils20.domUtils.createDivWithClass(
+      "gedit-playground-scroll-bottom-block"
+    );
+    // 总滚动距离
+    this.sum = 0;
+    // 初始 x 轴滚动距离
+    this.initialScrollX = 0;
+    // 初始 y 轴滚动距离
+    this.initialScrollY = 0;
+    this.bottomGrabDragger = new import_core13.PlaygroundDrag({
+      onDragStart: (e) => {
+        this.config.updateCursor("grabbing");
+        this.sum = 0;
+        this.initialScrollX = this.config.getViewport().x;
+        this.onBoardingToast();
+      },
+      onDrag: (e) => {
+        this.sum += e.movingDelta.x;
+        this.playgroundConfigEntity.scroll(
+          {
+            scrollX: (this.initialScrollX + this.sum * this.viewportFullWidth / (this.clientViewportWidth - this.scrollBottomWidth)) * this.scale
+          },
+          false
+        );
+      },
+      onDragEnd: (e) => {
+        this.config.updateCursor("default");
+      }
+    });
+    this.rightGrabDragger = new import_core13.PlaygroundDrag({
+      onDragStart: (e) => {
+        this.config.updateCursor("grabbing");
+        this.sum = 0;
+        this.initialScrollY = this.config.getViewport().y;
+        this.onBoardingToast();
+      },
+      onDrag: (e) => {
+        this.sum += e.movingDelta.y;
+        this.playgroundConfigEntity.scroll(
+          {
+            scrollY: (this.initialScrollY + this.sum * this.viewportFullHeight / (this.clientViewportHeight - this.scrollRightHeight)) * this.scale
+          },
+          false
+        );
+      },
+      onDragEnd: (e) => {
+        this.config.updateCursor("default");
+      }
+    });
+  }
+  // 浏览器视图宽度
+  get clientViewportWidth() {
+    return this.viewportWidth * this.scale - BLOCK_OFFSET;
+  }
+  // 浏览器视图高度
+  get clientViewportHeight() {
+    return this.viewportHeight * this.scale - BLOCK_OFFSET;
+  }
+  // 视图的完整宽度
+  get viewportFullWidth() {
+    return this.mostLeft - this.mostRight;
+  }
+  // 视图的完整高度
+  get viewportFullHeight() {
+    return this.mostTop - this.mostBottom;
+  }
+  // 视图的可移动宽度
+  get viewportMoveWidth() {
+    return this.mostLeft - this.mostRight + this.width;
+  }
+  // 视图的可移动高度
+  get viewportMoveHeight() {
+    return this.mostTop - this.mostBottom + this.height;
+  }
+  getToLeft(scrollX) {
+    return (scrollX - this.mostRight) / this.viewportMoveWidth * this.clientViewportWidth;
+  }
+  getToTop(scrollY) {
+    return (scrollY - this.mostBottom) / this.viewportMoveHeight * this.clientViewportHeight;
+  }
+  clickRightScrollBar(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const ratio = 1 - (e?.y || 0) / this.clientViewportHeight;
+    const scrollY = (this.mostTop - this.viewportFullHeight * ratio) * this.scale;
+    this.playgroundConfigEntity.scroll(
+      {
+        scrollY
+      },
+      false
+    );
+  }
+  clickBottomScrollBar(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    const ratio = 1 - (e?.x || 0) / this.clientViewportWidth;
+    const scrollX = (this.mostLeft - this.viewportFullWidth * ratio) * this.scale;
+    this.playgroundConfigEntity.scroll(
+      {
+        scrollX
+      },
+      false
+    );
+  }
+  onBoardingToast() {
+    this.events?.dragStart();
+  }
+  changeScrollBarVisibility(scrollBar, status) {
+    const addClassName = status === "show" /* Show */ ? "gedit-playground-scroll-show" : "gedit-playground-scroll-hidden";
+    const delClassName = status === "show" /* Show */ ? "gedit-playground-scroll-hidden" : "gedit-playground-scroll-show";
+    import_utils20.domUtils.addClass(scrollBar, addClassName);
+    import_utils20.domUtils.delClass(scrollBar, delClassName);
+  }
+  onReady() {
+    if (!this.options.getBounds) {
+      this.options = {
+        getBounds: () => {
+          const document2 = this.flowDocument;
+          if (!document2) return import_utils20.Rectangle.EMPTY;
+          document2.transformer.refresh();
+          return document2.root.getData(import_document17.FlowNodeTransformData).bounds;
+        },
+        showScrollBars: "whenScrolling"
+      };
+    }
+    this.pipelineNode.parentNode.appendChild(this.rightScrollBar);
+    this.pipelineNode.parentNode.appendChild(this.rightScrollBarBlock);
+    this.pipelineNode.parentNode.appendChild(this.bottomScrollBar);
+    this.pipelineNode.parentNode.appendChild(this.bottomScrollBarBlock);
+    this.rightScrollBar.onclick = this.clickRightScrollBar.bind(this);
+    this.bottomScrollBar.onclick = this.clickBottomScrollBar.bind(this);
+    if (this.options.showScrollBars === "whenScrolling") {
+      this.rightScrollBar.addEventListener("mouseenter", (e) => {
+        this.changeScrollBarVisibility(this.rightScrollBarBlock, "show" /* Show */);
+      });
+      this.rightScrollBar.addEventListener("mouseleave", (e) => {
+        this.changeScrollBarVisibility(this.rightScrollBarBlock, "hidden" /* Hidden */);
+      });
+      this.bottomScrollBar.addEventListener("mouseenter", (e) => {
+        this.changeScrollBarVisibility(this.bottomScrollBarBlock, "show" /* Show */);
+      });
+      this.bottomScrollBar.addEventListener("mouseleave", (e) => {
+        this.changeScrollBarVisibility(this.bottomScrollBarBlock, "hidden" /* Hidden */);
+      });
+    }
+    this.bottomScrollBarBlock.addEventListener("mousedown", (e) => {
+      this.bottomGrabDragger.start(e.clientX, e.clientY);
+      e.stopPropagation();
+    });
+    this.rightScrollBarBlock.addEventListener("mousedown", (e) => {
+      this.rightGrabDragger.start(e.clientX, e.clientY);
+      e.stopPropagation();
+    });
+  }
+  autorun() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+    const viewportBounds = getScrollViewport(
+      {
+        scrollX: this.config.config.scrollX,
+        scrollY: this.config.config.scrollY
+      },
+      this.config
+    );
+    const viewport = this.config.getViewport();
+    this.viewportWidth = viewport.width;
+    this.viewportHeight = viewport.height;
+    const rootBounds = this.options.getBounds();
+    this.width = rootBounds?.width || 0;
+    this.height = rootBounds?.height || 0;
+    const paddingLeftRight = (this.viewportWidth - viewportBounds.width) / 2 - BORDER_WIDTH;
+    const paddingTopBottom = (this.viewportHeight - viewportBounds.height) / 2 - BORDER_WIDTH;
+    const canvasTotalWidth = this.width + viewportBounds.width;
+    const canvasTotalHeight = this.height + viewportBounds.height;
+    const initialOffsetX = rootBounds.x;
+    const initialOffsetY = rootBounds.y;
+    this.mostLeft = this.width + initialOffsetX - paddingLeftRight;
+    this.mostRight = this.mostLeft - canvasTotalWidth;
+    this.mostTop = this.height + initialOffsetY - paddingTopBottom;
+    this.mostBottom = this.mostTop - canvasTotalHeight;
+    this.scale = this.config.finalScale;
+    const calcViewportWidth = this.clientViewportWidth;
+    const calcViewportHeight = this.clientViewportHeight;
+    this.scrollBottomWidth = calcViewportWidth - calcViewportWidth * (this.mostLeft - this.mostRight) / this.viewportMoveWidth;
+    this.scrollRightHeight = calcViewportHeight - calcViewportHeight * (this.mostTop - this.mostBottom) / this.viewportMoveHeight;
+    const bottomBarToLeft = this.getToLeft(viewport.x);
+    const rightBarToTop = this.getToTop(viewport.y);
+    import_utils20.domUtils.setStyle(this.rightScrollBarBlock, {
+      right: 2,
+      top: rightBarToTop,
+      background: "#1F2329",
+      zIndex: 10,
+      height: this.scrollRightHeight,
+      width: SCROLL_BAR_WIDTH
+    });
+    import_utils20.domUtils.setStyle(this.bottomScrollBarBlock, {
+      left: bottomBarToLeft,
+      bottom: 2,
+      background: "#1F2329",
+      zIndex: 10,
+      height: SCROLL_BAR_WIDTH,
+      width: this.scrollBottomWidth
+    });
+    this.changeScrollBarVisibility(this.rightScrollBarBlock, "show" /* Show */);
+    this.changeScrollBarVisibility(this.bottomScrollBarBlock, "show" /* Show */);
+    if (this.options.showScrollBars === "whenScrolling") {
+      this.hideTimeout = window.setTimeout(() => {
+        this.changeScrollBarVisibility(this.rightScrollBarBlock, "hidden" /* Hidden */);
+        this.changeScrollBarVisibility(this.bottomScrollBarBlock, "hidden" /* Hidden */);
+        this.hideTimeout = void 0;
+      }, 1e3);
+    }
+  }
+};
+__decorateClass([
+  (0, import_inversify8.optional)(),
+  (0, import_inversify8.inject)(ScrollBarEvents)
+], FlowScrollBarLayer.prototype, "events", 2);
+__decorateClass([
+  (0, import_inversify8.inject)(import_document17.FlowDocument),
+  (0, import_inversify8.optional)()
+], FlowScrollBarLayer.prototype, "flowDocument", 2);
+__decorateClass([
+  (0, import_core13.observeEntity)(import_core13.PlaygroundConfigEntity)
+], FlowScrollBarLayer.prototype, "playgroundConfigEntity", 2);
+FlowScrollBarLayer = __decorateClass([
+  (0, import_inversify8.injectable)()
+], FlowScrollBarLayer);
+
+// src/layers/flow-drag-layer.tsx
+var import_react15 = __toESM(require("react"));
+var import_inversify9 = require("inversify");
+var import_utils22 = require("@flowgram.ai/utils");
+var import_document18 = require("@flowgram.ai/document");
+var import_core14 = require("@flowgram.ai/core");
+var import_core15 = require("@flowgram.ai/core");
+var DRAG_OFFSET = 10;
+var DEFAULT_DRAG_OFFSET_X = 8;
+var DEFAULT_DRAG_OFFSET_Y = 8;
+var FlowDragLayer = class extends import_core14.Layer {
+  constructor() {
+    super(...arguments);
+    this.dragOffset = {
+      x: DEFAULT_DRAG_OFFSET_X,
+      y: DEFAULT_DRAG_OFFSET_Y
+    };
+    this.containerRef = import_react15.default.createRef();
+    this.draggingNodeMask = document.createElement("div");
+    this._dragger = new import_core15.PlaygroundDrag({
+      onDrag: (e) => {
+        this.handleMouseMove(e);
+      },
+      onDragEnd: () => {
+        this.handleMouseUp();
+      },
+      stopGlobalEventNames: ["contextmenu"]
+    });
+  }
+  get transitions() {
+    const result = [];
+    this.document.traverse((entity) => {
+      result.push(entity.getData(import_document18.FlowNodeTransitionData));
+    });
+    return result;
+  }
+  get dragStartEntity() {
+    return this.flowRenderStateEntity.getDragStartEntity();
+  }
+  set dragStartEntity(entity) {
+    this.flowRenderStateEntity.setDragStartEntity(entity);
+  }
+  get dragEntities() {
+    return this.flowRenderStateEntity.getDragEntities();
+  }
+  set dragEntities(entities) {
+    this.flowRenderStateEntity.setDragEntities(entities);
+  }
+  isGrab() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return currentState === import_core14.EditorState.STATE_GRAB;
+  }
+  setDraggingStatus(status) {
+    if (this.service.nodeDragIdsWithChildren.length) {
+      this.service.nodeDragIdsWithChildren.forEach((_id) => {
+        const node = this.entityManager.getEntityById(_id);
+        const data = node?.getData(import_document18.FlowNodeRenderData);
+        data.dragging = status;
+      });
+    }
+  }
+  dragEnable(e) {
+    return Math.abs(e.clientX - this.initialPosition.x) > DRAG_OFFSET || Math.abs(e.clientY - this.initialPosition.y) > DRAG_OFFSET;
+  }
+  handleMouseMove(event) {
+    if (this.dragStartEntity && this.dragEnable(event)) {
+      this.setDraggingStatus(true);
+      const scale = this.playgroundConfigEntity.finalScale;
+      if (this.containerRef.current) {
+        const dragNode = this.containerRef.current.children?.[0];
+        const dragBlockX = event.clientX - (this.pipelineNode.offsetLeft || 0) - this.playgroundConfigEntity.config.clientX - (dragNode.clientWidth - this.dragOffset.x) * scale;
+        const dragBlockY = event.clientY - (this.pipelineNode.offsetTop || 0) - this.playgroundConfigEntity.config.clientY - (dragNode.clientHeight - this.dragOffset.y) * scale;
+        const isBranch = this.service.isDragBranch;
+        const draggingRect = new import_utils22.Rectangle(
+          dragBlockX,
+          dragBlockY,
+          dragNode.clientWidth * scale,
+          dragNode.clientHeight * scale
+        );
+        let side;
+        const collisionTransition = this.transitions.find((transition) => {
+          if (transition?.entity?.parent?.collapsed) {
+            return false;
+          }
+          const { hasCollision, labelOffsetType } = this.flowDragConfigEntity.isCollision(
+            transition,
+            draggingRect,
+            isBranch
+          );
+          side = labelOffsetType;
+          return hasCollision;
+        });
+        if (collisionTransition && (isBranch ? this.service.isDroppableBranch(collisionTransition.entity, side) : this.service.isDroppableNode(collisionTransition.entity)) && (!this.options.canDrop || this.options.canDrop({
+          dragNodes: this.dragEntities,
+          dropNode: collisionTransition.entity,
+          isBranch
+        }))) {
+          this.flowRenderStateEntity.setNodeDroppingId(collisionTransition.entity.id);
+        } else {
+          this.flowRenderStateEntity.setNodeDroppingId("");
+        }
+        this.flowRenderStateEntity.setDragLabelSide(side);
+        this.containerRef.current.style.visibility = "visible";
+        this.pipelineNode.parentElement.appendChild(this.draggingNodeMask);
+        this.containerRef.current.style.left = `${dragBlockX}px`;
+        this.containerRef.current.style.top = `${dragBlockY}px`;
+        this.containerRef.current.style.transformOrigin = "top left";
+        this.containerRef.current.style.transform = `scale(${scale})`;
+        this.flowDragConfigEntity.scrollDirection(
+          event,
+          this.containerRef.current,
+          dragBlockX,
+          dragBlockY
+        );
+      }
+    }
+  }
+  handleMouseUp() {
+    this.setDraggingStatus(false);
+    if (this.dragStartEntity) {
+      const activatedNodeId = this.service.dropNodeId;
+      if (activatedNodeId) {
+        if (this.service.isDragBranch) {
+          this.service.dropBranch();
+        } else {
+          this.service.dropNode();
+          this.selectConfigEntity.clearSelectedNodes();
+        }
+      }
+      this.flowRenderStateEntity.setNodeDroppingId("");
+      this.flowRenderStateEntity.setDragLabelSide();
+      this.dragStartEntity = void 0;
+      this.dragEntities = [];
+      this.flowDragConfigEntity.stopAllScroll();
+    }
+    if (this.containerRef.current) {
+      this.containerRef.current.style.visibility = "hidden";
+      if (this.pipelineNode.parentElement.contains(this.draggingNodeMask)) {
+        this.pipelineNode.parentElement.removeChild(this.draggingNodeMask);
+      }
+    }
+  }
+  /**
+   * 开始拖拽事件
+   * @param e
+   */
+  async startDrag(e, {
+    dragStartEntity: startEntityFromProps,
+    dragEntities
+  }, options) {
+    if (this.isGrab() || this.config.disabled || this.config.readonly) {
+      return;
+    }
+    this.dragOffset.x = options?.dragOffsetX || DEFAULT_DRAG_OFFSET_X;
+    this.dragOffset.y = options?.dragOffsetY || DEFAULT_DRAG_OFFSET_Y;
+    const isIcon = startEntityFromProps.flowNodeType === import_document18.FlowNodeBaseType.BLOCK_ICON;
+    const isOrderIcon = startEntityFromProps.flowNodeType === import_document18.FlowNodeBaseType.BLOCK_ORDER_ICON;
+    const dragStartEntity = isIcon || isOrderIcon ? startEntityFromProps.parent : startEntityFromProps;
+    if (!dragStartEntity.getData(import_document18.FlowNodeRenderData).draggable) {
+      return;
+    }
+    this.initialPosition = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    this.dragStartEntity = dragStartEntity;
+    this.dragEntities = dragEntities || [this.dragStartEntity];
+    return this._dragger.start(e.clientX, e.clientY);
+  }
+  onReady() {
+    this.draggingNodeMask.style.width = "100%";
+    this.draggingNodeMask.style.height = "100%";
+    this.draggingNodeMask.style.position = "absolute";
+    this.draggingNodeMask.classList.add("dragging-node");
+    this.draggingNodeMask.style.zIndex = "99";
+    this.draggingNodeMask.style.cursor = "pointer";
+    this.dragNodeComp = this.rendererRegistry.getRendererComponent("drag-node" /* DRAG_NODE */);
+    if (this.options.onDrop) {
+      this.toDispose.push(this.service.onDrop(this.options.onDrop));
+    }
+  }
+  render() {
+    const DragComp = this.dragNodeComp.renderer;
+    return /* @__PURE__ */ import_react15.default.createElement(
+      "div",
+      {
+        ref: this.containerRef,
+        style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
+        onMouseEnter: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ import_react15.default.createElement(DragComp, { dragStart: this.dragStartEntity, dragNodes: this.dragEntities })
+    );
+  }
+};
+__decorateClass([
+  (0, import_inversify9.inject)(import_document18.FlowDocument)
+], FlowDragLayer.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify9.inject)(import_document18.FlowDragService)
+], FlowDragLayer.prototype, "service", 2);
+__decorateClass([
+  (0, import_core14.observeEntityDatas)(import_document18.FlowNodeEntity, import_document18.FlowNodeTransformData)
+], FlowDragLayer.prototype, "transforms", 2);
+__decorateClass([
+  (0, import_core14.observeEntity)(import_core14.EditorStateConfigEntity)
+], FlowDragLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  (0, import_core14.observeEntity)(import_core14.PlaygroundConfigEntity)
+], FlowDragLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  (0, import_core14.observeEntity)(FlowDragEntity)
+], FlowDragLayer.prototype, "flowDragConfigEntity", 2);
+__decorateClass([
+  (0, import_core14.observeEntity)(import_document18.FlowRendererStateEntity)
+], FlowDragLayer.prototype, "flowRenderStateEntity", 2);
+__decorateClass([
+  (0, import_core14.observeEntity)(FlowSelectConfigEntity)
+], FlowDragLayer.prototype, "selectConfigEntity", 2);
+__decorateClass([
+  (0, import_inversify9.inject)(FlowRendererRegistry)
+], FlowDragLayer.prototype, "rendererRegistry", 2);
+FlowDragLayer = __decorateClass([
+  (0, import_inversify9.injectable)()
+], FlowDragLayer);
+
+// src/layers/flow-selector-box-layer.tsx
+var import_inversify10 = require("inversify");
+var import_utils23 = require("@flowgram.ai/utils");
+var import_document19 = require("@flowgram.ai/document");
+var import_core16 = require("@flowgram.ai/core");
+var FlowSelectorBoxLayer = class extends import_core16.Layer {
+  constructor() {
+    super(...arguments);
+    this.node = import_utils23.domUtils.createDivWithClass("gedit-selector-box-layer");
+    /**
+     * 选择框
+     */
+    this.selectorBox = this.createDOMCache("gedit-selector-box");
+    /**
+     * 用于遮挡鼠标，避免触发 hover
+     */
+    this.selectorBoxBlock = this.createDOMCache("gedit-selector-box-block");
+    /**
+     * 拖动选择框
+     */
+    this.selectboxDragger = new import_core16.PlaygroundDrag({
+      onDragStart: (e) => {
+        this.selectConfigEntity.clearSelectedNodes();
+        const mousePos = this.playgroundConfigEntity.getPosFromMouseEvent(e);
+        this.transformVisibles = this.flowDocument.getRenderDatas(import_document19.FlowNodeTransformData, false).filter((transform) => {
+          const { entity } = transform;
+          if (entity.originParent) {
+            return this.nodeSelectable(entity, mousePos) && this.nodeSelectable(entity.originParent, mousePos);
+          }
+          return this.nodeSelectable(entity, mousePos);
+        });
+        this.selectorBoxConfigEntity.setDragInfo(e);
+        this.updateSelectorBox(this.selectorBoxConfigEntity);
+      },
+      onDrag: (e) => {
+        this.selectorBoxConfigEntity.setDragInfo(e);
+        this.selectConfigEntity.selectFromBounds(
+          this.selectorBoxConfigEntity.toRectangle(this.playgroundConfigEntity.finalScale),
+          this.transformVisibles
+        );
+        this.updateSelectorBox(this.selectorBoxConfigEntity);
+      },
+      onDragEnd: (e) => {
+        this.selectorBoxConfigEntity.setDragInfo(e);
+        this.transformVisibles.length = 0;
+        this.updateSelectorBox(this.selectorBoxConfigEntity);
+      }
+    });
+  }
+  onReady() {
+    if (!this.options.canSelect) {
+      this.options.canSelect = (e) => {
+        const target = e.target;
+        return target === this.pipelineNode || target === this.playgroundNode;
+      };
+    }
+    this.toDispose.pushAll([
+      this.selectConfigEntity.onConfigChanged(() => {
+        this.selectionService.selection = this.selectConfigEntity.selectedNodes;
+      }),
+      this.selectionService.onSelectionChanged(() => {
+        const selectedNodes = this.selectionService.selection.filter(
+          (entity) => entity instanceof import_document19.FlowNodeEntity
+        );
+        this.selectConfigEntity.selectedNodes = selectedNodes;
+      })
+    ]);
+    this.listenPlaygroundEvent(
+      "mousedown",
+      (e) => {
+        if (!this.isEnabled()) return;
+        if (this.options.canSelect && !this.options.canSelect(e, this.selectorBoxConfigEntity)) {
+          return;
+        }
+        const currentState = this.editorStateConfig.getCurrentState();
+        if (currentState === import_core16.EditorState.STATE_MOUSE_FRIENDLY_SELECT) {
+          this.selectConfigEntity.clearSelectedNodes();
+        }
+        this.selectboxDragger.start(e.clientX, e.clientY, this.config);
+        return true;
+      },
+      import_core16.PipelineLayerPriority.BASE_LAYER
+    );
+  }
+  isEnabled() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    const isMouseFriendly = currentState === import_core16.EditorState.STATE_MOUSE_FRIENDLY_SELECT;
+    return !this.config.disabled && !this.config.readonly && // 鼠标友好模式下，需要按下 shift 启动框选
+    (isMouseFriendly && this.editorStateConfig.isPressingShift || currentState === import_core16.EditorState.STATE_SELECT) && !this.selectorBoxConfigEntity.disabled;
+  }
+  /**
+   * Destroy
+   */
+  dispose() {
+    this.selectorBox.dispose();
+    this.selectorBoxBlock.dispose();
+    super.dispose();
+  }
+  updateSelectorBox(selector) {
+    const node = this.selectorBox.get();
+    const block = this.selectorBoxBlock.get();
+    if (!this.isEnabled() && selector.isMoving) {
+      this.selectorBoxConfigEntity.collapse();
+    }
+    if (!this.isEnabled() || !selector.isMoving) {
+      node.setStyle({
+        display: "none"
+      });
+      block.setStyle({
+        display: "none"
+      });
+    } else {
+      node.setStyle({
+        display: "block",
+        left: selector.position.x,
+        top: selector.position.y,
+        width: selector.size.width,
+        height: selector.size.height
+      });
+      block.setStyle({
+        display: "block",
+        left: selector.position.x - 10,
+        top: selector.position.y - 10,
+        width: selector.size.width + 20,
+        height: selector.size.height + 20
+      });
+    }
+  }
+  nodeSelectable(node, mousePos) {
+    const selectable = node.getNodeMeta().selectable;
+    if (typeof selectable === "function") {
+      return selectable(node, mousePos);
+    } else {
+      return selectable;
+    }
+  }
+  // autorun(): void {
+  //   this.updateSelectorBox(this.selectorBoxConfigEntity);
+  // }
+};
+__decorateClass([
+  (0, import_inversify10.inject)(import_document19.FlowDocument)
+], FlowSelectorBoxLayer.prototype, "flowDocument", 2);
+__decorateClass([
+  (0, import_inversify10.inject)(import_core16.ContextMenuService)
+], FlowSelectorBoxLayer.prototype, "contextMenuService", 2);
+__decorateClass([
+  (0, import_core16.observeEntity)(import_core16.PlaygroundConfigEntity)
+], FlowSelectorBoxLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  (0, import_inversify10.inject)(import_core16.SelectionService)
+], FlowSelectorBoxLayer.prototype, "selectionService", 2);
+__decorateClass([
+  (0, import_core16.observeEntity)(SelectorBoxConfigEntity)
+], FlowSelectorBoxLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  (0, import_core16.observeEntity)(FlowSelectConfigEntity)
+], FlowSelectorBoxLayer.prototype, "selectConfigEntity", 2);
+__decorateClass([
+  (0, import_core16.observeEntity)(import_core16.EditorStateConfigEntity)
+], FlowSelectorBoxLayer.prototype, "editorStateConfig", 2);
+FlowSelectorBoxLayer = __decorateClass([
+  (0, import_inversify10.injectable)()
+], FlowSelectorBoxLayer);
+
+// src/layers/flow-selector-bounds-layer.tsx
+var import_react16 = __toESM(require("react"));
+var import_inversify11 = require("inversify");
+var import_document20 = require("@flowgram.ai/document");
+var import_core17 = require("@flowgram.ai/core");
+var import_utils24 = require("@flowgram.ai/utils");
+var FlowSelectorBoundsLayer = class extends import_core17.Layer {
+  constructor() {
+    super(...arguments);
+    this.node = import_utils24.domUtils.createDivWithClass("gedit-selector-bounds-layer");
+    this.selectBoundsBackground = import_utils24.domUtils.createDivWithClass("gedit-selector-bounds-background");
+  }
+  onReady() {
+    this.node.style.zIndex = "20";
+    const { firstChild } = this.pipelineNode;
+    if (this.options.boundsPadding !== void 0) {
+      this.flowSelectConfigEntity.boundsPadding = this.options.boundsPadding;
+    }
+    if (this.options.backgroundClassName) {
+      this.selectBoundsBackground.classList.add(this.options.backgroundClassName);
+    }
+    const selectorBoundsLayer = import_utils24.domUtils.createDivWithClass("gedit-playground-layer");
+    selectorBoundsLayer.appendChild(this.selectBoundsBackground);
+    this.pipelineNode.insertBefore(selectorBoundsLayer, firstChild);
+  }
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+    this.selectBoundsBackground.parentElement.style.transform = `scale(${scale})`;
+  }
+  onViewportChange() {
+    this.render();
+  }
+  isEnabled() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return currentState === import_core17.EditorState.STATE_SELECT;
+  }
+  // /**
+  //  * 渲染工具栏
+  //  */
+  // renderCommandMenus(): JSX.Element[] {
+  //   return this.commandRegistry.commands
+  //     .filter(cmd => cmd.category === FlowRendererCommandCategory.SELECTOR_BOX)
+  //     .map(cmd => {
+  //       const CommandRenderer = this.rendererRegistry.getRendererComponent(
+  //         (cmd.icon as string) || cmd.id,
+  //       )?.renderer;
+  //
+  //       return (
+  //         // eslint-disable-next-line react/jsx-filename-extension
+  //         <CommandRenderer
+  //           key={cmd.id}
+  //           disabled={!this.commandRegistry.isEnabled(cmd.id)}
+  //           command={cmd}
+  //           onClick={(e: any) => this.commandRegistry.executeCommand(cmd.id, e)}
+  //         />
+  //       );
+  //     })
+  //     .filter(c => c);
+  // }
+  render() {
+    const {
+      ignoreOneSelect,
+      SelectorBoxPopover: SelectorBoxPopoverFromOpts,
+      disableBackground,
+      CustomBoundsRenderer
+    } = this.options;
+    const bounds = this.flowSelectConfigEntity.getSelectedBounds();
+    const selectedNodes = this.flowSelectConfigEntity.selectedNodes;
+    const bg = this.selectBoundsBackground;
+    const isDragging = !this.selectorBoxConfigEntity.isStart;
+    if (bounds.width === 0 || bounds.height === 0 || // 选中单个的时候不显示
+    ignoreOneSelect && selectedNodes.length === 1 && // 选中的节点不包含多个子节点
+    selectedNodes[0].childrenLength <= 1) {
+      import_utils24.domUtils.setStyle(bg, {
+        display: "none"
+      });
+      return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null);
+    }
+    if (CustomBoundsRenderer) {
+      return /* @__PURE__ */ import_react16.default.createElement(
+        CustomBoundsRenderer,
+        {
+          bounds,
+          config: this.config,
+          flowSelectConfig: this.flowSelectConfigEntity,
+          commandRegistry: this.commandRegistry
+        }
+      );
+    }
+    const style = {
+      display: "block",
+      left: bounds.left,
+      top: bounds.top,
+      width: bounds.width,
+      height: bounds.height
+    };
+    if (!disableBackground) {
+      import_utils24.domUtils.setStyle(bg, style);
+    }
+    let foregroundClassName = "gedit-selector-bounds-foreground";
+    if (this.options.foregroundClassName) {
+      foregroundClassName += " " + this.options.foregroundClassName;
+    }
+    const SelectorBoxPopover = SelectorBoxPopoverFromOpts || this.rendererRegistry.tryToGetRendererComponent("selector-box-popover" /* SELECTOR_BOX_POPOVER */)?.renderer;
+    if (!isDragging || !SelectorBoxPopover)
+      return /* @__PURE__ */ import_react16.default.createElement("div", { className: foregroundClassName, style });
+    return /* @__PURE__ */ import_react16.default.createElement(
+      SelectorBoxPopover,
+      {
+        bounds,
+        config: this.config,
+        flowSelectConfig: this.flowSelectConfigEntity,
+        commandRegistry: this.commandRegistry
+      },
+      /* @__PURE__ */ import_react16.default.createElement("div", { className: foregroundClassName, style })
+    );
+  }
+};
+__decorateClass([
+  (0, import_inversify11.inject)(FlowRendererRegistry)
+], FlowSelectorBoundsLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  (0, import_inversify11.inject)(import_core17.CommandRegistry)
+], FlowSelectorBoundsLayer.prototype, "commandRegistry", 2);
+__decorateClass([
+  (0, import_core17.observeEntity)(FlowSelectConfigEntity)
+], FlowSelectorBoundsLayer.prototype, "flowSelectConfigEntity", 2);
+__decorateClass([
+  (0, import_core17.observeEntity)(import_core17.EditorStateConfigEntity)
+], FlowSelectorBoundsLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  (0, import_core17.observeEntity)(SelectorBoxConfigEntity)
+], FlowSelectorBoundsLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  (0, import_core17.observeEntityDatas)(import_document20.FlowNodeEntity, import_document20.FlowNodeRenderData)
+], FlowSelectorBoundsLayer.prototype, "renderStates", 2);
+__decorateClass([
+  (0, import_core17.observeEntityDatas)(import_document20.FlowNodeEntity, import_document20.FlowNodeTransformData)
+], FlowSelectorBoundsLayer.prototype, "_transforms", 2);
+FlowSelectorBoundsLayer = __decorateClass([
+  (0, import_inversify11.injectable)()
+], FlowSelectorBoundsLayer);
+
+// src/layers/flow-context-menu-layer.tsx
+var import_react17 = __toESM(require("react"));
+var import_inversify12 = require("inversify");
+var import_core18 = require("@flowgram.ai/core");
+var import_utils25 = require("@flowgram.ai/utils");
+var FlowContextMenuLayer = class extends import_core18.Layer {
+  constructor() {
+    super(...arguments);
+    this.node = import_utils25.domUtils.createDivWithClass("gedit-context-menu-layer");
+    this.nodeRef = import_react17.default.createRef();
+  }
+  isEnabled() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return !this.config.disabled && !this.config.readonly && currentState === import_core18.EditorState.STATE_SELECT && !this.selectorBoxConfigEntity.disabled;
+  }
+  onReady() {
+    this.node.style.zIndex = "30";
+    this.node.style.display = "block";
+    this.toDispose.pushAll([
+      this.listenPlaygroundEvent(
+        "contextmenu",
+        (e) => {
+          if (!this.isEnabled()) return;
+          this.contextMenuService.rightPanelVisible = true;
+          const bounds = this.flowSelectConfigEntity.getSelectedBounds();
+          if (bounds.width === 0 || bounds.height === 0) {
+            return;
+          }
+          e.stopPropagation();
+          e.preventDefault();
+          this.nodeRef.current?.setVisible(true);
+          const dragBlockX = e.clientX - (this.pipelineNode.offsetLeft || 0) - this.playgroundConfigEntity.config.clientX;
+          const dragBlockY = e.clientY - (this.pipelineNode.offsetTop || 0) - this.playgroundConfigEntity.config.clientY;
+          this.node.style.left = `${dragBlockX}px`;
+          this.node.style.top = `${dragBlockY}px`;
+        },
+        import_core18.PipelineLayerPriority.BASE_LAYER
+      ),
+      this.listenPlaygroundEvent("mousedown", () => {
+        this.nodeRef.current?.setVisible(false);
+        this.contextMenuService.rightPanelVisible = false;
+      })
+    ]);
+  }
+  onScroll() {
+    this.nodeRef.current?.setVisible(false);
+  }
+  onZoom() {
+    this.nodeRef.current?.setVisible(false);
+  }
+  /**
+   * Destroy
+   */
+  dispose() {
+    super.dispose();
+  }
+  /**
+   * 渲染工具栏
+   */
+  renderCommandMenus() {
+    return this.commandRegistry.commands.filter((cmd) => cmd.category === "SELECTOR_BOX" /* SELECTOR_BOX */).map((cmd) => {
+      const CommandRenderer = this.rendererRegistry.getRendererComponent(
+        cmd.icon || cmd.id
+      )?.renderer;
+      return /* @__PURE__ */ import_react17.default.createElement(
+        CommandRenderer,
+        {
+          key: cmd.id,
+          command: cmd,
+          isContextMenu: true,
+          disabled: !this.commandRegistry.isEnabled(cmd.id),
+          onClick: (e) => this.commandRegistry.executeCommand(cmd.id, e)
+        }
+      );
+    }).filter((c) => c);
+  }
+  render() {
+    const SelectorBoxPopover = this.rendererRegistry.getRendererComponent(
+      "context-menu-popover" /* CONTEXT_MENU_POPOVER */
+    ).renderer;
+    return /* @__PURE__ */ import_react17.default.createElement(SelectorBoxPopover, { ref: this.nodeRef, content: this.renderCommandMenus() });
+  }
+};
+__decorateClass([
+  (0, import_inversify12.inject)(import_core18.CommandRegistry)
+], FlowContextMenuLayer.prototype, "commandRegistry", 2);
+__decorateClass([
+  (0, import_inversify12.inject)(FlowRendererRegistry)
+], FlowContextMenuLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  (0, import_inversify12.inject)(import_core18.ContextMenuService)
+], FlowContextMenuLayer.prototype, "contextMenuService", 2);
+__decorateClass([
+  (0, import_core18.observeEntity)(FlowSelectConfigEntity)
+], FlowContextMenuLayer.prototype, "flowSelectConfigEntity", 2);
+__decorateClass([
+  (0, import_inversify12.inject)(import_core18.SelectionService)
+], FlowContextMenuLayer.prototype, "selectionService", 2);
+__decorateClass([
+  (0, import_core18.observeEntity)(import_core18.PlaygroundConfigEntity)
+], FlowContextMenuLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  (0, import_core18.observeEntity)(import_core18.EditorStateConfigEntity)
+], FlowContextMenuLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  (0, import_core18.observeEntity)(SelectorBoxConfigEntity)
+], FlowContextMenuLayer.prototype, "selectorBoxConfigEntity", 2);
+FlowContextMenuLayer = __decorateClass([
+  (0, import_inversify12.injectable)()
+], FlowContextMenuLayer);
+
+// src/layers/flow-scroll-limit-layer.tsx
+var import_inversify13 = require("inversify");
+var import_document21 = require("@flowgram.ai/document");
+var import_core19 = require("@flowgram.ai/core");
+var FlowScrollLimitLayer = class extends import_core19.Layer {
+  getInitScroll() {
+    return this.document.layout.getInitScroll(this.pipelineNode.getBoundingClientRect());
+  }
+  onReady() {
+    const initScroll = () => this.getInitScroll();
+    this.config.updateConfig(initScroll());
+    this.config.addScrollLimit(
+      (scroll) => scrollLimit(
+        scroll,
+        [this.document.root.getData(import_document21.FlowNodeTransformData).bounds],
+        this.config,
+        initScroll
+      )
+    );
+  }
+};
+__decorateClass([
+  (0, import_inversify13.inject)(import_document21.FlowDocument)
+], FlowScrollLimitLayer.prototype, "document", 2);
+FlowScrollLimitLayer = __decorateClass([
+  (0, import_inversify13.injectable)()
+], FlowScrollLimitLayer);
+
+// src/flow-renderer-container-module.ts
+var import_inversify14 = require("inversify");
+var FlowRendererContainerModule = new import_inversify14.ContainerModule((bind) => {
+  bind(FlowRendererRegistry).toSelf().inSingletonScope();
+  bind(FlowRendererResizeObserver).toSelf().inSingletonScope();
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlowContextMenuLayer,
+  FlowDebugLayer,
+  FlowDragEntity,
+  FlowDragLayer,
+  FlowLabelsLayer,
+  FlowLinesLayer,
+  FlowNodesContentLayer,
+  FlowNodesTransformLayer,
+  FlowRendererCommandCategory,
+  FlowRendererComponentType,
+  FlowRendererContainerModule,
+  FlowRendererContribution,
+  FlowRendererKey,
+  FlowRendererRegistry,
+  FlowScrollBarLayer,
+  FlowScrollLimitLayer,
+  FlowSelectConfigEntity,
+  FlowSelectorBoundsLayer,
+  FlowSelectorBoxLayer,
+  FlowTextKey,
+  MARK_ACTIVATED_ARROW_ID,
+  MARK_ARROW_ID,
+  ScrollBarEvents,
+  SelectorBoxConfigEntity,
+  useBaseColor
+});
+//# sourceMappingURL=index.js.map