From 545bb4edf5f2f5fd12fe180f7fb3ab5f013a4334 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 28 Jun 2024 16:22:56 +0200 Subject: [PATCH] refactor(core): remove useWindow (#1504) refactor(core): remove `useWindow` --- packages/core/src/composables/index.ts | 1 - packages/core/src/composables/useKeyPress.ts | 24 +++++++++---------- .../core/src/composables/useResizeHandler.ts | 3 --- packages/core/src/composables/useWindow.ts | 19 --------------- packages/core/src/utils/graph.ts | 3 --- 5 files changed, 11 insertions(+), 39 deletions(-) delete mode 100644 packages/core/src/composables/useWindow.ts diff --git a/packages/core/src/composables/index.ts b/packages/core/src/composables/index.ts index 8d0c3434..5f6ba8c3 100644 --- a/packages/core/src/composables/index.ts +++ b/packages/core/src/composables/index.ts @@ -10,5 +10,4 @@ export * from './useUpdateNodePositions' export * from './useViewportHelper' export * from './useVueFlow' export * from './useWatchProps' -export * from './useWindow' export * from './useZoomPanHelper' diff --git a/packages/core/src/composables/useKeyPress.ts b/packages/core/src/composables/useKeyPress.ts index c1051a7d..750c17d6 100644 --- a/packages/core/src/composables/useKeyPress.ts +++ b/packages/core/src/composables/useKeyPress.ts @@ -1,12 +1,11 @@ import type { MaybeRefOrGetter } from 'vue' -import { onMounted, ref, toValue, watch } from 'vue' +import { onMounted, ref, toRef, toValue, watch } from 'vue' import type { KeyFilter, KeyPredicate } from '@vueuse/core' import { onKeyStroke, useEventListener } from '@vueuse/core' -import { useWindow } from './useWindow' export interface UseKeyPressOptions { actInsideInputWithModifier?: MaybeRefOrGetter - target?: MaybeRefOrGetter + target?: MaybeRefOrGetter } export function isInputDOMNode(event: KeyboardEvent): boolean { @@ -69,8 +68,6 @@ function useKeyOrCode(code: string, keysToWatch: string | string[]) { return keysToWatch.includes(code) ? 'code' : 'key' } -const window = useWindow() - /** * Composable that returns a boolean value if a key is pressed * @@ -78,10 +75,11 @@ const window = useWindow() * @param keyFilter - Can be a boolean, a string, an array of strings or a function that returns a boolean. If it's a boolean, it will act as if the key is always pressed. If it's a string, it will return true if a key matching that string is pressed. If it's an array of strings, it will return true if any of the strings match a key being pressed, or a combination (e.g. ['ctrl+a', 'ctrl+b']) * @param options - Options object */ -export function useKeyPress( - keyFilter: MaybeRefOrGetter, - options: UseKeyPressOptions = { actInsideInputWithModifier: true, target: window }, -) { +export function useKeyPress(keyFilter: MaybeRefOrGetter, options?: UseKeyPressOptions) { + const actInsideInputWithModifier = toRef(() => toValue(options?.actInsideInputWithModifier) ?? false) + + const target = toRef(() => toValue(options?.target) ?? window) + const isPressed = ref(toValue(keyFilter) === true) let modifierPressed = false @@ -114,7 +112,7 @@ export function useKeyPress( (e) => { modifierPressed = wasModifierPressed(e) - const preventAction = (!modifierPressed || (modifierPressed && !options.actInsideInputWithModifier)) && isInputDOMNode(e) + const preventAction = (!modifierPressed || (modifierPressed && !actInsideInputWithModifier.value)) && isInputDOMNode(e) if (preventAction) { return @@ -124,14 +122,14 @@ export function useKeyPress( isPressed.value = true }, - { eventName: 'keydown', target: options.target }, + { eventName: 'keydown', target }, ) onKeyStroke( (...args) => currentFilter(...args), (e) => { if (isPressed.value) { - const preventAction = (!modifierPressed || (modifierPressed && !options.actInsideInputWithModifier)) && isInputDOMNode(e) + const preventAction = (!modifierPressed || (modifierPressed && !actInsideInputWithModifier.value)) && isInputDOMNode(e) if (preventAction) { return @@ -140,7 +138,7 @@ export function useKeyPress( reset() } }, - { eventName: 'keyup', target: options.target }, + { eventName: 'keyup', target }, ) function reset() { diff --git a/packages/core/src/composables/useResizeHandler.ts b/packages/core/src/composables/useResizeHandler.ts index 5f5d6faf..b6c6fc0d 100644 --- a/packages/core/src/composables/useResizeHandler.ts +++ b/packages/core/src/composables/useResizeHandler.ts @@ -2,7 +2,6 @@ import type { Ref } from 'vue' import { onBeforeUnmount, onMounted } from 'vue' import { ErrorCode, VueFlowError, getDimensions } from '../utils' import { useVueFlow } from './useVueFlow' -import { useWindow } from './useWindow' /** * Composable that handles the resize of the viewport. @@ -11,8 +10,6 @@ import { useWindow } from './useWindow' * @param viewportEl */ export function useResizeHandler(viewportEl: Ref): void { - const window = useWindow() - const { emits, dimensions } = useVueFlow() let resizeObserver: ResizeObserver diff --git a/packages/core/src/composables/useWindow.ts b/packages/core/src/composables/useWindow.ts deleted file mode 100644 index 8c2a3fc1..00000000 --- a/packages/core/src/composables/useWindow.ts +++ /dev/null @@ -1,19 +0,0 @@ -type UseWindow = Window & typeof globalThis & { chrome?: any } - -/** - * Returns the window object - * - * @internal - */ -export function useWindow(): UseWindow { - if (typeof window !== 'undefined') { - return window as UseWindow - } - - return { - chrome: false, - addEventListener(..._: Parameters) { - // do nothing - }, - } as UseWindow -} diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index 67312ff5..36fd0dfa 100644 --- a/packages/core/src/utils/graph.ts +++ b/packages/core/src/utils/graph.ts @@ -21,7 +21,6 @@ import type { XYPosition, XYZPosition, } from '../types' -import { useWindow } from '../composables' import { isDef, warn } from '.' export function nodeToRect(node: GraphNode): Rect { @@ -64,8 +63,6 @@ export function getHostForElement(element: HTMLElement): Document { return doc } - const window = useWindow() - return window.document }