mirror of
https://github.com/waiting0324/obsidian-code-note.git
synced 2026-07-22 07:30:24 +00:00
ClassShape 增加左側兩連接桩
This commit is contained in:
Waiting
parent
256331c948
commit
95c3717de5
2 changed files with 197 additions and 168 deletions
|
|
@ -1,5 +1,5 @@
|
|||
import { Graph } from '@antv/x6';
|
||||
import { Utils } from './Utils'
|
||||
import {Graph} from '@antv/x6';
|
||||
import {Utils} from './Utils'
|
||||
|
||||
const myUtils = new Utils()
|
||||
|
||||
|
|
@ -7,186 +7,217 @@ const myUtils = new Utils()
|
|||
* 註冊 類聲明 中 方法名稱位置 計算函數
|
||||
*/
|
||||
Graph.registerPortLayout(
|
||||
'classFuncPosition',
|
||||
(portsPositionArgs, elemBBox) => {
|
||||
return portsPositionArgs.map((_, index) => {
|
||||
return {
|
||||
position: {
|
||||
x: 0,
|
||||
y: (index + 1) * elemBBox.height,
|
||||
},
|
||||
angle: 0,
|
||||
}
|
||||
})
|
||||
},
|
||||
//true,
|
||||
'classFuncPosition',
|
||||
(portsPositionArgs, elemBBox) => {
|
||||
return portsPositionArgs.map((_, index) => {
|
||||
return {
|
||||
position: {
|
||||
x: 0,
|
||||
y: (index + 1) * elemBBox.height,
|
||||
},
|
||||
angle: 0,
|
||||
}
|
||||
})
|
||||
},
|
||||
//true,
|
||||
)
|
||||
|
||||
/**
|
||||
* 類聲明 圖形定義
|
||||
*/
|
||||
Graph.registerNode(
|
||||
'clazz-shape',
|
||||
{
|
||||
// 最上層 class 名稱
|
||||
inherit: 'rect',
|
||||
markup: [
|
||||
{
|
||||
tagName: 'rect',
|
||||
selector: 'body',
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'label',
|
||||
},
|
||||
],
|
||||
attrs: {
|
||||
rect: {
|
||||
strokeWidth: 1,
|
||||
stroke: '#e5885c',
|
||||
fill: '#fd9a6c',
|
||||
},
|
||||
label: {
|
||||
fontWeight: 'bold',
|
||||
fill: '#ffffff',
|
||||
fontSize: 14,
|
||||
textAnchor: 'middle',
|
||||
textVerticalAnchor: 'middle'
|
||||
},
|
||||
},
|
||||
// 該 class 所屬的方法列表
|
||||
ports: {
|
||||
groups: {
|
||||
list: {
|
||||
position: 'classFuncPosition',
|
||||
markup: [
|
||||
{
|
||||
tagName: 'rect',
|
||||
selector: 'func',
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'funcName',
|
||||
},
|
||||
{
|
||||
tagName: 'circle',
|
||||
selector: 'toggle'
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'toggleText'
|
||||
}
|
||||
],
|
||||
attrs: {
|
||||
func: {
|
||||
strokeWidth: 1,
|
||||
stroke: '#e5885c',
|
||||
fill: '#FFFFFF',
|
||||
},
|
||||
funcName: {
|
||||
fontSize: 13,
|
||||
textAnchor: 'middle',
|
||||
textVerticalAnchor: 'middle'
|
||||
},
|
||||
toggle: {
|
||||
r: 7,
|
||||
stroke: '#b2bec3',
|
||||
strokeWidth: 2,
|
||||
fill: '#fff',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
toggleText: {
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
fill: '#b2bec3',
|
||||
textAnchor: 'middle',
|
||||
textVerticalAnchor: 'middle',
|
||||
'pointer-events': 'none', // 避免按鈕不靈敏
|
||||
cursor: 'pointer',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
true,
|
||||
'clazz-shape',
|
||||
{
|
||||
// 最上層 class 名稱
|
||||
inherit: 'rect',
|
||||
markup: [
|
||||
{
|
||||
tagName: 'rect',
|
||||
selector: 'body',
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'label',
|
||||
},
|
||||
],
|
||||
attrs: {
|
||||
rect: {
|
||||
strokeWidth: 1,
|
||||
stroke: '#e5885c',
|
||||
fill: '#fd9a6c',
|
||||
},
|
||||
label: {
|
||||
fontWeight: 'bold',
|
||||
fill: '#ffffff',
|
||||
fontSize: 14,
|
||||
textAnchor: 'middle',
|
||||
textVerticalAnchor: 'middle'
|
||||
},
|
||||
},
|
||||
// 該 class 所屬的方法列表
|
||||
ports: {
|
||||
groups: {
|
||||
list: {
|
||||
position: 'classFuncPosition',
|
||||
markup: [
|
||||
{
|
||||
tagName: 'rect',
|
||||
selector: 'func',
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'funcName',
|
||||
},
|
||||
{
|
||||
tagName: 'circle',
|
||||
selector: 'funcInCircle'
|
||||
},
|
||||
{
|
||||
tagName: 'circle',
|
||||
selector: 'funcOutCircle'
|
||||
},
|
||||
{
|
||||
tagName: 'circle',
|
||||
selector: 'toggle'
|
||||
},
|
||||
{
|
||||
tagName: 'text',
|
||||
selector: 'toggleText'
|
||||
}
|
||||
],
|
||||
attrs: {
|
||||
func: {
|
||||
strokeWidth: 1,
|
||||
stroke: '#e5885c',
|
||||
fill: '#FFFFFF',
|
||||
},
|
||||
funcName: {
|
||||
fontSize: 13,
|
||||
textAnchor: 'middle',
|
||||
textVerticalAnchor: 'middle'
|
||||
},
|
||||
funcInCircle: {
|
||||
r: 5,
|
||||
stroke: '#efab7c',
|
||||
strokeWidth: 1,
|
||||
fill: '#fff'
|
||||
},
|
||||
funcOutCircle: {
|
||||
r: 5,
|
||||
stroke: '#efab7c',
|
||||
strokeWidth: 1,
|
||||
fill: '#fff'
|
||||
},
|
||||
toggle: {
|
||||
r: 7,
|
||||
stroke: '#b2bec3',
|
||||
strokeWidth: 2,
|
||||
fill: '#fff',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
toggleText: {
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
fill: '#b2bec3',
|
||||
textAnchor: 'middle',
|
||||
textVerticalAnchor: 'middle',
|
||||
'pointer-events': 'none', // 避免按鈕不靈敏
|
||||
cursor: 'pointer',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
true,
|
||||
)
|
||||
|
||||
class ClassShape {
|
||||
|
||||
/**
|
||||
* 根據 類名、方法名稱集合 創建 類聲明圖形
|
||||
* @param className 類名
|
||||
* @param funcNames 方法名稱集合
|
||||
* @returns 類聲明圖形
|
||||
*/
|
||||
public createClassShape(className: string, funcNames: string[]) {
|
||||
/**
|
||||
* 根據 類名、方法名稱集合 創建 類聲明圖形
|
||||
* @param className 類名
|
||||
* @param funcNames 方法名稱集合
|
||||
* @returns 類聲明圖形
|
||||
*/
|
||||
public createClassShape(className: string, funcNames: string[]) {
|
||||
|
||||
const height = 30
|
||||
const height = 30
|
||||
|
||||
// 計算 類聲明 圖形寬度
|
||||
let maxWidth = 100
|
||||
maxWidth = Math.max(maxWidth, myUtils.getTextWidth(className, "14px bold") + 60)
|
||||
funcNames.forEach((funcName: string) => {
|
||||
maxWidth = Math.max(maxWidth, myUtils.getTextWidth(funcName, "13px") + 20)
|
||||
})
|
||||
// 計算 類聲明 圖形寬度
|
||||
let maxWidth = 100
|
||||
maxWidth = Math.max(maxWidth, myUtils.getTextWidth(className, "14px bold") + 60)
|
||||
funcNames.forEach((funcName: string) => {
|
||||
maxWidth = Math.max(maxWidth, myUtils.getTextWidth(funcName, "13px") + 20)
|
||||
})
|
||||
|
||||
// 定義頂部類名稱方塊
|
||||
let classShape = {
|
||||
"id": myUtils.getClassShapeId(className, '', 'class'),
|
||||
"shape": 'clazz-shape',
|
||||
"label": className,
|
||||
"width": maxWidth,
|
||||
"height": height,
|
||||
"fontSize": 14,
|
||||
"position": {
|
||||
"x": 100,
|
||||
"y": 100
|
||||
},
|
||||
"ports": [{}]
|
||||
}
|
||||
classShape.ports = []
|
||||
// 定義頂部類名稱方塊
|
||||
let classShape = {
|
||||
"id": myUtils.getClassShapeId(className, '', 'class'),
|
||||
"shape": 'clazz-shape',
|
||||
"label": className,
|
||||
"width": maxWidth,
|
||||
"height": height,
|
||||
"fontSize": 14,
|
||||
"position": {
|
||||
"x": 100,
|
||||
"y": 100
|
||||
},
|
||||
"ports": [{}]
|
||||
}
|
||||
classShape.ports = []
|
||||
|
||||
|
||||
// 定義下方函數名稱方塊
|
||||
funcNames.forEach((funcName: string) => {
|
||||
// 定義下方函數名稱方塊
|
||||
funcNames.forEach((funcName: string) => {
|
||||
|
||||
let port = {
|
||||
"id": myUtils.getClassShapeId(className, funcName, 'function'),
|
||||
"group": "list",
|
||||
"attrs": {
|
||||
"func": {
|
||||
width: maxWidth,
|
||||
height: height,
|
||||
},
|
||||
"funcName": {
|
||||
ref: 'func',
|
||||
refX: '50%',
|
||||
refY: '50%',
|
||||
text: funcName,
|
||||
},
|
||||
"toggle": {
|
||||
ref: 'func',
|
||||
refDx: 0,
|
||||
refY: 0.5,
|
||||
event: 'toggle:codeBlock',
|
||||
targetCodeBlock: myUtils.getCodeBlockShapeId(className, funcName),
|
||||
},
|
||||
"toggleText": {
|
||||
ref: 'toggle',
|
||||
refX: 0.5,
|
||||
refY: 0.5,
|
||||
text: '+',
|
||||
event: 'toggle:codeBlock',
|
||||
targetCodeBlock: myUtils.getCodeBlockShapeId(className, funcName),
|
||||
}
|
||||
}
|
||||
}
|
||||
classShape.ports.push(port)
|
||||
})
|
||||
// 代碼塊 連接桩
|
||||
let port = {
|
||||
"id": myUtils.getClassShapeId(className, funcName, 'function'),
|
||||
"group": "list",
|
||||
"attrs": {
|
||||
"func": {
|
||||
width: maxWidth,
|
||||
height: height + 10,
|
||||
},
|
||||
"funcName": {
|
||||
ref: 'func',
|
||||
refX: '50%',
|
||||
refY: '50%',
|
||||
text: funcName,
|
||||
},
|
||||
"funcInCircle": {
|
||||
ref: 'func',
|
||||
refX: 0,
|
||||
refY: 0.3,
|
||||
},
|
||||
"funcOutCircle": {
|
||||
ref: 'func',
|
||||
refX: 0,
|
||||
refY: 0.7,
|
||||
},
|
||||
"toggle": {
|
||||
ref: 'func',
|
||||
refDx: 0,
|
||||
refY: 0.5,
|
||||
event: 'toggle:codeBlock',
|
||||
targetCodeBlock: myUtils.getCodeBlockShapeId(className, funcName),
|
||||
},
|
||||
"toggleText": {
|
||||
ref: 'toggle',
|
||||
refX: 0.5,
|
||||
refY: 0.5,
|
||||
text: '+',
|
||||
event: 'toggle:codeBlock',
|
||||
targetCodeBlock: myUtils.getCodeBlockShapeId(className, funcName),
|
||||
}
|
||||
}
|
||||
}
|
||||
classShape.ports.push(port)
|
||||
})
|
||||
|
||||
return classShape
|
||||
}
|
||||
return classShape
|
||||
}
|
||||
}
|
||||
|
||||
export { ClassShape }
|
||||
export {ClassShape}
|
||||
|
|
|
|||
|
|
@ -57,8 +57,6 @@ export let initGraph = function (codeBlocks: String[]) {
|
|||
// @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]
|
||||
|
|
|
|||
Loading…
Reference in a new issue