@michael_home/workflow-engine-vue 1.0.0

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@michael_home/workflow-engine-vue",
+  "version": "1.0.0",
+  "description": "Vue 3 components for workflow engine canvas",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "workflow",
+    "vue3",
+    "components",
+    "canvas"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@michael_home/workflow-engine-core": "^1.0.0",
+    "@michael_home/workflow-engine-svg-renderer": "^1.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "echo 'Vue package uses source files directly'",
+    "check": "echo 'Vue package skips type checking'",
+    "clean": "echo 'Nothing to clean'"
+  }
+}

package/src/CanvasView.vue

@@ -0,0 +1,759 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import {
+  PortDirection,
+  buildPreviewRoute,
+  getPortPoint,
+  resolveLinkCompletion,
+  resolveLinkSource,
+  resolveNodeDragPosition,
+  shouldActivateLinkDrag
+} from '@michael_home/workflow-engine-core'
+import type { GraphEdge, GraphNode, Point, Port } from '@michael_home/workflow-engine-core'
+import { renderSvgEdge } from '@michael_home/workflow-engine-svg-renderer'
+
+const props = withDefaults(
+  defineProps<{
+    nodes: GraphNode<unknown>[]
+    edges: GraphEdge<unknown>[]
+    selectedNodeId?: string
+    selectedEdgeId?: string
+    width?: number
+    height?: number
+    panX?: number
+    panY?: number
+    zoom?: number
+    snapToGrid?: boolean
+    gridSize?: number
+    alignThreshold?: number
+    portHitRadius?: number
+    portDragThreshold?: number
+  }>(),
+  {
+    panX: 0,
+    panY: 0,
+    zoom: 1,
+    snapToGrid: true,
+    gridSize: 10,
+    alignThreshold: 10,
+    portHitRadius: 14,
+    portDragThreshold: 4
+  }
+)
+
+const emit = defineEmits<{
+  selectionChange: [selection: { nodeId?: string; edgeId?: string }]
+  nodePositionChange: [payload: { nodeId: string; position: Point }]
+  edgeCreate: [payload: { sourceNodeId: string; sourcePortId: string; targetNodeId: string; targetPortId: string }]
+  edgeDelete: [payload: { edgeId: string }]
+  nodeDelete: [payload: { nodeId: string }]
+}>()
+
+const zoomLevel = ref(props.zoom)
+
+const clampZoom = (value: number) => Math.min(2, Math.max(0.4, Number(value.toFixed(2))))
+
+const zoomIn = () => {
+  zoomLevel.value = clampZoom(zoomLevel.value + 0.1)
+}
+
+const zoomOut = () => {
+  zoomLevel.value = clampZoom(zoomLevel.value - 0.1)
+}
+
+watch(
+  () => props.zoom,
+  (value) => {
+    zoomLevel.value = clampZoom(value)
+  }
+)
+
+const viewportTransform = computed(
+  () => `translate(${props.panX} ${props.panY}) scale(${zoomLevel.value})`
+)
+
+const containerRef = ref<HTMLElement>()
+const svgRef = ref<SVGSVGElement>()
+const sizeState = reactive({ width: 700, height: 240 })
+let resizeObserver: ResizeObserver | undefined
+
+const canvasWidth = computed(() => props.width ?? sizeState.width)
+const canvasHeight = computed(() => props.height ?? sizeState.height)
+
+const dragState = reactive({
+  active: false,
+  nodeId: '',
+  offsetX: 0,
+  offsetY: 0,
+  latestClientX: 0,
+  latestClientY: 0
+})
+
+const linkState = reactive({
+  active: false,
+  sourceNodeId: '',
+  sourcePortId: '',
+  pendingClick: false,
+  pressedClientX: 0,
+  pressedClientY: 0,
+  currentX: 0,
+  currentY: 0
+})
+
+const frameState = reactive({ rafId: 0, scheduled: false })
+
+const resolveEdgeLabel = (edge: GraphEdge<unknown>): string => {
+  const data = edge.data as { text?: string } | undefined
+  return data?.text ?? ''
+}
+
+const resolveEdgeLineColor = (edge: GraphEdge<unknown>): string => {
+  const data = edge.data as { lineColor?: string } | undefined
+  return data?.lineColor ?? '#1c7ed6'
+}
+
+const resolveEdgeFontColor = (edge: GraphEdge<unknown>): string => {
+  const data = edge.data as { fontColor?: string } | undefined
+  return data?.fontColor ?? '#0f172a'
+}
+
+const resolveEdgeLineDasharray = (edge: GraphEdge<unknown>): string | undefined => {
+  const data = edge.data as { lineStyle?: 'solid' | 'dashed' } | undefined
+  return data?.lineStyle === 'dashed' ? '6 4' : undefined
+}
+
+const edgeRuntimeStatusOf = (edge: GraphEdge<unknown>): 'idle' | 'pending' | 'completed' | 'disabled' => {
+  const data = edge.data as { runtimeStatus?: 'idle' | 'pending' | 'completed' | 'disabled' } | undefined
+  return data?.runtimeStatus ?? 'idle'
+}
+
+const isFlowingEdge = (edge: GraphEdge<unknown>): boolean => edgeRuntimeStatusOf(edge) === 'pending'
+
+const getEdgeLabelPoint = (points: Point[]): Point | undefined => {
+  if (points.length < 2) return undefined
+
+  const segments: Array<{ start: Point; end: Point; length: number }> = []
+  let totalLength = 0
+
+  for (let i = 1; i < points.length; i += 1) {
+    const start = points[i - 1]
+    const end = points[i]
+    const length = Math.hypot(end.x - start.x, end.y - start.y)
+    if (length === 0) continue
+    segments.push({ start, end, length })
+    totalLength += length
+  }
+
+  if (segments.length === 0 || totalLength === 0) return undefined
+
+  const half = totalLength / 2
+  let acc = 0
+
+  for (const segment of segments) {
+    if (acc + segment.length >= half) {
+      const ratio = (half - acc) / segment.length
+      return {
+        x: segment.start.x + (segment.end.x - segment.start.x) * ratio,
+        y: segment.start.y + (segment.end.y - segment.start.y) * ratio
+      }
+    }
+    acc += segment.length
+  }
+
+  const last = segments[segments.length - 1]
+  return { x: last.end.x, y: last.end.y }
+}
+
+const renderedEdges = computed(() =>
+  props.edges.map((edge) => {
+    const points: Point[] = edge.points ?? []
+    const render = renderSvgEdge(points, { pixelSnap: true })
+    return {
+      edge,
+      edgeId: edge.id,
+      path: render.path,
+      arrow: render.arrow,
+      label: resolveEdgeLabel(edge),
+      lineColor: resolveEdgeLineColor(edge),
+      lineDasharray: resolveEdgeLineDasharray(edge),
+      labelColor: resolveEdgeFontColor(edge),
+      labelPoint: getEdgeLabelPoint(points),
+      flowing: isFlowingEdge(edge)
+    }
+  })
+)
+
+const titleOf = (node: GraphNode<unknown>): string => {
+  const data = node.data as { title?: string } | undefined
+  return data?.title ?? node.id
+}
+
+const iconOf = (node: GraphNode<unknown>): string => {
+  const data = node.data as { icon?: string } | undefined
+  return data?.icon ?? ''
+}
+
+const iconSymbolHrefOf = (node: GraphNode<unknown>): string => {
+  const icon = iconOf(node)
+  if (!icon || !icon.startsWith('icon-')) return ''
+  return `#${icon}`
+}
+
+const resolveNodeFillColor = (node: GraphNode<unknown>): string => {
+  const data = node.data as
+    | { nodeColor?: string; runtimeStatus?: 'idle' | 'active' | 'completed'; completedFillColor?: string }
+    | undefined
+  if (data?.runtimeStatus === 'completed') {
+    return data.completedFillColor ?? '#bbf7d0'
+  }
+  if (data?.runtimeStatus === 'active') {
+    return '#dcfce7'
+  }
+  return data?.nodeColor ?? '#ffffff'
+}
+
+const resolveNodeFontColor = (node: GraphNode<unknown>): string => {
+  const data = node.data as { fontColor?: string } | undefined
+  return data?.fontColor ?? '#0f172a'
+}
+
+const resolveNodeShape = (node: GraphNode<unknown>): 'rect' | 'ellipse' | 'diamond' => {
+  const data = node.data as { nodeShape?: 'rect' | 'ellipse' | 'diamond' } | undefined
+  return data?.nodeShape ?? 'rect'
+}
+
+const diamondPointsOf = (node: GraphNode<unknown>): string => {
+  const halfW = node.size.width / 2
+  const halfH = node.size.height / 2
+  return `0,${-halfH} ${halfW},0 0,${halfH} ${-halfW},0`
+}
+
+const portsOf = (node: GraphNode<unknown>) => {
+  const byDirection = new Map(node.ports.map((port) => [port.direction, port]))
+
+  return [
+    { direction: PortDirection.Top, dx: 0, dy: -node.size.height / 2 },
+    { direction: PortDirection.Right, dx: node.size.width / 2, dy: 0 },
+    { direction: PortDirection.Bottom, dx: 0, dy: node.size.height / 2 },
+    { direction: PortDirection.Left, dx: -node.size.width / 2, dy: 0 }
+  ]
+    .map((entry) => ({
+      ...entry,
+      port: byDirection.get(entry.direction)
+    }))
+    .filter((entry): entry is typeof entry & { port: Port } => Boolean(entry.port))
+}
+
+const toCanvasPoint = (event: MouseEvent): Point => {
+  const svg = svgRef.value
+  if (!svg) {
+    return { x: event.clientX, y: event.clientY }
+  }
+  const rect = svg.getBoundingClientRect()
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top
+  }
+}
+
+const toViewportPoint = (point: Point): Point => ({
+  x: (point.x - props.panX) / zoomLevel.value,
+  y: (point.y - props.panY) / zoomLevel.value
+})
+
+const applyDragFrame = () => {
+  frameState.scheduled = false
+
+  if (!dragState.active) return
+  const currentNode = props.nodes.find((node) => node.id === dragState.nodeId)
+  if (!currentNode) return
+
+  const position = resolveNodeDragPosition({
+    node: currentNode,
+    nodes: props.nodes,
+    alignThreshold: props.alignThreshold,
+    clientX: dragState.latestClientX,
+    clientY: dragState.latestClientY,
+    offsetX: dragState.offsetX,
+    offsetY: dragState.offsetY,
+    canvasWidth: canvasWidth.value / zoomLevel.value,
+    canvasHeight: canvasHeight.value / zoomLevel.value,
+    gridSize: props.gridSize,
+    snapToGrid: props.snapToGrid
+  })
+
+  emit('nodePositionChange', { nodeId: dragState.nodeId, position })
+}
+
+const resetLinkState = () => {
+  linkState.active = false
+  linkState.pendingClick = false
+  linkState.sourceNodeId = ''
+  linkState.sourcePortId = ''
+}
+
+const stopDrag = () => {
+  dragState.active = false
+  dragState.nodeId = ''
+
+  if (frameState.rafId) {
+    window.cancelAnimationFrame(frameState.rafId)
+    frameState.rafId = 0
+  }
+  frameState.scheduled = false
+}
+
+const stopLink = () => {
+  if (!linkState.active && !linkState.pendingClick) return
+
+  const source = resolveLinkSource({
+    sourceNodeId: linkState.sourceNodeId,
+    sourcePortId: linkState.sourcePortId,
+    nodes: props.nodes
+  })
+
+  if (source) {
+    const completion = resolveLinkCompletion({
+      sourceNodeId: source.sourceNode.id,
+      sourcePortId: source.sourcePort.id,
+      sourceNode: source.sourceNode,
+      sourcePort: source.sourcePort,
+      nodes: props.nodes,
+      mode: linkState.pendingClick ? 'click' : 'drag',
+      currentPoint: { x: linkState.currentX, y: linkState.currentY },
+      hitRadius: props.portHitRadius
+    })
+
+    if (completion.targetNodeId && completion.targetPortId) {
+      emit('edgeCreate', {
+        sourceNodeId: completion.sourceNodeId,
+        sourcePortId: completion.sourcePortId,
+        targetNodeId: completion.targetNodeId,
+        targetPortId: completion.targetPortId
+      })
+    }
+  }
+
+  resetLinkState()
+}
+
+const previewPoints = computed(() => {
+  if (!linkState.active) return []
+
+  const source = resolveLinkSource({
+    sourceNodeId: linkState.sourceNodeId,
+    sourcePortId: linkState.sourcePortId,
+    nodes: props.nodes
+  })
+  if (!source) return []
+
+  return buildPreviewRoute({
+    sourceNode: source.sourceNode,
+    sourcePort: source.sourcePort,
+    nodes: props.nodes,
+    currentPoint: { x: linkState.currentX, y: linkState.currentY },
+    hitRadius: props.portHitRadius
+  }).points
+})
+
+const renderedPreview = computed(() => renderSvgEdge(previewPoints.value, { pixelSnap: true }))
+
+const onNodeMousedown = (node: GraphNode<unknown>, event: MouseEvent) => {
+  if (linkState.active) return
+
+  event.preventDefault()
+  emit('selectionChange', { nodeId: node.id })
+  dragState.active = true
+  dragState.nodeId = node.id
+
+  const viewportPoint = toViewportPoint(toCanvasPoint(event))
+  dragState.offsetX = viewportPoint.x - node.position.x
+  dragState.offsetY = viewportPoint.y - node.position.y
+  dragState.latestClientX = viewportPoint.x
+  dragState.latestClientY = viewportPoint.y
+}
+
+const onPortMousedown = (node: GraphNode<unknown>, port: Port, event: MouseEvent) => {
+  event.preventDefault()
+  emit('selectionChange', { nodeId: node.id })
+
+  const start = getPortPoint(node, port)
+  linkState.active = false
+  linkState.pendingClick = true
+  linkState.pressedClientX = event.clientX
+  linkState.pressedClientY = event.clientY
+  linkState.sourceNodeId = node.id
+  linkState.sourcePortId = port.id
+  linkState.currentX = start.x
+  linkState.currentY = start.y
+}
+
+const onEdgeMousedown = (edge: GraphEdge<unknown>, event: MouseEvent) => {
+  event.preventDefault()
+  event.stopPropagation()
+  emit('selectionChange', { edgeId: edge.id })
+}
+
+const onCanvasMousedown = () => {
+  if (linkState.active || dragState.active) return
+  emit('selectionChange', {})
+}
+
+const onWindowMouseMove = (event: MouseEvent) => {
+  const canvasPoint = toCanvasPoint(event)
+
+  if (linkState.pendingClick && !linkState.active) {
+    const shouldActivate = shouldActivateLinkDrag({
+      pressedClientX: linkState.pressedClientX,
+      pressedClientY: linkState.pressedClientY,
+      currentClientX: event.clientX,
+      currentClientY: event.clientY,
+      threshold: props.portDragThreshold
+    })
+
+    if (shouldActivate) {
+      linkState.active = true
+      linkState.pendingClick = false
+    }
+  }
+
+  if (linkState.active) {
+    const viewportPoint = toViewportPoint(canvasPoint)
+    linkState.currentX = viewportPoint.x
+    linkState.currentY = viewportPoint.y
+    return
+  }
+
+  if (!dragState.active) return
+  const viewportPoint = toViewportPoint(canvasPoint)
+  dragState.latestClientX = viewportPoint.x
+  dragState.latestClientY = viewportPoint.y
+
+  if (frameState.scheduled) return
+  frameState.scheduled = true
+  frameState.rafId = window.requestAnimationFrame(applyDragFrame)
+}
+
+const onWindowMouseUp = () => {
+  stopDrag()
+  stopLink()
+}
+
+const onWindowKeyDown = (event: KeyboardEvent) => {
+  if (event.key !== 'Delete' && event.key !== 'Backspace') return
+
+  const target = event.target as HTMLElement | null
+  if (target) {
+    const tagName = target.tagName
+    if (tagName === 'INPUT' || tagName === 'TEXTAREA' || target.isContentEditable) {
+      return
+    }
+  }
+
+  if (props.selectedEdgeId) {
+    event.preventDefault()
+    emit('edgeDelete', { edgeId: props.selectedEdgeId })
+    return
+  }
+
+  if (props.selectedNodeId) {
+    event.preventDefault()
+    emit('nodeDelete', { nodeId: props.selectedNodeId })
+  }
+}
+
+onMounted(() => {
+  const updateSize = () => {
+    const host = containerRef.value
+    if (!host) return
+    const rect = host.getBoundingClientRect()
+    if (rect.width > 0) sizeState.width = rect.width
+    if (rect.height > 0) sizeState.height = rect.height
+  }
+
+  updateSize()
+  resizeObserver = new ResizeObserver(updateSize)
+  if (containerRef.value) resizeObserver.observe(containerRef.value)
+
+  window.addEventListener('mousemove', onWindowMouseMove)
+  window.addEventListener('mouseup', onWindowMouseUp)
+  window.addEventListener('keydown', onWindowKeyDown)
+})
+
+onUnmounted(() => {
+  stopDrag()
+  resizeObserver?.disconnect()
+  window.removeEventListener('mousemove', onWindowMouseMove)
+  window.removeEventListener('mouseup', onWindowMouseUp)
+  window.removeEventListener('keydown', onWindowKeyDown)
+})
+</script>
+
+<template>
+  <section ref="containerRef" class="canvas-view" :style="{ width: '100%', height: '100%' }">
+    <div class="zoom-controls">
+      <button type="button" class="zoom-btn" @click="zoomOut">-</button>
+      <span class="zoom-text">{{ Math.round(zoomLevel * 100) }}%</span>
+      <button type="button" class="zoom-btn" @click="zoomIn">+</button>
+    </div>
+    <svg
+      ref="svgRef"
+      class="canvas-svg"
+      xmlns="http://www.w3.org/2000/svg"
+      :viewBox="`0 0 ${canvasWidth} ${canvasHeight}`"
+      @mousedown.self="onCanvasMousedown"
+    >
+      <g :transform="viewportTransform">
+        <g class="edge-layer">
+          <template v-for="item in renderedEdges" :key="item.edgeId">
+            <path
+              :d="item.path"
+              fill="none"
+              stroke="transparent"
+              stroke-width="15"
+              vector-effect="non-scaling-stroke"
+              class="edge-hit"
+              @mousedown.stop="(event) => onEdgeMousedown(item.edge, event)"
+            />
+            <path
+              :d="item.path"
+              :stroke="selectedEdgeId === item.edgeId ? '#2563eb' : item.lineColor"
+              stroke-width="1"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              vector-effect="non-scaling-stroke"
+              shape-rendering="geometricPrecision"
+              class="edge-path"
+              :class="{ 'edge-flowing': item.flowing }"
+              :stroke-dasharray="item.lineDasharray ?? (item.flowing ? '7 6' : undefined)"
+              @mousedown.stop="(event) => onEdgeMousedown(item.edge, event)"
+            />
+            <polygon
+              :points="item.arrow"
+              :fill="selectedEdgeId === item.edgeId ? '#2563eb' : item.lineColor"
+              :stroke="selectedEdgeId === item.edgeId ? '#2563eb' : item.lineColor"
+              vector-effect="non-scaling-stroke"
+              shape-rendering="geometricPrecision"
+              class="edge-arrow"
+              @mousedown.stop="(event) => onEdgeMousedown(item.edge, event)"
+            />
+            <text
+              v-if="item.label && item.labelPoint"
+              :x="item.labelPoint.x"
+              :y="item.labelPoint.y"
+              class="edge-label"
+              :fill="item.labelColor"
+              text-anchor="middle"
+              dominant-baseline="central"
+            >
+              {{ item.label }}
+            </text>
+          </template>
+
+          <template v-if="previewPoints.length > 1">
+            <path
+              :d="renderedPreview.path"
+              stroke="#94a3b8"
+              stroke-width="2"
+              fill="none"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              vector-effect="non-scaling-stroke"
+              shape-rendering="geometricPrecision"
+            />
+            <polygon
+              :points="renderedPreview.arrow"
+              fill="#94a3b8"
+              stroke="#94a3b8"
+              vector-effect="non-scaling-stroke"
+              shape-rendering="geometricPrecision"
+            />
+          </template>
+        </g>
+
+        <g class="node-layer">
+          <g
+            v-for="node in nodes"
+            :key="node.id"
+            class="node-group"
+            :transform="`translate(${node.position.x + node.size.width / 2} ${node.position.y + node.size.height / 2})`"
+          >
+            <rect
+              v-if="resolveNodeShape(node) === 'rect'"
+              :x="-node.size.width / 2"
+              :y="-node.size.height / 2"
+              :width="node.size.width"
+              :height="node.size.height"
+              rx="4"
+              ry="4"
+              :fill="resolveNodeFillColor(node)"
+              stroke="#0f172a"
+              :class="{ selected: selectedNodeId === node.id }"
+              @mousedown.stop="(event) => onNodeMousedown(node, event)"
+            />
+
+            <rect
+              v-else-if="resolveNodeShape(node) === 'ellipse'"
+              :x="-node.size.width / 2"
+              :y="-node.size.height / 2"
+              :width="node.size.width"
+              :height="node.size.height"
+              :rx="node.size.height / 2"
+              :ry="node.size.height / 2"
+              :fill="resolveNodeFillColor(node)"
+              stroke="#0f172a"
+              :class="{ selected: selectedNodeId === node.id }"
+              @mousedown.stop="(event) => onNodeMousedown(node, event)"
+            />
+
+            <polygon
+              v-else
+              :points="diamondPointsOf(node)"
+              :fill="resolveNodeFillColor(node)"
+              stroke="#0f172a"
+              :class="{ selected: selectedNodeId === node.id }"
+              @mousedown.stop="(event) => onNodeMousedown(node, event)"
+            />
+
+            <foreignObject
+              :x="-node.size.width / 2"
+              :y="-node.size.height / 2"
+              :width="node.size.width"
+              :height="node.size.height"
+              class="node-title-foreign"
+            >
+              <div xmlns="http://www.w3.org/1999/xhtml" class="node-title-dom" :style="{ color: resolveNodeFontColor(node) }">
+                <svg v-if="iconSymbolHrefOf(node)" width="14" height="14" class="node-icon-dom" aria-hidden="true">
+                  <use :href="iconSymbolHrefOf(node)" :fill="resolveNodeFontColor(node)" />
+                </svg>
+                <span v-else-if="iconOf(node)" class="node-icon-fallback">{{ iconOf(node) }}</span>
+                <span class="node-title-text">{{ titleOf(node) }}</span>
+              </div>
+            </foreignObject>
+
+            <circle
+              v-for="item in portsOf(node)"
+              v-show="selectedNodeId === node.id"
+              :key="item.port.id"
+              :cx="item.dx"
+              :cy="item.dy"
+              r="5"
+              fill="#ffffff"
+              stroke="#1d4ed8"
+              class="port-dot"
+              @mousedown.stop="(event) => onPortMousedown(node, item.port, event)"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  </section>
+</template>
+
+<style scoped>
+.canvas-view {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid #dee2e6;
+  background: #f8f9fa;
+}
+
+.zoom-controls {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  padding: 4px 6px;
+}
+
+.zoom-btn {
+  width: 24px;
+  height: 24px;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  background: #f8fafc;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.zoom-text {
+  min-width: 44px;
+  text-align: center;
+  font-size: 12px;
+  color: #334155;
+}
+
+.canvas-svg {
+  width: 100%;
+  height: 100%;
+}
+
+rect.selected,
+polygon.selected {
+  stroke: #2563eb;
+  stroke-width: 2;
+}
+
+.port-dot {
+  cursor: crosshair;
+}
+
+.edge-path,
+.edge-arrow {
+  cursor: pointer;
+}
+
+.edge-flowing {
+  animation: edge-flow 0.8s linear infinite;
+}
+
+@keyframes edge-flow {
+  from {
+    stroke-dashoffset: 0;
+  }
+  to {
+    stroke-dashoffset: -13;
+  }
+}
+
+.edge-label {
+  font-size: 12px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.node-title-foreign {
+  pointer-events: none;
+}
+
+.node-title-dom {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 13px;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.node-icon-dom,
+.node-icon-fallback {
+  flex: 0 0 auto;
+}
+
+.node-title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

package/src/EdgeView.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Point } from '@workflow/core'
+import { renderSvgEdge } from '@workflow/svg-renderer'
+
+const props = withDefaults(
+  defineProps<{
+    points: Point[]
+    stroke?: string
+    strokeWidth?: number
+    fill?: string
+  }>(),
+  {
+    stroke: '#0b7285',
+    strokeWidth: 1,
+    fill: '#0b7285'
+  }
+)
+
+const render = computed(() => renderSvgEdge(props.points))
+</script>
+
+<template>
+  <svg class="edge-view" xmlns="http://www.w3.org/2000/svg">
+    <path
+      :d="render.path"
+      :stroke="stroke"
+      :stroke-width="strokeWidth"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <polygon :points="render.arrow" :fill="fill" :stroke="stroke" />
+  </svg>
+</template>
+
+<style scoped>
+.edge-view {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+</style>

package/src/index.ts

@@ -0,0 +1 @@
+export { default as CanvasView } from './CanvasView.vue'