js-draw 0.25.1 → 1.0.0

package/dist/mjs/rendering/renderers/AbstractRenderer.mjs

@@ -1,13 +1,13 @@
-import  Path, { PathCommandType }  from '../../math/shapes/Path.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
+import { Vec2, Path, PathCommandType } from '@js-draw/math';
 import  { stylesEqual }  from '../RenderingStyle.mjs';
+import  { pathToRenderable }  from '../RenderablePathSpec.mjs';
 /**
  * Abstract base class for renderers.
  *
  * @see {@link EditorImage.render}
  */
-var AbstractRenderer = /** @class */ (function () {
-    function AbstractRenderer(viewport) {
+export default class AbstractRenderer {
+    constructor(viewport) {
         this.viewport = viewport;
         // If null, this' transformation is linked to the Viewport
         this.selfTransform = null;
@@ -17,16 +17,15 @@ var AbstractRenderer = /** @class */ (function () {
     }
     // this.canvasToScreen, etc. should be used instead of the corresponding
     // methods on Viewport.
-    AbstractRenderer.prototype.getViewport = function () { return this.viewport; };
-    AbstractRenderer.prototype.setDraftMode = function (_draftMode) { };
-    AbstractRenderer.prototype.flushPath = function () {
+    getViewport() { return this.viewport; }
+    setDraftMode(_draftMode) { }
+    flushPath() {
         if (!this.currentPaths) {
             return;
         }
-        var lastStyle = null;
-        for (var _i = 0, _a = this.currentPaths; _i < _a.length; _i++) {
-            var path = _a[_i];
-            var startPoint = path.startPoint, commands = path.commands, style = path.style;
+        let lastStyle = null;
+        for (const path of this.currentPaths) {
+            const { startPoint, commands, style } = path;
             if (!lastStyle || !stylesEqual(lastStyle, style)) {
                 if (lastStyle) {
                     this.endPath(lastStyle);
@@ -37,8 +36,7 @@ var AbstractRenderer = /** @class */ (function () {
             else {
                 this.moveTo(startPoint);
             }
-            for (var _b = 0, commands_1 = commands; _b < commands_1.length; _b++) {
-                var command = commands_1[_b];
+            for (const command of commands) {
                 if (command.kind === PathCommandType.LineTo) {
                     this.lineTo(command.point);
                 }
@@ -57,12 +55,12 @@ var AbstractRenderer = /** @class */ (function () {
             this.endPath(lastStyle);
         }
         this.currentPaths = [];
-    };
+    }
     /**
      * Draws a styled path. If within an object started by {@link startObject},
      * the resultant path may not be visible until {@link endObject} is called.
      */
-    AbstractRenderer.prototype.drawPath = function (path) {
+    drawPath(path) {
         // If we're being called outside of an object,
         // we can't delay rendering
         if (this.objectLevel === 0) {
@@ -75,18 +73,18 @@ var AbstractRenderer = /** @class */ (function () {
             // segments of the same stroke from being visible.
             this.currentPaths.push(path);
         }
-    };
+    }
     // Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
     // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
-    AbstractRenderer.prototype.drawRect = function (rect, lineWidth, lineFill) {
-        var path = Path.fromRect(rect, lineWidth);
-        this.drawPath(path.toRenderable(lineFill));
-    };
+    drawRect(rect, lineWidth, lineFill) {
+        const path = Path.fromRect(rect, lineWidth);
+        this.drawPath(pathToRenderable(path, lineFill));
+    }
     /** Draws a filled rectangle. */
-    AbstractRenderer.prototype.fillRect = function (rect, fill) {
-        var path = Path.fromRect(rect);
-        this.drawPath(path.toRenderable({ fill: fill }));
-    };
+    fillRect(rect, fill) {
+        const path = Path.fromRect(rect);
+        this.drawPath(pathToRenderable(path, { fill }));
+    }
     /**
      * This should be called whenever a new object is being drawn.
      *
@@ -94,13 +92,13 @@ var AbstractRenderer = /** @class */ (function () {
      * @param _clip Whether content outside `_boundingBox` should be drawn. Renderers
      *              that override this method are not required to support `_clip`.
      */
-    AbstractRenderer.prototype.startObject = function (_boundingBox, _clip) {
+    startObject(_boundingBox, _clip) {
         if (this.objectLevel > 0) {
             this.flushPath();
         }
         this.currentPaths = [];
         this.objectLevel++;
-    };
+    }
     /**
      * Notes the end of an object.
      * @param _loaderData - a map from strings to JSON-ifyable objects
@@ -111,7 +109,7 @@ var AbstractRenderer = /** @class */ (function () {
      * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
      * Renderers may ignore this.
      */
-    AbstractRenderer.prototype.endObject = function (_loaderData, _objectTags) {
+    endObject(_loaderData, _objectTags) {
         // Render the paths all at once
         this.flushPath();
         this.currentPaths = null;
@@ -119,48 +117,45 @@ var AbstractRenderer = /** @class */ (function () {
         if (this.objectLevel < 0) {
             throw new Error('More objects have ended than have been started (negative object nesting level)!');
         }
-    };
-    AbstractRenderer.prototype.getNestingLevel = function () {
+    }
+    getNestingLevel() {
         return this.objectLevel;
-    };
+    }
     // Returns true iff other can be rendered onto this without data loss.
-    AbstractRenderer.prototype.canRenderFromWithoutDataLoss = function (_other) {
+    canRenderFromWithoutDataLoss(_other) {
         return false;
-    };
+    }
     // MUST throw if other and this are not of the same base class.
-    AbstractRenderer.prototype.renderFromOtherOfSameType = function (_renderTo, other) {
-        throw new Error("Unable to render from ".concat(other, ": Not implemented"));
-    };
+    renderFromOtherOfSameType(_renderTo, other) {
+        throw new Error(`Unable to render from ${other}: Not implemented`);
+    }
     // Set a transformation to apply to things before rendering,
     // replacing the viewport's transform.
-    AbstractRenderer.prototype.setTransform = function (transform) {
+    setTransform(transform) {
         this.selfTransform = transform;
-    };
-    AbstractRenderer.prototype.pushTransform = function (transform) {
+    }
+    pushTransform(transform) {
         this.transformStack.push(this.selfTransform);
         this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
-    };
-    AbstractRenderer.prototype.popTransform = function () {
-        var _a;
+    }
+    popTransform() {
         if (this.transformStack.length === 0) {
             throw new Error('Unable to pop more transforms than have been pushed!');
         }
-        this.setTransform((_a = this.transformStack.pop()) !== null && _a !== void 0 ? _a : null);
-    };
+        this.setTransform(this.transformStack.pop() ?? null);
+    }
     // Get the matrix that transforms a vector on the canvas to a vector on this'
     // rendering target.
-    AbstractRenderer.prototype.getCanvasToScreenTransform = function () {
+    getCanvasToScreenTransform() {
         if (this.selfTransform) {
             return this.selfTransform;
         }
         return this.viewport.canvasToScreenTransform;
-    };
-    AbstractRenderer.prototype.canvasToScreen = function (vec) {
+    }
+    canvasToScreen(vec) {
         return this.getCanvasToScreenTransform().transformVec2(vec);
-    };
-    AbstractRenderer.prototype.getSizeOfCanvasPixelOnScreen = function () {
+    }
+    getSizeOfCanvasPixelOnScreen() {
         return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
-    };
-    return AbstractRenderer;
-}());
-export default AbstractRenderer;
+    }
+}

package/dist/mjs/rendering/renderers/CanvasRenderer.d.ts

@@ -1,11 +1,9 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Vec3 from '../../math/Vec3';
+import { Mat33, Rect2, Point2, Vec2, Vec3 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import TextRenderingStyle from '../TextRenderingStyle';
-import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
+import RenderablePathSpec from '../RenderablePathSpec';
 /**
  * Renders onto a `CanvasRenderingContext2D`.
  *

package/dist/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -1,23 +1,7 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import  Color4  from '../../Color4.mjs';
 import  TextComponent  from '../../components/TextComponent.mjs';
-import  Path  from '../../math/shapes/Path.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
+import { Vec2, Color4 } from '@js-draw/math';
 import  AbstractRenderer  from './AbstractRenderer.mjs';
+import  { visualEquivalent }  from '../RenderablePathSpec.mjs';
 /**
  * Renders onto a `CanvasRenderingContext2D`.
  *
@@ -38,24 +22,22 @@ import  AbstractRenderer  from './AbstractRenderer.mjs';
  * editor.image.render(renderer, viewport);
  * ```
  */
-var CanvasRenderer = /** @class */ (function (_super) {
-    __extends(CanvasRenderer, _super);
+export default class CanvasRenderer extends AbstractRenderer {
     /**
      * Creates a new `CanvasRenderer` that renders to the given rendering context.
      * The `viewport` is used to determine the translation/rotation/scaling of the content
      * to draw.
      */
-    function CanvasRenderer(ctx, viewport) {
-        var _this = _super.call(this, viewport) || this;
-        _this.ctx = ctx;
-        _this.ignoreObjectsAboveLevel = null;
-        _this.ignoringObject = false;
-        _this.currentObjectBBox = null;
-        _this.clipLevels = [];
-        _this.setDraftMode(false);
-        return _this;
+    constructor(ctx, viewport) {
+        super(viewport);
+        this.ctx = ctx;
+        this.ignoreObjectsAboveLevel = null;
+        this.ignoringObject = false;
+        this.currentObjectBBox = null;
+        this.clipLevels = [];
+        this.setDraftMode(false);
     }
-    CanvasRenderer.prototype.transformBy = function (transformBy) {
+    transformBy(transformBy) {
         // From MDN, transform(a,b,c,d,e,f)
         // takes input such that
         // ⎡ a c e ⎤
@@ -64,22 +46,22 @@ var CanvasRenderer = /** @class */ (function (_super) {
         this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
         transformBy.a2, transformBy.b2, // c, d
         transformBy.a3, transformBy.b3);
-    };
-    CanvasRenderer.prototype.canRenderFromWithoutDataLoss = function (other) {
+    }
+    canRenderFromWithoutDataLoss(other) {
         return other instanceof CanvasRenderer;
-    };
-    CanvasRenderer.prototype.renderFromOtherOfSameType = function (transformBy, other) {
+    }
+    renderFromOtherOfSameType(transformBy, other) {
         if (!(other instanceof CanvasRenderer)) {
-            throw new Error("".concat(other, " cannot be rendered onto ").concat(this));
+            throw new Error(`${other} cannot be rendered onto ${this}`);
         }
         transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
         this.ctx.save();
         this.transformBy(transformBy);
         this.ctx.drawImage(other.ctx.canvas, 0, 0);
         this.ctx.restore();
-    };
+    }
     // Set parameters for lower/higher quality rendering
-    CanvasRenderer.prototype.setDraftMode = function (draftMode) {
+    setDraftMode(draftMode) {
         if (draftMode) {
             this.minSquareCurveApproxDist = 9;
             this.minRenderSizeBothDimens = 2;
@@ -90,47 +72,53 @@ var CanvasRenderer = /** @class */ (function (_super) {
             this.minRenderSizeBothDimens = 0.2;
             this.minRenderSizeAnyDimen = 1e-6;
         }
-    };
-    CanvasRenderer.prototype.displaySize = function () {
+    }
+    displaySize() {
         return Vec2.of(this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
-    };
-    CanvasRenderer.prototype.clear = function () {
+    }
+    clear() {
         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-    };
-    CanvasRenderer.prototype.beginPath = function (startPoint) {
+    }
+    beginPath(startPoint) {
         startPoint = this.canvasToScreen(startPoint);
         this.ctx.beginPath();
         this.ctx.moveTo(startPoint.x, startPoint.y);
-    };
-    CanvasRenderer.prototype.endPath = function (style) {
-        this.ctx.save();
-        this.ctx.fillStyle = style.fill.toHexString();
-        this.ctx.fill();
+    }
+    endPath(style) {
+        // Saving and restoring can be slow in some browsers
+        // (e.g. 0.50ms). Avoid.
+        //this.ctx.save();
+        // If not a transparent fill
+        if (style.fill.a > 0) {
+            this.ctx.fillStyle = style.fill.toHexString();
+            this.ctx.fill();
+        }
         if (style.stroke) {
             this.ctx.strokeStyle = style.stroke.color.toHexString();
             this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
             this.ctx.lineCap = 'round';
             this.ctx.lineJoin = 'round';
             this.ctx.stroke();
+            this.ctx.lineWidth = 1;
         }
         this.ctx.closePath();
-        this.ctx.restore();
-    };
-    CanvasRenderer.prototype.lineTo = function (point) {
+        //this.ctx.restore();
+    }
+    lineTo(point) {
         point = this.canvasToScreen(point);
         this.ctx.lineTo(point.x, point.y);
-    };
-    CanvasRenderer.prototype.moveTo = function (point) {
+    }
+    moveTo(point) {
         point = this.canvasToScreen(point);
         this.ctx.moveTo(point.x, point.y);
-    };
-    CanvasRenderer.prototype.traceCubicBezierCurve = function (p1, p2, p3) {
+    }
+    traceCubicBezierCurve(p1, p2, p3) {
         p1 = this.canvasToScreen(p1);
         p2 = this.canvasToScreen(p2);
         p3 = this.canvasToScreen(p3);
         // Approximate the curve if small enough.
-        var delta1 = p2.minus(p1);
-        var delta2 = p3.minus(p2);
+        const delta1 = p2.minus(p1);
+        const delta2 = p3.minus(p2);
         if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
             && delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
             this.ctx.lineTo(p3.x, p3.y);
@@ -138,32 +126,31 @@ var CanvasRenderer = /** @class */ (function (_super) {
         else {
             this.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
         }
-    };
-    CanvasRenderer.prototype.traceQuadraticBezierCurve = function (controlPoint, endPoint) {
+    }
+    traceQuadraticBezierCurve(controlPoint, endPoint) {
         controlPoint = this.canvasToScreen(controlPoint);
         endPoint = this.canvasToScreen(endPoint);
         // Approximate the curve with a line if small enough
-        var delta = controlPoint.minus(endPoint);
+        const delta = controlPoint.minus(endPoint);
         if (delta.magnitudeSquared() < this.minSquareCurveApproxDist) {
             this.ctx.lineTo(endPoint.x, endPoint.y);
         }
         else {
             this.ctx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
         }
-    };
-    CanvasRenderer.prototype.drawPath = function (path) {
-        var _a;
+    }
+    drawPath(path) {
         if (this.ignoringObject) {
             return;
         }
         // If part of a huge object, it might be worth trimming the path
-        if ((_a = this.currentObjectBBox) === null || _a === void 0 ? void 0 : _a.containsRect(this.getViewport().visibleRect)) {
+        if (this.currentObjectBBox?.containsRect(this.getViewport().visibleRect)) {
             // Try to trim/remove parts of the path outside of the bounding box.
-            path = Path.visualEquivalent(path, this.getViewport().visibleRect);
+            path = visualEquivalent(path, this.getViewport().visibleRect);
         }
-        _super.prototype.drawPath.call(this, path);
-    };
-    CanvasRenderer.prototype.drawText = function (text, transform, style) {
+        super.drawPath(path);
+    }
+    drawText(text, transform, style) {
         this.ctx.save();
         transform = this.getCanvasToScreenTransform().rightMul(transform);
         this.transformBy(transform);
@@ -178,43 +165,42 @@ var CanvasRenderer = /** @class */ (function (_super) {
             this.ctx.strokeText(text, 0, 0);
         }
         this.ctx.restore();
-    };
-    CanvasRenderer.prototype.drawImage = function (image) {
+    }
+    drawImage(image) {
         this.ctx.save();
-        var transform = this.getCanvasToScreenTransform().rightMul(image.transform);
+        const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
         this.transformBy(transform);
         this.ctx.drawImage(image.image, 0, 0);
         this.ctx.restore();
-    };
-    CanvasRenderer.prototype.startObject = function (boundingBox, clip) {
+    }
+    startObject(boundingBox, clip) {
         if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();
             this.ignoringObject = true;
         }
-        _super.prototype.startObject.call(this, boundingBox);
+        super.startObject(boundingBox);
         this.currentObjectBBox = boundingBox;
         if (!this.ignoringObject && clip) {
             // Don't clip if it would only remove content already trimmed by
             // the edge of the screen.
-            var clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
+            const clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
             if (!clippedIsOutsideScreen) {
                 this.clipLevels.push(this.objectLevel);
                 this.ctx.save();
                 this.ctx.beginPath();
-                for (var _i = 0, _a = boundingBox.corners; _i < _a.length; _i++) {
-                    var corner = _a[_i];
-                    var screenCorner = this.canvasToScreen(corner);
+                for (const corner of boundingBox.corners) {
+                    const screenCorner = this.canvasToScreen(corner);
                     this.ctx.lineTo(screenCorner.x, screenCorner.y);
                 }
                 this.ctx.clip();
             }
         }
-    };
-    CanvasRenderer.prototype.endObject = function () {
+    }
+    endObject() {
         // Cache this.objectLevel — it may be decremented by super.endObject.
-        var objectLevel = this.objectLevel;
+        const objectLevel = this.objectLevel;
         this.currentObjectBBox = null;
-        _super.prototype.endObject.call(this);
+        super.endObject();
         if (!this.ignoringObject && this.clipLevels.length > 0) {
             if (this.clipLevels[this.clipLevels.length - 1] === objectLevel) {
                 this.ctx.restore();
@@ -226,38 +212,33 @@ var CanvasRenderer = /** @class */ (function (_super) {
             this.ignoreObjectsAboveLevel = null;
             this.ignoringObject = false;
         }
-    };
+    }
     // @internal
-    CanvasRenderer.prototype.drawPoints = function () {
-        var points = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            points[_i] = arguments[_i];
-        }
-        var pointRadius = 10;
-        for (var i = 0; i < points.length; i++) {
-            var point = this.canvasToScreen(points[i]);
+    drawPoints(...points) {
+        const pointRadius = 10;
+        for (let i = 0; i < points.length; i++) {
+            const point = this.canvasToScreen(points[i]);
             this.ctx.beginPath();
             this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
             this.ctx.fillStyle = Color4.ofRGBA(0.5 + Math.sin(i) / 2, 1.0, 0.5 + Math.cos(i * 0.2) / 4, 0.5).toHexString();
+            this.ctx.lineWidth = 2;
             this.ctx.fill();
             this.ctx.stroke();
             this.ctx.closePath();
             this.ctx.textAlign = 'center';
             this.ctx.textBaseline = 'middle';
             this.ctx.fillStyle = 'black';
-            this.ctx.fillText("".concat(i), point.x, point.y, pointRadius * 2);
+            this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
         }
-    };
+    }
     // @internal
-    CanvasRenderer.prototype.isTooSmallToRender = function (rect) {
+    isTooSmallToRender(rect) {
         // Should we ignore all objects within this object's bbox?
-        var diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
-        var bothDimenMinSize = this.minRenderSizeBothDimens;
-        var bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
-        var anyDimenMinSize = this.minRenderSizeAnyDimen;
-        var anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
+        const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
+        const bothDimenMinSize = this.minRenderSizeBothDimens;
+        const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
+        const anyDimenMinSize = this.minRenderSizeAnyDimen;
+        const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
         return bothTooSmall || anyTooSmall;
-    };
-    return CanvasRenderer;
-}(AbstractRenderer));
-export default CanvasRenderer;
+    }
+}

package/dist/mjs/rendering/renderers/DummyRenderer.d.ts

@@ -1,7 +1,4 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Vec3 from '../../math/Vec3';
+import { Mat33, Rect2, Point2, Vec2, Vec3 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import TextRenderingStyle from '../TextRenderingStyle';