Understanding `clampZoom()`

[jasonsturges]

Not sure I understand clampZoom() - three issues:

• In the API Documentation, there's no reference to coordinate system for boundaries. Presumably these are world dimensions?
• Minimum zoom is as far as you can zoom out, and maximum zoom is as far as you can zoom in, right? In that example, width and height are 5000, but minWidth is set to 1000 and maxWidth is set to 2000.
• How can clampZoom() be used when the viewport is first setup? Clamp is enabled only after first zoom interaction.

If I initialize viewport as:

    this.viewport = new Viewer({
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
      worldWidth: 4000,
      worldHeight: 4000,
      interaction: this.app.renderer.interaction
    })
      .drag({ clampWheel: true })
      .pinch()
      .wheel({ smooth: 3 })
      .decelerate()
      .bounce({ friction: 0.1, time: 500 })
      .clampZoom({ minWidth: 500, minHeight: 500, maxWidth: 8000, maxHeight: 8000 })

    this.app.stage.addChild(this.viewport);
    this.viewport.fitWorld();

Content in my viewport is perfectly centered thanks to bounce and fitWorld(); however, clamp is engaged only after the mouse wheel event. What if I want the viewport initialized with clamp constraints on first render?

Currently after fitWorld() I have to execute a zoom, like:

    this.viewport.zoom(500, true);

[davidfig]

Content in my viewport is perfectly centered thanks to bounce and fitWorld(); however, clamp is engaged only after the mouse wheel event. What if I want the viewport initialized with clamp constraints on first render?

Try v3.9.0. clampZoom now clamps when it's first called. It also clamps whenever you call fitWidth, fitHeight, fit, zoom, or zoomPercent.

Hopefully that helps you get rid of the extra zoom call.

In the API Documentation, there's no reference to coordinate system for boundaries. Presumably these are world dimensions?

All coordinates in pixi-viewport are world coordinates unless screen is specified. clampZoom uses worldScreenWidth/Height to figure out the zoom.

Minimum zoom is as far as you can zoom out, and maximum zoom is as far as you can zoom in, right? In that example, width and height are 5000, but minWidth is set to 1000 and maxWidth is set to 2000.

Yes, I think that's right. For example, minWidth is the minimum number of world pixels that will fit on the screen.

[jasonsturges]

Awesome - this is great. Thanks for the insights.