js-draw 0.3.2 → 0.4.1

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -0,0 +1,284 @@
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+// @packageDocumentation
+import Mat33 from '../../math/Mat33';
+import { Vec2 } from '../../math/Vec2';
+import { EditorEventType } from '../../types';
+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-';
+// {@inheritDoc SelectionTool!}
+export default class SelectionTool extends BaseTool {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.lastEvtTarget = null;
+        this.selectionBoxHandlingEvt = false;
+        this.handleOverlay = document.createElement('div');
+        editor.createHTMLOverlay(this.handleOverlay);
+        this.handleOverlay.style.display = 'none';
+        this.handleOverlay.classList.add('handleOverlay');
+        editor.notifier.on(EditorEventType.ViewportChanged, _data => {
+            var _a;
+            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
+        });
+        this.editor.handleKeyEventsFrom(this.handleOverlay);
+        this.editor.handlePointerEventsFrom(this.handleOverlay, (eventName, htmlEvent) => {
+            if (eventName === 'pointerdown') {
+                this.lastEvtTarget = htmlEvent.target;
+            }
+            return true;
+        });
+    }
+    makeSelectionBox(selectionStartPos) {
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = new Selection(selectionStartPos, this.editor);
+        // Remove any previous selection rects
+        this.handleOverlay.replaceChildren();
+        this.selectionBox.addTo(this.handleOverlay);
+    }
+    onPointerDown(event) {
+        var _a;
+        if (event.allPointers.length === 1 && event.current.isPrimary) {
+            if (this.lastEvtTarget && ((_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragStart(event.current, this.lastEvtTarget))) {
+                this.selectionBoxHandlingEvt = true;
+            }
+            else {
+                this.makeSelectionBox(event.current.canvasPos);
+            }
+            return true;
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        if (!this.selectionBox)
+            return;
+        if (this.selectionBoxHandlingEvt) {
+            this.selectionBox.onDragUpdate(event.current);
+        }
+        else {
+            this.selectionBox.setToPoint(event.current.canvasPos);
+        }
+    }
+    onSelectionUpdated() {
+        var _a, _b;
+        // Note that the selection has changed
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+        const selectedItemCount = (_b = (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.getSelectedItemCount()) !== null && _b !== void 0 ? _b : 0;
+        if (selectedItemCount > 0) {
+            this.editor.announceForAccessibility(this.editor.localization.selectedElements(selectedItemCount));
+            this.zoomToSelection();
+        }
+        else if (this.selectionBox) {
+            this.selectionBox.cancelSelection();
+            this.prevSelectionBox = this.selectionBox;
+            this.selectionBox = null;
+        }
+    }
+    onGestureEnd() {
+        this.lastEvtTarget = null;
+        if (!this.selectionBox)
+            return;
+        if (!this.selectionBoxHandlingEvt) {
+            // Expand/shrink the selection rectangle, if applicable
+            this.selectionBox.resolveToObjects();
+            this.onSelectionUpdated();
+        }
+        else {
+            this.selectionBox.onDragEnd();
+        }
+        this.selectionBoxHandlingEvt = false;
+    }
+    zoomToSelection() {
+        if (this.selectionBox) {
+            const selectionRect = this.selectionBox.region;
+            this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
+        }
+    }
+    onPointerUp(event) {
+        if (!this.selectionBox)
+            return;
+        this.selectionBox.setToPoint(event.current.canvasPos);
+        this.onGestureEnd();
+    }
+    onGestureCancel() {
+        var _a, _b, _c;
+        if (this.selectionBoxHandlingEvt) {
+            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragCancel();
+        }
+        else {
+            // Revert to the previous selection, if any.
+            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
+            this.selectionBox = this.prevSelectionBox;
+            (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.addTo(this.handleOverlay);
+        }
+    }
+    onKeyPress(event) {
+        let rotationSteps = 0;
+        let xTranslateSteps = 0;
+        let yTranslateSteps = 0;
+        let xScaleSteps = 0;
+        let yScaleSteps = 0;
+        switch (event.key) {
+            case 'a':
+            case 'h':
+            case 'ArrowLeft':
+                xTranslateSteps -= 1;
+                break;
+            case 'd':
+            case 'l':
+            case 'ArrowRight':
+                xTranslateSteps += 1;
+                break;
+            case 'q':
+            case 'k':
+            case 'ArrowUp':
+                yTranslateSteps -= 1;
+                break;
+            case 'e':
+            case 'j':
+            case 'ArrowDown':
+                yTranslateSteps += 1;
+                break;
+            case 'r':
+                rotationSteps += 1;
+                break;
+            case 'R':
+                rotationSteps -= 1;
+                break;
+            case 'i':
+                xScaleSteps -= 1;
+                break;
+            case 'I':
+                xScaleSteps += 1;
+                break;
+            case 'o':
+                yScaleSteps -= 1;
+                break;
+            case 'O':
+                yScaleSteps += 1;
+                break;
+        }
+        let handled = xTranslateSteps !== 0
+            || yTranslateSteps !== 0
+            || rotationSteps !== 0
+            || xScaleSteps !== 0
+            || yScaleSteps !== 0;
+        if (!this.selectionBox) {
+            handled = false;
+        }
+        else if (handled) {
+            const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
+            const rotateStepSize = Math.PI / 8;
+            const scaleStepSize = 5 / 4;
+            const region = this.selectionBox.region;
+            const scaleFactor = Vec2.of(Math.pow(scaleStepSize, xScaleSteps), Math.pow(scaleStepSize, yScaleSteps));
+            const rotationMat = Mat33.zRotation(rotationSteps * rotateStepSize);
+            const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport.roundScaleRatio(component));
+            const regionCenter = this.editor.viewport.roundPoint(region.center);
+            const transform = Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(Mat33.translation(regionCenter.times(-1)))).rightMul(Mat33.translation(this.editor.viewport.roundPoint(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
+            const oldTransform = this.selectionBox.getTransform();
+            this.selectionBox.setTransform(oldTransform.rightMul(transform));
+        }
+        if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
+            this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
+            this.clearSelection();
+            handled = true;
+        }
+        return handled;
+    }
+    onKeyUp(evt) {
+        if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
+            this.selectionBox.finalizeTransform();
+            return true;
+        }
+        return false;
+    }
+    onCopy(event) {
+        if (!this.selectionBox) {
+            return false;
+        }
+        const selectedElems = this.selectionBox.getSelectedObjects();
+        const bbox = this.selectionBox.region;
+        if (selectedElems.length === 0) {
+            return false;
+        }
+        const exportViewport = new Viewport(this.editor.notifier);
+        exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
+        exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
+        const svgNameSpace = 'http://www.w3.org/2000/svg';
+        const exportElem = document.createElementNS(svgNameSpace, 'svg');
+        const sanitize = true;
+        const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
+        const text = [];
+        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;
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        // Clear the selection
+        this.handleOverlay.replaceChildren();
+        this.selectionBox = null;
+        this.handleOverlay.style.display = enabled ? 'block' : 'none';
+        if (enabled) {
+            this.handleOverlay.tabIndex = 0;
+            this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
+        }
+        else {
+            this.handleOverlay.tabIndex = -1;
+        }
+    }
+    // Get the object responsible for displaying this' selection.
+    getSelection() {
+        return this.selectionBox;
+    }
+    setSelection(objects) {
+        let bbox = null;
+        for (const object of objects) {
+            if (bbox) {
+                bbox = bbox.union(object.getBBox());
+            }
+            else {
+                bbox = object.getBBox();
+            }
+        }
+        if (!bbox) {
+            return;
+        }
+        this.clearSelection();
+        if (!this.selectionBox) {
+            this.makeSelectionBox(bbox.topLeft);
+        }
+        this.selectionBox.setSelectedObjects(objects, bbox);
+        this.onSelectionUpdated();
+    }
+    clearSelection() {
+        this.handleOverlay.replaceChildren();
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = null;
+        this.onSelectionUpdated();
+    }
+}
+SelectionTool.handleableKeys = [
+    'a', 'h', 'ArrowLeft',
+    'd', 'l', 'ArrowRight',
+    'q', 'k', 'ArrowUp',
+    'e', 'j', 'ArrowDown',
+    'r', 'R',
+    'i', 'I', 'o', 'O',
+];

package/dist/src/tools/SelectionTool/TransformMode.d.ts

@@ -0,0 +1,34 @@
+import Editor from '../../Editor';
+import Vec3 from '../../math/Vec3';
+import Selection from './Selection';
+import { ResizeMode } from './types';
+export declare class DragTransformer {
+    private readonly editor;
+    private selection;
+    private dragStartPoint;
+    constructor(editor: Editor, selection: Selection);
+    onDragStart(startPoint: Vec3): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}
+export declare class ResizeTransformer {
+    private readonly editor;
+    private selection;
+    private mode;
+    private dragStartPoint;
+    constructor(editor: Editor, selection: Selection);
+    onDragStart(startPoint: Vec3, mode: ResizeMode): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}
+export declare class RotateTransformer {
+    private readonly editor;
+    private selection;
+    private startAngle;
+    constructor(editor: Editor, selection: Selection);
+    private getAngle;
+    private roundAngle;
+    onDragStart(startPoint: Vec3): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}

package/dist/src/tools/SelectionTool/TransformMode.js

@@ -0,0 +1,98 @@
+import Mat33 from '../../math/Mat33';
+import { Vec2 } from '../../math/Vec2';
+import Viewport from '../../Viewport';
+import { ResizeMode } from './types';
+export class DragTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+    }
+    onDragStart(startPoint) {
+        this.selection.setTransform(Mat33.identity);
+        this.dragStartPoint = startPoint;
+    }
+    onDragUpdate(canvasPos) {
+        const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
+        this.selection.setTransform(Mat33.translation(delta));
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}
+export class ResizeTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.mode = ResizeMode.Both;
+    }
+    onDragStart(startPoint, mode) {
+        this.selection.setTransform(Mat33.identity);
+        this.mode = mode;
+        this.dragStartPoint = startPoint;
+    }
+    onDragUpdate(canvasPos) {
+        const canvasDelta = canvasPos.minus(this.dragStartPoint);
+        const origWidth = this.selection.preTransformRegion.width;
+        const origHeight = this.selection.preTransformRegion.height;
+        let scale = Vec2.of(1, 1);
+        if (this.mode === ResizeMode.HorizontalOnly) {
+            const newWidth = origWidth + canvasDelta.x;
+            scale = Vec2.of(newWidth / origWidth, scale.y);
+        }
+        if (this.mode === ResizeMode.VerticalOnly) {
+            const newHeight = origHeight + canvasDelta.y;
+            scale = Vec2.of(scale.x, newHeight / origHeight);
+        }
+        if (this.mode === ResizeMode.Both) {
+            const delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
+            const newWidth = origWidth + delta;
+            scale = Vec2.of(newWidth / origWidth, newWidth / origWidth);
+        }
+        // Round: If this isn't done, scaling can create numbers with long decimal representations.
+        //    long decimal representations => large file sizes.
+        scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
+        if (scale.x > 0 && scale.y > 0) {
+            const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+            this.selection.setTransform(Mat33.scaling2D(scale, origin));
+        }
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}
+export class RotateTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.startAngle = 0;
+    }
+    getAngle(canvasPoint) {
+        const selectionCenter = this.selection.preTransformRegion.center;
+        const offset = canvasPoint.minus(selectionCenter);
+        return offset.angle();
+    }
+    roundAngle(angle) {
+        // Round angles to the nearest 16th of a turn
+        const roundingFactor = 16 / 2 / Math.PI;
+        return Math.round(angle * roundingFactor) / roundingFactor;
+    }
+    onDragStart(startPoint) {
+        this.selection.setTransform(Mat33.identity);
+        this.startAngle = this.getAngle(startPoint);
+    }
+    onDragUpdate(canvasPos) {
+        const targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+        // Transform in canvas space
+        const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
+        const unrounded = Mat33.zRotation(targetRotation);
+        const roundedRotationTransform = unrounded.mapEntries(entry => Viewport.roundScaleRatio(entry));
+        const fullRoundedTransform = Mat33
+            .translation(canvasSelCenter)
+            .rightMul(roundedRotationTransform)
+            .rightMul(Mat33.translation(canvasSelCenter.times(-1)));
+        this.selection.setTransform(fullRoundedTransform);
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}

