js-draw 0.3.2 → 0.4.1

package/dist/src/math/Mat33.js

@@ -183,6 +183,22 @@ export default class Mat33 {
             this.c1, this.c2, this.c3,
         ];
     }
+    /**
+     * @example
+     * ```
+     * new Mat33(
+     *  1, 2, 3,
+     *  4, 5, 6,
+     *  7, 8, 9,
+     * ).mapEntries(component => component - 1);
+     * // → ⎡ 0, 1, 2 ⎤
+     * //   ⎢ 3, 4, 5 ⎥
+     * //   ⎣ 6, 7, 8 ⎦
+     * ```
+     */
+    mapEntries(mapping) {
+        return new Mat33(mapping(this.a1), mapping(this.a2), mapping(this.a3), mapping(this.b1), mapping(this.b2), mapping(this.b3), mapping(this.c1), mapping(this.c2), mapping(this.c3));
+    }
     /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
     static translation(amount) {
         // When transforming Vec2s by a 3x3 matrix, we give the input
@@ -214,7 +230,20 @@ export default class Mat33 {
         // Translate such that [center] goes to (0, 0)
         return result.rightMul(Mat33.translation(center.times(-1)));
     }
-    /** Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33. */
+    /** @see {@link !fromCSSMatrix} */
+    toCSSMatrix() {
+        return `matrix(${this.a1},${this.b1},${this.a2},${this.b2},${this.a3},${this.b3})`;
+    }
+    /**
+     * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.
+     *
+     * Note that such a matrix has the form,
+     * ```
+     * ⎡ a c e ⎤
+     * ⎢ b d f ⎥
+     * ⎣ 0 0 1 ⎦
+     * ```
+     */
     static fromCSSMatrix(cssString) {
         if (cssString === '' || cssString === 'none') {
             return Mat33.identity;

package/dist/src/math/Path.d.ts

@@ -55,7 +55,7 @@ export default class Path {
     static fromRenderable(renderable: RenderablePathSpec): Path;
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
     private cachedStringVersion;
-    toString(): string;
+    toString(useNonAbsCommands?: boolean): string;
     serialize(): string;
     static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string;
     static fromString(pathString: string): Path;

package/dist/src/math/Path.js

@@ -282,13 +282,15 @@ export default class Path {
             path: this,
         };
     }
-    toString() {
+    toString(useNonAbsCommands) {
         if (this.cachedStringVersion) {
             return this.cachedStringVersion;
         }
-        // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-        const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
-        const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+        if (useNonAbsCommands === undefined) {
+            // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
+            useNonAbsCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+        }
+        const result = Path.toString(this.startPoint, this.parts, !useNonAbsCommands);
         this.cachedStringVersion = result;
         return result;
     }
@@ -307,10 +309,12 @@ export default class Path {
             const roundedPrevX = prevPoint ? toRoundedString(prevPoint.x) : '';
             const roundedPrevY = prevPoint ? toRoundedString(prevPoint.y) : '';
             for (const point of points) {
+                const xComponent = toRoundedString(point.x);
+                const yComponent = toRoundedString(point.y);
                 // Relative commands are often shorter as strings than absolute commands.
                 if (!makeAbsCommand) {
-                    const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint.x, roundedPrevX, roundedPrevY);
-                    const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint.y, roundedPrevX, roundedPrevY);
+                    const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint.x, xComponent, roundedPrevX, roundedPrevY);
+                    const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint.y, yComponent, roundedPrevX, roundedPrevY);
                     // No need for an additional separator if it starts with a '-'
                     if (yComponentRelative.charAt(0) === '-') {
                         relativeCommandParts.push(`${xComponentRelative}${yComponentRelative}`);
@@ -320,8 +324,6 @@ export default class Path {
                     }
                 }
                 else {
-                    const xComponent = toRoundedString(point.x);
-                    const yComponent = toRoundedString(point.y);
                     absoluteCommandParts.push(`${xComponent},${yComponent}`);
                 }
             }

package/dist/src/math/Vec3.d.ts

@@ -38,6 +38,16 @@ export default class Vec3 {
     minus(v: Vec3): Vec3;
     dot(other: Vec3): number;
     cross(other: Vec3): Vec3;
+    /**
+     * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+     * if `other is a `number`, returns the result of scalar multiplication.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+     * ```
+     */
+    scale(other: Vec3 | number): Vec3;
     /**
      * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
      * 90 degrees counter-clockwise.
@@ -73,7 +83,7 @@ export default class Vec3 {
      * ```
      */
     map(fn: (component: number, index: number) => number): Vec3;
-    asArray(): number[];
+    asArray(): [number, number, number];
     /**
      * [fuzz] The maximum difference between two components for this and [other]
      * to be considered equal.
@@ -87,7 +97,7 @@ export default class Vec3 {
      * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
      * ```
      */
-    eq(other: Vec3, fuzz: number): boolean;
+    eq(other: Vec3, fuzz?: number): boolean;
     toString(): string;
     static unitX: Vec3;
     static unitY: Vec3;

package/dist/src/math/Vec3.js

@@ -76,6 +76,21 @@ export default class Vec3 {
         // | x2 y2 z2|
         return Vec3.of(this.y * other.z - other.y * this.z, other.x * this.z - this.x * other.z, this.x * other.y - other.x * this.y);
     }
+    /**
+     * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+     * if `other is a `number`, returns the result of scalar multiplication.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+     * ```
+     */
+    scale(other) {
+        if (typeof other === 'number') {
+            return this.times(other);
+        }
+        return Vec3.of(this.x * other.x, this.y * other.y, this.z * other.z);
+    }
     /**
      * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
      * 90 degrees counter-clockwise.
@@ -141,7 +156,7 @@ export default class Vec3 {
      * Vec3.of(1, 2, 3).eq(Vec3.of(4, 5, 6), 2.99); // → false
      * ```
      */
-    eq(other, fuzz) {
+    eq(other, fuzz = 1e-10) {
         for (let i = 0; i < 3; i++) {
             if (Math.abs(other.at(i) - this.at(i)) > fuzz) {
                 return false;

package/dist/src/math/rounding.d.ts

@@ -1,3 +1,4 @@
+export declare const cleanUpNumber: (text: string) => string;
 export declare const toRoundedString: (num: number) => string;
 export declare const getLenAfterDecimal: (numberAsString: string) => number;
 export declare const toStringOfSamePrecision: (num: number, ...references: string[]) => string;

package/dist/src/math/rounding.js

@@ -1,8 +1,14 @@
 // @packageDocumentation @internal
 // Clean up stringified numbers
-const cleanUpNumber = (text) => {
+export const cleanUpNumber = (text) => {
     // Regular expression substitions can be somewhat expensive. Only do them
     // if necessary.
+    if (text.indexOf('e') > 0) {
+        // Round to zero.
+        if (text.match(/[eE][-]\d{2,}$/)) {
+            return '0';
+        }
+    }
     const lastChar = text.charAt(text.length - 1);
     if (lastChar === '0' || lastChar === '.') {
         // Remove trailing zeroes
@@ -10,23 +16,24 @@ const cleanUpNumber = (text) => {
         text = text.replace(/[.]0+$/, '.');
         // Remove trailing period
         text = text.replace(/[.]$/, '');
-        if (text === '-0') {
-            return '0';
-        }
     }
     const firstChar = text.charAt(0);
     if (firstChar === '0' || firstChar === '-') {
         // Remove unnecessary leading zeroes.
         text = text.replace(/^(0+)[.]/, '.');
         text = text.replace(/^-(0+)[.]/, '-.');
+        text = text.replace(/^(-?)0+$/, '$10');
+    }
+    if (text === '-0') {
+        return '0';
     }
     return text;
 };
 export const toRoundedString = (num) => {
     // Try to remove rounding errors. If the number ends in at least three/four zeroes
     // (or nines) just one or two digits, it's probably a rounding error.
-    const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,2}$/;
-    const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,2}$/;
+    const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,4}$/;
+    const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,4}$/;
     let text = num.toString(10);
     if (text.indexOf('.') === -1) {
         return text;

package/dist/src/rendering/renderers/AbstractRenderer.js

@@ -64,7 +64,8 @@ export default class AbstractRenderer {
             this.currentPaths.push(path);
         }
     }
-    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
+    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+    // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
     drawRect(rect, lineWidth, lineFill) {
         const path = Path.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));

package/dist/src/testing/beforeEachFile.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/testing/beforeEachFile.js

@@ -0,0 +1,3 @@
+import loadExpectExtensions from './loadExpectExtensions';
+loadExpectExtensions();
+jest.useFakeTimers();

package/dist/src/testing/createEditor.d.ts

@@ -1,3 +1,4 @@
 import Editor from '../Editor';
+/** Creates an editor. Should only be used in test files. */
 declare const _default: () => Editor;
 export default _default;

package/dist/src/testing/createEditor.js

@@ -1,3 +1,9 @@
 import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
-export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+/** Creates an editor. Should only be used in test files. */
+export default () => {
+    if (jest === undefined) {
+        throw new Error('Files in the testing/ folder should only be used in tests!');
+    }
+    return new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+};

package/dist/src/testing/loadExpectExtensions.d.ts

@@ -1,17 +1,2 @@
 export declare const loadExpectExtensions: () => void;
-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/dist/src/toolbar/HTMLToolbar.js

@@ -1,17 +1,18 @@
 import { EditorEventType } from '../types';
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
-import SelectionTool from '../tools/SelectionTool';
 import { defaultToolbarLocalization } from './localization';
 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 { EraserTool, PenTool } from '../tools/lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -158,7 +159,7 @@ export default class HTMLToolbar {
         for (const tool of toolController.getMatchingTools(TextTool)) {
             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/dist/src/toolbar/widgets/SelectionToolWidget.d.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import SelectionTool from '../../tools/SelectionTool';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {

package/dist/src/tools/PasteHandler.js

@@ -17,10 +17,11 @@ import SVGLoader from '../SVGLoader';
 import { Mat33, 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 ImageComponent from '../components/ImageComponent';
+import Viewport from '../Viewport';
 // { @inheritDoc PasteHandler! }
 export default class PasteHandler extends BaseTool {
     constructor(editor) {
@@ -66,6 +67,7 @@ export default class PasteHandler extends BaseTool {
                 scaleRatio = scaleRatioY;
             }
             scaleRatio *= 2 / 3;
+            scaleRatio = Viewport.roundScaleRatio(scaleRatio);
             const transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
             const commands = [];
             for (const component of components) {

package/dist/src/tools/Pen.js

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

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

@@ -0,0 +1,54 @@
+/**
+ * @internal
+ * @packageDocumentation
+ */
+import Editor from '../../Editor';
+import { Mat33, Rect2 } from '../../math/lib';
+import { Point2 } from '../../math/Vec2';
+import Pointer from '../../Pointer';
+import AbstractComponent from '../../components/AbstractComponent';
+import Command from '../../commands/Command';
+export default class Selection {
+    private editor;
+    private handles;
+    private originalRegion;
+    private transformers;
+    private transform;
+    private transformCommands;
+    private selectedElems;
+    private container;
+    private backgroundElem;
+    constructor(startPoint: Point2, editor: Editor);
+    getTransform(): Mat33;
+    get preTransformRegion(): Rect2;
+    get region(): Rect2;
+    get regionRotation(): number;
+    get preTransformedScreenRegion(): Rect2;
+    get preTransformedScreenRegionRotation(): number;
+    get screenRegion(): Rect2;
+    get screenRegionRotation(): number;
+    private computeTransformCommands;
+    setTransform(transform: Mat33, preview?: boolean): void;
+    finalizeTransform(): void;
+    private static ApplyTransformationCommand;
+    private previewTransformCmds;
+    resolveToObjects(): boolean;
+    recomputeRegion(): boolean;
+    getMinCanvasSize(): number;
+    getSelectedItemCount(): number;
+    updateUI(): void;
+    private targetHandle;
+    private backgroundDragging;
+    onDragStart(pointer: Pointer, target: EventTarget): boolean;
+    onDragUpdate(pointer: Pointer): void;
+    onDragEnd(): void;
+    onDragCancel(): void;
+    scrollTo(): void;
+    deleteSelectedObjects(): Command;
+    duplicateSelectedObjects(): Command;
+    addTo(elem: HTMLElement): void;
+    setToPoint(point: Point2): void;
+    cancelSelection(): void;
+    setSelectedObjects(objects: AbstractComponent[], bbox: Rect2): void;
+    getSelectedObjects(): AbstractComponent[];
+}