From 8644beea0e610764649fc763dcfa8d6947069c10 Mon Sep 17 00:00:00 2001 From: sebkolind Date: Tue, 30 Jul 2024 08:41:05 +0200 Subject: [PATCH] refactor: shadow creation --- lib/shadow.ts | 40 ++++++++++++++++------------------------ lib/types.ts | 9 +++++++-- 2 files changed, 23 insertions(+), 26 deletions(-) diff --git a/lib/shadow.ts b/lib/shadow.ts index 04bd5b9..1cd507f 100644 --- a/lib/shadow.ts +++ b/lib/shadow.ts @@ -1,9 +1,9 @@ import { CLASSNAMES } from "./constants"; -import { Context } from "./types"; +import { Context, Offset } from "./types"; import { clone, getContext } from "./utils"; const setupShadow = (context: Context, ev: MouseEvent, el: HTMLElement) => { - const { shadow, offset: customOffset } = createShadow(ev, context, el); + const { shadow, offset: customOffset } = createShadow(context, ev, el); const rect = el.getBoundingClientRect(); const offset = getOffset(ev, rect, customOffset); @@ -13,15 +13,14 @@ const setupShadow = (context: Context, ev: MouseEvent, el: HTMLElement) => { shadow.style.top = `${ev.clientY - offset.y + scrollY}px`; } - const onMouseMove = (ev: Event) => handleMouseMove(ev, offset); + const onMouseMove = (ev: MouseEvent) => handleMouseMove(ev, offset); document.addEventListener("mousemove", onMouseMove); - const handleMouseMove = (ev: Event, offset: { x: number; y: number }) => { - const e = ev as MouseEvent; - e.preventDefault(); + const handleMouseMove = (ev: MouseEvent, offset: Offset) => { + ev.preventDefault(); - const x = e.clientX; - const y = e.clientY; + const x = ev.clientX; + const y = ev.clientY; if (shadow) { shadow.style.left = `${x - offset.x + scrollX}px`; @@ -54,7 +53,7 @@ const setupShadow = (context: Context, ev: MouseEvent, el: HTMLElement) => { context.options.onEnter?.(ev, getContext(context)); } context.options.onOver?.(ev, getContext(context)); - handlePushing(context, x, y); + handlePlacement(context, { x, y }); break; } } @@ -70,26 +69,23 @@ const setupShadow = (context: Context, ev: MouseEvent, el: HTMLElement) => { return shadow; }; -const createShadow = (ev: MouseEvent, context: Context, el: HTMLElement) => { +const createShadow = (context: Context, ev: MouseEvent, el: HTMLElement) => { if (!context.options.enableShadow) { return { shadow: null, offset: { x: 0, y: 0 } }; } - const customShadow = context.options.onCreateShadow?.( - ev, - getContext(context), - ); - const shadow = customShadow?.el ?? clone(el); + const custom = context.options.onCreateShadow?.(ev, getContext(context)); + const shadow = custom?.el ?? clone(el); shadow.classList.add(CLASSNAMES.dragging); - if (customShadow?.el && !(customShadow.el instanceof HTMLElement)) { + if (custom?.el && !(custom.el instanceof HTMLElement)) { throw new Error( "Error: The custom shadow provided is not a valid HTMLElement.", ); } - if (!customShadow) { + if (!custom) { shadow.style.width = `${el.offsetWidth}px`; shadow.style.height = `${el.offsetHeight}px`; } @@ -98,20 +94,16 @@ const createShadow = (ev: MouseEvent, context: Context, el: HTMLElement) => { shadow.style.position = "absolute"; shadow.style.pointerEvents = "none"; - return { shadow, offset: customShadow?.offset }; + return { shadow, offset: custom?.offset }; }; -const getOffset = ( - ev: MouseEvent, - rect: DOMRect, - customOffset?: { x: number; y: number }, -) => { +const getOffset = (ev: MouseEvent, rect: DOMRect, customOffset?: Offset) => { return customOffset ? customOffset : { x: ev.clientX - rect.left, y: ev.clientY - rect.top }; }; -const handlePushing = (context: Context, x: number, y: number) => { +const handlePlacement = (context: Context, { x, y }: Offset) => { if (!context.zone || !context.origin) { console.error("Error: Zone or origin is null. Cannot handle pushing."); return; diff --git a/lib/types.ts b/lib/types.ts index 896021b..3d39060 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -112,7 +112,12 @@ type CustomShadow = { * The drag offset from the top left corner of the element. * @default { x: 0, y: 0 } */ - offset?: { x: number; y: number }; + offset?: Offset; +}; + +type Offset = { + x: number; + y: number; }; type EventHandler = ( @@ -123,4 +128,4 @@ type EventHandler = ( >, ) => T; -export { Context, Options, CustomShadow }; +export { Context, Options, CustomShadow, Offset };