js-draw 0.1.5 → 0.1.8

package/src/toolbar/widgets/TextToolWidget.ts

@@ -0,0 +1,90 @@
+import Editor from '../../Editor';
+import TextTool from '../../tools/TextTool';
+import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
+import { makeTextIcon } from '../icons';
+import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
+import BaseToolWidget from './BaseToolWidget';
+
+export default class TextToolWidget extends BaseToolWidget {
+	private updateDropdownInputs: (()=>void)|null = null;
+	public constructor(editor: Editor, private tool: TextTool, localization: ToolbarLocalization) {
+		super(editor, tool, localization);
+
+		editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+			if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+				this.updateIcon();
+				this.updateDropdownInputs?.();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.targetTool.description;
+	}
+
+	protected createIcon(): Element {
+		const textStyle = this.tool.getTextStyle();
+		return makeTextIcon(textStyle);
+	}
+
+	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, colorInputContainer ] = makeColorInput(this.editor, color => {
+			this.tool.setColor(color);
+		});
+		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.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);
+		};
+
+		colorRow.appendChild(colorLabel);
+		colorRow.appendChild(colorInputContainer);
+
+		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.replaceChildren(colorRow, fontRow);
+		return true;
+	}
+}

package/src/tools/Pen.ts

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

package/src/tools/PipetteTool.ts

@@ -0,0 +1,56 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+
+type ColorListener = (color: Color4|null)=>void;
+
+export default class PipetteTool extends BaseTool {
+	public kind: ToolType = ToolType.Pipette;
+
+	private colorPreviewListener: ColorListener|null = null;
+	private colorSelectListener: ColorListener|null = null;
+
+	public constructor(
+		private editor: Editor,
+		description: string,
+	) {
+		super(editor.notifier, description);
+	}
+
+	public setColorListener(
+		colorPreviewListener: ColorListener,
+
+		// Called when the gesture ends -- when the user has selected a color.
+		colorSelectListener: ColorListener,
+	) {
+		this.colorPreviewListener = colorPreviewListener;
+		this.colorSelectListener = colorSelectListener;
+	}
+
+	public clearColorListener() {
+		this.colorPreviewListener = null;
+		this.colorSelectListener = null;
+	}
+
+	public onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		if (this.colorPreviewListener && allPointers.length === 1) {
+			this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
+			return true;
+		}
+		return false;
+	}
+
+	public onPointerMove({ current }: PointerEvt): void {
+		this.colorPreviewListener?.(this.editor.display.getColorAt(current.screenPos));
+	}
+
+	public onPointerUp({ current }: PointerEvt): void {
+		this.colorSelectListener?.(this.editor.display.getColorAt(current.screenPos));
+	}
+
+	public onGestureCancel(): void {
+		this.colorSelectListener?.(null);
+	}
+}

package/src/tools/SelectionTool.test.ts

@@ -2,7 +2,6 @@
 
 import Color4 from '../Color4';
 import Stroke from '../components/Stroke';
-import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Path from '../geometry/Path';
@@ -10,19 +9,18 @@ import { Vec2 } from '../geometry/Vec2';
 import { InputEvtType } from '../types';
 import SelectionTool from './SelectionTool';
 import { ToolType } from './ToolController';
+import createEditor from '../testing/createEditor';
 
 const getSelectionTool = (editor: Editor): SelectionTool => {
 	return editor.toolController.getMatchingTools(ToolType.Selection)[0] as SelectionTool;
 };
 
-const createEditor = () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
-
 const createSquareStroke = () => {
 	const testStroke = new Stroke([
 		// A filled unit square
 		Path.fromString('M0,0 L1,0 L1,1 L0,1 Z').toRenderable({ fill: Color4.blue }),
 	]);
-	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
+	const addTestStrokeCommand = EditorImage.addElement(testStroke);
 
 	return { testStroke, addTestStrokeCommand };
 };

package/src/tools/SelectionTool.ts

@@ -1,4 +1,5 @@
 import Command from '../commands/Command';
+import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
 import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
