js-draw 0.15.1 → 0.16.0

package/src/components/ImageBackground.ts

@@ -0,0 +1,176 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage, { EditorImageEventType } from '../EditorImage';
+import { DispatcherEventListener } from '../EventDispatcher';
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
+
+export enum BackgroundType {
+	SolidColor,
+	None,
+}
+
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+
+// Represents the background of an image in the editor.
+export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+	protected contentBBox: Rect2;
+	private viewportSizeChangeListener: DispatcherEventListener|null = null;
+
+	// eslint-disable-next-line @typescript-eslint/prefer-as-const
+	readonly isRestylableComponent: true = true;
+
+	public constructor(
+		private backgroundType: BackgroundType, private mainColor: Color4
+	) {
+		super('image-background', 0);
+		this.contentBBox = Rect2.empty;
+	}
+	
+	public getStyle(): ComponentStyle {
+		let color: Color4|undefined = this.mainColor;
+
+		if (this.backgroundType === BackgroundType.None) {
+			color = undefined;
+		}
+
+		return {
+			color,
+		};
+	}
+
+	public updateStyle(style: ComponentStyle): SerializableCommand {
+		return createRestyleComponentCommand(this.getStyle(), style, this);
+	}
+
+	// @internal
+	public forceStyle(style: ComponentStyle, editor: Editor | null): void {
+		const fill = style.color;
+
+		if (!fill) {
+			return;
+		}
+
+		this.mainColor = fill;
+		if (fill.eq(Color4.transparent)) {
+			this.backgroundType = BackgroundType.None;
+		} else {
+			this.backgroundType = BackgroundType.SolidColor;
+		}
+
+		if (editor) {
+			editor.image.queueRerenderOf(this);
+			editor.queueRerender();
+		}
+	}
+
+	public onAddToImage(image: EditorImage) {
+		if (this.viewportSizeChangeListener) {
+			console.warn('onAddToImage called when background is already in an image');
+			this.onRemoveFromImage();
+		}
+
+		this.viewportSizeChangeListener = image.notifier.on(
+			EditorImageEventType.ExportViewportChanged, () => {
+				this.recomputeBBox(image);
+			});
+		this.recomputeBBox(image);
+	}
+
+	public onRemoveFromImage(): void {
+		this.viewportSizeChangeListener?.remove();
+		this.viewportSizeChangeListener = null;
+	}
+
+	private recomputeBBox(image: EditorImage) {
+		const importExportRect = image.getImportExportViewport().visibleRect;
+		if (!this.contentBBox.eq(importExportRect)) {
+			this.contentBBox = importExportRect;
+
+			// Re-render this if already added to the EditorImage.
+			image.queueRerenderOf(this);
+		}
+	}
+
+	public render(canvas: AbstractRenderer, visibleRect?: Rect2) {
+		if (this.backgroundType === BackgroundType.None) {
+			return;
+		}
+		canvas.startObject(this.contentBBox);
+
+		if (this.backgroundType === BackgroundType.SolidColor) {
+			// 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(this.contentBBox);
+				if (intersection) {
+					canvas.fillRect(intersection, this.mainColor);
+				}
+			} else {
+				canvas.fillRect(this.contentBBox, this.mainColor);
+			}
+		}
+
+		canvas.endObject(this.getLoadSaveData(), [ imageBackgroundCSSClassName ]);
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+	}
+
+	public isSelectable(): boolean {
+		return false;
+	}
+
+	public isBackground(): boolean {
+		return true;
+	}
+
+	protected serializeToJSON() {
+		return {
+			mainColor: this.mainColor.toHexString(),
+			backgroundType: this.backgroundType,
+		};
+	}
+
+	protected applyTransformation(_affineTransfm: Mat33) {
+		// Do nothing — it doesn't make sense to transform the background.
+	}
+
+	public description(localizationTable: ImageComponentLocalization) {
+		if (this.backgroundType === BackgroundType.SolidColor) {
+			return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+		} else {
+			return localizationTable.emptyBackground;
+		}
+	}
+
+	protected createClone(): AbstractComponent {
+		return new ImageBackground(this.backgroundType, this.mainColor);
+	}
+
+	// @internal
+	public static deserializeFromJSON(json: any) {
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
+
+		if (typeof json.mainColor !== 'string') {
+			throw new Error('Error deserializing — mainColor must be of type string.');
+		}
+
+		const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
+		const mainColor = Color4.fromHex(json.mainColor);
+
+		return new ImageBackground(backgroundType, mainColor);
+	}
+}
+
+AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);

