graflow started zomminout

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; }
@@ -30,7 +31,24 @@ class BZgraflow extends Buildoz{
                 height: 5px;
                 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')