crop flow image to keep all operators in the image; fix #SNRGY-3011

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%;

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',

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;
     }

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'