|
@@ -1,4 +1,5 @@
|
|
|
<template>
|
|
|
+
|
|
|
<g
|
|
|
class="flow-node"
|
|
|
:class="{
|
|
@@ -8,6 +9,7 @@
|
|
|
@mousedown.stop.prevent="$emit('nodePointerDown',$event)"
|
|
|
@dblclick="$emit('nodeDoubleClick',$event)"
|
|
|
>
|
|
|
+
|
|
|
<rect
|
|
|
class="flow-node__selection"
|
|
|
stroke-dasharray="7,3"
|
|
@@ -16,12 +18,47 @@
|
|
|
:width="bodyProps.width+8"
|
|
|
:height="bodyProps.height+8"
|
|
|
/>
|
|
|
+
|
|
|
+ <!-- <circle
|
|
|
+ :r="bodyProps.r+4"
|
|
|
+ stroke-dasharray="7,3"
|
|
|
+ class="flow-node__selection"
|
|
|
+ />-->
|
|
|
+ <svg
|
|
|
+ v-if="nodeStyle.shape == 'thing'"
|
|
|
+ ref="body"
|
|
|
+ viewBox="0 0 100 100"
|
|
|
+ preserveAspectRatio="XMinYMin"
|
|
|
+ class="flow-node__body"
|
|
|
+ :class="{'flow-node__body--dragging':dragging}"
|
|
|
+ v-bind="bodyProps"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ d="
|
|
|
+ M 0 0
|
|
|
+ l 90 0
|
|
|
+ l 10 50
|
|
|
+ l -10 50
|
|
|
+ l -90 0
|
|
|
+ c 10 -20, 10 -80, 0 -100
|
|
|
+ Z
|
|
|
+ "
|
|
|
+ /></svg>
|
|
|
+ <circle
|
|
|
+ v-else-if="nodeStyle.shape == 'circle'"
|
|
|
+ ref="body"
|
|
|
+ class="flow-node__body"
|
|
|
+ :class="{'flow-node__body--dragging':dragging}"
|
|
|
+ v-bind="bodyProps"
|
|
|
+ />
|
|
|
<rect
|
|
|
+ v-else
|
|
|
ref="body"
|
|
|
class="flow-node__body"
|
|
|
:class="{'flow-node__body--dragging':dragging}"
|
|
|
v-bind="bodyProps"
|
|
|
/>
|
|
|
+
|
|
|
<text
|
|
|
ref="label"
|
|
|
class="flow-node__label"
|
|
@@ -71,10 +108,19 @@
|
|
|
</text>
|
|
|
|
|
|
</g>
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
+import utils from '@/utils/utils'
|
|
|
+const shapeOpts = {
|
|
|
+ 'circle': {
|
|
|
+ textWrap: 'any'
|
|
|
+ },
|
|
|
+ default: {
|
|
|
+ textWrap: 'white-space'
|
|
|
+ }
|
|
|
+}
|
|
|
export default {
|
|
|
name: 'FlowNode',
|
|
|
props: {
|
|
@@ -97,24 +143,9 @@ export default {
|
|
|
},
|
|
|
computed: {
|
|
|
labelWrap () {
|
|
|
- var ret = []
|
|
|
- const parts = this.label.split(' ', -1)
|
|
|
let wrapThreshold = 10 // initial wrap threshold
|
|
|
- parts.forEach(n => {
|
|
|
- wrapThreshold = Math.max(n.length + 1, wrapThreshold)
|
|
|
- })
|
|
|
- ret.push(parts[0])
|
|
|
- for (let i = 1; i < parts.length; i++) {
|
|
|
- let ri = ret.length - 1 // last
|
|
|
- if (ret[ret.length - 1].length + parts[i].length > wrapThreshold) {
|
|
|
- ret.push(parts[i])
|
|
|
- } else {
|
|
|
- // we can add to same
|
|
|
- ret[ri] += ' ' + parts[i]
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return ret
|
|
|
+ const opt = shapeOpts[this.nodeStyle.shape] || shapeOpts.default
|
|
|
+ return utils.textWrap(this.label, wrapThreshold, opt.textWrap)
|
|
|
},
|
|
|
labelProps () {
|
|
|
return {
|
|
@@ -126,23 +157,22 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
bodyProps () {
|
|
|
- let width = this.labelRect.width + 30
|
|
|
+ let width = this.labelRect.width + 46
|
|
|
let height = Math.max(this.labelRect.height + 20, 60)
|
|
|
- if (this.nodeStyle.type === 'circle') {
|
|
|
- height = Math.max(width, height)
|
|
|
- width = height
|
|
|
+ if (this.nodeStyle.shape === 'circle') {
|
|
|
+ width = height = Math.max(width, height)
|
|
|
}
|
|
|
+
|
|
|
const rect = {
|
|
|
x: -width / 2,
|
|
|
y: -height / 2,
|
|
|
width: width,
|
|
|
height: height,
|
|
|
- stroke: this.nodeStyle.color,
|
|
|
- fill: this.nodeStyle.color
|
|
|
+ stroke: this.nodeStyle.color || '#777',
|
|
|
+ fill: this.nodeStyle.color || '#777'
|
|
|
}
|
|
|
- if (this.nodeStyle && this.nodeStyle.type === 'circle') {
|
|
|
- rect.rx = width
|
|
|
- rect.ry = width
|
|
|
+ if (this.nodeStyle.shape === 'circle') {
|
|
|
+ rect.r = Math.max(width / 2, height / 2)
|
|
|
}
|
|
|
return rect
|
|
|
},
|