@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/formBuilder/useFormBuilderDrag.ts

@@ -0,0 +1,498 @@
+import {
+  AUTO_SCROLL_EDGE_PX,
+  AUTO_SCROLL_MAX_SPEED,
+  TOUCH_LONG_PRESS_MS,
+  autoScrollVelocity,
+  describeCancel,
+  describeDragState,
+  gapPosition,
+  insertionIndexForY,
+  isWeb,
+  keyboardLift,
+  keyboardMove,
+  resolveDrop,
+  siblingOffset,
+  type KanbanAnnouncement,
+  type KanbanDropTarget,
+  type KanbanKeyboardDrag,
+  type KanbanMoveDirection,
+} from "@multiplatform.one/components";
+import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
+import {
+  fieldLocation,
+  findField,
+  insertField,
+  moveField,
+  newFieldFromType,
+  tabBoard,
+  type BuilderField,
+  type BuilderLayout,
+} from "./model";
+
+export interface BuilderPointerEvent {
+  button?: number;
+  pointerType?: string;
+  pointerId?: number;
+  clientX: number;
+  clientY: number;
+  currentTarget: EventTarget | null;
+}
+
+interface DragSession extends KanbanKeyboardDrag {
+  field: BuilderField;
+  palette: boolean;
+  mode: "pointer" | "keyboard";
+  size: number;
+  width: number;
+  height: number;
+  x: number;
+  y: number;
+  grabX: number;
+  grabY: number;
+  overColumn: boolean;
+}
+
+function measureSlot(element: HTMLElement) {
+  const rect = element.getBoundingClientRect();
+  const gap = element.parentElement
+    ? Number.parseFloat(getComputedStyle(element.parentElement).rowGap) || 0
+    : 0;
+  return { rect, size: rect.height + gap };
+}
+
+function translatedY(element: HTMLElement): number {
+  const transform = getComputedStyle(element).transform;
+  return transform && transform !== "none" && typeof DOMMatrixReadOnly === "function"
+    ? new DOMMatrixReadOnly(transform).m42
+    : 0;
+}
+
+export function useFormBuilderDrag({
+  layout,
+  tabKey,
+  onChange,
+  onSelect,
+}: {
+  layout: BuilderLayout;
+  tabKey: string;
+  onChange: (layout: BuilderLayout) => void;
+  onSelect: (key: string) => void;
+}) {
+  const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const [drag, setDrag] = useState<DragSession | null>(null);
+  const [announcement, setAnnouncement] = useState("");
+  const current = useRef(drag);
+  const cleanup = useRef<(() => void) | undefined>(undefined);
+  const suppressClick = useRef(false);
+  const scrollRef = useRef<HTMLElement | null>(null);
+  const board = tabBoard(layout, tabKey, (column, index) => {
+    const section = layout.tabs
+      .flatMap((tab) => tab.sections)
+      .find((s) => s.columns.some((c) => c.key === column.key));
+    return t("formBuilder.columnPosition", "{{section}}, column {{number}}", {
+      section: section?.df?.label || t("formBuilder.untitledSection", "Untitled section"),
+      number: index + 1,
+    });
+  });
+  const latest = useRef({ layout, onChange, onSelect, board });
+  latest.current = { layout, onChange, onSelect, board };
+
+  function publish(next: DragSession | null) {
+    current.current = next;
+    setDrag(next);
+  }
+  function announce(value: KanbanAnnouncement) {
+    setAnnouncement(
+      value.type === "cancel"
+        ? t(
+            "formBuilder.drag.cancel",
+            "Movement cancelled. {{card}} returned to {{column}}.",
+            value,
+          )
+        : value.type === "lift"
+          ? t(
+              "formBuilder.drag.lift",
+              "Lifted {{card}} in {{column}}, position {{position}} of {{count}}. Use arrow keys to move, space to drop, escape to cancel.",
+              value,
+            )
+          : value.type === "move"
+            ? t(
+                "formBuilder.drag.move",
+                "Moved {{card}} to {{column}}, position {{position}} of {{count}}.",
+                value,
+              )
+            : t(
+                "formBuilder.drag.drop",
+                "Dropped {{card}} in {{column}}, position {{position}} of {{count}}.",
+                value,
+              ),
+    );
+  }
+  function end(commit: boolean) {
+    const session = current.current;
+    cleanup.current?.();
+    if (!session) return;
+    const result = resolveDrop(session);
+    const state = latest.current;
+    const accepted = commit && session.overColumn && result.commit;
+    publish(null);
+    if (accepted) {
+      if (session.palette) {
+        const inserted = insertField(state.layout, session.field, result.to);
+        state.onChange(inserted.layout);
+        state.onSelect(inserted.key);
+      } else {
+        state.onChange(moveField(state.layout, session.field.key, result.to));
+        state.onSelect(session.field.key);
+      }
+    }
+    const label = session.field.df.label || session.field.df.fieldname;
+    announce(
+      accepted
+        ? describeDragState("drop", session, state.board, label)
+        : describeCancel(session, state.board, label),
+    );
+    if (session.mode === "keyboard")
+      requestAnimationFrame(() => {
+        document
+          .querySelector<HTMLElement>(`[data-sortable-handle="${session.field.key}"]`)
+          ?.focus();
+      });
+  }
+
+  function offset(columnId: string, index: number, session = current.current) {
+    return session
+      ? siblingOffset({
+          index,
+          sourceIndex: columnId === session.sourceColumnId ? session.sourceIndex : null,
+          gapIndex:
+            columnId === session.target.columnId && session.overColumn
+              ? session.target.index
+              : null,
+          size: session.size,
+        })
+      : 0;
+  }
+
+  function hitTest(
+    x: number,
+    y: number,
+    session: DragSession,
+  ): { target: KanbanDropTarget; overColumn: boolean } {
+    const element = document.elementFromPoint(x, y)?.closest<HTMLElement>("[data-fb-column]");
+    const columnId = element?.getAttribute("data-fb-column");
+    if (!element || !columnId || !latest.current.board.some((c) => c.id === columnId))
+      return {
+        target: { columnId: session.sourceColumnId, index: session.sourceIndex },
+        overColumn: false,
+      };
+    const rect = element.getBoundingClientRect();
+    const items = Array.from(
+      element.querySelectorAll<HTMLElement>("[data-fb-field]"),
+      (field, index) => {
+        const fieldRect = field.getBoundingClientRect();
+        return {
+          index,
+          start: fieldRect.top - rect.top - translatedY(field),
+          size: fieldRect.height,
+        };
+      },
+    );
+    return {
+      overColumn: true,
+      target: {
+        columnId,
+        index: insertionIndexForY({
+          localY: y - rect.top,
+          items,
+          sourceIndex: columnId === session.sourceColumnId ? session.sourceIndex : null,
+          count: items.length,
+          size: session.size,
+        }),
+      },
+    };
+  }
+
+  function pointerDown(field: BuilderField, palette: boolean, event: BuilderPointerEvent) {
+    if (
+      !isWeb ||
+      (event.button && event.button !== 0) ||
+      current.current ||
+      typeof document === "undefined"
+    )
+      return;
+    cleanup.current?.();
+    const element = (event.currentTarget as HTMLElement)?.closest<HTMLElement>(
+      palette ? "[data-fb-palette]" : "[data-fb-field]",
+    );
+    if (!element) return;
+    const location = fieldLocation(latest.current.layout, field.key);
+    if (!palette && !location) return;
+    const start = { x: event.clientX, y: event.clientY };
+    let pointer = start;
+    let lifted = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let frame: number | undefined;
+    const oldSelect = document.body.style.userSelect;
+    const oldCursor = document.documentElement.style.cursor;
+    function update() {
+      const session = current.current;
+      if (!session) return;
+      const hit = hitTest(pointer.x, pointer.y, session);
+      const next = {
+        ...session,
+        ...hit,
+        x: pointer.x - session.grabX,
+        y: pointer.y - session.grabY,
+      };
+      if (
+        hit.overColumn &&
+        (session.target.columnId !== hit.target.columnId ||
+          session.target.index !== hit.target.index)
+      )
+        announce(
+          describeDragState(
+            "move",
+            next,
+            latest.current.board,
+            field.df.label || field.df.fieldname,
+          ),
+        );
+      publish(next);
+    }
+    function tick() {
+      if (!current.current) return;
+      const canvas = scrollRef.current;
+      if (canvas) {
+        const rect = canvas.getBoundingClientRect();
+        const velocity =
+          pointer.x >= rect.left && pointer.x <= rect.right
+            ? autoScrollVelocity({
+                pos: pointer.y,
+                start: rect.top,
+                end: rect.bottom,
+                edge: AUTO_SCROLL_EDGE_PX,
+                maxSpeed: AUTO_SCROLL_MAX_SPEED,
+              })
+            : 0;
+        if (velocity) {
+          canvas.scrollTop += velocity;
+          update();
+        }
+      }
+      frame = requestAnimationFrame(tick);
+    }
+    function lift() {
+      const { rect, size } = measureSlot(element!);
+      const session: DragSession = {
+        field,
+        palette,
+        mode: "pointer",
+        sourceColumnId: palette ? "palette" : location!.columnKey,
+        sourceIndex: palette ? -1 : location!.index,
+        target: {
+          columnId: palette ? "palette" : location!.columnKey,
+          index: palette ? -1 : location!.index,
+        },
+        size,
+        width: rect.width,
+        height: rect.height,
+        x: rect.left,
+        y: rect.top,
+        grabX: start.x - rect.left,
+        grabY: start.y - rect.top,
+        overColumn: !palette,
+      };
+      lifted = true;
+      document.body.style.userSelect = "none";
+      document.documentElement.style.cursor = "grabbing";
+      publish(session);
+      announce(
+        describeDragState(
+          "lift",
+          session,
+          latest.current.board,
+          field.df.label || field.df.fieldname,
+        ),
+      );
+      update();
+      frame = requestAnimationFrame(tick);
+    }
+    const matches = (e: PointerEvent) =>
+      event.pointerId === undefined || e.pointerId === event.pointerId;
+    const move = (e: PointerEvent) => {
+      if (!matches(e)) return;
+      pointer = { x: e.clientX, y: e.clientY };
+      if (!lifted && Math.hypot(pointer.x - start.x, pointer.y - start.y) >= 5) {
+        if (!event.pointerType || event.pointerType === "mouse") lift();
+        else cleanup.current?.();
+      }
+      if (lifted) update();
+    };
+    const up = (e: PointerEvent) => {
+      if (!matches(e)) return;
+      pointer = { x: e.clientX, y: e.clientY };
+      if (lifted) update();
+      end(lifted);
+    };
+    const cancel = () => end(false);
+    const key = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        end(false);
+      }
+    };
+    const touch = (e: TouchEvent) => {
+      if (lifted) e.preventDefault();
+    };
+    const context = (e: Event) => {
+      if (lifted || timer) e.preventDefault();
+    };
+    cleanup.current = () => {
+      clearTimeout(timer);
+      if (frame !== undefined) cancelAnimationFrame(frame);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      window.removeEventListener("pointercancel", cancel);
+      window.removeEventListener("keydown", key, true);
+      window.removeEventListener("touchmove", touch);
+      window.removeEventListener("contextmenu", context, true);
+      document.body.style.userSelect = oldSelect;
+      document.documentElement.style.cursor = oldCursor;
+      cleanup.current = undefined;
+      if (lifted) {
+        suppressClick.current = true;
+        setTimeout(() => {
+          suppressClick.current = false;
+        }, 0);
+      }
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+    window.addEventListener("pointercancel", cancel);
+    window.addEventListener("keydown", key, true);
+    window.addEventListener("touchmove", touch, { passive: false });
+    window.addEventListener("contextmenu", context, true);
+    if (event.pointerType && event.pointerType !== "mouse")
+      timer = setTimeout(lift, TOUCH_LONG_PRESS_MS);
+  }
+
+  function keyDown(fieldKey: string, event: { key: string; preventDefault: () => void }) {
+    if (!isWeb) return;
+    const state = latest.current;
+    const session = current.current;
+    if (!session) {
+      if (event.key !== " " && event.key !== "Enter") return;
+      const location = fieldLocation(state.layout, fieldKey);
+      const field = findField(state.layout, fieldKey);
+      if (!location || !field) return;
+      const lifted = keyboardLift(state.board, location.columnKey, location.index);
+      if (!lifted) return;
+      event.preventDefault();
+      const element = document.querySelector<HTMLElement>(`[data-fb-field="${fieldKey}"]`);
+      const measurement = element ? measureSlot(element) : undefined;
+      const rect = measurement?.rect;
+      const next: DragSession = {
+        ...lifted,
+        field,
+        palette: false,
+        mode: "keyboard",
+        size: measurement?.size ?? 0,
+        width: rect?.width ?? 0,
+        height: rect?.height ?? 0,
+        x: rect?.left ?? 0,
+        y: rect?.top ?? 0,
+        grabX: 0,
+        grabY: 0,
+        overColumn: true,
+      };
+      publish(next);
+      announce(describeDragState("lift", next, state.board, field.df.label || field.df.fieldname));
+      return;
+    }
+    if (session.mode !== "keyboard") return;
+    if (event.key === "Escape" || event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      end(event.key !== "Escape");
+      return;
+    }
+    const directions: Record<string, KanbanMoveDirection> = {
+      ArrowUp: "up",
+      ArrowDown: "down",
+      ArrowLeft: "left",
+      ArrowRight: "right",
+    };
+    if (!directions[event.key]) return;
+    event.preventDefault();
+    const moved = { ...session, ...keyboardMove(session, state.board, directions[event.key]) };
+    const column = document.querySelector<HTMLElement>(
+      `[data-fb-column="${moved.target.columnId}"]`,
+    );
+    const fields = Array.from(column?.querySelectorAll<HTMLElement>("[data-fb-field]") ?? []);
+    const rect = column?.getBoundingClientRect();
+    if (rect) {
+      const starts = fields.map((field) => field.getBoundingClientRect().top - translatedY(field));
+      const last = fields.at(-1);
+      moved.x = rect.left;
+      moved.y = fields.length
+        ? gapPosition({
+            gapIndex: moved.target.index,
+            sourceIndex: moved.target.columnId === moved.sourceColumnId ? moved.sourceIndex : null,
+            count: fields.length,
+            size: moved.size,
+            totalSize: starts.at(-1)! + measureSlot(last!).size,
+            getStart: (index) => starts[index],
+          })
+        : (column?.querySelector("[data-fb-dropzone]")?.getBoundingClientRect().top ?? rect.top);
+    }
+    publish(moved);
+    announce(
+      describeDragState(
+        "move",
+        moved,
+        state.board,
+        moved.field.df.label || moved.field.df.fieldname,
+      ),
+    );
+  }
+
+  const endRef = useRef(end);
+  endRef.current = end;
+  useEffect(() => {
+    if (!isWeb) return;
+    const cancel = (event: KeyboardEvent) => {
+      if (current.current?.mode === "keyboard" && event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        endRef.current(false);
+      }
+    };
+    window.addEventListener("keydown", cancel, true);
+    return () => {
+      cleanup.current?.();
+      window.removeEventListener("keydown", cancel, true);
+    };
+  }, []);
+  useEffect(() => {
+    if (current.current) end(false);
+  }, [layout, tabKey]);
+  return {
+    drag,
+    announcement,
+    scrollRef,
+    suppressClick,
+    offset,
+    keyDown,
+    fieldPointerDown: (key: string, event: BuilderPointerEvent) => {
+      const field = findField(latest.current.layout, key);
+      if (field) pointerDown(field, false, event);
+    },
+    palettePointerDown: (type: string, event: BuilderPointerEvent) =>
+      pointerDown(newFieldFromType(latest.current.layout, type), true, event),
+  };
+}
+
+export type FormBuilderDrag = ReturnType<typeof useFormBuilderDrag>;