js-draw 0.1.3 → 0.1.4

package/dist/src/Editor.d.ts

@@ -14,7 +14,7 @@ import { EditorLocalization } from './localization';
 export interface EditorSettings {
     renderingMode: RenderingMode;
     localization: Partial<EditorLocalization>;
-    wheelEventsEnabled: boolean;
+    wheelEventsEnabled: boolean | 'only-if-focused';
 }
 export declare class Editor {
     private container;
@@ -48,6 +48,7 @@ export declare class Editor {
     rerender(showImageBounds?: boolean): void;
     drawWetInk(...path: RenderablePathSpec[]): void;
     clearWetInk(): void;
+    focus(): void;
     createHTMLOverlay(overlay: HTMLElement): {
         remove: () => void;
     };

package/dist/src/Editor.js

@@ -183,13 +183,24 @@ export class Editor {
             })) {
                 evt.preventDefault();
             }
+            else if (evt.key === 'Escape') {
+                this.renderingRegion.blur();
+            }
         });
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
-            // Process wheel events if the ctrl key is down -- we do want to handle
+            // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
             // pinch-zooming.
-            if (!this.settings.wheelEventsEnabled && !evt.ctrlKey) {
-                return;
+            if (!evt.ctrlKey) {
+                if (!this.settings.wheelEventsEnabled) {
+                    return;
+                }
+                else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+                    const focusedChild = this.container.querySelector(':focus');
+                    if (!focusedChild) {
+                        return;
+                    }
+                }
             }
             if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
                 delta = delta.times(15);
