js-draw 0.0.1

package/dist/src/geometry/Path.js

@@ -0,0 +1,364 @@
+import { Bezier } from 'bezier-js';
+import LineSegment2 from './LineSegment2';
+import Rect2 from './Rect2';
+import { Vec2 } from './Vec2';
+export var PathCommandType;
+(function (PathCommandType) {
+    PathCommandType[PathCommandType["LineTo"] = 0] = "LineTo";
+    PathCommandType[PathCommandType["MoveTo"] = 1] = "MoveTo";
+    PathCommandType[PathCommandType["CubicBezierTo"] = 2] = "CubicBezierTo";
+    PathCommandType[PathCommandType["QuadraticBezierTo"] = 3] = "QuadraticBezierTo";
+})(PathCommandType || (PathCommandType = {}));
+export default class Path {
+    constructor(startPoint, parts) {
+        this.startPoint = startPoint;
+        this.parts = parts;
+        this.cachedGeometry = null;
+        // Initial bounding box contains one point: the start point.
+        this.bbox = Rect2.bboxOf([startPoint]);
+        // Convert into a representation of the geometry (cache for faster intersection
+        // calculation)
+        for (const part of parts) {
+            this.bbox = this.bbox.union(Path.computeBBoxForSegment(startPoint, part));
+        }
+    }
+    // Lazy-loads and returns this path's geometry
+    get geometry() {
+        if (this.cachedGeometry) {
+            return this.cachedGeometry;
+        }
+        let startPoint = this.startPoint;
+        const geometry = [];
+        for (const part of this.parts) {
+            switch (part.kind) {
+                case PathCommandType.CubicBezierTo:
+                    geometry.push(new Bezier(startPoint.xy, part.controlPoint1.xy, part.controlPoint2.xy, part.endPoint.xy));
+                    startPoint = part.endPoint;
+                    break;
+                case PathCommandType.QuadraticBezierTo:
+                    geometry.push(new Bezier(startPoint.xy, part.controlPoint.xy, part.endPoint.xy));
+                    startPoint = part.endPoint;
+                    break;
+                case PathCommandType.LineTo:
+                    geometry.push(new LineSegment2(startPoint, part.point));
+                    startPoint = part.point;
+                    break;
+                case PathCommandType.MoveTo:
+                    startPoint = part.point;
+                    break;
+            }
+        }
+        this.cachedGeometry = geometry;
+        return this.cachedGeometry;
+    }
+    static computeBBoxForSegment(startPoint, part) {
+        const points = [startPoint];
+        let exhaustivenessCheck;
+        switch (part.kind) {
+            case PathCommandType.MoveTo:
+            case PathCommandType.LineTo:
+                points.push(part.point);
+                break;
+            case PathCommandType.CubicBezierTo:
+                points.push(part.controlPoint1, part.controlPoint2, part.endPoint);
+                break;
+            case PathCommandType.QuadraticBezierTo:
+                points.push(part.controlPoint, part.endPoint);
+                break;
+            default:
+                exhaustivenessCheck = part;
+                return exhaustivenessCheck;
+        }
+        return Rect2.bboxOf(points);
+    }
+    intersection(line) {
+        const result = [];
+        for (const part of this.geometry) {
+            if (part instanceof LineSegment2) {
+                const intersection = part.intersection(line);
+                if (intersection) {
+                    result.push({
+                        curve: part,
+                        parameterValue: intersection.t,
+                        point: intersection.point,
+                    });
+                }
+            }
+            else {
+                const intersectionPoints = part.intersects(line).map(t => {
+                    // We're using the .intersects(line) function, which is documented
+                    // to always return numbers. However, to satisfy the type checker (and
+                    // possibly improperly-defined types),
+                    if (typeof t === 'string') {
+                        t = parseFloat(t);
+                    }
+                    const point = Vec2.ofXY(part.get(t));
+                    // Ensure that the intersection is on the line
+                    if (point.minus(line.p1).magnitude() > line.length
+                        || point.minus(line.p2).magnitude() > line.length) {
+                        return null;
+                    }
+                    return {
+                        point,
+                        parameterValue: t,
+                        curve: part,
+                    };
+                }).filter(entry => entry !== null);
+                result.push(...intersectionPoints);
+            }
+        }
+        return result;
+    }
+    transformedBy(affineTransfm) {
+        const startPoint = affineTransfm.transformVec2(this.startPoint);
+        const newParts = [];
+        let exhaustivenessCheck;
+        for (const part of this.parts) {
+            switch (part.kind) {
+                case PathCommandType.MoveTo:
+                case PathCommandType.LineTo:
+                    newParts.push({
+                        kind: part.kind,
+                        point: affineTransfm.transformVec2(part.point),
+                    });
+                    break;
+                case PathCommandType.CubicBezierTo:
+                    newParts.push({
+                        kind: part.kind,
+                        controlPoint1: affineTransfm.transformVec2(part.controlPoint1),
+                        controlPoint2: affineTransfm.transformVec2(part.controlPoint2),
+                        endPoint: affineTransfm.transformVec2(part.endPoint),
+                    });
+                    break;
+                case PathCommandType.QuadraticBezierTo:
+                    newParts.push({
+                        kind: part.kind,
+                        controlPoint: affineTransfm.transformVec2(part.controlPoint),
+                        endPoint: affineTransfm.transformVec2(part.endPoint),
+                    });
+                    break;
+                default:
+                    exhaustivenessCheck = part;
+                    return exhaustivenessCheck;
+            }
+        }
+        return new Path(startPoint, newParts);
+    }
+    // Creates a new path by joining [other] to the end of this path
+    union(other) {
+        if (!other) {
+            return this;
+        }
+        return new Path(this.startPoint, [
+            ...this.parts,
+            {
+                kind: PathCommandType.MoveTo,
+                point: other.startPoint,
+            },
+            ...other.parts,
+        ]);
+    }
+    static fromRenderable(renderable) {
+        return new Path(renderable.startPoint, renderable.commands);
+    }
+    toRenderable(fill) {
+        return {
+            startPoint: this.startPoint,
+            style: fill,
+            commands: this.parts,
+        };
+    }
+    toString() {
+        return Path.toString(this.startPoint, this.parts);
+    }
+    static toString(startPoint, parts) {
+        const result = [];
+        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*[1-9.])0{4,}\d$/;
+            const hasRoundingDownExp = /^([-]?)(\d*)\.(\d*9{4,}\d)$/;
+            let text = num.toString();
+            if (text.indexOf('.') === -1) {
+                return text;
+            }
+            const roundingDownMatch = hasRoundingDownExp.exec(text);
+            if (roundingDownMatch) {
+                const negativeSign = roundingDownMatch[1];
+                const lastDigit = parseInt(text.charAt(text.length - 1), 10);
+                const postDecimal = parseInt(roundingDownMatch[3], 10);
+                const preDecimal = parseInt(roundingDownMatch[2], 10);
+                let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
+                let carry = 0;
+                if (newPostDecimal.length > postDecimal.toString().length) {
+                    // Left-shift
+                    newPostDecimal = newPostDecimal.substring(1);
+                    carry = 1;
+                }
+                text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
+            }
+            text = text.replace(fixRoundingUpExp, '$1');
+            // Remove trailing period (if it exists)
+            return text.replace(/[.]$/, '');
+        };
+        const addCommand = (command, ...points) => {
+            const parts = [];
+            for (const point of points) {
+                const xComponent = toRoundedString(point.x);
+                const yComponent = toRoundedString(point.y);
+                parts.push(`${xComponent},${yComponent}`);
+            }
+            result.push(`${command}${parts.join(' ')}`);
+        };
+        addCommand('M', startPoint);
+        let exhaustivenessCheck;
+        for (const part of parts) {
+            switch (part.kind) {
+                case PathCommandType.MoveTo:
+                    addCommand('M', part.point);
+                    break;
+                case PathCommandType.LineTo:
+                    addCommand('L', part.point);
+                    break;
+                case PathCommandType.CubicBezierTo:
+                    addCommand('C', part.controlPoint1, part.controlPoint2, part.endPoint);
+                    break;
+                case PathCommandType.QuadraticBezierTo:
+                    addCommand('Q', part.controlPoint, part.endPoint);
+                    break;
+                default:
+                    exhaustivenessCheck = part;
+                    return exhaustivenessCheck;
+            }
+        }
+        return result.join('');
+    }
+    // Create a Path from a SVG path specification.
+    // TODO: Support a larger subset of SVG paths.
+    // TODO: Support s,t shorthands.
+    static fromString(pathString) {
+        // See the MDN reference:
+        // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+        // and
+        // https://www.w3.org/TR/SVG2/paths.html
+        // Remove linebreaks
+        pathString = pathString.split('\n').join(' ');
+        let lastPos = Vec2.zero;
+        let firstPos = null;
+        const commands = [];
+        const moveTo = (point) => {
+            commands.push({
+                kind: PathCommandType.MoveTo,
+                point,
+            });
+        };
+        const lineTo = (point) => {
+            commands.push({
+                kind: PathCommandType.LineTo,
+                point,
+            });
+        };
+        const cubicBezierTo = (cp1, cp2, end) => {
+            commands.push({
+                kind: PathCommandType.CubicBezierTo,
+                controlPoint1: cp1,
+                controlPoint2: cp2,
+                endPoint: end,
+            });
+        };
+        const quadraticBeierTo = (controlPoint, endPoint) => {
+            commands.push({
+                kind: PathCommandType.QuadraticBezierTo,
+                controlPoint,
+                endPoint,
+            });
+        };
+        // Each command: Command character followed by anything that isn't a command character
+        const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+        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) => {
+                if (index % 2 !== 0) {
+                    const currentAsFloat = current;
+                    const prevAsFloat = parts[index - 1];
+                    return accumulator.concat(Vec2.of(prevAsFloat, currentAsFloat));
+                }
+                else {
+                    return accumulator;
+                }
+            }, []).map((coordinate) => {
+                // Lowercase commands are relative, uppercase commands use absolute
+                // positioning
+                if (uppercaseCommand) {
+                    lastPos = coordinate;
+                    return coordinate;
+                }
+                else {
+                    lastPos = lastPos.plus(coordinate);
+                    return lastPos;
+                }
+            });
+            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 (args.length !== expectedPointArgCount) {
+                throw new Error(`
+					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
+				`.trim());
+            }
+            if (args.length > 0) {
+                firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = args[0]);
+            }
+        }
+        return new Path(firstPos !== null && firstPos !== void 0 ? firstPos : Vec2.zero, commands);
+    }
+}

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

