js-draw 0.23.1 → 0.24.0

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

@@ -1,63 +0,0 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Vec3 from '../../math/Vec3';
-import Viewport from '../../Viewport';
-import RenderingStyle from '../RenderingStyle';
-import TextRenderingStyle from '../TextRenderingStyle';
-import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
-/**
- * Renders onto a `CanvasRenderingContext2D`.
- *
- * @example
- * ```ts
- * const editor = new Editor(document.body);
- *
- * const canvas = document.createElement('canvas');
- * const ctx = canvas.getContext('2d');
- *
- * // Ensure that the canvas can fit the entire rendering
- * const viewport = editor.image.getImportExportViewport();
- * canvas.width = viewport.getScreenRectSize().x;
- * canvas.height = viewport.getScreenRectSize().y;
- *
- * // Render editor.image onto the renderer
- * const renderer = new CanvasRenderer(ctx, viewport);
- * editor.image.render(renderer, viewport);
- * ```
- */
-export default class CanvasRenderer extends AbstractRenderer {
-    private ctx;
-    private ignoreObjectsAboveLevel;
-    private ignoringObject;
-    private currentObjectBBox;
-    private minSquareCurveApproxDist;
-    private minRenderSizeAnyDimen;
-    private minRenderSizeBothDimens;
-    /**
-     * 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.
-     */
-    constructor(ctx: CanvasRenderingContext2D, viewport: Viewport);
-    private transformBy;
-    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
-    renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void;
-    setDraftMode(draftMode: boolean): void;
-    displaySize(): Vec2;
-    clear(): void;
-    protected beginPath(startPoint: Point2): void;
-    protected endPath(style: RenderingStyle): void;
-    protected lineTo(point: Point2): void;
-    protected moveTo(point: Point2): void;
-    protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
-    protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
-    drawPath(path: RenderablePathSpec): void;
-    drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
-    drawImage(image: RenderableImage): void;
-    private clipLevels;
-    startObject(boundingBox: Rect2, clip?: boolean): void;
-    endObject(): void;
-    drawPoints(...points: Point2[]): void;
-    isTooSmallToRender(rect: Rect2): boolean;
-}

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

