Drag-and-Drop Node JSON Schemas

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:

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.