js-draw 0.17.0 → 0.17.2

package/src/EditorImage.ts

@@ -8,8 +8,8 @@ import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
 import EventDispatcher from './EventDispatcher';
 import { Vec2 } from './math/Vec2';
-import Command from './commands/Command';
-import Mat33 from './math/Mat33';
+import Mat33, { Mat33Array } from './math/Mat33';
+import { assertIsNumber, assertIsNumberArray } from './util/assertions';
 
 // @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
@@ -51,39 +51,6 @@ export default class EditorImage {
 		this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
 	}
 
-	/**
-	 * @returns a `Viewport` for rendering the image when importing/exporting.
-	 */
-	public getImportExportViewport() {
-		return this.importExportViewport;
-	}
-
-	public setImportExportRect(imageRect: Rect2): Command {
-		const importExportViewport = this.getImportExportViewport();
-		const origSize = importExportViewport.visibleRect.size;
-		const origTransform = importExportViewport.canvasToScreenTransform;
-
-		return new class extends Command {
-			public apply(editor: Editor) {
-				const viewport = editor.image.getImportExportViewport();
-				viewport.updateScreenSize(imageRect.size);
-				viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
-				editor.queueRerender();
-			}
-
-			public unapply(editor: Editor) {
-				const viewport = editor.image.getImportExportViewport();
-				viewport.updateScreenSize(origSize);
-				viewport.resetTransform(origTransform);
-				editor.queueRerender();
-			}
-
-			public description(_editor: Editor, localizationTable: EditorLocalization) {
-				return localizationTable.resizeOutputCommand(imageRect);
-			}
-		};
-	}
-
 	// Returns all components that make up the background of this image. These
 	// components are rendered below all other components.
 	public getBackgroundComponents(): AbstractComponent[] {
@@ -271,6 +238,91 @@ export default class EditorImage {
 			});
 		}
 	};
+
+
+
+	/**
+	 * @returns a `Viewport` for rendering the image when importing/exporting.
+	 */
+	public getImportExportViewport() {
+		return this.importExportViewport;
+	}
+
+	public setImportExportRect(imageRect: Rect2): SerializableCommand {
+		const importExportViewport = this.getImportExportViewport();
+		const origSize = importExportViewport.visibleRect.size;
+		const origTransform = importExportViewport.canvasToScreenTransform;
+
+		return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
+	}
+
+	// Handles resizing the background import/export region of the image.
+	private static SetImportExportRectCommand = class extends SerializableCommand {
+		private static commandId = 'set-import-export-rect';
+
+		public constructor(
+			private originalSize: Vec2,
+			private originalTransform: Mat33,
+			private finalRect: Rect2,
+		) {
+			super(EditorImage.SetImportExportRectCommand.commandId);
+		}
+
+		public apply(editor: Editor) {
+			const viewport = editor.image.getImportExportViewport();
+			viewport.updateScreenSize(this.finalRect.size);
+			viewport.resetTransform(Mat33.translation(this.finalRect.topLeft.times(-1)));
+			editor.queueRerender();
+		}
+
+		public unapply(editor: Editor) {
+			const viewport = editor.image.getImportExportViewport();
+			viewport.updateScreenSize(this.originalSize);
+			viewport.resetTransform(this.originalTransform);
+			editor.queueRerender();
+		}
+
+		public description(_editor: Editor, localization: EditorLocalization) {
+			return localization.resizeOutputCommand(this.finalRect);
+		}
+
+		protected serializeToJSON() {
+			return {
+				originalSize: this.originalSize.xy,
+				originalTransform: this.originalTransform.toArray(),
+				newRegion: {
+					x: this.finalRect.x,
+					y: this.finalRect.y,
+					w: this.finalRect.w,
+					h: this.finalRect.h,
+				},
+			};
+		}
+
+		static {
+			const commandId = this.commandId;
+			SerializableCommand.register(commandId, (json: any, _editor: Editor) => {
+				assertIsNumber(json.originalSize.x);
+				assertIsNumber(json.originalSize.y);
+				assertIsNumberArray(json.originalTransform);
+				assertIsNumberArray([
+					json.newRegion.x,
+					json.newRegion.y,
+					json.newRegion.w,
+					json.newRegion.h,
+				]);
+
+				const originalSize = Vec2.ofXY(json.originalSize);
+				const originalTransform = new Mat33(...(json.originalTransform as Mat33Array));
+				const finalRect = new Rect2(
+					json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h
+				);
+				return new EditorImage.SetImportExportRectCommand(
+					originalSize, originalTransform, finalRect
+				);
+			});
+		}
+	};
 }
 
 type TooSmallToRenderCheck = (rect: Rect2)=> boolean;

