js-draw 0.15.0 → 0.15.1

package/dist/src/components/AbstractComponent.js

@@ -80,7 +80,7 @@ export default class AbstractComponent {
     }
     // Returns a command that updates this component's z-index.
     setZIndex(newZIndex) {
-        return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex);
+        return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex, this.getZIndex());
     }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
@@ -163,22 +163,26 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
         // Construct a new TransformElementCommand. `component`, while optional, should
         // be provided if available. If not provided, it will be fetched from the editor's
         // document when the command is applied.
-        constructor(affineTransfm, componentID, component, targetZIndex) {
+        constructor(affineTransfm, componentID, component, targetZIndex, origZIndex) {
             super(AbstractComponent.transformElementCommandId, componentID, component);
             this.affineTransfm = affineTransfm;
-            this.origZIndex = null;
+            this.origZIndex = origZIndex;
             this.targetZIndex = targetZIndex !== null && targetZIndex !== void 0 ? targetZIndex : AbstractComponent.zIndexCounter++;
             // Ensure that we keep drawing on top even after changing the z-index.
             if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
                 AbstractComponent.zIndexCounter = this.targetZIndex + 1;
             }
+            if (component && origZIndex === undefined) {
+                this.origZIndex = component.getZIndex();
+            }
         }
         resolveComponent(image) {
+            var _a;
             if (this.component) {
                 return;
             }
             super.resolveComponent(image);
-            this.origZIndex = this.component.getZIndex();
+            (_a = this.origZIndex) !== null && _a !== void 0 ? _a : (this.origZIndex = this.component.getZIndex());
         }
         updateTransform(editor, newTransfm) {
             if (!this.component) {
@@ -218,16 +222,18 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
                 id: this.componentID,
                 transfm: this.affineTransfm.toArray(),
                 targetZIndex: this.targetZIndex,
+                origZIndex: this.origZIndex,
             };
         }
     },
     (() => {
         SerializableCommand.register(AbstractComponent.transformElementCommandId, (json, editor) => {
-            var _a;
+            var _a, _b;
             const elem = (_a = editor.image.lookupElement(json.id)) !== null && _a !== void 0 ? _a : undefined;
             const transform = new Mat33(...json.transfm);
             const targetZIndex = json.targetZIndex;
-            return new AbstractComponent.TransformElementCommand(transform, json.id, elem, targetZIndex);
+            const origZIndex = (_b = json.origZIndex) !== null && _b !== void 0 ? _b : undefined;
+            return new AbstractComponent.TransformElementCommand(transform, json.id, elem, targetZIndex, origZIndex);
         });
     })(),
     _a);

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

@@ -158,7 +158,7 @@ export default class SelectionTool extends BaseTool {
         }
     }
     onGestureCancel() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (this.selectionBoxHandlingEvt) {
             (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragCancel();
         }
@@ -167,6 +167,8 @@ export default class SelectionTool extends BaseTool {
             (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
             this.selectionBox = this.prevSelectionBox;
             (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.addTo(this.handleOverlay);
+            (_d = this.selectionBox) === null || _d === void 0 ? void 0 : _d.recomputeRegion();
+            this.prevSelectionBox = null;
         }
         this.expandingSelectionBox = false;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.15.0",
+	"version": "0.15.1",
 	"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/components/AbstractComponent.transformBy.test.ts

@@ -0,0 +1,22 @@
+import { Color4, EditorImage, Mat33, Path, Rect2, Vec2 } from '../lib';
+import createEditor from '../testing/createEditor';
+import Stroke from './Stroke';
+
+describe('AbstractComponent.transformBy', () => {
+	it('should restore the component\'s z-index on undo', () => {
+		const editor = createEditor();
+		const component = new Stroke([ Path.fromRect(Rect2.unitSquare).toRenderable({ fill: Color4.red }) ]);
+		EditorImage.addElement(component).apply(editor);
+
+		const origZIndex = component.getZIndex();
+
+		const transformCommand = component.transformBy(Mat33.translation(Vec2.unitX));
+		transformCommand.apply(editor);
+
+		// Should increase the z-index on applying a transform
+		expect(component.getZIndex()).toBeGreaterThan(origZIndex);
+
+		transformCommand.unapply(editor);
+		expect(component.getZIndex()).toBe(origZIndex);
+	});
+});

package/src/components/AbstractComponent.ts

@@ -138,7 +138,7 @@ export default abstract class AbstractComponent {
 
 	// Returns a command that updates this component's z-index.
 	public setZIndex(newZIndex: number): SerializableCommand {
-		return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex);
+		return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex, this.getZIndex());
 	}
 
 	// @returns true iff this component can be selected (e.g. by the selection tool.)
@@ -156,7 +156,6 @@ export default abstract class AbstractComponent {
 	private static transformElementCommandId = 'transform-element';
 
 	private static TransformElementCommand = class extends UnresolvedSerializableCommand {
-		private origZIndex: number|null = null;
 		private targetZIndex: number;
 
 		// Construct a new TransformElementCommand. `component`, while optional, should
@@ -167,6 +166,7 @@ export default abstract class AbstractComponent {
 			componentID: string,
 			component?: AbstractComponent,
 			targetZIndex?: number,
+			private origZIndex?: number,
 		) {
 			super(AbstractComponent.transformElementCommandId, componentID, component);
 			this.targetZIndex = targetZIndex ?? AbstractComponent.zIndexCounter++;
@@ -175,6 +175,10 @@ export default abstract class AbstractComponent {
 			if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
 				AbstractComponent.zIndexCounter = this.targetZIndex + 1;
 			}
+
+			if (component && origZIndex === undefined) {
+				this.origZIndex = component.getZIndex();
+			}
 		}
 
 		protected resolveComponent(image: EditorImage): void {
@@ -183,7 +187,7 @@ export default abstract class AbstractComponent {
 			}
 
 			super.resolveComponent(image);
-			this.origZIndex = this.component!.getZIndex();
+			this.origZIndex ??= this.component!.getZIndex();
 		}
 
 		private updateTransform(editor: Editor, newTransfm: Mat33) {
@@ -233,12 +237,14 @@ export default abstract class AbstractComponent {
 				const elem = editor.image.lookupElement(json.id) ?? undefined;
 				const transform = new Mat33(...(json.transfm as Mat33Array));
 				const targetZIndex = json.targetZIndex;
+				const origZIndex = json.origZIndex ?? undefined;
 
 				return new AbstractComponent.TransformElementCommand(
 					transform,
 					json.id,
 					elem,
 					targetZIndex,
+					origZIndex,
 				);
 			});
 		}
@@ -248,6 +254,7 @@ export default abstract class AbstractComponent {
 				id: this.componentID,
 				transfm: this.affineTransfm.toArray(),
 				targetZIndex: this.targetZIndex,
+				origZIndex: this.origZIndex,
 			};
 		}
 	};

package/src/toolbar/toolbar.css

@@ -125,6 +125,13 @@
 	padding: 15px;
 	padding-top: 5px;
 
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+	max-height: 80vh;
+
+	max-width: fit-content;
+
 	/* Prevent overlap/being displayed under the undo/redo buttons */
 	z-index: 2;
 	background-color: var(--primary-background-color);

package/src/tools/SelectionTool/SelectionTool.ts

@@ -200,6 +200,8 @@ export default class SelectionTool extends BaseTool {
 			this.selectionBox?.cancelSelection();
 			this.selectionBox = this.prevSelectionBox;
 			this.selectionBox?.addTo(this.handleOverlay);
+			this.selectionBox?.recomputeRegion();
+			this.prevSelectionBox = null;
 		}
 
 		this.expandingSelectionBox = false;