js-draw 0.1.1 → 0.1.2

package/dist/src/Editor.js

@@ -115,6 +115,10 @@ export class Editor {
         // May be required to prevent text selection on iOS/Safari:
         // See https://stackoverflow.com/a/70992717/17055750
         this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
+        this.renderingRegion.addEventListener('contextmenu', evt => {
+            // Don't show a context menu
+            evt.preventDefault();
+        });
         this.renderingRegion.addEventListener('pointerdown', evt => {
             const pointer = Pointer.ofEvent(evt, true, this.viewport);
             pointers[pointer.id] = pointer;

package/dist/src/EditorImage.js

@@ -62,6 +62,9 @@ EditorImage.AddElementCommand = (_a = class {
             _applyByFlattening.set(this, false);
             __classPrivateFieldSet(this, _element, element, "f");
             __classPrivateFieldSet(this, _applyByFlattening, applyByFlattening, "f");
+            if (isNaN(__classPrivateFieldGet(this, _element, "f").getBBox().area)) {
+                throw new Error('Elements in the image cannot have NaN bounding boxes');
+            }
         }
         apply(editor) {
             editor.image.addElement(__classPrivateFieldGet(this, _element, "f"));

package/dist/src/Pointer.d.ts

@@ -4,8 +4,9 @@ export declare enum PointerDevice {
     Pen = 0,
     Eraser = 1,
     Touch = 2,
-    Mouse = 3,
-    Other = 4
+    PrimaryButtonMouse = 3,
+    RightButtonMouse = 4,
+    Other = 5
 }
 export default class Pointer {
     readonly screenPos: Point2;

package/dist/src/Pointer.js

@@ -4,8 +4,9 @@ export var PointerDevice;
     PointerDevice[PointerDevice["Pen"] = 0] = "Pen";
     PointerDevice[PointerDevice["Eraser"] = 1] = "Eraser";
     PointerDevice[PointerDevice["Touch"] = 2] = "Touch";
-    PointerDevice[PointerDevice["Mouse"] = 3] = "Mouse";
-    PointerDevice[PointerDevice["Other"] = 4] = "Other";
+    PointerDevice[PointerDevice["PrimaryButtonMouse"] = 3] = "PrimaryButtonMouse";
+    PointerDevice[PointerDevice["RightButtonMouse"] = 4] = "RightButtonMouse";
+    PointerDevice[PointerDevice["Other"] = 5] = "Other";
 })(PointerDevice || (PointerDevice = {}));
 // Provides a snapshot containing information about a pointer. A Pointer
 // object is immutable --- it will not be updated when the pointer's information changes.
@@ -34,7 +35,7 @@ export default class Pointer {
         var _a, _b;
         const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
         const pointerTypeToDevice = {
-            'mouse': PointerDevice.Mouse,
+            'mouse': PointerDevice.PrimaryButtonMouse,
             'pen': PointerDevice.Pen,
             'touch': PointerDevice.Touch,
         };
@@ -45,6 +46,14 @@ export default class Pointer {
         }
         const timeStamp = (new Date()).getTime();
         const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
+        if (device === PointerDevice.PrimaryButtonMouse) {
+            if (evt.buttons & 0x2) {
+                device = PointerDevice.RightButtonMouse;
+            }
+            else if (!(evt.buttons & 0x1)) {
+                device = PointerDevice.Other;
+            }
+        }
         return new Pointer(screenPos, canvasPos, (_b = evt.pressure) !== null && _b !== void 0 ? _b : null, evt.isPrimary, isDown, device, evt.pointerId, timeStamp);
     }
     // Create a new Pointer from a point on the canvas.

package/dist/src/SVGLoader.d.ts

@@ -1,6 +1,8 @@
 import Rect2 from './geometry/Rect2';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 export declare const defaultSVGViewRect: Rect2;
+export declare const svgAttributesDataKey = "svgAttrs";
+export declare type SVGLoaderUnknownAttribute = [string, string];
 export default class SVGLoader implements ImageLoader {
     private source;
     private onFinish?;
@@ -13,6 +15,7 @@ export default class SVGLoader implements ImageLoader {
     private constructor();
     private getStyle;
     private strokeDataFromElem;
+    private attachUnrecognisedAttrs;
     private addPath;
     private addUnknownNode;
     private updateViewBox;

package/dist/src/SVGLoader.js

@@ -15,6 +15,8 @@ import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
 // Size of a loaded image if no size is specified.
 export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
+// Key to retrieve unrecognised attributes from an AbstractComponent
+export const svgAttributesDataKey = 'svgAttrs';
 export default class SVGLoader {
     constructor(source, onFinish) {
         this.source = source;
@@ -81,6 +83,14 @@ export default class SVGLoader {
         }
         return result;
     }
+    attachUnrecognisedAttrs(elem, node, supportedAttrs) {
+        for (const attr of node.getAttributeNames()) {
+            if (supportedAttrs.has(attr)) {
+                continue;
+            }
+            elem.attachLoadSaveData(svgAttributesDataKey, [attr, node.getAttribute(attr)]);
+        }
+    }
     // Adds a stroke with a single path
     addPath(node) {
         var _a;
@@ -88,6 +98,7 @@ export default class SVGLoader {
         try {
             const strokeData = this.strokeDataFromElem(node);
             elem = new Stroke(strokeData);
+            this.attachUnrecognisedAttrs(elem, node, new Set(['stroke', 'fill', 'stroke-width', 'd']));
         }
         catch (e) {
             console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
@@ -189,7 +200,6 @@ export default class SVGLoader {
             sandbox.remove();
             throw new Error('SVG loading iframe is not sandboxed.');
         }
-        // Try running JavaScript within the iframe
         const sandboxDoc = (_b = (_a = sandbox.contentWindow) === null || _a === void 0 ? void 0 : _a.document) !== null && _b !== void 0 ? _b : sandbox.contentDocument;
         if (sandboxDoc == null)
             throw new Error('Unable to open a sandboxed iframe!');

package/dist/src/Viewport.js

@@ -87,6 +87,12 @@ export class Viewport {
     // Returns null if no transformation is necessary
     zoomTo(toMakeVisible) {
         let transform = Mat33.identity;
+        if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
+            throw new Error(`${toMakeVisible.toString()} rectangle is empty! Cannot zoom to!`);
+        }
+        if (isNaN(toMakeVisible.size.magnitude())) {
+            throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
+        }
         // Try to move the selection within the center 2/3rds of the viewport.
         const recomputeTargetRect = () => {
             // transform transforms objects on the canvas. As such, we need to invert it
@@ -115,6 +121,10 @@ export class Viewport {
             const viewportContentTransform = visibleRectTransform.inverse();
             transform = transform.rightMul(viewportContentTransform);
         }
+        if (!transform.invertable()) {
+            console.warn('Unable to zoom to ', toMakeVisible, '! Computed transform', transform, 'is singular.');
+            transform = Mat33.identity;
+        }
         return new Viewport.ViewportTransform(transform);
     }
 }

package/dist/src/components/AbstractComponent.d.ts

@@ -4,12 +4,17 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
+declare type LoadSaveData = unknown;
+export declare type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export default abstract class AbstractComponent {
     protected lastChangedTime: number;
     protected abstract contentBBox: Rect2;
     private zIndex;
     private static zIndexCounter;
     protected constructor();
+    private loadSaveData;
+    attachLoadSaveData(key: string, data: LoadSaveData): void;
+    getLoadSaveData(): LoadSaveDataTable;
     getZIndex(): number;
     getBBox(): Rect2;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
@@ -18,3 +23,4 @@ export default abstract class AbstractComponent {
     transformBy(affineTransfm: Mat33): Command;
     abstract description(localizationTable: ImageComponentLocalization): string;
 }
+export {};

package/dist/src/components/AbstractComponent.js

@@ -1,9 +1,20 @@
 import EditorImage from '../EditorImage';
 export default class AbstractComponent {
     constructor() {
+        // Get and manage data attached by a loader.
+        this.loadSaveData = {};
         this.lastChangedTime = (new Date()).getTime();
         this.zIndex = AbstractComponent.zIndexCounter++;
     }
+    attachLoadSaveData(key, data) {
+        if (!this.loadSaveData[key]) {
+            this.loadSaveData[key] = [];
+        }
+        this.loadSaveData[key].push(data);
+    }
+    getLoadSaveData() {
+        return this.loadSaveData;
+    }
     getZIndex() {
         return this.zIndex;
     }

package/dist/src/components/Stroke.js

@@ -41,7 +41,7 @@ export default class Stroke extends AbstractComponent {
                 canvas.drawPath(part);
             }
         }
-        canvas.endObject();
+        canvas.endObject(this.getLoadSaveData());
     }
     // Grows the bounding box for a given stroke part based on that part's style.
     bboxForPart(origBBox, style) {

package/dist/src/geometry/Path.js

@@ -275,10 +275,12 @@ export default class Path {
         // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
         // and
         // https://www.w3.org/TR/SVG2/paths.html
+        var _a;
         // Remove linebreaks
         pathString = pathString.split('\n').join(' ');
         let lastPos = Vec2.zero;
         let firstPos = null;
+        let startPos = null;
         let isFirstCommand = true;
         const commands = [];
         const moveTo = (point) => {
@@ -317,15 +319,61 @@ export default class Path {
                 endPoint,
             });
         };
+        const commandArgCounts = {
+            'm': 1,
+            'l': 1,
+            'c': 3,
+            'q': 2,
+            'z': 0,
+            'h': 1,
+            'v': 1,
+        };
         // Each command: Command character followed by anything that isn't a command character
-        const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+        const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/ig;
         let current;
         while ((current = commandExp.exec(pathString)) !== null) {
-            const argParts = current[2].trim().split(/[^0-9.-]/).filter(part => part.length > 0);
-            const numericArgs = argParts.map(arg => parseFloat(arg));
-            const commandChar = current[1];
-            const uppercaseCommand = commandChar !== commandChar.toLowerCase();
-            const args = numericArgs.reduce((accumulator, current, index, parts) => {
+            const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(part => part.length > 0).reduce((accumualtor, current) => {
+                // As of 09/2022, iOS Safari doesn't support support lookbehind in regular
+                // expressions. As such, we need an alternative.
+                // Because '-' can be used as a path separator, unless preceeded by an 'e' (as in 1e-5),
+                // we need special cases:
+                current = current.replace(/([^eE])[-]/g, '$1 -');
+                const parts = current.split(' -');
+                if (parts[0] !== '') {
+                    accumualtor.push(parts[0]);
+                }
+                accumualtor.push(...parts.slice(1).map(part => `-${part}`));
+                return accumualtor;
+            }, []);
+            let numericArgs = argParts.map(arg => parseFloat(arg));
+            let commandChar = current[1].toLowerCase();
+            let uppercaseCommand = current[1] !== commandChar;
+            // Convert commands that don't take points into commands that do.
+            if (commandChar === 'v' || commandChar === 'h') {
+                numericArgs = numericArgs.reduce((accumulator, current) => {
+                    if (commandChar === 'v') {
+                        return accumulator.concat(uppercaseCommand ? lastPos.x : 0, current);
+                    }
+                    else {
+                        return accumulator.concat(current, uppercaseCommand ? lastPos.y : 0);
+                    }
+                }, []);
+                commandChar = 'l';
+            }
+            else if (commandChar === 'z') {
+                if (firstPos) {
+                    numericArgs = [firstPos.x, firstPos.y];
+                    firstPos = lastPos;
+                }
+                else {
+                    continue;
+                }
+                // 'z' always acts like an uppercase lineTo(startPos)
+                uppercaseCommand = true;
+                commandChar = 'l';
+            }
+            const commandArgCount = (_a = commandArgCounts[commandChar]) !== null && _a !== void 0 ? _a : 0;
+            const allArgs = numericArgs.reduce((accumulator, current, index, parts) => {
                 if (index % 2 !== 0) {
                     const currentAsFloat = current;
                     const prevAsFloat = parts[index - 1];
@@ -334,76 +382,59 @@ export default class Path {
                 else {
                     return accumulator;
                 }
-            }, []).map((coordinate) => {
+            }, []).map((coordinate, index) => {
                 // Lowercase commands are relative, uppercase commands use absolute
                 // positioning
+                let newPos;
                 if (uppercaseCommand) {
-                    lastPos = coordinate;
-                    return coordinate;
+                    newPos = coordinate;
                 }
                 else {
-                    lastPos = lastPos.plus(coordinate);
-                    return lastPos;
+                    newPos = lastPos.plus(coordinate);
+                }
+                if ((index + 1) % commandArgCount === 0) {
+                    lastPos = newPos;
                 }
+                return newPos;
             });
-            let expectedPointArgCount;
-            switch (commandChar.toLowerCase()) {
-                case 'm':
-                    expectedPointArgCount = 1;
-                    moveTo(args[0]);
-                    break;
-                case 'l':
-                    expectedPointArgCount = 1;
-                    lineTo(args[0]);
-                    break;
-                case 'z':
-                    expectedPointArgCount = 0;
-                    // firstPos can be null if the stroke data is just 'z'.
-                    if (firstPos) {
-                        lineTo(firstPos);
-                    }
-                    break;
-                case 'c':
-                    expectedPointArgCount = 3;
-                    cubicBezierTo(args[0], args[1], args[2]);
-                    break;
-                case 'q':
-                    expectedPointArgCount = 2;
-                    quadraticBeierTo(args[0], args[1]);
-                    break;
-                // Horizontal line
-                case 'h':
-                    expectedPointArgCount = 0;
-                    if (uppercaseCommand) {
-                        lineTo(Vec2.of(numericArgs[0], lastPos.y));
-                    }
-                    else {
-                        lineTo(lastPos.plus(Vec2.of(numericArgs[0], 0)));
-                    }
-                    break;
-                // Vertical line
-                case 'v':
-                    expectedPointArgCount = 0;
-                    if (uppercaseCommand) {
-                        lineTo(Vec2.of(lastPos.x, numericArgs[1]));
-                    }
-                    else {
-                        lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
-                    }
-                    break;
-                default:
-                    throw new Error(`Unknown path command ${commandChar}`);
+            if (allArgs.length % commandArgCount !== 0) {
+                throw new Error([
+                    `Incorrect number of arguments: got ${JSON.stringify(allArgs)} with a length of ${allArgs.length} ≠ ${commandArgCount}k, k ∈ ℤ.`,
+                    `The number of arguments to ${commandChar} must be a multiple of ${commandArgCount}!`,
+                    `Command: ${current[0]}`,
+                ].join('\n'));
             }
-            if (args.length !== expectedPointArgCount) {
-                throw new Error(`
-					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
-				`.trim());
+            for (let argPos = 0; argPos < allArgs.length; argPos += commandArgCount) {
+                const args = allArgs.slice(argPos, argPos + commandArgCount);
+                switch (commandChar.toLowerCase()) {
+                    case 'm':
+                        if (argPos === 0) {
+                            moveTo(args[0]);
+                        }
+                        else {
+                            lineTo(args[0]);
+                        }
+                        break;
+                    case 'l':
+                        lineTo(args[0]);
+                        break;
+                    case 'c':
+                        cubicBezierTo(args[0], args[1], args[2]);
+                        break;
+                    case 'q':
+                        quadraticBeierTo(args[0], args[1]);
+                        break;
+                    default:
+                        throw new Error(`Unknown path command ${commandChar}`);
+                }
+                isFirstCommand = false;
             }
-            if (args.length > 0) {
-                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = args[0]);
+            if (allArgs.length > 0) {
+                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = allArgs[0]);
+                startPos !== null && startPos !== void 0 ? startPos : (startPos = firstPos);
+                lastPos = allArgs[allArgs.length - 1];
             }
-            isFirstCommand = false;
         }
-        return new Path(firstPos !== null && firstPos !== void 0 ? firstPos : Vec2.zero, commands);
+        return new Path(startPos !== null && startPos !== void 0 ? startPos : Vec2.zero, commands);
     }
 }

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,4 +1,5 @@
 import Color4 from '../../Color4';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Mat33 from '../../geometry/Mat33';
 import { PathCommand } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -37,7 +38,7 @@ export default abstract class AbstractRenderer {
     drawPath(path: RenderablePathSpec): void;
     drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void;
     startObject(_boundingBox: Rect2, _clip?: boolean): void;
-    endObject(): void;
+    endObject(_loaderData?: LoadSaveDataTable): void;
     protected getNestingLevel(): number;
     abstract drawPoints(...points: Point2[]): void;
     canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean;

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

@@ -79,7 +79,7 @@ export default class AbstractRenderer {
         this.currentPaths = [];
         this.objectLevel++;
     }
-    endObject() {
+    endObject(_loaderData) {
         // Render the paths all at once
         this.flushPath();
         this.currentPaths = null;

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -1,3 +1,4 @@
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Viewport from '../../Viewport';
@@ -9,7 +10,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private lastPathStyle;
     private lastPath;
     private lastPathStart;
-    private mainGroup;
+    private objectElems;
     private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport);
     setRootSVGAttribute(name: string, value: string | null): void;
@@ -19,7 +20,7 @@ export default class SVGRenderer extends AbstractRenderer {
     protected endPath(style: RenderingStyle): void;
     private addPathToSVG;
     startObject(boundingBox: Rect2): void;
-    endObject(): void;
+    endObject(loaderData?: LoadSaveDataTable): void;
     protected lineTo(point: Point2): void;
     protected moveTo(point: Point2): void;
     protected traceCubicBezierCurve(controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2): void;

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

@@ -1,11 +1,13 @@
 import Path, { PathCommandType } from '../../geometry/Path';
 import { Vec2 } from '../../geometry/Vec2';
+import { svgAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
     constructor(elem, viewport) {
         super(viewport);
         this.elem = elem;
+        this.objectElems = null;
         this.overwrittenAttrs = {};
         this.clear();
     }
@@ -26,7 +28,6 @@ export default class SVGRenderer extends AbstractRenderer {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     clear() {
-        this.mainGroup = document.createElementNS(svgNameSpace, 'g');
         // Restore all alltributes
         for (const attrName in this.overwrittenAttrs) {
             const value = this.overwrittenAttrs[attrName];
@@ -38,8 +39,6 @@ export default class SVGRenderer extends AbstractRenderer {
             }
         }
         this.overwrittenAttrs = {};
-        // Remove all children
-        this.elem.replaceChildren(this.mainGroup);
     }
     beginPath(startPoint) {
         var _a;
@@ -72,6 +71,7 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Push [this.fullPath] to the SVG
     addPathToSVG() {
+        var _a;
         if (!this.lastPathStyle || !this.lastPath) {
             return;
         }
@@ -83,7 +83,8 @@ export default class SVGRenderer extends AbstractRenderer {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
             pathElem.setAttribute('stroke-width', style.stroke.width.toString());
         }
-        this.mainGroup.appendChild(pathElem);
+        this.elem.appendChild(pathElem);
+        (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
     startObject(boundingBox) {
         super.startObject(boundingBox);
@@ -91,11 +92,24 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPath = null;
         this.lastPathStart = null;
         this.lastPathStyle = null;
+        this.objectElems = [];
     }
-    endObject() {
-        super.endObject();
+    endObject(loaderData) {
+        var _a;
+        super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
+        if (loaderData) {
+            // Restore any attributes unsupported by the app.
+            for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
+                const attrs = loaderData[svgAttributesDataKey];
+                if (attrs) {
+                    for (const [attr, value] of attrs) {
+                        elem.setAttribute(attr, value);
+                    }
+                }
+            }
+        }
     }
     lineTo(point) {
         point = this.canvasToScreen(point);
@@ -137,7 +151,7 @@ export default class SVGRenderer extends AbstractRenderer {
             elem.setAttribute('cx', `${point.x}`);
             elem.setAttribute('cy', `${point.y}`);
             elem.setAttribute('r', '15');
-            this.mainGroup.appendChild(elem);
+            this.elem.appendChild(elem);
         });
     }
     // Renders a **copy** of the given element.

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -1,5 +1,6 @@
 import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
+import { ActionButtonIcon } from './types';
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
@@ -7,7 +8,7 @@ export default class HTMLToolbar {
     private penTypes;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
-    addActionButton(text: string, command: () => void, parent?: Element): HTMLButtonElement;
+    addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;
     private addUndoRedoButtons;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;