@logicflow/core 1.2.27 → 2.0.0-beta.0

package/__tests__/util/edge.test.ts

@@ -0,0 +1,224 @@
+import {
+  isBboxOverLapping,
+  mergeBBox,
+  isPointOutsideBBox,
+  isSegmentCrossingBBox,
+  getLongestEdge,
+  getSimplePolyline,
+  pointDirection,
+  getBBoxCrossPointsByPoint,
+  isSegmentsInNode,
+  isSegmentsCrossNode,
+  getCrossPointInRect,
+  segmentDirection,
+} from '../../src/util/edge';
+
+describe('util/edge', () => {
+  test('is bbox overlapping', () => {
+    const bbox1 = {
+      centerX: 1,
+      centerY: 1,
+      width: 2,
+      height: 2,
+    };
+    const bbox2 = {
+      centerX: 2,
+      centerY: 2,
+      width: 2,
+      height: 2,
+    };
+    expect(isBboxOverLapping(bbox1, bbox2)).toBeTruthy();
+
+    const bbox3 = {
+      centerX: 3,
+      centerY: 3,
+      width: 2,
+      height: 2,
+    };
+    expect(isBboxOverLapping(bbox1, bbox3)).toBeFalsy();
+  });
+  test('filter repeat points', () => {
+    const sPoint1 = {
+      x: 0,
+      y: 0,
+    };
+    const tPoint1 = {
+      x: 10,
+      y: 10,
+    };
+    expect(getSimplePolyline(sPoint1, tPoint1)).toEqual([
+      { x: 0, y: 0, id: '0-0' },
+      { x: 0, y: 10, id: '0-10' },
+      { x: 10, y: 10, id: '10-10' },
+    ]);
+
+    const sPoint2 = {
+      x: 0,
+      y: 0,
+    };
+    const tPoint2 = {
+      x: 0,
+      y: 10,
+    };
+    expect(getSimplePolyline(sPoint2, tPoint2)).toEqual([
+      { x: 0, y: 0, id: '0-0' },
+      { x: 0, y: 10, id: '0-10' },
+    ]);
+  });
+  test('merge two BBoxes', () => {
+    const bbox1 = {
+      minX: 0,
+      minY: 0,
+      maxX: 2,
+      maxY: 2,
+    };
+    const bbox2 = {
+      minX: 1,
+      minY: 1,
+      maxX: 3,
+      maxY: 3,
+    };
+    expect(mergeBBox(bbox1, bbox2)).toEqual({
+      minX: 0,
+      minY: 0,
+      maxX: 3,
+      maxY: 3,
+      centerX: 1.5,
+      centerY: 1.5,
+      width: 3,
+      height: 3,
+    });
+  });
+  test('get direction of two points', () => {
+    const point = {
+      x: 0,
+      y: 0,
+    };
+    const bbox1 = {
+      width: 2,
+      height: 4,
+      centerX: 1,
+      centerY: 1,
+    };
+    const bbox2 = {
+      width: 4,
+      height: 2,
+      centerX: 1,
+      centerY: 1,
+    };
+    expect(pointDirection(point, bbox1)).toEqual('horizontal');
+    expect(pointDirection(point, bbox2)).toEqual('vertical');
+  });
+  test('is point inside the bbox', () => {
+    const bbox = {
+      minX: 0,
+      minY: 0,
+      maxX: 2,
+      maxY: 2,
+    };
+    expect(isPointOutsideBBox({ x: 1, y: 1 }, bbox)).toBeFalsy();
+    expect(isPointOutsideBBox({ x: 3, y: 3 }, bbox)).toBeTruthy();
+  });
+  test('get cross points of bbox and point', () => {
+    const bbox = {
+      minX: 0,
+      minY: 0,
+      maxX: 2,
+      maxY: 2,
+    };
+    const point1 = {
+      x: 1,
+      y: 1,
+    };
+    const point2 = {
+      x: 3,
+      y: 3,
+    };
+    expect(getBBoxCrossPointsByPoint(bbox, point1)).toEqual([
+      { x: 1, y: 0 },
+      { x: 1, y: 2 },
+      { x: 0, y: 1 },
+      { x: 2, y: 1 },
+    ]);
+    expect(getBBoxCrossPointsByPoint(bbox, point2)).toEqual([]);
+  });
+  test('is segment cross the bbox', () => {
+    const bbox = {
+      minX: 0,
+      minY: 0,
+      maxX: 2,
+      maxY: 2,
+    };
+    expect(
+      isSegmentCrossingBBox({ x: 1, y: 1 }, { x: 3, y: 3 }, bbox),
+    ).toBeTruthy();
+    expect(
+      isSegmentCrossingBBox({ x: 3, y: 3 }, { x: 4, y: 4 }, bbox),
+    ).toBeFalsy();
+  });
+  test('get longest edge', () => {
+    const points = [
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+      { x: 2, y: 2 },
+    ];
+    expect(getLongestEdge(points)).toEqual([
+      { x: 0, y: 0 },
+      { x: 1, y: 1 },
+    ]);
+  });
+
+  const segment1 = [
+    {
+      x: 0,
+      y: 0,
+    },
+    {
+      x: 0,
+      y: 10,
+    },
+  ];
+  const segment2 = [
+    {
+      x: -30,
+      y: 0,
+    },
+    {
+      x: 30,
+      y: 0,
+    },
+  ];
+  const bbox = {
+    x: 0,
+    y: 0,
+    width: 20,
+    height: 20,
+  };
+  test('is segments in node', () => {
+    expect(isSegmentsInNode(segment1[0], segment1[1], bbox)).toBeTruthy();
+    expect(isSegmentsInNode(segment2[0], segment2[1], bbox)).toBeFalsy();
+  });
+  test('is segments cross node', () => {
+    expect(isSegmentsCrossNode(segment1[0], segment1[1], bbox)).toBeFalsy();
+    expect(isSegmentsCrossNode(segment2[0], segment1[0], bbox)).toBeTruthy();
+  });
+  test('get cross point in rect', () => {
+    expect(getCrossPointInRect(segment1[0], segment1[1], bbox)).toEqual({
+      x: 0,
+      y: 10,
+    });
+    expect(getCrossPointInRect(segment2[0], segment2[1], bbox)).toEqual({
+      x: -10,
+      y: 0,
+    });
+  });
+  test('segment direction', () => {
+    expect(segmentDirection(segment1[0], segment1[1])).toEqual('vertical');
+    expect(
+      segmentDirection(segment1[0], {
+        x: 10,
+        y: 0,
+      }),
+    ).toEqual('horizontal');
+  });
+});

