diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue index 59cafbf8bc5c..ad165bd4fe8a 100644 --- a/client/src/components/Workflow/Editor/WorkflowGraph.vue +++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue @@ -46,6 +46,7 @@ (); @@ -60,6 +68,15 @@ function recalculateAABB() { } }); + props.comments.forEach((comment) => { + aabb.fitRectangle({ + x: comment.position[0], + y: comment.position[1], + width: comment.size[0], + height: comment.size[1], + }); + }); + aabb.squareCenter(); aabb.expand(120); @@ -70,9 +87,9 @@ function recalculateAABB() { } } -// redraw if any steps change +// redraw if any steps or comments change watch( - props.steps, + () => [props.steps, props.comments], () => { redraw = true; aabbChanged = true; @@ -140,6 +157,20 @@ function renderMinimap() { // apply global to local transform canvasTransform.applyToContext(ctx); + const frameComments: FrameWorkflowComment[] = []; + const markdownComments: MarkdownWorkflowComment[] = []; + const textComments: TextWorkflowComment[] = []; + + props.comments.forEach((comment) => { + if (comment.type === "frame") { + frameComments.push(comment); + } else if (comment.type === "markdown") { + markdownComments.push(comment); + } else if (comment.type === "text") { + textComments.push(comment); + } + }); + const allSteps = Object.values(props.steps); const okSteps: Step[] = []; const errorSteps: Step[] = []; @@ -159,6 +190,53 @@ function renderMinimap() { }); // draw rects + + ctx.lineWidth = 2 / canvasTransform.scaleX; + frameComments.forEach((comment) => { + ctx.beginPath(); + + if (comment.colour !== "none") { + ctx.fillStyle = commentColours.brighterColours[comment.colour]; + ctx.strokeStyle = commentColours.colours[comment.colour]; + } else { + ctx.fillStyle = "rgba(0, 0, 0, 0)"; + ctx.strokeStyle = colors.node; + } + + ctx.rect(comment.position[0], comment.position[1], comment.size[0], comment.size[1]); + ctx.fill(); + ctx.stroke(); + }); + + ctx.fillStyle = "white"; + markdownComments.forEach((comment) => { + ctx.beginPath(); + + if (comment.colour !== "none") { + ctx.strokeStyle = commentColours.colours[comment.colour]; + } else { + ctx.strokeStyle = colors.node; + } + + ctx.rect(comment.position[0], comment.position[1], comment.size[0], comment.size[1]); + ctx.fill(); + ctx.stroke(); + }); + + ctx.lineWidth = 1 / canvasTransform.scaleX; + textComments.forEach((comment) => { + ctx.beginPath(); + + if (comment.colour !== "none") { + ctx.strokeStyle = commentColours.brightColours[comment.colour]; + } else { + ctx.strokeStyle = colors.node; + } + + ctx.rect(comment.position[0], comment.position[1], comment.size[0], comment.size[1]); + ctx.stroke(); + }); + ctx.beginPath(); ctx.fillStyle = colors.node; okSteps.forEach((step) => {