js-draw 0.15.1 → 0.16.0

package/dist/src/toolbar/IconProvider.js

@@ -1,5 +1,4 @@
 import Color4 from '../Color4';
-import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
@@ -482,7 +481,7 @@ export default class IconProvider {
             color: pen.getColor(),
             time: nowTime,
         };
-        const viewport = new Viewport(new EventDispatcher());
+        const viewport = new Viewport(() => { });
         const builder = factory(startPoint, viewport);
         builder.addPoint(endPoint);
         const icon = document.createElementNS(svgNamespace, 'svg');
@@ -608,4 +607,48 @@ export default class IconProvider {
         svg.setAttribute('viewBox', '0 0 100 100');
         return svg;
     }
+    makeConfigureDocumentIcon() {
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.innerHTML = `
+			<path
+				d='
+					M 5,5 V 95 H 95 V 5 Z m 5,5 H 90 V 90 H 10 Z
+					m 5,10 V 30 H 50 V 25 H 20 v -5 z
+					m 40,0 V 50 H 85 V 20 Z
+					m 2,2 H 83 V 39 L 77,28 70,42 64,35 57,45 Z
+					m 8.5,5 C 64.67,27 64,27.67 64,28.5 64,29.33 64.67,30 65.5,30 66.33,30 67,29.33 67,28.5 67,27.67 66.33,27 65.5,27 Z
+					M 15,40 v 5 h 35 v -5 z
+					m 0,15 v 5 h 70 v -5 z
+					m 0,15 v 5 h 70 v -5 z
+				'
+				style='fill: var(--icon-color);'
+			/>
+		`;
+        svg.setAttribute('viewBox', '0 0 100 100');
+        return svg;
+    }
+    makeOverflowIcon() {
+        return this.makeIconFromPath(`
+			M 15 40
+			A 12.5 12.5 0 0 0 2.5 52.5
+			A 12.5 12.5 0 0 0 15 65
+			A 12.5 12.5 0 0 0 27.5 52.5
+			A 12.5 12.5 0 0 0 15 40
+			z
+	
+			M 50 40
+			A 12.5 12.5 0 0 0 37.5 52.5
+			A 12.5 12.5 0 0 0 50 65
+			A 12.5 12.5 0 0 0 62.5 52.5
+			A 12.5 12.5 0 0 0 50 40
+			z
+			
+			M 85 40
+			A 12.5 12.5 0 0 0 72.5 52.5
+			A 12.5 12.5 0 0 0 85 65
+			A 12.5 12.5 0 0 0 97.5 52.5
+			A 12.5 12.5 0 0 0 85 40
+			z
+		`);
+    }
 }

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

