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.
- panType (default:all) – In which direction pan is allowed. Accepts “all”, “x” and “y”
- 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)
- fitOnMountConfig – An object containing configuration for fitting when mounting
  - enabled (default:false) – Whether to fit the inner container to the outer one when it is mounted
  - fitInstantly (default:true) – Whether to override the default transition to fit instantly on mount
  - fitType (default:self) – Whether to fit self, a named component or a named zone on mount
  - componentToFit (default: “”) – If set to a valid component name and fitType is component will fit to the named component on mount
  - zoneToFit (default: “”) – If set to a valid zone name and fitType is zone will fit to the named zone on mount
- defaultTransitionDuration (default:0.25s) – The default transition duration (in css format)
- defaultTimingFunction (default:ease-out) – The default timing function for the transitions
- alwaysDrawAllChildren (default:false) – Whether to draw children component even when they are not visible
- inDebugMode (default:false) – 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
- initialScale (default:1) – The initial scale of the inner container
- oppositeEdgeLimits – The margin allowed for the opposite edge crossover
  - x (default:0) – The horizontal margin
  - y (default:0) – The vertical margin
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
fitZones – A dictionary of rectangles to be used as zones for the fitToZone() function and zoneToFit property when fitting on mount. Uses the following object definition:
- x – left position of rectangle
- y – top position of rectangle
- width – width of rectangle
- height – height of rectangle
displayToolbox (default: false) – Whether to show the toolbox in the container
toolbox
- position – Where the toolbox is displayed. “center”/”center” is invalid and will not draw.
  - horizontalPos (default: “right”) – The horizontal position of the toolbox. Accepts “left”, “center” or “right”
  - verticalPos (default: “top”) – The vertical position of the toolbox. Accepts “top”, “center” or “bottom”
- alwaysDisplay (default: false) – Whether to use the handle to toggle the toolbox or have it always on display
- handle – Configuration for the handle
  - dimensions
    - width (default: “32px”) – CSS Size property
    - height (default: “32px”) – CSS Size property
  - iconColor (default “#fff”) – The color of the icon inside the handle
  - handleStyle – Style properties to apply to the handle
- buttons
  - definitions
    - home – Performs actions set by homeButtonAction property
      - display (default: true)
      - order (default: 1) – Flex order
      - iconColor (default: “#f5f6fa”)
      - style – Style properties to apply to the button. Comes with default BIJC button class
    - reset – Resets to initial scale/position
      - display (default: true)
      - order (default: 2) – Flex order
      - iconColor (default: “#f5f6fa”)
      - style – Style properties to apply to the button. Comes with default BIJC button class
    - fit – Fits inner container to outer container
      - display (default: true)
      - order (default: 3) – Flex order
      - iconColor (default: “#f5f6fa”)
      - style – Style properties to apply to the button. Comes with default BIJC button class
    - stepZoomIn – Zooms in according to step properties
      - display (default: true)
      - order (default: 4) – Flex order
      - iconColor (default: “#f5f6fa”)
      - style – Style properties to apply to the button. Comes with default BIJC button class
    - stepZoomOut – Zooms in according to step properties
      - display (default: true)
      - order (default: 5) – Flex order
      - iconColor (default: “#f5f6fa”)
      - style – Style properties to apply to the button. Comes with default BIJC button class
    - panToggle – Toggles the allowPan property on the component
      - display (default: true)
      - order (default: 6) – Flex order
      - onClass (default: “bijc-zp-button-success”)
      - offClass (default: “bijc-zp-button-danger”)
      - iconColor (default: “#f5f6fa”)
      - style – Style properties to apply to the button. Comes with default BIJC button class
    - zoomToggle – Resets to initial scale/position
      - display (default: true)
      - order (default: 1) – Flex order
      - onClass (default: “bijc-zp-button-success”)
      - offClass (default: “bijc-zp-button-danger”)
      - iconColor (default: “#f5f6fa”)
      - style – Style properties to apply to the button. Comes with default BIJC button class
  - buttonDirection (default: “column”) – Sets the flex-direction property of the button container
  - traySize (default: “40px”) – CSS size property for the button container
  - buttonDimensions
    - width (default: “32px”) – CSS Size property
    - height (default: “32px”) – CSS Size property
  - buttonGap (default: “0.25rem”) – Sets the gap and relevant padding properties of the button container
  - iconSize (default: “24px)
  - homeButtonAction (default: “fit”) – The action to perform when the home button is pressed. Accepts “fit”, “reset” or “initialFit”
  - stepZoomConfig
    - value (default: 0.2) – How much to step the zoom
    - useValueAsPercentage (default: false) – Whether to use the value as a percentage change or real value change
  - buttonContainerStyle – Style properties to apply to the button container
  - globalButtonStyle – Style properties to apply to each button
- toolboxStyle – Style properties applied to the container holding the buttons and handle
innerStyle – Style properties to apply to the inner container
style – Style properties to apply to the outer 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

On Component Resize

Fires when the component is resized

event.w | The new component width
event.h | The new component height

Component Functions

Set Scale

component.setScale(scale: float, transitionDuration: str, timingFunction: str)

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

scale : float | The new scale value of the inner 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

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 Zone

component.fitZone(zoneName: str, margin: int, transitionDuration: str, timingFunction: str)

Fits the named zone from the fitZones property on the component if it is a valid zone

zoneName: str | The name of the zone 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