細節樣式調整

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

src/Graph.ts

@@ -14,14 +14,15 @@ export let initGraph = function (codeBlocks: String[]) {
 	// 創建畫布
 	const graph = new Graph({
 		container: <HTMLElement>document.getElementById('container'),
-        width: 2200,
-        height: 1200,
+		width: 3000,
+		height: 5000,
+		autoResize: true,
 		background: {
-            color: '#fffbe6', // 设置画布背景颜色
+			color: '#ffffff', // 设置画布背景颜色
 		},
 		grid: {
-            size: 10,      // 网格大小 10px
-            visible: true, // 渲染网格背景
+			size: 10,      // 網格大小 10px
+			visible: true, // 渲染網格背景
 		},
 	});
 
@@ -53,7 +54,10 @@ export let initGraph = function (codeBlocks: String[]) {
 	}
 
 	// 綁定 開啟/關閉 代碼塊圖形 事件
-    graph.on('toggle:codeBlock', ({e, node}) => {
+	// @ts-ignore
+	graph.on('toggle:codeBlock', ({e}) => {
+
+		console.dir(typeof e)
 
 		// 獲取 代碼塊圖形、開關文字 對象
 		let codeBlock = graph.getCellById(e.currentTarget.getAttribute('target-code-block'))
@@ -67,14 +71,14 @@ export let initGraph = function (codeBlocks: String[]) {
 		} else {
 
 			// 計算 代碼塊 顯示位置
-            const intervalX = 200
+			const intervalX = 100
 			const posX = e.offsetX + intervalX
 			const posY = e.offsetY - (codeBlock.getProp().size.height / 2)
 			codeBlock.prop("position", {x: posX, y: posY})
 
 			codeBlock.show()
 			toggleText.textContent = '-'
-            toggleText.setAttribute('dy', '0.2em')
+			toggleText.setAttribute('dy', '0.3em')
 		}
 	})
 

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};
+