@pluot/core 0.1.0

package/dist-tsc/lru-store.js

@@ -0,0 +1,137 @@
+import QuickLRU from "quick-lru";
+function normalizeKey(key, range) {
+    if (!range)
+        return key;
+    if ("suffixLength" in range)
+        return `${key}:-${range.suffixLength}`;
+    return `${key}:${range.offset}:${range.offset + range.length - 1}`;
+}
+// Provides a blanket implementation of getRange that can be used with any AsyncReadable store,
+// even if it doesn't define a getRange method.
+// If the store does have a native getRange method, we use that instead.
+// Reference: https://github.com/vitessce/vitessce/blob/main/packages/utils/zarr-utils/src/base-getrange.ts
+export function createGetRange(store) {
+    // TODO: support options param for getRange?
+    return async (...args) => {
+        const [key, range, opts] = args;
+        if (typeof store.getRange === 'function') {
+            return store.getRange(key, range, opts);
+        }
+        // Store does not have a native getRange method; falling back to get. This may be inefficient for large data.
+        const arr = await store.get(key, opts);
+        if (!arr)
+            return undefined;
+        const { buffer } = arr;
+        if ('suffixLength' in range) {
+            const { suffixLength } = range;
+            return new Uint8Array(buffer, buffer.byteLength - suffixLength, suffixLength);
+        }
+        if ('offset' in range && 'length' in range) {
+            const { offset, length } = range;
+            return new Uint8Array(buffer, offset, length);
+        }
+        throw new Error('Invalid rangeQuery value.');
+    };
+}
+// A class-based version of the proxy-based lru() function from vizarr.
+// Reference: https://github.com/hms-dbmi/vizarr/blob/862745c1c7c095748bbe97475da61807d5b49189/src/lru-store.ts
+export class LruStore {
+    #inner_store;
+    #cache;
+    // We need a way to synchronously peek at the promise state (a-la Bun's peek or Effect's Deferred.poll).
+    // We can probably do something more sophisticated but will try this first.
+    #promise_states;
+    constructor(store, maxSize = 100) {
+        this.#inner_store = store;
+        this.#promise_states = new Map();
+        this.#cache = new QuickLRU({
+            maxSize,
+            onEviction: (key, _value) => {
+                this.#promise_states.delete(key);
+            },
+        });
+    }
+    async get(...args) {
+        const [key, opts] = args;
+        // console.log(`LRU get: ${key}`);
+        const cacheKey = normalizeKey(key);
+        const cached = this.#cache.get(cacheKey);
+        if (cached) {
+            return cached[0];
+        }
+        const controller = new AbortController();
+        let getResult = this.#inner_store.get(key, {
+            signal: controller.signal,
+            ...(opts ?? {})
+        });
+        const getResultPromise = Promise.resolve(getResult);
+        this.#promise_states.set(cacheKey, 'pending');
+        const result = getResultPromise.then((val) => {
+            this.#promise_states.set(cacheKey, 'fulfilled');
+            return val;
+        }).catch((err) => {
+            this.#promise_states.set(cacheKey, 'rejected');
+            this.#cache.delete(cacheKey);
+            throw err;
+        });
+        this.#cache.set(cacheKey, [result, controller]);
+        return result;
+    }
+    // Synchronously peek at the promise state.
+    getPeek(...args) {
+        this.get(...args); // Kick off the promise but do not await. TODO: do we want to do this here?
+        const [key, opts] = args;
+        // console.log(`LRU getPeek: ${key}`);
+        const cacheKey = normalizeKey(key);
+        return this.#promise_states.get(cacheKey);
+    }
+    async getRange(...args) {
+        const [key, range, opts] = args;
+        const cacheKey = normalizeKey(key, range);
+        const cached = this.#cache.get(cacheKey);
+        if (cached) {
+            return cached[0];
+        }
+        const _getRange = typeof this.#inner_store.getRange === 'function'
+            ? this.#inner_store.getRange.bind(this.#inner_store)
+            : createGetRange(this.#inner_store);
+        const controller = new AbortController();
+        // @ts-expect-error
+        let getRangeResult = _getRange(key, range, {
+            signal: controller.signal,
+            ...(opts ?? {})
+        });
+        const getRangeResultPromise = Promise.resolve(getRangeResult);
+        this.#promise_states.set(cacheKey, 'pending');
+        const result = getRangeResultPromise.then((val) => {
+            this.#promise_states.set(cacheKey, 'fulfilled');
+            return val;
+        }).catch((err) => {
+            this.#promise_states.set(cacheKey, 'rejected');
+            this.#cache.delete(cacheKey);
+            throw err;
+        });
+        this.#cache.set(cacheKey, [result, controller]);
+        return result;
+    }
+    // Synchronously peek at the promise state.
+    getRangePeek(...args) {
+        this.getRange(...args); // Kick off the promise but do not await. TODO: do we want to do this here?
+        const [key, range, opts] = args;
+        const cacheKey = normalizeKey(key, range);
+        return this.#promise_states.get(cacheKey);
+    }
+    clearCache() {
+        // Use AbortSignal in clearCache for promises that have not yet been resolved.
+        this.#cache.forEach(([promise, controller]) => {
+            // TODO: check if promise is still pending before aborting? Or just always abort?
+            // TODO: verify that this aborting is actually working
+            controller.abort();
+        });
+        this.#cache.clear();
+        this.#promise_states = new Map();
+    }
+}
+export function lru(inner_store, maxSize = 100) {
+    return new LruStore(inner_store, maxSize);
+}

