From 371ccb5b4a6a34fa8a2b9f3cc5029e5a9a110944 Mon Sep 17 00:00:00 2001 From: Not Existing <61290107+N0tExisting@users.noreply.github.com> Date: Mon, 26 Feb 2024 16:21:56 +0100 Subject: [PATCH 1/2] Memoise `isActiveDraggable` --- src/create-draggable.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/create-draggable.ts b/src/create-draggable.ts index b1cfb36..0c1c68c 100644 --- a/src/create-draggable.ts +++ b/src/create-draggable.ts @@ -1,6 +1,7 @@ import { createEffect, createSignal, + createMemo, onCleanup, onMount, Setter, @@ -42,7 +43,7 @@ const createDraggable = (id: Id, data: Record = {}): Draggable => { }); onCleanup(() => removeDraggable(id)); - const isActiveDraggable = () => state.active.draggableId === id; + const isActiveDraggable = createMemo(() => state.active.draggableId === id); const transform = () => { return state.draggables[id]?.transform || noopTransform(); }; From cb475654242de22e1fc73f1405715ca280161e05 Mon Sep 17 00:00:00 2001 From: N0tExisting <61290107+N0tExisting@users.noreply.github.com> Date: Tue, 27 Feb 2024 12:34:15 +0100 Subject: [PATCH 2/2] Aggressively memoize (almost) everyting --- src/create-draggable.ts | 8 +++----- src/create-droppable.ts | 7 ++++--- src/create-pointer-sensor.ts | 4 ++-- src/create-sortable.ts | 18 +++++++++++------- src/drag-overlay.tsx | 7 +++---- 5 files changed, 23 insertions(+), 21 deletions(-) diff --git a/src/create-draggable.ts b/src/create-draggable.ts index 0c1c68c..ec1441f 100644 --- a/src/create-draggable.ts +++ b/src/create-draggable.ts @@ -44,9 +44,9 @@ const createDraggable = (id: Id, data: Record = {}): Draggable => { onCleanup(() => removeDraggable(id)); const isActiveDraggable = createMemo(() => state.active.draggableId === id); - const transform = () => { + const transform = createMemo(() => { return state.draggables[id]?.transform || noopTransform(); - }; + }); const draggable = Object.defineProperties( (element: HTMLElement, accessor?: () => { skipTransform?: boolean }) => { @@ -97,9 +97,7 @@ const createDraggable = (id: Id, data: Record = {}): Draggable => { }, dragActivators: { enumerable: true, - get: () => { - return draggableActivators(id, true); - }, + get: createMemo(() => draggableActivators(id, true)), }, transform: { enumerable: true, diff --git a/src/create-droppable.ts b/src/create-droppable.ts index 8e605bd..c794ffb 100644 --- a/src/create-droppable.ts +++ b/src/create-droppable.ts @@ -1,5 +1,6 @@ import { createEffect, + createMemo, createSignal, onCleanup, onMount, @@ -40,10 +41,10 @@ const createDroppable = (id: Id, data: Record = {}): Droppable => { }); onCleanup(() => removeDroppable(id)); - const isActiveDroppable = () => state.active.droppableId === id; - const transform = () => { + const isActiveDroppable = createMemo(() => state.active.droppableId === id); + const transform = createMemo(() => { return state.droppables[id]?.transform || noopTransform(); - }; + }); const droppable = Object.defineProperties( (element: HTMLElement, accessor?: () => { skipTransform?: boolean }) => { const config = accessor ? accessor() : {}; diff --git a/src/create-pointer-sensor.ts b/src/create-pointer-sensor.ts index 3696983..f54b01d 100644 --- a/src/create-pointer-sensor.ts +++ b/src/create-pointer-sensor.ts @@ -1,4 +1,4 @@ -import { onCleanup, onMount } from "solid-js"; +import { createMemo, onCleanup, onMount } from "solid-js"; import { Coordinates, @@ -32,7 +32,7 @@ const createPointerSensor = (id: Id = "pointer-sensor"): void => { removeSensor(id); }); - const isActiveSensor = () => state.active.sensorId === id; + const isActiveSensor = createMemo(() => state.active.sensorId === id); const initialCoordinates: Coordinates = { x: 0, y: 0 }; diff --git a/src/create-sortable.ts b/src/create-sortable.ts index a185ef1..ac50b1a 100644 --- a/src/create-sortable.ts +++ b/src/create-sortable.ts @@ -1,4 +1,4 @@ -import { createEffect, onCleanup, onMount } from "solid-js"; +import { createEffect, createMemo, onCleanup, onMount } from "solid-js"; import { createDraggable } from "./create-draggable"; import { createDroppable } from "./create-droppable"; @@ -30,12 +30,16 @@ const createSortable = (id: Id, data: Record = {}): Sortable => { const droppable = createDroppable(id, data); const setNode = combineRefs(draggable.ref, droppable.ref); - const initialIndex = (): number => sortableState.initialIds.indexOf(id); - const currentIndex = (): number => sortableState.sortedIds.indexOf(id); + const initialIndex = createMemo((): number => + sortableState.initialIds.indexOf(id) + ); + const currentIndex = createMemo((): number => + sortableState.sortedIds.indexOf(id) + ); const layoutById = (id: Id): Layout | null => dndState.droppables[id]?.layout || null; - const sortedTransform = (): Transform => { + const sortedTransform = createMemo((): Transform => { const delta = noopTransform(); const resolvedInitialIndex = initialIndex(); const resolvedCurrentIndex = currentIndex(); @@ -53,7 +57,7 @@ const createSortable = (id: Id, data: Record = {}): Sortable => { } return delta; - }; + }); const transformer: Transformer = { id: "sortableOffset", @@ -67,13 +71,13 @@ const createSortable = (id: Id, data: Record = {}): Sortable => { onMount(() => addTransformer("droppables", id, transformer)); onCleanup(() => removeTransformer("droppables", id, transformer.id)); - const transform = (): Transform => { + const transform = createMemo((): Transform => { return ( (id === dndState.active.draggableId && !dndState.active.overlay ? dndState.draggables[id]?.transform : dndState.droppables[id]?.transform) || noopTransform() ); - }; + }); const sortable = Object.defineProperties( (element: HTMLElement) => { diff --git a/src/drag-overlay.tsx b/src/drag-overlay.tsx index 1b0c2f5..71e8439 100644 --- a/src/drag-overlay.tsx +++ b/src/drag-overlay.tsx @@ -1,5 +1,5 @@ import { Portal } from "solid-js/web"; -import { Component, JSX, Show } from "solid-js"; +import { Component, JSX, Show, createMemo } from "solid-js"; import { Draggable, useDragDropContext } from "./drag-drop-context"; import { transformStyle } from "./style"; @@ -39,7 +39,7 @@ const DragOverlay: Component = (props) => { onDragEnd(() => queueMicrotask(clearOverlay)); - const style = (): JSX.CSSProperties => { + const style = createMemo((): JSX.CSSProperties => { const overlay = state.active.overlay; const draggable = state.active.draggable; if (!overlay || !draggable) return {}; @@ -54,7 +54,7 @@ const DragOverlay: Component = (props) => { ...transformStyle(overlay.transform), ...props.style, }; - }; + }); return ( @@ -70,4 +70,3 @@ const DragOverlay: Component = (props) => { }; export { DragOverlay }; -