X and Y zoom in orthographic view

[cornhundred]

Hi, I'm trying to set up a zoom behavior where I allow zooming in one axis ('X' or 'Y') and then switch to zooming in both axes (once a sufficient zoom level is achieved).

l'm starting with something like this (see ObservableHQ notebook):

deckgl = {
  return new deck.DeckGL({
    container,
    views: new deck.OrthographicView({controller: true}),
    initialViewState: {target: [0, 0, 0], zoom: [0, 0]},
    onViewStateChange: ({viewState}) => {

      viewState.zoom = [viewState.zoom[0], 0]
      return viewState
    }, 
    controller: {scrollZoom: true, inertia: true, zoomAxis: 'X'}
  });
}

Is there a way I can achieve this using the custom OrthographicController API? For instance, can I switch the zoomAxis from 'X' to all based on the zoom level?

[cornhundred]

Looking at orthographic-controller.ts

  _calculateNewZoom({scale, startZoom}) {
    const {maxZoom, minZoom} = this.getViewportProps();
    if (startZoom === undefined) {
      startZoom = this.getViewportProps().zoom;
    }
    let deltaZoom = Math.log2(scale);
    if (Array.isArray(startZoom)) {
      let [newZoomX, newZoomY] = startZoom;
      switch (this.zoomAxis) {
        case 'X':
          // Scale x only
          newZoomX = clamp(newZoomX + deltaZoom, minZoom, maxZoom);
          break;
        case 'Y':
          // Scale y only
          newZoomY = clamp(newZoomY + deltaZoom, minZoom, maxZoom);
          break;
        default:
          // Lock aspect ratio
          let z = Math.min(newZoomX + deltaZoom, newZoomY + deltaZoom);
          if (z < minZoom) {
            deltaZoom += minZoom - z;
          }
          z = Math.max(newZoomX + deltaZoom, newZoomY + deltaZoom);
          if (z > maxZoom) {
            deltaZoom += maxZoom - z;
          }
          newZoomX += deltaZoom;
          newZoomY += deltaZoom;
      }
      return [newZoomX, newZoomY];
    }
    // Ignore `zoomAxis`
    // `LinearTransitionInterpolator` does not support interpolation between a number and an array
    // So if zoom is a number (legacy use case), new zoom still has to be a number
    return clamp(startZoom + deltaZoom, minZoom, maxZoom);
  }
}

It seems like this functionality is not currently supported. I'll try to think of a way that this function could be extended to support simultaneous independent control of the X and Y zoom levels and possibly make a pull request if I come up with something. Any help or advice would be greatly appreciated :)

[Pessimistress]

You can change controller options at any time.

[cornhundred]

Thanks @Pessimistress I'll give that a try

[cornhundred]

@Pessimistress, I'm a bit confused about how I should try to update the controller options. Do you know if there are any examples of how this can be done? I'm thinking I might want to toggle between "X"/"Y"/"all" option for the controller in the handleEvent as shown in the documentation.

Also, is there a way to get the size of the visual elements to stretch out as we zoom in X/Y? Currently, these elements remain the same size as we zoom in X/Y.

[Pessimistress]

let zoomMode = 'X'

const deckgl = new Deck({
    views: new OrthographicView(), 
    controller: {zoomAxis: zoomMode},
    initialViewState: {target: [0, 0, 0], zoom: [0, 0]},
    onViewStateChange: ({viewState}) => {
      const nextZoomMode = viewState.zoom[0] > 10 ? 'all' : 'X'
      if (zoomMode !== nextZoomMode) {
        zoomMode = nextZoomMode
        deckgl.setProps({
          controller: {zoomAxis: zoomMode}
        }
      }
    }
  });

[cornhundred]

Thanks for the example code @Pessimistress! I'm getting a circular definition error on ObservableHQ when I try to set dekgl's props, but that seems like an ObservableHQ specific issue - see https://observablehq.com/d/426bbc4388164b45

Here's a link to a question about this on ObservableHQ talk page

[cornhundred]

FYI - I was able to figure out how to fix the circular definition by defining a local variable.

[cornhundred]

see example of this here https://observablehq.com/d/1d9611fa5d8bdf4e

// see https://talk.observablehq.com/t/deck-gl-seprops-circular-definition/7389/2
deckgl = {

  var zoomMode = 'X'

  const instance = new deck.DeckGL({
    container,
    views: new deck.OrthographicView(),
    controller: {scrollZoom: true, inertia: true, zoomAxis: 'X'},
    initialViewState: {target: [0, 0, 0], zoom: [0, 0]},

    // circular definition
    onViewStateChange: ({viewState}) => {
      
      const nextZoomMode = viewState.zoom[0] > 3 ? 'all' : 'X'
      if (zoomMode !== nextZoomMode) {

        // update zoom mode
        zoomMode = nextZoomMode

        // update Props
        instance.setProps({
          controller: {zoomAxis: zoomMode}
        })    
        
      }
    }
    
  })
  
  return instance;
}

[cornhundred]

Thanks for the help @Pessimistress.

One last question - would you happen to know if it is possible to have X and Y zooming 'stretch' the visual or is this not possible?

[Pessimistress]

What layers are you using

[cornhundred]

I'm trying to use a custom primitive layer forked from an example on Onservable https://observablehq.com/d/1d9611fa5d8bdf4e

[Pessimistress]

It's completely up to the layer how it handles zoom. So to answer your question, yes it is possible. I'm not sure what implementation advice to give you, since the notebook is very different from the GIF in your original post.

[cornhundred]

Thanks @Pessimistress, I was able to tweak the example to be a little closer to the GIF https://observablehq.com/@cornhundred/deck-gl-tutorial-custom-primitive-layer-squares

I'll experiment more with it and update. Thanks for the help!