npm - @scratch/scratch-svg-renderer - Versions diffs - 11.0.0-beta.1 - Mend

@scratch/scratch-svg-renderer 11.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/.editorconfig +15 -0
package/.eslintignore +3 -0
package/.eslintrc.js +10 -0
package/.gitattributes +38 -0
package/.nvmrc +1 -0
package/CHANGELOG.md +1300 -0
package/LICENSE +12 -0
package/README.md +89 -0
package/TRADEMARK +1 -0
package/commitlint.config.js +4 -0
package/package.json +76 -0
package/playground/index.html +132 -0
package/playground/scratch-svg-renderer.js +17830 -0
package/playground/scratch-svg-renderer.js.map +1 -0
package/release.config.js +14 -0
package/src/bitmap-adapter.js +156 -0
package/src/fixup-svg-string.js +61 -0
package/src/font-converter.js +38 -0
package/src/font-inliner.js +50 -0
package/src/index.js +22 -0
package/src/load-svg-string.js +334 -0
package/src/playground/index.html +132 -0
package/src/sanitize-svg.js +104 -0
package/src/serialize-svg-to-string.js +19 -0
package/src/svg-element.js +71 -0
package/src/svg-renderer.js +169 -0
package/src/transform-applier.js +628 -0
package/src/util/log.js +4 -0
package/test/bitmapAdapter_getResized.js +102 -0
package/test/fixtures/css-import.sanitized.svg +5 -0
package/test/fixtures/css-import.svg +11 -0
package/test/fixtures/embedded-cat-foo.sanitized.svg +3 -0
package/test/fixtures/embedded-cat-foo.svg +3 -0
package/test/fixtures/embedded-cat-xlink.svg +3 -0
package/test/fixtures/hearts.svg +31 -0
package/test/fixtures/invalid-cloud.svg +1 -0
package/test/fixtures/metadata-body.svg +6 -0
package/test/fixtures/metadata-onload.sanitized.svg +3 -0
package/test/fixtures/metadata-onload.svg +7 -0
package/test/fixtures/onload-script.svg +7 -0
package/test/fixtures/red-and-white-carousel-pound-in-href.sanitized.svg +74 -0
package/test/fixtures/red-and-white-carousel-pound-in-href.svg +74 -0
package/test/fixtures/reserved-namespace.sanitized.svg +3 -0
package/test/fixtures/reserved-namespace.svg +4 -0
package/test/fixtures/scratch_cat_bitmap_within_svg.sanitized.svg +1 -0
package/test/fixtures/scratch_cat_bitmap_within_svg.svg +1 -0
package/test/fixtures/script.sanitized.svg +4 -0
package/test/fixtures/script.svg +8 -0
package/test/fixtures/svg-tag-prefixes.svg +37 -0
package/test/fixup-svg-string.js +144 -0
package/test/sanitize-svg.js +34 -0
package/test/test-output/transform-applier-test.html +373 -0
package/test/transform-applier.js +796 -0
package/webpack.config.js +72 -0