@@ -1,237 +0,0 @@
-import  Color4  from '../../Color4.mjs';
-import  TextComponent  from '../../components/TextComponent.mjs';
-import  Path  from '../../math/Path.mjs';
-import  { Vec2 }  from '../../math/Vec2.mjs';
-import  AbstractRenderer  from './AbstractRenderer.mjs';
-/**
- * Renders onto a `CanvasRenderingContext2D`.
- *
- * @example
- * ```ts
- * const editor = new Editor(document.body);
- *
- * const canvas = document.createElement('canvas');
- * const ctx = canvas.getContext('2d');
- *
- * // Ensure that the canvas can fit the entire rendering
- * const viewport = editor.image.getImportExportViewport();
- * canvas.width = viewport.getScreenRectSize().x;
- * canvas.height = viewport.getScreenRectSize().y;
- *
- * // Render editor.image onto the renderer
- * const renderer = new CanvasRenderer(ctx, viewport);
- * editor.image.render(renderer, viewport);
- * ```
- */
-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.
-     */
-    constructor(ctx, viewport) {
-        super(viewport);
-        this.ctx = ctx;
-        this.ignoreObjectsAboveLevel = null;
-        this.ignoringObject = false;
-        this.currentObjectBBox = null;
-        this.clipLevels = [];
-        this.setDraftMode(false);
-    }
-    transformBy(transformBy) {
-        // From MDN, transform(a,b,c,d,e,f)
-        // takes input such that
-        // ⎡ a c e ⎤
-        // ⎢ b d f ⎥ transforms content drawn to [ctx].
-        // ⎣ 0 0 1 ⎦
-        this.ctx.transform(transformBy.a1, transformBy.b1, // a, b
-        transformBy.a2, transformBy.b2, // c, d
-        transformBy.a3, transformBy.b3);
-    }
-    canRenderFromWithoutDataLoss(other) {
-        return other instanceof CanvasRenderer;
-    }
-    renderFromOtherOfSameType(transformBy, other) {
-        if (!(other instanceof CanvasRenderer)) {
-            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
-    setDraftMode(draftMode) {
-        if (draftMode) {
-            this.minSquareCurveApproxDist = 9;
-            this.minRenderSizeBothDimens = 2;
-            this.minRenderSizeAnyDimen = 0.5;
-        }
-        else {
-            this.minSquareCurveApproxDist = 0.5;
-            this.minRenderSizeBothDimens = 0.2;
-            this.minRenderSizeAnyDimen = 1e-6;
-        }
-    }
-    displaySize() {
-        return Vec2.of(this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
-    }
-    clear() {
-        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
-    }
-    beginPath(startPoint) {
-        startPoint = this.canvasToScreen(startPoint);
-        this.ctx.beginPath();
-        this.ctx.moveTo(startPoint.x, startPoint.y);
-    }
-    endPath(style) {
-        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.closePath();
-    }
-    lineTo(point) {
-        point = this.canvasToScreen(point);
-        this.ctx.lineTo(point.x, point.y);
-    }
-    moveTo(point) {
-        point = this.canvasToScreen(point);
-        this.ctx.moveTo(point.x, point.y);
-    }
-    traceCubicBezierCurve(p1, p2, p3) {
-        p1 = this.canvasToScreen(p1);
-        p2 = this.canvasToScreen(p2);
-        p3 = this.canvasToScreen(p3);
-        // Approximate the curve if small enough.
-        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);
-        }
-        else {
-            this.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
-        }
-    }
-    traceQuadraticBezierCurve(controlPoint, endPoint) {
-        controlPoint = this.canvasToScreen(controlPoint);
-        endPoint = this.canvasToScreen(endPoint);
-        // Approximate the curve with a line if small enough
-        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);
-        }
-    }
-    drawPath(path) {
-        var _a;
-        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)) {
-            // Try to trim/remove parts of the path outside of the bounding box.
-            path = Path.visualEquivalent(path, this.getViewport().visibleRect);
-        }
-        super.drawPath(path);
-    }
-    drawText(text, transform, style) {
-        this.ctx.save();
-        transform = this.getCanvasToScreenTransform().rightMul(transform);
-        this.transformBy(transform);
-        TextComponent.applyTextStyles(this.ctx, style);
-        if (style.renderingStyle.fill.a !== 0) {
-            this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
-            this.ctx.fillText(text, 0, 0);
-        }
-        if (style.renderingStyle.stroke) {
-            this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
-            this.ctx.lineWidth = style.renderingStyle.stroke.width;
-            this.ctx.strokeText(text, 0, 0);
-        }
-        this.ctx.restore();
-    }
-    drawImage(image) {
-        this.ctx.save();
-        const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
-        this.transformBy(transform);
-        this.ctx.drawImage(image.image, 0, 0);
-        this.ctx.restore();
-    }
-    startObject(boundingBox, clip) {
-        if (this.isTooSmallToRender(boundingBox)) {
-            this.ignoreObjectsAboveLevel = this.getNestingLevel();
-            this.ignoringObject = true;
-        }
-        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.
-            const clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
-            if (!clippedIsOutsideScreen) {
-                this.clipLevels.push(this.objectLevel);
-                this.ctx.save();
-                this.ctx.beginPath();
-                for (const corner of boundingBox.corners) {
-                    const screenCorner = this.canvasToScreen(corner);
-                    this.ctx.lineTo(screenCorner.x, screenCorner.y);
-                }
-                this.ctx.clip();
-            }
-        }
-    }
-    endObject() {
-        // Cache this.objectLevel — it may be decremented by super.endObject.
-        const objectLevel = this.objectLevel;
-        this.currentObjectBBox = null;
-        super.endObject();
-        if (!this.ignoringObject && this.clipLevels.length > 0) {
-            if (this.clipLevels[this.clipLevels.length - 1] === objectLevel) {
-                this.ctx.restore();
-                this.clipLevels.pop();
-            }
-        }
-        // If exiting an object with a too-small-to-draw bounding box,
-        if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
-            this.ignoreObjectsAboveLevel = null;
-            this.ignoringObject = false;
-        }
-    }
-    // @internal
-    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.fill();
-            this.ctx.stroke();
-            this.ctx.closePath();
-            this.ctx.textAlign = 'center';
-            this.ctx.textBaseline = 'middle';
-            this.ctx.fillStyle = 'black';
-            this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
-        }
-    }
-    // @internal
-    isTooSmallToRender(rect) {
-        // Should we ignore all objects within this object's bbox?
-        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;
-    }
-}

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