package/dist-tsc/viewport.d.ts

@@ -0,0 +1,24 @@
+export type AspectRatioMode = "Ignore" | "Contain" | "Cover";
+export type AspectRatioAlignmentMode = "Center" | "Start" | "End";
+export type Margins = {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+};
+export type ViewportParams = {
+    width: number;
+    height: number;
+    aspectRatioMode: AspectRatioMode;
+    aspectRatioAlignmentMode: AspectRatioAlignmentMode;
+    margins?: Margins;
+};
+export type Bounds = {
+    xMin?: number;
+    xMax?: number;
+    yMin?: number;
+    yMax?: number;
+};
+export declare function getBounds(cameraMatrix: Float32Array, viewportParams: ViewportParams): Required<Bounds>;
+export declare function getCameraMatrixFromBounds(bounds: Bounds, prevCameraMatrix: Float32Array, viewportParams: ViewportParams): Float32Array;
+//# sourceMappingURL=viewport.d.ts.map

package/dist-tsc/viewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewport.d.ts","sourceRoot":"","sources":["../src/viewport.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;AAElE,MAAM,MAAM,OAAO,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,eAAe,CAAC;IACjC,wBAAwB,EAAE,wBAAwB,CAAC;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IAKnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAGF,wBAAgB,SAAS,CAAC,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,CA4CtG;AAID,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,GAAG,YAAY,CAgEtI"}

package/dist-tsc/viewport.js

