refactor(additional-components): move additional components into separate pkg
This commit is contained in:
braks
@@ -0,0 +1,255 @@
|
||||
// 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 asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||
const computed: typeof import('vue')['computed']
|
||||
const computedAsync: typeof import('@vueuse/core')['computedAsync']
|
||||
const computedEager: typeof import('@vueuse/core')['computedEager']
|
||||
const computedInject: typeof import('@vueuse/core')['computedInject']
|
||||
const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
|
||||
const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
|
||||
const controlledRef: typeof import('@vueuse/core')['controlledRef']
|
||||
const createApp: typeof import('vue')['createApp']
|
||||
const createEventHook: typeof import('@vueuse/core')['createEventHook']
|
||||
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
|
||||
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
|
||||
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
|
||||
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
||||
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
|
||||
const customRef: typeof import('vue')['customRef']
|
||||
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
|
||||
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
|
||||
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||
const defineComponent: typeof import('vue')['defineComponent']
|
||||
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
|
||||
const effectScope: typeof import('vue')['effectScope']
|
||||
const extendRef: typeof import('@vueuse/core')['extendRef']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const h: typeof import('vue')['h']
|
||||
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isDefined: typeof import('@vueuse/core')['isDefined']
|
||||
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 logicAnd: typeof import('@vueuse/core')['logicAnd']
|
||||
const logicNot: typeof import('@vueuse/core')['logicNot']
|
||||
const logicOr: typeof import('@vueuse/core')['logicOr']
|
||||
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
|
||||
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 onClickOutside: typeof import('@vueuse/core')['onClickOutside']
|
||||
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
|
||||
const onLongPress: typeof import('@vueuse/core')['onLongPress']
|
||||
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 onStartTyping: typeof import('@vueuse/core')['onStartTyping']
|
||||
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||
const onUpdated: typeof import('vue')['onUpdated']
|
||||
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
||||
const provide: typeof import('vue')['provide']
|
||||
const reactify: typeof import('@vueuse/core')['reactify']
|
||||
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
|
||||
const reactive: typeof import('vue')['reactive']
|
||||
const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
|
||||
const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
|
||||
const reactivePick: typeof import('@vueuse/core')['reactivePick']
|
||||
const readonly: typeof import('vue')['readonly']
|
||||
const ref: typeof import('vue')['ref']
|
||||
const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
|
||||
const refDebounced: typeof import('@vueuse/core')['refDebounced']
|
||||
const refDefault: typeof import('@vueuse/core')['refDefault']
|
||||
const refThrottled: typeof import('@vueuse/core')['refThrottled']
|
||||
const refWithControl: typeof import('@vueuse/core')['refWithControl']
|
||||
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
||||
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
||||
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||
const shallowRef: typeof import('vue')['shallowRef']
|
||||
const syncRef: typeof import('@vueuse/core')['syncRef']
|
||||
const syncRefs: typeof import('@vueuse/core')['syncRefs']
|
||||
const templateRef: typeof import('@vueuse/core')['templateRef']
|
||||
const throttledRef: typeof import('@vueuse/core')['throttledRef']
|
||||
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
|
||||
const toRaw: typeof import('vue')['toRaw']
|
||||
const toReactive: typeof import('@vueuse/core')['toReactive']
|
||||
const toRef: typeof import('vue')['toRef']
|
||||
const toRefs: typeof import('vue')['toRefs']
|
||||
const triggerRef: typeof import('vue')['triggerRef']
|
||||
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
|
||||
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
||||
const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
|
||||
const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
|
||||
const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
|
||||
const unref: typeof import('vue')['unref']
|
||||
const unrefElement: typeof import('@vueuse/core')['unrefElement']
|
||||
const until: typeof import('@vueuse/core')['until']
|
||||
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
|
||||
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
|
||||
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
|
||||
const useAttrs: typeof import('vue')['useAttrs']
|
||||
const useBase64: typeof import('@vueuse/core')['useBase64']
|
||||
const useBattery: typeof import('@vueuse/core')['useBattery']
|
||||
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
|
||||
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
|
||||
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
|
||||
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
|
||||
const useCached: typeof import('@vueuse/core')['useCached']
|
||||
const useClamp: typeof import('@vueuse/core')['useClamp']
|
||||
const useClipboard: typeof import('@vueuse/core')['useClipboard']
|
||||
const useColorMode: typeof import('@vueuse/core')['useColorMode']
|
||||
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
|
||||
const useCounter: typeof import('@vueuse/core')['useCounter']
|
||||
const useCssModule: typeof import('vue')['useCssModule']
|
||||
const useCssVar: typeof import('@vueuse/core')['useCssVar']
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
|
||||
const useCycleList: typeof import('@vueuse/core')['useCycleList']
|
||||
const useDark: typeof import('@vueuse/core')['useDark']
|
||||
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
|
||||
const useDebounce: typeof import('@vueuse/core')['useDebounce']
|
||||
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
|
||||
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
|
||||
const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
|
||||
const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
|
||||
const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
|
||||
const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
|
||||
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
|
||||
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
|
||||
const useDraggable: typeof import('@vueuse/core')['useDraggable']
|
||||
const useDropZone: typeof import('@vueuse/core')['useDropZone']
|
||||
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
|
||||
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
|
||||
const useElementHover: typeof import('@vueuse/core')['useElementHover']
|
||||
const useElementSize: typeof import('@vueuse/core')['useElementSize']
|
||||
const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
|
||||
const useEventBus: typeof import('@vueuse/core')['useEventBus']
|
||||
const useEventListener: typeof import('@vueuse/core')['useEventListener']
|
||||
const useEventSource: typeof import('@vueuse/core')['useEventSource']
|
||||
const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
|
||||
const useFavicon: typeof import('@vueuse/core')['useFavicon']
|
||||
const useFetch: typeof import('@vueuse/core')['useFetch']
|
||||
const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
|
||||
const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
|
||||
const useFocus: typeof import('@vueuse/core')['useFocus']
|
||||
const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
|
||||
const useFps: typeof import('@vueuse/core')['useFps']
|
||||
const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
|
||||
const useGamepad: typeof import('@vueuse/core')['useGamepad']
|
||||
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
|
||||
const useIdle: typeof import('@vueuse/core')['useIdle']
|
||||
const useImage: typeof import('@vueuse/core')['useImage']
|
||||
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
|
||||
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
|
||||
const useInterval: typeof import('@vueuse/core')['useInterval']
|
||||
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
|
||||
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
|
||||
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
|
||||
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
|
||||
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
|
||||
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
|
||||
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
|
||||
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
|
||||
const useMemoize: typeof import('@vueuse/core')['useMemoize']
|
||||
const useMemory: typeof import('@vueuse/core')['useMemory']
|
||||
const useMounted: typeof import('@vueuse/core')['useMounted']
|
||||
const useMouse: typeof import('@vueuse/core')['useMouse']
|
||||
const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
|
||||
const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
|
||||
const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
|
||||
const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
|
||||
const useNetwork: typeof import('@vueuse/core')['useNetwork']
|
||||
const useNow: typeof import('@vueuse/core')['useNow']
|
||||
const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
|
||||
const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
|
||||
const useOnline: typeof import('@vueuse/core')['useOnline']
|
||||
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
|
||||
const useParallax: typeof import('@vueuse/core')['useParallax']
|
||||
const usePermission: typeof import('@vueuse/core')['usePermission']
|
||||
const usePointer: typeof import('@vueuse/core')['usePointer']
|
||||
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
|
||||
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
|
||||
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
|
||||
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
|
||||
const useRafFn: typeof import('@vueuse/core')['useRafFn']
|
||||
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
|
||||
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
|
||||
const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
|
||||
const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
|
||||
const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
|
||||
const useScroll: typeof import('@vueuse/core')['useScroll']
|
||||
const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
|
||||
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
|
||||
const useShare: typeof import('@vueuse/core')['useShare']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
|
||||
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
|
||||
const useStepper: typeof import('@vueuse/core')['useStepper']
|
||||
const useStorage: typeof import('@vueuse/core')['useStorage']
|
||||
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
|
||||
const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
|
||||
const useSwipe: typeof import('@vueuse/core')['useSwipe']
|
||||
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
|
||||
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
|
||||
const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
|
||||
const useThrottle: typeof import('@vueuse/core')['useThrottle']
|
||||
const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
|
||||
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
|
||||
const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
|
||||
const useTimeout: typeof import('@vueuse/core')['useTimeout']
|
||||
const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
|
||||
const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
|
||||
const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
|
||||
const useTitle: typeof import('@vueuse/core')['useTitle']
|
||||
const useToggle: typeof import('@vueuse/core')['useToggle']
|
||||
const useTransition: typeof import('@vueuse/core')['useTransition']
|
||||
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
|
||||
const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
|
||||
const useVModel: typeof import('@vueuse/core')['useVModel']
|
||||
const useVModels: typeof import('@vueuse/core')['useVModels']
|
||||
const useVibrate: typeof import('@vueuse/core')['useVibrate']
|
||||
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
|
||||
const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
|
||||
const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
|
||||
const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
|
||||
const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
|
||||
const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
|
||||
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
|
||||
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
|
||||
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchArray: typeof import('@vueuse/core')['watchArray']
|
||||
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
|
||||
const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
|
||||
const watchOnce: typeof import('@vueuse/core')['watchOnce']
|
||||
const watchPausable: typeof import('@vueuse/core')['watchPausable']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||
const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
|
||||
const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
|
||||
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
||||
const whenever: typeof import('@vueuse/core')['whenever']
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVueFlow } from '@vue-flow/core'
|
||||
import { BackgroundVariant } from './types'
|
||||
import type { BackgroundProps } from './types'
|
||||
|
||||
const {
|
||||
variant = 'dots' as BackgroundVariant,
|
||||
gap = 10,
|
||||
size = 0.4,
|
||||
height = 100,
|
||||
width = 100,
|
||||
x = 0,
|
||||
y = 0,
|
||||
bgColor,
|
||||
patternColor: initialPatternColor,
|
||||
} = defineProps<BackgroundProps>()
|
||||
|
||||
const defaultColors: Record<BackgroundVariant, string> = {
|
||||
[BackgroundVariant.Dots]: '#81818a',
|
||||
[BackgroundVariant.Lines]: '#eee',
|
||||
}
|
||||
|
||||
const { viewport } = useVueFlow()
|
||||
|
||||
const background = $computed(() => {
|
||||
const scaledGap = gap && gap * viewport.value.zoom
|
||||
const xOffset = scaledGap && viewport.value.x % scaledGap
|
||||
const yOffset = scaledGap && viewport.value.y % scaledGap
|
||||
const bgSize = size * viewport.value.zoom
|
||||
|
||||
return {
|
||||
scaledGap,
|
||||
xOffset,
|
||||
yOffset,
|
||||
size: bgSize,
|
||||
}
|
||||
})
|
||||
|
||||
// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
|
||||
const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
|
||||
|
||||
const patternColor = computed(() => initialPatternColor || defaultColors[variant || BackgroundVariant.Dots])
|
||||
|
||||
const d = computed(
|
||||
() => `M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`,
|
||||
)
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Background',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
class="vue-flow__background"
|
||||
:style="{
|
||||
height: `${height > 100 ? 100 : height}%`,
|
||||
width: `${width > 100 ? 100 : width}%`,
|
||||
}"
|
||||
>
|
||||
<slot :id="patternId" name="pattern-container">
|
||||
<pattern
|
||||
:id="patternId"
|
||||
:x="background.xOffset"
|
||||
:y="background.yOffset"
|
||||
:width="background.scaledGap"
|
||||
:height="background.scaledGap"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<slot name="pattern">
|
||||
<template v-if="variant === BackgroundVariant.Lines">
|
||||
<path :stroke="patternColor" :stroke-width="size" :d="d" />
|
||||
</template>
|
||||
<template v-else-if="variant === BackgroundVariant.Dots">
|
||||
<circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
|
||||
</template>
|
||||
<svg v-if="bgColor" height="100" width="100">
|
||||
<rect width="100%" height="100%" :fill="bgColor" />
|
||||
</svg>
|
||||
</slot>
|
||||
</pattern>
|
||||
</slot>
|
||||
<rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" />
|
||||
<slot :id="patternId" />
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as Background } from './Background.vue'
|
||||
export * from './types'
|
||||
@@ -0,0 +1,25 @@
|
||||
export enum BackgroundVariant {
|
||||
Lines = 'lines',
|
||||
Dots = 'dots',
|
||||
}
|
||||
|
||||
export interface BackgroundProps {
|
||||
/** The background pattern variant, {@link BackgroundVariant} */
|
||||
variant?: BackgroundVariant
|
||||
/** Background pattern gap */
|
||||
gap?: number
|
||||
/** Background pattern size */
|
||||
size?: number
|
||||
/** Background pattern color */
|
||||
patternColor?: string
|
||||
/** Background color */
|
||||
bgColor?: string
|
||||
/** Background height */
|
||||
height?: number
|
||||
/** Background width */
|
||||
width?: number
|
||||
/** Background x-coordinate (offset x) */
|
||||
x?: number
|
||||
/** Background y-coordinate (offset y) */
|
||||
y?: number
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'ControlButton',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="vue-flow__controls-button">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
@@ -0,0 +1,93 @@
|
||||
<script lang="ts" setup>
|
||||
import { useVueFlow } from '@vue-flow/core'
|
||||
import type { ControlProps } from './types'
|
||||
import ControlButton from './ControlButton.vue'
|
||||
import PlusIcon from './icons/plus.svg'
|
||||
import MinusIcon from './icons/minus.svg'
|
||||
import FitView from './icons/fitview.svg'
|
||||
import Lock from './icons/lock.svg'
|
||||
import Unlock from './icons/unlock.svg'
|
||||
|
||||
const { showZoom = true, showFitView = true, showInteractive = true, fitViewParams } = defineProps<ControlProps>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: 'zoomIn'): void
|
||||
(event: 'zoomOut'): void
|
||||
(event: 'fitView'): void
|
||||
(event: 'interactionChange', active: boolean): void
|
||||
}>()
|
||||
|
||||
const { nodesDraggable, nodesConnectable, elementsSelectable, setInteractive, zoomIn, zoomOut, fitView } = $(useVueFlow())
|
||||
|
||||
const isInteractive = computed(() => nodesDraggable && nodesConnectable && elementsSelectable)
|
||||
|
||||
const onZoomInHandler = () => {
|
||||
zoomIn()
|
||||
emit('zoomIn')
|
||||
}
|
||||
|
||||
const onZoomOutHandler = () => {
|
||||
zoomOut()
|
||||
emit('zoomOut')
|
||||
}
|
||||
|
||||
const onFitViewHandler = () => {
|
||||
fitView(fitViewParams)
|
||||
emit('fitView')
|
||||
}
|
||||
|
||||
const onInteractiveChangeHandler = () => {
|
||||
setInteractive(!isInteractive.value)
|
||||
emit('interactionChange', !isInteractive.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Controls',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vue-flow__controls">
|
||||
<slot name="top"></slot>
|
||||
<template v-if="showZoom">
|
||||
<slot name="control-zoom-in">
|
||||
<ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
|
||||
<slot name="icon-zoom-in">
|
||||
<PlusIcon />
|
||||
</slot>
|
||||
</ControlButton>
|
||||
</slot>
|
||||
<slot name="control-zoom-out">
|
||||
<ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
|
||||
<slot name="icon-zoom-out">
|
||||
<MinusIcon />
|
||||
</slot>
|
||||
</ControlButton>
|
||||
</slot>
|
||||
</template>
|
||||
<template v-if="showFitView">
|
||||
<slot name="control-fit-view">
|
||||
<ControlButton class="vue-flow__controls-fitview" @click="onFitViewHandler">
|
||||
<slot name="icon-fit-view">
|
||||
<FitView />
|
||||
</slot>
|
||||
</ControlButton>
|
||||
</slot>
|
||||
</template>
|
||||
<template v-if="showInteractive">
|
||||
<slot name="control-interactive">
|
||||
<ControlButton v-if="showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
|
||||
<slot v-if="isInteractive" name="icon-unlock">
|
||||
<Unlock />
|
||||
</slot>
|
||||
<slot v-if="!isInteractive" name="icon-lock">
|
||||
<Lock />
|
||||
</slot>
|
||||
</ControlButton>
|
||||
</slot>
|
||||
</template>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 30">
|
||||
<path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 463 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
|
||||
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0 8 0 4.571 3.429 4.571 7.619v3.048H3.048A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047zm4.724-13.866H7.467V7.619c0-2.59 2.133-4.724 4.723-4.724 2.591 0 4.724 2.133 4.724 4.724v3.048z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 530 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 5">
|
||||
<path d="M0 0h32v4.2H0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 96 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 152 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 32">
|
||||
<path d="M21.333 10.667H19.81V7.619C19.81 3.429 16.38 0 12.19 0c-4.114 1.828-1.37 2.133.305 2.438 1.676.305 4.42 2.59 4.42 5.181v3.048H3.047A3.056 3.056 0 000 13.714v15.238A3.056 3.056 0 003.048 32h18.285a3.056 3.056 0 003.048-3.048V13.714a3.056 3.056 0 00-3.048-3.047zM12.19 24.533a3.056 3.056 0 01-3.047-3.047 3.056 3.056 0 013.047-3.048 3.056 3.056 0 013.048 3.048 3.056 3.056 0 01-3.048 3.047z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 472 B |
@@ -0,0 +1,4 @@
|
||||
export { default as Controls } from './Controls.vue'
|
||||
export { default as ControlButton } from './ControlButton.vue'
|
||||
|
||||
export * from './types'
|
||||
@@ -0,0 +1,12 @@
|
||||
import type { FitViewParams } from '@vue-flow/core'
|
||||
|
||||
export interface ControlProps {
|
||||
/** Show the zoom icon */
|
||||
showZoom?: boolean
|
||||
/** Show the fit-view icon */
|
||||
showFitView?: boolean
|
||||
/** Show the interactive icon */
|
||||
showInteractive?: boolean
|
||||
/** Params to use on fitView */
|
||||
fitViewParams?: FitViewParams
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './background'
|
||||
export * from './controls'
|
||||
export * from './minimap'
|
||||
@@ -0,0 +1,165 @@
|
||||
<script lang="ts" setup>
|
||||
import type { GraphNode } from '@vue-flow/core'
|
||||
import { getBoundsofRects, getConnectedEdges, getRectOfNodes, useVueFlow } from '@vue-flow/core'
|
||||
import type { MiniMapNodeFunc, MiniMapProps, ShapeRendering } from './types'
|
||||
import MiniMapNode from './MiniMapNode'
|
||||
|
||||
const {
|
||||
width,
|
||||
height,
|
||||
nodeStrokeColor = '#555',
|
||||
nodeColor = '#fff',
|
||||
nodeClassName,
|
||||
nodeBorderRadius = 5,
|
||||
nodeStrokeWidth = 2,
|
||||
maskColor = 'rgb(240, 242, 243, 0.7)',
|
||||
} = defineProps<MiniMapProps>()
|
||||
|
||||
const emit = defineEmits(['nodeClick', 'nodeDblclick', 'nodeMouseenter', 'nodeMousemove', 'nodeMouseleave'])
|
||||
|
||||
const attrs: Record<string, any> = useAttrs()
|
||||
|
||||
const defaultWidth = 200
|
||||
const defaultHeight = 150
|
||||
|
||||
const { edges, viewport, dimensions, emits, getNodes } = useVueFlow()
|
||||
|
||||
const elementWidth = $computed(() => width ?? attrs.style?.width ?? defaultWidth)
|
||||
|
||||
const elementHeight = $computed(() => height ?? attrs.style?.height ?? defaultHeight)
|
||||
|
||||
const nodeColorFunc: MiniMapNodeFunc = nodeColor instanceof Function ? nodeColor : () => nodeColor as string
|
||||
|
||||
const nodeStrokeColorFunc: MiniMapNodeFunc =
|
||||
nodeStrokeColor instanceof Function ? nodeStrokeColor : () => nodeStrokeColor as string
|
||||
|
||||
const nodeClassNameFunc = nodeClassName instanceof Function ? nodeClassName : ((() => nodeClassName) as MiniMapNodeFunc)
|
||||
|
||||
const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
|
||||
|
||||
const bb = $computed(() => getRectOfNodes(getNodes.value))
|
||||
|
||||
const viewBB = $computed(() => ({
|
||||
x: -viewport.value.x / viewport.value.zoom,
|
||||
y: -viewport.value.y / viewport.value.zoom,
|
||||
width: dimensions.value.width / viewport.value.zoom,
|
||||
height: dimensions.value.height / viewport.value.zoom,
|
||||
}))
|
||||
|
||||
const viewBox = $(
|
||||
controlledComputed($$(viewBB), () => {
|
||||
const boundingRect = getNodes && getNodes.value.length ? getBoundsofRects(bb, viewBB) : viewBB
|
||||
const scaledWidth = boundingRect.width / elementWidth
|
||||
const scaledHeight = boundingRect.height / elementHeight
|
||||
const viewScale = Math.max(scaledWidth, scaledHeight)
|
||||
const viewWidth = viewScale * elementWidth
|
||||
const viewHeight = viewScale * elementHeight
|
||||
const offset = 5 * viewScale
|
||||
return {
|
||||
offset,
|
||||
x: boundingRect.x - (viewWidth - boundingRect.width) / 2 - offset,
|
||||
y: boundingRect.y - (viewHeight - boundingRect.height) / 2 - offset,
|
||||
width: viewWidth + offset * 2,
|
||||
height: viewHeight + offset * 2,
|
||||
}
|
||||
}),
|
||||
)
|
||||
|
||||
const d = controlledComputed($$(viewBox), () => {
|
||||
if (viewBox.x && viewBox.y) {
|
||||
return `
|
||||
M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}
|
||||
h${viewBox.width + viewBox.offset * 2}
|
||||
v${viewBox.height + viewBox.offset * 2}
|
||||
h${-viewBox.width - viewBox.offset * 2}z
|
||||
M${viewBB.x},${viewBB.y}
|
||||
h${viewBB.width}
|
||||
v${viewBB.height}
|
||||
h${-viewBB.width}z`
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
})
|
||||
|
||||
const onNodeClick = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeClick(param)
|
||||
emit('nodeClick', param)
|
||||
}
|
||||
|
||||
const onNodeDblClick = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeDoubleClick(param)
|
||||
emit('nodeDblclick', param)
|
||||
}
|
||||
|
||||
const onNodeMouseEnter = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeMouseEnter(param)
|
||||
emit('nodeMouseenter', param)
|
||||
}
|
||||
|
||||
const onNodeMouseMove = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeMouseMove(param)
|
||||
emit('nodeMousemove', param)
|
||||
}
|
||||
|
||||
const onNodeMouseLeave = (event: MouseEvent, node: GraphNode) => {
|
||||
const param = { event, node, connectedEdges: getConnectedEdges([node], edges.value) }
|
||||
emits.miniMapNodeMouseLeave(param)
|
||||
emit('nodeMouseleave', param)
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'MiniMap',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg
|
||||
:width="elementWidth"
|
||||
:height="elementHeight"
|
||||
:viewBox="[viewBox.x, viewBox.y, viewBox.width, viewBox.height].join(' ')"
|
||||
class="vue-flow__minimap"
|
||||
>
|
||||
<MiniMapNode
|
||||
v-for="node of getNodes"
|
||||
:id="node.id"
|
||||
:key="node.id"
|
||||
:position="node.computedPosition"
|
||||
:dimensions="node.dimensions"
|
||||
:style="node.style"
|
||||
:class="nodeClassNameFunc(node)"
|
||||
:color="nodeColorFunc(node)"
|
||||
:border-radius="nodeBorderRadius"
|
||||
:stroke-color="nodeStrokeColorFunc(node)"
|
||||
:stroke-width="nodeStrokeWidth"
|
||||
:shape-rendering="shapeRendering"
|
||||
@click="onNodeClick($event, node)"
|
||||
@dblclick="onNodeDblClick($event, node)"
|
||||
@mouseenter="onNodeMouseEnter($event, node)"
|
||||
@mousemove="onNodeMouseMove($event, node)"
|
||||
@mouseleave="onNodeMouseLeave($event, node)"
|
||||
>
|
||||
<slot
|
||||
:id="node.id"
|
||||
:name="`node-${node.type}`"
|
||||
:parent-node="node.parentNode"
|
||||
:selected="node.selected"
|
||||
:position="node.computedPosition"
|
||||
:dimensions="node.dimensions"
|
||||
:style="node.style"
|
||||
:class="nodeClassNameFunc(node)"
|
||||
:color="nodeColorFunc(node)"
|
||||
:border-radius="nodeBorderRadius"
|
||||
:stroke-color="nodeStrokeColorFunc(node)"
|
||||
:stroke-width="nodeStrokeWidth"
|
||||
:shape-rendering="shapeRendering"
|
||||
/>
|
||||
</MiniMapNode>
|
||||
<path class="vue-flow__minimap-mask" :d="d" :fill="maskColor" fill-rule="evenodd" />
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
import type { CSSProperties, FunctionalComponent } from 'vue'
|
||||
import type { MiniMapNodeProps } from './types'
|
||||
|
||||
const MiniMapNode: FunctionalComponent<MiniMapNodeProps> = function (
|
||||
{
|
||||
position: { x, y },
|
||||
dimensions: { height, width },
|
||||
strokeWidth,
|
||||
strokeColor,
|
||||
borderRadius,
|
||||
color,
|
||||
shapeRendering = 'geometricPrecision',
|
||||
},
|
||||
{ attrs, emit, slots },
|
||||
) {
|
||||
const style = (attrs.style ?? {}) as CSSProperties
|
||||
|
||||
return [
|
||||
h('rect', {
|
||||
class: ['vue-flow__minimap-node', attrs.class].join(' '),
|
||||
style,
|
||||
x,
|
||||
y,
|
||||
rx: borderRadius,
|
||||
ry: borderRadius,
|
||||
width,
|
||||
height,
|
||||
fill: color || (style.background as string) || style.backgroundColor,
|
||||
stroke: strokeColor,
|
||||
strokeWidth,
|
||||
shapeRendering,
|
||||
onClick: (e: MouseEvent) => emit('click', e),
|
||||
onDblClick: (e: MouseEvent) => emit('dblclick', e),
|
||||
onMouseenter: (e: MouseEvent) => emit('mouseenter', e),
|
||||
onMousemove: (e: MouseEvent) => emit('mousemove', e),
|
||||
onMouseleave: (e: MouseEvent) => emit('mouseleave', e),
|
||||
}),
|
||||
slots?.default?.(),
|
||||
]
|
||||
}
|
||||
|
||||
MiniMapNode.props = ['position', 'dimensions', 'strokeWidth', 'strokeColor', 'borderRadius', 'color', 'shapeRendering']
|
||||
|
||||
MiniMapNode.emits = ['click', 'dblclick', 'mouseenter', 'mousemove', 'mouseleave']
|
||||
|
||||
export default MiniMapNode
|
||||
@@ -0,0 +1,4 @@
|
||||
export { default as MiniMap } from './MiniMap.vue'
|
||||
export { default as MiniMapNode } from './MiniMapNode'
|
||||
|
||||
export * from './types'
|
||||
@@ -0,0 +1,43 @@
|
||||
import type { Dimensions, GraphNode, XYPosition } from '@vue-flow/core'
|
||||
import type { CSSProperties } from 'vue'
|
||||
|
||||
/** expects a node and returns a color value */
|
||||
export type MiniMapNodeFunc = (node: GraphNode) => string
|
||||
// hack for vue-type imports
|
||||
type MiniMapNodeFunc2 = (node: GraphNode) => string
|
||||
type MiniMapNodeFunc3 = (node: GraphNode) => string
|
||||
|
||||
export type ShapeRendering = CSSProperties['shapeRendering']
|
||||
|
||||
export interface MiniMapProps {
|
||||
/** Node color, can be either a string or a string func that receives the current node */
|
||||
nodeColor?: string | MiniMapNodeFunc
|
||||
/** Node stroke color, can be either a string or a string func that receives the current node */
|
||||
nodeStrokeColor?: string | MiniMapNodeFunc2
|
||||
/** Additional node class name, can be either a string or a string func that receives the current node */
|
||||
nodeClassName?: string | MiniMapNodeFunc3
|
||||
/** Node border radius */
|
||||
nodeBorderRadius?: number
|
||||
/** Node stroke width */
|
||||
nodeStrokeWidth?: number
|
||||
/** Background color of minimap */
|
||||
maskColor?: string
|
||||
|
||||
width?: number
|
||||
height?: number
|
||||
}
|
||||
|
||||
/** these props are passed to mini map node slots */
|
||||
export interface MiniMapNodeProps {
|
||||
id: string
|
||||
parentNode?: string
|
||||
selected?: boolean
|
||||
dragging?: boolean
|
||||
position: XYPosition
|
||||
dimensions: Dimensions
|
||||
borderRadius?: number
|
||||
color?: string
|
||||
shapeRendering?: ShapeRendering
|
||||
strokeColor?: string
|
||||
strokeWidth?: number
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
declare interface Window {
|
||||
chrome: any
|
||||
}
|
||||
Reference in New Issue
Block a user