diff --git a/bzGraflow.js b/bzGraflow.js index a17cb32..9a512e0 100644 --- a/bzGraflow.js +++ b/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')