js-draw 0.4.1 → 0.5.0

package/dist/src/Editor.d.ts

@@ -193,7 +193,7 @@ export declare class Editor {
         remove: () => void;
     };
     addStyleSheet(content: string): HTMLStyleElement;
-    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean): void;
+    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
     toSVG(): SVGElement;
     loadFrom(loader: ImageLoader): Promise<void>;

package/dist/src/Editor.js

@@ -441,6 +441,7 @@ export class Editor {
                 kind: InputEvtType.KeyPressEvent,
                 key: evt.key,
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             })) {
                 evt.preventDefault();
             }
@@ -453,6 +454,7 @@ export class Editor {
                 kind: InputEvtType.KeyUpEvent,
                 key: evt.key,
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             })) {
                 evt.preventDefault();
             }
@@ -598,11 +600,12 @@ export class Editor {
     }
     // Dispatch a keyboard event to the currently selected tool.
     // Intended for unit testing
-    sendKeyboardEvent(eventType, key, ctrlKey = false) {
+    sendKeyboardEvent(eventType, key, ctrlKey = false, altKey = false) {
         this.toolController.dispatchInputEvent({
             kind: eventType,
             key,
-            ctrlKey
+            ctrlKey,
+            altKey,
         });
     }
     // Dispatch a pen event to the currently selected tool.

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -320,7 +320,7 @@ export default class FreehandLineBuilder {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 3;
+        const maxRelativeLength = 2;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -72,7 +72,7 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPath(pathSpec) {
         var _a;
         const style = pathSpec.style;
-        const path = Path.fromRenderable(pathSpec);
+        const path = Path.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
         if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {
             this.addPathToSVG();

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

@@ -1,4 +1,5 @@
 import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 export default abstract class BaseWidget {
     #private;
@@ -18,6 +19,7 @@ export default abstract class BaseWidget {
     protected abstract createIcon(): Element;
     protected fillDropdown(dropdown: HTMLElement): boolean;
     protected setupActionBtnClickListener(button: HTMLElement): void;
+    protected onKeyPress(_event: KeyPressEvent): boolean;
     protected abstract handleClick(): void;
     protected get hasDropdown(): boolean;
     protected addSubWidget(widget: BaseWidget): void;

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

@@ -10,6 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _BaseWidget_hasDropdown;
+import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
 import { EditorEventType, InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
@@ -33,6 +34,12 @@ export default class BaseWidget {
         this.label = document.createElement('label');
         this.button.setAttribute('role', 'button');
         this.button.tabIndex = 0;
+        const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
+        // If the onKeyPress function has been extended and the editor is configured to send keypress events to
+        // toolbar widgets,
+        if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+            toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
+        }
     }
     // Add content to the widget's associated dropdown menu.
     // Returns true if such a menu should be created, false otherwise.
@@ -62,6 +69,7 @@ export default class BaseWidget {
                     kind: InputEvtType.KeyPressEvent,
                     key: evt.key,
                     ctrlKey: evt.ctrlKey,
+                    altKey: evt.altKey,
                 });
             }
         };
@@ -73,6 +81,7 @@ export default class BaseWidget {
                 kind: InputEvtType.KeyUpEvent,
                 key: evt.key,
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             });
         };
         button.onclick = () => {
@@ -81,6 +90,12 @@ export default class BaseWidget {
             }
         };
     }
+    // Add a listener that is triggered when a key is pressed.
+    // Listeners will fire regardless of whether this widget is selected and require that
+    // {@link lib!Editor.toolController} to have an enabled {@link lib!ToolbarShortcutHandler} tool.
+    onKeyPress(_event) {
+        return false;
+    }
     get hasDropdown() {
         return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");
     }

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

@@ -1,6 +1,7 @@
 import { ComponentBuilderFactory } from '../../components/builders/types';
 import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export interface PenTypeRecord {
@@ -16,4 +17,5 @@ export default class PenToolWidget extends BaseToolWidget {
     protected createIcon(): Element;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected onKeyPress(event: KeyPressEvent): boolean;
 }

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

@@ -127,5 +127,19 @@ export default class PenToolWidget extends BaseToolWidget {
         dropdown.replaceChildren(container);
         return true;
     }
+    onKeyPress(event) {
+        if (!this.isSelected()) {
+            return false;
+        }
+        // Map alt+0-9 to different pen types.
+        if (/^[0-9]$/.exec(event.key) && event.ctrlKey) {
+            const penTypeIdx = parseInt(event.key) - 1;
+            if (penTypeIdx >= 0 && penTypeIdx < this.penTypes.length) {
+                this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+                return true;
+            }
+        }
+        return false;
+    }
 }
 PenToolWidget.idCounter = 0;

package/dist/src/tools/ToolController.js

@@ -10,6 +10,7 @@ import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
+import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -35,6 +36,7 @@ export default class ToolController {
             ...primaryTools,
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
+            new ToolbarShortcutHandler(editor),
             new ToolSwitcherShortcut(editor),
             new PasteHandler(editor),
         ];

package/dist/src/tools/ToolbarShortcutHandler.d.ts