package/__tests__/util/geometry.test.ts

@@ -0,0 +1,14 @@
+import { snapToGrid, getGridOffset } from '../../src/util';
+
+describe('util/geometry', () => {
+  test('snapToGrid', () => {
+    const point = 2.5;
+    const grid = 1.5;
+    expect(snapToGrid(point, grid) - 3 < Number.EPSILON).toBeTruthy();
+  });
+  test('getGridOffset', () => {
+    const distance = 3;
+    const grid = 1.5;
+    expect(getGridOffset(distance, grid) - 2 < Number.EPSILON).toBeTruthy();
+  });
+});

package/__tests__/util/graph.test.ts

@@ -0,0 +1,16 @@
+import { isPointInArea } from '../../src/util/graph';
+
+describe('util/graph', () => {
+  test('if element is in an area, truthy', () => {
+    const point: [number, number] = [1, 1];
+    const leftTopPoint: [number, number] = [0, 0];
+    const rightBottomPoint: [number, number] = [2, 2];
+    expect(isPointInArea(point, leftTopPoint, rightBottomPoint)).toBeTruthy();
+  });
+  test('if element is in an area, falsy', () => {
+    const point: [number, number] = [1, 1];
+    const leftTopPoint: [number, number] = [2, 2];
+    const rightBottomPoint: [number, number] = [4, 4];
+    expect(isPointInArea(point, leftTopPoint, rightBottomPoint)).toBeFalsy();
+  });
+});

package/__tests__/util/matrix.test.ts

