@weasel-js/labkit 1.5.2 → 1.6.1

package/src/trial/Trial.annotations.test.tsx

@@ -69,6 +69,22 @@ describe('an instrument that declares annotations', () => {
     }
   });
 
+  it('gets only the tools it names', () => {
+    const narrow = defineInstrument<Record<string, never>, Record<string, never>>({
+      ...annotating,
+      name: 'Narrow',
+      annotations: {
+        targets: () => [{ id: 'pane', ref: { current: null }, content: { w: 200, h: 100 } }],
+        tools: ['pointer', 'select'],
+      },
+    });
+    render(<Lab instruments={[narrow]} defaultInstrument="Narrow" />);
+    expect(screen.getByRole('button', { name: 'Interact' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Select' })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'Freehand' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Rectangle' })).toBeNull();
+  });
+
   it('puts the store in reach of its own render', () => {
     render(<Lab instruments={[annotating]} defaultInstrument="Annotating" />);
     expect(screen.getByTestId('pane').dataset.marks).toBe('0');

package/src/trial/Trial.canvas.test.tsx

@@ -185,7 +185,7 @@ describe('LabProps.instruments', () => {
     render(<Lab instruments={[instrument]} defaultInstrument="Probe" />);
     expect([...seen]).toEqual(['grid', 'glyph']);
 
-    await userEvent.click(screen.getByRole('checkbox', { name: 'Toggle grid' }));
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Show grid' }));
     expect([...seen]).toEqual(['glyph']);
   });
 });

package/src/trial/Trial.loupe.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
@@ -126,3 +126,75 @@ describe('the loupe capability', () => {
     expect(lens(container)).toBeNull();
   });
 });
+
+describe('the loupe and the trial camera share one dispatcher', () => {
+  const frame = () => new Promise<void>((r) => requestAnimationFrame(() => r()));
+
+  function mountDrawn() {
+    const zooms: number[] = [];
+    const drawn = defineInstrument<Record<string, never>, Record<string, never>>({
+      name: 'Zoomed',
+      defaultConfig: () => ({}),
+      initialState: () => ({}),
+      render: () => null,
+      canvas: {
+        layers: [
+          {
+            id: 'main',
+            draw: (_ctx, { zoom }) => {
+              zooms.push(zoom);
+            },
+          },
+        ],
+      },
+      loupe: true,
+    });
+    const r = render(<Lab instruments={[drawn]} defaultInstrument="Zoomed" />);
+    const stack = r.container.querySelector('.lk-canvas-stack');
+    if (!stack) throw new Error('no canvas stack');
+    return { ...r, stack, zooms };
+  }
+
+  const wheel = (el: Element) => {
+    const e = new WheelEvent('wheel', {
+      deltaY: -300,
+      clientX: 50,
+      clientY: 50,
+      bubbles: true,
+      cancelable: true,
+    });
+    el.dispatchEvent(e);
+    return e;
+  };
+
+  it('zooms the camera while the lens is down', async () => {
+    const h = mountDrawn();
+    await act(async () => {
+      await frame();
+    });
+    await act(async () => {
+      wheel(h.stack);
+      await frame();
+    });
+    expect(h.zooms.at(-1)).toBeGreaterThan(1);
+  });
+
+  it('gives the wheel to the lens while it is up, and leaves the camera alone', async () => {
+    const user = userEvent.setup();
+    const h = mountDrawn();
+    await user.click(screen.getByRole('button', { name: 'Loupe' }));
+    pointAt(h.stack, 60, 40);
+    expect(lens(h.container)).not.toBeNull();
+    await act(async () => {
+      await frame();
+    });
+    const before = h.zooms.at(-1);
+    let e!: WheelEvent;
+    await act(async () => {
+      e = wheel(h.stack);
+      await frame();
+    });
+    expect(e.defaultPrevented).toBe(true);
+    expect(h.zooms.at(-1)).toBe(before);
+  });
+});

package/src/trial/Trial.stories.tsx

