Menu

Zoom Pan Container

A new XY container for perspective that allows for zooming and panning components inside it.

The Zoom Pan container is much like the XY container but it allows for zooming and panning the components that are placed inside of it.

Property Tree

  • config – Contains the properties for configuring the component
    • allowZoom (default:true) –  Whether to allow zooming the inner container.
    • allowPan (default:true) –  Whether to allow panning the inner container.
    • allowTouchEvents (default:true) – Whether to allow zooming and panning by touch events
    • doubleTouchMaxDelay (default:300) – Maximum delay between two taps to consider a double tap (ms)
    • fitOnMount (default:false) – Whether to fit the inner container to the outer one when it is mounted
    • fitOnMountInstantly (default:true) – Whether to override the default transition to fit instantly on mount
    • defaultTransitionDuration (default:0.25s) – The default transition duration (in css format)
    • defaultTimingFunction (default:ease-out) – The default timing function for the transitions
    • inDebugMode – Will put the container into debug mode, showing more information and logging more to the console.
    • debug – Debug configuration
      • showDebugQueue – Whether to show the queue that displays events on the corner of the outer container
      • debugQueueSize – How many events the debug queue can hold
      • showDebugBorders – Whether to draw borders on the inner and outer containers
  • dimensions – The initial settings for the inner container
    • innerWidth (default:1000) – The width of the inner container in pixels
    • innerHeight (default:1000) – The height of the inner container in pixels
    • initialPosition – The initial position of the inner container
      • x (default:0) – The initial x position of the inner container
      • y (default:0) – The initial y position of the inner container
  • currentState – Read only values for the current state of the inner container
    • scale – The current scale of the inner container
    • posX – The current x position of the inner container
    • posY – The current y position of the inner container
  • minScale (default:1) – The minimum scale level for the inner container
  • maxScale (default:5) – The maximum scale level for the inner container
  • scrollVelocity (default:0.2) – The zoom increment or decrement on each scroll wheel detection
  • useVelocityForTouchZoom (default:true) – Whether to use velocity value for touch zoom
  • touchZoomVelocity (default:0.2) – The zoom increment or decrement when zooming with touch controls
  • transitionConfig – Sets the default transition properties on component functions
    • transitionDuration (default:”0.25s”) – The CSS valid transition duration for animations
    • timingFunction (default:”ease-out”) – The CSS valid timing function to use for animation
  • innerStyle – Style properties to apply to the inner container

Component Events

On Scale Changed

Fires when the scale of the inner container changes

  • event.newScale | The new scale of the inner container

On Position Changed

Fires when the position of the inner container changes

  • event.newX | The new x position of the inner container
  • event.newY | The new y position of the inner container

On Double Tap

Fires when the component is tapped on twice in quick succession

  • event.x | The x position of the second tap in the double tap
  • event.y | The y position of the second tap in the double tap

On Window Resize

Fires when the browser window is resized

  • event.w | The new window width
  • event.h | The new window height

Component Functions

Set Scale

component.setScale(scale: float)

Sets the scale value of the inner container to the value passed in

  • scale : float | The new scale value of the inner container

Set Position

component.setPosition(x: float, y: float)

Sets the position of the inner container

  • x : float | The new x position of the inner container
  • y : float | The new y position of the inner container

Fit

Will fit the inner container to the outer container

component.fit(transitionDuration: str, timingFunction: str)

Fits the inner container to the outer container

  • transitionDuration : str, optional | The CSS valid value of the transition duration while fitting
  • timingFunction : str, optional | The CSS valid value of the timing function while fitting

Fit Component

component.fitComponent(componentName: str, margin: int, transitionDuration: str, timingFunction: str)

Fits the named component to the outer container

The named component MUST be a direct child of the Zoom Pan Container

  • componentName : str | The name of the component to fit
  • margin : int, optional | A pixel value margin to be applied when fitting
  • transitionDuration : str, optional | The CSS valid value of the transition duration while fitting
  • timingFunction : str, optional | The CSS valid value of the timing function while fitting

Fit Rect

component.fitRect(x: float, y: float, width: float, height: float, transitionDuration: str, timingFunction: str)

Fits the defined rectangle to the outer container

  • x : float | The x value of the rectangle to fit
  • y : float | The y value of the rectangle to fit
  • width : float | The width value of the rectangle to fit
  • height : float | The height value of the rectangle to fit
  • transitionDuration : str, optional | The CSS valid value of the transition duration while fitting
  • timingFunction : str, optional | The CSS valid value of the timing function while fitting

To download a trial of the Zoom Pan module please enter your email below – a link to download will be provided. We will not contact you unless you ask for support or you ask for a license. If you would like to purchase a licence for $500 please contact us at module.support@bijc.co.uk

Sidebar