package/dist/src/tools/SelectionTool/types.d.ts

@@ -0,0 +1,9 @@
+export declare enum ResizeMode {
+    Both = 0,
+    HorizontalOnly = 1,
+    VerticalOnly = 2
+}
+export declare enum TransformMode {
+    Snap = 0,
+    NoSnap = 1
+}

package/dist/src/tools/SelectionTool/types.js

@@ -0,0 +1,11 @@
+export var ResizeMode;
+(function (ResizeMode) {
+    ResizeMode[ResizeMode["Both"] = 0] = "Both";
+    ResizeMode[ResizeMode["HorizontalOnly"] = 1] = "HorizontalOnly";
+    ResizeMode[ResizeMode["VerticalOnly"] = 2] = "VerticalOnly";
+})(ResizeMode || (ResizeMode = {}));
+export var TransformMode;
+(function (TransformMode) {
+    TransformMode[TransformMode["Snap"] = 0] = "Snap";
+    TransformMode[TransformMode["NoSnap"] = 1] = "NoSnap";
+})(TransformMode || (TransformMode = {}));

package/dist/src/tools/ToolController.js

@@ -3,7 +3,7 @@ import PanZoom, { PanZoomMode } from './PanZoom';
 import Pen from './Pen';
 import ToolEnabledGroup from './ToolEnabledGroup';
 import Eraser from './Eraser';
