Configuration options for the component.

• id - Adds an id HTML attribute to the viewport element. Needs to be set for getViewport to return a Just.

• width - Width of the content box in pixels.

  WARNING: this can be overriden by adding the width CSS property to the content box, but this will break the scaling logic.

• height - Height of the content box in pixels.

  WARNING: this can be overriden by adding the width CSS property to the content box, but this will break the scaling logic.

• minScale - Set a minimum possible scale. This will decide how far you can zoom out.

• maxScale - Set a maximum possible scale. This will decide how far you can zoom in.

• scrollScaleFactor - The factor to scale by when scrolling. For example setting this to 1.1 will scale the content box by 10 % on every scroll.

• draggableOnChildren - If you want to disable the panning logic when dragging on child elements in the content box.

• toSelf -- Map this component's MouseEvents to a Msg so that the parent can properly update the component.

Note: the viewport's default height is 100vh but can be overriden by adding your own style attribute in view.

Default configuration:

{ id = Nothing
, width = 1920
, height = 1080
, minScale = Nothing
, maxScale = Nothing
, scrollScaleFactor = 1.1
, draggableOnChildren = Exclude []
, toSelf = toSelf
}

Filters elements by class name.

• Include - dragging the content box will only be possible on child elements with any of these class names.
• Exclude - dragging the content box will not be possible on child elements with any of these class names.

List of classes.

Contains config and internal state.

Creates a Model with a Config and an initial state.

Show the component with some content.

The elements provided in content will become direct descendants of the content box.

It is possible to provide additional HTML attributes to the viewport and content box. For example it is recommended to add the user-select CSS property so that any text is not selected while dragging.

WARNING: Some attributes/styles should not be overriden for proper function. For the viewport these are:

• id HTML attribute (set in Config instead)
• overflow CSS property

For the content box these are:

• transform CSS property
• position CSS property
• width CSS property (set in Config instead)
• height CSS property (set in Config instead)

Process an event and return a new model.

Mouse events.

Get the scaling of the content box.

Scale of the content box.

Get the position of the content box.

Two dimensional vector that can represent a point or direction.

Get the mouse position if the content box is being dragged.

Move the content box by a relative distance.

Given a model where

getPosition model == { x = 10, y = 20 }

the following holds

getPosition (model |> moveBy { x = -15, y = 5 }) == { x = -5, y = 25 }

Move the content box to a point.

Given a model where

getPosition model == { x = 10, y = 20 }

the following holds

getPosition (model |> moveTo { x = -15, y = 5 }) == { x = -15, y = 5 }

Scale the content box by a relative value.

Given a model where

getScale model == scale

the following holds

getScale (model |> scaleBy factor ContentCenter) == scale * factor

Scale the content box to an absolute scaling.

Given a model where

getScale model == scale

the following holds

getScale (model |> scaleTo newScale ContentCenter) == newScale

The anchor point to scale the content box with respect to.

To use the ViewportCenter you need to provide a Viewport which can be created with getViewport.

Maybe creates a Cmd to get the dimensions of the viewport.

The function will return Nothing if model.config.id == Nothing.

Viewport position and dimensions.

Can only be created with getViewport.