js-draw 0.0.10 → 0.1.2

package/dist/src/rendering/{CanvasRenderer.js → renderers/CanvasRenderer.js}

@@ -1,5 +1,5 @@
-import Color4 from '../Color4';
-import { Vec2 } from '../geometry/Vec2';
+import Color4 from '../../Color4';
+import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     constructor(ctx, viewport) {
@@ -7,8 +7,29 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx = ctx;
         this.ignoreObjectsAboveLevel = null;
         this.ignoringObject = false;
+        this.clipLevels = [];
         this.setDraftMode(false);
     }
+    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();
+        // 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);
+        this.ctx.drawImage(other.ctx.canvas, 0, 0);
+        this.ctx.restore();
+    }
     // Set parameters for lower/higher quality rendering
     setDraftMode(draftMode) {
         if (draftMode) {
@@ -29,7 +50,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
     }
     beginPath(startPoint) {
-        startPoint = this.viewport.canvasToScreen(startPoint);
+        startPoint = this.canvasToScreen(startPoint);
         this.ctx.beginPath();
         this.ctx.moveTo(startPoint.x, startPoint.y);
     }
@@ -38,23 +59,23 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx.fill();
         if (style.stroke) {
             this.ctx.strokeStyle = style.stroke.color.toHexString();
-            this.ctx.lineWidth = this.viewport.getScaleFactor() * style.stroke.width;
+            this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
             this.ctx.stroke();
         }
         this.ctx.closePath();
     }
     lineTo(point) {
-        point = this.viewport.canvasToScreen(point);
+        point = this.canvasToScreen(point);
         this.ctx.lineTo(point.x, point.y);
     }
     moveTo(point) {
-        point = this.viewport.canvasToScreen(point);
+        point = this.canvasToScreen(point);
         this.ctx.moveTo(point.x, point.y);
     }
     traceCubicBezierCurve(p1, p2, p3) {
-        p1 = this.viewport.canvasToScreen(p1);
-        p2 = this.viewport.canvasToScreen(p2);
-        p3 = this.viewport.canvasToScreen(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);
@@ -67,8 +88,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
     }
     traceQuadraticBezierCurve(controlPoint, endPoint) {
-        controlPoint = this.viewport.canvasToScreen(controlPoint);
-        endPoint = this.viewport.canvasToScreen(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) {
@@ -84,20 +105,30 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         super.drawPath(path);
     }
-    startObject(boundingBox) {
-        // Should we ignore all objects within this object's bbox?
-        const diagonal = this.viewport.canvasToScreenTransform.transformVec3(boundingBox.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;
-        if (bothTooSmall || anyTooSmall) {
+    startObject(boundingBox, clip) {
+        if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();
             this.ignoringObject = true;
         }
         super.startObject(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();
+            }
+        }
         super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
@@ -108,7 +139,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     drawPoints(...points) {
         const pointRadius = 10;
         for (let i = 0; i < points.length; i++) {
-            const point = this.viewport.canvasToScreen(points[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();
@@ -121,4 +152,13 @@ export default class CanvasRenderer extends AbstractRenderer {
             this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
         }
     }
+    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/src/rendering/{DummyRenderer.d.ts → renderers/DummyRenderer.d.ts}

@@ -1,7 +1,8 @@
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
-import Viewport from '../Viewport';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
@@ -20,6 +21,9 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
-    startObject(boundingBox: Rect2): 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/src/rendering/{DummyRenderer.js → renderers/DummyRenderer.js}

@@ -1,5 +1,5 @@
 // Renderer that outputs nothing. Useful for automated tests.
-import { Vec2 } from '../geometry/Vec2';
+import { Vec2 } from '../../geometry/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     constructor(viewport) {
@@ -14,8 +14,15 @@ export default class DummyRenderer extends AbstractRenderer {
         this.pointBuffer = [];
     }
     displaySize() {
-        // Return a dummy
-        return Vec2.of(640, 480);
+        // Do we have a stored viewport size?
+        const viewportSize = this.getViewport().getResolution();
+        // 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++;
@@ -35,18 +42,25 @@ export default class DummyRenderer extends AbstractRenderer {
         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);
     }
@@ -54,7 +68,7 @@ export default class DummyRenderer extends AbstractRenderer {
         // drawPoints is intended for debugging.
         // As such, it is unlikely to be the target of automated tests.
     }
-    startObject(boundingBox) {
+    startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;
     }
@@ -62,4 +76,21 @@ export default class DummyRenderer extends AbstractRenderer {
         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/src/rendering/{SVGRenderer.d.ts → renderers/SVGRenderer.d.ts}

@@ -1,6 +1,7 @@
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Viewport from '../Viewport';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
@@ -9,7 +10,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private lastPathStyle;
     private lastPath;
     private lastPathStart;
-    private mainGroup;
+    private objectElems;
     private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport);
     setRootSVGAttribute(name: string, value: string | null): void;
@@ -19,11 +20,12 @@ export default class SVGRenderer extends AbstractRenderer {
     protected endPath(style: RenderingStyle): void;
     private addPathToSVG;
     startObject(boundingBox: Rect2): void;
-    endObject(): void;
+    endObject(loaderData?: LoadSaveDataTable): 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;
 }

package/dist/src/rendering/{SVGRenderer.js → renderers/SVGRenderer.js}

@@ -1,11 +1,13 @@
-import Path, { PathCommandType } from '../geometry/Path';
-import { Vec2 } from '../geometry/Vec2';
+import Path, { PathCommandType } from '../../geometry/Path';
+import { Vec2 } from '../../geometry/Vec2';
+import { svgAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
     constructor(elem, viewport) {
         super(viewport);
         this.elem = elem;
+        this.objectElems = null;
         this.overwrittenAttrs = {};
         this.clear();
     }
@@ -26,7 +28,6 @@ export default class SVGRenderer extends AbstractRenderer {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     clear() {
-        this.mainGroup = document.createElementNS(svgNameSpace, 'g');
         // Restore all alltributes
         for (const attrName in this.overwrittenAttrs) {
             const value = this.overwrittenAttrs[attrName];
@@ -38,13 +39,11 @@ export default class SVGRenderer extends AbstractRenderer {
             }
         }
         this.overwrittenAttrs = {};
-        // Remove all children
-        this.elem.replaceChildren(this.mainGroup);
     }
     beginPath(startPoint) {
         var _a;
         this.currentPath = [];
-        this.pathStart = this.viewport.canvasToScreen(startPoint);
+        this.pathStart = this.canvasToScreen(startPoint);
         (_a = this.lastPathStart) !== null && _a !== void 0 ? _a : (this.lastPathStart = this.pathStart);
     }
     endPath(style) {
@@ -72,6 +71,7 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Push [this.fullPath] to the SVG
     addPathToSVG() {
+        var _a;
         if (!this.lastPathStyle || !this.lastPath) {
             return;
         }
@@ -83,7 +83,8 @@ export default class SVGRenderer extends AbstractRenderer {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
             pathElem.setAttribute('stroke-width', style.stroke.width.toString());
         }
-        this.mainGroup.appendChild(pathElem);
+        this.elem.appendChild(pathElem);
+        (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
     startObject(boundingBox) {
         super.startObject(boundingBox);
@@ -91,30 +92,43 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPath = null;
         this.lastPathStart = null;
         this.lastPathStyle = null;
+        this.objectElems = [];
     }
-    endObject() {
-        super.endObject();
+    endObject(loaderData) {
+        var _a;
+        super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
+        if (loaderData) {
+            // Restore any attributes unsupported by the app.
+            for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
+                const attrs = loaderData[svgAttributesDataKey];
+                if (attrs) {
+                    for (const [attr, value] of attrs) {
+                        elem.setAttribute(attr, value);
+                    }
+                }
+            }
+        }
     }
     lineTo(point) {
-        point = this.viewport.canvasToScreen(point);
+        point = this.canvasToScreen(point);
         this.currentPath.push({
             kind: PathCommandType.LineTo,
             point,
         });
     }
     moveTo(point) {
-        point = this.viewport.canvasToScreen(point);
+        point = this.canvasToScreen(point);
         this.currentPath.push({
             kind: PathCommandType.MoveTo,
             point,
         });
     }
     traceCubicBezierCurve(controlPoint1, controlPoint2, endPoint) {
-        controlPoint1 = this.viewport.canvasToScreen(controlPoint1);
-        controlPoint2 = this.viewport.canvasToScreen(controlPoint2);
-        endPoint = this.viewport.canvasToScreen(endPoint);
+        controlPoint1 = this.canvasToScreen(controlPoint1);
+        controlPoint2 = this.canvasToScreen(controlPoint2);
+        endPoint = this.canvasToScreen(endPoint);
         this.currentPath.push({
             kind: PathCommandType.CubicBezierTo,
             controlPoint1,
@@ -123,8 +137,8 @@ export default class SVGRenderer extends AbstractRenderer {
         });
     }
     traceQuadraticBezierCurve(controlPoint, endPoint) {
-        controlPoint = this.viewport.canvasToScreen(controlPoint);
-        endPoint = this.viewport.canvasToScreen(endPoint);
+        controlPoint = this.canvasToScreen(controlPoint);
+        endPoint = this.canvasToScreen(endPoint);
         this.currentPath.push({
             kind: PathCommandType.QuadraticBezierTo,
             controlPoint,
@@ -137,11 +151,14 @@ export default class SVGRenderer extends AbstractRenderer {
             elem.setAttribute('cx', `${point.x}`);
             elem.setAttribute('cy', `${point.y}`);
             elem.setAttribute('r', '15');
-            this.mainGroup.appendChild(elem);
+            this.elem.appendChild(elem);
         });
     }
-    // Renders a copy of the given element.
+    // Renders a **copy** of the given element.
     drawSVGElem(elem) {
         this.elem.appendChild(elem.cloneNode(true));
     }
+    isTooSmallToRender(_rect) {
+        return false;
+    }
 }

package/dist/src/testing/createEditor.js

@@ -1,3 +1,3 @@
-import { RenderingMode } from '../Display';
+import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -1,5 +1,6 @@
 import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
+import { ActionButtonIcon } from './types';
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
@@ -7,7 +8,7 @@ export default class HTMLToolbar {
     private penTypes;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
-    addActionButton(text: string, command: () => void, parent?: Element): HTMLButtonElement;
+    addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;
     private addUndoRedoButtons;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;