Erase, Select, Move, And Resize

Committed vector items are canvas items.

That is why vector items can be selected, moved, resized, erased, copied, pasted, undone, redone, persisted, and shared without a second document model.

Selection

Use ordinary selection controls:

<button {clear_selection_attrs()}>Clear</button>
<button {remove_selected_attrs()}>Remove selected</button>

Use drawing queries when an inspector should show only selected vector items:

defp selected_vector_items(items, selection) do
  items
  |> Map.values()
  |> Enum.filter(&LivePanels.Canvas.Selection.selected_item?(selection, &1.id))
  |> Enum.flat_map(fn item ->
    case LivePanels.Drawing.vector_state(item) do
      {:ok, draw} -> [%{item: item, draw: draw}]
      :error -> []
    end
  end)
end

Selection is actor-scoped in the same way as item selection.

Move And Resize

The standard runtime attaches drag and resize behavior to committed vector vector items. Users can move and resize vector items in :drag mode just as they move and resize ordinary items.

Server code can use normal item placement commands:

socket =
  LivePanels.Canvas.Item.place!(socket, item, %{
    x: 240,
    y: 160,
    w: item.w,
    h: item.h
  })

Use application policy when a product needs to constrain placement, lock a layer, or prevent resizing certain vector item kinds.

Erase Mode

Set erase mode from the toolbar:

<button phx-click={set_cursor_mode_js(@livepanels.canvas_id, :erase)}>
  Erase
</button>

The built-in vector item renderer includes erase hit targets.

If you render custom SVG, add erase target attrs to the geometry you want erase mode to recognize:

<path
  d={@path}
  {erase_vector_item_target_attrs(@item)}
/>

The browser sends a drawing-owned removal command. The server still verifies that the target is a committed vector item.

Remove One Vector Item

Use drawing removal attrs for vector item-specific controls:

<button {erase_attrs(@item)}>
  Remove vector item
</button>

Server equivalent:

socket = LivePanels.Drawing.erase!(socket, item)

Use erase_attrs/2 when the UI is specifically removing a vector item. Use remove_selected_attrs/0 when the user is removing a mixed selection of vector items, items, and connectors.

Copy, Paste, Undo, And Redo

Committed vector items use the normal canvas helpers:

<button {copy_selection_attrs()}>Copy</button>
<button {paste_selection_attrs()}>Paste</button>
<button {undo_attrs()}>Undo</button>
<button {redo_attrs()}>Redo</button>

Drafts are not copied or undone because drafts are not canvas state yet.

Removing Mixed Selections

In a drawing app that also has content items or graph connectors, prefer the normal remove-selected command for the toolbar:

<button {remove_selected_attrs()}>
  Remove selected
</button>

It lets the canvas remove each selected thing through the appropriate command path. Use vector item-specific removal only in vector item-specific inspectors.

Placement Locks

Toolbar items, palettes, rulers, and inspectors are often viewport items with placement locks:

[
  drawing_tools:
    {MyAppWeb.DrawingToolsLive,
     label: "Drawing tools",
     placement_space: :viewport,
     placement_anchor: :top,
     placement_lock: true,
     frame: :content,
     persistent: false,
     interaction: %{presentable: false, removable: false}}
]

Keep product chrome as items when it should travel with the canvas runtime. Keep it outside the canvas when it is ordinary page chrome.