package/src/playground/index.html ADDED Viewed

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Scratch SVG rendering playground</title>
+    <style>
+        .result {
+            background-color:gray;
+        }
+        #reference {
+            display:inline-block;
+            font-size:0;
+        }
+        .column {
+            display:inline-block;
+        }
+    </style>
+</head>
+<body>
+    <p>
+        <input type="file" id="svg-file-upload", accept="image/svg+xml">
+    </p>
+    <p>
+        <label for="render-scale">Scale:</label>
+        <input type="range" style="width:50%;" id="render-scale" value="1" min="0.5" max="3" step="any">
+        <label for="render-scale" id="scale-display"></label>
+    </p>
+    <p>
+        <input type="button" id="trigger-render" value="Render">
+        <label for="shouldRenderReference">
+          <input type="checkbox" id="shouldRenderReference" checked />
+          Render Reference?
+        </label>
+    </p>
+    <div class="columns">
+        <div class="column">
+            <div>Rendered Result</div>
+            <canvas id="render-canvas" class="result"></canvas>
+       </div>
+       <div class="column">
+            <div>Reference</div>
+            <span id="reference"></span>
+       </div>
+     </div>
+    <div class="columns">
+        <div class="column">
+            <div>Rendered Content</div>
+            <textarea id="renderedContent" wrap="off" cols="50" rows="50"></textarea>
+       </div>
+       <div class="column">
+            <div>Reference</div>
+            <span id="reference"></span>
+            <textarea id="referenceContent" wrap="off" cols="50" rows="50"></textarea>
+       </div>
+     </div>
+    <script src="scratch-svg-renderer.js"></script>
+    <script>
+        const renderCanvas = document.getElementById("render-canvas");
+        const referenceImage = document.getElementById("reference");
+        const fileChooser = document.getElementById("svg-file-upload");
+        const scaleSlider = document.getElementById("render-scale");
+        const scaleDisplay = document.getElementById("scale-display");
+        const renderButton = document.getElementById("trigger-render");
+        const renderer = new ScratchSVGRenderer.SVGRenderer(renderCanvas);
+        let loadedSVGString = "";
+        if (fileChooser.value) {
+            loadSVGString();
+        }
+        function renderSVGString() {
+            if (renderer.loaded) {
+                renderer.draw(parseFloat(scaleSlider.value));
+            }
+            renderedContent.value = renderer.toString(true);
+        }
+        function updateReferenceImage() {
+            referenceImage.innerHTML = loadedSVGString;
+            scalePercent = (parseFloat(scaleSlider.value) * 100) + "%"
+            referenceSVG = referenceImage.children[0];
+            referenceSVG.style.width = referenceSVG.style.height = scalePercent;
+            referenceSVG.classList.add("result");
+        }
+        function readFileAsText(file) {
+            return new Promise((res, rej) => {
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    res(reader.result);
+                }
+                reader.onerror = console.log;
+                reader.readAsText(file);
+            })
+        }
+        function loadSVGString() {
+            readFileAsText(fileChooser.files[0]).then(str => {
+                loadedSVGString = str;
+                renderer.loadSVG(str, false);
+            })
+        }
+        function renderLoadedString() {
+            renderSVGString();
+            referenceContent.value = loadedSVGString;
+            shouldRenderReference.checked && updateReferenceImage();
+        }
+        function scaleSliderChanged() {
+            renderLoadedString();
+            scaleDisplay.innerText = scaleSlider.value;
+        }
+        fileChooser.addEventListener("change", loadSVGString);
+        scaleSlider.addEventListener("change", scaleSliderChanged);
+        scaleSlider.addEventListener("input", scaleSliderChanged);
+        renderButton.addEventListener("click", (event => {
+            renderLoadedString();
+        }));
+    </script>
+</body>
+</html>

package/src/sanitize-svg.js ADDED Viewed

