Add per-element thresholds to adaptive zoom

demo/index.html

@@ -86,6 +86,10 @@ <h2>Network Area Diagram Viewers</h2>
                     <figcaption>Edge info with middle arrows</figcaption>
                     <div id="svg-container-nad-multibus-vlnodes-middle-arrow"></div>
                 </figure>
+                <figure class="diagram-figure">
+                    <figcaption>Edge info with adaptive zoom thresholds</figcaption>
+                    <div id="svg-container-nad-multibus-vlnodes-adaptive-thresholds"></div>
+                </figure>
                 <div class="break"></div>
                 <figure class="diagram-figure">
                     <figcaption>Edge info with limit percentage and blinking display</figcaption>

demo/src/nad.ts

@@ -262,8 +262,7 @@ const addNadToDemo = () => {
                 onToggleHoverCallback: handleToggleNadHover,
                 onRightClickCallback: handleRightClick,
                 onBendLineCallback: handleLineBending,
-                enableAdaptiveTextZoom: true,
-                adaptiveTextZoomThreshold: 1500,
+                adaptiveTextZoom: { enabled: true, threshold: 1500 },
             };
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-pst-hvdc-multiple-labels')!,
@@ -379,8 +378,10 @@ const addNadToDemo = () => {
                 onRightClickCallback: handleRightClick,
                 onBendLineCallback: handleLineBending,
 
-                enableAdaptiveTextZoom: true,
-                adaptiveTextZoomThreshold: 3000,
+                adaptiveTextZoom: {
+                    enabled: true,
+                    threshold: 3000,
+                },
             };
             const svgContainerNadPegase = document.getElementById('svg-container-nad-pegase-network-adaptive-zoom');
             new NetworkAreaDiagramViewer(
@@ -404,8 +405,7 @@ const addNadToDemo = () => {
                 onRightClickCallback: handleRightClick,
                 onBendLineCallback: handleLineBending,
 
-                enableAdaptiveTextZoom: true,
-                adaptiveTextZoomThreshold: 850,
+                adaptiveTextZoom: { enabled: true, threshold: 850 },
             };
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-partial-network-adaptive-zoom')!,
@@ -428,8 +428,7 @@ const addNadToDemo = () => {
                 onRightClickCallback: handleRightClick,
                 onBendLineCallback: handleLineBending,
 
-                enableAdaptiveTextZoom: true,
-                adaptiveTextZoomThreshold: 850,
+                adaptiveTextZoom: { enabled: true, threshold: 850 },
             };
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-multibus-vlnodes-middle-arrow')!,
@@ -439,6 +438,35 @@ const addNadToDemo = () => {
             );
         });
 
