diff --git a/simple-mind-map/src/core/render/node/Shape.js b/simple-mind-map/src/core/render/node/Shape.js index a9ff7816..217a8ae6 100644 --- a/simple-mind-map/src/core/render/node/Shape.js +++ b/simple-mind-map/src/core/render/node/Shape.js @@ -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(`