@@ -297,6 +308,10 @@ export class Editor {
     clearWetInk() {
         this.display.getWetInkRenderer().clear();
     }
+    // Focuses the region used for text input
+    focus() {
+        this.renderingRegion.focus();
+    }
     createHTMLOverlay(overlay) {
         overlay.classList.add('overlay');
         this.container.appendChild(overlay);

package/dist/src/SVGLoader.js

@@ -162,7 +162,7 @@ export default class SVGLoader {
         }
         const style = {
             size: fontSize,
-            fontFamily: computedStyles.fontFamily || 'sans',
+            fontFamily: computedStyles.fontFamily || 'sans-serif',
             renderingStyle: {
                 fill: Color4.fromString(computedStyles.fill)
             },

package/dist/src/components/Text.js

@@ -11,10 +11,12 @@ export default class Text extends AbstractComponent {
     }
     static applyTextStyles(ctx, style) {
         var _a, _b;
+        // Quote the font family if necessary.
+        const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
         ctx.font = [
             ((_a = style.size) !== null && _a !== void 0 ? _a : 12) + 'px',
             (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '',
-            `"${style.fontFamily.replace(/["]/g, '\\"')}"`,
+            `${fontFamily}`,
             style.fontWeight
         ].join(' ');
         ctx.textAlign = 'left';

package/dist/src/toolbar/HTMLToolbar.js

@@ -338,25 +338,51 @@ class TextToolWidget extends ToolbarWidget {
         return makeTextIcon(textStyle);
     }
     fillDropdown(dropdown) {
+        const fontRow = document.createElement('div');
         const colorRow = document.createElement('div');
+        const fontInput = document.createElement('select');
+        const fontLabel = document.createElement('label');
         const colorInput = document.createElement('input');
         const colorLabel = document.createElement('label');
+        const fontsInInput = new Set();
+        const addFontToInput = (fontName) => {
+            const option = document.createElement('option');
+            option.value = fontName;
+            option.textContent = fontName;
+            fontInput.appendChild(option);
+            fontsInInput.add(fontName);
+        };
+        fontLabel.innerText = this.localizationTable.fontLabel;
         colorLabel.innerText = this.localizationTable.colorLabel;
         colorInput.classList.add('coloris_input');
         colorInput.type = 'button';
         colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
         colorLabel.setAttribute('for', colorInput.id);
+        addFontToInput('monospace');
+        addFontToInput('serif');
+        addFontToInput('sans-serif');
+        fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+        fontLabel.setAttribute('for', fontInput.id);
+        fontInput.onchange = () => {
+            this.tool.setFontFamily(fontInput.value);
+        };
         colorInput.oninput = () => {
             this.tool.setColor(Color4.fromString(colorInput.value));
         };
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInput);
+        fontRow.appendChild(fontLabel);
+        fontRow.appendChild(fontInput);
         this.updateDropdownInputs = () => {
             const style = this.tool.getTextStyle();
             colorInput.value = style.renderingStyle.fill.toHexString();
+            if (!fontsInInput.has(style.fontFamily)) {
+                addFontToInput(style.fontFamily);
+            }
+            fontInput.value = style.fontFamily;
         };
         this.updateDropdownInputs();
-        dropdown.appendChild(colorRow);
+        dropdown.replaceChildren(colorRow, fontRow);
         return true;
     }
 }

package/dist/src/toolbar/icons.js

@@ -125,6 +125,7 @@ export const makeTextIcon = (textStyle) => {
     textNode.setAttribute('x', '50');
     textNode.setAttribute('y', '75');
     textNode.style.fontSize = '65px';
+    textNode.style.filter = 'drop-shadow(0px 0px 10px var(--primary-shadow-color))';
     icon.appendChild(textNode);
     return icon;
 };

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

@@ -1,4 +1,5 @@
 export interface ToolbarLocalization {
+    fontLabel: string;
     anyDevicePanning: string;
     touchPanning: string;
     outlinedRectanglePen: string;

package/dist/src/toolbar/localization.js

@@ -5,6 +5,7 @@ export const defaultToolbarLocalization = {
     handTool: 'Pan',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
+    fontLabel: 'Font: ',
     resizeImageToSelection: 'Resize image to selection',
     deleteSelection: 'Delete selection',
     undo: 'Undo',

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

@@ -21,6 +21,7 @@ export default class TextTool extends BaseTool {
     private startTextInput;
     setEnabled(enabled: boolean): void;
     onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onGestureCancel(): void;
     private dispatchUpdateEvent;
     setFontFamily(fontFamily: string): void;
     setColor(color: Color4): void;

package/dist/src/tools/TextTool.js

@@ -70,6 +70,7 @@ export default class TextTool extends BaseTool {
             (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
             return;
         }
+        const viewport = this.editor.viewport;
         const textScreenPos = this.editor.viewport.canvasToScreen(this.textTargetPosition);
         this.textInputElem.type = 'text';
         this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
@@ -80,8 +81,12 @@ export default class TextTool extends BaseTool {
         this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
         this.textInputElem.style.position = 'relative';
         this.textInputElem.style.left = `${textScreenPos.x}px`;
+        this.textInputElem.style.top = `${textScreenPos.y}px`;
+        this.textInputElem.style.margin = '0';
+        const rotation = viewport.getRotationAngle();
         const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
-        this.textInputElem.style.top = `${textScreenPos.y - ascent}px`;
+        this.textInputElem.style.transform = `rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
+        this.textInputElem.style.transformOrigin = 'top left';
     }
     startTextInput(textCanvasPos, initialText) {
         this.flushInput();
@@ -96,15 +101,25 @@ export default class TextTool extends BaseTool {
             }
         };
         this.textInputElem.onblur = () => {
-            this.flushInput();
+            // Don't remove the input within the context of a blur event handler.
+            // Doing so causes errors.
+            setTimeout(() => this.flushInput(), 0);
         };
         this.textInputElem.onkeyup = (evt) => {
+            var _a;
             if (evt.key === 'Enter') {
                 this.flushInput();
+                this.editor.focus();
+            }
+            else if (evt.key === 'Escape') {
+                // Cancel input.
+                (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.remove();
+                this.textInputElem = null;
+                this.editor.focus();
             }
         };
         this.textEditOverlay.replaceChildren(this.textInputElem);
-        setTimeout(() => this.textInputElem.focus(), 100);
+        setTimeout(() => { var _a; return (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
     }
     setEnabled(enabled) {
         super.setEnabled(enabled);
@@ -123,6 +138,10 @@ export default class TextTool extends BaseTool {
         }
         return false;
     }
+    onGestureCancel() {
+        this.flushInput();
+        this.editor.focus();
+    }
     dispatchUpdateEvent() {
         this.updateTextInput();
         this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {

package/dist-test/test-dist-bundle.html

@@ -27,9 +27,16 @@
 				wheelEventsEnabled: false,
 			});
 			editor1.addToolbar();
+			editor1.loadFromSVG('<svg><text>Wheel events disabled.</text></svg>');
 
-			const editor2 = new jsdraw.Editor(document.body);
+			const editor2 = new jsdraw.Editor(document.body, {
+				wheelEventsEnabled: 'only-if-focused',
+			});
 			editor2.addToolbar();
+			editor2.loadFromSVG('<svg><text>Wheel events enabled, only if focused.</text></svg>');
+
+			const editor3 = new jsdraw.Editor(document.body);
+			editor3.addToolbar();
 		</script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "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.css

@@ -8,6 +8,7 @@
     --secondary-background-color: #faf;
     --primary-foreground-color: black;
     --secondary-foreground-color: black;
+	--primary-shadow-color: rgba(0, 0, 0, 0.5);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -17,6 +18,7 @@
 		--secondary-background-color: #607;
 		--primary-foreground-color: white;
 		--secondary-foreground-color: white;
+		--primary-shadow-color: rgba(250, 250, 250, 0.5);
 	}
 }
 

package/src/Editor.ts

@@ -29,7 +29,7 @@ export interface EditorSettings {
 	// True if touchpad/mousewheel scrolling should scroll the editor instead of the document.
 	// This does not include pinch-zoom events.
 	// Defaults to true.
-	wheelEventsEnabled: boolean;
+	wheelEventsEnabled: boolean|'only-if-focused';
 }
 
 export class Editor {
@@ -245,16 +245,26 @@ export class Editor {
 				ctrlKey: evt.ctrlKey,
 			})) {
 				evt.preventDefault();
+			} else if (evt.key === 'Escape') {
+				this.renderingRegion.blur();
 			}
 		});
 
 		this.container.addEventListener('wheel', evt => {
 			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
 
-			// Process wheel events if the ctrl key is down -- we do want to handle
+			// Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
 			// pinch-zooming.
-			if (!this.settings.wheelEventsEnabled && !evt.ctrlKey) {
-				return;
+			if (!evt.ctrlKey) {
+				if (!this.settings.wheelEventsEnabled) {
+					return;
+				} else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+					const focusedChild = this.container.querySelector(':focus');
+
+					if (!focusedChild) {
+						return;
+					}
+				}
 			}
 
 			if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
@@ -399,6 +409,11 @@ export class Editor {
 		this.display.getWetInkRenderer().clear();
 	}
 
+	// Focuses the region used for text input
+	public focus() {
+		this.renderingRegion.focus();
+	}
+
 	public createHTMLOverlay(overlay: HTMLElement) {
 		overlay.classList.add('overlay');
 		this.container.appendChild(overlay);

package/src/SVGLoader.ts

@@ -198,7 +198,7 @@ export default class SVGLoader implements ImageLoader {
 		}
 		const style: TextStyle = {
 			size: fontSize,
-			fontFamily: computedStyles.fontFamily || 'sans',
+			fontFamily: computedStyles.fontFamily || 'sans-serif',
 			renderingStyle: {
 				fill: Color4.fromString(computedStyles.fill)
 			},

package/src/components/Text.ts

@@ -23,12 +23,16 @@ export default class Text extends AbstractComponent {
 	}
 
 	public static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle) {
+		// Quote the font family if necessary.
+		const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+
 		ctx.font =	[
 			(style.size ?? 12) + 'px',
 			style.fontWeight ?? '',
-			`"${style.fontFamily.replace(/["]/g, '\\"')}"`,
+			`${fontFamily}`,
 			style.fontWeight
 		].join(' ');
+
 		ctx.textAlign = 'left';
 	}
 

package/src/toolbar/HTMLToolbar.ts

@@ -428,10 +428,25 @@ class TextToolWidget extends ToolbarWidget {
 
 	private static idCounter: number = 0;
 	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const fontRow = document.createElement('div');
 		const colorRow = document.createElement('div');
+
+		const fontInput = document.createElement('select');
+		const fontLabel = document.createElement('label');
+
 		const colorInput = document.createElement('input');
 		const colorLabel = document.createElement('label');
 
+		const fontsInInput = new Set();
+		const addFontToInput = (fontName: string) => {
+			const option = document.createElement('option');
+			option.value = fontName;
+			option.textContent = fontName;
+			fontInput.appendChild(option);
+			fontsInInput.add(fontName);
+		};
+
+		fontLabel.innerText = this.localizationTable.fontLabel;
 		colorLabel.innerText = this.localizationTable.colorLabel;
 
 		colorInput.classList.add('coloris_input');
@@ -439,6 +454,16 @@ class TextToolWidget extends ToolbarWidget {
 		colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
 		colorLabel.setAttribute('for', colorInput.id);
 
+		addFontToInput('monospace');
+		addFontToInput('serif');
+		addFontToInput('sans-serif');
+		fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+		fontLabel.setAttribute('for', fontInput.id);
+
+		fontInput.onchange = () => {
+			this.tool.setFontFamily(fontInput.value);
+		};
+
 		colorInput.oninput = () => {
 			this.tool.setColor(Color4.fromString(colorInput.value));
 		};
@@ -446,14 +471,21 @@ class TextToolWidget extends ToolbarWidget {
 		colorRow.appendChild(colorLabel);
 		colorRow.appendChild(colorInput);
 
+		fontRow.appendChild(fontLabel);
+		fontRow.appendChild(fontInput);
+
 		this.updateDropdownInputs = () => {
 			const style = this.tool.getTextStyle();
 			colorInput.value = style.renderingStyle.fill.toHexString();
+
+			if (!fontsInInput.has(style.fontFamily)) {
+				addFontToInput(style.fontFamily);
+			}
+			fontInput.value = style.fontFamily;
 		};
 		this.updateDropdownInputs();
 
-		dropdown.appendChild(colorRow);
-
+		dropdown.replaceChildren(colorRow, fontRow);
 		return true;
 	}
 }

package/src/toolbar/icons.ts

@@ -143,6 +143,7 @@ export const makeTextIcon = (textStyle: TextStyle) => {
 	textNode.setAttribute('x', '50');
 	textNode.setAttribute('y', '75');
 	textNode.style.fontSize = '65px';
+	textNode.style.filter = 'drop-shadow(0px 0px 10px var(--primary-shadow-color))';
 
 	icon.appendChild(textNode);
 

package/src/toolbar/localization.ts

@@ -1,6 +1,7 @@
 
 
 export interface ToolbarLocalization {
+	fontLabel: string;
 	anyDevicePanning: string;
 	touchPanning: string;
 	outlinedRectanglePen: string;
@@ -32,6 +33,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	handTool: 'Pan',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
+	fontLabel: 'Font: ',
 	resizeImageToSelection: 'Resize image to selection',
 	deleteSelection: 'Delete selection',
 	undo: 'Undo',

package/src/toolbar/toolbar.css

@@ -12,6 +12,9 @@
     flex-direction: row;
     justify-content: center;
 
+    /* Display above selection dialogs, etc. */
+    z-index: 1000;
+
     font-family: system-ui, -apple-system, sans-serif;
 }
 
@@ -41,13 +44,13 @@
     background-color: var(--primary-background-color);
     color: var(--primary-foreground-color);
     border: none;
-    box-shadow: 0px 0px 2px var(--primary-foreground-color);
+    box-shadow: 0px 0px 2px var(--primary-shadow-color);
 
     transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
 }
 
 .toolbar-button:hover, .toolbar-root button:not(:disabled):hover {
-    box-shadow: 0px 2px 4px var(--primary-foreground-color);
+    box-shadow: 0px 2px 4px var(--primary-shadow-color);
 }
 
 .toolbar-root button:disabled {
@@ -90,7 +93,7 @@
     /* Prevent overlap/being displayed under the undo/redo buttons */
     z-index: 2;
     background-color: var(--primary-background-color);
-    box-shadow: 0px 3px 3px var(--primary-foreground-color);
+    box-shadow: 0px 3px 3px var(--primary-shadow-color);
 }
 
 .toolbar-buttonGroup {

package/src/tools/TextTool.ts

@@ -92,6 +92,7 @@ export default class TextTool extends BaseTool {
 			return;
 		}
 
+		const viewport = this.editor.viewport;
 		const textScreenPos = this.editor.viewport.canvasToScreen(this.textTargetPosition);
 		this.textInputElem.type = 'text';
 		this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
@@ -103,8 +104,13 @@ export default class TextTool extends BaseTool {
 
 		this.textInputElem.style.position = 'relative';
 		this.textInputElem.style.left = `${textScreenPos.x}px`;
+		this.textInputElem.style.top = `${textScreenPos.y}px`;
+		this.textInputElem.style.margin = '0';
+
+		const rotation = viewport.getRotationAngle();
 		const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
-		this.textInputElem.style.top = `${textScreenPos.y - ascent}px`;
+		this.textInputElem.style.transform = `rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
+		this.textInputElem.style.transformOrigin = 'top left';
 	}
 
 	private startTextInput(textCanvasPos: Vec2, initialText: string) {
@@ -121,16 +127,24 @@ export default class TextTool extends BaseTool {
 			}
 		};
 		this.textInputElem.onblur = () => {
-			this.flushInput();
+			// Don't remove the input within the context of a blur event handler.
+			// Doing so causes errors.
+			setTimeout(() => this.flushInput(), 0);
 		};
 		this.textInputElem.onkeyup = (evt) => {
 			if (evt.key === 'Enter') {
 				this.flushInput();
+				this.editor.focus();
+			} else if (evt.key === 'Escape') {
+				// Cancel input.
+				this.textInputElem?.remove();
+				this.textInputElem = null;
+				this.editor.focus();
 			}
 		};
 
 		this.textEditOverlay.replaceChildren(this.textInputElem);
-		setTimeout(() => this.textInputElem!.focus(), 100);
+		setTimeout(() => this.textInputElem?.focus(), 0);
 	}
 
 	public setEnabled(enabled: boolean) {
@@ -156,6 +170,11 @@ export default class TextTool extends BaseTool {
 		return false;
 	}
 
+	public onGestureCancel(): void {
+		this.flushInput();
+		this.editor.focus();
+	}
+
 	private dispatchUpdateEvent() {
 		this.updateTextInput();
 		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {