fireEvent + graflow uses new-style fireEvent

buildoz.js

@@ -48,6 +48,16 @@ class Buildoz extends HTMLElement {
     getBZAttribute(attrName){ // Little helper for defaults
         return(this.getAttribute(attrName) || this.defaultAttrs[attrName] )
     }
+
+    fireEvent(eventName, detail){
+        let myname = this.tagName.toLocaleLowerCase()
+        myname = myname.substring(myname.indexOf('-')+1)
+        this.dispatchEvent(new CustomEvent(`bz:${myname}:${eventName}`, {
+            detail,
+            bubbles: true,
+            composed: true,
+        }))
+    }
 }
 
 class BZselect extends Buildoz {

bzGraflow-editor.js

@@ -0,0 +1,35 @@
+/**
+ *       _  ___   Another      
+ *      / |/ (_)______ __ _____
+ *     /    / / __(_-</ // (_-<
+ *    /_/|_/_/\__/___/\_, /___/ 
+ *                   /___/     
+ *       production !
+ * 
+ * Licensed under the MIT License: 
+ * 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.mainContainer.append(this.nodesContainer)
+        this.graflow = document.createElement('bz-graflow')
+        this.graflow.setAttribute('nodes', nodesUrl)
+        this.mainContainer.append(this.graflow)
+    }
+}
+Buildoz.define('graflow', BZgraflow)

bzGraflow.js

@@ -125,11 +125,7 @@ class BZgraflow extends Buildoz{
         await this.loadNodes(flowObj.nodesFile)
         this.flow = flowObj.flow
         this.refresh()
-        this.dispatchEvent(new CustomEvent('flowLoaded', {
+        this.fireEvent('flowLoaded', { url: url })
-            detail: { url },
-            bubbles: true,
-            composed: true,
-        }))
     }
 
     async loadNodes(url) {
@@ -172,11 +168,7 @@ class BZgraflow extends Buildoz{
                 BZgraflow._loadedNodeStyles.add(url)
             }
         }
-        this.dispatchEvent(new CustomEvent('nodesLoaded', {
+        this.fireEvent('nodesLoaded', { url: url })
-            detail: { url },
-            bubbles: true,
-            composed: true,
-        }))
     }
 
     addNode(node){ 
@@ -238,7 +230,7 @@ class BZgraflow extends Buildoz{
         this.invade(this, childEl)
         childEl.hostContainer.appendChild(btnExitSubflow)
 
-        childEl.addEventListener('flowLoaded', (e) => {
+        childEl.addEventListener('bz:graflow:flowLoaded', (e) => {
             for(const portLink of flowNode.subflow.portLinks){
                 const nid = crypto.randomUUID()
                 childEl.addNode({   
@@ -302,12 +294,8 @@ class BZgraflow extends Buildoz{
             this.hostContainer.style.visibility = 'hidden'
             childEl.style.transform = 'none' // Important for nested subflows to position correctly
             childEl.style.willChange = ''
-            newEl.style.overflow = 'auto'
+            childEl.style.overflow = 'auto'
-            this.dispatchEvent(new CustomEvent('subflowLoaded', {
+            this.fireEvent('subflowLoaded', { subflow: childEl })
-                detail: { subflow: childEl },
-                bubbles: true,
-                composed: true,
-            }))
         }, { once:true })
     }
 
@@ -382,11 +370,7 @@ class BZgraflow extends Buildoz{
             this.hostContainer.style.opacity = '1'
             this.hostContainer.style.visibility = 'visible'
             childEl.style.willChange = ''
-            this.dispatchEvent(new CustomEvent('subflowExited', {
+            this.fireEvent('subflowExited', { subflow: childEl })
-                detail: { subflow: childEl },
-                bubbles: true,
-                composed: true,
-            }))
         }, { once:true })
     }
     
@@ -450,11 +434,7 @@ class BZgraflow extends Buildoz{
             else this.currentOrientation = 'vertical'
         }
         if(forceAutoplace) this.autoPlace(this.currentOrientation) 
-        this.dispatchEvent(new CustomEvent('refreshed', {
+        this.fireEvent('refreshed', { })
-            detail: { },
-            bubbles: true,
-            composed: true,
-        }))            
     }
 
     // Convert viewport (client) coordinates to this instance's SVG local coordinates.
@@ -993,11 +973,7 @@ class BZgraflow extends Buildoz{
             
             if(p < 1) requestAnimationFrame(frame.bind(this))
             else{
-                this.dispatchEvent(new CustomEvent('nodeMoved', {
+                this.fireEvent('nodeMoved', { nid, x, y })
-                    detail: { nid, x, y },
-                    bubbles: true,
-                    composed: true,
-                }))
             }
         }    
         requestAnimationFrame(frame.bind(this))
@@ -1021,11 +997,7 @@ class BZgraflow extends Buildoz{
                 wire.setAttribute('d', path)
             }
         }
-        this.dispatchEvent(new CustomEvent('wiresUpdated', {
+        this.fireEvent('wiresUpdated', { nid, orientation, LondLinkfix })
-            detail: { nid, orientation, LondLinkfix },
-            bubbles: true,
-            composed: true,
-        }))
     }
     
     getLink(nid1, nid2){
@@ -1200,7 +1172,7 @@ class MovingNodes{
         this._boundPointerDown = this.pointerDown.bind(this)
         this._boundPointerMove = this.pointerMove.bind(this)
         this._boundPointerUp = this.pointerUp.bind(this)
-        this.graflow.addEventListener('refreshed', this.enableMovingNodes.bind(this))
+        this.graflow.addEventListener('bz:graflow:refreshed', this.enableMovingNodes.bind(this))
     }
     
     enableMovingNodes() { 
@@ -1285,6 +1257,8 @@ class MovingNodes{
         this.state.node.releasePointerCapture(e.pointerId)
         this.state.node.style.pointerEvents = ''
         this.state = null
+
+        this.graflow.fireEvent('nodeMoved', { nodeId: this.state.node.dataset.id, x: this.state.x, y: this.state.y })
     }
 }
 
@@ -1295,9 +1269,9 @@ class EditWires{
         this.state = null
         this.graflow.tabIndex = 0 // Make keyboard reactive
         this._boundPointerMove = this.pointerMove.bind(this)
-        this.graflow.addEventListener('refreshed', this.enableEditWires.bind(this))
+        this.graflow.addEventListener('bz:graflow:refreshed', this.enableEditWires.bind(this))
-        this.graflow.addEventListener('refreshed', this.enableSelectPorts.bind(this))
+        this.graflow.addEventListener('bz:graflow:refreshed', this.enableSelectPorts.bind(this))
-        this.graflow.addEventListener('wiresUpdated', this.enableEditWires.bind(this))
+        this.graflow.addEventListener('bz:graflow:wiresUpdated', this.enableEditWires.bind(this))
         this.graflow.addEventListener('keyup', this.onKeyUp.bind(this))
     }
 
@@ -1422,6 +1396,7 @@ class EditWires{
             return('')
         }
         this.graflow.addWire({ from: [idNode1, idPort1], to: [idNode2, idPort2] })
+        this.graflow.fireEvent('wireAdded', { from: [idNode1, idPort1], to: [idNode2, idPort2], id: `${idNode1}_${idNode2}` })
     }
 
     onSelectWire(e){
@@ -1446,6 +1421,7 @@ class EditWires{
             delete this.graflow.stagedWires[wireId]
             this.currentlySelectedWire.remove()
             this.currentlySelectedWire = null
+            this.graflow.fireEvent('wireRemoved', { wireId })
             return
         }
         if(e.key == 'Escape') {

graflow_examples/etest1.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>graflow</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="../../eicui/eicui-2.0.css">
+        <link type="text/css" rel="stylesheet" href="../buildoz.css">
+        <script src="../buildoz.js"></script>      
+        <script src="../bzGraflow.js"></script>
+        <script src="../bzGraflow-editor.js"></script>
+        <style>
+            @font-face { /*FF does not indirectly load if inside a shawdow-dom */
+                font-family: 'glyphs';
+                src:  url('/assets/styles/fonts/glyphs.eot');
+                src:  url('/assets/styles/fonts/glyphs.eot') format('embedded-opentype'),
+                    url('/assets/styles/fonts/glyphs.ttf') format('truetype'),
+                    url('/assets/styles/fonts/glyphs.woff') format('woff'),
+                    url('/assets/styles/fonts/glyphs.svg') format('svg');
+                font-weight: normal;
+                font-style: normal;
+                font-display: block;
+            }
+            body{
+                display: grid;
+                grid-gap: 5px;
+                background:#888; 
+                font-size: 16px;
+            }
+            .demooptions{
+                padding: 2px;
+                position: absolute;
+                top: 2px;
+                right: 2px;
+                width: 10em;
+                background: #FFFB;
+                border-radius: 5px;
+                text-align: center;
+                z-index:99999;
+                font-size: .7em;
+                border: 1px solid #999;
+            }
+            .demooptions button{
+                text-transform: none;
+                margin: 2px;
+                font-size: 1em;
+            }            
+            bz-graflow{
+                overflow: scroll;
+                border: 2px solid black;
+            }
+            bz-graflow.compunet{ grid-column: 1 / -1; width: 100vw; height: 60vh; background:black; }
+          </style>
+        <script>
+            window.addEventListener('load',()=>{
+
+            })
+        </script>
+	</head>
+
+	<body>
+        <bz-grafloweditor nodes=""./nodesLib/nodesTest1.html" >
+        </bz-grafloweditor>
+	</body>
+</html>