@@ -0,0 +1,41 @@
+import { Matrix } from '../../src/util/matrix';
+
+describe('util/matrix', () => {
+  test('construct', () => {
+    const m = new Matrix([1, 2, 3], [4, 5, 6], [7, 8, 9]);
+    expect(m[0]).toEqual([1, 2, 3]);
+    expect(m[1]).toEqual([4, 5, 6]);
+    expect(m[2]).toEqual([7, 8, 9]);
+  });
+  test('cross', () => {
+    const m = new Matrix([1, 2, 3], [4, 5, 6], [7, 8, 9]);
+    const n = new Matrix([9, 8, 7], [6, 5, 4], [3, 2, 1]);
+    expect(m.cross(n)).toEqual(
+      new Matrix([30, 24, 18], [84, 69, 54], [138, 114, 90]),
+    );
+  });
+  test('transpose', () => {
+    const m = new Matrix([1, 2, 3], [4, 5, 6], [7, 8, 9]);
+    expect(m.transpose()).toEqual(new Matrix([1, 4, 7], [2, 5, 8], [3, 6, 9]));
+  });
+  test('translate', () => {
+    const m = new Matrix([1, 0, 0], [0, 1, 0], [0, 0, 1]);
+    expect(m.translate(2, 3)).toEqual(
+      new Matrix([1, 0, 0], [0, 1, 0], [2, 3, 1]),
+    );
+  });
+  test('rotate', () => {
+    const m = new Matrix([1, 0, 0], [0, 1, 0], [0, 0, 1]);
+    expect(m.rotate(Math.PI / 2)).toEqual(
+      new Matrix([0, 1, 0], [-1, 0, 0], [0, 0, 1]),
+    );
+  });
+  test('scale', () => {
+    const m = new Matrix([1, 0, 0], [0, 1, 0], [0, 0, 1]);
+    expect(m.scale(2, 3)).toEqual(new Matrix([2, 0, 0], [0, 3, 0], [0, 0, 1]));
+  });
+  test('toString', () => {
+    const m = new Matrix([1, 0, 0], [0, 1, 0], [1, 1, 1]);
+    expect(m.toString()).toEqual('matrix(1 0 0 1 1 1)');
+  });
+});

package/__tests__/util/node.test.ts

@@ -0,0 +1,68 @@
+import {
+  getClosestAnchor,
+  isInNode,
+  getCrossPointWithCircle,
+  getCrossPointWithEllipse,
+} from '../../src/util/node';
+
+describe('util/node', () => {
+  test('get closest anchor', () => {
+    const position = { x: 0, y: 0 };
+    const node = {
+      anchors: [
+        { x: 0, y: 0, id: '1' },
+        { x: 1, y: 1, id: '2' },
+        { x: 2, y: 2, id: '3' },
+      ],
+    };
+    expect(getClosestAnchor(position, node)).toEqual({
+      anchor: { x: 0, y: 0, id: '1' },
+      index: 0,
+    });
+  });
+  test('is point inside the node', () => {
+    const position1 = { x: 0, y: 0 };
+    const position2 = { x: 110, y: 110 };
+    const node = {
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+    };
+    expect(isInNode(position1, node)).toBeTruthy();
+    expect(isInNode(position2, node)).toBeFalsy();
+  });
+  test('get cross point with circle', () => {
+    const position = { x: 0, y: 0 };
+    const node = {
+      x: 0,
+      y: 0,
+      r: 10,
+    };
+    expect(getCrossPointWithCircle(position, 'horizontal', node)).toEqual({
+      x: 10,
+      y: 0,
+    });
+    expect(getCrossPointWithCircle(position, 'vertical', node)).toEqual({
+      x: 0,
+      y: 10,
+    });
+  });
+  test('get cross point with ellipse', () => {
+    const position = { x: 0, y: 0 };
+    const node = {
+      x: 0,
+      y: 0,
+      rx: 10,
+      ry: 5,
+    };
+    expect(getCrossPointWithEllipse(position, 'horizontal', node)).toEqual({
+      x: 10,
+      y: 0,
+    });
+    expect(getCrossPointWithEllipse(position, 'vertical', node)).toEqual({
+      x: 0,
+      y: 5,
+    });
+  });
+});

