Skip to content

Commit 572600e

Browse files
rolnicorolnico
authored
Merge branch 'main' into nro/add_some_security
2 parents a07e56e + fb76a4d commit 572600e

4 files changed

Lines changed: 218 additions & 117 deletions

File tree

‎demo/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,10 @@ <h2>Network Area Diagram Viewers</h2>
8686
<figcaption>Edge info with middle arrows</figcaption>
8787
<div id="svg-container-nad-multibus-vlnodes-middle-arrow"></div>
8888
</figure>
89+
<figure class="diagram-figure">
90+
<figcaption>Edge info with adaptive zoom thresholds</figcaption>
91+
<div id="svg-container-nad-multibus-vlnodes-adaptive-thresholds"></div>
92+
</figure>
8993
<div class="break"></div>
9094
<figure class="diagram-figure">
9195
<figcaption>Edge info with limit percentage and blinking display</figcaption>

‎demo/src/nad.ts‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -262,8 +262,7 @@ const addNadToDemo = () => {
262262
onToggleHoverCallback: handleToggleNadHover,
263263
onRightClickCallback: handleRightClick,
264264
onBendLineCallback: handleLineBending,
265-
enableAdaptiveTextZoom: true,
266-
adaptiveTextZoomThreshold: 1500,
265+
adaptiveTextZoom: { enabled: true, threshold: 1500 },
267266
};
268267
new NetworkAreaDiagramViewer(
269268
document.getElementById('svg-container-nad-pst-hvdc-multiple-labels')!,
@@ -379,8 +378,10 @@ const addNadToDemo = () => {
379378
onRightClickCallback: handleRightClick,
380379
onBendLineCallback: handleLineBending,
381380

382-
enableAdaptiveTextZoom: true,
383-
adaptiveTextZoomThreshold: 3000,
381+
adaptiveTextZoom: {
382+
enabled: true,
383+
threshold: 3000,
384+
},
384385
};
385386
const svgContainerNadPegase = document.getElementById('svg-container-nad-pegase-network-adaptive-zoom');
386387
new NetworkAreaDiagramViewer(
@@ -404,8 +405,7 @@ const addNadToDemo = () => {
404405
onRightClickCallback: handleRightClick,
405406
onBendLineCallback: handleLineBending,
406407

407-
enableAdaptiveTextZoom: true,
408-
adaptiveTextZoomThreshold: 850,
408+
adaptiveTextZoom: { enabled: true, threshold: 850 },
409409
};
410410
new NetworkAreaDiagramViewer(
411411
document.getElementById('svg-container-nad-partial-network-adaptive-zoom')!,
@@ -428,8 +428,7 @@ const addNadToDemo = () => {
428428
onRightClickCallback: handleRightClick,
429429
onBendLineCallback: handleLineBending,
430430

431-
enableAdaptiveTextZoom: true,
432-
adaptiveTextZoomThreshold: 850,
431+
adaptiveTextZoom: { enabled: true, threshold: 850 },
433432
};
434433
new NetworkAreaDiagramViewer(
435434
document.getElementById('svg-container-nad-multibus-vlnodes-middle-arrow')!,
@@ -439,6 +438,35 @@ const addNadToDemo = () => {
439438
);
440439
});
441440

441+
fetch(NadSvgMultibusVLNodesMiddleArrowExample)
442+
.then((response) => response.text())
443+
.then((svgContent) => {
444+
const nadViewerParametersOptions: NadViewerParametersOptions = {
445+
enableDragInteraction: true,
446+
addButtons: true,
447+
onMoveNodeCallback: handleNodeMove,
448+
onMoveTextNodeCallback: handleTextNodeMove,
449+
onSelectNodeCallback: handleNodeSelect,
450+
onToggleHoverCallback: handleToggleNadHover,
451+
onRightClickCallback: handleRightClick,
452+
onBendLineCallback: handleLineBending,
453+
454+
adaptiveTextZoom: {
455+
enabled: true,
456+
edgeSideLabelThreshold: 1000,
457+
edgeMiddleArrowThreshold: 2000,
458+
edgeMiddleLabelThreshold: 1500,
459+
threshold: 2500,
460+
},
461+
};
462+
new NetworkAreaDiagramViewer(
463+
document.getElementById('svg-container-nad-multibus-vlnodes-adaptive-thresholds')!,
464+
svgContent,
465+
structuredClone(NadSvgMultibusVLNodesMiddleArrowExampleMeta),
466+
nadViewerParametersOptions
467+
);
468+
});
469+
442470
fetch(NadSvgMultibusVLNodesLimitPercentageExample)
443471
.then((response) => response.text())
444472
.then((svgContent) => {
@@ -452,8 +480,7 @@ const addNadToDemo = () => {
452480
onRightClickCallback: handleRightClick,
453481
onBendLineCallback: handleLineBending,
454482

455-
enableAdaptiveTextZoom: true,
456-
adaptiveTextZoomThreshold: 3000,
483+
adaptiveTextZoom: { enabled: true, threshold: 3000 },
457484
};
458485
const nadViewer = new NetworkAreaDiagramViewer(
459486
document.getElementById('svg-container-nad-multibus-vlnodes-limit-percentage')!,
@@ -609,8 +636,7 @@ const addNadToDemo = () => {
609636
onToggleHoverCallback: handleToggleNadHover,
610637
onRightClickCallback: handleRightClick,
611638
onBendLineCallback: handleLineBending,
612-
enableAdaptiveTextZoom: true,
613-
adaptiveTextZoomThreshold: 1100,
639+
adaptiveTextZoom: { enabled: true, threshold: 1100 },
614640
};
615641
new NetworkAreaDiagramViewer(
616642
document.getElementById('svg-container-nad-double-arrows')!,
@@ -632,8 +658,7 @@ const addNadToDemo = () => {
632658
onToggleHoverCallback: handleToggleNadHover,
633659
onRightClickCallback: handleRightClick,
634660
onBendLineCallback: handleLineBending,
635-
enableAdaptiveTextZoom: true,
636-
adaptiveTextZoomThreshold: 1100,
661+
adaptiveTextZoom: { enabled: true, threshold: 1100 },
637662
};
638663
new NetworkAreaDiagramViewer(
639664
document.getElementById('svg-container-nad-components')!,

‎packages/network-viewer-core/src/network-area-diagram-viewer/nad-viewer-parameters.ts‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,23 @@ export type OnBendLineCallbackType = (
5454
lineOperation: string
5555
) => void;
5656

57+
export interface AdaptiveTextZoomOptions {
58+
// Whether adaptive zoom is enabled.
59+
enabled?: boolean;
60+
61+
// Threshold for the adaptive zoom (legends, edge infos and text nodes wholesale removal).
62+
threshold?: number;
63+
64+
// Threshold for edge side labels (edgeInfo1 / edgeInfo2).
65+
edgeSideLabelThreshold?: number;
66+
67+
// Threshold for edge middle labels (edgeInfoMiddle).
68+
edgeMiddleLabelThreshold?: number;
69+
70+
// Threshold for the edge middle arrow (edgeInfoMiddle arrow only).
71+
edgeMiddleArrowThreshold?: number;
72+
}
73+
5774
export interface NadViewerParametersOptions {
5875
// The minimum width of the viewer.
5976
minWidth?: number;
@@ -104,15 +121,12 @@ export interface NadViewerParametersOptions {
104121
// Size in pixel of the margin that is added to hoverable objects to help the user stay over them.
105122
hoverPositionPrecision?: number | null;
106123

107-
// Whether enabling adaptive zoom, to improve the performnces of the viewer with large networks.
108-
// If enabled, and the viewbox's zoom level is above a threshold, edge infos and legends are removed
124+
// Adaptive zoom options, to improve the performances of the viewer with large networks.
125+
// If enabled, and the viewbox's zoom level is above the threshold, edge infos and legends are removed
109126
// from the SVG, to speed-up panning and zooming.
110-
// When the zoom level is below a threshold, edge infos and legends for the NAD elements that are
127+
// When the zoom level is below the threshold, edge infos and legends for the NAD elements that are
111128
// inside the viewbox are created in the SVG, on the fly, from the NAD metadata.
112-
enableAdaptiveTextZoom?: boolean;
113-
114-
// Threshold for the adaptiveZoom.
115-
adaptiveTextZoomThreshold?: number;
129+
adaptiveTextZoom?: AdaptiveTextZoomOptions;
116130

117131
// Custom component library to use instead of the default one.
118132
// If not provided, the default library is used.
@@ -199,17 +213,16 @@ export class NadViewerParameters {
199213
);
200214
}
201215

202-
public getEnableAdaptiveTextZoom(): boolean {
203-
return (
204-
this.nadViewerParametersOptions?.enableAdaptiveTextZoom ?? NadViewerParameters.ENABLE_ADAPTIVE_ZOOM_DEFAULT
205-
);
206-
}
207-
208-
public getThresholdAdaptiveTextZoom(): number {
209-
return (
210-
this.nadViewerParametersOptions?.adaptiveTextZoomThreshold ??
211-
NadViewerParameters.THRESHOLD_ADAPTIVE_ZOOM_DEFAULT
212-
);
216+
public getAdaptiveTextZoom(): Required<AdaptiveTextZoomOptions> {
217+
const adaptiveTextZoom = this.nadViewerParametersOptions?.adaptiveTextZoom;
218+
const threshold = adaptiveTextZoom?.threshold ?? NadViewerParameters.THRESHOLD_ADAPTIVE_ZOOM_DEFAULT;
219+
return {
220+
enabled: adaptiveTextZoom?.enabled ?? NadViewerParameters.ENABLE_ADAPTIVE_ZOOM_DEFAULT,
221+
threshold,
222+
edgeSideLabelThreshold: adaptiveTextZoom?.edgeSideLabelThreshold ?? threshold,
223+
edgeMiddleLabelThreshold: adaptiveTextZoom?.edgeMiddleLabelThreshold ?? threshold,
224+
edgeMiddleArrowThreshold: adaptiveTextZoom?.edgeMiddleArrowThreshold ?? threshold,
225+
};
213226
}
214227

215228
public getComponentLibrary(): LibraryComponent[] | undefined {

0 commit comments

Comments
 (0)