[{"name":"PanZoom","comment":" This module implements a pannable and zoomable component.\n\n\n# Config\n\n@docs Config, defaultConfig, ElementFilter, ClassList\n\n\n# State\n\n@docs Model, init, view, update, MouseEvent\n\n\n## Getters\n\n@docs getScale, Scale, getPosition, Coordinate, getMousePosition\n\n\n# Transformations\n\n\n## Panning\n\n@docs moveBy, moveTo\n\n\n## Zooming\n\n@docs scaleBy, scaleTo, Anchor\n\n","unions":[{"name":"Anchor","comment":" The anchor point to scale the content box with respect to.\n","args":[],"cases":[["Point",["PanZoom.Coordinate"]],["ContentCenter",[]]]},{"name":"ElementFilter","comment":" Filters elements by class name.\n\n  - `Include` - dragging the content box will **only** be possible on child elements with any of these class names.\n    The viewport itself needs to have a class in this list to be draggable.\n  - `Exclude` - dragging the content box will **not** be possible on child elements with any of these class names.\n    The viewport itself can have a class in this list to be non-draggable.\n\n","args":[],"cases":[["Include",["PanZoom.ClassList"]],["Exclude",["PanZoom.ClassList"]]]},{"name":"MouseEvent","comment":" Mouse events.\n","args":[],"cases":[["MouseMoved",["PanZoom.Mouse.Position"]],["MousePressed",["PanZoom.Mouse.Position","PanZoom.ClassList"]],["MouseReleased",[]],["WheelScrolled",["PanZoom.Mouse.Position","Basics.Float"]]]}],"aliases":[{"name":"ClassList","comment":" List of classes.\n","args":[],"type":"List.List String.String"},{"name":"Config","comment":" Configuration options for the component.\n\n  - `viewportOffset` - Tell the component the offset of the viewport's the top left corner\n    (needed to properly convert between the internal and browser coordinate systems).\n\n    **NOTE:** this will **not set** the offset, only **inform** the component of the offset.\n    This will allow you to set the viewport offset with CSS yourself.\n\n    If your CSS positional logic is too complicated to specify the offset beforehand you can perform these steps:\n\n    1.  In your initial `Config` set `viewportOffset` to the default value of\n\n            viewportOffset =\n                { x = 0, y = 0 }\n\n    2.  Call [`Browser.Dom.getElement`](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#getElement)\n        and [attempt](https://package.elm-lang.org/packages/elm/core/latest/Task#attempt) the task.\n\n    3.  In the logic receiving the `Msg` containing the\n        [`Browser.Dom.Element`](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#Element),\n        extract the fields `element.x` and `element.y` and override the config of your `PanZoom.Model`\n\n            let\n                oldConfig = panZoomModel.config\n                newConfig = { oldConfig | viewportOffset = {x = element.x, y = element.y }\n            in\n            { panZoomModel | config = newConfig }\n\n  - `minScale` - Set a minimum possible scale. This will decide how far you can zoom out.\n\n  - `maxScale` - Set a maximum possible scale. This will decide how far you can zoom in.\n\n  - `scalePerScrollPixel` - The factor to scale by when scrolling (per pixel).\n    For example setting this to `0.001` will zoom in the content box by 0.1 % when scrolling 1px and 1/(1+0.1%) when scrolling -1px.\n\n  - `draggableOnChildren` - If you want to disable the panning logic when dragging on child elements in the content box.\n\n  - `toSelf` -- Map this component's [`MouseEvent`](PanZoom#MouseEvent)s to a `Msg` so that the parent can properly [`update`](PanZoom#update) the component.\n\n**Note:** the viewport's default dimensions are `100vw` and `100vh` respectively but can be overriden by adding your own style attribute in [`view`](PanZoom#view).\n\n","args":["msg"],"type":"{ viewportOffset : PanZoom.Coordinate, minScale : Maybe.Maybe PanZoom.Scale, maxScale : Maybe.Maybe PanZoom.Scale, scalePerScrollPixel : Basics.Float, draggableOnChildren : PanZoom.ElementFilter, toSelf : PanZoom.MouseEvent -> msg }"},{"name":"Coordinate","comment":" Two dimensional vector that can represent a point or direction.\n","args":[],"type":"{ x : Basics.Float, y : Basics.Float }"},{"name":"Model","comment":" Contains config and internal state.\n","args":["msg"],"type":"{ state : PanZoom.State, config : PanZoom.Config msg }"},{"name":"Scale","comment":" Scale of the content box.\n","args":[],"type":"Basics.Float"}],"values":[{"name":"defaultConfig","comment":" Default configuration:\n\n    { viewportOffset = { x = 0, y = 0 }\n    , minScale = Nothing\n    , maxScale = Nothing\n    , scalePerScrollPixel = 0.001\n    , draggableOnChildren = Exclude []\n    , toSelf = toSelf\n    }\n\n","type":"(PanZoom.MouseEvent -> msg) -> PanZoom.Config msg"},{"name":"getMousePosition","comment":" Get the mouse position (if the content box is being dragged).\n","type":"PanZoom.Model msg -> Maybe.Maybe PanZoom.Coordinate"},{"name":"getPosition","comment":" Get the position of the center point of the content box.\n","type":"PanZoom.Model msg -> PanZoom.Coordinate"},{"name":"getScale","comment":" Get the scaling of the content box.\n","type":"PanZoom.Model msg -> PanZoom.Scale"},{"name":"init","comment":" Creates a `Model` from a [`Config`](PanZoom#config) and an initial scale and position for the content box.\n\n`scale` will be clamped by `minScale` and `maxScale` if they are set.\n\n`position` sets the position of the center point of the content box.\nSo in order to position the content box at point `p` with respect to its top left corner you will need to set\n\n    position =\n        { x = p.x + width / 2, y = p.y + height / 2 }\n\nwhere the `width` and `height` are the dimensions of the content box specified in pixels.\n\n","type":"PanZoom.Config msg -> { scale : PanZoom.Scale, position : PanZoom.Coordinate } -> PanZoom.Model msg"},{"name":"moveBy","comment":" Move the content box by a relative distance.\n\nGiven a model where\n\n    getPosition model == { x = 10, y = 20 }\n\nthe following holds\n\n    getPosition (model |> moveBy { x = -15, y = 5 }) == { x = -5, y = 25 }\n\n","type":"PanZoom.Coordinate -> PanZoom.Model msg -> PanZoom.Model msg"},{"name":"moveTo","comment":" Move the content box center point to a new position.\n\nGiven a model where\n\n    getPosition model == { x = 10, y = 20 }\n\nthe following holds\n\n    getPosition (model |> moveTo { x = -15, y = 5 }) == { x = -15, y = 5 }\n\nIn order to position the content box at point `p` with respect to its top left corner you will need to call\n\n    moveTo { x = p.x + width / 2, y = p.y + height / 2 }\n\nwhere the `width` and `height` are the dimensions of the content box specified in pixels.\n\n","type":"PanZoom.Coordinate -> PanZoom.Model msg -> PanZoom.Model msg"},{"name":"scaleBy","comment":" Scale the content box by a relative value (if within the `minScale`/`maxScale` bounds).\n\nGiven a model where\n\n    getScale model == scale\n\nthe following holds\n\n    getScale (model |> scaleBy factor ContentCenter) == scale * factor\n\n","type":"Basics.Float -> PanZoom.Anchor -> PanZoom.Model msg -> PanZoom.Model msg"},{"name":"scaleTo","comment":" Scale the content box to an absolute scaling (if within the `minScale`/`maxScale` bounds).\n\nGiven a model where\n\n    getScale model == scale\n\nthe following holds\n\n    getScale (model |> scaleTo newScale ContentCenter) == newScale\n\n","type":"PanZoom.Scale -> PanZoom.Anchor -> PanZoom.Model msg -> PanZoom.Model msg"},{"name":"update","comment":" Process an event and return a new model.\n","type":"PanZoom.MouseEvent -> PanZoom.Model msg -> PanZoom.Model msg"},{"name":"view","comment":" Show the component with some content.\n\nThe elements provided as content will become direct descendants of the content box.\n\nIt is possible to provide additional HTML attributes to the viewport and the content box.\nFor example it is recommended to add the `user-select` CSS property to the viewport to prevent text from being selected while dragging.\n\n**WARNING:** These styles should not be overriden for proper function:\n\n  - `overflow: hidden` (viewport)\n  - `box-sizing: border-box` (viewport)\n  - `box-sizing: border-box` (content box)\n  - `transform` (content box)\n\n","type":"PanZoom.Model msg -> { viewportAttributes : List.List (Element.Attribute msg), contentAttributes : List.List (Element.Attribute msg) } -> Element.Element msg -> Element.Element msg"}],"binops":[]},{"name":"PanZoom.Mouse","comment":" This module includes abstractions for handling mouse events.\n\n\n# Custom event listeners\n\n@docs onMouseMove, onMouseDown, onWheelScroll\n\n\n# Mouse position\n\n@docs Position, asCoordinate, Coordinate, delta\n\n","unions":[{"name":"Position","comment":" Mouse position.\n","args":[],"cases":[]}],"aliases":[{"name":"Coordinate","comment":" Two dimensional vector that can represent a point or direction.\n","args":[],"type":"{ x : Basics.Float, y : Basics.Float }"}],"values":[{"name":"asCoordinate","comment":" Mouse position as coordinate record.\n","type":"PanZoom.Mouse.Position -> PanZoom.Mouse.Coordinate"},{"name":"delta","comment":" Delta/difference vector between two mouse `Position`s.\n\n    delta (Position { x = 50, y = 10 }) (Position { x = 20, y = -10 }) == { x = -30, y = -20 }\n\n    delta (Position { x = 50, y = 10 }) (Position { x = 20, y = -10 }) == { x = -30, y = -20 }\n\n","type":"PanZoom.Mouse.Position -> PanZoom.Mouse.Position -> PanZoom.Mouse.Coordinate"},{"name":"onMouseDown","comment":" Custom event listener for `mousedown` that returns the mouse `Position` and the classes of the target element that was clicked.\n","type":"(PanZoom.Mouse.Position -> List.List String.String -> msg) -> Html.Attribute msg"},{"name":"onMouseMove","comment":" Custom event listener for `mousemove` that returns the mouse `Position`.\n","type":"(PanZoom.Mouse.Position -> msg) -> Html.Attribute msg"},{"name":"onWheelScroll","comment":" Custom event listener for `wheel` that returns the mouse `Position` and the scroll amount of the wheel (in pixels).\n","type":"(PanZoom.Mouse.Position -> Basics.Float -> msg) -> Html.Attribute msg"}],"binops":[]}]