@scratch/scratch-svg-renderer 11.0.0-UEPR-176

package/dist/web/scratch-svg-renderer.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */

package/dist/web/scratch-svg-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scratch-svg-renderer.js","mappings":";AAAA","sources":["webpack://ScratchSVGRenderer/webpack/universalModuleDefinition"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ScratchSVGRenderer\"] = factory();\n\telse\n\t\troot[\"ScratchSVGRenderer\"] = factory();\n})(self, () => {\nreturn "],"names":[],"sourceRoot":""}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@scratch/scratch-svg-renderer",
+  "version": "11.0.0-UEPR-176",
+  "description": "SVG renderer for Scratch",
+  "main": "./dist/node/scratch-svg-renderer.js",
+  "browser": "./dist/web/scratch-svg-renderer.js",
+  "exports": {
+    "webpack": "./src/index.js",
+    "browser": "./dist/web/scratch-svg-renderer.js",
+    "node": "./dist/node/scratch-svg-renderer.js",
+    "default": "./src/index.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "npm run clean && webpack",
+    "clean": "rimraf dist playground",
+    "start": "webpack-dev-server",
+    "test": "npm run test:lint && npm run test:unit",
+    "test:lint": "eslint . --ext .js",
+    "test:unit": "tap ./test/*.js",
+    "watch": "webpack --watch"
+  },
+  "author": "Massachusetts Institute of Technology",
+  "license": "AGPL-3.0-only",
+  "homepage": "https://github.com/scratchfoundation/scratch-svg-renderer#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scratchfoundation/scratch-editor.git"
+  },
+  "peerDependencies": {
+    "scratch-render-fonts": "^1.0.0"
+  },
+  "tap": {
+    "branches": 70,
+    "functions": 50,
+    "lines": 70,
+    "statements": 70
+  },
+  "dependencies": {
+    "base64-js": "1.5.1",
+    "base64-loader": "1.0.0",
+    "css-tree": "1.1.3",
+    "fastestsmallesttextencoderdecoder": "1.0.22",
+    "isomorphic-dompurify": "2.4.0",
+    "minilog": "3.1.0",
+    "transformation-matrix": "1.15.3"
+  },
+  "devDependencies": {
+    "@babel/core": "7.26.10",
+    "@babel/eslint-parser": "7.26.10",
+    "@babel/preset-env": "7.26.9",
+    "babel-loader": "9.2.1",
+    "copy-webpack-plugin": "4.6.0",
+    "eslint": "8.57.1",
+    "eslint-config-scratch": "9.0.9",
+    "eslint-plugin-import": "2.31.0",
+    "jsdom": "13.2.0",
+    "json": "9.0.6",
+    "mkdirp": "2.1.6",
+    "rimraf": "3.0.2",
+    "scratch-render-fonts": "1.0.177",
+    "scratch-semantic-release-config": "3.0.0",
+    "scratch-webpack-configuration": "3.0.0",
+    "semantic-release": "19.0.5",
+    "tap": "16.3.10",
+    "webpack": "5.98.0",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.2.0",
+    "xmldom": "0.1.31"
+  },
+  "browserslist": [
+    "Chrome >= 63",
+    "Edge >= 15",
+    "Firefox >= 57",
+    "Safari >= 11"
+  ]
+}

package/src/bitmap-adapter.js

