@flowgram-vue/free-snap-plugin 0.2.0

package/dist/index.js

@@ -0,0 +1,1034 @@
+import { EntityManager, PlaygroundConfigEntity, definePluginCreator, Layer, TransformData } from '@flowgram-vue/core';
+import { inject, injectable } from 'inversify';
+import { domUtils, Emitter, Rectangle } from '@flowgram-vue/utils';
+import { WorkflowDocument, WorkflowDragService, WorkflowNodeEntity } from '@flowgram-vue/free-layout-core';
+import { FlowNodeTransformData, FlowNodeBaseType } from '@flowgram-vue/document';
+import { h, Fragment } from 'vue';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/constant.ts
+var SnapDefaultOptions = {
+  enableEdgeSnapping: true,
+  edgeThreshold: 7,
+  enableGridSnapping: false,
+  gridSize: 20,
+  enableMultiSnapping: true,
+  enableOnlyViewportSnapping: true,
+  edgeColor: "#4E40E5",
+  alignColor: "#4E40E5",
+  edgeLineWidth: 2,
+  alignLineWidth: 2,
+  alignCrossWidth: 16
+};
+var Epsilon = 1e-5;
+
+// src/utils.ts
+var isEqual = (a, b) => {
+  if (a === void 0 || b === void 0) {
+    return false;
+  }
+  return Math.abs(a - b) < Epsilon;
+};
+var isLessThan = (a, b) => {
+  if (a === void 0 || b === void 0) {
+    return false;
+  }
+  return b - a > Epsilon;
+};
+var isGreaterThan = (a, b) => {
+  if (a === void 0 || b === void 0) {
+    return false;
+  }
+  return a - b > Epsilon;
+};
+var isLessThanOrEqual = (a, b) => isEqual(a, b) || isLessThan(a, b);
+var isNumber = (value) => typeof value === "number" && !isNaN(value);
+
+// src/service.ts
+var WorkflowSnapService = class {
+  constructor() {
+    this.disposers = [];
+    this.snapEmitter = new Emitter();
+    this.onSnap = this.snapEmitter.event;
+    this._disabled = false;
+  }
+  init(params = {}) {
+    this.options = {
+      ...SnapDefaultOptions,
+      ...params
+    };
+    this.mountListener();
+  }
+  dispose() {
+    this.disposers.forEach((disposer) => disposer.dispose());
+  }
+  get disabled() {
+    return this._disabled;
+  }
+  disable() {
+    if (this._disabled) {
+      return;
+    }
+    this._disabled = true;
+    this.clear();
+  }
+  enable() {
+    if (!this._disabled) {
+      return;
+    }
+    this._disabled = false;
+    this.clear();
+  }
+  mountListener() {
+    const dragAdjusterDisposer = this.dragService.registerPosAdjuster((params) => {
+      const { selectedNodes: targetNodes, position } = params;
+      const isMultiSnapping = this.options.enableMultiSnapping ? false : targetNodes.length !== 1;
+      if (this._disabled || !this.options.enableEdgeSnapping || isMultiSnapping) {
+        return {
+          x: 0,
+          y: 0
+        };
+      }
+      return this.snapping({
+        targetNodes,
+        position
+      });
+    });
+    const dragEndDisposer = this.dragService.onNodesDrag((event) => {
+      if (event.type !== "onDragEnd" || this._disabled) {
+        return;
+      }
+      if (this.options.enableGridSnapping) {
+        this.gridSnapping({
+          targetNodes: event.nodes,
+          gridSize: this.options.gridSize
+        });
+      }
+      if (this.options.enableEdgeSnapping) {
+        this.clear();
+      }
+    });
+    this.disposers.push(dragAdjusterDisposer, dragEndDisposer);
+  }
+  snapping(params) {
+    const { targetNodes, position } = params;
+    const targetBounds = this.getBounds(targetNodes);
+    const targetRect = new Rectangle(
+      position.x,
+      position.y,
+      targetBounds.width,
+      targetBounds.height
+    );
+    const snapNodeRects = this.getSnapNodeRects({
+      targetNodes,
+      targetRect
+    });
+    const { alignOffset, alignRects, alignSpacing } = this.calcAlignOffset({
+      targetRect,
+      alignThreshold: this.options.edgeThreshold,
+      snapNodeRects
+    });
+    const { snapOffset, snapEdgeLines } = this.calcSnapOffset({
+      targetRect,
+      edgeThreshold: this.options.edgeThreshold,
+      snapNodeRects
+    });
+    const offset = {
+      x: snapOffset.x || alignOffset.x,
+      y: snapOffset.y || alignOffset.y
+    };
+    const snapRect = new Rectangle(
+      position.x + offset.x,
+      position.y + offset.y,
+      targetRect.width,
+      targetRect.height
+    );
+    this.snapEmitter.fire({
+      snapRect,
+      snapEdgeLines,
+      alignRects,
+      alignSpacing
+    });
+    return offset;
+  }
+  calcSnapOffset(params) {
+    const { snapNodeRects, edgeThreshold, targetRect } = params;
+    const snapLines = this.getSnapLines({
+      snapNodeRects
+    });
+    const topYClosestLine = snapLines.horizontal.find(
+      (line) => isLessThanOrEqual(Math.abs(line.y - targetRect.top), edgeThreshold)
+    );
+    const bottomYClosestLine = snapLines.horizontal.find(
+      (line) => isLessThanOrEqual(Math.abs(line.y - targetRect.bottom), edgeThreshold)
+    );
+    const leftXClosestLine = snapLines.vertical.find(
+      (line) => isLessThanOrEqual(Math.abs(line.x - targetRect.left), edgeThreshold)
+    );
+    const rightXClosestLine = snapLines.vertical.find(
+      (line) => isLessThanOrEqual(Math.abs(line.x - targetRect.right), edgeThreshold)
+    );
+    const midYClosestLine = snapLines.midHorizontal.find(
+      (line) => isLessThanOrEqual(Math.abs(line.y - targetRect.center.y), edgeThreshold)
+    );
+    const midXClosestLine = snapLines.midVertical.find(
+      (line) => isLessThanOrEqual(Math.abs(line.x - targetRect.center.x), edgeThreshold)
+    );
+    const topYClosest = topYClosestLine?.y;
+    const bottomYClosest = isNumber(bottomYClosestLine?.y) ? bottomYClosestLine.y - targetRect.height : void 0;
+    const leftXClosest = leftXClosestLine?.x;
+    const rightXClosest = isNumber(rightXClosestLine?.x) ? rightXClosestLine.x - targetRect.width : void 0;
+    const midYClosest = isNumber(midYClosestLine?.y) ? midYClosestLine.y - targetRect.height / 2 : void 0;
+    const midXClosest = isNumber(midXClosestLine?.x) ? midXClosestLine.x - targetRect.width / 2 : void 0;
+    const snappingPosition = {
+      x: midXClosest ?? leftXClosest ?? rightXClosest ?? targetRect.x,
+      y: midYClosest ?? topYClosest ?? bottomYClosest ?? targetRect.y
+    };
+    const snapOffset = {
+      x: snappingPosition.x - targetRect.x,
+      y: snappingPosition.y - targetRect.y
+    };
+    const snapEdgeLines = {
+      top: isEqual(topYClosest, snappingPosition.y) ? topYClosestLine : void 0,
+      bottom: isEqual(bottomYClosest, snappingPosition.y) ? bottomYClosestLine : void 0,
+      left: isEqual(leftXClosest, snappingPosition.x) ? leftXClosestLine : void 0,
+      right: isEqual(rightXClosest, snappingPosition.x) ? rightXClosestLine : void 0,
+      midVertical: isEqual(midXClosest, snappingPosition.x) ? midXClosestLine : void 0,
+      midHorizontal: isEqual(midYClosest, snappingPosition.y) ? midYClosestLine : void 0
+    };
+    return { snapOffset, snapEdgeLines };
+  }
+  gridSnapping(params) {
+    const { gridSize, targetNodes } = params;
+    const rect = this.getBounds(targetNodes);
+    const snap = (value) => Math.round(value / gridSize) * gridSize;
+    const snappedPosition = {
+      x: snap(rect.x),
+      y: snap(rect.y)
+    };
+    const offset = {
+      x: snappedPosition.x - rect.x,
+      y: snappedPosition.y - rect.y
+    };
+    targetNodes.forEach(
+      (node) => this.updateNodePositionWithOffset({
+        node,
+        offset
+      })
+    );
+  }
+  clear() {
+    this.snapEmitter.fire({
+      snapEdgeLines: {},
+      snapRect: Rectangle.EMPTY,
+      alignRects: {
+        top: [],
+        bottom: [],
+        left: [],
+        right: []
+      },
+      alignSpacing: {}
+    });
+  }
+  getSnapLines(params) {
+    const { snapNodeRects } = params;
+    const horizontalLines = [];
+    const verticalLines = [];
+    const midHorizontalLines = [];
+    const midVerticalLines = [];
+    snapNodeRects.forEach((snapNodeRect) => {
+      const nodeBounds = snapNodeRect.rect;
+      const nodeCenter = nodeBounds.center;
+      const top = {
+        y: nodeBounds.top,
+        sourceNodeId: snapNodeRect.id
+      };
+      const bottom = {
+        y: nodeBounds.bottom,
+        sourceNodeId: snapNodeRect.id
+      };
+      const left = {
+        x: nodeBounds.left,
+        sourceNodeId: snapNodeRect.id
+      };
+      const right = {
+        x: nodeBounds.right,
+        sourceNodeId: snapNodeRect.id
+      };
+      const midHorizontal = {
+        y: nodeCenter.y,
+        sourceNodeId: snapNodeRect.id
+      };
+      const midVertical = {
+        x: nodeCenter.x,
+        sourceNodeId: snapNodeRect.id
+      };
+      horizontalLines.push(top, bottom);
+      verticalLines.push(left, right);
+      midHorizontalLines.push(midHorizontal);
+      midVerticalLines.push(midVertical);
+    });
+    return {
+      horizontal: horizontalLines,
+      vertical: verticalLines,
+      midHorizontal: midHorizontalLines,
+      midVertical: midVerticalLines
+    };
+  }
+  getAvailableNodes(params) {
+    const { targetNodes, targetRect } = params;
+    const targetCenter = targetRect.center;
+    const targetContainerId = targetNodes[0].parent?.id ?? this.document.root.id;
+    const disabledNodeIds = targetNodes.map((n) => n.id);
+    disabledNodeIds.push(FlowNodeBaseType.ROOT);
+    const availableNodes = this.nodes.filter((n) => n.parent?.id === targetContainerId).filter((n) => !disabledNodeIds.includes(n.id)).sort((nodeA, nodeB) => {
+      const nodeCenterA = nodeA.getData(FlowNodeTransformData).bounds.center;
+      const nodeCenterB = nodeB.getData(FlowNodeTransformData).bounds.center;
+      const distanceA = Math.abs(nodeCenterA.x - targetCenter.x) + Math.abs(nodeCenterA.y - targetCenter.y);
+      const distanceB = Math.abs(nodeCenterB.x - targetCenter.x) + Math.abs(nodeCenterB.y - targetCenter.y);
+      return distanceA - distanceB;
+    });
+    return availableNodes;
+  }
+  viewRect() {
+    const { width, height, scrollX, scrollY, zoom } = this.playgroundConfig.config;
+    return new Rectangle(scrollX / zoom, scrollY / zoom, width / zoom, height / zoom);
+  }
+  getSnapNodeRects(params) {
+    const availableNodes = this.getAvailableNodes(params);
+    const viewRect = this.viewRect();
+    return availableNodes.map((node) => {
+      const snapNodeRect = {
+        id: node.id,
+        rect: node.getData(FlowNodeTransformData).bounds,
+        entity: node
+      };
+      if (this.options.enableOnlyViewportSnapping && node.parent?.flowNodeType === FlowNodeBaseType.ROOT && !Rectangle.intersects(viewRect, snapNodeRect.rect)) {
+        return;
+      }
+      return snapNodeRect;
+    }).filter(Boolean);
+  }
+  get nodes() {
+    return this.entityManager.getEntities(WorkflowNodeEntity);
+  }
+  getBounds(nodes) {
+    if (nodes.length === 0) {
+      return Rectangle.EMPTY;
+    }
+    return Rectangle.enlarge(nodes.map((n) => n.getData(FlowNodeTransformData).bounds));
+  }
+  updateNodePositionWithOffset(params) {
+    const { node, offset } = params;
+    const transform = node.getData(TransformData);
+    const positionWithOffset = {
+      x: transform.position.x + offset.x,
+      y: transform.position.y + offset.y
+    };
+    transform.update({
+      position: positionWithOffset
+    });
+    this.document.layout.updateAffectedTransform(node);
+  }
+  calcAlignOffset(params) {
+    const { snapNodeRects, targetRect, alignThreshold } = params;
+    const alignRects = this.getAlignRects({
+      targetRect,
+      snapNodeRects
+    });
+    const alignSpacing = this.calcAlignSpacing({
+      targetRect,
+      alignRects
+    });
+    let topY;
+    let bottomY;
+    let leftX;
+    let rightX;
+    let midY;
+    let midX;
+    if (alignSpacing.top) {
+      const topAlignY = alignRects.top[0].rect.bottom + alignSpacing.top;
+      const isAlignTop = isLessThanOrEqual(Math.abs(targetRect.top - topAlignY), alignThreshold);
+      if (isAlignTop) {
+        topY = topAlignY;
+      } else {
+        alignSpacing.top = void 0;
+      }
+    }
+    if (alignSpacing.bottom) {
+      const bottomAlignY = alignRects.bottom[0].rect.top - alignSpacing.bottom;
+      const isAlignBottom = isLessThan(Math.abs(targetRect.bottom - bottomAlignY), alignThreshold);
+      if (isAlignBottom) {
+        bottomY = bottomAlignY - targetRect.height;
+      } else {
+        alignSpacing.bottom = void 0;
+      }
+    }
+    if (alignSpacing.left) {
+      const leftAlignX = alignRects.left[0].rect.right + alignSpacing.left;
+      const isAlignLeft = isLessThanOrEqual(Math.abs(targetRect.left - leftAlignX), alignThreshold);
+      if (isAlignLeft) {
+        leftX = leftAlignX;
+      } else {
+        alignSpacing.left = void 0;
+      }
+    }
+    if (alignSpacing.right) {
+      const rightAlignX = alignRects.right[0].rect.left - alignSpacing.right;
+      const isAlignRight = isLessThanOrEqual(
+        Math.abs(targetRect.right - rightAlignX),
+        alignThreshold
+      );
+      if (isAlignRight) {
+        rightX = rightAlignX - targetRect.width;
+      } else {
+        alignSpacing.right = void 0;
+      }
+    }
+    if (alignSpacing.midHorizontal) {
+      const leftAlignX = alignRects.left[0].rect.right + alignSpacing.midHorizontal;
+      const isAlignMidHorizontal = isLessThanOrEqual(
+        Math.abs(targetRect.left - leftAlignX),
+        alignThreshold
+      );
+      if (isAlignMidHorizontal) {
+        midX = leftAlignX;
+      } else {
+        alignSpacing.midHorizontal = void 0;
+      }
+    }
+    if (alignSpacing.midVertical) {
+      const topAlignY = alignRects.top[0].rect.bottom + alignSpacing.midVertical;
+      const isAlignMidVertical = isLessThanOrEqual(
+        Math.abs(targetRect.top - topAlignY),
+        alignThreshold
+      );
+      if (isAlignMidVertical) {
+        midY = topAlignY;
+      } else {
+        alignSpacing.midVertical = void 0;
+      }
+    }
+    const alignPosition = {
+      x: midX ?? leftX ?? rightX ?? targetRect.x,
+      y: midY ?? topY ?? bottomY ?? targetRect.y
+    };
+    const alignOffset = {
+      x: alignPosition.x - targetRect.x,
+      y: alignPosition.y - targetRect.y
+    };
+    return { alignOffset, alignRects, alignSpacing };
+  }
+  calcAlignSpacing(params) {
+    const { targetRect, alignRects } = params;
+    const topSpacing = this.getDirectionAlignSpacing({
+      rects: alignRects.top,
+      isHorizontal: false
+    });
+    const bottomSpacing = this.getDirectionAlignSpacing({
+      rects: alignRects.bottom,
+      isHorizontal: false
+    });
+    const leftSpacing = this.getDirectionAlignSpacing({
+      rects: alignRects.left,
+      isHorizontal: true
+    });
+    const rightSpacing = this.getDirectionAlignSpacing({
+      rects: alignRects.right,
+      isHorizontal: true
+    });
+    const midHorizontalSpacing = this.getMidAlignSpacing({
+      rectA: alignRects.left[0]?.rect,
+      rectB: alignRects.right[0]?.rect,
+      targetRect,
+      isHorizontal: true
+    });
+    const midVerticalSpacing = this.getMidAlignSpacing({
+      rectA: alignRects.top[0]?.rect,
+      rectB: alignRects.bottom[0]?.rect,
+      targetRect,
+      isHorizontal: false
+    });
+    return {
+      top: topSpacing,
+      bottom: bottomSpacing,
+      left: leftSpacing,
+      right: rightSpacing,
+      midHorizontal: midHorizontalSpacing,
+      midVertical: midVerticalSpacing
+    };
+  }
+  getAlignRects(params) {
+    const { targetRect, snapNodeRects } = params;
+    const topVerticalRects = [];
+    const bottomVerticalRects = [];
+    const leftHorizontalRects = [];
+    const rightHorizontalRects = [];
+    snapNodeRects.forEach((snapNodeRect) => {
+      const nodeRect = snapNodeRect.rect;
+      const { isVerticalIntersection, isHorizontalIntersection, isIntersection } = this.intersection(nodeRect, targetRect);
+      if (isIntersection) {
+        return;
+      } else if (isVerticalIntersection) {
+        if (isGreaterThan(nodeRect.center.y, targetRect.center.y)) {
+          bottomVerticalRects.push({
+            rect: nodeRect,
+            sourceNodeId: snapNodeRect.id
+          });
+        } else {
+          topVerticalRects.push({
+            rect: nodeRect,
+            sourceNodeId: snapNodeRect.id
+          });
+        }
+      } else if (isHorizontalIntersection) {
+        if (isGreaterThan(nodeRect.center.x, targetRect.center.x)) {
+          rightHorizontalRects.push({
+            rect: nodeRect,
+            sourceNodeId: snapNodeRect.id
+          });
+        } else {
+          leftHorizontalRects.push({
+            rect: nodeRect,
+            sourceNodeId: snapNodeRect.id
+          });
+        }
+      }
+    });
+    return {
+      top: topVerticalRects,
+      bottom: bottomVerticalRects,
+      left: leftHorizontalRects,
+      right: rightHorizontalRects
+    };
+  }
+  getMidAlignSpacing(params) {
+    const { rectA, rectB, targetRect, isHorizontal } = params;
+    if (!rectA || !rectB) {
+      return;
+    }
+    const { isVerticalIntersection, isHorizontalIntersection, isIntersection } = this.intersection(
+      rectA,
+      rectB
+    );
+    if (isIntersection) {
+      return;
+    }
+    if (isHorizontal && isHorizontalIntersection && !isVerticalIntersection) {
+      const betweenSpacing = Math.min(
+        Math.abs(rectA.left - rectB.right),
+        Math.abs(rectA.right - rectB.left)
+      );
+      return (betweenSpacing - targetRect.width) / 2;
+    } else if (!isHorizontal && isVerticalIntersection && !isHorizontalIntersection) {
+      const betweenSpacing = Math.min(
+        Math.abs(rectA.top - rectB.bottom),
+        Math.abs(rectA.bottom - rectB.top)
+      );
+      return (betweenSpacing - targetRect.height) / 2;
+    }
+  }
+  getDirectionAlignSpacing(params) {
+    const { rects, isHorizontal } = params;
+    if (rects.length < 2) {
+      return;
+    }
+    const rectA = rects[0].rect;
+    const rectB = rects[1].rect;
+    const { isVerticalIntersection, isHorizontalIntersection, isIntersection } = this.intersection(
+      rectA,
+      rectB
+    );
+    if (isIntersection) {
+      return;
+    }
+    if (isHorizontal && isHorizontalIntersection && !isVerticalIntersection) {
+      return Math.min(Math.abs(rectA.left - rectB.right), Math.abs(rectA.right - rectB.left));
+    } else if (!isHorizontal && isVerticalIntersection && !isHorizontalIntersection) {
+      return Math.min(Math.abs(rectA.top - rectB.bottom), Math.abs(rectA.bottom - rectB.top));
+    }
+    return;
+  }
+  intersection(rectA, rectB) {
+    const isVerticalIntersection = isLessThan(rectA.left, rectB.right) && isGreaterThan(rectA.right, rectB.left);
+    const isHorizontalIntersection = isLessThan(rectA.top, rectB.bottom) && isGreaterThan(rectA.bottom, rectB.top);
+    const isIntersection = isHorizontalIntersection && isVerticalIntersection;
+    return {
+      isHorizontalIntersection,
+      isVerticalIntersection,
+      isIntersection
+    };
+  }
+};
+__decorateClass([
+  inject(WorkflowDocument)
+], WorkflowSnapService.prototype, "document", 2);
+__decorateClass([
+  inject(EntityManager)
+], WorkflowSnapService.prototype, "entityManager", 2);
+__decorateClass([
+  inject(WorkflowDragService)
+], WorkflowSnapService.prototype, "dragService", 2);
+__decorateClass([
+  inject(PlaygroundConfigEntity)
+], WorkflowSnapService.prototype, "playgroundConfig", 2);
+WorkflowSnapService = __decorateClass([
+  injectable()
+], WorkflowSnapService);
+var WorkflowSnapLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.node = domUtils.createDivWithClass(
+      "gedit-playground-layer gedit-flow-snap-layer"
+    );
+    this.edgeLines = [];
+    this.alignLines = [];
+  }
+  onReady() {
+    this.node.style.zIndex = "9999";
+    this.toDispose.pushAll([
+      this.service.onSnap((event) => {
+        this.edgeLines = this.calcEdgeLines(event);
+        this.alignLines = this.calcAlignLines(event);
+        this.render();
+      })
+    ]);
+  }
+  render() {
+    const children = [];
+    if (this.alignLines.length > 0) {
+      children.push(
+        h("div", { class: "workflow-snap-align-lines" }, this.renderAlignLines())
+      );
+    }
+    if (this.edgeLines.length > 0) {
+      children.push(h("div", { class: "workflow-snap-edge-lines" }, this.renderEdgeLines()));
+    }
+    return h(Fragment, null, children);
+  }
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  renderEdgeLines() {
+    return this.edgeLines.map((renderLine) => {
+      const { className, sourceNode, top, left, width, height, dashed } = renderLine;
+      const id = `${className}-${sourceNode}-${top}-${left}-${width}-${height}`;
+      const isHorizontal = width < height;
+      const border = `${this.options.edgeLineWidth}px ${dashed ? "dashed" : "solid"} ${this.options.edgeColor}`;
+      return h("div", {
+        class: `workflow-snap-edge-line ${className}`,
+        "data-testid": "sdk.workflow.canvas.snap.edgeLine",
+        "data-snap-line-id": id,
+        "data-snap-line-source-node": sourceNode,
+        key: id,
+        style: {
+          top: `${top}px`,
+          left: `${left}px`,
+          width: `${width}px`,
+          height: `${height}px`,
+          position: "absolute",
+          borderLeft: isHorizontal ? border : "none",
+          borderTop: !isHorizontal ? border : "none"
+        }
+      });
+    });
+  }
+  renderAlignLines() {
+    return this.alignLines.map((renderLine) => {
+      const id = `${renderLine.className}-${renderLine.sourceNode}-${renderLine.top}-${renderLine.left}-${renderLine.width}-${renderLine.height}`;
+      const isHorizontal = isGreaterThan(renderLine.width, renderLine.height);
+      const alignLineWidth = this.options.alignLineWidth;
+      const alignCrossWidth = this.options.alignCrossWidth;
+      const adjustedTop = isHorizontal ? renderLine.top - alignLineWidth / 2 : renderLine.top;
+      const adjustedLeft = isHorizontal ? renderLine.left : renderLine.left - alignLineWidth / 2;
+      return h(
+        "div",
+        {
+          class: `workflow-snap-align-line ${renderLine.className}`,
+          "data-testid": "sdk.workflow.canvas.snap.alignLine",
+          "data-snap-line-id": id,
+          "data-snap-line-source-node": renderLine.sourceNode,
+          key: id,
+          style: {
+            position: "absolute"
+          }
+        },
+        [
+          h("div", {
+            style: {
+              position: "absolute",
+              top: `${adjustedTop}px`,
+              left: `${adjustedLeft}px`,
+              width: `${isHorizontal ? renderLine.width : alignLineWidth}px`,
+              height: `${isHorizontal ? alignLineWidth : renderLine.height}px`,
+              backgroundColor: this.options.alignColor
+            }
+          }),
+          h("div", {
+            style: {
+              position: "absolute",
+              top: `${isHorizontal ? adjustedTop - (alignCrossWidth - alignLineWidth) / 2 : adjustedTop}px`,
+              left: `${isHorizontal ? adjustedLeft : adjustedLeft - (alignCrossWidth - alignLineWidth) / 2}px`,
+              width: `${isHorizontal ? alignLineWidth : alignCrossWidth}px`,
+              height: `${isHorizontal ? alignCrossWidth : alignLineWidth}px`,
+              backgroundColor: this.options.alignColor
+            }
+          }),
+          h("div", {
+            style: {
+              position: "absolute",
+              top: `${isHorizontal ? adjustedTop - (alignCrossWidth - alignLineWidth) / 2 : adjustedTop + renderLine.height - alignLineWidth}px`,
+              left: `${isHorizontal ? adjustedLeft + renderLine.width - alignLineWidth : adjustedLeft - (alignCrossWidth - alignLineWidth) / 2}px`,
+              width: `${isHorizontal ? alignLineWidth : alignCrossWidth}px`,
+              height: `${isHorizontal ? alignCrossWidth : alignLineWidth}px`,
+              backgroundColor: this.options.alignColor
+            }
+          })
+        ]
+      );
+    });
+  }
+  calcEdgeLines(event) {
+    const { alignRects, snapRect, snapEdgeLines } = event;
+    const edgeLines = [];
+    const topFullAlign = this.directionFullAlign({
+      alignRects: alignRects.top,
+      targetRect: snapRect,
+      isVertical: true
+    });
+    const bottomFullAlign = this.directionFullAlign({
+      alignRects: alignRects.bottom,
+      targetRect: snapRect,
+      isVertical: true
+    });
+    const leftFullAlign = this.directionFullAlign({
+      alignRects: alignRects.left,
+      targetRect: snapRect,
+      isVertical: false
+    });
+    const rightFullAlign = this.directionFullAlign({
+      alignRects: alignRects.right,
+      targetRect: snapRect,
+      isVertical: false
+    });
+    if (topFullAlign) {
+      const top = topFullAlign.rect.top;
+      const height = bottomFullAlign ? snapRect.bottom - snapRect.height / 2 - top : snapRect.bottom - top;
+      const width = this.options.edgeLineWidth;
+      const lineData = {
+        top,
+        width,
+        height
+      };
+      edgeLines.push({
+        className: "edge-full-top-left",
+        sourceNode: topFullAlign.sourceNodeId,
+        left: snapRect.left,
+        ...lineData
+      });
+      edgeLines.push({
+        className: "edge-full-top-right",
+        sourceNode: topFullAlign.sourceNodeId,
+        left: snapRect.right - 1,
+        ...lineData
+      });
+      edgeLines.push({
+        className: "edge-full-top-mid",
+        sourceNode: topFullAlign.sourceNodeId,
+        left: snapRect.left + snapRect.width / 2,
+        dashed: true,
+        ...lineData
+      });
+    }
+    if (bottomFullAlign) {
+      const top = topFullAlign ? snapRect.top + snapRect.height / 2 : snapRect.top;
+      const height = bottomFullAlign.rect.bottom - top;
+      const width = this.options.edgeLineWidth;
+      const lineData = {
+        top,
+        width,
+        height
+      };
+      edgeLines.push({
+        className: "edge-full-bottom-left",
+        sourceNode: bottomFullAlign.sourceNodeId,
+        left: snapRect.left,
+        ...lineData
+      });
+      edgeLines.push({
+        className: "edge-full-bottom-right",
+        sourceNode: bottomFullAlign.sourceNodeId,
+        left: snapRect.right - 1,
+        ...lineData
+      });
+      edgeLines.push({
+        className: "edge-full-bottom-mid",
+        sourceNode: bottomFullAlign.sourceNodeId,
+        left: snapRect.left + snapRect.width / 2,
+        dashed: true,
+        ...lineData
+      });
+    }
+    if (leftFullAlign) {
+      const left = leftFullAlign.rect.left;
+      const width = rightFullAlign ? snapRect.right - snapRect.width / 2 - left : snapRect.right - left;
+      const height = this.options.edgeLineWidth;
+      const lineData = {
+        left,
+        width,
+        height
+      };
+      edgeLines.push({
+        className: "edge-full-left-top",
+        sourceNode: leftFullAlign.sourceNodeId,
+        top: snapRect.top,
+        ...lineData
+      });
+      edgeLines.push({
+        className: "edge-full-left-bottom",
+        sourceNode: leftFullAlign.sourceNodeId,
+        top: snapRect.bottom - 1,
+        ...lineData
+      });
+      edgeLines.push({
+        className: "edge-full-left-mid",
+        sourceNode: leftFullAlign.sourceNodeId,
+        top: snapRect.top + snapRect.height / 2,
+        dashed: true,
+        ...lineData
+      });
+    }
+    if (rightFullAlign) {
+      const left = leftFullAlign ? snapRect.left + snapRect.width / 2 : snapRect.left;
+      const width = rightFullAlign.rect.right - left;
+      const height = this.options.edgeLineWidth;
+      const lineData = {
+        left,
+        width,
+        height
+      };
+      edgeLines.push({
+        className: "edge-full-right-top",
+        sourceNode: rightFullAlign.sourceNodeId,
+        top: snapRect.top,
+        ...lineData
+      });
+      edgeLines.push({
+        className: "edge-full-right-bottom",
+        sourceNode: rightFullAlign.sourceNodeId,
+        top: snapRect.bottom - 1,
+        ...lineData
+      });
+      edgeLines.push({
+        className: "edge-full-right-mid",
+        sourceNode: rightFullAlign.sourceNodeId,
+        top: snapRect.top + snapRect.height / 2,
+        dashed: true,
+        ...lineData
+      });
+    }
+    const snappedEdgeLines = Object.entries(snapEdgeLines).map(([direction, snapLine]) => {
+      if (!snapLine) {
+        return;
+      }
+      const sourceNode = this.document.getNode(snapLine.sourceNodeId);
+      if (!sourceNode) {
+        return;
+      }
+      const nodeRect = sourceNode.getData(FlowNodeTransformData).bounds;
+      if (isNumber(snapLine.x)) {
+        const top = Math.min(nodeRect.top, snapRect.top);
+        const bottom = Math.max(nodeRect.bottom, snapRect.bottom);
+        const height = bottom - top;
+        const left = direction === "right" ? snapLine.x - 1 : snapLine.x;
+        const width = this.options.edgeLineWidth;
+        const isMidX = direction === "midVertical";
+        const lineData = {
+          className: `edge-snapped-${direction}`,
+          sourceNode: snapLine.sourceNodeId,
+          top,
+          left,
+          width,
+          height,
+          dashed: isMidX
+        };
+        const onTop = top === nodeRect.top;
+        if (onTop && topFullAlign) {
+          return;
+        }
+        if (!onTop && bottomFullAlign) {
+          return;
+        }
+        return lineData;
+      } else if (isNumber(snapLine.y)) {
+        const left = Math.min(nodeRect.left, snapRect.left);
+        const right = Math.max(nodeRect.right, snapRect.right);
+        const width = right - left;
+        const top = direction === "bottom" ? snapLine.y - 1 : snapLine.y;
+        const height = this.options.edgeLineWidth;
+        const isMidY = direction === "midHorizontal";
+        const lineData = {
+          className: `edge-snapped-${direction}`,
+          sourceNode: snapLine.sourceNodeId,
+          top,
+          left,
+          width,
+          height,
+          dashed: isMidY
+        };
+        const onLeft = left === nodeRect.left;
+        if (onLeft && leftFullAlign) {
+          return;
+        }
+        if (!onLeft && rightFullAlign) {
+          return;
+        }
+        return lineData;
+      }
+    }).filter(Boolean);
+    edgeLines.push(...snappedEdgeLines);
+    return edgeLines;
+  }
+  directionFullAlign(params) {
+    const { alignRects, targetRect, isVertical } = params;
+    let fullAlignIndex = -1;
+    for (let i = 0; i < alignRects.length; i++) {
+      const alignRect = alignRects[i];
+      const prevRect = alignRects[i - 1]?.rect ?? targetRect;
+      const isFullAlign = this.rectFullAlign(alignRect.rect, prevRect, isVertical);
+      if (!isFullAlign) {
+        break;
+      }
+      fullAlignIndex = i;
+    }
+    const fullAlignRect = alignRects[fullAlignIndex];
+    return fullAlignRect;
+  }
+  rectFullAlign(rectA, rectB, isVertical) {
+    if (isVertical) {
+      return isEqual(rectA.left, rectB.left) && isEqual(rectA.right, rectB.right);
+    } else {
+      return isEqual(rectA.top, rectB.top) && isEqual(rectA.bottom, rectB.bottom);
+    }
+  }
+  calcAlignLines(event) {
+    const { alignRects, alignSpacing, snapRect } = event;
+    const topAlignLines = this.calcDirectionAlignLines({
+      alignRects: alignRects.top,
+      targetRect: snapRect,
+      isVertical: true,
+      spacing: alignSpacing.midVertical ?? alignSpacing.top
+    });
+    const bottomAlignLines = this.calcDirectionAlignLines({
+      alignRects: alignRects.bottom,
+      targetRect: snapRect,
+      isVertical: true,
+      spacing: alignSpacing.midVertical ?? alignSpacing.bottom
+    });
+    const leftAlignLines = this.calcDirectionAlignLines({
+      alignRects: alignRects.left,
+      targetRect: snapRect,
+      isVertical: false,
+      spacing: alignSpacing.midHorizontal ?? alignSpacing.left
+    });
+    const rightAlignLines = this.calcDirectionAlignLines({
+      alignRects: alignRects.right,
+      targetRect: snapRect,
+      isVertical: false,
+      spacing: alignSpacing.midHorizontal ?? alignSpacing.right
+    });
+    return [...topAlignLines, ...bottomAlignLines, ...leftAlignLines, ...rightAlignLines];
+  }
+  calcDirectionAlignLines(params) {
+    const { alignRects, targetRect, isVertical, spacing } = params;
+    const alignLines = [];
+    if (!spacing) {
+      return alignLines;
+    }
+    for (let i = 0; i < alignRects.length; i++) {
+      const alignRect = alignRects[i];
+      const rect = alignRect.rect;
+      const prevRect = alignRects[i - 1]?.rect ?? targetRect;
+      const betweenSpacing = isVertical ? Math.min(Math.abs(prevRect.top - rect.bottom), Math.abs(prevRect.bottom - rect.top)) : Math.min(Math.abs(prevRect.left - rect.right), Math.abs(prevRect.right - rect.left));
+      if (!isEqual(betweenSpacing, spacing)) {
+        break;
+      }
+      if (isVertical) {
+        const centerX = this.calcHorizontalIntersectionCenter(rect, targetRect);
+        alignLines.push({
+          className: "align-vertical",
+          sourceNode: alignRect.sourceNodeId,
+          top: Math.min(rect.bottom, prevRect.bottom),
+          left: centerX,
+          width: 1,
+          height: spacing
+        });
+      } else {
+        const centerY = this.calcVerticalIntersectionCenter(rect, targetRect);
+        alignLines.push({
+          className: "align-horizontal",
+          sourceNode: alignRect.sourceNodeId,
+          top: centerY,
+          left: Math.min(rect.right, prevRect.right),
+          width: spacing,
+          height: 1
+        });
+      }
+    }
+    return alignLines;
+  }
+  calcVerticalIntersectionCenter(rectA, rectB) {
+    const top = Math.max(rectA.top, rectB.top);
+    const bottom = Math.min(rectA.bottom, rectB.bottom);
+    return (top + bottom) / 2;
+  }
+  calcHorizontalIntersectionCenter(rectA, rectB) {
+    const left = Math.max(rectA.left, rectB.left);
+    const right = Math.min(rectA.right, rectB.right);
+    return (left + right) / 2;
+  }
+};
+WorkflowSnapLayer.type = "WorkflowSnapLayer";
+__decorateClass([
+  inject(WorkflowDocument)
+], WorkflowSnapLayer.prototype, "document", 2);
+__decorateClass([
+  inject(WorkflowSnapService)
+], WorkflowSnapLayer.prototype, "service", 2);
+WorkflowSnapLayer = __decorateClass([
+  injectable()
+], WorkflowSnapLayer);
+
+// src/create-plugin.ts
+var createFreeSnapPlugin = definePluginCreator({
+  onBind({ bind }) {
+    bind(WorkflowSnapService).toSelf().inSingletonScope();
+  },
+  onInit(ctx, opts) {
+    const options = {
+      ...SnapDefaultOptions,
+      ...opts
+    };
+    ctx.playground.registerLayer(WorkflowSnapLayer, options);
+    const snapService = ctx.get(WorkflowSnapService);
+    snapService.init(options);
+  },
+  onDispose(ctx) {
+    const snapService = ctx.get(WorkflowSnapService);
+    snapService.dispose();
+  }
+});
+
+export { WorkflowSnapService, createFreeSnapPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map