From e11caeeaed7fb522a575d547d3dec0cd0d0a48fb Mon Sep 17 00:00:00 2001 From: Waiting Date: Sat, 11 Mar 2023 00:11:18 +0800 Subject: [PATCH] =?UTF-8?q?=E7=B4=B0=E7=AF=80=E6=A8=A3=E5=BC=8F=E8=AA=BF?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CodeBlockShape.ts | 2 +- src/Graph.ts | 180 +++++++++++++++++++++--------------------- src/Utils.ts | 5 +- 3 files changed, 97 insertions(+), 90 deletions(-) diff --git a/src/CodeBlockShape.ts b/src/CodeBlockShape.ts index 942696c..5ac6a0c 100644 --- a/src/CodeBlockShape.ts +++ b/src/CodeBlockShape.ts @@ -24,7 +24,7 @@ class CodeBlockShape { let codeTextLines = codeText.split('\n') // 獲取 代碼塊所需高度 - let blockHeight = myUtils.getTextHeight(codeDataFunc.code) + 20; + let blockHeight = myUtils.getTextHeight(codeDataFunc.code) + 30; // 計算代碼塊所需寬度 let blockWidth = 0 diff --git a/src/Graph.ts b/src/Graph.ts index e22838e..26f07f4 100644 --- a/src/Graph.ts +++ b/src/Graph.ts @@ -11,113 +11,117 @@ const edge = new Edge() export let initGraph = function (codeBlocks: String[]) { - // 創建畫布 - const graph = new Graph({ - container: document.getElementById('container'), - width: 2200, - height: 1200, - background: { - color: '#fffbe6', // 设置画布背景颜色 - }, - grid: { - size: 10, // 网格大小 10px - visible: true, // 渲染网格背景 - }, - }); + // 創建畫布 + const graph = new Graph({ + container: document.getElementById('container'), + width: 3000, + height: 5000, + autoResize: true, + background: { + color: '#ffffff', // 设置画布背景颜色 + }, + grid: { + size: 10, // 網格大小 10px + visible: true, // 渲染網格背景 + }, + }); - // 將 代碼塊字串 集合 解析成 CodeData 對象集合，並將相同 className 的對象進行合併 - let codeDatas: CodeData[] = [] - codeBlocks.forEach((codeBlock: string) => { - let codeData: CodeData = myUtils.parseCodeData(codeBlock) - codeDatas.push(codeData) - }) - codeDatas = myUtils.mergeCodeDatas(codeDatas) + // 將 代碼塊字串 集合 解析成 CodeData 對象集合，並將相同 className 的對象進行合併 + let codeDatas: CodeData[] = [] + codeBlocks.forEach((codeBlock: string) => { + let codeData: CodeData = myUtils.parseCodeData(codeBlock) + codeDatas.push(codeData) + }) + codeDatas = myUtils.mergeCodeDatas(codeDatas) - // 將 CodeData 對象列表 繪製成 類圖形、代碼塊圖形 - for (const codeData of codeDatas) { + // 將 CodeData 對象列表 繪製成 類圖形、代碼塊圖形 + for (const codeData of codeDatas) { - // 將 類圖形、代碼塊圖形 加入到 畫布 中 - let funcNames = codeData.funcs.map(item => item.name) - graph.addNode(classShape.createClassShape(codeData.className, funcNames)) - graph.addNodes(codeBlockShape.createCodeBlockShape(codeData)) + // 將 類圖形、代碼塊圖形 加入到 畫布 中 + let funcNames = codeData.funcs.map(item => item.name) + graph.addNode(classShape.createClassShape(codeData.className, funcNames)) + graph.addNodes(codeBlockShape.createCodeBlockShape(codeData)) - // 創建 函數名稱 與 代碼塊圖形 的 連線 - graph.addEdges(edge.createFuncToCodeEdges(codeData)) + // 創建 函數名稱 與 代碼塊圖形 的 連線 + graph.addEdges(edge.createFuncToCodeEdges(codeData)) - } + } - // 繪製 CodeData 中的 函數調用 連線 - for (const codeData of codeDatas) { - graph.addEdges(edge.createFuncCallEdges(codeData)) - } + // 繪製 CodeData 中的 函數調用 連線 + for (const codeData of codeDatas) { + graph.addEdges(edge.createFuncCallEdges(codeData)) + } - // 綁定 開啟/關閉 代碼塊圖形 事件 - graph.on('toggle:codeBlock', ({e, node}) => { + // 綁定 開啟/關閉 代碼塊圖形 事件 + // @ts-ignore + graph.on('toggle:codeBlock', ({e}) => { - // 獲取 代碼塊圖形、開關文字 對象 - let codeBlock = graph.getCellById(e.currentTarget.getAttribute('target-code-block')) - let toggleText = e.currentTarget.parentNode.childNodes[3].children[0] + console.dir(typeof e) - // 如果當前 代碼塊圖形 正在顯示，則關閉。反之則開啟 - if (codeBlock.getProp().visible) { - codeBlock.hide() - toggleText.textContent = '+' - toggleText.setAttribute('dy', '0.3em') - } else { + // 獲取 代碼塊圖形、開關文字 對象 + let codeBlock = graph.getCellById(e.currentTarget.getAttribute('target-code-block')) + let toggleText = e.currentTarget.parentNode.childNodes[3].children[0] - // 計算 代碼塊 顯示位置 - const intervalX = 200 - const posX = e.offsetX + intervalX - const posY = e.offsetY - (codeBlock.getProp().size.height / 2) - codeBlock.prop("position", {x: posX, y: posY}) + // 如果當前 代碼塊圖形 正在顯示，則關閉。反之則開啟 + if (codeBlock.getProp().visible) { + codeBlock.hide() + toggleText.textContent = '+' + toggleText.setAttribute('dy', '0.3em') + } else { - codeBlock.show() - toggleText.textContent = '-' - toggleText.setAttribute('dy', '0.2em') - } - }) + // 計算 代碼塊 顯示位置 + const intervalX = 100 + const posX = e.offsetX + intervalX + const posY = e.offsetY - (codeBlock.getProp().size.height / 2) + codeBlock.prop("position", {x: posX, y: posY}) - // 最大的 類圖形 的寬度 - let maxClassShapeWidth = 0; - // 所有的 類圖形 集合 - let classShapes: Cell[] = []; + codeBlock.show() + toggleText.textContent = '-' + toggleText.setAttribute('dy', '0.3em') + } + }) - // 遍歷 所有的圖形 - for (const node of graph.getCells()) { + // 最大的 類圖形 的寬度 + let maxClassShapeWidth = 0; + // 所有的 類圖形 集合 + let classShapes: Cell[] = []; - // 默認隱藏所有的 代碼塊 - if (node.id.startsWith(CODE_BLOCK_ID_TAG)) { - node.hide() - } + // 遍歷 所有的圖形 + for (const node of graph.getCells()) { - // 計算 類圖形 最大寬度、加入到集合中 - if (node.id.startsWith(CLASS_SHAPE_ID_TAG)) { - maxClassShapeWidth = Math.max(maxClassShapeWidth, node.getProp().size.width) - classShapes.push(node) - } - } + // 默認隱藏所有的 代碼塊 + if (node.id.startsWith(CODE_BLOCK_ID_TAG)) { + node.hide() + } - /** - * 計算 類圖形 的 座標 - */ - // 左側保留寬度 - const marginLeftWidth = 100 - // 類圖形的 Y 座標 - let curY = 200 - // 多個 類圖形 的 上下間格 - const intervalY = 150 - // 所有 類圖形 的 中線 X 座標 - const midX = marginLeftWidth + (maxClassShapeWidth / 2) - for (const classShape of classShapes) { + // 計算 類圖形 最大寬度、加入到集合中 + if (node.id.startsWith(CLASS_SHAPE_ID_TAG)) { + maxClassShapeWidth = Math.max(maxClassShapeWidth, node.getProp().size.width) + classShapes.push(node) + } + } - // 計算 類圖形 的 左上X 座標，並設置 - const posX = midX - (classShape.getProp().size.width / 2) - classShape.prop("position", {x: posX, y: curY}) + /** + * 計算 類圖形 的 座標 + */ + // 左側保留寬度 + const marginLeftWidth = 100 + // 類圖形的 Y 座標 + let curY = 200 + // 多個 類圖形 的 上下間格 + const intervalY = 150 + // 所有 類圖形 的 中線 X 座標 + const midX = marginLeftWidth + (maxClassShapeWidth / 2) + for (const classShape of classShapes) { - // 下個 類圖形 的 Y 座標 = 當前 類圖形 高度 + 間隔 - curY = curY + classShape.getProp().size.height + intervalY - } + // 計算 類圖形 的 左上X 座標，並設置 + const posX = midX - (classShape.getProp().size.width / 2) + classShape.prop("position", {x: posX, y: curY}) + + // 下個 類圖形 的 Y 座標 = 當前 類圖形 高度 + 間隔 + curY = curY + classShape.getProp().size.height + intervalY + } } diff --git a/src/Utils.ts b/src/Utils.ts index 8f7f34c..5d1dd03 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -25,6 +25,7 @@ class Utils { * 計算字串寬度 */ tCanvas: any = null; + public getTextWidth(text: string, font: string) { // re-use canvas object for better performance const canvas = this.tCanvas || (this.tCanvas = document.createElement('canvas')); @@ -186,4 +187,6 @@ class Utils { } -export {Utils, CodeData, CodeDataFunc} +export {Utils}; +export type {CodeData, CodeDataFunc}; +