@flowgram.ai/renderer 0.1.1

package/dist/esm/index.js

@@ -0,0 +1,2995 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/entities/flow-drag-entity.tsx
+import {
+  FlowTransitionLabelEnum,
+  LABEL_SIDE_TYPE
+} from "@flowgram.ai/document";
+import { ConfigEntity, PlaygroundConfigEntity } from "@flowgram.ai/core";
+import { Rectangle } from "@flowgram.ai/utils";
+
+// src/components/utils.tsx
+import {
+  FlowNodeTransformData,
+  FlowTransitionLineEnum,
+  DefaultSpacingKey,
+  DEFAULT_SPACING
+} from "@flowgram.ai/document";
+
+// src/hooks/use-base-color.ts
+import { ConstantKeys, FlowDocumentOptions } from "@flowgram.ai/document";
+import { useService } from "@flowgram.ai/core";
+var BASE_DEFAULT_COLOR = "#BBBFC4";
+var BASE_DEFAULT_ACTIVATED_COLOR = "#82A7FC";
+function useBaseColor() {
+  const options = useService(FlowDocumentOptions);
+  return {
+    baseColor: options.constants?.[ConstantKeys.BASE_COLOR] || BASE_DEFAULT_COLOR,
+    baseActivatedColor: options.constants?.[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 FlowTransitionLineEnum.DIVERGE_LINE:
+    case 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 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 FlowTransitionLineEnum.DIVERGE_LINE:
+    case 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 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(FlowNodeTransformData).size.width : data.entity.next?.getData(FlowNodeTransformData).size.width;
+    const maxWidth = Math.max(
+      data.entity.getData(FlowNodeTransformData)?.size.width ?? DEFAULT_SPACING[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(FlowNodeTransformData).size.height : data.entity.next?.getData(FlowNodeTransformData).size.height;
+  const maxHeight = Math.max(
+    data.entity.getData(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 ConfigEntity {
+  constructor(conf) {
+    super(conf);
+    this.containerX = 0;
+    this.containerY = 0;
+    this.playgroundConfigEntity = this.entityManager.getEntity(
+      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 || ![
+        FlowTransitionLabelEnum.ADDER_LABEL,
+        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 Rectangle(
+        (label.offset.x - hoverWidth / 2) * scale,
+        (label.offset.y - hoverHeight / 2) * scale,
+        hoverWidth * scale,
+        hoverHeight * scale
+      );
+      return Rectangle.intersects(labelRect, rect);
+    });
+    return {
+      hasCollision,
+      // 节点不关心 offsetType
+      labelOffsetType: void 0
+    };
+  }
+  // 检测分支维度碰撞
+  isBranchCollision(transition, rect, scale) {
+    const { labels } = transition;
+    const { isVertical } = transition.entity;
+    let labelOffsetType = LABEL_SIDE_TYPE.NORMAL_BRANCH;
+    const hasCollision = labels.some((label) => {
+      if (!label || label.type !== 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 Rectangle(
+        (label.offset.x - hoverWidth / 2) * scale,
+        (label.offset.y - hoverHeight / 2) * scale,
+        hoverWidth * scale,
+        hoverHeight * scale
+      );
+      const collision = 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
+import {
+  FlowNodeRenderData,
+  FlowNodeTransformData as FlowNodeTransformData2
+} from "@flowgram.ai/document";
+import { ConfigEntity as ConfigEntity2 } from "@flowgram.ai/core";
+import { Compare, Rectangle as Rectangle2 } from "@flowgram.ai/utils";
+
+// src/utils/find-selected-nodes.ts
+import { uniq } from "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 = uniq(nodePathList.map((p) => p[index]));
+    if (selectedItems.length > 1) {
+      break;
+    }
+    index += 1;
+  }
+  return uniq(selectedItems.map((item) => findRealEntity(item)));
+}
+
+// src/entities/flow-select-config-entity.tsx
+var BOUNDS_PADDING_DEFAULT = 10;
+var FlowSelectConfigEntity = class extends ConfigEntity2 {
+  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(FlowNodeRenderData).activated = false;
+        }
+      });
+      nodes.forEach((node) => {
+        node.getData(FlowNodeRenderData).activated = true;
+      });
+      if (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(FlowNodeRenderData).activated = false;
+    });
+    this.updateConfig({
+      selectedNodes: []
+    });
+  }
+  /**
+   * 通过选择框选中节点
+   * @param rect
+   * @param transforms
+   */
+  selectFromBounds(rect, transforms) {
+    const selectedNodes = [];
+    transforms.forEach((transform) => {
+      if (Rectangle2.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 Rectangle2.EMPTY;
+    }
+    return Rectangle2.enlarge(nodes.map((n) => n.getData(FlowNodeTransformData2).bounds)).pad(
+      this.boundsPadding
+    );
+  }
+};
+FlowSelectConfigEntity.type = "FlowSelectConfigEntity";
+
+// src/entities/selector-box-config-entity.ts
+import {
+  ConfigEntity as ConfigEntity3
+} from "@flowgram.ai/core";
+import { Rectangle as Rectangle3 } from "@flowgram.ai/utils";
+var SelectorBoxConfigEntity = class extends ConfigEntity3 {
+  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 Rectangle3(
+      position.x / scale,
+      position.y / scale,
+      size.width / scale,
+      size.height / scale
+    );
+  }
+};
+SelectorBoxConfigEntity.type = "SelectorBoxConfigEntity";
+
+// src/layers/flow-nodes-transform-layer.tsx
+import { inject, injectable as injectable2 } from "inversify";
+import { Cache, domUtils } from "@flowgram.ai/utils";
+import {
+  FlowDocument,
+  FlowDocumentTransformerEntity,
+  FlowNodeEntity,
+  FlowNodeTransformData as FlowNodeTransformData3
+} from "@flowgram.ai/document";
+import { Layer, observeEntity, observeEntityDatas } from "@flowgram.ai/core";
+
+// src/flow-renderer-resize-observer.ts
+import { injectable } from "inversify";
+import { Disposable } from "@flowgram.ai/utils";
+
+// src/utils/element.ts
+import { isNil } from "lodash";
+var isHidden = (dom) => {
+  const style = window.getComputedStyle(dom);
+  return 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 Disposable.create(() => {
+      observer.unobserve(el);
+    });
+  }
+};
+FlowRendererResizeObserver = __decorateClass([
+  injectable()
+], FlowRendererResizeObserver);
+
+// src/layers/flow-nodes-transform-layer.tsx
+var FlowNodesTransformLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils.createDivWithClass("gedit-flow-nodes-layer");
+    // onViewportChange() {
+    //   this.throttleUpdate()
+    // }
+    // throttleUpdate = throttle(() => {
+    //   this.renderCache.getFromCache().forEach((cache) => cache.updateBounds())
+    // }, 100)
+    this.renderCache = 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(FlowNodeTransformData3, 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([
+  inject(FlowDocument)
+], FlowNodesTransformLayer.prototype, "document", 2);
+__decorateClass([
+  inject(FlowRendererResizeObserver)
+], FlowNodesTransformLayer.prototype, "resizeObserver", 2);
+__decorateClass([
+  observeEntity(FlowDocumentTransformerEntity)
+], FlowNodesTransformLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeTransformData3)
+], FlowNodesTransformLayer.prototype, "_transforms", 2);
+FlowNodesTransformLayer = __decorateClass([
+  injectable2()
+], FlowNodesTransformLayer);
+
+// src/layers/flow-nodes-content-layer.tsx
+import ReactDOM from "react-dom";
+import React from "react";
+import { inject as inject3, injectable as injectable4 } from "inversify";
+import { Cache as Cache2, domUtils as domUtils2 } from "@flowgram.ai/utils";
+import {
+  FlowDocument as FlowDocument2,
+  FlowDocumentTransformerEntity as FlowDocumentTransformerEntity2,
+  FlowNodeEntity as FlowNodeEntity2,
+  FlowNodeRenderData as FlowNodeRenderData2,
+  FlowNodeTransformData as FlowNodeTransformData4
+} from "@flowgram.ai/document";
+import {
+  Layer as Layer2,
+  observeEntity as observeEntity2,
+  observeEntityDatas as observeEntityDatas2,
+  PlaygroundEntityContext
+} from "@flowgram.ai/core";
+
+// src/flow-renderer-registry.ts
+import { inject as inject2, injectable as injectable3, multiInject, optional } from "inversify";
+import { I18n } from "@flowgram.ai/i18n";
+import { PipelineRegistry } from "@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 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([
+  multiInject(FlowRendererContribution),
+  optional()
+], FlowRendererRegistry.prototype, "contribs", 2);
+__decorateClass([
+  inject2(PipelineRegistry)
+], FlowRendererRegistry.prototype, "pipeline", 2);
+FlowRendererRegistry = __decorateClass([
+  injectable3()
+], FlowRendererRegistry);
+
+// src/layers/flow-nodes-content-layer.tsx
+var FlowNodesContentLayer = class extends Layer2 {
+  constructor() {
+    super(...arguments);
+    this.renderMemoCache = /* @__PURE__ */ new WeakMap();
+    this.node = domUtils2.createDivWithClass("gedit-flow-nodes-layer");
+    this.reactPortals = Cache2.create(
+      (data) => {
+        const { node, entity } = data;
+        const { config } = this;
+        const PortalRenderer = this.getPortalRenderer(data);
+        function Portal() {
+          React.useEffect(() => {
+            if (node.clientWidth && node.clientHeight) {
+              const transform = entity.getData(FlowNodeTransformData4);
+              if (transform)
+                transform.size = {
+                  width: node.clientWidth,
+                  height: node.clientHeight
+                };
+            }
+          }, []);
+          return ReactDOM.createPortal(
+            /* @__PURE__ */ React.createElement(PlaygroundEntityContext.Provider, { value: entity }, /* @__PURE__ */ React.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(FlowNodeRenderData2, 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 = React.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__ */ React.createElement(React.Fragment, null);
+    this.documentTransformer.refresh();
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, this.getPortals().map((portal) => /* @__PURE__ */ React.createElement(portal.Portal, { key: portal.id })));
+  }
+};
+__decorateClass([
+  inject3(FlowDocument2)
+], FlowNodesContentLayer.prototype, "document", 2);
+__decorateClass([
+  inject3(FlowRendererRegistry)
+], FlowNodesContentLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  observeEntity2(FlowDocumentTransformerEntity2)
+], FlowNodesContentLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntityDatas2(FlowNodeEntity2, FlowNodeRenderData2)
+], FlowNodesContentLayer.prototype, "_renderStates", 2);
+FlowNodesContentLayer = __decorateClass([
+  injectable4()
+], FlowNodesContentLayer);
+
+// src/layers/flow-lines-layer.tsx
+import React8 from "react";
+import { groupBy, throttle } from "lodash";
+import { inject as inject4, injectable as injectable5 } from "inversify";
+import { domUtils as domUtils3 } from "@flowgram.ai/utils";
+import {
+  FlowDocument as FlowDocument3,
+  FlowDocumentTransformerEntity as FlowDocumentTransformerEntity3,
+  FlowNodeEntity as FlowNodeEntity3,
+  FlowNodeTransitionData,
+  FlowRendererStateEntity,
+  FlowDragService as FlowDragService2
+} from "@flowgram.ai/document";
+import { Layer as Layer3, observeEntity as observeEntity3, observeEntityDatas as observeEntityDatas3 } from "@flowgram.ai/core";
+
+// src/components/MarkerArrow.tsx
+import React2 from "react";
+var MARK_ARROW_ID = "line-marker-arrow";
+var MARK_ARROW_URL = `url(#${MARK_ARROW_ID})`;
+function MarkerArrow() {
+  const { baseColor } = useBaseColor();
+  return /* @__PURE__ */ React2.createElement("marker", { id: MARK_ARROW_ID, markerWidth: "11", markerHeight: "14", refX: "10", refY: "7", orient: "auto" }, /* @__PURE__ */ React2.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
+import React3 from "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__ */ React3.createElement(
+    "marker",
+    {
+      id: MARK_ACTIVATED_ARROW_ID,
+      markerWidth: "11",
+      markerHeight: "14",
+      refX: "10",
+      refY: "7",
+      orient: "auto"
+    },
+    /* @__PURE__ */ React3.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
+import React7 from "react";
+import { Rectangle as Rectangle4 } from "@flowgram.ai/utils";
+import {
+  FlowTransitionLineEnum as FlowTransitionLineEnum2,
+  DefaultSpacingKey as DefaultSpacingKey2
+} from "@flowgram.ai/document";
+import { getDefaultSpacing } from "@flowgram.ai/document";
+
+// src/components/StraightLine.tsx
+import React4 from "react";
+function StraightLine(props) {
+  const { from, to, activated, style } = props;
+  const { baseColor, baseActivatedColor } = useBaseColor();
+  return /* @__PURE__ */ React4.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
+import React5, { useMemo } from "react";
+import { isNil as isNil2 } from "lodash";
+import { Point } from "@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 = 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 Point().copyFrom(point);
+      const outPoint = new Point().copyFrom(point);
+      const radiusX = isNil2(point.radiusX) ? radius : point.radiusX;
+      const radiusY = isNil2(point.radiusY) ? radius : point.radiusY;
+      let rx = radiusX;
+      let ry = radiusY;
+      if (isRightAngleX) {
+        ry = Math.min(prevDelta.y, radiusY);
+        const moveY = isNil2(point.moveY) ? ry : point.moveY;
+        inPoint.y += from.y < point.y ? -moveY : +moveY;
+        rx = Math.min(nextDelta.x, radiusX);
+        const moveX = isNil2(point.moveX) ? rx : point.moveX;
+        outPoint.x += to.x < point.x ? -moveX : +moveX;
+      }
+      if (isRightAngleY) {
+        rx = Math.min(prevDelta.x, radiusX);
+        const moveX = isNil2(point.moveX) ? rx : point.moveX;
+        inPoint.x += from.x < point.x ? -moveX : +moveX;
+        ry = Math.min(nextDelta.y, radiusY);
+        const moveY = isNil2(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__ */ React5.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
+import React6 from "react";
+function CustomLine(props) {
+  const { renderKey, rendererRegistry, ...line } = props;
+  if (!renderKey) {
+    return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
+  }
+  const renderer = rendererRegistry.getRendererComponent(renderKey);
+  if (!renderer) {
+    return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
+  }
+  const Component = renderer.renderer;
+  return /* @__PURE__ */ React6.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 = getDefaultSpacing(entity, DefaultSpacingKey2.ROUNDED_LINE_X_RADIUS);
+  const yRadius = getDefaultSpacing(entity, DefaultSpacingKey2.ROUNDED_LINE_Y_RADIUS);
+  const renderLine = (line, index) => {
+    const { renderData } = data;
+    const { isVertical } = data.entity;
+    const { lineActivated } = renderData || {};
+    const draggingLineHide = line.type === FlowTransitionLineEnum2.DRAGGING_LINE && !dragService.isDroppableBranch(data.entity, line.side);
+    const draggingLineActivated = line.type === FlowTransitionLineEnum2.DRAGGING_LINE && data.entity?.id === dragService.dropNodeId && line.side === dragService.labelSide;
+    switch (line.type) {
+      case FlowTransitionLineEnum2.STRAIGHT_LINE:
+        return /* @__PURE__ */ React7.createElement(StraightLine_default, { key: `${data.entity.id}${index}`, activated: lineActivated, ...line });
+      case FlowTransitionLineEnum2.DIVERGE_LINE:
+      case FlowTransitionLineEnum2.DRAGGING_LINE:
+      case FlowTransitionLineEnum2.MERGE_LINE:
+      case FlowTransitionLineEnum2.ROUNDED_LINE:
+        return /* @__PURE__ */ React7.createElement(
+          RoundedTurningLine_default,
+          {
+            key: `${data.entity.id}${index}`,
+            isHorizontal: !isVertical,
+            activated: lineActivated || draggingLineActivated,
+            ...line,
+            xRadius,
+            yRadius,
+            hide: draggingLineHide
+          }
+        );
+      case FlowTransitionLineEnum2.CUSTOM_LINE:
+        return /* @__PURE__ */ React7.createElement(
+          CustomLine_default,
+          {
+            key: `${data.entity.id}${index}`,
+            ...line,
+            rendererRegistry
+          }
+        );
+      default:
+        break;
+    }
+    return void 0;
+  };
+  lines.forEach((line, index) => {
+    const bounds = Rectangle4.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 Layer3 {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils3.createDivWithClass("gedit-flow-lines-layer");
+    /**
+     * 可视区域变化
+     */
+    this.onViewportChange = throttle(() => {
+      this.render();
+    }, 100);
+  }
+  get transitions() {
+    return this.document.getRenderDatas(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__ */ React8.createElement(React8.Fragment, null);
+    this.documentTransformer.refresh();
+    this.transitions.forEach((transition) => {
+      createLines({
+        data: transition,
+        rendererRegistry: this.rendererRegistry,
+        isViewportVisible,
+        linesSave: allLines,
+        dragService: this.dragService
+      });
+    });
+    const { activateLines = [], normalLines = [] } = 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 ? React8.createElement(arrowRenderer.renderer) : null;
+    const activateArrow = activateArrowRenderer ? React8.createElement(activateArrowRenderer.renderer) : null;
+    return /* @__PURE__ */ React8.createElement(
+      "svg",
+      {
+        className: "flow-lines-container",
+        width: "1000",
+        height: "1000",
+        overflow: "visible",
+        viewBox: this.viewBox,
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      /* @__PURE__ */ React8.createElement("defs", null, arrowRenderer ? arrow : /* @__PURE__ */ React8.createElement(MarkerArrow_default, null), activateArrow ? activateArrow : /* @__PURE__ */ React8.createElement(MarkerActivatedArrow_default, null)),
+      resultLines
+    );
+  }
+};
+__decorateClass([
+  inject4(FlowDocument3)
+], FlowLinesLayer.prototype, "document", 2);
+__decorateClass([
+  inject4(FlowDragService2)
+], FlowLinesLayer.prototype, "dragService", 2);
+__decorateClass([
+  inject4(FlowRendererRegistry)
+], FlowLinesLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  observeEntity3(FlowDocumentTransformerEntity3)
+], FlowLinesLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntity3(FlowRendererStateEntity)
+], FlowLinesLayer.prototype, "flowRenderState", 2);
+__decorateClass([
+  observeEntityDatas3(FlowNodeEntity3, FlowNodeTransitionData)
+], FlowLinesLayer.prototype, "_transitions", 2);
+FlowLinesLayer = __decorateClass([
+  injectable5()
+], FlowLinesLayer);
+
+// src/layers/flow-labels-layer.tsx
+import React14 from "react";
+import { throttle as throttle2 } from "lodash";
+import { inject as inject5, injectable as injectable6 } from "inversify";
+import { domUtils as domUtils4 } from "@flowgram.ai/utils";
+import {
+  FlowDocument as FlowDocument4,
+  FlowDocumentTransformerEntity as FlowDocumentTransformerEntity4,
+  FlowNodeEntity as FlowNodeEntity4,
+  FlowNodeTransitionData as FlowNodeTransitionData2,
+  FlowRendererStateEntity as FlowRendererStateEntity2
+} from "@flowgram.ai/document";
+import { Layer as Layer4, observeEntity as observeEntity4, observeEntityDatas as observeEntityDatas4 } from "@flowgram.ai/core";
+
+// src/components/LabelsRenderer.tsx
+import React13 from "react";
+import { Rectangle as Rectangle5 } from "@flowgram.ai/utils";
+import {
+  FlowTransitionLabelEnum as FlowTransitionLabelEnum2
+} from "@flowgram.ai/document";
+
+// src/components/CollapseAdder.tsx
+import React11, { useState as useState3, useCallback as useCallback3 } from "react";
+import {
+  FlowNodeRenderData as FlowNodeRenderData4
+} from "@flowgram.ai/document";
+
+// src/components/Collapse.tsx
+import React9, { useState, useCallback } from "react";
+import {
+  FlowNodeRenderData as FlowNodeRenderData3
+} from "@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] = useState(false);
+  const activateData = activateNode?.getData(FlowNodeRenderData3);
+  const handleMouseEnter = useCallback(() => {
+    setHoverActivated(true);
+    activateData?.toggleMouseEnter();
+  }, []);
+  const handleMouseLeave = useCallback(() => {
+    setHoverActivated(false);
+    activateData?.toggleMouseLeave();
+  }, []);
+  const collapseOpener = rendererRegistry.getRendererComponent("collapse" /* COLLAPSE */);
+  const node = data.entity;
+  const child = React9.createElement(
+    collapseOpener.renderer,
+    {
+      node,
+      collapseNode: node,
+      ...restProps,
+      hoverActivated
+    }
+  );
+  const isChildVisible = data.collapsed || activateData?.hovered || hoverActivated || forceVisible;
+  return /* @__PURE__ */ React9.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
+import React10, { useCallback as useCallback2, useState as useState2 } from "react";
+import {
+  FlowDragService as FlowDragService3
+} from "@flowgram.ai/document";
+import { useService as useService2 } from "@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] = useState2(false);
+  const handleMouseEnter = useCallback2(() => setHoverActivated(true), []);
+  const handleMouseLeave = useCallback2(() => setHoverActivated(false), []);
+  const node = data.entity;
+  const dragService = useService2(FlowDragService3);
+  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 = React10.createElement(
+    adder.renderer,
+    {
+      node,
+      from,
+      to,
+      renderTo,
+      hoverActivated,
+      setHoverActivated,
+      hoverWidth,
+      hoverHeight,
+      ...restProps
+    }
+  );
+  return (
+    // eslint-disable-next-line react/jsx-filename-extension
+    /* @__PURE__ */ React10.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] = useState3(false);
+  const activateData = activateNode?.getData(FlowNodeRenderData4);
+  const handleMouseEnter = useCallback3(() => {
+    setHoverActivated(true);
+  }, []);
+  const handleMouseLeave = useCallback3(() => {
+    setHoverActivated(false);
+  }, []);
+  const isVertical = activateNode?.isVertical;
+  const activated = activateData?.hovered || hoverActivated;
+  if (isVertical) {
+    return /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        className: "flow-canvas-collapse-adder",
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      },
+      (activated || data.collapsed) && /* @__PURE__ */ React11.createElement(
+        Collapse,
+        {
+          forceVisible: true,
+          ...props,
+          wrapperStyle: {
+            alignItems: "flex-end"
+          },
+          hoverHeight: 20
+        }
+      ),
+      !data.collapsed && /* @__PURE__ */ React11.createElement(Adder, { ...props, hoverHeight: activated ? 20 : 40, hoverActivated: activated })
+    );
+  }
+  return /* @__PURE__ */ React11.createElement(
+    "div",
+    {
+      className: "flow-canvas-collapse-adder",
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      style: {
+        display: data.collapsed ? "block" : "flex"
+      }
+    },
+    (activated || data.collapsed) && /* @__PURE__ */ React11.createElement(
+      Collapse,
+      {
+        forceVisible: true,
+        ...props,
+        wrapperStyle: {
+          justifyContent: "flex-end"
+        },
+        hoverWidth: 20
+      }
+    ),
+    !data.collapsed && /* @__PURE__ */ React11.createElement(Adder, { ...props, hoverWidth: activated ? 20 : 40, hoverActivated: activated })
+  );
+}
+
+// src/components/BranchDraggableRenderer.tsx
+import React12 from "react";
+import {
+  FlowDragService as FlowDragService4
+} from "@flowgram.ai/document";
+import { useService as useService3 } from "@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 = useService3(FlowDragService4);
+  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 = React12.createElement(
+    adder.renderer,
+    {
+      node,
+      from,
+      to,
+      renderTo,
+      ...restProps
+    }
+  );
+  return /* @__PURE__ */ React12.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 Rectangle5(
+    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 FlowTransitionLabelEnum2.BRANCH_DRAGGING_LABEL:
+        child = /* @__PURE__ */ React13.createElement(BranchDraggableRenderer, { rendererRegistry, data, ...props });
+        break;
+      case FlowTransitionLabelEnum2.ADDER_LABEL:
+        child = /* @__PURE__ */ React13.createElement(Adder, { rendererRegistry, data, ...props });
+        break;
+      case FlowTransitionLabelEnum2.COLLAPSE_LABEL:
+        child = /* @__PURE__ */ React13.createElement(Collapse, { rendererRegistry, data, ...props });
+        break;
+      case FlowTransitionLabelEnum2.COLLAPSE_ADDER_LABEL:
+        child = /* @__PURE__ */ React13.createElement(CollapseAdder, { rendererRegistry, data, ...props });
+        break;
+      case FlowTransitionLabelEnum2.TEXT_LABEL:
+        if (!renderKey) {
+          return null;
+        }
+        const text = rendererRegistry.getText(renderKey) || renderKey;
+        child = /* @__PURE__ */ React13.createElement(
+          "div",
+          {
+            style: {
+              ...TEXT_LABEL_STYLE,
+              ...props?.style,
+              color: getLabelColor(activated),
+              transform: rotate ? `rotate(${rotate})` : void 0
+            }
+          },
+          text
+        );
+        break;
+      case FlowTransitionLabelEnum2.CUSTOM_LABEL:
+        if (!renderKey) {
+          return null;
+        }
+        try {
+          const renderer = rendererRegistry.getRendererComponent(renderKey);
+          child = React13.createElement(
+            renderer.renderer,
+            {
+              node: data.entity,
+              ...props
+            }
+          );
+        } catch (err) {
+          console.error(err);
+          child = renderKey;
+        }
+        break;
+      default:
+        break;
+    }
+    return /* @__PURE__ */ React13.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 Layer4 {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils4.createDivWithClass("gedit-flow-labels-layer");
+    /**
+     * 可视区域变化
+     */
+    this.onViewportChange = throttle2(() => {
+      this.render();
+    }, 100);
+  }
+  get transitions() {
+    return this.document.getRenderDatas(FlowNodeTransitionData2);
+  }
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @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__ */ React14.createElement(React14.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__ */ React14.createElement(React14.Fragment, null, labels);
+  }
+};
+__decorateClass([
+  inject5(FlowDocument4)
+], FlowLabelsLayer.prototype, "document", 2);
+__decorateClass([
+  inject5(FlowRendererRegistry)
+], FlowLabelsLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  observeEntity4(FlowDocumentTransformerEntity4)
+], FlowLabelsLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntity4(FlowRendererStateEntity2)
+], FlowLabelsLayer.prototype, "flowRenderState", 2);
+__decorateClass([
+  observeEntityDatas4(FlowNodeEntity4, FlowNodeTransitionData2)
+], FlowLabelsLayer.prototype, "_transitions", 2);
+FlowLabelsLayer = __decorateClass([
+  injectable6()
+], FlowLabelsLayer);
+
+// src/layers/flow-debug-layer.tsx
+import { inject as inject6, injectable as injectable7 } from "inversify";
+import { domUtils as domUtils5 } from "@flowgram.ai/utils";
+import {
+  FlowDocument as FlowDocument5,
+  FlowDocumentTransformerEntity as FlowDocumentTransformerEntity5,
+  FlowNodeEntity as FlowNodeEntity5,
+  FlowNodeTransformData as FlowNodeTransformData5
+} from "@flowgram.ai/document";
+import { Layer as Layer5, observeEntity as observeEntity5, observeEntityDatas as observeEntityDatas5 } from "@flowgram.ai/core";
+
+// src/utils/scroll-limit.ts
+import { Rectangle as Rectangle6 } from "@flowgram.ai/utils";
+var SCROLL_LIMIT_PADDING = -120;
+function getScrollViewport(scrollData, config) {
+  const scale = config.finalScale;
+  return new Rectangle6(
+    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) => Rectangle6.isViewportVisible(bounds, viewport));
+  if (!isVisible) {
+    const oldViewport = getScrollViewport(oldScroll, config);
+    const isOldVisible = boundsList.find(
+      (bounds) => Rectangle6.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 Layer5 {
+  constructor() {
+    super(...arguments);
+    this.node = document.createElement("div");
+    this.viewport = domUtils5.createDivWithClass("gedit-flow-debug-bounds");
+    this.boundsNodes = domUtils5.createDivWithClass("gedit-flow-debug-bounds");
+    this.pointsNodes = domUtils5.createDivWithClass("gedit-flow-debug-points");
+    this.versionNodes = domUtils5.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(FlowNodeTransformData5);
+  }
+  onReady() {
+    this.node.style.zIndex = "20";
+    domUtils5.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 = domUtils5.createDivWithClass("");
+      const input = domUtils5.createDivWithClass("");
+      const output = domUtils5.createDivWithClass("");
+      const version = domUtils5.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);
+    }
+    domUtils5.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();
+    domUtils5.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}`;
+    domUtils5.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}`;
+    domUtils5.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
+    );
+    domUtils5.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(FlowNodeTransformData5);
+      color = randomColor(depth);
+      this.createBounds(transform, color, depth);
+    });
+    this.renderScrollViewportBounds();
+  }
+};
+__decorateClass([
+  inject6(FlowDocument5)
+], FlowDebugLayer.prototype, "document", 2);
+__decorateClass([
+  observeEntity5(FlowDocumentTransformerEntity5)
+], FlowDebugLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntityDatas5(FlowNodeEntity5, FlowNodeTransformData5)
+], FlowDebugLayer.prototype, "_transforms", 2);
+FlowDebugLayer = __decorateClass([
+  injectable7()
+], FlowDebugLayer);
+
+// src/layers/flow-scroll-bar-layer.tsx
+import { inject as inject7, injectable as injectable8, optional as optional2 } from "inversify";
+import { FlowDocument as FlowDocument6, FlowNodeTransformData as FlowNodeTransformData6 } from "@flowgram.ai/document";
+import {
+  Layer as Layer6,
+  observeEntity as observeEntity6,
+  PlaygroundConfigEntity as PlaygroundConfigEntity2,
+  PlaygroundDrag
+} from "@flowgram.ai/core";
+import { domUtils as domUtils6, Rectangle as Rectangle7 } from "@flowgram.ai/utils";
+var BORDER_WIDTH = 2;
+var BLOCK_OFFSET = 11;
+var SCROLL_BAR_WIDTH = "7px";
+var FlowScrollBarLayer = class extends Layer6 {
+  constructor() {
+    super(...arguments);
+    // @observeEntity(FlowDocumentTransformerEntity) readonly documentTransformer: FlowDocumentTransformerEntity
+    // 右滚动区域
+    this.rightScrollBar = domUtils6.createDivWithClass("gedit-playground-scroll-right");
+    // 右滚动条
+    this.rightScrollBarBlock = domUtils6.createDivWithClass("gedit-playground-scroll-right-block");
+    // 底滚动区域
+    this.bottomScrollBar = domUtils6.createDivWithClass("gedit-playground-scroll-bottom");
+    // 底滚动条
+    this.bottomScrollBarBlock = domUtils6.createDivWithClass(
+      "gedit-playground-scroll-bottom-block"
+    );
+    // 总滚动距离
+    this.sum = 0;
+    // 初始 x 轴滚动距离
+    this.initialScrollX = 0;
+    // 初始 y 轴滚动距离
+    this.initialScrollY = 0;
+    this.bottomGrabDragger = new 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 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";
+    domUtils6.addClass(scrollBar, addClassName);
+    domUtils6.delClass(scrollBar, delClassName);
+  }
+  onReady() {
+    if (!this.options.getBounds) {
+      this.options = {
+        getBounds: () => {
+          const document2 = this.flowDocument;
+          if (!document2) return Rectangle7.EMPTY;
+          document2.transformer.refresh();
+          return document2.root.getData(FlowNodeTransformData6).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);
+    domUtils6.setStyle(this.rightScrollBarBlock, {
+      right: 2,
+      top: rightBarToTop,
+      background: "#1F2329",
+      zIndex: 10,
+      height: this.scrollRightHeight,
+      width: SCROLL_BAR_WIDTH
+    });
+    domUtils6.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([
+  optional2(),
+  inject7(ScrollBarEvents)
+], FlowScrollBarLayer.prototype, "events", 2);
+__decorateClass([
+  inject7(FlowDocument6),
+  optional2()
+], FlowScrollBarLayer.prototype, "flowDocument", 2);
+__decorateClass([
+  observeEntity6(PlaygroundConfigEntity2)
+], FlowScrollBarLayer.prototype, "playgroundConfigEntity", 2);
+FlowScrollBarLayer = __decorateClass([
+  injectable8()
+], FlowScrollBarLayer);
+
+// src/layers/flow-drag-layer.tsx
+import React15 from "react";
+import { inject as inject8, injectable as injectable9 } from "inversify";
+import { Rectangle as Rectangle8 } from "@flowgram.ai/utils";
+import {
+  FlowDocument as FlowDocument7,
+  FlowNodeBaseType,
+  FlowNodeEntity as FlowNodeEntity6,
+  FlowNodeRenderData as FlowNodeRenderData5,
+  FlowNodeTransformData as FlowNodeTransformData7,
+  FlowNodeTransitionData as FlowNodeTransitionData3,
+  FlowRendererStateEntity as FlowRendererStateEntity3,
+  FlowDragService as FlowDragService5
+} from "@flowgram.ai/document";
+import {
+  EditorState,
+  EditorStateConfigEntity,
+  Layer as Layer7,
+  observeEntity as observeEntity7,
+  observeEntityDatas as observeEntityDatas6,
+  PlaygroundConfigEntity as PlaygroundConfigEntity3
+} from "@flowgram.ai/core";
+import { PlaygroundDrag as PlaygroundDrag2 } from "@flowgram.ai/core";
+var DRAG_OFFSET = 10;
+var DEFAULT_DRAG_OFFSET_X = 8;
+var DEFAULT_DRAG_OFFSET_Y = 8;
+var FlowDragLayer = class extends Layer7 {
+  constructor() {
+    super(...arguments);
+    this.dragOffset = {
+      x: DEFAULT_DRAG_OFFSET_X,
+      y: DEFAULT_DRAG_OFFSET_Y
+    };
+    this.containerRef = React15.createRef();
+    this.draggingNodeMask = document.createElement("div");
+    this._dragger = new PlaygroundDrag2({
+      onDrag: (e) => {
+        this.handleMouseMove(e);
+      },
+      onDragEnd: () => {
+        this.handleMouseUp();
+      },
+      stopGlobalEventNames: ["contextmenu"]
+    });
+  }
+  get transitions() {
+    const result = [];
+    this.document.traverse((entity) => {
+      result.push(entity.getData(FlowNodeTransitionData3));
+    });
+    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 === 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(FlowNodeRenderData5);
+        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 Rectangle8(
+          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 === FlowNodeBaseType.BLOCK_ICON;
+    const isOrderIcon = startEntityFromProps.flowNodeType === FlowNodeBaseType.BLOCK_ORDER_ICON;
+    const dragStartEntity = isIcon || isOrderIcon ? startEntityFromProps.parent : startEntityFromProps;
+    if (!dragStartEntity.getData(FlowNodeRenderData5).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__ */ React15.createElement(
+      "div",
+      {
+        ref: this.containerRef,
+        style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
+        onMouseEnter: (e) => e.stopPropagation()
+      },
+      /* @__PURE__ */ React15.createElement(DragComp, { dragStart: this.dragStartEntity, dragNodes: this.dragEntities })
+    );
+  }
+};
+__decorateClass([
+  inject8(FlowDocument7)
+], FlowDragLayer.prototype, "document", 2);
+__decorateClass([
+  inject8(FlowDragService5)
+], FlowDragLayer.prototype, "service", 2);
+__decorateClass([
+  observeEntityDatas6(FlowNodeEntity6, FlowNodeTransformData7)
+], FlowDragLayer.prototype, "transforms", 2);
+__decorateClass([
+  observeEntity7(EditorStateConfigEntity)
+], FlowDragLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  observeEntity7(PlaygroundConfigEntity3)
+], FlowDragLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  observeEntity7(FlowDragEntity)
+], FlowDragLayer.prototype, "flowDragConfigEntity", 2);
+__decorateClass([
+  observeEntity7(FlowRendererStateEntity3)
+], FlowDragLayer.prototype, "flowRenderStateEntity", 2);
+__decorateClass([
+  observeEntity7(FlowSelectConfigEntity)
+], FlowDragLayer.prototype, "selectConfigEntity", 2);
+__decorateClass([
+  inject8(FlowRendererRegistry)
+], FlowDragLayer.prototype, "rendererRegistry", 2);
+FlowDragLayer = __decorateClass([
+  injectable9()
+], FlowDragLayer);
+
+// src/layers/flow-selector-box-layer.tsx
+import { inject as inject9, injectable as injectable10 } from "inversify";
+import { domUtils as domUtils7 } from "@flowgram.ai/utils";
+import { FlowDocument as FlowDocument8, FlowNodeEntity as FlowNodeEntity7, FlowNodeTransformData as FlowNodeTransformData8 } from "@flowgram.ai/document";
+import {
+  ContextMenuService,
+  EditorState as EditorState2,
+  EditorStateConfigEntity as EditorStateConfigEntity2,
+  Layer as Layer8,
+  observeEntity as observeEntity8,
+  PipelineLayerPriority,
+  PlaygroundConfigEntity as PlaygroundConfigEntity4,
+  PlaygroundDrag as PlaygroundDrag3,
+  SelectionService
+} from "@flowgram.ai/core";
+var FlowSelectorBoxLayer = class extends Layer8 {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils7.createDivWithClass("gedit-selector-box-layer");
+    /**
+     * 选择框
+     */
+    this.selectorBox = this.createDOMCache("gedit-selector-box");
+    /**
+     * 用于遮挡鼠标，避免触发 hover
+     */
+    this.selectorBoxBlock = this.createDOMCache("gedit-selector-box-block");
+    /**
+     * 拖动选择框
+     */
+    this.selectboxDragger = new PlaygroundDrag3({
+      onDragStart: (e) => {
+        this.selectConfigEntity.clearSelectedNodes();
+        const mousePos = this.playgroundConfigEntity.getPosFromMouseEvent(e);
+        this.transformVisibles = this.flowDocument.getRenderDatas(FlowNodeTransformData8, 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 FlowNodeEntity7
+        );
+        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 === EditorState2.STATE_MOUSE_FRIENDLY_SELECT) {
+          this.selectConfigEntity.clearSelectedNodes();
+        }
+        this.selectboxDragger.start(e.clientX, e.clientY, this.config);
+        return true;
+      },
+      PipelineLayerPriority.BASE_LAYER
+    );
+  }
+  isEnabled() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    const isMouseFriendly = currentState === EditorState2.STATE_MOUSE_FRIENDLY_SELECT;
+    return !this.config.disabled && !this.config.readonly && // 鼠标友好模式下，需要按下 shift 启动框选
+    (isMouseFriendly && this.editorStateConfig.isPressingShift || currentState === EditorState2.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([
+  inject9(FlowDocument8)
+], FlowSelectorBoxLayer.prototype, "flowDocument", 2);
+__decorateClass([
+  inject9(ContextMenuService)
+], FlowSelectorBoxLayer.prototype, "contextMenuService", 2);
+__decorateClass([
+  observeEntity8(PlaygroundConfigEntity4)
+], FlowSelectorBoxLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  inject9(SelectionService)
+], FlowSelectorBoxLayer.prototype, "selectionService", 2);
+__decorateClass([
+  observeEntity8(SelectorBoxConfigEntity)
+], FlowSelectorBoxLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  observeEntity8(FlowSelectConfigEntity)
+], FlowSelectorBoxLayer.prototype, "selectConfigEntity", 2);
+__decorateClass([
+  observeEntity8(EditorStateConfigEntity2)
+], FlowSelectorBoxLayer.prototype, "editorStateConfig", 2);
+FlowSelectorBoxLayer = __decorateClass([
+  injectable10()
+], FlowSelectorBoxLayer);
+
+// src/layers/flow-selector-bounds-layer.tsx
+import React16 from "react";
+import { inject as inject10, injectable as injectable11 } from "inversify";
+import {
+  FlowNodeEntity as FlowNodeEntity8,
+  FlowNodeRenderData as FlowNodeRenderData6,
+  FlowNodeTransformData as FlowNodeTransformData9
+} from "@flowgram.ai/document";
+import {
+  CommandRegistry,
+  EditorState as EditorState3,
+  EditorStateConfigEntity as EditorStateConfigEntity3,
+  Layer as Layer9,
+  observeEntity as observeEntity9,
+  observeEntityDatas as observeEntityDatas7
+} from "@flowgram.ai/core";
+import { domUtils as domUtils8 } from "@flowgram.ai/utils";
+var FlowSelectorBoundsLayer = class extends Layer9 {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils8.createDivWithClass("gedit-selector-bounds-layer");
+    this.selectBoundsBackground = domUtils8.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 = domUtils8.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 === EditorState3.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) {
+      domUtils8.setStyle(bg, {
+        display: "none"
+      });
+      return /* @__PURE__ */ React16.createElement(React16.Fragment, null);
+    }
+    if (CustomBoundsRenderer) {
+      return /* @__PURE__ */ React16.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) {
+      domUtils8.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__ */ React16.createElement("div", { className: foregroundClassName, style });
+    return /* @__PURE__ */ React16.createElement(
+      SelectorBoxPopover,
+      {
+        bounds,
+        config: this.config,
+        flowSelectConfig: this.flowSelectConfigEntity,
+        commandRegistry: this.commandRegistry
+      },
+      /* @__PURE__ */ React16.createElement("div", { className: foregroundClassName, style })
+    );
+  }
+};
+__decorateClass([
+  inject10(FlowRendererRegistry)
+], FlowSelectorBoundsLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject10(CommandRegistry)
+], FlowSelectorBoundsLayer.prototype, "commandRegistry", 2);
+__decorateClass([
+  observeEntity9(FlowSelectConfigEntity)
+], FlowSelectorBoundsLayer.prototype, "flowSelectConfigEntity", 2);
+__decorateClass([
+  observeEntity9(EditorStateConfigEntity3)
+], FlowSelectorBoundsLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  observeEntity9(SelectorBoxConfigEntity)
+], FlowSelectorBoundsLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  observeEntityDatas7(FlowNodeEntity8, FlowNodeRenderData6)
+], FlowSelectorBoundsLayer.prototype, "renderStates", 2);
+__decorateClass([
+  observeEntityDatas7(FlowNodeEntity8, FlowNodeTransformData9)
+], FlowSelectorBoundsLayer.prototype, "_transforms", 2);
+FlowSelectorBoundsLayer = __decorateClass([
+  injectable11()
+], FlowSelectorBoundsLayer);
+
+// src/layers/flow-context-menu-layer.tsx
+import React17 from "react";
+import { inject as inject11, injectable as injectable12 } from "inversify";
+import {
+  CommandRegistry as CommandRegistry2,
+  ContextMenuService as ContextMenuService2,
+  EditorState as EditorState4,
+  EditorStateConfigEntity as EditorStateConfigEntity4,
+  Layer as Layer10,
+  observeEntity as observeEntity10,
+  PipelineLayerPriority as PipelineLayerPriority2,
+  PlaygroundConfigEntity as PlaygroundConfigEntity5,
+  SelectionService as SelectionService2
+} from "@flowgram.ai/core";
+import { domUtils as domUtils9 } from "@flowgram.ai/utils";
+var FlowContextMenuLayer = class extends Layer10 {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils9.createDivWithClass("gedit-context-menu-layer");
+    this.nodeRef = React17.createRef();
+  }
+  isEnabled() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return !this.config.disabled && !this.config.readonly && currentState === EditorState4.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`;
+        },
+        PipelineLayerPriority2.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__ */ React17.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__ */ React17.createElement(SelectorBoxPopover, { ref: this.nodeRef, content: this.renderCommandMenus() });
+  }
+};
+__decorateClass([
+  inject11(CommandRegistry2)
+], FlowContextMenuLayer.prototype, "commandRegistry", 2);
+__decorateClass([
+  inject11(FlowRendererRegistry)
+], FlowContextMenuLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject11(ContextMenuService2)
+], FlowContextMenuLayer.prototype, "contextMenuService", 2);
+__decorateClass([
+  observeEntity10(FlowSelectConfigEntity)
+], FlowContextMenuLayer.prototype, "flowSelectConfigEntity", 2);
+__decorateClass([
+  inject11(SelectionService2)
+], FlowContextMenuLayer.prototype, "selectionService", 2);
+__decorateClass([
+  observeEntity10(PlaygroundConfigEntity5)
+], FlowContextMenuLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  observeEntity10(EditorStateConfigEntity4)
+], FlowContextMenuLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  observeEntity10(SelectorBoxConfigEntity)
+], FlowContextMenuLayer.prototype, "selectorBoxConfigEntity", 2);
+FlowContextMenuLayer = __decorateClass([
+  injectable12()
+], FlowContextMenuLayer);
+
+// src/layers/flow-scroll-limit-layer.tsx
+import { inject as inject12, injectable as injectable13 } from "inversify";
+import { FlowDocument as FlowDocument9, FlowNodeTransformData as FlowNodeTransformData10 } from "@flowgram.ai/document";
+import { Layer as Layer11 } from "@flowgram.ai/core";
+var FlowScrollLimitLayer = class extends Layer11 {
+  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(FlowNodeTransformData10).bounds],
+        this.config,
+        initScroll
+      )
+    );
+  }
+};
+__decorateClass([
+  inject12(FlowDocument9)
+], FlowScrollLimitLayer.prototype, "document", 2);
+FlowScrollLimitLayer = __decorateClass([
+  injectable13()
+], FlowScrollLimitLayer);
+
+// src/flow-renderer-container-module.ts
+import { ContainerModule } from "inversify";
+var FlowRendererContainerModule = new ContainerModule((bind) => {
+  bind(FlowRendererRegistry).toSelf().inSingletonScope();
+  bind(FlowRendererResizeObserver).toSelf().inSingletonScope();
+});
+export {
+  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