# Drag-and-Drop Node JSON Schemas

To map visual canvas diagrams precisely, **Asterisk 2** implements structured graphical storage profiles. The database framework serializes drag-and-drop workspace setups into clean, indexable JSON object arrays.

---

## Node Layout & Persistence Architecture

The flowchart below maps out how graphical layout variables translate into back-end storage rows:

```mermaid
graph LR
    %% UI Block
    subgraph VisualNode["Client UI Element"]
        CanvasBox["Canvas Layout Class<br/>(X: 120px, Y: 450px)"]
    end

    %% Serialization Engine
    subgraph DataMapper["JSON Builder Layer"]
        ModelPayload["Serialized Node Payload<br/>(NodeId: 'node_start', Type: 'Answer')"]
    end

    %% DB Destination
    subgraph StoredLedger["Relational Datastore"]
        DbConfig[("AppFlowConfigs DB Table<br/>(Text Columns: GraphJson)")]
    end

    %% Flow Paths
    CanvasBox -->|"Extract Block Metrics"| ModelPayload
    ModelPayload ==>|"Save Canvas Payload"| DbConfig

    %% Theming Matrix
    classDef blockToken fill:#0f172a,stroke:#38bdf8,stroke-width:2px,color:#fff,rx:6px,ry:6px;
    classDef mapToken fill:#312e81,stroke:#ec4899,stroke-width:2px,color:#fff,rx:6px,ry:6px;
    classDef dbToken fill:#1e293b,stroke:#a855f7,stroke-width:2px,color:#fff,rx:6px,ry:6px;

    class VisualNode,CanvasBox blockToken;
    class DataMapper,ModelPayload mapToken;
    class StoredLedger,DbConfig dbToken;
```

---

## Serialized direct Schema Model

### 1. `NodeData` Layout Class
- **`Id`** (`string`): Unique front-end UUID identifying specific canvas elements.
- **`Type`** (`string`): Target processing behavior descriptor (e.g., `Answer`, `PlayAudio`, `Hangup`).
- **`Data`** (`object`): Unrestricted structural property mappings retaining customized field parameters (e.g., `{ "file": "welcome.wav" }`).
- **`Position`** (`object`): Spatial representation maps mapping absolute browser drag coordinates `{ "x": 100, "y": 200 }`.

### 2. `EdgeData` Linkage Class
- **`Source`** (`string`): Originator UUID pointing to outbound connection anchors.
- **`Target`** (`string`): Destination UUID routing visual call flows to subsequent evaluation stages.