Merge pull request #1370 from FZJ-INM1-BDA/fix_touchCtrlNgLayerCtl

fix: ng layer controller not working

.eslintrc.js

@@ -7,7 +7,6 @@ module.exports = {
     "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-inferrable-types": "off",
     "@typescript-eslint/interface-name-prefix": [0],
-    // "no-unused-vars": "off",
     "semi": "off",
     "indent": "off",
     "@typescript-eslint/member-delimiter-style": [2, {

deploy/csp/index.js

@@ -115,7 +115,7 @@ module.exports = {
           'https://unpkg.com/d3@6.2.0/', // required for preview component
           'https://unpkg.com/mathjax@3.1.2/', // math jax
           'https://unpkg.com/three-surfer@0.0.13/dist/bundle.js', // for threeSurfer (freesurfer support in browser)
-          'https://unpkg.com/ng-layer-tune@0.0.14/dist/ng-layer-tune/', // needed for ng layer control
+          'https://unpkg.com/ng-layer-tune@0.0.16/dist/ng-layer-tune/', // needed for ng layer control
           'https://unpkg.com/hbp-connectivity-component@0.6.6/', // needed for connectivity component
           (req, res) => res.locals.nonce ? `'nonce-${res.locals.nonce}'` : null,
           ...SCRIPT_SRC,

docs/releases/v2.12.1.md

+# v2.12.1
+
+# Feature
+
+- added the option to use red/green/blue colormaps (#1366)
+
+## Bugfix
+
+- fixed touch devices unable to navigate viewer
+- fixed some volume controls not working

mkdocs.yml

@@ -33,6 +33,7 @@ nav:
     - Fetching datasets: 'advanced/datasets.md'
     - Display non-atlas volumes: 'advanced/otherVolumes.md'
   - Release notes:
+    - v2.12.1: 'releases/v2.12.1.md'
     - v2.12.0: 'releases/v2.12.0.md'
     - v2.11.4: 'releases/v2.11.4.md'
     - v2.11.3: 'releases/v2.11.3.md'

package-lock.json

 {
   "name": "siibra-explorer",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

src/index.html

@@ -14,7 +14,7 @@
   <script src="extra_js.js"></script>
   <script src="https://unpkg.com/kg-dataset-previewer@1.2.0/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer></script>
   <script src="https://unpkg.com/three-surfer@0.0.13/dist/bundle.js" defer></script>
-  <script type="module" src="https://unpkg.com/ng-layer-tune@0.0.14/dist/ng-layer-tune/ng-layer-tune.esm.js"></script>
+  <script type="module" src="https://unpkg.com/ng-layer-tune@0.0.16/dist/ng-layer-tune/ng-layer-tune.esm.js"></script>
   <script type="module" src="https://unpkg.com/hbp-connectivity-component@0.6.6/dist/connectivity-component/connectivity-component.js" ></script>
   <script defer src="https://unpkg.com/mathjax@3.1.2/es5/tex-svg.js"></script>
   <script defer src="https://unpkg.com/d3@6.2.0/dist/d3.min.js"></script>

src/viewerModule/nehuba/nehubaViewer/nehubaViewer.component.ts

@@ -847,7 +847,7 @@ const patchSliceViewPanel = (sliceViewPanel: any) => {
       const viewportToDataEv = new CustomEvent('viewportToData', {
         bubbles: true,
         detail: {
-          viewportToData : this.sliceView.viewportToData,
+          viewportToData : this.sliceView.invViewMatrix,
         },
       })
       this.element.dispatchEvent(viewportToDataEv)

src/viewerModule/nehuba/nehubaViewerInterface/nehubaViewerTouch.directive.ts

@@ -66,12 +66,12 @@ export class NehubaViewerTouchDirective implements OnDestroy{
      * Touchend also needs to be listened to, as user could start
      * with multitouch, and end up as single touch
      */
-    const touchStart$ = fromEvent(this.el.nativeElement, 'touchstart').pipe(
+    const touchStart$ = fromEvent(this.el.nativeElement, 'touchstart', { capture: true }).pipe(
       shareReplay(1),
     )
     this.singleTouchStart$ = merge(
       touchStart$,
-      fromEvent(this.el.nativeElement, 'touchend')
+      fromEvent(this.el.nativeElement, 'touchend', { capture: true })
     ).pipe(
       filter((ev: TouchEvent) => ev.touches.length === 1),
       shareReplay(1),
@@ -81,18 +81,18 @@ export class NehubaViewerTouchDirective implements OnDestroy{
       filter((ev: TouchEvent) => ev.touches.length > 1),
     )
 
-    this.touchEnd$ = fromEvent(this.el.nativeElement, 'touchend').pipe(
+    this.touchEnd$ = fromEvent(this.el.nativeElement, 'touchend', { capture: true }).pipe(
       map(ev => ev as TouchEvent),
     )
 
-    this.touchMove$ = fromEvent(this.el.nativeElement, 'touchmove')
+    this.touchMove$ = fromEvent(this.el.nativeElement, 'touchmove', { capture: true })
 
     const multiTouch$ = this.multiTouchStart$.pipe(
       // only tracks first 2 touches
       map((ev: TouchEvent) => [ this.findPanelIndex(ev.touches[0].target as HTMLElement), this.findPanelIndex(ev.touches[0].target as HTMLElement) ]),
       filter(indicies => indicies[0] >= 0 && indicies[0] === indicies[1]),
       map(indicies => indicies[0]),
-      switchMap(panelIndex => fromEvent(this.el.nativeElement, 'touchmove').pipe(
+      switchMap(panelIndex => fromEvent(this.el.nativeElement, 'touchmove', { capture: true }).pipe(
         filter((ev: TouchEvent) => ev.touches.length > 1),
         pairwise(),
         map(([ev0, ev1]) => {
@@ -256,7 +256,7 @@ export class NehubaViewerTouchDirective implements OnDestroy{
       ).subscribe(({ panelIndex, deltaX, deltaY }) => {
         if (isNaN(deltaX) || isNaN(deltaX)) return
         const { position } = this.ngViewer.navigationState
-        const pos = position.spatialCoordinates
+        const pos = position.value
         const { vec3 } = this.exportNehuba
         vec3.set(pos, deltaX, deltaY, 0)
         vec3.transformMat4(pos, pos, this.viewportToData[panelIndex])