graflow: isolated attribute

This commit is contained in:
STEINNI
2026-02-22 14:43:46 +00:00
parent 6cee95ff0e
commit cee10fee4e

View File

@@ -35,10 +35,15 @@ class BZgraflow extends Buildoz{
console.warn('BZgraflow: No flow URL !?')
return
}
this.mainContainer = document.createElement('div')
this.mainContainer.classList.add('bzgf-main-container')
this.shadow = this.mainContainer.attachShadow({ mode: 'open' })
// If attribute "isolated" is present, render inside a shadow root.
// Otherwise, render in light DOM (no shadow DOM).
this.hostContainer = document.createElement('div')
this.hostContainer.classList.add('bzgf-main-container')
this.mainContainer = this.hasAttribute('isolated')
? this.hostContainer.attachShadow({ mode: 'open' })
: this.hostContainer
const style = document.createElement('style')
//TODO kick this wart somewhere under a carpet
style.textContent = `
@import '/app/assets/styles/icons.css';
.bzgf-wires-container,
@@ -67,17 +72,16 @@ class BZgraflow extends Buildoz{
scale(var(--sx, 1), var(--sy, 1));
transition: transform 300ms ease-in-out;
}
`
this.shadow.appendChild(style)
this.mainContainer.appendChild(style)
this.nodesContainer = document.createElement('div')
this.nodesContainer.classList.add('bzgf-nodes-container')
this.wiresContainer = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
this.wiresContainer.setAttribute('overflow','visible')
this.wiresContainer.classList.add('bzgf-wires-container')
this.shadow.append(this.wiresContainer)
this.shadow.append(this.nodesContainer)
this.append(this.mainContainer)
this.mainContainer.append(this.wiresContainer)
this.mainContainer.append(this.nodesContainer)
this.append(this.hostContainer)
this.loadFlow(flowUrl) // Let it load async
}
@@ -126,14 +130,17 @@ class BZgraflow extends Buildoz{
}
// Now load styles (once)
if(!BZgraflow._loadedNodeStyles.has(url) || this.attributes.isolated) {
const isIsolated = this.hasAttribute('isolated')
if(isIsolated || !BZgraflow._loadedNodeStyles.has(url)) {
const styles = doc.querySelectorAll('style')
styles.forEach(styleEl => {
const style = document.createElement('style')
style.textContent = styleEl.textContent
this.shadow.appendChild(style)
this.mainContainer.appendChild(style)
})
BZgraflow._loadedNodeStyles.add(url)
// In non-isolated (light DOM) mode, styles apply globally so we can de-dupe across instances.
// In isolated (shadow DOM) mode, styles must be injected per instance.
if(!isIsolated) BZgraflow._loadedNodeStyles.add(url)
}
}