chore(background): cleanup
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
@@ -1,91 +0,0 @@
|
|||||||
<script lang="ts" setup>
|
|
||||||
import { computed, inject } from 'vue'
|
|
||||||
import type { GraphNode, Rect, ViewpaneTransform } from '@vue-flow/core'
|
|
||||||
import { NodeIdInjection, Position, getRectOfNodes, useVueFlow } from '@vue-flow/core'
|
|
||||||
|
|
||||||
import type { CSSProperties } from 'vue'
|
|
||||||
import type { NodeToolbarProps } from './types'
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<NodeToolbarProps>(), {
|
|
||||||
position: Position.Top,
|
|
||||||
offset: 10,
|
|
||||||
})
|
|
||||||
|
|
||||||
const contextNodeId = inject(NodeIdInjection, null)
|
|
||||||
|
|
||||||
const { viewportRef, viewport, getSelectedNodes, findNode } = useVueFlow()
|
|
||||||
|
|
||||||
function getTransform(nodeRect: Rect, transform: ViewpaneTransform, position: Position, offset: number): string {
|
|
||||||
// position === Position.Top
|
|
||||||
let xPos = (nodeRect.x + nodeRect.width / 2) * transform.zoom + transform.x
|
|
||||||
let yPos = nodeRect.y * transform.zoom + transform.y - offset
|
|
||||||
let xShift = -50
|
|
||||||
let yShift = -100
|
|
||||||
|
|
||||||
switch (position) {
|
|
||||||
case Position.Right:
|
|
||||||
xPos = (nodeRect.x + nodeRect.width) * transform.zoom + transform.x + offset
|
|
||||||
yPos = (nodeRect.y + nodeRect.height / 2) * transform.zoom + transform.y
|
|
||||||
xShift = 0
|
|
||||||
yShift = -50
|
|
||||||
break
|
|
||||||
case Position.Bottom:
|
|
||||||
yPos = (nodeRect.y + nodeRect.height) * transform.zoom + transform.y + offset
|
|
||||||
yShift = 0
|
|
||||||
break
|
|
||||||
case Position.Left:
|
|
||||||
xPos = nodeRect.x * transform.zoom + transform.x - offset
|
|
||||||
yPos = (nodeRect.y + nodeRect.height / 2) * transform.zoom + transform.y
|
|
||||||
xShift = -100
|
|
||||||
yShift = -50
|
|
||||||
break
|
|
||||||
}
|
|
||||||
|
|
||||||
return `translate(${xPos}px, ${yPos}px) translate(${xShift}%, ${yShift}%)`
|
|
||||||
}
|
|
||||||
|
|
||||||
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 = computed(() =>
|
|
||||||
typeof props.isVisible === 'boolean'
|
|
||||||
? props.isVisible
|
|
||||||
: nodes.value.length === 1 && nodes.value[0].selected && getSelectedNodes.value.length === 1,
|
|
||||||
)
|
|
||||||
|
|
||||||
const nodeRect = computed<Rect>(() => getRectOfNodes(nodes.value))
|
|
||||||
|
|
||||||
const zIndex = computed<number>(() => 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),
|
|
||||||
zIndex: zIndex.value,
|
|
||||||
}))
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
export default {
|
|
||||||
name: 'NodeToolbar',
|
|
||||||
inheritAttrs: false,
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Teleport :to="viewportRef">
|
|
||||||
<div v-if="isActive && nodes.length" v-bind="$attrs" :style="wrapperStyle" class="vue-flow__node-toolbar">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</Teleport>
|
|
||||||
</template>
|
|
||||||
+63
@@ -0,0 +1,63 @@
|
|||||||
|
// Generated by 'unplugin-auto-import'
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
const $$: typeof import('vue/macros')['$$']
|
||||||
|
const $: typeof import('vue/macros')['$']
|
||||||
|
const $computed: typeof import('vue/macros')['$computed']
|
||||||
|
const $customRef: typeof import('vue/macros')['$customRef']
|
||||||
|
const $ref: typeof import('vue/macros')['$ref']
|
||||||
|
const $shallowRef: typeof import('vue/macros')['$shallowRef']
|
||||||
|
const $toRef: typeof import('vue/macros')['$toRef']
|
||||||
|
const EffectScope: typeof import('vue')['EffectScope']
|
||||||
|
const computed: typeof import('vue')['computed']
|
||||||
|
const createApp: typeof import('vue')['createApp']
|
||||||
|
const customRef: typeof import('vue')['customRef']
|
||||||
|
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||||
|
const defineComponent: typeof import('vue')['defineComponent']
|
||||||
|
const effectScope: typeof import('vue')['effectScope']
|
||||||
|
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||||
|
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||||
|
const h: typeof import('vue')['h']
|
||||||
|
const inject: typeof import('vue')['inject']
|
||||||
|
const isProxy: typeof import('vue')['isProxy']
|
||||||
|
const isReactive: typeof import('vue')['isReactive']
|
||||||
|
const isReadonly: typeof import('vue')['isReadonly']
|
||||||
|
const isRef: typeof import('vue')['isRef']
|
||||||
|
const markRaw: typeof import('vue')['markRaw']
|
||||||
|
const nextTick: typeof import('vue')['nextTick']
|
||||||
|
const onActivated: typeof import('vue')['onActivated']
|
||||||
|
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||||
|
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||||
|
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||||
|
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||||
|
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||||
|
const onMounted: typeof import('vue')['onMounted']
|
||||||
|
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||||
|
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||||
|
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||||
|
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||||
|
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||||
|
const onUpdated: typeof import('vue')['onUpdated']
|
||||||
|
const provide: typeof import('vue')['provide']
|
||||||
|
const reactive: typeof import('vue')['reactive']
|
||||||
|
const readonly: typeof import('vue')['readonly']
|
||||||
|
const ref: typeof import('vue')['ref']
|
||||||
|
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||||
|
const resolveDirective: typeof import('vue')['resolveDirective']
|
||||||
|
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||||
|
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||||
|
const shallowRef: typeof import('vue')['shallowRef']
|
||||||
|
const toRaw: typeof import('vue')['toRaw']
|
||||||
|
const toRef: typeof import('vue')['toRef']
|
||||||
|
const toRefs: typeof import('vue')['toRefs']
|
||||||
|
const triggerRef: typeof import('vue')['triggerRef']
|
||||||
|
const unref: typeof import('vue')['unref']
|
||||||
|
const useAttrs: typeof import('vue')['useAttrs']
|
||||||
|
const useCssModule: typeof import('vue')['useCssModule']
|
||||||
|
const useCssVars: typeof import('vue')['useCssVars']
|
||||||
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
|
const watch: typeof import('vue')['watch']
|
||||||
|
const watchEffect: typeof import('vue')['watchEffect']
|
||||||
|
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||||
|
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user