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
packages/background/src/auto-imports.d.ts
vendored
Normal file
63
packages/background/src/auto-imports.d.ts
vendored
Normal file
@@ -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