React-Diagramm Serialisierung JSON Interpretation Fallanalyse

React-Diagramm Serialisierung JSON Interpretation Fallanalyse

Das Ziel dieses Dokuments ist es, die JSON-Serialisierung des react-diagram -Frameworkmodells zu erklären. Da keine Dokumentation vorhanden ist, kann ich es nur durch ständiges Ausprobieren testen.

Serialisierungsfall 1: Leere Leinwand

Bildbeschreibung hier einfügen

{
  "id": "27",
  "offsetX": 0,
  "offsetY": 0,
  "zoom": 100,
  "Rastergröße": 0,
  "Ebenen": [
    {
      "id": "28",
      "Typ": "Diagramm-Links",
      "isSvg": wahr,
      "transformiert": wahr,
      "Modelle": {
        
      }
    },
    {
      "id": "30",
      "Typ": "Diagrammknoten",
      "isSvg": falsch,
      "transformiert": wahr,
      "Modelle": {
        
      }
    }
  ]
}

Grafische Darstellung

Bildbeschreibung hier einfügen

Serialisierungsfall 2: Knoten einzeln auswählen

Bildbeschreibung hier einfügen

{
  "id": "27",
  "offsetX": 0,
  "offsetY": 0,
  "zoom": 100,
  "Rastergröße": 0,
  "Ebenen": [
    {
      "id": "28",
      "Typ": "Diagramm-Links",
      "isSvg": wahr,
      "transformiert": wahr,
      "Modelle": {
        
      }
    },
    {
      "id": "30",
      "Typ": "Diagrammknoten",
      "isSvg": falsch,
      "transformiert": wahr,
      "Modelle": {
        "64": {
          "id": "64",
          "Typ": "Standard",
          "x": 187.0056915283203,
          "y": 219.91477584838867,
          "Häfen": [
            {
              "id": "65",
              "Typ": "Standard",
              "x": null,
              "y": null,
              "name": "Aus",
              "Ausrichtung": "rechts",
              "übergeordneter Knoten": "64",
              "Links": [
                
              ],
              "in": falsch,
              "label": "Aus"
            }
          ],
          "Name": "Knoten 1",
          "Farbe": "rgb(0,192,255)",
          "portsInOrder": [
            
          ],
          "portsOutOrder": [
            "65"
          ]
        }
      }
    }
  ]
}

Grafische Darstellung

Bildbeschreibung hier einfügen

Serialisierungsfall 3: ein Eingangsknoten und ein Ausgangsknoten

Bildbeschreibung hier einfügen

{
  "id": "27",
  "offsetX": 0,
  "offsetY": 0,
  "zoom": 100,
  "Rastergröße": 0,
  "Ebenen": [
    {
      "id": "28",
      "Typ": "Diagramm-Links",
      "isSvg": wahr,
      "transformiert": wahr,
      "Modelle": {
        
      }
    },
    {
      "id": "30",
      "Typ": "Diagrammknoten",
      "isSvg": falsch,
      "transformiert": wahr,
      "Modelle": {
        "64": {
          "id": "64",
          "Typ": "Standard",
          "x": 187.0056915283203,
          "y": 219.91477584838867,
          "Häfen": [
            {
              "id": "65",
              "Typ": "Standard",
              "x": 230.6392059326172,
              "y": 248.57954025268555,
              "name": "Aus",
              "Ausrichtung": "rechts",
              "übergeordneter Knoten": "64",
              "Links": [
                
              ],
              "in": falsch,
              "label": "Aus"
            }
          ],
          "Name": "Knoten 1",
          "Farbe": "rgb(0,192,255)",
          "portsInOrder": [
            
          ],
          "portsOutOrder": [
            "65"
          ]
        },
        "69": {
          "id": "69",
          "Typ": "Standard",
          "x": 420.0056915283203,
          "y": 244.91477584838867,
          "Häfen": [
            {
              "id": "70",
              "Typ": "Standard",
              "x": null,
              "y": null,
              "name": "In",
              "Ausrichtung": "links",
              "übergeordneter Knoten": "69",
              "Links": [
                
              ],
              "in": wahr,
              "label": "In"
            }
          ],
          "Name": "Knoten 2",
          "Farbe": "rgb(192,255,0)",
          "portsInOrder": [
            "70"
          ],
          "portsOutOrder": [
            
          ]
        }
      }
    }
  ]
}

Grafische Darstellung

Bildbeschreibung hier einfügen