package/src/UndoRedoHistory.test.ts

@@ -30,4 +30,4 @@ describe('UndoRedoHistory', () => {
 
 		expect(editor.history.redoStackSize).toBe(origUndoStackSize);
 	});
-});
+});

package/src/UndoRedoHistory.ts

@@ -47,7 +47,7 @@ class UndoRedoHistory {
 		this.#redoStack = [];
 
 		if (this.#undoStack.length > this.maxUndoRedoStackSize) {
-			const removeAtOnceCount = 10;
+			const removeAtOnceCount = Math.ceil(this.maxUndoRedoStackSize / 100);
 			const removedElements = this.#undoStack.splice(0, removeAtOnceCount);
 			removedElements.forEach(elem => elem.onDrop(this.editor));
 		}

package/src/components/TextComponent.test.ts

@@ -71,4 +71,29 @@ describe('TextComponent', () => {
 		editor.history.undo();
 		expect(text.getStyle().color).objEq(Color4.green);
 	});
-});
+
+	it('calling forceStyle on the duplicate of a TextComponent should preserve the original\'s style', () => {
+		const originalStyle: TextStyle = {
+			size: 11,
+			fontFamily: 'sans-serif',
+			renderingStyle: { fill: Color4.purple, },
+		};
+
+		const text1 = new TextComponent([ 'Test' ], Mat33.identity, originalStyle);
+		const text2 = text1.clone() as TextComponent;
+
+		text1.forceStyle({
+			color: Color4.red,
+		}, null);
+
+		expect(text2.getStyle().color).objEq(Color4.purple);
+		expect(text1.getStyle().color).objEq(Color4.red);
+
+		text2.forceStyle({
+			textStyle: originalStyle,
+		}, null);
+
+		expect(text1.getStyle().color).objEq(Color4.red);
+		expect(text2.getTextStyle()).toMatchObject(originalStyle);
+	});
+});

package/src/components/TextComponent.ts

@@ -5,7 +5,7 @@ import Rect2 from '../math/Rect2';
 import Editor from '../Editor';
 import { Vec2 } from '../math/Vec2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import { TextStyle, textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
