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

export flow

Browse Source
This commit is contained in:
STEINNI
2026-03-23 20:21:57 +00:00
parent 266036a6ec
commit 334cce8af3
3 changed files with 60 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
buildoz.css
View File

@@ -204,6 +204,7 @@ bz-graflow .bzgf-main-container{
height: 100%; height: 100%;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
overflow: auto;
} }
/* BZGRAFLOW_CORE_START */ /* BZGRAFLOW_CORE_START */
@@ -273,7 +274,7 @@ bz-grafloweditor .bzgfe-main-container{
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-columns: 20vw auto; grid-template-columns: 15vw auto;
grid-gap: 1px; grid-gap: 1px;
background: #FFF; background: #FFF;
} }
@@ -295,29 +296,34 @@ bz-grafloweditor .bzgfe-nodes-container .bzgf-node{
position: relative; position: relative;
margin: 5px auto; margin: 5px auto;
} }
bz-grafloweditor bz-slidepane { z-index: 999; background-color: #0008!important;} bz-grafloweditor bz-slidepane { z-index: 10; background-color: #0008!important;}
bz-grafloweditor bz-slidepane .inner-console{ bz-grafloweditor bz-slidepane .inner-console{
padding: .5em; padding: 5px;
background: #FFF; background: #FFF;
}
bz-grafloweditor .inner-console section{
display: grid; display: grid;
grid-auto-flow: row; grid-auto-flow: row;
grid-gap: 5px; grid-gap: 5px;
background-color: #DDD;
padding: 5px;
margin: 5px auto;
} }
bz-grafloweditor .inner-console .cols-2{ bz-grafloweditor .inner-console section .cols-2{
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 1em; grid-gap: 1em;
background-color: #ddd; background-color: #CCC;
min-height: 2.5em; min-height: 2.5em;
} }
bz-grafloweditor .inner-console .cols-2 label{ bz-grafloweditor .inner-console section .cols-2 label{
text-align: right; text-align: right;
align-self: center; align-self: center;
} }
bz-grafloweditor .inner-console .cols-2 input{ bz-grafloweditor .inner-console section .cols-2 input{
max-height: 2em; max-height: 2em;
align-self: center; align-self: center;
} }

66
bzGraflow-editor.js
View File

@@ -74,30 +74,36 @@ class BZgrafloweditor extends Buildoz{
fillconsole(){ fillconsole(){
this.slidePane.innerHTML = ` this.slidePane.innerHTML = `
<div class="inner-console"> <div class="inner-console">
<button data-trigger="onAutoplace1H">Auto-place Horizontal</button> <section>
<button data-trigger="onAutoplace1V">Auto-place Vertical</button> <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
<div class="cols-2"><label>GapX</label><input name="gapx" type="number" size="2" value="80"></div> <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
<div class="cols-2"><label>GapY</label><input name="gapy" type="number" size="2" value="80"></div> <div class="cols-2"><label>GapX</label><input name="gapx" type="number" size="2" value="80"></div>
<div class="cols-2"> <div class="cols-2"><label>GapY</label><input name="gapy" type="number" size="2" value="80"></div>
<label>Alignment</label> <div class="cols-2">
<bz-select name="align"> <label>Alignment</label>
<option value="center" selected>Center</option> <bz-select name="align">
<option value="first">First</option> <option value="center" selected>Center</option>
<option value="last">Last</option> <option value="first">First</option>
<option value="parent">Parent</option> <option value="last">Last</option>
</bz-select> <option value="parent">Parent</option>
</div> </bz-select>
<div class="cols-2"> </div>
<label>Wire Type</label> <div class="cols-2">
<bz-select name="wiretype"> <label>Wire Type</label>
<option value="ortho">Ortho</option> <bz-select name="wiretype">
<option value="straight">Straight</option> <option value="ortho">Ortho</option>
<option value="bezier" selected>Bezier</option> <option value="straight">Straight</option>
</bz-select> <option value="bezier" selected>Bezier</option>
</div> </bz-select>
<div class="cols-2"><label>Tension</label><input name="tension" type="number" size="2" value="30"></div> </div>
<div class="cols-2"><label>Tension</label><input name="tension" type="number" size="2" value="30"></div>
</section>
<section>
<button data-trigger="onexportFlow">Export Flow</button>
</section>
</div> </div>
` `
this.slidePane.querySelector('button[data-trigger="onexportFlow"]').addEventListener('click', this.onexportFlow.bind(this))
} }
refreshNodes(e){ refreshNodes(e){
@@ -151,5 +157,21 @@ class BZgrafloweditor extends Buildoz{
this.graflow.refresh() this.graflow.refresh()
}) })
} }
onexportFlow(e){
const flowDeep = JSON.parse(JSON.stringify(this.graflow.flow))
delete flowDeep.longLinks
const exportObj = {
nodesFile: this.getBZAttribute('nodes'),
flow: flowDeep
}
const flowJson = JSON.stringify(exportObj, null, 2)
const flowBlob = new Blob([flowJson], { type: 'application/json' })
const flowUrl = URL.createObjectURL(flowBlob)
const flowLink = document.createElement('a')
flowLink.href = flowUrl
flowLink.download = 'flow.json'
flowLink.click()
}
} }
Buildoz.define('grafloweditor', BZgrafloweditor) Buildoz.define('grafloweditor', BZgrafloweditor)

6
bzGraflow.js
View File

@@ -1146,14 +1146,14 @@ class BZgraflow extends Buildoz{
return(crossLayerLinks) return(crossLayerLinks)
} }
autofit(){ autofit(percent=100){
const parentBB = this.parentElement.getBoundingClientRect() const parentBB = this.parentElement.getBoundingClientRect()
// Use scroll dimensions for actual content extent (nodes can extend beyond element bounds) // Use scroll dimensions for actual content extent (nodes can extend beyond element bounds)
const contentW = Math.max(this.scrollWidth || this.offsetWidth || 1, 1) const contentW = Math.max(this.scrollWidth || this.offsetWidth || 1, 1)
const contentH = Math.max(this.scrollHeight || this.offsetHeight || 1, 1) const contentH = Math.max(this.scrollHeight || this.offsetHeight || 1, 1)
const sx = parentBB.width / contentW const sx = parentBB.width / contentW
const sy = parentBB.height / contentH const sy = parentBB.height / contentH
const scale = Math.min(sx, sy) // uniform scale to fit inside parent const scale = Math.min(sx, sy)*(percent/100) // uniform scale to fit inside parent
this.style.transformOrigin = 'top left' this.style.transformOrigin = 'top left'
this.style.transform = `scale(${scale})` this.style.transform = `scale(${scale})`
} }
@@ -1245,7 +1245,7 @@ class MovingNodes{
node.style.left = `${x}px` node.style.left = `${x}px`
node.style.top = `${y}px` node.style.top = `${y}px`
node.style.margin = '0' node.style.margin = '0'
node.style.zIndex = '9999' node.style.zIndex = '3'
node.style.pointerEvents = 'none' node.style.pointerEvents = 'none'
} }