@@ -0,0 +1,12 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+declare type KeyPressListener = (event: KeyPressEvent) => boolean;
+export default class ToolbarShortcutHandler extends BaseTool {
+    private listeners;
+    constructor(editor: Editor);
+    registerListener(listener: KeyPressListener): void;
+    removeListener(listener: KeyPressListener): void;
+    onKeyPress(event: KeyPressEvent): boolean;
+}
+export {};

package/dist/src/tools/ToolbarShortcutHandler.js

@@ -0,0 +1,23 @@
+// Allows the toolbar to register keyboard events.
+// @packageDocumentation
+import BaseTool from './BaseTool';
+export default class ToolbarShortcutHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.listeners = new Set([]);
+    }
+    registerListener(listener) {
+        this.listeners.add(listener);
+    }
+    removeListener(listener) {
+        this.listeners.delete(listener);
+    }
+    onKeyPress(event) {
+        for (const listener of this.listeners) {
+            if (listener(event)) {
+                return true;
+            }
+        }
+        return false;
+    }
+}

package/dist/src/tools/lib.d.ts

@@ -12,3 +12,4 @@ export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/src/tools/lib.js

@@ -12,3 +12,4 @@ export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/src/types.d.ts

@@ -34,12 +34,14 @@ export interface WheelEvt {
 export interface KeyPressEvent {
     readonly kind: InputEvtType.KeyPressEvent;
     readonly key: string;
-    readonly ctrlKey: boolean;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
 }
 export interface KeyUpEvent {
     readonly kind: InputEvtType.KeyUpEvent;
     readonly key: string;
-    readonly ctrlKey: boolean;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
 }
 export interface CopyEvent {
     readonly kind: InputEvtType.CopyEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.4.1",
+	"version": "0.5.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.ts

@@ -586,6 +586,7 @@ export class Editor {
 				kind: InputEvtType.KeyPressEvent,
 				key: evt.key,
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			})) {
 				evt.preventDefault();
 			} else if (evt.key === 'Escape') {
@@ -598,6 +599,7 @@ export class Editor {
 				kind: InputEvtType.KeyUpEvent,
 				key: evt.key,
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			})) {
 				evt.preventDefault();
 			}
@@ -783,12 +785,14 @@ export class Editor {
 	public sendKeyboardEvent(
 		eventType: InputEvtType.KeyPressEvent|InputEvtType.KeyUpEvent,
 		key: string,
-		ctrlKey: boolean = false
+		ctrlKey: boolean = false,
+		altKey: boolean = false,
 	) {
 		this.toolController.dispatchInputEvent({
 			kind: eventType,
 			key,
-			ctrlKey
+			ctrlKey,
+			altKey,
 		});
 	}
 

package/src/components/builders/FreehandLineBuilder.ts

@@ -426,7 +426,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		let exitingVec = this.computeExitingVec();
 
 		// Find the intersection between the entering vector and the exiting vector
-		const maxRelativeLength = 3;
+		const maxRelativeLength = 2;
 		const segmentStart = this.buffer[0];
 		const segmentEnd = newPoint.pos;
 		const startEndDist = segmentEnd.minus(segmentStart).magnitude();

package/src/rendering/renderers/SVGRenderer.ts

@@ -88,7 +88,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	public drawPath(pathSpec: RenderablePathSpec) {
 		const style = pathSpec.style;
-		const path = Path.fromRenderable(pathSpec);
+		const path = Path.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
 
 		// Try to extend the previous path, if possible
 		if (!style.fill.eq(this.lastPathStyle?.fill) || this.lastPathString.length === 0) {

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,5 +1,6 @@
 import Editor from '../../Editor';
-import { EditorEventType, InputEvtType } from '../../types';
+import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
+import { EditorEventType, InputEvtType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
@@ -33,6 +34,14 @@ export default abstract class BaseWidget {
 		this.label = document.createElement('label');
 		this.button.setAttribute('role', 'button');
 		this.button.tabIndex = 0;
+
+		const toolbarShortcutHandlers = this.editor.toolController.getMatchingTools(ToolbarShortcutHandler);
+
+		// If the onKeyPress function has been extended and the editor is configured to send keypress events to
+		// toolbar widgets,
+		if (toolbarShortcutHandlers.length > 0 && this.onKeyPress !== BaseWidget.prototype.onKeyPress) {
+			toolbarShortcutHandlers[0].registerListener(event => this.onKeyPress(event));
+		}
 	}
 
 	protected abstract getTitle(): string;
@@ -70,6 +79,7 @@ export default abstract class BaseWidget {
 					kind: InputEvtType.KeyPressEvent,
 					key: evt.key,
 					ctrlKey: evt.ctrlKey,
+					altKey: evt.altKey,
 				});
 			}
 		};
@@ -83,6 +93,7 @@ export default abstract class BaseWidget {
 				kind: InputEvtType.KeyUpEvent,
 				key: evt.key,
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			});
 		};
 
@@ -93,6 +104,13 @@ export default abstract class BaseWidget {
 		};
 	}
 