+import { cloneTextStyle, TextStyle, textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
@@ -170,11 +170,14 @@ export default class TextComponent extends AbstractComponent implements Restylea
 
 	public forceStyle(style: ComponentStyle, editor: Editor|null): void {
 		if (style.textStyle) {
-			this.style = style.textStyle;
+			this.style = cloneTextStyle(style.textStyle);
 		} else if (style.color) {
-			this.style.renderingStyle = {
-				...this.style.renderingStyle,
-				fill: style.color,
+			this.style = {
+				...this.style,
+				renderingStyle: {
+					...this.style.renderingStyle,
+					fill: style.color,
+				},
 			};
 		} else {
 			return;
@@ -194,7 +197,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
 
 	// See this.getStyle
 	public getTextStyle() {
-		return this.style;
+		return cloneTextStyle(this.style);
 	}
 
 	public getBaselinePos() {
@@ -211,7 +214,14 @@ export default class TextComponent extends AbstractComponent implements Restylea
 	}
 
 	protected createClone(): AbstractComponent {
-		return new TextComponent(this.textObjects, this.transform, this.style);
+		const clonedTextObjects = this.textObjects.map(obj => {
+			if (typeof obj === 'string') {
+				return obj;
+			} else {
+				return obj.createClone() as TextComponent;
+			}
+		});
+		return new TextComponent(clonedTextObjects, this.transform, this.style);
 	}
 
 	public getText() {
@@ -302,4 +312,4 @@ export default class TextComponent extends AbstractComponent implements Restylea
 	}
 }
 
-AbstractComponent.registerComponent(componentTypeId, (data: string) => TextComponent.deserializeFromString(data));
+AbstractComponent.registerComponent(componentTypeId, (data: string) => TextComponent.deserializeFromString(data));

package/src/rendering/RenderingStyle.ts

@@ -10,6 +10,15 @@ interface RenderingStyle {
 
 export default RenderingStyle;
 
+export const cloneStyle = (style: RenderingStyle) => {
+	return {
+		fill: style.fill,
+		stroke: style.stroke ? {
+			...style.stroke
+		} : undefined,
+	};
+};
+
 export const stylesEqual = (a: RenderingStyle, b: RenderingStyle): boolean => {
 	const result = a === b || (a.fill.eq(b.fill)
 		&& (a.stroke == undefined) === (b.stroke == undefined)

package/src/rendering/TextRenderingStyle.ts

@@ -1,4 +1,4 @@
-import RenderingStyle, { styleFromJSON, styleToJSON } from './RenderingStyle';
+import RenderingStyle, { cloneStyle, styleFromJSON, styleToJSON } from './RenderingStyle';
 
 export interface TextStyle {
 	size: number;
@@ -10,6 +10,13 @@ export interface TextStyle {
 
 export default TextStyle;
 
+export const cloneTextStyle = (style: TextStyle) => {
+	return {
+		...style,
+		renderingStyle: cloneStyle(style.renderingStyle),
+	};
+};
+
 export const textStyleFromJSON = (json: any) => {
 	if (typeof json === 'string') {
 		json = JSON.parse(json);

package/src/toolbar/HTMLToolbar.ts

@@ -181,6 +181,18 @@ export default class HTMLToolbar {
 			return totalWidth;
 		};
 
+		// Returns true if there is enough empty space to move the first child
+		// from the overflow menu to the main menu.
+		const canRemoveFirstChildFromOverflow = (freeSpaceInMainMenu: number) => {
+			const overflowChildren = this.overflowWidget?.getChildWidgets() ?? [];
+
+			if (overflowChildren.length === 0) {
+				return false;
+			}
+
+			return overflowChildren[0].getButtonWidth() <= freeSpaceInMainMenu;
+		};
+
 		let overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
 		let shownWidgetWidth = getTotalWidth(this.widgetList) - overflowWidgetsWidth;
 		let availableWidth = this.container.clientWidth * 0.87;
@@ -194,7 +206,8 @@ export default class HTMLToolbar {
 
 		let updatedChildren = false;
 
-		if (shownWidgetWidth + overflowWidgetsWidth <= availableWidth) {
+		// If we can remove at least one child from the overflow menu,
+		if (canRemoveFirstChildFromOverflow(availableWidth - shownWidgetWidth)) {
 			// Move widgets to the main menu.
 			const overflowChildren = this.overflowWidget.clearChildren();
 
@@ -207,15 +220,12 @@ export default class HTMLToolbar {
 				}
 			}
 
-			this.overflowWidget.setHidden(true);
 			overflowWidgetsWidth = 0;
-
 			updatedChildren = true;
 		}
 
 		if (shownWidgetWidth >= availableWidth) {
 			// Move widgets to the overflow menu.
-			this.overflowWidget.setHidden(false);
 
 			// Start with the rightmost widget, move to the leftmost
 			for (
@@ -238,6 +248,9 @@ export default class HTMLToolbar {
 			updatedChildren = true;
 		}
 
+		// Hide/show the overflow widget.
+		this.overflowWidget.setHidden(this.overflowWidget.getChildWidgets().length === 0);
+
 		if (updatedChildren) {
 			this.setupColorPickers();
 		}

package/src/tools/FindTool.ts

@@ -49,7 +49,8 @@ export default class FindTool extends BaseTool {
 		}
 
 		if (matchIdx < matches.length) {
-			this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true));
+			const undoable = false;
+			this.editor.dispatch(this.editor.viewport.zoomTo(matches[matchIdx], true, true), undoable);
 			this.editor.announceForAccessibility(
 				this.editor.localization.focusedFoundText(matchIdx + 1, matches.length)
 			);

package/src/util/assertions.ts

@@ -1,7 +1,55 @@
 
-// Compile-time assertion that a branch of code is unreachable.
-// See https://stackoverflow.com/a/39419171/17055750
-// @internal
+/**
+ * Compile-time assertion that a branch of code is unreachable.
+ * @internal
+ */
 export const assertUnreachable = (key: never): never => {
+	// See https://stackoverflow.com/a/39419171/17055750
 	throw new Error(`Should be unreachable. Key: ${key}.`);
 };
+
+
+/**
+ * Throws an exception if the typeof given value is not a number or `value` is NaN.
+ * 
+ * @example
+ * ```ts
+ * const foo: unknown = 3;
+ * assertIsNumber(foo);
+ * 
+ * assertIsNumber('hello, world'); // throws an Error.
+ * ```
+ * 
+ * 
+ */
+export const assertIsNumber = (value: any, allowNaN: boolean = false): value is number => {
+	if (typeof value !== 'number' || (!allowNaN && isNaN(value))) {
+		throw new Error('Given value is not a number');
+		// return false;
+	}
+
+	return true;
+};
+
+/**
+ * Throws if any of `values` is not of type number.
+ */
+export const assertIsNumberArray = (
+	values: any[], allowNaN: boolean = false
+): values is number[] => {
+	if (typeof values !== 'object') {
+		throw new Error('Asserting isNumberArray: Given entity is not an array');
+	}
+
+	if (!assertIsNumber(values['length'])) {
+		return false;
+	}
+
+	for (const value of values) {
+		if (!assertIsNumber(value, allowNaN)) {
+			return false;
+		}
+	}
+
+	return true;
+};