fixed refacto of this.buildosUrl

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;
+}

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

bzGraflow-editor.js

@@ -10,13 +10,10 @@
  * 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() { 
@@ -25,11 +22,24 @@ class BZgrafloweditor extends Buildoz{
         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)
+Buildoz.define('grafloweditor', BZgrafloweditor)

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')

graflow_examples/etest1.html

@@ -59,7 +59,7 @@
 	</head>
 
 	<body>
-        <bz-grafloweditor nodes=""./nodesLib/nodesTest1.html" >
+        <bz-grafloweditor nodes="./nodesLib/nodesTest1.html" >
         </bz-grafloweditor>
 	</body>
 </html>

graflow_examples/test.html

@@ -138,7 +138,7 @@
             </thead>
             <tbody>
                 <tr>
-                    <td><a target="test7" href="./etest1.html">Editor test</a></td>
+                    <td><a target="etest1" href="./etest1.html">Editor test</a></td>
                     <td>P42</td>
                 </tr>
             </tbody>