w-flow-vue 1.0.0

package/src/components/nodes/Handle.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    v-if="!locked"
+    :class="classes"
+    :style="offsetStyle"
+    :data-handle-id="id || type"
+    :data-handle-type="type"
+    :data-handle-position="position"
+    @mousedown.stop="onMouseDown"
+  />
+</template>
+
+<script>
+export default {
+    name: 'FlowHandle',
+    props: {
+        type: { type: String, default: 'source' }, // 'source' | 'target'
+        position: { type: String, default: 'bottom' }, // 'top' | 'right' | 'bottom' | 'left'
+        id: { type: String, default: null },
+        connectable: { type: Boolean, default: true },
+        locked: { type: Boolean, default: false },
+        offset: { type: String, default: null },
+        customStyle: { type: Object, default: null },
+    },
+    computed: {
+        offsetStyle() {
+            if (this.customStyle) return this.customStyle
+            if (!this.offset) return null
+            const isHorizontal = this.position === 'top' || this.position === 'bottom'
+            if (isHorizontal) return { left: this.offset, transform: 'translateX(-50%)' }
+            return { top: this.offset, transform: 'translateY(-50%)' }
+        },
+        classes() {
+            return [
+                'vue-flow__handle',
+                `vue-flow__handle--${this.position}`,
+                `vue-flow__handle--${this.type}`,
+                { 'vue-flow__handle--not-connectable': !this.connectable },
+            ]
+        },
+    },
+    methods: {
+        onMouseDown(event) {
+            if (!this.connectable) return
+            this.$emit('connect-start', {
+                event,
+                handleId: this.id || this.type,
+                handleType: this.type,
+                handlePosition: this.position,
+            })
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__handle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #555;
+  border: 1px solid #fff;
+  pointer-events: all;
+  cursor: crosshair;
+  z-index: 3;
+}
+.vue-flow__handle--top {
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.vue-flow__handle--bottom {
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.vue-flow__handle--left {
+  top: 50%;
+  left: -4px;
+  transform: translateY(-50%);
+}
+.vue-flow__handle--right {
+  top: 50%;
+  right: -4px;
+  transform: translateY(-50%);
+}
+.vue-flow__handle--not-connectable {
+  cursor: default;
+  pointer-events: none;
+}
+.vue-flow__handle:hover {
+  background: #0041d0;
+  width: 10px;
+  height: 10px;
+}
+.vue-flow__handle--top:hover { top: -5px; }
+.vue-flow__handle--bottom:hover { bottom: -5px; }
+.vue-flow__handle--left:hover { left: -5px; }
+.vue-flow__handle--right:hover { right: -5px; }
+</style>

package/src/components/nodes/InputNode.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="vue-flow__node-input">
+    <div class="vue-flow__node-label">{{ node.name }}</div>
+    <Handle
+      type="source"
+      :position="node.toPosition || dn.toPosition || 'bottom'"
+      :connectable="connectable"
+      :locked="locked"
+      @connect-start="$emit('connect-start', $event)"
+    />
+  </div>
+</template>
+
+<script>
+import Handle from './Handle.vue'
+
+export default {
+    name: 'InputNode',
+    components: { Handle },
+    inject: { getDefNode: { default: () => () => ({}) } },
+    props: {
+        node: { type: Object, required: true },
+        connectable: { type: Boolean, default: true },
+        locked: { type: Boolean, default: false },
+    },
+    computed: {
+        dn() {
+            return this.getDefNode()
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__node-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 10px 20px;
+}
+</style>

package/src/components/nodes/NodeBody.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="vue-flow__node-body" :style="bodyStyle">
+    <NodeFace :node="node" :lastW="lastW" :lastH="lastH" />
+    <component
+      :is="nodeComponent"
+      :node="node"
+      :connectable="connectable"
+      :locked="locked"
+      @connect-start="$emit('connect-start', $event)"
+    />
+    <!-- Corner resize handles (4 corners only) -->
+    <transition name="vue-flow__fade">
+      <div v-if="resizable && !locked && (selected || hovered)" class="vue-flow__resize-group">
+        <div class="vue-flow__resize vue-flow__resize--top-left" @mousedown.stop="$emit('resize-start', { event: $event, edge: 'top-left' })"></div>
+        <div class="vue-flow__resize vue-flow__resize--top-right" @mousedown.stop="$emit('resize-start', { event: $event, edge: 'top-right' })"></div>
+        <div class="vue-flow__resize vue-flow__resize--bottom-left" @mousedown.stop="$emit('resize-start', { event: $event, edge: 'bottom-left' })"></div>
+        <div class="vue-flow__resize vue-flow__resize--bottom-right" @mousedown.stop="$emit('resize-start', { event: $event, edge: 'bottom-right' })"></div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import NodeFace from './NodeFace.vue'
+import DefaultNode from './DefaultNode.vue'
+import InputNode from './InputNode.vue'
+import OutputNode from './OutputNode.vue'
+
+const builtInNodes = {
+    basic: DefaultNode,
+    input: InputNode,
+    output: OutputNode,
+}
+
+export default {
+    name: 'NodeBody',
+    components: { NodeFace, DefaultNode, InputNode, OutputNode },
+    props: {
+        node: { type: Object, required: true },
+        connectable: { type: Boolean, default: true },
+        selected: { type: Boolean, default: false },
+        resizable: { type: Boolean, default: true },
+        locked: { type: Boolean, default: false },
+        hovered: { type: Boolean, default: false },
+        lastW: { type: Number, default: 0 },
+        lastH: { type: Number, default: 0 },
+    },
+    computed: {
+        nodeComponent() {
+            return builtInNodes[this.node.type || 'basic'] || DefaultNode
+        },
+        bodyStyle() {
+            const w = this.lastW || this.node.width
+            const h = this.lastH || this.node.height
+            const s = {}
+            if (w) s.width = (typeof w === 'number' ? w + 'px' : w)
+            if (h) s.height = (typeof h === 'number' ? h + 'px' : h)
+            return s
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__node-body {
+  box-sizing: border-box;
+}
+.vue-flow__resize {
+  position: absolute;
+  pointer-events: all;
+}
+.vue-flow__resize--top-left,
+.vue-flow__resize--top-right,
+.vue-flow__resize--bottom-left,
+.vue-flow__resize--bottom-right {
+  width: 10px;
+  height: 10px;
+  z-index: 1;
+  border-radius: 2px;
+  background: #fff;
+  border: 1.5px solid #bbb;
+  transition: border-color 0.15s ease;
+}
+.vue-flow__resize--top-left:hover,
+.vue-flow__resize--top-right:hover,
+.vue-flow__resize--bottom-left:hover,
+.vue-flow__resize--bottom-right:hover {
+  border-color: #0041d0;
+  background: #e8f0fe;
+}
+.vue-flow__resize--top-left { top: -5px; left: -5px; cursor: nwse-resize; }
+.vue-flow__resize--top-right { top: -5px; right: -5px; cursor: nesw-resize; }
+.vue-flow__resize--bottom-left { bottom: -5px; left: -5px; cursor: nesw-resize; }
+.vue-flow__resize--bottom-right { bottom: -5px; right: -5px; cursor: nwse-resize; }
+.vue-flow__fade-enter-active,
+.vue-flow__fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.vue-flow__fade-enter,
+.vue-flow__fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/nodes/NodeFace.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="vue-flow__node-face">
+    <!-- Diamond shape SVG -->
+    <svg
+      v-if="isDiamond"
+      class="vue-flow__shape-svg"
+      :viewBox="diamondViewBox"
+      preserveAspectRatio="none"
+    >
+      <polygon
+        :points="diamondPoints"
+        :fill="node.faceColor || dn.faceColor || '#fff'"
+        :fill-opacity="1"
+        :stroke="node.edgeColor || dn.edgeColor || '#bbb'"
+        :stroke-opacity="1"
+        :stroke-width="node.edgeWidth !== undefined ? node.edgeWidth : (dn.edgeWidth !== undefined ? dn.edgeWidth : 1)"
+      />
+    </svg>
+    <!-- Ellipse shape SVG -->
+    <svg
+      v-if="isEllipse"
+      class="vue-flow__shape-svg"
+      :viewBox="svgViewBox"
+      preserveAspectRatio="none"
+    >
+      <ellipse
+        :cx="nodeW / 2"
+        :cy="nodeH / 2"
+        :rx="nodeW / 2"
+        :ry="nodeH / 2"
+        :fill="node.faceColor || dn.faceColor || '#fff'"
+        :fill-opacity="1"
+        :stroke="node.edgeColor || dn.edgeColor || '#bbb'"
+        :stroke-opacity="1"
+        :stroke-width="node.edgeWidth !== undefined ? node.edgeWidth : (dn.edgeWidth !== undefined ? dn.edgeWidth : 1)"
+      />
+    </svg>
+    <!-- Triangle shape SVG -->
+    <svg
+      v-if="isTriangle"
+      class="vue-flow__shape-svg"
+      :viewBox="svgViewBox"
+      preserveAspectRatio="none"
+    >
+      <polygon
+        :points="trianglePoints"
+        :fill="node.faceColor || dn.faceColor || '#fff'"
+        :fill-opacity="1"
+        :stroke="node.edgeColor || dn.edgeColor || '#bbb'"
+        :stroke-opacity="1"
+        :stroke-width="node.edgeWidth !== undefined ? node.edgeWidth : (dn.edgeWidth !== undefined ? dn.edgeWidth : 1)"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'NodeFace',
+    inject: { getDefNode: { default: () => () => ({}) } },
+    props: {
+        node: { type: Object, required: true },
+        lastW: { type: Number, default: 0 },
+        lastH: { type: Number, default: 0 },
+    },
+    computed: {
+        dn() {
+            return this.getDefNode()
+        },
+        nodeW() {
+            return this.node.width || this.lastW || 150
+        },
+        nodeH() {
+            return this.node.height || this.lastH || 40
+        },
+        isDiamond() {
+            return this.node.shape === 'diamond'
+        },
+        isEllipse() {
+            return this.node.shape === 'ellipse'
+        },
+        isTriangle() {
+            let s = this.node.shape
+            return s === 'triangle' || s === 'triangle-right' || s === 'triangle-down' || s === 'triangle-left'
+        },
+        diamondPoints() {
+            if (!this.isDiamond) return ''
+            return (this.nodeW / 2) + ',0 ' + this.nodeW + ',' + (this.nodeH / 2) + ' ' + (this.nodeW / 2) + ',' + this.nodeH + ' 0,' + (this.nodeH / 2)
+        },
+        trianglePoints() {
+            if (!this.isTriangle) return ''
+            let w = this.nodeW
+            let h = this.nodeH
+            let s = this.node.shape
+            if (s === 'triangle-right') return '0,0 ' + w + ',' + (h / 2) + ' 0,' + h
+            if (s === 'triangle-down') return '0,0 ' + w + ',0 ' + (w / 2) + ',' + h
+            if (s === 'triangle-left') return w + ',0 0,' + (h / 2) + ' ' + w + ',' + h
+            return (w / 2) + ',0 0,' + h + ' ' + w + ',' + h
+        },
+        svgViewBox() {
+            return '0 0 ' + this.nodeW + ' ' + this.nodeH
+        },
+        diamondViewBox() {
+            if (!this.isDiamond) return '0 0 150 40'
+            return this.svgViewBox
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__node-face {
+  pointer-events: none;
+}
+.vue-flow__shape-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+}
+.vue-flow__shape-svg polygon,
+.vue-flow__shape-svg ellipse {
+  transition: filter 0.3s ease;
+}
+</style>

package/src/components/nodes/NodeRenderer.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="vue-flow__nodes">
+    <NodeWrapper
+      v-for="node in visibleNodes"
+      :key="node.id"
+      :node="node"
+      :selected="isSelected(node.id)"
+      :draggable="isDraggable(node)"
+      :connectable="isConnectable(node)"
+      :resizable="isResizable(node)"
+      :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"
+      :snap-grid-size="snapGridSize"
+      @drag-start="$emit('drag-start', $event)"
+      @node-click="$emit('node-click', $event)"
+      @node-double-click="$emit('node-double-click', $event)"
+      @node-context-menu="$emit('node-context-menu', $event)"
+      @node-settings-click="$emit('node-settings-click', $event)"
+      @node-settings-update="$emit('node-settings-update', $event)"
+      @node-settings-delete="$emit('node-settings-delete', $event)"
+      @node-mouseenter="$emit('node-mouseenter', $event)"
+      @node-mouseleave="$emit('node-mouseleave', $event)"
+      @connect-start="$emit('connect-start', $event)"
+      @dimensions="$emit('dimensions', $event)"
+      @node-resize="$emit('node-resize', $event)"
+      @node-resize-end="$emit('node-resize-end', $event)"
+    >
+      <template v-if="$scopedSlots['node-popup']" v-slot:node-popup="scope">
+        <slot name="node-popup" v-bind="scope" />
+      </template>
+    </NodeWrapper>
+  </div>
+</template>
+
+<script>
+import NodeWrapper from './NodeWrapper.vue'
+
+export default {
+    name: 'NodeRenderer',
+    components: { NodeWrapper },
+    props: {
+        nodes: { type: Array, default: () => [] },
+        selectedNodeIds: { type: Array, default: () => [] },
+        nodesDraggable: { type: Boolean, default: true },
+        nodesConnectable: { type: Boolean, default: true },
+        nodesResizable: { 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' },
+        snapGridSize: { type: Number, default: null },
+    },
+    computed: {
+        visibleNodes() {
+            return this.nodes.filter(n => !n.hidden)
+        },
+    },
+    methods: {
+        isSelected(id) {
+            return this.selectedNodeIds.includes(id)
+        },
+        isDraggable(node) {
+            return node.draggable !== undefined ? node.draggable : this.nodesDraggable
+        },
+        isConnectable(node) {
+            return node.connectable !== undefined ? node.connectable : this.nodesConnectable
+        },
+        isResizable(node) {
+            return node.resizable !== undefined ? node.resizable : this.nodesResizable
+        },
+    },
+}
+</script>
+
+<style scoped>
+.vue-flow__nodes {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+</style>