package/src/components/ImageComponent.ts

@@ -88,7 +88,9 @@ export default class ImageComponent extends AbstractComponent {
 	}
 
 	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.startObject(this.contentBBox);
 		canvas.drawImage(this.image);
+		canvas.endObject(this.getLoadSaveData());
 	}
 
 	public getProportionalRenderingTime(): number {

package/src/components/builders/ArrowBuilder.ts

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
@@ -7,14 +7,14 @@ import AbstractComponent from '../AbstractComponent';
 import Stroke from '../Stroke';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 
-export const makeArrowBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new ArrowBuilder(initialPoint);
+export const makeArrowBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new ArrowBuilder(initialPoint, viewport);
 };
 
 export default class ArrowBuilder implements ComponentBuilder {
 	private endPoint: StrokeDataPoint;
 
-	public constructor(private readonly startPoint: StrokeDataPoint) {
+	public constructor(private readonly startPoint: StrokeDataPoint, private readonly viewport: Viewport) {
 		this.endPoint = startPoint;
 	}
 
@@ -28,10 +28,10 @@ export default class ArrowBuilder implements ComponentBuilder {
 	}
 
 	private buildPreview(): Stroke {
-		const startPoint = this.startPoint.pos;
+		const lineStartPoint = this.startPoint.pos;
 		const endPoint = this.endPoint.pos;
-		const toEnd = endPoint.minus(startPoint).normalized();
-		const arrowLength = endPoint.minus(startPoint).length();
+		const toEnd = endPoint.minus(lineStartPoint).normalized();
+		const arrowLength = endPoint.minus(lineStartPoint).length();
 
 		// Ensure that the arrow tip is smaller than the arrow.
 		const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
@@ -45,42 +45,45 @@ export default class ArrowBuilder implements ComponentBuilder {
 		const scaledStartNormal = lineNormal.times(startSize);
 		const scaledBaseNormal = lineNormal.times(endSize);
 
+		const path = new Path(arrowTipBase.minus(scaledBaseNormal), [
+			// Stem
+			{
+				kind: PathCommandType.LineTo,
+				point: lineStartPoint.minus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: lineStartPoint.plus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(scaledBaseNormal),
+			},
+
+			// Head
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: endPoint.plus(toEnd.times(endSize)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.minus(scaledBaseNormal),
+			},
+		// Round all points in the arrow (to remove unnecessary decimal places)
+		]).mapPoints(point => this.viewport.roundPoint(point));
+
 		const preview = new Stroke([
 			{
-				startPoint: arrowTipBase.minus(scaledBaseNormal),
-				commands: [
-					// Stem
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.minus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.plus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(scaledBaseNormal),
-					},
-
-					// Head
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal))
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.plus(toEnd.times(endSize)),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.minus(scaledBaseNormal),
-					},
-				],
+				startPoint: path.startPoint,
+				commands: path.parts,
 				style: {
 					fill: this.startPoint.color,
 				}

package/src/components/builders/LineBuilder.ts

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
@@ -7,14 +7,14 @@ import AbstractComponent from '../AbstractComponent';
 import Stroke from '../Stroke';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 
-export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new LineBuilder(initialPoint);
+export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new LineBuilder(initialPoint, viewport);
 };
 
 export default class LineBuilder implements ComponentBuilder {
 	private endPoint: StrokeDataPoint;
 
-	public constructor(private readonly startPoint: StrokeDataPoint) {
+	public constructor(private readonly startPoint: StrokeDataPoint, private readonly viewport: Viewport) {
 		this.endPoint = startPoint;
 	}
 
@@ -35,31 +35,29 @@ export default class LineBuilder implements ComponentBuilder {
 		const scaledStartNormal = lineNormal.times(startSize);
 		const scaledEndNormal = lineNormal.times(endSize);
 
-		const preview = new Stroke([
+		const strokeStartPoint = startPoint.minus(scaledStartNormal);
+
+		const path = new Path(strokeStartPoint, [
+			{
+				kind: PathCommandType.LineTo,
+				point: startPoint.plus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: endPoint.plus(scaledEndNormal),
+			},
 			{
-				startPoint: startPoint.minus(scaledStartNormal),
-				commands: [
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.plus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.plus(scaledEndNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.minus(scaledEndNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.minus(scaledStartNormal),
-					},
-				],
-				style: {
-					fill: this.startPoint.color,
-				}
-			}
+				kind: PathCommandType.LineTo,
+				point: endPoint.minus(scaledEndNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: startPoint.minus(scaledStartNormal),
+			},
+		]).mapPoints(point => this.viewport.roundPoint(point));
+
+		const preview = new Stroke([
+			path.toRenderable({ fill: this.startPoint.color })
 		]);
 
 		return preview;

package/src/components/builders/RectangleBuilder.ts

@@ -49,7 +49,7 @@ export default class RectangleBuilder implements ComponentBuilder {
 		).transformedBy(
 			// Rotate the canvas rectangle so that its rotation matches the screen
 			rotationMat
-		);
+		).mapPoints(point => this.viewport.roundPoint(point));
 
 		const preview = new Stroke([
 			path.toRenderable({

package/src/components/lib.ts

@@ -9,6 +9,7 @@ import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
+import ImageBackground from './ImageBackground';
 
 export {
 	Stroke,
@@ -18,5 +19,6 @@ export {
 
 	TextComponent,
 	Stroke as StrokeComponent,
+	ImageBackground as BackgroundComponent,
 	ImageComponent,
 };

package/src/components/localization.ts

@@ -4,6 +4,8 @@ export interface ImageComponentLocalization {
 	imageNode: (description: string)=> string;
 	stroke: string;
     svgObject: string;
+	emptyBackground: string;
+	filledBackgroundWithColor: (color: string)=> string;
 
 	restyledElements: string;
 }
@@ -13,6 +15,8 @@ export const defaultComponentLocalization: ImageComponentLocalization = {
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
 	restyledElements: 'Restyled elements',
+	emptyBackground: 'Empty background',
+	filledBackgroundWithColor: (color) => `Filled background (${color})`,
 	text: (text) => `Text object: ${text}`,
 	imageNode: (description: string) => `Image: ${description}`,
 };

package/src/localizations/es.ts

@@ -57,10 +57,18 @@ const localization: EditorLocalization = {
 	eraserTool: 'Borrador',
 	textTool: 'Texto',
 	enterTextToInsert: 'Entra texto',
+	textSize: 'Tamaño',
 	rerenderAsText: 'Redibuja la pantalla al texto',
+	lockRotation: 'Bloquea rotación',
 	image: 'Imagen',
 	imageSize: (size: number, units: string) => `Tamaño del imagen: ${size} ${units}`,
 	imageLoadError: (message: string)=> `Error cargando imagen: ${message}`,
+	toggleOverflow: 'Más',
+
+	documentProperties: 'Fondo',
+	imageWidthOption: 'Ancho: ',
+	imageHeightOption: 'Alto: ',
+	backgroundColor: 'Color de fondo: '
 };
 
 export default localization;

package/src/math/Mat33.test.ts

@@ -1,5 +1,5 @@
 import Mat33 from './Mat33';
-import { Vec2 } from './Vec2';
+import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
 
 
@@ -72,7 +72,7 @@ describe('Mat33 tests', () => {
 	});
 
 	it('90 degree z-rotation matricies should rotate 90 degrees counter clockwise', () => {
-		const fuzz = 0.01;
+		const fuzz = 0.001;
 
 		const M = Mat33.zRotation(Math.PI / 2);
 		const rotated = M.transformVec2(Vec2.unitX);
@@ -80,6 +80,18 @@ describe('Mat33 tests', () => {
 		expect(M.transformVec2(rotated)).objEq(Vec2.unitX.times(-1), fuzz);
 	});
 
+	it('z-rotation matricies should preserve the given origin', () => {
+		const testPairs: Array<[number, Vec2]> = [
+			[ Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.of(10, 10) ],
+		];
+
+		for (const [ angle, center ] of testPairs) {
+			expect(Mat33.zRotation(angle, center).transformVec2(center)).objEq(center);
+		}
+	});
+
 	it('translation matricies should translate Vec2s', () => {
 		const fuzz = 0.01;
 
@@ -118,7 +130,7 @@ describe('Mat33 tests', () => {
 
 		const starterTransform = new Mat33(
 			-0.2588190451025205, -0.9659258262890688, 923.7645204565603,
-			0.9659258262890688, -0.2588190451025205, -49.829447083761465,
+			0.9659258262890688,  -0.2588190451025205, -49.829447083761465,
 			0, 0, 1
 		);
 		expect(starterTransform.invertable()).toBe(true);
@@ -140,6 +152,38 @@ describe('Mat33 tests', () => {
 		).objEq(Vec2.unitX, fuzz);
 	});
 
+	it('z-rotation matrix inverses should undo the z-rotation', () => {
+		const testCases: Array<[ number, Point2 ]> = [
+			[ Math.PI / 2, Vec2.zero ],
+			[ Math.PI, Vec2.of(1, 1) ],
+			[ -Math.PI, Vec2.of(1, 1) ],
+			[ -Math.PI * 2, Vec2.of(1, 1) ],
+			[ -Math.PI * 2, Vec2.of(123, 456) ],
+			[ -Math.PI / 4, Vec2.of(123, 456) ],
+			[ 0.1, Vec2.of(1, 2) ],
+		];
+
+		const fuzz = 0.00001;
+		for (const [ angle, center ] of testCases) {
+			const mat = Mat33.zRotation(angle, center);
+			expect(mat.inverse().rightMul(mat)).objEq(Mat33.identity, fuzz);
+			expect(mat.rightMul(mat.inverse())).objEq(Mat33.identity, fuzz);
+		}
+	});
+
+	it('z-rotation should preserve given origin', () => {
+		const testCases: Array<[ number, Point2 ]> = [
+			[ 6.205048847547065, Vec2.of(75.16363373235318, 104.29870408043762) ],
+			[ 1.234, Vec2.of(-56, 789) ],
+			[ -Math.PI, Vec2.of(-56, 789) ],
+			[ -Math.PI / 2, Vec2.of(-0.001, 1.0002) ],
+		];
+
+		for (const [angle, rotationOrigin] of testCases) {
+			expect(Mat33.zRotation(angle, rotationOrigin).transformVec2(rotationOrigin)).objEq(rotationOrigin);
+		}
+	});
+
 	it('should correctly apply a mapping to all components', () => {
 		expect(
 			new Mat33(

package/src/math/Mat33.ts

@@ -240,11 +240,49 @@ export default class Mat33 {
 	}
 
 	public toString(): string {
-		return `
-⎡ ${this.a1},\t ${this.a2},\t ${this.a3}\t ⎤
-⎢ ${this.b1},\t ${this.b2},\t ${this.b3}\t ⎥
-⎣ ${this.c1},\t ${this.c2},\t ${this.c3}\t ⎦
-		`.trimEnd().trimStart();
+		let result = '';
+		const maxColumnLens = [ 0, 0, 0 ];
+
+		// Determine the longest item in each column so we can pad the others to that
+		// length.
+		for (const row of this.rows) {
+			for (let i = 0; i < 3; i++) {
+				maxColumnLens[i] = Math.max(maxColumnLens[0], `${row.at(i)}`.length);
+			}
+		}
+
+		for (let i = 0; i < 3; i++) {
+			if (i === 0) {
+				result += '⎡ ';
+			} else if (i === 1) {
+				result += '⎢ ';
+			} else {
+				result += '⎣ ';
+			}
+
+			// Add each component of the ith row (after padding it)
+			for (let j = 0; j < 3; j++) {
+				const val = this.rows[i].at(j).toString();
+
+				let padding = '';
+				for (let i = val.length; i < maxColumnLens[j]; i++) {
+					padding += ' ';
+				}
+
+				result += val + ', ' + padding;
+			}
+
+			if (i === 0) {
+				result += ' ⎤';
+			} else if (i === 1) {
+				result += ' ⎥';
+			} else {
+				result += ' ⎦';
+			}
+			result += '\n';
+		}
+
+		return result.trimEnd();
 	}
 
 	/**
@@ -302,6 +340,10 @@ export default class Mat33 {
 	}
 
 	public static zRotation(radians: number, center: Point2 = Vec2.zero): Mat33 {
+		if (radians === 0) {
+			return Mat33.identity;
+		}
+
 		const cos = Math.cos(radians);
 		const sin = Math.sin(radians);