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，意義不明，不需要過多關注。
offsetX：這應該指的是觀測中心距離X軸的距離。
offsetY：指的是觀測中心距離Y軸的距離。
zoom：指放大的程度。
gridSize：指的是圖像中網(wǎng)格的大小。
2.0 Layer[0]
- 這個
Layer是一個數(shù)組，內(nèi)部有兩個變量，觀察上面的變化以及type的描述，可以認為一個是連線，一個是節(jié)點。 - 我們首先關注
連線：
id：未知。
type：指類型。
isSvg：是否是SVG類型，作用不明。
transformed：應該指的是是否能移動。
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é)點，對應上面target的編號。
portsOutOrder：代表的是
Out節(jié)點，對應上面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)容，更多關于react-diagram 序列化Json的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要給大家介紹了關于React組件重構之嵌套+繼承及高階組件的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-07-07
react路由基礎解讀(Router、Link和Route)
這篇文章主要介紹了react路由基礎解讀(Router、Link和Route)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
在React日常開發(fā)中，我們常常被重復渲染或無意義渲染所折磨，窮盡腦汁，做各種優(yōu)化：memo、useMemo、useCallback、immutable等，本文主要講述immutable的簡約版Immer，感興趣的同學可以一起來學習2023-05-05
react組件的創(chuàng)建與更新實現(xiàn)流程詳解
React組件分為函數(shù)組件與class組件；函數(shù)組件是無狀態(tài)組件，class稱為類組件；函數(shù)組件只有props，沒有自己的私有數(shù)據(jù)和生命周期函數(shù)；class組件有自己私有數(shù)據(jù)(this.state)和生命周期函數(shù)2022-10-10
React styled-components設置組件屬性的方法
這篇文章主要介紹了styled-components設置組件屬性的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
React實現(xiàn)Vue的watch監(jiān)聽屬性方式
這篇文章主要介紹了React實現(xiàn)Vue的watch監(jiān)聽屬性方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解Stack?Navigator中使用自定義的Render?Callback
這篇文章主要為大家介紹了Stack?Navigator中使用自定義的Render?Callback使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
在React項目中使用iframe嵌入一個網(wǎng)站的步驟
本文介紹了如何在React項目中通過iframe嵌入百度網(wǎng)站的步驟,首先創(chuàng)建一個Baidu.js組件,并在該組件中設置iframe來加載百度,然后在App.js中引入并使用Baidu組件,還討論了因安全策略可能無法加載某些網(wǎng)站的問題,需要的朋友可以參考下2024-09-09
在Reactor中提供了Context來替代ThreadLocal，可以實現(xiàn)一個跨線程的共享變量的透明方式。本文主要為大家介紹了Context的用法的用法，感興趣的可以了解一下2023-03-03
一些剛開始學習 React，或者從其他框架轉入 React 的開發(fā)者，一開始可能不會太關注性能。因為需要一些時間來發(fā)現(xiàn)新學習的框架的性能缺點。這篇文章主要介紹提高React性能的技巧，感興趣的同學可以參考閱讀2023-04-04