@flowgram.ai/free-lines-plugin 0.3.6 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +125 -323
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +8 -59
- package/dist/index.d.ts +8 -59
- package/dist/index.js +137 -335
- package/dist/index.js.map +1 -1
- package/package.json +9 -9
package/dist/esm/index.js
CHANGED
|
@@ -345,7 +345,7 @@ function ArrowRenderer({
|
|
|
345
345
|
var PADDING = 12;
|
|
346
346
|
var LineSVG = (props) => {
|
|
347
347
|
const { line, color, selected, children, strokePrefix, rendererRegistry } = props;
|
|
348
|
-
const { position, reverse,
|
|
348
|
+
const { position, reverse, hideArrow, vertical } = line;
|
|
349
349
|
const renderData = line.getData(WorkflowLineRenderData);
|
|
350
350
|
const { bounds, path: bezierPath } = renderData;
|
|
351
351
|
const toRelative = (p) => ({
|
|
@@ -354,9 +354,9 @@ var LineSVG = (props) => {
|
|
|
354
354
|
});
|
|
355
355
|
const fromPos = toRelative(position.from);
|
|
356
356
|
const toPos = toRelative(position.to);
|
|
357
|
-
const arrowToPos =
|
|
358
|
-
const arrowFromPos =
|
|
359
|
-
const strokeWidth = selected ? STROKE_WIDTH_SLECTED : STROKE_WIDTH;
|
|
357
|
+
const arrowToPos = position.to.location === "top" ? { x: toPos.x, y: toPos.y - POINT_RADIUS } : { x: toPos.x - POINT_RADIUS, y: toPos.y };
|
|
358
|
+
const arrowFromPos = position.from.location === "bottom" ? { x: fromPos.x, y: fromPos.y + POINT_RADIUS + LINE_OFFSET } : { x: fromPos.x + POINT_RADIUS + LINE_OFFSET, y: fromPos.y };
|
|
359
|
+
const strokeWidth = selected ? line.uiState.strokeWidthSelected ?? STROKE_WIDTH_SLECTED : line.uiState.strokeWidth ?? STROKE_WIDTH;
|
|
360
360
|
const strokeID = strokePrefix ? `${strokePrefix}-${line.id}` : line.id;
|
|
361
361
|
const CustomArrowRenderer = rendererRegistry?.tryToGetRendererComponent("arrow-renderer")?.renderer;
|
|
362
362
|
const ArrowComponent = CustomArrowRenderer || ArrowRenderer;
|
|
@@ -367,10 +367,10 @@ var LineSVG = (props) => {
|
|
|
367
367
|
fill: "none",
|
|
368
368
|
stroke: `url(#${strokeID})`,
|
|
369
369
|
strokeWidth,
|
|
370
|
+
style: line.uiState.style,
|
|
370
371
|
className: clsx(
|
|
371
372
|
line.className,
|
|
372
|
-
|
|
373
|
-
!line.className && (line.processing || line.flowing ? "dashed-line flowing-line" : "")
|
|
373
|
+
line.processing || line.flowing ? "dashed-line flowing-line" : ""
|
|
374
374
|
)
|
|
375
375
|
}
|
|
376
376
|
);
|
|
@@ -559,145 +559,70 @@ WorkflowLinesLayer = __decorateClass([
|
|
|
559
559
|
injectable()
|
|
560
560
|
], WorkflowLinesLayer);
|
|
561
561
|
|
|
562
|
+
// src/contributions/bezier/index.ts
|
|
563
|
+
import { Bezier } from "bezier-js";
|
|
564
|
+
import { Point, Rectangle } from "@flowgram.ai/utils";
|
|
565
|
+
import { LineType } from "@flowgram.ai/free-layout-core";
|
|
566
|
+
|
|
562
567
|
// src/contributions/bezier/bezier-controls.ts
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
BezierControlType2[BezierControlType2["RIGHT_BOTTOM"] = 1] = "RIGHT_BOTTOM";
|
|
567
|
-
BezierControlType2[BezierControlType2["LEFT_TOP"] = 2] = "LEFT_TOP";
|
|
568
|
-
BezierControlType2[BezierControlType2["LEFT_BOTTOM"] = 3] = "LEFT_BOTTOM";
|
|
569
|
-
return BezierControlType2;
|
|
570
|
-
})(BezierControlType || {});
|
|
571
|
-
var CONTROL_MAX = 300;
|
|
572
|
-
function getBezierHorizontalControlPoints(fromPos, toPos) {
|
|
573
|
-
const rect = Rectangle.createRectangleWithTwoPoints(fromPos, toPos);
|
|
574
|
-
let type;
|
|
575
|
-
if (fromPos.x <= toPos.x) {
|
|
576
|
-
type = fromPos.y <= toPos.y ? 1 /* RIGHT_BOTTOM */ : 0 /* RIGHT_TOP */;
|
|
577
|
-
} else {
|
|
578
|
-
type = fromPos.y <= toPos.y ? 3 /* LEFT_BOTTOM */ : 2 /* LEFT_TOP */;
|
|
579
|
-
}
|
|
580
|
-
let controls;
|
|
581
|
-
switch (type) {
|
|
582
|
-
case 0 /* RIGHT_TOP */:
|
|
583
|
-
controls = [
|
|
584
|
-
{
|
|
585
|
-
x: rect.rightBottom.x - rect.width / 2,
|
|
586
|
-
y: rect.rightBottom.y
|
|
587
|
-
},
|
|
588
|
-
{
|
|
589
|
-
x: rect.leftTop.x + rect.width / 2,
|
|
590
|
-
y: rect.leftTop.y
|
|
591
|
-
}
|
|
592
|
-
];
|
|
593
|
-
break;
|
|
594
|
-
case 1 /* RIGHT_BOTTOM */:
|
|
595
|
-
controls = [
|
|
596
|
-
{
|
|
597
|
-
x: rect.rightTop.x - rect.width / 2,
|
|
598
|
-
y: rect.rightTop.y
|
|
599
|
-
},
|
|
600
|
-
{
|
|
601
|
-
x: rect.leftBottom.x + rect.width / 2,
|
|
602
|
-
y: rect.leftBottom.y
|
|
603
|
-
}
|
|
604
|
-
];
|
|
605
|
-
break;
|
|
606
|
-
case 2 /* LEFT_TOP */:
|
|
607
|
-
controls = [
|
|
608
|
-
{
|
|
609
|
-
x: rect.rightBottom.x + Math.min(rect.width, CONTROL_MAX),
|
|
610
|
-
y: rect.rightBottom.y
|
|
611
|
-
},
|
|
612
|
-
{
|
|
613
|
-
x: rect.leftTop.x - Math.min(rect.width, CONTROL_MAX),
|
|
614
|
-
y: rect.leftTop.y
|
|
615
|
-
}
|
|
616
|
-
];
|
|
617
|
-
break;
|
|
618
|
-
case 3 /* LEFT_BOTTOM */:
|
|
619
|
-
controls = [
|
|
620
|
-
{
|
|
621
|
-
x: rect.rightTop.x + Math.min(rect.width, CONTROL_MAX),
|
|
622
|
-
y: rect.rightTop.y
|
|
623
|
-
},
|
|
624
|
-
{
|
|
625
|
-
x: rect.leftBottom.x - Math.min(rect.width, CONTROL_MAX),
|
|
626
|
-
y: rect.leftBottom.y
|
|
627
|
-
}
|
|
628
|
-
];
|
|
568
|
+
function getControlOffset(distance, curvature) {
|
|
569
|
+
if (distance >= 0) {
|
|
570
|
+
return 0.5 * distance;
|
|
629
571
|
}
|
|
630
|
-
return
|
|
572
|
+
return curvature * 25 * Math.sqrt(-distance);
|
|
631
573
|
}
|
|
632
|
-
function
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
x: rect.leftBottom.x,
|
|
662
|
-
y: rect.leftBottom.y - rect.height / 2
|
|
663
|
-
}
|
|
664
|
-
];
|
|
665
|
-
break;
|
|
666
|
-
case 0 /* RIGHT_TOP */:
|
|
667
|
-
controls = [
|
|
668
|
-
{
|
|
669
|
-
x: rect.leftBottom.x,
|
|
670
|
-
y: rect.leftBottom.y + Math.min(rect.height, CONTROL_MAX)
|
|
671
|
-
},
|
|
672
|
-
{
|
|
673
|
-
x: rect.rightTop.x,
|
|
674
|
-
y: rect.rightTop.y - Math.min(rect.height, CONTROL_MAX)
|
|
675
|
-
}
|
|
676
|
-
];
|
|
677
|
-
break;
|
|
678
|
-
case 2 /* LEFT_TOP */:
|
|
679
|
-
controls = [
|
|
680
|
-
{
|
|
681
|
-
x: rect.rightBottom.x,
|
|
682
|
-
y: rect.rightBottom.y + Math.min(rect.height, CONTROL_MAX)
|
|
683
|
-
},
|
|
684
|
-
{
|
|
685
|
-
x: rect.leftTop.x,
|
|
686
|
-
y: rect.leftTop.y - Math.min(rect.height, CONTROL_MAX)
|
|
687
|
-
}
|
|
688
|
-
];
|
|
689
|
-
break;
|
|
574
|
+
function getControlWithCurvature({
|
|
575
|
+
location,
|
|
576
|
+
x1,
|
|
577
|
+
y1,
|
|
578
|
+
x2,
|
|
579
|
+
y2,
|
|
580
|
+
curvature
|
|
581
|
+
}) {
|
|
582
|
+
switch (location) {
|
|
583
|
+
case "left":
|
|
584
|
+
return {
|
|
585
|
+
x: x1 - getControlOffset(x1 - x2, curvature),
|
|
586
|
+
y: y1
|
|
587
|
+
};
|
|
588
|
+
case "right":
|
|
589
|
+
return {
|
|
590
|
+
x: x1 + getControlOffset(x2 - x1, curvature),
|
|
591
|
+
y: y1
|
|
592
|
+
};
|
|
593
|
+
case "top":
|
|
594
|
+
return {
|
|
595
|
+
x: x1,
|
|
596
|
+
y: y1 - getControlOffset(y1 - y2, curvature)
|
|
597
|
+
};
|
|
598
|
+
case "bottom":
|
|
599
|
+
return {
|
|
600
|
+
x: x1,
|
|
601
|
+
y: y1 + getControlOffset(y2 - y1, curvature)
|
|
602
|
+
};
|
|
690
603
|
}
|
|
691
|
-
|
|
604
|
+
}
|
|
605
|
+
function getBezierControlPoints(fromPos, toPos, curvature = 0.25) {
|
|
606
|
+
const fromControl = getControlWithCurvature({
|
|
607
|
+
location: fromPos.location,
|
|
608
|
+
x1: fromPos.x,
|
|
609
|
+
y1: fromPos.y,
|
|
610
|
+
x2: toPos.x,
|
|
611
|
+
y2: toPos.y,
|
|
612
|
+
curvature
|
|
613
|
+
});
|
|
614
|
+
const toControl = getControlWithCurvature({
|
|
615
|
+
location: toPos.location,
|
|
616
|
+
x1: toPos.x,
|
|
617
|
+
y1: toPos.y,
|
|
618
|
+
x2: fromPos.x,
|
|
619
|
+
y2: fromPos.y,
|
|
620
|
+
curvature
|
|
621
|
+
});
|
|
622
|
+
return [fromControl, toControl];
|
|
692
623
|
}
|
|
693
624
|
|
|
694
625
|
// src/contributions/bezier/index.ts
|
|
695
|
-
import { Bezier } from "bezier-js";
|
|
696
|
-
import { Point, Rectangle as Rectangle2 } from "@flowgram.ai/utils";
|
|
697
|
-
import {
|
|
698
|
-
POINT_RADIUS as POINT_RADIUS2
|
|
699
|
-
} from "@flowgram.ai/free-layout-core";
|
|
700
|
-
import { LineType } from "@flowgram.ai/free-layout-core";
|
|
701
626
|
var WorkflowBezierLineContribution = class {
|
|
702
627
|
constructor(entity) {
|
|
703
628
|
this.entity = entity;
|
|
@@ -713,7 +638,7 @@ var WorkflowBezierLineContribution = class {
|
|
|
713
638
|
}
|
|
714
639
|
get bounds() {
|
|
715
640
|
if (!this.data) {
|
|
716
|
-
return new
|
|
641
|
+
return new Rectangle();
|
|
717
642
|
}
|
|
718
643
|
return this.data.bbox;
|
|
719
644
|
}
|
|
@@ -721,10 +646,10 @@ var WorkflowBezierLineContribution = class {
|
|
|
721
646
|
this.data = this.calcBezier(params.fromPos, params.toPos);
|
|
722
647
|
}
|
|
723
648
|
calcBezier(fromPos, toPos) {
|
|
724
|
-
const controls =
|
|
649
|
+
const controls = getBezierControlPoints(fromPos, toPos, this.entity.uiState.curvature);
|
|
725
650
|
const bezier = new Bezier([fromPos, ...controls, toPos]);
|
|
726
651
|
const bbox = bezier.bbox();
|
|
727
|
-
const bboxBounds = new
|
|
652
|
+
const bboxBounds = new Rectangle(
|
|
728
653
|
bbox.x.min,
|
|
729
654
|
bbox.y.min,
|
|
730
655
|
bbox.x.max - bbox.x.min,
|
|
@@ -750,30 +675,24 @@ var WorkflowBezierLineContribution = class {
|
|
|
750
675
|
const fromPos = toRelative(params.fromPos);
|
|
751
676
|
const toPos = toRelative(params.toPos);
|
|
752
677
|
const controls = params.controls.map((c) => toRelative(c));
|
|
753
|
-
const
|
|
754
|
-
const
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
return `M${fromPos.x} ${fromPos.y + POINT_RADIUS2} ${curveType} ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
|
|
759
|
-
}
|
|
760
|
-
return `M${fromPos.x + POINT_RADIUS2} ${fromPos.y} ${curveType} ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
|
|
761
|
-
};
|
|
762
|
-
const path = getPathData();
|
|
763
|
-
return path;
|
|
678
|
+
const shrink = this.entity.uiState.shrink;
|
|
679
|
+
const renderFromPos = params.fromPos.location === "bottom" ? { x: fromPos.x, y: fromPos.y + shrink } : { x: fromPos.x + shrink, y: fromPos.y };
|
|
680
|
+
const renderToPos = params.toPos.location === "top" ? { x: toPos.x, y: toPos.y - shrink } : { x: toPos.x - shrink, y: toPos.y };
|
|
681
|
+
const controlPoints = controls.map((s) => `${s.x} ${s.y}`).join(",");
|
|
682
|
+
return `M${renderFromPos.x} ${renderFromPos.y} C ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
|
|
764
683
|
}
|
|
765
684
|
};
|
|
766
685
|
WorkflowBezierLineContribution.type = LineType.BEZIER;
|
|
767
686
|
|
|
768
687
|
// src/contributions/fold/index.ts
|
|
769
|
-
import { Rectangle as
|
|
688
|
+
import { Rectangle as Rectangle3 } from "@flowgram.ai/utils";
|
|
770
689
|
import {
|
|
771
|
-
POINT_RADIUS as
|
|
690
|
+
POINT_RADIUS as POINT_RADIUS2
|
|
772
691
|
} from "@flowgram.ai/free-layout-core";
|
|
773
692
|
import { LineType as LineType2 } from "@flowgram.ai/free-layout-core";
|
|
774
693
|
|
|
775
694
|
// src/contributions/fold/fold-line.ts
|
|
776
|
-
import { Point as Point2, Rectangle as
|
|
695
|
+
import { Point as Point2, Rectangle as Rectangle2 } from "@flowgram.ai/utils";
|
|
777
696
|
var getPointToSegmentDistance = (point, segStart, segEnd) => {
|
|
778
697
|
const { x: px, y: py } = point;
|
|
779
698
|
const { x: x1, y: y1 } = segStart;
|
|
@@ -812,23 +731,38 @@ var FoldLine;
|
|
|
812
731
|
const centerY = target.y < source.y ? target.y + yOffset : target.y - yOffset;
|
|
813
732
|
return [centerX, centerY];
|
|
814
733
|
}
|
|
815
|
-
const getDirection = ({ source, target }) =>
|
|
734
|
+
const getDirection = ({ source, target }) => {
|
|
735
|
+
if (source.location === "left" || source.location === "right") {
|
|
736
|
+
return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
|
|
737
|
+
}
|
|
738
|
+
return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
|
|
739
|
+
};
|
|
740
|
+
const handleDirections = {
|
|
741
|
+
left: { x: -1, y: 0 },
|
|
742
|
+
right: { x: 1, y: 0 },
|
|
743
|
+
top: { x: 0, y: -1 },
|
|
744
|
+
bottom: { x: 0, y: 1 }
|
|
745
|
+
};
|
|
816
746
|
function getPoints({
|
|
817
747
|
source,
|
|
818
|
-
target
|
|
819
|
-
vertical = false
|
|
748
|
+
target
|
|
820
749
|
}) {
|
|
821
|
-
const sourceDir =
|
|
822
|
-
const targetDir =
|
|
750
|
+
const sourceDir = handleDirections[source.location];
|
|
751
|
+
const targetDir = handleDirections[target.location];
|
|
823
752
|
const sourceGapped = {
|
|
824
753
|
x: source.x + sourceDir.x * OFFSET,
|
|
825
|
-
y: source.y + sourceDir.y * OFFSET
|
|
754
|
+
y: source.y + sourceDir.y * OFFSET,
|
|
755
|
+
location: source.location
|
|
826
756
|
};
|
|
827
757
|
const targetGapped = {
|
|
828
758
|
x: target.x + targetDir.x * OFFSET,
|
|
829
|
-
y: target.y + targetDir.y * OFFSET
|
|
759
|
+
y: target.y + targetDir.y * OFFSET,
|
|
760
|
+
location: target.location
|
|
830
761
|
};
|
|
831
|
-
const dir =
|
|
762
|
+
const dir = getDirection({
|
|
763
|
+
source: sourceGapped,
|
|
764
|
+
target: targetGapped
|
|
765
|
+
});
|
|
832
766
|
const dirAccessor = dir.x !== 0 ? "x" : "y";
|
|
833
767
|
const currDir = dir[dirAccessor];
|
|
834
768
|
let points = [];
|
|
@@ -937,7 +871,7 @@ var FoldLine;
|
|
|
937
871
|
const right = Math.max(...xList);
|
|
938
872
|
const top = Math.min(...yList);
|
|
939
873
|
const bottom = Math.max(...yList);
|
|
940
|
-
return
|
|
874
|
+
return Rectangle2.createRectangleWithTwoPoints(
|
|
941
875
|
{
|
|
942
876
|
x: left,
|
|
943
877
|
y: top
|
|
@@ -984,31 +918,31 @@ var WorkflowFoldLineContribution = class {
|
|
|
984
918
|
}
|
|
985
919
|
get bounds() {
|
|
986
920
|
if (!this.data) {
|
|
987
|
-
return new
|
|
921
|
+
return new Rectangle3();
|
|
988
922
|
}
|
|
989
923
|
return this.data.bbox;
|
|
990
924
|
}
|
|
991
925
|
update(params) {
|
|
992
926
|
const { fromPos, toPos } = params;
|
|
993
|
-
const { vertical } = this.entity;
|
|
994
927
|
const sourceOffset = {
|
|
995
|
-
x:
|
|
996
|
-
y:
|
|
928
|
+
x: fromPos.location === "bottom" ? 0 : POINT_RADIUS2,
|
|
929
|
+
y: fromPos.location === "bottom" ? POINT_RADIUS2 : 0
|
|
997
930
|
};
|
|
998
931
|
const targetOffset = {
|
|
999
|
-
x:
|
|
1000
|
-
y:
|
|
932
|
+
x: toPos.location === "top" ? 0 : -POINT_RADIUS2,
|
|
933
|
+
y: toPos.location === "top" ? -POINT_RADIUS2 : 0
|
|
1001
934
|
};
|
|
1002
935
|
const points = FoldLine.getPoints({
|
|
1003
936
|
source: {
|
|
1004
937
|
x: fromPos.x + sourceOffset.x,
|
|
1005
|
-
y: fromPos.y + sourceOffset.y
|
|
938
|
+
y: fromPos.y + sourceOffset.y,
|
|
939
|
+
location: fromPos.location
|
|
1006
940
|
},
|
|
1007
941
|
target: {
|
|
1008
942
|
x: toPos.x + targetOffset.x,
|
|
1009
|
-
y: toPos.y + targetOffset.y
|
|
1010
|
-
|
|
1011
|
-
|
|
943
|
+
y: toPos.y + targetOffset.y,
|
|
944
|
+
location: toPos.location
|
|
945
|
+
}
|
|
1012
946
|
});
|
|
1013
947
|
const bbox = FoldLine.getBounds(points);
|
|
1014
948
|
const adjustedPoints = points.map((p) => ({
|
|
@@ -1026,9 +960,9 @@ var WorkflowFoldLineContribution = class {
|
|
|
1026
960
|
WorkflowFoldLineContribution.type = LineType2.LINE_CHART;
|
|
1027
961
|
|
|
1028
962
|
// src/contributions/straight/index.ts
|
|
1029
|
-
import { Point as Point3, Rectangle as
|
|
963
|
+
import { Point as Point3, Rectangle as Rectangle4 } from "@flowgram.ai/utils";
|
|
1030
964
|
import {
|
|
1031
|
-
POINT_RADIUS as
|
|
965
|
+
POINT_RADIUS as POINT_RADIUS3
|
|
1032
966
|
} from "@flowgram.ai/free-layout-core";
|
|
1033
967
|
|
|
1034
968
|
// src/contributions/straight/point-on-line.ts
|
|
@@ -1066,20 +1000,19 @@ var WorkflowStraightLineContribution = class {
|
|
|
1066
1000
|
}
|
|
1067
1001
|
get bounds() {
|
|
1068
1002
|
if (!this.data) {
|
|
1069
|
-
return new
|
|
1003
|
+
return new Rectangle4();
|
|
1070
1004
|
}
|
|
1071
1005
|
return this.data.bbox;
|
|
1072
1006
|
}
|
|
1073
1007
|
update(params) {
|
|
1074
1008
|
const { fromPos, toPos } = params;
|
|
1075
|
-
const { vertical } = this.entity;
|
|
1076
1009
|
const sourceOffset = {
|
|
1077
|
-
x:
|
|
1078
|
-
y:
|
|
1010
|
+
x: fromPos.location === "bottom" ? 0 : POINT_RADIUS3,
|
|
1011
|
+
y: fromPos.location === "bottom" ? POINT_RADIUS3 : 0
|
|
1079
1012
|
};
|
|
1080
1013
|
const targetOffset = {
|
|
1081
|
-
x:
|
|
1082
|
-
y:
|
|
1014
|
+
x: toPos.location === "top" ? 0 : -POINT_RADIUS3,
|
|
1015
|
+
y: toPos.location === "top" ? -POINT_RADIUS3 : 0
|
|
1083
1016
|
};
|
|
1084
1017
|
const points = [
|
|
1085
1018
|
{
|
|
@@ -1091,7 +1024,7 @@ var WorkflowStraightLineContribution = class {
|
|
|
1091
1024
|
y: toPos.y + targetOffset.y
|
|
1092
1025
|
}
|
|
1093
1026
|
];
|
|
1094
|
-
const bbox =
|
|
1027
|
+
const bbox = Rectangle4.createRectangleWithTwoPoints(points[0], points[1]);
|
|
1095
1028
|
const adjustedPoints = points.map((p) => ({
|
|
1096
1029
|
x: p.x - bbox.x + LINE_PADDING,
|
|
1097
1030
|
y: p.y - bbox.y + LINE_PADDING
|
|
@@ -1107,9 +1040,9 @@ var WorkflowStraightLineContribution = class {
|
|
|
1107
1040
|
WorkflowStraightLineContribution.type = "WorkflowStraightLineContribution";
|
|
1108
1041
|
|
|
1109
1042
|
// src/contributions/arc/index.ts
|
|
1110
|
-
import { Point as Point4, Rectangle as
|
|
1043
|
+
import { Point as Point4, Rectangle as Rectangle5 } from "@flowgram.ai/utils";
|
|
1111
1044
|
import {
|
|
1112
|
-
POINT_RADIUS as
|
|
1045
|
+
POINT_RADIUS as POINT_RADIUS4
|
|
1113
1046
|
} from "@flowgram.ai/free-layout-core";
|
|
1114
1047
|
var WorkflowArkLineContribution = class {
|
|
1115
1048
|
constructor(entity) {
|
|
@@ -1138,7 +1071,7 @@ var WorkflowArkLineContribution = class {
|
|
|
1138
1071
|
}
|
|
1139
1072
|
get bounds() {
|
|
1140
1073
|
if (!this.data) {
|
|
1141
|
-
return new
|
|
1074
|
+
return new Rectangle5();
|
|
1142
1075
|
}
|
|
1143
1076
|
return this.data.bbox;
|
|
1144
1077
|
}
|
|
@@ -1146,12 +1079,12 @@ var WorkflowArkLineContribution = class {
|
|
|
1146
1079
|
const { fromPos, toPos } = params;
|
|
1147
1080
|
const { vertical } = this.entity;
|
|
1148
1081
|
const sourceOffset = {
|
|
1149
|
-
x: vertical ? 0 :
|
|
1150
|
-
y: vertical ?
|
|
1082
|
+
x: vertical ? 0 : POINT_RADIUS4,
|
|
1083
|
+
y: vertical ? POINT_RADIUS4 : 0
|
|
1151
1084
|
};
|
|
1152
1085
|
const targetOffset = {
|
|
1153
|
-
x: vertical ? 0 : -
|
|
1154
|
-
y: vertical ? -
|
|
1086
|
+
x: vertical ? 0 : -POINT_RADIUS4,
|
|
1087
|
+
y: vertical ? -POINT_RADIUS4 : 0
|
|
1155
1088
|
};
|
|
1156
1089
|
const start = {
|
|
1157
1090
|
x: fromPos.x + sourceOffset.x,
|
|
@@ -1176,7 +1109,7 @@ var WorkflowArkLineContribution = class {
|
|
|
1176
1109
|
const radius = Math.sqrt(dx * dx + dy * dy) / 2;
|
|
1177
1110
|
const centerX = (start.x + end.x) / 2;
|
|
1178
1111
|
const centerY = (start.y + end.y) / 2;
|
|
1179
|
-
return new
|
|
1112
|
+
return new Rectangle5(centerX - radius, centerY - radius, radius * 2, radius * 2);
|
|
1180
1113
|
}
|
|
1181
1114
|
getArcPath(start, end, bbox) {
|
|
1182
1115
|
const dx = end.x - start.x;
|
|
@@ -1195,133 +1128,6 @@ var WorkflowArkLineContribution = class {
|
|
|
1195
1128
|
};
|
|
1196
1129
|
WorkflowArkLineContribution.type = "WorkflowArkLineContribution";
|
|
1197
1130
|
|
|
1198
|
-
// src/contributions/manhattan/index.ts
|
|
1199
|
-
import { Point as Point5, Rectangle as Rectangle7 } from "@flowgram.ai/utils";
|
|
1200
|
-
import {
|
|
1201
|
-
POINT_RADIUS as POINT_RADIUS6
|
|
1202
|
-
} from "@flowgram.ai/free-layout-core";
|
|
1203
|
-
var WorkflowManhattanLineContribution = class {
|
|
1204
|
-
constructor(entity) {
|
|
1205
|
-
this.entity = entity;
|
|
1206
|
-
}
|
|
1207
|
-
get path() {
|
|
1208
|
-
return this.data?.path ?? "";
|
|
1209
|
-
}
|
|
1210
|
-
calcDistance(pos) {
|
|
1211
|
-
if (!this.data) {
|
|
1212
|
-
return Number.MAX_SAFE_INTEGER;
|
|
1213
|
-
}
|
|
1214
|
-
return Math.min(
|
|
1215
|
-
...this.data.points.slice(1).map((point, index) => {
|
|
1216
|
-
const prevPoint = this.data.points[index];
|
|
1217
|
-
return this.getDistanceToLineSegment(pos, prevPoint, point);
|
|
1218
|
-
})
|
|
1219
|
-
);
|
|
1220
|
-
}
|
|
1221
|
-
getDistanceToLineSegment(point, start, end) {
|
|
1222
|
-
const dx = end.x - start.x;
|
|
1223
|
-
const dy = end.y - start.y;
|
|
1224
|
-
if (dx === 0 && dy === 0) {
|
|
1225
|
-
return Point5.getDistance(point, start);
|
|
1226
|
-
}
|
|
1227
|
-
const t = ((point.x - start.x) * dx + (point.y - start.y) * dy) / (dx * dx + dy * dy);
|
|
1228
|
-
if (t < 0) return Point5.getDistance(point, start);
|
|
1229
|
-
if (t > 1) return Point5.getDistance(point, end);
|
|
1230
|
-
const projectionPoint = {
|
|
1231
|
-
x: start.x + t * dx,
|
|
1232
|
-
y: start.y + t * dy
|
|
1233
|
-
};
|
|
1234
|
-
return Point5.getDistance(point, projectionPoint);
|
|
1235
|
-
}
|
|
1236
|
-
get bounds() {
|
|
1237
|
-
if (!this.data) {
|
|
1238
|
-
return new Rectangle7();
|
|
1239
|
-
}
|
|
1240
|
-
return this.data.bbox;
|
|
1241
|
-
}
|
|
1242
|
-
update(params) {
|
|
1243
|
-
const { fromPos, toPos } = params;
|
|
1244
|
-
const { vertical } = this.entity;
|
|
1245
|
-
const sourceOffset = {
|
|
1246
|
-
x: vertical ? 0 : POINT_RADIUS6,
|
|
1247
|
-
y: vertical ? POINT_RADIUS6 : 0
|
|
1248
|
-
};
|
|
1249
|
-
const targetOffset = {
|
|
1250
|
-
x: vertical ? 0 : -POINT_RADIUS6,
|
|
1251
|
-
y: vertical ? -POINT_RADIUS6 : 0
|
|
1252
|
-
};
|
|
1253
|
-
const points = this.getManhattanPoints({
|
|
1254
|
-
source: {
|
|
1255
|
-
x: fromPos.x + sourceOffset.x,
|
|
1256
|
-
y: fromPos.y + sourceOffset.y
|
|
1257
|
-
},
|
|
1258
|
-
target: {
|
|
1259
|
-
x: toPos.x + targetOffset.x,
|
|
1260
|
-
y: toPos.y + targetOffset.y
|
|
1261
|
-
},
|
|
1262
|
-
vertical
|
|
1263
|
-
});
|
|
1264
|
-
const bbox = Rectangle7.createRectangleWithTwoPoints(
|
|
1265
|
-
points.reduce(
|
|
1266
|
-
(min, p) => ({
|
|
1267
|
-
x: Math.min(min.x, p.x),
|
|
1268
|
-
y: Math.min(min.y, p.y)
|
|
1269
|
-
}),
|
|
1270
|
-
points[0]
|
|
1271
|
-
),
|
|
1272
|
-
points.reduce(
|
|
1273
|
-
(max, p) => ({
|
|
1274
|
-
x: Math.max(max.x, p.x),
|
|
1275
|
-
y: Math.max(max.y, p.y)
|
|
1276
|
-
}),
|
|
1277
|
-
points[0]
|
|
1278
|
-
)
|
|
1279
|
-
);
|
|
1280
|
-
const adjustedPoints = points.map((p) => ({
|
|
1281
|
-
x: p.x - bbox.x + LINE_PADDING,
|
|
1282
|
-
y: p.y - bbox.y + LINE_PADDING
|
|
1283
|
-
}));
|
|
1284
|
-
const path = this.getPathFromPoints(adjustedPoints);
|
|
1285
|
-
this.data = {
|
|
1286
|
-
points,
|
|
1287
|
-
path,
|
|
1288
|
-
bbox
|
|
1289
|
-
};
|
|
1290
|
-
}
|
|
1291
|
-
getManhattanPoints(params) {
|
|
1292
|
-
const { source, target, vertical } = params;
|
|
1293
|
-
const points = [source];
|
|
1294
|
-
if (vertical) {
|
|
1295
|
-
if (source.y !== target.y) {
|
|
1296
|
-
points.push({ x: source.x, y: target.y });
|
|
1297
|
-
}
|
|
1298
|
-
if (source.x !== target.x) {
|
|
1299
|
-
points.push({ x: target.x, y: target.y });
|
|
1300
|
-
}
|
|
1301
|
-
} else {
|
|
1302
|
-
if (source.x !== target.x) {
|
|
1303
|
-
points.push({ x: target.x, y: source.y });
|
|
1304
|
-
}
|
|
1305
|
-
if (source.y !== target.y) {
|
|
1306
|
-
points.push({ x: target.x, y: target.y });
|
|
1307
|
-
}
|
|
1308
|
-
}
|
|
1309
|
-
if (points[points.length - 1] !== target) {
|
|
1310
|
-
points.push(target);
|
|
1311
|
-
}
|
|
1312
|
-
return points;
|
|
1313
|
-
}
|
|
1314
|
-
getPathFromPoints(points) {
|
|
1315
|
-
return points.reduce((path, point, index) => {
|
|
1316
|
-
if (index === 0) {
|
|
1317
|
-
return `M ${point.x} ${point.y}`;
|
|
1318
|
-
}
|
|
1319
|
-
return `${path} L ${point.x} ${point.y}`;
|
|
1320
|
-
}, "");
|
|
1321
|
-
}
|
|
1322
|
-
};
|
|
1323
|
-
WorkflowManhattanLineContribution.type = "WorkflowManhattanLineContribution";
|
|
1324
|
-
|
|
1325
1131
|
// src/create-free-lines-plugin.ts
|
|
1326
1132
|
var createFreeLinesPlugin = definePluginCreator({
|
|
1327
1133
|
singleton: true,
|
|
@@ -1344,7 +1150,6 @@ var createFreeLinesPlugin = definePluginCreator({
|
|
|
1344
1150
|
}
|
|
1345
1151
|
});
|
|
1346
1152
|
export {
|
|
1347
|
-
BezierControlType,
|
|
1348
1153
|
LINE_OFFSET,
|
|
1349
1154
|
LINE_PADDING,
|
|
1350
1155
|
WorkflowLinesLayer as LinesLayer,
|
|
@@ -1352,11 +1157,8 @@ export {
|
|
|
1352
1157
|
WorkflowBezierLineContribution,
|
|
1353
1158
|
WorkflowFoldLineContribution,
|
|
1354
1159
|
WorkflowLinesLayer,
|
|
1355
|
-
WorkflowManhattanLineContribution,
|
|
1356
1160
|
WorkflowPortRender,
|
|
1357
1161
|
WorkflowStraightLineContribution,
|
|
1358
|
-
createFreeLinesPlugin
|
|
1359
|
-
getBezierHorizontalControlPoints,
|
|
1360
|
-
getBezierVerticalControlPoints
|
|
1162
|
+
createFreeLinesPlugin
|
|
1361
1163
|
};
|
|
1362
1164
|
//# sourceMappingURL=index.js.map
|