Technical Documentation

A. Widget Hierarchy (Service Studio)

For the JavaScript and CSS to function correctly, the Widget Tree must follow this specific nesting:

1. Container (ImageWrapper): The outer viewport. Acts as the clipping mask.

   • Container (ZoomToolbar): The floating UI. Must be a "sibling" of the Target to remain fixed.

   • Container (ImageTarget): The actual canvas that moves (Pan/Drag) and scales (Zoom).

     • Image: The native OutSystems Image widget.

B. JavaScript Input Parameters

When implementing the JavaScript node in the OnReady client action, define these two inputs:

• ContainerId: The Runtime ID of the ImageWrapper widget.

• TargetId: The Runtime ID of the ImageTarget widget.

C. CSS API Reference

D. Interaction Logic

Zooming

• Mouse Wheel: Zoom in/out at the cursor location.

• UI Buttons: Programmatic zoom centered on the current viewport.

Panning (Dragging)

• Activation: Triggered by mousedown (left-click) or touchstart.

• Feedback: The cursor changes to grabbing during the movement to provide visual feedback.

• Physics: Uses translate3d for sub-pixel precision and smooth motion.

E. Exposed Global Methods

The script exposes the following functions to the window object:

• window.zoomIn(): Increases scale by 0.2x relative to the viewport center.

• window.zoomOut(): Decreases scale by 0.2x (clamped to a minimum of 0.2x).

• window.resetZoom(): Re-runs the centerAndFit logic to restore the original view.

3. Implementation Guide

Step 1: Stylesheet Setup

Copy the provided CSS into your Screen or Block Stylesheet. Ensure the ImageWrapper has a defined height (e.g., 600px or 100%).

Step 2: JavaScript Initialization

Place the optimized JavaScript code in a JavaScript Node within the OnReady event. Map the ContainerId and TargetId parameters correctly.

Step 3: Configuring UI Buttons

For your Zoom In/Out/Reset buttons:

1. Set the OnClick event to a Client Action.

2. Inside the action, use a JavaScript Node to call the global method (e.g., window.zoomIn();).

3. Crucial: In the Attributes (Extended Properties) of each button, add:

   • Property: onclick

   • Value: "event.stopPropagation();"

     (This prevents the Drag logic from being triggered accidentally when clicking buttons).

Step 4: Asset Handling

The component includes an onload listener. If your image is dynamic, the component will wait for the image to load before calculating the initial center and scale, ensuring a flicker-free start.