Merge branch 'main' into prod

Author: u8array

src/components/Canvas/BarcodeObject.tsx

@@ -15,11 +15,11 @@ import {
   get1DBwipScale,
   getEanUpcHriFragments,
   renderEanUpcRawCanvas,
-  resolveHriAbove,
   renderTlc39Canvas,
   type BarcodeDisplaySize,
   type EanUpcType,
 } from "./bwipHelpers";
+import { resolveHriAbove } from "../../lib/barcodeHri";
 import { objectRotation } from "../../registry/rotation";
 import { rotatedGroupTransform } from "./rotatedGroupTransform";
 import { buildEanUpcDigitOverlay } from "./eanUpcDigitNodes";

src/components/Canvas/CanvasContextMenu.tsx

@@ -0,0 +1,205 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  ChevronRightIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  ChevronDoubleUpIcon,
+  ChevronDoubleDownIcon,
+  Square2StackIcon,
+  ScissorsIcon,
+  DocumentDuplicateIcon,
+  ClipboardIcon,
+  TrashIcon,
+  RectangleGroupIcon,
+  RectangleStackIcon,
+  LockClosedIcon,
+  LockOpenIcon,
+  CodeBracketIcon,
+  PhotoIcon,
+  ArrowDownTrayIcon,
+  PlusIcon,
+  Squares2X2Icon,
+} from "@heroicons/react/16/solid";
+import type { MenuAction, MenuSection } from "./canvasActions";
+
+type IconType = typeof ChevronRightIcon;
+
+// Icons stay in the view, keyed by the action id, so canvasActions stays pure.
+const ICONS: Record<string, IconType> = {
+  copy: Square2StackIcon,
+  cut: ScissorsIcon,
+  duplicate: DocumentDuplicateIcon,
+  pasteHere: ClipboardIcon,
+  delete: TrashIcon,
+  toFront: ChevronDoubleUpIcon,
+  forward: ChevronUpIcon,
+  backward: ChevronDownIcon,
+  toBack: ChevronDoubleDownIcon,
+  group: RectangleGroupIcon,
+  ungroup: RectangleStackIcon,
+  copyZplSelected: CodeBracketIcon,
+  copyZplLabel: CodeBracketIcon,
+  copyImage: PhotoIcon,
+  exportImage: ArrowDownTrayIcon,
+  addHere: PlusIcon,
+  selectAll: Squares2X2Icon,
+};
+
+function iconFor(item: MenuAction): IconType | undefined {
+  // The builder flips the lock row's labelKey to reflect current state.
+  if (item.id === "lock") return item.labelKey === "unlock" ? LockOpenIcon : LockClosedIcon;
+  return ICONS[item.id];
+}
+
+function RowIcon({ icon: Icon }: { icon?: IconType }) {
+  return Icon ? <Icon className="w-4 h-4 shrink-0" /> : null;
+}
+
+interface Props {
+  sections: MenuSection[];
+  /** Viewport coords of the right-click. */
+  x: number;
+  y: number;
+  /** Resolved labels for `labelKey` (t.contextMenu). */
+  labels: Record<string, string>;
+  onClose: () => void;
+}
+
+const MENU_BOX =
+  "z-[60] min-w-44 bg-surface border border-border rounded-lg shadow-2xl p-1";
+
+function labelOf(item: MenuAction, labels: Record<string, string>): string {
+  return item.label ?? (item.labelKey ? labels[item.labelKey] ?? item.labelKey : item.id);
+}
+
+function Row({
+  item,
+  labels,
+  onClose,
+}: {
+  item: MenuAction;
+  labels: Record<string, string>;
+  onClose: () => void;
+}) {
+  const [subOpen, setSubOpen] = useState(false);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const subRef = useRef<HTMLDivElement>(null);
+  // Submenus open to the right by default; flip left and/or shift up once the
+  // real size is known so a nested level can't run off the viewport.
+  const [flip, setFlip] = useState<{ left: boolean; up: number }>({ left: false, up: 0 });
+  const cls = `w-full flex items-center gap-2 px-3 py-1.5 text-left text-xs font-mono rounded transition-colors ${
+    item.disabled
+      ? "text-muted/40 cursor-not-allowed"
+      : item.danger
+        ? "text-text hover:bg-error/15 hover:text-error"
+        : "text-text hover:bg-surface-2"
+  }`;
+
+  useLayoutEffect(() => {
+    if (!subOpen) return;
+    const wrap = wrapRef.current;
+    const sub = subRef.current;
+    if (!wrap || !sub) return;
+    const wr = wrap.getBoundingClientRect();
+    const sr = sub.getBoundingClientRect();
+    const overBottom = sr.bottom + 4 - window.innerHeight;
+    setFlip({
+      left: wr.right + sr.width + 4 > window.innerWidth,
+      up: overBottom > 0 ? overBottom : 0,
+    });
+  }, [subOpen]);
+
+  const submenu = item.submenu;
+  if (submenu?.length) {
+    return (
+      <div
+        ref={wrapRef}
+        className="relative"
+        onMouseEnter={() => !item.disabled && setSubOpen(true)}
+        onMouseLeave={() => setSubOpen(false)}
+      >
+        <button disabled={item.disabled} className={cls}>
+          <RowIcon icon={iconFor(item)} />
+          <span className="flex-1">{labelOf(item, labels)}</span>
+          <ChevronRightIcon className="w-3.5 h-3.5 text-muted shrink-0" />
+        </button>
+        {subOpen && (
+          <div
+            ref={subRef}
+            className={`absolute top-0 ${flip.left ? "right-full mr-0.5" : "left-full ml-0.5"} ${MENU_BOX}`}
+            style={flip.up ? { transform: `translateY(-${flip.up}px)` } : undefined}
+          >
+            {submenu.map((s) => (
+              <Row key={s.id} item={s} labels={labels} onClose={onClose} />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      disabled={item.disabled}
+      className={cls}
+      onClick={() => {
+        if (item.disabled) return;
+        item.run?.();
+        onClose();
+      }}
+    >
+      <RowIcon icon={iconFor(item)} />
+      <span className="flex-1">{labelOf(item, labels)}</span>
+    </button>
+  );
+}
+
+export function CanvasContextMenu({ sections, x, y, labels, onClose }: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ x, y });
+
+  // Clamp into the viewport once the real size is known.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setPos({
+      x: Math.min(x, window.innerWidth - r.width - 4),
+      y: Math.min(y, window.innerHeight - r.height - 4),
+    });
+  }, [x, y]);
+
+  useEffect(() => {
+    const onPointer = (e: PointerEvent) => {
+      if (!ref.current?.contains(e.target as Node)) onClose();
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    // Defer so the opening right-click's own pointer events don't self-close.
+    const id = window.setTimeout(() => {
+      window.addEventListener("pointerdown", onPointer);
+      window.addEventListener("keydown", onKey);
+    }, 0);
+    return () => {
+      window.clearTimeout(id);
+      window.removeEventListener("pointerdown", onPointer);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [onClose]);
+
+  return createPortal(
+    <div ref={ref} className={`fixed ${MENU_BOX}`} style={{ left: pos.x, top: pos.y }} role="menu">
+      {sections.map((section, i) => (
+        <div key={section.id}>
+          {i > 0 && <div className="my-1 border-t border-border" />}
+          {section.items.map((item) => (
+            <Row key={item.id} item={item} labels={labels} onClose={onClose} />
+          ))}
+        </div>
+      ))}
+    </div>,
+    document.body,
+  );
+}

src/components/Canvas/KonvaObject.tsx

@@ -1,5 +1,4 @@
 import { useEffect } from "react";
-import type Konva from "konva";
 import { useFontCacheVersion } from "../../hooks/useFontCacheVersion";
 import { Ellipse, Group, Rect, Shape, Text } from "react-konva";
 import { lookupBoundVariable, shouldShowFallbackTint } from "../../lib/variableBinding";
@@ -15,7 +14,7 @@ import { useLabelStore } from "../../store/labelStore";
 import { applyBindingToObject, buildActiveCsvRow, clockCtxFromLabel } from "../../lib/variableBinding";
 import { ZPL_FONT_HEIGHT_TO_CSS_RATIO } from "../../lib/labelGeometry/textPositionTransforms";
 import { getTextRenderMetrics } from "../../lib/labelGeometry/textRenderMetrics";
-import { selectionHandlers, type KonvaObjectProps } from "./konvaObjectProps";
+import { selectionHandlers, CAPTURE_CHROME, type KonvaObjectProps } from "./konvaObjectProps";
 import { setMeasuredBounds, clearMeasuredBounds } from "./measuredBoundsCache";
 import { DEFAULT_GS_SYMBOL_META, GS_SYMBOLS } from "../../registry/symbol";
 import { GS_SYMBOL_PATHS, GS_VECTOR_CODES, type GsVectorCode } from "../../registry/gsSymbolPaths";
@@ -148,6 +147,9 @@ function PlaceholderRect({
   );
 }
 
+/** Opacity of the ^TB overset ghost (the clipped-off value shown for editing). */
+const TB_OVERSET_GHOST_OPACITY = 0.3;
+
 function TextFieldContent({
   obj,
   content,
@@ -156,6 +158,7 @@ function TextFieldContent({
   dpmm,
   fontVersion,
   placeholderColor,
+  isSelected = false,
 }: {
   obj: TextFieldObj;
   content: string;
@@ -164,6 +167,7 @@ function TextFieldContent({
   dpmm: number;
   fontVersion: number;
   placeholderColor: string;
+  isSelected?: boolean;
 }) {
   const shift = base.offsetXPx ?? 0;
   const shiftY = base.offsetYPx ?? 0;
@@ -229,36 +233,6 @@ function TextFieldContent({
       />
     );
   }
-  // Konva's getClientRect ignores a Group's clip and returns the full children
-  // bounds, which would inflate the Transformer box past the ^TB clip. Report
-  // the clip rect instead (the actual visible region) so the box matches.
-  const tbClipRef = (node: Konva.Group | null) => {
-    if (!node) return;
-    node.getClientRect = (config?: { skipTransform?: boolean; relativeTo?: Konva.Container }) => {
-      const local = {
-        x: node.clipX() || 0,
-        y: node.clipY() || 0,
-        width: node.clipWidth(),
-        height: node.clipHeight(),
-      };
-      if (config?.skipTransform) return local;
-      const tr = config?.relativeTo
-        ? node.getAbsoluteTransform(config.relativeTo)
-        : node.getAbsoluteTransform();
-      const corners = [
-        { x: local.x, y: local.y },
-        { x: local.x + local.width, y: local.y },
-        { x: local.x + local.width, y: local.y + local.height },
-        { x: local.x, y: local.y + local.height },
-      ].map((p) => tr.point(p));
-      const xs = corners.map((c) => c.x);
-      const ys = corners.map((c) => c.y);
-      const minX = Math.min(...xs);
-      const minY = Math.min(...ys);
-      return { x: minX, y: minY, width: Math.max(...xs) - minX, height: Math.max(...ys) - minY };
-    };
-  };
-
   // ^TB: word-wrap left-aligned, no spacing/indent/justify, clipped at the
   // block height (Labelary truncates mid-glyph, so clip rather than drop whole
   // lines). At 90deg rotations the block rect stays axis-aligned.
@@ -271,27 +245,41 @@ function TextFieldContent({
     const clip = tbBoundsDots(blockWidth, blockHeight ?? fontHeight, obj.props.rotation);
     // Lines sit exactly like ^FB (first line at the block top with Konva's cap
     // pad); matches the Labelary preview so toggling it doesn't shift the text.
+    const tbLineNodes = (extra?: Partial<BaseTextProps>) =>
+      tbLines.map((line, i) => {
+        const startDots = blockLineStartDots(i, obj.props.rotation, 0, tbStep);
+        return (
+          <Text
+            key={`${fontVersion}-${i}`}
+            x={dotsToPx(startDots.x, scale, dpmm) + shift}
+            y={dotsToPx(startDots.y, scale, dpmm) + shiftY}
+            text={line}
+            {...base}
+            {...extra}
+          />
+        );
+      });
     return (
-      <Group
-        ref={tbClipRef}
-        clipX={dotsToPx(clip.x, scale, dpmm) + shift}
-        clipY={dotsToPx(clip.y, scale, dpmm) + shiftY}
-        clipWidth={dotsToPx(clip.width, scale, dpmm)}
-        clipHeight={dotsToPx(clip.height, scale, dpmm)}
-      >
-        {tbLines.map((line, i) => {
-          const startDots = blockLineStartDots(i, obj.props.rotation, 0, tbStep);
-          return (
-            <Text
-              key={`${fontVersion}-${i}`}
-              x={dotsToPx(startDots.x, scale, dpmm) + shift}
-              y={dotsToPx(startDots.y, scale, dpmm) + shiftY}
-              text={line}
-              {...base}
-            />
-          );
-        })}
-      </Group>
+      <>
+        {/* Overset ghost: the full value including the part the box clips,
+            dimmed and editor-only, so the hidden text stays visible and the
+            transformer (whole-text bounds) can still scale it. */}
+        {isSelected && (
+          <Group name={CAPTURE_CHROME} listening={false} opacity={TB_OVERSET_GHOST_OPACITY}>
+            {tbLineNodes({ stroke: undefined, strokeWidth: 0 })}
+          </Group>
+        )}
+        {/* Printing text, clipped to the ^TB box. getClientRect ignores the
+            clip, so the selection bounds stay the full text (scalable). */}
+        <Group
+          clipX={dotsToPx(clip.x, scale, dpmm) + shift}
+          clipY={dotsToPx(clip.y, scale, dpmm) + shiftY}
+          clipWidth={dotsToPx(clip.width, scale, dpmm)}
+          clipHeight={dotsToPx(clip.height, scale, dpmm)}
+        >
+          {tbLineNodes()}
+        </Group>
+      </>
     );
   }
   const justify = blockJustify ?? "L";
@@ -767,6 +755,7 @@ function KonvaObjectInner({
           scale={scale}
           dpmm={dpmm}
           fontVersion={fontVersion}
+          isSelected={isSelected}
         />
         {obj.type === "text" && isSelected && obj.props.blockWidth && (
           <BlockWrapGuide