@@ -6,6 +7,7 @@ import Mat33 from '../geometry/Mat33';
 // import Mat33 from "../geometry/Mat33";
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
+import { EditorLocalization } from '../localization';
 import { EditorEventType, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
@@ -263,32 +265,46 @@ class Selection {
 		this.region = this.region.transformedBoundingBox(inverseTransform);
 
 		// Make the commands undo-able
-		this.editor.dispatch({
-			apply: async (editor) => {
-				// Approximate the new selection
-				this.region = this.region.transformedBoundingBox(fullTransform);
-				this.boxRotation += deltaBoxRotation;
-				this.updateUI();
-
-				await editor.asyncApplyCommands(currentTransfmCommands, updateChunkSize);
-				this.recomputeRegion();
-				this.updateUI();
-			},
-			unapply: async (editor) => {
-				this.region = this.region.transformedBoundingBox(inverseTransform);
-				this.boxRotation -= deltaBoxRotation;
-				this.updateUI();
-
-				await editor.asyncUnapplyCommands(currentTransfmCommands, updateChunkSize);
-				this.recomputeRegion();
-				this.updateUI();
-			},
-
-			description(localizationTable) {
-				return localizationTable.transformedElements(currentTransfmCommands.length);
-			},
-		});
-	}
+		this.editor.dispatch(new Selection.ApplyTransformationCommand(
+			this, currentTransfmCommands, fullTransform, inverseTransform, deltaBoxRotation
+		));
+	}
+
+	private static ApplyTransformationCommand = class extends Command {
+		public constructor(
+			private selection: Selection,
+			private currentTransfmCommands: Command[],
+			private fullTransform: Mat33, private inverseTransform: Mat33,
+			private deltaBoxRotation: number,
+		) {
+			super();
+		}
+
+		public async apply(editor: Editor) {
+			// Approximate the new selection
+			this.selection.region = this.selection.region.transformedBoundingBox(this.fullTransform);
+			this.selection.boxRotation += this.deltaBoxRotation;
+			this.selection.updateUI();
+
+			await editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
+			this.selection.recomputeRegion();
+			this.selection.updateUI();
+		}
+
+		public async unapply(editor: Editor) {
+			this.selection.region = this.selection.region.transformedBoundingBox(this.inverseTransform);
+			this.selection.boxRotation -= this.deltaBoxRotation;
+			this.selection.updateUI();
+
+			await editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
+			this.selection.recomputeRegion();
+			this.selection.updateUI();
+		}
+
+		public description(localizationTable: EditorLocalization) {
+			return localizationTable.transformedElements(this.currentTransfmCommands.length);
+		}
+	};
 
 	// Preview the effects of the current transformation on the selection
 	private previewTransformCmds() {
@@ -431,6 +447,10 @@ class Selection {
 	public deleteSelectedObjects(): Command {
 		return new Erase(this.selectedElems);
 	}
+
+	public duplicateSelectedObjects(): Command {
+		return new Duplicate(this.selectedElems);
+	}
 }
 
 export default class SelectionTool extends BaseTool {
@@ -494,7 +514,7 @@ export default class SelectionTool extends BaseTool {
 			);
 
 			const selectionRect = this.selectionBox.region;
-			this.editor.viewport.zoomTo(selectionRect, false).apply(this.editor);
+			this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
 		}
 	}
 

package/src/tools/TextTool.ts

@@ -84,7 +84,7 @@ export default class TextTool extends BaseTool {
 				this.textStyle,
 			);
 
-			const action = new EditorImage.AddElementCommand(textComponent);
+			const action = EditorImage.addElement(textComponent);
 			this.editor.dispatch(action);
 		}
 	}

package/src/tools/ToolController.ts

@@ -10,14 +10,17 @@ import Color4 from '../Color4';
 import { ToolLocalization } from './localization';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
+import PipetteTool from './PipetteTool';
 
 export enum ToolType {
-	Pen,
-	Selection,
-	Eraser,
-	PanZoom,
-	Text,
-	UndoRedoShortcut,
+    Pen,
+    Selection,
+    Eraser,
+    PanZoom,
+    Text,
+    UndoRedoShortcut,
+    Pipette,
+    Other,
 }
 
 export default class ToolController {
@@ -42,6 +45,7 @@ export default class ToolController {
 			new TextTool(editor, localization.textTool, localization),
 		];
 		this.tools = [
+			new PipetteTool(editor, localization.pipetteTool),
 			panZoomTool,
 			...primaryTools,
 			new UndoRedoShortcut(editor),

package/src/tools/UndoRedoShortcut.test.ts

@@ -9,7 +9,7 @@ import { InputEvtType } from '../types';
 
 describe('UndoRedoShortcut', () => {
 	const testStroke = new Stroke([Path.fromString('M0,0L10,10').toRenderable({ fill: Color4.red })]);
-	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
+	const addTestStrokeCommand = EditorImage.addElement(testStroke);
 
 	it('ctrl+z should undo', () => {
 		const editor = createEditor();

package/src/tools/localization.ts

@@ -1,12 +1,14 @@
 
 export interface ToolLocalization {
-	rightClickDragPanTool: string;
     penTool: (penId: number)=>string;
     selectionTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
     undoRedoTool: string;
+	pipetteTool: string;
+	rightClickDragPanTool: string;
+
 	textTool: string;
 	enterTextToInsert: string;
 
@@ -18,10 +20,11 @@ export const defaultToolLocalization: ToolLocalization = {
 	penTool: (penId) => `Pen ${penId}`,
 	selectionTool: 'Selection',
 	eraserTool: 'Eraser',
-	touchPanTool: 'Touch Panning',
-	twoFingerPanZoomTool: 'Panning and Zooming',
+	touchPanTool: 'Touch panning',
+	twoFingerPanZoomTool: 'Panning and zooming',
 	undoRedoTool: 'Undo/Redo',
 	rightClickDragPanTool: 'Right-click drag',
+	pipetteTool: 'Pick color from screen',
 
 	textTool: 'Text',
 	enterTextToInsert: 'Text to insert',

package/src/types.ts

@@ -77,6 +77,8 @@ export type InputEvt = KeyPressEvent | WheelEvt | GestureCancelEvt | PointerEvt;
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 
 
+
+
 export enum EditorEventType {
 	ToolEnabled,
 	ToolDisabled,
@@ -86,6 +88,7 @@ export enum EditorEventType {
 	ViewportChanged,
 	DisplayResized,
 	ColorPickerToggled,
+	ColorPickerColorSelected
 }
 
 type EditorToolEventType = EditorEventType.ToolEnabled
@@ -124,7 +127,15 @@ export interface ColorPickerToggled {
 	readonly open: boolean;
 }
 
-export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled;
+export interface ColorPickerColorSelected {
+	readonly kind: EditorEventType.ColorPickerColorSelected;
+	readonly color: Color4;
+}
+
+export type EditorEventDataType = EditorToolEvent | EditorObjectEvent
+	| EditorViewportChangedEvent | DisplayResizedEvent
+	| EditorUndoStackUpdated
+	| ColorPickerToggled| ColorPickerColorSelected;
 
 
 // Returns a Promise to indicate that the event source should pause until the Promise resolves.