graflow: isolated attribute
This commit is contained in:
29
bzGraflow.js
29
bzGraflow.js
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user