Dala.Preview.Canvas (dala v0.5.0)

Copy Markdown View Source

Interactive drag-and-drop UI design canvas for Dala.

A Phoenix LiveView that provides a visual design tool with:

  • Component palette (left sidebar) with icons and search
  • Design canvas with live phone-frame preview (center)
  • Property editor with grouped controls (right sidebar)
  • Code preview panel (bottom, collapsible)
  • Collapsible tree view with drag-to-reorder

Uses the Dala UI tree map format internally with unique IDs for tracking. IDs are stripped during code generation.

Summary

Functions

code_panel(assigns)
design_canvas(assigns)
header_bar(assigns)
live_preview(assigns)
palette(assigns)
prop_editor(assigns)
prop_field(assigns)
property_editor(assigns)
tree_node(assigns)

Functions

code_panel(assigns)

Attributes

  • tree (:map) (required)
  • code_style (:atom) (required)
  • module_name (:string) (required)
  • copied (:boolean) - Defaults to false.

design_canvas(assigns)

Attributes

  • tree (:map) (required)
  • selected_id (:any) - Defaults to nil.
  • collapsed (:any) - Defaults to nil.

header_bar(assigns)

Attributes

  • show_code (:boolean) (required)
  • module_name (:string) (required)

live_preview(assigns)

Attributes

  • tree (:map) (required)

palette(assigns)

Attributes

  • search (:string) - Defaults to "".

prop_editor(assigns)

Attributes

  • node (:map) (required)

prop_field(assigns)

Attributes

  • node (:map) (required)
  • prop_name (:atom) (required)
  • prop_type (:atom) (required)
  • default (:any) - Defaults to nil.

property_editor(assigns)

Attributes

  • tree (:map) (required)
  • selected_id (:any) - Defaults to nil.

tree_node(assigns)

Attributes

  • node (:map) (required)
  • selected_id (:any) - Defaults to nil.
  • depth (:integer) - Defaults to 0.
  • collapsed (:any) - Defaults to nil.