17 lines
2.2 KiB
Plaintext
17 lines
2.2 KiB
Plaintext
component DrawflowCanvas {
|
||
outputs { select(payload: object) connect(payload: object) move(payload: object) add(payload: object) }
|
||
props { nodes=[] palette=[] activeNode="" label="Workflow" arrangeLabel="Arrange nodes" connectLabel="Connect" color="primary" size="default"
|
||
toolbar=true
|
||
class=""
|
||
}
|
||
view {
|
||
<section {...attrs} class="wrn-drawflow {class}" data-wrnexus-runtime="drawflow" data-drawflow-editor data-flow-nodes="{JSON.stringify(nodes)}" data-active-node="{activeNode}" aria-label="{label}" @flowselect="output.select(event.detail)" @flowconnect="output.connect(event.detail)" @flowmove="output.move(event.detail)" @flowadd="output.add(event.detail)" data-wrn-owner="DrawflowCanvas" data-wrn-part="root" data-wrn-component="DrawflowCanvas" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
|
||
{#if toolbar}<div class="wrn-drawflow-toolbar" data-wrn-owner="DrawflowCanvas" data-wrn-part="toolbar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{#each palette as item}<button type="button" draggable="true" data-flow-kind="{item.kind}" @click="output.add({kind:item.kind,sourceEvent:event})" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.label}</button>{/each}<button type="button" data-flow-arrange data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{arrangeLabel}</button><button type="button" data-flow-zoom="in" aria-label="Zoom in" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">+</button><button type="button" data-flow-zoom="out" aria-label="Zoom out" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">−</button><button type="button" data-flow-zoom="reset" aria-label="Reset zoom" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">100%</button></div>{/if}
|
||
<div data-drawflow-host role="group" aria-label="{label}" data-wrn-owner="DrawflowCanvas" data-wrn-part="viewport" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></div>
|
||
</section>
|
||
}
|
||
style {
|
||
.wrn-drawflow { margin:0; border-radius:12px; }
|
||
}
|
||
}
|