js-draw 1.22.0 → 1.24.1

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

@@ -98,7 +98,7 @@ export default abstract class BaseWidget {
     addTo(parent: HTMLElement): HTMLElement;
     /**
      * Remove this. This allows the widget to be added to a toolbar again
-     * in the future using {@link addTo}.
+     * in the future using `addTo`.
      */
     remove(): void;
     focus(): void;

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -300,7 +300,7 @@ class BaseWidget {
     }
     /**
      * Remove this. This allows the widget to be added to a toolbar again
-     * in the future using {@link addTo}.
+     * in the future using `addTo`.
      */
     remove() {
         this.container.remove();

package/dist/mjs/tools/PanZoom.mjs

@@ -427,7 +427,7 @@ export default class PanZoom extends BaseTool {
         translation = translation.times(-1);
         rotation = rotation * -1;
         scale = 1 / scale;
-        // Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+        // Work around an issue that seems to be related to rotation matrices losing precision on inversion.
         // TODO: Figure out why and implement a better solution.
         if (rotation !== 0) {
             rotation += 0.0001;

package/dist/mjs/tools/Pen.d.ts

@@ -11,6 +11,12 @@ export interface PenStyle {
     readonly thickness: number;
     readonly factory: ComponentBuilderFactory;
 }
+/**
+ * A tool that allows drawing shapes and freehand lines.
+ *
+ * To change the type of shape drawn by the pen (e.g. to switch to the rectangle
+ * pen type), see {@link setStrokeFactory}.
+ */
 export default class Pen extends BaseTool {
     private editor;
     protected builder: ComponentBuilder | null;
@@ -42,6 +48,13 @@ export default class Pen extends BaseTool {
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
+    /**
+     * Changes the type of stroke created by the pen. The given `factory` can be one of the built-in
+     * stroke factories (e.g. {@link makeFreehandLineBuilder}) or a custom stroke factory.
+     *
+     * Example:
+     * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+     */
     setStrokeFactory(factory: ComponentBuilderFactory): void;
     setHasStabilization(hasStabilization: boolean): void;
     setStrokeAutocorrectEnabled(enabled: boolean): void;

package/dist/mjs/tools/Pen.mjs

@@ -9,6 +9,12 @@ import  { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId }  from
 import  InputStabilizer  from './InputFilter/InputStabilizer.mjs';
 import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
 import  StationaryPenDetector, { defaultStationaryDetectionConfig, }  from './util/StationaryPenDetector.mjs';
+/**
+ * A tool that allows drawing shapes and freehand lines.
+ *
+ * To change the type of shape drawn by the pen (e.g. to switch to the rectangle
+ * pen type), see {@link setStrokeFactory}.
+ */
 export default class Pen extends BaseTool {
     constructor(editor, description, style) {
         super(editor.notifier, description);
@@ -244,6 +250,13 @@ export default class Pen extends BaseTool {
             });
         }
     }
+    /**
+     * Changes the type of stroke created by the pen. The given `factory` can be one of the built-in
+     * stroke factories (e.g. {@link makeFreehandLineBuilder}) or a custom stroke factory.
+     *
+     * Example:
+     * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+     */
     setStrokeFactory(factory) {
         if (factory !== this.style.factory) {
             this.styleValue.set({

package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs

@@ -10,7 +10,7 @@ export default class SelectionMenuShortcut {
         this.element = document.createElement('div');
         this.element.classList.add(`${cssPrefix}handle`, `${cssPrefix}selection-menu`);
         this.element.style.setProperty('--vertical-offset', `${verticalOffset}px`);
-        this.onClick = async () => {
+        this.onClick = () => {
             const anchor = this.getBBoxCanvasCoords().center;
             showContextMenu(anchor);
         };

package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts

@@ -1,6 +1,6 @@
 import Editor from '../../../Editor';
 declare const makeClipboardErrorHandlers: (editor: Editor) => {
-    onCopyError(error: Error | unknown): Promise<void>;
-    onPasteError(error: Error | unknown): void;
+    onCopyError(error: unknown): void;
+    onPasteError(error: unknown): void;
 };
 export default makeClipboardErrorHandlers;

package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.mjs

@@ -16,7 +16,7 @@ const makeClipboardErrorHandlers = (editor) => {
         return dialog;
     };
     return {
-        async onCopyError(error) {
+        onCopyError(error) {
             const dialog = makeErrorDialog(error);
             const textboxLabel = document.createElement('label');
             textboxLabel.textContent = editor.localization.copyPasteError__copyRetry;

package/dist/mjs/tools/SoundUITool.mjs

@@ -73,7 +73,7 @@ class SoundFeedback {
         this.boundaryGain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.25);
     }
     close() {
-        this.ctx.close();
+        void this.ctx.close();
         this.closed = true;
     }
 }

package/dist/mjs/tools/TextTool.d.ts

@@ -5,23 +5,22 @@ import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import { MutableReactiveValue } from '../util/ReactiveValue';
+/** A tool that allows users to enter and edit text. */
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;
     private textStyleValue;
     private textStyle;
+    private anchorControl;
+    private contentTransform;
     private textEditOverlay;
     private textInputElem;
-    private textTargetPosition;
     private textMeasuringCtx;
-    private textRotation;
-    private textScale;
     private removeExistingCommand;
     constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
     private initTextMeasuringCanvas;
     private getTextAscent;
     private flushInput;
-    private getTextScaleMatrix;
     private updateTextInput;
     private startTextInput;
     setEnabled(enabled: boolean): void;
@@ -33,4 +32,5 @@ export default class TextTool extends BaseTool {
     getTextStyle(): TextRenderingStyle;
     getStyleValue(): MutableReactiveValue<TextRenderingStyle>;
     private setTextStyle;
+    onDestroy(): void;
 }

package/dist/mjs/tools/TextTool.mjs

@@ -8,15 +8,14 @@ import  Erase  from '../commands/Erase.mjs';
 import  uniteCommands  from '../commands/uniteCommands.mjs';
 import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
 const overlayCSSClass = 'textEditorOverlay';
+/** A tool that allows users to enter and edit text. */
 export default class TextTool extends BaseTool {
     constructor(editor, description, localizationTable) {
         super(editor.notifier, description);
         this.editor = editor;
         this.localizationTable = localizationTable;
         this.textInputElem = null;
-        this.textTargetPosition = null;
         this.textMeasuringCtx = null;
-        this.textScale = Vec2.of(1, 1);
         this.removeExistingCommand = null;
         const editorFonts = editor.getCurrentSettings().text?.fonts ?? [];
         this.textStyleValue = ReactiveValue.fromInitialValue({
@@ -34,18 +33,10 @@ export default class TextTool extends BaseTool {
                 tool: this,
             });
         });
+        this.contentTransform = ReactiveValue.fromInitialValue(Mat33.identity);
         this.textEditOverlay = document.createElement('div');
         this.textEditOverlay.classList.add(overlayCSSClass);
         this.editor.addStyleSheet(`
-			.${overlayCSSClass} {
-				height: 0;
-				overflow: visible;
-
-				/* Allows absolutely-positioned textareas to scroll with
-				   the containing overlay. */
-				position: relative;
-			}
-
 			.${overlayCSSClass} textarea {
 				background-color: rgba(0, 0, 0, 0);
 
@@ -61,8 +52,7 @@ export default class TextTool extends BaseTool {
 				min-height: 1.1em;
 			}
 		`);
-        this.editor.createHTMLOverlay(this.textEditOverlay);
-        this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
+        this.anchorControl = this.editor.anchorElementToCanvas(this.textEditOverlay, this.contentTransform);
     }
     initTextMeasuringCanvas() {
         this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
@@ -82,24 +72,32 @@ export default class TextTool extends BaseTool {
     // If [removeInput], the HTML input element is removed. Otherwise, its value
     // is cleared.
     flushInput(removeInput = true) {
-        if (this.textInputElem && this.textTargetPosition) {
-            const content = this.textInputElem.value.trimEnd();
-            this.textInputElem.value = '';
-            if (removeInput) {
-                // In some browsers, .remove() triggers a .blur event (synchronously).
-                // Clear this.textInputElem before removal
-                const input = this.textInputElem;
-                this.textInputElem = null;
-                input.remove();
-            }
-            if (content === '') {
-                return;
-            }
-            const textTransform = Mat33.translation(this.textTargetPosition)
-                .rightMul(this.getTextScaleMatrix())
-                .rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas()))
-                .rightMul(Mat33.zRotation(this.textRotation));
-            const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
+        if (!this.textInputElem)
+            return;
+        // Determine the scroll first -- removing the input (and other DOM changes)
+        // also change the scroll.
+        const scrollingRegion = this.textEditOverlay.parentElement;
+        const containerScroll = Vec2.of(scrollingRegion?.scrollLeft ?? 0, scrollingRegion?.scrollTop ?? 0);
+        const content = this.textInputElem.value.trimEnd();
+        this.textInputElem.value = '';
+        if (removeInput) {
+            // In some browsers, .remove() triggers a .blur event (synchronously).
+            // Clear this.textInputElem before removal
+            const input = this.textInputElem;
+            this.textInputElem = null;
+            input.remove();
+        }
+        if (content !== '') {
+            // When the text is long, it can cause its container to scroll so that the
+            // editing caret is in view.
+            // So that the text added to the document is in the same position as the text
+            // shown in the editor, account for this scroll when computing the transform:
+            const scrollCorrectionScreen = containerScroll.times(-1);
+            // Uses .transformVec3 to avoid also translating the scroll correction (treating
+            // it as a point):
+            const scrollCorrectionCanvas = this.editor.viewport.screenToCanvasTransform.transformVec3(scrollCorrectionScreen);
+            const scrollTransform = Mat33.translation(scrollCorrectionCanvas);
+            const textComponent = TextComponent.fromLines(content.split('\n'), scrollTransform.rightMul(this.contentTransform.get()), this.textStyle);
             const action = EditorImage.addElement(textComponent);
             if (this.removeExistingCommand) {
                 // Unapply so that `removeExistingCommand` can be added to the undo stack.
@@ -112,16 +110,10 @@ export default class TextTool extends BaseTool {
             }
         }
     }
-    getTextScaleMatrix() {
-        return Mat33.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
-    }
     updateTextInput() {
-        if (!this.textInputElem || !this.textTargetPosition) {
-            this.textInputElem?.remove();
+        if (!this.textInputElem) {
             return;
         }
-        const viewport = this.editor.viewport;
-        const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
         this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
         this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
         this.textInputElem.style.fontStyle = this.textStyle.fontStyle ?? '';
@@ -129,9 +121,6 @@ export default class TextTool extends BaseTool {
         this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
         this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
         this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
-        this.textInputElem.style.position = 'absolute';
-        this.textInputElem.style.left = `${textScreenPos.x}px`;
-        this.textInputElem.style.top = `${textScreenPos.y}px`;
         this.textInputElem.style.margin = '0';
         this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
         this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
@@ -140,9 +129,7 @@ export default class TextTool extends BaseTool {
         const tallText = 'Testing!';
         const ascent = this.getTextAscent(tallText, this.textStyle);
         const vertAdjust = ascent;
-        const rotation = this.textRotation + viewport.getRotationAngle();
-        const scale = this.getTextScaleMatrix();
-        this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${(rotation * 180) / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
+        this.textInputElem.style.transform = `translate(0, ${-vertAdjust}px)`;
         this.textInputElem.style.transformOrigin = 'top left';
         // Match the line height of default rendered text.
         const lineHeight = Math.floor(this.textStyle.size);
@@ -153,9 +140,14 @@ export default class TextTool extends BaseTool {
         this.textInputElem = document.createElement('textarea');
         this.textInputElem.value = initialText;
         this.textInputElem.style.display = 'inline-block';
-        this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
-        this.textRotation = -this.editor.viewport.getRotationAngle();
-        this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        const textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
+        const textRotation = -this.editor.viewport.getRotationAngle();
+        const textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        this.contentTransform.set(
+        // Scale, then rotate, then translate:
+        Mat33.translation(textTargetPosition)
+            .rightMul(Mat33.zRotation(textRotation))
+            .rightMul(Mat33.scaling2D(textScale)));
         this.updateTextInput();
         // Update the input size/position/etc. after the placeHolder has had time to appear.
         setTimeout(() => this.updateTextInput(), 0);
@@ -224,10 +216,7 @@ export default class TextTool extends BaseTool {
                 this.removeExistingCommand = new Erase([targetNode]);
                 this.removeExistingCommand.apply(this.editor);
                 this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
-                const transform = targetNode.getTransform();
-                this.textRotation = transform.transformVec3(Vec2.unitX).angle();
-                const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
-                this.textScale = Vec2.of(1, 1).times(scaleFactor);
+                this.contentTransform.set(targetNode.getTransform());
                 this.updateTextInput();
             }
             else {
@@ -278,4 +267,9 @@ export default class TextTool extends BaseTool {
     setTextStyle(style) {
         this.textStyleValue.set(style);
     }
+    // @internal
+    onDestroy() {
+        super.onDestroy();
+        this.anchorControl.remove();
+    }
 }

package/dist/mjs/tools/UndoRedoShortcut.mjs

@@ -9,11 +9,11 @@ export default class UndoRedoShortcut extends BaseTool {
     // @internal
     onKeyPress(event) {
         if (this.editor.shortcuts.matchesShortcut(undoKeyboardShortcutId, event)) {
-            this.editor.history.undo();
+            void this.editor.history.undo();
             return true;
         }
         else if (this.editor.shortcuts.matchesShortcut(redoKeyboardShortcutId, event)) {
-            this.editor.history.redo();
+            void this.editor.history.redo();
             return true;
         }
         return false;

package/dist/mjs/tools/lib.d.ts

@@ -1,3 +1,4 @@
+export { default as InputMapper } from './InputFilter/InputMapper';
 export { default as BaseTool } from './BaseTool';
 export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';

package/dist/mjs/tools/lib.mjs

@@ -1,3 +1,4 @@
+export  { default as InputMapper }  from './InputFilter/InputMapper.mjs';
 export  { default as BaseTool }  from './BaseTool.mjs';
 export  { default as ToolController }  from './ToolController.mjs';
 export  { default as ToolEnabledGroup }  from './ToolEnabledGroup.mjs';

package/dist/mjs/util/ClipboardHandler.mjs

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-redundant-type-constituents -- Used for clarity */
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");

package/dist/mjs/util/cloneElementWithStyles.mjs

@@ -10,7 +10,7 @@ const cloneElementWithStyles = (element) => {
         for (let index = 0; index < originalComputedStyle.length; index++) {
             const propertyName = originalComputedStyle.item(index);
             const propertyValue = originalComputedStyle.getPropertyValue(propertyName);
-            clonedElement.style.setProperty(propertyName, propertyValue);
+            clonedElement.style?.setProperty(propertyName, propertyValue);
         }
         for (let i = 0; i < originalElement.children.length; i++) {
             const originalChild = originalElement.children.item(i);

package/dist/mjs/util/createElement.d.ts

@@ -0,0 +1,62 @@
+type ElementTagNames = keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;
+/**
+ * Maps from known elment tag names to options that can be set with .setAttribute.
+ * New elements/properties should be added as necessary.
+ */
+interface ElementToPropertiesMap {
+    path: {
+        d: string;
+        fill: string;
+        stroke: string;
+        transform: string;
+    };
+    rect: {
+        stroke: string;
+        fill: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        transform: string;
+    };
+    pattern: {
+        viewBox: string;
+        width: string;
+        height: string;
+        patternUnits: 'userSpaceOnUse';
+    };
+    stop: {
+        offset: string;
+        'stop-color': string;
+    };
+    svg: {
+        viewBox: `${number} ${number} ${number} ${number}`;
+    };
+}
+type EmptyObject = Record<never, never>;
+type ElementProperties<Tag extends ElementTagNames> = Tag extends keyof ElementToPropertiesMap ? Partial<ElementToPropertiesMap[Tag]> : EmptyObject;
+/** Contains options for creating an element with tag = `Tag`. */
+type ElementConfig<Tag extends ElementTagNames> = ElementProperties<Tag> & {
+    id?: string;
+    children?: (HTMLElement | SVGElement)[];
+};
+/**
+ * Maps from element tag names (e.g. `Tag='button'`) to the corresponding element type
+ * (e.g. `HTMLButtonElement`).
+ */
+type ElementTagToType<Tag extends ElementTagNames> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : never;
+export declare enum ElementNamespace {
+    Html = "html",
+    Svg = "svg"
+}
+/**
+ * Shorthand for creating an element with `document.createElement`, then assigning properties.
+ *
+ * Non-HTML elements (e.g. `svg` elements) should use the `elementType` parameter to select
+ * the element namespace.
+ */
+declare const createElement: <Tag extends ElementTagNames>(tag: Tag, props: ElementConfig<Tag>, elementType?: ElementNamespace) => ElementTagToType<Tag>;
+export declare const createSvgElement: <Tag extends keyof SVGElementTagNameMap>(tag: Tag, props: ElementConfig<Tag>) => ElementTagToType<Tag>;
+export declare const createSvgElements: <Tag extends keyof SVGElementTagNameMap>(tag: Tag, elements: ElementConfig<Tag>[]) => ElementTagToType<Tag>[];
+export declare const createSvgPaths: (...paths: ElementConfig<"path">[]) => SVGPathElement[];
+export default createElement;

package/dist/mjs/util/createElement.mjs

@@ -0,0 +1,47 @@
+export var ElementNamespace;
+(function (ElementNamespace) {
+    ElementNamespace["Html"] = "html";
+    ElementNamespace["Svg"] = "svg";
+})(ElementNamespace || (ElementNamespace = {}));
+/**
+ * Shorthand for creating an element with `document.createElement`, then assigning properties.
+ *
+ * Non-HTML elements (e.g. `svg` elements) should use the `elementType` parameter to select
+ * the element namespace.
+ */
+const createElement = (tag, props, elementType = ElementNamespace.Html) => {
+    let elem;
+    if (elementType === ElementNamespace.Html) {
+        elem = document.createElement(tag);
+    }
+    else if (elementType === ElementNamespace.Svg) {
+        elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    }
+    else {
+        throw new Error(`Unknown element type ${elementType}`);
+    }
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'children')
+            continue;
+        if (typeof value !== 'string' && typeof value !== 'number') {
+            throw new Error(`Unsupported value type ${typeof value}`);
+        }
+        elem.setAttribute(key, value.toString());
+    }
+    if (props.children) {
+        for (const item of props.children) {
+            elem.appendChild(item);
+        }
+    }
+    return elem;
+};
+export const createSvgElement = (tag, props) => {
+    return createElement(tag, props, ElementNamespace.Svg);
+};
+export const createSvgElements = (tag, elements) => {
+    return elements.map((props) => createSvgElement(tag, props));
+};
+export const createSvgPaths = (...paths) => {
+    return createSvgElements('path', paths);
+};
+export default createElement;

package/dist/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.22.0',
+    number: '1.24.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.22.0",
+	"version": "1.24.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/lib.d.ts",
 	"main": "./dist/cjs/lib.js",
@@ -64,11 +64,11 @@
 		"postpack": "ts-node tools/copyREADME.ts revert"
 	},
 	"dependencies": {
-		"@js-draw/math": "^1.22.0",
+		"@js-draw/math": "^1.24.1",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.22.0",
+		"@js-draw/build-tool": "^1.24.1",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "c922cf6e44d078133100e01383ba1bacdebe01bd"
+	"gitHead": "ef847374748e32d6d96d993a2236a99d9109a32c"
 }

package/src/Editor.scss

@@ -165,6 +165,37 @@
 	z-index: 5;
 }
 
+// See Editor.anchorElementToCanvas
+.imageEditorContainer .anchored-element-overlay {
+	overflow: visible;
+	height: 0;
+
+	> .content-wrapper {
+		width: var(--editor-current-display-width-px);
+		height: var(--editor-current-display-height-px);
+		overflow: hidden;
+		// Display 'position: absolute' children relative to this.
+		position: relative;
+
+		// Disable pointer events: If the parent (or the container) has
+		// captured pointers and the container is removed, this prevents
+		// us from receiving the following events (e.g. in Firefox).
+		pointer-events: none;
+
+		> .content {
+			position: absolute;
+			left: var(--position-x);
+			top: var(--position-y);
+			transform: scale(var(--scale)) rotate(var(--rotation));
+			transform-origin: left top;
+			margin: 0;
+
+			// We *do* want pointer events for the positioned content.
+			pointer-events: all;
+		}
+	}
+}
+
 // TODO: Apply this change during a future major release.
 // So as not to change the position of other overlays, all overlays should have
 // 0 height.