js-draw 1.4.0 → 1.5.0

package/dist/cjs/toolbar/AbstractToolbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/toolbar/EdgeToolbar.js

@@ -235,11 +235,11 @@ class EdgeToolbar extends AbstractToolbar_1.default {
         widget.removeCSSClassFromContainer('label-right');
         if (tags.includes(BaseWidget_1.ToolbarWidgetTag.Save)) {
             widget.addCSSClassToContainer('label-inline');
-            widget.addCSSClassToContainer('label-right');
+            widget.addCSSClassToContainer('label-left');
         }
         if (tags.includes(BaseWidget_1.ToolbarWidgetTag.Exit)) {
             widget.addCSSClassToContainer('label-inline');
-            widget.addCSSClassToContainer('label-left');
+            widget.addCSSClassToContainer('label-right');
         }
     }
     addWidgetInternal(widget) {

package/dist/cjs/toolbar/widgets/SaveActionWidget.d.ts

@@ -2,8 +2,9 @@ import { KeyPressEvent } from '../../inputEvents';
 import Editor from '../../Editor';
 import { ToolbarLocalization } from '../localization';
 import ActionButtonWidget from './ActionButtonWidget';
+import { ActionButtonIcon } from '../types';
 declare class SaveActionWidget extends ActionButtonWidget {
-    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void);
+    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>);
     protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
     mustBeInToplevelMenu(): boolean;

package/dist/cjs/toolbar/widgets/SaveActionWidget.js

