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

66
bzGraflow-editor.js
View File

@@ -74,30 +74,36 @@ class BZgrafloweditor extends Buildoz{
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>
<section>
<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>
</section>
<section>
<button data-trigger="onexportFlow">Export Flow</button>
</section>
</div>
`
this.slidePane.querySelector('button[data-trigger="onexportFlow"]').addEventListener('click', this.onexportFlow.bind(this))
}
refreshNodes(e){
@@ -151,5 +157,21 @@ class BZgrafloweditor extends Buildoz{
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)

6
bzGraflow.js
View File

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