graflow started zomminout

app/assets/html/test.html

@@ -9,6 +9,17 @@
         <script src="../../thirdparty/buildoz/buildoz.js"></script>      
         <script src="../../thirdparty/buildoz/bzGraflow.js"></script>
         <style>
+            @font-face { /*FF does not indirectly load if inside a shawdow-dom */
+                font-family: 'glyphs';
+                src:  url('/app/assets/styles/fonts/glyphs.eot');
+                src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
+                font-weight: normal;
+                font-style: normal;
+                font-display: block;
+            }
             body{
                 display: grid;
                 grid-gap: 5px;

app/assets/styles/icons.css

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'glyphs';
-  src:  url('fonts/glyphs.eot?eexjbw');
-  src:  url('fonts/glyphs.eot?eexjbw#iefix') format('embedded-opentype'),
-    url('fonts/glyphs.ttf?eexjbw') format('truetype'),
-    url('fonts/glyphs.woff?eexjbw') format('woff'),
-    url('fonts/glyphs.svg?eexjbw#glyphs') format('svg');
+  src:  url('/app/assets/styles/fonts/glyphs.eot');
+  src:  url('/app/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+    url('/app/assets/styles/fonts/glyphs.ttf') format('truetype'),
+    url('/app/assets/styles/fonts/glyphs.woff') format('woff'),
+    url('/app/assets/styles/fonts/glyphs.svg') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;

app/thirdparty/buildoz/bzGraflow.js

@@ -21,6 +21,7 @@ class BZgraflow extends Buildoz{
         this.shadow = this.mainContainer.attachShadow({ mode: 'open' })
         const style = document.createElement('style')
         style.textContent = `
+            @import '/app/assets/styles/icons.css';
             .bzgf-wires-container,
             .bzgf-nodes-container{ position: absolute; inset: 0; width: 100%; height: 100%; }
             .bzgf-nodes-container .bzgf-node{ position:absolute; }
@@ -31,6 +32,23 @@ class BZgraflow extends Buildoz{
                 backgrround: transparent;
                 border-style: none;
             }
+            .bzgf-nodes-container button.bzgf-zoom-in{
+                width: 2em;
+                height: 2em;
+                z-index: 999;
+                position: absolute;
+                top: -1em;
+                right: -1em;
+                color: #A00;      
+            }
+            .bzgf-nodes-container .bzgf-node.scaler {
+                transform-origin: top left;
+                transform:
+                    translate(var(--tx, 0), var(--ty, 0))
+                    scale(var(--sx, 1), var(--sy, 1));
+                transition: transform 300ms ease-in-out;
+            }
+                
         `
         this.shadow.appendChild(style)
         this.nodesContainer = document.createElement('div')
@@ -114,10 +132,65 @@ class BZgraflow extends Buildoz{
         this.stagedNodes[id].style.top = (node.coords && node.coords.y) ? `${node.coords.y}px` : '10%'
         this.stagedNodes[id].dataset.id = id
         this.stagedNodes[id].ports = Object.fromEntries(Array.from(portEls).map(item => ([item.dataset.id, { ...item.dataset, el:item }])))
+        if(node.subflow) {
+            const btnZoomIn = document.createElement('button')
+            btnZoomIn.classList.add('bzgf-zoom-in', 'icon-copy')
+            btnZoomIn.addEventListener('click', () => {
+                this.zoomIn(id)
+            })
+            this.stagedNodes[id].appendChild(btnZoomIn)
+        }
         this.nodesContainer.append(this.stagedNodes[id])
         return(this.stagedNodes[id])
     }
 
+    zoomIn(id){
+        console.log('==============================>ZOOM IN:', id)
+        const node = this.stagedNodes[id]
+        const nodeBB = node.getBoundingClientRect()
+        const parentBB = this.nodesContainer.getBoundingClientRect()
+        const sx = parentBB.width / nodeBB.width
+        const sy = parentBB.height / nodeBB.height
+        const tx = parentBB.left - nodeBB.left + this.nodesContainer.scrollLeft // TODO Should have a meth to accumulate scrolls in ancestors
+        const ty = parentBB.top  - nodeBB.top  + this.nodesContainer.scrollTop // TODO Should have a meth to accumulate scrolls in ancestors
+        node.style.setProperty('--tx', tx + 'px')
+        node.style.setProperty('--ty', ty + 'px')
+        node.style.setProperty('--sx', sx)
+        node.style.setProperty('--sy', sy)
+        node.style.zIndex = '9999'
+        node.classList.add('scaler')
+        Promise.all(node.getAnimations().map(a => a.finished)).then((transitions) => {
+const testEl = document.createElement('bz-graflow')
+testEl.setAttribute('flow', '/app/assets/json/bzGraflow/testFlowEic.json')
+testEl.setAttribute('tension', '60')
+testEl.classList.add('eic')
+
+            this.Invade(this, testEl)
+            node.classList.remove('scaler')
+        })
+    }
+
+    Invade(oldEl, newEl){
+        const r = oldEl.getBoundingClientRect()
+        oldEl.style.visibility = 'hidden'
+        newEl.style.position = 'fixed'
+        newEl.style.left = r.left + 'px'
+        newEl.style.top  = r.top  + 'px'
+        newEl.style.width  = r.width + 'px'
+        newEl.style.height = r.height + 'px'
+        oldEl.parentNode.appendChild(newEl)
+    }
+
+    Evade(oldEl, newEl){
+        oldEl.style.visibility = 'visible'
+        oldEl.style.position = 'absolute'
+        oldEl.style.left = '0'
+        oldEl.style.top = '0'
+        oldEl.style.width = '0'
+        oldEl.style.height = '0'
+        newEl.parentNode.removeChild(newEl)
+    }
+    
     addFakeNode(nid, x, y, w, h){
         this.stagedNodes[nid] = document.createElement('div')
         this.stagedNodes[nid].classList.add('bzgf-fake-node')