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

67
bzGraflow-editor.js
View File

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