mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.3 KiB
130 lines
2.3 KiB
<script setup> |
|
import { getBezierPath } from '@braks/vue-flow' |
|
import { computed } from 'vue' |
|
|
|
const props = defineProps({ |
|
id: { |
|
type: String, |
|
required: true, |
|
}, |
|
sourceX: { |
|
type: Number, |
|
required: true, |
|
}, |
|
sourceY: { |
|
type: Number, |
|
required: true, |
|
}, |
|
targetX: { |
|
type: Number, |
|
required: true, |
|
}, |
|
targetY: { |
|
type: Number, |
|
required: true, |
|
}, |
|
sourcePosition: { |
|
type: String, |
|
required: true, |
|
}, |
|
targetPosition: { |
|
type: String, |
|
required: true, |
|
}, |
|
data: { |
|
type: Object, |
|
required: false, |
|
}, |
|
markerEnd: { |
|
type: String, |
|
required: false, |
|
}, |
|
style: { |
|
type: Object, |
|
required: false, |
|
}, |
|
sourceHandleId: { |
|
type: String, |
|
required: false, |
|
}, |
|
targetHandleId: { |
|
type: String, |
|
required: false, |
|
}, |
|
}) |
|
|
|
const { column } = toRefs(props.data) |
|
|
|
const isManyToMany = computed(() => column.value?.colOptions?.type === 'mm') |
|
|
|
const edgePath = computed(() => |
|
getBezierPath({ |
|
sourceX: props.sourceX, |
|
sourceY: props.sourceY, |
|
sourcePosition: props.sourcePosition, |
|
targetX: props.targetX, |
|
targetY: props.targetY, |
|
targetPosition: props.targetPosition, |
|
}), |
|
) |
|
</script> |
|
|
|
<script> |
|
export default { |
|
inheritAttrs: false, |
|
} |
|
</script> |
|
|
|
<template> |
|
<path |
|
:id="id" |
|
:style="style" |
|
class="path-wrapper p-4 hover:cursor-pointer" |
|
:stroke-width="8" |
|
fill="none" |
|
:d="edgePath" |
|
:marker-end="markerEnd" |
|
/> |
|
<path |
|
:id="id" |
|
:style="style" |
|
class="path stroke-gray-500 hover:stroke-green-500 hover:cursor-pointer" |
|
:stroke-width="1.5" |
|
fill="none" |
|
:d="edgePath" |
|
:marker-end="markerEnd" |
|
/> |
|
|
|
<rect |
|
:x="sourceX" |
|
:y="sourceY - 4" |
|
width="8" |
|
height="8" |
|
fill="#fff" |
|
stroke="#6F3381" |
|
:stroke-width="1.5" |
|
:transform="`rotate(45,${sourceX + 2},${sourceY - 4})`" |
|
/> |
|
<rect |
|
v-if="isManyToMany" |
|
:x="targetX" |
|
:y="targetY - 4" |
|
width="8" |
|
height="8" |
|
fill="#fff" |
|
stroke="#6F3381" |
|
:stroke-width="1.5" |
|
:transform="`rotate(45,${targetX + 2},${targetY - 4})`" |
|
/> |
|
<circle v-else :cx="targetX" :cy="targetY" fill="#fff" :r="5" stroke="#6F3381" :stroke-width="1.5" /> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.path-wrapper:hover + .path { |
|
@apply stroke-green-500; |
|
stroke-width: 2; |
|
} |
|
.path:hover { |
|
stroke-width: 2; |
|
} |
|
</style>
|
|
|