Merge pull request #276 from PrefectHQ/sub-nodes-border

PrefectHQ · Oct 26, 2023 · dd7b426 · dd7b426
2 parents b2eeabf + ef7d900
commit dd7b426
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/src/factories/border.ts b/src/factories/border.ts
@@ -51,11 +51,12 @@ export function borderFactory() {
 
   async function render(style: BorderStyle): Promise<Container> {
     const { radius = 0, color = '#fff', stroke, width, height } = style
-    const size = radius * 2
+    const smallest = Math.min(width, height)
+    const size = radius * 2 > smallest ? smallest / 2 : radius * 2
 
     const cornerStyle: CornerStyle = {
       size,
-      radius,
+      radius: radius,
       stroke,
     }
 
@@ -110,8 +111,8 @@ export function borderFactory() {
   }
 
   function updateBorders({ texture, size, width, height, stroke }: UpdateBorders): void {
-    const sidesHeight = height - size * 2
-    const topAndBottomWidth = width - size * 2
+    const sidesHeight = Math.max(height - size * 2, 0)
+    const topAndBottomWidth = Math.max(width - size * 2, 0)
 
     top.texture = texture
     left.texture = texture

diff --git a/src/factories/nodeFlowRun.ts b/src/factories/nodeFlowRun.ts
@@ -1,5 +1,6 @@
 import { Container } from 'pixi.js'
 import { DEFAULT_NODE_CONTAINER_NAME } from '@/consts'
+import { borderFactory } from '@/factories/border'
 import { nodeLabelFactory } from '@/factories/label'
 import { nodeArrowButtonFactory } from '@/factories/nodeArrowButton'
 import { nodeBarFactory } from '@/factories/nodeBar'
@@ -18,9 +19,11 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
   const { label, render: renderLabelText } = await nodeLabelFactory()
   const { container: nodesContainer, render: renderNodes, stop: stopNodes, getHeight: getNodesHeight } = await nodesContainerFactory(node.id)
   const { container: arrowButton, render: renderArrowButtonContainer } = await nodeArrowButtonFactory()
+  const { border, render: renderBorderContainer } = await borderFactory()
 
   let isOpen = false
 
+  container.addChild(border)
   container.addChild(bar)
   container.addChild(label)
   container.addChild(nodesContainer)
@@ -38,6 +41,7 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
     await renderBar(node)
     await renderArrowButton()
     await renderLabel()
+    await renderBorder()
 
     return container
   }
@@ -50,6 +54,28 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
     }
   }
 
+  async function renderBorder(): Promise<void> {
+    const { background = '#fff' } = config.styles.node(node)
+    const offset = 4
+    const openHeight = getNodesHeight() + config.styles.nodeHeight + offset * 2
+    const closedHeight = config.styles.nodeHeight
+
+    const position = isOpen ? -offset : offset
+    const width = isOpen ? bar.width + offset * 2 : bar.width - offset * 2
+    const height = isOpen ? openHeight : closedHeight
+    const stroke = isOpen ? 2 : 1
+
+    const border = await renderBorderContainer({
+      width,
+      height,
+      stroke,
+      radius: config.styles.nodeBorderRadius,
+      color: background,
+    })
+
+    border.position.set(position, position)
+  }
+
   async function open(): Promise<void> {
     isOpen = true
 
@@ -117,6 +143,7 @@ export async function flowRunContainerFactory(node: RunGraphNode) {
   }
 
   function resized(): void {
+    renderBorder()
     const height = getHeight()
 
     container.emit('resized', { height })