Function drawShape

src/components/shapes/draw.js:112–192

(shapeLayer)

    }

    function drawShape(shapeLayer) {
        var d = getPathString(gd, options);
        var attrs = {
            'data-index': index,
            'fill-rule': options.fillrule,
            d: d
        };

        var opacity = options.opacity;
        var fillColor = options.fillcolor;
        var lineColor = options.line.width ? options.line.color : 'rgba(0,0,0,0)';
        var lineWidth = options.line.width;
        var lineDash = options.line.dash;
        if (!lineWidth && options.editable === true) {
            // ensure invisible border to activate the shape
            lineWidth = 5;
            lineDash = 'solid';
        }

        var isOpen = d[d.length - 1] !== 'Z';

        var isActiveShape = couldHaveActiveShape(gd) && options.editable && gd._fullLayout._activeShapeIndex === index;

        if (isActiveShape) {
            fillColor = isOpen ? 'rgba(0,0,0,0)' : gd._fullLayout.activeshape.fillcolor;

            opacity = gd._fullLayout.activeshape.opacity;
        }

        var shapeGroup = shapeLayer.append('g').classed('shape-group', true).attr({ 'data-index': index });

        var path = shapeGroup
            .append('path')
            .attr(attrs)
            .style('opacity', opacity)
            .call(Color.stroke, lineColor)
            .call(Color.fill, fillColor)
            .call(Drawing.dashLine, lineDash, lineWidth);

        setClipPath(shapeGroup, gd, options);

        // Draw or clear the label
        drawLabel(gd, index, options, shapeGroup);

        var editHelpers;
        if (isActiveShape || gd._context.edits.shapePosition) editHelpers = arrayEditor(gd.layout, 'shapes', options);

        if (isActiveShape) {
            path.style({
                cursor: 'move'
            });

            var dragOptions = {
                element: path.node(),
                plotinfo: plotinfo,
                gd: gd,
                editHelpers: editHelpers,
                hasText: options.label.text || options.label.texttemplate,