LiveFlow.Components.NodeResizer (LiveFlow v0.3.2)

Copy Markdown View Source

Node resizer component for LiveFlow.

Adds resize handles to custom nodes, allowing users to interactively resize them by dragging corners or edges. Similar to React Flow's <NodeResizer> component.

Usage

Add the resizer inside your custom node component, and mark the node resizable: true so its size is kept:

Node.new("note", %{x: 0, y: 0}, %{}, type: :note, resizable: true)

defp my_resizable_node(assigns) do
  ~H"""
  <div style="width: 100%; height: 100%; min-height: 80px; padding: 16px;">
    <LiveFlow.Components.NodeResizer.node_resizer node_id={@node.id} />
    <div>Resize me!</div>
  </div>
  """
end

Handles come from the node's handles list, as for any node.

Options

  • :node_id - Required. The ID of the parent node.
  • :min_width - Minimum width in pixels (default: 50).
  • :min_height - Minimum height in pixels (default: 30).
  • :max_width / :max_height - Maximum size in pixels (default: nil).
  • :keep_aspect_ratio - Keep the width/height ratio (default: false).
  • :color - CSS color for resize handles (default: uses theme variable).
  • :is_visible - Whether the resizer is rendered (default: true).
  • :handles - List of handle positions to show. Default: all 8. Positions: :n, :s, :e, :w, :ne, :nw, :se, :sw

The resizer renders small corner squares and edge lines that the user can drag to resize the node. During resize, edge paths connected to the node update in real time (client-side).

Summary

Functions

node_resizer(assigns)

Renders resize handles for a node.

Functions

node_resizer(assigns)

Renders resize handles for a node.

Examples

<.node_resizer node_id="node-1" />
<.node_resizer node_id="node-1" min_width={100} min_height={80} />
<.node_resizer node_id="node-1" handles={[:se, :e, :s]} />
<.node_resizer node_id="node-1" max_width={400} keep_aspect_ratio />

Resizing is constrained by the flow's node_extent option. The server receives a resize change with resizing: true when the resize starts and always a final one with resizing: false (also when it is aborted with Escape).

Attributes

  • node_id (:string) (required)
  • min_width (:integer) - Defaults to 50.
  • min_height (:integer) - Defaults to 30.
  • max_width (:integer) - Defaults to nil.
  • max_height (:integer) - Defaults to nil.
  • keep_aspect_ratio (:boolean) - Defaults to false.
  • color (:string) - Defaults to nil.
  • is_visible (:boolean) - Defaults to true.
  • handles (:list) - Defaults to [:n, :s, :e, :w, :ne, :nw, :se, :sw].