mirror of
https://github.com/waiting0324/obsidian-code-note.git
synced 2026-07-22 07:30:24 +00:00
細節樣式調整
This commit is contained in:
Waiting
parent
2675392b97
commit
e11caeeaed
3 changed files with 97 additions and 90 deletions
|
|
@ -24,7 +24,7 @@ class CodeBlockShape {
|
||||||
let codeTextLines = codeText.split('\n')
|
let codeTextLines = codeText.split('\n')
|
||||||
|
|
||||||
// 獲取 代碼塊所需高度
|
// 獲取 代碼塊所需高度
|
||||||
let blockHeight = myUtils.getTextHeight(codeDataFunc.code) + 20;
|
let blockHeight = myUtils.getTextHeight(codeDataFunc.code) + 30;
|
||||||
|
|
||||||
// 計算代碼塊所需寬度
|
// 計算代碼塊所需寬度
|
||||||
let blockWidth = 0
|
let blockWidth = 0
|
||||||
|
|
|
||||||
180
src/Graph.ts
180
src/Graph.ts
|
|
@ -11,113 +11,117 @@ const edge = new Edge()
|
||||||
|
|
||||||
export let initGraph = function (codeBlocks: String[]) {
|
export let initGraph = function (codeBlocks: String[]) {
|
||||||
|
|
||||||
// 創建畫布
|
// 創建畫布
|
||||||
const graph = new Graph({
|
const graph = new Graph({
|
||||||
container: <HTMLElement>document.getElementById('container'),
|
container: <HTMLElement>document.getElementById('container'),
|
||||||
width: 2200,
|
width: 3000,
|
||||||
height: 1200,
|
height: 5000,
|
||||||
background: {
|
autoResize: true,
|
||||||
color: '#fffbe6', // 设置画布背景颜色
|
background: {
|
||||||
},
|
color: '#ffffff', // 设置画布背景颜色
|
||||||
grid: {
|
},
|
||||||
size: 10, // 网格大小 10px
|
grid: {
|
||||||
visible: true, // 渲染网格背景
|
size: 10, // 網格大小 10px
|
||||||
},
|
visible: true, // 渲染網格背景
|
||||||
});
|
},
|
||||||
|
});
|
||||||
|
|
||||||
// 將 代碼塊字串 集合 解析成 CodeData 對象集合，並將相同 className 的對象進行合併
|
// 將 代碼塊字串 集合 解析成 CodeData 對象集合，並將相同 className 的對象進行合併
|
||||||
let codeDatas: CodeData[] = []
|
let codeDatas: CodeData[] = []
|
||||||
codeBlocks.forEach((codeBlock: string) => {
|
codeBlocks.forEach((codeBlock: string) => {
|
||||||
let codeData: CodeData = myUtils.parseCodeData(codeBlock)
|
let codeData: CodeData = myUtils.parseCodeData(codeBlock)
|
||||||
codeDatas.push(codeData)
|
codeDatas.push(codeData)
|
||||||
})
|
})
|
||||||
codeDatas = myUtils.mergeCodeDatas(codeDatas)
|
codeDatas = myUtils.mergeCodeDatas(codeDatas)
|
||||||
|
|
||||||
|
|
||||||
// 將 CodeData 對象列表 繪製成 類圖形、代碼塊圖形
|
// 將 CodeData 對象列表 繪製成 類圖形、代碼塊圖形
|
||||||
for (const codeData of codeDatas) {
|
for (const codeData of codeDatas) {
|
||||||
|
|
||||||
// 將 類圖形、代碼塊圖形 加入到 畫布 中
|
// 將 類圖形、代碼塊圖形 加入到 畫布 中
|
||||||
let funcNames = codeData.funcs.map(item => item.name)
|
let funcNames = codeData.funcs.map(item => item.name)
|
||||||
graph.addNode(classShape.createClassShape(codeData.className, funcNames))
|
graph.addNode(classShape.createClassShape(codeData.className, funcNames))
|
||||||
graph.addNodes(codeBlockShape.createCodeBlockShape(codeData))
|
graph.addNodes(codeBlockShape.createCodeBlockShape(codeData))
|
||||||
|
|
||||||
// 創建 函數名稱 與 代碼塊圖形 的 連線
|
// 創建 函數名稱 與 代碼塊圖形 的 連線
|
||||||
graph.addEdges(edge.createFuncToCodeEdges(codeData))
|
graph.addEdges(edge.createFuncToCodeEdges(codeData))
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 繪製 CodeData 中的 函數調用 連線
|
// 繪製 CodeData 中的 函數調用 連線
|
||||||
for (const codeData of codeDatas) {
|
for (const codeData of codeDatas) {
|
||||||
graph.addEdges(edge.createFuncCallEdges(codeData))
|
graph.addEdges(edge.createFuncCallEdges(codeData))
|
||||||
}
|
}
|
||||||
|
|
||||||
// 綁定 開啟/關閉 代碼塊圖形 事件
|
// 綁定 開啟/關閉 代碼塊圖形 事件
|
||||||
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'))
|
|
||||||
let toggleText = e.currentTarget.parentNode.childNodes[3].children[0]
|
|
||||||
|
|
||||||
// 如果當前 代碼塊圖形 正在顯示，則關閉。反之則開啟
|
// 獲取 代碼塊圖形、開關文字 對象
|
||||||
if (codeBlock.getProp().visible) {
|
let codeBlock = graph.getCellById(e.currentTarget.getAttribute('target-code-block'))
|
||||||
codeBlock.hide()
|
let toggleText = e.currentTarget.parentNode.childNodes[3].children[0]
|
||||||
toggleText.textContent = '+'
|
|
||||||
toggleText.setAttribute('dy', '0.3em')
|
|
||||||
} else {
|
|
||||||
|
|
||||||
// 計算 代碼塊 顯示位置
|
// 如果當前 代碼塊圖形 正在顯示，則關閉。反之則開啟
|
||||||
const intervalX = 200
|
if (codeBlock.getProp().visible) {
|
||||||
const posX = e.offsetX + intervalX
|
codeBlock.hide()
|
||||||
const posY = e.offsetY - (codeBlock.getProp().size.height / 2)
|
toggleText.textContent = '+'
|
||||||
codeBlock.prop("position", {x: posX, y: posY})
|
toggleText.setAttribute('dy', '0.3em')
|
||||||
|
} else {
|
||||||
|
|
||||||
codeBlock.show()
|
// 計算 代碼塊 顯示位置
|
||||||
toggleText.textContent = '-'
|
const intervalX = 100
|
||||||
toggleText.setAttribute('dy', '0.2em')
|
const posX = e.offsetX + intervalX
|
||||||
}
|
const posY = e.offsetY - (codeBlock.getProp().size.height / 2)
|
||||||
})
|
codeBlock.prop("position", {x: posX, y: posY})
|
||||||
|
|
||||||
// 最大的 類圖形 的寬度
|
codeBlock.show()
|
||||||
let maxClassShapeWidth = 0;
|
toggleText.textContent = '-'
|
||||||
// 所有的 類圖形 集合
|
toggleText.setAttribute('dy', '0.3em')
|
||||||
let classShapes: Cell[] = [];
|
}
|
||||||
|
})
|
||||||
|
|
||||||
// 遍歷 所有的圖形
|
// 最大的 類圖形 的寬度
|
||||||
for (const node of graph.getCells()) {
|
let maxClassShapeWidth = 0;
|
||||||
|
// 所有的 類圖形 集合
|
||||||
|
let classShapes: Cell[] = [];
|
||||||
|
|
||||||
// 默認隱藏所有的 代碼塊
|
// 遍歷 所有的圖形
|
||||||
if (node.id.startsWith(CODE_BLOCK_ID_TAG)) {
|
for (const node of graph.getCells()) {
|
||||||
node.hide()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 計算 類圖形 最大寬度、加入到集合中
|
// 默認隱藏所有的 代碼塊
|
||||||
if (node.id.startsWith(CLASS_SHAPE_ID_TAG)) {
|
if (node.id.startsWith(CODE_BLOCK_ID_TAG)) {
|
||||||
maxClassShapeWidth = Math.max(maxClassShapeWidth, node.getProp().size.width)
|
node.hide()
|
||||||
classShapes.push(node)
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
// 計算 類圖形 最大寬度、加入到集合中
|
||||||
* 計算 類圖形 的 座標
|
if (node.id.startsWith(CLASS_SHAPE_ID_TAG)) {
|
||||||
*/
|
maxClassShapeWidth = Math.max(maxClassShapeWidth, node.getProp().size.width)
|
||||||
// 左側保留寬度
|
classShapes.push(node)
|
||||||
const marginLeftWidth = 100
|
}
|
||||||
// 類圖形的 Y 座標
|
}
|
||||||
let curY = 200
|
|
||||||
// 多個 類圖形 的 上下間格
|
|
||||||
const intervalY = 150
|
|
||||||
// 所有 類圖形 的 中線 X 座標
|
|
||||||
const midX = marginLeftWidth + (maxClassShapeWidth / 2)
|
|
||||||
for (const classShape of classShapes) {
|
|
||||||
|
|
||||||
// 計算 類圖形 的 左上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 座標 = 當前 類圖形 高度 + 間隔
|
// 計算 類圖形 的 左上X 座標，並設置
|
||||||
curY = curY + classShape.getProp().size.height + intervalY
|
const posX = midX - (classShape.getProp().size.width / 2)
|
||||||
}
|
classShape.prop("position", {x: posX, y: curY})
|
||||||
|
|
||||||
|
// 下個 類圖形 的 Y 座標 = 當前 類圖形 高度 + 間隔
|
||||||
|
curY = curY + classShape.getProp().size.height + intervalY
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ class Utils {
|
||||||
* 計算字串寬度
|
* 計算字串寬度
|
||||||
*/
|
*/
|
||||||
tCanvas: any = null;
|
tCanvas: any = null;
|
||||||
|
|
||||||
public getTextWidth(text: string, font: string) {
|
public getTextWidth(text: string, font: string) {
|
||||||
// re-use canvas object for better performance
|
// re-use canvas object for better performance
|
||||||
const canvas = this.tCanvas || (this.tCanvas = document.createElement('canvas'));
|
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};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue