marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added color change to edges in graph

Browse Source
This commit is contained in:
frikky
2020-06-13 19:03:19 +02:00
parent 4f25d9c2e7
commit 302044b4f3
1 changed files with 12 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/AngularWorkflow.js
+12 -17
View File
@@ -62,8 +62,6 @@ import cxtmenu from 'cytoscape-cxtmenu';
import { w3cwebsocket as W3CWebSocket } from "websocket"; import { w3cwebsocket as W3CWebSocket } from "websocket";
import { useAlert } from "react-alert"; import { useAlert } from "react-alert";
const hoverColor = "#f85a3e"
const hoverOutColor = "#e8eaf6"
const surfaceColor = "#27292D" const surfaceColor = "#27292D"
const inputColor = "#383B40" const inputColor = "#383B40"
@@ -1142,7 +1140,6 @@ const AngularWorkflow = (props) => {
} }
const onNodeHover = (event) => { const onNodeHover = (event) => {
//event.target.style("border-width", "5px")
event.target.animate({ event.target.animate({
style: { style: {
"border-width": "5px", "border-width": "5px",
@@ -1156,24 +1153,22 @@ const AngularWorkflow = (props) => {
} }
const onEdgeHoverOut = (event) => { const onEdgeHoverOut = (event) => {
//event.target.removeStyle() event.target.removeStyle()
} }
// This is here to have a proper transition for lines // This is here to have a proper transition for lines
const onEdgeHover = (event) => { const onEdgeHover = (event) => {
const sourcecolor = cy.getElementById(event.target.data("source")).style("border-color")
//console.log(event.target.data()) const targetcolor = cy.getElementById(event.target.data("target")).style("border-color")
//const sourcecolor = cy.getElementById(event.target.data("source")).style("border-color") event.target.animate({
//const targetcolor = cy.getElementById(event.target.data("target")).style("border-color") style: {
//event.target.animate({ "line-fill": "linear-gradient",
// style: { 'target-arrow-color': targetcolor,
// "line-fill": "linear-gradient", "line-gradient-stop-colors": [sourcecolor, targetcolor],
// 'target-arrow-color': targetcolor, "line-gradient-stop-positions": [0, 1],
// "line-gradient-stop-colors": [sourcecolor, targetcolor], },
// "line-gradient-stop-positions": [0, 1], duration: 0,
// }, })
// duration: 0,
//})
} }