@@ -0,0 +1,156 @@
+const base64js = require('base64-js');
+
+/**
+ * Adapts Scratch 2.0 bitmaps for use in scratch 3.0
+ */
+class BitmapAdapter {
+    /**
+     * @param {?function} makeImage HTML image constructor. Tests can provide this.
+     * @param {?function} makeCanvas HTML canvas constructor. Tests can provide this.
+     */
+    constructor (makeImage, makeCanvas) {
+        this._makeImage = makeImage ? makeImage : () => new Image();
+        this._makeCanvas = makeCanvas ? makeCanvas : () => document.createElement('canvas');
+    }
+
+    /**
+     * Return a canvas with the resized version of the given image, done using nearest-neighbor interpolation
+     * @param {CanvasImageSource} image The image to resize
+     * @param {int} newWidth The desired post-resize width of the image
+     * @param {int} newHeight The desired post-resize height of the image
+     * @returns {HTMLCanvasElement} A canvas with the resized image drawn on it.
+     */
+    resize (image, newWidth, newHeight) {
+        // We want to always resize using nearest-neighbor interpolation. However, canvas implementations are free to
+        // use linear interpolation (or other "smooth" interpolation methods) when downscaling:
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=1360415
+        // It seems we can get around this by resizing in two steps: first width, then height. This will always result
+        // in nearest-neighbor interpolation, even when downscaling.
+        const stretchWidthCanvas = this._makeCanvas();
+        stretchWidthCanvas.width = newWidth;
+        stretchWidthCanvas.height = image.height;
+        let context = stretchWidthCanvas.getContext('2d');
+        context.imageSmoothingEnabled = false;
+        context.drawImage(image, 0, 0, stretchWidthCanvas.width, stretchWidthCanvas.height);
+        const stretchHeightCanvas = this._makeCanvas();
+        stretchHeightCanvas.width = newWidth;
+        stretchHeightCanvas.height = newHeight;
+        context = stretchHeightCanvas.getContext('2d');
+        context.imageSmoothingEnabled = false;
+        context.drawImage(stretchWidthCanvas, 0, 0, stretchHeightCanvas.width, stretchHeightCanvas.height);
+        return stretchHeightCanvas;
+    }
+
+    /**
+     * Scratch 2.0 had resolution 1 and 2 bitmaps. All bitmaps in Scratch 3.0 are equivalent
+     * to resolution 2 bitmaps. Therefore, converting a resolution 1 bitmap means doubling
+     * it in width and height.
+     * @param {!string} dataURI Base 64 encoded image data of the bitmap
+     * @param {!function} callback Node-style callback that returns updated dataURI if conversion succeeded
+     */
+    convertResolution1Bitmap (dataURI, callback) {
+        const image = this._makeImage();
+        image.src = dataURI;
+        image.onload = () => {
+            callback(null, this.resize(image, image.width * 2, image.height * 2).toDataURL());
+        };
+        image.onerror = () => {
+            callback('Image load failed');
+        };
+    }
+
+    /**
+     * Given width/height of an uploaded item, return width/height the image will be resized
+     * to in Scratch 3.0
+     * @param {!number} oldWidth original width
+     * @param {!number} oldHeight original height
+     * @return {object} Array of new width, new height
+     */
+    getResizedWidthHeight (oldWidth, oldHeight) {
+        const STAGE_WIDTH = 480;
+        const STAGE_HEIGHT = 360;
+        const STAGE_RATIO = STAGE_WIDTH / STAGE_HEIGHT;
+
+        // If both dimensions are smaller than or equal to corresponding stage dimension,
+        // double both dimensions
+        if ((oldWidth <= STAGE_WIDTH) && (oldHeight <= STAGE_HEIGHT)) {
+            return {width: oldWidth * 2, height: oldHeight * 2};
+        }
+
+        // If neither dimension is larger than 2x corresponding stage dimension,
+        // this is an in-between image, return it as is
+        if ((oldWidth <= STAGE_WIDTH * 2) && (oldHeight <= STAGE_HEIGHT * 2)) {
+            return {width: oldWidth, height: oldHeight};
+        }
+
+        const imageRatio = oldWidth / oldHeight;
+        // Otherwise, figure out how to resize
+        if (imageRatio >= STAGE_RATIO) {
+            // Wide Image
+            return {width: STAGE_WIDTH * 2, height: STAGE_WIDTH * 2 / imageRatio};
+        }
+        // In this case we have either:
+        // - A wide image, but not with as big a ratio between width and height,
+        // making it so that fitting the width to double stage size would leave
+        // the height too big to fit in double the stage height
+        // - A square image that's still larger than the double at least
+        // one of the stage dimensions, so pick the smaller of the two dimensions (to fit)
+        // - A tall image
+        // In any of these cases, resize the image to fit the height to double the stage height
+        return {width: STAGE_HEIGHT * 2 * imageRatio, height: STAGE_HEIGHT * 2};
+    }
+
+    /**
+     * Given bitmap data, resize as necessary.
+     * @param {ArrayBuffer | string} fileData Base 64 encoded image data of the bitmap
+     * @param {string} fileType The MIME type of this file
+     * @returns {Promise} Resolves to resized image data Uint8Array
+     */
+    importBitmap (fileData, fileType) {
+        let dataURI = fileData;
+        if (fileData instanceof ArrayBuffer) {
+            dataURI = this.convertBinaryToDataURI(fileData, fileType);
+        }
+        return new Promise((resolve, reject) => {
+            const image = this._makeImage();
+            image.src = dataURI;
+            image.onload = () => {
+                const newSize = this.getResizedWidthHeight(image.width, image.height);
+                if (newSize.width === image.width && newSize.height === image.height) {
+                    // No change
+                    resolve(this.convertDataURIToBinary(dataURI));
+                } else {
+                    const resizedDataURI = this.resize(image, newSize.width, newSize.height).toDataURL();
+                    resolve(this.convertDataURIToBinary(resizedDataURI));
+                }
+            };
+            image.onerror = () => {
+                // TODO: reject with an Error (breaking API change!)
+                // eslint-disable-next-line prefer-promise-reject-errors
+                reject('Image load failed');
+            };
+        });
+    }
+
+    // TODO consolidate with scratch-vm/src/util/base64-util.js
+    // From https://gist.github.com/borismus/1032746
+    convertDataURIToBinary (dataURI) {
+        const BASE64_MARKER = ';base64,';
+        const base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
+        const base64 = dataURI.substring(base64Index);
+        const raw = window.atob(base64);
+        const rawLength = raw.length;
+        const array = new Uint8Array(new ArrayBuffer(rawLength));
+
+        for (let i = 0; i < rawLength; i++) {
+            array[i] = raw.charCodeAt(i);
+        }
+        return array;
+    }
+
+    convertBinaryToDataURI (arrayBuffer, contentType) {
+        return `data:${contentType};base64,${base64js.fromByteArray(new Uint8Array(arrayBuffer))}`;
+    }
+}
+
+module.exports = BitmapAdapter;