+    fetch(NadSvgMultibusVLNodesMiddleArrowExample)
+        .then((response) => response.text())
+        .then((svgContent) => {
+            const nadViewerParametersOptions: NadViewerParametersOptions = {
+                enableDragInteraction: true,
+                addButtons: true,
+                onMoveNodeCallback: handleNodeMove,
+                onMoveTextNodeCallback: handleTextNodeMove,
+                onSelectNodeCallback: handleNodeSelect,
+                onToggleHoverCallback: handleToggleNadHover,
+                onRightClickCallback: handleRightClick,
+                onBendLineCallback: handleLineBending,
+
+                adaptiveTextZoom: {
+                    enabled: true,
+                    edgeSideLabelThreshold: 1000,
+                    edgeMiddleArrowThreshold: 2000,
+                    edgeMiddleLabelThreshold: 1500,
+                    threshold: 2500,
+                },
+            };
+            new NetworkAreaDiagramViewer(
+                document.getElementById('svg-container-nad-multibus-vlnodes-adaptive-thresholds')!,
+                svgContent,
+                structuredClone(NadSvgMultibusVLNodesMiddleArrowExampleMeta),
+                nadViewerParametersOptions
+            );
+        });
+
     fetch(NadSvgMultibusVLNodesLimitPercentageExample)
         .then((response) => response.text())
         .then((svgContent) => {
@@ -452,8 +480,7 @@ const addNadToDemo = () => {
                 onRightClickCallback: handleRightClick,
                 onBendLineCallback: handleLineBending,
 
-                enableAdaptiveTextZoom: true,
-                adaptiveTextZoomThreshold: 3000,
+                adaptiveTextZoom: { enabled: true, threshold: 3000 },
             };
             const nadViewer = new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-multibus-vlnodes-limit-percentage')!,
@@ -609,8 +636,7 @@ const addNadToDemo = () => {
                 onToggleHoverCallback: handleToggleNadHover,
                 onRightClickCallback: handleRightClick,
                 onBendLineCallback: handleLineBending,
-                enableAdaptiveTextZoom: true,
-                adaptiveTextZoomThreshold: 1100,
+                adaptiveTextZoom: { enabled: true, threshold: 1100 },
             };
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-double-arrows')!,
@@ -632,8 +658,7 @@ const addNadToDemo = () => {
                 onToggleHoverCallback: handleToggleNadHover,
                 onRightClickCallback: handleRightClick,
                 onBendLineCallback: handleLineBending,
-                enableAdaptiveTextZoom: true,
-                adaptiveTextZoomThreshold: 1100,
+                adaptiveTextZoom: { enabled: true, threshold: 1100 },
             };
             new NetworkAreaDiagramViewer(
                 document.getElementById('svg-container-nad-components')!,

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

@@ -54,6 +54,23 @@ export type OnBendLineCallbackType = (
     lineOperation: string
 ) => void;
 
+export interface AdaptiveTextZoomOptions {
+    // Whether adaptive zoom is enabled.
+    enabled?: boolean;
+
+    // Threshold for the adaptive zoom (legends, edge infos and text nodes wholesale removal).
+    threshold?: number;
+
+    // Threshold for edge side labels (edgeInfo1 / edgeInfo2).
+    edgeSideLabelThreshold?: number;
+
+    // Threshold for edge middle labels (edgeInfoMiddle).
+    edgeMiddleLabelThreshold?: number;
+
+    // Threshold for the edge middle arrow (edgeInfoMiddle arrow only).
+    edgeMiddleArrowThreshold?: number;
+}
+
 export interface NadViewerParametersOptions {
     // The minimum width of the viewer.
     minWidth?: number;
@@ -104,15 +121,12 @@ export interface NadViewerParametersOptions {
     // Size in pixel of the margin that is added to hoverable objects to help the user stay over them.
     hoverPositionPrecision?: number | null;
 
-    // Whether enabling adaptive zoom, to improve the performnces of the viewer with large networks.
-    // If enabled, and the viewbox's zoom level is above a threshold, edge infos and legends are removed
+    // Adaptive zoom options, to improve the performances of the viewer with large networks.
+    // If enabled, and the viewbox's zoom level is above the threshold, edge infos and legends are removed
     // from the SVG, to speed-up panning and zooming.
-    // When the zoom level is below a threshold, edge infos and legends for the NAD elements that are
+    // When the zoom level is below the threshold, edge infos and legends for the NAD elements that are
     // inside the viewbox are created in the SVG, on the fly, from the NAD metadata.
-    enableAdaptiveTextZoom?: boolean;
-
-    // Threshold for the adaptiveZoom.
-    adaptiveTextZoomThreshold?: number;
+    adaptiveTextZoom?: AdaptiveTextZoomOptions;
 
     // Custom component library to use instead of the default one.
     // If not provided, the default library is used.
@@ -199,17 +213,16 @@ export class NadViewerParameters {
         );
     }
 
-    public getEnableAdaptiveTextZoom(): boolean {
-        return (
-            this.nadViewerParametersOptions?.enableAdaptiveTextZoom ?? NadViewerParameters.ENABLE_ADAPTIVE_ZOOM_DEFAULT
-        );
-    }
-
-    public getThresholdAdaptiveTextZoom(): number {
-        return (
-            this.nadViewerParametersOptions?.adaptiveTextZoomThreshold ??
-            NadViewerParameters.THRESHOLD_ADAPTIVE_ZOOM_DEFAULT
-        );
+    public getAdaptiveTextZoom(): Required<AdaptiveTextZoomOptions> {
+        const adaptiveTextZoom = this.nadViewerParametersOptions?.adaptiveTextZoom;
+        const threshold = adaptiveTextZoom?.threshold ?? NadViewerParameters.THRESHOLD_ADAPTIVE_ZOOM_DEFAULT;
+        return {
+            enabled: adaptiveTextZoom?.enabled ?? NadViewerParameters.ENABLE_ADAPTIVE_ZOOM_DEFAULT,
+            threshold,
+            edgeSideLabelThreshold: adaptiveTextZoom?.edgeSideLabelThreshold ?? threshold,
+            edgeMiddleLabelThreshold: adaptiveTextZoom?.edgeMiddleLabelThreshold ?? threshold,
+            edgeMiddleArrowThreshold: adaptiveTextZoom?.edgeMiddleArrowThreshold ?? threshold,
+        };
     }
 
     public getComponentLibrary(): LibraryComponent[] | undefined {