@@ -1,3 +1,4 @@
+import { createPointerStore } from '@weasel-js/core';
 import type { Meta, StoryObj } from '@weasel-js/forge';
 import type { Instrument } from '../instrument/types';
 import { LabContext, type LabContextValue } from '../lab/LabContext';
@@ -63,6 +64,7 @@ function Harness() {
                 setZoom: () => {},
                 activeToolId: null,
                 visibleLayers: [],
+                pointer: createPointerStore(),
               },
               emit: () => {},
             })}

package/src/trial/Trial.tsx

@@ -1,3 +1,4 @@
+import { createPointerStore, PointerContextProvider, WeaselProvider } from '@weasel-js/core';
 import { type ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand/react';
 import { AnnotationsContext } from '../annotations/AnnotationsContext';
@@ -5,6 +6,7 @@ import { AnnotationTargets } from '../annotations/AnnotationTargets';
 import { AnnotationPreloadContext } from '../annotations/preload';
 import { annotationsFromJSON } from '../annotations/store';
 import type { AnnotationStorage, AnnotationTargetInfo } from '../annotations/types';
+import { CameraScopeContext } from '../canvas/CameraInput';
 import { CameraWheelContext, type CameraWheelSlot } from '../canvas/CameraWheelContext';
 import { CanvasStack } from '../canvas/CanvasStack';
 import { fitStage, Stage } from '../canvas/Stage';
@@ -24,9 +26,9 @@ import type {
 } from '../instrument/types';
 import { useJob } from '../job/useJob';
 import { useLabContext } from '../lab/LabContext';
-import { LayerList } from '../layers/LayerList';
 import { TrialLoupe } from '../loupe/TrialLoupe';
 import { resolveLoupe } from '../loupe/types';
+import { LayerList, type LayerListItem, moveLayers } from '../passthrough/weasel-ui';
 import { LabStoreContext, TrialIdProvider } from '../state/context';
 import type { LabStore } from '../state/store';
 import type { TrialRecord } from '../state/types';
@@ -134,6 +136,7 @@ function TrialRuntime({
   suppress,
 }: TrialRuntimeProps) {
   const wheelSlot = useRef<CameraWheelSlot['current']>(null);
+  const [pointer] = useState(createPointerStore);
   const canvasContainerRef = useRef<HTMLDivElement | null>(null);
   const loupeHostRef = useRef<HTMLDivElement | null>(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
@@ -328,6 +331,7 @@ function TrialRuntime({
       },
       activeToolId: resolvedToolId,
       visibleLayers,
+      pointer,
     },
     emit: (event) => {
       snapshotIfNeeded(event);
@@ -401,6 +405,24 @@ function TrialRuntime({
     return instrument.layers.ids.map((l) => (typeof l === 'string' ? { id: l, label: l } : l));
   }, [instrument.layers]);
 
+  // In the order the canvas draws them, with the always-on layers pinned
+  // below the rest, where a drag cannot reach past them.
+  const layerItems: LayerListItem[] = useMemo(() => {
+    const ordered = layerOrder
+      ? [...layerDescriptors].sort((a, b) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b.id))
+      : layerDescriptors;
+    const pinnedLast = [
+      ...ordered.filter((l) => !l.alwaysOn),
+      ...ordered.filter((l) => l.alwaysOn),
+    ];
+    return pinnedLast.map((l) => ({
+      id: l.id,
+      label: l.label,
+      locked: l.alwaysOn === true,
+      visible: l.alwaysOn === true || layerVisibility[l.id] !== false,
+    }));
+  }, [layerDescriptors, layerOrder, layerVisibility]);
+
   const dragDropResult = useDragDrop({
     capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s) => s },
     canvasContainerRef,
@@ -492,7 +514,12 @@ function TrialRuntime({
         minZoom={stage.minZoom}
         maxZoom={stage.maxZoom}
         hostRef={loupeHostRef}
-        overlay={lens}
+        overlay={
+          <>
+            {stage.overlay?.(renderCtx)}
+            {lens}
+          </>
+        }
       >
         {instrument.render(renderCtx)}
       </Stage>
@@ -519,19 +546,18 @@ function TrialRuntime({
     () =>
       instrument.layers && layerDescriptors.length > 0 ? (
         <LayerList
-          layers={layerDescriptors}
-          visibility={layerVisibility}
-          onReorder={(next) => {
-            setLayerOrder(next.map((l) => l.id));
+          items={layerItems}
+          onReorder={(move) => {
+            setLayerOrder(moveLayers(layerItems, move).map((l) => l.id));
             bus.emit('layers.reorder');
           }}
-          onToggle={(lid, visible) => {
+          onVisibilityChange={(lid, visible) => {
             setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
             bus.emit('layers.toggle');
           }}
         />
       ) : null,
-    [instrument.layers, layerDescriptors, layerVisibility, bus],
+    [instrument.layers, layerDescriptors, layerItems, bus],
   );
 
   const extraChrome = useMemo<TrialContribution[]>(() => {
@@ -567,6 +593,18 @@ function TrialRuntime({
     />
   ) : null;
 
+  // One input scope for the trial's body: the camera, the loupe and an
+  // overview share its actions, its deps and its pointer. Isolated, because an
+  // actions registry holds one dispatcher and the trial beside this one has
+  // its own.
+  const scopedBody = (
+    <WeaselProvider isolate>
+      <PointerContextProvider store={pointer}>
+        <CameraScopeContext.Provider value={true}>{body}</CameraScopeContext.Provider>
+      </PointerContextProvider>
+    </WeaselProvider>
+  );
+
   return (
     <TrialIdProvider trialId={record.id}>
       <AnnotationsContext.Provider value={annotationsCap ? annotations : null}>
@@ -585,7 +623,7 @@ function TrialRuntime({
             activeToolId={resolvedToolId}
             setActiveTool={setActiveTool}
           >
-            {body}
+            {scopedBody}
             {annotationOverlays}
           </TrialChrome>
         </CameraWheelContext.Provider>

package/src/trial/trialOps.test.ts

@@ -132,7 +132,7 @@ describe('addTrial', () => {
     const out = addTrial([], instruments, 'Schemed', { config: { gap: auto } });
     expect(out[0]?.auto).toContain('gap');
     expect(out[0]?.autoSeed).toEqual(['gap']);
-    expect((out[0]?.config as { gap: number }).gap).toBe(12);
+    expect((out[0]?.config as { gap: number } | undefined)?.gap).toBe(12);
     expect(out[0]?.configSeed).not.toHaveProperty('gap');
   });
 
@@ -141,13 +141,13 @@ describe('addTrial', () => {
     const out = addTrial([], instruments, 'Counter', {
       config: { at: when } as unknown as Partial<CounterConfig>,
     });
-    expect((out[0]?.config as { at: unknown }).at).toBe(when);
+    expect((out[0]?.config as { at: unknown } | undefined)?.at).toBe(when);
   });
 
   it('honors auto at a nested seed path', () => {
     const out = addTrial([], instruments, 'Schemed', { config: { grid: { size: auto } } });
     expect(out[0]?.auto).toContain('grid.size');
-    expect((out[0]?.config as { grid: { size: number } }).grid.size).toBe(4);
+    expect((out[0]?.config as { grid: { size: number } } | undefined)?.grid.size).toBe(4);
   });
 
   it('leaves a trial with no auto field when nothing is unpinned', () => {
@@ -222,7 +222,7 @@ describe('resetTrial', () => {
     const arr = addTrial([], instruments, 'Counter');
     head(arr).config = { step: 99 } as CounterConfig;
     resetTrial(arr, head(arr).id, instruments);
-    expect((arr[0]?.config as CounterConfig).step).toBe(99);
+    expect((arr[0]?.config as CounterConfig | undefined)?.step).toBe(99);
   });
 
   it('restores the seed the trial was opened with, not the bare defaults', () => {