pixi-viewport icon indicating copy to clipboard operation
pixi-viewport copied to clipboard

`clampZoom` requires both `min` and `max` option to work

Open soanvig opened this issue 4 years ago • 4 comments

I would like to confirm, that clampZoom requires both min and max options to work.

E.g. I don't want my viewport to be smaller than 1000x1000

Doesn't work .clampZoom({ minWidth: 1000 }); .clampZoom({ minWidth: 1000, minHeight: 1000 });

Does work .clampZoom({ minWidth: 1000, maxWidth: 2000 }); .clampZoom({ minWidth: 1000, minHeight: 1000, maxWidth: 2500, maxHeight: 2500 });

If it's true, I think it's agreeable behavior, but the documentation doesn't mention that.

I can prepare PR with a fix to docs, just need the confirmation :)

That's strange behavior though. Looking at the code https://github.com/davidfig/pixi-viewport/blob/master/src/plugins/clamp-zoom.js I cannot find the reason for it.

This may somehow related to: https://github.com/davidfig/pixi-viewport/pull/201

soanvig avatar Jul 04 '20 09:07 soanvig

That sounds like a bug. It was designed to require just one value. Let me take a look through the code and see what's going on.

davidfig avatar Jul 05 '20 00:07 davidfig

I just tested the code above and it seems to work. Can you show a fiddle where it doesn't work as expected?

davidfig avatar Jul 05 '20 00:07 davidfig

Sure. I use latest versions, and Firefox browser. I don't have other browsers for now, to test that there.

This is example from README, but with added .clampZoom({ minWidth: 1000});

import * as PIXI from 'pixi.js';
import { Viewport } from 'pixi-viewport';

const app = new PIXI.Application();
document.body.appendChild(app.view);

// create viewport
const viewport = new Viewport({
		screenWidth: window.innerWidth,
		screenHeight: window.innerHeight,
		worldWidth: 1000,
		worldHeight: 1000,

		interaction: app.renderer.plugins.interaction, // the interaction module is important for wheel to work properly when renderer.view is placed or scaled
});

// add the viewport to the stage
app.stage.addChild(viewport);

// activate plugins
viewport
		.drag()
		.wheel()
		.clampZoom({ minWidth: 1000});

// add a red box
const sprite = viewport.addChild(new PIXI.Sprite(PIXI.Texture.WHITE));
sprite.tint = 0xff0000;
sprite.width = sprite.height = 100;
sprite.position.set(100, 100);

I can zoom out the red square up to point where it's a single pixel, and where it's not visible.

soanvig avatar Jul 05 '20 19:07 soanvig

Hmm...i tried it again and it still seems to work. The minWidth option creates a ceiling for the zoom. I also tried it in Firefox, and it worked (although the Windows touch screen for some reason did not). Here's a gif of the behavior:

minWidth

davidfig avatar Jul 05 '20 23:07 davidfig