fix(library): preserve compatibility and drag anchors

Author: FelixTJDietrich

library/lib/components/DraggableGhost.tsx

@@ -82,11 +82,9 @@ export const DraggableGhost: React.FC<DraggableGhostProps> = ({
   const startRef = useRef<XYPosition | null>(null)
   const maxTravelRef = useRef(0)
   const pointerTypeRef = useRef<string>("mouse")
-  // Where the cursor grabbed the preview, as a FRACTION of its box; backed out on
-  // drop so that same point stays under the pointer. A pixel offset would not
-  // work: the ghost and the dropped node are drawn at sizes the preview does not
-  // share, so only a fraction lines up at any zoom.
-  const grabFractionRef = useRef<XYPosition>({ x: 0, y: 0 })
+  // Where the cursor grabbed the preview in the dropped node's flow-space units;
+  // the same offset positions both the ghost and the committed node.
+  const grabOffsetRef = useRef<XYPosition>({ x: 0, y: 0 })
   // True once a press has turned into a drag, so the trailing click is ignored.
   const draggedRef = useRef(false)
 
@@ -113,13 +111,19 @@ export const DraggableGhost: React.FC<DraggableGhostProps> = ({
     const previewRect = (
       previewElement ?? event.currentTarget
     ).getBoundingClientRect()
-    const grabX = previewRect.width
-      ? (event.clientX - previewRect.left) / previewRect.width
-      : 0
-    const grabY = previewRect.height
-      ? (event.clientY - previewRect.top) / previewRect.height
-      : 0
-    grabFractionRef.current = { x: grabX, y: grabY }
+    // Sidebar previews scale uniformly. Recover the grab point in their
+    // unscaled painted coordinates from the horizontal scale (the vertical
+    // extent may include a label band), then map each axis onto the drop size.
+    const previewScale = previewRect.width / dropElementConfig.width || 1
+    const grabOffset = {
+      x:
+        ((event.clientX - previewRect.left) / previewScale) *
+        (ghostDropWidth / dropElementConfig.width),
+      y:
+        ((event.clientY - previewRect.top) / previewScale) *
+        (ghostDropHeight / dropElementConfig.height),
+    }
+    grabOffsetRef.current = grabOffset
 
     // Draw the ghost at the on-screen size the node will have at this zoom. The
     // drop size is used rather than the palette size so an element that drops
@@ -129,12 +133,13 @@ export const DraggableGhost: React.FC<DraggableGhostProps> = ({
     const zoom = getViewport().zoom
     setGhostRender({ scale: zoom })
 
-    const ghostWidth = ghostDropWidth * zoom
-    const ghostHeight = ghostDropHeight * zoom
-    setGhostOffset({ x: grabX * ghostWidth, y: grabY * ghostHeight })
+    setGhostOffset({
+      x: grabOffset.x * zoom,
+      y: grabOffset.y * zoom,
+    })
     setGhostPosition({
-      x: event.clientX - grabX * ghostWidth,
-      y: event.clientY - grabY * ghostHeight,
+      x: event.clientX - grabOffset.x * zoom,
+      y: event.clientY - grabOffset.y * zoom,
     })
 
     setIsDragging(true)
@@ -195,7 +200,7 @@ export const DraggableGhost: React.FC<DraggableGhostProps> = ({
         : DROPS.TAP_SLOP_MOUSE_PX
     const placed =
       maxTravelRef.current >= slop &&
-      dropRef.current(event, grabFractionRef.current)
+      dropRef.current(event, grabOffsetRef.current)
     if (placed) suppressTrailingClick()
     else draggedRef.current = false
   }

library/lib/hooks/usePalettePlacement.ts

@@ -130,7 +130,7 @@ export function usePalettePlacement(dropElementConfig: DropElementConfig) {
   const dropAtPointer = useCallback(
     (
       event: { clientX: number; clientY: number },
-      grabFraction: XYPosition
+      grabOffset: XYPosition
     ): boolean => {
       const canvas = getCanvas()
       if (!canvas) {
@@ -146,14 +146,6 @@ export function usePalettePlacement(dropElementConfig: DropElementConfig) {
         event.clientY > bounds.bottom
       if (outside) return false
 
-      // The grabbed fraction maps straight onto the drop size, so the cursor stays
-      // over the same relative point of the node it becomes. Taking it from the
-      // preview's pixel height instead would be wrong for the elements whose
-      // preview reserves a label band the shape itself does not have.
-      const dropWidth = dropElementConfig.dropWidth ?? dropElementConfig.width
-      const dropHeight =
-        dropElementConfig.dropHeight ?? dropElementConfig.height
-
       // Parent is hit-tested at the snapped cursor (where the ghost is
       // anchored); the node's top-left is the cursor backed out by the offset.
       const parent = findDropParent(
@@ -166,8 +158,8 @@ export function usePalettePlacement(dropElementConfig: DropElementConfig) {
         x: event.clientX,
         y: event.clientY,
       })
-      absolute.x -= Math.floor((grabFraction.x * dropWidth) / snapPx) * snapPx
-      absolute.y -= Math.floor((grabFraction.y * dropHeight) / snapPx) * snapPx
+      absolute.x -= Math.floor(grabOffset.x / snapPx) * snapPx
+      absolute.y -= Math.floor(grabOffset.y / snapPx) * snapPx
 
       let position = absolute
       if (parent) {

library/lib/i18n/labels.ts

@@ -27,9 +27,9 @@ export interface ApollonLabels {
    * Apple hardware, "Ctrl" elsewhere) so the sentence reads naturally in any
    * language without the host having to detect the platform itself.
    */
-  scrollLockHint: (modifier: string) => string
+  scrollLockHint?: (modifier: string) => string
   /** Same situation, but for a touch device, where there is no modifier key. */
-  scrollLockHintTouch: string
+  scrollLockHintTouch?: string
   /**
    * Accessible name for an authored straight-edge waypoint handle.
    * Optional so a complete dictionary written against an older library release
@@ -71,7 +71,8 @@ export interface ApollonLabels {
   deleteAssessment: string
   deleteAssessmentFor: (name: string) => string
   assessmentFor: (type: string) => string
-  previousAssessment: string
+  /** Optional for dictionaries authored before assessment navigation existed. */
+  previousAssessment?: string
   nextAssessment: string
   noComment: string
   notGraded: string

library/lib/i18n/useLabels.ts

@@ -1,6 +1,7 @@
 import { useMetadataStore } from "@/store/context"
-import type { ApollonLabels } from "./labels"
+import type { ResolvedApollonLabels } from "./labels"
 
 /** The editor's active label set (English defaults merged with host overrides).
  *  Reactive — a host swapping `labels` re-renders chrome without a remount. */
-export const useLabels = (): ApollonLabels => useMetadataStore((s) => s.labels)
+export const useLabels = (): ResolvedApollonLabels =>
+  useMetadataStore((s) => s.labels)

library/tests/unit/labels.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest"
 import { DEFAULT_LABELS, mergeLabels } from "@/i18n/labels"
+import type { ApollonLabels } from "@/i18n/labels"
 
 describe("mergeLabels", () => {
   it("fills labels introduced after a host's partial dictionary was written", () => {
@@ -8,4 +9,18 @@ describe("mergeLabels", () => {
     expect(labels.zoomIn).toBe("Vergrößern")
     expect(labels.moveEdgeWaypoint).toBe(DEFAULT_LABELS.moveEdgeWaypoint)
   })
+
+  it("keeps a complete dictionary from before the new host labels assignable", () => {
+    const {
+      scrollLockHint: _scrollLockHint,
+      scrollLockHintTouch: _scrollLockHintTouch,
+      previousAssessment: _previousAssessment,
+      ...legacyDictionary
+    } = DEFAULT_LABELS
+    const compatibleDictionary: ApollonLabels = legacyDictionary
+
+    expect(mergeLabels(compatibleDictionary).scrollLockHintTouch).toBe(
+      DEFAULT_LABELS.scrollLockHintTouch
+    )
+  })
 })

library/tests/unit/paletteTapPlacement.test.tsx

@@ -103,14 +103,17 @@ beforeEach(() => {
 
 afterEach(() => canvas.remove())
 
-const mountGhost = () => {
+const mountGhost = (
+  dropConfig: DropElementConfig = config,
+  previewRect: DOMRect = PREVIEW_RECT
+) => {
   const { getByRole } = render(
-    <DraggableGhost dropElementConfig={config}>
+    <DraggableGhost dropElementConfig={dropConfig}>
       <div data-testid="entry">entry</div>
     </DraggableGhost>
   )
   const wrapper = getByRole("button")
-  wrapper.getBoundingClientRect = () => PREVIEW_RECT
+  wrapper.getBoundingClientRect = () => previewRect
   return wrapper
 }
 
@@ -186,6 +189,36 @@ describe("palette tap-to-place", () => {
     expect(setSelectedElementsId).not.toHaveBeenCalled()
   })
 
+  it("preserves a grab inside a preview label band for the ghost and drop", () => {
+    const labelConfig = {
+      ...config,
+      width: 60,
+      height: 60,
+    } as DropElementConfig
+    const labelPreviewRect = {
+      ...PREVIEW_RECT,
+      right: 60,
+      bottom: 90,
+      width: 60,
+      height: 90,
+    } as DOMRect
+    const wrapper = mountGhost(labelConfig, labelPreviewRect)
+
+    // The preview includes a 30px label band below its 60px node body. Its
+    // painted midpoint is therefore 45px down, not 30px down.
+    fireEvent.pointerDown(wrapper, { clientX: 30, clientY: 45 })
+    fireEvent.pointerMove(document, { clientX: 400, clientY: 300 })
+
+    const ghost = Array.from(
+      document.querySelectorAll<HTMLElement>("[data-draggable-preview]")
+    ).find((element) => element.style.position === "fixed")
+    expect(ghost?.style.left).toBe("370px")
+    expect(ghost?.style.top).toBe("255px")
+
+    fireEvent.pointerUp(document, { clientX: 400, clientY: 300 })
+    expect(placedNodes()[0].position).toEqual({ x: 370, y: 255 })
+  })
+
   it("a wobble that releases off-canvas places nothing on drop, then centres on the click", () => {
     const wrapper = mountGhost()
     fireEvent.pointerDown(wrapper, { clientX: 30, clientY: 30 })