js-draw - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

CHANGELOG.md

@@ -0,1 +1,9 @@
+# 0.5.0
+ * Increase contrast between selection box/background
+ * Keyboard shortcuts
+   * `Ctrl+1` through `Ctrl+9`: Switch pen drawing mode.
+     * For this to work, the `ToolbarShortcutHandler` must be loaded (and the toolbar must also be loaded).
+ * Bug fixes
+   * Fix text shifting away from strokes on paste.
+
 # 0.4.1
@@ -2,0 +10,0 @@ * Bug fixes

dist/src/components/builders/FreehandLineBuilder.js

@@ -323,3 +323,3 @@ import { Bezier } from 'bezier-js';
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 3;
+        const maxRelativeLength = 2;
         const segmentStart = this.buffer[0];
@@ -326,0 +326,0 @@ const segmentEnd = newPoint.pos;

dist/src/Editor.d.ts

@@ -196,3 +196,3 @@ /**
     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;
@@ -199,0 +199,0 @@ toSVG(): SVGElement;

dist/src/Editor.js

@@ -444,2 +444,3 @@ /**
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             })) {
@@ -457,2 +458,3 @@ evt.preventDefault();
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             })) {
@@ -603,7 +605,8 @@ evt.preventDefault();
     // 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,
         });
@@ -610,0 +613,0 @@ }

dist/src/rendering/renderers/SVGRenderer.js

@@ -75,3 +75,3 @@ import Mat33 from '../../math/Mat33';
         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
@@ -78,0 +78,0 @@ if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {

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

 import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
@@ -21,2 +22,3 @@ export default abstract class BaseWidget {
     protected setupActionBtnClickListener(button: HTMLElement): void;
+    protected onKeyPress(_event: KeyPressEvent): boolean;
     protected abstract handleClick(): void;
@@ -23,0 +25,0 @@ protected get hasDropdown(): boolean;

dist/src/toolbar/widgets/BaseWidget.js

@@ -13,2 +13,3 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
 var _BaseWidget_hasDropdown;
+import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
 import { EditorEventType, InputEvtType } from '../../types';
@@ -37,2 +38,8 @@ import { toolbarCSSPrefix } from '../HTMLToolbar';
         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));
+        }
     }
@@ -67,2 +74,3 @@ // Add content to the widget's associated dropdown menu.
                     ctrlKey: evt.ctrlKey,
+                    altKey: evt.altKey,
                 });
@@ -79,2 +87,3 @@ }
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             });
@@ -88,2 +97,8 @@ };
     }
+    // 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() {
@@ -90,0 +105,0 @@ return __classPrivateFieldGet(this, _BaseWidget_hasDropdown, "f");

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

 import { ComponentBuilderFactory } from '../../components/builders/types';
 import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
+import { KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
@@ -19,2 +20,3 @@ import BaseToolWidget from './BaseToolWidget';
     protected fillDropdown(dropdown: HTMLElement): boolean;
+    protected onKeyPress(event: KeyPressEvent): boolean;
 }

dist/src/toolbar/widgets/PenToolWidget.js

@@ -130,3 +130,17 @@ import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
     }
+    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;

dist/src/tools/lib.d.ts

@@ -15,1 +15,2 @@ /**
 export { default as PasteHandler } from './PasteHandler';
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

dist/src/tools/lib.js

@@ -15,1 +15,2 @@ /**
 export { default as PasteHandler } from './PasteHandler';
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

dist/src/tools/ToolController.js

@@ -13,2 +13,3 @@ import { InputEvtType, EditorEventType } from '../types';
 import PasteHandler from './PasteHandler';
+import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 export default class ToolController {
@@ -39,2 +40,3 @@ /** @internal */
             new UndoRedoShortcut(editor),
+            new ToolbarShortcutHandler(editor),
             new ToolSwitcherShortcut(editor),
@@ -41,0 +43,0 @@ new PasteHandler(editor),

dist/src/types.d.ts

@@ -37,3 +37,4 @@ import EventDispatcher from './EventDispatcher';
     readonly key: string;
-    readonly ctrlKey: boolean;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
 }
@@ -43,3 +44,4 @@ export interface KeyUpEvent {
     readonly key: string;
-    readonly ctrlKey: boolean;
+    readonly ctrlKey: boolean | undefined;
+    readonly altKey: boolean | undefined;
 }
