clamp

[arhariri79]

when i use clamp direction="all" but my clamp does not work and i test clamp with another app but does not work or when i use clamp direction ="y" does not work well

[davidfig]

Can your provide an example?

[arhariri79]

like your example in github i used clamp plugin in my code but when i set the clamp direction to 'all' the picture clamps to the top and left edge but not the right or bottom edge of the screen

[arhariri79]

react example

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Button} from "react-bootstrap"
import * as PIXI from 'pixi.js';
import { Viewport } from 'pixi-viewport'

const TextPixi = () => {
    const onClick = async () => {


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

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

            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()
            .pinch()
            .wheel()
            .decelerate({friction:0.95,minSpeed:0.01})
            .clamp({direction:'all',underflow:'center'})


// 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)

    }
    return (
        <>
            <div className="text-pixi">
                <Button onClick={onClick} variant="primary">Start</Button>
            </div>
            <div className="d-flex justify-center align-center fill-height">
                <div id="pixi-base64-container"/>
            </div>
        </>
    );
};

export default TextPixi;

[davidfig]

Is your worldWidth/Height correct? Seems strange.

[arhariri79]

yes i should change the world width/height as same as picture size but i think it is better to say this point into documention i thank you for view-port