@@ -0,0 +1,104 @@
+/**
+ * @fileOverview Sanitize the content of an SVG aggressively, to make it as safe
+ * as possible
+ */
+const fixupSvgString = require('./fixup-svg-string');
+const {generate, parse, walk} = require('css-tree');
+const DOMPurify = require('isomorphic-dompurify');
+const sanitizeSvg = {};
+DOMPurify.addHook(
+    'beforeSanitizeAttributes',
+    currentNode => {
+        if (currentNode && currentNode.href && currentNode.href.baseVal) {
+            const href = currentNode.href.baseVal.replace(/\s/g, '');
+            // "data:" and "#" are valid hrefs
+            if ((href.slice(0, 5) !== 'data:') && (href.slice(0, 1) !== '#')) {
+                if (currentNode.attributes.getNamedItem('xlink:href')) {
+                    currentNode.attributes.removeNamedItem('xlink:href');
+                    delete currentNode['xlink:href'];
+                }
+                if (currentNode.attributes.getNamedItem('href')) {
+                    currentNode.attributes.removeNamedItem('href');
+                    delete currentNode.href;
+                }
+            }
+        }
+        return currentNode;
+    }
+);
+DOMPurify.addHook(
+    'uponSanitizeElement',
+    (node, data) => {
+        if (data.tagName === 'style') {
+            const ast = parse(node.textContent);
+            let isModified = false;
+            // Remove any @import rules as it could leak HTTP requests
+            walk(ast, (astNode, item, list) => {
+                if (astNode.type === 'Atrule' && astNode.name === 'import') {
+                    list.remove(item);
+                    isModified = true;
+                }
+            });
+            if (isModified) {
+                node.textContent = generate(ast);
+            }
+        }
+    }
+);
+// Use JS implemented TextDecoder and TextEncoder if it is not provided by the
+// browser.
+let _TextDecoder;
+let _TextEncoder;
+if (typeof TextDecoder === 'undefined' || typeof TextEncoder === 'undefined') {
+    // Wait to require the text encoding polyfill until we know it's needed.
+    // eslint-disable-next-line global-require
+    const encoding = require('fastestsmallesttextencoderdecoder');
+    _TextDecoder = encoding.TextDecoder;
+    _TextEncoder = encoding.TextEncoder;
+} else {
+    _TextDecoder = TextDecoder;
+    _TextEncoder = TextEncoder;
+}
+/**
+ * Load an SVG Uint8Array of bytes and "sanitize" it
+ * @param {!Uint8Array} rawData unsanitized SVG daata
+ * @return {Uint8Array} sanitized SVG data
+ */
+sanitizeSvg.sanitizeByteStream = function (rawData) {
+    const decoder = new _TextDecoder();
+    const encoder = new _TextEncoder();
+    const sanitizedText = sanitizeSvg.sanitizeSvgText(decoder.decode(rawData));
+    return encoder.encode(sanitizedText);
+};
+/**
+ * Load an SVG string and "sanitize" it. This is more aggressive than the handling in
+ * fixup-svg-string.js, and thus more risky; there are known examples of SVGs that
+ * it will clobber. We use DOMPurify's svg profile, which restricts many types of tag.
+ * @param {!string} rawSvgText unsanitized SVG string
+ * @return {string} sanitized SVG text
+ */
+sanitizeSvg.sanitizeSvgText = function (rawSvgText) {
+    let sanitizedText = DOMPurify.sanitize(rawSvgText, {
+        USE_PROFILES: {svg: true}
+    });
+    // Remove partial XML comment that is sometimes left in the HTML
+    const badTag = sanitizedText.indexOf(']&gt;');
+    if (badTag >= 0) {
+        sanitizedText = sanitizedText.substring(5, sanitizedText.length);
+    }
+    // also use our custom fixup rules
+    sanitizedText = fixupSvgString(sanitizedText);
+    return sanitizedText;
+};
+module.exports = sanitizeSvg;

package/src/serialize-svg-to-string.js ADDED Viewed

@@ -0,0 +1,19 @@
+const inlineSvgFonts = require('./font-inliner');
+/**
+ * Serialize a given SVG DOM to a string.
+ * @param {SVGSVGElement} svgTag The SVG element to serialize.
+ * @param {?boolean} shouldInjectFonts True if fonts should be included in the SVG as
+ *     base64 data.
+ * @returns {string} String representing current SVG data.
+ */
+const serializeSvgToString = (svgTag, shouldInjectFonts) => {
+    const serializer = new XMLSerializer();
+    let string = serializer.serializeToString(svgTag);
+    if (shouldInjectFonts) {
+        string = inlineSvgFonts(string);
+    }
+    return string;
+};
+module.exports = serializeSvgToString;

package/src/svg-element.js ADDED Viewed

