js-draw 0.18.1 → 0.18.2

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

@@ -0,0 +1,144 @@
+import  Path, { PathCommandType }  from '../../math/Path.mjs';
+import  { Vec2 }  from '../../math/Vec2.mjs';
+import  { stylesEqual }  from '../RenderingStyle.mjs';
+export default class AbstractRenderer {
+    constructor(viewport) {
+        this.viewport = viewport;
+        // If null, this' transformation is linked to the Viewport
+        this.selfTransform = null;
+        this.transformStack = [];
+        this.objectLevel = 0;
+        this.currentPaths = null;
+    }
+    // this.canvasToScreen, etc. should be used instead of the corresponding
+    // methods on Viewport.
+    getViewport() { return this.viewport; }
+    setDraftMode(_draftMode) { }
+    flushPath() {
+        if (!this.currentPaths) {
+            return;
+        }
+        let lastStyle = null;
+        for (const path of this.currentPaths) {
+            const { startPoint, commands, style } = path;
+            if (!lastStyle || !stylesEqual(lastStyle, style)) {
+                if (lastStyle) {
+                    this.endPath(lastStyle);
+                }
+                this.beginPath(startPoint);
+                lastStyle = style;
+            }
+            else {
+                this.moveTo(startPoint);
+            }
+            for (const command of commands) {
+                if (command.kind === PathCommandType.LineTo) {
+                    this.lineTo(command.point);
+                }
+                else if (command.kind === PathCommandType.MoveTo) {
+                    this.moveTo(command.point);
+                }
+                else if (command.kind === PathCommandType.CubicBezierTo) {
+                    this.traceCubicBezierCurve(command.controlPoint1, command.controlPoint2, command.endPoint);
+                }
+                else if (command.kind === PathCommandType.QuadraticBezierTo) {
+                    this.traceQuadraticBezierCurve(command.controlPoint, command.endPoint);
+                }
+            }
+        }
+        if (lastStyle) {
+            this.endPath(lastStyle);
+        }
+    }
+    drawPath(path) {
+        // If we're being called outside of an object,
+        // we can't delay rendering
+        if (this.objectLevel === 0) {
+            this.currentPaths = [path];
+            this.flushPath();
+            this.currentPaths = null;
+        }
+        else {
+            // Otherwise, don't render paths all at once. This prevents faint lines between
+            // 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(...))`.
+    drawRect(rect, lineWidth, lineFill) {
+        const path = Path.fromRect(rect, lineWidth);
+        this.drawPath(path.toRenderable(lineFill));
+    }
+    // Fills a rectangle.
+    fillRect(rect, fill) {
+        const path = Path.fromRect(rect);
+        this.drawPath(path.toRenderable({ fill }));
+    }
+    // Note the start of an object with the given bounding box.
+    // Renderers are not required to support [clip]
+    startObject(_boundingBox, _clip) {
+        this.currentPaths = [];
+        this.objectLevel++;
+    }
+    /**
+     * Notes the end of an object.
+     * @param _loaderData - a map from strings to JSON-ifyable objects
+     * and contains properties attached to the object by whatever loader loaded the image. This
+     * is used to preserve attributes not supported by js-draw when loading/saving an image.
+     * Renderers may ignore this.
+     *
+     * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
+     * Renderers may ignore this.
+     */
+    endObject(_loaderData, _objectTags) {
+        // Render the paths all at once
+        this.flushPath();
+        this.currentPaths = null;
+        this.objectLevel--;
+        if (this.objectLevel < 0) {
+            throw new Error('More objects have ended than have been started (negative object nesting level)!');
+        }
+    }
+    getNestingLevel() {
+        return this.objectLevel;
+    }
+    // Returns true iff other can be rendered onto this without data loss.
+    canRenderFromWithoutDataLoss(_other) {
+        return false;
+    }
+    // MUST throw if other and this are not of the same base class.
+    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.
+    setTransform(transform) {
+        this.selfTransform = transform;
+    }
+    pushTransform(transform) {
+        this.transformStack.push(this.selfTransform);
+        this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+    }
+    popTransform() {
+        var _a;
+        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);
+    }
+    // Get the matrix that transforms a vector on the canvas to a vector on this'
+    // rendering target.
+    getCanvasToScreenTransform() {
+        if (this.selfTransform) {
+            return this.selfTransform;
+        }
+        return this.viewport.canvasToScreenTransform;
+    }
+    canvasToScreen(vec) {
+        return this.getCanvasToScreenTransform().transformVec2(vec);
+    }
+    getSizeOfCanvasPixelOnScreen() {
+        return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
+    }
+}

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

@@ -0,0 +1,63 @@
+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 TextStyle 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: TextStyle): 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

@@ -0,0 +1,230 @@
+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) {
+            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() {
+        if (!this.ignoringObject && this.clipLevels.length > 0) {
+            if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+                this.ctx.restore();
+                this.clipLevels.pop();
+            }
+        }
+        this.currentObjectBBox = null;
+        super.endObject();
+        // 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

@@ -0,0 +1,35 @@
+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 TextStyle 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: TextStyle): 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

@@ -0,0 +1,106 @@
+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

@@ -0,0 +1,57 @@
+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 TextStyle 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: TextStyle): 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;
+    };
+}