Merge pull request #64 from u8array/refactor/groups-followup

refactor(groups): post-merge cleanup bundle

Author: u8array

src/components/Canvas/ImageObject.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef } from "react";
 import { Group, Image as KImage, Rect, Text } from "react-konva";
 import type Konva from "konva";
-import type { LabelObject } from "../../registry";
+import type { LabelObject } from "../../types/Group";
 import { dotsToPx, pxToDots } from "../../lib/coordinates";
 import { getImage } from "../../lib/imageCache";
 import { useColorScheme } from "../../lib/useColorScheme";

src/components/Canvas/LabelCanvas.tsx

@@ -13,7 +13,7 @@ import type { PaletteDragData } from "../../dnd/types";
 import { Stage, Layer, Group, Rect, Transformer } from "react-konva";
 import type Konva from "konva";
 import { useLabelStore, useCurrentObjects, currentObjects, getCurrentObjects } from "../../store/labelStore";
-import { isGroup, getAllLeaves, expandSelection, selectionTargetId, findObjectById } from "../../types/Group";
+import { isGroup, getAllLeaves, expandSelection, selectionTargetId, findObjectById, type LabelObject } from "../../types/Group";
 import { pxToDots, SCREEN_PX_PER_MM } from "../../lib/coordinates";
 import { SNAP_OPTIONS } from "../../lib/units";
 import type { Unit } from "../../lib/units";
@@ -26,7 +26,7 @@ import { Grid } from "./Grid";
 import { GuideLines } from "./GuideLines";
 import { Ruler, RULER_SIZE } from "./Ruler";
 import { ObjectRegistry } from "../../registry";
-import type { LabelObject, LeafObject } from "../../registry";
+import type { LeafObject } from "../../registry";
 import { useColorScheme } from "../../lib/useColorScheme";
 import { objectIdsAtPoint } from "./hitTesting";
 import { useT } from "../../lib/useT";
