Pan View

Purpose: The AXPanViewDirective allows users to interact with content by panning (dragging) it around and zooming in or out. This is useful for scenarios where you have content that might be larger than the viewport or require detailed inspection.

• This directive creates a wrapper element around the content you specify. You can customize the appearance of this wrapper using the wrapperClasses input.
• Panning and zooming are disabled by default if the respective disablePan or disableZoom input is set to true.
• The zoomChange and positionChange outputs allow you to react to zoom and pan events in your component. For example, you could update an external UI element to reflect the current zoom level.

Selector:[AXPanView]

Inputs:

• zoomStep (Type: number, Default: 7): Defines the amount of zoom applied with each zoom event (e.g., mouse wheel, `zoomIn` and `zoomOut` methods).
• minZoom (Type: number, Default: 25): Sets the minimum zoom level allowed (as a percentage).
• maxZoom (Type: number, Default: 400): Sets the maximum zoom level allowed (as a percentage).
• freeMode (Type: boolean, Default: false): Enables "free mode" panning. In free mode, panning is activated by a standard mouse drag (left mouse button). When freeMode is disabled, panning is activated by the middle mouse button.
• fitContent (Type: boolean, Default: true): If true, the content will be scaled to fit within the wrapper element. The zoom level will be set to the smaller of the values required to fit the content's width and height. If the content is smaller than the wrapper, the zoom level will be set to 100%.
• disablePan (Type: boolean, Default: false): Disables panning functionality altogether.
• disableZoom (Type: boolean, Default: false): Disables zooming functionality altogether.
• wrapperClasses (Type: string, Default: ''): A string of CSS classes to be applied to the wrapper element created by the directive. This allows you to add custom styles to the pan view wrapper. For example, you might use this to set a background color or border.

Outputs:

• zoomChange (Returns: number): Emits the current zoom level (as a percentage) *after* the zoom level changes.
• positionChange (Returns: { x: number; y: number }): Emits an object containing the current pan position (`x` and `y` in pixels) relative to the top-left corner of the *wrapper* element. This event is emitted after each pan operation.

Methods:

• setElementPosition(): Updates the transform style of the pan view element to reflect the current pan and zoom values. This method is typically called internally by the directive but can be used if you need to manually update the position. It triggers the positionChange and zoomChange outputs.
• resetPosition(): Resets the pan and zoom position to the initial state. It centers the content within the container, maintaining aspect ratio, and sets the zoom level to 100% (or the fit content scale if applicable).
• zoomIn(): Zooms the content in by the amount specified by the zoomStep input, respecting the minZoom and maxZoom limits.
• zoomOut(): Zooms the content out by the amount specified by the zoomStep input, respecting the minZoom and maxZoom limits.

User Interaction:

• Panning:
  • Free Mode (freeMode input is true): Standard mouse drag (left mouse button).
  • Standard Mode (freeMode input is false): Middle mouse button (wheel click) or any touch interaction.
• Zooming: Ctrl + Mouse Wheel.
• Horizontal Panning (Alternative): Shift + Mouse Wheel.
• Vertical Panning (Alternative): Mouse Wheel.

Example Usage:

Consider a documentation page with multiple sections and subsections. The ACoreX outline directives allow you to create a dynamic side navigation menu:

Explanation:

• The axPanView directive is applied to the <img> tag. This makes the image pannable and zoomable.
• The surrounding <div> with inline styles sets a fixed width and height for the container. It's important to set a fixed size on the parent for the panning and zooming to work correctly.
• The style="max-width: none; max-height: none;" is applied to the image to prevent it from being automatically resized by the browser, which would interfere with the zoom functionality.
• The input bindings [zoomStep], [minZoom], [maxZoom], [freeMode] and wrapperClasses are used to customize the directive's behavior.
• The output bindings (zoomChange) and (positionChange) are used to listen for zoom and pan changes. The example component logs these changes to the console and stores them in component properties.
• A wrapper element with the class ax-pan-view-wrapper (and any classes provided via the wrapperClasses input) is created around the image. This wrapper handles the panning and zooming transformations.
• See the "User Interaction" section for details on how to pan and zoom.