@@ -1,35 +0,0 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Vec3 from '../../math/Vec3';
-import Viewport from '../../Viewport';
-import RenderingStyle from '../RenderingStyle';
-import TextRenderingStyle from '../TextRenderingStyle';
-import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
-export default class DummyRenderer extends AbstractRenderer {
-    clearedCount: number;
-    renderedPathCount: number;
-    lastFillStyle: RenderingStyle | null;
-    lastPoint: Point2 | null;
-    objectNestingLevel: number;
-    lastText: string | null;
-    lastImage: RenderableImage | null;
-    pointBuffer: Point2[];
-    constructor(viewport: Viewport);
-    displaySize(): Vec2;
-    clear(): void;
-    protected beginPath(startPoint: Vec3): void;
-    protected endPath(style: RenderingStyle): void;
-    protected lineTo(point: Vec3): void;
-    protected moveTo(point: Point2): void;
-    protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
-    protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
-    drawPoints(..._points: Vec3[]): void;
-    drawText(text: string, _transform: Mat33, _style: TextRenderingStyle): void;
-    drawImage(image: RenderableImage): void;
-    startObject(boundingBox: Rect2, _clip: boolean): void;
-    endObject(): void;
-    isTooSmallToRender(_rect: Rect2): boolean;
-    canRenderFromWithoutDataLoss(other: AbstractRenderer): boolean;
-    renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void;
-}

package/dist/mjs/src/rendering/renderers/DummyRenderer.mjs

@@ -1,106 +0,0 @@
-import  { Vec2 }  from '../../math/Vec2.mjs';
-import  AbstractRenderer  from './AbstractRenderer.mjs';
-// Renderer that outputs almost nothing. Useful for automated tests.
-export default class DummyRenderer extends AbstractRenderer {
-    constructor(viewport) {
-        super(viewport);
-        // Variables that track the state of what's been rendered
-        this.clearedCount = 0;
-        this.renderedPathCount = 0;
-        this.lastFillStyle = null;
-        this.lastPoint = null;
-        this.objectNestingLevel = 0;
-        this.lastText = null;
-        this.lastImage = null;
-        // List of points drawn since the last clear.
-        this.pointBuffer = [];
-    }
-    displaySize() {
-        // Do we have a stored viewport size?
-        const viewportSize = this.getViewport().getScreenRectSize();
-        // Don't use a 0x0 viewport — DummyRenderer is often used
-        // for tests that run without a display, so pretend we have a
-        // reasonable-sized display.
-        if (viewportSize.x === 0 || viewportSize.y === 0) {
-            return Vec2.of(640, 480);
-        }
-        return viewportSize;
-    }
-    clear() {
-        this.clearedCount++;
-        this.renderedPathCount = 0;
-        this.pointBuffer = [];
-        this.lastText = null;
-        this.lastImage = null;
-        // Ensure all objects finished rendering
-        if (this.objectNestingLevel > 0) {
-            throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
-        }
-    }
-    beginPath(startPoint) {
-        this.lastPoint = startPoint;
-        this.pointBuffer.push(startPoint);
-    }
-    endPath(style) {
-        this.renderedPathCount++;
-        this.lastFillStyle = style;
-    }
-    lineTo(point) {
-        point = this.canvasToScreen(point);
-        this.lastPoint = point;
-        this.pointBuffer.push(point);
-    }
-    moveTo(point) {
-        point = this.canvasToScreen(point);
-        this.lastPoint = point;
-        this.pointBuffer.push(point);
-    }
-    traceCubicBezierCurve(p1, p2, p3) {
-        p1 = this.canvasToScreen(p1);
-        p2 = this.canvasToScreen(p2);
-        p3 = this.canvasToScreen(p3);
-        this.lastPoint = p3;
-        this.pointBuffer.push(p1, p2, p3);
-    }
-    traceQuadraticBezierCurve(controlPoint, endPoint) {
-        controlPoint = this.canvasToScreen(controlPoint);
-        endPoint = this.canvasToScreen(endPoint);
-        this.lastPoint = endPoint;
-        this.pointBuffer.push(controlPoint, endPoint);
-    }
-    drawPoints(..._points) {
-        // drawPoints is intended for debugging.
-        // As such, it is unlikely to be the target of automated tests.
-    }
-    drawText(text, _transform, _style) {
-        this.lastText = text;
-    }
-    drawImage(image) {
-        this.lastImage = image;
-    }
-    startObject(boundingBox, _clip) {
-        super.startObject(boundingBox);
-        this.objectNestingLevel += 1;
-    }
-    endObject() {
-        super.endObject();
-        this.objectNestingLevel -= 1;
-    }
-    isTooSmallToRender(_rect) {
-        return false;
-    }
-    canRenderFromWithoutDataLoss(other) {
-        return other instanceof DummyRenderer;
-    }
-    renderFromOtherOfSameType(transform, other) {
-        if (!(other instanceof DummyRenderer)) {
-            throw new Error(`${other} cannot be rendered onto ${this}`);
-        }
-        this.renderedPathCount += other.renderedPathCount;
-        this.lastFillStyle = other.lastFillStyle;
-        this.lastPoint = other.lastPoint;
-        this.pointBuffer.push(...other.pointBuffer.map(point => {
-            return transform.transformVec2(point);
-        }));
-    }
-}

