Add flag for enabling node moving

Signed-off-by: massimo.ferraro <massimo.ferraro@soft.it>
powsybl · Jun 19, 2024 · cb17499 · cb17499
1 parent 0d215cc
commit cb17499
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 26 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -22,12 +22,14 @@
       <div id="root"></div>
       <div class="break"></div>
       <div id="svg-container-nad"></div>
-      <div id="svg-container-nad-pst-hvdc"></div>
+      <div id="svg-container-nad-no-moving"></div>
       <div class="break"></div>
       <div id="svg-container-nad-multibus-vlnodes"></div>
       <div id="svg-container-nad-multibus-vlnodes14"></div>
       <div class="break"></div>
+      <div id="svg-container-nad-pst-hvdc"></div>
       <div id="svg-container-nad-threewt-dl-ub"></div>
+      <div class="break"></div>
       <div id="svg-container-nad-partial-network"></div>
       <div class="break"></div>
       <div id="svg-container-sld"></div>

diff --git a/demo/src/diagram-viewers/add-diagrams.js b/demo/src/diagram-viewers/add-diagrams.js
@@ -30,7 +30,8 @@ export const addNadToDemo = () => {
                 600,
                 1000,
                 1200,
-                handleNodeMove
+                handleNodeMove,
+                true
             );
 
             document
@@ -39,21 +40,22 @@ export const addNadToDemo = () => {
                 .setAttribute('style', 'border:2px; border-style:solid;');
         });
 
-    fetch(NadSvgPstHvdcExample)
+    fetch(NadSvgExample)
         .then((response) => response.text())
         .then((svgContent) => {
             new NetworkAreaDiagramViewer(
-                document.getElementById('svg-container-nad-pst-hvdc'),
+                document.getElementById('svg-container-nad-no-moving'),
                 svgContent,
                 500,
                 600,
                 1000,
                 1200,
-                handleNodeMove
+                handleNodeMove,
+                false
             );
 
             document
-                .getElementById('svg-container-nad-pst-hvdc')
+                .getElementById('svg-container-nad-no-moving')
                 .getElementsByTagName('svg')[0]
                 .setAttribute('style', 'border:2px; border-style:solid;');
         });
@@ -68,7 +70,8 @@ export const addNadToDemo = () => {
                 600,
                 1000,
                 1200,
-                handleNodeMove
+                handleNodeMove,
+                true
             );
 
             document
@@ -87,7 +90,8 @@ export const addNadToDemo = () => {
                 600,
                 1000,
                 1200,
-                handleNodeMove
+                handleNodeMove,
+                true
             );
 
             document
@@ -96,6 +100,26 @@ export const addNadToDemo = () => {
                 .setAttribute('style', 'border:2px; border-style:solid;');
         });
 
+    fetch(NadSvgPstHvdcExample)
+        .then((response) => response.text())
+        .then((svgContent) => {
+            new NetworkAreaDiagramViewer(
+                document.getElementById('svg-container-nad-pst-hvdc'),
+                svgContent,
+                500,
+                600,
+                1000,
+                1200,
+                handleNodeMove,
+                true
+            );
+
+            document
+                .getElementById('svg-container-nad-pst-hvdc')
+                .getElementsByTagName('svg')[0]
+                .setAttribute('style', 'border:2px; border-style:solid;');
+        });
+
     fetch(NadSvgTrheeWTDanglingLineUnknownBusExample)
         .then((response) => response.text())
         .then((svgContent) => {
@@ -106,7 +130,8 @@ export const addNadToDemo = () => {
                 600,
                 1000,
                 1200,
-                handleNodeMove
+                handleNodeMove,
+                true
             );
 
             document
@@ -125,7 +150,8 @@ export const addNadToDemo = () => {
                 600,
                 1000,
                 1200,
-                handleNodeMove
+                handleNodeMove,
+                true
             );
 
             document

diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.test.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.test.ts
@@ -19,7 +19,8 @@ describe('Test network-area-diagram-viewer.ts', () => {
             0,
             0,
             0,
-            null
+            null,
+            false
         );
 
         expect(container.getElementsByTagName('svg').length).toBe(0);

diff --git a/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts b/src/components/network-area-diagram-viewer/network-area-diagram-viewer.ts
@@ -46,15 +46,16 @@ export class NetworkAreaDiagramViewer {
         minHeight: number,
         maxWidth: number,
         maxHeight: number,
-        onNodeCallback: OnMoveNodeCallbackType | null
+        onNodeCallback: OnMoveNodeCallbackType | null,
+        enableNodeMoving: boolean
     ) {
         this.container = container;
         this.svgContent = svgContent;
         this.width = 0;
         this.height = 0;
         this.originalWidth = 0;
         this.originalHeight = 0;
-        this.init(minWidth, minHeight, maxWidth, maxHeight);
+        this.init(minWidth, minHeight, maxWidth, maxHeight, enableNodeMoving);
         this.svgParameters = this.getSvgParameters();
         this.onNodeCallback = onNodeCallback;
     }
@@ -121,7 +122,8 @@ export class NetworkAreaDiagramViewer {
         minWidth: number,
         minHeight: number,
         maxWidth: number,
-        maxHeight: number
+        maxHeight: number,
+        enableNodeMoving: boolean
     ): void {
         if (!this.container || !this.svgContent) {
             return;
@@ -165,18 +167,20 @@ export class NetworkAreaDiagramViewer {
         drawnSvg.style.overflow = 'visible';
 
         // add events
-        this.svgDraw.on('mousedown', (e: Event) => {
-            this.startDrag(e);
-        });
-        this.svgDraw.on('mousemove', (e: Event) => {
-            this.drag(e);
-        });
-        this.svgDraw.on('mouseup', (e: Event) => {
-            this.endDrag(e);
-        });
-        this.svgDraw.on('mouseleave', (e: Event) => {
-            this.endDrag(e);
-        });
+        if (enableNodeMoving) {
+            this.svgDraw.on('mousedown', (e: Event) => {
+                this.startDrag(e);
+            });
+            this.svgDraw.on('mousemove', (e: Event) => {
+                this.drag(e);
+            });
+            this.svgDraw.on('mouseup', (e: Event) => {
+                this.endDrag(e);
+            });
+            this.svgDraw.on('mouseleave', (e: Event) => {
+                this.endDrag(e);
+            });
+        }
         this.svgDraw.on('panStart', function () {
             if (drawnSvg.parentElement != undefined) {
                 drawnSvg.parentElement.style.cursor = 'move';