// TinyVG Renderer <br />
// Copyright (C) by honey the codewitch<br />
// MIT License<br />
// To use, pass am ArrayBuffer with the<br />
// TVG document to tvgDimensions<br />
// or tvgRender. With render,<br />
// you place an empty SVG element, <br />
// ex: <svg id="..." xmlms="..." /><br />
// and pass the id of it to the render<br />
// method. At that point, the SVG tag<br />
// will be populated and rendered by<br />
// the browser.<br />
<br />
const tvgInit = (data, id) => {<br />
    return {<br />
        data: data,<br />
        view: new DataView(data),<br />
        cursor: 0,<br />
        scale: 0,<br />
        color_encoding: 0,<br />
        coord_range: 0,<br />
        width: 0, height: 0,<br />
        colors_size: 0,<br />
        colors: [],<br />
        doc: document.getElementById(id), //SVGSVGElement<br />
        elem: undefined, // SVGElement<br />
        gradIndex: 0<br />
    };<br />
}<br />
const tvgDistance = (pointLhs, pointRhs) => {<br />
    const xd = pointRhs.x - pointLhs.x;<br />
    const yd = pointRhs.y - pointLhs.y;<br />
    return Math.sqrt((xd * xd) + (yd * yd));<br />
}<br />
const tvgAdvCoord = (rangeOrCtx) => {<br />
    let range = rangeOrCtx;<br />
    if (rangeOrCtx.coord_range) {<br />
        range = rangeOrCtx.range;<br />
    }<br />
    switch (range) {<br />
        case 0://"default"<br />
            return 2;<br />
        case 1://"reduced":<br />
            return 1;<br />
        case 2://"extended"<br />
            return 4;<br />
    }<br />
}<br />
const tvgMapZeroToMax = (rangeOrCtx, value) => {<br />
    let range = rangeOrCtx;<br />
    if (rangeOrCtx.coord_range) {<br />
        range = rangeOrCtx.range;<br />
    }<br />
    if (0 == value) {<br />
        switch (range) {<br />
            case 0: //"default"<br />
                return 0xFFFF;<br />
            case 1: //"reduced"<br />
                return 0xFF;<br />
            case 2: //"extended"<br />
                return 0xFFFFFFFF;<br />
        }<br />
        return undefined;<br />
    }<br />
    return value;<br />
}<br />
const tvgReadCoordBI = (range, startIndex, data) => {<br />
    const view = new DataView(data);<br />
    switch (range) {<br />
        case 0: //"default"<br />
            return view.getUint16(startIndex, true);<br />
<br />
        case 1: //"reduced"<br />
            return view.getUint8(startIndex);<br />
<br />
        case 2: //"extended"<br />
            return view.getUint32(startIndex, true);<br />
    }<br />
    return undefined;<br />
}<br />
const tvgReadCoord = (ctx) => {<br />
    let result = undefined;<br />
    switch (ctx.coord_range) {<br />
        case 0: //"default"<br />
            result = ctx.view.getUint16(ctx.cursor, true);<br />
            ctx.cursor += 2;<br />
            break;<br />
        case 1: //"reduced"<br />
            result = ctx.view.getUint8(ctx.cursor);<br />
            ctx.cursor += 1;<br />
            break;<br />
        case 2: //"extended"<br />
            result = ctx.view.getUint32(ctx.cursor, true);<br />
            ctx.cursor += 4;<br />
            break;<br />
    }<br />
    return result;<br />
}<br />
const tvgReadU32 = (ctx) => {<br />
    let count = 0;<br />
    let result = 0;<br />
    var byte;<br />
    while (true) {<br />
        byte = ctx.view.getUint8(ctx.cursor++);<br />
        const val = (byte & 0x7F) << (7 * count);<br />
        result |= val;<br />
        if ((byte & 0x80) === 0)<br />
            break;<br />
        ++count;<br />
    }<br />
    return result;<br />
}<br />
const tvgDownscaleCoord = (ctx, coord) => {<br />
    const factor = (1) << ctx.scale;<br />
    return coord / factor;<br />
}<br />
const tvgReadUnit = (ctx) => {<br />
    const val = tvgReadCoord(ctx);<br />
    return tvgDownscaleCoord(ctx, val);<br />
}<br />
const tvgReadPoint = (ctx) => {<br />
    const x = tvgReadUnit(ctx);<br />
    const y = tvgReadUnit(ctx);<br />
    return { x: x, y: y };<br />
}<br />
const tvgReadColor = (ctx) => {<br />
    switch (ctx.color_encoding) {<br />
        case 2: { // TVG_COLOR_F32:<br />
            // read four values<br />
            const data = [];<br />
            data.push(ctx.view.getFloat32(ctx.cursor, true)); ctx.cursor += 4;<br />
            data.push(ctx.view.getFloat32(ctx.cursor, true)); ctx.cursor += 4;<br />
            data.push(ctx.view.getFloat32(ctx.cursor, true)); ctx.cursor += 4;<br />
            data.push(ctx.view.getFloat32(ctx.cursor, true)); ctx.cursor += 4;<br />
            return { r: data[0], g: data[1], b: data[2], a: data[3] };<br />
        }<br />
        case 1: { // TVG_COLOR_U565: <br />
            const data = ctx.view.getUint16(ctx.cursor, true);<br />
            ctx.cursor += 2;<br />
            return {<br />
                r: (data & 0x1F) / 15.0,<br />
                g: ((data >>> 5) & 0x3F) / 31.0,<br />
                b: ((data >>> 11) & 0x1F) / 15.0,<br />
                a: 1.0<br />
            };<br />
        }<br />
        case 0: { // TVG_COLOR_U8888: <br />
            // read four values<br />
            const data = [];<br />
            data.push(ctx.view.getUint8(ctx.cursor++));<br />
            data.push(ctx.view.getUint8(ctx.cursor++));<br />
            data.push(ctx.view.getUint8(ctx.cursor++));<br />
            data.push(ctx.view.getUint8(ctx.cursor++));<br />
            return { r: data[0] / 255.0, g: data[1] / 255.0, b: data[2] / 255.0, a: data[3] / 255.0 };<br />
        }<br />
        case 3: // TVG_COLOR_CUSTOM<br />
            throw "TinyVG: Custom color table not supported";<br />
        default:<br />
            throw "TinyVG: Invalid color format";<br />
    }<br />
}<br />
const tvgParseGradient = (ctx) => {<br />
    const point0 = tvgReadPoint(ctx);<br />
    const point1 = tvgReadPoint(ctx);<br />
    const color0 = tvgReadU32(ctx);<br />
    const color1 = tvgReadU32(ctx);<br />
    return { point0: point0, point1: point1, color0: color0, color1: color1 };<br />
}<br />
const tvgParseStyle = (ctx, kind) => {<br />
    switch (kind) {<br />
        case 0: // TVG_STYLE_FLAT:<br />
            return { kind: kind, flat: tvgReadU32(ctx) };<br />
        case 1: // TVG_STYLE_LINEAR:<br />
            return { kind: kind, linear: tvgParseGradient(ctx) };<br />
        case 2: //TVG_STYLE_RADIAL:<br />
            return { kind: kind, radial: tvgParseGradient(ctx) };<br />
        default:<br />
            throw "TinyVG: Invalid format parsing style";<br />
    }<br />
}<br />
const tvgParseFillHeader = (ctx, kind) => {<br />
    const u32 = tvgReadU32(ctx);<br />
    const size = u32 + 1;<br />
    //out_header->size = count;<br />
    const style = tvgParseStyle(ctx, kind);<br />
    return { size: size, style: style };<br />
}<br />
const tvgParseLineHeader = (ctx, kind) => {<br />
    const u32 = tvgReadU32(ctx);<br />
    const size = u32 + 1;<br />
<br />
    const style = tvgParseStyle(ctx, kind);<br />
    const line_width = tvgReadUnit(ctx);<br />
<br />
    return { size: size, style: style, line_width: line_width };<br />
}<br />
<br />
const tvgParseLineFillHeader = (ctx, kind) => {<br />
<br />
    var d = ctx.view.getUint8(ctx.cursor++);<br />
    const size = (d & 0x3F) + 1;<br />
    const fill_style = tvgParseStyle(ctx, kind);<br />
    const line_style = tvgParseStyle(ctx, (d >>> 6) & 0x03);<br />
    const line_width = tvgReadUnit(ctx);<br />
    return { size: size, fill_style: fill_style, line_style: line_style, line_width: line_width };<br />
}<br />
const tvgParsePathD = (ctx, size) => {<br />
    var st, cur;<br />
    var pt;<br />
    var u32;<br />
    var f32;<br />
    var d;<br />
    let result = "";<br />
    pt = tvgReadPoint(ctx);<br />
    result += `M${pt.x} ${pt.y}`;<br />
    st = pt;<br />
    cur = pt;<br />
    for (let j = 0; j < size; ++j) {<br />
        d = ctx.view.getUint8(ctx.cursor++);<br />
        if (((d >>> 4) & 1) !== 0) { // has line<br />
            tvgReadUnit(ctx); // throw away line width (future use)<br />
        }<br />
        switch (d & 7) {<br />
            case 0: // TVG_PATH_LINE:<br />
                pt = tvgReadPoint(ctx);<br />
                result += ` L${pt.x} ${pt.y}`<br />
                cur = pt;<br />
                break;<br />
            case 1: // TVG_PATH_HLINE:<br />
                pt.x = tvgReadUnit(ctx);;<br />
                pt.y = cur.y;<br />
                result += ` H${pt.x}`;<br />
                cur = pt;<br />
                break;<br />
            case 2: // TVG_PATH_VLINE:<br />
                pt.x = cur.x;<br />
                pt.y = tvgReadUnit(ctx);<br />
                result += ` V${pt.y}`;<br />
                cur = pt;<br />
                break;<br />
            case 3: { // TVG_PATH_CUBIC: <br />
                const ctrl1 = tvgReadPoint(ctx);<br />
                const ctrl2 = tvgReadPoint(ctx);<br />
                const endp = tvgReadPoint(ctx);<br />
                result += ` C${ctrl1.x} ${ctrl1.y} ${ctrl2.x} ${ctrl2.y} ${endp.x} ${endp.y}`;<br />
                cur = endp;<br />
            } break;<br />
            case 4: { // TVG_PATH_ARC_CIRCLE: {<br />
                d = ctx.view.getUint8(ctx.cursor++);<br />
                const radius = tvgReadUnit(ctx);<br />
                pt = tvgReadPoint(ctx);<br />
                result += ` A${radius} ${radius} 0 ${d & 1} ${1 - ((d >>> 1) & 1)} ${pt.x} ${pt.y}`;<br />
                cur = pt;<br />
            } break;<br />
            case 5: { // TVG_PATH_ARC_ELLIPSE: <br />
                d = ctx.view.getUint8(ctx.cursor++);<br />
                const radius_x = tvgReadUnit(ctx);<br />
                const radius_y = tvgReadUnit(ctx);<br />
                const rotation = tvgReadUnit(ctx);<br />
                pt = tvgReadPoint(ctx);<br />
                result += ` A${radius_x} ${radius_y} ${rotation} ${d & 1} ${1 - ((d >>> 1) & 1)} ${pt.x} ${pt.y}`;<br />
                cur = pt;<br />
            } break;<br />
            case 6: // TVG_PATH_CLOSE:<br />
                result += ' Z';<br />
                cur = st;<br />
                break;<br />
            case 7: { // TVG_PATH_QUAD:<br />
                const ctrl = tvgReadPoint(ctx);<br />
                const endp = tvgReadPoint(ctx);<br />
                result += ` Q${ctrl.x} ${ctrl.y} ${endp.x} ${endp.y}`<br />
                cur = endp;<br />
            } break;<br />
            default:<br />
                throw "TinyVG: Unrecognized command parsing path";<br />
        }<br />
    }<br />
    return result;<br />
}<br />
const tvgParseRect = (ctx) => {<br />
    const pt = tvgReadPoint(ctx);<br />
    const w = tvgReadUnit(ctx);<br />
    const h = tvgReadUnit(ctx);<br />
    return { x: pt.x, y: pt.y, width: w, height: h };<br />
}<br />
const tvgToHex = (code) => {<br />
    let result = code.toString(16);<br />
    if (result.length === 1) {<br />
        return "0" + result;<br />
    }<br />
    return result;<br />
}<br />
const tvgColorToSvgColorAndOpacity = (col) => {<br />
    return { color: `#${tvgToHex(col.r * 255)}${tvgToHex(col.g * 255)}${tvgToHex(col.b * 255)}`, opacity: col.a };<br />
}<br />
const tvgCreateSvgNode = (n, v) => {<br />
    n = document.createElementNS("http://www.w3.org/2000/svg", n);<br />
    if (v) {<br />
        for (let p in v) {<br />
            n.setAttributeNS(null, p.replace(/[A-Z]/g, function (m, p, o, s) { return "-" + m.toLowerCase(); }), v[p]);<br />
        }<br />
    }<br />
    return n;<br />
}<br />
const tvgAddSvgAttribute = (n, a, v) => {<br />
    n.setAttributeNS(null, a, v);<br />
}<br />
const tvgCreateSvgGradient = (ctx, style) => {<br />
    let da = ctx.doc.getElementsByTagNameNS("http://www.w3.org/2000/svg", "defs");<br />
    var defs;<br />
    if (da.length == 0) {<br />
        defs = tvgCreateSvgNode("defs");<br />
        ctx.doc.prepend(defs);<br />
    } else {<br />
        defs = da[0];<br />
    }<br />
    if (style.kind === 1) {<br />
        const node = tvgCreateSvgNode("linearGradient",<br />
            {<br />
                id: `TvgGradient${ctx.gradIndex + 1}`,<br />
                x1: style.linear.point0.x,<br />
                y1: style.linear.point0.y,<br />
                x2: style.linear.point1.x,<br />
                y2: style.linear.point1.y<br />
            });<br />
        node.setAttributeNS(null, "gradientUnits", "userSpaceOnUse");<br />
        node.setAttributeNS(null, "spreadMethod", "pad");<br />
        let col = tvgColorToSvgColorAndOpacity(ctx.colors[style.linear.color0]);<br />
        const stop1 = tvgCreateSvgNode("stop", { offset: "0%", stopColor: col.color });//, stopOpacity: col.opacity});<br />
        node.appendChild(stop1);<br />
        col = tvgColorToSvgColorAndOpacity(ctx.colors[style.linear.color1]);<br />
        const stop2 = tvgCreateSvgNode("stop", { offset: "100%", stopColor: col.color });//, stopOpacity: col.opacity});<br />
        node.appendChild(stop2);<br />
        defs.appendChild(node);<br />
        ++ctx.gradIndex;<br />
        return node.getAttributeNS(null, "id");<br />
    } else if (style.kind === 2) {<br />
        const r = tvgDistance(style.radial.point0, style.radial.point1);<br />
        const node = tvgCreateSvgNode("radialGradient",<br />
            {<br />
                id: `TvgGradient${ctx.gradIndex + 1}`,<br />
                cx: style.radial.point0.x,<br />
                cy: style.radial.point0.y,<br />
                fx: style.radial.point0.x,<br />
                fy: style.radial.point0.y,<br />
                r: r<br />
            });<br />
        node.setAttributeNS(null, "gradientUnits", "userSpaceOnUse");<br />
        node.setAttributeNS(null, "spreadMethod", "pad");<br />
        let col = tvgColorToSvgColorAndOpacity(ctx.colors[style.radial.color0]);<br />
        const stop1 = tvgCreateSvgNode("stop", { offset: "0%", stopColor: col.color, stopOpacity: col.opacity });<br />
        node.appendChild(stop1);<br />
        col = tvgColorToSvgColorAndOpacity(ctx.colors[style.radial.color1]);<br />
        const stop2 = tvgCreateSvgNode("stop", { offset: "100%", stopColor: col.color, stopOpacity: col.opacity });<br />
        node.appendChild(stop2);<br />
        defs.appendChild(node);<br />
        ++ctx.gradIndex;<br />
        return node.getAttributeNS(null, "id");<br />
    } else if (style.kind === 0) throw "TinyVG: attempt to pass flat style to create gradient";<br />
    else throw "TinyVG: attempt to pass an invalid style to create gradient";<br />
}<br />
const tvgApplyStyle = (ctx, style, isFill) => {<br />
    if (style.kind === 0) { // flat<br />
        const col = tvgColorToSvgColorAndOpacity(ctx.colors[style.flat]);<br />
        if (isFill) {<br />
            tvgAddSvgAttribute(ctx.elem, "fill", col.color);<br />
            tvgAddSvgAttribute(ctx.elem, "fill-opacity", col.opacity);<br />
        } else {<br />
            tvgAddSvgAttribute(ctx.elem, "stroke", col.color);<br />
            tvgAddSvgAttribute(ctx.elem, "stroke-opacity", col.opacity);<br />
        }<br />
    } else if (style.kind === 1 || style.kind === 2) { // linear<br />
        const grad = tvgCreateSvgGradient(ctx, style);<br />
        if (isFill) {<br />
            tvgAddSvgAttribute(ctx.elem, "fill", `url(#${grad})`);<br />
        } else {<br />
            tvgAddSvgAttribute(ctx.elem, "stroke", `url(#${grad})`);<br />
        }<br />
    } else throw "TinyVG: attempt to apply invalid style";<br />
}<br />
const tvgParseFillRectangles = (ctx, size, fill_style) => {<br />
    let count = size;<br />
    if (count === 0) throw "TinyVG: Invalid zero length filled rectangles entry";<br />
    let rect = tvgParseRect(ctx);<br />
    let r = tvgCreateSvgNode("rect", rect);<br />
    ctx.doc.appendChild(r);<br />
    ctx.elem = r;<br />
    tvgAddSvgAttribute(ctx.elem, "fill-rule", "evenodd");<br />
    tvgApplyStyle(ctx, fill_style, true);<br />
    const attrs = {};<br />
    attrs.fillRule = "evenodd";<br />
    if (fill_style.kind !== 0) {<br />
        attrs.fill = r.getAttributeNS(null, "fill")<br />
    } else {<br />
        attrs.fill = r.getAttributeNS(null, "fill")<br />
        attrs.fillOpacity = r.getAttributeNS(null, "fill-opacity");<br />
    }<br />
    --count;<br />
    while (count--) {<br />
        rect = tvgParseRect(ctx);<br />
        const localAttrs = { ...attrs, ...rect };<br />
        r = tvgCreateSvgNode("rect", localAttrs);<br />
        ctx.doc.appendChild(r);<br />
        ctx.elem = r;<br />
    }<br />
}<br />
const tvgParseLineFillRectangles = (ctx, size, fill_style, line_style, line_width) => {<br />
    let count = size;<br />
    if (count === 0) throw "TinyVG: Invalid zero length line filled rectangles entry";<br />
    if (line_width === 0) {  // 0 width is invalid<br />
        line_width = .001;<br />
    }<br />
    let rect = tvgParseRect(ctx);<br />
    let r = tvgCreateSvgNode("rect", rect);<br />
    ctx.doc.appendChild(r);<br />
    ctx.elem = r;<br />
    tvgAddSvgAttribute(ctx.elem, "fill-rule", "evenodd");<br />
    tvgAddSvgAttribute(ctx.elem, "stroke-width", line_width);<br />
    tvgApplyStyle(ctx, fill_style, true);<br />
    tvgApplyStyle(ctx, line_style, false);<br />
    const attrs = {};<br />
    attrs.fillRule = "evenodd";<br />
    if (fill_style.kind !== 0) {<br />
        attrs.fill = r.getAttributeNS(null, "fill");<br />
    } else {<br />
        attrs.fill = r.getAttributeNS(null, "fill");<br />
        attrs.fillOpacity = r.getAttributeNS(null, "fill-opacity");<br />
    }<br />
    if (line_style.kind !== 0) {<br />
        attrs.stroke = r.getAttributeNS(null, "stroke");<br />
    } else {<br />
        attrs.stroke = r.getAttributeNS(null, "stroke");<br />
        attrs.strokeOpacity = r.getAttributeNS(null, "stroke-opacity");<br />
    }<br />
    attrs.strokeWidth = line_width;<br />
    --count;<br />
    while (count--) {<br />
        rect = tvgParseRect(ctx);<br />
        const localAttrs = { ...attrs, ...rect };<br />
        r = tvgCreateSvgNode("rect", localAttrs);<br />
        ctx.doc.appendChild(r);<br />
        ctx.elem = r;<br />
    }<br />
}<br />
const tvgParseFillPaths = (ctx, size, style) => {<br />
    if (size === 0) throw "TinyVG: Invalid zero filled paths entry";<br />
    const attrs = {};<br />
    attrs.fillRule = "evenodd";<br />
    attrs.strokeOpacity = 0;<br />
    attrs.strokeWidth = 0;<br />
    const sizes = [];<br />
    for (let i = 0; i < size; ++i) {<br />
        sizes.push(tvgReadU32(ctx) + 1);<br />
    }<br />
    let p = tvgCreateSvgNode("path", attrs);<br />
    ctx.doc.appendChild(p);<br />
    ctx.elem = p;<br />
    tvgApplyStyle(ctx, style, true);<br />
    if (style.kind !== 0) {<br />
        attrs.fill = p.getAttributeNS(null, "fill");<br />
    } else {<br />
        attrs.fill = p.getAttributeNS(null, "fill");<br />
        attrs.fillOpacity = p.getAttributeNS(null, "fill-opacity");<br />
    }<br />
    let d = tvgParsePathD(ctx, sizes[0]);<br />
    for (let i = 1; i < size; ++i) {<br />
        d+= ` ${tvgParsePathD(ctx, sizes[i])}`;<br />
    }<br />
    tvgAddSvgAttribute(p, "d", d);<br />
}<br />
const tvgParseLinePaths = (ctx, size, line_style, line_width) => {<br />
    if (size === 0) throw "TinyVG: Invalid zero line paths entry";<br />
    if (line_width === 0) {  // 0 width is invalid<br />
        line_width = .001;<br />
    }<br />
    const attrs = {};<br />
    const sizes = [];<br />
    for (let i = 0; i < size; ++i) {<br />
        sizes.push(tvgReadU32(ctx) + 1);<br />
    }<br />
    let p = tvgCreateSvgNode("path", attrs);<br />
    ctx.doc.appendChild(p);<br />
    ctx.elem = p;<br />
    tvgAddSvgAttribute(ctx.elem, "fill-opacity", 0);<br />
    tvgAddSvgAttribute(ctx.elem, "stroke-width", line_width);<br />
    tvgApplyStyle(ctx, line_style, false);<br />
    if (line_style.kind !== 0) {<br />
        attrs.stroke = p.getAttributeNS(null, "stroke");<br />
    } else {<br />
        attrs.stroke = p.getAttributeNS(null, "stroke");<br />
        attrs.strokeOpacity = p.getAttributeNS(null, "stroke-opacity");<br />
    }<br />
    attrs.strokeWidth = line_width;<br />
    attrs.fillOpacity = 0;<br />
    let d = tvgParsePathD(ctx, sizes[0]);<br />
    for (let i = 1; i < size; ++i) {<br />
        d+= ` ${tvgParsePathD(ctx, sizes[i])}`;<br />
    }<br />
    tvgAddSvgAttribute(p, "d", d);<br />
}<br />
const tvgParseLineFillPaths = (ctx, size, fill_style, line_style, line_width) => {<br />
    if (size === 0) throw "TinyVG: Invalid zero line filled paths entry";<br />
    if (line_width === 0) {  // 0 width is invalid<br />
        line_width = .001;<br />
    }<br />
    const attrs = {};<br />
    attrs.fillRule = "evenodd";<br />
    const sizes = [];<br />
    for (let i = 0; i < size; ++i) {<br />
        sizes.push(tvgReadU32(ctx) + 1);<br />
    }<br />
    let p = tvgCreateSvgNode("path", attrs);<br />
    ctx.doc.appendChild(p);<br />
    ctx.elem = p;<br />
    tvgApplyStyle(ctx, fill_style, true);<br />
    if (fill_style.kind !== 0) {<br />
        attrs.fill = p.getAttributeNS(null, "fill");<br />
    } else {<br />
        attrs.fill = p.getAttributeNS(null, "fill");<br />
        attrs.fillOpacity = p.getAttributeNS(null, "fill-opacity");<br />
    }<br />
    tvgApplyStyle(ctx, line_style, false);<br />
    if (line_style.kind !== 0) {<br />
        attrs.stroke = p.getAttributeNS(null, "stroke");<br />
    } else {<br />
        attrs.stroke = p.getAttributeNS(null, "stroke");<br />
        attrs.strokeOpacity = p.getAttributeNS(null, "stroke-opacity");<br />
    }<br />
    attrs.strokeWidth = line_width;<br />
    tvgAddSvgAttribute(p, "stroke-width", line_width);<br />
    let d = tvgParsePathD(ctx, sizes[0]);<br />
    for (let i = 1; i < size; ++i) {<br />
        d+= ` ${tvgParsePathD(ctx, sizes[i])}`;<br />
    }<br />
    tvgAddSvgAttribute(p, "d", d);<br />
}<br />
const tvgParseFillPolygon = (ctx, size, fill_style) => {<br />
    if (size === 0) throw "TinyVG: Invalid zero polygon entry";<br />
    let count = size;<br />
    let points = "";<br />
    let pt = tvgReadPoint(ctx);<br />
    points += `${pt.x},${pt.y}`;<br />
    while (--count) {<br />
        pt = tvgReadPoint(ctx);<br />
        points += ` ${pt.x},${pt.y}`;<br />
    }<br />
    const attrs = { fillRule: "evenodd", points: points };<br />
    let p = tvgCreateSvgNode("polygon", attrs);<br />
    ctx.doc.appendChild(p);<br />
    ctx.elem = p;<br />
    tvgApplyStyle(ctx, fill_style, true);<br />
}<br />
const tvgParsePolyline = (ctx, size, line_style, line_width, close) => {<br />
    if (size === 0) throw "TinyVG: Invalid zero polyline entry";<br />
    if (line_width === 0) {  // 0 width is invalid<br />
        line_width = .001;<br />
    }<br />
    let count = size;<br />
    let points = "";<br />
    let pt = tvgReadPoint(ctx);<br />
    points += `${pt.x},${pt.y}`;<br />
    while (--count) {<br />
        pt = tvgReadPoint(ctx);<br />
        points += ` ${pt.x},${pt.y}`;<br />
    }<br />
    const attrs = { points: points, lineWidth: line_width, fillOpacity: 0 };<br />
    let p = tvgCreateSvgNode(close ? "polygon" : "polyline", attrs);<br />
    ctx.doc.appendChild(p);<br />
    ctx.elem = p;<br />
    tvgApplyStyle(ctx, line_style, false);<br />
}<br />
const tvgParseLineFillPolyline = (ctx, size, fill_style, line_style, line_width, close) => {<br />
    if (size === 0) throw "TinyVG: Invalid zero line fill polyline entry";<br />
    if (line_width === 0) {  // 0 width is invalid<br />
        line_width = .001;<br />
    }<br />
    let count = size;<br />
    let points = "";<br />
    let pt = tvgReadPoint(ctx);<br />
    points += `${pt.x},${pt.y}`;<br />
    while (--count) {<br />
        pt = tvgReadPoint(ctx);<br />
        points += ` ${pt.x},${pt.y}`;<br />
    }<br />
    const attrs = { points: points, lineWidth: line_width, fillRule: "evenodd" };<br />
    let p = tvgCreateSvgNode(close ? "polygon" : "polyline", attrs);<br />
    ctx.doc.appendChild(p);<br />
    ctx.elem = p;<br />
    tvgApplyStyle(ctx, fill_style, true);<br />
    tvgApplyStyle(ctx, line_style, false);<br />
}<br />
const tvgParseLines = (ctx, size, line_style, line_width) => {<br />
    if (size === 0) throw "TinyVG: Invalid zero lines entry";<br />
    for (let i = 0; i < size; ++i) {<br />
        const pt1 = tvgReadPoint(ctx);<br />
        const pt2 = tvgReadPoint(ctx);<br />
        const attrs = { x1: pt1.x, y1: pt1.y, x2: pt2.x, y2: pt2.y, strokeWidth: line_width };<br />
        let l = tvgCreateSvgNode("line", attrs);<br />
        ctx.doc.appendChild(l);<br />
        ctx.elem = l;<br />
        tvgApplyStyle(ctx, line_style, false);<br />
    }<br />
}<br />
const tvgParseCommands = (ctx) => {<br />
    let cmd = 255;<br />
    while (cmd != 0) {<br />
        cmd = ctx.view.getUint8(ctx.cursor++);<br />
        switch (cmd & 0x3F) {<br />
            case 0: // TVG_CMD_END_DOCUMENT:<br />
                // console.log("TVG END");<br />
                break;<br />
            case 1: { // TVG_CMD_FILL_POLYGON: <br />
                // console.log("TVG FILL POLYGON");<br />
                const data = tvgParseFillHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParseFillPolygon(ctx, data.size, data.style);<br />
            } break;<br />
            case 2: { // TVG_CMD_FILL_RECTANGLES: <br />
                // console.log("TVG FILL RECTANGLES");<br />
                const data = tvgParseFillHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParseFillRectangles(ctx, data.size, data.style);<br />
            } break;<br />
            case 3: { // TVG_CMD_FILL_PATH: <br />
                // console.log("TVG FILL PATH");<br />
                const data = tvgParseFillHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParseFillPaths(ctx, data.size, data.style);<br />
            } break;<br />
            case 4: { // TVG_CMD_DRAW_LINES: <br />
                // console.log("TVG LINES");<br />
                const data = tvgParseLineHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParseLines(ctx, data.size, data.style, data.line_width);<br />
            } break;<br />
            case 5: { // TVG_CMD_DRAW_LINE_LOOP: <br />
                // console.log("TVG LINE LOOP");<br />
                const data = tvgParseLineHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParsePolyline(ctx, data.size, data.style, data.line_width, true);<br />
            } break;<br />
            case 6: { // TVG_CMD_DRAW_LINE_STRIP:<br />
                // console.log("TVG LINE STRIP");<br />
                const data = tvgParseLineHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParsePolyline(ctx, data.size, data.style, data.line_width, false);<br />
            } break;<br />
            case 7: { // TVG_CMD_DRAW_LINE_PATH: <br />
                // console.log("TVG LINE PATH");<br />
                const data = tvgParseLineHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParseLinePaths(ctx, data.size, data.style, data.line_width);<br />
            } break;<br />
            case 8: { // TVG_CMD_OUTLINE_FILL_POLYGON: <br />
                // console.log("TVG OUTLINE FILL POLYGON");<br />
                const data = tvgParseLineFillHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParseLineFillPolyline(ctx, data.size, data.fill_style, data.line_style, data.line_width, true);<br />
            } break;<br />
            case 9: { // TVG_CMD_OUTLINE_FILL_RECTANGLES:<br />
                // console.log("TVG OUTLINE FILL RECTANGLES");<br />
                const data = tvgParseLineFillHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParseLineFillRectangles(ctx, data.size, data.fill_style, data.line_style, data.line_width);<br />
            } break;<br />
            case 10: { // TVG_CMD_OUTLINE_FILL_PATH: <br />
                // console.log("TVG OUTLINE FILL PATH");<br />
                const data = tvgParseLineFillHeader(ctx, (cmd >>> 6) & 3);<br />
                tvgParseLineFillPaths(ctx, data.size, data.fill_style, data.line_style, data.line_width);<br />
            } break;<br />
            default:<br />
                throw `TinyVG: Invalid command in document (0x${tvgToHex(cmd)})`;<br />
        }<br />
    }<br />
}<br />
// get the {width, height} of a TVG in an arraybuffer<br />
export const tvgDimensions = (data) => {<br />
    if (data) {<br />
        const view = new DataView(data);<br />
        if (view.byteLength > 5) {<br />
            // check for TVG v 1.0 header<br />
            if (view.getUint8(0) == 0x72 && view.getUint8(1) == 0x56 && view.getUint8(2) == 1) {<br />
                const flags = view.getUint8(3);<br />
                const range = (flags >>> 6) & 0x03;<br />
                const w = tvgReadCoordBI(range, 4, data);<br />
                const h = tvgReadCoordBI(range, 4 + tvgAdvCoord(range), data);<br />
                const dim = {<br />
                    width: tvgMapZeroToMax(range, w),<br />
                    height: tvgMapZeroToMax(range, h)<br />
                };<br />
                return dim;<br />
            }<br />
        }<br />
    }<br />
    return undefined;<br />
}<br />
// Render a TVG in an arraybuffer (data) to an SVG tag indicated by the id<br />
export const tvgRender = (id, data) => {<br />
    if (!id) throw "TinyVG: Must specify the id of an SVG element";<br />
    if (!data) throw "TinyVG: Must provide an ArrayBuffer with TVG data";<br />
    const view = new DataView(data);<br />
    if (view.byteLength > 5) {<br />
        if (view.getUint8(0) == 0x72 && view.getUint8(1) == 0x56 && view.getUint8(2) == 1) {<br />
            const ctx = tvgInit(data, id);<br />
            if (ctx.doc) {<br />
                const flags = view.getUint8(3);<br />
                ctx.scale = (flags & 0xF);<br />
                ctx.color_encoding = ((flags >>> 4) & 0x3);<br />
                ctx.coord_range = (flags >>> 6) & 0x03;<br />
                ctx.cursor = 4;<br />
                const w = tvgReadCoord(ctx);<br />
                const h = tvgReadCoord(ctx);<br />
                ctx.width = tvgMapZeroToMax(ctx, w);<br />
                ctx.height = tvgMapZeroToMax(ctx, h);<br />
                const colcount = tvgReadU32(ctx);<br />
                if (!colcount || colcount === 0) throw "TinyVG: invalid format - color table contains nothing";<br />
                for (let i = 0; i < colcount; ++i) {<br />
                    ctx.colors.push(tvgReadColor(ctx));<br />
                }<br />
                while (ctx.doc.firstChild) {<br />
                    ctx.doc.removeChild(ctx.doc.lastChild);<br />
                }<br />
                tvgAddSvgAttribute(ctx.doc, "width", w.toString(10));<br />
                tvgAddSvgAttribute(ctx.doc, "height", h.toString(10));<br />
                tvgAddSvgAttribute(ctx.doc, "viewBox", `0 0 ${w} ${h}`);<br />
                tvgParseCommands(ctx);<br />
                return;<br />
            }<br />
        }<br />
    }<br />
    throw "TinyVG: Not a valid TinyVG file";<br />
}