js-draw 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,3 +1,10 @@
 
+# 0.0.4
+ * Preset shapes
+   * Arrow
+   * Filled rectangle
+   * Outlined rectangle
+   * Line
+
 # 0.0.2
  * Adjust default editor colors based on system theme.

package/dist/src/Editor.d.ts

@@ -28,7 +28,7 @@ export declare class Editor {
     showLoadingWarning(fractionLoaded: number): void;
     hideLoadingWarning(): void;
     announceForAccessibility(message: string): void;
-    addToolbar(): HTMLToolbar;
+    addToolbar(defaultLayout?: boolean): HTMLToolbar;
     private registerListeners;
     dispatch(command: Command, addToHistory?: boolean): void;
     private asyncApplyOrUnapplyCommands;

package/dist/src/Editor.js

@@ -80,8 +80,13 @@ export class Editor {
     announceForAccessibility(message) {
         this.accessibilityAnnounceArea.innerText = message;
     }
-    addToolbar() {
-        return new HTMLToolbar(this, this.container, this.localization);
+    addToolbar(defaultLayout = true) {
+        const toolbar = new HTMLToolbar(this, this.container, this.localization);
+        if (defaultLayout) {
+            toolbar.addDefaultToolWidgets();
+            toolbar.addDefaultActionButtons();
+        }
+        return toolbar;
     }
     registerListeners() {
         const pointers = {};

package/dist/src/EditorImage.d.ts

@@ -30,6 +30,8 @@ export declare class ImageNode {
     private bbox;
     private children;
     private targetChildCount;
+    private minZIndex;
+    private maxZIndex;
     constructor(parent?: ImageNode | null);
     getContent(): AbstractComponent | null;
     getParent(): ImageNode | null;

package/dist/src/EditorImage.js

@@ -95,6 +95,8 @@ export class ImageNode {
         this.children = [];
         this.bbox = Rect2.empty;
         this.content = null;
+        this.minZIndex = null;
+        this.maxZIndex = null;
     }
     getContent() {
         return this.content;
@@ -107,7 +109,7 @@ export class ImageNode {
             return child.getBBox().intersects(region);
         });
     }
-    // / Returns a list of `ImageNode`s with content (and thus no children).
+    // Returns a list of `ImageNode`s with content (and thus no children).
     getLeavesInRegion(region, minFractionOfRegion = 0) {
         const result = [];
         // Don't render if too small
@@ -181,21 +183,41 @@ export class ImageNode {
         return this.bbox;
     }
     // Recomputes this' bounding box. If [bubbleUp], also recompute
-    // this' ancestors bounding boxes
+    // this' ancestors bounding boxes. This also re-computes this' bounding box
+    // in the z-direction (z-indicies).
     recomputeBBox(bubbleUp) {
-        var _a;
+        var _a, _b, _c;
         const oldBBox = this.bbox;
         if (this.content !== null) {
             this.bbox = this.content.getBBox();
+            this.minZIndex = this.content.zIndex;
+            this.maxZIndex = this.content.zIndex;
         }
         else {
             this.bbox = Rect2.empty;
+            this.minZIndex = null;
+            this.maxZIndex = null;
+            let isFirst = true;
             for (const child of this.children) {
-                this.bbox = this.bbox.union(child.getBBox());
+                if (isFirst) {
+                    this.bbox = child.getBBox();
+                    isFirst = false;
+                }
+                else {
+                    this.bbox = this.bbox.union(child.getBBox());
+                }
+                (_a = this.minZIndex) !== null && _a !== void 0 ? _a : (this.minZIndex = child.minZIndex);
+                (_b = this.maxZIndex) !== null && _b !== void 0 ? _b : (this.maxZIndex = child.maxZIndex);
+                if (child.minZIndex !== null && this.minZIndex !== null) {
+                    this.minZIndex = Math.min(child.minZIndex, this.minZIndex);
+                }
+                if (child.maxZIndex !== null && this.maxZIndex !== null) {
+                    this.maxZIndex = Math.max(child.maxZIndex, this.maxZIndex);
+                }
             }
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            (_a = this.parent) === null || _a === void 0 ? void 0 : _a.recomputeBBox(true);
+            (_c = this.parent) === null || _c === void 0 ? void 0 : _c.recomputeBBox(true);
         }
     }
     rebalance() {
@@ -221,6 +243,8 @@ export class ImageNode {
     }
     // Remove this node and all of its children
     remove() {
+        this.minZIndex = null;
+        this.maxZIndex = null;
         if (!this.parent) {
             this.content = null;
             this.children = [];

package/dist/src/Pointer.js

@@ -44,7 +44,7 @@ export default class Pointer {
             device = PointerDevice.Eraser;
         }
         const timeStamp = (new Date()).getTime();
-        const canvasPos = viewport.screenToCanvas(screenPos);
+        const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
         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/Viewport.d.ts

@@ -3,7 +3,7 @@ import Editor from './Editor';
 import Mat33 from './geometry/Mat33';
 import Rect2 from './geometry/Rect2';
 import { Point2, Vec2 } from './geometry/Vec2';
-import { StrokeDataPoint } from './StrokeBuilder';
+import { StrokeDataPoint } from './types';
 import { EditorNotifier } from './types';
 declare type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
 export declare class Viewport {

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

@@ -11,7 +11,7 @@ export default abstract class AbstractComponent {
     private static zIndexCounter;
     protected constructor();
     getBBox(): Rect2;
-    abstract render(canvas: AbstractRenderer, visibleRect: Rect2): void;
+    abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     abstract intersects(lineSegment: LineSegment2): boolean;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): Command;

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

@@ -9,7 +9,7 @@ export default class Stroke extends AbstractComponent {
     protected contentBBox: Rect2;
     constructor(parts: RenderablePathSpec[]);
     intersects(line: LineSegment2): boolean;
-    render(canvas: AbstractRenderer, visibleRect: Rect2): void;
+    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     private bboxForPart;
     protected applyTransformation(affineTransfm: Mat33): void;
     description(localization: ImageComponentLocalization): string;

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));