Skip to content

Commit 32f7745

Browse files
ayolabrolnico
ayolab
authored and
rolnico
committed
Add per-element thresholds to adaptive zoom (#409)
* Add per-element thresholds to adaptive zoom * fix sonar issues and refactor code * review * fix demo --------- Signed-off-by: Ayoub LABIDI <ayoub.labidi@protonmail.com> (cherry picked from commit fb76a4d) Signed-off-by: Nicolas Rol <nicolas.rol@rte-france.com>
1 parent 784c354 commit 32f7745

4 files changed

Lines changed: 216 additions & 118 deletions

File tree

‎demo/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,10 @@ <h2>Network Area Diagram Viewers</h2>
5555
<div class="break"></div>
5656
<div id="svg-container-nad-partial-network-adaptive-zoom"></div>
5757
<div id="svg-container-nad-multibus-vlnodes-middle-arrow"></div>
58+
<div id="svg-container-nad-multibus-vlnodes-adaptive-thresholds"></div>
5859
<div class="break"></div>
5960
<div id="svg-container-nad-multibus-vlnodes-limit-percentage"></div>
60-
<div id="svg-container-nad-pst-hvdc-multiple-labels"></div>
61+
<div id="svg-container-nad-pst-hvdc-multiple-labels"></div>
6162
<div class="break"></div>
6263
<div id="svg-container-nad-hoverCallback"></div>
6364
<div id="svg-container-nad-pst-hvdc-custom"></div>

‎demo/src/diagram-viewers/add-diagrams.ts‎

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -268,8 +268,7 @@ export const addNadToDemo = () => {
268268
onToggleHoverCallback: handleToggleNadHover,
269269
onRightClickCallback: handleRightClick,
270270
onBendLineCallback: handleLineBending,
271-
enableAdaptiveTextZoom: true,
272-
adaptiveTextZoomThreshold: 1500,
271+
adaptiveTextZoom: { enabled: true, threshold: 1500 },
273272
};
274273
new NetworkAreaDiagramViewer(
275274
document.getElementById('svg-container-nad-pst-hvdc-multiple-labels')!,
@@ -385,8 +384,10 @@ export const addNadToDemo = () => {
385384
onRightClickCallback: handleRightClick,
386385
onBendLineCallback: handleLineBending,
387386

388-
enableAdaptiveTextZoom: true,
389-
adaptiveTextZoomThreshold: 3000,
387+
adaptiveTextZoom: {
388+
enabled: true,
389+
threshold: 3000,
390+
},
390391
};
391392
const svgContainerNadPegase = document.getElementById('svg-container-nad-pegase-network-adaptive-zoom');
392393
new NetworkAreaDiagramViewer(
@@ -410,8 +411,7 @@ export const addNadToDemo = () => {
410411
onRightClickCallback: handleRightClick,
411412
onBendLineCallback: handleLineBending,
412413

413-
enableAdaptiveTextZoom: true,
414-
adaptiveTextZoomThreshold: 850,
414+
adaptiveTextZoom: { enabled: true, threshold: 850 },
415415
};
416416
new NetworkAreaDiagramViewer(
417417
document.getElementById('svg-container-nad-partial-network-adaptive-zoom')!,
@@ -434,8 +434,7 @@ export const addNadToDemo = () => {
434434
onRightClickCallback: handleRightClick,
435435
onBendLineCallback: handleLineBending,
436436

437-
enableAdaptiveTextZoom: true,
438-
adaptiveTextZoomThreshold: 850,
437+
adaptiveTextZoom: { enabled: true, threshold: 850 },
439438
};
440439
new NetworkAreaDiagramViewer(
441440
document.getElementById('svg-container-nad-multibus-vlnodes-middle-arrow')!,
@@ -445,6 +444,35 @@ export const addNadToDemo = () => {
445444
);
446445
});
447446

447+
fetch(NadSvgMultibusVLNodesMiddleArrowExample)
448+
.then((response) => response.text())
449+
.then((svgContent) => {
450+
const nadViewerParametersOptions: NadViewerParametersOptions = {
451+
enableDragInteraction: true,
452+
addButtons: true,
453+
onMoveNodeCallback: handleNodeMove,
454+
onMoveTextNodeCallback: handleTextNodeMove,
455+
onSelectNodeCallback: handleNodeSelect,
456+
onToggleHoverCallback: handleToggleNadHover,
457+
onRightClickCallback: handleRightClick,
458+
onBendLineCallback: handleLineBending,
459+
460+
adaptiveTextZoom: {
461+
enabled: true,
462+
edgeSideLabelThreshold: 1000,
463+
edgeMiddleArrowThreshold: 2000,
464+
edgeMiddleLabelThreshold: 1500,
465+
threshold: 2500,
466+
},
467+
};
468+
new NetworkAreaDiagramViewer(
469+
document.getElementById('svg-container-nad-multibus-vlnodes-adaptive-thresholds')!,
470+
svgContent,
471+
structuredClone(NadSvgMultibusVLNodesMiddleArrowExampleMeta),
472+
nadViewerParametersOptions
473+
);
474+
});
475+
448476
fetch(NadSvgMultibusVLNodesLimitPercentageExample)
449477
.then((response) => response.text())
450478
.then((svgContent) => {
@@ -458,8 +486,7 @@ export const addNadToDemo = () => {
458486
onRightClickCallback: handleRightClick,
459487
onBendLineCallback: handleLineBending,
460488

461-
enableAdaptiveTextZoom: true,
462-
adaptiveTextZoomThreshold: 3000,
489+
adaptiveTextZoom: { enabled: true, threshold: 3000 },
463490
};
464491
const nadViewer = new NetworkAreaDiagramViewer(
465492
document.getElementById('svg-container-nad-multibus-vlnodes-limit-percentage')!,
@@ -615,8 +642,7 @@ export const addNadToDemo = () => {
615642
onToggleHoverCallback: handleToggleNadHover,
616643
onRightClickCallback: handleRightClick,
617644
onBendLineCallback: handleLineBending,
618-
enableAdaptiveTextZoom: true,
619-
adaptiveTextZoomThreshold: 1100,
645+
adaptiveTextZoom: { enabled: true, threshold: 1100 },
620646
};
621647
new NetworkAreaDiagramViewer(
622648
document.getElementById('svg-container-nad-double-arrows')!,
@@ -638,8 +664,7 @@ export const addNadToDemo = () => {
638664
onToggleHoverCallback: handleToggleNadHover,
639665
onRightClickCallback: handleRightClick,
640666
onBendLineCallback: handleLineBending,
641-
enableAdaptiveTextZoom: true,
642-
adaptiveTextZoomThreshold: 1100,
667+
adaptiveTextZoom: { enabled: true, threshold: 1100 },
643668
};
644669
new NetworkAreaDiagramViewer(
645670
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)