@html-graph/html-graph 3.10.0 → 3.11.1
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/README.md +12 -12
- package/dist/html-graph.d.ts +45 -11
- package/dist/html-graph.js +1497 -1389
- package/dist/html-graph.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -63,27 +63,27 @@ class Application {
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
createNode({ name, x, y, frontPortId, backPortId }) {
|
|
66
|
-
const
|
|
66
|
+
const nodeElement = document.createElement("div");
|
|
67
67
|
const text = document.createElement("div");
|
|
68
|
-
const
|
|
69
|
-
const
|
|
68
|
+
const frontPortElement = document.createElement("div");
|
|
69
|
+
const backPortElement = document.createElement("div");
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
71
|
+
nodeElement.classList.add("node");
|
|
72
|
+
frontPortElement.classList.add("port");
|
|
73
|
+
backPortElement.classList.add("port");
|
|
74
74
|
text.innerText = name;
|
|
75
75
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
nodeElement.appendChild(frontPortElement);
|
|
77
|
+
nodeElement.appendChild(text);
|
|
78
|
+
nodeElement.appendChild(backPortElement);
|
|
79
79
|
|
|
80
80
|
return {
|
|
81
|
-
element:
|
|
81
|
+
element: nodeElement,
|
|
82
82
|
x: x,
|
|
83
83
|
y: y,
|
|
84
84
|
ports: [
|
|
85
|
-
{ id: frontPortId, element:
|
|
86
|
-
{ id: backPortId, element:
|
|
85
|
+
{ id: frontPortId, element: frontPortElement },
|
|
86
|
+
{ id: backPortId, element: backPortElement },
|
|
87
87
|
],
|
|
88
88
|
};
|
|
89
89
|
}
|
package/dist/html-graph.d.ts
CHANGED
|
@@ -71,6 +71,7 @@ export declare class BezierEdgeShape implements StructuredEdgeShape {
|
|
|
71
71
|
readonly line: SVGPathElement;
|
|
72
72
|
readonly sourceArrow: SVGPathElement | null;
|
|
73
73
|
readonly targetArrow: SVGPathElement | null;
|
|
74
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
74
75
|
private readonly arrowLength;
|
|
75
76
|
private readonly arrowWidth;
|
|
76
77
|
private readonly curvature;
|
|
@@ -80,7 +81,7 @@ export declare class BezierEdgeShape implements StructuredEdgeShape {
|
|
|
80
81
|
private readonly detourDistance;
|
|
81
82
|
private readonly hasSourceArrow;
|
|
82
83
|
private readonly hasTargetArrow;
|
|
83
|
-
private readonly
|
|
84
|
+
private readonly pathShape;
|
|
84
85
|
private readonly createCyclePath;
|
|
85
86
|
private readonly createDetourPath;
|
|
86
87
|
private readonly createLinePath;
|
|
@@ -320,8 +321,6 @@ export declare type ConnectionTypeResolver = (portId: unknown) => "direct" | "re
|
|
|
320
321
|
|
|
321
322
|
declare type ConstantPriority = number;
|
|
322
323
|
|
|
323
|
-
export declare type CreatePathFn = (sourceDirection: Point, targetDirection: Point, to: Point, flipX: number, flipY: number) => string;
|
|
324
|
-
|
|
325
324
|
declare type CustomPriority = PriorityFn;
|
|
326
325
|
|
|
327
326
|
declare interface Defaults {
|
|
@@ -361,6 +360,8 @@ export declare class DirectEdgeShape implements StructuredEdgeShape {
|
|
|
361
360
|
private readonly arrowWidth;
|
|
362
361
|
private readonly sourceOffset;
|
|
363
362
|
private readonly targetOffset;
|
|
363
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
364
|
+
private readonly afterRenderEmitter;
|
|
364
365
|
constructor(params?: DirectEdgeParams);
|
|
365
366
|
render(params: EdgeRenderParams): void;
|
|
366
367
|
}
|
|
@@ -391,6 +392,13 @@ declare interface DraggableNodesConfig {
|
|
|
391
392
|
export { DraggableNodesConfig as DragOptions }
|
|
392
393
|
export { DraggableNodesConfig }
|
|
393
394
|
|
|
395
|
+
declare interface EdgePath {
|
|
396
|
+
readonly path: string;
|
|
397
|
+
readonly median: Point;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
declare type EdgePathFactory = (sourceDirection: Point, targetDirection: Point, to: Point, flipX: number, flipY: number) => EdgePath;
|
|
401
|
+
|
|
394
402
|
declare interface EdgePayload {
|
|
395
403
|
readonly from: unknown;
|
|
396
404
|
readonly to: unknown;
|
|
@@ -580,6 +588,7 @@ export declare class HorizontalEdgeShape implements StructuredEdgeShape {
|
|
|
580
588
|
readonly line: SVGPathElement;
|
|
581
589
|
readonly sourceArrow: SVGPathElement | null;
|
|
582
590
|
readonly targetArrow: SVGPathElement | null;
|
|
591
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
583
592
|
private readonly arrowLength;
|
|
584
593
|
private readonly arrowWidth;
|
|
585
594
|
private readonly arrowOffset;
|
|
@@ -589,7 +598,7 @@ export declare class HorizontalEdgeShape implements StructuredEdgeShape {
|
|
|
589
598
|
private readonly detourDistance;
|
|
590
599
|
private readonly hasSourceArrow;
|
|
591
600
|
private readonly hasTargetArrow;
|
|
592
|
-
private readonly
|
|
601
|
+
private readonly pathShape;
|
|
593
602
|
private readonly createCyclePath;
|
|
594
603
|
private readonly createDetourPath;
|
|
595
604
|
private readonly createLinePath;
|
|
@@ -633,17 +642,18 @@ export declare interface InteractiveEdgeParams {
|
|
|
633
642
|
}
|
|
634
643
|
|
|
635
644
|
export declare class InteractiveEdgeShape implements StructuredEdgeShape {
|
|
636
|
-
private readonly
|
|
645
|
+
private readonly baseEdge;
|
|
637
646
|
readonly svg: SVGSVGElement;
|
|
638
647
|
readonly group: SVGGElement;
|
|
639
648
|
readonly line: SVGPathElement;
|
|
640
649
|
readonly sourceArrow: SVGPathElement | null;
|
|
641
650
|
readonly targetArrow: SVGPathElement | null;
|
|
642
651
|
readonly handle: SVGGElement;
|
|
652
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
643
653
|
private readonly interactiveLine;
|
|
644
654
|
private readonly interactiveSourceArrow;
|
|
645
655
|
private readonly interactiveTargetArrow;
|
|
646
|
-
constructor(
|
|
656
|
+
constructor(baseEdge: StructuredEdgeShape, params?: InteractiveEdgeParams);
|
|
647
657
|
render(params: EdgeRenderParams): void;
|
|
648
658
|
}
|
|
649
659
|
|
|
@@ -654,9 +664,9 @@ export declare interface LineEdgeParams {
|
|
|
654
664
|
readonly arrowWidth: number;
|
|
655
665
|
readonly hasSourceArrow: boolean;
|
|
656
666
|
readonly hasTargetArrow: boolean;
|
|
657
|
-
readonly createCyclePath:
|
|
658
|
-
readonly createDetourPath:
|
|
659
|
-
readonly createLinePath:
|
|
667
|
+
readonly createCyclePath: EdgePathFactory;
|
|
668
|
+
readonly createDetourPath: EdgePathFactory;
|
|
669
|
+
readonly createLinePath: EdgePathFactory;
|
|
660
670
|
}
|
|
661
671
|
|
|
662
672
|
export declare class LineEdgeShape implements StructuredEdgeShape {
|
|
@@ -666,6 +676,8 @@ export declare class LineEdgeShape implements StructuredEdgeShape {
|
|
|
666
676
|
readonly line: SVGPathElement;
|
|
667
677
|
readonly sourceArrow: SVGPathElement | null;
|
|
668
678
|
readonly targetArrow: SVGPathElement | null;
|
|
679
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
680
|
+
private readonly afterRenderEmitter;
|
|
669
681
|
constructor(params: LineEdgeParams);
|
|
670
682
|
render(params: EdgeRenderParams): void;
|
|
671
683
|
}
|
|
@@ -683,6 +695,19 @@ export declare interface MarkPortRequest {
|
|
|
683
695
|
readonly direction?: number;
|
|
684
696
|
}
|
|
685
697
|
|
|
698
|
+
export declare class MedianEdgeShape implements StructuredEdgeShape {
|
|
699
|
+
private readonly baseShape;
|
|
700
|
+
readonly medianElement: SVGElement;
|
|
701
|
+
readonly group: SVGGElement;
|
|
702
|
+
readonly line: SVGPathElement;
|
|
703
|
+
readonly sourceArrow: SVGPathElement | null;
|
|
704
|
+
readonly targetArrow: SVGPathElement | null;
|
|
705
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
706
|
+
readonly svg: SVGSVGElement;
|
|
707
|
+
constructor(baseShape: StructuredEdgeShape, medianElement: SVGElement);
|
|
708
|
+
render(params: EdgeRenderParams): void;
|
|
709
|
+
}
|
|
710
|
+
|
|
686
711
|
export declare type MouseEventVerifier = (event: MouseEvent) => boolean;
|
|
687
712
|
|
|
688
713
|
export declare interface NodeDragPayload {
|
|
@@ -767,6 +792,7 @@ export declare class StraightEdgeShape implements StructuredEdgeShape {
|
|
|
767
792
|
readonly line: SVGPathElement;
|
|
768
793
|
readonly sourceArrow: SVGPathElement | null;
|
|
769
794
|
readonly targetArrow: SVGPathElement | null;
|
|
795
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
770
796
|
private readonly arrowLength;
|
|
771
797
|
private readonly arrowWidth;
|
|
772
798
|
private readonly arrowOffset;
|
|
@@ -776,7 +802,7 @@ export declare class StraightEdgeShape implements StructuredEdgeShape {
|
|
|
776
802
|
private readonly detourDistance;
|
|
777
803
|
private readonly hasSourceArrow;
|
|
778
804
|
private readonly hasTargetArrow;
|
|
779
|
-
private readonly
|
|
805
|
+
private readonly pathShape;
|
|
780
806
|
private readonly createCyclePath;
|
|
781
807
|
private readonly createDetourPath;
|
|
782
808
|
private readonly createLinePath;
|
|
@@ -788,11 +814,18 @@ declare type StraightEdgeShapeConfig = {
|
|
|
788
814
|
readonly type: "straight";
|
|
789
815
|
} & StraightEdgeParams;
|
|
790
816
|
|
|
817
|
+
export declare interface StructuredEdgeRenderModel {
|
|
818
|
+
readonly edgePath: EdgePath;
|
|
819
|
+
readonly sourceArrowPath: string | null;
|
|
820
|
+
readonly targetArrowPath: string | null;
|
|
821
|
+
}
|
|
822
|
+
|
|
791
823
|
export declare interface StructuredEdgeShape extends EdgeShape {
|
|
792
824
|
readonly group: SVGGElement;
|
|
793
825
|
readonly line: SVGPathElement;
|
|
794
826
|
readonly sourceArrow: SVGPathElement | null;
|
|
795
827
|
readonly targetArrow: SVGPathElement | null;
|
|
828
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
796
829
|
}
|
|
797
830
|
|
|
798
831
|
export declare interface TransformPayload {
|
|
@@ -884,6 +917,7 @@ export declare class VerticalEdgeShape implements StructuredEdgeShape {
|
|
|
884
917
|
readonly line: SVGPathElement;
|
|
885
918
|
readonly sourceArrow: SVGPathElement | null;
|
|
886
919
|
readonly targetArrow: SVGPathElement | null;
|
|
920
|
+
readonly onAfterRender: EventHandler<StructuredEdgeRenderModel>;
|
|
887
921
|
private readonly arrowLength;
|
|
888
922
|
private readonly arrowWidth;
|
|
889
923
|
private readonly arrowOffset;
|
|
@@ -893,7 +927,7 @@ export declare class VerticalEdgeShape implements StructuredEdgeShape {
|
|
|
893
927
|
private readonly detourDistance;
|
|
894
928
|
private readonly hasSourceArrow;
|
|
895
929
|
private readonly hasTargetArrow;
|
|
896
|
-
private readonly
|
|
930
|
+
private readonly pathShape;
|
|
897
931
|
private readonly createCyclePath;
|
|
898
932
|
private readonly createDetourPath;
|
|
899
933
|
private readonly createLinePath;
|