lmu/uni2work.workflows.visualiser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: display ghost nodes when adding a new edge

Browse Source
This commit is contained in:
David Mosbach 2023-08-25 19:01:19 +02:00
parent 7a2777df96
commit 9ab5eec5e9
4 changed files with 135 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
editor.html
View File

@ -213,7 +213,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</svg>
&nbsp;&nbsp;New State
</div>
<div class="menubottom menu-lightmode">
<div id="add-edge" class="menubottom menu-lightmode">
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
<polyline points="1,1 9,9" style="fill:none;stroke-width:2" stroke-linecap="round" />
</svg>

110
editor.ts
View File

@ -202,13 +202,14 @@ export function search(text: string) {
});
}
function format(possibleTargets: (WF.WFEdge | WF.WFNode)[], results: IndexSearchResult, heading: string) {
function format(possibleTargets: (WF.WFEdge | WF.WFNode | WF.WFGhostNode)[], results: IndexSearchResult, heading: string) {
var h = document.createElement('h3');
h.innerHTML = heading;
searchResultList.appendChild(h);
results.forEach(result => {
var target: WF.WFEdge | WF.WFNode | null = null;
possibleTargets.forEach(stateOrEdge => {
if (stateOrEdge instanceof WF.WFGhostNode) return;
if (stateOrEdge.id === result)
target = stateOrEdge;
});
@ -413,6 +414,7 @@ export function selectViewer() {
highlightedTargets = [];
selectedActor.value = NO_ACTOR;
workflow.states.forEach(st => {
if (st instanceof WF.WFGhostNode) return;
if (st.stateData.viewerNames.includes(selectedViewer.value)) {
highlightedSources.push(st.id);
}
@ -491,6 +493,7 @@ document.getElementById('side-panel-focus')?.addEventListener('click', _ => focu
document.getElementById('side-panel-delete')?.addEventListener('click', _ => removeSelection());
document.getElementById('file-panel-cancel')?.addEventListener('click', _ => closeFileDisplay());
document.getElementById('add-state')?.addEventListener('click', _ => addState());
document.getElementById('add-edge')?.addEventListener('click', _ => addEdge());
document.getElementById('edge-from')?.addEventListener('click', _ => markEdgeFrom());
document.getElementById('edge-to')?.addEventListener('click', _ => markEdgeTo());
document.getElementById('close-side-panel')?.addEventListener('click', _ => deselect());
@ -566,25 +569,50 @@ export function addState() {
var x = newStateCoords.x;
var y = newStateCoords.y;
var state : WF.WFNode = { id: 'state_' + nodeId,
x: x,
y: y,
name: 'state_' + nodeId,
fx: x,
fy: y,
val: 5,
stateData: new WF.StateData({ abbreviation: `S${nodeId}`, final: 'false' }) };
x: x,
y: y,
name: 'state_' + nodeId,
fx: x,
fy: y,
val: 5,
stateData: new WF.StateData({ abbreviation: `S${nodeId}`, final: 'false' }) };
workflow.states.push(state);
updateGraph();
select(state);
nodeIndex.add(state.id, state.name);
}
export function addEdge() {
var x = newStateCoords.x;
var y = newStateCoords.y;
var ghostState = new WF.WFGhostNode({
id: `@@ghost@(${x},${y})`,
x: x,
y: y,
name: 'Drag me!',
fx: x,
fy: y,
val: 5 });
var ghostState2 = new WF.WFGhostNode({
id: `@@ghost@(${x+200},${y})`,
x: x + 200,
y: y,
name: 'Drag me!',
fx: x + 200,
fy: y,
val: 5 });
workflow.states.push(ghostState, ghostState2);
console.log('is ghost:', ghostState instanceof WF.WFGhostNode, ghostState2 instanceof WF.WFGhostNode);
updateGraph();
connect(ghostState, ghostState2);
}
/**
* Adds a new action between two states.
* @param source The source state.
* @param target The target state.
*/
function connect(source: WF.WFNode, target: WF.WFNode) {
function connect(source: WF.WFNode | WF.WFGhostNode, target: WF.WFNode | WF.WFGhostNode) {
let linkId = actionIdCounter ++;
var action : WF.WFEdge = new WF.WFEdge({
id: (linkId).toString(),
@ -817,6 +845,7 @@ function prepareWorkflow() {
});
//Identify all viewers of every state
workflow.states.forEach(st => {
if (st instanceof WF.WFGhostNode) return;
if (st.name === '@@INIT') {
initState = st;
} else if (st.stateData.viewers.length() === 0) {
@ -858,6 +887,7 @@ function prepareWorkflow() {
//Compute abbreviations of the names of all states
workflow.states.forEach(state => {
if (state instanceof WF.WFGhostNode) return;
// var label = node.name.substring(0, 5);
var label = state.name.split(' '); // [node.name.substring(0, 6), node.name.substring(6, 12), node.name.substring(12, 18)];
for (var i = 0; i < label.length; i++) {
@ -940,12 +970,12 @@ const edgeColourMostSubtle = '#99999944';
* @param node
* @returns The colour the given node should have.
*/
function getNodeColour(node: WF.WFNode) {
function getNodeColour(node: WF.WFNode | WF.WFGhostNode) {
var standard = (selectedActor.value === NO_ACTOR && selectedViewer.value === NO_VIEWER)
|| highlightedSources.includes(node.id) || highlightedTargets.includes(node.id)
var alpha = standard ? 'ff' : '55';
var isSelected = selection === node || rightSelection === node;
if (node.stateData && node.stateData.final !== 'false' && node.stateData.final !== '') {
if (node instanceof WF.WFNode && node.stateData.final !== 'false' && node.stateData.final !== '') {
if (node.stateData.final === 'true' || node.stateData.final === 'ok') {
return (isSelected ? '#3ac713' : '#31a810') + alpha;
} else if (node.stateData.final === 'not-ok') {
@ -955,6 +985,8 @@ function getNodeColour(node: WF.WFNode) {
}
} else if (node.name === '@@INIT') {
return (isSelected ? '#ffbc15' : '#eeaa00') + alpha;
} else if (node instanceof WF.WFGhostNode) {
return '#cafc03ff';
} else {
return (isSelected ? '#538cd9' : '#3679d2') + alpha;
}
@ -1081,26 +1113,42 @@ function getEdgeColour(edge: LinkObject) {
.linkDirectionalParticleColor(() => darkMode ? '#ffffff55' : '#00000055')
.linkDirectionalParticleWidth((edge: LinkObject) => (isHighlightedActorEdge(edge as WF.WFEdge)) ? 3 : 0)
.nodeCanvasObject((node: NodeObject, ctx: CanvasRenderingContext2D) => {
const wfNode = node as WF.WFNode;
const wfNode = (node instanceof WF.WFNode) ? node as WF.WFNode : node as WF.WFGhostNode;
ctx.fillStyle = getNodeColour(wfNode);
ctx.beginPath();
ctx.arc(wfNode.x, wfNode.y, 2*wfNode.val, 0, 2 * Math.PI, false);
ctx.fill();
if (node === selection || node === rightSelection) {
ctx.strokeStyle = darkMode ? 'white' : 'black';
ctx.lineWidth = 1;
var selected = (node === selection || node === rightSelection);
ctx.lineWidth = selected ? 1 : 0.2;
if (node instanceof WF.WFGhostNode) {
ctx.save()
ctx.setLineDash([1, 2]);
ctx.strokeStyle = darkMode ? 'white' : 'black';
ctx.lineCap = 'round';
ctx.stroke();
ctx.restore();
} else {
ctx.save();
ctx.lineCap = 'round';
if (selected)
ctx.strokeStyle = darkMode ? 'white' : 'black';
else
ctx.strokeStyle = !darkMode ? 'white' : 'black';
ctx.stroke();
ctx.restore();
}
if (! (wfNode.stateData && wfNode.stateData.abbreviation)) return;
ctx.fillStyle = 'white';
ctx.font = '4px Inter';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(wfNode.stateData.abbreviation, wfNode.x, wfNode.y);
if (wfNode instanceof WF.WFNode && wfNode.stateData.abbreviation)
ctx.fillText(wfNode.stateData.abbreviation, wfNode.x, wfNode.y);
else if (wfNode instanceof WF.WFGhostNode)
ctx.fillText(wfNode.text, wfNode.x, wfNode.y);
})
.onNodeDragEnd((node: NodeObject) => {
node.fx = node.x;
@ -1155,6 +1203,32 @@ function getEdgeColour(edge: LinkObject) {
})
.autoPauseRedraw(false);
//Remove all ghost states from the force computations to enable dragging them onto normal states
var oldChargeInit = <any>((<any>wfGraph.d3Force('charge')).initialize);
var oldCenterInit = <any>((<any>wfGraph.d3Force('center')).initialize);
var oldLinkInit = <any>((<any>wfGraph.d3Force('link')).initialize);
(<any>wfGraph.d3Force('charge')).initialize = function(_nodes: NodeObject[], ...args: any) {
var nodes : WF.WFNode[] = [];
_nodes.forEach(node => (node instanceof WF.WFNode && nodes.push(node)));
console.log('rem. total:', nodes.length); //TODO already store them instead of computing each tick
oldChargeInit(nodes, args);
};
(<any>wfGraph.d3Force('center')).initialize = function(_nodes: NodeObject[], ...args: any) {
var nodes : WF.WFNode[] = [];
_nodes.forEach(node => (node instanceof WF.WFNode && nodes.push(node)));
console.log('rem. total:', nodes.length);
oldCenterInit(nodes, args);
};
(<any>wfGraph.d3Force('link')).initialize = function(_nodes: NodeObject[], ...args: any) {
var nodes : WF.WFNode[] = [];
_nodes.forEach(node => (node instanceof WF.WFNode && nodes.push(node)));
console.log('rem. total:', nodes.length);
oldLinkInit(nodes, args);
};
updateGraph();
}

6
start.sh
View File

@ -5,9 +5,9 @@
# SPDX-License-Identifier: AGPL-3.0-or-later
echo 'Transpiling to JS...'
npx tsc
echo 'Generating Webpack bundle...'
# echo 'Transpiling to JS...'
# npx tsc
echo 'Transpiling to JS & generating Webpack bundle...'
npx webpack
echo 'Starting server...'
npx http-server --cors -o ./editor.html

45
workflow.ts
View File

@ -20,6 +20,16 @@ export type NodeFormat = {
val: number
}
export type GhostNodeFormat = {
x: number,
y: number,
fx: number,
fy: number,
id: string,
name: string,
val: number
}
export type SDFormat = {
abbreviation: string,
final: boolean | string,
@ -30,8 +40,8 @@ export type SDFormat = {
export type EdgeFormat = {
actionData: ADFormat,
source: WFNode | string,
target: WFNode | string,
source: WFNode | WFGhostNode | string,
target: WFNode | WFGhostNode | string,
id: string,
name: string,
nodePairId : string
@ -82,7 +92,7 @@ export type MessageFormat = {
export class Workflow {
states: WFNode[];
states: (WFNode | WFGhostNode)[];
actions: WFEdge[];
constructor(json: WF) {
@ -95,7 +105,7 @@ export class Workflow {
}
// Resolve ID refs to nodes
var actions = json.actions.map(action => {
function transformRef(ref: string | WFNode) {
function transformRef(ref: string | WFNode | WFGhostNode) {
if (ref instanceof String)
stateMap.has(<string>ref)
&& (ref = <WFNode>stateMap.get(<string>ref))
@ -155,11 +165,34 @@ export class StateData {
}
}
export class WFGhostNode implements NodeObject {
text: string;
x: number;
y: number;
fx: number;
fy: number;
id: string;
name: string;
val: number;
constructor(json: GhostNodeFormat) {
this.text = 'Drag me!';
this.x = json.x;
this.y = json.y;
this.fx = json.fx;
this.fy = json.fy;
this.id = json.id;
this.name = json.name;
this.val = json.val;
}
}
export class WFEdge implements LinkObject {
actionData: ActionData;
source: WFNode;
target: WFNode;
source: WFNode | WFGhostNode;
target: WFNode | WFGhostNode;
id: string;
name: string;
nodePairId : string;