js-draw 0.3.0 → 0.3.1

package/dist/src/components/Stroke.js

@@ -6,7 +6,7 @@ export default class Stroke extends AbstractComponent {
     constructor(parts) {
         var _a;
         super('stroke');
-        this.parts = parts.map(section => {
+        this.parts = parts.map((section) => {
             const path = Path.fromRenderable(section);
             const pathBBox = this.bboxForPart(path.bbox, section.style);
             if (!this.contentBBox) {
@@ -17,7 +17,6 @@ export default class Stroke extends AbstractComponent {
             }
             return {
                 path,
-                bbox: pathBBox,
                 // To implement RenderablePathSpec
                 startPoint: path.startPoint,
                 style: section.style,
@@ -37,10 +36,17 @@ export default class Stroke extends AbstractComponent {
     render(canvas, visibleRect) {
         canvas.startObject(this.getBBox());
         for (const part of this.parts) {
-            const bbox = part.bbox;
-            if (!visibleRect || bbox.intersects(visibleRect)) {
-                canvas.drawPath(part);
+            const bbox = this.bboxForPart(part.path.bbox, part.style);
+            if (visibleRect) {
+                if (!bbox.intersects(visibleRect)) {
+                    continue;
+                }
+                const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
+                if (muchBiggerThanVisible && !part.path.closedRoughlyIntersects(visibleRect)) {
+                    continue;
+                }
             }
+            canvas.drawPath(part);
         }
         canvas.endObject(this.getLoadSaveData());
     }
@@ -67,7 +73,6 @@ export default class Stroke extends AbstractComponent {
             }
             return {
                 path: newPath,
-                bbox: newBBox,
                 startPoint: newPath.startPoint,
                 commands: newPath.parts,
                 style: part.style,

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -7,9 +7,9 @@ import Stroke from '../Stroke';
 import Viewport from '../../Viewport';
 export const makeFreehandLineBuilder = (initialPoint, viewport) => {
     // Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
-    // less than ± 2 px from the curve.
+    // less than ±1 px from the curve.
     const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
-    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
+    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
     return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist);
 };
 // Handles stroke smoothing and creates Strokes from user/stylus input.
@@ -136,7 +136,7 @@ export default class FreehandLineBuilder {
             if (!this.isFirstSegment) {
                 return;
             }
-            const width = Viewport.roundPoint(this.startPoint.width / 3.5, this.minFitAllowed);
+            const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
             const center = this.roundPoint(this.startPoint.pos);
             // Start on the right, cycle clockwise:
             //    |
@@ -362,7 +362,7 @@ export default class FreehandLineBuilder {
             for (const point of this.buffer) {
                 const proj = Vec2.ofXY(curve.project(point.xy));
                 const dist = proj.minus(point).magnitude();
-                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 2, this.minFitAllowed);
+                const minFit = Math.max(Math.min(this.curveStartWidth, this.curveEndWidth) / 3, this.minFitAllowed);
                 if (dist > minFit || dist > this.maxFitAllowed) {
                     return false;
                 }
@@ -370,7 +370,7 @@ export default class FreehandLineBuilder {
             return true;
         };
         const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-        if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
+        if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
             if (!curveMatchesPoints(this.currentCurve)) {
                 // Use a curve that better fits the points
                 this.currentCurve = prevCurve;

package/dist/src/math/LineSegment2.d.ts

@@ -15,6 +15,8 @@ export default class LineSegment2 {
     get p2(): Point2;
     get(t: number): Point2;
     intersection(other: LineSegment2): IntersectionResult | null;
+    intersects(other: LineSegment2): boolean;
     closestPointTo(target: Point2): import("./Vec3").default;
+    toString(): string;
 }
 export {};

package/dist/src/math/LineSegment2.js

@@ -97,6 +97,9 @@ export default class LineSegment2 {
             t: resultT,
         };
     }
+    intersects(other) {
+        return this.intersection(other) !== null;
+    }
     // Returns the closest point on this to [target]
     closestPointTo(target) {
         // Distance from P1 along this' direction.
@@ -113,4 +116,7 @@ export default class LineSegment2 {
             return this.p1;
         }
     }
+    toString() {
+        return `LineSegment(${this.p1.toString()}, ${this.p2.toString()})`;
+    }
 }

package/dist/src/math/Path.d.ts

@@ -39,18 +39,22 @@ interface IntersectionResult {
 export default class Path {
     readonly startPoint: Point2;
     readonly parts: PathCommand[];
-    private cachedGeometry;
     readonly bbox: Rect2;
     constructor(startPoint: Point2, parts: PathCommand[]);
+    private cachedGeometry;
     get geometry(): Array<LineSegment2 | Bezier>;
+    private cachedPolylineApproximation;
+    polylineApproximation(): LineSegment2[];
     static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2;
     intersection(line: LineSegment2): IntersectionResult[];
     mapPoints(mapping: (point: Point2) => Point2): Path;
     transformedBy(affineTransfm: Mat33): Path;
     union(other: Path | null): Path;
+    closedRoughlyIntersects(rect: Rect2): boolean;
     static fromRect(rect: Rect2, lineWidth?: number | null): Path;
     static fromRenderable(renderable: RenderablePathSpec): Path;
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
+    private cachedStringVersion;
     toString(): string;
     serialize(): string;
     static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string;

package/dist/src/math/Path.js

@@ -15,6 +15,8 @@ export default class Path {
         this.startPoint = startPoint;
         this.parts = parts;
         this.cachedGeometry = null;
+        this.cachedPolylineApproximation = null;
+        this.cachedStringVersion = null;
         // Initial bounding box contains one point: the start point.
         this.bbox = Rect2.bboxOf([startPoint]);
         // Convert into a representation of the geometry (cache for faster intersection
@@ -52,6 +54,34 @@ export default class Path {
         this.cachedGeometry = geometry;
         return this.cachedGeometry;
     }
+    // Approximates this path with a group of line segments.
+    polylineApproximation() {
+        if (this.cachedPolylineApproximation) {
+            return this.cachedPolylineApproximation;
+        }
+        const points = [];
+        for (const part of this.parts) {
+            switch (part.kind) {
+                case PathCommandType.CubicBezierTo:
+                    points.push(part.controlPoint1, part.controlPoint2, part.endPoint);
+                    break;
+                case PathCommandType.QuadraticBezierTo:
+                    points.push(part.controlPoint, part.endPoint);
+                    break;
+                case PathCommandType.MoveTo:
+                case PathCommandType.LineTo:
+                    points.push(part.point);
+                    break;
+            }
+        }
+        const result = [];
+        let prevPoint = this.startPoint;
+        for (const point of points) {
+            result.push(new LineSegment2(prevPoint, point));
+            prevPoint = point;
+        }
+        return result;
+    }
     static computeBBoxForSegment(startPoint, part) {
         const points = [startPoint];
         let exhaustivenessCheck;
@@ -73,6 +103,9 @@ export default class Path {
         return Rect2.bboxOf(points);
     }
     intersection(line) {
+        if (!line.bbox.intersects(this.bbox)) {
+            return [];
+        }
         const result = [];
         for (const part of this.geometry) {
             if (part instanceof LineSegment2) {
@@ -162,6 +195,47 @@ export default class Path {
             ...other.parts,
         ]);
     }
+    // Treats this as a closed path and returns true if part of `rect` is roughly within
+    // this path's interior.
+    //
+    // Note: Assumes that this is a closed, non-self-intersecting path.
+    closedRoughlyIntersects(rect) {
+        if (rect.containsRect(this.bbox)) {
+            return true;
+        }
+        // Choose a point outside of the path.
+        const startPt = this.bbox.topLeft.minus(Vec2.of(1, 1));
+        const testPts = rect.corners;
+        const polygon = this.polylineApproximation();
+        for (const point of testPts) {
+            const testLine = new LineSegment2(point, startPt);
+            let intersectionCount = 0;
+            for (const line of polygon) {
+                if (line.intersects(testLine)) {
+                    intersectionCount++;
+                }
+            }
+            // Odd? The point is within the polygon!
+            if (intersectionCount % 2 === 1) {
+                return true;
+            }
+        }
+        // Grow the rectangle for possible additional precision.
+        const grownRect = rect.grownBy(Math.min(rect.size.x, rect.size.y));
+        const edges = [];
+        for (const subrect of grownRect.divideIntoGrid(4, 4)) {
+            edges.push(...subrect.getEdges());
+        }
+        for (const edge of edges) {
+            for (const line of polygon) {
+                if (edge.intersects(line)) {
+                    return true;
+                }
+            }
+        }
+        // Even? Probably no intersection.
+        return false;
+    }
     // Returns a path that outlines [rect]. If [lineWidth] is not given, the resultant path is
     // the outline of [rect]. Otherwise, the resultant path represents a line of width [lineWidth]
     // that traces [rect].
@@ -195,6 +269,9 @@ export default class Path {
         return new Path(startPoint, commands);
     }
     static fromRenderable(renderable) {
+        if (renderable.path) {
+            return renderable.path;
+        }
         return new Path(renderable.startPoint, renderable.commands);
     }
     toRenderable(fill) {
@@ -202,22 +279,25 @@ export default class Path {
             startPoint: this.startPoint,
             style: fill,
             commands: this.parts,
+            path: this,
         };
     }
     toString() {
+        if (this.cachedStringVersion) {
+            return this.cachedStringVersion;
+        }
         // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-        //            If we're near (0, 0), it probably isn't worth it and if bounding boxes are large,
-        //            it also probably isn't worth it.
-        const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.size.x) < 2
-            && Math.abs(this.bbox.topLeft.y) > 10 && Math.abs(this.bbox.size.y) < 2;
-        return Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+        const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+        const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+        this.cachedStringVersion = result;
+        return result;
     }
     serialize() {
         return this.toString();
     }
     // @param onlyAbsCommands - True if we should avoid converting absolute coordinates to relative offsets -- such
     //   conversions can lead to smaller output strings, but also take time.
-    static toString(startPoint, parts, onlyAbsCommands = true) {
+    static toString(startPoint, parts, onlyAbsCommands) {
         const result = [];
         let prevPoint;
         const addCommand = (command, ...points) => {
@@ -452,7 +532,9 @@ export default class Path {
                 lastPos = allArgs[allArgs.length - 1];
             }
         }
-        return new Path(startPos !== null && startPos !== void 0 ? startPos : Vec2.zero, commands);
+        const result = new Path(startPos !== null && startPos !== void 0 ? startPos : Vec2.zero, commands);
+        result.cachedStringVersion = pathString;
+        return result;
     }
 }
 Path.empty = new Path(Vec2.zero, []);

package/dist/src/math/Rect2.js

@@ -1,6 +1,6 @@
 import LineSegment2 from './LineSegment2';
 import { Vec2 } from './Vec2';
-// invariant: w > 0, h > 0.
+// invariant: w ≥ 0, h ≥ 0.
 export default class Rect2 {
     constructor(x, y, w, h) {
         this.x = x;

package/dist/src/math/Triangle.d.ts

@@ -0,0 +1,11 @@
+import Mat33 from './Mat33';
+import Vec3 from './Vec3';
+export default class Triangle {
+    readonly vertex1: Vec3;
+    readonly vertex2: Vec3;
+    readonly vertex3: Vec3;
+    constructor(vertex1: Vec3, vertex2: Vec3, vertex3: Vec3);
+    map(mapping: (vertex: Vec3) => Vec3): Triangle;
+    transformed2DBy(affineTransform: Mat33): Triangle;
+    transformedBy(linearTransform: Mat33): Triangle;
+}

package/dist/src/math/Triangle.js

@@ -0,0 +1,19 @@
+export default class Triangle {
+    constructor(vertex1, vertex2, vertex3) {
+        this.vertex1 = vertex1;
+        this.vertex2 = vertex2;
+        this.vertex3 = vertex3;
+    }
+    map(mapping) {
+        return new Triangle(mapping(this.vertex1), mapping(this.vertex2), mapping(this.vertex3));
+    }
+    // Transform, treating this as composed of 2D points.
+    transformed2DBy(affineTransform) {
+        return this.map(affineTransform.transformVec2);
+    }
+    // Transforms this by a linear transform --- verticies are treated as
+    // 3D points.
+    transformedBy(linearTransform) {
+        return this.map(linearTransform.transformVec3);
+    }
+}

package/dist/src/rendering/Display.js

@@ -71,9 +71,9 @@ export default class Display {
                 return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
             },
             blockResolution: cacheBlockResolution,
-            cacheSize: 600 * 600 * 4 * 120,
+            cacheSize: 600 * 600 * 4 * 90,
             maxScale: 1.4,
-            minComponentsPerCache: 45,
+            minComponentsPerCache: 20,
             minComponentsToUseCache: 105,
         });
         this.editor.notifier.on(EditorEventType.DisplayResized, event => {

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,7 +1,7 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
 import Mat33 from '../../math/Mat33';
-import { PathCommand } from '../../math/Path';
+import Path, { PathCommand } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
@@ -10,6 +10,7 @@ export interface RenderablePathSpec {
     startPoint: Point2;
     commands: PathCommand[];
     style: RenderingStyle;
+    path?: Path;
 }
 export default abstract class AbstractRenderer {
     private viewport;

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -5,30 +5,29 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
-    private currentPath;
-    private pathStart;
     private lastPathStyle;
-    private lastPath;
-    private lastPathStart;
+    private lastPathString;
     private objectElems;
     private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport);
     setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;
-    protected beginPath(startPoint: Point2): void;
-    protected endPath(style: RenderingStyle): void;
     private addPathToSVG;
+    drawPath(pathSpec: RenderablePathSpec): void;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     startObject(boundingBox: Rect2): void;
     endObject(loaderData?: LoadSaveDataTable): void;
-    protected lineTo(point: Point2): void;
-    protected moveTo(point: Point2): void;
-    protected traceCubicBezierCurve(controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2): void;
-    protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
+    private unimplementedMessage;
+    protected beginPath(_startPoint: Point2): void;
+    protected endPath(_style: RenderingStyle): void;
+    protected lineTo(_point: Point2): void;
+    protected moveTo(_point: Point2): void;
+    protected traceCubicBezierCurve(_controlPoint1: Point2, _controlPoint2: Point2, _endPoint: Point2): void;
+    protected traceQuadraticBezierCurve(_controlPoint: Point2, _endPoint: Point2): void;
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
     isTooSmallToRender(_rect: Rect2): boolean;

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

@@ -1,5 +1,5 @@
 import Mat33 from '../../math/Mat33';
-import Path, { PathCommandType } from '../../math/Path';
+import Path from '../../math/Path';
 import { toRoundedString } from '../../math/rounding';
 import { Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
@@ -9,6 +9,8 @@ export default class SVGRenderer extends AbstractRenderer {
     constructor(elem, viewport) {
         super(viewport);
         this.elem = elem;
+        this.lastPathStyle = null;
+        this.lastPathString = [];
         this.objectElems = null;
         this.overwrittenAttrs = {};
         this.clear();
@@ -41,44 +43,16 @@ export default class SVGRenderer extends AbstractRenderer {
             }
         }
         this.overwrittenAttrs = {};
-    }
-    beginPath(startPoint) {
-        var _a;
-        this.currentPath = [];
-        this.pathStart = this.canvasToScreen(startPoint);
-        (_a = this.lastPathStart) !== null && _a !== void 0 ? _a : (this.lastPathStart = this.pathStart);
-    }
-    endPath(style) {
-        var _a;
-        if (this.currentPath == null) {
-            throw new Error('No path exists to end! Make sure beginPath was called!');
-        }
-        // Try to extend the previous path, if possible
-        if (style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) && this.lastPath != null) {
-            this.lastPath.push({
-                kind: PathCommandType.MoveTo,
-                point: this.pathStart,
-            }, ...this.currentPath);
-            this.pathStart = null;
-            this.currentPath = null;
-        }
-        else {
-            this.addPathToSVG();
-            this.lastPathStart = this.pathStart;
-            this.lastPathStyle = style;
-            this.lastPath = this.currentPath;
-            this.pathStart = null;
-            this.currentPath = null;
-        }
+        this.lastPathString = [];
     }
     // Push [this.fullPath] to the SVG
     addPathToSVG() {
         var _a;
-        if (!this.lastPathStyle || !this.lastPath) {
+        if (!this.lastPathStyle || this.lastPathString.length === 0) {
             return;
         }
         const pathElem = document.createElementNS(svgNameSpace, 'path');
-        pathElem.setAttribute('d', Path.toString(this.lastPathStart, this.lastPath));
+        pathElem.setAttribute('d', this.lastPathString.join(' '));
         const style = this.lastPathStyle;
         pathElem.setAttribute('fill', style.fill.toHexString());
         if (style.stroke) {
@@ -88,6 +62,18 @@ export default class SVGRenderer extends AbstractRenderer {
         this.elem.appendChild(pathElem);
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
+    drawPath(pathSpec) {
+        var _a;
+        const style = pathSpec.style;
+        const path = Path.fromRenderable(pathSpec);
+        // 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) {
+            this.addPathToSVG();
+            this.lastPathStyle = style;
+            this.lastPathString = [];
+        }
+        this.lastPathString.push(path.toString());
+    }
     drawText(text, transform, style) {
         var _a, _b, _c;
         transform = this.getCanvasToScreenTransform().rightMul(transform);
@@ -118,8 +104,7 @@ export default class SVGRenderer extends AbstractRenderer {
     startObject(boundingBox) {
         super.startObject(boundingBox);
         // Only accumulate a path within an object
-        this.lastPath = null;
-        this.lastPathStart = null;
+        this.lastPathString = [];
         this.lastPathStyle = null;
         this.objectElems = [];
     }
@@ -146,40 +131,14 @@ export default class SVGRenderer extends AbstractRenderer {
             }
         }
     }
-    lineTo(point) {
-        point = this.canvasToScreen(point);
-        this.currentPath.push({
-            kind: PathCommandType.LineTo,
-            point,
-        });
-    }
-    moveTo(point) {
-        point = this.canvasToScreen(point);
-        this.currentPath.push({
-            kind: PathCommandType.MoveTo,
-            point,
-        });
-    }
-    traceCubicBezierCurve(controlPoint1, controlPoint2, endPoint) {
-        controlPoint1 = this.canvasToScreen(controlPoint1);
-        controlPoint2 = this.canvasToScreen(controlPoint2);
-        endPoint = this.canvasToScreen(endPoint);
-        this.currentPath.push({
-            kind: PathCommandType.CubicBezierTo,
-            controlPoint1,
-            controlPoint2,
-            endPoint,
-        });
-    }
-    traceQuadraticBezierCurve(controlPoint, endPoint) {
-        controlPoint = this.canvasToScreen(controlPoint);
-        endPoint = this.canvasToScreen(endPoint);
-        this.currentPath.push({
-            kind: PathCommandType.QuadraticBezierTo,
-            controlPoint,
-            endPoint,
-        });
-    }
+    // Not implemented -- use drawPath instead.
+    unimplementedMessage() { throw new Error('Not implemenented!'); }
+    beginPath(_startPoint) { this.unimplementedMessage(); }
+    endPath(_style) { this.unimplementedMessage(); }
+    lineTo(_point) { this.unimplementedMessage(); }
+    moveTo(_point) { this.unimplementedMessage(); }
+    traceCubicBezierCurve(_controlPoint1, _controlPoint2, _endPoint) { this.unimplementedMessage(); }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) { this.unimplementedMessage(); }
     drawPoints(...points) {
         points.map(point => {
             const elem = document.createElementNS(svgNameSpace, 'circle');

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -9,6 +9,7 @@ export default class HTMLToolbar {
     private container;
     private static colorisStarted;
     private updateColoris;
+    /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
     addWidget(widget: BaseWidget): void;

package/dist/src/toolbar/HTMLToolbar.js

@@ -14,6 +14,7 @@ import HandToolWidget from './widgets/HandToolWidget';
 import { EraserTool, PenTool } from '../tools/lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
+    /** @internal */
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
         this.localizationTable = localizationTable;

package/dist/src/toolbar/widgets/BaseWidget.d.ts

@@ -12,6 +12,7 @@ export default abstract class BaseWidget {
     private label;
     private disabled;
     private subWidgets;
+    private toplevel;
     constructor(editor: Editor, localizationTable: ToolbarLocalization);
     protected abstract getTitle(): string;
     protected abstract createIcon(): Element;
@@ -26,6 +27,8 @@ export default abstract class BaseWidget {
     setSelected(selected: boolean): void;
     protected setDropdownVisible(visible: boolean): void;
     protected repositionDropdown(): void;
+    /** Set whether the widget is contained within another. @internal */
+    protected setIsToplevel(toplevel: boolean): void;
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;

package/dist/src/toolbar/widgets/BaseWidget.js

@@ -10,7 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _BaseWidget_hasDropdown;
-import { InputEvtType } from '../../types';
+import { EditorEventType, InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 export default class BaseWidget {
@@ -20,6 +20,7 @@ export default class BaseWidget {
         _BaseWidget_hasDropdown.set(this, void 0);
         this.disabled = false;
         this.subWidgets = [];
+        this.toplevel = true;
         this.icon = null;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}toolContainer`);
@@ -41,6 +42,7 @@ export default class BaseWidget {
         }
         for (const widget of this.subWidgets) {
             widget.addTo(dropdown);
+            widget.setIsToplevel(false);
         }
         return true;
     }
@@ -87,6 +89,7 @@ export default class BaseWidget {
         this.subWidgets.push(widget);
     }
     // Adds this to [parent]. This can only be called once for each ToolbarWidget.
+    // @internal
     addTo(parent) {
         this.label.innerText = this.getTitle();
         this.setupActionBtnClickListener(this.button);
@@ -99,6 +102,15 @@ export default class BaseWidget {
             this.dropdownIcon = this.createDropdownIcon();
             this.button.appendChild(this.dropdownIcon);
             this.container.appendChild(this.dropdownContainer);
+            this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+                if (evt.kind === EditorEventType.ToolbarDropdownShown
+                    && evt.parentWidget !== this
+                    // Don't hide if a submenu wash shown (it might be a submenu of
+                    // the current menu).
+                    && evt.parentWidget.toplevel) {
+                    this.setDropdownVisible(false);
+                }
+            });
         }
         this.setDropdownVisible(false);
         parent.appendChild(this.container);
@@ -144,6 +156,10 @@ export default class BaseWidget {
             this.dropdownContainer.classList.remove('hidden');
             this.container.classList.add('dropdownVisible');
             this.editor.announceForAccessibility(this.localizationTable.dropdownShown(this.getTitle()));
+            this.editor.notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
+                kind: EditorEventType.ToolbarDropdownShown,
+                parentWidget: this,
+            });
         }
         else {
             this.dropdownContainer.classList.add('hidden');
@@ -164,6 +180,10 @@ export default class BaseWidget {
             this.dropdownContainer.style.transform = '';
         }
     }
+    /** Set whether the widget is contained within another. @internal */
+    setIsToplevel(toplevel) {
+        this.toplevel = toplevel;
+    }
     isDropdownVisible() {
         return !this.dropdownContainer.classList.contains('hidden');
     }

package/dist/src/tools/BaseTool.d.ts

@@ -16,4 +16,5 @@ export default abstract class BaseTool implements PointerEvtListener {
     setEnabled(enabled: boolean): void;
     isEnabled(): boolean;
     setToolGroup(group: ToolEnabledGroup): void;
+    getToolGroup(): ToolEnabledGroup | null;
 }