js-draw 0.5.0 → 0.7.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,18 @@ 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;

package/dist/src/Editor.js

@@ -41,6 +41,8 @@ import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
 import Mat33 from './math/Mat33';
 import getLocalizationTable from './localizations/getLocalizationTable';
+import IconProvider from './toolbar/IconProvider';
+import { toRoundedString } from './math/rounding';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -67,7 +69,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 +88,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);
@@ -635,9 +639,9 @@ export class Editor {
         importExportViewport.resetTransform(origTransform);
         // Just show the main region
         const rect = importExportViewport.visibleRect;
-        result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
-        result.setAttribute('width', `${rect.w}`);
-        result.setAttribute('height', `${rect.h}`);
+        result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
+        result.setAttribute('width', toRoundedString(rect.w));
+        result.setAttribute('height', toRoundedString(rect.h));
         // Ensure the image can be identified as an SVG if downloaded.
         // See https://jwatt.org/svg/authoring/
         result.setAttribute('version', '1.1');

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

@@ -11,7 +11,7 @@ import Color4 from './Color4';
 import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
-import Text from './components/Text';
+import TextComponent from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Mat33 from './math/Mat33';
 import Path from './math/Path';
@@ -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,12 +204,12 @@ 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 = [];
         const transform = this.getTransform(elem, supportedAttrs, computedStyles);
-        const result = new Text(contentList, transform, style);
+        const result = new TextComponent(contentList, transform, style);
         this.attachUnrecognisedAttrs(result, elem, new Set(supportedAttrs), new Set(supportedStyleAttrs));
         return result;
     }
@@ -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/Stroke.js

