@deck.gl-community/graph-layers 9.0.2 → 9.1.0-beta.3

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 (118) hide show
  1. package/LICENSE +1 -1
  2. package/dist/core/graph-engine.d.ts +16 -7
  3. package/dist/core/graph-engine.d.ts.map +1 -1
  4. package/dist/core/graph-engine.js +13 -4
  5. package/dist/core/graph-layout.d.ts +69 -0
  6. package/dist/core/graph-layout.d.ts.map +1 -0
  7. package/dist/core/{base-layout.js → graph-layout.js} +63 -80
  8. package/dist/core/interaction-manager.d.ts +1 -1
  9. package/dist/core/interaction-manager.d.ts.map +1 -1
  10. package/dist/{core → graph}/edge.d.ts +18 -17
  11. package/dist/graph/edge.d.ts.map +1 -0
  12. package/dist/{core → graph}/edge.js +12 -15
  13. package/dist/{core → graph}/graph.d.ts +34 -31
  14. package/dist/graph/graph.d.ts.map +1 -0
  15. package/dist/{core → graph}/graph.js +43 -36
  16. package/dist/{core → graph}/node.d.ts +20 -20
  17. package/dist/graph/node.d.ts.map +1 -0
  18. package/dist/{core → graph}/node.js +16 -18
  19. package/dist/index.cjs +1181 -434
  20. package/dist/index.cjs.map +4 -4
  21. package/dist/index.d.ts +16 -14
  22. package/dist/index.d.ts.map +1 -1
  23. package/dist/index.js +19 -18
  24. package/dist/layers/graph-layer.d.ts +45 -5
  25. package/dist/layers/graph-layer.d.ts.map +1 -1
  26. package/dist/layers/graph-layer.js +80 -38
  27. package/dist/layers/node-layers/{path-rounded-rectange-layer.d.ts → path-rounded-rectangle-layer.d.ts} +1 -1
  28. package/dist/layers/node-layers/path-rounded-rectangle-layer.d.ts.map +1 -0
  29. package/dist/layers/node-layers/rounded-rectangle-layer-fragment.d.ts +1 -1
  30. package/dist/layers/node-layers/rounded-rectangle-layer-fragment.d.ts.map +1 -1
  31. package/dist/layers/node-layers/rounded-rectangle-layer-fragment.js +1 -3
  32. package/dist/layers/node-layers/rounded-rectangle-layer.d.ts +12 -3
  33. package/dist/layers/node-layers/rounded-rectangle-layer.d.ts.map +1 -1
  34. package/dist/layers/node-layers/rounded-rectangle-layer.js +25 -11
  35. package/dist/layouts/d3-force/d3-force-layout.d.ts +12 -3
  36. package/dist/layouts/d3-force/d3-force-layout.d.ts.map +1 -1
  37. package/dist/layouts/d3-force/d3-force-layout.js +11 -11
  38. package/dist/layouts/d3-force/worker.d.ts.map +1 -1
  39. package/dist/layouts/experimental/force-multi-graph-layout.d.ts +43 -0
  40. package/dist/layouts/experimental/force-multi-graph-layout.d.ts.map +1 -0
  41. package/dist/layouts/experimental/force-multi-graph-layout.js +226 -0
  42. package/dist/layouts/experimental/hive-plot-layout.d.ts +34 -0
  43. package/dist/layouts/experimental/hive-plot-layout.d.ts.map +1 -0
  44. package/dist/layouts/experimental/hive-plot-layout.js +142 -0
  45. package/dist/layouts/experimental/radial-layout.d.ts +28 -0
  46. package/dist/layouts/experimental/radial-layout.d.ts.map +1 -0
  47. package/dist/layouts/experimental/radial-layout.js +164 -0
  48. package/dist/layouts/gpu-force/gpu-force-layout.d.ts +15 -3
  49. package/dist/layouts/gpu-force/gpu-force-layout.d.ts.map +1 -1
  50. package/dist/layouts/gpu-force/gpu-force-layout.js +20 -18
  51. package/dist/layouts/gpu-force/worker.d.ts.map +1 -1
  52. package/dist/layouts/simple-layout.d.ts +42 -0
  53. package/dist/layouts/simple-layout.d.ts.map +1 -0
  54. package/dist/layouts/{simple-layout/simple-layout.js → simple-layout.js} +8 -7
  55. package/dist/loaders/create-graph.d.ts +13 -0
  56. package/dist/loaders/create-graph.d.ts.map +1 -0
  57. package/dist/{utils → loaders}/create-graph.js +9 -4
  58. package/dist/loaders/edge-parsers.d.ts +2 -6
  59. package/dist/loaders/edge-parsers.d.ts.map +1 -1
  60. package/dist/loaders/json-loader.js +1 -1
  61. package/dist/loaders/node-parsers.d.ts +2 -3
  62. package/dist/loaders/node-parsers.d.ts.map +1 -1
  63. package/dist/loaders/simple-json-graph-loader.d.ts +12 -0
  64. package/dist/loaders/simple-json-graph-loader.d.ts.map +1 -0
  65. package/dist/loaders/simple-json-graph-loader.js +20 -0
  66. package/dist/loaders/table-graph-loader.d.ts +17 -0
  67. package/dist/loaders/table-graph-loader.d.ts.map +1 -0
  68. package/dist/loaders/table-graph-loader.js +91 -0
  69. package/dist/utils/log.d.ts +1 -1
  70. package/dist/utils/log.d.ts.map +1 -1
  71. package/dist/utils/log.js +3 -3
  72. package/dist/widgets/long-press-button.d.ts +13 -0
  73. package/dist/widgets/long-press-button.d.ts.map +1 -0
  74. package/dist/widgets/long-press-button.js +31 -0
  75. package/dist/widgets/view-control-widget.d.ts +78 -0
  76. package/dist/widgets/view-control-widget.d.ts.map +1 -0
  77. package/dist/widgets/view-control-widget.js +194 -0
  78. package/package.json +8 -6
  79. package/src/core/graph-engine.ts +30 -10
  80. package/src/core/graph-layout.ts +146 -0
  81. package/src/core/interaction-manager.ts +2 -2
  82. package/src/{core → graph}/edge.ts +19 -17
  83. package/src/{core → graph}/graph.ts +51 -36
  84. package/src/{core → graph}/node.ts +21 -20
  85. package/src/index.ts +28 -28
  86. package/src/layers/graph-layer.ts +133 -46
  87. package/src/layers/node-layers/rounded-rectangle-layer-fragment.ts +1 -3
  88. package/src/layers/node-layers/rounded-rectangle-layer.ts +34 -10
  89. package/src/layouts/d3-force/d3-force-layout.ts +21 -11
  90. package/src/layouts/experimental/force-multi-graph-layout.ts +268 -0
  91. package/src/layouts/experimental/hive-plot-layout.ts +182 -0
  92. package/src/layouts/experimental/radial-layout.ts +210 -0
  93. package/src/layouts/gpu-force/gpu-force-layout.ts +32 -17
  94. package/src/layouts/{simple-layout/simple-layout.ts → simple-layout.ts} +34 -19
  95. package/src/{utils → loaders}/create-graph.ts +9 -4
  96. package/src/loaders/edge-parsers.ts +2 -1
  97. package/src/loaders/json-loader.ts +1 -1
  98. package/src/loaders/node-parsers.ts +2 -1
  99. package/src/loaders/simple-json-graph-loader.ts +28 -0
  100. package/src/loaders/table-graph-loader.ts +124 -0
  101. package/src/utils/log.ts +3 -3
  102. package/src/widgets/long-press-button.tsx +50 -0
  103. package/src/widgets/view-control-widget.tsx +337 -0
  104. package/dist/core/base-layout.d.ts +0 -72
  105. package/dist/core/base-layout.d.ts.map +0 -1
  106. package/dist/core/edge.d.ts.map +0 -1
  107. package/dist/core/graph.d.ts.map +0 -1
  108. package/dist/core/node.d.ts.map +0 -1
  109. package/dist/layers/node-layers/path-rounded-rectange-layer.d.ts.map +0 -1
  110. package/dist/layouts/simple-layout/simple-layout.d.ts +0 -23
  111. package/dist/layouts/simple-layout/simple-layout.d.ts.map +0 -1
  112. package/dist/utils/create-graph.d.ts +0 -9
  113. package/dist/utils/create-graph.d.ts.map +0 -1
  114. package/src/core/base-layout.ts +0 -154
  115. /package/dist/layers/node-layers/{path-rounded-rectange-layer.js → path-rounded-rectangle-layer.js} +0 -0
  116. /package/src/layers/node-layers/{path-rounded-rectange-layer.ts → path-rounded-rectangle-layer.ts} +0 -0
  117. /package/src/layouts/d3-force/{worker.ts → worker.js} +0 -0
  118. /package/src/layouts/gpu-force/{worker.ts → worker.js} +0 -0
