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

Analyse des Prozesses der einfachen Bereitstellung von Nginx im Docker-Container

1. Stellen Sie den Nginx-Dienst im Container bere...

Zusammenfassung des fragmentierten Wissens zum Docker-Management

Inhaltsverzeichnis 1. Übersicht 2. Anwendungsbeis...

Detaillierte Erläuterung des Redo-Logs und Undo-Logs in MySQL

Die wichtigsten Protokolle im MySQL-Protokollsyst...

MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte

Vorne geschrieben Ich habe kürzlich ein spezielle...

Detailliertes Verständnis von umask in den neuen Linux-Dateiberechtigungseinstellungen

Vorwort Der Ursprung ist Frage 1: Wenn Ihre Umask...

Ein kurzer Vortrag über MySQL-Pivottabellen

Ich habe eine Produktteiletabelle wie diese: Teil...

So stellen Sie ein Vue-Projekt unter Nginx bereit

Heute werde ich den Server nginx verwenden und mu...

Drei gängige Stilselektoren in HTML-CSS

1: Tag-Selektor Der Tag-Selektor wird für alle Ta...

Docker-Bereinigungsumgebungsvorgang

Beginnen Sie vorsichtig mit der Reinigung! Auflis...

So ändern Sie den Replikationsfilter in MySQL dynamisch

MySQL Replikationsfilter dynamisch ändern Lassen ...

Detailliertes Beispiel zum Entfernen doppelter Daten in MySQL

Detailliertes Beispiel zum Entfernen doppelter Da...

Eine kurze Analyse des Tutorials zur Installation von MySQL 8.0.18 auf CentOS 6.8 (RPM-Methode)

Heute werde ich aufzeichnen, wie man MySQL 8.0.18...

Analyse des Idea-Compiler-Vue-Einrückungsfehlerproblemszenarios

Projektszenario: Beim Ausführen des Vue-Projekts ...

CentOS 7: Beispielcode zum Festlegen des Grub-Passworts und zur Einzelbenutzeranmeldung

Es gibt erhebliche Unterschiede zwischen CentOS7 ...

Ideen und Methoden zur inkrementellen Sicherung einer MySQL-Datenbank

Um eine inkrementelle Sicherung der MySQL-Datenba...