graflowEditor console

buildoz.css

@@ -23,7 +23,7 @@ bz-select > button::after {
     content: "\00BB";
     transform: rotate(90deg);
     position: absolute;
-    right: 0.5em;
+    right: clamp(-1em, calc(100% - 1em), 0.5em);
     top: 0;
     pointer-events: none;
     font-size: 1.5em;
@@ -184,7 +184,7 @@ bz-slidepane[side="right"] div.handle {
     top: 50%;
     width: 11px;
     height: 40px;
-    background: repeating-linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
+    background: repeating-linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.5) 3px, rgba(0,0,0,0.5) 4px );
     transform: translateY(-50%);
     cursor: ew-resize;
 }
@@ -197,6 +197,7 @@ bz-graflow {
     width: 100vw;
     height: 100vh;
     box-sizing: border-box;
+    overflow: hidden;
 }
 bz-graflow .bzgf-main-container{
     width: 100%;
@@ -294,3 +295,29 @@ bz-grafloweditor .bzgfe-nodes-container .bzgf-node{
     position: relative;
     margin: 5px auto;
 }
+bz-grafloweditor bz-slidepane { z-index: 999; background-color: #0008!important;}
+bz-grafloweditor bz-slidepane .inner-console{ 
+    padding: .5em; 
+    background: #FFF; 
+    display: grid;
+    grid-auto-flow: row;
+    grid-gap: 5px;
+}
+
+bz-grafloweditor .inner-console .cols-2{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1em;
+    background-color: #ddd;
+    min-height: 2.5em;
+}
+
+bz-grafloweditor .inner-console .cols-2 label{
+    text-align: right;
+    align-self: center;
+}
+
+bz-grafloweditor .inner-console .cols-2 input{
+    max-height: 2em;
+    align-self: center;
+}

buildoz.js

@@ -290,6 +290,8 @@ class BZslidePane extends Buildoz {
         }
         this.dragMove = this.dragMove.bind(this)
         this.dragEnd = this.dragEnd.bind(this)
+        this.lastClientX = 0
+        this.lastClientY = 0
         // Fill with innerHTML or other DOM manip should not allow coating to be removed
         this._observer = new MutationObserver(muts => { this.coat() })
     }
@@ -320,36 +322,61 @@ class BZslidePane extends Buildoz {
         evt.target.setPointerCapture(evt.pointerId)        
         this.dragStartX = evt.clientX
         this.dragStartY = evt.clientY
+        this.lastClientX = evt.clientX
+        this.lastClientY = evt.clientY
         this.handle.addEventListener('pointermove', this.dragMove)
         this.handle.addEventListener('pointerup', this.dragEnd)
     }
 
     dragMove(evt){
         const box = this.getBoundingClientRect()
-        const parentBox = this.parentElement.getBoundingClientRect()
+        const boundaryEl = this.offsetParent || this.parentElement
-        let width, height
+        const parentBox = boundaryEl.getBoundingClientRect()
+        let width, height, min, max
         switch(this.getAttribute('side')){
             case 'top':
-                height = (evt.clientY > box.top) ? (evt.clientY - box.top) : 0
+                min = parseInt(this.getBZAttribute('minheight')) || 0
-                if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2)
+                if(evt.clientY > (box.top + min)) height = (evt.clientY - box.top)
+                else if(evt.clientY < this.lastClientY) height = min
+                else if(evt.clientY > this.lastClientY) height = 0
+                else break
+                max = parseInt(this.getBZAttribute('maxheight')) || Math.floor(parentBox.height/2)
+                height = Math.min(height, parentBox.height, max)
                 this.style.height = height+'px'
                 break
             case 'bottom':
-                height = (evt.clientY < box.bottom) ? (box.bottom - evt.clientY) : 0
+                min = parseInt(this.getBZAttribute('minheight')) || 0
-                if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2)
+                if(evt.clientY < (box.bottom - min)) height = (box.bottom - evt.clientY)
+                else if(evt.clientY > this.lastClientY) height = min
+                else if(evt.clientY < this.lastClientY) height = 0
+                else break
+                max = parseInt(this.getBZAttribute('maxheight')) || Math.floor(parentBox.height/2)
+                height = Math.min(height, parentBox.height, max)
                 this.style.height = height+'px'
                 break
             case 'left':
-                width = (evt.clientX > box.left) ? (evt.clientX - box.left) : 0
+                min = parseInt(this.getBZAttribute('minwidth')) || 0
-                if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2)
+                if(evt.clientX < (box.left + min)) width = (evt.clientX - box.left)
+                else if(evt.clientX > this.lastClientX) width = min
+                else if(evt.clientX < this.lastClientX) width = 0
+                else break
+                max = parseInt(this.getBZAttribute('maxwidth')) || Math.floor(parentBox.width/2)
+                width = Math.min(width, parentBox.width, max)
                 this.style.width = width+'px'
                 break
             case 'right':
