@3plate/graph-core 0.1.2 → 0.1.4

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.
Files changed (5) hide show
  1. package/dist/index.cjs +1194 -705
  2. package/dist/index.d.cts +143 -83
  3. package/dist/index.d.ts +143 -83
  4. package/dist/index.js +1186 -707
  5. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -2,14 +2,27 @@ type Side = 'source' | 'target';
2
2
  type MergeOrder = Side[];
3
3
  type NodeAlign = 'natural' | 'top' | 'bottom' | 'left' | 'right';
4
4
  type Orientation = 'TB' | 'BT' | 'LR' | 'RL';
5
-
5
+ type Nav = 'first' | 'last' | 'prev' | 'next';
6
6
  type LayoutStep = 'alignChildren' | 'alignParents' | 'compact';
7
7
 
8
+ type MarkerType = 'arrow' | 'circle' | 'diamond' | 'bar' | 'none';
9
+
10
+ type APIArguments<N, E> = {
11
+ options?: APIOptions<N, E>;
12
+ nodes?: N[];
13
+ edges?: E[];
14
+ history?: Update<N, E>[];
15
+ root: string;
16
+ };
17
+ type APIOptions<N, E> = {
18
+ graph?: GraphOptions;
19
+ canvas?: CanvasOptions<N>;
20
+ props?: PropsOptions<N, E>;
21
+ };
8
22
  type GraphOptions = {
9
23
  mergeOrder?: MergeOrder;
10
24
  nodeMargin?: number;
11
25
  dummyNodeSize?: number;
12
- defaultPortOffset?: number;
13
26
  nodeAlign?: NodeAlign;
14
27
  edgeSpacing?: number;
15
28
  turnRadius?: number;
@@ -18,116 +31,163 @@ type GraphOptions = {
18
31
  alignIterations?: number;
19
32
  alignThreshold?: number;
20
33
  separateTrackSets?: boolean;
34
+ markerSize?: number;
21
35
  layoutSteps?: LayoutStep[] | null;
22
36
  };
23
-
24
- type EdgeAttributes = {
25
- width?: number;
26
- style?: string;
27
- color?: string;
28
- turnRadius?: number;
29
- sourceTerminal?: string | null;
30
- targetTerminal?: string | null;
37
+ type RenderNode<N> = (node: N) => HTMLElement;
38
+ type ColorMode = 'light' | 'dark' | 'system';
39
+ /** Canvas background and general colors */
40
+ type CanvasTheme = {
41
+ /** Canvas background color */
42
+ bg?: string;
43
+ /** Shadow color for floating elements */
44
+ shadow?: string;
31
45
  };
32
- type NodeAttributes = {
33
- strokeWidth?: number;
34
- strokeStyle?: string;
46
+ /** Node styling properties */
47
+ type NodeTheme = {
48
+ /** Node background color */
49
+ bg?: string;
50
+ /** Node border color */
51
+ border?: string;
52
+ /** Node border color on hover */
53
+ borderHover?: string;
54
+ /** Node border color when selected */
55
+ borderSelected?: string;
56
+ /** Node text color */
57
+ text?: string;
58
+ /** Node secondary text color */
59
+ textMuted?: string;
35
60
  };
36
- type RenderNode<N> = (node: N) => HTMLElement;
37
- type EdgeStyle = (type: string) => EdgeAttributes;
38
- type NodeStyle<N> = (node: N) => NodeAttributes;
39
- type PortStyle = 'inside' | 'outside' | 'custom';
61
+ /** Port styling properties */
62
+ type PortTheme = {
63
+ /** Port background color */
64
+ bg?: string;
65
+ /** Port background color on hover */
66
+ bgHover?: string;
67
+ };
68
+ /** Edge styling properties */
69
+ type EdgeTheme = {
70
+ /** Edge stroke color */
71
+ color?: string;
72
+ };
73
+ /** Combined theme with all customizable properties */
74
+ type ThemeVars = CanvasTheme & NodeTheme & PortTheme & EdgeTheme;
40
75
  type CanvasOptions<N> = {
41
- renderNode?: RenderNode<N>;
42
- nodeStyle?: NodeStyle<N>;
43
- edgeStyle?: EdgeStyle;
44
76
  width?: number | string;
45
77
  height?: number | string;
46
- portStyle?: PortStyle;
78
+ /** Padding inside the canvas viewport (default: 20) */
79
+ padding?: number;
47
80
  classPrefix?: string;
81
+ markerSize?: number;
82
+ editable?: boolean;
83
+ panZoom?: boolean;
84
+ renderNode?: RenderNode<N>;
85
+ colorMode?: ColorMode;
86
+ theme?: ThemeVars;
87
+ nodeTypes?: Record<string, ThemeVars>;
88
+ edgeTypes?: Record<string, ThemeVars>;
48
89
  };
49
-
50
- type StructuredNode<P> = {
51
- id: string;
90
+ type PropsOptions<N, E> = {
91
+ node?: GetNodeProps<N>;
92
+ edge?: GetEdgeProps<N, E>;
93
+ };
94
+ type Update<N, E> = {
95
+ addNodes?: N[];
96
+ removeNodes?: N[];
97
+ updateNodes?: N[];
98
+ addEdges?: E[];
99
+ removeEdges?: E[];
100
+ updateEdges?: E[];
101
+ description?: string;
102
+ };
103
+ type NodeProps<N> = {
104
+ id?: string;
52
105
  title?: string;
53
106
  text?: string;
107
+ type?: string;
54
108
  ports?: {
55
- in?: P[];
56
- out?: P[];
57
- };
58
- };
59
- type StructuredEdge = {
60
- source: {
61
- id: string;
62
- port?: string;
109
+ in?: (string | PortProps)[];
110
+ out?: (string | PortProps)[];
63
111
  };
64
- target: {
65
- id: string;
66
- port?: string;
67
- };
68
- type?: string;
112
+ render?: RenderNode<N>;
69
113
  };
70
- type StructuredPort = {
114
+ type EdgeEnd<N> = string | N | {
71
115
  id: string;
72
- label: string;
116
+ port?: string;
117
+ marker?: MarkerType;
118
+ } | {
119
+ node: N;
120
+ port?: string;
121
+ marker?: MarkerType;
73
122
  };
74
- type Nav = 'first' | 'last' | 'prev' | 'next';
75
- type NodeProps<N, P> = (node: N) => StructuredNode<P>;
76
- type EdgeProps<E> = (edge: E) => StructuredEdge;
77
- type PortProps<P> = (port: P) => StructuredPort;
78
- type APIOptions<N, E, P> = GraphOptions & CanvasOptions<N> & {
79
- nodeProps?: NodeProps<N, P>;
80
- edgeProps?: EdgeProps<E>;
81
- portProps?: PortProps<P>;
123
+ type EdgeProps<N> = {
124
+ id?: string;
125
+ label?: string;
126
+ source: EdgeEnd<N>;
127
+ target: EdgeEnd<N>;
128
+ type?: string;
82
129
  };
83
- type APIArguments<N, E, P> = APIOptions<N, E, P> & {
84
- nodes?: N[];
85
- edges?: E[];
130
+ type PortProps = {
131
+ id: string;
132
+ label?: string;
86
133
  };
87
- declare class API<N, E, P> {
134
+ type GetNodeProps<N> = (node: N) => NodeProps<N>;
135
+ type GetEdgeProps<N, E> = (edge: E) => EdgeProps<N>;
136
+
137
+ declare class Updater<N, E> {
138
+ update: Update<N, E>;
139
+ constructor();
140
+ describe(desc: string): Updater<N, E>;
141
+ addNode(node: any): Updater<N, E>;
142
+ deleteNode(node: any): Updater<N, E>;
143
+ updateNode(node: any): Updater<N, E>;
144
+ addEdge(edge: any): Updater<N, E>;
145
+ deleteEdge(edge: any): Updater<N, E>;
146
+ updateEdge(edge: any): Updater<N, E>;
147
+ static add<N, E>(nodes: N[], edges: E[]): Updater<N, E>;
148
+ }
149
+
150
+ declare class API<N, E> {
88
151
  private state;
89
152
  private seq;
90
153
  private index;
91
154
  private canvas;
92
- private _options;
93
- options: Required<APIOptions<N, E, P>>;
94
- constructor(options: APIOptions<N, E, P>);
95
- render(): HTMLElement;
155
+ private options;
156
+ private history;
157
+ private nodeIds;
158
+ private edgeIds;
159
+ private nodeVersions;
160
+ private nextNodeId;
161
+ private nextEdgeId;
162
+ private root;
163
+ constructor(args: APIArguments<N, E>);
164
+ init(): Promise<void>;
96
165
  nav(nav: Nav): void;
97
166
  private applyDiff;
98
- addNode(node: N): Promise<void>;
99
- deleteNode(node: N): Promise<void>;
100
- updateNode(node: N): Promise<void>;
101
- addEdge(edge: E): Promise<void>;
102
- deleteEdge(edge: E): Promise<void>;
103
- update(callback: (update: Update<N, E>) => void): Promise<void>;
167
+ addNode(node: any): Promise<void>;
168
+ deleteNode(node: any): Promise<void>;
169
+ updateNode(node: any): Promise<void>;
170
+ addEdge(edge: any): Promise<void>;
171
+ deleteEdge(edge: any): Promise<void>;
172
+ applyUpdate(update: Update<N, E>): Promise<void>;
173
+ private setNodePositions;
174
+ update(callback: (updater: Updater<N, E>) => void): Promise<void>;
104
175
  private measureNodes;
105
- private getDims;
106
- private _updateNode;
107
- private _updateEdge;
176
+ private parseNode;
177
+ private parseEdge;
178
+ private parseEdgeEnd;
179
+ private parseStringEdge;
180
+ private parsePorts;
181
+ private getNodeId;
182
+ private getEdgeId;
108
183
  private _addNode;
109
184
  private _removeNode;
185
+ private _updateNode;
110
186
  private _addEdge;
111
187
  private _removeEdge;
112
- private _onOptionChange;
113
- }
114
- declare class Update<N, E> {
115
- addedNodes: N[];
116
- removedNodes: N[];
117
- updatedNodes: N[];
118
- addedEdges: E[];
119
- removedEdges: E[];
120
- updatedEdges: E[];
121
- desc?: string;
122
- constructor();
123
- describe(desc: string): void;
124
- addNode(node: N): void;
125
- deleteNode(node: N): void;
126
- updateNode(node: N): void;
127
- addEdge(edge: E): void;
128
- deleteEdge(edge: E): void;
129
- updateEdge(edge: E): void;
188
+ private _updateEdge;
130
189
  }
131
- declare function graph<N, E, P>(args?: APIArguments<N, E, P>): Promise<API<N, E, P>>;
190
+
191
+ declare function graph<N, E>(args?: APIArguments<N, E>): Promise<API<N, E>>;
132
192
 
133
193
  export { graph as default, graph };
package/dist/index.d.ts CHANGED
@@ -2,14 +2,27 @@ type Side = 'source' | 'target';
2
2
  type MergeOrder = Side[];
3
3
  type NodeAlign = 'natural' | 'top' | 'bottom' | 'left' | 'right';
4
4
  type Orientation = 'TB' | 'BT' | 'LR' | 'RL';
5
-
5
+ type Nav = 'first' | 'last' | 'prev' | 'next';
6
6
  type LayoutStep = 'alignChildren' | 'alignParents' | 'compact';
7
7
 
8
+ type MarkerType = 'arrow' | 'circle' | 'diamond' | 'bar' | 'none';
9
+
10
+ type APIArguments<N, E> = {
11
+ options?: APIOptions<N, E>;
12
+ nodes?: N[];
13
+ edges?: E[];
14
+ history?: Update<N, E>[];
15
+ root: string;
16
+ };
17
+ type APIOptions<N, E> = {
18
+ graph?: GraphOptions;
19
+ canvas?: CanvasOptions<N>;
20
+ props?: PropsOptions<N, E>;
21
+ };
8
22
  type GraphOptions = {
9
23
  mergeOrder?: MergeOrder;
10
24
  nodeMargin?: number;
11
25
  dummyNodeSize?: number;
12
- defaultPortOffset?: number;
13
26
  nodeAlign?: NodeAlign;
14
27
  edgeSpacing?: number;
15
28
  turnRadius?: number;
@@ -18,116 +31,163 @@ type GraphOptions = {
18
31
  alignIterations?: number;
19
32
  alignThreshold?: number;
20
33
  separateTrackSets?: boolean;
34
+ markerSize?: number;
21
35
  layoutSteps?: LayoutStep[] | null;
22
36
  };
23
-
24
- type EdgeAttributes = {
25
- width?: number;
26
- style?: string;
27
- color?: string;
28
- turnRadius?: number;
29
- sourceTerminal?: string | null;
30
- targetTerminal?: string | null;
37
+ type RenderNode<N> = (node: N) => HTMLElement;
38
+ type ColorMode = 'light' | 'dark' | 'system';
39
+ /** Canvas background and general colors */
40
+ type CanvasTheme = {
41
+ /** Canvas background color */
42
+ bg?: string;
43
+ /** Shadow color for floating elements */
44
+ shadow?: string;
31
45
  };
32
- type NodeAttributes = {
33
- strokeWidth?: number;
34
- strokeStyle?: string;
46
+ /** Node styling properties */
47
+ type NodeTheme = {
48
+ /** Node background color */
49
+ bg?: string;
50
+ /** Node border color */
51
+ border?: string;
52
+ /** Node border color on hover */
53
+ borderHover?: string;
54
+ /** Node border color when selected */
55
+ borderSelected?: string;
56
+ /** Node text color */
57
+ text?: string;
58
+ /** Node secondary text color */
59
+ textMuted?: string;
35
60
  };
36
- type RenderNode<N> = (node: N) => HTMLElement;
37
- type EdgeStyle = (type: string) => EdgeAttributes;
38
- type NodeStyle<N> = (node: N) => NodeAttributes;
39
- type PortStyle = 'inside' | 'outside' | 'custom';
61
+ /** Port styling properties */
62
+ type PortTheme = {
63
+ /** Port background color */
64
+ bg?: string;
65
+ /** Port background color on hover */
66
+ bgHover?: string;
67
+ };
68
+ /** Edge styling properties */
69
+ type EdgeTheme = {
70
+ /** Edge stroke color */
71
+ color?: string;
72
+ };
73
+ /** Combined theme with all customizable properties */
74
+ type ThemeVars = CanvasTheme & NodeTheme & PortTheme & EdgeTheme;
40
75
  type CanvasOptions<N> = {
41
- renderNode?: RenderNode<N>;
42
- nodeStyle?: NodeStyle<N>;
43
- edgeStyle?: EdgeStyle;
44
76
  width?: number | string;
45
77
  height?: number | string;
46
- portStyle?: PortStyle;
78
+ /** Padding inside the canvas viewport (default: 20) */
79
+ padding?: number;
47
80
  classPrefix?: string;
81
+ markerSize?: number;
82
+ editable?: boolean;
83
+ panZoom?: boolean;
84
+ renderNode?: RenderNode<N>;
85
+ colorMode?: ColorMode;
86
+ theme?: ThemeVars;
87
+ nodeTypes?: Record<string, ThemeVars>;
88
+ edgeTypes?: Record<string, ThemeVars>;
48
89
  };
49
-
50
- type StructuredNode<P> = {
51
- id: string;
90
+ type PropsOptions<N, E> = {
91
+ node?: GetNodeProps<N>;
92
+ edge?: GetEdgeProps<N, E>;
93
+ };
94
+ type Update<N, E> = {
95
+ addNodes?: N[];
96
+ removeNodes?: N[];
97
+ updateNodes?: N[];
98
+ addEdges?: E[];
99
+ removeEdges?: E[];
100
+ updateEdges?: E[];
101
+ description?: string;
102
+ };
103
+ type NodeProps<N> = {
104
+ id?: string;
52
105
  title?: string;
53
106
  text?: string;
107
+ type?: string;
54
108
  ports?: {
55
- in?: P[];
56
- out?: P[];
57
- };
58
- };
59
- type StructuredEdge = {
60
- source: {
61
- id: string;
62
- port?: string;
109
+ in?: (string | PortProps)[];
110
+ out?: (string | PortProps)[];
63
111
  };
64
- target: {
65
- id: string;
66
- port?: string;
67
- };
68
- type?: string;
112
+ render?: RenderNode<N>;
69
113
  };
70
- type StructuredPort = {
114
+ type EdgeEnd<N> = string | N | {
71
115
  id: string;
72
- label: string;
116
+ port?: string;
117
+ marker?: MarkerType;
118
+ } | {
119
+ node: N;
120
+ port?: string;
121
+ marker?: MarkerType;
73
122
  };
74
- type Nav = 'first' | 'last' | 'prev' | 'next';
75
- type NodeProps<N, P> = (node: N) => StructuredNode<P>;
76
- type EdgeProps<E> = (edge: E) => StructuredEdge;
77
- type PortProps<P> = (port: P) => StructuredPort;
78
- type APIOptions<N, E, P> = GraphOptions & CanvasOptions<N> & {
79
- nodeProps?: NodeProps<N, P>;
80
- edgeProps?: EdgeProps<E>;
81
- portProps?: PortProps<P>;
123
+ type EdgeProps<N> = {
124
+ id?: string;
125
+ label?: string;
126
+ source: EdgeEnd<N>;
127
+ target: EdgeEnd<N>;
128
+ type?: string;
82
129
  };
83
- type APIArguments<N, E, P> = APIOptions<N, E, P> & {
84
- nodes?: N[];
85
- edges?: E[];
130
+ type PortProps = {
131
+ id: string;
132
+ label?: string;
86
133
  };
87
- declare class API<N, E, P> {
134
+ type GetNodeProps<N> = (node: N) => NodeProps<N>;
135
+ type GetEdgeProps<N, E> = (edge: E) => EdgeProps<N>;
136
+
137
+ declare class Updater<N, E> {
138
+ update: Update<N, E>;
139
+ constructor();
140
+ describe(desc: string): Updater<N, E>;
141
+ addNode(node: any): Updater<N, E>;
142
+ deleteNode(node: any): Updater<N, E>;
143
+ updateNode(node: any): Updater<N, E>;
144
+ addEdge(edge: any): Updater<N, E>;
145
+ deleteEdge(edge: any): Updater<N, E>;
146
+ updateEdge(edge: any): Updater<N, E>;
147
+ static add<N, E>(nodes: N[], edges: E[]): Updater<N, E>;
148
+ }
149
+
150
+ declare class API<N, E> {
88
151
  private state;
89
152
  private seq;
90
153
  private index;
91
154
  private canvas;
92
- private _options;
93
- options: Required<APIOptions<N, E, P>>;
94
- constructor(options: APIOptions<N, E, P>);
95
- render(): HTMLElement;
155
+ private options;
156
+ private history;
157
+ private nodeIds;
158
+ private edgeIds;
159
+ private nodeVersions;
160
+ private nextNodeId;
161
+ private nextEdgeId;
162
+ private root;
163
+ constructor(args: APIArguments<N, E>);
164
+ init(): Promise<void>;
96
165
  nav(nav: Nav): void;
97
166
  private applyDiff;
98
- addNode(node: N): Promise<void>;
99
- deleteNode(node: N): Promise<void>;
100
- updateNode(node: N): Promise<void>;
101
- addEdge(edge: E): Promise<void>;
102
- deleteEdge(edge: E): Promise<void>;
103
- update(callback: (update: Update<N, E>) => void): Promise<void>;
167
+ addNode(node: any): Promise<void>;
168
+ deleteNode(node: any): Promise<void>;
169
+ updateNode(node: any): Promise<void>;
170
+ addEdge(edge: any): Promise<void>;
171
+ deleteEdge(edge: any): Promise<void>;
172
+ applyUpdate(update: Update<N, E>): Promise<void>;
173
+ private setNodePositions;
174
+ update(callback: (updater: Updater<N, E>) => void): Promise<void>;
104
175
  private measureNodes;
105
- private getDims;
106
- private _updateNode;
107
- private _updateEdge;
176
+ private parseNode;
177
+ private parseEdge;
178
+ private parseEdgeEnd;
179
+ private parseStringEdge;
180
+ private parsePorts;
181
+ private getNodeId;
182
+ private getEdgeId;
108
183
  private _addNode;
109
184
  private _removeNode;
185
+ private _updateNode;
110
186
  private _addEdge;
111
187
  private _removeEdge;
112
- private _onOptionChange;
113
- }
114
- declare class Update<N, E> {
115
- addedNodes: N[];
116
- removedNodes: N[];
117
- updatedNodes: N[];
118
- addedEdges: E[];
119
- removedEdges: E[];
120
- updatedEdges: E[];
121
- desc?: string;
122
- constructor();
123
- describe(desc: string): void;
124
- addNode(node: N): void;
125
- deleteNode(node: N): void;
126
- updateNode(node: N): void;
127
- addEdge(edge: E): void;
128
- deleteEdge(edge: E): void;
129
- updateEdge(edge: E): void;
188
+ private _updateEdge;
130
189
  }
131
- declare function graph<N, E, P>(args?: APIArguments<N, E, P>): Promise<API<N, E, P>>;
190
+
191
+ declare function graph<N, E>(args?: APIArguments<N, E>): Promise<API<N, E>>;
132
192
 
133
193
  export { graph as default, graph };