@@ -46,0 +48,0 @@ export interface CopyEvent {

package.json

 {
 	"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. ",
@@ -5,0 +5,0 @@ "main": "./dist/src/lib.d.ts",

src/components/builders/FreehandLineBuilder.ts

@@ -429,3 +429,3 @@ import { Bezier } from 'bezier-js';
 		// Find the intersection between the entering vector and the exiting vector
-		const maxRelativeLength = 3;
+		const maxRelativeLength = 2;
 		const segmentStart = this.buffer[0];
@@ -432,0 +432,0 @@ const segmentEnd = newPoint.pos;

src/Editor.ts

@@ -589,2 +589,3 @@ /**
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			})) {
@@ -602,2 +603,3 @@ evt.preventDefault();
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			})) {
@@ -788,3 +790,4 @@ evt.preventDefault();
 		key: string,
-		ctrlKey: boolean = false
+		ctrlKey: boolean = false,
+		altKey: boolean = false,
 	) {
@@ -794,3 +797,4 @@ this.toolController.dispatchInputEvent({
 			key,
-			ctrlKey
+			ctrlKey,
+			altKey,
 		});
@@ -797,0 +801,0 @@ }

src/rendering/renderers/SVGRenderer.ts

@@ -91,3 +91,3 @@
 		const style = pathSpec.style;
-		const path = Path.fromRenderable(pathSpec);
+		const path = Path.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
 
@@ -94,0 +94,0 @@ // Try to extend the previous path, if possible

src/toolbar/widgets/BaseWidget.ts

 import Editor from '../../Editor';
-import { EditorEventType, InputEvtType } from '../../types';
+import ToolbarShortcutHandler from '../../tools/ToolbarShortcutHandler';
+import { EditorEventType, InputEvtType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
@@ -36,2 +37,10 @@ import { makeDropdownIcon } from '../icons';
 		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));
+		}
 	}
@@ -74,2 +83,3 @@
 					ctrlKey: evt.ctrlKey,
+					altKey: evt.altKey,
 				});
@@ -88,2 +98,3 @@ }
 				ctrlKey: evt.ctrlKey,
+				altKey: evt.altKey,
 			});
@@ -99,2 +110,9 @@ };
 
+	// 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;
@@ -101,0 +119,0 @@

src/toolbar/widgets/PenToolWidget.ts

@@ -8,3 +8,3 @@ import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
 import Pen from '../../tools/Pen';
-import { EditorEventType } from '../../types';
+import { EditorEventType, KeyPressEvent } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
@@ -169,2 +169,19 @@ import { makeIconFromFactory, makePenIcon } from '../icons';
 	}
+
+	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;
+	}
 }

src/tools/lib.ts

@@ -20,1 +20,2 @@
 
+export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

src/tools/ToolController.ts

@@ -16,2 +16,3 @@ import { InputEvtType, InputEvt, EditorEventType } from '../types';
 import PasteHandler from './PasteHandler';
+import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 
@@ -49,2 +50,3 @@ export default class ToolController {
 			new UndoRedoShortcut(editor),
+			new ToolbarShortcutHandler(editor),
 			new ToolSwitcherShortcut(editor),
@@ -51,0 +53,0 @@ new PasteHandler(editor),

src/tools/UndoRedoShortcut.test.ts

@@ -22,2 +22,3 @@ /* @jest-environment jsdom */
 			ctrlKey: true,
+			altKey: false,
 			key: 'z',
@@ -39,2 +40,3 @@ });
 			ctrlKey: true,
+			altKey: false,
 			key: 'z',
@@ -49,2 +51,3 @@ });
 			ctrlKey: true,
+			altKey: false,
 			key: 'Z',
@@ -51,0 +54,0 @@ });

src/types.ts

@@ -55,4 +55,11 @@ // Types related to the image editor
 	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;
 }
@@ -63,3 +70,7 @@
 	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;
 }
@@ -106,8 +117,2 @@
 
-
-
-
-
-
-
 export enum EditorEventType {
@@ -114,0 +119,0 @@ ToolEnabled,

No alert changes

Improved metrics

Total package byte prevSize

1226036

increased by0.6%

Number of package files

355

increased by0.85%

Lines of code

26019

increased by0.58%

No dependency changes