@@ -0,0 +1,124 @@
1
+ // deck.gl-community
2
+ // SPDX-License-Identifier: MIT
3
+ // Copyright (c) vis.gl contributors
4
+
5
+ import type {NodeOptions} from '../graph/node';
6
+ import type {EdgeOptions} from '../graph/edge';
7
+ import {Edge} from '../graph/edge';
8
+ import {Node} from '../graph/node';
9
+ import {Graph} from '../graph/graph';
10
+
11
+ import {log} from '../utils/log';
12
+
13
+ export type ParseGraphOptions = {
14
+ nodeIdField?: string;
15
+ edgeSourceField?: string;
16
+ edgeTargetField?: string;
17
+ edgeDirectedField?: string;
18
+ edgeDirected?: boolean;
19
+ nodeParser?: (nodeRow: any) => NodeOptions;
20
+ edgeParser?: (edgeRow: any) => EdgeOptions;
21
+ };
22
+
23
+ const defaultParseGraphOptions = {
24
+ nodeIdField: 'id',
25
+ edgeSourceField: 'sourceId',
26
+ edgeTargetField: 'targetId',
27
+ edgeDirectedField: undefined,
28
+ edgeDirected: false
29
+ // nodeParser: (nodeRow: any, options: ParseGraphOptions) => ({id: nodeRow.name, data: nodeRow}),
30
+ // edgeParser: (edgeRow: any, nodeIndexMap, options: ParseGraphOptions)=> {
31
+ // const sourceNodeId = edge[options.edgeSourceField];
32
+ // const targetNodeId = edge[options.edgeTargetField];
33
+ // return {
34
+ // id: `${sourceNodeId}-${targetNodeId}`,
35
+ // sourceId: nodeIndexMap[sourceNodeId],
36
+ // targetId: nodeIndexMap[targetNodeId],
37
+ // directed: true
38
+ // };
39
+ // };
40
+ } as const satisfies ParseGraphOptions;
41
+
42
+ export function tableGraphLoader(
43
+ tables: {nodes: any[]; edges: any[]},
44
+ options?: ParseGraphOptions
45
+ ): Graph {
46
+ options = {...defaultParseGraphOptions, ...options};
47
+
48
+ const {nodes, edges} = tables;
49
+
50
+ // const nodeIndexMap = nodes.reduce((res, node, idx) => {
51
+ // res[idx] = node[options.nodeIdField];
52
+ // return res;
53
+ // }, {});
54
+
55
+ function defaultNodeParser(nodeRow: any): NodeOptions {
56
+ return {id: nodeRow[options.nodeIdField]};
57
+ }
58
+
59
+ function defaultEdgeParser(edgeRow: any): EdgeOptions {
60
+ const sourceNodeId = edgeRow[options.edgeSourceField];
61
+ const targetNodeId = edgeRow[options.edgeTargetField];
62
+ return {
63
+ id: edgeRow.id || `${sourceNodeId}-${targetNodeId}`,
64
+ sourceId: sourceNodeId,
65
+ targetId: targetNodeId,
66
+ directed: options.edgeDirected
67
+ };
68
+ }
69
+
70
+ const nodeParser = options.nodeParser || defaultNodeParser;
71
+ const edgeParser = options.edgeParser || defaultEdgeParser;
72
+
73
+ // add nodes
74
+
75
+ if (!nodes) {
76
+ log.error('Invalid graph: nodes is missing.')();
77
+ return null;
78
+ }
79
+
80
+ const glNodes = nodes.map((node) => {
81
+ const {id} = nodeParser(node);
82
+ return new Node({id, data: node});
83
+ });
84
+
85
+ const glEdges = edges.map((edge) => {
86
+ const {id, sourceId, targetId, directed} = edgeParser(edge);
87
+ return new Edge({
88
+ id,
89
+ sourceId,
90
+ targetId,
91
+ directed: directed || false,
92
+ data: edge
93
+ });
94
+ });
95
+
96
+ // create a new empty graph
97
+ const name = 'loaded';
98
+ const graph = new Graph({name, nodes: glNodes, edges: glEdges});
99
+ return graph;
100
+ }
101
+
102
+ // export function basicNodeParser(node: any): Pick<NodeOptions, 'id'> {
103
+ // if (node.id === undefined) {
104
+ // log.error('Invalid node: id is missing.')();
105
+ // return null;
106
+ // }
107
+ // return {id: node.id};
108
+ // }
109
+
110
+ // export function basicEdgeParser(edge: any): Omit<EdgeOptions, 'data'> {
111
+ // const {id, directed, sourceId, targetId} = edge;
112
+
113
+ // if (sourceId === undefined || targetId === undefined) {
114
+ // log.error('Invalid edge: sourceId or targetId is missing.')();
115
+ // return null;
116
+ // }
117
+
118
+ // return {
119
+ // id,
120
+ // directed: directed || false,
121
+ // sourceId,
122
+ // targetId
123
+ // };
124
+ // }
package/src/utils/log.ts CHANGED
@@ -2,8 +2,8 @@
2
2
  // SPDX-License-Identifier: MIT
