protected buildDom()

in share/src/sprite-editor/buttons.ts [53:134]
63 lines of code
1 McCabe index (conditional complexity)

    protected buildDom() {
        // Our css minifier mangles animation names so they need to be injected manually
        this.root.style().content(`
            .toggle-left {
                transform: translateX(0px);
                animation: mvleft 0.2s 0s ease;
            }

            .toggle-right {
                transform: translateX(100px);
                animation: mvright 0.2s 0s ease;
            }

            @keyframes mvright {
                0% {
                    transform: translateX(0px);
                }
                100% {
                    transform: translateX(100px);
                }
            }

            @keyframes mvleft {
                0% {
                    transform: translateX(100px);
                }
                100% {
                    transform: translateX(0px);
                }
            }
            `);


        // The outer border has an inner-stroke so we need to clip out the outer part
        // because SVG's don't support "inner borders"
        const clip = this.root.def().create("clipPath", "sprite-editor-toggle-border")
            .clipPathUnits(true);

        clip.draw("rect")
            .at(0, 0)
            .corners(TOGGLE_CORNER_RADIUS / TOGGLE_WIDTH, TOGGLE_CORNER_RADIUS / TOGGLE_HEIGHT)
            .size(1, 1);

        // Draw the outer border
        this.root.draw("rect")
            .size(TOGGLE_WIDTH, TOGGLE_HEIGHT)
            .fill(this.props.baseColor)
            .stroke(this.props.borderColor, TOGGLE_BORDER_WIDTH * 2)
            .corners(TOGGLE_CORNER_RADIUS, TOGGLE_CORNER_RADIUS)
            .clipPath("url(#sprite-editor-toggle-border)");


        // Draw the background
        this.root.draw("rect")
            .at(TOGGLE_BORDER_WIDTH, TOGGLE_BORDER_WIDTH)
            .size(TOGGLE_WIDTH - TOGGLE_BORDER_WIDTH * 2, TOGGLE_HEIGHT - TOGGLE_BORDER_WIDTH * 2)
            .fill(this.props.backgroundColor)
            .corners(TOGGLE_CORNER_RADIUS, TOGGLE_CORNER_RADIUS);

        // Draw the switch
        this.switch = this.root.draw("rect")
            .at(TOGGLE_BORDER_WIDTH, TOGGLE_BORDER_WIDTH)
            .size((TOGGLE_WIDTH - TOGGLE_BORDER_WIDTH * 2) / 2, TOGGLE_HEIGHT - TOGGLE_BORDER_WIDTH * 2)
            .fill(this.props.switchColor)
            .corners(TOGGLE_CORNER_RADIUS, TOGGLE_CORNER_RADIUS);

        // Draw the left option
        this.leftElement = this.root.group();
        this.leftText = mkText(this.props.leftText)
            .appendClass("sprite-editor-text")
            .fill(this.props.selectedTextColor);
        this.leftElement.appendChild(this.leftText);

        // Draw the right option
        this.rightElement = this.root.group();
        this.rightText = mkText(this.props.rightText)
            .appendClass("sprite-editor-text")
            .fill(this.props.unselectedTextColor);
        this.rightElement.appendChild(this.rightText);

        this.root.onClick(() => this.toggle());
    }