js-draw 0.3.0 → 0.3.2

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,13 @@ export interface RenderablePathSpec {
     startPoint: Point2;
     commands: PathCommand[];
     style: RenderingStyle;
+    path?: Path;
+}
+export interface RenderableImage {
+    transform: Mat33;
+    image: HTMLImageElement | HTMLCanvasElement;
+    base64Url: string;
+    label?: string;
 }
 export default abstract class AbstractRenderer {
     private viewport;
@@ -26,6 +33,7 @@ export default abstract class AbstractRenderer {
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
     abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
+    abstract drawImage(image: RenderableImage): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
     protected objectLevel: number;

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

@@ -5,7 +5,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;
@@ -28,6 +28,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip: boolean): void;
     endObject(): void;

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

@@ -125,6 +125,13 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         this.ctx.restore();
     }
+    drawImage(image) {
+        this.ctx.save();
+        const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
+        this.transformBy(transform);
+        this.ctx.drawImage(image.image, 0, 0);
+        this.ctx.restore();
+    }
     startObject(boundingBox, clip) {
         if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();

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

@@ -5,7 +5,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
     renderedPathCount: number;
@@ -13,6 +13,7 @@ export default class DummyRenderer extends AbstractRenderer {
     lastPoint: Point2 | null;
     objectNestingLevel: number;
     lastText: string | null;
+    lastImage: RenderableImage | null;
     pointBuffer: Point2[];
     constructor(viewport: Viewport);
     displaySize(): Vec2;
@@ -25,6 +26,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
     drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;

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

@@ -11,6 +11,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.lastPoint = null;
         this.objectNestingLevel = 0;
         this.lastText = null;
+        this.lastImage = null;
         // List of points drawn since the last clear.
         this.pointBuffer = [];
     }
@@ -30,6 +31,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.renderedPathCount = 0;
         this.pointBuffer = [];
         this.lastText = null;
+        this.lastImage = null;
         // Ensure all objects finished rendering
         if (this.objectNestingLevel > 0) {
             throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
@@ -73,6 +75,9 @@ export default class DummyRenderer extends AbstractRenderer {
     drawText(text, _transform, _style) {
         this.lastText = text;
     }
+    drawImage(image) {
+        this.lastImage = image;
+    }
     startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;

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

@@ -5,30 +5,32 @@ 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, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
-    private currentPath;
-    private pathStart;
+    private sanitize;
     private lastPathStyle;
-    private lastPath;
-    private lastPathStart;
+    private lastPathString;
     private objectElems;
     private overwrittenAttrs;
-    constructor(elem: SVGSVGElement, viewport: Viewport);
+    constructor(elem: SVGSVGElement, viewport: Viewport, sanitize?: boolean);
     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;
+    private transformFrom;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawImage(image: RenderableImage): 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,20 +1,27 @@
 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';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
-    constructor(elem, viewport) {
+    // Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+    constructor(elem, viewport, sanitize = false) {
         super(viewport);
         this.elem = elem;
+        this.sanitize = sanitize;
+        this.lastPathStyle = null;
+        this.lastPathString = [];
         this.objectElems = null;
         this.overwrittenAttrs = {};
         this.clear();
     }
     // Sets an attribute on the root SVG element.
     setRootSVGAttribute(name, value) {
+        if (this.sanitize) {
+            return;
+        }
         // Make the original value of the attribute restorable on clear
         if (!(name in this.overwrittenAttrs)) {
             this.overwrittenAttrs[name] = this.elem.getAttribute(name);
@@ -30,55 +37,29 @@ export default class SVGRenderer extends AbstractRenderer {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     clear() {
-        // Restore all alltributes
-        for (const attrName in this.overwrittenAttrs) {
-            const value = this.overwrittenAttrs[attrName];
-            if (value) {
-                this.elem.setAttribute(attrName, value);
-            }
-            else {
-                this.elem.removeAttribute(attrName);
+        this.lastPathString = [];
+        if (!this.sanitize) {
+            // Restore all all attributes
+            for (const attrName in this.overwrittenAttrs) {
+                const value = this.overwrittenAttrs[attrName];
+                if (value) {
+                    this.elem.setAttribute(attrName, value);
+                }
+                else {
+                    this.elem.removeAttribute(attrName);
+                }
             }
-        }
-        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.overwrittenAttrs = {};
         }
     }
     // 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,25 +69,41 @@ export default class SVGRenderer extends AbstractRenderer {
         this.elem.appendChild(pathElem);
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
-    drawText(text, transform, style) {
-        var _a, _b, _c;
-        transform = this.getCanvasToScreenTransform().rightMul(transform);
+    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());
+    }
+    // Apply [elemTransform] to [elem].
+    transformFrom(elemTransform, elem) {
+        let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
         const translation = transform.transformVec2(Vec2.zero);
         transform = transform.rightMul(Mat33.translation(translation.times(-1)));
-        const textElem = document.createElementNS(svgNameSpace, 'text');
-        textElem.appendChild(document.createTextNode(text));
-        textElem.style.transform = `matrix(
+        elem.style.transform = `matrix(
 			${transform.a1}, ${transform.b1},
 			${transform.a2}, ${transform.b2},
 			${transform.a3}, ${transform.b3}
 		)`;
+        elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+        elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+    }
+    drawText(text, transform, style) {
+        var _a, _b, _c;
+        const textElem = document.createElementNS(svgNameSpace, 'text');
+        textElem.appendChild(document.createTextNode(text));
+        this.transformFrom(transform, textElem);
         textElem.style.fontFamily = style.fontFamily;
         textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
         textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
         textElem.style.fontSize = style.size + 'px';
         textElem.style.fill = style.renderingStyle.fill.toHexString();
-        textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
-        textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
         if (style.renderingStyle.stroke) {
             const strokeStyle = style.renderingStyle.stroke;
             textElem.style.stroke = strokeStyle.color.toHexString();
@@ -115,11 +112,21 @@ export default class SVGRenderer extends AbstractRenderer {
         this.elem.appendChild(textElem);
         (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
     }
+    drawImage(image) {
+        var _a, _b, _c, _d, _e;
+        const svgImgElem = document.createElementNS(svgNameSpace, 'image');
+        svgImgElem.setAttribute('href', image.base64Url);
+        svgImgElem.setAttribute('width', (_a = image.image.getAttribute('width')) !== null && _a !== void 0 ? _a : '');
+        svgImgElem.setAttribute('height', (_b = image.image.getAttribute('height')) !== null && _b !== void 0 ? _b : '');
+        svgImgElem.setAttribute('aria-label', (_d = (_c = image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : image.image.getAttribute('alt')) !== null && _d !== void 0 ? _d : '');
+        this.transformFrom(image.transform, svgImgElem);
+        this.elem.appendChild(svgImgElem);
+        (_e = this.objectElems) === null || _e === void 0 ? void 0 : _e.push(svgImgElem);
+    }
     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 = [];
     }
@@ -128,7 +135,7 @@ export default class SVGRenderer extends AbstractRenderer {
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
-        if (loaderData) {
+        if (loaderData && !this.sanitize) {
             // Restore any attributes unsupported by the app.
             for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
                 const attrs = loaderData[svgAttributesDataKey];
@@ -146,40 +153,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');
@@ -191,6 +172,9 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Renders a **copy** of the given element.
     drawSVGElem(elem) {
+        if (this.sanitize) {
+            return;
+        }
         this.elem.appendChild(elem.cloneNode(true));
     }
     isTooSmallToRender(_rect) {

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

@@ -5,12 +5,13 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;
     private descriptionBuilder;
     private pathCount;
     private textNodeCount;
+    private imageNodeCount;
     constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
     displaySize(): Vec3;
     clear(): void;
@@ -22,6 +23,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
     protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
     drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     isTooSmallToRender(rect: Rect2): boolean;
     drawPoints(..._points: Vec3[]): void;
 }

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

@@ -8,6 +8,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         this.descriptionBuilder = [];
         this.pathCount = 0;
         this.textNodeCount = 0;
+        this.imageNodeCount = 0;
     }
     displaySize() {
         // We don't have a graphical display, export a reasonable size.
@@ -21,7 +22,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     getDescription() {
         return [
             this.localizationTable.pathNodeCount(this.pathCount),
-            this.localizationTable.textNodeCount(this.textNodeCount),
+            ...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
+            ...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
             ...this.descriptionBuilder
         ].join('\n');
     }
@@ -42,6 +44,11 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         this.descriptionBuilder.push(this.localizationTable.textNode(text));
         this.textNodeCount++;
     }
+    drawImage(image) {
+        const label = image.label ? this.localizationTable.imageNode(image.label) : this.localizationTable.unlabeledImageNode;
+        this.descriptionBuilder.push(label);
+        this.imageNodeCount++;
+    }
     isTooSmallToRender(rect) {
         return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
     }

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

@@ -1,4 +1,4 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent } from '../types';
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
 import ToolEnabledGroup from './ToolEnabledGroup';
 export default abstract class BaseTool implements PointerEvtListener {
     private notifier;
@@ -11,9 +11,12 @@ export default abstract class BaseTool implements PointerEvtListener {
     onGestureCancel(): void;
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;
+    onCopy(_event: CopyEvent): boolean;
+    onPaste(_event: PasteEvent): boolean;
     onKeyPress(_event: KeyPressEvent): boolean;
     onKeyUp(_event: KeyUpEvent): boolean;
     setEnabled(enabled: boolean): void;
     isEnabled(): boolean;
     setToolGroup(group: ToolEnabledGroup): void;
+    getToolGroup(): ToolEnabledGroup | null;
 }

package/dist/src/tools/BaseTool.js

@@ -13,6 +13,12 @@ export default class BaseTool {
     onWheel(_event) {
         return false;
     }
+    onCopy(_event) {
+        return false;
+    }
+    onPaste(_event) {
+        return false;
+    }
     onKeyPress(_event) {
         return false;
     }
@@ -48,4 +54,10 @@ export default class BaseTool {
         }
         this.group = group;
     }
+    getToolGroup() {
+        if (this.group) {
+            return this.group;
+        }
+        return null;
+    }
 }

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

@@ -0,0 +1,16 @@
+/**
+ * A tool that handles paste events.
+ * @packageDocumentation
+ */
+import Editor from '../Editor';
+import { PasteEvent } from '../types';
+import BaseTool from './BaseTool';
+export default class PasteHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onPaste(event: PasteEvent): boolean;
+    private addComponentsFromPaste;
+    private doSVGPaste;
+    private doTextPaste;
+    private doImagePaste;
+}