@@ -0,0 +1,47 @@
+import LineSegment2 from './LineSegment2';
+import Mat33 from './Mat33';
+import { Point2, Vec2 } from './Vec2';
+interface RectTemplate {
+    x: number;
+    y: number;
+    w?: number;
+    h?: number;
+    width?: number;
+    height?: number;
+}
+export default class Rect2 {
+    readonly x: number;
+    readonly y: number;
+    readonly w: number;
+    readonly h: number;
+    readonly topLeft: Point2;
+    readonly size: Vec2;
+    readonly bottomRight: Point2;
+    readonly center: Point2;
+    readonly area: number;
+    constructor(x: number, y: number, w: number, h: number);
+    translatedBy(vec: Vec2): Rect2;
+    resizedTo(size: Vec2): Rect2;
+    containsPoint(other: Point2): boolean;
+    containsRect(other: Rect2): boolean;
+    intersects(other: Rect2): boolean;
+    intersection(other: Rect2): Rect2 | null;
+    union(other: Rect2): Rect2;
+    grownToPoint(point: Point2, margin?: number): Rect2;
+    grownBy(margin: number): Rect2;
+    get corners(): Point2[];
+    get maxDimension(): number;
+    get topRight(): import("./Vec3").default;
+    get bottomLeft(): import("./Vec3").default;
+    getEdges(): LineSegment2[];
+    transformedBoundingBox(affineTransform: Mat33): Rect2;
+    /** @return true iff this is equal to [other] ± fuzz */
+    eq(other: Rect2, fuzz?: number): boolean;
+    toString(): string;
+    static fromCorners(corner1: Point2, corner2: Point2): Rect2;
+    static bboxOf(points: Point2[], margin?: number): Rect2;
+    static of(template: RectTemplate): Rect2;
+    static empty: Rect2;
+    static unitSquare: Rect2;
+}
+export {};

