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

Der Unterschied zwischen HTML Empty Link href="#" und href="javascript:void(0)"

# enthält eine Standortinformation. Der Standardan...

Einführung in die gängigen Festplattenverwaltungsbefehle von Linux

Inhaltsverzeichnis 1. df-Befehl 2. du-Befehl 3. B...

Eine Methode zum Verbergen von Prozessen unter Linux und die dabei auftretenden Fallstricke

Vorwort 1. Die in diesem Artikel verwendeten Tool...

Front-End-KI-Schnitttipps (Erfahrung)

Das AI-Bildschneiden muss mit PS koordiniert werd...

Beispielcode für die programmgesteuerte Verarbeitung von CSS-Stilen

Vorteile eines programmatischen Ansatzes 1. Globa...

React Diff-Algorithmus-Quellcodeanalyse

Inhaltsverzeichnis Einzelner Knoten Diff Einzelel...

Lernen Sie den Rendering-Prozess von HTML-Seiten kennen, um sich auf die Optimierung der Front-End-Leistung vorzubereiten (Fortsetzung)

Gestern Abend habe ich einen Aufsatz über den Bro...

WeChat-Applet: benutzerdefinierter TabBar-Schrittdatensatz

Inhaltsverzeichnis 1. Einleitung 2. Passen Sie de...

CSS3 legt eine Maske für das Hintergrundbild fest und löst das Problem der Maskenstilvererbung

In vielen Fällen müssen Sie den Bildhintergrund b...

Optimierung der Abfragegeschwindigkeit von MySQL mit mehreren zehn Millionen Daten mithilfe von Indizes

1. Die Rolle des Index Im Allgemeinen entspricht ...

Zusammenfassung von über 50 Hilfsfunktionen in JavaScript

JavaScript kann viele tolle Dinge. Dieser Artikel...

Tutorial zur HTML-Tabellenauszeichnung (48): CSS-modifizierte Tabelle

<br />Sehen wir uns nun an, wie Sie die CSS-...

Häufig verwendete englische Schriftarten für die Webseitenerstellung

Arial Arial ist eine serifenlose TrueType-Schrifta...

Docker-Installation von RocketMQ und Lösungen für während der Installation aufgetretene Probleme

Inhaltsverzeichnis Ziehen Sie das Rocketmq-Image ...

Vue3 implementiert CSS unendlichen nahtlosen Scrolleffekt

In diesem Artikelbeispiel wird der spezifische Co...