react-diagram シリアル化 Json 解釈ケース分析

このドキュメントの目的はreact-diagramフレームワークモデルの Json シリアル化を説明することです。ドキュメントが不足しているため、試行錯誤を繰り返しながらテストすることしかできません。

シリアル化ケース 1: 空のキャンバス

ここに画像の説明を挿入

{
  "id": "27",
  "オフセットX": 0,
  "オフセットY": 0,
  「ズーム」: 100,
  "グリッドサイズ": 0,
  「レイヤー」: [
    {
      "id": "28",
      "タイプ": "ダイアグラムリンク",
      "isSvg": 真、
      「変換済み」：true、
      「モデル」: {
        
      }
    },
    {
      "id": "30",
      "type": "ダイアグラムノード",
      "isSvg": 偽、
      「変換済み」：true、
      「モデル」: {
        
      }
    }
  ]
}

グラフィック表示

ここに画像の説明を挿入

シリアル化ケース2: 単一ノード

ここに画像の説明を挿入

{
  "id": "27",
  "オフセットX": 0,
  "オフセットY": 0,
  「ズーム」: 100,
  "グリッドサイズ": 0,
  「レイヤー」: [
    {
      "id": "28",
      "タイプ": "ダイアグラムリンク",
      "isSvg": 真、
      「変換済み」：true、
      「モデル」: {
        
      }
    },
    {
      "id": "30",
      "type": "ダイアグラムノード",
      "isSvg": 偽、
      「変換済み」：true、
      「モデル」: {
        "64": {
          "id": "64",
          "タイプ": "デフォルト",
          "x": 187.0056915283203,
          "y": 219.91477584838867,
          「ポート」: [
            {
              "id": "65",
              "タイプ": "デフォルト",
              "x": ヌル、
              "y": ヌル、
              "名前": "アウト",
              「配置」：「右」、
              "親ノード": "64",
              「リンク」: [
                
              ]、
              「in」：偽、
              "ラベル": "アウト"
            }
          ]、
          "名前": "ノード 1",
          "色": "rgb(0,192,255)",
          "ポート順序": [
            
          ]、
          "ポート出力順序": [
            「65」
          ]
        }
      }
    }
  ]
}

グラフィック表示

ここに画像の説明を挿入

シリアル化ケース 3: 1 つの入力ノードと 1 つの出力ノード

ここに画像の説明を挿入

{
  "id": "27",
  "オフセットX": 0,
  "オフセットY": 0,
  「ズーム」: 100,
  "グリッドサイズ": 0,
  「レイヤー」: [
    {
      "id": "28",
      "タイプ": "ダイアグラムリンク",
      "isSvg": 真、
      「変換済み」：true、
      「モデル」: {
        
      }
    },
    {
      "id": "30",
      "type": "ダイアグラムノード",
      "isSvg": 偽、
      「変換済み」：true、
      「モデル」: {
        "64": {
          "id": "64",
          "タイプ": "デフォルト",
          "x": 187.0056915283203,
          "y": 219.91477584838867,
          「ポート」: [
            {
              "id": "65",
              "タイプ": "デフォルト",
              "x": 230.6392059326172,
              "y": 248.57954025268555,
              "名前": "アウト",
              「配置」：「右」、
              "親ノード": "64",
              「リンク」: [
                
              ]、
              「in」：偽、
              "ラベル": "アウト"
            }
          ]、
          "名前": "ノード 1",
          "色": "rgb(0,192,255)",
          "ポート順序": [
            
          ]、
          "ポート出力順序": [
            「65」
          ]
        },
        "69": {
          "id": "69",
          "タイプ": "デフォルト",
          "x": 420.0056915283203,
          "y": 244.91477584838867,
          「ポート」: [
            {
              "id": "70",
              "タイプ": "デフォルト",
              "x": ヌル、
              "y": ヌル、
              "名前": "中",
              "配置": "左",
              "親ノード": "69",
              「リンク」: [
                
              ]、
              「in」：真、
              "ラベル": "中"
            }
          ]、
          "名前": "ノード2",
          "色": "rgb(192,255,0)",
          "ポート順序": [
            「70」
          ]、
          "ポート出力順序": [
            
          ]
        }
      }
    }
  ]
}

グラフィック表示

ここに画像の説明を挿入

シリアル化の例 4: 入力ノード、出力ノード、接続

ここに画像の説明を挿入

{
  "id": "27",
  "オフセットX": 0,
  "オフセットY": 0,
  「ズーム」: 100,
  "グリッドサイズ": 0,
  「レイヤー」: [
    {
      "id": "28",
      "タイプ": "ダイアグラムリンク",
      "isSvg": 真、
      「変換済み」：true、
      「モデル」: {
        "36": {
          "id": "36",
          "タイプ": "デフォルト",
          "ソース": "32",
          "ソースポート": "33",
          "ターゲット": "34",
          "ターゲットポート": "35",
          「ポイント」: [
            {
              "id": "37",
              "タイプ": "ポイント",
              "x": 0,
              "y": 0
            },
            {
              "id": "38",
              "タイプ": "ポイント",
              "x": 0,
              "y": 0
            }
          ]、
          「ラベル」: [
            
          ]、
          「幅」: 2,
          "色": "グレー",
          「曲線美」: 50,
          "選択された色": "rgb(0,192,255)"
        }
      }
    },
    {
      "id": "30",
      "type": "ダイアグラムノード",
      "isSvg": 偽、
      「変換済み」：true、
      「モデル」: {
        "32": {
          "id": "32",
          "タイプ": "デフォルト",
          "x": 100,
          "y": 100,
          「ポート」: [
            {
              "id": "33",
              "タイプ": "デフォルト",
              "x": 100,
              "y": 100,
              "名前": "アウト",
              「配置」：「右」、
              "親ノード": "32",
              「リンク」: [
                「36」
              ]、
              「in」：偽、
              "ラベル": "アウト"
            }
          ]、
          "名前": "ノード 1",
          "色": "rgb(0,192,255)",
          "ポート順序": [
            
          ]、
          "ポート出力順序": [
            「33」
          ]
        },
        "34": {
          "id": "34",
          "タイプ": "デフォルト",
          "x": 400,
          "y": 100,
          「ポート」: [
            {
              "id": "35",
              "タイプ": "デフォルト",
              "x": 400,
              "y": 100,
              "名前": "中",
              「配置」：「左」、
              "親ノード": "34",
              「リンク」: [
                「36」
              ]、
              「in」：真、
              "ラベル": "中"
            }
          ]、
          "名前": "ノード2",
          "色": "rgb(192,255,0)",
          "ポート順序": [
            「35」
          ]、
          "ポート出力順序": [
            
          ]
        }
      }
    }
  ]
}

グラフィック表示

ここに画像の説明を挿入