coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 10:27:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix：修复大边框尺寸的渲染问题，包括重叠，内容不居中

Browse Source
This commit is contained in:
wanglin2 2023-08-28 08:49:45 +08:00
parent 1b0646af6d
commit e36e238c2f
1 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
simple-mind-map/src/core/render/node/Shape.js
View File

@ -62,14 +62,9 @@ export default class Shape {
// 创建形状节点
createShape() {
const shape = this.node.getShape()
const borderWidth = this.node.getBorderWidth()
let { width, height } = this.node
width -= borderWidth
height -= borderWidth
let node = null
// 矩形
if (shape === CONSTANTS.SHAPE.RECTANGLE) {
// node = new Rect().size(width, height)
node = this.createRect()
} else if (shape === CONSTANTS.SHAPE.DIAMOND) {
// 菱形
@ -99,9 +94,21 @@ export default class Shape {
return node
}
// 创建矩形TODO
createRect() {
// 获取节点减去边框宽度的尺寸
getNodeSize() {
const borderWidth = this.node.getBorderWidth()
let { width, height } = this.node
width -= borderWidth
height -= borderWidth
return {
width,
height
}
}
// 创建矩形
createRect() {
let { width, height } = this.getNodeSize()
let borderRadius = this.node.style.merge('borderRadius')
return new Path().plot(`
M${borderRadius},0
@ -121,7 +128,7 @@ export default class Shape {
// 创建菱形
createDiamond() {
let { width, height } = this.node
let { width, height } = this.getNodeSize()
let halfWidth = width / 2
let halfHeight = height / 2
let topX = halfWidth
@ -144,7 +151,7 @@ export default class Shape {
createParallelogram() {
let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node
let { width, height } = this.getNodeSize()
return new Polygon().plot([
[paddingX, 0],
[width, 0],
@ -155,7 +162,7 @@ export default class Shape {
// 创建圆角矩形
createRoundedRectangle() {
let { width, height } = this.node
let { width, height } = this.getNodeSize()
let halfHeight = height / 2
return new Path().plot(`
M${halfHeight},0
@ -169,7 +176,7 @@ export default class Shape {
// 创建八角矩形
createOctagonalRectangle() {
let w = 5
let { width, height } = this.node
let { width, height } = this.getNodeSize()
return new Polygon().plot([
[0, w],
[w, 0],
@ -186,7 +193,7 @@ export default class Shape {
createOuterTriangularRectangle() {
let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node
let { width, height } = this.getNodeSize()
return new Polygon().plot([
[paddingX, 0],
[width - paddingX, 0],
@ -201,7 +208,7 @@ export default class Shape {
createInnerTriangularRectangle() {
let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node
let { width, height } = this.getNodeSize()
return new Polygon().plot([
[0, 0],
[width, 0],
@ -214,7 +221,7 @@ export default class Shape {
// 创建椭圆
createEllipse() {
let { width, height } = this.node
let { width, height } = this.getNodeSize()
let halfWidth = width / 2
let halfHeight = height / 2
return new Path().plot(`
@ -227,7 +234,7 @@ export default class Shape {
// 创建圆
createCircle() {
let { width, height } = this.node
let { width, height } = this.getNodeSize()
let halfWidth = width / 2
let halfHeight = height / 2
return new Path().plot(`