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

Spezifische Verwendung des Linux-Befehls „dirname“

01. Befehlsübersicht dirname - entfernt nicht zu ...

Installieren Sie nodejs und yarn und konfigurieren Sie den Taobao-Quellprozessdatensatz

Inhaltsverzeichnis 1. Laden Sie nodejs herunter 2...

Absteigender Index in MySQL 8.0

Vorwort Ich glaube, jeder weiß, dass Indizes geor...

Detaillierte Erklärung zur Verwendung verschiedener MySQL-Indizes

1. Langsames Abfrageprotokoll 1.1 MySQL-Protokoll...

Implementierungsbeispiel für ein JS-natives zweispaltiges Shuttle-Auswahlfeld

Inhaltsverzeichnis Verwendung Strukturzweige Code...

9 großartige JavaScript-Framework-Skripte zum Zeichnen von Diagrammen im Web

9 großartige JavaScript-Framework-Skripte zum Zei...

JavaScript zum Erreichen eines Mouse-Tailing-Effekts

Mauseffekte erfordern die Verwendung von setTimeo...

Beim Bereitstellen von rabbitmq mit Docker sind zwei Probleme aufgetreten

1. Hintergrund Die folgenden zwei Probleme treten...

Vue3.0 handgeschriebener Karusselleffekt

In diesem Artikel wird der spezifische Code des h...

Verwendung der Linux Dynamic Link Library

Im Vergleich zu gewöhnlichen Programmen haben dyn...

Die Tabelle verwendet: nth-child(), um abwechselnde Farbänderungen und Ausrichtungen zu erreichen

Kerncode <!DOCTYPE html> <html lang=&quo...

Analyse der zum Ausführen von Docker erforderlichen Berechtigungen

Zum Ausführen von Docker sind Root-Rechte erforde...

vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen

In der neuesten Version von WIN10 hat Microsoft e...

Zusammenfassung zum Erlernen von Docker-Befehlen in einem Artikel

Inhaltsverzeichnis Einführung Spiegel-Repository ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 und Workbench

In diesem Artikel wird die Installations- und Kon...