package/dist/mjs/src/rendering/renderers/SVGRenderer.d.ts

@@ -1,57 +0,0 @@
-import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
-import Viewport from '../../Viewport';
-import RenderingStyle from '../RenderingStyle';
-import TextRenderingStyle from '../TextRenderingStyle';
-import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
-export declare const renderedStylesheetId = "js-draw-style-sheet";
-/**
- * Renders onto an `SVGElement`.
- *
- * @see {@link Editor.toSVG}
- */
-export default class SVGRenderer extends AbstractRenderer {
-    private elem;
-    private sanitize;
-    private lastPathStyle;
-    private lastPathString;
-    private objectElems;
-    private overwrittenAttrs;
-    /**
-     * Creates a renderer that renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
-     *
-     * `viewport` is used to determine the translation/rotation/scaling/output size of the rendered
-     * data.
-     */
-    constructor(elem: SVGSVGElement, viewport: Viewport, sanitize?: boolean);
-    private addStyleSheet;
-    setRootSVGAttribute(name: string, value: string | null): void;
-    displaySize(): Vec2;
-    clear(): void;
-    private addPathToSVG;
-    drawPath(pathSpec: RenderablePathSpec): void;
-    private transformFrom;
-    private textContainer;
-    private textContainerTransform;
-    private textParentStyle;
-    drawText(text: string, transform: Mat33, style: TextRenderingStyle): void;
-    drawImage(image: RenderableImage): void;
-    startObject(boundingBox: Rect2): void;
-    endObject(loaderData?: LoadSaveDataTable, elemClassNames?: string[]): void;
-    private unimplementedMessage;
-    protected beginPath(_startPoint: Point2): void;
-    protected endPath(_style: RenderingStyle): void;
-    protected lineTo(_point: Point2): void;
-    protected moveTo(_point: Point2): void;
-    protected traceCubicBezierCurve(_controlPoint1: Point2, _controlPoint2: Point2, _endPoint: Point2): void;
-    protected traceQuadraticBezierCurve(_controlPoint: Point2, _endPoint: Point2): void;
-    drawPoints(...points: Point2[]): void;
-    drawSVGElem(elem: SVGElement): void;
-    isTooSmallToRender(_rect: Rect2): boolean;
-    static fromViewport(viewport: Viewport, sanitize?: boolean): {
-        element: SVGSVGElement;
-        renderer: SVGRenderer;
-    };
-}