@vitessce/neuroglancer 3.6.18 → 3.7.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { N } from "./index-BNCfoEHv.js";
+import { N } from "./index-w8xI9TWU.js";
 export {
   N as NeuroglancerSubscriber
 };

package/dist-tsc/Neuroglancer.d.ts

@@ -1,7 +1,7 @@
-export class Neuroglancer {
+export class NeuroglancerComp {
     constructor(props: any);
     bundleRoot: any;
-    viewerState: any;
+    cellColorMapping: any;
     justReceivedExternalUpdate: boolean;
     prevElement: any;
     prevClickHandler: ((event: any) => void) | null;
@@ -9,7 +9,9 @@ export class Neuroglancer {
     prevHoverHandler: (() => void) | null;
     onViewerStateChanged(nextState: any): void;
     onRef(viewerRef: any): void;
-    UNSAFE_componentWillUpdate(prevProps: any): void;
+    latestOnSegmentClick: any;
+    latestOnSelectHoveredCoords: any;
+    componentDidUpdate(prevProps: any): void;
     render(): JSX.Element;
 }
 //# sourceMappingURL=Neuroglancer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AA+DA;IACE,wBAeC;IAZC,gBAAgC;IAEhC,iBAAoC;IACpC,oCAAuC;IAEvC,iBAAuB;IACvB,gDAA4B;IAC5B,2BAAiC;IACjC,sCAA4B;IAkD9B,2CASC;IArDD,4BA0CC;IAaD,iDAQC;IAED,sBAqBC;CACF"}
+{"version":3,"file":"Neuroglancer.d.ts","sourceRoot":"","sources":["../src/Neuroglancer.js"],"names":[],"mappings":"AAUA;IACE,wBAcC;IAZC,gBAAgC;IAChC,sBAA8C;IAC9C,oCAAuC;IACvC,iBAAuB;IACvB,gDAA4B;IAC5B,2BAAiC;IACjC,sCAA4B;IAsD9B,2CAGC;IAjDD,4BA4CC;IAhDC,0BAAgD;IAChD,iCAA8D;IAsDhE,yCAQC;IAED,sBAoBC;CACF"}

package/dist-tsc/Neuroglancer.js

@@ -2,62 +2,16 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 /* eslint-disable react-refresh/only-export-components */
 import React, { PureComponent, Suspense } from 'react';
 import { ChunkWorker } from '@vitessce/neuroglancer-workers';
-import { isEqualWith, pick } from 'lodash-es';
 import { NeuroglancerGlobalStyles } from './styles.js';
 const LazyReactNeuroglancer = React.lazy(() => import('./ReactNeuroglancer.js'));
 function createWorker() {
     return new ChunkWorker();
 }
-/**
- * Is this a valid viewerState object?
- * @param {object} viewerState
- * @returns {boolean}
- */
-function isValidState(viewerState) {
-    const { projectionScale, projectionOrientation, position, dimensions } = viewerState || {};
-    return (dimensions !== undefined
-        && typeof projectionScale === 'number'
-        && Array.isArray(projectionOrientation)
-        && projectionOrientation.length === 4
-        && Array.isArray(position)
-        && position.length === 3);
-}
-// TODO: Do we want to use the same epsilon value
-// for every viewstate property being compared?
-const EPSILON = 1e-7;
-const VIEWSTATE_KEYS = ['projectionScale', 'projectionOrientation', 'position'];
-// Custom numeric comparison function
-// for isEqualWith, to be able to set a custom epsilon.
-function customizer(a, b) {
-    if (typeof a === 'number' && typeof b === 'number') {
-        // Returns true if the values are equivalent, else false.
-        return Math.abs(a - b) > EPSILON;
-    }
-    // Return undefined to fallback to the default
-    // comparison function.
-    return undefined;
-}
-/**
- * Returns true if the two states are equal, or false if not.
- * @param {object} prevState Previous viewer state.
- * @param {object} nextState Next viewer state.
- * @returns
- */
-function compareViewerState(prevState, nextState) {
-    if (isValidState(nextState)) {
-        // Subset the viewerState objects to only the keys
-        // that we want to use for comparison.
-        const prevSubset = pick(prevState, VIEWSTATE_KEYS);
-        const nextSubset = pick(nextState, VIEWSTATE_KEYS);
-        return isEqualWith(prevSubset, nextSubset, customizer);
-    }
-    return true;
-}
-export class Neuroglancer extends PureComponent {
+export class NeuroglancerComp extends PureComponent {
     constructor(props) {
         super(props);
         this.bundleRoot = createWorker();
-        this.viewerState = props.viewerState;
+        this.cellColorMapping = props.cellColorMapping;
         this.justReceivedExternalUpdate = false;
         this.prevElement = null;
         this.prevClickHandler = null;
@@ -65,65 +19,70 @@ export class Neuroglancer extends PureComponent {
         this.prevHoverHandler = null;
         this.onViewerStateChanged = this.onViewerStateChanged.bind(this);
         this.onRef = this.onRef.bind(this);
+        // To avoid closure for onSegmentClick(), to update the selection
+        this.latestOnSegmentClick = props.onSegmentClick;
+        this.latestOnSelectHoveredCoords = props.onSelectHoveredCoords;
     }
     onRef(viewerRef) {
         // Here, we have access to the viewerRef.viewer object,
         // which we can use to add/remove event handlers.
-        const { onSegmentClick, onSelectHoveredCoords, } = this.props;
         if (viewerRef) {
             // Mount
             const { viewer } = viewerRef;
             this.prevElement = viewer.element;
             this.prevMouseStateChanged = viewer.mouseState.changed;
+            viewer.inputEventBindings.sliceView.set('at:dblclick0', () => { });
+            viewer.inputEventBindings.perspectiveView.set('at:dblclick0', () => { });
             this.prevClickHandler = (event) => {
                 if (event.button === 0) {
-                    setTimeout(() => {
-                        const { pickedValue } = viewer.mouseState;
-                        if (pickedValue && pickedValue?.low) {
-                            onSegmentClick(pickedValue?.low);
+                    // Wait for mouseState to update
+                    requestAnimationFrame(() => {
+                        const { pickedValue, pickedRenderLayer } = viewer.mouseState;
+                        // Only trigger selection when a segment is clicked rather than any click on the view
+                        if (pickedValue && pickedValue.low !== undefined && pickedRenderLayer) {
+                            this.latestOnSegmentClick?.(pickedValue.low);
                         }
-                    }, 100);
+                    });
                 }
             };
-            viewer.element.addEventListener('mousedown', this.prevClickHandler);
             this.prevHoverHandler = () => {
                 if (viewer.mouseState.pickedValue !== undefined) {
                     const pickedSegment = viewer.mouseState.pickedValue;
-                    onSelectHoveredCoords(pickedSegment?.low);
+                    this.latestOnSelectHoveredCoords?.(pickedSegment?.low);
                 }
             };
+            viewer.element.addEventListener('mouseup', this.prevClickHandler);
             viewer.mouseState.changed.add(this.prevHoverHandler);
         }
         else {
             // Unmount (viewerRef is null)
             if (this.prevElement && this.prevClickHandler) {
-                this.prevElement.removeEventListener('mousedown', this.prevClickHandler);
+                this.prevElement.removeEventListener('mouseup', this.prevClickHandler);
+                this.prevClickHandler = null;
             }
             if (this.prevMouseStateChanged && this.prevHoverHandler) {
                 this.prevMouseStateChanged.remove(this.prevHoverHandler);
+                this.prevHoverHandler = null;
             }
+            this.prevElement = null;
+            this.prevMouseStateChanged = null;
         }
     }
     onViewerStateChanged(nextState) {
         const { setViewerState } = this.props;
-        const { viewerState: prevState } = this;
-        if (!this.justReceivedExternalUpdate && !compareViewerState(prevState, nextState)) {
-            this.viewerState = nextState;
-            this.justReceivedExternalUpdate = false;
-            setViewerState(nextState);
-        }
+        setViewerState(nextState);
     }
-    UNSAFE_componentWillUpdate(prevProps) {
-        if (!compareViewerState(this.viewerState, prevProps.viewerState)) {
-            this.viewerState = prevProps.viewerState;
-            this.justReceivedExternalUpdate = true;
-            setTimeout(() => {
-                this.justReceivedExternalUpdate = false;
-            }, 100);
+    componentDidUpdate(prevProps) {
+        const { onSegmentClick, onSelectHoveredCoords } = this.props;
+        if (prevProps.onSegmentClick !== onSegmentClick) {
+            this.latestOnSegmentClick = onSegmentClick;
+        }
+        if (prevProps.onSelectHoveredCoords !== onSelectHoveredCoords) {
+            this.latestOnSelectHoveredCoords = onSelectHoveredCoords;
         }
     }
     render() {
-        const { classes, } = this.props;
-        return (_jsxs(_Fragment, { children: [_jsx(NeuroglancerGlobalStyles, { classes: classes }), _jsx("div", { className: classes.neuroglancerWrapper, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState: this.viewerState, onViewerStateChanged: this.onViewerStateChanged, bundleRoot: this.bundleRoot, ref: this.onRef }) }) })] }));
+        const { classes, viewerState, cellColorMapping } = this.props;
+        return (_jsxs(_Fragment, { children: [_jsx(NeuroglancerGlobalStyles, { classes: classes }), _jsx("div", { className: classes.neuroglancerWrapper, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: _jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState: viewerState, onViewerStateChanged: this.onViewerStateChanged, bundleRoot: this.bundleRoot, cellColorMapping: cellColorMapping, ref: this.onRef }) }) })] }));
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAiEA,gEAuKC"}
+{"version":3,"file":"NeuroglancerSubscriber.d.ts","sourceRoot":"","sources":["../src/NeuroglancerSubscriber.js"],"names":[],"mappings":"AAiDA,gEA2dC"}