@flowgram-vue/renderer 0.2.0

package/dist/index.js

@@ -0,0 +1,2918 @@
+import { Point, Rectangle, Compare, Disposable, domUtils, Cache } from '@flowgram-vue/utils';
+import { DEFAULT_SPACING, DefaultSpacingKey, FlowDocument, FlowDocumentTransformerEntity, FlowNodeEntity, FlowNodeTransformData, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity, FlowNodeTransitionData, FlowDocumentOptions, FlowTransitionLabelEnum, LABEL_SIDE_TYPE, FlowTransitionLineEnum, ConstantKeys, getDefaultSpacing, FlowNodeBaseType } from '@flowgram-vue/document';
+import { observeEntity, observeEntityDatas, PlaygroundVueContainerKey, PlaygroundVueRefKey, Playground, PipelineRegistry, PlaygroundContainerFactory, useService, PlaygroundConfigEntity, EditorStateConfigEntity, ContextMenuService, SelectionService, CommandRegistry, ConfigEntity, Layer, PlaygroundEntityContextKey, PlaygroundDrag, EditorState, PipelineLayerPriority } from '@flowgram-vue/core';
+import { isNil, uniq, throttle, groupBy } from 'lodash-es';
+import { injectable, inject, multiInject, optional, ContainerModule } from 'inversify';
+import { defineComponent, provide, h, inject as inject$1, computed, ref, onMounted, Teleport, Fragment } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+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;
+};
+var BASE_DEFAULT_COLOR = "#BBBFC4";
+var BASE_DEFAULT_ACTIVATED_COLOR = "#82A7FC";
+function getBaseColor(options) {
+  return {
+    baseColor: options?.constants?.[ConstantKeys.BASE_COLOR] || BASE_DEFAULT_COLOR,
+    baseActivatedColor: options?.constants?.[ConstantKeys.BASE_ACTIVATED_COLOR] || BASE_DEFAULT_ACTIVATED_COLOR
+  };
+}
+function useBaseColor() {
+  const options = useService(FlowDocumentOptions);
+  return getBaseColor(options);
+}
+
+// src/components/utils.ts
+var DEFAULT_LINE_ATTRS = {
+  stroke: BASE_DEFAULT_COLOR,
+  fill: "transparent",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+var DEFAULT_RADIUS = DEFAULT_SPACING[DefaultSpacingKey.ROUNDED_LINE_RADIUS];
+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;
+  }
+  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;
+  }
+  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.ts
+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;
+        }
+      }
+    }, 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;
+        }
+      }
+    }, SCROLL_INTERVAL);
+    this._scrollYInterval = { interval, origin };
+  }
+  _stopScrollY() {
+    if (this._scrollYInterval) {
+      clearInterval(this._scrollYInterval.interval);
+      this._scrollYInterval = void 0;
+    }
+  }
+  stopAllScroll() {
+    this._stopScrollX();
+    this._stopScrollY();
+  }
+  scrollDirection(e, x, y) {
+    const playgroundConfig = this.playgroundConfigEntity.config;
+    const currentScrollX = playgroundConfig.scrollX;
+    const currentScrollY = playgroundConfig.scrollY;
+    this.containerX = x;
+    this.containerY = y;
+    const clientRect = this.playgroundConfigEntity.playgroundDomNode.getBoundingClientRect();
+    const mouseToBottom = playgroundConfig.height + clientRect.y - e.clientY;
+    if (mouseToBottom < SCROLL_BOUNDING) {
+      this._startScrollY(currentScrollY, true);
+      return 1 /* BOTTOM */;
+    }
+    const mouseToTop = e.clientY - clientRect.y;
+    if (mouseToTop < SCROLL_BOUNDING) {
+      this._startScrollY(currentScrollY, false);
+      return 0 /* TOP */;
+    }
+    this._stopScrollY();
+    const mouseToRight = playgroundConfig.width + clientRect.x - e.clientX;
+    if (mouseToRight < SCROLL_BOUNDING) {
+      this._startScrollX(currentScrollX, true);
+      return 3 /* RIGHT */;
+    }
+    const mouseToLeft = e.clientX - clientRect.x;
+    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";
+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.ts
+var BOUNDS_PADDING_DEFAULT = 10;
+var FlowSelectConfigEntity = class extends ConfigEntity {
+  constructor() {
+    super(...arguments);
+    this.boundsPadding = BOUNDS_PADDING_DEFAULT;
+  }
+  getDefaultConfig() {
+    return {
+      selectedNodes: []
+    };
+  }
+  get selectedNodes() {
+    return this.config.selectedNodes;
+  }
+  /**
+   * 选中节点
+   * @param nodes
+   */
+  set selectedNodes(nodes) {
+    nodes = findSelectedNodes(nodes);
+    if (nodes.length !== this.config.selectedNodes.length || nodes.some((n) => !this.config.selectedNodes.includes(n))) {
+      this.config.selectedNodes.forEach((oldNode) => {
+        if (!nodes.includes(oldNode)) {
+          oldNode.getData(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 (Rectangle.intersects(rect, transform.bounds)) {
+        if (transform.entity.originParent) {
+          selectedNodes.push(transform.entity.originParent);
+        } else {
+          selectedNodes.push(transform.entity);
+        }
+      }
+    });
+    this.selectedNodes = selectedNodes;
+  }
+  /**
+   * 获取选中节点外围的最大边框
+   */
+  getSelectedBounds() {
+    const nodes = this.selectedNodes;
+    if (nodes.length === 0) {
+      return Rectangle.EMPTY;
+    }
+    return Rectangle.enlarge(nodes.map((n) => n.getData(FlowNodeTransformData).bounds)).pad(
+      this.boundsPadding
+    );
+  }
+};
+FlowSelectConfigEntity.type = "FlowSelectConfigEntity";
+var SelectorBoxConfigEntity = class extends ConfigEntity {
+  get dragInfo() {
+    return this.config;
+  }
+  setDragInfo(info) {
+    this.updateConfig(info);
+  }
+  get disabled() {
+    return this.config && !!this.config.disabled;
+  }
+  set disabled(disabled) {
+    this.updateConfig({
+      disabled
+    });
+  }
+  get isStart() {
+    return this.dragInfo.isStart;
+  }
+  get isMoving() {
+    return this.dragInfo.isMoving;
+  }
+  get position() {
+    const { dragInfo } = this;
+    return {
+      x: dragInfo.startPos.x < dragInfo.endPos.x ? dragInfo.startPos.x : dragInfo.endPos.x,
+      y: dragInfo.startPos.y < dragInfo.endPos.y ? dragInfo.startPos.y : dragInfo.endPos.y
+    };
+  }
+  get size() {
+    const { dragInfo } = this;
+    return {
+      width: Math.abs(dragInfo.startPos.x - dragInfo.endPos.x),
+      height: Math.abs(dragInfo.startPos.y - dragInfo.endPos.y)
+    };
+  }
+  get collapsed() {
+    const { size } = this;
+    return size.width === 0 && size.height === 0;
+  }
+  collapse() {
+    this.setDragInfo({
+      ...this.dragInfo,
+      isMoving: false,
+      isStart: false
+    });
+  }
+  toRectangle(scale) {
+    const { position, size } = this;
+    return new Rectangle(
+      position.x / scale,
+      position.y / scale,
+      size.width / scale,
+      size.height / scale
+    );
+  }
+};
+SelectorBoxConfigEntity.type = "SelectorBoxConfigEntity";
+var isHidden = (dom) => {
+  if (!dom || isNil(dom?.offsetParent)) {
+    return true;
+  }
+  const style = window.getComputedStyle(dom);
+  if (style?.display === "none") {
+    return true;
+  }
+  return false;
+};
+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.ts
+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);
+          if (!entity.getNodeMeta().autoResizeDisable) {
+            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;
+            const rawX = parseFloat(node.style.left);
+            const rawY = parseFloat(node.style.top);
+            if (!this.isCoordEqual(rawX, bounds.x) || !this.isCoordEqual(rawY, bounds.y)) {
+              node.style.left = `${bounds.x}px`;
+              node.style.top = `${bounds.y}px`;
+            }
+          }
+        };
+      }
+    );
+  }
+  get transformVisibles() {
+    return this.document.getRenderDatas(FlowNodeTransformData, false);
+  }
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  dispose() {
+    this.renderCache.dispose();
+    super.dispose();
+  }
+  isCoordEqual(a, b) {
+    const browserCoordEpsilon = 0.05;
+    return Math.abs(a - b) < browserCoordEpsilon;
+  }
+  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, FlowNodeTransformData)
+], FlowNodesTransformLayer.prototype, "_transforms", 2);
+FlowNodesTransformLayer = __decorateClass([
+  injectable()
+], FlowNodesTransformLayer);
+var LayerVueProvide = defineComponent({
+  name: "LayerVueProvide",
+  props: {
+    factory: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const factory = props.factory;
+    provide(PlaygroundVueContainerKey, factory);
+    try {
+      provide(PlaygroundVueRefKey, factory.get(Playground));
+    } catch {
+    }
+  },
+  render() {
+    return this.$slots.default?.();
+  }
+});
+function wrapLayerRender(factory, children) {
+  return h(LayerVueProvide, { factory }, () => children);
+}
+
+// src/flow-renderer-contribution.ts
+var FlowRendererContribution = /* @__PURE__ */ Symbol("FlowRendererContribution");
+
+// src/flow-renderer-registry.ts
+var FlowRendererComponentType = /* @__PURE__ */ ((FlowRendererComponentType2) => {
+  FlowRendererComponentType2[FlowRendererComponentType2["VUE"] = 0] = "VUE";
+  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["SLOT_ADDER"] = "slot-adder";
+  FlowRendererKey2["SLOT_LABEL"] = "slot-label";
+  FlowRendererKey2["SLOT_COLLAPSE"] = "slot-collapse";
+  FlowRendererKey2["ARROW_RENDERER"] = "arrow-renderer";
+  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);
+  }
+  registerVueComponent(renderKey, renderer) {
+    this.componentsMap.set(renderKey, {
+      type: 0 /* VUE */,
+      renderer
+    });
+  }
+  /**
+   * 注册文案
+   */
+  registerText(configs) {
+    Object.entries(configs).forEach(([key, value]) => {
+      this.textMap.set(key, value);
+    });
+  }
+  getText(textKey) {
+    return I18n.t(textKey, { defaultValue: "" }) || 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([
+  inject(PipelineRegistry)
+], FlowRendererRegistry.prototype, "pipeline", 2);
+FlowRendererRegistry = __decorateClass([
+  injectable()
+], FlowRendererRegistry);
+
+// src/layers/flow-nodes-content-layer.ts
+var FlowNodesContentLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.renderMemoCache = /* @__PURE__ */ new WeakMap();
+    this.node = domUtils.createDivWithClass("gedit-flow-nodes-layer");
+    this.vuePortals = Cache.create(
+      (data) => {
+        const { node, entity } = data;
+        const { config } = this;
+        const PortalRenderer = this.getPortalRenderer(data);
+        const Portal = defineComponent({
+          name: "FlowNodePortal",
+          setup() {
+            provide(PlaygroundEntityContextKey, entity);
+            onMounted(() => {
+              if (!entity.getNodeMeta().autoResizeDisable && node.clientWidth && node.clientHeight) {
+                const transform = entity.getData(FlowNodeTransformData);
+                if (transform)
+                  transform.size = {
+                    width: node.clientWidth,
+                    height: node.clientHeight
+                  };
+              }
+            });
+            return () => h(Teleport, { to: node }, [
+              h(PortalRenderer, {
+                node: entity,
+                version: data?.version,
+                activated: data?.activated,
+                readonly: config.readonly,
+                disabled: config.disabled
+              })
+            ]);
+          }
+        });
+        return {
+          id: node.id || entity.id,
+          dispose: () => {
+          },
+          Portal
+        };
+      }
+    );
+  }
+  get renderStatesVisible() {
+    return this.document.getRenderDatas(FlowNodeRenderData, false);
+  }
+  getPortalRenderer(data) {
+    const meta = data.entity.getNodeMeta();
+    const renderer = this.rendererRegistry.getRendererComponent(
+      meta.renderKey || "node-render" /* NODE_RENDER */
+    );
+    const vueRenderer = renderer.renderer;
+    let memoCache = this.renderMemoCache.get(vueRenderer);
+    if (!memoCache) {
+      memoCache = vueRenderer;
+      this.renderMemoCache.set(vueRenderer, memoCache);
+    }
+    return memoCache;
+  }
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  dispose() {
+    this.vuePortals.dispose();
+    super.dispose();
+  }
+  onReady() {
+    this.node.style.zIndex = "10";
+  }
+  /**
+   * 监听readonly和 disabled 状态 并刷新layer, 并刷新节点
+   */
+  onReadonlyOrDisabledChange() {
+    this.render();
+  }
+  getPortals() {
+    return this.vuePortals.getMoreByItems(this.renderStatesVisible);
+  }
+  render() {
+    if (this.documentTransformer.loading) return null;
+    this.documentTransformer.refresh();
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(
+        Fragment,
+        null,
+        this.getPortals().map((portal) => h(portal.Portal, { key: portal.id }))
+      )
+    );
+  }
+};
+__decorateClass([
+  inject(FlowDocument)
+], FlowNodesContentLayer.prototype, "document", 2);
+__decorateClass([
+  inject(FlowRendererRegistry)
+], FlowNodesContentLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject(PlaygroundContainerFactory)
+], FlowNodesContentLayer.prototype, "playgroundContainer", 2);
+__decorateClass([
+  observeEntity(FlowDocumentTransformerEntity)
+], FlowNodesContentLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeRenderData)
+], FlowNodesContentLayer.prototype, "_renderStates", 2);
+FlowNodesContentLayer = __decorateClass([
+  injectable()
+], FlowNodesContentLayer);
+var StraightLine = defineComponent({
+  name: "StraightLine",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const line = attrs;
+    const { baseColor, baseActivatedColor } = useBaseColor();
+    return () => {
+      const { from, to, activated, style } = line;
+      return h("path", {
+        "data-line-id": line.lineId,
+        d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`,
+        ...DEFAULT_LINE_ATTRS,
+        stroke: activated ? baseActivatedColor : baseColor,
+        style
+      });
+    };
+  }
+});
+var StraightLine_default = StraightLine;
+var MARK_ARROW_ID = "$marker_arrow$";
+var MarkerArrow = defineComponent({
+  name: "MarkerArrow",
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    const { baseColor } = useBaseColor();
+    return () => h(
+      "marker",
+      {
+        "data-line-id": props.id,
+        id: props.id || MARK_ARROW_ID,
+        markerWidth: "11",
+        markerHeight: "14",
+        refX: "10",
+        refY: "7",
+        orient: "auto"
+      },
+      [
+        h("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;
+var MARK_ACTIVATED_ARROW_ID = "$marker_arrow_activated$";
+var MarkerActivatedArrow = defineComponent({
+  name: "MarkerActivatedArrow",
+  props: {
+    id: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { baseActivatedColor } = useBaseColor();
+    return () => h(
+      "marker",
+      {
+        "data-line-id": props.id,
+        id: props.id || MARK_ACTIVATED_ARROW_ID,
+        markerWidth: "11",
+        markerHeight: "14",
+        refX: "10",
+        refY: "7",
+        orient: "auto"
+      },
+      [
+        h("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/RoundedTurningLine.ts
+var MarkerDefs = defineComponent({
+  name: "MarkerDefs",
+  props: {
+    id: { type: String, required: true },
+    activated: { type: Boolean, default: false }
+  },
+  setup(props) {
+    const container = inject$1(PlaygroundVueContainerKey, null);
+    return () => {
+      const renderRegistry = container?.get?.(FlowRendererRegistry);
+      const ArrowRenderer = renderRegistry?.tryToGetRendererComponent(
+        props.activated ? "marker-active-arrow" /* MARKER_ACTIVATE_ARROW */ : "marker-arrow" /* MARKER_ARROW */
+      );
+      if (ArrowRenderer) {
+        return h(ArrowRenderer.renderer, { id: props.id, activated: props.activated });
+      }
+      if (props.activated) {
+        return h("defs", null, [h(MarkerActivatedArrow_default, { id: props.id })]);
+      }
+      return h("defs", null, [h(MarkerArrow_default, { id: props.id })]);
+    };
+  }
+});
+var RoundedTurningLine = defineComponent({
+  name: "RoundedTurningLine",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const props = attrs;
+    const { baseActivatedColor, baseColor } = useBaseColor();
+    const realVertices = computed(() => {
+      const { vertices, xRadius, yRadius } = props;
+      return vertices || (props.isHorizontal ? getHorizontalVertices(props, xRadius, yRadius) : getVertices(props, xRadius, yRadius));
+    });
+    const middleStr = computed(() => {
+      const { radius = DEFAULT_RADIUS, from, to } = props;
+      const vertices = realVertices.value;
+      return vertices.map((point, idx) => {
+        const prev = vertices[idx - 1] || from;
+        const next = vertices[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 = isNil(point.radiusX) ? radius : point.radiusX;
+        const radiusY = isNil(point.radiusY) ? radius : point.radiusY;
+        let rx = radiusX;
+        let ry = radiusY;
+        if (isRightAngleX) {
+          ry = Math.min(prevDelta.y, radiusY);
+          const moveY = isNil(point.moveY) ? ry : point.moveY;
+          inPoint.y += from.y < point.y ? -moveY : +moveY;
+          rx = Math.min(nextDelta.x, radiusX);
+          const moveX = isNil(point.moveX) ? rx : point.moveX;
+          outPoint.x += to.x < point.x ? -moveX : +moveX;
+        }
+        if (isRightAngleY) {
+          rx = Math.min(prevDelta.x, radiusX);
+          const moveX = isNil(point.moveX) ? rx : point.moveX;
+          inPoint.x += from.x < point.x ? -moveX : +moveX;
+          ry = Math.min(nextDelta.y, radiusY);
+          const moveY = isNil(point.moveY) ? ry : point.moveY;
+          outPoint.y += to.y < point.y ? -moveY : +moveY;
+        }
+        if (point.radiusOverflow === "truncate") {
+          rx = radiusX;
+          ry = radiusY;
+        }
+        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(" ");
+    });
+    return () => {
+      const { hide, from, to, arrow, activated, style } = props;
+      if (hide) {
+        return null;
+      }
+      const pathStr = `M ${from.x} ${from.y} ${middleStr.value} L ${to.x} ${to.y}`;
+      const markerId = activated ? `${MARK_ACTIVATED_ARROW_ID}${props.lineId}` : `${MARK_ARROW_ID}${props.lineId}`;
+      return [
+        arrow ? h(MarkerDefs, { id: markerId, activated }) : null,
+        h("path", {
+          "data-line-id": props.lineId,
+          d: pathStr,
+          ...DEFAULT_LINE_ATTRS,
+          stroke: activated ? baseActivatedColor : baseColor,
+          ...arrow ? {
+            markerEnd: `url(#${markerId})`
+          } : {},
+          style
+        })
+      ];
+    };
+  }
+});
+var RoundedTurningLine_default = RoundedTurningLine;
+var CustomLine = defineComponent({
+  name: "CustomLine",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    return () => {
+      const props = attrs;
+      const { renderKey, rendererRegistry, ...line } = props;
+      if (!renderKey) {
+        return null;
+      }
+      const renderer = rendererRegistry.getRendererComponent(renderKey);
+      if (!renderer) {
+        return null;
+      }
+      return h(renderer.renderer, { lineId: props.lineId, ...line });
+    };
+  }
+});
+var CustomLine_default = CustomLine;
+
+// src/components/LinesRenderer.ts
+function createLines(props) {
+  const { data, rendererRegistry, linesSave, dragService } = props;
+  const { lines, entity } = data || {};
+  const radius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_RADIUS);
+  const xRadius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_X_RADIUS);
+  const yRadius = getDefaultSpacing(entity, DefaultSpacingKey.ROUNDED_LINE_Y_RADIUS);
+  const renderLine = (line, index) => {
+    const { renderData } = data;
+    const { isVertical } = data.entity;
+    const { lineActivated } = renderData || {};
+    const draggingLineHide = (line.type === FlowTransitionLineEnum.DRAGGING_LINE || line.isDraggingLine) && !dragService.isDroppableBranch(data.entity, line.side);
+    const draggingLineActivated = (line.type === FlowTransitionLineEnum.DRAGGING_LINE || line.isDraggingLine) && data.entity?.id === dragService.dropNodeId && line.side === dragService.labelSide;
+    switch (line.type) {
+      case FlowTransitionLineEnum.STRAIGHT_LINE:
+        return h(StraightLine_default, {
+          key: `${data.entity.id}_${index}`,
+          lineId: data.entity.id,
+          activated: lineActivated,
+          ...line
+        });
+      case FlowTransitionLineEnum.DIVERGE_LINE:
+      case FlowTransitionLineEnum.DRAGGING_LINE:
+      case FlowTransitionLineEnum.MERGE_LINE:
+      case FlowTransitionLineEnum.ROUNDED_LINE:
+        return h(RoundedTurningLine_default, {
+          key: `${data.entity.id}_${index}`,
+          lineId: data.entity.id,
+          isHorizontal: !isVertical,
+          activated: lineActivated || draggingLineActivated,
+          radius,
+          ...line,
+          xRadius,
+          yRadius,
+          hide: draggingLineHide
+        });
+      case FlowTransitionLineEnum.CUSTOM_LINE:
+        return h(CustomLine_default, {
+          key: `${data.entity.id}_${index}`,
+          lineId: data.entity.id,
+          ...line,
+          rendererRegistry
+        });
+    }
+    return void 0;
+  };
+  lines.forEach((line, index) => {
+    const bounds = Rectangle.createRectangleWithTwoPoints(line.from, line.to).pad(10);
+    if (props.isViewportVisible(bounds)) {
+      const vnode = renderLine(line, index);
+      if (vnode) linesSave.push(vnode);
+    }
+  });
+}
+
+// src/layers/flow-lines-layer.ts
+var FlowLinesLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils.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 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];
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(
+        "svg",
+        {
+          class: "flow-lines-container",
+          width: "1000",
+          height: "1000",
+          overflow: "visible",
+          viewBox: this.viewBox,
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        resultLines
+      )
+    );
+  }
+};
+__decorateClass([
+  inject(FlowDocument)
+], FlowLinesLayer.prototype, "document", 2);
+__decorateClass([
+  inject(FlowDragService)
+], FlowLinesLayer.prototype, "dragService", 2);
+__decorateClass([
+  inject(FlowRendererRegistry)
+], FlowLinesLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject(PlaygroundContainerFactory)
+], FlowLinesLayer.prototype, "playgroundContainer", 2);
+__decorateClass([
+  observeEntity(FlowDocumentTransformerEntity)
+], FlowLinesLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntity(FlowRendererStateEntity)
+], FlowLinesLayer.prototype, "flowRenderState", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeTransitionData)
+], FlowLinesLayer.prototype, "_transitions", 2);
+FlowLinesLayer = __decorateClass([
+  injectable()
+], FlowLinesLayer);
+var Collapse = defineComponent({
+  name: "Collapse",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const hoverActivated = ref(false);
+    return () => {
+      const props = attrs;
+      const {
+        data,
+        rendererRegistry,
+        forceVisible,
+        hoverHeight = getTransitionLabelHoverHeight(data),
+        hoverWidth = getTransitionLabelHoverWidth(data),
+        wrapperStyle,
+        ...restProps
+      } = props;
+      const { activateNode } = restProps;
+      const activateData = activateNode?.getData(FlowNodeRenderData);
+      const handleMouseEnter = () => {
+        hoverActivated.value = true;
+        activateData?.toggleMouseEnter();
+      };
+      const handleMouseLeave = () => {
+        hoverActivated.value = false;
+        activateData?.toggleMouseLeave();
+      };
+      const collapseOpener = rendererRegistry.getRendererComponent("collapse" /* COLLAPSE */);
+      const node = data.entity;
+      const child = h(collapseOpener.renderer, {
+        node,
+        collapseNode: node,
+        ...restProps,
+        hoverActivated: hoverActivated.value
+      });
+      const isChildVisible = data.collapsed || activateData?.hovered || hoverActivated.value || forceVisible;
+      return h(
+        "div",
+        {
+          class: "flow-canvas-collapse",
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          style: {
+            width: `${hoverWidth}px`,
+            height: `${hoverHeight}px`,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            ...wrapperStyle
+          }
+        },
+        [isChildVisible ? child : null]
+      );
+    };
+  }
+});
+var Collapse_default = Collapse;
+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 */;
+};
+var Adder = defineComponent({
+  name: "Adder",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const props = attrs;
+    const hoverActivated = ref(false);
+    const dragService = useService(FlowDragService);
+    const handleMouseEnter = () => {
+      hoverActivated.value = true;
+    };
+    const handleMouseLeave = () => {
+      hoverActivated.value = false;
+    };
+    return () => {
+      const {
+        data,
+        rendererRegistry,
+        hoverHeight = getTransitionLabelHoverHeight(data),
+        hoverWidth = getTransitionLabelHoverWidth(data),
+        ...restProps
+      } = props;
+      const node = data.entity;
+      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 = h(adder.renderer, {
+        node,
+        from,
+        to,
+        renderTo,
+        hoverActivated: hoverActivated.value,
+        setHoverActivated: (v) => {
+          hoverActivated.value = v;
+        },
+        hoverWidth,
+        hoverHeight,
+        ...restProps
+      });
+      return h(
+        "div",
+        {
+          class: "flow-canvas-adder",
+          "data-testid": "sdk.flowcanvas.line.adder",
+          "data-from": from.id,
+          "data-to": to?.id ?? "",
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          style: {
+            width: `${hoverWidth}px`,
+            height: `${hoverHeight}px`,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          }
+        },
+        [child]
+      );
+    };
+  }
+});
+var Adder_default = Adder;
+
+// src/components/CollapseAdder.ts
+var CollapseAdder = defineComponent({
+  name: "CollapseAdder",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const hoverActivated = ref(false);
+    const handleMouseEnter = () => {
+      hoverActivated.value = true;
+    };
+    const handleMouseLeave = () => {
+      hoverActivated.value = false;
+    };
+    return () => {
+      const props = attrs;
+      const { data, activateNode } = props;
+      const activateData = activateNode?.getData(FlowNodeRenderData);
+      const isVertical = activateNode?.isVertical;
+      const activated = activateData?.hovered || hoverActivated.value;
+      if (isVertical) {
+        return h(
+          "div",
+          {
+            class: "flow-canvas-collapse-adder",
+            onMouseenter: handleMouseEnter,
+            onMouseleave: handleMouseLeave
+          },
+          [
+            activated || data.collapsed ? h(Collapse_default, {
+              ...props,
+              forceVisible: true,
+              wrapperStyle: { alignItems: "flex-end" },
+              hoverHeight: 20
+            }) : null,
+            !data.collapsed ? h(Adder_default, { ...props, hoverHeight: activated ? 20 : 40, hoverActivated: activated }) : null
+          ]
+        );
+      }
+      return h(
+        "div",
+        {
+          class: "flow-canvas-collapse-adder",
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          style: {
+            display: data.collapsed ? "block" : "flex"
+          }
+        },
+        [
+          activated || data.collapsed ? h(Collapse_default, {
+            ...props,
+            forceVisible: true,
+            wrapperStyle: { justifyContent: "flex-end" },
+            hoverWidth: 20
+          }) : null,
+          !data.collapsed ? h(Adder_default, { ...props, hoverWidth: activated ? 20 : 40, hoverActivated: activated }) : null
+        ]
+      );
+    };
+  }
+});
+var CollapseAdder_default = CollapseAdder;
+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 "";
+};
+var BranchDraggableRenderer = defineComponent({
+  name: "BranchDraggableRenderer",
+  inheritAttrs: false,
+  setup(_, { attrs }) {
+    const dragService = useService(FlowDragService);
+    return () => {
+      const props = attrs;
+      const { data, rendererRegistry, side, ...restProps } = props;
+      const node = data.entity;
+      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 = h(adder.renderer, {
+        node,
+        from,
+        to,
+        renderTo,
+        ...restProps
+      });
+      return h("div", { class: "flow-canvas-branch-draggable-adder" }, [child]);
+    };
+  }
+});
+var BranchDraggableRenderer_default = BranchDraggableRenderer;
+
+// src/components/LabelsRenderer.ts
+var TEXT_LABEL_STYLE = {
+  fontSize: "12px",
+  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 Rectangle(
+    offset.x - LABEL_MAX_WIDTH / 2,
+    offset.y - LABEL_MAX_HEIGHT / 2,
+    LABEL_MAX_WIDTH,
+    LABEL_MAX_HEIGHT
+  );
+}
+function createLabels(labelProps) {
+  const { data, rendererRegistry, labelsSave, getLabelColor } = labelProps;
+  const { labels, renderData } = data || {};
+  const { activated } = renderData || {};
+  const renderLabel = (label, index) => {
+    const { offset, renderKey, props, rotate, origin, type } = label || {};
+    const offsetX = offset.x;
+    const offsetY = offset.y;
+    let child = null;
+    switch (type) {
+      case FlowTransitionLabelEnum.BRANCH_DRAGGING_LABEL:
+        child = h(BranchDraggableRenderer_default, {
+          labelId: label.labelId || labelProps.data.entity.id,
+          rendererRegistry,
+          data,
+          ...props
+        });
+        break;
+      case FlowTransitionLabelEnum.ADDER_LABEL:
+        child = h(Adder_default, {
+          labelId: label.labelId || labelProps.data.entity.id,
+          rendererRegistry,
+          data,
+          ...props
+        });
+        break;
+      case FlowTransitionLabelEnum.COLLAPSE_LABEL:
+        child = h(Collapse_default, {
+          labelId: label.labelId || labelProps.data.entity.id,
+          rendererRegistry,
+          data,
+          ...props
+        });
+        break;
+      case FlowTransitionLabelEnum.COLLAPSE_ADDER_LABEL:
+        child = h(CollapseAdder_default, {
+          labelId: label.labelId || labelProps.data.entity.id,
+          rendererRegistry,
+          data,
+          ...props
+        });
+        break;
+      case FlowTransitionLabelEnum.TEXT_LABEL:
+        if (!renderKey) {
+          return null;
+        }
+        const text = rendererRegistry.getText(renderKey) || renderKey;
+        child = h(
+          "div",
+          {
+            "data-label-id": label.labelId || labelProps.data.entity.id,
+            style: {
+              ...TEXT_LABEL_STYLE,
+              ...props?.style,
+              color: getLabelColor(activated),
+              transform: rotate ? `rotate(${rotate})` : void 0
+            }
+          },
+          text
+        );
+        break;
+      case FlowTransitionLabelEnum.CUSTOM_LABEL:
+        if (!renderKey) {
+          return null;
+        }
+        try {
+          const renderer = rendererRegistry.getRendererComponent(renderKey);
+          child = h(renderer.renderer, {
+            node: data.entity,
+            labelId: label.labelId || labelProps.data.entity.id,
+            ...props
+          });
+        } catch (err) {
+          console.error(err);
+          child = renderKey;
+        }
+        break;
+    }
+    const originX = typeof origin?.[0] === "number" ? origin?.[0] : 0.5;
+    const originY = typeof origin?.[1] === "number" ? origin?.[1] : 0.5;
+    return h(
+      "div",
+      {
+        key: `${data.entity.id}${index}`,
+        "data-label-id": label.labelId || labelProps.data.entity.id,
+        style: {
+          position: "absolute",
+          left: `${offsetX}px`,
+          top: `${offsetY}px`,
+          transform: `translate(-${originX * 100}%, -${originY * 100}%)`
+        }
+      },
+      [child]
+    );
+  };
+  labels.forEach((label, index) => {
+    if (labelProps.isViewportVisible(getLabelBounds(label.offset))) {
+      const vnode = renderLabel(label, index);
+      if (vnode) labelsSave.push(vnode);
+    }
+  });
+}
+
+// src/layers/flow-labels-layer.ts
+var FlowLabelsLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils.createDivWithClass("gedit-flow-labels-layer");
+    /**
+     * 可视区域变化
+     */
+    this.onViewportChange = throttle(() => {
+      this.render();
+    }, 100);
+  }
+  get transitions() {
+    return this.document.getRenderDatas(FlowNodeTransitionData);
+  }
+  /**
+   * 监听缩放，目前采用整体缩放
+   * @param scale
+   */
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  onReady() {
+    this.node.style.zIndex = "9";
+  }
+  /**
+   * 监听readonly和 disabled 状态 并刷新layer, 并刷新
+   */
+  onReadonlyOrDisabledChange() {
+    this.render();
+  }
+  render() {
+    const labels = [];
+    if (this.documentTransformer?.loading) return null;
+    this.documentTransformer?.refresh?.();
+    const { baseActivatedColor, baseColor } = getBaseColor(this.documentOptions);
+    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 wrapLayerRender(this.playgroundContainer, h(Fragment, null, labels));
+  }
+};
+__decorateClass([
+  inject(FlowDocument)
+], FlowLabelsLayer.prototype, "document", 2);
+__decorateClass([
+  inject(FlowRendererRegistry)
+], FlowLabelsLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject(PlaygroundContainerFactory)
+], FlowLabelsLayer.prototype, "playgroundContainer", 2);
+__decorateClass([
+  optional(),
+  inject(FlowDocumentOptions)
+], FlowLabelsLayer.prototype, "documentOptions", 2);
+__decorateClass([
+  observeEntity(FlowDocumentTransformerEntity)
+], FlowLabelsLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntity(FlowRendererStateEntity)
+], FlowLabelsLayer.prototype, "flowRenderState", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeTransitionData)
+], FlowLabelsLayer.prototype, "_transitions", 2);
+FlowLabelsLayer = __decorateClass([
+  injectable()
+], FlowLabelsLayer);
+var SCROLL_LIMIT_PADDING = -120;
+function getScrollViewport(scrollData, config) {
+  const scale = config.finalScale;
+  return new Rectangle(
+    scrollData.scrollX / scale,
+    scrollData.scrollY / scale,
+    config.config.width / scale,
+    config.config.height / scale
+  ).pad(SCROLL_LIMIT_PADDING / scale, SCROLL_LIMIT_PADDING / scale);
+}
+function scrollLimit(scroll, boundsList, config, initScroll) {
+  scroll = { ...scroll };
+  const configData = config.config;
+  const oldScroll = { scrollX: configData.scrollX, scrollY: configData.scrollY };
+  if (boundsList.length === 0 || configData.width === 0 || configData.height === 0) return scroll;
+  const viewport = getScrollViewport(scroll, config);
+  const isVisible = boundsList.find((bounds) => Rectangle.isViewportVisible(bounds, viewport));
+  if (!isVisible) {
+    const oldViewport = getScrollViewport(oldScroll, config);
+    const isOldVisible = boundsList.find(
+      (bounds) => Rectangle.isViewportVisible(bounds, oldViewport)
+    );
+    if (!isOldVisible) {
+      return initScroll();
+    }
+    return oldScroll;
+  }
+  return scroll;
+}
+
+// src/utils/scroll-bar-events.ts
+var ScrollBarEvents = /* @__PURE__ */ Symbol("ScrollBarEvents");
+
+// src/layers/flow-debug-layer.ts
+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 Layer {
+  constructor() {
+    super(...arguments);
+    this.node = document.createElement("div");
+    this.viewport = domUtils.createDivWithClass("gedit-flow-debug-bounds");
+    this.boundsNodes = domUtils.createDivWithClass("gedit-flow-debug-bounds");
+    this.pointsNodes = domUtils.createDivWithClass("gedit-flow-debug-points");
+    this.versionNodes = domUtils.createDivWithClass("gedit-flow-debug-versions gedit-hidden");
+    /**
+     * ?debug=xxxx, 则返回 xxxx
+     */
+    this.filterKey = window.location.search.match(/debug=([^&]+)/)?.[1] || "";
+    this.originLine = document.createElement("div");
+    this.domCache = /* @__PURE__ */ new WeakMap();
+  }
+  get transforms() {
+    return this.document.getRenderDatas(FlowNodeTransformData);
+  }
+  onReady() {
+    this.node.style.zIndex = "20";
+    domUtils.setStyle(this.originLine, {
+      position: "absolute",
+      width: 1,
+      height: "100%",
+      left: this.pipelineNode.style.left,
+      top: 0,
+      borderLeft: "1px dashed rgba(255, 0, 0, 0.5)"
+    });
+    this.pipelineNode.parentElement.appendChild(this.originLine);
+    this.node.appendChild(this.viewport);
+    this.node.appendChild(this.versionNodes);
+    this.node.appendChild(this.boundsNodes);
+    this.node.appendChild(this.pointsNodes);
+    this.renderScrollViewportBounds();
+  }
+  onScroll() {
+    this.originLine.style.left = this.pipelineNode.style.left;
+    this.renderScrollViewportBounds();
+  }
+  onResize() {
+    this.renderScrollViewportBounds();
+  }
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+    this.renderScrollViewportBounds();
+  }
+  createBounds(transform, color, depth) {
+    if (this.filterKey && transform.key.indexOf(this.filterKey) === -1) return;
+    let cache = this.domCache.get(transform);
+    const { bounds, inputPoint, outputPoint } = transform;
+    if (!cache) {
+      const bbox = domUtils.createDivWithClass("");
+      const input = domUtils.createDivWithClass("");
+      const output = domUtils.createDivWithClass("");
+      const version = domUtils.createDivWithClass("");
+      bbox.title = transform.key;
+      input.title = transform.key + "(input)";
+      output.title = transform.key + "(output)";
+      version.title = transform.key;
+      this.boundsNodes.appendChild(bbox);
+      this.pointsNodes.appendChild(input);
+      this.pointsNodes.appendChild(output);
+      this.versionNodes.appendChild(version);
+      transform.onDispose(() => {
+        bbox.remove();
+        input.remove();
+        output.remove();
+      });
+      cache = { bbox, input, output, version, color };
+      this.domCache.set(transform, cache);
+    }
+    domUtils.setStyle(cache.version, {
+      position: "absolute",
+      marginLeft: "-9px",
+      marginTop: "-10px",
+      borderRadius: 12,
+      background: "#f54a45",
+      padding: 4,
+      color: "navajowhite",
+      display: transform.renderState.hidden ? "none" : "block",
+      zIndex: depth + 1e3,
+      left: bounds.center.x,
+      top: bounds.center.y
+    });
+    cache.version.innerHTML = transform.version.toString();
+    domUtils.setStyle(cache.input, {
+      position: "absolute",
+      width: 10,
+      height: 10,
+      marginLeft: -5,
+      marginTop: -5,
+      borderRadius: 5,
+      left: inputPoint.x,
+      top: inputPoint.y,
+      opacity: 0.4,
+      zIndex: depth,
+      backgroundColor: cache.color,
+      whiteSpace: "nowrap",
+      overflow: "visible"
+    });
+    cache.input.innerHTML = `${inputPoint.x},${inputPoint.y}`;
+    domUtils.setStyle(cache.output, {
+      position: "absolute",
+      width: 10,
+      height: 10,
+      marginLeft: -5,
+      marginTop: -5,
+      borderRadius: 5,
+      left: outputPoint.x,
+      top: outputPoint.y,
+      opacity: 0.4,
+      zIndex: depth,
+      backgroundColor: cache.color,
+      whiteSpace: "nowrap",
+      overflow: "visible"
+    });
+    cache.output.innerHTML = `${outputPoint.x},${outputPoint.y}`;
+    domUtils.setStyle(cache.bbox, {
+      position: "absolute",
+      width: bounds.width,
+      height: bounds.height,
+      left: bounds.left,
+      top: bounds.top,
+      opacity: `${depth / 30}`,
+      backgroundColor: cache.color
+    });
+  }
+  /**
+   * 显示 viewport 可滚动区域
+   */
+  renderScrollViewportBounds() {
+    const viewportBounds = getScrollViewport(
+      {
+        scrollX: this.config.config.scrollX,
+        scrollY: this.config.config.scrollY
+      },
+      this.config
+    );
+    domUtils.setStyle(this.viewport, {
+      position: "absolute",
+      width: viewportBounds.width - 2,
+      height: viewportBounds.height - 2,
+      left: viewportBounds.left + 1,
+      top: viewportBounds.top + 1,
+      border: "1px solid rgba(200, 200, 255, 0.5)"
+    });
+  }
+  autorun() {
+    if (this.documentTransformer.loading) return;
+    this.documentTransformer.refresh();
+    let color = randomColor(0);
+    this.document.traverse((entity, depth) => {
+      const transform = entity.getData(FlowNodeTransformData);
+      color = randomColor(depth);
+      this.createBounds(transform, color, depth);
+    });
+    this.renderScrollViewportBounds();
+  }
+};
+__decorateClass([
+  inject(FlowDocument)
+], FlowDebugLayer.prototype, "document", 2);
+__decorateClass([
+  observeEntity(FlowDocumentTransformerEntity)
+], FlowDebugLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeTransformData)
+], FlowDebugLayer.prototype, "_transforms", 2);
+FlowDebugLayer = __decorateClass([
+  injectable()
+], FlowDebugLayer);
+var BORDER_WIDTH = 2;
+var BLOCK_OFFSET = 11;
+var SCROLL_BAR_WIDTH = "7px";
+var FlowScrollBarLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    // @observeEntity(FlowDocumentTransformerEntity) readonly documentTransformer: FlowDocumentTransformerEntity
+    // 右滚动区域
+    this.rightScrollBar = domUtils.createDivWithClass("gedit-playground-scroll-right");
+    // 右滚动条
+    this.rightScrollBarBlock = domUtils.createDivWithClass("gedit-playground-scroll-right-block");
+    // 底滚动区域
+    this.bottomScrollBar = domUtils.createDivWithClass("gedit-playground-scroll-bottom");
+    // 底滚动条
+    this.bottomScrollBarBlock = domUtils.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";
+    domUtils.addClass(scrollBar, addClassName);
+    domUtils.delClass(scrollBar, delClassName);
+  }
+  onReady() {
+    if (!this.options.getBounds) {
+      this.options = {
+        getBounds: () => {
+          const document2 = this.flowDocument;
+          if (!document2) return Rectangle.EMPTY;
+          document2.transformer.refresh();
+          return document2.root.getData(FlowNodeTransformData).bounds;
+        },
+        showScrollBars: "whenScrolling"
+      };
+    }
+    this.pipelineNode.parentNode.appendChild(this.rightScrollBar);
+    this.pipelineNode.parentNode.appendChild(this.rightScrollBarBlock);
+    this.pipelineNode.parentNode.appendChild(this.bottomScrollBar);
+    this.pipelineNode.parentNode.appendChild(this.bottomScrollBarBlock);
+    this.rightScrollBar.onclick = this.clickRightScrollBar.bind(this);
+    this.bottomScrollBar.onclick = this.clickBottomScrollBar.bind(this);
+    if (this.options.showScrollBars === "whenScrolling") {
+      this.rightScrollBar.addEventListener("mouseenter", (e) => {
+        this.changeScrollBarVisibility(this.rightScrollBarBlock, "show" /* Show */);
+      });
+      this.rightScrollBar.addEventListener("mouseleave", (e) => {
+        this.changeScrollBarVisibility(this.rightScrollBarBlock, "hidden" /* Hidden */);
+      });
+      this.bottomScrollBar.addEventListener("mouseenter", (e) => {
+        this.changeScrollBarVisibility(this.bottomScrollBarBlock, "show" /* Show */);
+      });
+      this.bottomScrollBar.addEventListener("mouseleave", (e) => {
+        this.changeScrollBarVisibility(this.bottomScrollBarBlock, "hidden" /* Hidden */);
+      });
+    }
+    this.bottomScrollBarBlock.addEventListener("mousedown", (e) => {
+      this.bottomGrabDragger.start(e.clientX, e.clientY);
+      e.stopPropagation();
+    });
+    this.rightScrollBarBlock.addEventListener("mousedown", (e) => {
+      this.rightGrabDragger.start(e.clientX, e.clientY);
+      e.stopPropagation();
+    });
+  }
+  autorun() {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+    }
+    const viewportBounds = getScrollViewport(
+      {
+        scrollX: this.config.config.scrollX,
+        scrollY: this.config.config.scrollY
+      },
+      this.config
+    );
+    const viewport = this.config.getViewport();
+    this.viewportWidth = viewport.width;
+    this.viewportHeight = viewport.height;
+    const rootBounds = this.options.getBounds();
+    this.width = rootBounds?.width || 0;
+    this.height = rootBounds?.height || 0;
+    const paddingLeftRight = (this.viewportWidth - viewportBounds.width) / 2 - BORDER_WIDTH;
+    const paddingTopBottom = (this.viewportHeight - viewportBounds.height) / 2 - BORDER_WIDTH;
+    const canvasTotalWidth = this.width + viewportBounds.width;
+    const canvasTotalHeight = this.height + viewportBounds.height;
+    const initialOffsetX = rootBounds.x;
+    const initialOffsetY = rootBounds.y;
+    this.mostLeft = this.width + initialOffsetX - paddingLeftRight;
+    this.mostRight = this.mostLeft - canvasTotalWidth;
+    this.mostTop = this.height + initialOffsetY - paddingTopBottom;
+    this.mostBottom = this.mostTop - canvasTotalHeight;
+    this.scale = this.config.finalScale;
+    const calcViewportWidth = this.clientViewportWidth;
+    const calcViewportHeight = this.clientViewportHeight;
+    this.scrollBottomWidth = calcViewportWidth - calcViewportWidth * (this.mostLeft - this.mostRight) / this.viewportMoveWidth;
+    this.scrollRightHeight = calcViewportHeight - calcViewportHeight * (this.mostTop - this.mostBottom) / this.viewportMoveHeight;
+    const bottomBarToLeft = this.getToLeft(viewport.x);
+    const rightBarToTop = this.getToTop(viewport.y);
+    domUtils.setStyle(this.rightScrollBarBlock, {
+      right: 2,
+      top: rightBarToTop,
+      background: "#1F2329",
+      zIndex: 10,
+      height: this.scrollRightHeight,
+      width: SCROLL_BAR_WIDTH
+    });
+    domUtils.setStyle(this.bottomScrollBarBlock, {
+      left: bottomBarToLeft,
+      bottom: 2,
+      background: "#1F2329",
+      zIndex: 10,
+      height: SCROLL_BAR_WIDTH,
+      width: this.scrollBottomWidth
+    });
+    this.changeScrollBarVisibility(this.rightScrollBarBlock, "show" /* Show */);
+    this.changeScrollBarVisibility(this.bottomScrollBarBlock, "show" /* Show */);
+    if (this.options.showScrollBars === "whenScrolling") {
+      this.hideTimeout = window.setTimeout(() => {
+        this.changeScrollBarVisibility(this.rightScrollBarBlock, "hidden" /* Hidden */);
+        this.changeScrollBarVisibility(this.bottomScrollBarBlock, "hidden" /* Hidden */);
+        this.hideTimeout = void 0;
+      }, 1e3);
+    }
+  }
+};
+__decorateClass([
+  optional(),
+  inject(ScrollBarEvents)
+], FlowScrollBarLayer.prototype, "events", 2);
+__decorateClass([
+  inject(FlowDocument),
+  optional()
+], FlowScrollBarLayer.prototype, "flowDocument", 2);
+__decorateClass([
+  observeEntity(PlaygroundConfigEntity)
+], FlowScrollBarLayer.prototype, "playgroundConfigEntity", 2);
+FlowScrollBarLayer = __decorateClass([
+  injectable()
+], FlowScrollBarLayer);
+var DRAG_OFFSET = 10;
+var DEFAULT_DRAG_OFFSET_X = 8;
+var DEFAULT_DRAG_OFFSET_Y = 8;
+var FlowDragLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.disableDragScroll = false;
+    this.dragOffset = {
+      x: DEFAULT_DRAG_OFFSET_X,
+      y: DEFAULT_DRAG_OFFSET_Y
+    };
+    this.containerRef = { current: null };
+    this.draggingNodeMask = document.createElement("div");
+    this._dragger = new PlaygroundDrag({
+      onDrag: (e) => {
+        this.handleMouseMove(e);
+      },
+      onDragEnd: () => {
+        this.handleMouseUp();
+      },
+      stopGlobalEventNames: ["contextmenu"]
+    });
+  }
+  get transitions() {
+    const result = [];
+    this.document.traverse((entity) => {
+      result.push(entity.getData(FlowNodeTransitionData));
+    });
+    return result;
+  }
+  get dragStartEntity() {
+    return this.flowRenderStateEntity.getDragStartEntity();
+  }
+  set dragStartEntity(entity) {
+    this.flowRenderStateEntity.setDragStartEntity(entity);
+  }
+  get dragEntities() {
+    return this.flowRenderStateEntity.getDragEntities();
+  }
+  set dragEntities(entities) {
+    this.flowRenderStateEntity.setDragEntities(entities);
+  }
+  isGrab() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return currentState === EditorState.STATE_GRAB;
+  }
+  setDraggingStatus(status) {
+    if (this.flowDragService.nodeDragIdsWithChildren.length) {
+      this.flowDragService.nodeDragIdsWithChildren.forEach((_id) => {
+        const node = this.entityManager.getEntityById(_id);
+        const data = node?.getData(FlowNodeRenderData);
+        data.dragging = status;
+      });
+    }
+    this.flowRenderStateEntity.setDragging(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.dragJSON || this.dragStartEntity) && this.dragEnable(event)) {
+      this.setDraggingStatus(true);
+      const scale = this.playgroundConfigEntity.finalScale;
+      if (this.containerRef.current) {
+        const dragNode = this.containerRef.current.children?.[0];
+        if (!dragNode) {
+          return;
+        }
+        const clientBounds = this.playgroundConfigEntity.getClientBounds();
+        const dragBlockX = event.clientX - (this.pipelineNode.offsetLeft || 0) - clientBounds.x - (dragNode.clientWidth - this.dragOffset.x) * scale;
+        const dragBlockY = event.clientY - (this.pipelineNode.offsetTop || 0) - clientBounds.y - (dragNode.clientHeight - this.dragOffset.y) * scale;
+        const isBranch = this.flowDragService.isDragBranch;
+        const draggingRect = new Rectangle(
+          dragBlockX,
+          dragBlockY,
+          dragNode.clientWidth * scale,
+          dragNode.clientHeight * scale
+        );
+        let side;
+        const collisionTransition = this.transitions.find((transition) => {
+          if (transition?.entity?.parent?.collapsed) {
+            return false;
+          }
+          const { hasCollision, labelOffsetType } = this.flowDragConfigEntity.isCollision(
+            transition,
+            draggingRect,
+            isBranch
+          );
+          side = labelOffsetType;
+          return hasCollision;
+        });
+        if (collisionTransition && (isBranch ? this.flowDragService.isDroppableBranch(collisionTransition.entity, side) : this.flowDragService.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 + this.pipelineNode.offsetLeft + clientBounds.x + window.scrollX}px`;
+        this.containerRef.current.style.top = `${dragBlockY + this.pipelineNode.offsetTop + clientBounds.y + window.scrollY}px`;
+        this.containerRef.current.style.transformOrigin = "top left";
+        this.containerRef.current.style.transform = `scale(${scale})`;
+        if (!this.disableDragScroll) {
+          this.flowDragConfigEntity.scrollDirection(event, dragBlockX, dragBlockY);
+        }
+      }
+    }
+  }
+  async handleMouseUp() {
+    this.setDraggingStatus(false);
+    if (this.dragStartEntity || this.dragJSON) {
+      const activatedNodeId = this.flowDragService.dropNodeId;
+      if (activatedNodeId) {
+        if (this.flowDragService.isDragBranch) {
+          if (this.dragJSON) {
+            await this.flowDragService.dropCreateNode(this.dragJSON, this.onCreateNode);
+          } else {
+            this.flowDragService.dropBranch();
+          }
+        } else {
+          if (this.dragJSON) {
+            await this.flowDragService.dropCreateNode(this.dragJSON, this.onCreateNode);
+          } else {
+            this.flowDragService.dropNode();
+          }
+          this.selectConfigEntity.clearSelectedNodes();
+        }
+      }
+      this.flowRenderStateEntity.setNodeDroppingId("");
+      this.flowRenderStateEntity.setDragLabelSide();
+      this.flowRenderStateEntity.setIsBranch(false);
+      this.dragStartEntity = void 0;
+      this.dragEntities = [];
+      this.flowDragConfigEntity.stopAllScroll();
+    }
+    this.disableDragScroll = false;
+    this.dragJSON = void 0;
+    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,
+    dragJSON,
+    isBranch,
+    onCreateNode
+  }, options) {
+    if (this.isGrab() || this.config.disabled || this.config.readonly) {
+      return;
+    }
+    this.disableDragScroll = Boolean(options?.disableDragScroll);
+    this.dragJSON = dragJSON;
+    this.onCreateNode = onCreateNode;
+    this.flowRenderStateEntity.setIsBranch(Boolean(isBranch));
+    this.dragOffset.x = options?.dragOffsetX || DEFAULT_DRAG_OFFSET_X;
+    this.dragOffset.y = options?.dragOffsetY || DEFAULT_DRAG_OFFSET_Y;
+    const type = startEntityFromProps?.flowNodeType || dragJSON?.type;
+    const isIcon = type === FlowNodeBaseType.BLOCK_ICON;
+    const isOrderIcon = type === FlowNodeBaseType.BLOCK_ORDER_ICON;
+    const dragStartEntity = isIcon || isOrderIcon ? startEntityFromProps.parent : startEntityFromProps;
+    if (dragStartEntity && !dragStartEntity.getData(FlowNodeRenderData).draggable) {
+      return;
+    }
+    this.initialPosition = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    this.dragStartEntity = dragStartEntity;
+    this.dragEntities = dragEntities || (this.dragStartEntity ? [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.flowDragService.onDrop(this.options.onDrop));
+    }
+  }
+  dispose() {
+    this._dragger.dispose();
+    super.dispose();
+  }
+  render() {
+    const DragComp = this.dragNodeComp?.renderer;
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(Teleport, { to: "body" }, [
+        h(
+          "div",
+          {
+            ref: (el) => {
+              this.containerRef.current = el || null;
+            },
+            style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
+            onMouseenter: (e) => e.stopPropagation()
+          },
+          [
+            DragComp ? h(DragComp, {
+              dragJSON: this.dragJSON,
+              dragStart: this.dragStartEntity,
+              dragNodes: this.dragEntities
+            }) : null
+          ]
+        )
+      ])
+    );
+  }
+};
+__decorateClass([
+  inject(FlowDocument)
+], FlowDragLayer.prototype, "document", 2);
+__decorateClass([
+  inject(FlowDragService)
+], FlowDragLayer.prototype, "flowDragService", 2);
+__decorateClass([
+  inject(PlaygroundContainerFactory)
+], FlowDragLayer.prototype, "playgroundContainer", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeTransformData)
+], FlowDragLayer.prototype, "transforms", 2);
+__decorateClass([
+  observeEntity(EditorStateConfigEntity)
+], FlowDragLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  observeEntity(PlaygroundConfigEntity)
+], FlowDragLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  observeEntity(FlowDragEntity)
+], FlowDragLayer.prototype, "flowDragConfigEntity", 2);
+__decorateClass([
+  observeEntity(FlowRendererStateEntity)
+], FlowDragLayer.prototype, "flowRenderStateEntity", 2);
+__decorateClass([
+  observeEntity(FlowSelectConfigEntity)
+], FlowDragLayer.prototype, "selectConfigEntity", 2);
+__decorateClass([
+  inject(FlowRendererRegistry)
+], FlowDragLayer.prototype, "rendererRegistry", 2);
+FlowDragLayer = __decorateClass([
+  injectable()
+], FlowDragLayer);
+var FlowSelectorBoxLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils.createDivWithClass("gedit-selector-box-layer");
+    /**
+     * 选择框
+     */
+    this.selectorBox = this.createDOMCache("gedit-selector-box");
+    /**
+     * 用于遮挡鼠标，避免触发 hover
+     */
+    this.selectorBoxBlock = this.createDOMCache("gedit-selector-box-block");
+    /**
+     * 拖动选择框
+     */
+    this.selectboxDragger = new PlaygroundDrag({
+      onDragStart: (e) => {
+        this.selectConfigEntity.clearSelectedNodes();
+        const mousePos = this.playgroundConfigEntity.getPosFromMouseEvent(e);
+        this.transformVisibles = this.flowDocument.getRenderDatas(FlowNodeTransformData, false).filter((transform) => {
+          const { entity } = transform;
+          if (entity.originParent) {
+            return this.nodeSelectable(entity, mousePos) && this.nodeSelectable(entity.originParent, mousePos);
+          }
+          return this.nodeSelectable(entity, mousePos);
+        });
+        this.selectorBoxConfigEntity.setDragInfo(e);
+        this.updateSelectorBox(this.selectorBoxConfigEntity);
+      },
+      onDrag: (e) => {
+        this.selectorBoxConfigEntity.setDragInfo(e);
+        this.selectConfigEntity.selectFromBounds(
+          this.selectorBoxConfigEntity.toRectangle(this.playgroundConfigEntity.finalScale),
+          this.transformVisibles
+        );
+        this.updateSelectorBox(this.selectorBoxConfigEntity);
+      },
+      onDragEnd: (e) => {
+        this.selectorBoxConfigEntity.setDragInfo(e);
+        this.transformVisibles.length = 0;
+        this.updateSelectorBox(this.selectorBoxConfigEntity);
+      }
+    });
+  }
+  onReady() {
+    if (!this.options.canSelect) {
+      this.options.canSelect = (e) => {
+        const target = e.target;
+        return target === this.pipelineNode || target === this.playgroundNode;
+      };
+    }
+    this.toDispose.pushAll([
+      this.selectConfigEntity.onConfigChanged(() => {
+        this.selectionService.selection = this.selectConfigEntity.selectedNodes;
+      }),
+      this.selectionService.onSelectionChanged(() => {
+        const selectedNodes = this.selectionService.selection.filter(
+          (entity) => entity instanceof FlowNodeEntity
+        );
+        this.selectConfigEntity.selectedNodes = selectedNodes;
+      })
+    ]);
+    this.listenPlaygroundEvent(
+      "mousedown",
+      (e) => {
+        if (!this.isEnabled()) return;
+        if (this.options.canSelect && !this.options.canSelect(e, this.selectorBoxConfigEntity)) {
+          return;
+        }
+        const currentState = this.editorStateConfig.getCurrentState();
+        if (currentState === EditorState.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 === EditorState.STATE_MOUSE_FRIENDLY_SELECT;
+    return !this.config.disabled && !this.config.readonly && // 鼠标友好模式下，需要按下 shift 启动框选
+    (isMouseFriendly && this.editorStateConfig.isPressingShift || currentState === EditorState.STATE_SELECT) && !this.selectorBoxConfigEntity.disabled;
+  }
+  /**
+   * Destroy
+   */
+  dispose() {
+    this.selectorBox.dispose();
+    this.selectorBoxBlock.dispose();
+    super.dispose();
+  }
+  updateSelectorBox(selector) {
+    const node = this.selectorBox.get();
+    const block = this.selectorBoxBlock.get();
+    if (!this.isEnabled() && selector.isMoving) {
+      this.selectorBoxConfigEntity.collapse();
+    }
+    if (!this.isEnabled() || !selector.isMoving) {
+      node.setStyle({
+        display: "none"
+      });
+      block.setStyle({
+        display: "none"
+      });
+    } else {
+      node.setStyle({
+        display: "block",
+        left: selector.position.x,
+        top: selector.position.y,
+        width: selector.size.width,
+        height: selector.size.height
+      });
+      block.setStyle({
+        display: "block",
+        left: selector.position.x - 10,
+        top: selector.position.y - 10,
+        width: selector.size.width + 20,
+        height: selector.size.height + 20
+      });
+    }
+  }
+  nodeSelectable(node, mousePos) {
+    const selectable = node.getNodeMeta().selectable;
+    if (typeof selectable === "function") {
+      return selectable(node, mousePos);
+    } else {
+      return selectable;
+    }
+  }
+  // autorun(): void {
+  //   this.updateSelectorBox(this.selectorBoxConfigEntity);
+  // }
+};
+__decorateClass([
+  inject(FlowDocument)
+], FlowSelectorBoxLayer.prototype, "flowDocument", 2);
+__decorateClass([
+  inject(ContextMenuService)
+], FlowSelectorBoxLayer.prototype, "contextMenuService", 2);
+__decorateClass([
+  observeEntity(PlaygroundConfigEntity)
+], FlowSelectorBoxLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  inject(SelectionService)
+], FlowSelectorBoxLayer.prototype, "selectionService", 2);
+__decorateClass([
+  observeEntity(SelectorBoxConfigEntity)
+], FlowSelectorBoxLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  observeEntity(FlowSelectConfigEntity)
+], FlowSelectorBoxLayer.prototype, "selectConfigEntity", 2);
+__decorateClass([
+  observeEntity(EditorStateConfigEntity)
+], FlowSelectorBoxLayer.prototype, "editorStateConfig", 2);
+FlowSelectorBoxLayer = __decorateClass([
+  injectable()
+], FlowSelectorBoxLayer);
+var FlowSelectorBoundsLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils.createDivWithClass("gedit-selector-bounds-layer");
+    this.selectBoundsBackground = domUtils.createDivWithClass("gedit-selector-bounds-background");
+  }
+  onReady() {
+    this.node.style.zIndex = "20";
+    const { firstChild } = this.pipelineNode;
+    if (this.options.boundsPadding !== void 0) {
+      this.flowSelectConfigEntity.boundsPadding = this.options.boundsPadding;
+    }
+    if (this.options.backgroundClassName) {
+      this.selectBoundsBackground.classList.add(this.options.backgroundClassName);
+    }
+    const selectorBoundsLayer = domUtils.createDivWithClass(
+      "gedit-selector-bounds-background-layer 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 === EditorState.STATE_SELECT;
+  }
+  render() {
+    const {
+      ignoreOneSelect,
+      ignoreChildrenLength,
+      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 && (ignoreChildrenLength || selectedNodes[0].childrenLength <= 1)) {
+      domUtils.setStyle(bg, {
+        display: "none"
+      });
+      return null;
+    }
+    if (CustomBoundsRenderer) {
+      return wrapLayerRender(
+        this.playgroundContainer,
+        h(CustomBoundsRenderer, {
+          bounds,
+          config: this.config,
+          flowSelectConfig: this.flowSelectConfigEntity,
+          commandRegistry: this.commandRegistry
+        })
+      );
+    }
+    const style = {
+      display: "block",
+      left: `${bounds.left}px`,
+      top: `${bounds.top}px`,
+      width: `${bounds.width}px`,
+      height: `${bounds.height}px`
+    };
+    if (!disableBackground) {
+      domUtils.setStyle(bg, {
+        display: "block",
+        left: bounds.left,
+        top: bounds.top,
+        width: bounds.width,
+        height: bounds.height
+      });
+    }
+    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 wrapLayerRender(
+        this.playgroundContainer,
+        h("div", { class: foregroundClassName, style })
+      );
+    }
+    return wrapLayerRender(
+      this.playgroundContainer,
+      h(
+        SelectorBoxPopover,
+        {
+          bounds,
+          config: this.config,
+          flowSelectConfig: this.flowSelectConfigEntity,
+          commandRegistry: this.commandRegistry
+        },
+        () => h("div", { class: foregroundClassName, style })
+      )
+    );
+  }
+};
+__decorateClass([
+  inject(FlowRendererRegistry)
+], FlowSelectorBoundsLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject(CommandRegistry)
+], FlowSelectorBoundsLayer.prototype, "commandRegistry", 2);
+__decorateClass([
+  inject(PlaygroundContainerFactory)
+], FlowSelectorBoundsLayer.prototype, "playgroundContainer", 2);
+__decorateClass([
+  observeEntity(FlowSelectConfigEntity)
+], FlowSelectorBoundsLayer.prototype, "flowSelectConfigEntity", 2);
+__decorateClass([
+  observeEntity(EditorStateConfigEntity)
+], FlowSelectorBoundsLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  observeEntity(SelectorBoxConfigEntity)
+], FlowSelectorBoundsLayer.prototype, "selectorBoxConfigEntity", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeRenderData)
+], FlowSelectorBoundsLayer.prototype, "renderStates", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity, FlowNodeTransformData)
+], FlowSelectorBoundsLayer.prototype, "_transforms", 2);
+FlowSelectorBoundsLayer = __decorateClass([
+  injectable()
+], FlowSelectorBoundsLayer);
+var FlowContextMenuLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils.createDivWithClass("gedit-context-menu-layer");
+    this.nodeRef = { current: null };
+  }
+  isEnabled() {
+    const currentState = this.editorStateConfig.getCurrentState();
+    return !this.config.disabled && !this.config.readonly && currentState === EditorState.STATE_SELECT && !this.selectorBoxConfigEntity.disabled;
+  }
+  onReady() {
+    this.node.style.zIndex = "30";
+    this.node.style.display = "block";
+    this.toDispose.pushAll([
+      this.listenPlaygroundEvent(
+        "contextmenu",
+        (e) => {
+          if (!this.isEnabled()) return;
+          this.contextMenuService.rightPanelVisible = true;
+          const bounds = this.flowSelectConfigEntity.getSelectedBounds();
+          if (bounds.width === 0 || bounds.height === 0) {
+            return;
+          }
+          e.stopPropagation();
+          e.preventDefault();
+          this.nodeRef.current?.setVisible(true);
+          const clientBounds = this.playgroundConfigEntity.getClientBounds();
+          const dragBlockX = e.clientX - (this.pipelineNode.offsetLeft || 0) - clientBounds.x;
+          const dragBlockY = e.clientY - (this.pipelineNode.offsetTop || 0) - clientBounds.y;
+          this.node.style.left = `${dragBlockX}px`;
+          this.node.style.top = `${dragBlockY}px`;
+        },
+        PipelineLayerPriority.BASE_LAYER
+      ),
+      this.listenPlaygroundEvent("mousedown", () => {
+        this.nodeRef.current?.setVisible(false);
+        this.contextMenuService.rightPanelVisible = false;
+      })
+    ]);
+  }
+  onScroll() {
+    this.nodeRef.current?.setVisible(false);
+  }
+  onZoom() {
+    this.nodeRef.current?.setVisible(false);
+  }
+  /**
+   * Destroy
+   */
+  dispose() {
+    super.dispose();
+  }
+  /**
+   * 渲染工具栏
+   */
+  renderCommandMenus() {
+    return this.commandRegistry.commands.filter((cmd) => cmd.category === "SELECTOR_BOX" /* SELECTOR_BOX */).map((cmd) => {
+      const CommandRenderer = this.rendererRegistry.getRendererComponent(
+        cmd.icon || cmd.id
+      )?.renderer;
+      return h(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 wrapLayerRender(
+      this.playgroundContainer,
+      h(SelectorBoxPopover, {
+        ref: (inst) => {
+          this.nodeRef.current = inst;
+        },
+        content: this.renderCommandMenus()
+      })
+    );
+  }
+};
+__decorateClass([
+  inject(CommandRegistry)
+], FlowContextMenuLayer.prototype, "commandRegistry", 2);
+__decorateClass([
+  inject(FlowRendererRegistry)
+], FlowContextMenuLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject(ContextMenuService)
+], FlowContextMenuLayer.prototype, "contextMenuService", 2);
+__decorateClass([
+  inject(PlaygroundContainerFactory)
+], FlowContextMenuLayer.prototype, "playgroundContainer", 2);
+__decorateClass([
+  observeEntity(FlowSelectConfigEntity)
+], FlowContextMenuLayer.prototype, "flowSelectConfigEntity", 2);
+__decorateClass([
+  inject(SelectionService)
+], FlowContextMenuLayer.prototype, "selectionService", 2);
+__decorateClass([
+  observeEntity(PlaygroundConfigEntity)
+], FlowContextMenuLayer.prototype, "playgroundConfigEntity", 2);
+__decorateClass([
+  observeEntity(EditorStateConfigEntity)
+], FlowContextMenuLayer.prototype, "editorStateConfig", 2);
+__decorateClass([
+  observeEntity(SelectorBoxConfigEntity)
+], FlowContextMenuLayer.prototype, "selectorBoxConfigEntity", 2);
+FlowContextMenuLayer = __decorateClass([
+  injectable()
+], FlowContextMenuLayer);
+var FlowScrollLimitLayer = class extends Layer {
+  getInitScroll() {
+    return this.document.layout.getInitScroll(this.pipelineNode.getBoundingClientRect());
+  }
+  onReady() {
+    const initScroll = () => this.getInitScroll();
+    this.config.updateConfig(initScroll());
+    this.config.addScrollLimit(
+      (scroll) => scrollLimit(
+        scroll,
+        [this.document.root.getData(FlowNodeTransformData).bounds],
+        this.config,
+        initScroll
+      )
+    );
+  }
+};
+__decorateClass([
+  inject(FlowDocument)
+], FlowScrollLimitLayer.prototype, "document", 2);
+FlowScrollLimitLayer = __decorateClass([
+  injectable()
+], FlowScrollLimitLayer);
+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, createLines, useBaseColor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map