Merge branch 'main' of https://gitea.internike.com/nike/buildoz

buildoz.css

@@ -72,7 +72,17 @@ bz-select >  div.options-container{
     transition: max-height 0.4s ease;
 }
 bz-select >  div.options-container.open{ pointer-events: auto; max-height: 10em;}
-bz-select option{
+div.options-container.portaled{
+    pointer-events: none;
+    position: fixed;
+    z-index: 10000;
+    max-height: 0;
+    overflow: auto;
+    transition: max-height 0.4s ease;
+}
+div.options-container.portaled.open{ pointer-events: auto; max-height: 10em;}
+bz-select option,
+div.options-container option{
     background-color: #DDD;
     border: 1px solid black;
     color: #000;
@@ -88,12 +98,14 @@ bz-select option{
         margin-top 0.3s ease,
         opacity 0.3s ease;
 }
-bz-select option.open{
+bz-select option.open,
+div.options-container option.open{
     margin: 0;
     opacity: 1;
     pointer-events: auto;
 }
-bz-select option:hover{
+bz-select option:hover,
+div.options-container option:hover{
     background-color: #44F;
     color: #FFF;
 }

buildoz.js

@@ -135,7 +135,7 @@ class BZselect extends Buildoz {
         if(!this.optionscontainer) this.optionscontainer = document.createElement('div')
         this.optionscontainer.classList.add('options-container')
         this.append(this.optionscontainer)
-        this.options = this.querySelectorAll('option')
+        this.syncOptions()
         if(this.#fillFromMarkup){ //can only do it once and only if fillOptions was not already called !!
             for(const opt of this.options){ 
                 this.optionscontainer.append(opt) // Will move is to the right parent
@@ -146,6 +146,15 @@ class BZselect extends Buildoz {
         }
 
     }
+
+    disconnectedCallback() {
+        if(this.open || this._closing) this.closeDropdown(true)
+    }
+
+    syncOptions() {
+        if(this.optionscontainer) this.options = this.optionscontainer.querySelectorAll('option')
+        else this.options = []
+    }
     
     // static get observedAttributes(){ // Only if you want actions on attr change
     //     return([...super.observedAttributes, 'disabled'])
@@ -172,19 +181,104 @@ class BZselect extends Buildoz {
     }
 
     toggle(){ 
-        for(const opt of this.options){
+        if(this.open) this.closeDropdown()
-            if(this.open) {
+        else this.openDropdown()
-                opt.classList.remove('open')
+    }
-                this.optionscontainer.classList.remove('open')
+
-            } else {
+    openDropdown() {
-                document.querySelectorAll('bz-select').forEach((sel) => {
+        document.querySelectorAll('bz-select').forEach((sel) => {
-                    if((sel!==this) && sel.open) sel.toggle()
+            if((sel!==this) && sel.open) sel.closeDropdown(true)
-                })
+        })
-                opt.classList.add('open')
+        this.optionscontainer.classList.add('portaled')
+        document.body.appendChild(this.optionscontainer)
+        this.positionPortal()
+        this.bindPortalListeners()
+        this.open = true
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                if(!this.open) return
                 this.optionscontainer.classList.add('open')
+                for(const opt of this.options) opt.classList.add('open')
+            })
+        })
+    }
+
+    closeDropdown(immediate = false) {
+        if(!this.open) return
+        this.unbindPortalListeners()
+        for(const opt of this.options) opt.classList.remove('open')
+        this.optionscontainer.classList.remove('open')
+        if(immediate) {
+            this.clearCloseTransition()
+            this.finishCloseDropdown()
+            return
+        }
+        this._closing = true
+        this._onTransitionEnd = (evt) => {
+            if(evt.target !== this.optionscontainer) return
+            if(evt.propertyName !== 'max-height') return
+            this.finishCloseDropdownAfterTransition()
+        }
+        this.optionscontainer.addEventListener('transitionend', this._onTransitionEnd)
+        this._closeTimer = setTimeout(() => this.finishCloseDropdownAfterTransition(), 450)
+    }
+
+    finishCloseDropdownAfterTransition() {
+        if(!this._closing) return
+        this.clearCloseTransition()
+        this.finishCloseDropdown()
+    }
+
+    clearCloseTransition() {
+        this._closing = false
+        if(this._closeTimer) clearTimeout(this._closeTimer)
+        this._closeTimer = null
+        if(this._onTransitionEnd) {
+            this.optionscontainer.removeEventListener('transitionend', this._onTransitionEnd)
+            this._onTransitionEnd = null
+        }
+    }
+
+    finishCloseDropdown() {
+        this.optionscontainer.classList.remove('portaled')
+        this.clearPortalStyles()
+        if(this.optionscontainer.parentElement !== this) this.append(this.optionscontainer)
+        this.open = false
+    }
+
+    positionPortal() {
+        const rect = this.button.getBoundingClientRect()
+        this.optionscontainer.style.top = `${rect.bottom}px`
+        this.optionscontainer.style.left = `${rect.left}px`
+        this.optionscontainer.style.width = `${rect.width}px`
+    }
+
+    clearPortalStyles() {
+        this.optionscontainer.style.top = ''
+        this.optionscontainer.style.left = ''
+        this.optionscontainer.style.width = ''
+    }
+
+    bindPortalListeners() {
+        this._repositionBound = this.positionPortal.bind(this)
+        window.addEventListener('scroll', this._repositionBound, true)
+        window.addEventListener('resize', this._repositionBound)
+        this._outsideClickBound = (evt) => {
+            if(this.open && !this.contains(evt.target) && !this.optionscontainer.contains(evt.target)) {
+                this.closeDropdown()
             }
         }
-        this.open = !this.open
+        this._outsideClickTimer = setTimeout(() => {
+            document.addEventListener('click', this._outsideClickBound, true)
+        }, 0)
+    }
+
+    unbindPortalListeners() {
+        if(this._repositionBound) window.removeEventListener('scroll', this._repositionBound, true)
+        if(this._repositionBound) window.removeEventListener('resize', this._repositionBound)
+        if(this._outsideClickBound) document.removeEventListener('click', this._outsideClickBound, true)
+        if(this._outsideClickTimer) clearTimeout(this._outsideClickTimer)
+        this._outsideClickTimer = null
     }
 
     onClick(evt){ 
@@ -196,7 +290,7 @@ class BZselect extends Buildoz {
     onOption(value, silent=false){ 
         if(this.getAttribute('disabled') !== null) return
         this.value = value
-        if(!silent) this.toggle()     
+        if(!silent && this.open) this.closeDropdown()
     }
 
     addOption(value, markup){
@@ -207,16 +301,16 @@ class BZselect extends Buildoz {
         opt.addEventListener('click',this.onClick.bind(this))
         if(!this.optionscontainer) this.optionscontainer = document.createElement('div')
         this.optionscontainer.append(opt)
-        this.options = this.querySelectorAll('option')
+        this.syncOptions()
         this.#fillFromMarkup = false
     }
 
     fillOptions(opts, erase = true){ 
         // Caution: you cannot count on connectedCallback to have run already, because one might fill before adding to the DOM
         if(erase){
-            this.options = this.querySelectorAll('option') 
+            this.syncOptions()
             this.options.forEach(node => { node.remove() })
-            this.options = this.querySelectorAll('option')
+            this.syncOptions()
             this.onOption('', true) // unselect last
         } 
         for(const opt of opts) this.addOption(opt.value, opt.markup)

bzGraflow.js

@@ -30,6 +30,7 @@ class BZgraflow extends Buildoz{
         this.stagedNodes = { }
         this.stagedWires = { }
         this.arrowDefs = null
+        this.arrowMarkerId = `arrow-${crypto.randomUUID()}`
         this.currentOrientation = null
     }
 
@@ -184,6 +185,8 @@ class BZgraflow extends Buildoz{
         for(const tpl of doc.querySelectorAll('template')){
             if(tpl.id=='svg-arrows'){
                 this.arrowDefs = tpl.querySelector('defs').cloneNode(true)
+                const defaultArrow = this.arrowDefs.querySelector('#arrow')
+                if(defaultArrow) defaultArrow.id = this.arrowMarkerId
                 this.wiresContainer.appendChild(this.arrowDefs)
             } else {
                 const rootEl = tpl.content.querySelector('.bzgf-node')
@@ -463,8 +466,8 @@ class BZgraflow extends Buildoz{
         this.stagedWires[id] = document.createElementNS('http://www.w3.org/2000/svg', 'path')
         this.stagedWires[id].setAttribute('d', path)
         this.stagedWires[id].setAttribute('fill', 'none')
-        if(this.arrowDefs && link.endArrow) this.stagedWires[id].setAttribute('marker-end','url(#arrow)')
+        if(this.arrowDefs && link.endArrow) this.stagedWires[id].setAttribute('marker-end',`url(#${this.arrowMarkerId})`)
-        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start','url(#arrow)')
+        if(this.arrowDefs && link.startArrow) this.stagedWires[id].setAttribute('marker-start',`url(#${this.arrowMarkerId})`)
         this.stagedWires[id].classList.add('bzgf-wire')
         this.stagedWires[id].dataset.id = id
         this.stagedWires[id].link = link
@@ -502,15 +505,97 @@ class BZgraflow extends Buildoz{
                 else this.currentOrientation = 'vertical'
             }
         }
-        if(forceAutoplace) this.autoPlace(this.currentOrientation, parseInt(this.getBZAttribute('gapx')) || 80, parseInt(this.getBZAttribute('gapy')) || 80) 
+        const gapx = parseInt(this.getBZAttribute('gapx')) || 80
-        this.fireEvent('refreshed', { })
+        const gapy = parseInt(this.getBZAttribute('gapy')) || 80
-        if(this.hasAttribute('autofit')){
+        const finishRefresh = () => {
-            const autofitAttr = this.getAttribute('autofit')
+            this.fireEvent('refreshed', { })
-            const autofitPercent = (autofitAttr !== null && autofitAttr !== '' && !Number.isNaN(parseFloat(autofitAttr)))
+            if(this.hasAttribute('autofit')){
-                ? parseFloat(autofitAttr)
+                const autofitAttr = this.getAttribute('autofit')
-                : undefined
+                const autofitPercent = (autofitAttr !== null && autofitAttr !== '' && !Number.isNaN(parseFloat(autofitAttr)))
-            this.autofit(autofitPercent)
+                    ? parseFloat(autofitAttr)
+                    : undefined
+                if(this._canRunAutoPlace()) this.autofit(autofitPercent)
+                else this._scheduleLayoutWhenReady(() => this.autofit(autofitPercent))
+            }
         }
+        const onLayoutComplete = () => {
+            this.fireEvent('layoutComplete', { })
+            finishRefresh()
+        }
+        if(forceAutoplace) this._scheduleAutoPlaceWhenReady(this.currentOrientation, gapx, gapy, onLayoutComplete)
+        else onLayoutComplete()
+    }
+
+    disconnectedCallback(){
+        this._disconnectLayoutObserver()
+        super.disconnectedCallback?.()
+    }
+
+    _disconnectLayoutObserver(){
+        if(this._layoutObserver) {
+            this._layoutObserver.disconnect()
+            this._layoutObserver = null
+        }
+    }
+
+    _canRunAutoPlace(){
+        let nodesHaveLayoutSize = false
+        const ids = Object.keys(this.stagedNodes || {})
+        if(ids.length === 0) return(true)
+        for(const nid of ids){
+            if(nid.startsWith('longLinkPlaceHolder_')) continue
+            const el = this.stagedNodes[nid]
+            if(el && (el.offsetWidth > 0 || el.offsetHeight > 0)) {
+                nodesHaveLayoutSize=true
+                break
+            }
+        }
+        return((this.clientWidth > 0 && this.clientHeight > 0) && nodesHaveLayoutSize)
+    }
+
+    /**
+     * autoPlace uses offsetWidth/offsetHeight; when the host is hidden (display:none / off-screen view)
+     * those are 0 and layout is wrong. Defer until the element is measurable.
+     */
+    _scheduleLayoutWhenReady(callback){
+        this._layoutScheduleToken = (this._layoutScheduleToken || 0) + 1
+        const token = this._layoutScheduleToken
+        this._disconnectLayoutObserver()
+
+        const attempt = () => {
+            if(token !== this._layoutScheduleToken) return(true)
+            if(!this._canRunAutoPlace()) return(false)
+            this._disconnectLayoutObserver()
+            callback()
+            return(true)
+        }
+
+        if(attempt()) return
+
+        this._layoutObserver = new ResizeObserver(() => { attempt() })
+        this._layoutObserver.observe(this)
+
+        let frames = 0
+        const rafPoll = () => {
+            if(token !== this._layoutScheduleToken) return
+            if(attempt()) return
+            if(++frames < 12) requestAnimationFrame(rafPoll)
+        }
+        requestAnimationFrame(rafPoll)
+    }
+
+    _scheduleAutoPlaceWhenReady(orientation, gapx, gapy, onLayoutComplete){
+        this._scheduleLayoutWhenReady(() => {
+            this.autoPlace(orientation, gapx, gapy, null, null, onLayoutComplete)
+        })
+    }
+
+    _maybeFireLayoutComplete(){
+        if(this._layoutMovePending > 0) return
+        if(!this._layoutCompleteHandler) return
+        const fn = this._layoutCompleteHandler
+        this._layoutCompleteHandler = null
+        fn()
     }
 
     // Convert viewport (client) coordinates to this instance's SVG local coordinates.
@@ -700,7 +785,7 @@ class BZgraflow extends Buildoz{
         return(path)
     }
 
-    autoPlace(orientation = null, gapx = null, gapy = null, tween = null, align = null){
+    autoPlace(orientation = null, gapx = null, gapy = null, tween = null, align = null, onLayoutComplete = null){
         if(orientation == null) orientation = this.getBZAttribute('orientation') || this.currentOrientation || 'horizontal'
         if(gapx == null) gapx = parseInt(this.getBZAttribute('gapx')) || 80
         if(gapy == null) gapy = parseInt(this.getBZAttribute('gapy')) || 80
@@ -712,6 +797,9 @@ class BZgraflow extends Buildoz{
         // moveNode() checks this token each frame and will no-op if superseded.
         this._autoPlaceToken = (this._autoPlaceToken || 0) + 1
         const token = this._autoPlaceToken
+        this._layoutMovePending = 0
+        this._layoutCompleteToken = token
+        this._layoutCompleteHandler = (typeof onLayoutComplete === 'function') ? onLayoutComplete : null
 
         // Cleanup placeholders from previous autoPlace() runs.
         // Each run creates new longLinkPlaceHolder_* IDs; without cleanup they accumulate in the DOM.
@@ -835,7 +923,7 @@ class BZgraflow extends Buildoz{
                             y = Math.max(parentsY[parents[nid][0]], y) //TODO handle multiple parents with avg                            
                         } 
                         placedY = y
-                        this.moveNode(nid, x, y, orientation, tween, null, token)                        
+                        this.moveNode(nid, x, y, orientation, tween, token)                        
                         if((align == 'parent') && (nid in parents) && (parents[nid][0] in parentsY)) {
                             parentsY[parents[nid][0]] +=  gapy + nodeHeight
                         } else {
@@ -848,7 +936,7 @@ class BZgraflow extends Buildoz{
                         }
                         placedY = y
                         this.addFakeNode(nid, x, y, wMax*0.75, fakeNodeHeight)
-                        this.moveNode(nid, x, y, orientation, tween, null, token)
+                        this.moveNode(nid, x, y, orientation, tween, token)
                         // Never increment parentsY for fake nodes: they're placeholders and must not disalign real children
                         y = Math.max(y, placedY + gapy + fakeNodeHeight)
                     } 
@@ -869,7 +957,7 @@ class BZgraflow extends Buildoz{
                             !nid.startsWith('longLinkPlaceHolder_') && nid in parents && parents[nid][0] === pid
                         )
                         if(firstRealChild && nodeY[pid] !== nodeY[firstRealChild]){
-                            this.moveNode(pid, nodeX[pid], nodeY[firstRealChild], orientation, tween, null, token)
+                            this.moveNode(pid, nodeX[pid], nodeY[firstRealChild], orientation, tween, token)
                             nodeY[pid] = nodeY[firstRealChild]
                         }
                     }
@@ -898,17 +986,18 @@ class BZgraflow extends Buildoz{
                 for(const nid of layer){
                     if(!nid.startsWith('longLinkPlaceHolder_')){
                         const bb = this.stagedNodes[nid].getBoundingClientRect()
-                        this.moveNode(nid, x, y, orientation, tween, null, token)
+                        this.moveNode(nid, x, y, orientation, tween, token)
                         x +=  gapx + (this.stagedNodes[nid].offsetWidth || bb.width)
                     } else {
                         this.addFakeNode(nid, x, y, fakeNodeWidth, hMax*0.75)
-                        this.moveNode(nid, x, y, orientation, tween, null, token)
+                        this.moveNode(nid, x, y, orientation, tween, token)
                         x +=  gapx + fakeNodeWidth 
                     }
                 }
                 y += hMax + gapy
             }            
         }
+        this._maybeFireLayoutComplete()
     }
 
     clearFakeNodes(){
@@ -1028,17 +1117,34 @@ class BZgraflow extends Buildoz{
     }
 
     moveNode(nid, destx, desty, orientation, duration = 200, autoPlaceToken = null) {
-        const t0 = performance.now()
         const el0 = this.stagedNodes?.[nid]
         if(!el0) return
+        let layoutTracked = false
+        if(autoPlaceToken != null && autoPlaceToken === this._layoutCompleteToken) {
+            layoutTracked = true
+            this._layoutMovePending++
+        }
+        const finishLayoutMove = () => {
+            if(!layoutTracked) return
+            layoutTracked = false
+            this._layoutMovePending = Math.max(0, this._layoutMovePending - 1)
+            this._maybeFireLayoutComplete()
+        }
+        const t0 = performance.now()
         const bb = el0.getBoundingClientRect()
         const parentbb = el0.parentElement.getBoundingClientRect()
         const x0=bb.x - parentbb.x
         const y0 = bb.y - parentbb.y
         function frame(t) {
-            if(autoPlaceToken && autoPlaceToken !== this._autoPlaceToken) return
+            if(autoPlaceToken && autoPlaceToken !== this._autoPlaceToken) {
+                finishLayoutMove()
+                return
+            }
             const el = this.stagedNodes?.[nid]
-            if(!el) return
+            if(!el) {
+                finishLayoutMove()
+                return
+            }
             const p = Math.min((t - t0) / duration, 1)
             const k = p * p * (3 - 2 * p) // smoothstep            
             const x = x0 + (destx - x0) * k
@@ -1056,6 +1162,7 @@ class BZgraflow extends Buildoz{
                     flowNode.coords.y = y
                 }
                 this.fireEvent('nodeMoved', { nid, x, y })
+                finishLayoutMove()
             }
         }    
         requestAnimationFrame(frame.bind(this))
@@ -1225,15 +1332,11 @@ class BZgraflow extends Buildoz{
         return(crossLayerLinks)
     }
 
-    autofit(percent=100){ 
+    /**
-        if(!this.parentElement) return
+     * Union bounding boxes of nodes and wires (viewport coords).
-
+     * Same measurement strategy as autofit(). Call with transform cleared for stable sizes.
-        const prevTransformOrigin = this.style.transformOrigin
+     */
-        this.style.transform = 'none'
+    getContentSize(){
-        this.style.transformOrigin = 'top left'
-
-        // Measure real content by unioning viewport-space bounding boxes.
-        // This is robust with overflow:auto and absolute-positioned layers.
         let left = Infinity
         let top = Infinity
         let right = -Infinity
@@ -1250,18 +1353,40 @@ class BZgraflow extends Buildoz{
         this.nodesContainer?.querySelectorAll?.('.bzgf-node').forEach(nodeEl => includeBB(nodeEl.getBoundingClientRect()))
         this.wiresContainer?.querySelectorAll?.('path.bzgf-wire').forEach(path => includeBB(path.getBoundingClientRect()))
 
-        const parentBB = this.parentElement.getBoundingClientRect()
         const gapx = parseInt(this.getBZAttribute('gapx')) || 80
         const gapy = parseInt(this.getBZAttribute('gapy')) || 80
-        const rawW = Number.isFinite(left) && Number.isFinite(right) ? Math.max(right - left, 1) : Math.max(this.mainContainer?.clientWidth || this.offsetWidth || 1, 1)
+        const hasBounds = Number.isFinite(left) && Number.isFinite(right) && Number.isFinite(top) && Number.isFinite(bottom)
-        const rawH = Number.isFinite(top) && Number.isFinite(bottom) ? Math.max(bottom - top, 1) : Math.max(this.mainContainer?.clientHeight || this.offsetHeight || 1, 1)
+        const rawWidth = hasBounds ? Math.max(right - left, 1) : Math.max(this.mainContainer?.clientWidth || this.offsetWidth || 1, 1)
-        const contentW = rawW + (2 * gapx)
+        const rawHeight = hasBounds ? Math.max(bottom - top, 1) : Math.max(this.mainContainer?.clientHeight || this.offsetHeight || 1, 1)
-        const contentH = rawH + (2 * gapy)
+
+        return({
+            left: hasBounds ? left : null,
+            top: hasBounds ? top : null,
+            right: hasBounds ? right : null,
+            bottom: hasBounds ? bottom : null,
+            rawWidth,
+            rawHeight,
+            width: rawWidth + (2 * gapx),
+            height: rawHeight + (2 * gapy),
+            gapx,
+            gapy,
+        })
+    }
+
+    autofit(percent=100){ 
+        if(!this.parentElement) return
+
+        const prevTransformOrigin = this.style.transformOrigin
+        this.style.transform = 'none'
+        this.style.transformOrigin = 'top left'
+
+        const { left, top, width: contentW, height: contentH, gapx, gapy } = this.getContentSize()
+        const parentBB = this.parentElement.getBoundingClientRect()
         const sx = parentBB.width / contentW
         const sy = parentBB.height / contentH
         const scale = Math.min(sx, sy)*(percent/100)  // uniform scale to fit inside parent
-        const tx = Number.isFinite(left) ? (-left + gapx) : gapx
+        const tx = left != null ? (-left + gapx) : gapx
-        const ty = Number.isFinite(top) ? (-top + gapy) : gapy
+        const ty = top != null ? (-top + gapy) : gapy
         if(!this.isSubflow) {
             this.style.transformOrigin = prevTransformOrigin || 'top left'
             this.style.transform = `scale(${scale}) translate(${tx}px, ${ty}px)`