nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflow: isolated attribute

Browse Source
This commit is contained in:
STEINNI
2026-02-22 14:43:46 +00:00
parent 6cee95ff0e
commit cee10fee4e
1 changed files with 18 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
bzGraflow.js
View File

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