js-draw 0.19.0 → 0.21.0

package/dist/cjs/src/math/Path.js

@@ -10,6 +10,7 @@ const LineSegment2_1 = __importDefault(require("./LineSegment2"));
 const Mat33_1 = __importDefault(require("./Mat33"));
 const Rect2_1 = __importDefault(require("./Rect2"));
 const Vec2_1 = require("./Vec2");
+const Vec3_1 = __importDefault(require("./Vec3"));
 var PathCommandType;
 (function (PathCommandType) {
     PathCommandType[PathCommandType["LineTo"] = 0] = "LineTo";
@@ -17,6 +18,23 @@ var PathCommandType;
     PathCommandType[PathCommandType["CubicBezierTo"] = 2] = "CubicBezierTo";
     PathCommandType[PathCommandType["QuadraticBezierTo"] = 3] = "QuadraticBezierTo";
 })(PathCommandType = exports.PathCommandType || (exports.PathCommandType = {}));
+// Returns the bounding box of one path segment.
+const getPartBBox = (part) => {
+    let partBBox;
+    if (part instanceof LineSegment2_1.default) {
+        partBBox = part.bbox;
+    }
+    else if (part instanceof bezier_js_1.Bezier) {
+        const bbox = part.bbox();
+        const width = bbox.x.max - bbox.x.min;
+        const height = bbox.y.max - bbox.y.min;
+        partBBox = new Rect2_1.default(bbox.x.min, bbox.y.min, width, height);
+    }
+    else {
+        partBBox = new Rect2_1.default(part.x, part.y, 0, 0);
+    }
+    return partBBox;
+};
 class Path {
     constructor(startPoint, parts) {
         this.startPoint = startPoint;
@@ -32,6 +50,13 @@ class Path {
             this.bbox = this.bbox.union(Path.computeBBoxForSegment(startPoint, part));
         }
     }
+    getExactBBox() {
+        const bboxes = [];
+        for (const part of this.geometry) {
+            bboxes.push(getPartBBox(part));
+        }
+        return Rect2_1.default.union(...bboxes);
+    }
     // Lazy-loads and returns this path's geometry
     get geometry() {
         if (this.cachedGeometry) {
@@ -54,6 +79,7 @@ class Path {
                     startPoint = part.point;
                     break;
                 case PathCommandType.MoveTo:
+                    geometry.push(part.point);
                     startPoint = part.point;
                     break;
             }
@@ -109,11 +135,197 @@ class Path {
         }
         return Rect2_1.default.bboxOf(points);
     }
-    intersection(line) {
-        if (!line.bbox.intersects(this.bbox)) {
+    /**
+     * Let `S` be a closed path a distance `strokeRadius` from this path.
+     *
+     * @returns Approximate intersections of `line` with `S` using ray marching, starting from
+     * 	        both end points of `line` and each point in `additionalRaymarchStartPoints`.
+     */
+    raymarchIntersectionWith(line, strokeRadius, additionalRaymarchStartPoints = []) {
+        var _a, _b;
+        // No intersection between bounding boxes: No possible intersection
+        // of the interior.
+        if (!line.bbox.intersects(this.bbox.grownBy(strokeRadius))) {
+            return [];
+        }
+        const lineLength = line.length;
+        const partDistFunctionRecords = [];
+        // Determine distance functions for all parts that the given line could possibly intersect with
+        for (const part of this.geometry) {
+            const bbox = getPartBBox(part).grownBy(strokeRadius);
+            if (!bbox.intersects(line.bbox)) {
+                continue;
+            }
+            // Signed distance function
+            let partDist;
+            if (part instanceof LineSegment2_1.default) {
+                partDist = (point) => part.distance(point);
+            }
+            else if (part instanceof Vec3_1.default) {
+                partDist = (point) => part.minus(point).magnitude();
+            }
+            else {
+                partDist = (point) => {
+                    return part.project(point).d;
+                };
+            }
+            // Part signed distance function (negative result implies `point` is
+            // inside the shape).
+            const partSdf = (point) => partDist(point) - strokeRadius;
+            // If the line can't possibly intersect the part,
+            if (partSdf(line.p1) > lineLength && partSdf(line.p2) > lineLength) {
+                continue;
+            }
+            partDistFunctionRecords.push({
+                part,
+                distFn: partDist,
+                bbox,
+            });
+        }
+        // If no distance functions, there are no intersections.
+        if (partDistFunctionRecords.length === 0) {
             return [];
         }
+        // Returns the minimum distance to a part in this stroke, where only parts that the given
+        // line could intersect are considered.
+        const sdf = (point) => {
+            let minDist = Infinity;
+            let minDistPart = null;
+            const uncheckedDistFunctions = [];
+            // First pass: only curves for which the current point is inside
+            // the bounding box.
+            for (const distFnRecord of partDistFunctionRecords) {
+                const { part, distFn, bbox } = distFnRecord;
+                // Check later if the current point isn't in the bounding box.
+                if (!bbox.containsPoint(point)) {
+                    uncheckedDistFunctions.push(distFnRecord);
+                    continue;
+                }
+                const currentDist = distFn(point);
+                if (currentDist <= minDist) {
+                    minDist = currentDist;
+                    minDistPart = part;
+                }
+            }
+            // Second pass: Everything else
+            for (const { part, distFn, bbox } of uncheckedDistFunctions) {
+                // Skip if impossible for the distance to the target to be lesser than
+                // the current minimum.
+                if (!bbox.grownBy(minDist).containsPoint(point)) {
+                    continue;
+                }
+                const currentDist = distFn(point);
+                if (currentDist <= minDist) {
+                    minDist = currentDist;
+                    minDistPart = part;
+                }
+            }
+            return [minDistPart, minDist - strokeRadius];
+        };
+        // Raymarch:
+        const maxRaymarchSteps = 7;
+        // Start raymarching from each of these points. This allows detection of multiple
+        // intersections.
+        const startPoints = [
+            line.p1, ...additionalRaymarchStartPoints, line.p2
+        ];
+        // Converts a point ON THE LINE to a parameter
+        const pointToParameter = (point) => {
+            // Because line.direction is a unit vector, this computes the length
+            // of the projection of the vector(line.p1->point) onto line.direction.
+            //
+            // Note that this can be negative if the given point is outside of the given
+            // line segment.
+            return point.minus(line.p1).dot(line.direction);
+        };
+        // Sort start points by parameter on the line.
+        // This allows us to determine whether the current value of a parameter
+        // drops down to a value already tested.
+        startPoints.sort((a, b) => {
+            const t_a = pointToParameter(a);
+            const t_b = pointToParameter(b);
+            // Sort in increasing order
+            return t_a - t_b;
+        });
         const result = [];
+        const stoppingThreshold = strokeRadius / 1000;
+        // Returns the maximum x value explored
+        const raymarchFrom = (startPoint, 
+        // Direction to march in (multiplies line.direction)
+        directionMultiplier, 
+        // Terminate if the current point corresponds to a parameter
+        // below this.
+        minimumLineParameter) => {
+            let currentPoint = startPoint;
+            let [lastPart, lastDist] = sdf(currentPoint);
+            let lastParameter = pointToParameter(currentPoint);
+            if (lastDist > lineLength) {
+                return lastParameter;
+            }
+            const direction = line.direction.times(directionMultiplier);
+            for (let i = 0; i < maxRaymarchSteps; i++) {
+                // Step in the direction of the edge of the shape.
+                const step = lastDist;
+                currentPoint = currentPoint.plus(direction.times(step));
+                lastParameter = pointToParameter(currentPoint);
+                // If we're below the minimum parameter, stop. We've already tried
+                // this.
+                if (lastParameter <= minimumLineParameter) {
+                    return lastParameter;
+                }
+                const [currentPart, signedDist] = sdf(currentPoint);
+                // Ensure we're stepping in the correct direction.
+                // Note that because we could start with a negative distance and work towards a
+                // positive distance, we need absolute values here.
+                if (Math.abs(signedDist) > Math.abs(lastDist)) {
+                    // If not, stop.
+                    return null;
+                }
+                lastDist = signedDist;
+                lastPart = currentPart;
+                // Is the distance close enough that we can stop early?
+                if (Math.abs(lastDist) < stoppingThreshold) {
+                    break;
+                }
+            }
+            // Ensure that the point we ended with is on the line.
+            const isOnLineSegment = lastParameter >= 0 && lastParameter <= lineLength;
+            if (lastPart && isOnLineSegment && Math.abs(lastDist) < stoppingThreshold) {
+                result.push({
+                    point: currentPoint,
+                    parameterValue: NaN,
+                    curve: lastPart,
+                });
+            }
+            return lastParameter;
+        };
+        // The maximum value of the line's parameter explored so far (0 corresponds to
+        // line.p1)
+        let maxLineT = 0;
+        // Raymarch for each start point.
+        //
+        // Use a for (i from 0 to length) loop because startPoints may be added
+        // during iteration.
+        for (let i = 0; i < startPoints.length; i++) {
+            const startPoint = startPoints[i];
+            // Try raymarching in both directions.
+            maxLineT = Math.max(maxLineT, (_a = raymarchFrom(startPoint, 1, maxLineT)) !== null && _a !== void 0 ? _a : maxLineT);
+            maxLineT = Math.max(maxLineT, (_b = raymarchFrom(startPoint, -1, maxLineT)) !== null && _b !== void 0 ? _b : maxLineT);
+        }
+        return result;
+    }
+    /**
+     * Returns a list of intersections with this path. If `strokeRadius` is given,
+     * intersections are approximated with the surface `strokeRadius` away from this.
+     *
+     * If `strokeRadius > 0`, the resultant `parameterValue` has no defined value.
+     */
+    intersection(line, strokeRadius) {
+        let result = [];
+        // Is any intersection between shapes within the bounding boxes impossible?
+        if (!line.bbox.intersects(this.bbox.grownBy(strokeRadius !== null && strokeRadius !== void 0 ? strokeRadius : 0))) {
+            return [];
+        }
         for (const part of this.geometry) {
             if (part instanceof LineSegment2_1.default) {
                 const intersection = part.intersection(line);
@@ -125,7 +337,7 @@ class Path {
                     });
                 }
             }
-            else {
+            else if (part instanceof bezier_js_1.Bezier) {
                 const intersectionPoints = part.intersects(line).map(t => {
                     // We're using the .intersects(line) function, which is documented
                     // to always return numbers. However, to satisfy the type checker (and
@@ -148,6 +360,15 @@ class Path {
                 result.push(...intersectionPoints);
             }
         }
+        // If given a non-zero strokeWidth, attempt to raymarch.
+        // Even if raymarching, we need to collect starting points.
+        // We use the above-calculated intersections for this.
+        const doRaymarching = strokeRadius && strokeRadius > 1e-8;
+        if (doRaymarching) {
+            // Starting points for raymarching (in addition to the end points of the line).
+            const startPoints = result.map(intersection => intersection.point);
+            result = this.raymarchIntersectionWith(line, strokeRadius, startPoints);
+        }
         return result;
     }
     static mapPathCommand(part, mapping) {
@@ -347,7 +568,7 @@ class Path {
         const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
         // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
         const expandedRect = visibleRect.grownBy(strokeWidth)
-            .transformedBoundingBox(Mat33_1.default.scaling2D(2, visibleRect.center));
+            .transformedBoundingBox(Mat33_1.default.scaling2D(4, visibleRect.center));
         // TODO: Handle simplifying very small paths.
         if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
             return renderablePath;

package/dist/cjs/src/math/Rect2.js

@@ -73,9 +73,7 @@ class Rect2 {
     }
     // Returns a new rectangle containing both [this] and [other].
     union(other) {
-        const topLeft = this.topLeft.zip(other.topLeft, Math.min);
-        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.max);
-        return Rect2.fromCorners(topLeft, bottomRight);
+        return Rect2.union(this, other);
     }
     // Returns a the subdivision of this into [columns] columns
     // and [rows] rows. For example,
@@ -113,6 +111,9 @@ class Rect2 {
     }
     // Returns this grown by [margin] in both the x and y directions.
     grownBy(margin) {
+        if (margin === 0) {
+            return this;
+        }
         return new Rect2(this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2);
     }
     getClosestPointOnBoundaryTo(target) {

package/dist/cjs/src/math/polynomial/QuadraticBezier.d.ts

@@ -0,0 +1,28 @@
+import { Point2, Vec2 } from '../Vec2';
+export default class QuadraticBezier {
+    readonly p0: Point2;
+    readonly p1: Point2;
+    readonly p2: Point2;
+    private bezierJs;
+    constructor(p0: Point2, p1: Point2, p2: Point2);
+    /**
+     * Returns a component of a quadratic Bézier curve at t, where p0,p1,p2 are either all x or
+     * all y components of the target curve.
+     */
+    private static componentAt;
+    private static derivativeComponentAt;
+    /**
+     * @returns the curve evaluated at `t`.
+     */
+    at(t: number): Point2;
+    derivativeAt(t: number): Point2;
+    /**
+     * @returns the approximate distance from `point` to this curve.
+     */
+    approximateDistance(point: Point2): number;
+    /**
+     * @returns the (more) exact distance from `point` to this.
+     */
+    distance(point: Point2): number;
+    normal(t: number): Vec2;
+}

package/dist/cjs/src/math/polynomial/QuadraticBezier.js

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const bezier_js_1 = require("bezier-js");
+const Vec2_1 = require("../Vec2");
+const solveQuadratic_1 = __importDefault(require("./solveQuadratic"));
+class QuadraticBezier {
+    constructor(p0, p1, p2) {
+        this.p0 = p0;
+        this.p1 = p1;
+        this.p2 = p2;
+        this.bezierJs = null;
+    }
+    /**
+     * Returns a component of a quadratic Bézier curve at t, where p0,p1,p2 are either all x or
+     * all y components of the target curve.
+     */
+    static componentAt(t, p0, p1, p2) {
+        return p0 + t * (-2 * p0 + 2 * p1) + t * t * (p0 - 2 * p1 + p2);
+    }
+    static derivativeComponentAt(t, p0, p1, p2) {
+        return -2 * p0 + 2 * p1 + 2 * t * (p0 - 2 * p1 + p2);
+    }
+    /**
+     * @returns the curve evaluated at `t`.
+     */
+    at(t) {
+        const p0 = this.p0;
+        const p1 = this.p1;
+        const p2 = this.p2;
+        return Vec2_1.Vec2.of(QuadraticBezier.componentAt(t, p0.x, p1.x, p2.x), QuadraticBezier.componentAt(t, p0.y, p1.y, p2.y));
+    }
+    derivativeAt(t) {
+        const p0 = this.p0;
+        const p1 = this.p1;
+        const p2 = this.p2;
+        return Vec2_1.Vec2.of(QuadraticBezier.derivativeComponentAt(t, p0.x, p1.x, p2.x), QuadraticBezier.derivativeComponentAt(t, p0.y, p1.y, p2.y));
+    }
+    /**
+     * @returns the approximate distance from `point` to this curve.
+     */
+    approximateDistance(point) {
+        // We want to minimize f(t) = |B(t) - p|².
+        // Expanding,
+        //   f(t)  = (Bₓ(t) - pₓ)² + (Bᵧ(t) - pᵧ)²
+        // ⇒ f'(t) = Dₜ(Bₓ(t) - pₓ)² + Dₜ(Bᵧ(t) - pᵧ)²
+        //
+        // Considering just one component,
+        //  Dₜ(Bₓ(t) - pₓ)² = 2(Bₓ(t) - pₓ)(DₜBₓ(t))
+        //                  = 2(Bₓ(t)DₜBₓ(t) - pₓBₓ(t))
+        //   = 2(p0ₓ + (t)(-2p0ₓ + 2p1ₓ) + (t²)(p0ₓ - 2p1ₓ + p2ₓ) - pₓ)((-2p0ₓ + 2p1ₓ) + 2(t)(p0ₓ - 2p1ₓ + p2ₓ))
+        //     - (pₓ)((-2p0ₓ + 2p1ₓ) + (t)(p0ₓ - 2p1ₓ + p2ₓ))
+        const A = this.p0.x - point.x;
+        const B = -2 * this.p0.x + 2 * this.p1.x;
+        const C = this.p0.x - 2 * this.p1.x + this.p2.x;
+        // Let A = p0ₓ - pₓ, B = -2p0ₓ + 2p1ₓ, C = p0ₓ - 2p1ₓ + p2ₓ. We then have,
+        //  Dₜ(Bₓ(t) - pₓ)²
+        //    = 2(A + tB + t²C)(B + 2tC) - (pₓ)(B + 2tC)
+        //    = 2(AB + tB² + t²BC + 2tCA + 2tCtB + 2tCt²C) - pₓB - pₓ2tC
+        //    = 2(AB + tB² + 2tCA + t²BC + 2t²CB + 2C²t³) - pₓB - pₓ2tC
+        //    = 2AB + 2t(B² + 2CA) + 2t²(BC + 2CB) + 4C²t³ - pₓB - pₓ2tC
+        //    = 2AB + 2t(B² + 2CA - pₓC) + 2t²(BC + 2CB) + 4C²t³ - pₓB
+        //
+        const D = this.p0.y - point.y;
+        const E = -2 * this.p0.y + 2 * this.p1.y;
+        const F = this.p0.y - 2 * this.p1.y + this.p2.y;
+        // Using D = p0ᵧ - pᵧ, E = -2p0ᵧ + 2p1ᵧ, F = p0ᵧ - 2p1ᵧ + p2ᵧ, we thus have,
+        //  f'(t) = 2AB + 2t(B² + 2CA - pₓC) + 2t²(BC + 2CB) + 4C²t³ - pₓB
+        //        + 2DE + 2t(E² + 2FD - pᵧF) + 2t²(EF + 2FE) + 4F²t³ - pᵧE
+        const a = 2 * A * B + 2 * D * E - point.x * B - point.y * E;
+        const b = 2 * B * B + 2 * E * E + 2 * C * A + 2 * F * D - point.x * C - point.y * F;
+        const c = 2 * E * F + 2 * B * C + 2 * C * B + 2 * F * E;
+        //const d = 4 * C * C + 4 * F * F;
+        // Thus,
+        // f'(t) = a + bt + ct² + dt³
+        const fDerivAtZero = a;
+        const f2ndDerivAtZero = b;
+        const f3rdDerivAtZero = 2 * c;
+        // Using the first few terms of a Maclaurin series to approximate f'(t),
+        // f'(t) ≈ f'(0) + t f''(0) + t² f'''(0) / 2
+        let [min1, min2] = (0, solveQuadratic_1.default)(f3rdDerivAtZero / 2, f2ndDerivAtZero, fDerivAtZero);
+        // If the quadratic has no solutions, approximate.
+        if (isNaN(min1)) {
+            min1 = 0.25;
+        }
+        if (isNaN(min2)) {
+            min2 = 0.75;
+        }
+        const at1 = this.at(min1);
+        const at2 = this.at(min2);
+        const sqrDist1 = at1.minus(point).magnitudeSquared();
+        const sqrDist2 = at2.minus(point).magnitudeSquared();
+        const sqrDist3 = this.at(0).minus(point).magnitudeSquared();
+        const sqrDist4 = this.at(1).minus(point).magnitudeSquared();
+        return Math.sqrt(Math.min(sqrDist1, sqrDist2, sqrDist3, sqrDist4));
+    }
+    /**
+     * @returns the (more) exact distance from `point` to this.
+     */
+    distance(point) {
+        if (!this.bezierJs) {
+            this.bezierJs = new bezier_js_1.Bezier([this.p0.xy, this.p1.xy, this.p2.xy]);
+        }
+        // .d: Distance
+        return this.bezierJs.project(point.xy).d;
+    }
+    normal(t) {
+        const tangent = this.derivativeAt(t);
+        return tangent.orthog().normalized();
+    }
+}
+exports.default = QuadraticBezier;

package/dist/cjs/src/math/polynomial/solveQuadratic.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Solves an equation of the form ax² + bx + c = 0.
+ * The larger solution is returned first.
+ */
+declare const solveQuadratic: (a: number, b: number, c: number) => [number, number];
+export default solveQuadratic;

package/dist/cjs/src/math/polynomial/solveQuadratic.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Solves an equation of the form ax² + bx + c = 0.
+ * The larger solution is returned first.
+ */
+const solveQuadratic = (a, b, c) => {
+    // See also https://en.wikipedia.org/wiki/Quadratic_formula
+    if (a === 0) {
+        let solution;
+        if (b === 0) {
+            solution = c === 0 ? 0 : NaN;
+        }
+        else {
+            // Then we have bx + c = 0
+            // which implies bx = -c.
+            // Thus, x = -c/b
+            solution = -c / b;
+        }
+        return [solution, solution];
+    }
+    const discriminant = b * b - 4 * a * c;
+    if (discriminant < 0) {
+        return [NaN, NaN];
+    }
+    const rootDiscriminant = Math.sqrt(discriminant);
+    const solution1 = (-b + rootDiscriminant) / (2 * a);
+    const solution2 = (-b - rootDiscriminant) / (2 * a);
+    if (solution1 > solution2) {
+        return [solution1, solution2];
+    }
+    else {
+        return [solution2, solution1];
+    }
+};
+exports.default = solveQuadratic;

package/dist/cjs/src/rendering/renderers/CanvasRenderer.js

@@ -191,14 +191,16 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         }
     }
     endObject() {
+        // Cache this.objectLevel — it may be decremented by super.endObject.
+        const objectLevel = this.objectLevel;
+        this.currentObjectBBox = null;
+        super.endObject();
         if (!this.ignoringObject && this.clipLevels.length > 0) {
-            if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+            if (this.clipLevels[this.clipLevels.length - 1] === objectLevel) {
                 this.ctx.restore();
                 this.clipLevels.pop();
             }
         }
-        this.currentObjectBBox = null;
-        super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
             this.ignoreObjectsAboveLevel = null;

package/dist/cjs/src/rendering/renderers/SVGRenderer.js

@@ -9,6 +9,7 @@ const Path_1 = __importDefault(require("../../math/Path"));
 const rounding_1 = require("../../math/rounding");
 const Vec2_1 = require("../../math/Vec2");
 const SVGLoader_1 = require("../../SVGLoader");
+const RenderingStyle_1 = require("../RenderingStyle");
 const AbstractRenderer_1 = __importDefault(require("./AbstractRenderer"));
 exports.renderedStylesheetId = 'js-draw-style-sheet';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -114,11 +115,10 @@ class SVGRenderer extends AbstractRenderer_1.default {
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
     drawPath(pathSpec) {
-        var _a;
         const style = pathSpec.style;
         const path = Path_1.default.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
-        if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {
+        if (this.lastPathString.length === 0 || !this.lastPathStyle || !(0, RenderingStyle_1.stylesEqual)(this.lastPathStyle, style)) {
             this.addPathToSVG();
             this.lastPathStyle = style;
             this.lastPathString = [];
@@ -232,7 +232,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
         this.objectElems = [];
     }
     endObject(loaderData, elemClassNames) {
-        var _a, _b;
+        var _a;
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
@@ -254,9 +254,18 @@ class SVGRenderer extends AbstractRenderer_1.default {
             }
         }
         // Add class names to the object, if given.
-        if (elemClassNames) {
-            for (const elem of (_b = this.objectElems) !== null && _b !== void 0 ? _b : []) {
-                elem.classList.add(...elemClassNames);
+        if (elemClassNames && this.objectElems) {
+            if (this.objectElems.length === 1) {
+                this.objectElems[0].classList.add(...elemClassNames);
+            }
+            else {
+                const wrapper = document.createElementNS(svgNameSpace, 'g');
+                wrapper.classList.add(...elemClassNames);
+                for (const elem of this.objectElems) {
+                    elem.remove();
+                    wrapper.appendChild(elem);
+                }
+                this.elem.appendChild(wrapper);
             }
         }
     }

package/dist/cjs/src/toolbar/HTMLToolbar.js

@@ -66,6 +66,13 @@ class HTMLToolbar {
         const closePickerOverlay = document.createElement('div');
         closePickerOverlay.className = `${exports.toolbarCSSPrefix}closeColorPickerOverlay`;
         this.editor.createHTMLOverlay(closePickerOverlay);
+        // Hide the color picker when attempting to draw on the overlay.
+        this.listeners.push(this.editor.handlePointerEventsFrom(closePickerOverlay, (eventName) => {
+            if (eventName === 'pointerdown') {
+                (0, coloris_1.close)();
+            }
+            return true;
+        }));
         const maxSwatchLen = 12;
         const swatches = [
             Color4_1.default.red.toHexString(),

package/dist/cjs/src/toolbar/localization.d.ts

@@ -14,7 +14,7 @@ export interface ToolbarLocalization {
     submit: string;
     freehandPen: string;
     pressureSensitiveFreehandPen: string;
-    selectObjectType: string;
+    selectPenType: string;
     colorLabel: string;
     pen: string;
     eraser: string;
@@ -37,6 +37,7 @@ export interface ToolbarLocalization {
     backgroundColor: string;
     imageWidthOption: string;
     imageHeightOption: string;
+    useGridOption: string;
     toggleOverflow: string;
     errorImageHasZeroSize: string;
     dropdownShown: (toolName: string) => string;

package/dist/cjs/src/toolbar/localization.js

@@ -23,7 +23,7 @@ exports.defaultToolbarLocalization = {
     duplicateSelection: 'Duplicate selection',
     undo: 'Undo',
     redo: 'Redo',
-    selectObjectType: 'Object type: ',
+    selectPenType: 'Pen type: ',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
@@ -31,6 +31,7 @@ exports.defaultToolbarLocalization = {
     backgroundColor: 'Background Color: ',
     imageWidthOption: 'Width: ',
     imageHeightOption: 'Height: ',
+    useGridOption: 'Grid: ',
     toggleOverflow: 'More',
     touchPanning: 'Touchscreen panning',
     freehandPen: 'Freehand',

package/dist/cjs/src/toolbar/widgets/DocumentPropertiesWidget.d.ts

@@ -12,6 +12,11 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     private updateDropdown;
     private setBackgroundColor;
     private getBackgroundColor;
+    private removeBackgroundComponents;
+    /** Replace existing background components with a background of the given type. */
+    private setBackgroundType;
+    /** Returns the type of the topmost background component */
+    private getBackgroundType;
     private updateImportExportRectSize;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;