@@ -0,0 +1,71 @@
+/* Adapted from
+ * Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
+ * http://paperjs.org/
+ *
+ * Copyright (c) 2011 - 2016, Juerg Lehni & Jonathan Puckey
+ * http://scratchdisk.com/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ */
+/**
+ * @name SvgElement
+ * @namespace
+ * @private
+ */
+class SvgElement {
+    // SVG related namespaces
+    static get svg () {
+        return 'http://www.w3.org/2000/svg';
+    }
+    static get xmlns () {
+        return 'http://www.w3.org/2000/xmlns';
+    }
+    static get xlink () {
+        return 'http://www.w3.org/1999/xlink';
+    }
+    // Mapping of attribute names to required namespaces:
+    static attributeNamespace () {
+        return {
+            'href': SvgElement.xlink,
+            'xlink': SvgElement.xmlns,
+            // Only the xmlns attribute needs the trailing slash. See #984
+            'xmlns': `${SvgElement.xmlns}/`,
+            // IE needs the xmlns namespace when setting 'xmlns:xlink'. See #984
+            'xmlns:xlink': `${SvgElement.xmlns}/`
+        };
+    }
+    static create (tag, attributes, formatter) {
+        return SvgElement.set(document.createElementNS(SvgElement.svg, tag), attributes, formatter);
+    }
+    static get (node, name) {
+        const namespace = SvgElement.attributeNamespace[name];
+        const value = namespace ?
+            node.getAttributeNS(namespace, name) :
+            node.getAttribute(name);
+        return value === 'null' ? null : value;
+    }
+    static set (node, attributes, formatter) {
+        for (const name in attributes) {
+            let value = attributes[name];
+            const namespace = SvgElement.attributeNamespace[name];
+            if (typeof value === 'number' && formatter) {
+                value = formatter.number(value);
+            }
+            if (namespace) {
+                node.setAttributeNS(namespace, name, value);
+            } else {
+                node.setAttribute(name, value);
+            }
+        }
+        return node;
+    }
+}
+module.exports = SvgElement;

package/src/svg-renderer.js ADDED Viewed

