diff --git a/buildoz.css b/buildoz.css index 90db086..d053889 100644 --- a/buildoz.css +++ b/buildoz.css @@ -195,7 +195,7 @@ bz-graflow { position: relative; display: block; width: 100vw; - height: 50vh; + height: 100vh; box-sizing: border-box; } bz-graflow .bzgf-main-container{ @@ -261,3 +261,36 @@ bz-graflow .bzgf-nodes-container .port.selectable:hover{ } /* BZGRAFLOW_CORE_END */ + +bz-grafloweditor { + width: 98vw; + height: 98vh; + margin: auto; +} +bz-grafloweditor .bzgfe-main-container{ + height: 100%; + width: 100%; + overflow: hidden; + display: grid; + grid-template-columns: 20vw auto; + grid-gap: 1px; + background: #FFF; +} + +bz-grafloweditor .bzgfe-nodes-container{ + overflow: auto; + border: 2px solid #000; + display: grid; + grid-auto-flow: row; + justify-items: center; +} + +bz-grafloweditor bz-graflow{ + height: 100%; + width: 100%; +} + +bz-grafloweditor .bzgfe-nodes-container .bzgf-node{ + position: relative; + margin: 5px auto; +} \ No newline at end of file diff --git a/buildoz.js b/buildoz.js index 2e3695b..cfb44f5 100644 --- a/buildoz.js +++ b/buildoz.js @@ -12,9 +12,17 @@ */ class Buildoz extends HTMLElement { + + // static is evaluated when the class is defined, therefore while buildoz.js is executing. + // therefore document.currentScript refers to buildoz.js (but not later!!) + static _buildozUrl = document.currentScript?.src ?? '' + constructor(){ super() // always call super() first! this.attrs = {} + + // Usefull for relative dependencies, to keep lib fully portable + this.buildozUrl = Buildoz._buildozUrl // was defined in the past } static get observedAttributes(){ //observable attributes triggering attributeChangedCallback diff --git a/bzGraflow-editor.js b/bzGraflow-editor.js index 442476d..196e3cf 100644 --- a/bzGraflow-editor.js +++ b/bzGraflow-editor.js @@ -10,26 +10,36 @@ * This code is free to use and modify, * as long as the copyright notice and license are kept. */ -const scriptUrl = document.currentScript.src - class BZgrafloweditor extends Buildoz{ constructor(){ super() this.defaultAttrs = { } - } - + connectedCallback() { super.connectedCallback() const nodesUrl = this.getBZAttribute('nodes') this.mainContainer = document.createElement('div') this.mainContainer.classList.add('bzgfe-main-container') this.nodesContainer = document.createElement('div') - this.nodesContainer.classList.add('bzgf-nodes-container') + this.nodesContainer.classList.add('bzgfe-nodes-container') this.mainContainer.append(this.nodesContainer) this.graflow = document.createElement('bz-graflow') this.graflow.setAttribute('nodes', nodesUrl) this.mainContainer.append(this.graflow) + this.append(this.mainContainer) + + this.graflow.addEventListener('bz:graflow:nodesLoaded', this.refreshNodes.bind(this)) + this.graflow.loadNodes(nodesUrl) + + } + + refreshNodes(e){ + for(const nodeType in this.graflow.nodesRegistry){ + const nodeDef = this.graflow.nodesRegistry[nodeType] + this.nodesContainer.append(nodeDef.cloneNode(true)) + } + } } -Buildoz.define('graflow', BZgraflow) \ No newline at end of file +Buildoz.define('grafloweditor', BZgrafloweditor) \ No newline at end of file diff --git a/bzGraflow.js b/bzGraflow.js index 5cd1d14..a39b3a9 100644 --- a/bzGraflow.js +++ b/bzGraflow.js @@ -10,8 +10,6 @@ * This code is free to use and modify, * as long as the copyright notice and license are kept. */ -const scriptUrl = document.currentScript.src - class BZgraflow extends Buildoz{ dirVect = { n: { x: 0, y: -1 }, @@ -37,10 +35,10 @@ class BZgraflow extends Buildoz{ static _coreCssPromise = null - static async getCoreCss(){ + async getCoreCss(){ if(BZgraflow._coreCssPromise) return(await BZgraflow._coreCssPromise) BZgraflow._coreCssPromise = (async() => { - const url = new URL('./buildoz.css', scriptUrl) + const url = new URL('./buildoz.css', this.buildozUrl) const res = await fetch(url) const css = await res.text() const m = css.match(/\/\*\s*BZGRAFLOW_CORE_START\s*\*\/([\s\S]*?)\/\*\s*BZGRAFLOW_CORE_END\s*\*\//) @@ -54,7 +52,7 @@ class BZgraflow extends Buildoz{ if(!this.hasAttribute('isolated')) return if(this._isolatedCoreInjected) return this._isolatedCoreInjected = true - const core = await BZgraflow.getCoreCss() + const core = await this.getCoreCss() // Convert light-dom selectors (`bz-graflow ...`) to shadow-dom selectors (`:host ...`) const shadowCss = core.replaceAll('bz-graflow', ':host') const style = document.createElement('style') diff --git a/graflow_examples/etest1.html b/graflow_examples/etest1.html index 44d6dfa..d609213 100644 --- a/graflow_examples/etest1.html +++ b/graflow_examples/etest1.html @@ -59,7 +59,7 @@ - + diff --git a/graflow_examples/test.html b/graflow_examples/test.html index e4e6039..615b71e 100644 --- a/graflow_examples/test.html +++ b/graflow_examples/test.html @@ -138,7 +138,7 @@ - Editor test + Editor test P42