graflow_examples/test.html

@@ -44,7 +44,7 @@
             <tbody>
                 <tr>
                     <td><a target="test1" href="./test1.html">test1</a></td>
-                    <td>P42</td>
+                    <td>Graflow P42</td>
                     <td>YES</td>
                     <td>2 depths</td>
                     <td></td>
@@ -56,7 +56,7 @@
                 </tr>
                 <tr>
                     <td><a target="test2" href="./test2.html">test2</a></td>
-                    <td>Organigram</td>
+                    <td>Graflow Organigram</td>
                     <td>YES</td>
                     <td></td>
                     <td></td>
@@ -68,7 +68,7 @@
                 </tr>
                 <tr>
                     <td><a target="test3" href="./test3.html">test3</a></td>
-                    <td>EIC simple</td>
+                    <td>Graflow EIC simple</td>
                     <td>NO</td>
                     <td>1 depth</td>
                     <td></td>
@@ -80,7 +80,7 @@
                 </tr>
                 <tr>
                     <td><a target="test4" href="./test4.html">test4</a></td>
-                    <td>EIC-ICMP</td>
+                    <td>Graflow EIC-ICMP</td>
                     <td>NO</td>
                     <td></td>
                     <td>X</td>
@@ -92,7 +92,7 @@
                 </tr>
                 <tr>
                     <td><a target="test4.5" href="./test4.5.html">test4.5</a></td>
