js-draw 0.4.1 → 0.6.0

package/dist/src/Editor.d.ts

@@ -28,6 +28,7 @@ import Display, { RenderingMode } from './rendering/Display';
 import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
+import IconProvider from './toolbar/IconProvider';
 declare type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
 declare type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
@@ -44,6 +45,7 @@ export interface EditorSettings {
     /** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
     minZoom: number;
     maxZoom: number;
+    iconProvider: IconProvider;
 }
 export declare class Editor {
     private container;
@@ -81,18 +83,19 @@ export declare class Editor {
      * editor.dispatch(addElementCommand);
      * ```
      */
-    image: EditorImage;
+    readonly image: EditorImage;
     /** Viewport for the exported/imported image. */
     private importExportViewport;
     /** @internal */
-    localization: EditorLocalization;
-    viewport: Viewport;
-    toolController: ToolController;
+    readonly localization: EditorLocalization;
+    readonly icons: IconProvider;
+    readonly viewport: Viewport;
+    readonly toolController: ToolController;
     /**
      * Global event dispatcher/subscriber.
      * @see {@link types.EditorEventType}
      */
-    notifier: EditorNotifier;
+    readonly notifier: EditorNotifier;
     private loadingWarning;
     private accessibilityAnnounceArea;
     private accessibilityControlArea;
@@ -193,7 +196,7 @@ export declare class Editor {
         remove: () => void;
     };
     addStyleSheet(content: string): HTMLStyleElement;
-    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean): void;
+    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
     toSVG(): SVGElement;
     loadFrom(loader: ImageLoader): Promise<void>;

package/dist/src/Editor.js

@@ -41,6 +41,7 @@ import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
 import Mat33 from './math/Mat33';
 import getLocalizationTable from './localizations/getLocalizationTable';
