From 86b23c85beb5a58c3c5e506b9eb39684f7ce3396 Mon Sep 17 00:00:00 2001
From: Hannes Hansen <mail@hannesh.de>
Date: Mon, 11 Dec 2023 16:33:17 +0100
Subject: [PATCH] crop flow image to keep all operators in the image; fix
 #SNRGY-3011

---
 .../diagram-editor.component.html             |  1 +
 .../diagram-editor.component.ts               |  8 ++-
 .../flow-designer/flow-designer.component.ts  | 61 ++++++++++++++++++-
 .../new-export/new-export.component.ts        |  2 +-
 4 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/src/app/core/components/diagram-editor/diagram-editor.component.html b/src/app/core/components/diagram-editor/diagram-editor.component.html
index 28e38279c..6fceb019e 100755
--- a/src/app/core/components/diagram-editor/diagram-editor.component.html
+++ b/src/app/core/components/diagram-editor/diagram-editor.component.html
@@ -20,6 +20,7 @@
     </div>
 </div>
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.4.4/joint.css"/>
+
 <style>
     .joint-paper {
         max-width: 99%;
diff --git a/src/app/core/components/diagram-editor/diagram-editor.component.ts b/src/app/core/components/diagram-editor/diagram-editor.component.ts
index 7f93efeae..1d3b64af2 100755
--- a/src/app/core/components/diagram-editor/diagram-editor.component.ts
+++ b/src/app/core/components/diagram-editor/diagram-editor.component.ts
@@ -369,9 +369,11 @@ export class DiagramEditorComponent implements AfterViewInit {
         return [x,y]
     }
 
-    calculateNodeSize(outPorts: any[]) {
+    calculateNodeSize(inPorts: any[], outPorts: any[]) {
         var outCircleradius = 20
-        var height = outCircleradius * outPorts.length + 30
+        var heightBasedOnOut = outCircleradius * outPorts.length + 30
+        var heightBasedOnIn = outCircleradius * inPorts.length + 30
+        var height = heightBasedOnIn > heightBasedOnOut ? heightBasedOnIn : heightBasedOnOut
         height = height > 100 ? height : 100
         var size = {'height': height, "width": 150}
         return size
@@ -396,7 +398,7 @@ export class DiagramEditorComponent implements AfterViewInit {
             }
         }
 
-        var size = this.calculateNodeSize(outPorts)
+        var size = this.calculateNodeSize(inPorts, outPorts)
         
         const node = new this.NodeElement({
             type: 'senergy.NodeElement',
diff --git a/src/app/modules/data/flow-designer/flow-designer.component.ts b/src/app/modules/data/flow-designer/flow-designer.component.ts
index 6e4016715..962287c2a 100644
--- a/src/app/modules/data/flow-designer/flow-designer.component.ts
+++ b/src/app/modules/data/flow-designer/flow-designer.component.ts
@@ -138,13 +138,68 @@ export class FlowDesignerComponent implements OnInit, AfterViewInit {
         });
     }
 
+    calcView(svg: SVGElement): any {
+        const nodes = svg.getElementsByClassName('joint-type-senergy');
+        const viewbox = [null, null, 0, 0];
+        // @ts-ignore
+        for (const node of nodes) {
+            let startOffset = 0;
+            let endOffset = 0;
+            const ports = node.getElementsByClassName('joint-port-label');
+            for (const port of ports) {
+                if (port.getAttribute('text-anchor') === 'end' && endOffset < port.getBBox().width) {
+                    endOffset = port.getBBox().width;
+                }
+                if (port.getAttribute('text-anchor') === 'start' && startOffset < port.getBBox().width) {
+                    startOffset = port.getBBox().width;
+                }
+            }
+            const coords = node.attributes.transform.value.replace('translate(', '').replace(')', '').split(',');
+            // x
+            if (viewbox[0] === null) {
+                viewbox[0] = +coords[0] - startOffset;
+            }
+            // @ts-ignore
+            if (coords[0] < viewbox[0]) {
+                viewbox[0] = +coords[0] - startOffset;
+            }
+            // y
+            if (viewbox[1] === null) {
+                viewbox[1] = +coords[1] - 20;
+            }
+            // @ts-ignore
+            if (coords[1] < viewbox[1]) {
+                viewbox[1] = +coords[1] - 20;
+            }
+            // x width
+            // @ts-ignore
+            if (coords[0] > viewbox[2]) {
+                // @ts-ignore
+                viewbox[2] = +coords[0] + 150 - viewbox[0] + endOffset;
+            }
+            // y height
+            // @ts-ignore
+            if (coords[1] > viewbox[3]) {
+                // @ts-ignore
+                viewbox[3] = +coords[1] + 120 - viewbox[1] + 20;
+            }
+        }
+
+        console.log(viewbox)
+        return viewbox
+    }
+
     createSVGFromModel(svg: SVGElement): string {
         let source = '';
         const serializer = new XMLSerializer();
         
         // Get minimal coordinates to include everything + some space at the sides
         var box = (<any>document.getElementsByClassName('joint-layers')[0]).getBBox()
-        const viewbox = [box.x -10, box.y, box.width + 20, box.height]
+        var viewbox = [box.x -10, box.y, box.width + 20, box.height]
+        console.log(viewbox)
+
+        //viewbox = this.calcView(svg)
+        //console.log(viewbox)
         
         const tags = ['text', 'g', 'circle', 'rect', 'tspan', 'path'];
         const classes = [
@@ -187,6 +242,10 @@ export class FlowDesignerComponent implements OnInit, AfterViewInit {
         }
 
         source = source.replace("joint-element", "")
+        console.log(source)
+        source = source.replace(/class="joint-layers" transform=".*?"/, "class=\"joint-layers\"")
+        console.log(source)
+
         source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
         return source;
     }
diff --git a/src/app/modules/exports/new-export/new-export.component.ts b/src/app/modules/exports/new-export/new-export.component.ts
index 2d5fd1684..fad67b21f 100644
--- a/src/app/modules/exports/new-export/new-export.component.ts
+++ b/src/app/modules/exports/new-export/new-export.component.ts
@@ -748,7 +748,7 @@ export class NewExportComponent implements OnInit {
     }
 
     selectOperator($event: MouseEvent) {
-        for (const operatorNode of ($event.target as any)?.nearestViewportElement?.childNodes[0]?.childNodes[1]?.childNodes || []) {
+        for (const operatorNode of ($event.target as any)?.nearestViewportElement?.getElementsByClassName("joint-cells-layer")[0].childNodes || []) {
             if (
                 operatorNode.attributes['data-type'] !== undefined &&
                 operatorNode.attributes['data-type'].value === 'senergy.NodeElement'