package/__tests__/util/sampling.test.ts

@@ -0,0 +1,16 @@
+import {
+  degrees,
+  getThetaOfVector,
+  Vector,
+} from '../../src/util';
+
+describe('util/sampling', () => {
+  test('degrees', () => {
+    expect(degrees(1)).toBe(57.29577951308232);
+  });
+  test('getThetaOfVector', () => {
+    expect(
+      getThetaOfVector(new Vector(1, 1)) - 45 < Number.EPSILON,
+    ).toBeTruthy();
+  });
+});

package/__tests__/util/vector.test.ts

@@ -0,0 +1,50 @@
+import { Vector } from '../../src/util/vector';
+
+describe('util/vector', () => {
+  test('construct', () => {
+    const v = new Vector(1, 2);
+    expect(v.x).toEqual(1);
+    expect(v[0]).toEqual(1);
+
+    expect(v.y).toEqual(2);
+    expect(v[1]).toEqual(2);
+
+    expect(v.z).toEqual(0);
+    expect(v[2]).toEqual(0);
+  });
+  test('add', () => {
+    const v = new Vector(1, 2);
+    const v1 = new Vector(3, 4);
+    expect(v.add(v1)).toEqual(new Vector(4, 6));
+  });
+  test('subtract', () => {
+    const v = new Vector(1, 2);
+    const v1 = new Vector(3, 4);
+    expect(v.subtract(v1)).toEqual(new Vector(-2, -2));
+  });
+  test('dot', () => {
+    const v = new Vector(1, 2);
+    const v1 = new Vector(3, 4);
+    expect(v.dot(v1)).toEqual(11);
+  });
+  test('cross', () => {
+    const v = new Vector(1, 2);
+    const v1 = new Vector(3, 4);
+    expect(v.cross(v1)).toEqual(new Vector(0, 0, -2));
+  });
+  test('getLength', () => {
+    const v = new Vector(1, 2);
+    expect(v.getLength()).toEqual(Math.sqrt(5));
+  });
+  test('normalize', () => {
+    const v = new Vector(1, 2);
+    expect(v.normalize()).toEqual(
+      new Vector(1 / Math.sqrt(5), 2 / Math.sqrt(5)),
+    );
+  });
+  test('angle', () => {
+    const v = new Vector(1, 1);
+    const v1 = new Vector(0, 1);
+    expect(v.angle(v1) - Math.PI / 4 < Number.EPSILON).toBeTruthy();
+  });
+});

package/__tests__/util/zIndex.test.ts

@@ -0,0 +1,10 @@
+import { getZIndex, getMinIndex } from '../../src/util/zIndex';
+
+describe('util/zIndex', () => {
+  test('getZIndex', () => {
+    expect(getZIndex()).toBe(1001);
+  });
+  test('getMinIndex', () => {
+    expect(getMinIndex()).toBe(998);
+  });
+});

package/dist/{style/index.css → index.css}

@@ -1,9 +1,9 @@
 .lf-graph {
   position: relative;
+  z-index: 0;
   width: 100%;
   height: 100%;
-  z-index: 0;
-  background: #ffffff;
+  background: #fff;
   user-select: none;
 }
 .lf-element-text {
@@ -43,7 +43,6 @@
 .lf-node-not-allow {
   cursor: not-allowed;
 }
-
 .lf-polyline-append-ns-resize {
   cursor: ns-resize;
 }
@@ -51,9 +50,12 @@
   cursor: ew-resize;
 }
 .lf-dragging {
-  cursor: grabbing;
+  cursor: move;
+}
+.lf-dragging .lf-element-text {
+  cursor: move;
 }
