react-diagram serialization Json interpretation case analysis

The goal of this document is to explain the Json serialization of the react-diagram framework model. Due to the lack of documentation, I can only test it through constant trial and error.

Serialization Case 1: Empty Canvas

insert image description here

{
  "id": "27",
  "offsetX": 0,
  "offsetY": 0,
  "zoom": 100,
  "gridSize": 0,
  "layers": [
    {
      "id": "28",
      "type": "diagram-links",
      "isSvg": true,
      "transformed": true,
      "models": {
        
      }
    },
    {
      "id": "30",
      "type": "diagram-nodes",
      "isSvg": false,
      "transformed": true,
      "models": {
        
      }
    }
  ]
}

Graphical display

insert image description here

Serialization Case 2: Single out Node

insert image description here

{
  "id": "27",
  "offsetX": 0,
  "offsetY": 0,
  "zoom": 100,
  "gridSize": 0,
  "layers": [
    {
      "id": "28",
      "type": "diagram-links",
      "isSvg": true,
      "transformed": true,
      "models": {
        
      }
    },
    {
      "id": "30",
      "type": "diagram-nodes",
      "isSvg": false,
      "transformed": true,
      "models": {
        "64": {
          "id": "64",
          "type": "default",
          "x": 187.0056915283203,
          "y": 219.91477584838867,
          "ports": [
            {
              "id": "65",
              "type": "default",
              "x": null,
              "y": null,
              "name": "Out",
              "alignment": "right",
              "parentNode": "64",
              "links": [
                
              ],
              "in": false,
              "label": "Out"
            }
          ],
          "name": "Node 1",
          "color": "rgb(0,192,255)",
          "portsInOrder": [
            
          ],
          "portsOutOrder": [
            "65"
          ]
        }
      }
    }
  ]
}

Graphical display

insert image description here

Serialization case 3: one in node and one out node

insert image description here

{
  "id": "27",
  "offsetX": 0,
  "offsetY": 0,
  "zoom": 100,
  "gridSize": 0,
  "layers": [
    {
      "id": "28",
      "type": "diagram-links",
      "isSvg": true,
      "transformed": true,
      "models": {
        
      }
    },
    {
      "id": "30",
      "type": "diagram-nodes",
      "isSvg": false,
      "transformed": true,
      "models": {
        "64": {
          "id": "64",
          "type": "default",
          "x": 187.0056915283203,
          "y": 219.91477584838867,
          "ports": [
            {
              "id": "65",
              "type": "default",
              "x": 230.6392059326172,
              "y": 248.57954025268555,
              "name": "Out",
              "alignment": "right",
              "parentNode": "64",
              "links": [
                
              ],
              "in": false,
              "label": "Out"
            }
          ],
          "name": "Node 1",
          "color": "rgb(0,192,255)",
          "portsInOrder": [
            
          ],
          "portsOutOrder": [
            "65"
          ]
        },
        "69": {
          "id": "69",
          "type": "default",
          "x": 420.0056915283203,
          "y": 244.91477584838867,
          "ports": [
            {
              "id": "70",
              "type": "default",
              "x": null,
              "y": null,
              "name": "In",
              "alignment": "left",
              "parentNode": "69",
              "links": [
                
              ],
              "in": true,
              "label": "In"
            }
          ],
          "name": "Node 2",
          "color": "rgb(192,255,0)",
          "portsInOrder": [
            "70"
          ],
          "portsOutOrder": [
            
          ]
        }
      }
    }
  ]
}

Graphical display

insert image description here

Serialization Example 4: in nodes, out nodes, and connections

insert image description here

