js-draw 0.0.2 → 0.0.5

package/dist/src/components/Stroke.js

@@ -37,7 +37,7 @@ export default class Stroke extends AbstractComponent {
         canvas.startObject(this.getBBox());
         for (const part of this.parts) {
             const bbox = part.bbox;
-            if (bbox.intersects(visibleRect)) {
+            if (!visibleRect || bbox.intersects(visibleRect)) {
                 canvas.drawPath(part);
             }
         }

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

@@ -8,7 +8,7 @@ export default class UnknownSVGObject extends AbstractComponent {
     private svgObject;
     protected contentBBox: Rect2;
     constructor(svgObject: SVGElement);
-    render(canvas: AbstractRenderer, _visibleRect: Rect2): void;
+    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
     protected applyTransformation(_affineTransfm: Mat33): void;
     description(localization: ImageComponentLocalization): string;

package/dist/src/components/builders/ArrowBuilder.d.ts

@@ -0,0 +1,17 @@
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import AbstractComponent from '../AbstractComponent';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makeArrowBuilder: ComponentBuilderFactory;
+export default class ArrowBuilder implements ComponentBuilder {
+    private readonly startPoint;
+    private endPoint;
+    constructor(startPoint: StrokeDataPoint);
+    private getLineWidth;
+    getBBox(): Rect2;
+    private buildPreview;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}

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

@@ -0,0 +1,83 @@
+import { PathCommandType } from '../../geometry/Path';
+import Stroke from '../Stroke';
+export const makeArrowBuilder = (initialPoint, _viewport) => {
+    return new ArrowBuilder(initialPoint);
+};
+export default class ArrowBuilder {
+    constructor(startPoint) {
+        this.startPoint = startPoint;
+        this.endPoint = startPoint;
+    }
+    getLineWidth() {
+        return Math.max(this.endPoint.width, this.startPoint.width);
+    }
+    getBBox() {
+        const preview = this.buildPreview();
+        return preview.getBBox();
+    }
+    buildPreview() {
+        const startPoint = this.startPoint.pos;
+        const endPoint = this.endPoint.pos;
+        const toEnd = endPoint.minus(startPoint).normalized();
+        const arrowLength = endPoint.minus(startPoint).length();
+        // Ensure that the arrow tip is smaller than the arrow.
+        const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
+        const startSize = this.startPoint.width / 2;
+        const endSize = this.endPoint.width / 2;
+        const arrowTipBase = endPoint.minus(toEnd.times(arrowTipSize));
+        // Scaled normal vectors.
+        const lineNormal = toEnd.orthog();
+        const scaledStartNormal = lineNormal.times(startSize);
+        const scaledBaseNormal = lineNormal.times(endSize);
+        const preview = new Stroke([
+            {
+                startPoint: arrowTipBase.minus(scaledBaseNormal),
+                commands: [
+                    // Stem
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: startPoint.minus(scaledStartNormal),
+                    },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: startPoint.plus(scaledStartNormal),
+                    },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: arrowTipBase.plus(scaledBaseNormal),
+                    },
+                    // Head
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal))
+                    },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: endPoint.plus(toEnd.times(endSize)),
+                    },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+                    },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: arrowTipBase.minus(scaledBaseNormal),
+                    },
+                ],
+                style: {
+                    fill: this.startPoint.color,
+                }
+            }
+        ]);
+        return preview;
+    }
+    build() {
+        return this.buildPreview();
+    }
+    preview(renderer) {
+        this.buildPreview().render(renderer);
+    }
+    addPoint(point) {
+        this.endPoint = point;
+    }
+}

package/dist/src/{StrokeBuilder.d.ts → components/builders/FreehandLineBuilder.d.ts}

