From b664ec53618bbfd2da03d7cca2c71da65b594d1c Mon Sep 17 00:00:00 2001 From: Maxime Bret Date: Sat, 24 Aug 2024 14:36:02 +0200 Subject: [PATCH] feat: disable animation on scrubber --- packages/core/src/enhancers/events/events.ts | 5 +---- packages/core/src/enhancers/events/frames.ts | 19 ----------------- .../events/normalizeEventForViewport.ts | 13 ++---------- packages/core/src/enhancers/hotkeys.ts | 8 +++---- .../navigation/navigators/manualNavigator.ts | 21 +++++++++++++++---- .../enhancers/pagination/pagination.test.ts | 4 ++-- .../demo/src/reader/navigation/Scrubber.tsx | 8 +++++-- 7 files changed, 32 insertions(+), 46 deletions(-) delete mode 100644 packages/core/src/enhancers/events/frames.ts diff --git a/packages/core/src/enhancers/events/events.ts b/packages/core/src/enhancers/events/events.ts index f3ac504d..a8532c1e 100644 --- a/packages/core/src/enhancers/events/events.ts +++ b/packages/core/src/enhancers/events/events.ts @@ -1,6 +1,5 @@ import { isPointerEvent } from "../../utils/dom" import { EnhancerOutput, RootEnhancer } from "../types/enhancer" -import { attachOriginalFrameEventToDocumentEvent } from "./frames" import { normalizeEventForViewport } from "./normalizeEventForViewport" const pointerEvents = [ @@ -35,7 +34,6 @@ export const eventsEnhancer = const unregister = passthroughEvents.map((event) => { const listener = (e: MouseEvent | PointerEvent | TouchEvent) => { let convertedEvent = e - /** * We have to create a new fake event since the original one is already dispatched * on original frame. @@ -47,10 +45,9 @@ export const eventsEnhancer = } if (convertedEvent !== e) { - attachOriginalFrameEventToDocumentEvent(convertedEvent, e) - const normalizedEvent = normalizeEventForViewport( convertedEvent, + e, reader.spine.locator, ) diff --git a/packages/core/src/enhancers/events/frames.ts b/packages/core/src/enhancers/events/frames.ts deleted file mode 100644 index e5788d73..00000000 --- a/packages/core/src/enhancers/events/frames.ts +++ /dev/null @@ -1,19 +0,0 @@ -export const __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY = `__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT` - -export const attachOriginalFrameEventToDocumentEvent = ( - event: E, - frameEvent: E, -) => { - Object.defineProperty(event, __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY, { - value: frameEvent, - enumerable: true, - }) -} - -export const getOriginalFrameEventFromDocumentEvent = ( - event: E, -): E | undefined => { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - return event[__UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY] -} diff --git a/packages/core/src/enhancers/events/normalizeEventForViewport.ts b/packages/core/src/enhancers/events/normalizeEventForViewport.ts index 857b0498..53eed2c0 100644 --- a/packages/core/src/enhancers/events/normalizeEventForViewport.ts +++ b/packages/core/src/enhancers/events/normalizeEventForViewport.ts @@ -1,7 +1,3 @@ -import { - __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY, - getOriginalFrameEventFromDocumentEvent, -} from "./frames" import { SpineLocator } from "../../spine/locator/SpineLocator" import { isMouseEvent, isPointerEvent, isTouchEvent } from "../../utils/dom" @@ -9,17 +5,12 @@ export const normalizeEventForViewport = < E extends MouseEvent | TouchEvent | PointerEvent, >( event: E, + iframeOriginalEvent: E, locator: SpineLocator, ) => { - // const eventIsComingFromBridge = event.target === iframeEventBridgeElement$.getValue() - const eventIsComingFromBridge = - __UNSAFE_REFERENCE_ORIGINAL_IFRAME_EVENT_KEY in event - - const iframeOriginalEvent = getOriginalFrameEventFromDocumentEvent(event) const originalFrame = iframeOriginalEvent?.view?.frameElement - if (!eventIsComingFromBridge || !iframeOriginalEvent || !originalFrame) - return event + if (!iframeOriginalEvent || !originalFrame) return event const spineItem = locator.getSpineItemFromIframe(originalFrame) diff --git a/packages/core/src/enhancers/hotkeys.ts b/packages/core/src/enhancers/hotkeys.ts index 23e102d9..ed1b5a4d 100644 --- a/packages/core/src/enhancers/hotkeys.ts +++ b/packages/core/src/enhancers/hotkeys.ts @@ -28,21 +28,21 @@ export const hotkeysEnhancer = map(([e, { pageTurnDirection }]) => { if (pageTurnDirection === "horizontal") { if (e.key === `ArrowRight`) { - reader.navigation.turnRight() + return reader.navigation.turnRight() } if (e.key === `ArrowLeft`) { - reader.navigation.turnLeft() + return reader.navigation.turnLeft() } } if (pageTurnDirection === "vertical") { if (e.key === `ArrowDown`) { - reader.navigation.turnRight() + return reader.navigation.turnRight() } if (e.key === `ArrowUp`) { - reader.navigation.turnLeft() + return reader.navigation.turnLeft() } } diff --git a/packages/core/src/enhancers/navigation/navigators/manualNavigator.ts b/packages/core/src/enhancers/navigation/navigators/manualNavigator.ts index e80fb0e0..5aeeb566 100644 --- a/packages/core/src/enhancers/navigation/navigators/manualNavigator.ts +++ b/packages/core/src/enhancers/navigation/navigators/manualNavigator.ts @@ -3,6 +3,7 @@ import { Report } from "../../../report" import { ViewportPosition } from "../../../navigation/viewport/ViewportNavigator" import { getNavigationForRightOrBottomPage } from "../resolvers/getNavigationForRightOrBottomPage" import { getNavigationForLeftOrTopPage } from "../resolvers/getNavigationForLeftOrTopPage" +import { UserNavigationEntry } from "../../../navigation/UserNavigator" export class ManualNavigator { movingLastDelta = { x: 0, y: 0 } @@ -78,7 +79,10 @@ export class ManualNavigator { }) } - goToSpineItem(indexOrId: number | string) { + goToSpineItem({ + indexOrId, + ...rest + }: { indexOrId: number | string } & Pick) { const spineItem = this.reader.spineItemsManager.get(indexOrId) if (spineItem === undefined) { @@ -92,6 +96,7 @@ export class ManualNavigator { this.reader.navigation.navigate({ spineItem: indexOrId, + ...rest, }) } @@ -102,7 +107,7 @@ export class ManualNavigator { threshold: 0.5, }) || {} - this.goToSpineItem(endIndex + 1) + this.goToSpineItem({ indexOrId: endIndex + 1 }) } goToPreviousSpineItem() { @@ -112,7 +117,7 @@ export class ManualNavigator { threshold: 0.5, }) ?? {} - this.goToSpineItem(beginIndex - 1) + this.goToSpineItem({ indexOrId: beginIndex - 1 }) } goToUrl(url: string | URL) { @@ -197,7 +202,14 @@ export class ManualNavigator { return this.goToNextSpineItem() } - goToPageOfSpineItem(pageIndex: number, spineItemId: string | number) { + goToPageOfSpineItem({ + pageIndex, + spineItemId, + ...rest + }: { + pageIndex: number + spineItemId: string | number + } & Pick) { const position = this.reader.navigation.navigationResolver.getNavigationForSpineItemPage({ pageIndex, @@ -206,6 +218,7 @@ export class ManualNavigator { this.reader.navigation.navigate({ position, + ...rest, }) } } diff --git a/packages/core/src/enhancers/pagination/pagination.test.ts b/packages/core/src/enhancers/pagination/pagination.test.ts index 82cfb224..46d54a2a 100644 --- a/packages/core/src/enhancers/pagination/pagination.test.ts +++ b/packages/core/src/enhancers/pagination/pagination.test.ts @@ -133,7 +133,7 @@ describe("Given a book with one chapter", () => { containerElement: document.getElementById("test-container")!, }) - reader.navigation.goToSpineItem(1) + reader.navigation.goToSpineItem({ indexOrId: 1 }) }) expect(value.beginChapterInfo).toEqual({ @@ -205,7 +205,7 @@ describe("Given a book with one chapter", () => { containerElement: document.getElementById("test-container")!, }) - reader.navigation.goToSpineItem(1) + reader.navigation.goToSpineItem({ indexOrId: 1 }) }) expect(value.beginChapterInfo).toEqual({ diff --git a/packages/demo/src/reader/navigation/Scrubber.tsx b/packages/demo/src/reader/navigation/Scrubber.tsx index f9f5f34d..aa5ca609 100644 --- a/packages/demo/src/reader/navigation/Scrubber.tsx +++ b/packages/demo/src/reader/navigation/Scrubber.tsx @@ -36,9 +36,13 @@ export const Scrubber = () => { const pageIndex = isUsingSpread ? Math.floor(value) * 2 : Math.floor(value) if (isComic) { - reader?.navigation.goToSpineItem(pageIndex) + reader?.navigation.goToSpineItem({ indexOrId: pageIndex, animation: false }) } else { - reader?.navigation.goToPageOfSpineItem(pageIndex, pagination?.beginSpineItemIndex ?? 0) + reader?.navigation.goToPageOfSpineItem({ + pageIndex, + spineItemId: pagination?.beginSpineItemIndex ?? 0, + animation: false + }) } } },