import {
    Graph
} from '@antv/x6'

// transverse  vertical
//   横           纵

const weight = 3;
const fontsize = 12;
const nodeSize = {};
const blueIconWidth = 24;
const blueIconHeight = 18;

const registerRootNode = () => {
    const shapeName = "root-node";
    Graph.registerNode(shapeName, {
        width: 0,
        height: weight,
        markup: [{
                tagName: 'text',
                selector: 'label',
            },
            {
                tagName: 'rect',
                selector: 'line',
            },
        ],
        attrs: {
            label: {
                fill: '#D0D0D0',
                y: -fontsize,
                fontSize: fontsize,
            },
            line: {
                height: weight,
                stroke: "transparent",
            },
        },
    }, true);
}

// 断路器纵向断开
const registerCircuitBreakerVerticalBreak = () => {
    const width = 100;
    const height = 30;
    const shapeName = "circuit-breaker-vertical-break";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [{
                    tagName: 'text',
                    selector: 'label',
                },
                {
                    tagName: 'rect',
                    selector: 'line',
                },
            ],
            attrs: {
                label: {
                    fill: '#D0D0D0',
                    fontSize: fontsize,
                },
                line: {
                    width: weight,
                    height: height / 3,
                    x: -(weight / 2),
                    fill: "#b30461",
                    stroke: "transparent",
                },
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        option.attrs.label.refX = -15;
        option.attrs.label['text-anchor'] = 'end';
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        option.attrs.label.refX = 15;
        option.attrs.label['text-anchor'] = 'start';
        return option;
    }
    const topOption = (option) => {
        option.attrs.label.refY = weight;
        option.attrs.line.y = height / 3 * 2;
    }
    const bottomOption = (option) => {
        option.attrs.label.refY = weight + height / 3;
        option.attrs.line.y = 0;
    }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 长断路器纵向断开
const registerLongCircuitBreakerVerticalBreak = () => {
    const width = 100;
    const height = 50;
    const shapeName = "long-circuit-breaker-vertical-break";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [{
                    tagName: 'text',
                    selector: 'label',
                },
                {
                    tagName: 'rect',
                    selector: 'line',
                },
            ],
            attrs: {
                label: {
                    fill: '#D0D0D0',
                    fontSize: fontsize,
                },
                line: {
                    width: weight,
                    height: height / 5 * 3,
                    x: -(weight / 2),
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        option.attrs.label.refX = -15;
        option.attrs.label['text-anchor'] = 'end';
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        option.attrs.label.refX = 15;
        option.attrs.label['text-anchor'] = 'start';
        return option;
    }
    const topOption = (option) => {
        option.attrs.label.refY = weight;
        option.attrs.line.y = height / 3 * 2;
    }
    const bottomOption = (option) => {
        option.attrs.label.refY = weight + height / 5 * 3;
        option.attrs.line.y = 0;
    }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 长断路器纵向连接
const registerLongCircuitBreakerVerticalLink = () => {
    const width = 100;
    const height = 50;
    const shapeName = "long-circuit-breaker-vertical-link";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [{
                    tagName: 'text',
                    selector: 'label',
                },
                {
                    tagName: 'rect',
                    selector: 'line',
                },
            ],
            attrs: {
                label: {
                    fill: '#D0D0D0',
                    fontSize: fontsize,
                },
                line: {
                    width: weight,
                    height: height,
                    x: -(weight / 2),
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        option.attrs.label.refX = -15;
        option.attrs.label['text-anchor'] = 'end';
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        option.attrs.label.refX = 15;
        option.attrs.label['text-anchor'] = 'start';
        return option;
    }
    const topOption = (option) => {
        option.attrs.label.refY = weight;
        option.attrs.line.y = height / 3 * 2;
    }
    const bottomOption = (option) => {
        option.attrs.label.refY = weight + height / 5 * 3;
        option.attrs.line.y = 0;
    }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 接地隔离开关横向断开
const registerEarthingDisconnectorTransverseBreak = () => {
    const width = 300;
    const height = 15;
    const shapeName = "earthing-disconnector-transverse-break";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [{
                    tagName: 'text',
                    selector: 'label',
                },
                {
                    tagName: 'rect',
                    selector: 'verticalLine',
                },
                {
                    tagName: 'rect',
                    selector: 'transverseLine',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineS',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineM',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineL',
                },
                {
                    tagName: 'rect',
                    selector: 'iconTransverseLine',
                },
            ],
            attrs: {
                label: {
                    fill: '#D0D0D0',
                    fontSize: fontsize,
                    "alignment-baseline": "middle"
                },
                verticalLine: {
                    width: weight,
                    height: height,
                    x: -(weight / 2),
                    y: 0,
                    fill: "#b30461",
                    stroke: "transparent",
                },
                transverseLine: {
                    width: height / 3 * 4,
                    height: weight,
                    fill: "#b30461",
                    stroke: "transparent",
                },
                iconVerticalLineS: {
                    width: weight,
                    height: blueIconHeight / 2,
                    y: blueIconHeight / 4,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconVerticalLineM: {
                    width: weight,
                    height: blueIconHeight / 3 * 2,
                    y: blueIconHeight / 6,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconVerticalLineL: {
                    width: weight,
                    height: blueIconHeight,
                    y: 0,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconTransverseLine: {
                    width: blueIconWidth - weight * 4,
                    height: weight,
                    y: (blueIconHeight - weight) / 2,
                    fill: "#2acabe",
                    stroke: "transparent",
                }
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        option.attrs.label.x = -(height * 6);
        option.attrs.label['text-anchor'] = 'end';
        option.attrs.transverseLine.x = -(height / 3 * 4);

        option.attrs.iconVerticalLineS.x = 0;
        option.attrs.iconVerticalLineM.x = weight / 2 * 3;
        option.attrs.iconVerticalLineL.x = weight * 3;
        option.attrs.iconTransverseLine.x = weight * 4;

        option.attrs.iconVerticalLineS.x -= height * 5;
        option.attrs.iconVerticalLineM.x -= height * 5;
        option.attrs.iconVerticalLineL.x -= height * 5;
        option.attrs.iconTransverseLine.x -= height * 5;
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        option.attrs.label.x = height * 6;
        option.attrs.label['text-anchor'] = 'start';
        option.attrs.transverseLine.x = 0;

        option.attrs.iconVerticalLineS.x = 0;
        option.attrs.iconVerticalLineM.x = -(weight / 2 * 3);
        option.attrs.iconVerticalLineL.x = -(weight * 3);
        option.attrs.iconTransverseLine.x = weight - blueIconWidth;

        option.attrs.iconVerticalLineS.x += height * 5;
        option.attrs.iconVerticalLineM.x += height * 5;
        option.attrs.iconVerticalLineL.x += height * 5;
        option.attrs.iconTransverseLine.x += height * 5;
        return option;
    }
    const topOption = (option) => {
        option.attrs.label.y = fontsize / 2;
        option.attrs.transverseLine.y = 0;
        option.attrs.iconVerticalLineS.y -= blueIconHeight / 2 - weight / 2;
        option.attrs.iconVerticalLineM.y -= blueIconHeight / 2 - weight / 2;
        option.attrs.iconVerticalLineL.y -= blueIconHeight / 2 - weight / 2;
        option.attrs.iconTransverseLine.y -= blueIconHeight / 2 - weight / 2;
    }
    const bottomOption = (option) => {
        option.attrs.label.y = height - weight + fontsize / 2;
        option.attrs.transverseLine.y = height - weight;
        option.attrs.iconVerticalLineS.y += height - weight / 2 - blueIconHeight / 2;
        option.attrs.iconVerticalLineM.y += height - weight / 2 - blueIconHeight / 2;
        option.attrs.iconVerticalLineL.y += height - weight / 2 - blueIconHeight / 2;
        option.attrs.iconTransverseLine.y += height - weight / 2 - blueIconHeight / 2;
    }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 接地隔离开关纵向断开
const registerEarthingDisconnectorVerticalBreak = () => {
    const width = 300;
    const height = 20;
    const shapeName = "earthing-disconnector-vertical-break";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [{
                    tagName: 'text',
                    selector: 'label',
                },
                {
                    tagName: 'rect',
                    selector: 'verticalLine1',
                },
                {
                    tagName: 'rect',
                    selector: 'verticalLine',
                },
                {
                    tagName: 'rect',
                    selector: 'transverseLine',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineS',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineM',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineL',
                },
                {
                    tagName: 'rect',
                    selector: 'iconTransverseLine',
                },
            ],
            attrs: {
                label: {
                    fill: '#D0D0D0',
                    fontSize: fontsize,
                    y: height * 3 + fontsize + blueIconWidth + 9,
                    "alignment-baseline": "middle", 
                    "text-anchor": "middle",
                },
                verticalLine1: {
                    width: weight,
                    height: height,
                    x: -(weight / 2),
                    y: 0,
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
                verticalLine: {
                    width: weight,
                    height: height,
                    y: height,
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
                transverseLine: {
                    width: height,
                    height: weight,
                    y: height - weight,
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
                iconVerticalLineS: {
                    width: blueIconHeight / 2,
                    height: weight,
                    x: blueIconHeight / 4,
                    y: blueIconHeight + height * 3,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconVerticalLineM: {
                    width: blueIconHeight / 3 * 2,
                    height: weight,
                    x: blueIconHeight / 6,
                    y: blueIconHeight - weight / 2 * 3 + height * 3,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconVerticalLineL: {
                    width: blueIconHeight,
                    height: weight,
                    x: 0,
                    y: blueIconHeight - weight * 3 + height * 3,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconTransverseLine: {
                    width: weight,
                    height: blueIconWidth - weight * 4,
                    x: (blueIconHeight - weight) / 2,
                    y:  height * 3,
                    fill: "#2acabe",
                    stroke: "transparent",
                }
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        option.attrs.label.x = -height;
        option.attrs.transverseLine.x = -height;
        option.attrs.verticalLine.x = -height;
        option.attrs.iconVerticalLineS.x -= height / 2 * 3 - weight / 2;
        option.attrs.iconVerticalLineM.x -= height / 2 * 3 - weight / 2;
        option.attrs.iconVerticalLineL.x -= height / 2 * 3 - weight / 2;
        option.attrs.iconTransverseLine.x -= height / 2 * 3 - weight / 2;
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        option.attrs.label.x = height;
        option.attrs.transverseLine.x = 0;
        option.attrs.verticalLine.x = height - weight;
        option.attrs.iconVerticalLineS.x += height / 2 - weight / 2;
        option.attrs.iconVerticalLineM.x += height / 2 - weight / 2;
        option.attrs.iconVerticalLineL.x += height / 2 - weight / 2;
        option.attrs.iconTransverseLine.x += height / 2 - weight / 2;
        return option;
    }
    const topOption = (option) => { }
    const bottomOption = (option) => { }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 注册上下箭头
const registerArrowVertical = () => {
    const width = weight;
    const height = 0;
    const arrowWidth = 13;
    const arrowHeight = 15;
    const shapeName = "arrow-vertical";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [
                {
                    tagName: 'rect',
                    selector: 'line',
                },
                {
                    tagName: 'polygon',
                    selector: 'arrow',
                },
            ],
            attrs: {
                line: {
                    width: weight,
                    x: -(weight / 2),
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
                arrow: {
                    x: -(weight / 2),
                    fill: "#cbaa07",
                    stroke: "transparent",
                }
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        return option;
    }
    const topOption = (option) => {
        option.attrs.line.y = arrowHeight;
        option.attrs.arrow.refY = 0;
        option.attrs.arrow.points = `0,0 ${-(arrowWidth/2)},${arrowHeight} ${arrowWidth/2},${arrowHeight}`;
    }
    const bottomOption = (option) => {
        option.attrs.line.y = 0;
        option.attrs.arrow.points = `${-(arrowWidth/2)},0 ${arrowWidth/2},0 0,${arrowHeight}`;
    }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 注册一条竖线
const registerLineVertical = () => {
    const width = weight;
    const height = 0;
    const shapeName = "line-vertical";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [
                {
                    tagName: 'rect',
                    selector: 'line',
                },
            ],
            attrs: {
                line: {
                    width: weight,
                    x: -(weight / 2),
                    y: 0,
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        return option;
    }
    const topOption = (option) => { }
    const bottomOption = (option) => { }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 竖着的电抗器
const registerReactorVertical = () => {
    const width = weight;
    const height = 70;
    const r = 10;
    const shapeName = "reactor-vertical";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [
                {
                    tagName: 'path',
                    selector: 'reactor',
                },
            ],
            attrs: {
                reactor: {
                    d: `M0,0 l0,${height-r*2} a${r} ${r} 0 1 0 ${r} ${r} l-${r},0 l0,${r}`,
                    x: -(weight / 2),
                    y: 0,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": weight,
                },
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        return option;
    }
    const topOption = (option) => { }
    const bottomOption = (option) => { }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 竖着的电容
const registerCapacitanceVertical = () => {
    const width = 16;
    const height = 50;
    const shapeName = "capacitance-vertical";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [
                {
                    tagName: 'path',
                    selector: 'reactor',
                },
            ],
            attrs: {
                reactor: {
                    d: `M0,0 l0,${height*0.4} m-${width/2},0 l${width},0 m0,${height*0.2-weight} l-${width},0 m${width/2},0 l0,${height*0.4+weight}`,
                    x: -(weight / 2),
                    y: 0,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": weight,
                },
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        return option;
    }
    const topOption = (option) => { }
    const bottomOption = (option) => { }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 竖着的电阻
const registerResistanceVertical = () => {
    const width = 16;
    const height = 100;
    const shapeName = "resistance-vertical";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [
                {
                    tagName: 'path',
                    selector: 'reactor',
                },
            ],
            attrs: {
                reactor: {
                    d: `M0,0 l0,${height} m-${width/2},-${height*0.3} l${width},0 l0,-${height*0.4} l-${width},0 l0,${height*0.4}`,
                    x: -(weight / 2),
                    y: 0,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": weight,
                },
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        return option;
    }
    const topOption = (option) => { }
    const bottomOption = (option) => { }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 电压互感器 3 Voltage transformer 
const registerVoltageTransformer = () => {
    const width = 16;
    const height = 50;
    const r = height / 5;
    const w = weight / 3 * 2;
    const shapeName = "voltage-transformer";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [
                {
                    tagName: 'rect',
                    selector: 'line',
                },
                {
                    tagName: 'circle',
                    selector: 'circle1',
                },
                {
                    tagName: 'circle',
                    selector: 'circle2',
                },
                {
                    tagName: 'circle',
                    selector: 'circle3',
                },
                {
                    tagName: 'path',
                    selector: 'path',
                },
            ],
            attrs: {
                line: {
                    x: -(weight / 2),
                    y: 0,
                    width: weight,
                    height: r + weight*2,
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
                circle1: {
                    cx: 0,
                    cy: 2*r+weight*2,
                    r: r,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": w,
                },
                circle2: {
                    cx: 0,
                    cy: 4*r,
                    r: r,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": w,
                },
                circle3: {
                    cx: Math.sqrt(weight*(2*r-weight)) + r - 3,
                    cy: 3*r+weight,
                    r: r,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": w,
                },
                path: {
                    d: `M0,${2*r+weight*2} l-${r/2},-${r/2} m${r/2},${r/2} l${r/2},-${r/2} m-${r/2},${r/2} l0,${r/2}
                        M0,${4*r} l-${r/2},-${r/2} m${r/2},${r/2} l${r/2},-${r/2} m-${r/2},${r/2} l0,${r/2}
                        M${Math.sqrt(weight*(2*r-weight))+r-3},${3*r+weight} m-1,0 l-${r/3},${r/3} l${r},0 l-${r/3},-${r/3}`,
                    x: -(weight / 2),
                    y: 0,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": w,
                },
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        return option;
    }
    const topOption = (option) => { }
    const bottomOption = (option) => { }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}


// 接地变压器 Grounding transformer
const registerGroundingTransformer = () => {
    const width = 16;
    const height = 110;
    const r = height / 11;
    const w = weight / 3 * 2;
    const shapeName = "grounding-transformer";
    const commonOption = () => {
        return {
            width: width,
            height: height,
            markup: [
                {
                    tagName: 'rect',
                    selector: 'line',
                },
                {
                    tagName: 'circle',
                    selector: 'circle1',
                },
                {
                    tagName: 'circle',
                    selector: 'circle2',
                },
                {
                    tagName: 'path',
                    selector: 'path',
                },
                {
                    tagName: 'rect',
                    selector: 'verticalLine',
                },
                {
                    tagName: 'rect',
                    selector: 'transverseLine',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineS',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineM',
                },
                {
                    tagName: 'rect',
                    selector: 'iconVerticalLineL',
                },
                {
                    tagName: 'rect',
                    selector: 'iconTransverseLine',
                },
            ],
            attrs: {
                line: {
                    x: -(weight / 2),
                    y: 0,
                    width: weight,
                    height: 7*r + weight*2,
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
                circle1: {
                    cx: 0,
                    cy: 8*r+weight*2,
                    r: r,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": w,
                },
                circle2: {
                    cx: 0,
                    cy: 10*r,
                    r: r,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": w,
                },
                path: {
                    d: `M0,${8*r+weight*2} m-${r/2},1 l${r},0 l-${r/2},-${r-2} l-${r/2},${r-2}
                        M0,${10*r} l-${r/2},${r/2} m${r/2},-${r/2} l${r/2},${r/2} m-${r/2},-${r/2} l0,-${r/2}`,
                    x: -(weight / 2),
                    y: 0,
                    fill: "transparent",
                    stroke: "#cbaa07",
                    "stroke-width": w,
                },
                verticalLine: {
                    width: weight,
                    height: r*2,
                    x: -r*2,
                    y: 10*r,
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
                transverseLine: {
                    width: r*2,
                    height: w,
                    x: -r*2,
                    y: 10*r,
                    fill: "#cbaa07",
                    stroke: "transparent",
                },
                iconVerticalLineS: {
                    width: blueIconHeight / 2,
                    height: weight,
                    x: blueIconHeight / 4 - r*2 - blueIconHeight / 2 + weight / 2,
                    y: blueIconHeight + r * 12,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconVerticalLineM: {
                    width: blueIconHeight / 3 * 2,
                    height: weight,
                    x: blueIconHeight / 6 - r*2 - blueIconHeight / 2 + weight / 2,
                    y: blueIconHeight - weight / 2 * 3 + r * 12,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconVerticalLineL: {
                    width: blueIconHeight,
                    height: weight,
                    x: 0 - r*2 - blueIconHeight / 2 + weight / 2,
                    y: blueIconHeight - weight * 3 + r * 12,
                    fill: "#2acabe",
                    stroke: "transparent",
                },
                iconTransverseLine: {
                    width: weight,
                    height: blueIconWidth - weight * 4,
                    x: (blueIconHeight - weight) / 2 - r*2 - blueIconHeight / 2 + weight / 2,
                    y:  r * 12,
                    fill: "#2acabe",
                    stroke: "transparent",
                }
            },
        }
    }
    const leftOption = () => {
        const option = commonOption();
        return option;
    }
    const rightOption = () => {
        const option = commonOption();
        return option;
    }
    const topOption = (option) => { }
    const bottomOption = (option) => { }
    const registerTopLeft = () => {
        const shape = `${shapeName}-top-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerTopRight = () => {
        const shape = `${shapeName}-top-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        topOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomLeft = () => {
        const shape = `${shapeName}-bottom-left`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = leftOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    const registerBottomRight = () => {
        const shape = `${shapeName}-bottom-right`;
        nodeSize[shape] = {
            width: width,
            height: height
        };
        const option = rightOption();
        bottomOption(option);
        Graph.registerNode(shape, option, true);
    }
    registerTopLeft();
    registerTopRight();
    registerBottomLeft();
    registerBottomRight();
}

// 注册自定义节点
const register = () => {
    registerRootNode();
    registerCircuitBreakerVerticalBreak();
    registerLongCircuitBreakerVerticalBreak();
    registerLongCircuitBreakerVerticalLink();
    registerEarthingDisconnectorTransverseBreak();
    registerEarthingDisconnectorVerticalBreak();
    registerArrowVertical();
    registerLineVertical();
    registerReactorVertical();
    registerCapacitanceVertical();
    registerResistanceVertical();
    registerVoltageTransformer();
    registerGroundingTransformer();
}


export default {
    register: register,
    nodeSize: nodeSize,
    weight: weight,
    fontsize: fontsize,
}