@@ -0,0 +1,108 @@
+// Calculate the visible data range based on camera view and viewport parameters.
+export function getBounds(cameraMatrix, viewportParams) {
+    const zoomX = cameraMatrix[0];
+    const zoomY = cameraMatrix[5];
+    const translateX = cameraMatrix[12];
+    const translateY = cameraMatrix[13];
+    const marginTop = viewportParams.margins?.marginTop ?? 0;
+    const marginRight = viewportParams.margins?.marginRight ?? 0;
+    const marginBottom = viewportParams.margins?.marginBottom ?? 0;
+    const marginLeft = viewportParams.margins?.marginLeft ?? 0;
+    const layerW = viewportParams.width - marginLeft - marginRight;
+    const layerH = viewportParams.height - marginTop - marginBottom;
+    const layerAspectRatio = layerW / layerH;
+    let xScale = 1.0;
+    let yScale = 1.0;
+    if (viewportParams.aspectRatioMode === "Contain") {
+        if (layerAspectRatio > 1.0)
+            xScale = layerAspectRatio;
+        else if (layerAspectRatio < 1.0)
+            yScale = 1.0 / layerAspectRatio;
+    }
+    else if (viewportParams.aspectRatioMode === "Cover") {
+        if (layerAspectRatio > 1.0)
+            yScale = 1.0 / layerAspectRatio;
+        else if (layerAspectRatio < 1.0)
+            xScale = layerAspectRatio;
+    }
+    let xAlignTranslation = 0.0;
+    let yAlignTranslation = 0.0;
+    if (viewportParams.aspectRatioAlignmentMode === "Start") {
+        xAlignTranslation = xScale - 1.0;
+        yAlignTranslation = yScale - 1.0;
+    }
+    else if (viewportParams.aspectRatioAlignmentMode === "End") {
+        xAlignTranslation = 1.0 - xScale;
+        yAlignTranslation = 1.0 - yScale;
+    }
+    const xAdj = xScale - 1.0;
+    const yAdj = yScale - 1.0;
+    const xMin = ((-translateX - 1.0 - xAdj + xAlignTranslation) / zoomX + 1.0) / 2.0;
+    const xMax = ((-translateX + 1.0 + xAdj + xAlignTranslation) / zoomX + 1.0) / 2.0;
+    const yMin = ((-translateY - 1.0 - yAdj + yAlignTranslation) / zoomY + 1.0) / 2.0;
+    const yMax = ((-translateY + 1.0 + yAdj + yAlignTranslation) / zoomY + 1.0) / 2.0;
+    return { xMin, xMax, yMin, yMax };
+}
+// Given data bounds, compute the corresponding camera matrix.
+// Missing bound values are filled in from prevCameraMatrix.
+export function getCameraMatrixFromBounds(bounds, prevCameraMatrix, viewportParams) {
+    // Fill in missing bounds from the previous camera matrix.
+    const currentBounds = getBounds(prevCameraMatrix, viewportParams);
+    const xMin = bounds.xMin ?? currentBounds.xMin;
+    const xMax = bounds.xMax ?? currentBounds.xMax;
+    const yMin = bounds.yMin ?? currentBounds.yMin;
+    const yMax = bounds.yMax ?? currentBounds.yMax;
+    const marginTop = viewportParams.margins?.marginTop ?? 0;
+    const marginRight = viewportParams.margins?.marginRight ?? 0;
+    const marginBottom = viewportParams.margins?.marginBottom ?? 0;
+    const marginLeft = viewportParams.margins?.marginLeft ?? 0;
+    const layerW = viewportParams.width - marginLeft - marginRight;
+    const layerH = viewportParams.height - marginTop - marginBottom;
+    const layerAspectRatio = layerW / layerH;
+    let xScale = 1.0;
+    let yScale = 1.0;
+    if (viewportParams.aspectRatioMode === "Contain") {
+        if (layerAspectRatio > 1.0)
+            xScale = layerAspectRatio;
+        else if (layerAspectRatio < 1.0)
+            yScale = 1.0 / layerAspectRatio;
+    }
+    else if (viewportParams.aspectRatioMode === "Cover") {
+        if (layerAspectRatio > 1.0)
+            yScale = 1.0 / layerAspectRatio;
+        else if (layerAspectRatio < 1.0)
+            xScale = layerAspectRatio;
+    }
+    let xAlignTranslation = 0.0;
+    let yAlignTranslation = 0.0;
+    if (viewportParams.aspectRatioAlignmentMode === "Start") {
+        xAlignTranslation = xScale - 1.0;
+        yAlignTranslation = yScale - 1.0;
+    }
+    else if (viewportParams.aspectRatioAlignmentMode === "End") {
+        xAlignTranslation = 1.0 - xScale;
+        yAlignTranslation = 1.0 - yScale;
+    }
+    const xAdj = xScale - 1.0;
+    const yAdj = yScale - 1.0;
+    const xRange = xMax - xMin;
+    const yRange = yMax - yMin;
+    let zoomX = (1.0 + xAdj) / xRange;
+    let zoomY = (1.0 + yAdj) / yRange;
+    // When aspect ratio is ignored, zoom each axis independently.
+    // Otherwise take the minimum so all requested data fits within the viewport.
+    if (viewportParams.aspectRatioMode !== "Ignore") {
+        zoomX = zoomY = Math.min(zoomX, zoomY);
+    }
+    // Invert the getBounds translation equations:
+    //   min + max = (-translate + align) / zoom + 1.0
+    // So: translate = align - zoom * ((min + max) - 1.0)
+    const translateX = xAlignTranslation - zoomX * ((xMin + xMax) - 1.0);
+    const translateY = yAlignTranslation - zoomY * ((yMin + yMax) - 1.0);
+    return new Float32Array([
+        zoomX, 0.0, 0.0, 0.0,
+        0.0, zoomY, 0.0, 0.0,
+        0.0, 0.0, 1.0, 0.0,
+        translateX, translateY, 0.0, 1.0,
+    ]);
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@pluot/core",
+  "private": false,
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "src",
+    "dist",
+    "dist-tsc"
+  ],
+  "dependencies": {
+    "lightua": "0.1.0",
+    "zarrita": "^0.5.3",
+    "quick-lru": "^7.0.1",
+    "d3-zoom": "^3.0.0",
+    "d3-selection": "^3.0.0",
+    "d3-scale": "^4.0.2",
+    "d3-drag": "^3.0.0",
+    "dom-2d-camera": "^2.2.6",
+    "camera-2d-simple": "^3.0.0",
+    "gl-matrix": "^3.4.4",
+    "3d-view-controls": "^2.2.2",
+    "3d-view": "^2.0.1",
+    "has-passive-events": "^1.0.0",
+    "mouse-change": "^1.1.1",
+    "mouse-event-offset": "^3.0.2",
+    "mouse-wheel": "^1.0.2",
+    "lz-string": "^1.5.0",
+    "lodash-es": "^4.17.23",
+    "pluot": "0.1.0"
+  },
+  "devDependencies": {
+    "vitest": "^3.2.4",
+    "vite": "^6.1.1",
+    "jsdom": "^26.1.0",
+    "vitest-canvas-mock": "~0.3.3",
+    "typescript": "^5.9"
+  },
+  "scripts": {
+    "start": "pnpm -C ../../ run start-tsc",
+    "build": "pnpm -C ../../ run build-tsc",
+    "bundle": "pnpm exec vite build -c ./vite.config.js",
+    "test": "pnpm exec vitest --run -r ../../ --dir ."
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  }
+}