3
3
  // Copyright (c) vis.gl contributors
4
4
 
5
- import {Log, COLOR} from 'probe.gl';
5
+ import {Log, COLOR} from '@probe.gl/log';
6
6
 
7
- export const log = new Log({id: 'react-graph-layers'}).enable();
7
+ export const log = new Log({id: 'graph-layers'}).enable();
8
8
 
9
- log.log({color: COLOR.CYAN}, 'Initialize react-graph-layers logger.')();
9
+ log.log({color: COLOR.CYAN}, 'Initialize graph-layers logger.')();
@@ -0,0 +1,50 @@
1
+ // deck.gl-community
2
+ // SPDX-License-Identifier: MIT
3
+ // Copyright (c) vis.gl contributors
4
+
5
+ import {Component} from 'preact';
6
+
7
+ export type LongPressButtonProps = {
8
+ onClick: () => void;
9
+ children: any;
10
+ };
11
+
12
+ export class LongPressButton extends Component<LongPressButtonProps> {
13
+ buttonPressTimer: ReturnType<typeof setTimeout> | null = null;
14
+
15
+ _repeat = () => {
16
+ if (this.buttonPressTimer) {
17
+ this.props.onClick();
18
+ this.buttonPressTimer = setTimeout(this._repeat, 100);
19
+ }
20
+ };
21
+
22
+ _handleButtonPress = () => {
23
+ this.buttonPressTimer = setTimeout(this._repeat, 100);
24
+ };
25
+
26
+ _handleButtonRelease = () => {
27
+ if (this.buttonPressTimer) {
28
+ clearTimeout(this.buttonPressTimer);
29
+ }
30
+ this.buttonPressTimer = null;
31
+ };
32
+
33
+ render() {
34
+ return (
35
+ <div className="deck-widget-button">
36
+ <div
37
+ style={{
38
+ pointerEvents: 'auto'
39
+ }}
40
+ onMouseDown={(event) => {
41
+ this._handleButtonPress();
42
+ document.addEventListener('mouseup', this._handleButtonRelease, {once: true});
43
+ }}
44
+ >
45
+ {this.props.children}
46
+ </div>
47
+ </div>
48
+ );
49
+ }
50
+ }
@@ -0,0 +1,337 @@
1
+ // deck.gl-community
2
+ // SPDX-License-Identifier: MIT
3
+ // Copyright (c) vis.gl contributors
4
+
5
+ import {Component, render} from 'preact';
6
+
7
+ // import {FlyToInterpolator} from '@deck.gl/core';
8
+ import type {Deck, Viewport, Widget, WidgetPlacement} from '@deck.gl/core';
9
+ import {LongPressButton} from './long-press-button';
10
+
11
+ export const ViewControlWrapper = ({children}) => (
12
+ <div
13
+ style={{
14
+ alignItems: 'center',
15
+ display: 'flex',
16
+ flexDirection: 'column',
17
+ position: 'absolute',
18
+ zIndex: 99,
19
+ userSelect: 'none'
20
+ }}
21
+ >
22
+ {' '}
23
+ {children}{' '}
24
+ </div>
25
+ );
26
+
27
+ export const NavigationButtonContainer = ({children}) => (
28
+ <div
29
+ style={{
30
+ background: '#f7f7f7',
31
+ borderRadius: '23px',
32
+ border: '0.5px solid #eaeaea',
33
+ boxShadow: 'inset 11px 11px 5px -7px rgba(230, 230, 230, 0.49)',
34
+ height: '46px',
35
+ width: '46px'
36
+ }}
37
+ >
38
+ {' '}
39
+ {children}{' '}
40
+ </div>
41
+ );
42
+
43
+ export type NavigationButtonProps = {
44
+ left: any;
45
+ top: any;
46
+ rotate?: number;
47
+ children?: any;
48
+ onClick?: () => void;
49
+ };
50
+
51
+ export const NavigationButton = (props: NavigationButtonProps) => (
52
+ <div
53
+ onClick={props.onClick}
54
+ style={{
55
+ color: '#848484',
56
+ cursor: 'pointer',
57
+ position: 'absolute',
58
+ left: props.left,
59
+ top: props.top,
60
+ transform: `rotate(${props.rotate || 0}deg)`
61
+ // &:hover,
62
+ // &:active {
63
+ // color: #00ade6;
64
+ // }
65
+ }}
66
+ >
67
+ {' '}
68
+ {props.children}{' '}
69
+ </div>
70
+ );
71
+
72
+ export const ZoomControlWrapper = ({children}) => (
73
+ <div
74
+ style={{
75
+ alignItems: 'center',
76
+ background: '#f7f7f7',
77
+ border: '0.5px solid #eaeaea',
78
+ display: 'flex',
79
+ flexDirection: 'column',
80
+ marginTop: '6px',
81
+ padding: '2px 0',
82
+ width: '18px'
83
+ }}
84
+ >
85
+ {' '}
86
+ {children}{' '}
87
+ </div>
88
+ );
89
+
90
+ export const VerticalSlider = ({children}) => (
91
+ <div
92
+ style={{
93
+ display: 'inline-block',
94
+ height: '100px',
95
+ padding: '0',
96
+ width: '10px'
97
+
98
+ // > input[type='range'][orient='vertical'] {
99
+ // -webkit-appearance: slider-vertical;
100
+ // height: 100px;
101
+ // padding: 0;
102
+ // margin: 0;
103
+ // width: 10px;
104
+ // }
105
+ }}
106
+ >
107
+ {' '}
108
+ {children}{' '}
109
+ </div>
110
+ );
111
+
112
+ export const ZoomControlButton = ({children}) => (
113
+ <div
114
+ style={{
115
+ cursor: 'pointer',
116
+ fontSize: '14px',
117
+ fontWeight: 500,
118
+ margin: '-4px'
119
+
120
+ // &:hover,
121
+ // &:active {
122
+ // color: #00ade6;
123
+ // }
124
+ }}
125
+ >
126
+ {' '}
127
+ {children}{' '}
128
+ </div>
129
+ );
130
+
131
+ export type ViewControlProps = {
132
+ id?: string;
133
+ viewId?: string;
134
+ placement?: WidgetPlacement;
135
+ fitBounds: () => void;
136
+ panBy?: (dx: number, dy: number) => void;
137
+ zoomBy?: (delta: number) => void;
138
+ zoomLevel: number;
139
+ minZoom: number;
140
+ maxZoom: number;
141
+ deltaPan: number;
142
+ deltaZoom: number;
143
+ /** CSS inline style overrides. */
144
+ style?: Partial<CSSStyleDeclaration>;
145
+ /** Additional CSS class. */
146
+ className?: string;
147
+ };
148
+
149
+ export class ViewControl extends Component<ViewControlProps> {
150
+ static displayName = 'ViewControl';
151
+
152
+ static defaultProps: Required<ViewControlProps> = {
153
+ id: undefined,
154
+ viewId: undefined,
155
+ placement: 'top-left',
156
+ fitBounds: () => {},
157
+ panBy: () => {},
158
+ zoomBy: () => {},
159
+ zoomLevel: 1,
160
+ deltaPan: 10,
161
+ deltaZoom: 0.1,
162
+ minZoom: 0.1,
163
+ maxZoom: 1,
164
+ style: {},
165
+ className: ''
166
+ };
167
+
168
+ // pan actions
169
+ panUp = () => this.props.panBy(0, this.props.deltaPan);
170
+ panDown = () => this.props.panBy(0, -1 * this.props.deltaPan);
171
+ panLeft = () => this.props.panBy(this.props.deltaPan, 0);
172
+ panRight = () => this.props.panBy(-1 * this.props.deltaPan, 0);
173
+
174
+ // zoom actions
175
+ zoomIn = () => this.props.zoomBy(this.props.deltaZoom);
176
+ zoomOut = () => this.props.zoomBy(-1 * this.props.deltaZoom);
177
+ onChangeZoomLevel = (evt) => {
178
+ const delta = evt.target.value - this.props.zoomLevel;
179
+ this.props.zoomBy(delta);
180
+ };
181
+
182
+ render() {
183
+ const buttons = [
184
+ {top: -2, left: 14, rotate: 0, onClick: this.panUp, content: '▲', key: 'up'},
185
+ {top: 12, left: 0, rotate: -90, onClick: this.panLeft, content: '◀', key: 'left'},
186
+ {top: 12, left: 28, rotate: 90, onClick: this.panRight, content: '▶', key: 'right'},
187
+ {top: 25, left: 14, rotate: 180, onClick: this.panDown, content: '▼', key: 'down'}
188
+ ];
189
+
190
+ return (
191
+ <ViewControlWrapper>
192
+ <NavigationButtonContainer>
193
+ {buttons.map((b: any) => (
194
+ <NavigationButton key={b.key} top={`${b.top}px`} left={`${b.left}px`} rotate={b.rotate}>
195
+ <LongPressButton onClick={b.onClick}>{b.content}</LongPressButton>
196
+ </NavigationButton>
197
+ ))}
198
+ <NavigationButton
199
+ top={'12px'}
200
+ left={'16px'}
201
+ onClick={() => {
202
+ // console.log('on click fit bounds') || this.props.fitBounds;
203
+ }}
204
+ >
205
+ {'¤'}
206
+ </NavigationButton>
207
+ </NavigationButtonContainer>
208
+ <ZoomControlWrapper>
209
+ <ZoomControlButton>
210
+ <LongPressButton onClick={this.zoomIn}>{'+'}</LongPressButton>
211
+ </ZoomControlButton>
212
+ <VerticalSlider>
213
+ <input
214
+ type="range"
215
+ value={this.props.zoomLevel}
216
+ min={this.props.minZoom}
217
+ max={this.props.maxZoom}
218
+ step={this.props.deltaZoom}
219
+ onChange={this.onChangeZoomLevel}
220
+ /* @ts-expect-error TODO */
221
+ orient="vertical"
222
+ />
223
+ </VerticalSlider>
224
+ <ZoomControlButton>
225
+ <LongPressButton onClick={this.zoomOut}>{'-'}</LongPressButton>
226
+ </ZoomControlButton>
227
+ </ZoomControlWrapper>
228
+ </ViewControlWrapper>
229
+ );
230
+ }
231
+ }
232
+
233
+ export class ViewControlWidget implements Widget<ViewControlProps> {
234
+ id = 'zoom';
235
+ props: ViewControlProps;
236
+ placement: WidgetPlacement = 'top-left';
237
+ orientation: 'vertical' | 'horizontal' = 'vertical';
238
+ viewId?: string | null = null;
239
+ viewports: {[id: string]: Viewport} = {};
240
+ deck?: Deck<any>;
241
+ element?: HTMLDivElement;
242
+
243
+ constructor(props: ViewControlProps) {
244
+ this.props = {...ViewControl.defaultProps, ...props};
245
+ this.id = props.id || 'zoom';
246
+ this.viewId = props.viewId || null;
247
+ this.placement = props.placement || 'top-left';
248
+ // this.orientation = props.orientation || 'vertical';
249
+ // props.transitionDuration = props.transitionDuration || 200;
250
+ // props.zoomInLabel = props.zoomInLabel || 'Zoom In';
251
+ // props.zoomOutLabel = props.zoomOutLabel || 'Zoom Out';
252
+ props.style = props.style || {};
253
+ this.props = props;
254
+ }
255
+
256
+ onAdd({deck}: {deck: Deck<any>}): HTMLDivElement {
257
+ this.deck = deck;
258
+ this.element = document.createElement('div');
259
+
260
+ const {style, className} = this.props;
261
+ this.element.classList.add('deck-widget', 'deck-widget-zoom');
262
+ if (className) {
263
+ this.element.classList.add(className);
264
+ }
265
+ if (style) {
266
+ Object.entries(style).map(([key, value]) =>
267
+ this.element.style.setProperty(key, value as string)
268
+ );
269
+ }
270
+ const ui = (
271
+ <ViewControl
272
+ {...this.props}
273
+ zoomBy={this.handleDeltaZoom.bind(this)}
274
+ panBy={this.handlePanBy.bind(this)}
275
+ />
276
+ );
277
+ render(ui, this.element);
278
+
279
+ return this.element;
280
+ }
281
+
282
+ onRemove() {
283
+ this.deck = undefined;
284
+ this.element = undefined;
285
+ }
286
+
287
+ setProps(props: Partial<ViewControlProps>) {
288
+ Object.assign(this.props, props);
289
+ }
290
+
291
+ onViewportChange(viewport: Viewport) {
292
+ this.viewports[viewport.id] = viewport;
293
+ }
294
+
295
+ handleDeltaZoom(deltaZoom: number) {
296
+ // console.log('Handle delta zoom');
297
+ for (const view of this.deck.getViewports()) {
298
+ this.handleZoomView(view, view.zoom + deltaZoom);
299
+ }
300
+ }
301
+
302
+ handlePanBy(deltaX: number, deltaY: number) {
303
+ // console.log('Handle panby', deltaX, deltaY);
304
+ for (const viewport of this.deck.getViewports()) {
305
+ this.handlePanViewport(viewport, deltaX, deltaY);
306
+ }
307
+ }
308
+
309
+ handleZoomView(viewport: Viewport, nextZoom: number) {
310
+ const viewId = this.viewId || viewport?.id || 'default-view';
311
+ // @ts-expect-error TODO we lack a proper API for getting viewStates
312
+ const viewState = this.deck.viewManager.viewState || viewport;
313
+ const nextViewState = {
314
+ ...viewState,
315
+ zoom: nextZoom
316
+ // transitionDuration: this.props.transitionDuration,
317
+ // transitionInterpolator: new FlyToInterpolator()
318
+ };
319
+
320
+ // @ts-ignore Using private method temporary until there's a public one
321
+ this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
322
+ }
323
+
324
+ handlePanViewport(viewport: Viewport, deltaX: number, deltaY: number) {
325
+ const viewId = this.viewId || viewport?.id || 'default-view';
326
+ // @ts-expect-error TODO we lack a proper API for getting viewStates
327
+ const viewState = this.deck.viewManager.viewState || viewport;
328
+ // console.log('Handle pan viewport', deltaX, deltaY, viewState);
329
+ const nextViewState = {
330
+ ...viewState,
331
+ position: [viewport.position[0] + deltaX, viewport.position[1] + deltaY]
332
+ };
333
+
334
+ // @ts-ignore Using private method temporary until there's a public one
335
+ this.deck._onViewStateChange({viewId, viewState: nextViewState, interactionState: {}});
336
+ }
337
+ }
@@ -1,72 +0,0 @@
1
- export interface BaseLayoutOptions {
2
- }
3
- /**
4
- * All the layout classes are extended from this base layout class.
5
- */
6
- export declare class BaseLayout extends EventTarget {
7
- /** Name of the layout. */
8
- protected readonly _name: string;
9
- /** Extra configuration options of the layout. */
10
- protected _options: BaseLayoutOptions;
11
- version: number;
12
- state: string;
13
- /**
14
- * Constructor of BaseLayout
15
- * @param {Object} options extra configuration options of the layout
16
- */
17
- constructor(options?: BaseLayoutOptions);
18
- /**
19
- * @fires BaseLayout#onLayoutStart
20
- * @protected
21
- */
22
- _onLayoutStart(): void;
23
- /**
24
- * @fires BaseLayout#onLayoutChange
25
- * @protected
26
- */
27
- _onLayoutChange(): void;
28
- /**
29
- * @fires BaseLayout#onLayoutDone
30
- * @protected
31
- */
32
- _onLayoutDone(): void;
33
- /**
34
- * @fires BaseLayout#onLayoutError
35
- * @protected
36
- */
37
- _onLayoutError(): void;
38
- /**
39
- * Check the equality of two layouts
40
- * @param {Object} layout The layout to be compared.
41
- * @return {Bool} True if the layout is the same as itself.
42
- */
43
- equals(layout: BaseLayout): boolean;
44
- /** virtual functions: will be implemented in the child class */
45
- initializeGraph(graph: any): void;
46
- updateGraph(graph: any): void;
47
- start(): void;
48
- update(): void;
49
- resume(): void;
50
- stop(): void;
51
- getNodePosition(node: Node): [number, number];
52
- getEdgePosition(edge: any): {
53
- type: string;
54
- sourcePosition: number[];
55
- targetPosition: number[];
56
- controlPoints: any[];
57
- };
58
- /**
59
- * Pin the node to a designated position, and the node won't move anymore
60
- * @param {Object} node Node to be locked
61
- * @param {Number} x x coordinate
62
- * @param {Number} y y coordinate
63
- */
64
- lockNodePosition(node: any, x: any, y: any): void;
65
- /**
66
- * Unlock the node, the node will be able to move freely.
67
- * @param {Object} node Node to be unlocked
68
- */
69
- unlockNodePosition(node: any): void;
70
- _updateState(state: any): void;
71
- }
72
- //# sourceMappingURL=base-layout.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-layout.d.ts","sourceRoot":"","sources":["../../src/core/base-layout.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,iBAAiB;CAAG;AAErC;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IACzC,0BAA0B;IAC1B,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAgB;IAChD,iDAAiD;IACjD,SAAS,CAAC,QAAQ,EAAE,iBAAiB,CAAC;IAE/B,OAAO,SAAK;IACZ,KAAK,SAAqB;IAEjC;;;OAGG;gBACS,OAAO,GAAE,iBAAsB;IAK3C;;;OAGG;IACH,cAAc,IAAI,IAAI;IAYtB;;;OAGG;IACH,eAAe,IAAI,IAAI;IAYvB;;;OAGG;IACH,aAAa,IAAI,IAAI;IAYrB;;;OAGG;IACH,cAAc,IAAI,IAAI;IAYtB;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,OAAO;IAOnC,gEAAgE;IAGhE,eAAe,CAAC,KAAK,KAAA;IAErB,WAAW,CAAC,KAAK,KAAA;IAEjB,KAAK;IAEL,MAAM;IAEN,MAAM;IAEN,IAAI;IAEJ,eAAe,CAAC,IAAI,EAAE,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IAI7C,eAAe,CAAC,IAAI,KAAA;;;;;;IASpB;;;;;OAKG;IACH,gBAAgB,CAAC,IAAI,KAAA,EAAE,CAAC,KAAA,EAAE,CAAC,KAAA;IAE3B;;;OAGG;IACH,kBAAkB,CAAC,IAAI,KAAA;IAEvB,YAAY,CAAC,KAAK,KAAA;CAInB"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"edge.d.ts","sourceRoot":"","sources":["../../src/core/edge.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,IAAI,EAAC,kBAAe;AAE5B,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,qBAAa,IAAI;IACf,+BAA+B;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,OAAO,CAAC,SAAS,CAAkB;IACnC,6BAA6B;IAC7B,OAAO,CAAC,SAAS,CAAkB;IACnC,2CAA2C;IAC3C,OAAO,CAAC,SAAS,CAAU;IAC3B,yCAAyC;IACzC,OAAO,CAAC,KAAK,CAA0B;IACvC,gEAAgE;IAChE,SAAgB,MAAM,QAAQ;IAC9B,wCAAwC;IACxC,OAAO,CAAC,QAAQ,CAAC,eAAe,CAA4B;IAC5D,kBAAkB;IACX,KAAK,SAAsB;IAElC;;;;;;;OAOG;gBACS,EAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAgB,EAAC,EAAE,WAAW;IAQzE;;;OAGG;IACH,KAAK,IAAI,MAAM,GAAG,MAAM;IAIxB;;;OAGG;IACH,UAAU,IAAI,OAAO;IAIrB;;;OAGG;IACH,eAAe,IAAI,MAAM,GAAG,MAAM;IAIlC;;;OAGG;IACH,eAAe,IAAI,MAAM,GAAG,MAAM;IAIlC;;;;OAIG;IACH,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAatC;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAI5C;;;;OAIG;IACH,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAIlD;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI7B;;;OAGG;IACH,QAAQ,IAAI,MAAM;IAIlB,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAIzB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAI5B,iBAAiB,IAAI,IAAI,EAAE;CAG5B"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"graph.d.ts","sourceRoot":"","sources":["../../src/core/graph.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,IAAI,EAAC,kBAAe;AAC5B,OAAO,EAAC,IAAI,EAAC,kBAAe;AAG5B,qBAAa,KAAM,SAAQ,WAAW;IACpC,4BAA4B;IAC5B,OAAO,CAAC,QAAQ,CAA4B;IAC5C,4BAA4B;IAC5B,OAAO,CAAC,QAAQ,CAA4B;IAC5C;;;OAGG;IACH,OAAO,CAAC,KAAK,CAAiC;IAC9C,oGAAoG;IAC7F,OAAO,SAAK;IACnB,gDAAgD;IAChD,OAAO,CAAC,MAAM,CAAmD;IAEjE;;;OAGG;gBACS,KAAK,GAAE,KAAK,GAAG,IAAW;IAYtC;;;OAGG;IACH,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAIhC;;OAEG;IACH,YAAY,IAAI,MAAM;IAItB;;;OAGG;IACH,WAAW,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC;IAShD;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAQzB;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAalC;;;OAGG;IACH,QAAQ,IAAI,IAAI,EAAE;IAMlB;;;OAGG;IACH,UAAU,IAAI,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,IAAI,CAAC;IAI3C;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS;IAInD;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAM5B;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAgBzB;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;IAKlC;;;OAGG;IACH,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAM5B;;;OAGG;IACH,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAgBzC;;;OAGG;IACH,QAAQ,IAAI,IAAI,EAAE;IAMlB;;;OAGG;IACH,UAAU,IAAI,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC;IAIlC;;;OAGG;IACH,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAezC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAIvC;;;;OAIG;IACH,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE;IASlD;;;;OAIG;IACH,eAAe,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE;IAShD;;;;OAIG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM;IAS1C;;OAEG;IACH,UAAU,IAAI,IAAI;IAKlB;;OAEG;IACH,UAAU,IAAI,IAAI;IAKlB;;OAEG;IACH,KAAK,IAAI,IAAI;IAMb;;OAEG;IACH,aAAa,IAAI,IAAI;IAIrB;;;OAGG;IACH,OAAO,IAAI,OAAO;IAIlB;;;;OAIG;IACH,MAAM,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO;IAOzB,YAAY,IAAI,IAAI;IAIpB,YAAY,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO,EAAE,WAAW,EAAE,OAAO,GAAG,IAAI;CAGjE"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../src/core/node.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAE,OAAO,EAAC,uBAAoB;AAChD,OAAO,EAAC,IAAI,EAAC,kBAAe;AAE5B,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAGD,qBAAa,IAAI;IACR,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,uCAAuC;IACvC,OAAO,CAAC,KAAK,CAA0B;IACvC,kBAAkB;IAClB,OAAO,CAAC,eAAe,CAA4B;IACnD,qCAAqC;IAC9B,KAAK,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,CAAsB;IAC9D,gCAAgC;IAChC,OAAO,CAAC,WAAW,CAAU;IAC7B,6EAA6E;IAC7E,OAAO,CAAC,wBAAwB,CAAU;IAC1C,gEAAgE;IAChE,SAAgB,MAAM,QAAQ;IAC9B;;;;OAIG;gBACS,EAAC,EAAE,EAAE,UAAkB,EAAE,uBAA+B,EAAE,IAAS,EAAC,EAAE,WAAW;IAO7F;;;OAGG;IACH,KAAK,IAAI,MAAM,GAAG,MAAM;IAIxB;;;OAGG;IACH,SAAS,IAAI,MAAM;IAInB;;;OAGG;IACH,WAAW,IAAI,MAAM;IAWrB;;;OAGG;IACH,YAAY,IAAI,MAAM;IAWtB;;;OAGG;IACH,aAAa,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE;IAepC;;;OAGG;IACH,iBAAiB,IAAI,IAAI,EAAE;IAI3B;;;;OAIG;IACH,gBAAgB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAatC;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAI5C;;;;OAIG;IACH,eAAe,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAIlD;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI;IAIjD;;;OAGG;IACH,QAAQ,IAAI,OAAO,CAAC,OAAO,UAAU,CAAC;IAItC;;;OAGG;IACH,iBAAiB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI;IAQ5C;;;OAGG;IACH,oBAAoB,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI;IAQ/C;;OAEG;IACH,mBAAmB,IAAI,IAAI;IAK3B,YAAY,IAAI,OAAO;IAIvB,6BAA6B,IAAI,OAAO;CAGzC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"path-rounded-rectange-layer.d.ts","sourceRoot":"","sources":["../../../src/layers/node-layers/path-rounded-rectange-layer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAa7C,qBAAa,8BAA+B,SAAQ,cAAc;IAChE,MAAM,CAAC,SAAS,SAAoC;IAEpD,YAAY;CAkCb"}
@@ -1,23 +0,0 @@
1
- import { BaseLayout } from "../../core/base-layout.js";
2
- import { Node } from "../../core/node.js";
3
- import { Graph } from "../../core/graph.js";
4
- type AccessorVec2 = (node: Node) => [number, number];
5
- export declare class SimpleLayout extends BaseLayout {
6
- protected readonly _name = "SimpleLayout";
7
- protected _graph: Graph | null;
8
- protected _nodeMap: Record<string, Node>;
9
- protected _nodePositionMap: Record<string, AccessorVec2>;
10
- constructor(options?: {});
11
- initializeGraph(graph: Graph): void;
12
- _notifyLayoutComplete(): void;
13
- start(): void;
14
- update(): void;
15
- resume(): void;
16
- updateGraph(graph: Graph): void;
17
- setNodePositionAccessor: (accessor: any) => void;
18
- getNodePosition: (node: any) => any;
19
- getEdgePosition: (edge: any) => any;
20
- lockNodePosition: (node: any, x: any, y: any) => void;
21
- }
22
- export {};
23
- //# sourceMappingURL=simple-layout.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"simple-layout.d.ts","sourceRoot":"","sources":["../../../src/layouts/simple-layout/simple-layout.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAoB,kCAA+B;AACrE,OAAO,EAAC,IAAI,EAAC,2BAAwB;AAErC,OAAO,EAAC,KAAK,EAAC,4BAAyB;AAEvC,KAAK,YAAY,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAWrD,qBAAa,YAAa,SAAQ,UAAU;IAC1C,SAAS,CAAC,QAAQ,CAAC,KAAK,kBAAkB;IAC1C,SAAS,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI,CAAQ;IACtC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAM;IAC9C,SAAS,CAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAM;gBAElD,OAAO,KAAK;IAIxB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAInC,qBAAqB,IAAI,IAAI;IAM7B,KAAK,IAAI,IAAI;IAIb,MAAM,IAAI,IAAI;IAId,MAAM,IAAI,IAAI;IAId,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAY/B,uBAAuB,0BAErB;IAEF,eAAe,iBAAoD,GAAG,CAAC;IAEvE,eAAe,iBAQR,GAAG,CACR;IAEF,gBAAgB,sCAId;CACH"}
@@ -1,9 +0,0 @@
1
- import { Graph } from "../core/graph.js";
2
- export declare function createGraph({ name, nodes, edges, nodeParser, edgeParser }: {
3
- name: any;
4
- nodes: any;
5
- edges: any;
6
- nodeParser: any;
7
- edgeParser: any;
8
- }): Graph;
9
- //# sourceMappingURL=create-graph.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"create-graph.d.ts","sourceRoot":"","sources":["../../src/utils/create-graph.ts"],"names":[],"mappings":"AAMA,OAAO,EAAC,KAAK,EAAC,yBAAsB;AAEpC,wBAAgB,WAAW,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAC;;;;;;CAAA,SA6BvE"}