js-draw 1.9.0 → 1.10.0

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

@@ -24,8 +24,7 @@ export default class PenToolWidget extends BaseToolWidget {
     private createIconForRecord;
     protected createIcon(): Element;
     private createPenTypeSelector;
-    private setInputStabilizationEnabled;
-    protected createStabilizationOption(): {
+    protected createStrokeCorrectionOptions(): {
         update: () => void;
         addTo: (parent: HTMLElement) => void;
     };

package/dist/mjs/toolbar/widgets/PenToolWidget.mjs

@@ -147,27 +147,51 @@ class PenToolWidget extends BaseToolWidget {
             },
         };
     }
-    setInputStabilizationEnabled(enabled) {
-        this.tool.setHasStabilization(enabled);
-    }
-    createStabilizationOption() {
-        const stabilizationOption = document.createElement('div');
-        const stabilizationCheckbox = document.createElement('input');
-        const stabilizationLabel = document.createElement('label');
-        stabilizationLabel.innerText = this.localizationTable.inputStabilization;
-        stabilizationCheckbox.type = 'checkbox';
-        stabilizationCheckbox.id = `${toolbarCSSPrefix}-penInputStabilizationCheckbox-${PenToolWidget.idCounter++}`;
-        stabilizationLabel.htmlFor = stabilizationCheckbox.id;
-        stabilizationOption.replaceChildren(stabilizationLabel, stabilizationCheckbox);
-        stabilizationCheckbox.oninput = () => {
-            this.setInputStabilizationEnabled(stabilizationCheckbox.checked);
+    createStrokeCorrectionOptions() {
+        const container = document.createElement('div');
+        container.classList.add('action-button-row', `${toolbarCSSPrefix}-pen-tool-toggle-buttons`);
+        const addToggleButton = (labelText, icon) => {
+            const button = document.createElement('button');
+            button.classList.add(`${toolbarCSSPrefix}-toggle-button`);
+            const iconElement = icon.cloneNode(true);
+            iconElement.classList.add('icon');
+            const label = document.createElement('span');
+            label.innerText = labelText;
+            button.replaceChildren(iconElement, label);
+            button.setAttribute('role', 'switch');
+            container.appendChild(button);
+            let checked = false;
+            let onChangeListener = (_checked) => { };
+            const result = {
+                setChecked(newChecked) {
+                    checked = newChecked;
+                    button.setAttribute('aria-checked', `${checked}`);
+                    onChangeListener(checked);
+                },
+                setOnInputListener(listener) {
+                    onChangeListener = listener;
+                },
+            };
+            button.onclick = () => {
+                result.setChecked(!checked);
+            };
+            return result;
         };
+        const stabilizationOption = addToggleButton(this.localizationTable.inputStabilization, this.editor.icons.makeStrokeSmoothingIcon());
+        stabilizationOption.setOnInputListener(enabled => {
+            this.tool.setHasStabilization(enabled);
+        });
+        const autocorrectOption = addToggleButton(this.localizationTable.strokeAutocorrect, this.editor.icons.makeShapeAutocorrectIcon());
+        autocorrectOption.setOnInputListener(enabled => {
+            this.tool.setStrokeAutocorrectEnabled(enabled);
+        });
         return {
             update: () => {
-                stabilizationCheckbox.checked = !!this.tool.getInputMapper();
+                stabilizationOption.setChecked(!!this.tool.getInputMapper());
+                autocorrectOption.setChecked(this.tool.getStrokeAutocorrectionEnabled());
             },
             addTo: (parent) => {
-                parent.appendChild(stabilizationOption);
+                parent.appendChild(container);
             }
         };
     }
@@ -189,20 +213,22 @@ class PenToolWidget extends BaseToolWidget {
         colorLabel.setAttribute('for', colorInput.id);
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
-        const stabilizationOption = this.createStabilizationOption();
+        const toggleButtonRow = this.createStrokeCorrectionOptions();
         this.updateInputs = () => {
             setColorInputValue(this.tool.getColor());
             setThickness(this.tool.getThickness());
             penTypeSelect.updateIcons();
             // Update the selected stroke factory.
             penTypeSelect.setValue(this.getCurrentPenTypeIdx());
-            stabilizationOption.update();
+            toggleButtonRow.update();
         };
         this.updateInputs();
         container.replaceChildren(colorRow, thicknessRow);
         penTypeSelect.addTo(container);
-        stabilizationOption.addTo(container);
         dropdown.replaceChildren(container);
+        // Add the toggle button row *outside* of the main content (use different
+        // spacing with respect to the sides of the container).
+        toggleButtonRow.addTo(dropdown);
         return true;
     }
     onKeyPress(event) {
@@ -232,6 +258,7 @@ class PenToolWidget extends BaseToolWidget {
             thickness: this.tool.getThickness(),
             strokeFactoryId: this.getCurrentPenType()?.id,
             inputStabilization: !!this.tool.getInputMapper(),
+            strokeAutocorrect: this.tool.getStrokeAutocorrectionEnabled(),
         };
     }
     deserializeFrom(state) {
@@ -262,7 +289,10 @@ class PenToolWidget extends BaseToolWidget {
             }
         }
         if (state.inputStabilization !== undefined) {
-            this.setInputStabilizationEnabled(!!state.inputStabilization);
+            this.tool.setHasStabilization(!!state.inputStabilization);
+        }
+        if (state.strokeAutocorrect !== undefined) {
+            this.tool.setStrokeAutocorrectEnabled(!!state.strokeAutocorrect);
         }
     }
 }

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