@@ -7,8 +7,12 @@ const ActionButtonWidget_1 = __importDefault(require("./ActionButtonWidget"));
 const BaseWidget_1 = require("./BaseWidget");
 const keybindings_1 = require("./keybindings");
 class SaveActionWidget extends ActionButtonWidget_1.default {
-    constructor(editor, localization, saveCallback) {
-        super(editor, 'save-button', editor.icons.makeSaveIcon, localization.save, saveCallback);
+    constructor(editor, localization, saveCallback, labelOverride = {}) {
+        super(editor, 'save-button', 
+        // Creates an icon
+        () => {
+            return labelOverride.icon ?? editor.icons.makeSaveIcon();
+        }, labelOverride.label ?? localization.save, saveCallback);
         this.setTags([BaseWidget_1.ToolbarWidgetTag.Save]);
     }
     shouldAutoDisableInReadOnlyEditor() {

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

@@ -157,8 +157,10 @@ class Selection {
         // Reset for the next drag
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = math_1.Mat33.identity;
-        // Make the commands undo-able
-        await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        // Make the commands undo-able, but only if the transform is non-empty.
+        if (!fullTransform.eq(math_1.Mat33.identity)) {
+            await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        }
         // Clear renderings of any in-progress transformations
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.4.0',
+    number: '1.5.0',
 };

package/dist/mjs/components/BackgroundComponent.mjs

@@ -190,6 +190,14 @@ export default class BackgroundComponent extends AbstractComponent {
         if (this.backgroundType === BackgroundType.None) {
             return;
         }
+        // If visibleRect is null, components should render everything.
+        // In that case, a full render is being done.
+        const mustRender = !visibleRect;
+        // If this.fillsScreen, the visibleRect needs to be known.
+        // Use the screen rect.
+        if (this.fillsScreen) {
+            visibleRect ??= canvas.getVisibleRect();
+        }
         const clip = this.backgroundType === BackgroundType.Grid;
         const contentBBox = this.getFullBoundingBox(visibleRect);
         canvas.startObject(contentBBox, clip);
@@ -197,13 +205,11 @@ export default class BackgroundComponent extends AbstractComponent {
             // If the rectangle for this region contains the visible rect,
             // we can fill the entire visible rectangle (which may be more efficient than
             // filling the entire region for this.)
-            if (visibleRect) {
-                const intersection = visibleRect.intersection(contentBBox);
-                if (intersection) {
-                    canvas.fillRect(intersection, this.mainColor);
-                }
+            const intersection = visibleRect?.intersection(contentBBox);
+            if (intersection) {
+                canvas.fillRect(intersection, this.mainColor);
             }
-            else {
+            else if (mustRender) {
                 canvas.fillRect(contentBBox, this.mainColor);
             }
         }

package/dist/mjs/components/SVGGlobalAttributesObject.d.ts

@@ -4,8 +4,8 @@ import AbstractComponent, { ComponentSizingMode } from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 type GlobalAttrsList = Array<[string, string | null]>;
 export default class SVGGlobalAttributesObject extends AbstractComponent {
-    private readonly attrs;
     protected contentBBox: Rect2;
+    private readonly attrs;
     constructor(attrs: GlobalAttrsList);
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(_lineSegment: LineSegment2): boolean;
@@ -15,6 +15,6 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;
-    static deserializeFromString(data: string): AbstractComponent;
+    static deserializeFromString(_data: string): AbstractComponent;
 }
 export {};

package/dist/mjs/components/SVGGlobalAttributesObject.mjs

@@ -10,10 +10,16 @@ import  AbstractComponent, { ComponentSizingMode }  from './AbstractComponent.mj
 const componentKind = 'svg-global-attributes';
 // Stores global SVG attributes (e.g. namespace identifiers.)
 export default class SVGGlobalAttributesObject extends AbstractComponent {
+    // Does not modify `attrs`
     constructor(attrs) {
         super(componentKind);
-        this.attrs = attrs;
         this.contentBBox = Rect2.empty;
+        // Already stored/managed in `editor.image`.
+        const attrsManagedByRenderer = ['viewBox', 'width', 'height'];
+        // Only store attributes that aren't managed by other parts of the app.
+        this.attrs = attrs.filter(([attr, _value]) => {
+            return !attrsManagedByRenderer.includes(attr);
+        });
     }
     render(canvas, _visibleRect) {
         if (!(canvas instanceof SVGRenderer)) {
@@ -47,19 +53,9 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     serializeToJSON() {
         return JSON.stringify(this.attrs);
     }
-    static deserializeFromString(data) {
-        const json = JSON.parse(data);
-        const attrs = [];
-        const numericAndSpaceContentExp = /^[ \t\n0-9.-eE]+$/;
-        // Don't deserialize all attributes, just those that should be safe.
-        for (const [key, val] of json) {
-            if (key === 'viewBox' || key === 'width' || key === 'height') {
-                if (val && numericAndSpaceContentExp.exec(val)) {
-                    attrs.push([key, val]);
-                }
-            }
-        }
-        return new SVGGlobalAttributesObject(attrs);
+    static deserializeFromString(_data) {
+        // To be safe, don't deserialize any attributes
+        return new SVGGlobalAttributesObject([]);
     }
 }
 AbstractComponent.registerComponent(componentKind, SVGGlobalAttributesObject.deserializeFromString);

package/dist/mjs/image/export/adjustExportedSVGSize.d.ts

@@ -0,0 +1,6 @@
+import { Rect2 } from '@js-draw/math';
+export type SVGSizingOptions = {
+    minDimension?: number;
+};
+declare const adjustExportedSVGSize: (svg: SVGElement, exportRect: Rect2, options: SVGSizingOptions) => void;
+export default adjustExportedSVGSize;

package/dist/mjs/image/export/{setExportedSVGSize.mjs → adjustExportedSVGSize.mjs}

@@ -1,12 +1,9 @@
 import { toRoundedString } from '@js-draw/math';
 // @internal
-const setExportedSVGSize = (svg, viewport, options) => {
-    // Just show the main region
-    const rect = viewport.visibleRect;
-    svg.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
+const adjustExportedSVGSize = (svg, exportRect, options) => {
     // Adjust the width/height as necessary
-    let width = rect.w;
-    let height = rect.h;
+    let width = exportRect.w;
+    let height = exportRect.h;
     if (options?.minDimension && width < options.minDimension) {
         const newWidth = options.minDimension;
         height *= newWidth / (width || 1);
@@ -20,4 +17,4 @@ const setExportedSVGSize = (svg, viewport, options) => {
     svg.setAttribute('width', toRoundedString(width));
     svg.setAttribute('height', toRoundedString(height));
 };
-export default setExportedSVGSize;
+export default adjustExportedSVGSize;

package/dist/mjs/image/export/editorImageToSVG.d.ts

@@ -1,5 +1,5 @@
 import EditorImage, { PreRenderComponentCallback } from '../EditorImage';
-import { SVGSizingOptions } from './setExportedSVGSize';
+import { SVGSizingOptions } from './adjustExportedSVGSize';
 export interface SVGExportOptions extends SVGSizingOptions {
     sanitize?: boolean;
     minDimension?: number;

package/dist/mjs/image/export/editorImageToSVG.mjs

@@ -1,25 +1,39 @@
-import { Mat33 } from '@js-draw/math';
+import { Rect2 } from '@js-draw/math';
 import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
 import  { svgLoaderAutoresizeClassName }  from '../../SVGLoader.mjs';
-import  setExportedSVGSize  from './setExportedSVGSize.mjs';
+import  adjustExportedSVGSize  from './adjustExportedSVGSize.mjs';
 const toSVGInternal = (image, renderFunction, options) => {
     const importExportViewport = image.getImportExportViewport().getTemporaryClone();
-    const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, options.sanitize ?? false);
-    const origTransform = importExportViewport.canvasToScreenTransform;
-    // Render with (0,0) at (0,0) — we'll handle translation with
-    // the viewBox property.
-    importExportViewport.resetTransform(Mat33.identity);
+    // If the rectangle has zero width or height, its size can't be increased
+    // -- set its size to the minimum.
+    if (options?.minDimension) {
+        const originalRect = importExportViewport.visibleRect;
+        let rect = originalRect;
+        if (rect.w <= 0) {
+            rect = new Rect2(rect.x, rect.y, options.minDimension, rect.h);
+        }
+        if (rect.h <= 0) {
+            rect = new Rect2(rect.x, rect.y, rect.w, options.minDimension);
+        }
+        if (!rect.eq(originalRect)) {
+            importExportViewport.updateScreenSize(rect.size);
+        }
+    }
+    const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, {
+        sanitize: options.sanitize ?? false,
+        useViewBoxForPositioning: true,
+    });
     // Use a callback rather than async/await to allow this function to create
     // both sync and async render functions
     renderFunction(renderer, () => {
-        importExportViewport.resetTransform(origTransform);
         if (image.getAutoresizeEnabled()) {
             result.classList.add(svgLoaderAutoresizeClassName);
         }
         else {
             result.classList.remove(svgLoaderAutoresizeClassName);
         }
-        setExportedSVGSize(result, importExportViewport, options);
+        const exportRect = importExportViewport.visibleRect;
+        adjustExportedSVGSize(result, exportRect, options);
         return result;
     });
     return result;

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

@@ -73,4 +73,5 @@ export default abstract class AbstractRenderer {
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;
+    getVisibleRect(): Rect2;
 }

package/dist/mjs/rendering/renderers/AbstractRenderer.mjs

@@ -158,4 +158,12 @@ export default class AbstractRenderer {
     getSizeOfCanvasPixelOnScreen() {
         return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
     }
+    // Returns the region in canvas space that is visible within the viewport this
+    // canvas is rendering to.
+    //
+    // Note that in some cases this might not be the same as the `visibleRect` given
+    // to components in their `render` method.
+    getVisibleRect() {
+        return this.viewport.visibleRect;
+    }
 }

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

@@ -6,6 +6,15 @@ import TextRenderingStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 import RenderablePathSpec from '../RenderablePathSpec';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
+type FromViewportOptions = {
+    sanitize?: boolean;
+    /**
+     * Rather than having the top left of the `viewBox` set to (0, 0),
+     * if `useViewBoxForPositioning` is `true`, the `viewBox`'s top left
+     * is based on the top left of the rendering viewport's `visibleRect`.
+     */
+    useViewBoxForPositioning?: boolean;
+};
 /**
  * Renders onto an `SVGElement`.
  *
@@ -50,8 +59,26 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
     isTooSmallToRender(_rect: Rect2): boolean;
-    static fromViewport(viewport: Viewport, sanitize?: boolean): {
+    private visibleRectOverride;
+    /**
+     * Overrides the visible region returned by `getVisibleRect`.
+     *
+     * This is useful when the `viewport`'s transform has been modified,
+     * for example, to compensate for storing part of the image's
+     * transformation in an SVG property.
+     */
+    private overrideVisibleRect;
+    getVisibleRect(): Rect2;
+    /**
+     * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,
+     * and other metadata attributes set for the given `Viewport`.
+     *
+     * If `options` is a `boolean`, it is interpreted as whether to sanitize (not add unknown
+     * SVG entities to) the output.
+     */
+    static fromViewport(viewport: Viewport, options?: FromViewportOptions | boolean): {
         element: SVGSVGElement;
         renderer: SVGRenderer;
     };
 }
+export {};

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -36,6 +36,7 @@ export default class SVGRenderer extends AbstractRenderer {
         this.textContainer = null;
         this.textContainerTransform = null;
         this.textParentStyle = defaultTextStyle;
+        this.visibleRectOverride = null;
         this.clear();
         this.addStyleSheet();
     }
@@ -338,20 +339,70 @@ export default class SVGRenderer extends AbstractRenderer {
     isTooSmallToRender(_rect) {
         return false;
     }
-    // Creates a new SVG element and SVGRenerer with attributes set for the given Viewport.
-    static fromViewport(viewport, sanitize = true) {
+    /**
+     * Overrides the visible region returned by `getVisibleRect`.
+     *
+     * This is useful when the `viewport`'s transform has been modified,
+     * for example, to compensate for storing part of the image's
+     * transformation in an SVG property.
+     */
+    overrideVisibleRect(newRect) {
+        this.visibleRectOverride = newRect;
+    }
+    getVisibleRect() {
+        return this.visibleRectOverride ?? super.getVisibleRect();
+    }
+    /**
+     * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,
+     * and other metadata attributes set for the given `Viewport`.
+     *
+     * If `options` is a `boolean`, it is interpreted as whether to sanitize (not add unknown
+     * SVG entities to) the output.
+     */
+    static fromViewport(viewport, options = true) {
+        let sanitize;
+        let useViewBoxForPositioning;
+        if (typeof options === 'boolean') {
+            sanitize = options;
+            useViewBoxForPositioning = false;
+        }
+        else {
+            sanitize = options.sanitize ?? true;
+            useViewBoxForPositioning = options.useViewBoxForPositioning ?? false;
+        }
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
-        const rect = viewport.getScreenRectSize();
+        const screenRectSize = viewport.getScreenRectSize();
+        const visibleRect = viewport.visibleRect;
+        let viewBoxComponents;
+        if (useViewBoxForPositioning) {
+            const exportRect = viewport.visibleRect;
+            viewBoxComponents = [
+                exportRect.x, exportRect.y, exportRect.w, exportRect.h,
+            ];
+            // Replace the viewport with a copy that has a modified transform.
+            // (Avoids modifying the original viewport).
+            viewport = viewport.getTemporaryClone();
+            // TODO: This currently discards any rotation information.
+            // Render with (0,0) at (0,0) -- the translation is handled by the viewBox.
+            viewport.resetTransform(Mat33.identity);
+        }
+        else {
+            viewBoxComponents = [0, 0, screenRectSize.x, screenRectSize.y];
+        }
         // rect.x -> size of rect in x direction, rect.y -> size of rect in y direction.
-        result.setAttribute('viewBox', [0, 0, rect.x, rect.y].map(part => toRoundedString(part)).join(' '));
-        result.setAttribute('width', toRoundedString(rect.x));
-        result.setAttribute('height', toRoundedString(rect.y));
+        result.setAttribute('viewBox', viewBoxComponents.map(part => toRoundedString(part)).join(' '));
+        result.setAttribute('width', toRoundedString(screenRectSize.x));
+        result.setAttribute('height', toRoundedString(screenRectSize.y));
         // Ensure the image can be identified as an SVG if downloaded.
         // See https://jwatt.org/svg/authoring/
         result.setAttribute('version', '1.1');
         result.setAttribute('baseProfile', 'full');
         result.setAttribute('xmlns', svgNameSpace);
-        return { element: result, renderer: new SVGRenderer(result, viewport, sanitize) };
+        const renderer = new SVGRenderer(result, viewport, sanitize);
+        if (!visibleRect.eq(viewport.visibleRect)) {
+            renderer.overrideVisibleRect(visibleRect);
+        }
+        return { element: result, renderer };
     }
 }

package/dist/mjs/toolbar/AbstractToolbar.d.ts

@@ -124,24 +124,30 @@ export default abstract class AbstractToolbar {
      * toolbar.addDefaults();
      * toolbar.addSaveButton(() => alert('save clicked!'));
      * ```
+     *
+     * `labelOverride` can optionally be used to change the `label` or `icon` of the button.
      */
-    addSaveButton(saveCallback: () => void): BaseWidget;
+    addSaveButton(saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>): BaseWidget;
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is equivalent to
+     * **Note**: This is roughly equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
      *   icon: this.editor.icons.makeCloseIcon(),
+     *
+     *   // labelOverride can be used to override label or icon.
+     *   ...labelOverride,
      * }, () => {
      *   exitCallback();
      * });
      * ```
+     * with some additional configuration.
      *
      * @final
      */
-    addExitButton(exitCallback: () => void): BaseWidget;
+    addExitButton(exitCallback: () => void, labelOverride?: Partial<ActionButtonIcon>): BaseWidget;
     /**
      * Adds undo and redo buttons that trigger the editor's built-in undo and redo
      * functionality.

package/dist/mjs/toolbar/AbstractToolbar.mjs

@@ -287,9 +287,11 @@ class AbstractToolbar {
      * toolbar.addDefaults();
      * toolbar.addSaveButton(() => alert('save clicked!'));
      * ```
+     *
+     * `labelOverride` can optionally be used to change the `label` or `icon` of the button.
      */
-    addSaveButton(saveCallback) {
-        const widget = new SaveActionWidget(this.editor, this.localizationTable, saveCallback);
+    addSaveButton(saveCallback, labelOverride = {}) {
+        const widget = new SaveActionWidget(this.editor, this.localizationTable, saveCallback, labelOverride);
         widget.setTags([ToolbarWidgetTag.Save]);
         this.addWidget(widget);
         return widget;
@@ -297,22 +299,27 @@ class AbstractToolbar {
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is equivalent to
+     * **Note**: This is roughly equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
      *   icon: this.editor.icons.makeCloseIcon(),
+     *
+     *   // labelOverride can be used to override label or icon.
+     *   ...labelOverride,
      * }, () => {
      *   exitCallback();
      * });
      * ```
+     * with some additional configuration.
      *
      * @final
      */
-    addExitButton(exitCallback) {
+    addExitButton(exitCallback, labelOverride = {}) {
         return this.addTaggedActionButton([ToolbarWidgetTag.Exit], {
             label: this.editor.localization.exit,
             icon: this.editor.icons.makeCloseIcon(),
+            ...labelOverride,
         }, () => {
             exitCallback();
         }, {

package/dist/mjs/toolbar/AbstractToolbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/EdgeToolbar.mjs

@@ -228,11 +228,11 @@ export default class EdgeToolbar extends AbstractToolbar {
         widget.removeCSSClassFromContainer('label-right');
         if (tags.includes(ToolbarWidgetTag.Save)) {
             widget.addCSSClassToContainer('label-inline');
-            widget.addCSSClassToContainer('label-right');
+            widget.addCSSClassToContainer('label-left');
         }
         if (tags.includes(ToolbarWidgetTag.Exit)) {
             widget.addCSSClassToContainer('label-inline');
-            widget.addCSSClassToContainer('label-left');
+            widget.addCSSClassToContainer('label-right');
         }
     }
     addWidgetInternal(widget) {

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

@@ -2,8 +2,9 @@ import { KeyPressEvent } from '../../inputEvents';
 import Editor from '../../Editor';
 import { ToolbarLocalization } from '../localization';
 import ActionButtonWidget from './ActionButtonWidget';
+import { ActionButtonIcon } from '../types';
 declare class SaveActionWidget extends ActionButtonWidget {
-    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void);
+    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>);
     protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected onKeyPress(event: KeyPressEvent): boolean;
     mustBeInToplevelMenu(): boolean;

package/dist/mjs/toolbar/widgets/SaveActionWidget.mjs

@@ -2,8 +2,12 @@ import  ActionButtonWidget  from './ActionButtonWidget.mjs';
 import  { ToolbarWidgetTag }  from './BaseWidget.mjs';
 import  { saveKeyboardShortcut }  from './keybindings.mjs';
 class SaveActionWidget extends ActionButtonWidget {
-    constructor(editor, localization, saveCallback) {
-        super(editor, 'save-button', editor.icons.makeSaveIcon, localization.save, saveCallback);
+    constructor(editor, localization, saveCallback, labelOverride = {}) {
+        super(editor, 'save-button', 
+        // Creates an icon
+        () => {
+            return labelOverride.icon ?? editor.icons.makeSaveIcon();
+        }, labelOverride.label ?? localization.save, saveCallback);
         this.setTags([ToolbarWidgetTag.Save]);
     }
     shouldAutoDisableInReadOnlyEditor() {

package/dist/mjs/tools/SelectionTool/Selection.mjs

@@ -129,8 +129,10 @@ class Selection {
         // Reset for the next drag
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = Mat33.identity;
-        // Make the commands undo-able
-        await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        // Make the commands undo-able, but only if the transform is non-empty.
+        if (!fullTransform.eq(Mat33.identity)) {
+            await this.editor.dispatch(new Selection.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        }
         // Clear renderings of any in-progress transformations
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.4.0',
+    number: '1.5.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.4.0",
+  "version": "1.5.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",
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "b520078c16a4d23d9bed4531eafda87bfce3f6b1"
+  "gitHead": "c2252181b1ab0eb7047ad66590bca2eabd61681d"
 }

package/src/toolbar/EdgeToolbar.scss

@@ -60,7 +60,7 @@
 	@media (hover: hover) {
 		// Only show an animation when opening the label due to a hover --
 		// show the label immediately otherwise.
-		&:hover > #{$label-selector} {
+		&:hover:not(:focus-visible) > #{$label-selector} {
 			opacity: $label-visible-opacity;
 			animation: 1s $hover-active-animation;
 		}
@@ -69,7 +69,7 @@
 	// When the user is pressing/long-pressing the button
 	&:active > #{$label-selector} {
 		opacity: $label-visible-opacity;
-		animation: 0.5s $hover-active-animation;
+		animation: 1s $hover-active-animation;
 	}
 
 	$keyboard-hide-animation: 1.5s ease rehide-label;
@@ -265,7 +265,7 @@
 			--button-flex-direction: row-reverse;
 
 			> .toolbar-button > .toolbar-icon {
-				margin-left: 10px;
+				margin-left: 7px;
 				margin-right: 0;
 			}
 
@@ -284,8 +284,11 @@
 
 			> .toolbar-icon {
 				height: 100%;
-				margin-right: 10px;
+				margin-right: 7px;
 				margin-left: 0;
+
+				// Make smaller than the other icons
+				width: 22px;
 			}
 		}
 	}

package/src/tools/SelectionTool/SelectionTool.scss

@@ -38,7 +38,7 @@
 	}
 
 	&.selection-tool-resize-xy {
-		cursor: nw-resize;
+		cursor: nwse-resize;
 	}
 }
 
@@ -52,7 +52,7 @@
 	}
 
 	&.selection-tool-resize-xy {
-		cursor: sw-resize;
+		cursor: nesw-resize;
 	}
 }
 

package/dist/cjs/image/export/setExportedSVGSize.d.ts

@@ -1,6 +0,0 @@
-import Viewport from '../../Viewport';
-export type SVGSizingOptions = {
-    minDimension?: number;
-};
-declare const setExportedSVGSize: (svg: SVGElement, viewport: Viewport, options: SVGSizingOptions) => void;
-export default setExportedSVGSize;

package/dist/mjs/image/export/setExportedSVGSize.d.ts

@@ -1,6 +0,0 @@
-import Viewport from '../../Viewport';
-export type SVGSizingOptions = {
-    minDimension?: number;
-};
-declare const setExportedSVGSize: (svg: SVGElement, viewport: Viewport, options: SVGSizingOptions) => void;
-export default setExportedSVGSize;