package/dist/src/geometry/Rect2.js

@@ -0,0 +1,148 @@
+import LineSegment2 from './LineSegment2';
+import { Vec2 } from './Vec2';
+// invariant: w > 0, h > 0.
+export default class Rect2 {
+    constructor(x, y, w, h) {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+        if (w < 0) {
+            this.x += w;
+            this.w = Math.abs(w);
+        }
+        if (h < 0) {
+            this.y += h;
+            this.h = Math.abs(h);
+        }
+        // Precompute/store vector forms.
+        this.topLeft = Vec2.of(this.x, this.y);
+        this.size = Vec2.of(this.w, this.h);
+        this.bottomRight = this.topLeft.plus(this.size);
+        this.center = this.topLeft.plus(this.size.times(0.5));
+        this.area = this.w * this.h;
+    }
+    translatedBy(vec) {
+        return new Rect2(vec.x + this.x, vec.y + this.y, this.w, this.h);
+    }
+    resizedTo(size) {
+        return new Rect2(this.x, this.y, size.x, size.y);
+    }
+    containsPoint(other) {
+        return this.x <= other.x && this.y <= other.y
+            && this.x + this.w >= other.x && this.y + this.h >= other.y;
+    }
+    containsRect(other) {
+        return this.x <= other.x && this.y <= other.y
+            && this.bottomRight.x >= other.bottomRight.x
+            && this.bottomRight.y >= other.bottomRight.y;
+    }
+    intersects(other) {
+        return this.intersection(other) !== null;
+    }
+    // Returns the overlap of this and [other], or null, if no such
+    // /         overlap exists
+    intersection(other) {
+        const topLeft = this.topLeft.zip(other.topLeft, Math.max);
+        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
+        // The intersection can't be outside of this rectangle
+        if (!this.containsPoint(topLeft) || !this.containsPoint(bottomRight)) {
+            return null;
+        }
+        else if (!other.containsPoint(topLeft) || !other.containsPoint(bottomRight)) {
+            return null;
+        }
+        return Rect2.fromCorners(topLeft, bottomRight);
+    }
+    // Returns a new rectangle containing both [this] and [other].
+    union(other) {
+        const topLeft = this.topLeft.zip(other.topLeft, Math.min);
+        const bottomRight = this.bottomRight.zip(other.bottomRight, Math.max);
+        return Rect2.fromCorners(topLeft, bottomRight);
+    }
+    // Returns a rectangle containing this and [point].
+    // [margin] is the minimum distance between the new point and the edge
+    // of the resultant rectangle.
+    grownToPoint(point, margin = 0) {
+        const otherRect = new Rect2(point.x - margin, point.y - margin, margin * 2, margin * 2);
+        return this.union(otherRect);
+    }
+    // Returns this grown by [margin] in both the x and y directions.
+    grownBy(margin) {
+        return new Rect2(this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2);
+    }
+    get corners() {
+        return [
+            this.bottomRight,
+            this.topRight,
+            this.topLeft,
+            this.bottomLeft,
+        ];
+    }
+    get maxDimension() {
+        return Math.max(this.w, this.h);
+    }
+    get topRight() {
+        return this.bottomRight.plus(Vec2.of(0, -this.h));
+    }
+    get bottomLeft() {
+        return this.topLeft.plus(Vec2.of(0, this.h));
+    }
+    // Returns edges in the order
+    // [ rightEdge, topEdge, leftEdge, bottomEdge ]
+    getEdges() {
+        const corners = this.corners;
+        return [
+            new LineSegment2(corners[0], corners[1]),
+            new LineSegment2(corners[1], corners[2]),
+            new LineSegment2(corners[2], corners[3]),
+            new LineSegment2(corners[3], corners[0]),
+        ];
+    }
+    // [affineTransform] is a transformation matrix that both scales and **translates**.
+    // the bounding box of this' four corners after transformed by the given affine transformation.
+    transformedBoundingBox(affineTransform) {
+        return Rect2.bboxOf(this.corners.map(corner => affineTransform.transformVec2(corner)));
+    }
+    /** @return true iff this is equal to [other] ± fuzz */
+    eq(other, fuzz = 0) {
+        return this.topLeft.eq(other.topLeft, fuzz) && this.size.eq(other.size, fuzz);
+    }
+    toString() {
+        return `Rect(point(${this.x}, ${this.y}), size(${this.w}, ${this.h}))`;
+    }
+    static fromCorners(corner1, corner2) {
+        return new Rect2(Math.min(corner1.x, corner2.x), Math.min(corner1.y, corner2.y), Math.abs(corner1.x - corner2.x), Math.abs(corner1.y - corner2.y));
+    }
+    // Returns a box that contains all points in [points] with at least [margin]
+    // between each point and the edge of the box.
+    static bboxOf(points, margin = 0) {
+        let minX = 0;
+        let minY = 0;
+        let maxX = 0;
+        let maxY = 0;
+        let isFirst = true;
+        for (const point of points) {
+            if (isFirst) {
+                minX = point.x;
+                minY = point.y;
+                maxX = point.x;
+                maxY = point.y;
+                isFirst = false;
+            }
+            minX = Math.min(minX, point.x);
+            minY = Math.min(minY, point.y);
+            maxX = Math.max(maxX, point.x);
+            maxY = Math.max(maxY, point.y);
+        }
+        return Rect2.fromCorners(Vec2.of(minX - margin, minY - margin), Vec2.of(maxX + margin, maxY + margin));
+    }
+    static of(template) {
+        var _a, _b, _c, _d;
+        const width = (_b = (_a = template.width) !== null && _a !== void 0 ? _a : template.w) !== null && _b !== void 0 ? _b : 0;
+        const height = (_d = (_c = template.height) !== null && _c !== void 0 ? _c : template.h) !== null && _d !== void 0 ? _d : 0;
+        return new Rect2(template.x, template.y, width, height);
+    }
+}
+Rect2.empty = new Rect2(0, 0, 0, 0);
+Rect2.unitSquare = new Rect2(0, 0, 1, 1);

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

