107 lines
3.2 KiB
Vue
107 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, inject, toRef } from 'vue'
|
|
import type { GraphNode, Rect, ViewportTransform } from '@vue-flow/core'
|
|
import { NodeIdInjection, Position, getRectOfNodes, useVueFlow } from '@vue-flow/core'
|
|
|
|
import type { CSSProperties } from 'vue'
|
|
import type { Align, NodeToolbarProps } from './types'
|
|
|
|
const props = withDefaults(defineProps<NodeToolbarProps>(), {
|
|
position: Position.Top,
|
|
offset: 10,
|
|
align: 'center',
|
|
})
|
|
|
|
const contextNodeId = inject(NodeIdInjection, null)
|
|
|
|
const { viewportRef, viewport, getSelectedNodes, findNode } = useVueFlow()
|
|
|
|
const nodes = computed(() => {
|
|
const nodeIds = Array.isArray(props.nodeId) ? props.nodeId : [props.nodeId || contextNodeId || '']
|
|
|
|
return nodeIds.reduce<GraphNode[]>((acc, id) => {
|
|
const node = findNode(id)
|
|
|
|
if (node) {
|
|
acc.push(node)
|
|
}
|
|
|
|
return acc
|
|
}, [] as GraphNode[])
|
|
})
|
|
|
|
const isActive = toRef(() =>
|
|
typeof props.isVisible === 'boolean'
|
|
? props.isVisible
|
|
: nodes.value.length === 1 && nodes.value[0].selected && getSelectedNodes.value.length === 1,
|
|
)
|
|
|
|
const nodeRect = computed(() => getRectOfNodes(nodes.value))
|
|
|
|
const zIndex = computed(() => Math.max(...nodes.value.map((node) => (node.computedPosition.z || 1) + 1)))
|
|
|
|
const wrapperStyle = computed<CSSProperties>(() => ({
|
|
position: 'absolute',
|
|
transform: getTransform(nodeRect.value, viewport.value, props.position, props.offset, props.align),
|
|
zIndex: zIndex.value,
|
|
}))
|
|
|
|
function getTransform(nodeRect: Rect, transform: ViewportTransform, position: Position, offset: number, align: Align): string {
|
|
let alignmentOffset = 0.5
|
|
|
|
if (align === 'start') {
|
|
alignmentOffset = 0
|
|
} else if (align === 'end') {
|
|
alignmentOffset = 1
|
|
}
|
|
|
|
// position === Position.Top
|
|
// we set the x any y position of the toolbar based on the nodes position
|
|
let pos = [
|
|
(nodeRect.x + nodeRect.width * alignmentOffset) * transform.zoom + transform.x,
|
|
nodeRect.y * transform.zoom + transform.y - offset,
|
|
]
|
|
// and then shift it based on the alignment. The shift values are in %.
|
|
let shift = [-100 * alignmentOffset, -100]
|
|
|
|
switch (position) {
|
|
case Position.Right:
|
|
pos = [
|
|
(nodeRect.x + nodeRect.width) * transform.zoom + transform.x + offset,
|
|
(nodeRect.y + nodeRect.height * alignmentOffset) * transform.zoom + transform.y,
|
|
]
|
|
shift = [0, -100 * alignmentOffset]
|
|
break
|
|
case Position.Bottom:
|
|
pos[1] = (nodeRect.y + nodeRect.height) * transform.zoom + transform.y + offset
|
|
shift[1] = 0
|
|
break
|
|
case Position.Left:
|
|
pos = [
|
|
nodeRect.x * transform.zoom + transform.x - offset,
|
|
(nodeRect.y + nodeRect.height * alignmentOffset) * transform.zoom + transform.y,
|
|
]
|
|
shift = [-100, -100 * alignmentOffset]
|
|
break
|
|
}
|
|
|
|
return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'NodeToolbar',
|
|
compatConfig: { MODE: 3 },
|
|
inheritAttrs: false,
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport :to="viewportRef" :disabled="!viewportRef">
|
|
<div v-if="isActive && nodes.length" v-bind="$attrs" :style="wrapperStyle" class="vue-flow__node-toolbar">
|
|
<slot />
|
|
</div>
|
|
</Teleport>
|
|
</template>
|