package/src/3d-view-controls.js

@@ -0,0 +1,271 @@
+// License copied from https://github.com/mikolalysenko/3d-view-controls/blob/master/LICENSE
+//
+// The MIT License (MIT)
+//
+// Copyright (c) 2013 Mikola Lysenko
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+
+// Reference: https://github.com/mikolalysenko/3d-view-controls/blob/0e59c2ae4a891ce3c7bb83aa4291f89d99366037/camera.js
+// TODO: contribute modifications back upstream once things are working.
+
+import createView from '3d-view';
+import mouseChange from 'mouse-change';
+import mouseWheel from 'mouse-wheel';
+import mouseOffset from 'mouse-event-offset';
+import hasPassive from 'has-passive-events';
+
+// Updated right-now implementation to avoid `global` usage.
+// Reference: https://github.com/hughsk/right-now/blob/master/browser.js
+const now =
+  performance && performance.now
+    ? function now() {
+        return performance.now();
+      }
+    : Date.now ||
+      function now() {
+        return +new Date();
+      };
+
+export default function createCamera(element, options) {
+  element = element || document.body
+  options = options || {}
+
+  var limits  = [ 0.01, Infinity ]
+  if('distanceLimits' in options) {
+    limits[0] = options.distanceLimits[0]
+    limits[1] = options.distanceLimits[1]
+  }
+  if('zoomMin' in options) {
+    limits[0] = options.zoomMin
+  }
+  if('zoomMax' in options) {
+    limits[1] = options.zoomMax
+  }
+
+  var view = createView({
+    center: options.center || [0,0,0],
+    up:     options.up     || [0,1,0],
+    eye:    options.eye    || [0,0,10],
+    mode:   options.mode   || 'orbit',
+    distanceLimits: limits
+  })
+
+  var pmatrix = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
+  var distance = 0.0
+  var width   = element.clientWidth
+  var height  = element.clientHeight
+
+  var camera = {
+    view:               view,
+    element:            element,
+    delay:              options.delay          || 16,
+    rotateSpeed:        options.rotateSpeed    || 1,
+    zoomSpeed:          options.zoomSpeed      || 1,
+    translateSpeed:     options.translateSpeed || 1,
+    flipX:              !!options.flipX,
+    flipY:              !!options.flipY,
+    modes:              view.modes,
+    tick: function() {
+      var t = now()
+      var delay = this.delay
+      view.idle(t-delay)
+      view.flush(t-(100+delay*2))
+      var ctime = t - 2 * delay
+      view.recalcMatrix(ctime)
+      var allEqual = true
+      var matrix = view.computedMatrix
+      for(var i=0; i<16; ++i) {
+        allEqual = allEqual && (pmatrix[i] === matrix[i])
+        pmatrix[i] = matrix[i]
+      }
+      var sizeChanged =
+          element.clientWidth === width &&
+          element.clientHeight === height
+      width  = element.clientWidth
+      height = element.clientHeight
+      if(allEqual) {
+        return !sizeChanged
+      }
+      distance = Math.exp(view.computedRadius[0])
+      return true
+    },
+    lookAt: function(center, eye, up) {
+      view.lookAt(view.lastT(), center, eye, up)
+    },
+    rotate: function(pitch, yaw, roll) {
+      view.rotate(view.lastT(), pitch, yaw, roll)
+    },
+    pan: function(dx, dy, dz) {
+      view.pan(view.lastT(), dx, dy, dz)
+    },
+    translate: function(dx, dy, dz) {
+      view.translate(view.lastT(), dx, dy, dz)
+    }
+  }
+
+  Object.defineProperties(camera, {
+    matrix: {
+      get: function() {
+        return view.computedMatrix
+      },
+      set: function(mat) {
+        view.setMatrix(view.lastT(), mat)
+        return view.computedMatrix
+      },
+      enumerable: true
+    },
+    mode: {
+      get: function() {
+        return view.getMode()
+      },
+      set: function(mode) {
+        view.setMode(mode)
+        return view.getMode()
+      },
+      enumerable: true
+    },
+    center: {
+      get: function() {
+        return view.computedCenter
+      },
+      set: function(ncenter) {
+        view.lookAt(view.lastT(), ncenter)
+        return view.computedCenter
+      },
+      enumerable: true
+    },
+    eye: {
+      get: function() {
+        return view.computedEye
+      },
+      set: function(neye) {
+        view.lookAt(view.lastT(), null, neye)
+        return view.computedEye
+      },
+      enumerable: true
+    },
+    up: {
+      get: function() {
+        return view.computedUp
+      },
+      set: function(nup) {
+        view.lookAt(view.lastT(), null, null, nup)
+        return view.computedUp
+      },
+      enumerable: true
+    },
+    distance: {
+      get: function() {
+        return distance
+      },
+      set: function(d) {
+        view.setDistance(view.lastT(), d)
+        return d
+      },
+      enumerable: true
+    },
+    distanceLimits: {
+      get: function() {
+        return view.getDistanceLimits(limits)
+      },
+      set: function(v) {
+        view.setDistanceLimits(v)
+        return v
+      },
+      enumerable: true
+    }
+  })
+
+  element.addEventListener('contextmenu', function(ev) {
+    //ev.preventDefault()
+    //return false
+  })
+
+  var lastX = 0, lastY = 0, lastMods = {shift: false, control: false, alt: false, meta: false}
+  mouseChange(element, handleInteraction)
+
+  //enable simple touch interactions
+  element.addEventListener('touchstart', function (ev) {
+    var xy = mouseOffset(ev.changedTouches[0], element)
+    handleInteraction(0, xy[0], xy[1], lastMods)
+    handleInteraction(1, xy[0], xy[1], lastMods)
+
+    ev.preventDefault()
+  }, hasPassive ? {passive: false} : false)
+
+  element.addEventListener('touchmove', function (ev) {
+    var xy = mouseOffset(ev.changedTouches[0], element)
+    handleInteraction(1, xy[0], xy[1], lastMods)
+
+    ev.preventDefault()
+  }, hasPassive ? {passive: false} : false)
+
+  element.addEventListener('touchend', function (ev) {
+    var xy = mouseOffset(ev.changedTouches[0], element)
+    handleInteraction(0, lastX, lastY, lastMods)
+
+    ev.preventDefault()
+  }, hasPassive ? {passive: false} : false)
+
+  function handleInteraction (buttons, x, y, mods) {
+    var scale = 1.0 / element.clientHeight
+    var dx    = scale * (x - lastX)
+    var dy    = scale * (y - lastY)
+
+    var flipX = camera.flipX ? 1 : -1
+    var flipY = camera.flipY ? 1 : -1
+
+    var drot  = Math.PI * camera.rotateSpeed
+
+    var t = now()
+
+    if(buttons & 1) {
+      if(mods.shift) {
+        view.rotate(t, 0, 0, -dx * drot)
+      } else {
+        view.rotate(t, flipX * drot * dx, -flipY * drot * dy, 0)
+      }
+    } else if(buttons & 2) {
+      view.pan(t, -camera.translateSpeed * dx * distance, camera.translateSpeed * dy * distance, 0)
+    } else if(buttons & 4) {
+      var kzoom = camera.zoomSpeed * dy / window.innerHeight * (t - view.lastT()) * 50.0
+      view.pan(t, 0, 0, distance * (Math.exp(kzoom) - 1))
+    }
+
+    lastX = x
+    lastY = y
+    lastMods = mods
+  }
+
+  mouseWheel(element, function(dx, dy, dz) {
+    var flipX = camera.flipX ? 1 : -1
+    var flipY = camera.flipY ? 1 : -1
+    var t = now()
+    if(Math.abs(dx) > Math.abs(dy)) {
+      view.rotate(t, 0, 0, -dx * flipX * Math.PI * camera.rotateSpeed / window.innerWidth)
+    } else {
+      var kzoom = camera.zoomSpeed * flipY * dy / window.innerHeight * (t - view.lastT()) / 100.0
+      view.pan(t, 0, 0, distance * (Math.exp(kzoom) - 1))
+    }
+  }, true)
+
+  return camera
+}

