inno-diagram/src/utils/svg-builder.js

It was created to develop Inno Linc.

require('./svg-utils.js')();

module.exports = function(isDark)
{
    this.setDocumentSize = function(width, height) 
    {
        var attributes = ' width="'+ width + '" height="' + height + '" viewBox="0.00 0.00 ' + width + ' ' + height+ '" ';
        this.svg = this.svg.replace('<svg ', '<svg ' + attributes);
    };

    this.createRect = function(x, y, width, height) 
    {
        var rect = '<rect width="' + width + '" height="' + height + '" ' +
            'x="' + x + '" y="' + y + '" ' +
            'style="stroke-width: 1; fill: none; stroke: ' + (isDark ? 'white;' : 'black;') + '" />';
        
        return rect;
    };

    this.createText = function(message, x, y, color) 
    {
        var g = '<g>\r\n';
        var lines = message.split('\n');

        y -= (lines.length - 1) / 2 * 18;

        for (var i=0; i<lines.length; i++)
        {
            var text = '   <text ' +
                'fill="' + (color ? color : (isDark ? 'white' : 'black')) + '" ' +
                'font-family="Helvetica,sans-Serif" ' +
                'x="' + x + '" y="' + y + '" ' +
                'style="text-anchor: middle; alignment-baseline: central;">' + 
                lines[i] + 
                '</text>\r\n';

            y += 18;

            g += text;
        }

        g += '</g>\r\n'

        return g;
    };

    this.getTextSize = function(text) 
    {
        var width = 0;
        var lines = text.split('\n');

        for (var i=0; i<lines.length; i++)
        {
            width = Math.max(width, 8.5 * lines[i].length);
        }

        return { x: 0, y: 0, width: width, height: 18 * lines.length };
    };

    this.createPath = function(format, linetype, fill) 
    {
        var args = arguments;
        var pathSpec = format.replace(/\{(\d+)\}/g, function(string, index) {
            return args[parseInt(index)+3];
        });

        var path = '<path ' +
            'style="stroke-width: 1; fill: ' + fill + '; stroke: ' + (isDark ? 'white;' : 'black;') + '" ';

        if (linetype == "dashed")
            path += 'stroke-dasharray="7,4" ';

        path += 'd="' + pathSpec + '"></path>\r\n';

        return path;
    };

    this.createNewDocument = function()
    {
        this.svg = 
            `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
    <marker id="arrow-filled" refX="6" refY="3" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M0,0 6,3 0,6z" style="stroke: none; fill: black;"></path>
    </marker>
    <marker id="arrow-open" refX="6" refY="3" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M0,0 6,3 0,6" style="stroke-width: 1; fill: none; stroke: black;"></path>
    </marker>
</defs>`;
    }

    this.appendChild = function(child)
    {
        this.svg += child + '\r\n';
    }

    this.setAttribute =  function(element, name, value)
    {
        var position = 0;

        var start = element.indexOf('<');
        if (start < 0)
            return element;

        var firstSpace = element.indexOf(' ', start + 1);
        if (firstSpace > 0)
        {
            position = firstSpace;
        }
        else
        {
            var end = element.indexOf('>', start + 1);
            if (end > 0)
                position = end;
            else
                return element;
        }

        var addition = ' '+ name + '="' + value + '" ';

        return element.substring(0, position) + addition + element.substring(position);
    }

    this.serialize = function()
    {
        if (!/<\/svg>[\r\n]*$/.test(this.svg))
            this.svg += '\r\n</svg>';

        return this.svg;
    }
    
    this.svg = '';
    this.createNewDocument();
}