新增 被調用的函數集合屬性

.gitignore

@@ -20,3 +20,4 @@ data.json
 
 # Exclude macOS Finder (System Explorer) View States
 .DS_Store
+package-lock.json

src/ClassShape.ts

@@ -30,9 +30,7 @@ Graph.registerPortLayout(
 /**
  * 類聲明 圖形定義
  */
-Graph.registerNode(
-	'clazz-shape',
-	{
+let clazzShapeDef = {
 	// 最上層 class 名稱
 	inherit: 'rect',
 	markup: [
@@ -77,10 +75,10 @@ Graph.registerNode(
 						tagName: 'circle',
 						selector: 'funcInCircle'
 					},
-						{
-							tagName: 'circle',
-							selector: 'funcOutCircle'
-						},
+					// {
+					// 	tagName: 'circle',
+					// 	selector: 'funcOutCircle'
+					// },
 					{
 						tagName: 'circle',
 						selector: 'toggle'
@@ -91,6 +89,7 @@ Graph.registerNode(
 					}
 				],
 				attrs: {
+					
 					func: {
 						strokeWidth: 1,
 						stroke: '#e5885c',
@@ -107,12 +106,12 @@ Graph.registerNode(
 						strokeWidth: 1,
 						fill: '#fff'
 					},
-						funcOutCircle: {
-							r: 5,
-							stroke: '#efab7c',
-							strokeWidth: 1,
-							fill: '#fff'
-						},
+					// funcOutCircle: {
+					// 	r: 5,
+					// 	stroke: '#efab7c',
+					// 	strokeWidth: 1,
+					// 	fill: '#fff'
+					// },
 					toggle: {
 						r: 7,
 						stroke: '#b2bec3',
@@ -133,7 +132,22 @@ Graph.registerNode(
 			},
 		},
 	},
-	},
+};
+clazzShapeDef.ports.groups.list.markup.push( {
+	tagName: 'circle',
+	selector: 'funcOutCircle'
+});
+clazzShapeDef.ports.groups.list.attrs.funcOutCircle = {
+	r: 5,
+	stroke: '#efab7c',
+	strokeWidth: 1,
+	fill: '#fff'
+}
+
+
+Graph.registerNode(
+	'clazz-shape',
+	clazzShapeDef,
 	true,
 );
 
@@ -170,7 +184,6 @@ class ClassShape {
 		};
 		classShape.ports = [];
 
-
 		// 定義下方函數名稱方塊
 		funcNames.forEach((funcName: string) => {
 

src/Graph.ts

@@ -25,14 +25,18 @@ export const initGraph = function (codeBlocks: CodeBlockContent[]) {
 		},
 	});
 
-	// 將 代碼塊字串 集合 解析成 CodeData 對象集合，並將相同 className 的對象進行合併
+	// 將 代碼塊字串 集合 解析成 CodeData 對象集合
 	let codeDatas: CodeData[] = [];
 	codeBlocks.forEach((codeBlock: CodeBlockContent) => {
 		const codeData: CodeData = myUtils.parseCodeData(codeBlock);
 		codeDatas.push(codeData);
 	});
+
+	// 將相同 className 的對象進行合併
 	codeDatas = myUtils.mergeCodeDatas(codeDatas);
 
+	// 設置 CodeDataFunc 中的 calleds 屬性
+	myUtils.setCalleds(codeDatas);
 
 	// 將 CodeData 對象列表 繪製成 類圖形、代碼塊圖形
 	for (const codeData of codeDatas) {

src/Utils.ts

@@ -1,5 +1,5 @@
 import hljs from "highlight.js";
-import {CodeBlockContent} from "./CodeBlockShape";
+import { CodeBlockContent } from "./CodeBlockShape";
 
 type CodeData = {
 	className: string, // 類名稱
@@ -10,7 +10,8 @@ type CodeDataFunc = {
 	language: string, // 程式語言
 	name: string, // 函數名稱
 	code: string,  // 代碼塊字串
-	calls: CodeDataFuncCall[] // 調用的函數集合
+	calls: CodeDataFuncCall[], // 調用的函數集合
+	calleds: CodeDataFuncCall[], // 被調用的函數集合
 };
 
 type CodeDataFuncCall = {
@@ -21,6 +22,9 @@ type CodeDataFuncCall = {
 export const CLASS_SHAPE_ID_TAG = "class-";
 export const CODE_BLOCK_ID_TAG = 'code-block-';
 
+// Key: 函數的唯一標示符，Value: 函數對象
+const funcNameToFunc = new Map<string, CodeDataFunc>();
+
 class Utils {
 
 	/**
@@ -44,7 +48,7 @@ class Utils {
 
 		// 創建一個新容器，將 HTML 代碼加入到容器中
 		const node = document.createElement('div');
-		node.innerHTML = '<pre style="padding-left: 20px">' + hljs.highlight(codeText, {language: 'java'}).value + '</pre>';
+		node.innerHTML = '<pre style="padding-left: 20px">' + hljs.highlight(codeText, { language: 'java' }).value + '</pre>';
 		document.body.appendChild(node);
 
 		// 計算 容器高度
@@ -94,8 +98,15 @@ class Utils {
 
 		// 從 註釋塊 中獲取 類名、方法名、調用的函數集合
 		let className = '';
-		let functionName = '';
 		const calls: CodeDataFuncCall[] = [];
+		const calleds: CodeDataFuncCall[] = [];
+		let codeDataFunc = {
+			language: lang,
+			name: '',
+			code: content,
+			calls: calls,
+			calleds: calleds
+		};
 
 		commentLines.forEach((comment) => {
 
@@ -106,16 +117,20 @@ class Utils {
 
 			// 獲取 方法名
 			if (comment.indexOf(functionTag) != -1) {
-				functionName = comment.substring(comment.indexOf(functionTag) + functionTag.length).trim();
+				codeDataFunc.name = comment.substring(comment.indexOf(functionTag) + functionTag.length).trim();
+
+				// 保存 到 共用 Map 中
+				funcNameToFunc.set(this.getClassShapeId(className, codeDataFunc.name, 'function'), codeDataFunc);
 			}
 
 			// 獲取 調用的函數
 			if (comment.indexOf(callTag) != -1) {
 				const callStr = comment.substring(comment.indexOf(callTag) + callTag.length).trim();
-				calls.push({
+				const call = {
 					className: callStr.substring(0, callStr.indexOf('@')).trim(),
 					functionName: callStr.substring(callStr.indexOf('@') + 1).trim()
-				});
+				}
+				calls.push(call);
 			}
 
 		});
@@ -123,12 +138,7 @@ class Utils {
 		// 封裝結果
 		const result: CodeData = {
 			className: className,
-			funcs: [{
-				language: lang,
-				name: functionName,
-				code: content,
-				calls: calls
-			}]
+			funcs: [codeDataFunc]
 		};
 
 		return result;
@@ -190,9 +200,33 @@ class Utils {
 
 		return result;
 	}
+
+	/**
+	 * 設置所有 CodeData 中的 CodeDataFunc 的 calleds 屬性
+	 * @param codeDatas 要進行處理的 CodeData 集合
+	 */
+	public setCalleds(codeDatas: CodeData[]) {
+
+		// 遍歷 呼叫函數 的 對象屬性
+		for (const codeData of codeDatas) {
+			for (const codeDataFunc of codeData.funcs) {
+				for (const call of codeDataFunc.calls) {
+
+					// 取得 被調用的 函數對象
+					let calledCodeDataFunc: CodeDataFunc | undefined = funcNameToFunc.get(this.getClassShapeId(call.className, call.functionName, 'function'));
+					
+					// 將 呼叫函數對象的屬性 加入到 被調用的函數對象 的 被調用函數集合 中
+					calledCodeDataFunc?.calleds.push({
+						className: codeDataFunc.name,
+						functionName: codeData.className
+					});
+				}
+			}
+		}
+	}
 }
 
 
-export {Utils};
-export type {CodeData, CodeDataFunc};
+export { Utils };
+export type { CodeData, CodeDataFunc };