@@ -19,6 +19,11 @@ export default class Pen extends BaseTool {
     private currentDeviceType;
     private styleValue;
     private style;
+    private shapeAutocompletionEnabled;
+    private autocorrectedShape;
+    private lastAutocorrectedShape;
+    private removedAutocorrectedShapeTime;
+    private stationaryDetector;
     constructor(editor: Editor, description: string, style: Partial<PenStyle>);
     private getPressureMultiplier;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
@@ -30,12 +35,16 @@ export default class Pen extends BaseTool {
     onPointerMove({ current }: PointerEvt): void;
     onPointerUp({ current }: PointerEvt): boolean;
     onGestureCancel(): void;
+    private removedAutocorrectedShapeRecently;
+    private autocorrectShape;
     private finalizeStroke;
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
     setStrokeFactory(factory: ComponentBuilderFactory): void;
     setHasStabilization(hasStabilization: boolean): void;
+    setStrokeAutocorrectEnabled(enabled: boolean): void;
+    getStrokeAutocorrectionEnabled(): boolean;
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;

package/dist/mjs/tools/Pen.mjs

@@ -8,6 +8,7 @@ import  { undoKeyboardShortcutId }  from './keybindings.mjs';
 import  { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId }  from './keybindings.mjs';
 import  InputStabilizer  from './InputFilter/InputStabilizer.mjs';
 import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
+import  StationaryPenDetector  from './util/StationaryPenDetector.mjs';
 export default class Pen extends BaseTool {
     constructor(editor, description, style) {
         super(editor.notifier, description);
@@ -16,6 +17,11 @@ export default class Pen extends BaseTool {
         this.lastPoint = null;
         this.startPoint = null;
         this.currentDeviceType = null;
+        this.shapeAutocompletionEnabled = false;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
+        this.removedAutocorrectedShapeTime = 0;
+        this.stationaryDetector = null;
         this.styleValue = ReactiveValue.fromInitialValue({
             factory: makeFreehandLineBuilder,
             color: Color4.blue,
@@ -53,7 +59,14 @@ export default class Pen extends BaseTool {
     // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
     previewStroke() {
         this.editor.clearWetInk();
-        this.builder?.preview(this.editor.display.getWetInkRenderer());
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        if (this.autocorrectedShape) {
+            const visibleRect = this.editor.viewport.visibleRect;
+            this.autocorrectedShape.render(wetInkRenderer, visibleRect);
+        }
+        else {
+            this.builder?.preview(wetInkRenderer);
+        }
     }
     // Throws if no stroke builder exists.
     addPointToStroke(point) {
@@ -82,6 +95,19 @@ export default class Pen extends BaseTool {
             this.startPoint = this.toStrokePoint(current);
             this.builder = this.style.factory(this.startPoint, this.editor.viewport);
             this.currentDeviceType = current.device;
+            if (this.shapeAutocompletionEnabled) {
+                const stationaryDetectionConfig = {
+                    maxSpeed: 5,
+                    maxRadius: 10,
+                    minTimeSeconds: 0.5, // s
+                };
+                this.stationaryDetector = new StationaryPenDetector(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
+            }
+            else {
+                this.stationaryDetector = null;
+            }
+            this.lastAutocorrectedShape = null;
+            this.removedAutocorrectedShapeTime = 0;
             return true;
         }
         return false;
@@ -109,7 +135,14 @@ export default class Pen extends BaseTool {
             return;
         if (current.device !== this.currentDeviceType)
             return;
-        this.addPointToStroke(this.toStrokePoint(current));
+        const isStationary = this.stationaryDetector?.onPointerMove(current);
+        if (!isStationary) {
+            this.addPointToStroke(this.toStrokePoint(current));
+            if (this.autocorrectedShape) {
+                this.removedAutocorrectedShapeTime = performance.now();
+                this.autocorrectedShape = null;
+            }
+        }
     }
     onPointerUp({ current }) {
         if (!this.builder)
@@ -119,6 +152,7 @@ export default class Pen extends BaseTool {
             // device type.
             return true;
         }
+        this.stationaryDetector?.onPointerUp(current);
         // onPointerUp events can have zero pressure. Use the last pressure instead.
         const currentPoint = this.toStrokePoint(current);
         const strokePoint = {
@@ -134,10 +168,37 @@ export default class Pen extends BaseTool {
     onGestureCancel() {
         this.builder = null;
         this.editor.clearWetInk();
+        this.stationaryDetector?.destroy();
+        this.stationaryDetector = null;
+    }
+    removedAutocorrectedShapeRecently() {
+        return this.removedAutocorrectedShapeTime > performance.now() - 320;
+    }
+    async autocorrectShape(_lastPointer) {
+        if (!this.builder || !this.builder.autocorrectShape)
+            return;
+        if (!this.shapeAutocompletionEnabled)
+            return;
+        // If already corrected, do nothing
+        if (this.autocorrectedShape)
+            return;
+        // Activate stroke fitting
+        const correctedShape = await this.builder.autocorrectShape();
+        if (!this.builder || !correctedShape) {
+            return;
+        }
+        this.autocorrectedShape = correctedShape;
+        this.lastAutocorrectedShape = correctedShape;
+        this.previewStroke();
     }
     finalizeStroke() {
         if (this.builder) {
-            const stroke = this.builder.build();
+            // If autocorrectedShape was cleared recently enough, it was
+            // probably by mistake. Reset it.
+            if (this.lastAutocorrectedShape && this.removedAutocorrectedShapeRecently()) {
+                this.autocorrectedShape = this.lastAutocorrectedShape;
+            }
+            const stroke = this.autocorrectedShape ?? this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
                 const canFlatten = true;
@@ -150,7 +211,11 @@ export default class Pen extends BaseTool {
         }
         this.builder = null;
         this.lastPoint = null;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
         this.editor.clearWetInk();
+        this.stationaryDetector?.destroy();
+        this.stationaryDetector = null;
     }
     noteUpdated() {
         this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
@@ -196,6 +261,15 @@ export default class Pen extends BaseTool {
         }
         this.noteUpdated();
     }
+    setStrokeAutocorrectEnabled(enabled) {
+        if (enabled !== this.shapeAutocompletionEnabled) {
+            this.shapeAutocompletionEnabled = enabled;
+            this.noteUpdated();
+        }
+    }
+    getStrokeAutocorrectionEnabled() {
+        return this.shapeAutocompletionEnabled;
+    }
     getThickness() { return this.style.thickness; }
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.style.factory; }

package/dist/mjs/tools/TextTool.mjs

@@ -39,6 +39,10 @@ export default class TextTool extends BaseTool {
 			.${overlayCSSClass} {
 				height: 0;
 				overflow: visible;
+
+				/* Allows absolutely-positioned textareas to scroll with
+				   the containing overlay. */
+				position: relative;
 			}
 
 			.${overlayCSSClass} textarea {
@@ -121,7 +125,7 @@ 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 = 'relative';
+        this.textInputElem.style.position = 'absolute';
         this.textInputElem.style.left = `${textScreenPos.x}px`;
         this.textInputElem.style.top = `${textScreenPos.y}px`;
         this.textInputElem.style.margin = '0';

package/dist/mjs/tools/util/StationaryPenDetector.d.ts

@@ -0,0 +1,22 @@
+import Pointer from '../../Pointer';
+interface Config {
+    maxSpeed: number;
+    minTimeSeconds: number;
+    maxRadius: number;
+}
+type OnStationaryCallback = (lastPointer: Pointer) => void;
+export default class StationaryPenDetector {
+    private config;
+    private onStationary;
+    private stationaryStartPointer;
+    private lastPointer;
+    private averageVelocity;
+    private timeout;
+    constructor(startPointer: Pointer, config: Config, onStationary: OnStationaryCallback);
+    onPointerMove(currentPointer: Pointer): boolean | undefined;
+    onPointerUp(pointer: Pointer): void;
+    destroy(): void;
+    private cancelStationaryTimeout;
+    private setStationaryTimeout;
+}
+export {};

package/dist/mjs/tools/util/StationaryPenDetector.mjs

@@ -0,0 +1,92 @@
+import { Vec2 } from '@js-draw/math';
+export default class StationaryPenDetector {
+    // Only handles one pen. As such, `startPointer` should be the same device/finger
+    // as `updatedPointer` in `onPointerMove`.
+    //
+    // A new `StationaryPenDetector` should be created for each gesture.
+    constructor(startPointer, config, onStationary) {
+        this.config = config;
+        this.onStationary = onStationary;
+        this.timeout = null;
+        this.stationaryStartPointer = startPointer;
+        this.lastPointer = startPointer;
+        this.averageVelocity = Vec2.zero;
+    }
+    // Returns true if stationary
+    onPointerMove(currentPointer) {
+        if (!this.stationaryStartPointer) {
+            // Destoroyed
+            return;
+        }
+        if (currentPointer.id !== this.stationaryStartPointer.id) {
+            return false;
+        }
+        // dx: "Δx" Displacement from last.
+        const dxFromLast = currentPointer.screenPos.minus(this.lastPointer.screenPos);
+        const dxFromStationaryStart = currentPointer.screenPos.minus(this.stationaryStartPointer.screenPos);
+        // dt: Delta time:
+        // /1000: Convert to s.
+        let dtFromLast = (currentPointer.timeStamp - this.lastPointer.timeStamp) / 1000; // s
+        // Don't divide by zero
+        if (dtFromLast === 0) {
+            dtFromLast = 1;
+        }
+        const currentVelocity = dxFromLast.times(1 / dtFromLast); // px/s
+        // Slight smoothing of the velocity to prevent input jitter from affecting the
+        // velocity too significantly.
+        this.averageVelocity = this.averageVelocity.lerp(currentVelocity, 0.5); // px/s
+        const dtFromStart = currentPointer.timeStamp - this.stationaryStartPointer.timeStamp; // ms
+        // If not stationary
+        if (dxFromStationaryStart.length() > this.config.maxRadius
+            || this.averageVelocity.length() > this.config.maxSpeed
+            || dtFromStart < this.config.minTimeSeconds) {
+            this.stationaryStartPointer = currentPointer;
+            this.lastPointer = currentPointer;
+            this.setStationaryTimeout(this.config.minTimeSeconds * 1000);
+            return false;
+        }
+        const stationaryTimeoutMs = this.config.minTimeSeconds * 1000 - dtFromStart;
+        this.lastPointer = currentPointer;
+        return stationaryTimeoutMs <= 0;
+    }
+    onPointerUp(pointer) {
+        if (pointer.id !== this.stationaryStartPointer?.id) {
+            this.cancelStationaryTimeout();
+        }
+    }
+    destroy() {
+        this.cancelStationaryTimeout();
+        this.stationaryStartPointer = null;
+    }
+    cancelStationaryTimeout() {
+        if (this.timeout !== null) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+    }
+    setStationaryTimeout(timeoutMs) {
+        if (this.timeout !== null) {
+            return;
+        }
+        if (timeoutMs <= 0) {
+            this.onStationary(this.lastPointer);
+        }
+        else {
+            this.timeout = setTimeout(() => {
+                this.timeout = null;
+                if (!this.stationaryStartPointer) {
+                    // Destroyed
+                    return;
+                }
+                const timeSinceStationaryStart = performance.now() - this.stationaryStartPointer.timeStamp;
+                const timeRemaining = this.config.minTimeSeconds * 1000 - timeSinceStationaryStart;
+                if (timeRemaining <= 0) {
+                    this.onStationary(this.lastPointer);
+                }
+                else {
+                    this.setStationaryTimeout(timeRemaining);
+                }
+            }, timeoutMs);
+        }
+    }
+}

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

@@ -13,6 +13,8 @@ type UpdateCallback<T> = (value: T) => void;
  *
  * Static methods in the `ReactiveValue` and `MutableReactiveValue` classes are
  * constructors (e.g. `fromImmutable`).
+ *
+ * Avoid extending this class from an external library, as that may not be stable.
  */
 export declare abstract class ReactiveValue<T> {
     /**

package/dist/mjs/util/ReactiveValue.mjs

@@ -31,6 +31,8 @@ const noOpSetUpdateListener = () => {
  *
  * Static methods in the `ReactiveValue` and `MutableReactiveValue` classes are
  * constructors (e.g. `fromImmutable`).
+ *
+ * Avoid extending this class from an external library, as that may not be stable.
  */
 export class ReactiveValue {
     /** Creates a `ReactiveValue` with an initial value, `initialValue`. */

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

@@ -1 +1,2 @@
 export { default as adjustEditorThemeForContrast } from './adjustEditorThemeForContrast';
+export { ReactiveValue, MutableReactiveValue } from './ReactiveValue';

package/dist/mjs/util/lib.mjs

@@ -1 +1,2 @@
 export  { default as adjustEditorThemeForContrast }  from './adjustEditorThemeForContrast.mjs';
+export  { ReactiveValue, MutableReactiveValue }  from './ReactiveValue.mjs';

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

@@ -0,0 +1,2 @@
+declare const waitForImageLoad: (image: HTMLImageElement) => Promise<void>;
+export default waitForImageLoad;

package/dist/mjs/util/waitForImageLoaded.mjs

@@ -0,0 +1,10 @@
+const waitForImageLoad = async (image) => {
+    if (!image.complete) {
+        await new Promise((resolve, reject) => {
+            image.onload = event => resolve(event);
+            image.onerror = event => reject(event);
+            image.onabort = event => reject(event);
+        });
+    }
+};
+export default waitForImageLoad;

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.9.0',
+    number: '1.10.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "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,7 +64,7 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.9.0",
+    "@js-draw/math": "^1.10.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "e824c37e9f216852cf096976e3a74fb4f177ead3"
+  "gitHead": "ccf1d0634e902c731fcd794df11cd001c3a30585"
 }

package/src/Editor.scss

@@ -74,6 +74,13 @@
 	min-height: 220px;
 	min-width: 100px;
 
+	// A vertical writing mode breaks assumptions about how toolbars/overlays
+	// are aligned, resulting in unusable toolbars/text.
+	//
+	// TODO: Fix this.
+	//
+	writing-mode: horizontal-tb;
+
 	box-sizing: border-box;
 
 	display: flex;

package/src/toolbar/AbstractToolbar.scss

@@ -217,6 +217,26 @@
 	justify-content: center;
 }
 
+.toolbar-element .toolbar--toggle-button {
+	color: var(--foreground-color-1);
+	font-weight: normal;
+
+	&[aria-checked=true] {
+		background: var(--selection-background-color);
+		color: var(--selection-foreground-color);
+	}
+
+	> .icon {
+		width: 25px;
+		height: 25px;
+		margin: 0 5px;
+	}
+
+	> * {
+		vertical-align: middle;
+	}
+}
+
 .toolbar-closeColorPickerOverlay {
 	display: none;
 	position: fixed;

package/src/toolbar/toolbar.scss

@@ -1,6 +1,6 @@
 @use "./widgets/InsertImageWidget.scss";
 @use "./widgets/OverflowWidget.css";
-@use "./widgets/PenToolWidget.css";
+@use "./widgets/PenToolWidget.scss";
 @use "./widgets/HandToolWidget.scss";
 @use "./widgets/SelectionToolWidget.scss";
 @use "./widgets/DocumentPropertiesWidget.scss";

package/src/toolbar/widgets/InsertImageWidget.scss

@@ -12,7 +12,7 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 
 	img {
 		max-width: min(50vw, 75%);
-		max-height: 50vh;
+		max-height: min(300px, 50vh);
 	
 		/* Center */
 		display: block;
@@ -20,6 +20,11 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 		margin-right: auto;
 	}
 
+	.insert-image-image-status-view {
+		display: flex;
+		justify-content: space-between;
+	}
+
 	.action-button-row {
 		margin-top: 4px;
 		display: flex;

package/src/toolbar/widgets/PenToolWidget.scss

@@ -0,0 +1,33 @@
+
+
+// Repeat selector for extra specificity
+:root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons {
+	display: flex;
+	justify-content: stretch;
+	padding-top: 0;
+	padding-bottom: 5px;
+
+	// Some styles rely on left being start.
+	direction: ltr;
+
+	& > * {
+		flex-grow: 1;
+		text-align: start;
+		margin-inline-end: 5px;
+
+		.icon {
+			margin: 0;
+			margin-inline-start: 4px;
+			margin-inline-end: 10px;
+		}
+	}
+
+	& > :nth-child(1) {
+		direction: ltr;
+	}
+
+	& > :last-child {
+		// Reverse the last (show icon on the right)
+		direction: rtl;
+	}
+}

package/src/tools/SelectionTool/SelectionTool.scss

@@ -83,6 +83,12 @@
 .overlay.handleOverlay {
 	touch-action: none;
 
+	// The selection tool makes some assumptions about margin-left, margin-top,
+	// and the initial (unmodified) position of the selection.
+	//
+	// For now, as we're not showing text in the selection box, force LTR.
+	direction: ltr;
+
 	// When expanding a selection with shift+click&drag, multiple selection boxes
 	// can be present in the same handleOverlay. As such, so that other overlayed
 	// selection boxes are in the correct place, the outer container needs to have

package/src/toolbar/widgets/PenToolWidget.css

@@ -1,2 +0,0 @@
-
-