w-flow-vue 1.0.0

package/src/components/ui/Controls.vue

@@ -0,0 +1,83 @@
+<template>
+  <div :class="['vue-flow__controls', 'vue-flow__panel', `vue-flow__panel--${position}`]">
+    <template v-if="showZoom">
+      <button
+        title="Zoom In"
+        @click="$emit('zoom-in')"
+      >
+        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" fill="none"/></svg>
+      </button>
+      <button
+        title="Zoom Out"
+        @click="$emit('zoom-out')"
+      >
+        <svg viewBox="0 0 24 24"><path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none"/></svg>
+      </button>
+    </template>
+    <button
+      v-if="showFitView"
+      title="Fit View"
+      @click="$emit('fit-view')"
+    >
+      <svg viewBox="0 0 24 24"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>
+    </button>
+    <button
+      v-if="showInteractive"
+      :title="locked ? 'Unlock' : 'Lock'"
+      @click="$emit('toggle-interactive')"
+    >
+      <svg v-if="locked" viewBox="0 0 24 24"><path d="M17 11H7a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2zM12 17a1.5 1.5 0 110-3 1.5 1.5 0 010 3zM8 11V7a4 4 0 118 0v4" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>
+      <svg v-else viewBox="0 0 24 24"><path d="M17 11H7a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2zM12 17a1.5 1.5 0 110-3 1.5 1.5 0 010 3zM16 11V7a4 4 0 10-8 0" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>
+    </button>
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'FlowControls',
+    props: {
+        showZoom: { type: Boolean, default: true },
+        showFitView: { type: Boolean, default: true },
+        showInteractive: { type: Boolean, default: true },
+        locked: { type: Boolean, default: false },
+        position: { type: String, default: 'top-left' },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__controls {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+  background: #fefefe;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.vue-flow__controls button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: #fefefe;
+  cursor: pointer;
+  padding: 4px;
+  font-size: 14px;
+  color: #333;
+}
+.vue-flow__controls button:hover {
+  background: #f0f0f0;
+}
+.vue-flow__panel {
+  position: absolute;
+  z-index: 5;
+}
+.vue-flow__panel--top-left { top: 10px; left: 10px; }
+.vue-flow__panel--top-right { top: 10px; right: 10px; }
+.vue-flow__panel--bottom-left { bottom: 10px; left: 10px; }
+.vue-flow__panel--bottom-right { bottom: 10px; right: 10px; }
+</style>

package/src/components/ui/NodeSettingsForm.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="vue-flow__settings-form" :style="formStyle">
+    <label>Name
+      <input type="text" :value="node.name || ''" @input="$emit('update', 'name', $event.target.value)">
+    </label>
+    <label>Description
+      <input type="text" :value="node.description || ''" @input="$emit('update', 'description', $event.target.value)">
+    </label>
+    <label>Type
+      <select :value="node.type || defNode.type" @input="$emit('update', 'type', $event.target.value)">
+        <option value="input">Input</option>
+        <option value="basic">Basic</option>
+        <option value="output">Output</option>
+      </select>
+    </label>
+    <label>Shape
+      <select :value="node.shape || defNode.shape" @input="$emit('update', 'shape', $event.target.value)">
+        <option value="rectangle">Rectangle</option>
+        <option value="diamond">Diamond</option>
+        <option value="ellipse">Ellipse</option>
+        <option value="triangle">Triangle ▲</option>
+        <option value="triangle-right">Triangle ▶</option>
+        <option value="triangle-down">Triangle ▼</option>
+        <option value="triangle-left">Triangle ◀</option>
+      </select>
+    </label>
+    <label>Popup Direction
+      <select :value="node.popupDirection || defNode.popupDirection" @input="$emit('update', 'popupDirection', $event.target.value)">
+        <option value="top">Top</option>
+        <option value="right">Right</option>
+        <option value="bottom">Bottom</option>
+        <option value="left">Left</option>
+      </select>
+    </label>
+    <label>Font Size
+      <input type="number" :value="node.fontSize || defNode.fontSize" :min="defNode.fontSizeMin" :max="defNode.fontSizeMax" @input="onFontSizeInput($event.target.value)">
+    </label>
+    <label>Font Color
+      <WColorSelect :value="node.fontColor || defNode.fontColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit('update', 'fontColor', $event)" />
+    </label>
+    <label>Face Color
+      <WColorSelect :value="node.faceColor || defNode.faceColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit('update', 'faceColor', $event)" />
+    </label>
+    <label>Edge Color
+      <WColorSelect :value="node.edgeColor || defNode.edgeColor" :size="160" :colorBlockSize="16" :showColorText="false" @input="$emit('update', 'edgeColor', $event)" />
+    </label>
+    <label>Edge Width
+      <input type="number" :value="node.edgeWidth !== undefined ? node.edgeWidth : defNode.edgeWidth" min="1" max="24" @input="onEdgeWidthInput($event.target.value)">
+    </label>
+    <label v-if="node.type === 'output' || node.type === 'basic'">From Handle
+      <select :value="node.fromPosition || defNode.fromPosition" @input="$emit('update', 'fromPosition', $event.target.value)">
+        <option value="top">Top</option>
+        <option value="right">Right</option>
+        <option value="bottom">Bottom</option>
+        <option value="left">Left</option>
+      </select>
+    </label>
+    <label v-if="node.type === 'input' || node.type === 'basic'">To Handle
+      <select :value="node.toPosition || defNode.toPosition" @input="$emit('update', 'toPosition', $event.target.value)">
+        <option value="top">Top</option>
+        <option value="right">Right</option>
+        <option value="bottom">Bottom</option>
+        <option value="left">Left</option>
+      </select>
+    </label>
+    <div class="vue-flow__delete-area">
+      <button v-if="!confirmDelete" class="vue-flow__delete-btn" @click="confirmDelete = true">刪除節點</button>
+      <template v-else>
+        <span class="vue-flow__delete-warn">確定刪除？相關連線也會一併刪除</span>
+        <div class="vue-flow__delete-confirm-row">
+          <button class="vue-flow__delete-btn vue-flow__delete-btn--confirm" @click="$emit('delete')">確認刪除</button>
+          <button class="vue-flow__delete-btn vue-flow__delete-btn--cancel" @click="confirmDelete = false">取消</button>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import WColorSelect from 'w-component-vue/src/components/WColorSelect.vue'
+
+export default {
+    components: { WColorSelect },
+    props: {
+        node: { type: Object, required: true },
+        defNode: { type: Object, required: true },
+        textFontSize: { type: String, default: '' },
+    },
+    data() {
+        return { confirmDelete: false }
+    },
+    computed: {
+        formStyle() {
+            let s = {}
+            if (this.textFontSize) s.fontSize = this.textFontSize
+            return s
+        },
+    },
+    methods: {
+        onFontSizeInput(val) {
+            let n = Number(val)
+            let d = this.defNode
+            if (!val || isNaN(n) || n < d.fontSizeMin) return
+            if (n > d.fontSizeMax) n = d.fontSizeMax
+            this.$emit('update', 'fontSize', n)
+        },
+        onEdgeWidthInput(val) {
+            let n = Number(val)
+            if (!val || isNaN(n) || n < 1) return
+            if (n > 24) n = 24
+            this.$emit('update', 'edgeWidth', n)
+        },
+    },
+}
+</script>
+
+<style>
+.vue-flow__settings-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 180px;
+}
+.vue-flow__settings-form label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+.vue-flow__settings-form select,
+.vue-flow__settings-form input[type="number"],
+.vue-flow__settings-form input[type="text"] {
+  width: 100px;
+  font-size: 12px;
+  padding: 1px 4px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+}
+.vue-flow__settings-form input[type="color"] {
+  width: 32px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.vue-flow__delete-area {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid #eee;
+}
+.vue-flow__delete-warn {
+  display: block;
+  font-size: 11px;
+  color: #c00;
+  margin-bottom: 4px;
+}
+.vue-flow__delete-confirm-row {
+  display: flex;
+  gap: 6px;
+}
+.vue-flow__delete-btn {
+  padding: 3px 10px;
+  font-size: 11px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background: #fff;
+  cursor: pointer;
+}
+.vue-flow__delete-btn:hover {
+  background: #f5f5f5;
+}
+.vue-flow__delete-btn--confirm {
+  color: #fff;
+  background: #dc2626;
+  border-color: #dc2626;
+}
+.vue-flow__delete-btn--confirm:hover {
+  background: #b91c1c;
+}
+.vue-flow__delete-btn--cancel {
+  color: #666;
+}
+</style>

package/src/js/defaults.mjs

@@ -0,0 +1,33 @@
+/**
+ * Default values for node and connection properties.
+ */
+
+export const NODE_DEFAULTS = {
+    type: 'basic',
+    shape: 'rectangle',
+    width: 100,
+    height: 40,
+    fontSize: 12,
+    fontSizeMin: 1,
+    fontSizeMax: 72,
+    fontColor: '#333333',
+    faceColor: '#ffffff',
+    edgeColor: '#bbbbbb',
+    edgeWidth: 1,
+    toPosition: 'bottom',
+    fromPosition: 'top',
+    popupDirection: 'right',
+}
+
+export const CONN_DEFAULTS = {
+    type: 'bezier',
+    fontSize: 10,
+    fontSizeMin: 1,
+    fontSizeMax: 72,
+    fontColor: '#333333',
+    edgeColor: '#b1b1b7',
+    edgeWidth: 1,
+    markerEnd: '',
+    animated: false,
+    defOffset: 24,
+}

package/src/js/edge-path.mjs

@@ -0,0 +1,165 @@
+/**
+ * Edge path generators for different edge types.
+ */
+
+import { calculateStepPoints, clearStepCache } from './step-routing.mjs'
+
+export { clearStepCache }
+
+/**
+ * Calculate the control point offset for bezier curves based on handle position.
+ */
+function getControlOffset(distance, position) {
+    switch (position) {
+    case 'top': return { x: 0, y: -distance }
+    case 'bottom': return { x: 0, y: distance }
+    case 'left': return { x: -distance, y: 0 }
+    case 'right': return { x: distance, y: 0 }
+    default: return { x: 0, y: 0 }
+    }
+}
+
+/**
+ * Get bezier curve path.
+ * @returns {{ path: string, labelX: number, labelY: number }}
+ */
+export function getBezierPath({
+    sourceX, sourceY, sourcePosition = 'bottom',
+    targetX, targetY, targetPosition = 'top',
+    curvature = 0.25,
+}) {
+    const dist = Math.sqrt(Math.pow(targetX - sourceX, 2) + Math.pow(targetY - sourceY, 2))
+    const offset = Math.max(dist * curvature, 25)
+
+    const s = getControlOffset(offset, sourcePosition)
+    const t = getControlOffset(offset, targetPosition)
+
+    const controlX1 = sourceX + s.x
+    const controlY1 = sourceY + s.y
+    const controlX2 = targetX + t.x
+    const controlY2 = targetY + t.y
+
+    const path = `M ${sourceX},${sourceY} C ${controlX1},${controlY1} ${controlX2},${controlY2} ${targetX},${targetY}`
+
+    const labelX = (sourceX + controlX1 + controlX2 + targetX) / 4
+    const labelY = (sourceY + controlY1 + controlY2 + targetY) / 4
+
+    return { path, labelX, labelY }
+}
+
+/**
+ * Get straight line path.
+ * @returns {{ path: string, labelX: number, labelY: number }}
+ */
+export function getStraightPath({ sourceX, sourceY, targetX, targetY }) {
+    const path = `M ${sourceX},${sourceY} L ${targetX},${targetY}`
+    const labelX = (sourceX + targetX) / 2
+    const labelY = (sourceY + targetY) / 2
+    return { path, labelX, labelY }
+}
+
+/**
+ * Get step (right-angle) path.
+ * @returns {{ path: string, labelX: number, labelY: number }}
+ */
+export function getStepPath({
+    sourceX, sourceY, sourcePosition = 'bottom',
+    targetX, targetY, targetPosition = 'top',
+    offset = 20,
+    allNodes, nodeInternals, connFromId, connToId,
+}) {
+    const points = calculateStepPoints(
+        sourceX, sourceY, sourcePosition,
+        targetX, targetY, targetPosition,
+        offset, allNodes, nodeInternals, connFromId, connToId
+    )
+    const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x},${p.y}`).join(' ')
+    const label = labelAtHalfLength(points)
+    return { path, labelX: label.x, labelY: label.y }
+}
+
+/**
+ * Get smooth step (rounded right-angle) path.
+ * @returns {{ path: string, labelX: number, labelY: number }}
+ */
+export function getSmoothStepPath({
+    sourceX, sourceY, sourcePosition = 'bottom',
+    targetX, targetY, targetPosition = 'top',
+    borderRadius = 5,
+    offset = 20,
+    allNodes, nodeInternals, connFromId, connToId,
+}) {
+    const points = calculateStepPoints(
+        sourceX, sourceY, sourcePosition,
+        targetX, targetY, targetPosition,
+        offset, allNodes, nodeInternals, connFromId, connToId
+    )
+
+    if (points.length <= 2) {
+        const path = `M ${points[0].x},${points[0].y} L ${points[1].x},${points[1].y}`
+        const labelX = (points[0].x + points[1].x) / 2
+        const labelY = (points[0].y + points[1].y) / 2
+        return { path, labelX, labelY }
+    }
+
+    let path = `M ${points[0].x},${points[0].y}`
+
+    for (let i = 1; i < points.length - 1; i++) {
+        const prev = points[i - 1]
+        const curr = points[i]
+        const next = points[i + 1]
+
+        const dx1 = curr.x - prev.x
+        const dy1 = curr.y - prev.y
+        const dx2 = next.x - curr.x
+        const dy2 = next.y - curr.y
+
+        const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1)
+        const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2)
+
+        if (len1 === 0 || len2 === 0) {
+            // Zero-length segment — skip rounding, just draw straight line
+            path += ` L ${curr.x},${curr.y}`
+            continue
+        }
+
+        const r = Math.min(borderRadius, len1 / 2, len2 / 2)
+
+        const beforeX = curr.x - (dx1 / len1) * r
+        const beforeY = curr.y - (dy1 / len1) * r
+        const afterX = curr.x + (dx2 / len2) * r
+        const afterY = curr.y + (dy2 / len2) * r
+
+        path += ` L ${beforeX},${beforeY} Q ${curr.x},${curr.y} ${afterX},${afterY}`
+    }
+
+    path += ` L ${points[points.length - 1].x},${points[points.length - 1].y}`
+
+    const label = labelAtHalfLength(points)
+    return { path, labelX: label.x, labelY: label.y }
+}
+
+/**
+ * Find the point at exactly half the total Manhattan path length.
+ */
+function labelAtHalfLength(pts) {
+    if (pts.length < 2) return { x: pts[0].x, y: pts[0].y }
+    let totalLen = 0
+    for (let i = 0; i < pts.length - 1; i++) {
+        totalLen += Math.abs(pts[i + 1].x - pts[i].x) + Math.abs(pts[i + 1].y - pts[i].y)
+    }
+    let half = totalLen / 2
+    let acc = 0
+    for (let i = 0; i < pts.length - 1; i++) {
+        let segLen = Math.abs(pts[i + 1].x - pts[i].x) + Math.abs(pts[i + 1].y - pts[i].y)
+        if (acc + segLen >= half) {
+            let ratio = segLen > 0 ? (half - acc) / segLen : 0
+            return {
+                x: pts[i].x + (pts[i + 1].x - pts[i].x) * ratio,
+                y: pts[i].y + (pts[i + 1].y - pts[i].y) * ratio,
+            }
+        }
+        acc += segLen
+    }
+    return { x: pts[pts.length - 1].x, y: pts[pts.length - 1].y }
+}

package/src/js/geometry.mjs

@@ -0,0 +1,226 @@
+/**
+ * Calculate the absolute position of a handle on the canvas.
+ */
+export function getHandlePosition(node, handlePosition, nodeInternals, handleType) {
+    const internals = nodeInternals || {}
+    const w = (internals.width) || node.width || 150
+    const h = (internals.height) || node.height || 40
+    const x = node.position.x
+    const y = node.position.y
+    const isDiamond = node.shape === 'diamond'
+    const isEllipse = node.shape === 'ellipse'
+    const ns = node.shape
+    const isTriangle = ns === 'triangle' || ns === 'triangle-right' || ns === 'triangle-down' || ns === 'triangle-left'
+
+    // Check if this is a default node with source and target on the same side
+    const sameSide = node.type === 'basic' &&
+    (node.toPosition || 'bottom') === (node.fromPosition || 'top')
+    let ratio = 0.5
+    if (sameSide && handleType === 'target') ratio = 0.33
+    if (sameSide && handleType === 'source') ratio = 0.67
+
+    // Diamond same-side: position along diamond edges
+    if (isDiamond && sameSide) {
+        return getDiamondEdgePoint(x, y, w, h, handlePosition, ratio)
+    }
+
+    // Ellipse: position on the ellipse border
+    if (isEllipse) {
+        return getEllipseEdgePoint(x, y, w, h, handlePosition, ratio)
+    }
+
+    // Triangle: position on the triangle edges
+    if (isTriangle) {
+        return getTriangleEdgePoint(x, y, w, h, handlePosition, ratio, ns)
+    }
+
+    switch (handlePosition) {
+    case 'top': return { x: x + w * ratio, y }
+    case 'bottom': return { x: x + w * ratio, y: y + h }
+    case 'left': return { x, y: y + h * ratio }
+    case 'right': return { x: x + w, y: y + h * ratio }
+    default: return { x: x + w / 2, y: y + h }
+    }
+}
+
+/**
+ * Get a point on the diamond edge for same-side handles.
+ * Each "side" of the diamond is split into two edges meeting at the vertex.
+ * ratio < 0.5: on the first edge, ratio >= 0.5: on the second edge.
+ */
+function getDiamondEdgePoint(x, y, w, h, side, ratio) {
+    let halfW = w / 2
+    let halfH = h / 2
+
+    switch (side) {
+    case 'top':
+        if (ratio <= 0.5) {
+            let t = ratio * 2
+            return { x: x + t * halfW, y: y + halfH - t * halfH }
+        }
+        else {
+            let t = (ratio - 0.5) * 2
+            return { x: x + halfW + t * halfW, y: y + t * halfH }
+        }
+    case 'bottom':
+        if (ratio <= 0.5) {
+            let t = ratio * 2
+            return { x: x + t * halfW, y: y + halfH + t * halfH }
+        }
+        else {
+            let t = (ratio - 0.5) * 2
+            return { x: x + halfW + t * halfW, y: y + h - t * halfH }
+        }
+    case 'left':
+        if (ratio <= 0.5) {
+            let t = ratio * 2
+            return { x: x + halfW - t * halfW, y: y + t * halfH }
+        }
+        else {
+            let t = (ratio - 0.5) * 2
+            return { x: x + t * halfW, y: y + halfH + t * halfH }
+        }
+    case 'right':
+        if (ratio <= 0.5) {
+            let t = ratio * 2
+            return { x: x + halfW + t * halfW, y: y + t * halfH }
+        }
+        else {
+            let t = (ratio - 0.5) * 2
+            return { x: x + w - t * halfW, y: y + halfH + t * halfH }
+        }
+    default:
+        return { x: x + halfW, y: y + h }
+    }
+}
+
+/**
+ * Get a point on the ellipse edge for handle positioning.
+ * Maps ratio (0..1) to a parametric angle based on the side.
+ */
+function getEllipseEdgePoint(x, y, w, h, side, ratio) {
+    let cx = x + w / 2
+    let cy = y + h / 2
+    let rx = w / 2
+    let ry = h / 2
+    let angle
+
+    switch (side) {
+    case 'top':
+        angle = Math.PI * (1 - ratio); break
+    case 'bottom':
+        angle = Math.PI * (ratio - 1); break
+    case 'left':
+        angle = Math.PI * (0.5 + ratio); break
+    case 'right':
+        angle = Math.PI * (0.5 - ratio); break
+    default:
+        angle = 0
+    }
+
+    return {
+        x: cx + rx * Math.cos(angle),
+        y: cy - ry * Math.sin(angle)
+    }
+}
+
+/**
+ * Get a point on the triangle edge for handle positioning.
+ * Supports 4 directions: triangle (up), triangle-right, triangle-down, triangle-left.
+ */
+function getTriangleEdgePoint(x, y, w, h, side, ratio, shape) {
+    // Get absolute vertices based on direction
+    let apex, baseA, baseB, apexSide, baseSide, edgeA, edgeB
+    if (shape === 'triangle-right') {
+        apex = { x: x + w, y: y + h / 2 }; baseA = { x, y }; baseB = { x, y: y + h }
+        apexSide = 'right'; baseSide = 'left'; edgeA = 'top'; edgeB = 'bottom'
+    }
+    else if (shape === 'triangle-down') {
+        apex = { x: x + w / 2, y: y + h }; baseA = { x, y }; baseB = { x: x + w, y }
+        apexSide = 'bottom'; baseSide = 'top'; edgeA = 'left'; edgeB = 'right'
+    }
+    else if (shape === 'triangle-left') {
+        apex = { x, y: y + h / 2 }; baseA = { x: x + w, y }; baseB = { x: x + w, y: y + h }
+        apexSide = 'left'; baseSide = 'right'; edgeA = 'top'; edgeB = 'bottom'
+    }
+    else {
+    // triangle (up)
+        apex = { x: x + w / 2, y }; baseA = { x, y: y + h }; baseB = { x: x + w, y: y + h }
+        apexSide = 'top'; baseSide = 'bottom'; edgeA = 'left'; edgeB = 'right'
+    }
+
+    if (side === apexSide) {
+        if (ratio <= 0.5) {
+            let t = ratio * 2
+            return { x: baseA.x + (apex.x - baseA.x) * t, y: baseA.y + (apex.y - baseA.y) * t }
+        }
+        else {
+            let t2 = (ratio - 0.5) * 2
+            return { x: apex.x + (baseB.x - apex.x) * t2, y: apex.y + (baseB.y - apex.y) * t2 }
+        }
+    }
+    if (side === baseSide) {
+        return { x: baseA.x + (baseB.x - baseA.x) * ratio, y: baseA.y + (baseB.y - baseA.y) * ratio }
+    }
+    if (side === edgeA) {
+        return { x: apex.x + (baseA.x - apex.x) * ratio, y: apex.y + (baseA.y - apex.y) * ratio }
+    }
+    if (side === edgeB) {
+        return { x: apex.x + (baseB.x - apex.x) * ratio, y: apex.y + (baseB.y - apex.y) * ratio }
+    }
+    return { x: x + w / 2, y: y + h / 2 }
+}
+
+/**
+ * Get all nodes that overlap with a given rectangle.
+ */
+export function getOverlappingNodes(rect, nodes, nodeInternals) {
+    return nodes.filter(node => {
+        const internals = (nodeInternals && nodeInternals[node.id]) || {}
+        const w = internals.width || node.width || 150
+        const h = internals.height || node.height || 40
+        const nodeRect = {
+            x: node.position.x,
+            y: node.position.y,
+            width: w,
+            height: h,
+        }
+        return rectsOverlap(rect, nodeRect)
+    })
+}
+
+/**
+ * Check if two rectangles overlap.
+ */
+function rectsOverlap(a, b) {
+    return (
+        a.x < b.x + b.width &&
+    a.x + a.width > b.x &&
+    a.y < b.y + b.height &&
+    a.y + a.height > b.y
+    )
+}
+
+/**
+ * Clamp a position within a coordinate extent.
+ */
+export function clampPosition(position, extent) {
+    if (!extent) return position
+    return {
+        x: Math.max(extent[0][0], Math.min(extent[1][0], position.x)),
+        y: Math.max(extent[0][1], Math.min(extent[1][1], position.y)),
+    }
+}
+
+/**
+ * Snap a position to the nearest grid point.
+ * @param {{ x: number, y: number }} position
+ * @param {number|null} gridSize - Grid cell size (single number for both axes)
+ */
+export function snapPosition(position, gridSize) {
+    if (!gridSize) return position
+    return {
+        x: Math.round(position.x / gridSize) * gridSize,
+        y: Math.round(position.y / gridSize) * gridSize,
+    }
+}