Serialisierungsbeispiel 4: Eingangsknoten, Ausgangsknoten und Verbindungen

Bildbeschreibung hier einfügen

{
  "id": "27",
  "offsetX": 0,
  "offsetY": 0,
  "zoom": 100,
  "Rastergröße": 0,
  "Ebenen": [
    {
      "id": "28",
      "Typ": "Diagramm-Links",
      "isSvg": wahr,
      "transformiert": wahr,
      "Modelle": {
        "36": {
          "id": "36",
          "Typ": "Standard",
          "Quelle": "32",
          "sourcePort": "33",
          "Ziel": "34",
          "Zielport": "35",
          "Punkte": [
            {
              "id": "37",
              "Typ": "Punkt",
              "x": 0,
              "y": 0
            },
            {
              "id": "38",
              "Typ": "Punkt",
              "x": 0,
              "y": 0
            }
          ],
          "Beschriftungen": [
            
          ],
          "Breite": 2,
          "Farbe": "grau",
          "Kurvigkeit": 50,
          "ausgewählte Farbe": "rgb(0,192,255)"
        }
      }
    },
    {
      "id": "30",
      "Typ": "Diagrammknoten",
      "isSvg": falsch,
      "transformiert": wahr,
      "Modelle": {
        "32": {
          "id": "32",
          "Typ": "Standard",
          "x": 100,
          "y": 100,
          "Häfen": [
            {
              "id": "33",
              "Typ": "Standard",
              "x": 100,
              "y": 100,
              "name": "Aus",
              "Ausrichtung": "rechts",
              "übergeordneter Knoten": "32",
              "Links": [
                "36"
              ],
              "in": falsch,
              "label": "Aus"
            }
          ],
          "Name": "Knoten 1",
          "Farbe": "rgb(0,192,255)",
          "portsInOrder": [
            
          ],
          "portsOutOrder": [
            "33"
          ]
        },
        "34": {
          "id": "34",
          "Typ": "Standard",
          "x": 400,
          "y": 100,
          "Häfen": [
            {
              "id": "35",
              "Typ": "Standard",
              "x": 400,
              "y": 100,
              "name": "In",
              "Ausrichtung": "links",
              "übergeordneter Knoten": "34",
              "Links": [
                "36"
              ],
              "in": wahr,
              "label": "In"
            }
          ],
          "Name": "Knoten 2",
          "Farbe": "rgb(192,255,0)",
          "portsInOrder": [
            "35"
          ],
          "portsOutOrder": [
            
          ]
        }
      }
    }
  ]
}

Grafische Darstellung

Bildbeschreibung hier einfügen

Spekulation und Analyse

1. Stammverzeichnis

Erstens hat das Stammverzeichnis 5 Parameter:

id : Dieser Parameter ist immer 27, seine Bedeutung ist unbekannt und erfordert keine große Aufmerksamkeit.

offsetX : Dies sollte sich auf den Abstand des Beobachtungszentrums von der X-Achse beziehen.

offsetY : bezieht sich auf den Abstand zwischen dem Beobachtungszentrum und der Y-Achse.

zoom : bezieht sich auf den Grad der Vergrößerung.

gridSize : bezieht sich auf die Größe des Rasters im Bild.

2.0 Schicht[0]

  • Diese Layer ist ein Array mit zwei Variablen darin. Wenn wir die obigen Änderungen und die Beschreibung des type beobachten, können wir davon ausgehen, dass es sich bei der einen um連線und bei der anderen um節點handelt.
  • Konzentrieren wir uns zunächst auf連線:

id : unbekannt.

type : bezieht sich auf den Typ.

isSvg : Ob es sich um den SVG-Typ handelt, die Funktion ist unbekannt.

transformed : sollte sich darauf beziehen, ob es verschoben werden kann.

model : weiter unten separat erklärt

2.1. Modelle (Diagramm-Links)

Bildbeschreibung hier einfügen

id : unbekannt. type : bezieht sich auf den Typ.

source : bezieht sich auf die Quellknoten-ID der Verbindung.

sourcePort : bezieht sich auf die Quellport-ID der Verbindung.

target : bezieht sich auf die Zielknoten-ID der Verbindung.

targetPort : bezieht sich auf die Ziel-Port-ID der Verbindung.

width : bezieht sich auf die Breite.

color : bezieht sich auf die Farbe.

curvyness : bezieht sich auf die Krümmung.

selectedColor : Die ausgewählte Farbe.

2.1.1. Punkt

Bildbeschreibung hier einfügen