-import SelectionTool from './SelectionTool';
+import SelectionTool from './SelectionTool/SelectionTool';
 import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';

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

@@ -9,6 +9,6 @@ export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
-export { default as SelectionTool } from './SelectionTool';
+export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';

package/dist/src/tools/lib.js

@@ -9,6 +9,6 @@ export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool } from './Pen';
 export { default as TextTool } from './TextTool';
-export { default as SelectionTool } from './SelectionTool';
+export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';

package/dist/src/types.d.ts

@@ -8,7 +8,7 @@ import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
-import { BaseWidget } from './lib';
+import BaseWidget from './toolbar/widgets/BaseWidget';
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/jest.config.js

@@ -10,6 +10,10 @@ const config = {
 		'js',
 	],
 
+	testPathIgnorePatterns: [
+		'<rootDir>/dist/', '<rootDir>/node_modules/'
+	],
+
 	// Mocks.
 	// See https://jestjs.io/docs/webpack#handling-static-assets
 	moduleNameMapper: {
@@ -19,6 +23,7 @@ const config = {
 	},
 	
 	testEnvironment: 'jsdom',
+	setupFilesAfterEnv: [ '<rootDir>/src/testing/beforeEachFile.ts' ],
 };
 
 module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.3.2",
+	"version": "0.4.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",
@@ -71,36 +71,37 @@
 		"lint": "eslint .",
 		"linter-precommit": "eslint --fix --ext .js --ext .ts",
 		"lint-staged": "lint-staged",