@@ -1,15 +1,10 @@
-import Color4 from './Color4';
-import { RenderablePathSpec } from './rendering/AbstractRenderer';
-import { Point2 } from './geometry/Vec2';
-import Rect2 from './geometry/Rect2';
-import Stroke from './components/Stroke';
-export interface StrokeDataPoint {
-    pos: Point2;
-    width: number;
-    time: number;
-    color: Color4;
-}
-export default class StrokeBuilder {
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import Rect2 from '../../geometry/Rect2';
+import Stroke from '../Stroke';
+import { StrokeDataPoint } from '../../types';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makeFreehandLineBuilder: ComponentBuilderFactory;
+export default class FreehandLineBuilder implements ComponentBuilder {
     private startPoint;
     private minFitAllowed;
     private maxFitAllowed;
@@ -25,7 +20,8 @@ export default class StrokeBuilder {
     constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number);
     getBBox(): Rect2;
     private getRenderingStyle;
-    preview(): RenderablePathSpec[];
+    private getPreview;
+    preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;
     private finalizeCurrentCurve;

package/dist/src/{StrokeBuilder.js → components/builders/FreehandLineBuilder.js}

@@ -1,12 +1,20 @@
 import { Bezier } from 'bezier-js';
-import { Vec2 } from './geometry/Vec2';
-import Rect2 from './geometry/Rect2';
-import { PathCommandType } from './geometry/Path';
-import LineSegment2 from './geometry/LineSegment2';
-import Stroke from './components/Stroke';
-import Viewport from './Viewport';
+import { Vec2 } from '../../geometry/Vec2';
+import Rect2 from '../../geometry/Rect2';
+import { PathCommandType } from '../../geometry/Path';
+import LineSegment2 from '../../geometry/LineSegment2';
+import Stroke from '../Stroke';
+import Viewport from '../../Viewport';
+export const makeFreehandLineBuilder = (initialPoint, viewport) => {
+    // Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
+    // less than ± 2 px from the curve.
+    const canvasTransform = viewport.screenToCanvasTransform;
+    const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
+    const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+    return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist);
+};
 // Handles stroke smoothing and creates Strokes from user/stylus input.
-export default class StrokeBuilder {
+export default class FreehandLineBuilder {
     constructor(startPoint, 
     // Maximum distance from the actual curve (irrespective of stroke width)
     // for which a point is considered 'part of the curve'.
@@ -34,13 +42,18 @@ export default class StrokeBuilder {
         };
     }
     // Get the segments that make up this' path. Can be called after calling build()
-    preview() {
+    getPreview() {
         if (this.currentCurve && this.lastPoint) {
             const currentPath = this.currentSegmentToPath();
             return this.segments.concat(currentPath);
         }
         return this.segments;
     }
+    preview(renderer) {
+        for (const part of this.getPreview()) {
+            renderer.drawPath(part);
+        }
+    }
     build() {
         if (this.lastPoint) {
             this.finalizeCurrentCurve();
@@ -179,7 +192,12 @@ export default class StrokeBuilder {
                 return;
             }
             const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
-            if (this.lastPoint.pos.minus(newPoint.pos).magnitude() < threshold) {
+            const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
+                && this.segments.length === 0;
+            // Snap to the starting point if the stroke is contained within a small ball centered
+            // at the starting point.
+            // This allows us to create a circle/dot at the start of the stroke.
+            if (shouldSnapToInitial) {
                 return;
             }
             const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);

package/dist/src/components/builders/LineBuilder.d.ts

@@ -0,0 +1,16 @@
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import AbstractComponent from '../AbstractComponent';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makeLineBuilder: ComponentBuilderFactory;
+export default class LineBuilder implements ComponentBuilder {
+    private readonly startPoint;
+    private endPoint;
+    constructor(startPoint: StrokeDataPoint);
+    getBBox(): Rect2;
+    private buildPreview;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}

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

@@ -0,0 +1,57 @@
+import { PathCommandType } from '../../geometry/Path';
+import Stroke from '../Stroke';
+export const makeLineBuilder = (initialPoint, _viewport) => {
+    return new LineBuilder(initialPoint);
+};
+export default class LineBuilder {
+    constructor(startPoint) {
+        this.startPoint = startPoint;
+        this.endPoint = startPoint;
+    }
+    getBBox() {
+        const preview = this.buildPreview();
+        return preview.getBBox();
+    }
+    buildPreview() {
+        const startPoint = this.startPoint.pos;
+        const endPoint = this.endPoint.pos;
+        const toEnd = endPoint.minus(startPoint).normalized();
+        const startSize = this.startPoint.width / 2;
+        const endSize = this.endPoint.width / 2;
+        const lineNormal = toEnd.orthog();
+        const scaledStartNormal = lineNormal.times(startSize);
+        const scaledEndNormal = lineNormal.times(endSize);
+        const preview = new Stroke([
+            {
+                startPoint: startPoint.minus(scaledStartNormal),
+                commands: [
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: startPoint.plus(scaledStartNormal),
+                    },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: endPoint.plus(scaledEndNormal),
+                    },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: endPoint.minus(scaledEndNormal),
+                    },
+                ],
+                style: {
+                    fill: this.startPoint.color,
+                }
+            }
+        ]);
+        return preview;
+    }
+    build() {
+        return this.buildPreview();
+    }
+    preview(renderer) {
+        this.buildPreview().render(renderer);
+    }
+    addPoint(point) {
+        this.endPoint = point;
+    }
+}

package/dist/src/components/builders/RectangleBuilder.d.ts

@@ -0,0 +1,18 @@
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import AbstractComponent from '../AbstractComponent';
+import { ComponentBuilder, ComponentBuilderFactory } from './types';
+export declare const makeFilledRectangleBuilder: ComponentBuilderFactory;
+export declare const makeOutlinedRectangleBuilder: ComponentBuilderFactory;
+export default class RectangleBuilder implements ComponentBuilder {
+    private readonly startPoint;
+    private filled;
+    private endPoint;
+    constructor(startPoint: StrokeDataPoint, filled: boolean);
+    getBBox(): Rect2;
+    private buildPreview;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}

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

@@ -0,0 +1,41 @@
+import Path from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import Stroke from '../Stroke';
+export const makeFilledRectangleBuilder = (initialPoint, _viewport) => {
+    return new RectangleBuilder(initialPoint, true);
+};
+export const makeOutlinedRectangleBuilder = (initialPoint, _viewport) => {
+    return new RectangleBuilder(initialPoint, false);
+};
+export default class RectangleBuilder {
+    constructor(startPoint, filled) {
+        this.startPoint = startPoint;
+        this.filled = filled;
+        // Initially, the start and end points are the same.
+        this.endPoint = startPoint;
+    }
+    getBBox() {
+        const preview = this.buildPreview();
+        return preview.getBBox();
+    }
+    buildPreview() {
+        const startPoint = this.startPoint.pos;
+        const endPoint = this.endPoint.pos;
+        const path = Path.fromRect(Rect2.fromCorners(startPoint, endPoint), this.filled ? null : this.endPoint.width);
+        const preview = new Stroke([
+            path.toRenderable({
+                fill: this.endPoint.color
+            }),
+        ]);
+        return preview;
+    }
+    build() {
+        return this.buildPreview();
+    }
+    preview(renderer) {
+        this.buildPreview().render(renderer);
+    }
+    addPoint(point) {
+        this.endPoint = point;
+    }
+}

package/dist/src/components/builders/types.d.ts

@@ -0,0 +1,12 @@
+import Rect2 from '../../geometry/Rect2';
+import AbstractRenderer from '../../rendering/AbstractRenderer';
+import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
+import AbstractComponent from '../AbstractComponent';
+export interface ComponentBuilder {
+    getBBox(): Rect2;
+    build(): AbstractComponent;
+    preview(renderer: AbstractRenderer): void;
+    addPoint(point: StrokeDataPoint): void;
+}
+export declare type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

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

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

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

@@ -46,6 +46,7 @@ export default class Path {
     intersection(line: LineSegment2): IntersectionResult[];
     transformedBy(affineTransfm: Mat33): Path;
     union(other: Path | null): Path;
+    static fromRect(rect: Rect2, lineWidth?: number | null): Path;
     static fromRenderable(renderable: RenderablePathSpec): Path;
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
     toString(): string;

package/dist/src/geometry/Path.js

@@ -158,6 +158,38 @@ export default class Path {
             ...other.parts,
         ]);
     }
+    // Returns a path that outlines [rect]. If [lineWidth] is not given, the resultant path is
+    // the outline of [rect]. Otherwise, the resultant path represents a line of width [lineWidth]
+    // that traces [rect].
+    static fromRect(rect, lineWidth = null) {
+        const commands = [];
+        let corners;
+        let startPoint;
+        if (lineWidth !== null) {
+            // Vector from the top left corner or bottom right corner to the edge of the
+            // stroked region.
+            const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
+            const innerRect = Rect2.fromCorners(rect.topLeft.plus(cornerToEdge), rect.bottomRight.minus(cornerToEdge));
+            const outerRect = Rect2.fromCorners(rect.topLeft.minus(cornerToEdge), rect.bottomRight.plus(cornerToEdge));
+            corners = [
+                innerRect.corners[3],
+                ...innerRect.corners,
+                ...outerRect.corners.reverse(),
+            ];
+            startPoint = outerRect.corners[3];
+        }
+        else {
+            corners = rect.corners.slice(1);
+            startPoint = rect.corners[0];
+        }
+        for (const corner of corners) {
+            commands.push({
+                kind: PathCommandType.LineTo,
+                point: corner,
+            });
+        }
+        return new Path(startPoint, commands);
+    }
     static fromRenderable(renderable) {
         return new Path(renderable.startPoint, renderable.commands);
     }

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

@@ -9,6 +9,7 @@ export default class Vec3 {
     };
     static of(x: number, y: number, z: number): Vec3;
     at(idx: number): number;
+    length(): number;
     magnitude(): number;
     magnitudeSquared(): number;
     angle(): number;
@@ -18,6 +19,7 @@ export default class Vec3 {
     minus(v: Vec3): Vec3;
     dot(other: Vec3): number;
     cross(other: Vec3): Vec3;
+    orthog(): Vec3;
     extend(distance: number, direction: Vec3): Vec3;
     lerp(target: Vec3, fractionTo: number): Vec3;
     zip(other: Vec3, zip: (componentInThis: number, componentInOther: number) => number): Vec3;

package/dist/src/geometry/Vec3.js

@@ -26,6 +26,10 @@ export default class Vec3 {
             return this.z;
         throw new Error(`${idx} out of bounds!`);
     }
+    // Alias for this.magnitude
+    length() {
+        return this.magnitude();
+    }
     magnitude() {
         return Math.sqrt(this.dot(this));
     }
@@ -58,6 +62,15 @@ 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);
     }
+    // Returns a vector orthogonal to this. If this is a Vec2, returns [this] rotated
+    // 90 degrees counter-clockwise.
+    orthog() {
+        // If parallel to the z-axis
+        if (this.dot(Vec3.unitX) === 0 && this.dot(Vec3.unitY) === 0) {
+            return this.dot(Vec3.unitX) === 0 ? Vec3.unitX : this.cross(Vec3.unitX).normalized();
+        }
+        return this.cross(Vec3.unitZ.times(-1)).normalized();
+    }
     // Returns this plus a vector of length [distance] in [direction]
     extend(distance, direction) {
         return this.plus(direction.normalized().times(distance));

package/dist/src/localization.d.ts

@@ -1,6 +1,6 @@
 import { CommandLocalization } from './commands/localization';
 import { ImageComponentLocalization } from './components/localization';
-import { ToolbarLocalization } from './toolbar/types';
+import { ToolbarLocalization } from './toolbar/localization';
 import { ToolLocalization } from './tools/localization';
 export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
     undoAnnouncement: (actionDescription: string) => string;

package/dist/src/localization.js

@@ -1,5 +1,5 @@
 import { defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization } from './components/localization';
-import HTMLToolbar from './toolbar/HTMLToolbar';
+import { defaultToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization } from './tools/localization';
-export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, HTMLToolbar.defaultLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });
+export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });

package/dist/src/rendering/AbstractRenderer.js

@@ -1,6 +1,4 @@
-import { PathCommandType } from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
-import { Vec2 } from '../geometry/Vec2';
+import Path, { PathCommandType } from '../geometry/Path';
 const stylesEqual = (a, b) => {
     var _a, _b, _c, _d, _e;
     return a === b || (a.fill.eq(b.fill)
@@ -65,28 +63,8 @@ export default class AbstractRenderer {
     }
     // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
     drawRect(rect, lineWidth, lineFill) {
-        const commands = [];
-        // Vector from the top left corner or bottom right corner to the edge of the
-        // stroked region.
-        const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
-        const innerRect = Rect2.fromCorners(rect.topLeft.plus(cornerToEdge), rect.bottomRight.minus(cornerToEdge));
-        const outerRect = Rect2.fromCorners(rect.topLeft.minus(cornerToEdge), rect.bottomRight.plus(cornerToEdge));
-        const corners = [
-            innerRect.corners[3],
-            ...innerRect.corners,
-            ...outerRect.corners.reverse(),
-        ];
-        for (const corner of corners) {
-            commands.push({
-                kind: PathCommandType.LineTo,
-                point: corner,
-            });
-        }
-        this.drawPath({
-            startPoint: outerRect.corners[3],
-            commands,
-            style: lineFill,
-        });
+        const path = Path.fromRect(rect, lineWidth);
+        this.drawPath(path.toRenderable(lineFill));
     }
     // Note the start/end of an object with the given bounding box.
     startObject(_boundingBox) {

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

@@ -1,12 +1,14 @@
 import Editor from '../Editor';
-import { ToolbarLocalization } from './types';
+import { ToolbarLocalization } from './localization';
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
-    static defaultLocalization: ToolbarLocalization;
+    private penTypes;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    setupColorPickers(): void;
     addActionButton(text: string, command: () => void, parent?: Element): HTMLButtonElement;
     private addUndoRedoButtons;
-    private addElements;
+    addDefaultToolWidgets(): void;
+    addDefaultActionButtons(): void;
 }