js-draw 0.17.1 → 0.17.3

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/components/TextComponent.test.ts

@@ -72,7 +72,7 @@ describe('TextComponent', () => {
 		expect(text.getStyle().color).objEq(Color4.green);
 	});
 
-	it('restyling the duplicate of a TextComponent should preserve the original\'s style', () => {
+	it('calling forceStyle on the duplicate of a TextComponent should preserve the original\'s style', () => {
 		const originalStyle: TextStyle = {
 			size: 11,
 			fontFamily: 'sans-serif',

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,7 +170,7 @@ 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 = {
 				...this.style,
@@ -197,12 +197,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
 
 	// See this.getStyle
 	public getTextStyle() {
-		return {
-			...this.style,
-			renderingStyle: {
-				...this.style.renderingStyle,
-			},
-		};
+		return cloneTextStyle(this.style);
 	}
 
 	public getBaselinePos() {
@@ -219,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() {

package/src/components/lib.ts

@@ -8,7 +8,7 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
+import RestyleableComponent, { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent';
 import ImageBackground from './ImageBackground';
 
 export {
@@ -16,6 +16,7 @@ export {
 	TextComponent as Text,
 	RestyleableComponent,
 	createRestyleComponentCommand,
+	isRestylableComponent,
 
 	TextComponent,
 	Stroke as StrokeComponent,

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/widgets/DocumentPropertiesWidget.ts

@@ -1,5 +1,4 @@
 import Color4 from '../../Color4';
-import ImageBackground from '../../components/ImageBackground';
 import Editor from '../../Editor';
 import { EditorImageEventType } from '../../EditorImage';
 import Rect2 from '../../math/Rect2';
@@ -56,31 +55,12 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 		}
 	}
 
-	private 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];
-	}
-
 	private setBackgroundColor(color: Color4) {
 		this.editor.dispatch(this.editor.setBackgroundColor(color));
 	}
 
 	private getBackgroundColor() {
-		const background = this.getBackgroundElem();
-
-		return background?.getStyle()?.color ?? Color4.transparent;
+		return this.editor.estimateBackgroundColor();
 	}
 
 	private updateImportExportRectSize(size: { width?: number, height?: number }) {

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;
+};