js-draw 0.15.2 → 0.16.0

package/dist/src/toolbar/widgets/OverflowWidget.js

@@ -0,0 +1,65 @@
+import BaseWidget from './BaseWidget';
+export default class OverflowWidget extends BaseWidget {
+    constructor(editor, localizationTable) {
+        var _a;
+        super(editor, 'overflow-widget', localizationTable);
+        this.overflowChildren = [];
+        // Make the dropdown openable
+        this.container.classList.add('dropdownShowable');
+        (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
+    }
+    getTitle() {
+        return this.localizationTable.toggleOverflow;
+    }
+    createIcon() {
+        return this.editor.icons.makeOverflowIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        var _a;
+        (_a = this.overflowContainer) !== null && _a !== void 0 ? _a : (this.overflowContainer = document.createElement('div'));
+        if (this.overflowContainer.parentElement) {
+            this.overflowContainer.remove();
+        }
+        this.overflowContainer.classList.add('toolbar-overflow-widget-overflow-list');
+        dropdown.appendChild(this.overflowContainer);
+        return true;
+    }
+    /**
+     * Removes all `BaseWidget`s from this and returns them.
+     */
+    clearChildren() {
+        this.overflowContainer.replaceChildren();
+        const overflowChildren = this.overflowChildren;
+        this.overflowChildren = [];
+        return overflowChildren;
+    }
+    getChildWidgets() {
+        return [...this.overflowChildren];
+    }
+    hasAsChild(widget) {
+        for (const otherWidget of this.overflowChildren) {
+            if (widget === otherWidget) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Adds `widget` to this.
+     * `widget`'s previous parent is still responsible
+     * for serializing/deserializing its state.
+     */
+    addToOverflow(widget) {
+        this.overflowChildren.push(widget);
+        widget.addTo(this.overflowContainer);
+        widget.setIsToplevel(false);
+    }
+    // This always returns false.
+    // Don't try to move the overflow menu to itself.
+    canBeInOverflowMenu() {
+        return false;
+    }
+}

package/dist/src/toolbar/widgets/lib.d.ts

@@ -7,3 +7,4 @@ export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
 export { default as InsertImageWidget } from './InsertImageWidget';
+export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';

package/dist/src/toolbar/widgets/lib.js

@@ -7,3 +7,4 @@ export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
 export { default as InsertImageWidget } from './InsertImageWidget';
+export { default as DocumentPropertiesWidget } from './DocumentPropertiesWidget';

package/dist/src/tools/PasteHandler.js

@@ -7,9 +7,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { TextComponent } from '../components/lib';
+import TextComponent from '../components/TextComponent';
 import SVGLoader from '../SVGLoader';
-import { Mat33 } from '../math/lib';
+import Mat33 from '../math/Mat33';
 import BaseTool from './BaseTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';

package/dist/src/tools/SelectionTool/Selection.d.ts

@@ -3,7 +3,8 @@
  * @packageDocumentation
  */
 import Editor from '../../Editor';
-import { Mat33, Rect2 } from '../../math/lib';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
 import { Point2 } from '../../math/Vec2';
 import Pointer from '../../Pointer';
 import AbstractComponent from '../../components/AbstractComponent';

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

@@ -13,7 +13,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 var _a;
 import SerializableCommand from '../../commands/SerializableCommand';
-import { Mat33, Rect2 } from '../../math/lib';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
 import { Vec2 } from '../../math/Vec2';
 import SelectionHandle, { HandleShape, handleSize } from './SelectionHandle';
 import { cssPrefix } from './SelectionTool';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.15.2",
+	"version": "0.16.0",
 	"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/Editor.loadFrom.test.ts

@@ -0,0 +1,24 @@
+import Color4 from './Color4';
+import { imageBackgroundCSSClassName } from './components/ImageBackground';
+import { RestyleableComponent } from './lib';
+import SVGLoader from './SVGLoader';
+import createEditor from './testing/createEditor';
+
+describe('Editor.loadFrom', () => {
+	it('should remove existing BackgroundComponents when loading new BackgroundComponents', async () => {
+		const editor = createEditor();
+		await editor.dispatch(editor.setBackgroundColor(Color4.red));
+
+		let backgroundComponents = editor.image.getBackgroundComponents();
+		expect(backgroundComponents).toHaveLength(1);
+		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.red);
+
+		await editor.loadFrom(SVGLoader.fromString(`<svg viewBox='0 0 100 100'>
+			<path class='${imageBackgroundCSSClassName}' d='m0,0 L100,0 L100,100 L0,100 z' fill='#000'/>
+		</svg>`, true));
+
+		backgroundComponents = editor.image.getBackgroundComponents();
+		expect(backgroundComponents).toHaveLength(1);
+		expect((backgroundComponents[0] as RestyleableComponent).getStyle().color).objEq(Color4.black);
+	});
+});

package/src/Editor.ts

@@ -26,6 +26,8 @@ import fileToBase64 from './util/fileToBase64';
 import uniteCommands from './commands/uniteCommands';
 import SelectionTool from './tools/SelectionTool/SelectionTool';
 import AbstractComponent from './components/AbstractComponent';
+import Erase from './commands/Erase';
+import ImageBackground, { BackgroundType } from './components/ImageBackground';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -355,9 +357,10 @@ export class Editor {
 			this.viewport.updateScreenSize(
 				Vec2.of(this.display.width, this.display.height)
 			);
+			this.queueRerender();
 		});
 
-		window.addEventListener('resize', () => {
+		const handleResize = () => {
 			this.notifier.dispatch(EditorEventType.DisplayResized, {
 				kind: EditorEventType.DisplayResized,
 				newSize: Vec2.of(
@@ -365,8 +368,14 @@ export class Editor {
 					this.display.height
 				),
 			});
-			this.queueRerender();
-		});
+		};
+
+		if ('ResizeObserver' in (window as any)) {
+			const resizeObserver = new ResizeObserver(handleResize);
+			resizeObserver.observe(this.container);
+		} else {
+			addEventListener('resize', handleResize);
+		}
 
 		this.accessibilityControlArea.addEventListener('input', () => {
 			this.accessibilityControlArea.value = '';
@@ -935,7 +944,7 @@ export class Editor {
 	}
 
 	public toSVG(): SVGElement {
-		const importExportViewport = this.image.getImportExportViewport();
+		const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
 		const svgNameSpace = 'http://www.w3.org/2000/svg';
 		const result = document.createElementNS(svgNameSpace, 'svg');
 		const renderer = new SVGRenderer(result, importExportViewport);
@@ -966,10 +975,18 @@ export class Editor {
 		return result;
 	}
 
+	/**
+	 * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
+	 * 
+	 * @see loadFromSVG
+	 */
 	public async loadFrom(loader: ImageLoader) {
 		this.showLoadingWarning(0);
 		this.display.setDraftMode(true);
 
+		const originalBackgrounds = this.image.getBackgroundComponents();
+		const eraseBackgroundCommand = new Erase(originalBackgrounds);
+
 		await loader.start(async (component) => {
 			await this.dispatchNoAnnounce(EditorImage.addElement(component));
 		}, (countProcessed: number, totalToProcess: number) => {
@@ -984,12 +1001,50 @@ export class Editor {
 			this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
 			this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
 		});
+
+		// Ensure that we don't have multiple overlapping BackgroundComponents. Remove
+		// old BackgroundComponents.
+		// Overlapping BackgroundComponents may cause changing the background color to
+		// not work properly.
+		if (this.image.getBackgroundComponents().length !== originalBackgrounds.length) {
+			await this.dispatchNoAnnounce(eraseBackgroundCommand);
+		}
+
 		this.hideLoadingWarning();
 
 		this.display.setDraftMode(false);
 		this.queueRerender();
 	}
 
+	private getTopmostBackgroundComponent(): ImageBackground|null {
+		let background: ImageBackground|null = null;
+
+		// Find a background component, if one exists.
+		// Use the last (topmost) background component if there are multiple.
+		for (const component of this.image.getBackgroundComponents()) {
+			if (component instanceof ImageBackground) {
+				background = component;
+			}
+		}
+
+		return background;
+	}
+
+	/**
+	 * Set the background color of the image.
+	 */
+	public setBackgroundColor(color: Color4): Command {
+		let background = this.getTopmostBackgroundComponent();
+
+		if (!background) {
+			const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
+			background = new ImageBackground(backgroundType, color);
+			return this.image.addElement(background);
+		} else {
+			return background.updateStyle({ color });
+		}
+	}
+
 	// Returns the size of the visible region of the output SVG
 	public getImportExportRect(): Rect2 {
 		return this.image.getImportExportViewport().visibleRect;

package/src/EditorImage.ts

@@ -25,6 +25,7 @@ export type EditorImageNotifier = EventDispatcher<EditorImageEventType, { image:
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
 	private root: ImageNode;
+	private background: ImageNode;
 	private componentsById: Record<string, AbstractComponent>;
 
 	/** Viewport for the exported/imported image. */
@@ -36,6 +37,7 @@ export default class EditorImage {
 	// @internal
 	public constructor() {
 		this.root = new ImageNode();
+		this.background = new ImageNode();
 		this.componentsById = {};
 
 		this.notifier = new EventDispatcher();
@@ -56,7 +58,7 @@ export default class EditorImage {
 		return this.importExportViewport;
 	}
 
-	public setImportExportRect(imageRect: Rect2) {
+	public setImportExportRect(imageRect: Rect2): Command {
 		const importExportViewport = this.getImportExportViewport();
 		const origSize = importExportViewport.visibleRect.size;
 		const origTransform = importExportViewport.canvasToScreenTransform;
@@ -82,15 +84,27 @@ export default class EditorImage {
 		};
 	}
 
-	// Returns the parent of the given element, if it exists.
-	public findParent(elem: AbstractComponent): ImageNode|null {
-		const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
-		for (const candidate of candidates) {
-			if (candidate.getContent() === elem) {
-				return candidate;
+	// Returns all components that make up the background of this image. These
+	// components are rendered below all other components.
+	public getBackgroundComponents(): AbstractComponent[] {
+		const result = [];
+
+		const leaves = this.background.getLeaves();
+		sortLeavesByZIndex(leaves);
+
+		for (const leaf of leaves) {
+			const content = leaf.getContent();
+
+			if (content) {
+				result.push(content);
 			}
 		}
-		return null;
+		return result;
+	}
+
+	// Returns the parent of the given element, if it exists.
+	public findParent(elem: AbstractComponent): ImageNode|null {
+		return this.background.getChildWithContent(elem) ?? this.root.getChildWithContent(elem);
 	}
 
 	// Forces a re-render of `elem` when the image is next re-rendered as a whole.
@@ -108,22 +122,22 @@ export default class EditorImage {
 
 	/** @internal */
 	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
+		this.background.render(screenRenderer, viewport.visibleRect);
 		cache.render(screenRenderer, this.root, viewport);
 	}
 
-	/** @internal */
-	public render(renderer: AbstractRenderer, viewport: Viewport) {
-		this.root.render(renderer, viewport.visibleRect);
+	/**
+	 * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`)
+	 * @internal
+	 */
+	public render(renderer: AbstractRenderer, viewport: Viewport|null) {
+		this.background.render(renderer, viewport?.visibleRect);
+		this.root.render(renderer, viewport?.visibleRect);
 	}
 
 	/** Renders all nodes, even ones not within the viewport. @internal */
 	public renderAll(renderer: AbstractRenderer) {
-		const leaves = this.root.getLeaves();
-		sortLeavesByZIndex(leaves);
-
-		for (const leaf of leaves) {
-			leaf.getContent()!.render(renderer, leaf.getBBox());
-		}
+		this.render(renderer, null);
 	}
 
 	/** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
@@ -160,12 +174,23 @@ export default class EditorImage {
 		elem.onAddToImage(this);
 
 		this.componentsById[elem.getId()] = elem;
-		return this.root.addLeaf(elem);
+
+		// If a background component, add to the background. Else,
+		// add to the normal component tree.
+		const parentTree = elem.isBackground() ? this.background : this.root;
+		return parentTree.addLeaf(elem);
 	}
 
 	private removeElementDirectly(element: AbstractComponent) {
 		const container = this.findParent(element);
 		container?.remove();
+
+		if (container) {
+			this.onDestroyElement(element);
+			return true;
+		}
+
+		return false;
 	}
 
 	/**
@@ -180,7 +205,7 @@ export default class EditorImage {
 	}
 
 	/** @see EditorImage.addElement */
-	public addElement(elem: AbstractComponent, applyByFlattening: boolean = true) {
+	public addElement(elem: AbstractComponent, applyByFlattening?: boolean) {
 		return EditorImage.addElement(elem, applyByFlattening);
 	}
 
@@ -325,6 +350,19 @@ export class ImageNode {
 		return result;
 	}
 
+	// Returns the child of this with the target content or `null` if no
+	// such child exists.
+	public getChildWithContent(target: AbstractComponent): ImageNode|null {
+		const candidates = this.getLeavesIntersectingRegion(target.getBBox());
+		for (const candidate of candidates) {
+			if (candidate.getContent() === target) {
+				return candidate;
+			}
+		}
+
+		return null;
+	}
+
 	// Returns a list of leaves with this as an ancestor.
 	// Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
 	public getLeaves(): ImageNode[] {
@@ -458,6 +496,8 @@ export class ImageNode {
 
 	// Remove this node and all of its children
 	public remove() {
+		this.content?.onRemoveFromImage();
+
 		if (!this.parent) {
 			this.content = null;
 			this.children = [];
@@ -465,8 +505,6 @@ export class ImageNode {
 			return;
 		}
 
-		this.content?.onRemoveFromImage();
-
 		const oldChildCount = this.parent.children.length;
 		this.parent.children = this.parent.children.filter(node => {
 			return node !== this;
@@ -489,8 +527,13 @@ export class ImageNode {
 		this.children = [];
 	}
 
-	public render(renderer: AbstractRenderer, visibleRect: Rect2) {
-		const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+	public render(renderer: AbstractRenderer, visibleRect?: Rect2) {
+		let leaves;
+		if (visibleRect) {
+			leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+		} else {
+			leaves = this.getLeaves();
+		}
 		sortLeavesByZIndex(leaves);
 
 		for (const leaf of leaves) {

package/src/Viewport.ts

@@ -88,6 +88,19 @@ export class Viewport {
 		this.screenRect = Rect2.empty;
 	}
 
+	/**
+	 * @returns a temporary copy of `this` that does not notify when modified. This is
+	 * useful when rendering with a temporarily different viewport.
+	 */
+	public getTemporaryClone(): Viewport {
+		const result = new Viewport(() => {});
+		result.transform = this.transform;
+		result.inverseTransform = this.inverseTransform;
+		result.screenRect = this.screenRect;
+
+		return result;
+	}
+
 	// @internal
 	public updateScreenSize(screenSize: Vec2) {
 		this.screenRect = this.screenRect.resizedTo(screenSize);

package/src/components/AbstractComponent.ts

@@ -156,6 +156,12 @@ export default abstract class AbstractComponent {
 		return true;
 	}
 
+	// @returns true iff this component should be added to the background, rather than the
+	// foreground of the image.
+	public isBackground(): boolean {
+		return false;
+	}
+
 	// @returns an approximation of the proportional time it takes to render this component.
 	// This is intended to be a rough estimate, but, for example, a stroke with two points sould have
 	// a renderingWeight approximately twice that of a stroke with one point.

package/src/components/ImageBackground.test.ts

@@ -0,0 +1,35 @@
+import Color4 from '../Color4';
+import { Path, Rect2 } from '../math/lib';
+import createEditor from '../testing/createEditor';
+import ImageBackground, { BackgroundType, imageBackgroundCSSClassName } from './ImageBackground';
+
+describe('ImageBackground', () => {
+	it('should render to fill exported SVG', () => {
+		const editor = createEditor();
+		const background = new ImageBackground(BackgroundType.SolidColor, Color4.green);
+		editor.image.addElement(
+			background
+		).apply(editor);
+
+		const expectedImportExportRect = new Rect2(-10, 10, 15, 20);
+		editor.setImportExportRect(expectedImportExportRect).apply(editor);
+		expect(editor.getImportExportRect()).objEq(expectedImportExportRect);
+
+		expect(background.getBBox()).objEq(expectedImportExportRect);
+
+		const rendered = editor.toSVG();
+		const renderedBackground = rendered.querySelector(`.${imageBackgroundCSSClassName}`);
+
+		if (renderedBackground === null) {
+			throw new Error('ImageBackground did not render in exported SVG');
+		}
+
+		expect(renderedBackground.tagName.toLowerCase()).toBe('path');
+
+		const pathString = renderedBackground.getAttribute('d')!;
+		expect(pathString).not.toBeNull();
+
+		const path = Path.fromString(pathString);
+		expect(path.bbox).objEq(editor.getImportExportRect());
+	});
+});

package/src/components/ImageBackground.ts

@@ -50,7 +50,7 @@ export default class ImageBackground extends AbstractComponent implements Restyl
 	}
 
 	// @internal
-	public forceStyle(style: ComponentStyle, _editor: Editor | null): void {
+	public forceStyle(style: ComponentStyle, editor: Editor | null): void {
 		const fill = style.color;
 
 		if (!fill) {
@@ -63,6 +63,11 @@ export default class ImageBackground extends AbstractComponent implements Restyl
 		} else {
 			this.backgroundType = BackgroundType.SolidColor;
 		}
+
+		if (editor) {
+			editor.image.queueRerenderOf(this);
+			editor.queueRerender();
+		}
 	}
 
 	public onAddToImage(image: EditorImage) {
@@ -124,6 +129,10 @@ export default class ImageBackground extends AbstractComponent implements Restyl
 		return false;
 	}
 
+	public isBackground(): boolean {
+		return true;
+	}
+
 	protected serializeToJSON() {
 		return {
 			mainColor: this.mainColor.toHexString(),

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';
 
 
@@ -130,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);
@@ -152,11 +152,36 @@ 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 rotationOrigin = Vec2.of(75.16363373235318, 104.29870408043762);
-		const angle = 6.205048847547065;
+		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) ],
+		];
 
-		expect(Mat33.zRotation(angle, rotationOrigin).transformVec2(rotationOrigin)).objEq(rotationOrigin);
+		for (const [angle, rotationOrigin] of testCases) {
+			expect(Mat33.zRotation(angle, rotationOrigin).transformVec2(rotationOrigin)).objEq(rotationOrigin);
+		}
 	});
 
 	it('should correctly apply a mapping to all components', () => {

package/src/rendering/renderers/CanvasRenderer.ts

@@ -75,7 +75,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 	public displaySize(): Vec2 {
 		return Vec2.of(
 			this.ctx.canvas.clientWidth,
-			this.ctx.canvas.clientHeight
+			this.ctx.canvas.clientHeight,
 		);
 	}