-                width = (evt.clientX < box.right) ? (box.right - evt.clientX) : 0
+                min = parseInt(this.getBZAttribute('minwidth')) || 0
-                if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2)
+                if(evt.clientX < (box.right - min)) width = (box.right - evt.clientX)
+                else if(evt.clientX < this.lastClientX) width = min
+                else if(evt.clientX > this.lastClientX) width = 0
+                else break
+                max = parseInt(this.getBZAttribute('maxwidth')) || Math.floor(parentBox.width/2)
+                width = Math.min(width, parentBox.width, max)
                 this.style.width = width+'px'
                 break
         }
+        this.lastClientX = evt.clientX
+        this.lastClientY = evt.clientY
     }
 
     dragEnd(evt){

bzGraflow-editor.js

@@ -18,6 +18,8 @@ class BZgrafloweditor extends Buildoz{
     
     async connectedCallback() { 
         await customElements.whenDefined('bz-graflow')
+        await customElements.whenDefined('bz-slidepane') 
+        await customElements.whenDefined('bz-select') 
         super.connectedCallback()
         const nodesUrl = this.getBZAttribute('nodes')
         this.mainContainer  = document.createElement('div')
@@ -25,16 +27,79 @@ class BZgrafloweditor extends Buildoz{
         this.nodesContainer = document.createElement('div')
         this.nodesContainer.classList.add('bzgfe-nodes-container')
         this.mainContainer.append(this.nodesContainer)
+        this.slidePane = document.createElement('bz-slidepane')
+        this.slidePane.setAttribute('side', 'right')
+        this.slidePane.setAttribute('data-output', 'console')
+        this.slidePane.setAttribute('maxwidth', '350')
+        this.slidePane.setAttribute('minwidth', '200')
+        this.fillconsole()
+        //this.mainContainer.append(this.slidePane)
         this.graflow = document.createElement('bz-graflow')
         this.graflow.setAttribute('nodes', nodesUrl)
         this.graflow.setAttribute('edit', "nodesmove,editwires,dropnodes")
+        this.graflow.setAttribute('align', "center")
+        this.graflow.setAttribute('wiretype', "bezier")
+        this.graflow.setAttribute('tension', "30")
+        this.graflow.setAttribute('gapx', "80")
+        this.graflow.setAttribute('gapy', "20")
         this.graflow.addEventListener('bz:graflow:domConnected', this.setupDropZone.bind(this))
+        this.graflow.append(this.slidePane)
         this.mainContainer.append(this.graflow)
         this.append(this.mainContainer)        
+        document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
+            (evt) => { this.graflow.autoPlace('horizontal', null, null, 1000, null) }
+        )
+        document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
+            (evt) => { this.graflow.autoPlace('vertical', null, null, 1000, null) }
+        )
+        document.querySelector('input[name="tension"]').addEventListener('change',
+            (evt) => { this.graflow.setAttribute('tension', evt.target.value); this.graflow.refresh() }
+        )
+        document.querySelector('input[name="gapx"]').addEventListener('change',
+            (evt) => { this.graflow.setAttribute('gapx', evt.target.value); this.graflow.refresh() }
+        )
+        document.querySelector('input[name="gapy"]').addEventListener('change',
+            (evt) => { this.graflow.setAttribute('gapy', evt.target.value); this.graflow.refresh() }
+        )
+        document.querySelector('bz-select[name="wiretype"]').addEventListener('change',
+            (evt) => { this.graflow.setAttribute('wiretype', evt.target.value); this.graflow.refresh() }
+        )
+        document.querySelector('bz-select[name="align"]').addEventListener('change',
+            (evt) => { this.graflow.setAttribute('align', evt.target.value); this.graflow.refresh() }
+        )
         this.graflow.addEventListener('bz:graflow:nodesLoaded', this.refreshNodes.bind(this))
         this.graflow.loadNodes(nodesUrl)
     }
 
+    fillconsole(){
+        this.slidePane.innerHTML = `
+            <div class="inner-console">
+                <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
+                <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
+                <div class="cols-2"><label>GapX</label><input name="gapx" type="number" size="2" value="80"></div>
+                <div class="cols-2"><label>GapY</label><input name="gapy" type="number" size="2" value="80"></div>
+                <div class="cols-2">
+                    <label>Alignment</label>
+                    <bz-select name="align">
+                        <option value="center" selected>Center</option>
+                        <option value="first">First</option>
+                        <option value="last">Last</option>
+                        <option value="parent">Parent</option>
+                    </bz-select>
+                </div>
+                <div class="cols-2">
+                    <label>Wire Type</label>
+                    <bz-select name="wiretype">
+                        <option value="ortho">Ortho</option>
+                        <option value="straight">Straight</option>
+                        <option value="bezier" selected>Bezier</option>
+                    </bz-select>
+                </div>
+                <div class="cols-2"><label>Tension</label><input name="tension" type="number" size="2" value="30"></div>
+            </div>
+        `
+    }
+
     refreshNodes(e){
         for(const nodeType in this.graflow.nodesRegistry){
             const nodeDef = this.graflow.nodesRegistry[nodeType]

graflow_examples/etest1.html

@@ -27,26 +27,7 @@
                 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; }

graflow_examples/test1.html

@@ -91,7 +91,7 @@
                     <option value="straight">Straight</option>
                     <option value="bezier" selected>Bezier</option>
                 </select>                
-                <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
+                <div class="cols-2"><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
 

graflow_examples/test2.html

@@ -92,7 +92,7 @@
                     <option value="bezier" selected>Bezier</option>
                     <option value="parent">Parent</option>
                 </select>                
-                <div class-"cols-2"=""><label>tension</label><input data-id="organi" type="number" size="2" value="60"></div>
+                <div class="cols-2"><label>tension</label><input data-id="organi" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
 

graflow_examples/test3.1.html

@@ -91,7 +91,7 @@
                     <option value="straight">Straight</option>
                     <option value="bezier" selected>Bezier</option>
                 </select>                
-                <div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="50"></div>
+                <div class="cols-2"><label>tension</label><input data-id="eic" type="number" size="2" value="50"></div>
             </div>
         </bz-graflow>
 	</body>

graflow_examples/test3.html

@@ -94,7 +94,7 @@
                     <option value="straight"selected>Straight</option>
                     <option value="bezier">Bezier</option>
                 </select>                
-                <div class-"cols-2"=""><label>tension</label><input data-id="eic" type="number" size="2" value="1"></div>
+                <div class="cols-2"><label>tension</label><input data-id="eic" type="number" size="2" value="1"></div>
             </div>
         </bz-graflow>
 	</body>

graflow_examples/test4.5.html

@@ -94,7 +94,7 @@
                     <option value="straight">Straight</option>
                     <option value="bezier">Bezier</option>
                 </select>                
-                <div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="20"></div>
+                <div class="cols-2"><label>tension</label><input data-id="icmp" type="number" size="2" value="20"></div>
             </div>
         </bz-graflow>
 	</body>

graflow_examples/test4.html

@@ -144,7 +144,7 @@
                         <option value="straight">Straight</option>
                         <option value="bezier" selected>Bezier</option>
                     </select>                
-                    <div class-"cols-2"=""><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
+                    <div class="cols-2"><label>tension</label><input data-id="icmp" type="number" size="2" value="60"></div>
                 </div>
             </bz-graflow>
         </div>

graflow_examples/test5.html

@@ -91,7 +91,7 @@
                     <option value="straight">Straight</option>
                     <option value="bezier" selected>Bezier</option>
                 </select>
-                <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
+                <div class="cols-2"><label>tension</label><input data-id="compunet" type="number" size="2" value="60"></div>
             </div>
         </bz-graflow>
 

graflow_examples/test6.html

@@ -94,7 +94,7 @@
                     <option value="straight">Straight</option>
                     <option value="bezier">Bezier</option>
                 </select>
-                <div class-"cols-2"=""><label>tension</label><input data-id="compunet" type="number" size="2" value="20"></div>
+                <div class="cols-2"><label>tension</label><input data-id="compunet" type="number" size="2" value="20"></div>
             </div>
         </bz-graflow>