@devaccel-labs/app-comments-toolbar 1.1.0 → 1.3.0

package/src/runtime/composer-size.tsx

@@ -0,0 +1,146 @@
+import { useEffect, useLayoutEffect, useRef, type KeyboardEvent } from "react";
+
+/** The composer's size the person dragged it to. Kept in the toolbar prefs, so every new comment opens at it. */
+export type ComposerSize = { width: number; height: number };
+
+/** The composer's own width; it never gets narrower than it is by default. */
+export const COMPOSER_MIN_WIDTH = 240;
+export const COMPOSER_MIN_HEIGHT = 100;
+export const COMPOSER_MAX_WIDTH = 720;
+const KEY_STEP = 16;
+const MARGIN = 6;
+
+export function clampComposerSize(
+  size: ComposerSize,
+  room: { width: number; height: number },
+): ComposerSize {
+  const maxWidth = Math.max(
+    COMPOSER_MIN_WIDTH,
+    Math.min(COMPOSER_MAX_WIDTH, room.width - MARGIN * 2),
+  );
+  const maxHeight = Math.max(COMPOSER_MIN_HEIGHT, room.height - MARGIN * 2);
+  return {
+    width: Math.round(Math.max(COMPOSER_MIN_WIDTH, Math.min(maxWidth, size.width))),
+    height: Math.round(Math.max(COMPOSER_MIN_HEIGHT, Math.min(maxHeight, size.height))),
+  };
+}
+
+/** A saved size, or nothing when the stored value is missing or malformed. */
+export function readComposerSize(value: unknown): ComposerSize | undefined {
+  if (typeof value !== "object" || value === null) return undefined;
+  const width: unknown = Reflect.get(value, "width");
+  const height: unknown = Reflect.get(value, "height");
+  if (typeof width !== "number" || typeof height !== "number") return undefined;
+  if (!Number.isFinite(width) || !Number.isFinite(height)) return undefined;
+  return { width, height };
+}
+
+function cardSize(grip: HTMLElement): ComposerSize | null {
+  const card = grip.parentElement;
+  return card ? { width: card.offsetWidth, height: card.offsetHeight } : null;
+}
+
+/**
+ * The composer's resize handle, in its bottom-right corner. Dragging right widens it and dragging down makes it
+ * taller (the top stays put); arrow keys do the same in steps; a double-click goes back to the default.
+ */
+export function ResizeGrip(props: {
+  room: () => { width: number; height: number };
+  /** Every step of a drag. */
+  onResize: (size: ComposerSize) => void;
+  /** The drag ended (or a key was pressed) at `size`: save it. Not called for a press that didn't move. */
+  onEnd: (size: ComposerSize) => void;
+  onReset: () => void;
+}) {
+  const { room, onEnd, onReset } = props;
+  const grip = useRef<HTMLSpanElement>(null);
+  const latest = useRef(props);
+  useLayoutEffect(() => {
+    latest.current = props;
+  });
+  useEffect(() => {
+    // The toolbar's shield (`shield.ts`) stops presses at the window in the capture phase, before they reach
+    // the grip or React, so the drag is tracked from window capture listeners of its own.
+    let drag: {
+      pointer: number;
+      x: number;
+      y: number;
+      from: ComposerSize;
+      last: ComposerSize;
+    } | null = null;
+    const down = (event: PointerEvent) => {
+      const node = grip.current;
+      if (!node || event.button !== 0 || event.target !== node) return;
+      const from = cardSize(node);
+      if (!from) return;
+      event.preventDefault();
+      drag = { pointer: event.pointerId, x: event.clientX, y: event.clientY, from, last: from };
+    };
+    const move = (event: PointerEvent) => {
+      if (!drag || event.pointerId !== drag.pointer) return;
+      const size = clampComposerSize(
+        {
+          width: drag.from.width + event.clientX - drag.x,
+          height: drag.from.height + (event.clientY - drag.y),
+        },
+        latest.current.room(),
+      );
+      if (size.width === drag.last.width && size.height === drag.last.height) return;
+      drag.last = size;
+      latest.current.onResize(size);
+    };
+    const end = (event: PointerEvent) => {
+      if (!drag || event.pointerId !== drag.pointer) return;
+      const { from, last } = drag;
+      drag = null;
+      if (last !== from) latest.current.onEnd(last);
+    };
+    window.addEventListener("pointerdown", down, true);
+    window.addEventListener("pointermove", move, true);
+    window.addEventListener("pointerup", end, true);
+    window.addEventListener("pointercancel", end, true);
+    return () => {
+      window.removeEventListener("pointerdown", down, true);
+      window.removeEventListener("pointermove", move, true);
+      window.removeEventListener("pointerup", end, true);
+      window.removeEventListener("pointercancel", end, true);
+    };
+  }, []);
+  return (
+    <span
+      ref={grip}
+      className="cs-resize-grip"
+      data-cs-ui="composer-resize"
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label="Resize. Drag, or use the arrow keys. Double-click to reset."
+      title="Drag to resize · double-click to reset"
+      tabIndex={0}
+      onDoubleClick={(event) => {
+        event.preventDefault();
+        onReset();
+      }}
+      onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {
+        const delta: Partial<Record<string, [number, number]>> = {
+          ArrowRight: [KEY_STEP, 0],
+          ArrowLeft: [-KEY_STEP, 0],
+          ArrowUp: [0, -KEY_STEP],
+          ArrowDown: [0, KEY_STEP],
+        };
+        if (event.key === "Home") {
+          event.preventDefault();
+          onReset();
+          return;
+        }
+        const step = delta[event.key];
+        const from = step ? cardSize(event.currentTarget) : null;
+        if (!step || !from) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onEnd(
+          clampComposerSize({ width: from.width + step[0], height: from.height + step[1] }, room()),
+        );
+      }}
+    />
+  );
+}