110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<svg class="node-line">
|
|
<polyline :points="points.linePoints" class="line" ></polyline>
|
|
<text class="add-icon" @click="addNode(node)" :x="points.iconPoint.x" :y="points.iconPoint.y" font-family="Arial" font-size="25"
|
|
text-anchor="middle" dy=".3em" style="cursor: pointer;" >
|
|
⊕
|
|
</text>
|
|
</svg>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { ref, defineComponent, computed, PropType } from 'vue';
|
|
import { IActionNode, ActionNode, ActionFlow, RootAction } from '../../types/ActionTypes';
|
|
export enum Direction {
|
|
Default = "None",
|
|
Left = "LEFT",
|
|
Right = "RIGHT",
|
|
LeftNotNext = "LEFTNOTNEXT",
|
|
RightNotNext = "RIGHTNOTNEXT",
|
|
}
|
|
export default defineComponent({
|
|
name: 'NodeLine',
|
|
props: {
|
|
actionNode: {
|
|
type: Object as PropType<IActionNode>,
|
|
required: true
|
|
},
|
|
mode: {
|
|
type: String as PropType<Direction>,
|
|
required: true
|
|
},
|
|
inputPoint:{
|
|
type:String
|
|
}
|
|
},
|
|
emits: ['addNode'],
|
|
setup(props,context) {
|
|
const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
|
|
const points = computed(() => {
|
|
switch (props.mode) {
|
|
case Direction.Left:
|
|
return {
|
|
linePoints: '180, 0, 180, 40, 120, 40, 120, 60',
|
|
iconPoint: { x: 180, y: 20 }
|
|
};
|
|
case Direction.Right:
|
|
return {
|
|
linePoints: '60, 0, 60, 40, 120, 40, 120, 60',
|
|
iconPoint: { x: 60, y: 20 }
|
|
};
|
|
case Direction.LeftNotNext:
|
|
return {
|
|
linePoints: '180, 0, 180, 40',
|
|
iconPoint: { x: 180, y: 20 }
|
|
};
|
|
case Direction.RightNotNext:
|
|
return {
|
|
linePoints: '60, 0, 60, 40',
|
|
iconPoint: { x: 60, y: 30 }
|
|
};
|
|
default:
|
|
return {
|
|
linePoints: '120, 0, 120, 60',
|
|
iconPoint: { x: 120, y: 30 }
|
|
};
|
|
}
|
|
});
|
|
const addNode=(prveNode:IActionNode)=>{
|
|
context.emit('addNode',props.inputPoint);
|
|
}
|
|
|
|
return {
|
|
node: props.actionNode,
|
|
hasBranch,
|
|
points,
|
|
addNode
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
.node-line {
|
|
height: 60px;
|
|
width: 240px;
|
|
}
|
|
|
|
.line {
|
|
stroke: $blue-7;
|
|
fill: none;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.add-icon {
|
|
stroke: $blue-8;
|
|
fill: $blue-8;
|
|
font-family: Arial;
|
|
pointer-events: all;
|
|
font-size: 2.0em;
|
|
}
|
|
|
|
.add-icon:hover{
|
|
stroke: $blue-8;
|
|
fill:$blue-8;
|
|
font-weight: bold;
|
|
font-size: 2.4em;
|
|
}
|
|
</style>
|