graflow: autofit OK

2026-03-07 18:36:01 +00:00
parent 61855a3416
commit a967576d4b
2 changed files with 52 additions and 21 deletions
@@ -49,6 +49,14 @@
                border: 2px solid black;
            }
            bz-graflow.icmp{ grid-column: 1 / -1; width: 100vw; height: 80vh; background: var(--eicui-base-color-grey-10); }
+            .container {
+                resize: both;
+                overflow: auto;   /* required in practice */
+                min-width: 800px;
+                min-height: 300px;
+                border: 1px solid #999;
+                padding: 1rem;
+            }
          </style>
        <script>
            window.addEventListener('load',()=>{
@@ -71,13 +79,26 @@
                document.querySelector('select[name="wiretype"]').addEventListener('change',
                    (evt) => { grflw4.setAttribute('wiretype', evt.target.value); grflw4.refresh() }
                )
+                
+                const el = document.querySelector('.container')
+                let timer = null // debounce
+                const ro = new ResizeObserver(([entry]) => {
+                    clearTimeout(timer)
+                    timer = setTimeout(() => {
+                        const grfl = entry.target.querySelector('bz-graflow')
+                        grfl.autofit()
+                    }, 200)
+                })
+                
+                ro.observe(el)
            })
        </script>
 	</head>

 	<body>
+        <div class="container">
            <bz-graflow class="icmp" flow="/app/assets/json/bzGraflow/testFlowICMP.json" tension="60">
-            <div class="demooptions"> <!-- just for demo purposes -->
+                <div class="demooptions">
                    <button data-trigger="onAutoplace4H">Auto-place Horizontal</button>
                    <button data-trigger="onAutoplace4V">Auto-place Vertical</button>
                    <select name="align" data-id="icmp">
@@ -94,5 +115,6 @@
                    <div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
                </div>
            </bz-graflow>
+        </div>
 	</body>
 </html>
@@ -629,8 +629,6 @@ class BZgraflow extends Buildoz{
         if(tween == null) tween = parseInt(this.getBZAttribute('tween')) || 500
         if(align == null) align = this.getBZAttribute('align') || 'center'

-         console.log('autoPlace', orientation, gapx, gapy, tween, align)
-
        this.currentOrientation = orientation
        // Cancel any previous autoPlace() animations by bumping a token.
        // moveNode() checks this token each frame and will no-op if superseded.
@@ -1147,6 +1145,17 @@ class BZgraflow extends Buildoz{
        return(crossLayerLinks)
    }

+    autofit(){ 
+        const parentBB = this.parentElement.getBoundingClientRect()
+        // Use scroll dimensions for actual content extent (nodes can extend beyond element bounds)
+        const contentW = Math.max(this.scrollWidth || this.offsetWidth || 1, 1)
+        const contentH = Math.max(this.scrollHeight || this.offsetHeight || 1, 1)
+        const sx = parentBB.width / contentW
+        const sy = parentBB.height / contentH
+        const scale = Math.min(sx, sy)  // uniform scale to fit inside parent
+        this.style.transformOrigin = 'top left'
+        this.style.transform = `scale(${scale})`
+    }
 }
 Buildoz.define('graflow', BZgraflow)