@@ -3,6 +3,7 @@ import Rect2 from '../math/Rect2';
 import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 export default class Stroke extends AbstractComponent {
+    // Creates a `Stroke` from the given `parts`.
     constructor(parts) {
         var _a;
         super('stroke');

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

@@ -12,26 +12,29 @@ 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>;
+export default class TextComponent extends AbstractComponent {
+    protected readonly textObjects: Array<string | TextComponent>;
     private transform;
-    private readonly style;
-    private readonly getTextDimens;
+    private style;
     protected contentBBox: Rect2;
-    constructor(textObjects: Array<string | Text>, transform: Mat33, style: TextStyle, getTextDimens?: GetTextDimensCallback);
+    constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextStyle);
     static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
     private static textMeasuringCtx;
+    private static estimateTextDimens;
     private static getTextDimens;
     private computeBBoxOfPart;
     private recomputeBBox;
+    private renderInternal;
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
+    getBaselinePos(): import("../lib").Vec3;
+    getTextStyle(): TextStyle;
+    getTransform(): Mat33;
     protected applyTransformation(affineTransfm: Mat33): void;
     protected createClone(): AbstractComponent;
     getText(): string;
     description(localizationTable: ImageComponentLocalization): string;
     protected serializeToJSON(): Record<string, any>;
-    static deserializeFromString(json: any, getTextDimens?: GetTextDimensCallback): Text;
+    static deserializeFromString(json: any): TextComponent;
+    static fromLines(lines: string[], transform: Mat33, style: TextStyle): AbstractComponent;
 }
-export {};

package/dist/src/components/Text.js

@@ -1,20 +1,23 @@
 import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
+import { Vec2 } from '../math/Vec2';
 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) {
+export default class TextComponent extends AbstractComponent {
+    constructor(textObjects, transform, style) {
         super(componentTypeId);
         this.textObjects = textObjects;
         this.transform = transform;
         this.style = style;
-        this.getTextDimens = getTextDimens;
         this.recomputeBBox();
+        // If this has no direct children, choose a style representative of this' content
+        // (useful for estimating the style of the TextComponent).
+        const hasDirectContent = textObjects.some(obj => typeof obj === 'string');
+        if (!hasDirectContent && textObjects.length > 0) {
+            this.style = textObjects[0].getTextStyle();
+        }
     }
     static applyTextStyles(ctx, style) {
         var _a, _b;
@@ -28,11 +31,23 @@ 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'));
-        const ctx = Text.textMeasuringCtx;
-        Text.applyTextStyles(ctx, style);
+        var _a, _b;
+        (_a = TextComponent.textMeasuringCtx) !== null && _a !== void 0 ? _a : (TextComponent.textMeasuringCtx = (_b = document.createElement('canvas').getContext('2d')) !== null && _b !== void 0 ? _b : null);
+        if (!TextComponent.textMeasuringCtx) {
+            return this.estimateTextDimens(text, style);
+        }
+        const ctx = TextComponent.textMeasuringCtx;
+        TextComponent.applyTextStyles(ctx, style);
         const measure = ctx.measureText(text);
         // Text is drawn with (0,0) at the bottom left of the baseline.
         const textY = -measure.actualBoundingBoxAscent;
@@ -41,7 +56,7 @@ export default class Text extends AbstractComponent {
     }
     computeBBoxOfPart(part) {
         if (typeof part === 'string') {
-            const textBBox = this.getTextDimens(part, this.style);
+            const textBBox = TextComponent.getTextDimens(part, this.style);
             return textBBox.transformedBoundingBox(this.transform);
         }
         else {
@@ -58,19 +73,22 @@ export default class Text extends AbstractComponent {
         }
         this.contentBBox = bbox !== null && bbox !== void 0 ? bbox : Rect2.empty;
     }
-    render(canvas, _visibleRect) {
+    renderInternal(canvas) {
         const cursor = this.transform;
-        canvas.startObject(this.contentBBox);
         for (const textObject of this.textObjects) {
             if (typeof textObject === 'string') {
                 canvas.drawText(textObject, cursor, this.style);
             }
             else {
                 canvas.pushTransform(cursor);
-                textObject.render(canvas);
+                textObject.renderInternal(canvas);
                 canvas.popTransform();
             }
         }
+    }
+    render(canvas, _visibleRect) {
+        canvas.startObject(this.contentBBox);
+        this.renderInternal(canvas);
         canvas.endObject(this.getLoadSaveData());
     }
     intersects(lineSegment) {
@@ -81,7 +99,7 @@ export default class Text extends AbstractComponent {
         lineSegment = new LineSegment2(p1InThisSpace, p2InThisSpace);
         for (const subObject of this.textObjects) {
             if (typeof subObject === 'string') {
-                const textBBox = Text.getTextDimens(subObject, this.style);
+                const textBBox = TextComponent.getTextDimens(subObject, this.style);
                 // TODO: Use a better intersection check. Perhaps draw the text onto a CanvasElement and
                 // use pixel-testing to check for intersection with its contour.
                 if (textBBox.getEdges().some(edge => lineSegment.intersection(edge) !== null)) {
@@ -96,12 +114,21 @@ export default class Text extends AbstractComponent {
         }
         return false;
     }
+    getBaselinePos() {
+        return this.transform.transformVec2(Vec2.zero);
+    }
+    getTextStyle() {
+        return this.style;
+    }
+    getTransform() {
+        return this.transform;
+    }
     applyTransformation(affineTransfm) {
         this.transform = affineTransfm.rightMul(this.transform);
         this.recomputeBBox();
     }
     createClone() {
-        return new Text(this.textObjects, this.transform, this.style);
+        return new TextComponent(this.textObjects, this.transform, this.style);
     }
     getText() {
         const result = [];
@@ -138,7 +165,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,
@@ -151,7 +178,7 @@ export default class Text extends AbstractComponent {
             if (((_a = data.text) !== null && _a !== void 0 ? _a : null) !== null) {
                 return data.text;
             }
-            return Text.deserializeFromString(data.json);
+            return TextComponent.deserializeFromString(data.json);
         });
         json.transform = json.transform.filter((elem) => typeof elem === 'number');
         if (json.transform.length !== 9) {
@@ -159,7 +186,23 @@ export default class Text extends AbstractComponent {
         }
         const transformData = json.transform;
         const transform = new Mat33(...transformData);
-        return new Text(textObjects, transform, style, getTextDimens);
+        return new TextComponent(textObjects, transform, style);
+    }
+    static fromLines(lines, transform, style) {
+        let lastComponent = null;
+        const components = [];
+        for (const line of lines) {
+            let position = Vec2.zero;
+            if (lastComponent) {
+                const lineMargin = Math.floor(style.size);
+                position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
+            }
+            const component = new TextComponent([line], Mat33.translation(position), style);
+            components.push(component);
+            lastComponent = component;
+        }
+        return new TextComponent(components, transform, style);
     }
 }
-AbstractComponent.registerComponent(componentTypeId, (data) => Text.deserializeFromString(data));
+TextComponent.textMeasuringCtx = null;
+AbstractComponent.registerComponent(componentTypeId, (data) => TextComponent.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.d.ts

@@ -1,6 +1,7 @@
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import Rect2 from '../../math/Rect2';
 import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
 import { StrokeDataPoint } from '../../types';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 export declare const makeFreehandLineBuilder: ComponentBuilderFactory;
@@ -8,11 +9,15 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     private startPoint;
     private minFitAllowed;
     private maxFitAllowed;
+    private viewport;
     private isFirstSegment;
     private pathStartConnector;
     private mostRecentConnector;
     private upperSegments;
     private lowerSegments;
+    private lastUpperBezier;
+    private lastLowerBezier;
+    private parts;
     private buffer;
     private lastPoint;
     private lastExitingVec;
@@ -21,14 +26,16 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     private curveEndWidth;
     private momentum;
     private bbox;
-    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number);
+    constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number, viewport: Viewport);
     getBBox(): Rect2;
     private getRenderingStyle;
-    private previewPath;
+    private previewCurrentPath;
+    private previewFullPath;
     private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;
+    private shouldStartNewSegment;
     private approxCurrentCurveLength;
     private finalizeCurrentCurve;
     private currentSegmentToPath;