diff --git a/examples/src/omezarr/app.tsx b/examples/src/omezarr/app.tsx
index c9a8c96..4a93ecb 100644
--- a/examples/src/omezarr/app.tsx
+++ b/examples/src/omezarr/app.tsx
@@ -4,7 +4,6 @@ import { SliceView } from './sliceview';
import { type OmeZarrDataset, loadOmeZarr } from '@alleninstitute/vis-omezarr';
const demo_versa = 'https://neuroglancer-vis-prototype.s3.amazonaws.com/VERSA/scratch/0500408166/';
-
export function AppUi() {
return ;
}
diff --git a/examples/src/omezarr/sliceview.tsx b/examples/src/omezarr/sliceview.tsx
index d3132b0..de31c28 100644
--- a/examples/src/omezarr/sliceview.tsx
+++ b/examples/src/omezarr/sliceview.tsx
@@ -7,7 +7,7 @@ import {
type RenderSettings,
} from '@alleninstitute/vis-omezarr';
import type { RenderFrameFn } from '@alleninstitute/vis-scatterbrain';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
import { useContext, useEffect, useRef } from 'react';
import { renderServerContext } from '~/common/react/render-server-provider';
type Props = {
@@ -21,7 +21,7 @@ const settings: RenderSettings = {
B: { gamut: { min: 0, max: 100 }, index: 2 },
},
plane: 'xy',
- planeIndex: 0,
+ planeIndex: 3,
camera: {
view: Box2D.create([0, 0], [250, 120]),
screenSize: [500, 500],
@@ -82,10 +82,22 @@ export function SliceView(props: Props) {
);
}
}, [server, renderer.current, cnvs.current, omezarr, view]);
+ const pan = useCallback(
+ (e: React.MouseEvent) => {
+ if (e.ctrlKey) {
+ const pos = Vec2.div([-e.movementX, -e.movementY], settings.camera.screenSize);
+ const scaledOffset = Vec2.mul(pos, Box2D.size(view));
+ const v = Box2D.translate(view, scaledOffset);
+ setView(v);
+ }
+ },
+ [view]
+ );
return (