@@ -33,6 +33,11 @@ export interface ToolbarLocalization {
     resetView: string;
     selectionToolKeyboardShortcuts: string;
     paste: string;
+    documentProperties: string;
+    backgroundColor: string;
+    imageWidthOption: string;
+    imageHeightOption: string;
+    toggleOverflow: string;
     errorImageHasZeroSize: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;

package/dist/src/toolbar/localization.js

@@ -24,6 +24,11 @@ export const defaultToolbarLocalization = {
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
+    documentProperties: 'Document',
+    backgroundColor: 'Background Color: ',
+    imageWidthOption: 'Width: ',
+    imageHeightOption: 'Height: ',
+    toggleOverflow: 'More',
     touchPanning: 'Touchscreen panning',
     freehandPen: 'Freehand',
     pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',

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

@@ -5,9 +5,11 @@ export default class ActionButtonWidget extends BaseWidget {
     protected makeIcon: () => Element | null;
     protected title: string;
     protected clickAction: () => void;
-    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization);
+    protected mustBeToplevel: boolean;
+    constructor(editor: Editor, id: string, makeIcon: () => Element | null, title: string, clickAction: () => void, localizationTable?: ToolbarLocalization, mustBeToplevel?: boolean);
     protected handleClick(): void;
     protected getTitle(): string;
     protected createIcon(): Element | null;
     protected fillDropdown(_dropdown: HTMLElement): boolean;
+    canBeInOverflowMenu(): boolean;
 }

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

@@ -1,10 +1,11 @@
 import BaseWidget from './BaseWidget';
 export default class ActionButtonWidget extends BaseWidget {
-    constructor(editor, id, makeIcon, title, clickAction, localizationTable) {
+    constructor(editor, id, makeIcon, title, clickAction, localizationTable, mustBeToplevel = false) {
         super(editor, id, localizationTable);
         this.makeIcon = makeIcon;
         this.title = title;
         this.clickAction = clickAction;
+        this.mustBeToplevel = mustBeToplevel;
     }
     handleClick() {
         this.clickAction();
@@ -18,4 +19,7 @@ export default class ActionButtonWidget extends BaseWidget {
     fillDropdown(_dropdown) {
         return false;
     }
+    canBeInOverflowMenu() {
+        return !this.mustBeToplevel;
+    }
 }

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

@@ -7,5 +7,5 @@ export default abstract class BaseToolWidget extends BaseWidget {
     protected targetTool: BaseTool;
     constructor(editor: Editor, targetTool: BaseTool, id: string, localizationTable?: ToolbarLocalization);
     protected handleClick(): void;
-    addTo(parent: HTMLElement): void;
+    addTo(parent: HTMLElement): HTMLElement;
 }

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

@@ -37,7 +37,8 @@ export default class BaseToolWidget extends BaseWidget {
         }
     }
     addTo(parent) {
-        super.addTo(parent);
+        const result = super.addTo(parent);
         this.setSelected(this.targetTool.isEnabled());
+        return result;
     }
 }

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

@@ -36,14 +36,19 @@ export default abstract class BaseWidget {
     protected abstract handleClick(): void;
     protected get hasDropdown(): boolean;
     protected addSubWidget(widget: BaseWidget): void;
-    addTo(parent: HTMLElement): void;
+    private toolbarWidgetToggleListener;
+    addTo(parent: HTMLElement): HTMLElement;
     protected updateIcon(): void;
     setDisabled(disabled: boolean): void;
     setSelected(selected: boolean): void;
     protected setDropdownVisible(visible: boolean): void;
+    canBeInOverflowMenu(): boolean;
+    getButtonWidth(): number;
+    isHidden(): boolean;
+    setHidden(hidden: boolean): void;
     protected repositionDropdown(): void;
     /** Set whether the widget is contained within another. @internal */
-    protected setIsToplevel(toplevel: boolean): void;
+    setIsToplevel(toplevel: boolean): void;
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;

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

@@ -22,6 +22,7 @@ export default class BaseWidget {
         // Maps subWidget IDs to subWidgets.
         this.subWidgets = {};
         this.toplevel = true;
+        this.toolbarWidgetToggleListener = null;
         this.localizationTable = localizationTable !== null && localizationTable !== void 0 ? localizationTable : editor.localization;
         this.icon = null;
         this.container = document.createElement('div');
@@ -135,12 +136,14 @@ export default class BaseWidget {
         this.subWidgets[id] = widget;
     }
     // Adds this to [parent]. This can only be called once for each ToolbarWidget.
+    // Returns the element that was just added to `parent`.
     // @internal
     addTo(parent) {
         this.label.innerText = this.getTitle();
         this.setupActionBtnClickListener(this.button);
         this.icon = null;
         this.updateIcon();
+        this.container.replaceChildren();
         this.button.replaceChildren(this.icon, this.label);
         this.container.appendChild(this.button);
         __classPrivateFieldSet(this, _BaseWidget_hasDropdown, this.fillDropdown(this.dropdownContainer), "f");
@@ -148,7 +151,10 @@ 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 (this.toolbarWidgetToggleListener) {
+                this.toolbarWidgetToggleListener.remove();
+            }
+            this.toolbarWidgetToggleListener = 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
@@ -159,7 +165,11 @@ export default class BaseWidget {
             });
         }
         this.setDropdownVisible(false);
+        if (this.container.parentElement) {
+            this.container.remove();
+        }
         parent.appendChild(this.container);
+        return this.container;
     }
     updateIcon() {
         var _a, _b;
@@ -219,6 +229,18 @@ export default class BaseWidget {
         }
         this.repositionDropdown();
     }
+    canBeInOverflowMenu() {
+        return true;
+    }
+    getButtonWidth() {
+        return this.button.clientWidth;
+    }
+    isHidden() {
+        return this.container.style.display === 'none';
+    }
+    setHidden(hidden) {
+        this.container.style.display = hidden ? 'none' : '';
+    }
     repositionDropdown() {
         const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
         const screenWidth = document.body.clientWidth;

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

@@ -0,0 +1,19 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class DocumentPropertiesWidget extends BaseWidget {
+    private updateDropdownContent;
+    constructor(editor: Editor, localizationTable?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    protected handleClick(): void;
+    private dropdownUpdateQueued;
+    private queueDropdownUpdate;
+    private updateDropdown;
+    private getBackgroundElem;
+    private setBackgroundColor;
+    private getBackgroundColor;
+    private updateImportExportRectSize;
+    private static idCounter;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+}

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

@@ -0,0 +1,135 @@
+import Color4 from '../../Color4';
+import ImageBackground from '../../components/ImageBackground';
+import { EditorImageEventType } from '../../EditorImage';
+import Rect2 from '../../math/Rect2';
+import { EditorEventType } from '../../types';
+import makeColorInput from '../makeColorInput';
+import BaseWidget from './BaseWidget';
+export default class DocumentPropertiesWidget extends BaseWidget {
+    constructor(editor, localizationTable) {
+        super(editor, 'zoom-widget', localizationTable);
+        this.updateDropdownContent = () => { };
+        this.dropdownUpdateQueued = false;
+        // Make it possible to open the dropdown, even if this widget isn't selected.
+        this.container.classList.add('dropdownShowable');
+        this.editor.notifier.on(EditorEventType.UndoRedoStackUpdated, () => {
+            this.queueDropdownUpdate();
+        });
+        this.editor.image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
+            this.queueDropdownUpdate();
+        });
+    }
+    getTitle() {
+        return this.localizationTable.documentProperties;
+    }
+    createIcon() {
+        return this.editor.icons.makeConfigureDocumentIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+        this.queueDropdownUpdate();
+    }
+    queueDropdownUpdate() {
+        if (!this.dropdownUpdateQueued) {
+            requestAnimationFrame(() => this.updateDropdown());
+            this.dropdownUpdateQueued = true;
+        }
+    }
+    updateDropdown() {
+        this.dropdownUpdateQueued = false;
+        if (this.isDropdownVisible()) {
+            this.updateDropdownContent();
+        }
+    }
+    getBackgroundElem() {
+        const backgroundComponents = [];
+        for (const component of this.editor.image.getBackgroundComponents()) {
+            if (component instanceof ImageBackground) {
+                backgroundComponents.push(component);
+            }
+        }
+        if (backgroundComponents.length === 0) {
+            return null;
+        }
+        // Return the last background component in the list — the component with highest z-index.
+        return backgroundComponents[backgroundComponents.length - 1];
+    }
+    setBackgroundColor(color) {
+        this.editor.dispatch(this.editor.setBackgroundColor(color));
+    }
+    getBackgroundColor() {
+        var _a, _b;
+        const background = this.getBackgroundElem();
+        return (_b = (_a = background === null || background === void 0 ? void 0 : background.getStyle()) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : Color4.transparent;
+    }
+    updateImportExportRectSize(size) {
+        const filterDimension = (dim) => {
+            if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
+                dim = 100;
+            }
+            return dim;
+        };
+        const width = filterDimension(size.width);
+        const height = filterDimension(size.height);
+        const currentRect = this.editor.getImportExportRect();
+        const newRect = new Rect2(currentRect.x, currentRect.y, width !== null && width !== void 0 ? width : currentRect.w, height !== null && height !== void 0 ? height : currentRect.h);
+        this.editor.dispatch(this.editor.image.setImportExportRect(newRect));
+        this.editor.queueRerender();
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        const backgroundColorRow = document.createElement('div');
+        const backgroundColorLabel = document.createElement('label');
+        backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
+        const [colorInput, backgroundColorInputContainer, setBgColorInputValue] = makeColorInput(this.editor, color => {
+            if (!color.eq(this.getBackgroundColor())) {
+                this.setBackgroundColor(color);
+            }
+        });
+        colorInput.id = `document-properties-color-input-${DocumentPropertiesWidget.idCounter++}`;
+        backgroundColorLabel.htmlFor = colorInput.id;
+        backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+        const addDimensionRow = (labelContent, onChange) => {
+            const row = document.createElement('div');
+            const label = document.createElement('label');
+            const spacer = document.createElement('span');
+            const input = document.createElement('input');
+            label.innerText = labelContent;
+            input.type = 'number';
+            input.min = '0';
+            input.id = `document-properties-dimension-row-${DocumentPropertiesWidget.idCounter++}`;
+            label.htmlFor = input.id;
+            spacer.style.flexGrow = '1';
+            input.style.flexGrow = '2';
+            input.style.width = '25px';
+            row.style.display = 'flex';
+            input.oninput = () => {
+                onChange(parseFloat(input.value));
+            };
+            row.replaceChildren(label, spacer, input);
+            return {
+                setValue: (value) => {
+                    input.value = value.toString();
+                },
+                element: row,
+            };
+        };
+        const imageWidthRow = addDimensionRow(this.localizationTable.imageWidthOption, (value) => {
+            this.updateImportExportRectSize({ width: value });
+        });
+        const imageHeightRow = addDimensionRow(this.localizationTable.imageHeightOption, (value) => {
+            this.updateImportExportRectSize({ height: value });
+        });
+        this.updateDropdownContent = () => {
+            setBgColorInputValue(this.getBackgroundColor());
+            const importExportRect = this.editor.getImportExportRect();
+            imageWidthRow.setValue(importExportRect.width);
+            imageHeightRow.setValue(importExportRect.height);
+        };
+        this.updateDropdownContent();
+        container.replaceChildren(backgroundColorRow, imageWidthRow.element, imageHeightRow.element);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+}
+DocumentPropertiesWidget.idCounter = 0;

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

@@ -71,7 +71,7 @@ class ZoomWidget extends BaseWidget {
         this.setDropdownVisible(!this.isDropdownVisible());
     }
     fillDropdown(dropdown) {
-        dropdown.appendChild(makeZoomControl(this.localizationTable, this.editor));
+        dropdown.replaceChildren(makeZoomControl(this.localizationTable, this.editor));
         return true;
     }
 }

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

@@ -0,0 +1,25 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class OverflowWidget extends BaseWidget {
+    private overflowChildren;
+    private overflowContainer;
+    constructor(editor: Editor, localizationTable?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected handleClick(): void;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    /**
+     * Removes all `BaseWidget`s from this and returns them.
+     */
+    clearChildren(): BaseWidget[];
+    getChildWidgets(): BaseWidget[];
+    hasAsChild(widget: BaseWidget): boolean;
+    /**
+     * Adds `widget` to this.
+     * `widget`'s previous parent is still responsible
+     * for serializing/deserializing its state.
+     */
+    addToOverflow(widget: BaseWidget): void;
+    canBeInOverflowMenu(): boolean;
+}

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

@@ -0,0 +1,65 @@
+import BaseWidget from './BaseWidget';
+export default class OverflowWidget extends BaseWidget {
+    constructor(editor, localizationTable) {
+        var _a;
+        super(editor, 'overflow-widget', localizationTable);
+        this.overflowChildren = [];
+        // Make the dropdown openable
+        this.container.classList.add('dropdownShowable');
+        (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
+    }
+    getTitle() {
+        return this.localizationTable.toggleOverflow;
+    }
+    createIcon() {
+        return this.editor.icons.makeOverflowIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        var _a;
+        (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
+        if (this.overflowContainer.parentElement) {
+            this.overflowContainer.remove();
+        }
+        this.overflowContainer.classList.add('toolbar-overflow-widget-overflow-list');
+        dropdown.appendChild(this.overflowContainer);
+        return true;
+    }
+    /**
+     * Removes all `BaseWidget`s from this and returns them.
+     */
+    clearChildren() {
+        this.overflowContainer.replaceChildren();
+        const overflowChildren = this.overflowChildren;
+        this.overflowChildren = [];
+        return overflowChildren;
+    }
+    getChildWidgets() {
+        return [...this.overflowChildren];
+    }
+    hasAsChild(widget) {
+        for (const otherWidget of this.overflowChildren) {
+            if (widget === otherWidget) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Adds `widget` to this.
+     * `widget`'s previous parent is still responsible
+     * for serializing/deserializing its state.
+     */
+    addToOverflow(widget) {
+        this.overflowChildren.push(widget);
+        widget.addTo(this.overflowContainer);
+        widget.setIsToplevel(false);
+    }
+    // This always returns false.
+    // Don't try to move the overflow menu to itself.
+    canBeInOverflowMenu() {
+        return false;
+    }
+}

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

@@ -7,3 +7,4 @@ export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
 export { default as InsertImageWidget } from './InsertImageWidget';
+export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';

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

@@ -7,3 +7,4 @@ export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
 export { default as InsertImageWidget } from './InsertImageWidget';
+export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';

package/dist/src/tools/Eraser.js

@@ -51,10 +51,13 @@ export default class Eraser extends BaseTool {
         const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
             return component.intersects(line) || component.intersectsRect(eraserRect);
         });
+        // Only erase components that could be selected (and thus interacted with)
+        // by the user.
+        const toErase = intersectingElems.filter(elem => elem.isSelectable());
         // Remove any intersecting elements.
-        this.toRemove.push(...intersectingElems);
+        this.toRemove.push(...toErase);
         // Create new Erase commands for the now-to-be-erased elements and apply them.
-        const newPartialCommands = intersectingElems.map(elem => new Erase([elem]));
+        const newPartialCommands = toErase.map(elem => new Erase([elem]));
         newPartialCommands.forEach(cmd => cmd.apply(this.editor));
         this.partialCommands.push(...newPartialCommands);
         this.drawPreviewAt(currentPoint);

package/dist/src/tools/PanZoom.js

@@ -85,6 +85,12 @@ export default class PanZoom extends BaseTool {
     }
     // Returns information about the pointers in a gesture
     computePinchData(p1, p2) {
+        // Swap the pointers to ensure consistent ordering.
+        if (p1.id < p2.id) {
+            const tmp = p1;
+            p1 = p2;
+            p2 = tmp;
+        }
         const screenBetween = p2.screenPos.minus(p1.screenPos);
         const angle = screenBetween.angle();
         const dist = screenBetween.magnitude();
@@ -169,6 +175,12 @@ export default class PanZoom extends BaseTool {
         // Snap the rotation
         if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
             fullRotation = roundedFullRotation;
+            // Work around a rotation/matrix multiply bug.
+            // (See commit after 4abe27ff8e7913155828f98dee77b09c57c51d30).
+            // TODO: Fix the underlying issue and remove this.
+            if (fullRotation !== 0) {
+                fullRotation += 0.0001;
+            }
         }
         return fullRotation - this.editor.viewport.getRotationAngle();
     }

package/dist/src/tools/PasteHandler.js

@@ -7,9 +7,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { TextComponent } from '../components/lib';
+import TextComponent from '../components/TextComponent';
 import SVGLoader from '../SVGLoader';
-import { Mat33 } from '../math/lib';
+import Mat33 from '../math/Mat33';
 import BaseTool from './BaseTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';

package/dist/src/tools/SelectionTool/Selection.d.ts

@@ -3,7 +3,8 @@
  * @packageDocumentation
  */
 import Editor from '../../Editor';
-import { Mat33, Rect2 } from '../../math/lib';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
 import { Point2 } from '../../math/Vec2';
 import Pointer from '../../Pointer';
 import AbstractComponent from '../../components/AbstractComponent';

package/dist/src/tools/SelectionTool/Selection.js

@@ -13,7 +13,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 var _a;
 import SerializableCommand from '../../commands/SerializableCommand';
-import { Mat33, Rect2 } from '../../math/lib';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
 import { Vec2 } from '../../math/Vec2';
 import SelectionHandle, { HandleShape, handleSize } from './SelectionHandle';
 import { cssPrefix } from './SelectionTool';
@@ -157,7 +158,7 @@ export default class Selection {
             singleItemSelectionMode = true;
         }
         this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
-            return elem.intersectsRect(this.region);
+            return elem.intersectsRect(this.region) && elem.isSelectable();
         });
         if (singleItemSelectionMode && this.selectedElems.length > 0) {
             this.selectedElems = [this.selectedElems[this.selectedElems.length - 1]];

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -284,6 +284,10 @@ export default class SelectionTool extends BaseTool {
                 });
                 return true;
             }
+            if (evt.key === 'a') {
+                // Selected all in onKeyDown. Don't finalizeTransform.
+                return true;
+            }
         }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
@@ -300,7 +304,7 @@ export default class SelectionTool extends BaseTool {
         if (selectedElems.length === 0) {
             return false;
         }
-        const exportViewport = new Viewport(this.editor.notifier);
+        const exportViewport = new Viewport(() => { });
         exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
         exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
         const svgNameSpace = 'http://www.w3.org/2000/svg';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.15.1",
+	"version": "0.16.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Color4.test.ts

@@ -31,4 +31,10 @@ describe('Color4', () => {
 	it('should mix red with nothing and get red', () => {
 		expect(Color4.average([ Color4.red ])).objEq(Color4.red);
 	});
+
+	it('different colors should be different', () => {
+		expect(Color4.red.eq(Color4.red)).toBe(true);
+		expect(Color4.red.eq(Color4.green)).toBe(false);
+		expect(Color4.fromString('#ff000000').eq(Color4.transparent)).toBe(true);
+	});
 });

package/src/Color4.ts

@@ -10,7 +10,7 @@ export default class Color4 {
 		/** Blue component. `b` ∈ [0, 1] */
 		public readonly b: number,
 
-		/** Alpha/transparent component. `a` ∈ [0, 1] */
+		/** Alpha/transparent component. `a` ∈ [0, 1]. 0 = transparent */
 		public readonly a: number
 	) {
 	}
@@ -126,6 +126,11 @@ export default class Color4 {
 			return false;
 		}
 
+		// If both completely transparent,
+		if (this.a === 0 && other.a === 0) {
+			return true;
+		}
+
 		return this.toHexString() === other.toHexString();
 	}