starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-10-08 00:02:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): improve graph edges + fix depedencies detection (#3802)

Browse Source 
* feat(frontend): improve graph edges + fix depedencies detection

* Update frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>
This commit is contained in:
Faton Ramadani
2024-05-23 20:17:34 +02:00
committed by GitHub
co-authored by ellipsis-dev[bot] Ruben Fiszel
parent 62e88169ea
commit d11e350de3
2 changed files with 45 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/flows/flowExplorer.ts
+4 -1
View File
@@ -62,7 +62,10 @@ function filterDependentComponents(modules: FlowModule[], id: string): Record<st
modules
.map((mod) => [
mod.id,
getModuleExprs(mod).filter((expr) => expr.includes(`results.${id}`))
getModuleExprs(mod).filter((expr) => {
const pattern = new RegExp(`\\bresults\\.${id}(?:\\b|\\.)`)
return pattern.test(expr)
})
])
.filter((x) => x[1].length > 0)
)
frontend/src/lib/components/graph/svelvet/edges/views/Edges/SimpleBezierEdge.svelte
+41 -15
View File
@@ -8,7 +8,7 @@
function calculateControlOffset(distance, curvature) {
if (distance >= 0) {
return 0.5 * distance
return 0.9 * distance
} else {
return curvature * 25 * Math.sqrt(-distance)
}
@@ -73,6 +73,10 @@
})
return `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`
}
// returns string to pass into edge 'path' svg d attribute for the straight line
function getStraightLinePath({ sourceX, sourceY, targetX, targetY }) {
return `M${sourceX},${sourceY} L${sourceX},${targetY - 50}`
}
// determining center of the bezier curve to know where to place the bezier edge text label
function getSimpleBezierCenter({
sourceX,
@@ -109,6 +113,7 @@
const yOffset = Math.abs(centerY - sourceY)
return [centerX, centerY, xOffset, yOffset]
}
export let canvasId: string
export let edgeId: string
const store = findStore(canvasId)
@@ -116,33 +121,54 @@
let edge
$: edge = $edgesStore[edgeId]
let params
let bezierParams, lineParams
$: {
const store = findStore(canvasId)
const sourceAnchor = getAnchorFromEdge(store, edge.id, 'source')
const targetAnchor = getAnchorFromEdge(store, edge.id, 'target')
const mapAngle = { 0: 'right', 90: 'top', 180: 'left', 270: 'bottom' }
params = {
sourceX: edge.sourceX + (edge.offset ?? 0),
sourceY: edge.sourceY,
sourcePosition: mapAngle[sourceAnchor.angle],
targetX: edge.targetX + (edge.offset ?? 0),
targetY: edge.targetY,
targetPosition: mapAngle[targetAnchor.angle],
curvature: 0.25
if (edge.targetY - edge.sourceY > 100) {
bezierParams = {
sourceX: edge.sourceX + (edge.offset ?? 0),
sourceY: edge.targetY - 100,
sourcePosition: mapAngle[sourceAnchor.angle],
targetX: edge.targetX + (edge.offset ?? 0),
targetY: edge.targetY,
targetPosition: mapAngle[targetAnchor.angle],
curvature: 0.25
}
lineParams = {
sourceX: edge.sourceX + (edge.offset ?? 0),
sourceY: edge.sourceY,
targetX: edge.targetX + (edge.offset ?? 0),
targetY: edge.targetY - 50
}
} else {
bezierParams = {
sourceX: edge.sourceX + (edge.offset ?? 0),
sourceY: edge.sourceY,
sourcePosition: mapAngle[sourceAnchor.angle],
targetX: edge.targetX + (edge.offset ?? 0),
targetY: edge.targetY,
targetPosition: mapAngle[targetAnchor.angle],
curvature: 0.25
}
lineParams = {}
}
}
// pass in params to function that returns a string value for SVG path d attribute (where to be drawn)
$: path = getSimpleBezierPath(params)
$: [centerX, centerY] = getSimpleBezierCenter(params)
$: bezierPath = getSimpleBezierPath(bezierParams)
$: linePath = lineParams ? getStraightLinePath(lineParams) : ''
$: [bezierCenterX, bezierCenterY] = getSimpleBezierCenter(bezierParams)
// pass necessary values to BaseEdge component
// BaseEdge renders a 'base' path that can be customized by parent Edge components
$: baseEdgeProps = {
...edge,
path: path,
centerX: centerX,
centerY: centerY
path: `${bezierPath} ${linePath}`,
centerX: bezierCenterX,
centerY: bezierCenterY
}
</script>