{
  "id": "27",
  "offsetX": 0,
  "offsetY": 0,
  "zoom": 100,
  "gridSize": 0,
  "layers": [
    {
      "id": "28",
      "type": "diagram-links",
      "isSvg": true,
      "transformed": true,
      "models": {
        "36": {
          "id": "36",
          "type": "default",
          "source": "32",
          "sourcePort": "33",
          "target": "34",
          "targetPort": "35",
          "points": [
            {
              "id": "37",
              "type": "point",
              "x": 0,
              "y": 0
            },
            {
              "id": "38",
              "type": "point",
              "x": 0,
              "y": 0
            }
          ],
          "labels": [
            
          ],
          "width": 2,
          "color": "grey",
          "curvyness": 50,
          "selectedColor": "rgb(0,192,255)"
        }
      }
    },
    {
      "id": "30",
      "type": "diagram-nodes",
      "isSvg": false,
      "transformed": true,
      "models": {
        "32": {
          "id": "32",
          "type": "default",
          "x": 100,
          "y": 100,
          "ports": [
            {
              "id": "33",
              "type": "default",
              "x": 100,
              "y": 100,
              "name": "Out",
              "alignment": "right",
              "parentNode": "32",
              "links": [
                "36"
              ],
              "in": false,
              "label": "Out"
            }
          ],
          "name": "Node 1",
          "color": "rgb(0,192,255)",
          "portsInOrder": [
            
          ],
          "portsOutOrder": [
            "33"
          ]
        },
        "34": {
          "id": "34",
          "type": "default",
          "x": 400,
          "y": 100,
          "ports": [
            {
              "id": "35",
              "type": "default",
              "x": 400,
              "y": 100,
              "name": "In",
              "alignment": "left",
              "parentNode": "34",
              "links": [
                "36"
              ],
              "in": true,
              "label": "In"
            }
          ],
          "name": "Node 2",
          "color": "rgb(192,255,0)",
          "portsInOrder": [
            "35"
          ],
          "portsOutOrder": [
            
          ]
        }
      }
    }
  ]
}

Graphical display

insert image description here

Speculation and analysis

1. Root Directory

First, the root directory has 5 parameters:

id : This parameter is always 27, its meaning is unknown and does not require much attention.

offsetX : This should refer to the distance of the observation center from the X axis.

offsetY : refers to the distance between the observation center and the Y axis.

zoom : refers to the degree of magnification.

gridSize : refers to the size of the grid in the image.

2.0 Layer[0]

This Layer is an array with two variables inside. By observing the changes above and the description of type , we can think that one is連線and the other is節點.
Let's focus on連線first:

id : unknown.

type : refers to the type.

isSvg : Whether it is SVG type, the function is unknown.

transformed : should refer to whether it can be moved.

model : explained separately below

2.1. models (diagram-links)

insert image description here

id : unknown. type : refers to the type.

source : refers to the source node ID of the connection.

sourcePort : refers to the source port ID of the connection.

target : refers to the target node ID of the connection.

targetPort : refers to the connection target port ID.

width : refers to the width.

color : refers to color.

curvyness : refers to curvature.

selectedColor : The selected color.

2.1.1. Point

insert image description here

id : refers to ID.

type : refers to the type. Omitted below.

2.2. Layer[1]

insert image description here

id : omitted.

type : refers to the type.

isSvg : ? Why is this false?

transformed : omitted.

2.2.1 models (diagram-nodes)

insert image description here

前四個: omitted.

ports : I will talk about them separately later.

name : Display name.

color : display color

portsInOrder : represents

In node, corresponding to the number of target above.

portsOutOrder : represents

Out node, corresponding to the source number above.

2.2.2. ports

insert image description here

前四個: omitted.

name : egress node

alignment : right direction.

parentNode : represents the node to which the element is attached.

links : represents the lines connected to it.

in : Whether there is input.

label : label.

3. More case studies

3.1. Add output interface

insert image description here

Just add the output port and remember to add its ID in the out position.

3.2. Add input interface

The above is the details of the case analysis of react-diagram serialization Json interpretation. For more information about react-diagram serialization Json, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Example analysis of JavaScript parsing and serializing JSON
Jackson entity conversion to json is NULL or empty and does not participate in serialization (example explanation)
JS implements json serialization and deserialization function example
jQuery implements the method of serializing form elements into json objects

<<: Mysql cannot select non-aggregate columns

>>: Linux Domain Name Service DNS Configuration Method