@@ -0,0 +1,169 @@
+const loadSvgString = require('./load-svg-string');
+const serializeSvgToString = require('./serialize-svg-to-string');
+/**
+ * Main quirks-mode SVG rendering code.
+ * @deprecated Call into individual methods exported from this library instead.
+ */
+class SvgRenderer {
+    /**
+     * Create a quirks-mode SVG renderer for a particular canvas.
+     * @param {HTMLCanvasElement} [canvas] An optional canvas element to draw to. If this is not provided, the renderer
+     * will create a new canvas.
+     * @constructor
+     */
+    constructor (canvas) {
+        /**
+         * The canvas that this SVG renderer will render to.
+         * @type {HTMLCanvasElement}
+         * @private
+         */
+        this._canvas = canvas || document.createElement('canvas');
+        this._context = this._canvas.getContext('2d');
+        /**
+         * A measured SVG "viewbox"
+         * @typedef {object} SvgRenderer#SvgMeasurements
+         * @property {number} x - The left edge of the SVG viewbox.
+         * @property {number} y - The top edge of the SVG viewbox.
+         * @property {number} width - The width of the SVG viewbox.
+         * @property {number} height - The height of the SVG viewbox.
+         */
+        /**
+         * The measurement box of the currently loaded SVG.
+         * @type {SvgRenderer#SvgMeasurements}
+         * @private
+         */
+        this._measurements = {x: 0, y: 0, width: 0, height: 0};
+        /**
+         * The `<img>` element with the contents of the currently loaded SVG.
+         * @type {?HTMLImageElement}
+         * @private
+         */
+        this._cachedImage = null;
+        /**
+         * True if this renderer's current SVG is loaded and can be rendered to the canvas.
+         * @type {boolean}
+         */
+        this.loaded = false;
+    }
+    /**
+     * @returns {!HTMLCanvasElement} this renderer's target canvas.
+     */
+    get canvas () {
+        return this._canvas;
+    }
+    /**
+     * @return {Array<number>} the natural size, in Scratch units, of this SVG.
+     */
+    get size () {
+        return [this._measurements.width, this._measurements.height];
+    }
+    /**
+     * @return {Array<number>} the offset (upper left corner) of the SVG's view box.
+     */
+    get viewOffset () {
+        return [this._measurements.x, this._measurements.y];
+    }
+    /**
+     * Load an SVG string and normalize it. All the steps before drawing/measuring.
+     * @param {!string} svgString String of SVG data to draw in quirks-mode.
+     * @param {?boolean} fromVersion2 True if we should perform conversion from
+     *     version 2 to version 3 svg.
+     */
+    loadString (svgString, fromVersion2) {
+        // New svg string invalidates the cached image
+        this._cachedImage = null;
+        const svgTag = loadSvgString(svgString, fromVersion2);
+        this._svgTag = svgTag;
+        this._measurements = {
+            width: svgTag.viewBox.baseVal.width,
+            height: svgTag.viewBox.baseVal.height,
+            x: svgTag.viewBox.baseVal.x,
+            y: svgTag.viewBox.baseVal.y
+        };
+    }
+    /**
+     * Load an SVG string, normalize it, and prepare it for (synchronous) rendering.
+     * @param {!string} svgString String of SVG data to draw in quirks-mode.
+     * @param {?boolean} fromVersion2 True if we should perform conversion from version 2 to version 3 svg.
+     * @param {Function} [onFinish] - An optional callback to call when the SVG is loaded and can be rendered.
+     */
+    loadSVG (svgString, fromVersion2, onFinish) {
+        this.loadString(svgString, fromVersion2);
+        this._createSVGImage(onFinish);
+    }
+    /**
+     * Creates an <img> element for the currently loaded SVG string, then calls the callback once it's loaded.
+     * @param {Function} [onFinish] - An optional callback to call when the <img> has loaded.
+     */
+    _createSVGImage (onFinish) {
+        if (this._cachedImage === null) this._cachedImage = new Image();
+        const img = this._cachedImage;
+        img.onload = () => {
+            this.loaded = true;
+            if (onFinish) onFinish();
+        };
+        const svgText = this.toString(true /* shouldInjectFonts */);
+        img.src = `data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`;
+        this.loaded = false;
+    }
+    /**
+     * Serialize the active SVG DOM to a string.
+     * @param {?boolean} shouldInjectFonts True if fonts should be included in the SVG as
+     *     base64 data.
+     * @returns {string} String representing current SVG data.
+     * @deprecated Use the standalone `serializeSvgToString` export instead.
+     */
+    toString (shouldInjectFonts) {
+        return serializeSvgToString(this._svgTag, shouldInjectFonts);
+    }
+    /**
+     * Synchronously draw the loaded SVG to this renderer's `canvas`.
+     * @param {number} [scale] - Optionally, also scale the image by this factor.
+     */
+    draw (scale) {
+        if (!this.loaded) throw new Error('SVG image has not finished loading');
+        this._drawFromImage(scale);
+    }
+    /**
+     * Draw to the canvas from a loaded image element.
+     * @param {number} [scale] - Optionally, also scale the image by this factor.
+     **/
+    _drawFromImage (scale) {
+        if (this._cachedImage === null) return;
+        const ratio = Number.isFinite(scale) ? scale : 1;
+        const bbox = this._measurements;
+        this._canvas.width = bbox.width * ratio;
+        this._canvas.height = bbox.height * ratio;
+        // Even if the canvas at the current scale has a nonzero size, the image's dimensions are floored pre-scaling.
+        // e.g. if an image has a width of 0.4 and is being rendered at 3x scale, the canvas will have a width of 1, but
+        // the image's width will be rounded down to 0 on some browsers (Firefox) prior to being drawn at that scale.
+        if (
+            this._canvas.width <= 0 ||
+            this._canvas.height <= 0 ||
+            this._cachedImage.naturalWidth <= 0 ||
+            this._cachedImage.naturalHeight <= 0
+        ) return;
+        this._context.clearRect(0, 0, this._canvas.width, this._canvas.height);
+        this._context.setTransform(ratio, 0, 0, ratio, 0, 0);
+        this._context.drawImage(this._cachedImage, 0, 0);
+    }
+}
+module.exports = SvgRenderer;