From 65e0f28d1a42bda7901f49c0806b51beb376a2c6 Mon Sep 17 00:00:00 2001 From: Waiting Date: Tue, 14 Mar 2023 23:42:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=8C=87=E5=AE=9A=E7=A8=8B?= =?UTF-8?q?=E5=BC=8F=E8=AA=9E=E8=A8=80=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/CodeBlockShape.ts | 12 +++++++++--- src/Graph.ts | 6 +++--- src/SourceCodeView.ts | 5 +++-- src/Utils.ts | 16 +++++++++++----- src/main.ts | 13 +++++++------ 5 files changed, 33 insertions(+), 19 deletions(-) diff --git a/src/CodeBlockShape.ts b/src/CodeBlockShape.ts index 5ac6a0c..fec38aa 100644 --- a/src/CodeBlockShape.ts +++ b/src/CodeBlockShape.ts @@ -1,8 +1,13 @@ import hljs from 'highlight.js'; -import {Utils, CodeData} from './Utils' +import {CodeData, Utils} from './Utils' const myUtils = new Utils() +type CodeBlockContent = { + language: string, // 程式語言 + code: string // 具體代碼 +} + class CodeBlockShape { /** @@ -48,7 +53,7 @@ class CodeBlockShape { }, html() { const wrap = document.createElement('div') - wrap.innerHTML = '
' + hljs.highlight(codeText, {language: 'java'}).value + '
' + wrap.innerHTML = '
' + hljs.highlight(codeText, {language: codeDataFunc.language}).value + '
' return wrap }, } @@ -62,5 +67,6 @@ class CodeBlockShape { } +export {CodeBlockShape}; +export type {CodeBlockContent}; -export {CodeBlockShape} diff --git a/src/Graph.ts b/src/Graph.ts index 1dfab3d..51f48a6 100644 --- a/src/Graph.ts +++ b/src/Graph.ts @@ -1,5 +1,5 @@ import {Cell, Graph, Shape} from '@antv/x6'; -import {CodeBlockShape} from './CodeBlockShape'; +import {CodeBlockContent, CodeBlockShape} from './CodeBlockShape'; import {ClassShape} from './ClassShape'; import {CLASS_SHAPE_ID_TAG, CODE_BLOCK_ID_TAG, CodeData, Utils} from './Utils'; import {Edge} from './Edge' @@ -9,7 +9,7 @@ const codeBlockShape = new CodeBlockShape() const classShape = new ClassShape() const edge = new Edge() -export let initGraph = function (codeBlocks: String[]) { +export let initGraph = function (codeBlocks: CodeBlockContent[]) { // 創建畫布 const graph = new Graph({ @@ -27,7 +27,7 @@ export let initGraph = function (codeBlocks: String[]) { // 將 代碼塊字串 集合 解析成 CodeData 對象集合，並將相同 className 的對象進行合併 let codeDatas: CodeData[] = [] - codeBlocks.forEach((codeBlock: string) => { + codeBlocks.forEach((codeBlock: CodeBlockContent) => { let codeData: CodeData = myUtils.parseCodeData(codeBlock) codeDatas.push(codeData) }) diff --git a/src/SourceCodeView.ts b/src/SourceCodeView.ts index c63649b..d1f27e3 100644 --- a/src/SourceCodeView.ts +++ b/src/SourceCodeView.ts @@ -1,13 +1,14 @@ import {ItemView, WorkspaceLeaf} from "obsidian"; import {initGraph} from "./Graph"; import {SOURCE_CODE_VIEW_TYPE} from "./main"; +import {CodeBlockContent} from "./CodeBlockShape"; export default class SourceCodeView extends ItemView { // 代碼塊內容 集合 - codeBlocks: string[] + codeBlocks: CodeBlockContent[] - constructor(codeBlocks: string[], leaf: WorkspaceLeaf) { + constructor(codeBlocks: CodeBlockContent[], leaf: WorkspaceLeaf) { super(leaf); this.codeBlocks = codeBlocks; } diff --git a/src/Utils.ts b/src/Utils.ts index 5d1dd03..2b49407 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -1,4 +1,5 @@ import hljs from "highlight.js"; +import {CodeBlockContent} from "./CodeBlockShape"; type CodeData = { className: string, // 類名稱 @@ -6,8 +7,9 @@ type CodeData = { } type CodeDataFunc = { + language: string, // 程式語言 name: string, // 函數名稱 - code: string // 代碼塊字串 + code: string, // 代碼塊字串 calls: CodeDataFuncCall[] // 調用的函數集合 } @@ -56,17 +58,20 @@ class Utils { /** * 根據 代碼塊字串 解析出 CodeData 對象 - * @param codeBlockText 代碼塊字串 * @returns CodeData 對象 + * @param codeBlockContent 代碼塊內容 */ - public parseCodeData(codeBlockText: string): CodeData { + public parseCodeData(codeBlockContent: CodeBlockContent): CodeData { + + const lang = codeBlockContent.language; + const content = codeBlockContent.code; // 類名、方法名 的 標示符 const classTag = '@class' const functionTag = '@function' const callTag = '@call' - let codeLines = codeBlockText.split('\n') + let codeLines = content.split('\n') // 取得 註釋塊 的代碼 let commentLines = [] @@ -119,8 +124,9 @@ class Utils { let result: CodeData = { className: className, funcs: [{ + language: lang, name: functionName, - code: codeBlockText, + code: content, calls: calls }] } diff --git a/src/main.ts b/src/main.ts index 9e45ba5..1c70a7f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,12 +1,13 @@ import {Plugin, Workspace, WorkspaceLeaf} from 'obsidian'; import SourceCodeView from "./SourceCodeView"; +import {CodeBlockContent} from "./CodeBlockShape"; export const SOURCE_CODE_VIEW_TYPE = 'source-code-view' export default class SourceCodeViewPlugin extends Plugin { // Obsidian 中 Markdown 的 代碼塊內容 集合 - codeBlocks: string[] = [] + codeBlockContents: CodeBlockContent[] = [] /** * 載入插件時，註冊相關組件 @@ -16,7 +17,7 @@ export default class SourceCodeViewPlugin extends Plugin { // 註冊 Obsidian 的 View this.registerView( SOURCE_CODE_VIEW_TYPE, - (leaf: WorkspaceLeaf) => (new SourceCodeView(this.codeBlocks, leaf)) + (leaf: WorkspaceLeaf) => (new SourceCodeView(this.codeBlockContents, leaf)) ); // 註冊 Obsidian 左側的按鈕 @@ -44,20 +45,20 @@ export default class SourceCodeViewPlugin extends Plugin { this.app.vault.process(activeFile, (data) => { // 清理數據 - this.codeBlocks = [] + this.codeBlockContents = [] // 獲取文件內所有的 Markdown 代碼塊 const regex = /```(\w+)\s([\s\S]*?)```/gm; let match; while ((match = regex.exec(data)) !== null) { const lang = match[1]; // 程式語言 - const codeBlockData = match[2]; // 代碼塊內容 - this.codeBlocks.push(codeBlockData) + const content = match[2]; // 代碼塊內容 + this.codeBlockContents.push({language: lang, code: content}) } // 開啟分頁 const preview = this.app.workspace.getLeaf('split', 'vertical') - const mmPreview = new SourceCodeView(this.codeBlocks, preview); + const mmPreview = new SourceCodeView(this.codeBlockContents, preview); preview.open(mmPreview) // 不更改文件內容