js-draw 1.11.1 → 1.12.0

package/dist/cjs/Editor.js

@@ -57,6 +57,7 @@ const version_1 = __importDefault(require("./version"));
 const editorImageToSVG_1 = require("./image/export/editorImageToSVG");
 const ReactiveValue_1 = require("./util/ReactiveValue");
 const listenForKeyboardEventsFrom_1 = __importDefault(require("./util/listenForKeyboardEventsFrom"));
+const mitLicenseAttribution_1 = __importDefault(require("./util/mitLicenseAttribution"));
 /**
  * The main entrypoint for the full editor.
  *
@@ -591,7 +592,8 @@ class Editor {
                 return false;
             }
             // Position of the current event.
-            const currentPos = math_1.Vec2.of(event.pageX, event.pageY);
+            // jsdom doesn't seem to support pageX/pageY -- use clientX/clientY if unavailable
+            const currentPos = math_1.Vec2.of(event.pageX ?? event.clientX, event.pageY ?? event.clientY);
             const pointerId = event.pointerId ?? 0;
             // Whether to send the current event to the editor
             let sendToEditor = true;
@@ -601,6 +603,7 @@ class Editor {
                 gestureData[pointerId] = {
                     eventBuffer: [[eventName, event]],
                     startPoint: currentPos,
+                    hasMovedSignificantly: false,
                 };
                 // Capture the pointer so we receive future events even if the overlay is hidden.
                 this.setPointerCapture(elem, event.pointerId);
@@ -613,7 +616,7 @@ class Editor {
                 // Skip if the pointer hasn't moved enough to not be a "click".
                 const strokeStartThreshold = 10;
                 const isWithinClickThreshold = gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold;
-                if (isWithinClickThreshold) {
+                if (isWithinClickThreshold && !gestureData[pointerId].hasMovedSignificantly) {
                     eventBuffer.push([eventName, event]);
                     sendToEditor = false;
                 }
@@ -623,6 +626,7 @@ class Editor {
                         this.handleHTMLPointerEvent(eventName, event);
                     }
                     gestureData[pointerId].eventBuffer = [];
+                    gestureData[pointerId].hasMovedSignificantly = true;
                     sendToEditor = true;
                 }
             }
@@ -1199,9 +1203,19 @@ class Editor {
             text: [
                 `This image editor is powered by js-draw v${version_1.default.number}.`,
                 '',
-                'js-draw uses several libraries at runtime. Particularly noteworthy are:',
+                'At runtime, js-draw uses',
                 ' - The Coloris color picker: https://github.com/mdbassit/Coloris',
-                ' - The bezier.js Bézier curve library: https://github.com/Pomax/bezierjs'
+                ' - The bezier.js Bézier curve library: https://github.com/Pomax/bezierjs',
+                '',
+                'Both are licensed under the MIT license:',
+                '',
+                '',
+                '== Coloris ==',
+                (0, mitLicenseAttribution_1.default)('2021 Mohammed Bassit'),
+                '',
+                '',
+                '== Bezier.js ==',
+                (0, mitLicenseAttribution_1.default)('2023 Mike "Pomax" Kamermans'),
             ].join('\n'),
             minimized: true,
         });

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

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

package/dist/cjs/components/util/StrokeSmoother.js

@@ -15,6 +15,7 @@ class StrokeSmoother {
         this.maxFitAllowed = maxFitAllowed;
         this.onCurveAdded = onCurveAdded;
         this.isFirstSegment = true;
+        this.centerOfMass = null;
         this.lastExitingVec = null;
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
@@ -60,6 +61,7 @@ class StrokeSmoother {
             this.buffer[this.buffer.length - 2], lastPoint,
         ];
         this.currentCurve = null;
+        this.centerOfMass = null;
         this.isFirstSegment = false;
     }
     // Returns [upper curve, connector, lower curve]
@@ -107,10 +109,20 @@ 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);)
-            this.momentum = velocity;
+            const k = 1;
+            this.momentum = velocity.plus(toCenterOfMass.times(k));
         }
         const lastPoint = this.lastPoint ?? newPoint;
         this.lastPoint = newPoint;
@@ -147,7 +159,7 @@ class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2.4;
+        const maxRelativeLength = 1.6;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -168,11 +180,17 @@ class StrokeSmoother {
         if (intersection) {
             controlPoint = intersection.point;
         }
-        // No intersection or the intersection is one of the end points?
-        if (!controlPoint || 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 / 4));
+        // No intersection?
+        if (!controlPoint) {
+            // Estimate the control point position based on the entering tangent line
+            controlPoint = segmentStart
+                .lerp(segmentEnd, 0.5)
+                .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);
         }
         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!');

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

@@ -0,0 +1,2 @@
+declare const mitLicenseAttribution: (copyright: string) => string;
+export default mitLicenseAttribution;

package/dist/cjs/util/mitLicenseAttribution.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const mitLicenseAttribution = (copyright) => {
+    const removeSingleLineBreaks = (text) => text.replace(/([^\n])[\n]([^\n])/g, '$1 $2');
+    return removeSingleLineBreaks(`
+MIT License
+
+Copyright (c) ${copyright}
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.`);
+};
+exports.default = mitLicenseAttribution;

package/dist/cjs/version.js

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

package/dist/mjs/Editor.mjs

@@ -28,6 +28,7 @@ import  version  from './version.mjs';
 import  { editorImageToSVGSync, editorImageToSVGAsync }  from './image/export/editorImageToSVG.mjs';
 import  { MutableReactiveValue }  from './util/ReactiveValue.mjs';
 import  listenForKeyboardEventsFrom  from './util/listenForKeyboardEventsFrom.mjs';
+import  mitLicenseAttribution  from './util/mitLicenseAttribution.mjs';
 /**
  * The main entrypoint for the full editor.
  *
@@ -562,7 +563,8 @@ export class Editor {
                 return false;
             }
             // Position of the current event.
-            const currentPos = Vec2.of(event.pageX, event.pageY);
+            // jsdom doesn't seem to support pageX/pageY -- use clientX/clientY if unavailable
+            const currentPos = Vec2.of(event.pageX ?? event.clientX, event.pageY ?? event.clientY);
             const pointerId = event.pointerId ?? 0;
             // Whether to send the current event to the editor
             let sendToEditor = true;
@@ -572,6 +574,7 @@ export class Editor {
                 gestureData[pointerId] = {
                     eventBuffer: [[eventName, event]],
                     startPoint: currentPos,
+                    hasMovedSignificantly: false,
                 };
                 // Capture the pointer so we receive future events even if the overlay is hidden.
                 this.setPointerCapture(elem, event.pointerId);
@@ -584,7 +587,7 @@ export class Editor {
                 // Skip if the pointer hasn't moved enough to not be a "click".
                 const strokeStartThreshold = 10;
                 const isWithinClickThreshold = gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold;
-                if (isWithinClickThreshold) {
+                if (isWithinClickThreshold && !gestureData[pointerId].hasMovedSignificantly) {
                     eventBuffer.push([eventName, event]);
                     sendToEditor = false;
                 }
@@ -594,6 +597,7 @@ export class Editor {
                         this.handleHTMLPointerEvent(eventName, event);
                     }
                     gestureData[pointerId].eventBuffer = [];
+                    gestureData[pointerId].hasMovedSignificantly = true;
                     sendToEditor = true;
                 }
             }
@@ -1170,9 +1174,19 @@ export class Editor {
             text: [
                 `This image editor is powered by js-draw v${version.number}.`,
                 '',
-                'js-draw uses several libraries at runtime. Particularly noteworthy are:',
+                'At runtime, js-draw uses',
                 ' - The Coloris color picker: https://github.com/mdbassit/Coloris',
-                ' - The bezier.js Bézier curve library: https://github.com/Pomax/bezierjs'
+                ' - The bezier.js Bézier curve library: https://github.com/Pomax/bezierjs',
+                '',
+                'Both are licensed under the MIT license:',
+                '',
+                '',
+                '== Coloris ==',
+                mitLicenseAttribution('2021 Mohammed Bassit'),
+                '',
+                '',
+                '== Bezier.js ==',
+                mitLicenseAttribution('2023 Mike "Pomax" Kamermans'),
             ].join('\n'),
             minimized: true,
         });

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

@@ -15,6 +15,7 @@ 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,6 +12,7 @@ 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;
@@ -57,6 +58,7 @@ 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]
@@ -104,10 +106,20 @@ 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);)
-            this.momentum = velocity;
+            const k = 1;
+            this.momentum = velocity.plus(toCenterOfMass.times(k));
         }
         const lastPoint = this.lastPoint ?? newPoint;
         this.lastPoint = newPoint;
@@ -144,7 +156,7 @@ export class StrokeSmoother {
         }
         let exitingVec = this.computeExitingVec();
         // Find the intersection between the entering vector and the exiting vector
-        const maxRelativeLength = 2.4;
+        const maxRelativeLength = 1.6;
         const segmentStart = this.buffer[0];
         const segmentEnd = newPoint.pos;
         const startEndDist = segmentEnd.minus(segmentStart).magnitude();
@@ -165,11 +177,17 @@ export class StrokeSmoother {
         if (intersection) {
             controlPoint = intersection.point;
         }
-        // No intersection or the intersection is one of the end points?
-        if (!controlPoint || 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 / 4));
+        // No intersection?
+        if (!controlPoint) {
+            // Estimate the control point position based on the entering tangent line
+            controlPoint = segmentStart
+                .lerp(segmentEnd, 0.5)
+                .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);
         }
         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!');

package/dist/mjs/util/mitLicenseAttribution.d.ts

@@ -0,0 +1,2 @@
+declare const mitLicenseAttribution: (copyright: string) => string;
+export default mitLicenseAttribution;

package/dist/mjs/util/mitLicenseAttribution.mjs

@@ -0,0 +1,26 @@
+const mitLicenseAttribution = (copyright) => {
+    const removeSingleLineBreaks = (text) => text.replace(/([^\n])[\n]([^\n])/g, '$1 $2');
+    return removeSingleLineBreaks(`
+MIT License
+
+Copyright (c) ${copyright}
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.`);
+};
+export default mitLicenseAttribution;

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.11.1',
+    number: '1.12.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "695cfe01116839842668233a14fa858ad4ae0bac"
+  "gitHead": "c179c5b3ebca482dfb156527ec6631c8f5159033"
 }