js-draw 1.12.0 → 1.13.2

package/dist/cjs/toolbar/EdgeToolbar.js

@@ -143,8 +143,10 @@ class EdgeToolbar extends AbstractToolbar_1.default {
                 this.sidebarContainer.style.animation = `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-transition-in`;
                 this.menuContainer.style.animation = `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-container-transition-in`;
                 this.menuContainer.style.opacity = '1';
-                // Focus the close button when first shown.
-                this.closeButton.focus();
+                // Focus the close button when first shown, but prevent scroll because the button
+                // is likely at the bottom of the screen (and we want the full sidebar to remain
+                // visible).
+                this.closeButton.focus({ preventScroll: true, });
             }
             else {
                 this.closeColorPickers();
@@ -272,9 +274,8 @@ class EdgeToolbar extends AbstractToolbar_1.default {
             if (event.target === this.menuContainer) {
                 if (eventName === 'pointerdown') {
                     this.sidebarVisible.set(false);
-                }
-                if (eventName === 'pointerup') {
-                    this.editor.focus();
+                    // A delay seems necessary for the editor
+                    setTimeout(() => this.editor.focus(), 0);
                 }
                 return true;
             }

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -20,6 +20,7 @@ const ToolbarShortcutHandler_1 = __importDefault(require("../../tools/ToolbarSho
 const inputEvents_1 = require("../../inputEvents");
 const constants_1 = require("../constants");
 const DropdownLayoutManager_1 = __importDefault(require("./layout/DropdownLayoutManager"));
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../util/addLongPressOrHoverCssClasses"));
 /**
  * A set of labels that allow toolbar themes to treat buttons differently.
  */
@@ -66,6 +67,7 @@ class BaseWidget {
         this.button.oncontextmenu = event => {
             event.preventDefault();
         };
+        (0, addLongPressOrHoverCssClasses_1.default)(this.button);
     }
     /**
      * Should return a constant true or false value. If true (the default),

package/dist/cjs/toolbar/widgets/InsertImageWidget.js

@@ -9,7 +9,7 @@ const EditorImage_1 = __importDefault(require("../../image/EditorImage"));
 const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
 const SelectionTool_1 = __importDefault(require("../../tools/SelectionTool/SelectionTool"));
 const math_1 = require("@js-draw/math");
-const fileToBase64_1 = __importDefault(require("../../util/fileToBase64"));
+const fileToBase64Url_1 = __importDefault(require("../../util/fileToBase64Url"));
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 const types_1 = require("../../types");
 const constants_1 = require("../constants");
@@ -111,11 +111,13 @@ class InsertImageWidget extends BaseWidget_1.default {
             this.imagePreview.style.display = 'block';
             const image = files[0];
             let data = null;
+            let errorMessage = null;
             try {
-                data = await (0, fileToBase64_1.default)(image);
+                data = await (0, fileToBase64Url_1.default)(image);
             }
-            catch (e) {
-                this.statusView.innerText = this.localizationTable.imageLoadError(e);
+            catch (error) {
+                console.error('Image load error', error);
+                errorMessage = this.localizationTable.imageLoadError(error);
             }
             if (data) {
                 this.image = ImageWrapper.fromSrcAndPreview(data, this.imagePreview, () => this.onImageDataUpdate());
@@ -124,6 +126,11 @@ class InsertImageWidget extends BaseWidget_1.default {
                 this.image = null;
             }
             this.onImageDataUpdate();
+            // Show the error after image update callbacks to ensure it is
+            // actually shown.
+            if (errorMessage) {
+                this.statusView.innerText = errorMessage;
+            }
         });
         altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
         actionButtonRow.replaceChildren(this.submitButton);

package/dist/cjs/toolbar/widgets/components/makeGridSelector.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const ReactiveValue_1 = require("../../../util/ReactiveValue");
 const stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../../../util/stopPropagationOfScrollingWheelEvents"));
+const addLongPressOrHoverCssClasses_1 = __importDefault(require("../../../util/addLongPressOrHoverCssClasses"));
 const constants_1 = require("../../constants");
 let idCounter = 0;
 /**
@@ -36,6 +37,9 @@ labelText, defaultId, choices) => {
         const button = document.createElement('input');
         button.type = 'radio';
         button.id = `${constants_1.toolbarCSSPrefix}-grid-select-button-${idCounter++}`;
+        // Some toolbars only show the label on hover. Having long press or hover
+        // CSS classes are helpful here.
+        (0, addLongPressOrHoverCssClasses_1.default)(buttonContainer);
         // Clicking any part of labelContainer triggers the radio button.
         const labelContainer = document.createElement('label');
         const rebuildLabel = () => {
@@ -81,6 +85,12 @@ labelText, defaultId, choices) => {
         button.onblur = () => {
             buttonContainer.classList.remove('focus-visible');
         };
+        // Prevent the right-click menu from being shown on long-press
+        // (important for some toolbars that use long-press gestures to
+        // show grid selector labels).
+        buttonContainer.oncontextmenu = event => {
+            event.preventDefault();
+        };
         buttonContainer.replaceChildren(button, labelContainer);
         menuContainer.appendChild(buttonContainer);
         // Set whether the current button is checked

package/dist/cjs/util/addLongPressOrHoverCssClasses.d.ts

@@ -0,0 +1,10 @@
+/**
+ * When a pointer is inside `element`, after a delay, adds the `has-long-press-or-hover`
+ * CSS class to `element`.
+ *
+ * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
+ */
+declare const addLongPressOrHoverCssClasses: (element: HTMLElement) => {
+    removeEventListeners: () => void;
+};
+export default addLongPressOrHoverCssClasses;

package/dist/cjs/util/addLongPressOrHoverCssClasses.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const listenForLongPressOrHover_1 = __importDefault(require("./listenForLongPressOrHover"));
+/**
+ * When a pointer is inside `element`, after a delay, adds the `has-long-press-or-hover`
+ * CSS class to `element`.
+ *
+ * When no pointers are inside `element`, adds the CSS class `no-long-press-or-hover`.
+ */
+const addLongPressOrHoverCssClasses = (element) => {
+    const hasLongPressClass = 'has-long-press-or-hover';
+    const noLongPressClass = 'no-long-press-or-hover';
+    element.classList.add('no-long-press-or-hover');
+    const { removeListeners } = (0, listenForLongPressOrHover_1.default)(element, {
+        onStart() {
+            element.classList.remove(noLongPressClass);
+            element.classList.add(hasLongPressClass);
+        },
+        onEnd() {
+            element.classList.add(noLongPressClass);
+            element.classList.remove(hasLongPressClass);
+        },
+    });
+    return {
+        removeEventListeners: () => {
+            element.classList.remove(noLongPressClass);
+            removeListeners();
+        },
+    };
+};
+exports.default = addLongPressOrHoverCssClasses;

package/dist/cjs/util/fileToBase64Url.d.ts

@@ -0,0 +1,9 @@
+export interface FileToBase64UrlOptions {
+    onprogress?: (evt: ProgressEvent<FileReader>) => void;
+    onWarning?: (message: string, error: any) => void;
+}
+/**
+ * Converts `file` to a base64 data URL.
+ */
+declare const fileToBase64Url: (file: Blob, options?: FileToBase64UrlOptions) => Promise<string | null>;
+export default fileToBase64Url;

package/dist/cjs/util/fileToBase64Url.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Converts `file` to a base64 data URL.
+ */
+const fileToBase64Url = async (file, options = {}) => {
+    try {
+        const reader = new FileReader();
+        return await new Promise((resolve, reject) => {
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.onabort = reject;
+            reader.onprogress = (evt) => {
+                options.onprogress?.(evt);
+            };
+            reader.readAsDataURL(file);
+        });
+    }
+    catch (error) {
+        // Files can fail to load with a FileReader in some cases. For example,
+        // in iOS Lockdown mode, where FileReader is unavailable.
+        (options.onWarning ?? console.warn)('Unable to convert file to base64 with a FileReader: ', error);
+        const arrayBuffer = await file.arrayBuffer();
+        const array = new Uint8Array(arrayBuffer);
+        // step: must be divisible by 3 (3 bytes = 4 base64 numerals)
+        //       If too large, this will fail (String.fromCharCode accepts a limited
+        //       number of arguments).
+        const step = 30;
+        const result = [];
+        for (let i = 0; i < array.length; i += step) {
+            // btoa accepts only characters with byte value 0-255 (which can be created
+            // with String.fromCharCode)
+            const stringByteArray = String.fromCharCode(...array.slice(i, i + step));
+            result.push(btoa(stringByteArray));
+        }
+        return `data:${file.type ?? 'image/*'};base64,${result.join('')}`;
+    }
+};
+exports.default = fileToBase64Url;

package/dist/cjs/util/fileToBase64Url.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/util/listenForLongPressOrHover.d.ts

@@ -0,0 +1,13 @@
+type Options = {
+    onStart: () => void;
+    onEnd: () => void;
+    longPressTimeout?: number;
+};
+/**
+ * Calls `options.onStart` at the start of a long press or hover.
+ * Calls `options.onEnd` when no pointers are within the container.
+ */
+declare const listenForLongPressOrHover: (target: HTMLElement, options: Options) => {
+    removeListeners: () => void;
+};
+export default listenForLongPressOrHover;

package/dist/cjs/util/listenForLongPressOrHover.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Calls `options.onStart` at the start of a long press or hover.
+ * Calls `options.onEnd` when no pointers are within the container.
+ */
+const listenForLongPressOrHover = (target, options) => {
+    const pointersInside = new Map();
+    let timeoutId = null;
+    let isLongPressInProgress = false;
+    const updateTimeout = () => {
+        if (pointersInside.size === 0) {
+            if (isLongPressInProgress) {
+                isLongPressInProgress = false;
+                options.onEnd();
+            }
+            else if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+        }
+        else {
+            const nowTime = Date.now();
+            let timeSinceFirstPointer = 0; // ms
+            for (const record of pointersInside.values()) {
+                const timeSince = nowTime - record.timeEnter;
+                timeSinceFirstPointer = Math.max(timeSince, timeSinceFirstPointer);
+            }
+            const longPressTimeout = options.longPressTimeout ?? 700; // ms
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            const timeLeft = longPressTimeout - timeSinceFirstPointer;
+            if (timeLeft <= 0) {
+                options.onStart();
+                isLongPressInProgress = true;
+            }
+            else {
+                timeoutId = setTimeout(() => {
+                    timeoutId = null;
+                    updateTimeout();
+                }, timeLeft);
+            }
+        }
+    };
+    // Detects long press
+    const pointerEventListener = (event) => {
+        const eventRecord = {
+            timeEnter: Date.now(),
+        };
+        if (event.type === 'pointerenter') {
+            pointersInside.set(event.pointerId, eventRecord);
+        }
+        else if (event.type === 'pointerleave' || event.type === 'pointercancel') {
+            // In some cases (for example, a click with a stylus on Android/Chrome), moving the pen
+            // over the target, clicking, then moving the pen out of the target produces input
+            // similar to this:
+            // - pointerenter (pointerId: 4)
+            // - pointerleave (pointerId: 4)
+            // - pointerenter (pointerId: 6)
+            // - pointerenter (pointerId: 1)
+            // - pointerleave (pointerId: 6)
+            // Observe that no pointerleave event was fired for the pointer with ID 1.
+            pointersInside.clear();
+        }
+        updateTimeout();
+    };
+    target.addEventListener('pointerenter', pointerEventListener);
+    target.addEventListener('pointerleave', pointerEventListener);
+    target.addEventListener('pointercancel', pointerEventListener);
+    return {
+        removeListeners: () => {
+            target.removeEventListener('pointerenter', pointerEventListener);
+            target.removeEventListener('pointerleave', pointerEventListener);
+            target.removeEventListener('pointercancel', pointerEventListener);
+        },
+    };
+};
+exports.default = listenForLongPressOrHover;

package/dist/cjs/util/listenForLongPressOrHover.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.12.0',
+    number: '1.13.2',
 };

package/dist/mjs/Editor.d.ts

@@ -253,6 +253,8 @@ export declare class Editor {
     addToolbar(defaultLayout?: boolean): AbstractToolbar;
     private registerListeners;
     private updateEditorSizeVariables;
+    /** @internal */
+    protected handleHTMLWheelEvent(event: WheelEvent): boolean | undefined;
     private pointers;
     private getPointerList;
     /**
@@ -312,9 +314,9 @@ export declare class Editor {
         remove: () => void;
     };
     /** @internal */
-    protected handleHTMLKeyDownEvent(htmlEvent: KeyboardEvent): void;
+    protected handleHTMLKeyDownEvent(htmlEvent: KeyboardEvent): boolean;
     /** @internal */
-    protected handleHTMLKeyUpEvent(htmlEvent: KeyboardEvent): void;
+    protected handleHTMLKeyUpEvent(htmlEvent: KeyboardEvent): boolean;
     /**
      * Adds event listners for keypresses (and drop events) on `elem` and forwards those
      * events to the editor.

package/dist/mjs/Editor.mjs

@@ -13,7 +13,7 @@ import  getLocalizationTable  from './localizations/getLocalizationTable.mjs';
 import  IconProvider  from './toolbar/IconProvider.mjs';
 import  CanvasRenderer  from './rendering/renderers/CanvasRenderer.mjs';
 import  untilNextAnimationFrame  from './util/untilNextAnimationFrame.mjs';
-import  fileToBase64  from './util/fileToBase64.mjs';
+import  fileToBase64Url  from './util/fileToBase64Url.mjs';
 import  uniteCommands  from './commands/uniteCommands.mjs';
 import  SelectionTool  from './tools/SelectionTool/SelectionTool.mjs';
 import  Erase  from './commands/Erase.mjs';
@@ -239,41 +239,7 @@ export class Editor {
         this.handleKeyEventsFrom(this.renderingRegion);
         this.handlePointerEventsFrom(this.accessibilityAnnounceArea);
         this.container.addEventListener('wheel', evt => {
-            let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
-            // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
-            // pinch-zooming.
-            if (!evt.ctrlKey && !evt.metaKey) {
-                if (!this.settings.wheelEventsEnabled) {
-                    return;
-                }
-                else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
-                    const focusedChild = this.container.querySelector(':focus');
-                    if (!focusedChild) {
-                        return;
-                    }
-                }
-            }
-            if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
-                delta = delta.times(15);
-            }
-            else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
-                delta = delta.times(100);
-            }
-            if (evt.ctrlKey || evt.metaKey) {
-                delta = Vec3.of(0, 0, evt.deltaY);
-            }
-            // Ensure that `pos` is relative to `this.renderingRegion`
-            const bbox = this.renderingRegion.getBoundingClientRect();
-            const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
-            if (this.toolController.dispatchInputEvent({
-                kind: InputEvtType.WheelEvt,
-                delta,
-                screenPos: pos,
-            })) {
-                evt.preventDefault();
-                return true;
-            }
-            return false;
+            this.handleHTMLWheelEvent(evt);
         });
         const handleResize = () => {
             this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
@@ -317,6 +283,44 @@ export class Editor {
         this.container.style.setProperty('--editor-current-display-width-px', `${this.renderingRegion.clientWidth}px`);
         this.container.style.setProperty('--editor-current-display-height-px', `${this.renderingRegion.clientHeight}px`);
     }
+    /** @internal */
+    handleHTMLWheelEvent(event) {
+        let delta = Vec3.of(event.deltaX, event.deltaY, event.deltaZ);
+        // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
+        // pinch-zooming.
+        if (!event.ctrlKey && !event.metaKey) {
+            if (!this.settings.wheelEventsEnabled) {
+                return;
+            }
+            else if (this.settings.wheelEventsEnabled === 'only-if-focused') {
+                const focusedChild = this.container.querySelector(':focus');
+                if (!focusedChild) {
+                    return;
+                }
+            }
+        }
+        if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+            delta = delta.times(15);
+        }
+        else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+            delta = delta.times(100);
+        }
+        if (event.ctrlKey || event.metaKey) {
+            delta = Vec3.of(0, 0, event.deltaY);
+        }
+        // Ensure that `pos` is relative to `this.renderingRegion`
+        const bbox = this.renderingRegion.getBoundingClientRect();
+        const pos = Vec2.of(event.clientX, event.clientY).minus(Vec2.of(bbox.left, bbox.top));
+        if (this.toolController.dispatchInputEvent({
+            kind: InputEvtType.WheelEvt,
+            delta,
+            screenPos: pos,
+        })) {
+            event.preventDefault();
+            return true;
+        }
+        return false;
+    }
     getPointerList() {
         const nowTime = performance.now();
         const res = [];
@@ -443,7 +447,7 @@ export class Editor {
                     this.showLoadingWarning(evt.loaded / evt.total);
                 };
                 try {
-                    const data = await fileToBase64(file, onprogress);
+                    const data = await fileToBase64Url(file, { onprogress });
                     if (data && this.toolController.dispatchInputEvent({
                         kind: InputEvtType.PasteEvent,
                         mime: fileType,
@@ -625,14 +629,18 @@ export class Editor {
         const event = keyPressEventFromHTMLEvent(htmlEvent);
         if (this.toolController.dispatchInputEvent(event)) {
             htmlEvent.preventDefault();
+            return true;
         }
         else if (event.key === 't' || event.key === 'T') {
             htmlEvent.preventDefault();
             this.display.rerenderAsText();
+            return true;
         }
         else if (event.key === 'Escape') {
             this.renderingRegion.blur();
+            return true;
         }
+        return false;
     }
     /** @internal */
     handleHTMLKeyUpEvent(htmlEvent) {
@@ -640,7 +648,9 @@ export class Editor {
         const event = keyUpEventFromHTMLEvent(htmlEvent);
         if (this.toolController.dispatchInputEvent(event)) {
             htmlEvent.preventDefault();
+            return true;
         }
+        return false;
     }
     /**
      * Adds event listners for keypresses (and drop events) on `elem` and forwards those
@@ -1160,8 +1170,9 @@ export class Editor {
                 `    ${this.viewport.getScaleFactor()}x zoom, ${180 / Math.PI * this.viewport.getRotationAngle()}° rotation`,
                 `    ${this.image.estimateNumElements()} components`,
                 `    auto-resize: ${this.image.getAutoresizeEnabled() ? 'enabled' : 'disabled'}`,
-                `    ${this.getImportExportRect().w}x${this.getImportExportRect().h} image size`,
-                `    ${screenSize.x}x${screenSize.y} screen size`,
+                `    image size: ${this.getImportExportRect().w}x${this.getImportExportRect().h}`,
+                `    screen size: ${screenSize.x}x${screenSize.y}`,
+                `    device pixel ratio: ${this.display.getDevicePixelRatio()}`,
                 '    cache:',
                 `        ${this.display.getCache().getDebugInfo()
                     // Indent

package/dist/mjs/components/AbstractComponent.d.ts

@@ -114,6 +114,13 @@ export default abstract class AbstractComponent {
     intersectsRect(rect: Rect2): boolean;
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
+    /**
+     * Returns a command that, when applied, transforms this by [affineTransfm] and
+     * updates the editor.
+     *
+     * The transformed component is also moved to the top (use
+     * {@link AbstractComponent.setZIndexAndTransformBy} to avoid this behavior).
+     */
     transformBy(affineTransfm: Mat33): SerializableCommand;
     setZIndex(newZIndex: number): SerializableCommand;
     /**

package/dist/mjs/components/AbstractComponent.mjs

@@ -136,11 +136,13 @@ class AbstractComponent {
         const testLines = rect.getEdges();
         return testLines.some(edge => this.intersects(edge));
     }
-    // Returns a command that, when applied, transforms this by [affineTransfm] and
-    // updates the editor.
-    //
-    // The transformed component is also moved to the top (use {@link setZIndexAndTransformBy} to
-    // avoid this behavior).
+    /**
+     * Returns a command that, when applied, transforms this by [affineTransfm] and
+     * updates the editor.
+     *
+     * The transformed component is also moved to the top (use
+     * {@link AbstractComponent.setZIndexAndTransformBy} to avoid this behavior).
+     */
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
     }

package/dist/mjs/components/util/StrokeSmoother.d.ts

@@ -15,7 +15,6 @@ export declare class StrokeSmoother {
     private onCurveAdded;
     private isFirstSegment;
     private buffer;
-    private centerOfMass;
     private lastPoint;
     private lastExitingVec;
     private currentCurve;

package/dist/mjs/components/util/StrokeSmoother.mjs

@@ -12,7 +12,6 @@ export class StrokeSmoother {
         this.maxFitAllowed = maxFitAllowed;
         this.onCurveAdded = onCurveAdded;
         this.isFirstSegment = true;
-        this.centerOfMass = null;
         this.lastExitingVec = null;
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
@@ -58,7 +57,6 @@ export class StrokeSmoother {
             this.buffer[this.buffer.length - 2], lastPoint,
         ];
         this.currentCurve = null;
-        this.centerOfMass = null;
         this.isFirstSegment = false;
     }
     // Returns [upper curve, connector, lower curve]
@@ -106,20 +104,10 @@ export class StrokeSmoother {
             if (shouldSnapToInitial) {
                 return;
             }
-            if (!this.centerOfMass) {
-                this.centerOfMass = newPoint.pos;
-            }
-            else {
-                this.centerOfMass = this.centerOfMass
-                    .times(this.buffer.length)
-                    .plus(newPoint.pos).times(1 / (this.buffer.length + 1));
-            }
-            const toCenterOfMass = this.centerOfMass.minus(newPoint.pos);
             const deltaTimeSeconds = deltaTime / 1000;
             const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / deltaTimeSeconds);
             // TODO: Do we need momentum smoothing? (this.momentum.lerp(velocity, 0.9);)
-            const k = 1;
-            this.momentum = velocity.plus(toCenterOfMass.times(k));
+            this.momentum = velocity;
         }
         const lastPoint = this.lastPoint ?? newPoint;
         this.lastPoint = newPoint;
@@ -156,7 +144,7 @@ export class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 1.6;
+        const maxRelativeLength = 1.7;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -185,9 +173,10 @@ export class StrokeSmoother {
                 .lerp(segmentStart.plus(enteringVec.times(startEndDist)), 0.25);
         }
         // Equal to an endpoint?
-        if (segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
-            // Position the control point between the two end points
-            controlPoint = segmentStart.lerp(segmentEnd, 0.5);
+        else if (segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
+            // Position the control point closer to the first -- the connecting
+            // segment will be roughly a line.
+            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 5));
         }
         console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
         console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');