Some quick minor fixes to the examples in starlight (#158)

Author: froyo-np

pnpm-lock.yaml

@@ -13,6 +13,7 @@ export default defineConfig({
     integrations: [
         starlight({
             title: 'Vis',
+            customCss: ['./custom.css'],
             social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/AllenInstitute/vis' }],
             sidebar: [
                 {

site/astro.config.mjs

@@ -0,0 +1,3 @@
+:root {
+    --sl-content-width: 50rem;
+}

site/custom.css

@@ -7,17 +7,11 @@ import { ClientLayersScript } from '../../../examples/layers/layers-loader.tsx';
 
 See instructions below the demo app UI for how to run this example.
 
-<div style="height: 600px; width 100%;">
-    <div style="display: flex;">
-        <div
-            id="sidebar"
-            style="width: 15%; height: 100%;"
-        ></div>
-        <canvas
-            id="glCanvas"
-            style="width: 85%; height: 100%;"
-        />
-    </div>
+<div style="height: 1000px; width 1000px;">
+  <div style="display: flex;">
+    <div id="sidebar" style="width: 200px; height: 1000px;"></div>
+    <canvas id="glCanvas" style="width: 800px; height: 1000px;" />
+  </div>
 </div>
 
 <ClientLayersScript client:only="react" />

site/src/content/docs/examples/layers.mdx

@@ -1,4 +1,4 @@
-import { Box2D, Vec2, type box2D, type vec2 } from '@alleninstitute/vis-geometry';
+import { Box2D, CartesianPlane, Vec2, type box2D, type vec2 } from '@alleninstitute/vis-geometry';
 import { sizeInUnits } from '@alleninstitute/vis-omezarr';
 import { AsyncDataCache, type FrameLifecycle, logger, type NormalStatus, ReglLayer2D } from '@alleninstitute/vis-core';
 import pkg from 'file-saver';
@@ -178,7 +178,7 @@ export class Demo {
     setPlane(param: AxisAlignedPlane) {
         const layer = this.layers[this.selectedLayer];
         if (layer && (layer.type === 'volumeSlice' || layer.type === 'volumeGrid')) {
-            layer.data.plane = param;
+            layer.data.plane = new CartesianPlane(param);
             this.uiChange();
         }
     }
@@ -701,9 +701,15 @@ export class Demo {
             // account for gl-origin vs. screen origin:
             this.mouseMove([-e.movementX, -e.movementY], [e.offsetX, canvas.clientHeight - e.offsetY]);
         };
-        canvas.onwheel = (e: WheelEvent) => {
-            this.zoom(e.deltaY > 0 ? 1.1 : 0.9);
-        };
+        canvas.addEventListener(
+            'wheel',
+            (e: WheelEvent) => {
+                this.zoom(e.deltaY > 0 ? 1.1 : 0.9);
+                e.preventDefault();
+            },
+            { passive: false },
+        );
+
         window.onkeyup = (e: KeyboardEvent) => {
             const layer = this.layers[this.selectedLayer];
             if (e.key === ' ') {
@@ -722,6 +728,7 @@ export class Demo {
                     this.uiChange();
                 }
             }
+            e.preventDefault();
         };
     }
 

site/src/examples/layers.ts

@@ -8,7 +8,6 @@ import { pan, zoom } from '../common/camera';
 import { RenderServerProvider } from '../common/react/render-server-provider';
 import { OmezarrViewer } from './omezarr-viewer';
 import { SliceView } from './sliceview';
-
 type DemoOption = { value: string; label: string; res: WebResource };
 
 const demoOptions: DemoOption[] = [
@@ -46,7 +45,7 @@ const demoOptions: DemoOption[] = [
     },
 ];
 
-const screenSize: vec2 = [500, 500];
+const screenSize: vec2 = [800, 800];
 
 const defaultInterval: Interval = { min: 0, max: 80 };
 
@@ -136,10 +135,10 @@ export function OmezarrDemo() {
         setPlaneIndex((prev) => Math.max(0, Math.min(prev + next, (omezarr?.maxOrthogonal(PLANE_XY) ?? 1) - 1)));
     };
 
-    const handleZoom = (e: React.WheelEvent<HTMLCanvasElement>) => {
-        // e.preventDefault();
+    const handleZoom = (e: WheelEvent) => {
+        e.preventDefault();
         const zoomScale = e.deltaY > 0 ? 1.1 : 0.9;
-        const v = zoom(view, screenSize, zoomScale, [e.nativeEvent.offsetX, e.nativeEvent.offsetY]);
+        const v = zoom(view, screenSize, zoomScale, [e.offsetX, e.offsetY]);
         setView(v);
     };
 

site/src/examples/omezarr/omezarr-demo.tsx

@@ -17,7 +17,7 @@ interface OmezarrViewerProps {
     id: string;
     screenSize: vec2;
     settings: RenderSettings;
-    onWheel?: (e: React.WheelEvent<HTMLCanvasElement>) => void;
+    onWheel?: (e: WheelEvent) => void;
     onMouseDown?: (e: React.MouseEvent<HTMLCanvasElement>) => void;
     onMouseUp?: (e: React.MouseEvent<HTMLCanvasElement>) => void;
     onMouseMove?: (e: React.MouseEvent<HTMLCanvasElement>) => void;
@@ -51,6 +51,7 @@ export function OmezarrViewer({
     // setup renderer and delete it when component goes away
     useEffect(() => {
         const c = canvas?.current;
+
         if (server?.regl && omezarr) {
             const numChannels = omezarr.colorChannels.length || 3;
             renderer.current = buildAsyncOmezarrRenderer(server.regl, multithreadedDecoder, {
@@ -66,6 +67,19 @@ export function OmezarrViewer({
             }
         };
     }, [server, omezarr]);
+
+    useEffect(() => {
+        const handleWheel = (e: WheelEvent) => onWheel?.(e);
+        if (canvas?.current) {
+            canvas.current.addEventListener('wheel', handleWheel, { passive: false });
+        }
+        return () => {
+            if (canvas?.current) {
+                canvas.current.removeEventListener('wheel', handleWheel);
+            }
+        };
+    }, [onWheel]);
+
     useEffect(() => {
         // set up the stash:
         if (server?.regl) {
@@ -199,7 +213,6 @@ export function OmezarrViewer({
             onMouseUp={onMouseUp}
             onMouseMove={onMouseMove}
             onMouseLeave={onMouseLeave}
-            onWheel={onWheel}
         />
     );
 }