94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
|
<div class="node start" :class="{ center: posCenter }">
|
|
<template v-if="type === NODE_TYPE.INPUT">
|
|
<Handle type="source" id="Right" :position="Position.Right" />
|
|
</template>
|
|
<template v-else-if="type === NODE_TYPE.SECONDARY">
|
|
<Handle type="target" id="Left" :position="Position.Left" />
|
|
<Handle type="source" id="Right" :position="Position.Right" />
|
|
</template>
|
|
<template v-else-if="type === NODE_TYPE.OUTPUT">
|
|
<Handle type="target" id="Left" :position="Position.Left" />
|
|
</template>
|
|
<div class="item">
|
|
<slot></slot>
|
|
</div>
|
|
<div class="add" @mousedown.stop v-if="isAdd" @click="onAdd">
|
|
<svg-icon name="add" size="14" size-unit="px" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { Handle, Position } from '@vue-flow/core'
|
|
import { NODE_TYPE } from '../tools/index.d'
|
|
import { NODE_DATATYPE } from '../tools/index.d'
|
|
import { computed } from 'vue'
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'InputNode'
|
|
},
|
|
node: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
stateManager: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
})
|
|
const nodes = computed(() => props.stateManager.nodes.value)
|
|
const firstNode = computed(() => nodes.value[0])
|
|
const lastNode = computed(() => nodes.value[nodes.value.length - 1])
|
|
const isAdd = computed(
|
|
() => props.node.id === lastNode.value.id && NODE_DATATYPE.RESULT_IMAGE === props.node.data.type
|
|
)
|
|
const onAdd = () => {
|
|
props.stateManager.nodeManager.createCardsSelect()
|
|
}
|
|
const posCenter = computed(() => {
|
|
const arr = [NODE_DATATYPE.RESULT_IMAGE]
|
|
return arr.includes(props.node?.data?.type)
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.node {
|
|
position: relative;
|
|
--top: 50px;
|
|
.vue-flow__handle {
|
|
width: 12px;
|
|
height: 12px;
|
|
top: var(--top);
|
|
z-index: 10;
|
|
background: #b5b5b5;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
> .item {
|
|
position: relative;
|
|
}
|
|
> .add {
|
|
position: absolute;
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 2px solid #fff;
|
|
top: var(--top);
|
|
right: -16px;
|
|
transform: translateY(-50%);
|
|
background-color: #ed8936;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 25px;
|
|
box-shadow: 0 8px 20px 0 #71809633;
|
|
cursor: pointer;
|
|
z-index: 20;
|
|
}
|
|
&.center {
|
|
--top: 50%;
|
|
}
|
|
}
|
|
</style>
|