From 63018979459831ada06b4612bb17190266050145 Mon Sep 17 00:00:00 2001 From: frikky Date: Wed, 21 Apr 2021 09:53:55 +0200 Subject: [PATCH] Added drag and drop action forwarding to workflows --- frontend/src/components/ParsedAction.jsx | 4 +- frontend/src/views/AngularWorkflow.jsx | 128 +++++++++++++++++++++-- 2 files changed, 123 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 1ebf3187..4c65e764 100644 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -603,7 +603,6 @@ const ParsedAction = (props) => { } } - //console.log("Data: ", data) var datafield = { }} fullWidth multiline={multiline} + id={"rightside_field_"+count} rows={rows} color="primary" defaultValue={data.value} @@ -705,6 +705,7 @@ const ParsedAction = (props) => { defaultValue={data.value} type={"text"} placeholder={"The file ID to get"} + id={"rightside_field_"+count} onChange={(event) => { changeActionParameter(event, count, data) }} @@ -741,6 +742,7 @@ const ParsedAction = (props) => { }} value={selectedActionParameters[count].value} fullWidth + id={"rightside_field_"+count} onChange={(e) => { changeActionParameter(e, count, data) setUpdate(Math.random()) diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx index c4aab2f6..dee43215 100644 --- a/frontend/src/views/AngularWorkflow.jsx +++ b/frontend/src/views/AngularWorkflow.jsx @@ -1273,11 +1273,66 @@ const AngularWorkflow = (props) => { } // Comparing locations between nodes and setting views - const onNodeDrag = (event) => { - if (Object.getOwnPropertyNames(selectedAction).length === 0) { + var styledElements = [] + var originalLocation = { + x: 0, + y: 0, + } + const onNodeDragStop = (event, selectedAction) => { + const nodedata = event.target.data() + + if (nodedata.id === selectedAction.id) { return } + console.log("DRAGGED NODE: ", nodedata) + console.log("TARGET NODE: ", selectedAction) + if (styledElements.length === 1) { + console.log("Should reset location and autofill: ", styledElements, selectedAction) + //event.target.position = originalLocation + //curworkflowTrigger.position = cyelements[key].position() + if (originalLocation.x !== 0 || originalLocation.y !== 0) { + const currentnode = cy.getElementById(nodedata.id) + if (currentnode !== null && currentnode !== undefined) { + //currentnode.position = originalLocation + currentnode.position("x", originalLocation.x) + currentnode.position("y", originalLocation.y) + } + + originalLocation = {x: 0, y: 0} + } + + const curElement = document.getElementById(styledElements[0]) + if (curElement !== null && curElement !== undefined) { + console.log("ELE: ", curElement) + curElement.style.border = curElement.style.original_border + const newValue = "$"+nodedata.label.toLowerCase().replace(" ", "_") + curElement.value = newValue + if (curElement.id.startsWith("rightside_field_")) { + console.log("FOUND FIELD WITH NUMBER: ", curElement.id) + const idsplit = curElement.id.split("_") + console.log(idsplit) + if (idsplit.length === 3 && !isNaN(idsplit[2])) { + console.log("ADDING TO PARAM ", idsplit[2]) + console.log("PARAM: ", selectedAction) + + selectedAction.parameters[idsplit[2]].value = newValue + } + } + } + } + + originalLocation = { + x: 0, + y: 0, + } + } + + const onNodeDrag = (event, selectedAction) => { + //if (Object.getOwnPropertyNames(selectedAction).length === 0) { + // return + //} + const nodedata = event.target.data() if (nodedata.app_name == "Shuffle Tools" || nodedata.app_name == "Testing") { //console.log("NODE: ", @@ -1289,12 +1344,62 @@ const AngularWorkflow = (props) => { // 3. If it is, then hide text } - console.log(nodedata) - var x = event.clientX, y = event.clientY, - elementMouseIsOver = document.elementFromPoint(x, y) - console.log("ELEMENT: ", elementMouseIsOver) + if (nodedata.id === selectedAction.id) { + return + } + if (originalLocation.x === 0 && originalLocation.y === 0) { + console.log("Updating location!: ", nodedata) + originalLocation.x = nodedata.position.x + originalLocation.y = nodedata.position.y + } + // Part of autocomplete. Styles elements in frontend to indicate + // what and where we may input data for the user. + const onMouseUpdate = (e) => { + const x = e.pageX; + const y = e.pageY; + + const elementMouseIsOver = document.elementFromPoint(x, y) + if (elementMouseIsOver !== undefined && elementMouseIsOver !== null) { + // Color for #f85a3e translated to rgb + const newBorder = "3px solid rgb(248, 90, 62)" + if (elementMouseIsOver.style.border != newBorder && elementMouseIsOver.id.includes("rightside")) { + console.log(elementMouseIsOver.style.border) + if (elementMouseIsOver.style.border !== undefined) { + elementMouseIsOver.style.original_border = elementMouseIsOver.style.border + } else { + elementMouseIsOver.style.original_border = "" + } + + elementMouseIsOver.style.border = newBorder + console.log("STYLED: ", styledElements) + for (var key in styledElements) { + const curElement = document.getElementById(styledElements[key]) + if (curElement !== null && curElement !== undefined) { + curElement.style.border = curElement.style.original_border + } + } + + styledElements = [] + styledElements.push(elementMouseIsOver.id) + } else if (elementMouseIsOver.id === "cytoscape_view" || elementMouseIsOver.id === "") { + for (var key in styledElements) { + const curElement = document.getElementById(styledElements[key]) + if (curElement !== null && curElement !== undefined) { + curElement.style.border = curElement.style.original_border + } + } + + styledElements = [] + } + } + + // Ensure it only happens once + document.removeEventListener('mousemove', onMouseUpdate, false) + } + + document.addEventListener('mousemove', onMouseUpdate, false); /* event.target.animate({ @@ -1405,6 +1510,11 @@ const AngularWorkflow = (props) => { setSelectedApp(curapp) setSelectedAction(curaction) + + cy.removeListener('drag') + cy.removeListener('free') + cy.on('drag', 'node', (e) => onNodeDrag(e, curaction)) + cy.on('free', 'node', (e) => onNodeDragStop(e, curaction)) } if (environments !== undefined && environments !== null) { @@ -1848,7 +1958,8 @@ const AngularWorkflow = (props) => { cy.on('mouseout', 'node', (e) => onNodeHoverOut(e)) // Handles dragging - cy.on('drag', 'node', (e) => onNodeDrag(e)) + cy.on('drag', 'node', (e) => onNodeDrag(e, selectedAction)) + cy.on('free', 'node', (e) => onNodeDragStop(e, selectedAction)) //cy.on('mouseover', 'node', () => $(targetElement).addClass('mouseover')); @@ -5495,7 +5606,7 @@ const AngularWorkflow = (props) => { if (Object.getOwnPropertyNames(selectedAction).length > 0) { //console.time('ACTIONSTART') return( -
+
{appApiView}
) @@ -6273,6 +6384,7 @@ const AngularWorkflow = (props) => { boxSelectionEnabled={true} autounselectify={false} showGrid={true} + id="cytoscape_view" cy={(incy) => { // FIXME: There's something specific loading when // you do the first hover of a node. Why is this different?