{"id":514,"date":"2025-11-06T11:18:37","date_gmt":"2025-11-06T11:18:37","guid":{"rendered":"http:\/\/modules.bijc.co.uk\/?page_id=514"},"modified":"2025-11-06T11:19:46","modified_gmt":"2025-11-06T11:19:46","slug":"zoom-pan-8-1-documentation","status":"publish","type":"page","link":"https:\/\/modules.bijc.co.uk\/?page_id=514","title":{"rendered":"Zoom Pan 8.1 Documentation"},"content":{"rendered":"\n<p>A new XY container for perspective that allows for zooming and panning components inside it.<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\">\n<p>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.<\/p>\n\n\n\n<h3>Property Tree<\/h3>\n\n\n\n<ul><li>config &#8211; Contains the properties for configuring the component<ul><li>allowZoom <strong>(default:true)<\/strong> &#8211; &nbsp;Whether to allow zooming the inner container.<\/li><li>allowPan <strong>(default:true)<\/strong> &#8211; &nbsp;Whether to allow panning the inner container.<\/li><li>allowTouchEvents <strong>(default:true)<\/strong> &#8211; Whether to allow zooming and panning by touch events<\/li><li>doubleTouchMaxDelay <strong>(default:300)<\/strong> &#8211; Maximum delay between two taps to consider a double tap (ms)<\/li><li>fitOnMount <strong>(default:false)<\/strong> &#8211; Whether to fit the inner container to the outer one when it is mounted<\/li><li>fitOnMountInstantly <strong>(default:true)<\/strong> &#8211; Whether to override the default transition to fit instantly on mount<\/li><li>defaultTransitionDuration <strong>(default:0.25s)<\/strong> &#8211; The default transition duration (in css format)<\/li><li>defaultTimingFunction <strong>(default:ease-out)<\/strong> &#8211; The default timing function for the transitions<\/li><li>alwaysDrawAllChildren <strong>(default:false)<\/strong> &#8211; Whether to draw children component even when they are not visible<\/li><li>inDebugMode &#8211; Will put the container into debug mode, showing more information and logging more to the console.<\/li><li>debug &#8211; Debug configuration<ul><li>showDebugQueue &#8211; Whether to show the queue that displays events on the corner of the outer container<\/li><li>debugQueueSize &#8211; How many events the debug queue can hold<\/li><li>showDebugBorders &#8211; Whether to draw borders on the inner and outer containers<\/li><\/ul><\/li><\/ul><\/li><li>dimensions &#8211; The initial settings for the inner container<ul><li>innerWidth <strong>(default:1000)<\/strong> &#8211; The width of the inner container in pixels<\/li><li>innerHeight <strong>(default:1000)<\/strong> &#8211; The height of the inner container in pixels<\/li><li>initialPosition &#8211; The initial position of the inner container<ul><li>x <strong>(default:0)<\/strong> &#8211; The initial x position of the inner container<\/li><li>y <strong>(default:0)<\/strong> &#8211; The initial y position of the inner container<\/li><\/ul><\/li><\/ul><\/li><li>currentState &#8211; Read only values for the current state of the inner container<ul><li>scale &#8211; The current scale of the inner container<\/li><li>posX &#8211; The current x position of the inner container<\/li><li>posY &#8211; The current y position of the inner container<\/li><\/ul><\/li><li>minScale <strong>(default:1)<\/strong> &#8211; The minimum scale level for the inner container<\/li><li>maxScale <strong>(default:5)<\/strong> &#8211; The maximum scale level for the inner container<\/li><li>scrollVelocity <strong>(default:0.2)<\/strong> &#8211; The zoom increment or decrement on each scroll wheel detection<\/li><li>useVelocityForTouchZoom <strong>(default:true)<\/strong> &#8211; Whether to use velocity value for touch zoom<\/li><li>touchZoomVelocity <strong>(default:0.2)<\/strong> &#8211; The zoom increment or decrement when zooming with touch controls<\/li><li>transitionConfig &#8211; Sets the default transition properties on component functions<ul><li>transitionDuration <strong>(default:&#8221;0.25s&#8221;)<\/strong> &#8211; The CSS valid transition duration for animations<\/li><li>timingFunction <strong>(default:&#8221;ease-out&#8221;)<\/strong> &#8211; The CSS valid timing function to use for animation<\/li><\/ul><\/li><li>innerStyle &#8211; Style properties to apply to the inner container<\/li><\/ul>\n\n\n\n<h3>Component Events<\/h3>\n\n\n\n<h4>On Scale Changed<\/h4>\n\n\n\n<p>Fires when the scale of the inner container changes<\/p>\n\n\n\n<ul><li><code>event.newScale<\/code> | The new scale of the inner container<\/li><\/ul>\n\n\n\n<h4>On Position Changed<\/h4>\n\n\n\n<p>Fires when the position of the inner container changes<\/p>\n\n\n\n<ul><li><code>event.newX<\/code> | The new x position of the inner container<\/li><li><code>event.newY<\/code>&nbsp;| The new y position of the inner container<\/li><\/ul>\n\n\n\n<h4 id=\"on-double-tap\">On Double Tap<\/h4>\n\n\n\n<p>Fires when the component is tapped on twice in quick succession<\/p>\n\n\n\n<ul><li><code>event.x<\/code>&nbsp;| The x position of the second tap in the double tap<\/li><li><code>event.y<\/code>&nbsp;| The y position of the second tap in the double tap<\/li><\/ul>\n\n\n\n<h4 id=\"on-window-resize\">On Window Resize<\/h4>\n\n\n\n<p>Fires when the browser window is resized<\/p>\n\n\n\n<ul><li><code>event.w<\/code>&nbsp;| The new window width<\/li><li><code>event.h<\/code>&nbsp;| The new window height<\/li><\/ul>\n\n\n\n<h3 id=\"component-functions\">Component Functions<\/h3>\n\n\n\n<h4 id=\"set-scale\">Set Scale<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>component.setScale(scale: float)<\/code><\/pre>\n\n\n\n<p>Sets the scale value of the inner container to the value passed in<\/p>\n\n\n\n<ul><li><code>scale : float<\/code>&nbsp;| The new scale value of the inner container<\/li><\/ul>\n\n\n\n<h4 id=\"set-position\">Set Position<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>component.setPosition(x: float, y: float)<\/code><\/pre>\n\n\n\n<p>Sets the position of the inner container<\/p>\n\n\n\n<ul><li><code>x : float<\/code>&nbsp;| The new x position of the inner container<\/li><li><code>y : float<\/code>&nbsp;| The new y position of the inner container<\/li><\/ul>\n\n\n\n<h4 id=\"fit\">Fit<\/h4>\n\n\n\n<p>Will fit the inner container to the outer container<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>component.fit(transitionDuration: str, timingFunction: str)<\/code><\/pre>\n\n\n\n<p>Fits the inner container to the outer container<\/p>\n\n\n\n<ul><li><code>transitionDuration : str, optional<\/code>&nbsp;| The CSS valid value of the transition duration while fitting<\/li><li><code>timingFunction : str, optional<\/code>&nbsp;| The CSS valid value of the timing function while fitting<\/li><\/ul>\n\n\n\n<h4 id=\"fit-component\">Fit Component<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>component.fitComponent(componentName: str, margin: int, transitionDuration: str, timingFunction: str)<\/code><\/pre>\n\n\n\n<p>Fits the named component to the outer container<\/p>\n\n\n\n<p>The named component MUST be a direct child of the Zoom Pan Container<\/p>\n\n\n\n<ul><li><code>componentName : str<\/code>&nbsp;| The name of the component to fit<\/li><li><code>margin : int, optional<\/code>&nbsp;| A pixel value margin to be applied when fitting<\/li><li><code>transitionDuration : str, optional<\/code>&nbsp;| The CSS valid value of the transition duration while fitting<\/li><li><code>timingFunction : str, optional<\/code>&nbsp;| The CSS valid value of the timing function while fitting<\/li><\/ul>\n\n\n\n<h4 id=\"fit-rect\">Fit Rect<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>component.fitRect(x: float, y: float, width: float, height: float, transitionDuration: str, timingFunction: str)<\/code><\/pre>\n\n\n\n<p>Fits the defined rectangle to the outer container<\/p>\n\n\n\n<ul><li><code>x : float<\/code>&nbsp;| The x value of the rectangle to fit<\/li><li><code>y : float<\/code>&nbsp;| The y value of the rectangle to fit<\/li><li><code>width : float<\/code>&nbsp;| The width value of the rectangle to fit<\/li><li><code>height : float<\/code>&nbsp;| The height value of the rectangle to fit<\/li><li><code>transitionDuration : str, optional<\/code>&nbsp;| The CSS valid value of the transition duration while fitting<\/li><li><code>timingFunction : str, optional<\/code>&nbsp;| The CSS valid value of the timing function while fitting<\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8211; Contains the properties for configuring the component allowZoom (default:true) &#8211; &nbsp;Whether&#8230; <a href=\"https:\/\/modules.bijc.co.uk\/?page_id=514\">read more &raquo;<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/modules.bijc.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/514"}],"collection":[{"href":"https:\/\/modules.bijc.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/modules.bijc.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/modules.bijc.co.uk\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/modules.bijc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=514"}],"version-history":[{"count":2,"href":"https:\/\/modules.bijc.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/514\/revisions"}],"predecessor-version":[{"id":517,"href":"https:\/\/modules.bijc.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/514\/revisions\/517"}],"wp:attachment":[{"href":"https:\/\/modules.bijc.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}