@@ -131,21 +131,18 @@ export const LabelCanvas = forwardRef<LabelCanvasHandle, Props>(function LabelCa
   // without each consumer having to walk ancestors.
   const visibleLeaves = useMemo(() => {
     const out: LeafObject[] = [];
-    const walk = (nodes: LabelObject[], inheritedLocked: boolean, inheritedHidden: boolean) => {
+    const walk = (nodes: LabelObject[], inheritedLocked: boolean) => {
       for (const n of nodes) {
+        if (n.visible === false) continue;
         const locked = inheritedLocked || !!n.locked;
-        const hidden = inheritedHidden || n.visible === false;
-        if (hidden) continue;
         if (isGroup(n)) {
-          walk(n.children, locked, hidden);
+          walk(n.children, locked);
         } else {
-          // Preserve object identity when nothing was inherited so React
-          // memoisation keeps unaffected leaves stable across renders.
           out.push(locked && !n.locked ? ({ ...n, locked: true } as LeafObject) : n);
         }
       }
     };
-    walk(objects, false, false);
+    walk(objects, false);
     return out;
   }, [objects]);
 

src/components/Canvas/LineObject.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState } from "react";
 import { Group, Line as KLine, Rect } from "react-konva";
 import type Konva from "konva";
-import type { LabelObject } from "../../registry";
+import type { LabelObject } from "../../types/Group";
 import { dotsToPx, pxToDots } from "../../lib/coordinates";
 import { constrainLine, type ConstrainMode } from "../../lib/lineConstrain";
 import { useColorScheme } from "../../lib/useColorScheme";

src/components/Canvas/bwipHelpers.ts

@@ -12,7 +12,8 @@
  * bwipHelpers.test.ts ensures every BCID-registered type has a case.
  */
 
-import type { LabelObject, LeafObject } from "../../registry";
+import type { LeafObject } from "../../registry";
+import type { LabelObject } from "../../types/Group";
 import type { Gs1DatabarProps } from "../../registry/gs1databar";
 import { objectRotation } from "../../registry/rotation";
 import { dotsToPx } from "../../lib/coordinates";

src/components/Canvas/hooks/useCanvasLasso.ts

@@ -1,8 +1,7 @@
 import { useState, useRef } from "react";
 import type Konva from "konva";
 import { getCurrentObjects } from "../../../store/labelStore";
-import type { LabelObject } from "../../../registry";
-import { isGroup } from "../../../types/Group";
+import { isGroup, type LabelObject } from "../../../types/Group";
 import { getIdsIntersectingRect, type LassoRect } from "../lassoGeometry";
 
 interface Options {

src/components/Canvas/transformPosition.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { modelPositionFromRenderedTopLeft } from "./transformPosition";
 import { QR_FO_Y_OFFSET_DOTS } from "./bwipConstants";
-import type { LabelObject } from "../../registry";
+import type { LabelObject } from "../../types/Group";
 
 const qrFo: LabelObject = {
   id: "q1",

src/components/Canvas/transformPosition.ts

@@ -1,4 +1,5 @@
-import { BARCODE_1D_TYPES, type LabelObject } from "../../registry";
+import { BARCODE_1D_TYPES } from "../../registry";
+import type { LabelObject } from "../../types/Group";
 import { QR_FO_Y_OFFSET_DOTS } from "./bwipConstants";
 
 /**

src/components/Properties/LayerRow.tsx

@@ -10,8 +10,7 @@ import {
   LinkSlashIcon,
 } from '@heroicons/react/16/solid';
 import { ObjectRegistry } from '../../registry';
-import type { LabelObject } from '../../registry';
-import { isGroup } from '../../types/Group';
+import { isGroup, type LabelObject } from '../../types/Group';
 import { useT } from '../../lib/useT';
 import { DragHandleIcon } from '../ui/DragHandleIcon';
 import { INDENT_STEP } from './layerLayout';

src/components/Properties/useLayerDnd.ts

@@ -2,8 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import type { DragEndEvent, DragOverEvent } from '@dnd-kit/core';
 import { isGroup, findObjectById, findAncestors } from '../../types/Group';
-import type { GroupObject } from '../../types/Group';
-import type { LabelObject } from '../../registry';
+import type { GroupObject, LabelObject } from '../../types/Group';
 import { INDENT_STEP } from './layerLayout';
 
 /** Sentinel container id for the top-level objects list. Group containers

src/lib/designFile.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { parseDesignFile, serializeDesign } from './designFile';
-import type { LabelObject } from '../registry';
+import type { LabelObject } from '../types/Group';
 
 const SAMPLE_OBJECTS: LabelObject[] = [
   {
@@ -85,4 +85,75 @@ describe('parseDesignFile', () => {
     expect(result.value.pages[0]?.objects).toHaveLength(1);
     expect(result.value.pages[1]?.objects).toHaveLength(1);
   });
+
+  it('roundtrips a design containing nested groups without structural loss', () => {
+    const designWithGroups: LabelObject[] = [
+      SAMPLE_OBJECTS[0]!,
+      {
+        id: 'grp-outer',
+        type: 'group',
+        x: 0,
+        y: 0,
+        rotation: 0,
+        name: 'Header',
+        children: [
+          {
+            id: 'grp-inner',
+            type: 'group',
+            x: 0,
+            y: 0,
+            rotation: 0,
+            children: [
+              {
+                id: 'obj-2',
+                type: 'box',
+                x: 5,
+                y: 5,
+                rotation: 0,
+                props: { width: 20, height: 10, thickness: 1, filled: true, color: 'B', rounding: 0 },
+              },
+            ],
+          } as LabelObject,
+        ],
+      } as LabelObject,
+    ];
+    const json = serializeDesign(
+      { widthMm: 100, heightMm: 60, dpmm: 8 },
+      [{ objects: designWithGroups }],
+    );
+    const result = parseDesignFile(json);
+    expect(result.ok).toBe(true);
+    if (!result.ok) return;
+    expect(result.value.pages[0]?.objects).toEqual(designWithGroups);
+  });
+
+  it('rejects a leaf object that is missing its props', () => {
+    const malformed = JSON.stringify({
+      label: { widthMm: 100, heightMm: 60, dpmm: 8 },
+      pages: [
+        {
+          objects: [{ id: 'a', type: 'box', x: 0, y: 0, rotation: 0 }],
+        },
+      ],
+    });
+    const result = parseDesignFile(malformed);
+    expect(result.ok).toBe(false);
+    if (result.ok) return;
+    expect(result.error).toBe('invalid_schema');
+  });
+
+  it('rejects a group object that is missing its children', () => {
+    const malformed = JSON.stringify({
+      label: { widthMm: 100, heightMm: 60, dpmm: 8 },
+      pages: [
+        {
+          objects: [{ id: 'g', type: 'group', x: 0, y: 0, rotation: 0 }],
+        },
+      ],
+    });
+    const result = parseDesignFile(malformed);
+    expect(result.ok).toBe(false);
+    if (result.ok) return;
+    expect(result.error).toBe('invalid_schema');
+  });
 });