diff --git a/buildoz.css b/buildoz.css index d053889..4edc38b 100644 --- a/buildoz.css +++ b/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%; @@ -293,4 +294,30 @@ bz-grafloweditor bz-graflow{ bz-grafloweditor .bzgfe-nodes-container .bzgf-node{ position: relative; margin: 5px auto; -} \ No newline at end of file +} +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; +} diff --git a/buildoz.js b/buildoz.js index 0c69a4d..ad0aefd 100644 --- a/buildoz.js +++ b/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() }) } @@ -319,37 +321,62 @@ class BZslidePane extends Buildoz { dragStart(evt){ evt.target.setPointerCapture(evt.pointerId) this.dragStartX = evt.clientX - this.dragStartY = evt.clientY + 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() - let width, height + const boundaryEl = this.offsetParent || this.parentElement + 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 - if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2) + min = parseInt(this.getBZAttribute('minheight')) || 0 + 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 - if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2) + min = parseInt(this.getBZAttribute('minheight')) || 0 + 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 - if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2) + min = parseInt(this.getBZAttribute('minwidth')) || 0 + 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 - if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2) + case 'right': + min = parseInt(this.getBZAttribute('minwidth')) || 0 + 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){ diff --git a/bzGraflow-editor.js b/bzGraflow-editor.js index 02e7ea0..d710dce 100644 --- a/bzGraflow-editor.js +++ b/bzGraflow-editor.js @@ -17,7 +17,9 @@ class BZgrafloweditor extends Buildoz{ } async connectedCallback() { - await customElements.whenDefined('bz-graflow') + 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 = ` +
+ + +
+
+
+ + + + + + + +
+
+ + + + + + +
+
+
+ ` + } + refreshNodes(e){ for(const nodeType in this.graflow.nodesRegistry){ const nodeDef = this.graflow.nodesRegistry[nodeType] diff --git a/graflow_examples/etest1.html b/graflow_examples/etest1.html index d609213..2bd39cb 100644 --- a/graflow_examples/etest1.html +++ b/graflow_examples/etest1.html @@ -26,27 +26,8 @@ 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; } diff --git a/graflow_examples/test1.html b/graflow_examples/test1.html index fc9f6d3..41607a5 100644 --- a/graflow_examples/test1.html +++ b/graflow_examples/test1.html @@ -91,7 +91,7 @@ -
+
diff --git a/graflow_examples/test2.html b/graflow_examples/test2.html index 13705e2..70d5263 100644 --- a/graflow_examples/test2.html +++ b/graflow_examples/test2.html @@ -92,7 +92,7 @@ -
+
diff --git a/graflow_examples/test3.1.html b/graflow_examples/test3.1.html index 80db018..9d232e4 100644 --- a/graflow_examples/test3.1.html +++ b/graflow_examples/test3.1.html @@ -91,7 +91,7 @@ -
+
diff --git a/graflow_examples/test3.html b/graflow_examples/test3.html index 250d32a..a14bc58 100644 --- a/graflow_examples/test3.html +++ b/graflow_examples/test3.html @@ -94,7 +94,7 @@ -
+
diff --git a/graflow_examples/test4.5.html b/graflow_examples/test4.5.html index ff06cf8..474fc5b 100644 --- a/graflow_examples/test4.5.html +++ b/graflow_examples/test4.5.html @@ -94,7 +94,7 @@ -
+
diff --git a/graflow_examples/test4.html b/graflow_examples/test4.html index e294dba..0d88e88 100644 --- a/graflow_examples/test4.html +++ b/graflow_examples/test4.html @@ -144,7 +144,7 @@ -
+
diff --git a/graflow_examples/test5.html b/graflow_examples/test5.html index ddeb285..4e583dc 100644 --- a/graflow_examples/test5.html +++ b/graflow_examples/test5.html @@ -91,7 +91,7 @@ -
+
diff --git a/graflow_examples/test6.html b/graflow_examples/test6.html index 2cf92fb..3284210 100644 --- a/graflow_examples/test6.html +++ b/graflow_examples/test6.html @@ -94,7 +94,7 @@ -
+