@deck.gl-community/graph-layers 9.2.0-beta.8 → 9.2.8
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 +3 -0
- package/dist/_deprecated/old-constants.d.ts.map +1 -1
- package/dist/_deprecated/old-constants.js.map +1 -1
- package/dist/core/graph-layout.d.ts.map +1 -1
- package/dist/core/graph-layout.js.map +1 -1
- package/dist/core/interaction-manager.d.ts.map +1 -1
- package/dist/core/interaction-manager.js.map +1 -1
- package/dist/graph/arrow-graph.d.ts.map +1 -1
- package/dist/graph/arrow-graph.js.map +1 -1
- package/dist/graph/classic-graph.d.ts.map +1 -1
- package/dist/graph/classic-graph.js +1 -3
- package/dist/graph/classic-graph.js.map +1 -1
- package/dist/graph/functions/arrow-utils.d.ts.map +1 -1
- package/dist/graph/functions/arrow-utils.js +5 -3
- package/dist/graph/functions/arrow-utils.js.map +1 -1
- package/dist/graph/functions/create-graph-from-data.d.ts.map +1 -1
- package/dist/graph/functions/create-graph-from-data.js.map +1 -1
- package/dist/graph/graph-normalization.d.ts.map +1 -1
- package/dist/graph/graph-normalization.js.map +1 -1
- package/dist/graph-data/arrow-graph-data-builder.d.ts.map +1 -1
- package/dist/graph-data/arrow-graph-data-builder.js.map +1 -1
- package/dist/graph-data/graph-data-builder.d.ts.map +1 -1
- package/dist/graph-data/plain-graph-data-builder.d.ts.map +1 -1
- package/dist/graph-style-schema.cdn.js +1 -1
- package/dist/graph-style-schema.json +1 -1
- package/dist/index.cjs +42 -39
- package/dist/index.cjs.map +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/layers/common-layers/grid-layer/grid-layer.d.ts.map +1 -1
- package/dist/layers/common-layers/grid-layer/grid-layer.js +6 -16
- package/dist/layers/common-layers/grid-layer/grid-layer.js.map +1 -1
- package/dist/layers/edge-attachment-helper.d.ts.map +1 -1
- package/dist/layers/edge-attachment-helper.js +1 -3
- package/dist/layers/edge-attachment-helper.js.map +1 -1
- package/dist/layers/edge-layer.js +4 -4
- package/dist/layers/edge-layer.js.map +1 -1
- package/dist/layers/edge-layers/arrow-2d-geometry.js +1 -8
- package/dist/layers/edge-layers/arrow-2d-geometry.js.map +1 -1
- package/dist/layers/graph-layer.d.ts.map +1 -1
- package/dist/layers/graph-layer.js +9 -11
- package/dist/layers/graph-layer.js.map +1 -1
- package/dist/layouts/d3-dag/collapsable-d3-dag-layout.d.ts.map +1 -1
- package/dist/layouts/d3-dag/collapsable-d3-dag-layout.js.map +1 -1
- package/dist/layouts/d3-dag/d3-dag-layout.d.ts.map +1 -1
- package/dist/layouts/d3-dag/d3-dag-layout.js +9 -2
- package/dist/layouts/d3-dag/d3-dag-layout.js.map +1 -1
- package/dist/layouts/experimental/radial-layout.d.ts.map +1 -1
- package/dist/layouts/experimental/radial-layout.js.map +1 -1
- package/dist/layouts/simple-layout.d.ts.map +1 -1
- package/dist/layouts/simple-layout.js +4 -1
- package/dist/layouts/simple-layout.js.map +1 -1
- package/dist/loaders/dot-graph-loader.d.ts.map +1 -1
- package/dist/loaders/dot-graph-loader.js +10 -3
- package/dist/loaders/dot-graph-loader.js.map +1 -1
- package/dist/loaders/json-graph-loader.d.ts.map +1 -1
- package/dist/loaders/json-graph-loader.js +2 -2
- package/dist/loaders/json-graph-loader.js.map +1 -1
- package/dist/loaders/parsers/parse-json-graph.js +2 -1
- package/dist/loaders/parsers/parse-json-graph.js.map +1 -1
- package/dist/style/graph-layer-stylesheet.d.ts.map +1 -1
- package/dist/style/graph-layer-stylesheet.js +7 -7
- package/dist/style/graph-layer-stylesheet.js.map +1 -1
- package/dist/style/graph-style-engine.js +3 -1
- package/dist/style/graph-style-engine.js.map +1 -1
- package/dist/style/graph-stylesheet-schema.d.ts.map +1 -1
- package/dist/style/graph-stylesheet-schema.js +9 -17
- package/dist/style/graph-stylesheet-schema.js.map +1 -1
- package/dist/style/style-property.d.ts.map +1 -1
- package/dist/style/style-property.js +17 -5
- package/dist/style/style-property.js.map +1 -1
- package/dist/style/stylesheet-engine.d.ts.map +1 -1
- package/dist/style/stylesheet-engine.js +1 -1
- package/dist/style/stylesheet-engine.js.map +1 -1
- package/dist/utils/collapsed-chains.d.ts.map +1 -1
- package/dist/utils/collapsed-chains.js.map +1 -1
- package/dist/utils/node-boundary.d.ts.map +1 -1
- package/dist/utils/node-boundary.js +1 -1
- package/dist/utils/node-boundary.js.map +1 -1
- package/dist/utils/rank-grid.d.ts.map +1 -1
- package/dist/utils/rank-grid.js +5 -2
- package/dist/utils/rank-grid.js.map +1 -1
- package/package.json +8 -8
- package/src/_deprecated/old-constants.ts +12 -6
- package/src/core/graph-layout.ts +2 -6
- package/src/core/interaction-manager.ts +2 -1
- package/src/graph/arrow-graph.ts +17 -10
- package/src/graph/classic-graph.ts +8 -5
- package/src/graph/functions/arrow-utils.ts +8 -4
- package/src/graph/functions/create-graph-from-data.ts +2 -2
- package/src/graph/graph-normalization.ts +8 -2
- package/src/graph-data/arrow-graph-data-builder.ts +6 -3
- package/src/graph-data/graph-data-builder.ts +1 -1
- package/src/graph-data/plain-graph-data-builder.ts +1 -1
- package/src/index.ts +33 -16
- package/src/layers/common-layers/grid-layer/grid-layer.ts +26 -19
- package/src/layers/edge-attachment-helper.ts +53 -41
- package/src/layers/edge-layer.ts +4 -4
- package/src/layers/edge-layers/arrow-2d-geometry.ts +1 -8
- package/src/layers/graph-layer.ts +86 -82
- package/src/layouts/d3-dag/collapsable-d3-dag-layout.ts +14 -7
- package/src/layouts/d3-dag/d3-dag-layout.ts +31 -19
- package/src/layouts/experimental/radial-layout.ts +4 -1
- package/src/layouts/simple-layout.ts +6 -4
- package/src/loaders/dot-graph-loader.ts +19 -7
- package/src/loaders/json-graph-loader.ts +3 -5
- package/src/loaders/parsers/parse-json-graph.ts +2 -1
- package/src/style/graph-layer-stylesheet.ts +15 -15
- package/src/style/graph-style-engine.ts +9 -4
- package/src/style/graph-stylesheet-schema.ts +32 -80
- package/src/style/style-property.ts +26 -11
- package/src/style/stylesheet-engine.ts +44 -29
- package/src/utils/collapsed-chains.ts +6 -2
- package/src/utils/node-boundary.ts +2 -3
- package/src/utils/rank-grid.ts +31 -17
|
@@ -75,32 +75,41 @@ export class StylesheetEngine<TStyleProperty extends StyleProperty = StyleProper
|
|
|
75
75
|
|
|
76
76
|
const attributes = Object.values(rules).reduce<string[]>((res, rule) => {
|
|
77
77
|
const attrs = Object.keys(rule || {});
|
|
78
|
-
const set = new Set([...
|
|
78
|
+
const set = new Set([...res, ...attrs]);
|
|
79
79
|
return Array.from(set);
|
|
80
80
|
}, []);
|
|
81
81
|
|
|
82
|
-
const attrMap = attributes.reduce(
|
|
83
|
-
res
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
82
|
+
const attrMap = attributes.reduce(
|
|
83
|
+
(res, attr) => {
|
|
84
|
+
res[attr] = Object.entries(rules).reduce(
|
|
85
|
+
(acc, entry) => {
|
|
86
|
+
const [state, rule] = entry;
|
|
87
|
+
if (rule && typeof (rule as any)[attr] !== 'undefined') {
|
|
88
|
+
(acc as any)[state] = (rule as any)[attr];
|
|
89
|
+
}
|
|
90
|
+
return acc;
|
|
91
|
+
},
|
|
92
|
+
{} as Record<string, unknown>
|
|
93
|
+
);
|
|
94
|
+
return res;
|
|
95
|
+
},
|
|
96
|
+
{} as Record<string, any>
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
const simplifiedStyleMap = Object.entries(attrMap).reduce(
|
|
100
|
+
(res, entry) => {
|
|
101
|
+
const [attr, valueMap] = entry as [string, Record<string, unknown>];
|
|
102
|
+
const states = Object.keys(valueMap);
|
|
103
|
+
const onlyDefault = states.length === 1 && valueMap.default !== undefined;
|
|
104
|
+
if (onlyDefault) {
|
|
105
|
+
res[attr] = valueMap.default;
|
|
106
|
+
return res;
|
|
87
107
|
}
|
|
88
|
-
|
|
89
|
-
}, {} as Record<string, unknown>);
|
|
90
|
-
return res;
|
|
91
|
-
}, {} as Record<string, any>);
|
|
92
|
-
|
|
93
|
-
const simplifiedStyleMap = Object.entries(attrMap).reduce((res, entry) => {
|
|
94
|
-
const [attr, valueMap] = entry as [string, Record<string, unknown>];
|
|
95
|
-
const states = Object.keys(valueMap);
|
|
96
|
-
const onlyDefault = states.length === 1 && valueMap.default !== undefined;
|
|
97
|
-
if (onlyDefault) {
|
|
98
|
-
res[attr] = valueMap.default;
|
|
108
|
+
res[attr] = valueMap;
|
|
99
109
|
return res;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}, {} as Record<string, unknown>);
|
|
110
|
+
},
|
|
111
|
+
{} as Record<string, unknown>
|
|
112
|
+
);
|
|
104
113
|
|
|
105
114
|
this.properties = {} as Record<string, TStyleProperty>;
|
|
106
115
|
for (const key in simplifiedStyleMap) {
|
|
@@ -153,16 +162,22 @@ export class StylesheetEngine<TStyleProperty extends StyleProperty = StyleProper
|
|
|
153
162
|
|
|
154
163
|
getDeckGLAccessors() {
|
|
155
164
|
const accessorMap = this.getDeckGLAccessorMapForType();
|
|
156
|
-
return Object.keys(accessorMap).reduce(
|
|
157
|
-
res
|
|
158
|
-
|
|
159
|
-
|
|
165
|
+
return Object.keys(accessorMap).reduce(
|
|
166
|
+
(res, accessor) => {
|
|
167
|
+
res[accessor] = this.getDeckGLAccessor(accessor);
|
|
168
|
+
return res;
|
|
169
|
+
},
|
|
170
|
+
{} as Record<string, (...args: any[]) => unknown>
|
|
171
|
+
);
|
|
160
172
|
}
|
|
161
173
|
|
|
162
174
|
getDeckGLUpdateTriggers() {
|
|
163
|
-
return this.getDeckGLUpdateTriggersForType().reduce(
|
|
164
|
-
res
|
|
165
|
-
|
|
166
|
-
|
|
175
|
+
return this.getDeckGLUpdateTriggersForType().reduce(
|
|
176
|
+
(res, accessor) => {
|
|
177
|
+
res[accessor] = this.getDeckGLAccessorUpdateTrigger(accessor);
|
|
178
|
+
return res;
|
|
179
|
+
},
|
|
180
|
+
{} as Record<string, unknown>
|
|
181
|
+
);
|
|
167
182
|
}
|
|
168
183
|
}
|
|
@@ -100,7 +100,9 @@ export function getRepresentativeNodes(engine: GraphEngine | null | undefined):
|
|
|
100
100
|
|
|
101
101
|
export type ChainOutlineGetter = (node: NodeInterface) => [number, number][] | null;
|
|
102
102
|
|
|
103
|
-
export function createChainOutlineGetter(
|
|
103
|
+
export function createChainOutlineGetter(
|
|
104
|
+
engine: GraphEngine | null | undefined
|
|
105
|
+
): ChainOutlineGetter {
|
|
104
106
|
if (!engine) {
|
|
105
107
|
return () => null;
|
|
106
108
|
}
|
|
@@ -240,7 +242,9 @@ export function buildCollapsedChainLayers(
|
|
|
240
242
|
);
|
|
241
243
|
const collapsedOutlineNodes = collapsedNodes.filter((node) => getChainOutlinePolygon(node));
|
|
242
244
|
|
|
243
|
-
const expandedNodes = representativeNodes.filter(
|
|
245
|
+
const expandedNodes = representativeNodes.filter(
|
|
246
|
+
(node) => !node.getPropertyValue('isCollapsedChain')
|
|
247
|
+
);
|
|
244
248
|
const expandedOutlineNodes = expandedNodes.filter((node) => getChainOutlinePolygon(node));
|
|
245
249
|
|
|
246
250
|
return {
|
|
@@ -98,7 +98,7 @@ function intersectsInnerFaces(
|
|
|
98
98
|
return insideVerticalFace || insideHorizontalFace;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
// eslint-disable-next-line max-params
|
|
101
|
+
// eslint-disable-next-line max-params
|
|
102
102
|
function projectToCornerArc(
|
|
103
103
|
geometry: NodeGeometry,
|
|
104
104
|
unit: [number, number],
|
|
@@ -176,8 +176,7 @@ function computeRoundedRectangleIntersection(
|
|
|
176
176
|
const absX = Math.abs(rectanglePoint[0] - geometry.center[0]);
|
|
177
177
|
const absY = Math.abs(rectanglePoint[1] - geometry.center[1]);
|
|
178
178
|
|
|
179
|
-
const touchesInnerFace =
|
|
180
|
-
absX <= innerHalfWidth + EPSILON || absY <= innerHalfHeight + EPSILON;
|
|
179
|
+
const touchesInnerFace = absX <= innerHalfWidth + EPSILON || absY <= innerHalfHeight + EPSILON;
|
|
181
180
|
|
|
182
181
|
if (
|
|
183
182
|
touchesInnerFace &&
|
package/src/utils/rank-grid.ts
CHANGED
|
@@ -61,10 +61,7 @@ function fallbackMonotonicSpacing(positions: RankPosition[]) {
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
function enforceMonotonicPositions(
|
|
65
|
-
positions: RankPosition[],
|
|
66
|
-
range: {min: number; max: number}
|
|
67
|
-
) {
|
|
64
|
+
function enforceMonotonicPositions(positions: RankPosition[], range: {min: number; max: number}) {
|
|
68
65
|
if (positions.length === 0) {
|
|
69
66
|
return;
|
|
70
67
|
}
|
|
@@ -95,8 +92,10 @@ function resolveTargetRange(
|
|
|
95
92
|
range: {min: number; max: number},
|
|
96
93
|
override?: {min?: number; max?: number}
|
|
97
94
|
): {min: number; max: number} {
|
|
98
|
-
const overrideMin =
|
|
99
|
-
|
|
95
|
+
const overrideMin =
|
|
96
|
+
typeof override?.min === 'number' && Number.isFinite(override.min) ? override.min : undefined;
|
|
97
|
+
const overrideMax =
|
|
98
|
+
typeof override?.max === 'number' && Number.isFinite(override.max) ? override.max : undefined;
|
|
100
99
|
|
|
101
100
|
const candidateMin = overrideMin ?? range.min;
|
|
102
101
|
const candidateMax = overrideMax ?? range.max;
|
|
@@ -188,7 +187,9 @@ function normalizeRankAccessor(accessor: RankAccessor | undefined): (node: Node)
|
|
|
188
187
|
};
|
|
189
188
|
}
|
|
190
189
|
|
|
191
|
-
function normalizeLabelAccessor(
|
|
190
|
+
function normalizeLabelAccessor(
|
|
191
|
+
accessor: LabelAccessor | undefined
|
|
192
|
+
): (node: Node) => string | number | null {
|
|
192
193
|
if (!accessor) {
|
|
193
194
|
return (node: Node) => {
|
|
194
195
|
const value = node.getPropertyValue('rankLabel');
|
|
@@ -248,11 +249,13 @@ export function mapRanksToYPositions(
|
|
|
248
249
|
}
|
|
249
250
|
|
|
250
251
|
const {aggregates, range} = state;
|
|
251
|
-
const positions: RankPosition[] = Array.from(aggregates.entries()).map(
|
|
252
|
-
rank,
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
252
|
+
const positions: RankPosition[] = Array.from(aggregates.entries()).map(
|
|
253
|
+
([rank, {sum, count, label}]) => ({
|
|
254
|
+
rank,
|
|
255
|
+
yPosition: count ? sum / count : 0,
|
|
256
|
+
label: label ?? rank
|
|
257
|
+
})
|
|
258
|
+
);
|
|
256
259
|
|
|
257
260
|
positions.sort((a, b) => a.rank - b.rank);
|
|
258
261
|
|
|
@@ -305,7 +308,10 @@ function pickNearestAvailableIndex(
|
|
|
305
308
|
const distance = Math.abs(ranks[index].yPosition - target);
|
|
306
309
|
const isCloser = distance < bestDistance;
|
|
307
310
|
const isTie = distance === bestDistance && bestIndex !== -1;
|
|
308
|
-
if (
|
|
311
|
+
if (
|
|
312
|
+
isCloser ||
|
|
313
|
+
(isTie && (ranks[index].yPosition < ranks[bestIndex].yPosition || index < bestIndex))
|
|
314
|
+
) {
|
|
309
315
|
bestDistance = distance;
|
|
310
316
|
bestIndex = index;
|
|
311
317
|
}
|
|
@@ -314,7 +320,11 @@ function pickNearestAvailableIndex(
|
|
|
314
320
|
consider(startIndex);
|
|
315
321
|
consider(startIndex - 1);
|
|
316
322
|
|
|
317
|
-
for (
|
|
323
|
+
for (
|
|
324
|
+
let offset = 1;
|
|
325
|
+
bestIndex === -1 && (startIndex - offset >= 0 || startIndex + offset < ranks.length);
|
|
326
|
+
offset++
|
|
327
|
+
) {
|
|
318
328
|
consider(startIndex - offset);
|
|
319
329
|
consider(startIndex + offset);
|
|
320
330
|
}
|
|
@@ -385,7 +395,9 @@ function chooseEvenlySpacedIndices(ranks: RankPosition[], maxCount: number): num
|
|
|
385
395
|
|
|
386
396
|
fillRemainingSelections(used, lastIndex, maxCount);
|
|
387
397
|
|
|
388
|
-
return Array.from(used)
|
|
398
|
+
return Array.from(used)
|
|
399
|
+
.sort((a, b) => a - b)
|
|
400
|
+
.slice(0, maxCount);
|
|
389
401
|
}
|
|
390
402
|
|
|
391
403
|
/**
|
|
@@ -403,7 +415,10 @@ export function selectRankLines(
|
|
|
403
415
|
const max = Math.max(yMin, yMax);
|
|
404
416
|
|
|
405
417
|
const filtered = ranks
|
|
406
|
-
.filter(
|
|
418
|
+
.filter(
|
|
419
|
+
(entry) =>
|
|
420
|
+
Number.isFinite(entry.yPosition) && entry.yPosition >= min && entry.yPosition <= max
|
|
421
|
+
)
|
|
407
422
|
.sort((a, b) => a.yPosition - b.yPosition);
|
|
408
423
|
|
|
409
424
|
if (filtered.length === 0) {
|
|
@@ -423,4 +438,3 @@ export function selectRankLines(
|
|
|
423
438
|
const selected = chooseEvenlySpacedIndices(filtered, maxCount);
|
|
424
439
|
return selected.map((index) => filtered[index]);
|
|
425
440
|
}
|
|
426
|
-
|