-.lf-drag-able {
+.lf-draggable {
   cursor: default;
 }
 .lf-bezier-adjust-anchor {
@@ -63,10 +65,7 @@
 .lf-background,
 .lf-grid {
   position: absolute;
-  left: 0px;
-  top: 0px;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: -1;
 }
 .lf-background-area {
@@ -76,123 +75,136 @@
 /* html-overlay */
 .lf-html-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 1;
-  pointer-events: none;
   overflow: hidden;
   user-select: none;
+  pointer-events: none;
 }
 .lf-html-overlay__transform > * {
   pointer-events: all;
 }
-
 .lf-text-editable {
   pointer-events: all;
 }
 .lf-text-input {
-  text-align: center;
-  outline: none;
   position: absolute;
-  border: 1px solid #edefed;
   box-sizing: border-box;
-  line-height: 1.2;
-  border-radius: 3px;
-  resize: none;
-  padding: 5px;
-  min-height: 20px;
   min-width: 100px;
+  min-height: 20px;
+  padding: 5px;
+  line-height: 1.2;
   white-space: pre;
+  text-align: center;
   background: #fff;
+  border: 1px solid #edefed;
+  border-radius: 3px;
+  outline: none;
   transform: translate(-50%, -50%);
+  resize: none;
 }
 .lf-get-text-height {
   display: inline-block;
+  box-sizing: border-box;
   word-break: break-all;
   /* 为了跟输入效果保持一致，设置透明边框占位 */
   border: 1px solid transparent;
-  box-sizing: border-box;
 }
 .lf-node-text-auto-wrap {
-  box-sizing: border-box;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   /* border: 1px solid transparent; */
 }
 .lf-node-text-auto-wrap-content {
+  width: 100%;
   line-height: 1.2;
-  background: transparent;
   text-align: center;
   word-break: break-all;
-  width: 100%;
+  background: transparent;
 }
 .lf-node-text-ellipsis-content {
+  width: 100%;
   line-height: 1.2;
-  background: transparent;
-  text-align: center;
   white-space: nowrap;
+  text-align: center;
+  background: transparent;
   /* overflow: hidden;
   text-overflow: ellipsis; */
-  width: 100%;
 }
-.lf-node-text-ellipsis-content>div{
-  text-overflow: ellipsis;
+.lf-node-text-ellipsis-content > div {
   overflow: hidden;
+  text-overflow: ellipsis;
 }
 /* tool-overlay */
 .lf-tool-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 2;
-  pointer-events: none;
   overflow: hidden;
+  pointer-events: none;
 }
 .lf-tool-overlay > * {
   pointer-events: all;
 }
 /* modification-overlay */
-
 .modification-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 1;
-  pointer-events: none;
   overflow: hidden;
+  pointer-events: none;
 }
 .modification-overlay > * {
   pointer-events: all;
 }
-.lf-outline,.lf-snapline {
+.lf-outline,
+.lf-snapline {
   pointer-events: none;
 }
-
 .lf-keyboard-tips {
   float: right;
 }
 .lf-node-select-decorate {
+  position: absolute;
+  border: 1px dashed #343435;
   transform: translate(-50%, -50%);
   pointer-events: none;
-  border: 1px dashed #343435;
-  position: absolute;
 }
 .lf-multiple-select {
   position: absolute;
-  border: 2px dashed rgba(24, 125, 255, 0.8);
-  box-shadow: 0px 0px 3px 0px rgba(24, 125, 255, 0.5);
+  border: 2px dashed #187dffcc;
+  box-shadow: 0 0 3px 0 #187dff80;
   cursor: move;
 }
 .lf-edge-adjust-point {
   cursor: move;
 }
-.lf-rotate{
+.lf-rotate-control {
   cursor: grabbing;
-}
+}
+.lf-resize-control-nw {
+  cursor: nw-resize;
+}
+.lf-resize-control-n {
+  cursor: n-resize;
+}
+.lf-resize-control-ne {
+  cursor: ne-resize;
+}
+.lf-resize-control-e {
+  cursor: e-resize;
+}
+.lf-resize-control-se {
+  cursor: se-resize;
+}
+.lf-resize-control-s {
+  cursor: s-resize;
+}
+.lf-resize-control-sw {
+  cursor: sw-resize;
+}
+.lf-resize-control-w {
+  cursor: w-resize;
+}