js-draw 0.3.2 → 0.4.1

package/src/testing/loadExpectExtensions.ts

@@ -22,19 +22,4 @@ export const loadExpectExtensions = () => {
 	});
 };
 
-// Type declarations for custom matchers
-export interface CustomMatchers<R = unknown> {
-	objEq(expected: {
-		eq: (other: any, ...args: any)=> boolean;
-	}, ...opts: any): R;
-}
-
-declare global {
-	export namespace jest {
-		interface Expect extends CustomMatchers {}
-		interface Matchers<R> extends CustomMatchers<R> {}
-		interface AsyncAsymmetricMatchers extends CustomMatchers {}
-	}
-}
-
 export default loadExpectExtensions;

package/src/toolbar/HTMLToolbar.ts

@@ -3,19 +3,20 @@ import { EditorEventType } from '../types';
 
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
-import SelectionTool from '../tools/SelectionTool';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import { makeRedoIcon, makeUndoIcon } from './icons';
-import PanZoom from '../tools/PanZoom';
+import SelectionTool from '../tools/SelectionTool/SelectionTool';
+import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
+import EraserTool from '../tools/Eraser';
+import PenTool from '../tools/Pen';
 import PenToolWidget from './widgets/PenToolWidget';
 import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
-import { EraserTool, PenTool } from '../tools/lib';
 
 export const toolbarCSSPrefix = 'toolbar-';
 
@@ -200,7 +201,7 @@ export default class HTMLToolbar {
 			this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		const panZoomTool = toolController.getMatchingTools(PanZoom)[0];
+		const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
 		if (panZoomTool) {
 			this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
 		}

package/src/toolbar/toolbar.css

@@ -34,7 +34,8 @@
 }
 
 .toolbar-button.disabled {
-	filter: opacity(0.8) saturate(0.1);
+	filter: opacity(0.5) sepia(0.2);
+	cursor: unset;
 }
 
 .toolbar-button, .toolbar-root button {
@@ -75,7 +76,7 @@
 	width: 6em;
 }
 
-.toolbar-button:hover, .toolbar-root button:not(:disabled):hover {
+.toolbar-button:not(.disabled):hover, .toolbar-root button:not(:disabled):hover {
 	box-shadow: 0px 2px 4px var(--primary-shadow-color);
 }
 

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import SelectionTool from '../../tools/SelectionTool';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { EditorEventType } from '../../types';
 import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';

package/src/tools/PasteHandler.ts

@@ -11,11 +11,12 @@ import { PasteEvent } from '../types';
 import { Mat33, Rect2, Vec2 } from '../math/lib';
 import BaseTool from './BaseTool';
 import EditorImage from '../EditorImage';
-import SelectionTool from './SelectionTool';
+import SelectionTool from './SelectionTool/SelectionTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
 import { TextStyle } from '../components/Text';
 import ImageComponent from '../components/ImageComponent';
+import Viewport from '../Viewport';
 
 // { @inheritDoc PasteHandler! }
 export default class PasteHandler extends BaseTool {
@@ -67,6 +68,8 @@ export default class PasteHandler extends BaseTool {
 		}
 		scaleRatio *= 2 / 3;
 
+		scaleRatio = Viewport.roundScaleRatio(scaleRatio);
+
 		const transfm = Mat33.translation(
 			visibleRect.center.minus(bbox.center)
 		).rightMul(

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

@@ -171,7 +171,7 @@ export default class Pen extends BaseTool {
 		}
 
 		if (newThickness !== undefined) {
-			newThickness = Math.min(Math.max(1, newThickness), 128);
+			newThickness = Math.min(Math.max(1, newThickness), 256);
 			this.setThickness(newThickness);
 			return true;
 		}