react-diagram 序列化Json解讀案例分析
本文目標 本文檔的目標在于解釋react-diagram框架模型序列化的Json，由于缺乏文檔，我這邊只能通過不斷嘗試和調(diào)試來進行測試。
序列化案例1：空畫布
{
"id": "27",
"offsetX": 0,
"offsetY": 0,
"zoom": 100,
"gridSize": 0,
"layers": [
{
"id": "28",
"type": "diagram-links",
"isSvg": true,
"transformed": true,
"models": {
}
},
{
"id": "30",
"type": "diagram-nodes",
"isSvg": false,
"transformed": true,
"models": {
}
}
]
}
圖形化展示
序列化案例2：單一out節(jié)點
{
"id": "27",
"offsetX": 0,
"offsetY": 0,
"zoom": 100,
"gridSize": 0,
"layers": [
{
"id": "28",
"type": "diagram-links",
"isSvg": true,
"transformed": true,
"models": {
}
},
{
"id": "30",
"type": "diagram-nodes",
"isSvg": false,
"transformed": true,
"models": {
"64": {
"id": "64",
"type": "default",
"x": 187.0056915283203,
"y": 219.91477584838867,
"ports": [
{
"id": "65",
"type": "default",
"x": null,
"y": null,
"name": "Out",
"alignment": "right",
"parentNode": "64",
"links": [
],
"in": false,
"label": "Out"
}
],
"name": "Node 1",
"color": "rgb(0,192,255)",
"portsInOrder": [
],
"portsOutOrder": [
"65"
]
}
}
}
]
}
圖形化展示
序列化案例3：一個in節(jié)點，一個out節(jié)點
{
"id": "27",
"offsetX": 0,
"offsetY": 0,
"zoom": 100,
"gridSize": 0,
"layers": [
{
"id": "28",
"type": "diagram-links",
"isSvg": true,
"transformed": true,
"models": {
}
},
{
"id": "30",
"type": "diagram-nodes",
"isSvg": false,
"transformed": true,
"models": {
"64": {
"id": "64",
"type": "default",
"x": 187.0056915283203,
"y": 219.91477584838867,
"ports": [
{
"id": "65",
"type": "default",
"x": 230.6392059326172,
"y": 248.57954025268555,
"name": "Out",
"alignment": "right",
"parentNode": "64",
"links": [
],
"in": false,
"label": "Out"
}
],
"name": "Node 1",
"color": "rgb(0,192,255)",
"portsInOrder": [
],
"portsOutOrder": [
"65"
]
},
"69": {
"id": "69",
"type": "default",
"x": 420.0056915283203,
"y": 244.91477584838867,
"ports": [
{
"id": "70",
"type": "default",
"x": null,
"y": null,
"name": "In",
"alignment": "left",
"parentNode": "69",
"links": [
],
"in": true,
"label": "In"
}
],
"name": "Node 2",
"color": "rgb(192,255,0)",
"portsInOrder": [
"70"
],
"portsOutOrder": [
]
}
}
}
]
}
圖形化展示
序列化案例4：in節(jié)點和out節(jié)點以及連線
{
"id": "27",
"offsetX": 0,
"offsetY": 0,
"zoom": 100,
"gridSize": 0,
"layers": [
{
"id": "28",
"type": "diagram-links",
"isSvg": true,
"transformed": true,
"models": {
"36": {
"id": "36",
"type": "default",
"source": "32",
"sourcePort": "33",
"target": "34",
"targetPort": "35",
"points": [
{
"id": "37",
"type": "point",
"x": 0,
"y": 0
},
{
"id": "38",
"type": "point",
"x": 0,
"y": 0
}
],
"labels": [
],
"width": 2,
"color": "grey",
"curvyness": 50,
"selectedColor": "rgb(0,192,255)"
}
}
},
{
"id": "30",
"type": "diagram-nodes",
"isSvg": false,
"transformed": true,
"models": {
"32": {
"id": "32",
"type": "default",
"x": 100,
"y": 100,
"ports": [
{
"id": "33",
"type": "default",
"x": 100,
"y": 100,
"name": "Out",
"alignment": "right",
"parentNode": "32",
"links": [
"36"
],
"in": false,
"label": "Out"
}
],
"name": "Node 1",
"color": "rgb(0,192,255)",
"portsInOrder": [
],
"portsOutOrder": [
"33"
]
},
"34": {
"id": "34",
"type": "default",
"x": 400,
"y": 100,
"ports": [
{
"id": "35",
"type": "default",
"x": 400,
"y": 100,
"name": "In",
"alignment": "left",
"parentNode": "34",
"links": [
"36"
],
"in": true,
"label": "In"
}
],
"name": "Node 2",
"color": "rgb(192,255,0)",
"portsInOrder": [
"35"
],
"portsOutOrder": [
]
}
}
}
]
}
圖形化展示
推測與解析
1. 根目錄
首先根目錄有5個參數(shù)：
id：這個參數(shù)總是27，意義不明，不需要過多關(guān)注。
offsetX：這應(yīng)該指的是觀測中心距離X軸的距離。
offsetY：指的是觀測中心距離Y軸的距離。
zoom：指放大的程度。
gridSize：指的是圖像中網(wǎng)格的大小。
2.0 Layer[0]
- 這個
Layer是一個數(shù)組，內(nèi)部有兩個變量，觀察上面的變化以及type的描述，可以認為一個是連線，一個是節(jié)點。 - 我們首先關(guān)注
連線：
id：未知。
type：指類型。
isSvg：是否是SVG類型，作用不明。
transformed：應(yīng)該指的是是否能移動。
model：下面單獨解釋
2.1. models(diagram-links)
id：未知。type：指類型。
source：指的是連線的源節(jié)點ID。
sourcePort：指的是連線的源端口ID。
target：指的是連線的目標節(jié)點ID。
targetPort：指的是連線目標端口ID。
width：指寬度。
color：指顏色。
curvyness：指曲度。
selectedColor：選擇后的顏色。
2.1.1. Point
id：指ID。
type：指類型。下略。
2.2. Layer[1]
id：略。
type：指類型。
isSvg：？為什么這里是false
transformed：略。
2.2.1 models(diagram-nodes)
前四個：略。
ports：一會單獨講。
name：顯示名字。
color：顯示顏色
portsInOrder：代表的是
In節(jié)點，對應(yīng)上面target的編號。
portsOutOrder：代表的是
Out節(jié)點，對應(yīng)上面source的編號。
2.2.2. ports
前四個：略。
name：出節(jié)點
alignment：右方向。
parentNode：代表附著的節(jié)點。
links：代表連在上面的線條。
in：有沒有輸入。
label：標簽。
3. 更多案例簡述
3.1. 增加輸出接口
只需要增加輸出的port即可，記得在out位置加入它的ID。
3.2. 增加輸入接口
以上就是react-diagram 序列化Json解讀案例分析的詳細內(nèi)容，更多關(guān)于react-diagram 序列化Json的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
React?Server?Component混合式渲染問題詳解
React?官方對?Server?Comopnent?是這樣介紹的:?zero-bundle-size?React?Server?Components，這篇文章主要介紹了React?Server?Component:?混合式渲染,需要的朋友可以參考下2022-12-12
本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
React應(yīng)用框架Dva數(shù)據(jù)流向原理總結(jié)分析
這篇文章主要為大家介紹了React 應(yīng)用框架Dva數(shù)據(jù)流向原理總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
如何應(yīng)用?SOLID?原則在?React?中整理代碼之開閉原則
React?不是面向?qū)ο?，但這些原則背后的主要思想可能是有幫助的，在本文中，我將嘗試演示如何應(yīng)用這些原則來編寫更好的代碼，對React?SOLID原則開閉原則相關(guān)知識感興趣的朋友一起看看吧2022-07-07
ReactNative點擊事件.bind(this)操作分析
這篇文章主要為大家介紹了ReactNative點擊事件.bind(this)操作分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
在這篇指南中,我們將探索使用 Google Fonts 在 React Native 應(yīng)用中添加自定義字體的方法,字體是優(yōu)秀用戶體驗的基石,使用定制字體可以為你的應(yīng)用程序提供獨特的身份,需要的朋友可以參考下2024-02-02
TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定
這篇文章主要為大家介紹了TS裝飾器bindThis優(yōu)雅實現(xiàn)React類組件中this綁定，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
useState 通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部 state，React 會在重復(fù)渲染時保留這個 state，接下來通過一個示例來看看怎么使用 useState吧2021-06-06
這篇文章主要介紹了react如何向數(shù)組中追加值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了hooks寫React組件的5個需要注意的細節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03