adjusted adding new edges to existing nodes
This commit is contained in:
David Mosbach
parent
0e408faabc
commit
77a3c9edea
69
editor.ts
69
editor.ts
@ -92,7 +92,7 @@ type FadeDef = {
|
||||
* @param {HTMLElement} menuitem
|
||||
*/
|
||||
function openMenuItem(menuitem: HTMLElement) {
|
||||
edgeTo = edgeFrom = rightSelection = null;
|
||||
edgeTarget = rightSelection = null;
|
||||
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
|
||||
if (menuitem === selectedMenuItem) {
|
||||
closeMenuItem();
|
||||
@ -398,7 +398,7 @@ var highlightedTargets : string[] = [];
|
||||
|
||||
export function selectActor() {
|
||||
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
|
||||
edgeFrom = edgeTo = rightSelection = null;
|
||||
edgeTarget = rightSelection = null;
|
||||
highlightedSources = [];
|
||||
highlightedTargets = [];
|
||||
selectedViewer.value = NO_VIEWER;
|
||||
@ -412,7 +412,7 @@ export function selectActor() {
|
||||
|
||||
export function selectViewer() {
|
||||
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
|
||||
edgeFrom = edgeTo = rightSelection = null;
|
||||
edgeTarget = rightSelection = null;
|
||||
highlightedSources = [];
|
||||
highlightedTargets = [];
|
||||
selectedActor.value = NO_ACTOR;
|
||||
@ -426,8 +426,6 @@ export function selectViewer() {
|
||||
|
||||
var selection : WF.WFNode | WF.WFGhostNode | WF.WFEdge | null = null; // The currently selected node/edge.
|
||||
var rightSelection : WF.WFNode | WF.WFEdge | null = null; // The currently right clicked node/edge.
|
||||
var edgeTo : WF.WFNode | null = null; // Target of an edge to be created.
|
||||
var edgeFrom : WF.WFNode | null = null; // Start on an edge to be created.
|
||||
var edgeTarget : WF.WFNode | null = null; // Possible source/target for an edge after dragging the respective ghost node.
|
||||
//Utility elements
|
||||
const curtain = <HTMLElement>document.getElementById('curtain');
|
||||
@ -498,8 +496,8 @@ document.getElementById('side-panel-delete')?.addEventListener('click', _ => rem
|
||||
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('edge-from')?.addEventListener('click', _ => ghostEdgeFrom());
|
||||
document.getElementById('edge-to')?.addEventListener('click', _ => ghostEdgeTo());
|
||||
document.getElementById('close-side-panel')?.addEventListener('click', _ => deselect());
|
||||
document.getElementById('close-file-panel')?.addEventListener('click', _ => closeFileDisplay());
|
||||
|
||||
@ -516,7 +514,7 @@ document.querySelectorAll('.delete-item').forEach(elem => elem.addEventListener(
|
||||
*/
|
||||
export function select(item: WF.WFEdge | WF.WFNode | WF.WFGhostNode) {
|
||||
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
|
||||
edgeFrom = edgeTo = rightSelection = null;
|
||||
edgeTarget = rightSelection = null;
|
||||
selection = selection === item ? null : item;
|
||||
if (!(item instanceof WF.WFGhostNode) && selection === item) {
|
||||
while (sideContent.firstChild)
|
||||
@ -634,16 +632,38 @@ function connect(source: WF.WFNode | WF.WFGhostNode, target: WF.WFNode | WF.WFGh
|
||||
actionIndex.add(action.id, action.name);
|
||||
}
|
||||
|
||||
export function markEdgeTo() {
|
||||
edgeTo = <WF.WFNode>rightSelection;
|
||||
export function ghostEdgeTo() {
|
||||
var to = <WF.WFNode>rightSelection;
|
||||
var x = to.x - 40;
|
||||
var y = to.y - 40;
|
||||
var from = new WF.WFGhostNode({
|
||||
id: `@@ghost.to@${to.name}@(${to.x},${to.y})`,
|
||||
x: x,
|
||||
y: y,
|
||||
fx: x,
|
||||
fy: y,
|
||||
val: 7
|
||||
});
|
||||
workflow.states.push(from);
|
||||
connect(from, to);
|
||||
closeContextMenus(contextMenuSt);
|
||||
// contextMenuSt.style.display = 'none';
|
||||
}
|
||||
|
||||
export function markEdgeFrom() {
|
||||
edgeFrom = <WF.WFNode>rightSelection;
|
||||
export function ghostEdgeFrom() {
|
||||
var from = <WF.WFNode>rightSelection;
|
||||
var x = from.x + 40;
|
||||
var y = from.y + 40;
|
||||
var to = new WF.WFGhostNode({
|
||||
id: `@@ghost.from@${from.name}@(${from.x},${from.y})`,
|
||||
x: x,
|
||||
y: y,
|
||||
fx: x,
|
||||
fy: y,
|
||||
val: 7
|
||||
});
|
||||
workflow.states.push(to);
|
||||
connect(from, to);
|
||||
closeContextMenus(contextMenuSt);
|
||||
// contextMenuSt.style.display = 'none';
|
||||
}
|
||||
|
||||
export function removeSelection() {
|
||||
@ -651,7 +671,7 @@ export function removeSelection() {
|
||||
if (selection.hasOwnProperty('actionData')) removeAction(<WF.WFEdge>selection);
|
||||
else removeState(<WF.WFNode>selection);
|
||||
deselect();
|
||||
edgeFrom = edgeTo = rightSelection = null;
|
||||
edgeTarget = rightSelection = null;
|
||||
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
|
||||
}
|
||||
}
|
||||
@ -661,7 +681,7 @@ export function removeRightSelection() {
|
||||
if (rightSelection.hasOwnProperty('actionData')) removeAction(<WF.WFEdge>rightSelection);
|
||||
else removeState(<WF.WFNode>rightSelection);
|
||||
if (selection === rightSelection) deselect();
|
||||
edgeFrom = edgeTo = rightSelection = null;
|
||||
edgeTarget = rightSelection = null;
|
||||
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
|
||||
}
|
||||
}
|
||||
@ -954,7 +974,7 @@ function openContextMenu(x: number, y: number, menu: HTMLElement) {
|
||||
menu.style.left = (x + 20).toString();
|
||||
fadeIn(null, {element: menu, max: 1, step: 0.1})
|
||||
// menu.style.display = 'block';
|
||||
edgeFrom = edgeTo = null;
|
||||
edgeTarget = null;
|
||||
}
|
||||
|
||||
|
||||
@ -1249,18 +1269,13 @@ function getEdgeColour(edge: LinkObject) {
|
||||
edgesFrom.forEach(edge => edge.source = <WF.WFNode>edgeTarget);
|
||||
edgesTo.forEach(edge => edge.target = <WF.WFNode>edgeTarget);
|
||||
removeState(node);
|
||||
edgeTarget = null;
|
||||
updateGraph();
|
||||
}
|
||||
})
|
||||
.onNodeClick((node: NodeObject, _: MouseEvent) => {
|
||||
const wfNode = node as (WF.WFNode | WF.WFGhostNode);
|
||||
if (edgeFrom) {
|
||||
connect(edgeFrom, wfNode);
|
||||
edgeFrom = null;
|
||||
} else if (edgeTo) {
|
||||
connect(wfNode, edgeTo);
|
||||
edgeTo = null;
|
||||
} else select(wfNode);
|
||||
edgeTarget = null;
|
||||
(node instanceof WF.WFNode) && select(node as WF.WFNode);
|
||||
closeMenuItem();
|
||||
})
|
||||
.onNodeRightClick((node: NodeObject, event: MouseEvent) => {
|
||||
@ -1290,7 +1305,7 @@ function getEdgeColour(edge: LinkObject) {
|
||||
.onBackgroundClick((_: Event) => {
|
||||
closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
|
||||
deselect();
|
||||
edgeFrom = edgeTo = rightSelection = null;
|
||||
edgeTarget = rightSelection = null;
|
||||
closeMenuItem();
|
||||
})
|
||||
.onBackgroundRightClick((event: MouseEvent) => {
|
||||
@ -1300,7 +1315,7 @@ function getEdgeColour(edge: LinkObject) {
|
||||
openContextMenu(event.layerX, event.layerY, contextMenuBg);
|
||||
closeContextMenus(contextMenuEd, contextMenuSt);
|
||||
// contextMenuEd.style.display = contextMenuSt.style.display = 'none';
|
||||
edgeFrom = edgeTo = rightSelection = null;
|
||||
edgeTarget = rightSelection = null;
|
||||
closeMenuItem();
|
||||
})
|
||||
.autoPauseRedraw(false);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user