[發(fā)明專利]一種輕量的基于DOM的流程圖渲染方法

在審

• 申請?zhí)枺?/td>: 202111060027.6
• 申請日: 2021-09-10
• 公開（公告）號: CN113849697A
• 公開（公告）日: 2021-12-28
• 發(fā)明（設(shè)計）人: 張彤;賈順昌
• 申請（專利權(quán)）人: 上海得帆信息技術(shù)有限公司
• 主分類號: G06F16/901
• 分類號: G06F16/901;G06F16/904;G06T11/20
• 代理公司: 上海創(chuàng)開專利代理事務(wù)所(普通合伙) 31374
• 代理人: 張佑富

1.一種輕量的基于DOM的流程圖渲染方法，基于唯一開始節(jié)點(diǎn)和唯一結(jié)束節(jié)點(diǎn)設(shè)定，每個子流程都最終會匯合至一個父流程的節(jié)點(diǎn)上，該節(jié)點(diǎn)稱為匯合節(jié)點(diǎn)，并且后端存儲的數(shù)據(jù)結(jié)構(gòu)中第一個節(jié)點(diǎn)即為開始節(jié)點(diǎn)，其特征在于，所述渲染方法包括如下步驟：

S01、初始化最終的結(jié)果集graph為空，建立通過節(jié)點(diǎn)nodeId找到節(jié)點(diǎn)完整信息的映射表，并且確定匯合節(jié)點(diǎn)以及每個匯合節(jié)點(diǎn)的上級節(jié)點(diǎn)個數(shù)JoinNodes，從開始節(jié)點(diǎn)開始，執(zhí)行下一步驟；

S02、將當(dāng)前節(jié)點(diǎn)push到最終的結(jié)果graph，然后執(zhí)行下一步驟；

S03、如果當(dāng)前節(jié)點(diǎn)的nextNodeId只有一個，則通過映射表取下一個節(jié)點(diǎn)，繼續(xù)執(zhí)行S02步驟，否則執(zhí)行下一步驟；

S04、如果當(dāng)前節(jié)點(diǎn)的nextNodeId為空，則流程結(jié)束，否則執(zhí)行S05步驟；

S05、初始化計數(shù)面板為空，遍歷當(dāng)前節(jié)點(diǎn)的nextNodeId，通過映射表找到每個節(jié)點(diǎn)的完整信息，然后對于每一個節(jié)點(diǎn)執(zhí)行S06步驟；

S06、當(dāng)前節(jié)點(diǎn)存在，則初始化子結(jié)果集subGraph為空，從當(dāng)前節(jié)點(diǎn)的開始，執(zhí)行S07步驟，否則執(zhí)行S12步驟；

S07、將當(dāng)前節(jié)點(diǎn)push到子結(jié)果集subGraph，然后執(zhí)行下一步驟；

S08、如果當(dāng)前節(jié)點(diǎn)的nextNodeId字符串化在匯合節(jié)點(diǎn)的集合中，則執(zhí)行下一步驟，否則執(zhí)行S10步驟；

S09、如果當(dāng)前節(jié)點(diǎn)的nextNodeId字符串化之后在計數(shù)面板中，則計數(shù)+1，當(dāng)前遍歷結(jié)束，否則計數(shù)置為1，當(dāng)前循環(huán)結(jié)束，繼續(xù)執(zhí)行S06步驟；

S10、如果當(dāng)前節(jié)點(diǎn)的nextNodeId只有一個，則通過映射表取下一個節(jié)點(diǎn)，則繼續(xù)執(zhí)行S07步驟，否則執(zhí)行下一步驟；

S11、如果當(dāng)前節(jié)點(diǎn)nextNodeId為空，則當(dāng)前循環(huán)結(jié)束，繼續(xù)執(zhí)行S06步驟，否則遞歸執(zhí)行S05步驟；

S12、將子結(jié)果集subGraph push到最終的結(jié)果graph中，然后遍歷計數(shù)面板中的結(jié)果，對于每一個結(jié)果執(zhí)行S13步驟；

S13、如果當(dāng)前結(jié)果在匯合節(jié)點(diǎn)中的計數(shù)等于在計數(shù)面板中的計數(shù)，則將當(dāng)前結(jié)果移出JoinNodes，然后執(zhí)行下一步驟，否則執(zhí)行S15步驟；

S14、取出當(dāng)前結(jié)果轉(zhuǎn)換成數(shù)組，即為匯合節(jié)點(diǎn)的nextNodeId，繼續(xù)執(zhí)行S10步驟

S15、將當(dāng)前計數(shù)面板的結(jié)果傳遞到父級計數(shù)面板，當(dāng)前遞歸結(jié)束，恢復(fù)為上一次nextNodeId的遍歷。

2.根據(jù)權(quán)利要求1所述的一種輕量的基于DOM的流程圖渲染方法，其特征在于，所述渲染方法通過判斷數(shù)組的每一項是否存在nodeId，若存在，則認(rèn)為這一項為流程節(jié)點(diǎn)，直接渲染一個流程節(jié)點(diǎn)，否則認(rèn)為這一項為一個分支，即包含多個子流程，遍歷這每一個子流程，遞歸執(zhí)行渲染操作。

3.根據(jù)權(quán)利要求1所述的一種輕量的基于DOM的流程圖渲染方法，其特征在于，所述渲染方法通過提供一種組件實(shí)現(xiàn)，所述組件所需具備的能力包括：通過傳入一個圖形的數(shù)據(jù)結(jié)構(gòu)將整個流程圖從開始節(jié)點(diǎn)到結(jié)束節(jié)點(diǎn)都繪制出來；支持動態(tài)添加和刪除節(jié)點(diǎn)和分支流程；暴露一定的交互的事件，包括節(jié)點(diǎn)點(diǎn)擊，節(jié)點(diǎn)刪除，并且提供合適、合理的參數(shù)，輔助業(yè)務(wù)擴(kuò)展；支持自定義節(jié)點(diǎn)的樣式，并且提供節(jié)點(diǎn)數(shù)據(jù)輔助用戶渲染。

4.根據(jù)權(quán)利要求1所述的一種輕量的基于DOM的流程圖渲染方法，其特征在于，所述渲染方法通過提供一種數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)，該數(shù)據(jù)結(jié)構(gòu)存儲采用鏈?zhǔn)降慕Y(jié)構(gòu)；每個節(jié)點(diǎn)的數(shù)據(jù)結(jié)構(gòu)中，有一個nextNodeId屬性，數(shù)組類型，存儲緊跟這個節(jié)點(diǎn)之后的節(jié)點(diǎn)nodeId。

5.根據(jù)權(quán)利要求4所述的一種輕量的基于DOM的流程圖渲染方法，其特征在于，所述數(shù)據(jù)結(jié)構(gòu)包括流程節(jié)點(diǎn)的唯一標(biāo)識nodeId、流程節(jié)點(diǎn)的名稱nodeName、流程節(jié)點(diǎn)的類型nodeType、緊跟當(dāng)前節(jié)點(diǎn)之后的節(jié)點(diǎn)nextNodeId。