@@ -0,0 +1,13 @@
+import Vec3 from './Vec3';
+export declare namespace Vec2 {
+    const of: (x: number, y: number) => Vec2;
+    const ofXY: ({ x, y }: {
+        x: number;
+        y: number;
+    }) => Vec2;
+    const unitX: Vec3;
+    const unitY: Vec3;
+    const zero: Vec3;
+}
+export declare type Point2 = Vec3;
+export declare type Vec2 = Vec3;

package/dist/src/geometry/Vec2.js

@@ -0,0 +1,13 @@
+import Vec3 from './Vec3';
+export var Vec2;
+(function (Vec2) {
+    Vec2.of = (x, y) => {
+        return Vec3.of(x, y, 0);
+    };
+    Vec2.ofXY = ({ x, y }) => {
+        return Vec3.of(x, y, 0);
+    };
+    Vec2.unitX = Vec2.of(1, 0);
+    Vec2.unitY = Vec2.of(0, 1);
+    Vec2.zero = Vec2.of(0, 0);
+})(Vec2 || (Vec2 = {}));

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

@@ -0,0 +1,32 @@
+export default class Vec3 {
+    readonly x: number;
+    readonly y: number;
+    readonly z: number;
+    private constructor();
+    get xy(): {
+        x: number;
+        y: number;
+    };
+    static of(x: number, y: number, z: number): Vec3;
+    at(idx: number): number;
+    magnitude(): number;
+    magnitudeSquared(): number;
+    angle(): number;
+    normalized(): Vec3;
+    times(c: number): Vec3;
+    plus(v: Vec3): Vec3;
+    minus(v: Vec3): Vec3;
+    dot(other: Vec3): number;
+    cross(other: Vec3): Vec3;
+    extend(distance: number, direction: Vec3): Vec3;
+    lerp(target: Vec3, fractionTo: number): Vec3;
+    zip(other: Vec3, zip: (componentInThis: number, componentInOther: number) => number): Vec3;
+    map(fn: (component: number) => number): Vec3;
+    asArray(): number[];
+    eq(other: Vec3, fuzz: number): boolean;
+    toString(): string;
+    static unitX: Vec3;
+    static unitY: Vec3;
+    static unitZ: Vec3;
+    static zero: Vec3;
+}