react-diagram 序列化Json解讀案例分析
本文目標(biāo) 本文檔的目標(biāo)在于解釋react-diagram框架模型序列化的Json，由于缺乏文檔，我這邊只能通過(guò)不斷嘗試和調(diào)試來(lái)進(jìn)行測(cè)試。
序列化案例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：?jiǎn)我籵ut節(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": [
]
}
}
}
]
}
圖形化展示
推測(cè)與解析
1. 根目錄
首先根目錄有5個(gè)參數(shù)：
id：這個(gè)參數(shù)總是27，意義不明，不需要過(guò)多關(guān)注。
offsetX：這應(yīng)該指的是觀測(cè)中心距離X軸的距離。
offsetY：指的是觀測(cè)中心距離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：有沒(méi)有輸入。
label：標(biāo)簽。
3. 更多案例簡(jiǎn)述
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)文章
這篇文章主要給大家介紹了關(guān)于React組件重構(gòu)之嵌套+繼承及高階組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
react路由基礎(chǔ)解讀(Router、Link和Route)
這篇文章主要介紹了react路由基礎(chǔ)解讀(Router、Link和Route)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
在React日常開(kāi)發(fā)中，我們常常被重復(fù)渲染或無(wú)意義渲染所折磨，窮盡腦汁，做各種優(yōu)化：memo、useMemo、useCallback、immutable等，本文主要講述immutable的簡(jiǎn)約版Immer，感興趣的同學(xué)可以一起來(lái)學(xué)習(xí)2023-05-05
react組件的創(chuàng)建與更新實(shí)現(xiàn)流程詳解
React組件分為函數(shù)組件與class組件；函數(shù)組件是無(wú)狀態(tài)組件，class稱為類組件；函數(shù)組件只有props，沒(méi)有自己的私有數(shù)據(jù)和生命周期函數(shù)；class組件有自己私有數(shù)據(jù)(this.state)和生命周期函數(shù)2022-10-10
React styled-components設(shè)置組件屬性的方法
這篇文章主要介紹了styled-components設(shè)置組件屬性的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
React實(shí)現(xiàn)Vue的watch監(jiān)聽(tīng)屬性方式
這篇文章主要介紹了React實(shí)現(xiàn)Vue的watch監(jiān)聽(tīng)屬性方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
詳解Stack?Navigator中使用自定義的Render?Callback
這篇文章主要為大家介紹了Stack?Navigator中使用自定義的Render?Callback使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在React項(xiàng)目中使用iframe嵌入一個(gè)網(wǎng)站的步驟
本文介紹了如何在React項(xiàng)目中通過(guò)iframe嵌入百度網(wǎng)站的步驟,首先創(chuàng)建一個(gè)Baidu.js組件,并在該組件中設(shè)置iframe來(lái)加載百度,然后在App.js中引入并使用Baidu組件,還討論了因安全策略可能無(wú)法加載某些網(wǎng)站的問(wèn)題,需要的朋友可以參考下2024-09-09
在Reactor中提供了Context來(lái)替代ThreadLocal，可以實(shí)現(xiàn)一個(gè)跨線程的共享變量的透明方式。本文主要為大家介紹了Context的用法的用法，感興趣的可以了解一下2023-03-03
一些剛開(kāi)始學(xué)習(xí) React，或者從其他框架轉(zhuǎn)入 React 的開(kāi)發(fā)者，一開(kāi)始可能不會(huì)太關(guān)注性能。因?yàn)樾枰恍r(shí)間來(lái)發(fā)現(xiàn)新學(xué)習(xí)的框架的性能缺點(diǎn)。這篇文章主要介紹提高React性能的技巧，感興趣的同學(xué)可以參考閱讀2023-04-04