+import IconProvider from './toolbar/IconProvider';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -67,7 +68,7 @@ export class Editor {
      * ```
      */
     constructor(parent, settings = {}) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         this.eventListenerTargets = [];
         this.previousAccessibilityAnnouncement = '';
         this.pointers = {};
@@ -86,7 +87,9 @@ export class Editor {
             localization: this.localization,
             minZoom: (_c = settings.minZoom) !== null && _c !== void 0 ? _c : 2e-10,
             maxZoom: (_d = settings.maxZoom) !== null && _d !== void 0 ? _d : 1e12,
+            iconProvider: (_e = settings.iconProvider) !== null && _e !== void 0 ? _e : new IconProvider(),
         };
+        this.icons = this.settings.iconProvider;
         this.container = document.createElement('div');
         this.renderingRegion = document.createElement('div');
         this.container.appendChild(this.renderingRegion);
@@ -441,6 +444,7 @@ export class Editor {
                 kind: InputEvtType.KeyPressEvent,
                 key: evt.key,
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             })) {
                 evt.preventDefault();
             }
@@ -453,6 +457,7 @@ export class Editor {
                 kind: InputEvtType.KeyUpEvent,
                 key: evt.key,
                 ctrlKey: evt.ctrlKey,
+                altKey: evt.altKey,
             })) {
                 evt.preventDefault();
             }
@@ -598,11 +603,12 @@ export class Editor {
     }
     // Dispatch a keyboard event to the currently selected tool.
     // Intended for unit testing
-    sendKeyboardEvent(eventType, key, ctrlKey = false) {
+    sendKeyboardEvent(eventType, key, ctrlKey = false, altKey = false) {
         this.toolController.dispatchInputEvent({
             kind: eventType,
             key,
-            ctrlKey
+            ctrlKey,
+            altKey,
         });
     }
     // Dispatch a pen event to the currently selected tool.

package/dist/src/EditorImage.d.ts

@@ -16,6 +16,9 @@ export default class EditorImage {
     render(renderer: AbstractRenderer, viewport: Viewport): void;
     /** Renders all nodes, even ones not within the viewport. @internal */
     renderAll(renderer: AbstractRenderer): void;
+    /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+    getAllElements(): AbstractComponent[];
+    /** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
     getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
     /** @internal */
     onDestroyElement(elem: AbstractComponent): void;

package/dist/src/EditorImage.js

@@ -39,6 +39,13 @@ export default class EditorImage {
             leaf.getContent().render(renderer, leaf.getBBox());
         }
     }
+    /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+    getAllElements() {
+        const leaves = this.root.getLeaves();
+        sortLeavesByZIndex(leaves);
+        return leaves.map(leaf => leaf.getContent());
+    }
+    /** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
     getElementsIntersectingRegion(region) {
         const leaves = this.root.getLeavesIntersectingRegion(region);
         sortLeavesByZIndex(leaves);

package/dist/src/SVGLoader.js

@@ -99,7 +99,7 @@ export default class SVGLoader {
             }
             elem.attachLoadSaveData(svgAttributesDataKey, [attr, node.getAttribute(attr)]);
         }
-        if (supportedStyleAttrs) {
+        if (supportedStyleAttrs && node.style) {
             for (const attr of node.style) {
                 if (attr === '' || !attr) {
                     continue;
@@ -157,9 +157,9 @@ export default class SVGLoader {
         }
         const elemX = elem.getAttribute('x');
         const elemY = elem.getAttribute('y');
-        if (elemX && elemY) {
-            const x = parseFloat(elemX);
-            const y = parseFloat(elemY);
+        if (elemX || elemY) {
+            const x = parseFloat(elemX !== null && elemX !== void 0 ? elemX : '0');
+            const y = parseFloat(elemY !== null && elemY !== void 0 ? elemY : '0');
             if (!isNaN(x) && !isNaN(y)) {
                 supportedAttrs === null || supportedAttrs === void 0 ? void 0 : supportedAttrs.push('x', 'y');
                 transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
@@ -204,7 +204,7 @@ export default class SVGLoader {
             size: fontSize,
             fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
             renderingStyle: {
-                fill: Color4.fromString(computedStyles.fill)
+                fill: Color4.fromString(computedStyles.fill || elem.style.fill || '#000')
             },
         };
         const supportedAttrs = [];
@@ -339,7 +339,6 @@ export default class SVGLoader {
             (_b = this.onFinish) === null || _b === void 0 ? void 0 : _b.call(this);
         });
     }
-    // TODO: Handling unsafe data! Tripple-check that this is secure!
     // @param sanitize - if `true`, don't store unknown attributes.
     static fromString(text, sanitize = false) {
         var _a, _b;

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

@@ -28,6 +28,7 @@ export default abstract class AbstractComponent {
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;
+    isSelectable(): boolean;
     private static transformElementCommandId;
     private static UnresolvedTransformElementCommand;
     private static TransformElementCommand;

package/dist/src/components/AbstractComponent.js

@@ -48,6 +48,10 @@ export default class AbstractComponent {
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this);
     }
+    // @returns true iff this component can be selected (e.g. by the selection tool.)
+    isSelectable() {
+        return true;
+    }
     // Returns a copy of this component.
     clone() {
         const clone = this.createClone();

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

@@ -12,6 +12,7 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(_lineSegment: LineSegment2): boolean;
     protected applyTransformation(_affineTransfm: Mat33): void;
+    isSelectable(): boolean;
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;

package/dist/src/components/SVGGlobalAttributesObject.js

@@ -29,6 +29,9 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     }
     applyTransformation(_affineTransfm) {
     }
+    isSelectable() {
+        return false;
+    }
     createClone() {
         return new SVGGlobalAttributesObject(this.attrs);
     }

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

@@ -12,16 +12,15 @@ export interface TextStyle {
     fontVariant?: string;
     renderingStyle: RenderingStyle;
 }
-declare type GetTextDimensCallback = (text: string, style: TextStyle) => Rect2;
 export default class Text extends AbstractComponent {
     protected readonly textObjects: Array<string | Text>;
     private transform;
     private readonly style;
-    private readonly getTextDimens;
     protected contentBBox: Rect2;
-    constructor(textObjects: Array<string | Text>, transform: Mat33, style: TextStyle, getTextDimens?: GetTextDimensCallback);
+    constructor(textObjects: Array<string | Text>, transform: Mat33, style: TextStyle);
     static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
     private static textMeasuringCtx;
+    private static estimateTextDimens;
     private static getTextDimens;
     private computeBBoxOfPart;
     private recomputeBBox;
@@ -32,6 +31,5 @@ export default class Text extends AbstractComponent {
     getText(): string;
     description(localizationTable: ImageComponentLocalization): string;
     protected serializeToJSON(): Record<string, any>;
-    static deserializeFromString(json: any, getTextDimens?: GetTextDimensCallback): Text;
+    static deserializeFromString(json: any): Text;
 }
-export {};

package/dist/src/components/Text.js

@@ -5,15 +5,11 @@ import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 const componentTypeId = 'text';
 export default class Text extends AbstractComponent {
-    constructor(textObjects, transform, style, 
-    // If not given, an HtmlCanvasElement is used to determine text boundaries.
-    // @internal
-    getTextDimens = Text.getTextDimens) {
+    constructor(textObjects, transform, style) {
         super(componentTypeId);
         this.textObjects = textObjects;
         this.transform = transform;
         this.style = style;
-        this.getTextDimens = getTextDimens;
         this.recomputeBBox();
     }
     static applyTextStyles(ctx, style) {
@@ -28,9 +24,21 @@ export default class Text extends AbstractComponent {
         ].join(' ');
         ctx.textAlign = 'left';
     }
+    // Roughly estimate the bounding box of `text`. Use if no CanvasRenderingContext2D is available.
+    static estimateTextDimens(text, style) {
+        const widthEst = text.length * style.size;
+        const heightEst = style.size;
+        // Text is drawn with (0, 0) as its baseline. As such, the majority of the text's height should
+        // be above (0, 0).
+        return new Rect2(0, -heightEst * 2 / 3, widthEst, heightEst);
+    }
+    // Returns the bounding box of `text`. This is approximate if no Canvas is available.
     static getTextDimens(text, style) {
-        var _a;
-        (_a = Text.textMeasuringCtx) !== null && _a !== void 0 ? _a : (Text.textMeasuringCtx = document.createElement('canvas').getContext('2d'));
+        var _a, _b;
+        (_a = Text.textMeasuringCtx) !== null && _a !== void 0 ? _a : (Text.textMeasuringCtx = (_b = document.createElement('canvas').getContext('2d')) !== null && _b !== void 0 ? _b : null);
+        if (!Text.textMeasuringCtx) {
+            return this.estimateTextDimens(text, style);
+        }
         const ctx = Text.textMeasuringCtx;
         Text.applyTextStyles(ctx, style);
         const measure = ctx.measureText(text);
@@ -41,7 +49,7 @@ export default class Text extends AbstractComponent {
     }
     computeBBoxOfPart(part) {
         if (typeof part === 'string') {
-            const textBBox = this.getTextDimens(part, this.style);
+            const textBBox = Text.getTextDimens(part, this.style);
             return textBBox.transformedBoundingBox(this.transform);
         }
         else {
@@ -138,7 +146,7 @@ export default class Text extends AbstractComponent {
             style: serializableStyle,
         };
     }
-    static deserializeFromString(json, getTextDimens = Text.getTextDimens) {
+    static deserializeFromString(json) {
         const style = {
             renderingStyle: styleFromJSON(json.style.renderingStyle),
             size: json.style.size,
@@ -159,7 +167,8 @@ export default class Text extends AbstractComponent {
         }
         const transformData = json.transform;
         const transform = new Mat33(...transformData);
-        return new Text(textObjects, transform, style, getTextDimens);
+        return new Text(textObjects, transform, style);
     }
 }
+Text.textMeasuringCtx = null;
 AbstractComponent.registerComponent(componentTypeId, (data) => Text.deserializeFromString(data));

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

@@ -11,6 +11,7 @@ export default class UnknownSVGObject extends AbstractComponent {
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(_affineTransfm: Mat33): void;
+    isSelectable(): boolean;
     protected createClone(): AbstractComponent;
     description(localization: ImageComponentLocalization): string;
     protected serializeToJSON(): string | null;

package/dist/src/components/UnknownSVGObject.js

@@ -25,6 +25,9 @@ export default class UnknownSVGObject extends AbstractComponent {
     }
     applyTransformation(_affineTransfm) {
     }
+    isSelectable() {
+        return false;
+    }
     createClone() {
         return new UnknownSVGObject(this.svgObject.cloneNode(true));
     }

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -312,15 +312,15 @@ export default class FreehandLineBuilder {
         }
         let enteringVec = this.lastExitingVec;
         if (!enteringVec) {
-            let sampleIdx = Math.ceil(this.buffer.length / 3);
-            if (sampleIdx === 0) {
+            let sampleIdx = Math.ceil(this.buffer.length / 2);
+            if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
                 sampleIdx = this.buffer.length - 1;
             }
             enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 3;
+        const maxRelativeLength = 2;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();

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

@@ -72,7 +72,7 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPath(pathSpec) {
         var _a;
         const style = pathSpec.style;
-        const path = Path.fromRenderable(pathSpec);
+        const path = Path.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
         if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {
             this.addPathToSVG();

package/dist/src/testing/beforeEachFile.js

@@ -1,3 +1,7 @@
 import loadExpectExtensions from './loadExpectExtensions';
 loadExpectExtensions();
 jest.useFakeTimers();
+// jsdom doesn't support HTMLCanvasElement#getContext — it logs an error
+// to the console. Make it return null so we can handle a non-existent Canvas
+// at runtime (e.g. use something else, if available).
+HTMLCanvasElement.prototype.getContext = () => null;

package/dist/src/toolbar/HTMLToolbar.js

@@ -2,7 +2,6 @@ import { EditorEventType } from '../types';
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
 import { defaultToolbarLocalization } from './localization';
-import { makeRedoIcon, makeUndoIcon } from './icons';
 import SelectionTool from '../tools/SelectionTool/SelectionTool';
 import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
@@ -123,13 +122,13 @@ export default class HTMLToolbar {
         undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
         const undoButton = this.addActionButton({
             label: this.localizationTable.undo,
-            icon: makeUndoIcon()
+            icon: this.editor.icons.makeUndoIcon()
         }, () => {
             this.editor.history.undo();
         }, undoRedoGroup);
         const redoButton = this.addActionButton({
             label: this.localizationTable.redo,
-            icon: makeRedoIcon(),
+            icon: this.editor.icons.makeRedoIcon(),
         }, () => {
             this.editor.history.redo();
         }, undoRedoGroup);

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

@@ -0,0 +1,24 @@
+import Color4 from '../Color4';
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
+import Pen from '../tools/Pen';
+export default class IconProvider {
+    makeUndoIcon(): SVGSVGElement;
+    makeRedoIcon(mirror?: boolean): SVGSVGElement;
+    makeDropdownIcon(): SVGSVGElement;
+    makeEraserIcon(): SVGSVGElement;
+    makeSelectionIcon(): SVGSVGElement;
+    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): SVGSVGElement;
+    makeHandToolIcon(): SVGSVGElement;
+    makeTouchPanningIcon(): SVGSVGElement;
+    makeAllDevicePanningIcon(): SVGSVGElement;
+    makeZoomIcon: () => SVGSVGElement;
+    makeTextIcon(textStyle: TextStyle): SVGSVGElement;
+    makePenIcon(tipThickness: number, color: string | Color4): SVGSVGElement;
+    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): SVGSVGElement;
+    makePipetteIcon(color?: Color4): SVGSVGElement;
+    makeResizeViewportIcon(): SVGSVGElement;
+    makeDuplicateSelectionIcon(): SVGSVGElement;
+    makeDeleteSelectionIcon(): SVGSVGElement;
+    makeSaveIcon(): SVGSVGElement;
+}