id : bezieht sich auf die ID.

type : bezieht sich auf den Typ. Unten ausgelassen.

2.2. Schicht[1]

Bildbeschreibung hier einfügen

id : ausgelassen.

type : bezieht sich auf den Typ.

isSvg : ? Warum ist das falsch?

transformed : ausgelassen.

2.2.1 Modelle (Diagrammknoten)

Bildbeschreibung hier einfügen

前四個: weggelassen.

ports : Ich werde später noch gesondert darauf eingehen.

name : Anzeigename.

color : Anzeigefarbe

portsInOrder : repräsentiert

In Knoten, entsprechend der Nummer target .

portsOutOrder : repräsentiert

Out , der der oben stehenden source entspricht.

2.2.2. Häfen

Bildbeschreibung hier einfügen

前四個: weggelassen.

name : Ausgangsknoten

alignment : richtige Richtung.

parentNode : stellt den Knoten dar, an den das Element angehängt ist.

links : stellt die damit verbundenen Linien dar.

in : Ob eine Eingabe vorhanden ist.

label : Etikett.

3. Weitere Fallstudien

3.1. Ausgabeschnittstelle hinzufügen

Bildbeschreibung hier einfügen

Fügen Sie einfach den Ausgabeport hinzu und denken Sie daran, seine ID an der Position „Out“ hinzuzufügen.

3.2. Eingabeschnittstelle hinzufügen

Oben sind die Details der Fallanalyse der JSON-Interpretation von React-Diagrammen aufgeführt. Weitere Informationen zur JSON-Serialisierung von React-Diagrammen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Beispielanalyse der JavaScript-Analyse und JSON-Serialisierung
  • Die Konvertierung der Jackson-Entität in JSON ist NULL oder leer und nimmt nicht an der Serialisierung teil (Beispielerklärung)
  • JS implementiert Beispiel für JSON-Serialisierungs- und Deserialisierungsfunktion
  • jQuery implementiert die Methode zum Serialisieren von Formularelementen in JSON-Objekte

<<:  Mysql kann keine nicht aggregierten Spalten auswählen

>>:  DNS-Konfigurationsmethode für den Linux Domain Name Service

Artikel empfehlen

So verwenden Sie Docker Compose zum Implementieren des Nginx-Lastausgleichs

Implementieren Sie den Nginx-Lastausgleich basier...

SQL-Aggregation, Gruppierung und Sortierung

Inhaltsverzeichnis 1. Aggregierte Abfrage 1. COUN...

Implementierungsmethode für die Datenspeicherung im WeChat-Applet

Inhaltsverzeichnis Globale Variable „globalData“ ...

Lösung zum Vergessen des Administratorkennworts der MySQL-Datenbank

1. Geben Sie den Befehl mysqld --skip-grant-table...

Lösen Sie das Problem, dass Docker Sudo-Operationen verwenden muss

Die Schritte sind wie folgt 1. Erstellen Sie eine...

So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea

Wenn Sie den Text im Textarea-Eingabebereich umbre...

Hinweise zur Zeitverwaltung des Linux-Kernel-Gerätetreibers

/****************** * Zeitverwaltung des Linux-Ke...

MySQL-Startfehlerproblem und Szenarioanalyse

1. Komplettlösung 1. Problemanalyse und -lokalisi...

Super ausführliches Tutorial zur Installation und Bereitstellung von mysql-canal-rabbitmq

Inhaltsverzeichnis 1.1. MySQL-Binlog aktivieren 1...

So zeichnen Sie in CocosCreator ein cooles Radardiagramm

Inhaltsverzeichnis Vorwort Vorschau Text Grafikko...

Ein kleiner HTML-Code fügt die Baidu-Suchleiste in Ihre Seite ein

<html> <Kopf> <meta http-equiv=&quo...

Machen Sie sich nicht die Mühe mit JavaScript, wenn es mit CSS geht

Vorwort Jede Anwendung, die in JavaScript geschri...

Vue-Beispielcode zur einfachen Implementierung von virtuellem Scrollen

Inhaltsverzeichnis Vorwort Rollprinzip erreichen ...

Drei Möglichkeiten zum Erstellen eines Graueffekts auf Website-Bildern

Ich habe schon immer Graustufenbilder bevorzugt, d...

Verwenden Sie crontab, um das Skript zur regelmäßigen Ausführung des JAR-Programms in centOS6 auszuführen

1. Schreiben Sie ein einfaches Java-Programm öffe...