w-flow-vue 1.0.0

package/src/components/canvas/BackgroundLayer.vue

@@ -0,0 +1,78 @@
+<template>
+  <svg class="vue-flow__background">
+    <pattern
+      :id="patternId"
+      :x="transformedX"
+      :y="transformedY"
+      :width="scaledGap"
+      :height="scaledGap"
+      patternUnits="userSpaceOnUse"
+    >
+      <template v-if="variant === 'dots'">
+        <circle
+          :cx="scaledSize"
+          :cy="scaledSize"
+          :r="scaledSize"
+          :fill="patternColor"
+        />
+      </template>
+      <template v-else>
+        <path
+          :d="`M ${scaledGap} 0 L 0 0 0 ${scaledGap}`"
+          fill="none"
+          :stroke="patternColor"
+          :stroke-width="scaledSize"
+        />
+      </template>
+    </pattern>
+    <rect
+      x="0" y="0"
+      width="100%" height="100%"
+      :fill="`url(#${patternId})`"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'BackgroundLayer',
+    props: {
+        variant: { type: String, default: 'dots' },
+        gap: { type: Number, default: 20 },
+        size: { type: Number, default: 1 },
+        patternColor: { type: String, default: '#81818a' },
+        bgColor: { type: String, default: null },
+        viewportX: { type: Number, default: 0 },
+        viewportY: { type: Number, default: 0 },
+        viewportZoom: { type: Number, default: 1 },
+    },
+    computed: {
+        patternId() {
+            return 'vue-flow-bg-pattern'
+        },
+        scaledGap() {
+            return this.gap * this.viewportZoom
+        },
+        scaledSize() {
+            return this.size * this.viewportZoom
+        },
+        transformedX() {
+            return (this.viewportX % this.scaledGap)
+        },
+        transformedY() {
+            return (this.viewportY % this.scaledGap)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+</style>

package/src/components/canvas/FlowCanvas.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="vue-flow"
+    ref="container"
+    @mousedown="onMouseDown"
+    @mousemove="onMouseMove"
+    @mouseup="onMouseUp"
+    @wheel.prevent="onWheel"
+    @dblclick="onDoubleClick"
+    @contextmenu="onContextMenu"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'FlowCanvas',
+    methods: {
+        onMouseDown(event) {
+            this._downPos = { x: event.clientX, y: event.clientY }
+            this.$emit('canvas-mousedown', event)
+        },
+        onMouseMove(event) {
+            this.$emit('canvas-mousemove', event)
+        },
+        onMouseUp(event) {
+            this.$emit('canvas-mouseup', event)
+            // Emit click only if mouse didn't move (distinguish from drag/pan/select)
+            if (this._downPos) {
+                let dx = event.clientX - this._downPos.x
+                let dy = event.clientY - this._downPos.y
+                if (Math.abs(dx) < 3 && Math.abs(dy) < 3) {
+                    this.$emit('canvas-click', event)
+                }
+                this._downPos = null
+            }
+        },
+        onWheel(event) {
+            this.$emit('canvas-wheel', event)
+        },
+        onDoubleClick(event) {
+            this.$emit('canvas-dblclick', event)
+        },
+        onContextMenu(event) {
+            this.$emit('canvas-contextmenu', event)
+        },
+        getContainerRect() {
+            return this.$refs.container ? this.$refs.container.getBoundingClientRect() : null
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+</style>

package/src/components/canvas/SelectionBox.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    v-if="box"
+    class="vue-flow__selection-box"
+    :style="boxStyle"
+  />
+</template>
+
+<script>
+export default {
+    name: 'SelectionBox',
+    props: {
+        box: { type: Object, default: null }, // { x, y, width, height }
+    },
+    computed: {
+        boxStyle() {
+            if (!this.box) return {}
+            return {
+                left: `${this.box.x}px`,
+                top: `${this.box.y}px`,
+                width: `${this.box.width}px`,
+                height: `${this.box.height}px`,
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__selection-box {
+  position: absolute;
+  background: rgba(0, 65, 208, 0.08);
+  border: 1px solid rgba(0, 65, 208, 0.4);
+  pointer-events: none;
+}
+</style>

package/src/components/canvas/ViewportTransform.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="vue-flow__viewport" :style="transformStyle">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'ViewportTransform',
+    props: {
+        x: { type: Number, default: 0 },
+        y: { type: Number, default: 0 },
+        zoom: { type: Number, default: 1 },
+    },
+    computed: {
+        transformStyle() {
+            return {
+                transform: `translate(${this.x}px, ${this.y}px) scale(${this.zoom})`,
+                transformOrigin: '0 0',
+            }
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__viewport {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform-origin: 0 0;
+}
+</style>

package/src/components/edges/ConnectionLine.vue

@@ -0,0 +1,65 @@
+<template>
+  <svg v-if="active" class="vue-flow__connection-line">
+    <path class="vue-flow__connection-path" :d="pathD" :style="computedLineStyle" />
+  </svg>
+</template>
+
+<script>
+import { getBezierPath, getStraightPath, getStepPath, getSmoothStepPath } from '../../js/edge-path'
+
+const pathFunctions = {
+    bezier: getBezierPath,
+    straight: getStraightPath,
+    step: getStepPath,
+    smoothstep: getSmoothStepPath,
+}
+
+export default {
+    name: 'ConnectionLine',
+    props: {
+        active: { type: Boolean, default: false },
+        sourceX: { type: Number, default: 0 },
+        sourceY: { type: Number, default: 0 },
+        sourcePosition: { type: String, default: 'bottom' },
+        targetX: { type: Number, default: 0 },
+        targetY: { type: Number, default: 0 },
+        type: { type: String, default: 'bezier' },
+        lineStyle: { type: Object, default: null },
+    },
+    computed: {
+        pathD() {
+            const fn = pathFunctions[this.type] || pathFunctions.bezier
+            const result = fn({
+                sourceX: this.sourceX,
+                sourceY: this.sourceY,
+                sourcePosition: this.sourcePosition,
+                targetX: this.targetX,
+                targetY: this.targetY,
+                targetPosition: 'top',
+            })
+            return result.path
+        },
+        computedLineStyle() {
+            return this.lineStyle || {}
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__connection-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+.vue-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+  stroke-dasharray: 5 5;
+  fill: none;
+}
+</style>

package/src/components/edges/EdgeMarkerDefs.vue

@@ -0,0 +1,76 @@
+<template>
+  <defs>
+    <marker
+      v-for="marker in markers"
+      :key="marker.id"
+      :id="marker.id"
+      markerWidth="12.5"
+      markerHeight="12.5"
+      :viewBox="marker.viewBox"
+      refX="10"
+      refY="5"
+      orient="auto-start-reverse"
+      markerUnits="strokeWidth"
+    >
+      <path
+        :d="marker.path"
+        :fill="marker.fill"
+        :stroke="marker.stroke"
+        stroke-width="1"
+      />
+    </marker>
+  </defs>
+</template>
+
+<script>
+export default {
+    name: 'EdgeMarkerDefs',
+    props: {
+        conns: { type: Array, default: () => [] },
+    },
+    computed: {
+        markers() {
+            const set = new Map()
+            this.conns.forEach(conn => {
+                this.collectMarker(conn.markerStart, set)
+                this.collectMarker(conn.markerEnd, set)
+            })
+            return Array.from(set.values())
+        },
+    },
+    methods: {
+        collectMarker(marker, set) {
+            if (!marker) return
+            const config = typeof marker === 'string' ? { type: marker } : marker
+            const color = config.color || '#b1b1b7'
+            const id = this.getMarkerId(config)
+            if (set.has(id)) return
+
+            if (config.type === 'arrowclosed') {
+                set.set(id, {
+                    id,
+                    viewBox: '0 0 12.5 12.5',
+                    path: 'M 0 0 L 10 5 L 0 10 z',
+                    fill: color,
+                    stroke: color,
+                })
+            }
+            else {
+                // 'arrow' - open
+                set.set(id, {
+                    id,
+                    viewBox: '0 0 12.5 12.5',
+                    path: 'M 0 0 L 10 5 L 0 10',
+                    fill: 'none',
+                    stroke: color,
+                })
+            }
+        },
+        getMarkerId(config) {
+            const type = typeof config === 'string' ? config : config.type
+            const color = (typeof config === 'object' && config.color) || '#b1b1b7'
+            return `vue-flow__${type}_${color.replace('#', '')}`
+        },
+    },
+}
+</script>

package/src/components/edges/EdgeRenderer.vue

@@ -0,0 +1,120 @@
+<template>
+  <svg class="vue-flow__edges">
+    <EdgeMarkerDefs :conns="conns" />
+    <EdgeWrapper
+      v-for="conn in visibleConns"
+      :key="conn.id"
+      :conn="conn"
+      :source-x="getFromPos(conn).x"
+      :source-y="getFromPos(conn).y"
+      :source-position="getFromHandlePosition(conn)"
+      :target-x="getToPos(conn).x"
+      :target-y="getToPos(conn).y"
+      :target-position="getToHandlePosition(conn)"
+      :selected="isSelected(conn.id)"
+      :all-nodes="nodes"
+      :node-internals="nodeInternals"
+      :interactive="interactive"
+      :locked="locked"
+      :settings-popup-background-color="settingsPopupBackgroundColor"
+      :settings-popup-text-color="settingsPopupTextColor"
+      :settings-popup-text-font-size="settingsPopupTextFontSize"
+      :infor-popup-background-color="inforPopupBackgroundColor"
+      :infor-popup-title-text-color="inforPopupTitleTextColor"
+      :infor-popup-title-text-font-size="inforPopupTitleTextFontSize"
+      :infor-popup-description-text-color="inforPopupDescriptionTextColor"
+      :infor-popup-description-text-font-size="inforPopupDescriptionTextFontSize"
+      @conn-click="$emit('conn-click', $event)"
+      @conn-double-click="$emit('conn-double-click', $event)"
+      @conn-context-menu="$emit('conn-context-menu', $event)"
+      @conn-mouseenter="$emit('conn-mouseenter', $event)"
+      @conn-mouseleave="$emit('conn-mouseleave', $event)"
+      @conn-settings-click="$emit('conn-settings-click', $event)"
+      @conn-settings-update="$emit('conn-settings-update', $event)"
+      @conn-settings-delete="$emit('conn-settings-delete', $event)"
+    >
+      <template v-if="$scopedSlots['conn-popup']" v-slot:conn-popup="scope">
+        <slot name="conn-popup" v-bind="scope" />
+      </template>
+    </EdgeWrapper>
+  </svg>
+</template>
+
+<script>
+import EdgeWrapper from './EdgeWrapper.vue'
+import EdgeMarkerDefs from './EdgeMarkerDefs.vue'
+import { getHandlePosition } from '../../js/geometry'
+
+export default {
+    name: 'EdgeRenderer', // lock support
+    components: { EdgeWrapper, EdgeMarkerDefs },
+    props: {
+        conns: { type: Array, default: () => [] },
+        nodes: { type: Array, default: () => [] },
+        nodeInternals: { type: Object, default: () => ({}) },
+        selectedConnIds: { type: Array, default: () => [] },
+        interactive: { type: Boolean, default: true },
+        locked: { type: Boolean, default: false },
+        settingsPopupBackgroundColor: { type: String, default: '#fff' },
+        settingsPopupTextColor: { type: String, default: '#333' },
+        settingsPopupTextFontSize: { type: String, default: '12px' },
+        inforPopupBackgroundColor: { type: String, default: '#fff' },
+        inforPopupTitleTextColor: { type: String, default: '#333' },
+        inforPopupTitleTextFontSize: { type: String, default: '12px' },
+        inforPopupDescriptionTextColor: { type: String, default: '#888' },
+        inforPopupDescriptionTextFontSize: { type: String, default: '10px' },
+    },
+    computed: {
+        visibleConns() {
+            const visibleNodeIds = new Set(this.nodes.filter(n => !n.hidden).map(n => n.id))
+            return this.conns.filter(
+                e => !e.hidden && visibleNodeIds.has(e.from) && visibleNodeIds.has(e.to)
+            )
+        },
+        nodeMap() {
+            const map = {}
+            this.nodes.forEach(n => {
+                map[n.id] = n
+            })
+            return map
+        },
+    },
+    methods: {
+        getFromPos(conn) {
+            const node = this.nodeMap[conn.from]
+            if (!node) return { x: 0, y: 0 }
+            const pos = node.toPosition || 'bottom'
+            return getHandlePosition(node, pos, this.nodeInternals[node.id] || {}, 'source')
+        },
+        getToPos(conn) {
+            const node = this.nodeMap[conn.to]
+            if (!node) return { x: 0, y: 0 }
+            const pos = node.fromPosition || 'top'
+            return getHandlePosition(node, pos, this.nodeInternals[node.id] || {}, 'target')
+        },
+        getFromHandlePosition(conn) {
+            const node = this.nodeMap[conn.from]
+            return (node && node.toPosition) || 'bottom'
+        },
+        getToHandlePosition(conn) {
+            const node = this.nodeMap[conn.to]
+            return (node && node.fromPosition) || 'top'
+        },
+        isSelected(id) {
+            return this.selectedConnIds.includes(id)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+</style>