Canvas-domain runtime, DOM attr, and JS helpers for Phoenix LiveViews.
use LivePanels.Toolkit.Canvas imports the canonical canvas runtime
components, item controls, selection controls, layout controls, history
controls, clipboard controls, and viewport JS helpers.
The helpers in this module emit protocol attrs and browser runtime events. They do not render application chrome, choose visual treatment, or own canvas state.
Summary
Functions
Returns attrs for an application control that adds an item of type.
Returns attrs for an application control that aligns the actor's selected items.
Renders the canonical canvas runtime root, stages, and item loop.
Returns canonical runtime root attrs from canvas assigns.
Returns attrs for an application control that clears the actor selection.
Returns a JS command that asks the browser runtime to copy an item to a new placement.
Returns attrs for an application control that copies the actor selection.
Returns attrs for an application control that cuts the actor selection.
Returns attrs for an application control that distributes the actor's selected items.
Returns attrs for a descendant that should start item dragging.
Returns a JS command that asks the browser runtime to fit the world view.
Returns attrs for an interactive descendant that should not focus the item.
Returns attrs for an application control that groups the actor's selected items.
Returns attrs for an application control that hides an existing canvas item.
Returns attrs for an application control that includes one item in the actor selection.
Returns runtime input-policy data attrs for the canvas root.
Returns attrs for a descendant that should start an existing-item drop source.
Returns attrs for app-owned runtime chrome that should receive canvas keyboard handling.
Returns attrs for an application control that lays out world-space canvas items.
Returns attrs for configuring empty-canvas marquee selection on a
canvas_runtime/1 root.
Renders the canonical minimap DOM contract for a canvas.
Returns a JS command that centers the canvas camera on a world-space point.
Returns attrs for an application control that pastes the actor clipboard.
Returns a JS command that asks the browser runtime to pin an item into viewport space.
Returns attrs for an application control that presents an existing canvas item.
Returns a JS command that asks the browser runtime to present an existing item.
Returns attrs for an application control that reapplies the next history entry.
Returns attrs for an application control that removes a canvas item.
Returns attrs for an application control that removes the actor selection.
Returns attrs for one canonical resize handle.
Renders canonical resize handles for a canvas item frame.
Returns attrs for an application control that selects every available item and connector item.
Returns attrs for an application control that replaces the actor item selection.
Returns attrs for an app-rendered item body that should both drag and select the item.
Returns a JS command that dispatches the canonical browser cursor-mode event.
Returns attrs for an application control that shows an existing canvas item.
Returns attrs for an application control that toggles one selected item.
Returns attrs for an application control that toggles item visibility.
Returns attrs for an application control that rewinds canvas history.
Returns attrs for an application control that ungroups grouped items in the actor selection.
Returns a JS command that asks the browser runtime to unpin an item into world space.
Returns attrs for an application control that reorders the actor's selected items.
Returns a JS command that applies pointer-centered canvas zoom.
Types
@type item_ref() :: LivePanels.Item.t() | LivePanels.Item.RenderContext.t() | LivePanels.Item.View.t() | %{id: String.t()} | String.t()
Functions
Returns attrs for an application control that adds an item of type.
@spec align_selection_attrs( LivePanels.Canvas.Arrange.align_mode() | String.t(), keyword() | map() ) :: map()
Returns attrs for an application control that aligns the actor's selected items.
Renders the canonical canvas runtime root, stages, and item loop.
Returns canonical runtime root attrs from canvas assigns.
Returns attrs for an application control that clears the actor selection.
@spec copy_item_js(String.t(), String.t(), map()) :: Phoenix.LiveView.JS.t()
Returns a JS command that asks the browser runtime to copy an item to a new placement.
placement must be a map. The browser resolves partial viewport placement
requests against the current canvas root before pushing copy_item
to the server.
Returns attrs for an application control that copies the actor selection.
Returns attrs for an application control that cuts the actor selection.
@spec distribute_selection_attrs( LivePanels.Canvas.Arrange.distribute_axis() | String.t(), keyword() | map() ) :: map()
Returns attrs for an application control that distributes the actor's selected items.
Returns attrs for a descendant that should start item dragging.
@spec fit_view_js( String.t(), keyword() ) :: Phoenix.LiveView.JS.t()
Returns a JS command that asks the browser runtime to fit the world view.
Optional :max_zoom limits the resulting zoom level.
Returns attrs for an interactive descendant that should not focus the item.
Returns attrs for an application control that groups the actor's selected items.
Returns attrs for an application control that hides an existing canvas item.
Returns attrs for an application control that includes one item in the actor selection.
Returns runtime input-policy data attrs for the canvas root.
@spec item_drop_source_attrs( LivePanels.Item.t() | LivePanels.Item.RenderContext.t(), atom() | String.t(), keyword() | map() ) :: map()
Returns attrs for a descendant that should start an existing-item drop source.
Use this for items that declare :drag_drop with :move or :copy actions
and need the browser runtime to produce a drop_item command when the pointer
crosses into another placement space.
Returns attrs for app-owned runtime chrome that should receive canvas keyboard handling.
Returns attrs for an application control that lays out world-space canvas items.
@spec marquee_selection_attrs(atom() | String.t(), keyword() | map()) :: map()
@spec marquee_selection_attrs(atom() | String.t(), atom() | String.t()) :: map()
Returns attrs for configuring empty-canvas marquee selection on a
canvas_runtime/1 root.
The scope controls whether the browser asks the server to marquee-select only canvas items or graph items plus connectors. Pass a mode when containment behavior should differ from the runtime default.
Renders the canonical minimap DOM contract for a canvas.
@spec pan_to_js(String.t(), number(), number()) :: Phoenix.LiveView.JS.t()
Returns a JS command that centers the canvas camera on a world-space point.
Returns attrs for an application control that pastes the actor clipboard.
@spec pin_js(String.t(), String.t()) :: Phoenix.LiveView.JS.t()
Returns a JS command that asks the browser runtime to pin an item into viewport space.
Returns attrs for an application control that presents an existing canvas item.
@spec present_js(String.t(), String.t(), keyword()) :: Phoenix.LiveView.JS.t()
Returns a JS command that asks the browser runtime to present an existing item.
Supported opts are :focus and :placement.
Returns attrs for an application control that reapplies the next history entry.
Returns attrs for an application control that removes a canvas item.
Returns attrs for an application control that removes the actor selection.
Returns attrs for one canonical resize handle.
Renders canonical resize handles for a canvas item frame.
Returns attrs for an application control that selects every available item and connector item.
Returns attrs for an application control that replaces the actor item selection.
Returns attrs for an app-rendered item body that should both drag and select the item.
This is for draggable item surfaces, not nested buttons or toolbar controls. It intentionally does not mark the element as focus-ignored; the browser runtime treats focus-ignored descendants as interactive islands that should not start a drag.
@spec set_cursor_mode_js(String.t(), atom() | String.t(), keyword()) :: Phoenix.LiveView.JS.t()
Returns a JS command that dispatches the canonical browser cursor-mode event.
mode must be :drag, :marquee, :pan, :draw, :erase, or the matching string.
Pass tool must be :pen, :polyline, or a known vector item family. Pass
style: must include the full drawing style map: :color, :width,
:fill_color, :stroke_style, :opacity, and :roundness.
Cursor mode is browser-owned. If an application also mirrors the selected mode in
LiveView assigns, pass push: "event_name" to append an application JS.push/2.
Returns attrs for an application control that shows an existing canvas item.
Returns attrs for an application control that toggles one selected item.
Returns attrs for an application control that toggles item visibility.
Returns attrs for an application control that rewinds canvas history.
Returns attrs for an application control that ungroups grouped items in the actor selection.
@spec unpin_js(String.t(), String.t(), keyword()) :: Phoenix.LiveView.JS.t()
Returns a JS command that asks the browser runtime to unpin an item into world space.
Optional :client_x and :client_y opts let applications anchor the world-space
placement to a pointer location. Without them, the browser uses the item's
current screen rect.
@spec z_order_selection_attrs( LivePanels.Canvas.Arrange.z_order_mode() | String.t(), keyword() | map() ) :: map()
Returns attrs for an application control that reorders the actor's selected items.
@spec zoom_js( String.t(), keyword() ) :: Phoenix.LiveView.JS.t()
Returns a JS command that applies pointer-centered canvas zoom.
Required opts are :delta_y, :client_x, and :client_y. Optional
:delta_mode follows the browser WheelEvent convention.