Merge pull request #179 from paulkaplan/fix-bbox-strokes

Enlarge bounding box by the largest stroke width.

Author: paulkaplan

src/svg-quirks-mode/svg-renderer.js

@@ -162,6 +162,34 @@ class SvgRenderer {
         this._svgTag.insertBefore(newDefs, this._svgTag.childNodes[0]);
     }
 
+    /**
+     * Find the largest stroke width in the svg. If a shape has no
+     * `stroke` property, it has a stroke-width of 0. If it has a `stroke`,
+     * it is by default a stroke-width of 1.
+     * This is used to enlarge the computed bounding box, which doesn't take
+     * stroke width into account.
+     * @param {SVGSVGElement} rootNode The root SVG node to traverse.
+     * @return {number} The largest stroke width in the SVG.
+     */
+    _findLargestStrokeWidth (rootNode) {
+        let largestStrokeWidth = 0;
+        const collectStrokeWidths = domElement => {
+            if (domElement.getAttribute) {
+                if (domElement.getAttribute('stroke')) {
+                    largestStrokeWidth = Math.max(largestStrokeWidth, 1);
+                }
+                if (domElement.getAttribute('stroke-width')) {
+                    largestStrokeWidth = Math.max(largestStrokeWidth, Number(domElement.getAttribute('stroke-width')));
+                }
+            }
+            for (let i = 0; i < domElement.childNodes.length; i++) {
+                collectStrokeWidths(domElement.childNodes[i]);
+            }
+        };
+        collectStrokeWidths(rootNode);
+        return largestStrokeWidth;
+    }
+
     /**
      * Transform the measurements of the SVG.
      * In Scratch 2.0, SVGs are drawn without respect to the width,
@@ -203,6 +231,15 @@ class SvgRenderer {
         this._svgDom = parser.parseFromString(svgText, 'text/xml');
         this._svgTag = this._svgDom.documentElement;
 
+        // Enlarge the bbox from the largest found stroke width
+        // This may have false-positives, but at least the bbox will always
+        // contain the full graphic including strokes.
+        const halfStrokeWidth = this._findLargestStrokeWidth(this._svgTag) / 2;
+        bbox.width += halfStrokeWidth * 2;
+        bbox.height += halfStrokeWidth * 2;
+        bbox.x -= halfStrokeWidth;
+        bbox.y -= halfStrokeWidth;
+
         // Set the correct measurements on the SVG tag, and save them.
         this._svgTag.setAttribute('width', bbox.width);
         this._svgTag.setAttribute('height', bbox.height);