js-draw 0.1.10 → 0.1.11

package/dist/src/Editor.d.ts

@@ -15,6 +15,8 @@ export interface EditorSettings {
     renderingMode: RenderingMode;
     localization: Partial<EditorLocalization>;
     wheelEventsEnabled: boolean | 'only-if-focused';
+    minZoom: number;
+    maxZoom: number;
 }
 export declare class Editor {
     private container;

package/dist/src/Editor.js

@@ -26,7 +26,7 @@ import Mat33 from './geometry/Mat33';
 import getLocalizationTable from './localizations/getLocalizationTable';
 export class Editor {
     constructor(parent, settings = {}) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         this.announceUndoCallback = (command) => {
             this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this.localization)));
         };
@@ -40,6 +40,8 @@ export class Editor {
             wheelEventsEnabled: (_a = settings.wheelEventsEnabled) !== null && _a !== void 0 ? _a : true,
             renderingMode: (_b = settings.renderingMode) !== null && _b !== void 0 ? _b : RenderingMode.CanvasRenderer,
             localization: this.localization,
+            minZoom: (_c = settings.minZoom) !== null && _c !== void 0 ? _c : 2e-10,
+            maxZoom: (_d = settings.maxZoom) !== null && _d !== void 0 ? _d : 1e12,
         };
         this.container = document.createElement('div');
         this.renderingRegion = document.createElement('div');
@@ -71,6 +73,20 @@ export class Editor {
         this.registerListeners();
         this.queueRerender();
         this.hideLoadingWarning();
+        // Enforce zoom limits.
+        this.notifier.on(EditorEventType.ViewportChanged, evt => {
+            if (evt.kind === EditorEventType.ViewportChanged) {
+                const zoom = evt.newTransform.transformVec3(Vec2.unitX).length();
+                if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
+                    const oldZoom = evt.oldTransform.transformVec3(Vec2.unitX).length();
+                    let resetTransform = Mat33.identity;
+                    if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
+                        resetTransform = evt.oldTransform;
+                    }
+                    this.viewport.resetTransform(resetTransform);
+                }
+            }
+        });
     }
     // Returns a reference to this' container.
     // Example usage:

package/dist/src/Viewport.js

@@ -38,11 +38,13 @@ export class Viewport {
     // Updates the transformation directly. Using ViewportTransform is preferred.
     // [newTransform] should map from canvas coordinates to screen coordinates.
     resetTransform(newTransform = Mat33.identity) {
+        const oldTransform = this.transform;
         this.transform = newTransform;
         this.inverseTransform = newTransform.inverse();
         this.notifier.dispatch(EditorEventType.ViewportChanged, {
             kind: EditorEventType.ViewportChanged,
             newTransform,
+            oldTransform,
         });
     }
     get screenToCanvasTransform() {

package/dist/src/localizations/es.js

@@ -6,7 +6,7 @@ const localization = Object.assign(Object.assign({}, defaultEditorLocalization),
     loading: (percentage) => `Cargando: ${percentage}%...`, imageEditor: 'Editor de dibujos', undoAnnouncement: (commandDescription) => `${commandDescription} fue deshecho`, redoAnnouncement: (commandDescription) => `${commandDescription} fue rehecho`, undo: 'Deshace', redo: 'Rehace', 
     // Strings for the toolbar
     // (see src/toolbar/localization.ts)
-    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectObjectType: 'Forma de dibuja:', handTool: 'Mover', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFronScreen: 'Selecciona un color de la pantalla', dropdownShown(toolName) {
+    pen: 'Lapiz', eraser: 'Borrador', select: 'Selecciona', thicknessLabel: 'Tamaño: ', colorLabel: 'Color: ', doneLoading: 'El cargado terminó', fontLabel: 'Fuente: ', anyDevicePanning: 'Mover la pantalla con todo dispotivo', touchPanning: 'Mover la pantalla con un dedo', touchPanTool: 'Instrumento de mover la pantalla con un dedo', outlinedRectanglePen: 'Rectángulo con nada más que un borde', filledRectanglePen: 'Rectángulo sin borde', linePen: 'Línea', arrowPen: 'Flecha', freehandPen: 'Dibuja sin restricción de forma', selectObjectType: 'Forma de dibuja:', handTool: 'Mover', zoom: 'Zoom', resetView: 'Reiniciar vista', resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado', deleteSelection: 'Borra la selección', duplicateSelection: 'Duplica la selección', pickColorFronScreen: 'Selecciona un color de la pantalla', dropdownShown(toolName) {
         return `Menú por ${toolName} es visible`;
     }, dropdownHidden: function (toolName) {
         return `Menú por ${toolName} fue ocultado`;

package/dist/src/toolbar/localization.d.ts

@@ -21,6 +21,7 @@ export interface ToolbarLocalization {
     undo: string;
     redo: string;
     zoom: string;
+    resetView: string;
     selectionToolKeyboardShortcuts: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;

package/dist/src/toolbar/localization.js

@@ -4,6 +4,7 @@ export const defaultToolbarLocalization = {
     select: 'Select',
     handTool: 'Pan',
     zoom: 'Zoom',
+    resetView: 'Reset view',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
     fontLabel: 'Font: ',

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

@@ -45,7 +45,7 @@ export default class BaseWidget {
         return true;
     }
     setupActionBtnClickListener(button) {
-        const clickTriggers = { enter: true, ' ': true, };
+        const clickTriggers = { Enter: true, ' ': true, };
         button.onkeydown = (evt) => {
             let handled = false;
             if (evt.key in clickTriggers) {

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

@@ -10,10 +10,12 @@ const makeZoomControl = (localizationTable, editor) => {
     const zoomLevelRow = document.createElement('div');
     const increaseButton = document.createElement('button');
     const decreaseButton = document.createElement('button');
+    const resetViewButton = document.createElement('button');
     const zoomLevelDisplay = document.createElement('span');
     increaseButton.innerText = '+';
     decreaseButton.innerText = '-';
-    zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton);
+    resetViewButton.innerText = localizationTable.resetView;
+    zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton, resetViewButton);
     zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
     zoomLevelDisplay.classList.add('zoomDisplay');
     let lastZoom;
@@ -34,6 +36,8 @@ const makeZoomControl = (localizationTable, editor) => {
     editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
         if (event.kind === EditorEventType.ViewportChanged) {
             updateZoomDisplay();
+            // Can't reset if already reset.
+            resetViewButton.disabled = event.newTransform.eq(Mat33.identity);
         }
     });
     const zoomBy = (factor) => {
@@ -47,6 +51,9 @@ const makeZoomControl = (localizationTable, editor) => {
     decreaseButton.onclick = () => {
         zoomBy(4.0 / 5);
     };
+    resetViewButton.onclick = () => {
+        editor.dispatch(new Viewport.ViewportTransform(editor.viewport.canvasToScreenTransform.inverse()), true);
+    };
     return zoomLevelRow;
 };
 class ZoomWidget extends BaseWidget {

package/dist/src/tools/PanZoom.js

@@ -121,15 +121,15 @@ export default class PanZoom extends BaseTool {
         this.transform.apply(this.editor);
     }
     onWheel({ delta, screenPos }) {
-        if (this.transform === null) {
-            this.transform = new Viewport.ViewportTransform(Mat33.identity);
-        }
+        // Reset the transformation -- wheel events are individual events, so we don't
+        // need to unapply/reapply.
+        this.transform = new Viewport.ViewportTransform(Mat33.identity);
         const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without including translation
         const translation = toCanvas.transformVec3(Vec3.of(-delta.x, -delta.y, 0));
         const pinchZoomScaleFactor = 1.04;
-        const transformUpdate = Mat33.scaling2D(Math.pow(pinchZoomScaleFactor, -delta.z), canvasPos).rightMul(Mat33.translation(translation));
+        const transformUpdate = Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33.translation(translation));
         this.updateTransform(transformUpdate);
         return true;
     }
@@ -137,6 +137,8 @@ export default class PanZoom extends BaseTool {
         if (!(this.mode & PanZoomMode.Keyboard)) {
             return false;
         }
+        // No need to keep the same the transform for keyboard events.
+        this.transform = new Viewport.ViewportTransform(Mat33.identity);
         let translation = Vec2.zero;
         let scale = 1;
         let rotation = 0;

package/dist/src/types.d.ts

@@ -79,6 +79,7 @@ export interface EditorObjectEvent {
 export interface EditorViewportChangedEvent {
     readonly kind: EditorEventType.ViewportChanged;
     readonly newTransform: Mat33;
+    readonly oldTransform: Mat33;
 }
 export interface DisplayResizedEvent {
     readonly kind: EditorEventType.DisplayResized;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -31,6 +31,9 @@ export interface EditorSettings {
 	// This does not include pinch-zoom events.
 	// Defaults to true.
 	wheelEventsEnabled: boolean|'only-if-focused';
+
+	minZoom: number,
+	maxZoom: number,
 }
 
 export class Editor {
@@ -69,6 +72,8 @@ export class Editor {
 			wheelEventsEnabled: settings.wheelEventsEnabled ?? true,
 			renderingMode: settings.renderingMode ?? RenderingMode.CanvasRenderer,
 			localization: this.localization,
+			minZoom: settings.minZoom ?? 2e-10,
+			maxZoom: settings.maxZoom ?? 1e12,
 		};
 
 		this.container = document.createElement('div');
@@ -111,6 +116,24 @@ export class Editor {
 		this.registerListeners();
 		this.queueRerender();
 		this.hideLoadingWarning();
+
+
+		// Enforce zoom limits.
+		this.notifier.on(EditorEventType.ViewportChanged, evt => {
+			if (evt.kind === EditorEventType.ViewportChanged) {
+				const zoom = evt.newTransform.transformVec3(Vec2.unitX).length();
+				if (zoom > this.settings.maxZoom || zoom < this.settings.minZoom) {
+					const oldZoom = evt.oldTransform.transformVec3(Vec2.unitX).length();
+					let resetTransform = Mat33.identity;
+
+					if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
+						resetTransform = evt.oldTransform;
+					}
+	
+					this.viewport.resetTransform(resetTransform);
+				}
+			}
+		});
 	}
 
 	// Returns a reference to this' container.

package/src/Viewport.ts

@@ -103,11 +103,13 @@ export class Viewport {
 	// Updates the transformation directly. Using ViewportTransform is preferred.
 	// [newTransform] should map from canvas coordinates to screen coordinates.
 	public resetTransform(newTransform: Mat33 = Mat33.identity) {
+		const oldTransform = this.transform;
 		this.transform = newTransform;
 		this.inverseTransform = newTransform.inverse();
 		this.notifier.dispatch(EditorEventType.ViewportChanged, {
 			kind: EditorEventType.ViewportChanged,
 			newTransform,
+			oldTransform,
 		});
 	}
 

package/src/localizations/es.ts

@@ -33,6 +33,8 @@ const localization: EditorLocalization = {
 	freehandPen: 'Dibuja sin restricción de forma',
 	selectObjectType: 'Forma de dibuja:',
 	handTool: 'Mover',
+	zoom: 'Zoom',
+	resetView: 'Reiniciar vista',
 	resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado',
 	deleteSelection: 'Borra la selección',
 	duplicateSelection: 'Duplica la selección',

package/src/toolbar/localization.ts

@@ -23,6 +23,7 @@ export interface ToolbarLocalization {
 	undo: string;
 	redo: string;
 	zoom: string;
+	resetView: string;
 	selectionToolKeyboardShortcuts: string;
 
 	dropdownShown: (toolName: string)=> string;
@@ -37,6 +38,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	select: 'Select',
 	handTool: 'Pan',
 	zoom: 'Zoom',
+	resetView: 'Reset view',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	fontLabel: 'Font: ',

package/src/toolbar/toolbar.css

@@ -155,8 +155,7 @@
 }
 
 .toolbar-root .toolbar-zoomLevelEditor button {
-	width: min-content;
-	height: min-content;
+	min-width: 48px;
 }
 
 .color-input-container {

package/src/toolbar/widgets/BaseWidget.ts

@@ -51,7 +51,7 @@ export default abstract class BaseWidget {
 	}
 
 	protected setupActionBtnClickListener(button: HTMLElement) {
-		const clickTriggers = { enter: true, ' ': true, };
+		const clickTriggers = { Enter: true, ' ': true, };
 		button.onkeydown = (evt) => {
 			let handled = false;
 

package/src/toolbar/widgets/HandToolWidget.ts

@@ -14,10 +14,12 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 
 	const increaseButton = document.createElement('button');
 	const decreaseButton = document.createElement('button');
+	const resetViewButton = document.createElement('button');
 	const zoomLevelDisplay = document.createElement('span');
 	increaseButton.innerText = '+';
 	decreaseButton.innerText = '-';
-	zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton);
+	resetViewButton.innerText = localizationTable.resetView;
+	zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton, resetViewButton);
 
 	zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
 	zoomLevelDisplay.classList.add('zoomDisplay');
@@ -42,6 +44,9 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 	editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
 		if (event.kind === EditorEventType.ViewportChanged) {
 			updateZoomDisplay();
+
+			// Can't reset if already reset.
+			resetViewButton.disabled = event.newTransform.eq(Mat33.identity);
 		}
 	});
 
@@ -59,6 +64,12 @@ const makeZoomControl = (localizationTable: ToolbarLocalization, editor: Editor)
 		zoomBy(4.0/5);
 	};
 
+	resetViewButton.onclick = () => {
+		editor.dispatch(new Viewport.ViewportTransform(
+			editor.viewport.canvasToScreenTransform.inverse()
+		), true);
+	};
+
 	return zoomLevelRow;
 };
 

package/src/tools/PanZoom.ts

@@ -158,9 +158,9 @@ export default class PanZoom extends BaseTool {
 	}
 
 	public onWheel({ delta, screenPos }: WheelEvt): boolean {
-		if (this.transform === null) {
-			this.transform = new Viewport.ViewportTransform(Mat33.identity);
-		}
+		// Reset the transformation -- wheel events are individual events, so we don't
+		// need to unapply/reapply.
+		this.transform = new Viewport.ViewportTransform(Mat33.identity);
 
 		const canvasPos = this.editor.viewport.screenToCanvas(screenPos);
 		const toCanvas = this.editor.viewport.screenToCanvasTransform;
@@ -172,7 +172,7 @@ export default class PanZoom extends BaseTool {
 			);
 		const pinchZoomScaleFactor = 1.04;
 		const transformUpdate = Mat33.scaling2D(
-			Math.pow(pinchZoomScaleFactor, -delta.z), canvasPos
+			Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos
 		).rightMul(
 			Mat33.translation(translation)
 		);
@@ -186,6 +186,9 @@ export default class PanZoom extends BaseTool {
 			return false;
 		}
 
+		// No need to keep the same the transform for keyboard events.
+		this.transform = new Viewport.ViewportTransform(Mat33.identity);
+
 		let translation = Vec2.zero;
 		let scale = 1;
 		let rotation = 0;

package/src/types.ts

@@ -117,6 +117,7 @@ export interface EditorViewportChangedEvent {
 
 	// Canvas -> screen transform
 	readonly newTransform: Mat33;
+	readonly oldTransform: Mat33;
 }
 
 export interface DisplayResizedEvent {