package/src/fixup-svg-string.js

@@ -0,0 +1,61 @@
+/**
+ * Fixup svg string prior to parsing.
+ * @param {!string} svgString String of the svg to fix.
+ * @returns {!string} fixed svg that should be parseable.
+ */
+module.exports = function (svgString) {
+    // Add root svg namespace if it does not exist.
+    const svgAttrs = svgString.match(/<svg [^>]*>/);
+    if (svgAttrs && svgAttrs[0].indexOf('xmlns=') === -1) {
+        svgString = svgString.replace('<svg ', '<svg xmlns="http://www.w3.org/2000/svg" ');
+    }
+
+    // There are some SVGs from Illustrator that use undeclared entities.
+    // Just replace those entities with fake namespace references to prevent
+    // DOMParser from crashing
+    if (svgAttrs && svgAttrs[0].indexOf('&ns_') !== -1 && svgString.indexOf('<!DOCTYPE') === -1) {
+        svgString = svgString.replace(svgAttrs[0],
+            svgAttrs[0].replace(/&ns_[^;]+;/g, 'http://ns.adobe.com/Extensibility/1.0/'));
+    }
+
+    // Some SVGs exported from Photoshop have been found to have an invalid mime type
+    // Chrome and Safari won't render these SVGs, so we correct it here
+    if (svgString.includes('data:img/png')) {
+        svgString = svgString.replace(
+            // capture entire image tag with xlink:href=and the quote - dont capture data: bit
+            /(<image[^>]+?xlink:href=["'])data:img\/png/g,
+            // use the captured <image ..... xlink:href=" then append the right data uri mime type
+            ($0, $1) => `${$1}data:image/png`
+        );
+    }
+
+    // Some SVGs from Inkscape attempt to bind a prefix to a reserved namespace name.
+    // This will cause SVG parsing to fail, so replace these with a dummy namespace name.
+    // This namespace name is only valid for "xml", and if we bind "xmlns:xml" to the dummy namespace,
+    // parsing will fail yet again, so exclude "xmlns:xml" declarations.
+    const xmlnsRegex = /(<[^>]+?xmlns:(?!xml=)[^ ]+=)"http:\/\/www.w3.org\/XML\/1998\/namespace"/g;
+    if (svgString.match(xmlnsRegex) !== null) {
+        svgString = svgString.replace(
+            // capture the entire attribute
+            xmlnsRegex,
+            // use the captured attribute name; replace only the URL
+            ($0, $1) => `${$1}"http://dummy.namespace"`
+        );
+    }
+
+    // Strip `svg:` prefix (sometimes added by Inkscape) from all tags. They interfere with DOMPurify (prefixed tag
+    // names are not recognized) and the paint editor.
+    // This matches opening and closing tags--the capture group captures the slash if it exists, and it is reinserted
+    // in the replacement text.
+    svgString = svgString.replace(/<(\/?)\s*svg:/g, '<$1');
+
+    // The <metadata> element is not needed for rendering and sometimes contains
+    // unparseable garbage from Illustrator :( Empty out the contents.
+    // Note: [\s\S] matches everything including newlines, which .* does not
+    svgString = svgString.replace(/<metadata>[\s\S]*<\/metadata>/, '<metadata></metadata>');
+
+    // Empty script tags and javascript executing
+    svgString = svgString.replace(/<script[\s\S]*>[\s\S]*<\/script>/, '<script></script>');
+
+    return svgString;
+};

package/src/font-converter.js

@@ -0,0 +1,38 @@
+/**
+ * @fileOverview Convert 2.0 fonts to 3.0 fonts.
+ */
+
+/**
+ * Given an SVG, replace Scratch 2.0 fonts with new 3.0 fonts. Add defaults where there are none.
+ * @param {SVGElement} svgTag The SVG dom object
+ * @return {void}
+ */
+const convertFonts = function (svgTag) {
+    // Collect all text elements into a list.
+    const textElements = [];
+    const collectText = domElement => {
+        if (domElement.localName === 'text') {
+            textElements.push(domElement);
+        }
+        for (let i = 0; i < domElement.childNodes.length; i++) {
+            collectText(domElement.childNodes[i]);
+        }
+    };
+    collectText(svgTag);
+    // If there's an old font-family, switch to the new one.
+    for (const textElement of textElements) {
+        // If there's no font-family provided, provide one.
+        if (!textElement.getAttribute('font-family') ||
+            textElement.getAttribute('font-family') === 'Helvetica') {
+            textElement.setAttribute('font-family', 'Sans Serif');
+        } else if (textElement.getAttribute('font-family') === 'Mystery') {
+            textElement.setAttribute('font-family', 'Curly');
+        } else if (textElement.getAttribute('font-family') === 'Gloria') {
+            textElement.setAttribute('font-family', 'Handwriting');
+        } else if (textElement.getAttribute('font-family') === 'Donegal') {
+            textElement.setAttribute('font-family', 'Serif');
+        }
+    }
+};
+
+module.exports = convertFonts;

package/src/font-inliner.js

@@ -0,0 +1,50 @@
+/**
+ * @fileOverview Import bitmap data into Scratch 3.0, resizing image as necessary.
+ */
+const getFonts = require('scratch-render-fonts');
+
+/**
+ * Given SVG data, inline the fonts. This allows them to be rendered correctly when set
+ * as the source of an HTMLImageElement. Here is a note from tmickel:
+ *   // Inject fonts that are needed.
+ *   // It would be nice if there were another way to get the SVG-in-canvas
+ *   // to render the correct font family, but I couldn't find any other way.
+ *   // Other things I tried:
+ *   // Just injecting the font-family into the document: no effect.
+ *   // External stylesheet linked to by SVG: no effect.
+ *   // Using a <link> or <style>@import</style> to link to font-family
+ *   // injected into the document: no effect.
+ * @param {string} svgString The string representation of the svg to modify
+ * @return {string} The svg with any needed fonts inlined
+ */
+const inlineSvgFonts = function (svgString) {
+    const FONTS = getFonts();
+    // Make it clear that this function only operates on strings.
+    // If we don't explicitly throw this here, the function silently fails.
+    if (typeof svgString !== 'string') {
+        throw new Error('SVG to be inlined is not a string');
+    }
+
+    // Collect fonts that need injection.
+    const fontsNeeded = new Set();
+    const fontRegex = /font-family="([^"]*)"/g;
+    let matches = fontRegex.exec(svgString);
+    while (matches) {
+        fontsNeeded.add(matches[1]);
+        matches = fontRegex.exec(svgString);
+    }
+    if (fontsNeeded.size > 0) {
+        let str = '<defs><style>';
+        for (const font of fontsNeeded) {
+            if (Object.prototype.hasOwnProperty.call(FONTS, font)) {
+                str += `${FONTS[font]}`;
+            }
+        }
+        str += '</style></defs>';
+        svgString = svgString.replace(/<svg[^>]*>/, `$&${str}`);
+        return svgString;
+    }
+    return svgString;
+};
+
+module.exports = inlineSvgFonts;

package/src/index.js

@@ -0,0 +1,22 @@
+const SVGRenderer = require('./svg-renderer');
+const BitmapAdapter = require('./bitmap-adapter');
+const inlineSvgFonts = require('./font-inliner');
+const loadSvgString = require('./load-svg-string');
+const sanitizeSvg = require('./sanitize-svg');
+const serializeSvgToString = require('./serialize-svg-to-string');
+const SvgElement = require('./svg-element');
+const convertFonts = require('./font-converter');
+// /**
+//  * Export for NPM & Node.js
+//  * @type {RenderWebGL}
+//  */
+module.exports = {
+    BitmapAdapter: BitmapAdapter,
+    convertFonts: convertFonts,
+    inlineSvgFonts: inlineSvgFonts,
+    loadSvgString: loadSvgString,
+    sanitizeSvg: sanitizeSvg,
+    serializeSvgToString: serializeSvgToString,
+    SvgElement: SvgElement,
+    SVGRenderer: SVGRenderer
+};