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