mind-map/simple-mind-map/src/Shape.js

/** 
 * @Author: 王林 
 * @Date: 2022-08-22 21:32:50 
 * @Desc: 节点形状类 
 */
 export default class Shape {
    constructor(node) {
        this.node = node
    }

    /** 
     * @Author: 王林 
     * @Date: 2022-08-17 22:32:32 
     * @Desc: 形状需要的padding 
     */
    getShapePadding(width, height, paddingX, paddingY) {
        const shape = this.node.getShape()
        const defaultPaddingX = 15
        const defaultPaddingY = 5
        const actWidth = width + paddingX * 2
        const actHeight = height + paddingY * 2
        const actOffset = Math.abs(actWidth - actHeight)
        switch (shape) {
            case 'roundedRectangle':
                return {
                    paddingX: height > width ? (height - width) / 2 : 0,
                    paddingY: 0
                }  
            case 'diamond':
                return {
                    paddingX: width / 2,
                    paddingY: height / 2
                }
            case 'parallelogram':
                return {
                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
                    paddingY: 0
                }
            case 'outerTriangularRectangle':
                return {
                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
                    paddingY: 0
                }
            case 'innerTriangularRectangle':
                return {
                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
                    paddingY: 0
                }
            case 'ellipse':
                return {
                    paddingX: paddingX <= 0 ? defaultPaddingX : 0,
                    paddingY: paddingY <= 0 ? defaultPaddingY : 0
                }
            case 'circle':
                return {
                    paddingX: actHeight > actWidth ? actOffset / 2 : 0,
                    paddingY: actHeight < actWidth ? actOffset / 2 : 0,
                }
            default:
                return {
                    paddingX: 0,
                    paddingY: 0
                }
        }
    }

    /** 
     * @Author: 王林 
     * @Date: 2022-08-17 22:22:53 
     * @Desc: 创建形状节点 
     */
    createShape() {
        const shape = this.node.getShape()
        let { width, height } = this.node
        let node = null
        // 矩形
        if (shape === 'rectangle') {
            node = this.node.group.rect(width, height)
        } else if (shape === 'diamond') {
            // 菱形
            node = this.createDiamond()
        } else if (shape === 'parallelogram') {
            // 平行四边形
            node = this.createParallelogram()
        } else if (shape === 'roundedRectangle') {
            // 圆角矩形
            node = this.createRoundedRectangle()
        } else if (shape === 'octagonalRectangle') {
            // 八角矩形
            node = this.createOctagonalRectangle()
        } else if (shape === 'outerTriangularRectangle') {
            // 外三角矩形
            node = this.createOuterTriangularRectangle()
        } else if (shape === 'innerTriangularRectangle') {
            // 内三角矩形
            node = this.createInnerTriangularRectangle()
        } else if (shape === 'ellipse') {
            // 椭圆
            node = this.createEllipse()
        } else if (shape === 'circle') {
            // 圆
            node = this.createCircle()
        }
        return node
    }

    /** 
     * @Author: 王林 
     * @Date: 2022-09-04 09:08:54 
     * @Desc: 创建菱形 
     */
    createDiamond() {
        let { width, height } = this.node
        let halfWidth = width / 2
        let halfHeight = height / 2
        let topX = halfWidth
        let topY = 0
        let rightX = width
        let rightY = halfHeight
        let bottomX = halfWidth
        let bottomY = height
        let leftX = 0
        let leftY = halfHeight
        return this.node.group.polygon(`
            ${topX}, ${topY}
            ${rightX}, ${rightY}
            ${bottomX}, ${bottomY}
            ${leftX}, ${leftY}
        `)
    }

    /** 
     * @Author: 王林 
     * @Date: 2022-09-03 16:14:12 
     * @Desc: 创建平行四边形 
     */
    createParallelogram() {
        let { paddingX } = this.node.getPaddingVale()
        paddingX = paddingX || this.node.shapePadding.paddingX
        let { width, height } = this.node
        return this.node.group.polygon(`
            ${paddingX}, ${0}
            ${width}, ${0}
            ${width - paddingX}, ${height}
            ${0}, ${height}
        `)
    }

    /** 
     * @Author: 王林 
     * @Date: 2022-09-03 16:50:23 
     * @Desc: 创建圆角矩形 
     */
    createRoundedRectangle() {
        let { width, height } = this.node
        let halfHeight = height / 2
        return this.node.group.path(`
            M${halfHeight},0
            L${width - halfHeight},0
            A${height / 2},${height / 2} 0 0,1 ${width - halfHeight},${height} 
            L${halfHeight},${height}
            A${height / 2},${height / 2} 0 0,1 ${halfHeight},${0}
        `)
    }

    /** 
     * javascript comment 
     * @Author: 王林 
     * @Date: 2022-09-12 16:14:08 
     * @Desc: 创建八角矩形 
     */
    createOctagonalRectangle() {
        let w = 5
        let { width, height } = this.node
        return this.node.group.polygon(`
            ${0}, ${w}
            ${w}, ${0}
            ${width - w}, ${0}
            ${width}, ${w}
            ${width}, ${height - w}
            ${width - w}, ${height}
            ${w}, ${height}
            ${0}, ${height - w}
        `)
    }

    /** 
     * javascript comment 
     * @Author: 王林 
     * @Date: 2022-09-12 20:55:50 
     * @Desc: 创建外三角矩形 
     */
    createOuterTriangularRectangle() {
        let { paddingX } = this.node.getPaddingVale()
        paddingX = paddingX || this.node.shapePadding.paddingX
        let { width, height } = this.node
        return this.node.group.polygon(`
            ${paddingX}, ${0}
            ${width - paddingX}, ${0}
            ${width}, ${height / 2}
            ${width - paddingX}, ${height}
            ${paddingX}, ${height}
            ${0}, ${height / 2}
        `)
    }

    /** 
     * javascript comment 
     * @Author: 王林 
     * @Date: 2022-09-12 20:59:37 
     * @Desc: 创建内三角矩形 
     */
    createInnerTriangularRectangle() {
        let { paddingX } = this.node.getPaddingVale()
        paddingX = paddingX || this.node.shapePadding.paddingX
        let { width, height } = this.node
        return this.node.group.polygon(`
            ${0}, ${0}
            ${width}, ${0}
            ${width - paddingX / 2}, ${height / 2}
            ${width}, ${height}
            ${0}, ${height}
            ${paddingX / 2}, ${height / 2}
        `)
    }

    /** 
     * javascript comment 
     * @Author: 王林 
     * @Date: 2022-09-12 21:06:31 
     * @Desc: 创建椭圆 
     */
    createEllipse() {
        let { width, height } = this.node
        let halfWidth = width / 2
        let halfHeight = height / 2
        return this.node.group.path(`
            M${halfWidth},0
            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
            M${halfWidth},${height} 
            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
        `)
    }

    /** 
     * javascript comment 
     * @Author: 王林 
     * @Date: 2022-09-12 21:14:04 
     * @Desc: 创建圆 
     */
    createCircle() {
        let { width, height } = this.node
        let halfWidth = width / 2
        let halfHeight = height / 2
        return this.node.group.path(`
            M${halfWidth},0
            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${height} 
            M${halfWidth},${height} 
            A${halfWidth},${halfHeight} 0 0,1 ${halfWidth},${0} 
        `)
    }
}

// 形状列表
export const shapeList = ['rectangle', 'diamond', 'parallelogram', 'roundedRectangle', 'octagonalRectangle', 'outerTriangularRectangle', 'innerTriangularRectangle', 'ellipse', 'circle']