js-draw 0.4.0 → 0.5.0

package/src/tools/Pen.test.ts

@@ -0,0 +1,150 @@
+
+import { Rect2 } from '../lib';
+import { Vec2 } from '../math/Vec2';
+import createEditor from '../testing/createEditor';
+import { InputEvtType } from '../types';
+
+describe('Pen', () => {
+	it('should draw horizontal lines', () => {
+		const editor = createEditor();
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		for (let i = 0; i < 10; i++) {
+			editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(i, 0));
+			jest.advanceTimersByTime(200);
+		}
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(200, 0));
+
+		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 10, 10, -10));
+		expect(elems).toHaveLength(1);
+
+		// Account for stroke width
+		const tolerableError = 8;
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(0, 0), tolerableError);
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(200, 0), tolerableError);
+	});
+
+	it('should draw vertical line', () => {
+		const editor = createEditor();
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+		for (let i = 0; i < 10; i++) {
+			editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(0, i * 20));
+			jest.advanceTimersByTime(200);
+		}
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(0, 150));
+
+		const elems = editor.image.getElementsIntersectingRegion(Rect2.unitSquare);
+		expect(elems).toHaveLength(1);
+
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(0, 0), 8); // ± 8
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(0, 175), 25); // ± 25
+	});
+
+	it('should draw vertical line with slight bend', () => {
+		const editor = createEditor();
+
+		editor.sendPenEvent(InputEvtType.PointerDownEvt, Vec2.of(417, 24)); 
+		jest.advanceTimersByTime(245);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 197));
+		jest.advanceTimersByTime(20);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 199));
+		jest.advanceTimersByTime(12);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 201));
+		jest.advanceTimersByTime(40);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 203));
+		jest.advanceTimersByTime(14);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 206));
+		jest.advanceTimersByTime(35);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 208));
+		jest.advanceTimersByTime(16);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 211));
+		jest.advanceTimersByTime(51);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 215));
+		jest.advanceTimersByTime(32);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 218));
+		jest.advanceTimersByTime(30);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 220));
+		jest.advanceTimersByTime(24);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 222));
+		jest.advanceTimersByTime(14);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 224));
+		jest.advanceTimersByTime(32);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 227));
+		jest.advanceTimersByTime(17);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 229));
+		jest.advanceTimersByTime(53);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 234));
+		jest.advanceTimersByTime(34);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 236));
+		jest.advanceTimersByTime(17);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 238));
+		jest.advanceTimersByTime(39);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 240));
+		jest.advanceTimersByTime(10);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 243));
+		jest.advanceTimersByTime(34);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 250));
+		jest.advanceTimersByTime(57);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(423, 252));
+		jest.advanceTimersByTime(8);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(422, 256));
+		jest.advanceTimersByTime(28);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(422, 258));
+		jest.advanceTimersByTime(21);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(421, 262));
+		jest.advanceTimersByTime(34);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 264));
+		jest.advanceTimersByTime(5);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 266));
+		jest.advanceTimersByTime(22);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 268));
+		jest.advanceTimersByTime(22);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 271));
+		jest.advanceTimersByTime(18);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 274));
+		jest.advanceTimersByTime(33);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 277));
+		jest.advanceTimersByTime(16);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 279));
+		jest.advanceTimersByTime(36);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 282));
+		jest.advanceTimersByTime(15);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 284));
+		jest.advanceTimersByTime(48);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 289));
+		jest.advanceTimersByTime(16);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 291));
+		jest.advanceTimersByTime(31);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 295));
+		jest.advanceTimersByTime(23);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 301));
+		jest.advanceTimersByTime(31);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 306));
+		jest.advanceTimersByTime(18);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 308));
+		jest.advanceTimersByTime(20);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 310));
+		jest.advanceTimersByTime(13);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 313));
+		jest.advanceTimersByTime(17);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 317));
+		jest.advanceTimersByTime(33);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 321));
+		jest.advanceTimersByTime(15);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 324));
+		jest.advanceTimersByTime(23);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 326));
+		jest.advanceTimersByTime(14);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(419, 329));
+		jest.advanceTimersByTime(36);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 333));
+		jest.advanceTimersByTime(8);
+		editor.sendPenEvent(InputEvtType.PointerMoveEvt, Vec2.of(420, 340));
+		editor.sendPenEvent(InputEvtType.PointerUpEvt, Vec2.of(420, 340));
+
+		const elems = editor.image.getElementsIntersectingRegion(new Rect2(0, 0, 1000, 1000));
+		expect(elems).toHaveLength(1);
+
+		expect(elems[0].getBBox().topLeft).objEq(Vec2.of(420, 24), 8); // ± 8
+		expect(elems[0].getBBox().bottomRight).objEq(Vec2.of(420, 340), 25); // ± 25
+	});
+});

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/SelectionTool/SelectionTool.ts

@@ -12,6 +12,7 @@ import Viewport from '../../Viewport';
 import BaseTool from '../BaseTool';
 import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
+import TextComponent from '../../components/Text';
 
 export const cssPrefix = 'selection-tool-';
 
@@ -272,11 +273,19 @@ export default class SelectionTool extends BaseTool {
 		const sanitize = true;
 		const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
 
+		const text: string[] = [];
 		for (const elem of selectedElems) {
 			elem.render(renderer);
+
+			if (elem instanceof TextComponent) {
+				text.push(elem.getText());
+			}
 		}
 
 		event.setData('image/svg+xml', exportElem.outerHTML);
+		if (text.length > 0) {
+			event.setData('text/plain', text.join('\n'));
+		}
 		return true;
 	}
 

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,

package/tsconfig.json

@@ -23,10 +23,12 @@
 		"**/node_modules",
 
 		// Files that don't need transpilation
-		"**/*.test.ts",
+		// "**/*.test.ts", <- vscode requires .test.ts files to be transpiled for other settings to apply.
 		"__mocks__/*",
 
 		// Output files
 		"./dist/**"
 	],
+
+	"files": [ "./src/testing/global.d.ts" ]
 }