js-draw 0.5.0 → 0.7.0

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -6,11 +6,11 @@ import LineSegment2 from '../../math/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
+    // Don't smooth if input is more than ± 3 pixels from the true curve, do smooth if
     // less than ±1 px from the curve.
-    const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
+    const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 3;
     const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
-    return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist);
+    return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist, viewport);
 };
 // Handles stroke smoothing and creates Strokes from user/stylus input.
 export default class FreehandLineBuilder {
@@ -19,13 +19,17 @@ export default class FreehandLineBuilder {
     // for which a point is considered 'part of the curve'.
     // Note that the maximum will be smaller if the stroke width is less than
     // [maxFitAllowed].
-    minFitAllowed, maxFitAllowed) {
+    minFitAllowed, maxFitAllowed, viewport) {
         this.startPoint = startPoint;
         this.minFitAllowed = minFitAllowed;
         this.maxFitAllowed = maxFitAllowed;
+        this.viewport = viewport;
         this.isFirstSegment = true;
         this.pathStartConnector = null;
         this.mostRecentConnector = null;
+        this.lastUpperBezier = null;
+        this.lastLowerBezier = null;
+        this.parts = [];
         this.lastExitingVec = null;
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
@@ -46,16 +50,16 @@ export default class FreehandLineBuilder {
             fill: (_a = this.lastPoint.color) !== null && _a !== void 0 ? _a : null,
         };
     }
-    previewPath() {
+    previewCurrentPath() {
         var _a;
-        let upperPath;
-        let lowerPath;
+        const upperPath = this.upperSegments.slice();
+        const lowerPath = this.lowerSegments.slice();
         let lowerToUpperCap;
         let pathStartConnector;
         if (this.currentCurve) {
-            const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
-            upperPath = this.upperSegments.concat(upperCurve);
-            lowerPath = this.lowerSegments.concat(lowerCurve);
+            const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand } = this.currentSegmentToPath();
+            upperPath.push(upperCurveCommand);
+            lowerPath.push(lowerCurveCommand);
             lowerToUpperCap = lowerToUpperConnector;
             pathStartConnector = (_a = this.pathStartConnector) !== null && _a !== void 0 ? _a : upperToLowerConnector;
         }
@@ -63,12 +67,17 @@ export default class FreehandLineBuilder {
             if (this.mostRecentConnector === null || this.pathStartConnector === null) {
                 return null;
             }
-            upperPath = this.upperSegments.slice();
-            lowerPath = this.lowerSegments.slice();
             lowerToUpperCap = this.mostRecentConnector;
             pathStartConnector = this.pathStartConnector;
         }
-        const startPoint = lowerPath[lowerPath.length - 1].endPoint;
+        let startPoint;
+        const lastLowerSegment = lowerPath[lowerPath.length - 1];
+        if (lastLowerSegment.kind === PathCommandType.LineTo || lastLowerSegment.kind === PathCommandType.MoveTo) {
+            startPoint = lastLowerSegment.point;
+        }
+        else {
+            startPoint = lastLowerSegment.endPoint;
+        }
         return {
             // Start at the end of the lower curve:
             //    Start point
@@ -103,21 +112,33 @@ export default class FreehandLineBuilder {
             style: this.getRenderingStyle(),
         };
     }
+    previewFullPath() {
+        const preview = this.previewCurrentPath();
+        if (preview) {
+            return [...this.parts, preview];
+        }
+        return null;
+    }
     previewStroke() {
-        const pathPreview = this.previewPath();
+        const pathPreview = this.previewFullPath();
         if (pathPreview) {
-            return new Stroke([pathPreview]);
+            return new Stroke(pathPreview);
         }
         return null;
     }
     preview(renderer) {
-        const path = this.previewPath();
-        if (path) {
-            renderer.drawPath(path);
+        const paths = this.previewFullPath();
+        if (paths) {
+            const approxBBox = this.viewport.visibleRect;
+            renderer.startObject(approxBBox);
+            for (const path of paths) {
+                renderer.drawPath(path);
+            }
+            renderer.endObject();
         }
     }
     build() {
-        if (this.lastPoint && (this.lowerSegments.length === 0 || this.approxCurrentCurveLength() > this.curveStartWidth * 2)) {
+        if (this.lastPoint) {
             this.finalizeCurrentCurve();
         }
         return this.previewStroke();
@@ -129,6 +150,61 @@ export default class FreehandLineBuilder {
         }
         return Viewport.roundPoint(point, minFit);
     }
+    // Returns true if, due to overlap with previous segments, a new RenderablePathSpec should be created.
+    shouldStartNewSegment(lowerCurve, upperCurve) {
+        if (!this.lastLowerBezier || !this.lastUpperBezier) {
+            return false;
+        }
+        const getIntersection = (curve1, curve2) => {
+            const intersection = curve1.intersects(curve2);
+            if (!intersection || intersection.length === 0) {
+                return null;
+            }
+            // From http://pomax.github.io/bezierjs/#intersect-curve,
+            // .intersects returns an array of 't1/t2' pairs, where curve1.at(t1) gives the point.
+            const firstTPair = intersection[0];
+            const match = /^([-0-9.eE]+)\/([-0-9.eE]+)$/.exec(firstTPair);
+            if (!match) {
+                throw new Error(`Incorrect format returned by .intersects: ${intersection} should be array of "number/number"!`);
+            }
+            const t = parseFloat(match[1]);
+            return Vec2.ofXY(curve1.get(t));
+        };
+        const getExitDirection = (curve) => {
+            return Vec2.ofXY(curve.points[2]).minus(Vec2.ofXY(curve.points[1])).normalized();
+        };
+        const getEnterDirection = (curve) => {
+            return Vec2.ofXY(curve.points[1]).minus(Vec2.ofXY(curve.points[0])).normalized();
+        };
+        // Prevent
+        //         /
+        //       / /
+        //      /  /  /| 
+        //    /    /   |
+        //  /          |
+        // where the next stroke and the previous stroke are in different directions.
+        //
+        // Are the exit/enter directions of the previous and current curves in different enough directions?
+        if (getEnterDirection(upperCurve).dot(getExitDirection(this.lastUpperBezier)) < 0.3
+            || getEnterDirection(lowerCurve).dot(getExitDirection(this.lastLowerBezier)) < 0.3
+            // Also handle if the curves exit/enter directions differ
+            || getEnterDirection(upperCurve).dot(getExitDirection(upperCurve)) < 0
+            || getEnterDirection(lowerCurve).dot(getExitDirection(lowerCurve)) < 0) {
+            return true;
+        }
+        // Check whether the lower curve intersects the other wall:
+        //       /    / ← lower
+        //    / /   /
+        // /   / /
+        //   //
+        // / /
+        const lowerIntersection = getIntersection(lowerCurve, this.lastUpperBezier);
+        const upperIntersection = getIntersection(upperCurve, this.lastLowerBezier);
+        if (lowerIntersection || upperIntersection) {
+            return true;
+        }
+        return false;
+    }
     // Returns the distance between the start, control, and end points of the curve.
     approxCurrentCurveLength() {
         if (!this.currentCurve) {
@@ -185,8 +261,17 @@ export default class FreehandLineBuilder {
             this.mostRecentConnector = this.pathStartConnector;
             return;
         }
-        const { upperCurve, lowerToUpperConnector, upperToLowerConnector, lowerCurve } = this.currentSegmentToPath();
-        if (this.isFirstSegment) {
+        const { upperCurveCommand, lowerToUpperConnector, upperToLowerConnector, lowerCurveCommand, lowerCurve, upperCurve, } = this.currentSegmentToPath();
+        const shouldStartNew = this.shouldStartNewSegment(lowerCurve, upperCurve);
+        if (shouldStartNew) {
+            const part = this.previewCurrentPath();
+            if (part) {
+                this.parts.push(part);
+                this.upperSegments = [];
+                this.lowerSegments = [];
+            }
+        }
+        if (this.isFirstSegment || shouldStartNew) {
             // We draw the upper path (reversed), then the lower path, so we need the
             // upperToLowerConnector to join the two paths.
             this.pathStartConnector = upperToLowerConnector;
@@ -195,8 +280,10 @@ export default class FreehandLineBuilder {
         // With the most recent connector, we're joining the end of the lowerPath to the most recent
         // upperPath:
         this.mostRecentConnector = lowerToUpperConnector;
-        this.upperSegments.push(upperCurve);
-        this.lowerSegments.push(lowerCurve);
+        this.lowerSegments.push(lowerCurveCommand);
+        this.upperSegments.push(upperCurveCommand);
+        this.lastLowerBezier = lowerCurve;
+        this.lastUpperBezier = upperCurve;
         const lastPoint = this.buffer[this.buffer.length - 1];
         this.lastExitingVec = Vec2.ofXY(this.currentCurve.points[2]).minus(Vec2.ofXY(this.currentCurve.points[1]));
         console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
@@ -238,11 +325,13 @@ export default class FreehandLineBuilder {
             .normalized().times(this.curveStartWidth / 2 * halfVecT
             + this.curveEndWidth / 2 * (1 - halfVecT));
         // Each starts at startPt ± startVec
+        const lowerCurveStartPoint = this.roundPoint(startPt.plus(startVec));
         const lowerCurveControlPoint = this.roundPoint(controlPoint.plus(halfVec));
         const lowerCurveEndPoint = this.roundPoint(endPt.plus(endVec));
         const upperCurveControlPoint = this.roundPoint(controlPoint.minus(halfVec));
         const upperCurveStartPoint = this.roundPoint(endPt.minus(endVec));
-        const lowerCurve = {
+        const upperCurveEndPoint = this.roundPoint(startPt.minus(startVec));
+        const lowerCurveCommand = {
             kind: PathCommandType.QuadraticBezierTo,
             controlPoint: lowerCurveControlPoint,
             endPoint: lowerCurveEndPoint,
@@ -250,19 +339,24 @@ export default class FreehandLineBuilder {
         // From the end of the upperCurve to the start of the lowerCurve:
         const upperToLowerConnector = {
             kind: PathCommandType.LineTo,
-            point: this.roundPoint(startPt.plus(startVec)),
+            point: lowerCurveStartPoint,
         };
         // From the end of lowerCurve to the start of upperCurve:
         const lowerToUpperConnector = {
             kind: PathCommandType.LineTo,
             point: upperCurveStartPoint,
         };
-        const upperCurve = {
+        const upperCurveCommand = {
             kind: PathCommandType.QuadraticBezierTo,
             controlPoint: upperCurveControlPoint,
-            endPoint: this.roundPoint(startPt.minus(startVec)),
+            endPoint: upperCurveEndPoint,
+        };
+        const upperCurve = new Bezier(upperCurveStartPoint, upperCurveControlPoint, upperCurveEndPoint);
+        const lowerCurve = new Bezier(lowerCurveStartPoint, lowerCurveControlPoint, lowerCurveEndPoint);
+        return {
+            upperCurveCommand, upperToLowerConnector, lowerToUpperConnector, lowerCurveCommand,
+            upperCurve, lowerCurve,
         };
-        return { upperCurve, upperToLowerConnector, lowerToUpperConnector, lowerCurve };
     }
     // Compute the direction of the velocity at the end of this.buffer
     computeExitingVec() {
@@ -299,6 +393,10 @@ export default class FreehandLineBuilder {
         const pointRadius = newPoint.width / 2;
         const prevEndWidth = this.curveEndWidth;
         this.curveEndWidth = pointRadius;
+        if (this.isFirstSegment) {
+            // The start of a curve often lacks accurate pressure information. Update it.
+            this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+        }
         // recompute bbox
         this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
         if (this.currentCurve === null) {
@@ -310,10 +408,11 @@ export default class FreehandLineBuilder {
             this.curveStartWidth = lastPoint.width / 2;
             console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
         }
+        // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
         let enteringVec = this.lastExitingVec;
         if (!enteringVec) {
-            let sampleIdx = Math.ceil(this.buffer.length / 3);
-            if (sampleIdx === 0) {
+            let sampleIdx = Math.ceil(this.buffer.length / 2);
+            if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
                 sampleIdx = this.buffer.length - 1;
             }
             enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);

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

@@ -3,6 +3,6 @@ export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import Text from './Text';
+import TextComponent from './Text';
 import ImageComponent from './ImageComponent';
-export { Stroke, Text, Text as TextComponent, Stroke as StrokeComponent, ImageComponent, };
+export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -3,6 +3,6 @@ export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
 export * from './AbstractComponent';
 export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
-import Text from './Text';
+import TextComponent from './Text';
 import ImageComponent from './ImageComponent';
-export { Stroke, Text, Text as TextComponent, Stroke as StrokeComponent, ImageComponent, };
+export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };

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

@@ -1,5 +1,5 @@
 import Color4 from '../../Color4';
-import Text from '../../components/Text';
+import TextComponent from '../../components/Text';
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
@@ -113,7 +113,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         this.ctx.save();
         transform = this.getCanvasToScreenTransform().rightMul(transform);
         this.transformBy(transform);
-        Text.applyTextStyles(this.ctx, style);
+        TextComponent.applyTextStyles(this.ctx, style);
         if (style.renderingStyle.fill.a !== 0) {
             this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
             this.ctx.fillText(text, 0, 0);

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

@@ -20,6 +20,8 @@ export default class SVGRenderer extends AbstractRenderer {
     private addPathToSVG;
     drawPath(pathSpec: RenderablePathSpec): void;
     private transformFrom;
+    private textContainer;
+    private textContainerTransform;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
     drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -15,6 +15,8 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPathString = [];
         this.objectElems = null;
         this.overwrittenAttrs = {};
+        this.textContainer = null;
+        this.textContainerTransform = null;
         this.clear();
     }
     // Sets an attribute on the root SVG element.
@@ -82,35 +84,59 @@ export default class SVGRenderer extends AbstractRenderer {
         this.lastPathString.push(path.toString());
     }
     // Apply [elemTransform] to [elem].
-    transformFrom(elemTransform, elem) {
-        let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
+    transformFrom(elemTransform, elem, inCanvasSpace = false) {
+        let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
         const translation = transform.transformVec2(Vec2.zero);
         transform = transform.rightMul(Mat33.translation(translation.times(-1)));
-        elem.style.transform = `matrix(
-			${transform.a1}, ${transform.b1},
-			${transform.a2}, ${transform.b2},
-			${transform.a3}, ${transform.b3}
-		)`;
+        if (!transform.eq(Mat33.identity)) {
+            elem.style.transform = `matrix(
+				${transform.a1}, ${transform.b1},
+				${transform.a2}, ${transform.b2},
+				${transform.a3}, ${transform.b3}
+			)`;
+        }
+        else {
+            elem.style.transform = '';
+        }
         elem.setAttribute('x', `${toRoundedString(translation.x)}`);
         elem.setAttribute('y', `${toRoundedString(translation.y)}`);
     }
     drawText(text, transform, style) {
-        var _a, _b, _c;
-        const textElem = document.createElementNS(svgNameSpace, 'text');
-        textElem.appendChild(document.createTextNode(text));
-        this.transformFrom(transform, textElem);
-        textElem.style.fontFamily = style.fontFamily;
-        textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
-        textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
-        textElem.style.fontSize = style.size + 'px';
-        textElem.style.fill = style.renderingStyle.fill.toHexString();
-        if (style.renderingStyle.stroke) {
-            const strokeStyle = style.renderingStyle.stroke;
-            textElem.style.stroke = strokeStyle.color.toHexString();
-            textElem.style.strokeWidth = strokeStyle.width + 'px';
+        var _a;
+        const applyTextStyles = (elem, style) => {
+            var _a, _b;
+            elem.style.fontFamily = style.fontFamily;
+            elem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
+            elem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
+            elem.style.fontSize = style.size + 'px';
+            elem.style.fill = style.renderingStyle.fill.toHexString();
+            if (style.renderingStyle.stroke) {
+                const strokeStyle = style.renderingStyle.stroke;
+                elem.style.stroke = strokeStyle.color.toHexString();
+                elem.style.strokeWidth = strokeStyle.width + 'px';
+            }
+        };
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        if (!this.textContainer) {
+            const container = document.createElementNS(svgNameSpace, 'text');
+            container.appendChild(document.createTextNode(text));
+            this.transformFrom(transform, container, true);
+            applyTextStyles(container, style);
+            this.elem.appendChild(container);
+            (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(container);
+            if (this.objectLevel > 0) {
+                this.textContainer = container;
+                this.textContainerTransform = transform;
+            }
+        }
+        else {
+            const elem = document.createElementNS(svgNameSpace, 'tspan');
+            elem.appendChild(document.createTextNode(text));
+            this.textContainer.appendChild(elem);
+            transform = this.textContainerTransform.inverse().rightMul(transform);
+            this.transformFrom(transform, elem, true);
+            applyTextStyles(elem, style);
         }
-        this.elem.appendChild(textElem);
-        (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
     }
     drawImage(image) {
         var _a, _b, _c, _d, _e;
@@ -128,6 +154,7 @@ export default class SVGRenderer extends AbstractRenderer {
         // Only accumulate a path within an object
         this.lastPathString = [];
         this.lastPathStyle = null;
+        this.textContainer = null;
         this.objectElems = [];
     }
     endObject(loaderData) {

package/dist/src/testing/beforeEachFile.js

@@ -1,3 +1,7 @@
 import loadExpectExtensions from './loadExpectExtensions';
 loadExpectExtensions();
 jest.useFakeTimers();
+// jsdom doesn't support HTMLCanvasElement#getContext — it logs an error
+// to the console. Make it return null so we can handle a non-existent Canvas
+// at runtime (e.g. use something else, if available).
+HTMLCanvasElement.prototype.getContext = () => null;

package/dist/src/toolbar/HTMLToolbar.js

@@ -2,7 +2,6 @@ import { EditorEventType } from '../types';
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
 import { defaultToolbarLocalization } from './localization';
-import { makeRedoIcon, makeUndoIcon } from './icons';
 import SelectionTool from '../tools/SelectionTool/SelectionTool';
 import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
@@ -123,13 +122,13 @@ export default class HTMLToolbar {
         undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
         const undoButton = this.addActionButton({
             label: this.localizationTable.undo,
-            icon: makeUndoIcon()
+            icon: this.editor.icons.makeUndoIcon()
         }, () => {
             this.editor.history.undo();
         }, undoRedoGroup);
         const redoButton = this.addActionButton({
             label: this.localizationTable.redo,
-            icon: makeRedoIcon(),
+            icon: this.editor.icons.makeRedoIcon(),
         }, () => {
             this.editor.history.redo();
         }, undoRedoGroup);

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

@@ -0,0 +1,30 @@
+import Color4 from '../Color4';
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
+import Pen from '../tools/Pen';
+declare type IconType = SVGSVGElement | HTMLImageElement;
+export default class IconProvider {
+    makeUndoIcon(): IconType;
+    makeRedoIcon(mirror?: boolean): IconType;
+    makeDropdownIcon(): IconType;
+    makeEraserIcon(): IconType;
+    makeSelectionIcon(): IconType;
+    /**
+     * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
+     * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
+     */
+    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): IconType;
+    makeHandToolIcon(): IconType;
+    makeTouchPanningIcon(): IconType;
+    makeAllDevicePanningIcon(): IconType;
+    makeZoomIcon(): IconType;
+    makeTextIcon(textStyle: TextStyle): IconType;
+    makePenIcon(tipThickness: number, color: string | Color4): IconType;
+    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
+    makePipetteIcon(color?: Color4): IconType;
+    makeResizeViewportIcon(): IconType;
+    makeDuplicateSelectionIcon(): IconType;
+    makeDeleteSelectionIcon(): IconType;
+    makeSaveIcon(): IconType;
+}
+export {};