package/src/core.ts

@@ -0,0 +1,89 @@
+import * as wasm from "pluot";
+import { lru, type LruStore } from "./lru-store.js";
+import type { AsyncReadable } from "zarrita";
+
+export const { render_wasm, pick_wasm } = wasm;
+
+// Global stores singleton.
+const stores: Record<string, LruStore<AsyncReadable>> = {};
+
+let isInitializedPromise: Promise<any> | undefined = undefined;
+let isWasmReady = false;
+
+async function _initialize() {
+  // IMPORTANT: This function should only be executed ONCE.
+  await wasm.default();
+
+  // This is a hack that allows avoiding putting these functions on `window` or `globalThis`.
+  // It is a workaround for https://github.com/wasm-bindgen/wasm-bindgen/issues/3041
+  // See corresponding code in `bindings.rs`.
+  wasm.set_zarr_imports({
+    zarr_get: async (store_name: string, key: string) => {
+      console.log(`zarr_get: store_name=${store_name}, key=${key}`);
+      return stores[store_name].get(`/${key}`);
+    },
+
+    zarr_get_status: (store_name: string, key: string) => {
+      return stores[store_name].getPeek(`/${key}`);
+    },
+
+    zarr_has: async (store_name: string, key: string) => {
+      // console.log(`zarr_has: store_name=${store_name}, key=${key}`);
+      return stores[store_name].get(`/${key}`) !== undefined;
+    },
+
+    zarr_has_status: (store_name: string, key: string) => {
+      return stores[store_name].getPeek(`/${key}`);
+    },
+
+    zarr_get_range_from_offset: async (store_name: string, key: string, offset: number, length: number) => {
+      // console.log(`zarr_get_range_from_offset: store_name=${store_name}, key=${key}, offset=${offset}, length=${length}`);
+      return stores[store_name].getRange(`/${key}`, { offset, length });
+    },
+
+    zarr_get_range_from_offset_status: (store_name: string, key: string, offset: number, length: number) => {
+      // console.log(`zarr_get_range_from_offset: store_name=${store_name}, key=${key}, offset=${offset}, length=${length}`);
+      return stores[store_name].getRangePeek(`/${key}`, { offset, length });
+    },
+
+    zarr_get_range_from_end: async (store_name: string, key: string, suffix_length: number) => {
+      // console.log(`zarr_get_range_from_end: store_name=${store_name}, key=${key}, suffix_length=${suffix_length}`);
+      return stores[store_name].getRange(`/${key}`, { suffixLength: suffix_length });
+    },
+
+    zarr_get_range_from_end_status: (store_name: string, key: string, suffix_length: number) => {
+      // console.log(`zarr_get_range_from_end: store_name=${store_name}, key=${key}, suffix_length=${suffix_length}`);
+      return stores[store_name].getRangePeek(`/${key}`, { suffixLength: suffix_length });
+    },
+  });
+
+  // Opt-in to better error messages.
+  wasm.set_panic_hook();
+}
+
+export async function initialize() {
+  // This function is safe to execute multiple times.
+  if(!isInitializedPromise) {
+    isInitializedPromise = _initialize().then(() => { isWasmReady = true; });
+  } else {
+    isInitializedPromise.then(() => { isWasmReady = true; });
+  }
+  return isInitializedPromise;
+}
+
+export function getIsWasmReady(): boolean {
+  return isWasmReady;
+}
+
+export function setStore(store: AsyncReadable, plotId: string): string {
+  stores[plotId + "_store"] = lru(store);
+  return plotId + "_store";
+}
+
+export function setStoreByName(storeName: string, store: AsyncReadable) {
+  stores[storeName] = lru(store);
+}
+
+export function getStore(storeName: string) {
+  return stores[storeName];
+}