+		"lint-ci": "eslint . --max-warnings=0 --ext .js --ext .ts",
 		"prepare": "husky install && yarn build",
 		"prepack": "yarn build && yarn test && pinst --disable",
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {
-		"@melloware/coloris": "^0.16.0",
+		"@melloware/coloris": "^0.16.1",
 		"bezier-js": "^6.1.0"
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^28.1.7",
+		"@types/jest": "^29.0.3",
 		"@types/jsdom": "^20.0.0",
-		"@types/node": "^18.7.15",
-		"@typescript-eslint/eslint-plugin": "^5.36.2",
-		"@typescript-eslint/parser": "^5.36.2",
+		"@types/node": "^18.7.23",
+		"@typescript-eslint/eslint-plugin": "^5.38.1",
+		"@typescript-eslint/parser": "^5.38.1",
 		"css-loader": "^6.7.1",
-		"eslint": "^8.23.0",
+		"eslint": "^8.24.0",
 		"husky": "^8.0.1",
-		"jest": "^28.1.3",
-		"jest-environment-jsdom": "^29.0.2",
+		"jest": "^29.0.3",
+		"jest-environment-jsdom": "^29.0.3",
 		"jsdom": "^20.0.0",
 		"lint-staged": "^13.0.3",
 		"pinst": "^3.0.0",
 		"style-loader": "^3.3.1",
-		"terser-webpack-plugin": "^5.3.5",
-		"ts-jest": "^28.0.8",
-		"ts-loader": "^9.3.1",
+		"terser-webpack-plugin": "^5.3.6",
+		"ts-jest": "^29.0.2",
+		"ts-loader": "^9.4.1",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.14",
-		"typescript": "^4.8.2",
+		"typedoc": "^0.23.15",
+		"typescript": "^4.8.3",
 		"webpack": "^5.74.0"
 	},
 	"bugs": {

package/src/Editor.css

@@ -1,5 +1,6 @@
 
 @import url('./toolbar/toolbar.css');
+@import url('./tools/SelectionTool/SelectionTool.css');
 
 .imageEditorContainer {
 	/* Deafult colors for the editor */