-                    <td>EIC-ICMP II</td>
+                    <td>Graflow EIC-ICMP II</td>
                     <td>NO</td>
                     <td></td>
                     <td></td>
@@ -104,7 +104,7 @@
                 </tr>
                 <tr>
                     <td><a target="test5" href="./test5.html">test5</a></td>
-                    <td>P42</td>
+                    <td>Graflow P42</td>
                     <td>YES</td>
                     <td></td>
                     <td></td>
@@ -116,7 +116,7 @@
                 </tr>
                 <tr>
                     <td><a target="test6" href="./test6.html">test6</a></td>
-                    <td>16 ports test</td>
+                    <td>Graflow 16 ports test</td>
                     <td>NO</td>
                     <td></td>
                     <td></td>
@@ -128,5 +128,20 @@
                 </tr>
             </tbody>
         </table>   
+        <br>       
+        <table>
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>Style</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td><a target="test7" href="./etest1.html">Editor test</a></td>
+                    <td>P42</td>
+                </tr>
+            </tbody>
+        </table>
 	</body>
 </html>

graflow_examples/test1.html

@@ -53,10 +53,10 @@
         <script>
             window.addEventListener('load',()=>{
                 let grflw1 = document.querySelector('bz-graflow.compunet')
-                grflw1.addEventListener('subflowLoaded',
+                grflw1.addEventListener('bz:graflow:subflowLoaded',
                     (evt) => { grflw1 = evt.detail.subflow }
                 )
-                grflw1.addEventListener('subflowExited',
+                grflw1.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw1 = evt.target }
                 )
                 document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',

graflow_examples/test2.html

@@ -53,10 +53,10 @@
         <script>
             window.addEventListener('load',()=>{
                 let grflw3 = document.querySelector('bz-graflow.organi')
-                grflw3.addEventListener('subflowLoaded',
+                grflw3.addEventListener('bz:graflow:subflowLoaded',
                     (evt) => { grflw3 = evt.detail.subflow }
                 )
-                grflw3.addEventListener('subflowExited',
+                grflw3.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw3 = evt.target }
                 )
                 document.querySelector('[data-trigger="onAutoplace3H"]').addEventListener('click',

graflow_examples/test3.1.html

@@ -56,7 +56,7 @@
                 grflw2.setAttribute('tension', document.querySelector('input[data-id="eic"]').value)
                 grflw2.setAttribute('align', document.querySelector('select[name="align"]').value)
                 grflw2.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)                  
-                grflw2.addEventListener('refresh',
+                grflw2.addEventListener('bz:graflow:refresh',
                     (evt) => { grflw2.style.transform = 'scale(.75)'; }
                 )
                 document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',

graflow_examples/test3.html

@@ -56,10 +56,10 @@
                 grflw2.setAttribute('tension', document.querySelector('input[data-id="eic"]').value)
                 grflw2.setAttribute('align', document.querySelector('select[name="align"]').value)
                 grflw2.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)                  
-                grflw2.addEventListener('subflowLoaded',
+                grflw2.addEventListener('bz:graflow:subflowLoaded',
                     (evt) => { grflw2 = evt.detail.subflow }
                 )
-                grflw2.addEventListener('subflowExited',
+                grflw2.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw2 = evt.target }
                 )
                 document.querySelector('[data-trigger="onAutoplace2H"]').addEventListener('click',

graflow_examples/test4.5.html

@@ -56,10 +56,10 @@
                 grflw4.setAttribute('tension', document.querySelector('input[data-id="icmp"]').value)
                 grflw4.setAttribute('align', document.querySelector('select[name="align"]').value)
                 grflw4.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)                
-                grflw4.addEventListener('subflowLoaded',
+                grflw4.addEventListener('bz:graflow:subflowLoaded',
                     (evt) => { grflw4 = evt.detail.subflow }
                 )
-                grflw4.addEventListener('subflowExited',
+                grflw4.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw4 = evt.target }
                 )
                 document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',

graflow_examples/test4.html

@@ -82,10 +82,10 @@
                 const severities = ['primary', 'info', 'success', 'warning', 'danger', 'accent']
                 
                 let grflw4 = document.querySelector('bz-graflow.icmp')
-                grflw4.addEventListener('subflowLoaded',
+                grflw4.addEventListener('bz:graflow:subflowLoaded',
                     (evt) => { grflw4 = evt.detail.subflow }
                 )
-                grflw4.addEventListener('subflowExited',
+                grflw4.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw4 = evt.target }
                 )
                 document.querySelector('[data-trigger="onAutoplace4H"]').addEventListener('click',
@@ -117,7 +117,7 @@
                     if (sidx >= severities.length) sidx = 0
                     setTimeout(sevanimation, 1000)
                 }
-                grflw4.addEventListener('refreshed',() => {
+                grflw4.addEventListener('bz:graflow:refreshed',() => {
                     if(aifmi) return
                     aifmi = grflw4.stagedNodes['aifm-investment'].querySelector('.body')
                     sevanimation()

graflow_examples/test5.html

@@ -53,10 +53,10 @@
         <script>
             window.addEventListener('load',()=>{
                 let grflw1 = document.querySelector('bz-graflow.compunet')
-                grflw1.addEventListener('subflowLoaded',
+                grflw1.addEventListener('bz:graflow:subflowLoaded',
                     (evt) => { grflw1 = evt.detail.subflow }
                 )
-                grflw1.addEventListener('subflowExited',
+                grflw1.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw1 = evt.target }
                 )
                 document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',

graflow_examples/test6.html

@@ -56,10 +56,10 @@
                 grflw1.setAttribute('tension', document.querySelector('input[data-id="compunet"]').value)
                 grflw1.setAttribute('align', document.querySelector('select[name="align"]').value)
                 grflw1.setAttribute('wiretype', document.querySelector('select[name="wiretype"]').value)
-                grflw1.addEventListener('subflowLoaded',
+                grflw1.addEventListener('bz:graflow:subflowLoaded',
                     (evt) => { grflw1 = evt.detail.subflow }
                 )
-                grflw1.addEventListener('subflowExited',
+                grflw1.addEventListener('bz:graflow:subflowExited',
                     (evt) => { grflw1 = evt.target }
                 )
                 document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',