js-draw 0.1.1 → 0.1.4

package/src/toolbar/icons.ts

@@ -0,0 +1,227 @@
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
+import EventDispatcher from '../EventDispatcher';
+import { Vec2 } from '../geometry/Vec2';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import Pen from '../tools/Pen';
+import { StrokeDataPoint } from '../types';
+import Viewport from '../Viewport';
+
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const primaryForegroundFill = `
+	style='fill: var(--primary-foreground-color);'
+`;
+const primaryForegroundStrokeFill = `
+	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+`;
+
+export const makeUndoIcon = () => {
+	return makeRedoIcon(true);
+};
+
+export const makeRedoIcon = (mirror: boolean = false) => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.innerHTML = `
+		<style>
+			.toolbar-svg-undo-redo-icon {
+				stroke: var(--primary-foreground-color);
+				stroke-width: 12;
+				stroke-linejoin: round;
+				stroke-linecap: round;
+				fill: none;
+
+				transform-origin: center;
+			}
+		</style>
+		<path
+			d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
+			class='toolbar-svg-undo-redo-icon'
+			style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeDropdownIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.innerHTML = `
+	<g>
+		<path
+			d='M5,10 L50,90 L95,10 Z'
+			${primaryForegroundFill}
+		/>
+	</g>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeEraserIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+
+	// Draw an eraser-like shape
+	icon.innerHTML = `
+	<g>
+		<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
+		<rect
+			x=10 y=10 width=80 height=50
+			${primaryForegroundFill}
+		/>
+	</g>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeSelectionIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+
+	// Draw a cursor-like shape
+	icon.innerHTML = `
+	<g>
+		<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
+		<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
+	</g>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+
+	return icon;
+};
+
+export const makeHandToolIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+
+	// Draw a cursor-like shape
+	icon.innerHTML = `
+	<g>
+		<path d='
+			m 10,60
+			  5,30
+			H 90
+			V 30
+			C 90,20 75,20 75,30
+			V 60
+			  20
+			C 75,10 60,10 60,20
+			V 60
+			  15
+			C 60,5 45,5 45,15
+			V 60
+			  25
+			C 45,15 30,15 30,25
+			V 60
+			  75
+			L 25,60
+			C 20,45 10,50 10,60 
+			Z'
+			
+			fill='none'
+			style='
+				stroke: var(--primary-foreground-color);
+				stroke-width: 2;
+			'
+		/>
+	</g>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeTextIcon = (textStyle: TextStyle) => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('viewBox', '0 0 100 100');
+
+	const textNode = document.createElementNS(svgNamespace, 'text');
+	textNode.appendChild(document.createTextNode('T'));
+
+	textNode.style.fontFamily = textStyle.fontFamily;
+	textNode.style.fontWeight = textStyle.fontWeight ?? '';
+	textNode.style.fontVariant = textStyle.fontVariant ?? '';
+	textNode.style.fill = textStyle.renderingStyle.fill.toHexString();
+
+	textNode.style.textAnchor = 'middle';
+	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;
+};
+
+export const makePenIcon = (tipThickness: number, color: string) => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('viewBox', '0 0 100 100');
+
+	const halfThickness = tipThickness / 2;
+
+	// Draw a pen-like shape
+	const primaryStrokeTipPath = `M14,63 L${50 - halfThickness},95 L${50 + halfThickness},90 L88,60 Z`;
+	const backgroundStrokeTipPath = `M14,63 L${50 - halfThickness},85 L${50 + halfThickness},83 L88,60 Z`;
+	icon.innerHTML = `
+	<defs>
+		<pattern
+			id='checkerboard'
+			viewBox='0,0,10,10'
+			width='20%'
+			height='20%'
+			patternUnits='userSpaceOnUse'
+		>
+			<rect x=0 y=0 width=10 height=10 fill='white'/>
+			<rect x=0 y=0 width=5 height=5 fill='gray'/>
+			<rect x=5 y=5 width=5 height=5 fill='gray'/>
+		</pattern>
+	</defs>
+	<g>
+		<!-- Pen grip -->
+		<path
+			d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
+			${primaryForegroundStrokeFill}
+		/>
+	</g>
+	<g>
+		<!-- Checkerboard background for slightly transparent pens -->
+		<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
+
+		<!-- Actual pen tip -->
+		<path
+			d='${primaryStrokeTipPath}'
+			fill='${color}'
+			stroke='${color}'
+		/>
+	</g>
+	`;
+	return icon;
+};
+
+export const makeIconFromFactory = (pen: Pen, factory: ComponentBuilderFactory) => {
+	const toolThickness = pen.getThickness();
+
+	const nowTime = (new Date()).getTime();
+	const startPoint: StrokeDataPoint = {
+		pos: Vec2.of(10, 10),
+		width: toolThickness / 5,
+		color: pen.getColor(),
+		time: nowTime - 100,
+	};
+	const endPoint: StrokeDataPoint = {
+		pos: Vec2.of(90, 90),
+		width: toolThickness / 5,
+		color: pen.getColor(),
+		time: nowTime,
+	};
+
+	const viewport = new Viewport(new EventDispatcher());
+	const builder = factory(startPoint, viewport);
+	builder.addPoint(endPoint);
+
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('viewBox', '0 0 100 100');
+	viewport.updateScreenSize(Vec2.of(100, 100));
+
+	const renderer = new SVGRenderer(icon, viewport);
+	builder.preview(renderer);
+
+	return icon;
+};

package/src/toolbar/localization.ts

@@ -1,6 +1,9 @@
 
 
 export interface ToolbarLocalization {
+	fontLabel: string;
+	anyDevicePanning: string;
+	touchPanning: string;
 	outlinedRectanglePen: string;
 	filledRectanglePen: string;
 	linePen: string;
@@ -11,7 +14,7 @@ export interface ToolbarLocalization {
 	pen: string;
 	eraser: string;
 	select: string;
-	touchDrawing: string;
+	handTool: string;
 	thicknessLabel: string;
 	resizeImageToSelection: string;
 	deleteSelection: string;
@@ -20,21 +23,26 @@ export interface ToolbarLocalization {
 
 	dropdownShown: (toolName: string)=>string;
 	dropdownHidden: (toolName: string)=>string;
+	zoomLevel: (zoomPercentage: number)=> string;
 }
 
 export const defaultToolbarLocalization: ToolbarLocalization = {
 	pen: 'Pen',
 	eraser: 'Eraser',
 	select: 'Select',
-	touchDrawing: 'Touch Drawing',
+	handTool: 'Pan',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
+	fontLabel: 'Font: ',
 	resizeImageToSelection: 'Resize image to selection',
 	deleteSelection: 'Delete selection',
 	undo: 'Undo',
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',
 
+	touchPanning: 'Touchscreen panning',
+	anyDevicePanning: 'Any device panning',
+
 	freehandPen: 'Freehand',
 	arrowPen: 'Arrow',
 	linePen: 'Line',
@@ -43,4 +51,5 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,
 };

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;
 }
 
@@ -32,6 +35,7 @@
 
     min-width: 40px;
     max-width: 70px;
+    width: min-content;
     font-size: 11pt;
 
     cursor: pointer;
@@ -40,17 +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);
-}
-
-.toolbar-root button {
-    height: auto;
+    box-shadow: 0px 2px 4px var(--primary-shadow-color);
 }
 
 .toolbar-root button:disabled {
@@ -58,7 +58,7 @@
     filter: opacity(0.5);
 }
 
-.toolbar-button .toolbar-icon {
+.toolbar-root .toolbar-icon {
     flex-shrink: 1;
     min-width: 30px;
 }
@@ -68,11 +68,11 @@
     color: var(--secondary-foreground-color);
 }
 
-.toolbar-toolContainer:not(.selected) .toolbar-showHideDropdownIcon {
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) .toolbar-showHideDropdownIcon {
     display: none;
 }
 
-.toolbar-toolContainer.selected .toolbar-showHideDropdownIcon {
+.toolbar-toolContainer .toolbar-showHideDropdownIcon {
     height: 10px;
     transition: transform 0.5s ease;
 }
@@ -81,7 +81,8 @@
     transform: rotate(180deg);
 }
 
-.toolbar-dropdown.hidden, .toolbar-toolContainer:not(.selected) > .toolbar-dropdown {
+.toolbar-dropdown.hidden,
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {
     display: none;
 }
 
@@ -92,12 +93,13 @@
     /* 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 {
     display: flex;
     flex-direction: row;
+    justify-content: center;
 }
 
 .toolbar-closeColorPickerOverlay {
@@ -120,3 +122,17 @@
     margin-left: 0;
     margin-right: 0;
 }
+
+.toolbar-root .toolbar-zoomLevelEditor {
+    display: flex;
+    flex-direction: row;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {
+    flex-grow: 1;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor button {
+    width: min-content;
+    height: min-content;
+}

package/src/toolbar/types.ts

@@ -2,3 +2,8 @@ export enum ToolbarButtonType {
 	ToggleButton,
 	ActionButton,
 }
+
+export interface ActionButtonIcon {
+	icon: Element;
+	label: string;
+}

package/src/tools/PanZoom.ts

@@ -4,7 +4,7 @@ import Mat33 from '../geometry/Mat33';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import Vec3 from '../geometry/Vec3';
 import Pointer, { PointerDevice } from '../Pointer';
-import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import { EditorEventType, KeyPressEvent, PointerEvt, WheelEvt } from '../types';
 import { Viewport } from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
@@ -17,18 +17,14 @@ interface PinchData {
 }
 
 export enum PanZoomMode {
-	// Handle one-pointer gestures (touchscreen only unless AnyDevice is set)
-	OneFingerGestures = 0x1,
-
-	// Handle two-pointer gestures (touchscreen only unless AnyDevice is set)
-	TwoFingerGestures = 0x1 << 1,
-
-	// / Handle gestures from any device, rather than just touch
-	AnyDevice = 0x1 << 2,
+	OneFingerTouchGestures = 0x1,
+	TwoFingerTouchGestures = 0x1 << 1,
+	RightClickDrags = 0x1 << 2,
+	SinglePointerGestures = 0x1 << 3,
 }
 
 export default class PanZoom extends BaseTool {
-	public readonly kind: ToolType.PanZoom|ToolType.TouchPanZoom = ToolType.PanZoom;
+	public readonly kind: ToolType.PanZoom = ToolType.PanZoom;
 	private transform: Viewport.ViewportTransform|null = null;
 
 	private lastAngle: number;
@@ -37,10 +33,6 @@ export default class PanZoom extends BaseTool {
 
 	public constructor(private editor: Editor, private mode: PanZoomMode, description: string) {
 		super(editor.notifier, description);
-
-		if (mode === PanZoomMode.OneFingerGestures) {
-			this.kind = ToolType.TouchPanZoom;
-		}
 	}
 
 	// Returns information about the pointers in a gesture
@@ -54,25 +46,28 @@ export default class PanZoom extends BaseTool {
 		return { canvasCenter, screenCenter, angle, dist };
 	}
 
-	private pointersHaveCorrectDeviceType(pointers: Pointer[]) {
-		return this.mode & PanZoomMode.AnyDevice || pointers.every(
-			pointer => pointer.device === PointerDevice.Touch
-		);
+	private allPointersAreOfType(pointers: Pointer[], kind: PointerDevice) {
+		return pointers.every(pointer => pointer.device === kind);
 	}
 
-	public onPointerDown({ allPointers }: PointerEvt): boolean {
+	public onPointerDown({ allPointers: pointers }: PointerEvt): boolean {
 		let handlingGesture = false;
 
-		if (!this.pointersHaveCorrectDeviceType(allPointers)) {
-			handlingGesture = false;
-		} else if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
-			const { screenCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+		const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
+		const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
+
+		if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
+			const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
 			this.lastAngle = angle;
 			this.lastDist = dist;
 			this.lastScreenCenter = screenCenter;
 			handlingGesture = true;
-		} else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
-			this.lastScreenCenter = allPointers[0].screenPos;
+		} else if (pointers.length === 1 && (
+			(this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
+			|| (isRightClick && this.mode & PanZoomMode.RightClickDrags)
+			|| (this.mode & PanZoomMode.SinglePointerGestures)
+		)) {
+			this.lastScreenCenter = pointers[0].screenPos;
 			handlingGesture = true;
 		}
 
@@ -122,9 +117,9 @@ export default class PanZoom extends BaseTool {
 		this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
 
 		const lastTransform = this.transform;
-		if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+		if (allPointers.length === 2) {
 			this.handleTwoFingerMove(allPointers);
-		} else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+		} else if (allPointers.length === 1) {
 			this.handleOneFingerMove(allPointers[0]);
 		}
 		lastTransform.unapply(this.editor);
@@ -253,4 +248,19 @@ export default class PanZoom extends BaseTool {
 
 		return true;
 	}
+
+	public setMode(mode: PanZoomMode) {
+		if (mode !== this.mode) {
+			this.mode = mode;
+
+			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+				kind: EditorEventType.ToolUpdated,
+				tool: this,
+			});
+		}
+	}
+
+	public getMode(): PanZoomMode {
+		return this.mode;
+	}
 }

package/src/tools/Pen.ts

@@ -91,9 +91,13 @@ export default class Pen extends BaseTool {
 			const stroke = this.builder.build();
 			this.previewStroke();
 
-			const canFlatten = true;
-			const action = new EditorImage.AddElementCommand(stroke, canFlatten);
-			this.editor.dispatch(action);
+			if (stroke.getBBox().area > 0) {
+				const canFlatten = true;
+				const action = new EditorImage.AddElementCommand(stroke, canFlatten);
+				this.editor.dispatch(action);
+			} else {
+				console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+			}
 		}
 		this.builder = null;
 		this.editor.clearWetInk();

package/src/tools/SelectionTool.ts

@@ -494,7 +494,7 @@ export default class SelectionTool extends BaseTool {
 			);
 
 			const selectionRect = this.selectionBox.region;
-			this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
+			this.editor.viewport.zoomTo(selectionRect, false).apply(this.editor);
 		}
 	}