+	// Add a listener that is triggered when a key is pressed.
+	// Listeners will fire regardless of whether this widget is selected and require that
+	// {@link lib!Editor.toolController} to have an enabled {@link lib!ToolbarShortcutHandler} tool.
+	protected onKeyPress(_event: KeyPressEvent): boolean {
+		return false;
+	}
+
 	protected abstract handleClick(): void;
 
 	protected get hasDropdown() {

package/src/toolbar/widgets/PenToolWidget.ts

@@ -5,7 +5,7 @@ import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../
 import { ComponentBuilderFactory } from '../../components/builders/types';
 import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
-import { EditorEventType } from '../../types';
+import { EditorEventType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeIconFromFactory, makePenIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
@@ -165,4 +165,21 @@ export default class PenToolWidget extends BaseToolWidget {
 		dropdown.replaceChildren(container);
 		return true;
 	}
+
+	protected onKeyPress(event: KeyPressEvent): boolean {
+		if (!this.isSelected()) {
+			return false;
+		}
+
+		// Map alt+0-9 to different pen types.
+		if (/^[0-9]$/.exec(event.key) && event.ctrlKey) {
+			const penTypeIdx = parseInt(event.key) - 1;
+			if (penTypeIdx >= 0 && penTypeIdx < this.penTypes.length) {
+				this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+				return true;
+			}
+		}
+
+		return false;
+	}
 }

package/src/tools/SelectionTool/SelectionTool.css

@@ -1,7 +1,7 @@
 
 .selection-tool-selection-background {
     background-color: var(--secondary-background-color);
-    opacity: 0.8;
+    opacity: 0.5;
     overflow: visible;
 }
 

package/src/tools/ToolController.ts

@@ -13,6 +13,7 @@ import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
+import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 
 export default class ToolController {
 	private tools: BaseTool[];
@@ -45,6 +46,7 @@ export default class ToolController {
 			...primaryTools,
 			keyboardPanZoomTool,
 			new UndoRedoShortcut(editor),
+			new ToolbarShortcutHandler(editor),
 			new ToolSwitcherShortcut(editor),
 			new PasteHandler(editor),
 		];

package/src/tools/ToolbarShortcutHandler.ts

@@ -0,0 +1,34 @@
+// Allows the toolbar to register keyboard events.
+// @packageDocumentation
+
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+
+// Returns true if the event was handled, false otherwise.
+type KeyPressListener = (event: KeyPressEvent)=>boolean;
+
+export default class ToolbarShortcutHandler extends BaseTool {
+	private listeners: Set<KeyPressListener> = new Set([]);
+	public constructor(editor: Editor) {
+		super(editor.notifier, editor.localization.changeTool);
+	}
+
+	public registerListener(listener: KeyPressListener) {
+		this.listeners.add(listener);
+	}
+
+	public removeListener(listener: KeyPressListener) {
+		this.listeners.delete(listener);
+	}
+	
+	public onKeyPress(event: KeyPressEvent): boolean {
+		for (const listener of this.listeners) {
+			if (listener(event)) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+}

package/src/tools/UndoRedoShortcut.test.ts

@@ -19,6 +19,7 @@ describe('UndoRedoShortcut', () => {
 		editor.toolController.dispatchInputEvent({
 			kind: InputEvtType.KeyPressEvent,
 			ctrlKey: true,
+			altKey: false,
 			key: 'z',
 		});
 		
@@ -35,6 +36,7 @@ describe('UndoRedoShortcut', () => {
 		editor.toolController.dispatchInputEvent({
 			kind: InputEvtType.KeyPressEvent,
 			ctrlKey: true,
+			altKey: false,
 			key: 'z',
 		});
 
@@ -44,6 +46,7 @@ describe('UndoRedoShortcut', () => {
 		editor.toolController.dispatchInputEvent({
 			kind: InputEvtType.KeyPressEvent,
 			ctrlKey: true,
+			altKey: false,
 			key: 'Z',
 		});
 

package/src/tools/lib.ts

@@ -17,3 +17,4 @@ export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
 
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/src/types.ts

@@ -52,14 +52,25 @@ export interface WheelEvt {
 
 export interface KeyPressEvent {
 	readonly kind: InputEvtType.KeyPressEvent;
+
+	// key, as given by an HTML `KeyboardEvent`
 	readonly key: string;
-	readonly ctrlKey: boolean;
+
+	// If `ctrlKey` is undefined, that is equivalent to `ctrlKey = false`.
+	readonly ctrlKey: boolean|undefined;
+
+	// If falsey, the `alt` key is not pressed.
+	readonly altKey: boolean|undefined;
 }
 
 export interface KeyUpEvent {
 	readonly kind: InputEvtType.KeyUpEvent;
 	readonly key: string;
-	readonly ctrlKey: boolean;
+
+	// As in `KeyPressEvent, if `ctrlKey` is undefined, that is equivalent to
+	// `ctrlKey = false`.
+	readonly ctrlKey: boolean|undefined;
+	readonly altKey: boolean|undefined;
 }
 
 export interface CopyEvent {
@@ -101,12 +112,6 @@ export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 
 
-
-
-
-
-
-
 export enum EditorEventType {
 	ToolEnabled,
 	ToolDisabled,