nike/buildoz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

graflowEditor console

Browse Source
This commit is contained in:
STEINNI
2026-03-22 20:42:04 +00:00
parent 710bddd8e4
commit 0cb4491920
12 changed files with 144 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
buildoz.css
View File

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

47
buildoz.js
View File

@@ -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()
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)
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){

65
bzGraflow-editor.js
View File

@@ -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]

19
graflow_examples/etest1.html
View File

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

2
graflow_examples/test1.html
View File

@@ -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>

2
graflow_examples/test2.html
View File

@@ -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>

2
graflow_examples/test3.1.html
View File

@@ -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>

2
graflow_examples/test3.html
View File

@@ -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>

2
graflow_examples/test4.5.html
View File

@@ -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>

2
graflow_examples/test4.html
View File

@@ -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>

2
graflow_examples/test5.html
View File

@@ -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>

2
graflow_examples/test6.html
View File

@@ -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>