Merge pull request #803 from jonobr1/467-smooth

[Enhancement] Two.Path.smooth method added

Author: jonobr1

build/two.js

@@ -379,7 +379,7 @@ export class Group extends Shape {
     }
   }
 
-  static IsVisible = function (element, visibleOnly) {
+  static IsVisible(element, visibleOnly) {
     if (!visibleOnly) {
       return true;
     }
@@ -396,9 +396,9 @@ export class Group extends Shape {
     }
 
     return true;
-  };
+  }
 
-  static VisitForHitTest = function (
+  static VisitForHitTest(
     group,
     context,
     includeGroups,
@@ -482,7 +482,7 @@ export class Group extends Shape {
     }
 
     return false;
-  };
+  }
 
   /**
    * @name Two.Group#copy
@@ -609,6 +609,25 @@ export class Group extends Shape {
     return this;
   }
 
+  /**
+   * @name Two.Group#getShapesAtPoint
+   * @function
+   * @param {Number} x - X coordinate in world space.
+   * @param {Number} y - Y coordinate in world space.
+   * @param {Object} [options] - Hit test configuration.
+   * @param {Boolean} [options.visibleOnly=true] - Limit results to visible shapes.
+   * @param {Boolean} [options.includeGroups=false] - Include groups in the hit results.
+   * @param {('all'|'deepest')} [options.mode='all'] - Whether to return all intersecting shapes or only the top-most.
+   * @param {Boolean} [options.deepest] - Alias for `mode: 'deepest'`.
+   * @param {Number} [options.precision] - Segmentation precision for curved geometry.
+   * @param {Number} [options.tolerance=0] - Pixel tolerance applied to hit testing.
+   * @param {Boolean} [options.fill] - Override fill testing behaviour.
+   * @param {Boolean} [options.stroke] - Override stroke testing behaviour.
+   * @param {Function} [options.filter] - Predicate to filter shapes from the result set.
+   * @returns {Shape[]} Ordered list of intersecting shapes, front to back.
+   * @description Traverse the group hierarchy and return shapes that contain the specified point.
+   * @nota-bene Expects *world-space coordinates* – the same pixel-space you get from the renderer (e.g., mouse `clientX`/`clientY` adjusted for the canvas’s offset and pixel ratio).
+   */
   getShapesAtPoint(x, y, options) {
     const opts = options || {};
     const { results, hitOptions, context, single, empty } =

build/two.min.js

@@ -32,6 +32,15 @@ import {
   hasVisibleFill,
   hasVisibleStroke,
 } from './utils/hit-test.js';
+import {
+  clearHandleComponent,
+  setHandleComponent,
+  inheritRelative,
+  isSegmentCurved,
+  splitSubdivisionSegment,
+  applyGlobalSmooth,
+  applyLocalSmooth,
+} from './utils/path.js';
 
 // Constants
 
@@ -824,6 +833,18 @@ export class Path extends Shape {
     };
   }
 
+  /**
+   * @name Two.Path#contains
+   * @function
+   * @param {Number} x - x coordinate to hit test against
+   * @param {Number} y - y coordinate to hit test against
+   * @param {Object} [options] - Optional options object
+   * @param {Boolean} [options.ignoreVisibility] - If `true`, hit test against `path.visible = false` shapes
+   * @param {Number} [options.tolerance] - Padding to hit test against in pixels
+   * @returns {Boolean}
+   * @description Check to see if coordinates are within a {@link Two.Path}'s bounding rectangle
+   * @nota-bene Expects *world-space coordinates* – the same pixel-space you get from the renderer (e.g., mouse `clientX`/`clientY` adjusted for the canvas’s offset and pixel ratio).
+   */
   contains(x, y, options) {
     const opts = options || {};
     const ignoreVisibility = opts.ignoreVisibility === true;
@@ -832,12 +853,15 @@ export class Path extends Shape {
       return false;
     }
 
-    if (!ignoreVisibility && typeof this.opacity === 'number' && this.opacity <= 0) {
+    if (
+      !ignoreVisibility &&
+      typeof this.opacity === 'number' &&
+      this.opacity <= 0
+    ) {
       return false;
     }
 
-    const tolerance =
-      typeof opts.tolerance === 'number' ? opts.tolerance : 0;
+    const tolerance = typeof opts.tolerance === 'number' ? opts.tolerance : 0;
 
     this._update(true);
 
@@ -878,8 +902,7 @@ export class Path extends Shape {
     }
 
     if (strokeTest && segments.length > 0) {
-      const linewidth =
-        typeof this.linewidth === 'number' ? this.linewidth : 0;
+      const linewidth = typeof this.linewidth === 'number' ? this.linewidth : 0;
       if (linewidth > 0) {
         const distance = distanceToSegments(segments, localX, localY);
         if (distance <= linewidth / 2 + tolerance) {
@@ -1052,80 +1075,208 @@ export class Path extends Shape {
     return this;
   }
 
+  /**
+   * @name Two.Path#smooth
+   * @function
+   * @param {Object} [options] - Configuration for smoothing.
+   * @param {String} [options.type='continuous'] - Type of smoothing algorithm.
+   * @param {Number} [options.from=0] - Index of vertices to start smoothing
+   * @param {Number} [options.to=1] - Index of vertices to terminate smoothing
+   * @description Adjust vertex handles to generate smooth curves without toggling `automatic`.
+   */
+  smooth(options) {
+    const opts = options || {};
+    const type = opts.type || 'continuous';
+    const vertices = this._collection;
+    const length = vertices.length;
+
+    if (length < 2) {
+      return this;
+    }
+
+    const closed =
+      this._closed ||
+      (length > 0 &&
+        vertices[length - 1] &&
+        vertices[length - 1].command === Commands.close);
+
+    const resolveIndex = (value, defaultIndex) => {
+      if (value === undefined || value === null) {
+        return defaultIndex;
+      }
+
+      if (typeof value === 'number') {
+        if (closed) {
+          return mod(value, length);
+        }
+        let index = value;
+        if (index < 0) {
+          index += length;
+        }
+        return Math.min(Math.max(index, 0), length - 1);
+      }
+
+      const idx = vertices.indexOf(value);
+      return idx !== -1 ? idx : defaultIndex;
+    };
+
+    const loop = closed && opts.from === undefined && opts.to === undefined;
+    let from = resolveIndex(opts.from, 0);
+    let to = resolveIndex(opts.to, length - 1);
+
+    if (from > to) {
+      if (closed) {
+        from -= length;
+      } else {
+        const temp = from;
+        from = to;
+        to = temp;
+      }
+    }
+
+    const rangeLength = to - from + 1;
+    for (let i = 0; i < rangeLength; i += 1) {
+      const index = mod(from + i, length);
+      const anchor = vertices[index];
+      const isOpenStart = !closed && index === 0;
+      if (anchor.command === Commands.move && !isOpenStart) {
+        anchor.command = Commands.line;
+      }
+    }
+
+    if (type === 'continuous' || type === 'asymmetric') {
+      applyGlobalSmooth(
+        vertices,
+        from,
+        to,
+        closed,
+        loop,
+        type === 'asymmetric'
+      );
+    } else if (type === 'catmull-rom' || type === 'geometric') {
+      const range = {
+        type,
+        factor: opts.factor,
+      };
+      applyLocalSmooth(vertices, from, to, closed, loop, range);
+    } else {
+      throw new Error(
+        `Path.smooth does not support type "${type}". Try 'continuous', 'asymmetric', 'catmull-rom', or 'geometric'.`
+      );
+    }
+
+    this._automatic = false;
+    this._flagVertices = true;
+    this._flagLength = true;
+
+    return this;
+  }
+
   /**
    * @name Two.Path#subdivide
    * @function
    * @param {Number} limit - How many times to recurse subdivisions.
    * @description Insert a {@link Two.Anchor} at the midpoint between every item in {@link Two.Path#vertices}.
    */
   subdivide(limit) {
-    // TODO: DRYness (function below)
     this._update();
 
-    const last = this.vertices.length - 1;
-    const closed =
-      this._closed || this.vertices[last]._command === Commands.close;
-    let b = this.vertices[last];
-    let points = [],
-      verts;
-
-    _.each(
-      this.vertices,
-      function (a, i) {
-        if (i <= 0 && !closed) {
-          b = a;
-          return;
-        }
+    const vertices = this.vertices;
+    const length = vertices.length;
+    if (length < 2) {
+      return this;
+    }
 
-        if (a.command === Commands.move) {
-          points.push(new Anchor(b.x, b.y));
-          if (i > 0) {
-            points[points.length - 1].command = Commands.line;
-          }
-          b = a;
-          return;
-        }
+    const points = [];
+    let prevOriginal = null;
+    let subpathStartOriginal = null;
 
-        verts = getSubdivisions(a, b, limit);
-        points = points.concat(verts);
+    for (let i = 0; i < length; i += 1) {
+      const currentOriginal = vertices[i];
 
-        // Assign commands to all the verts
-        _.each(verts, function (v, i) {
-          if (i <= 0 && b.command === Commands.move) {
-            v.command = Commands.move;
-          } else {
-            v.command = Commands.line;
-          }
-        });
+      if (!prevOriginal || currentOriginal.command === Commands.move) {
+        const clone = currentOriginal.clone();
+        points.push(clone);
+        prevOriginal = currentOriginal;
+        subpathStartOriginal = currentOriginal;
+        continue;
+      }
 
-        if (i >= last) {
-          // TODO: Add check if the two vectors in question are the same values.
-          if (this._closed && this._automatic) {
-            b = a;
+      const isCurve = isSegmentCurved(currentOriginal, prevOriginal);
 
-            verts = getSubdivisions(a, b, limit);
-            points = points.concat(verts);
+      if (isCurve) {
+        const subdivided = getSubdivisions(currentOriginal, prevOriginal, limit);
+        const steps = subdivided.length;
+        const prevClone = points[points.length - 1];
+        let startSegment = prevClone.clone();
+        let endSegment = currentOriginal.clone();
+        let prevCloneRef = prevClone;
+        let prevT = 0;
 
-            // Assign commands to all the verts
-            _.each(verts, function (v, i) {
-              if (i <= 0 && b.command === Commands.move) {
-                v.command = Commands.move;
-              } else {
-                v.command = Commands.line;
-              }
-            });
+        if (steps <= 1) {
+          const currentClone = currentOriginal.clone();
+          points.push(currentClone);
+        } else {
+          for (let j = 1; j < steps; j += 1) {
+            const globalT = j / steps;
+            const denom = 1 - prevT;
+            const localT =
+              denom <= Number.EPSILON ? globalT : (globalT - prevT) / denom;
+
+            const split = splitSubdivisionSegment(
+              startSegment,
+              endSegment,
+              localT
+            );
+
+            setHandleComponent(
+              prevCloneRef,
+              'right',
+              split.startOut.x - prevCloneRef.x,
+              split.startOut.y - prevCloneRef.y
+            );
+
+            const newAnchor = split.anchor;
+            points.push(newAnchor);
+
+            prevCloneRef = newAnchor;
+            startSegment = newAnchor.clone();
+            prevT = globalT;
+
+            setHandleComponent(
+              endSegment,
+              'left',
+              split.endIn.x - endSegment.x,
+              split.endIn.y - endSegment.y
+            );
           }
 
-          points.push(new Anchor(a.x, a.y));
-          points[points.length - 1].command = closed
-            ? Commands.close
-            : Commands.line;
+          const currentClone = currentOriginal.clone();
+          currentClone.controls.left.copy(endSegment.controls.left);
+          points.push(currentClone);
+        }
+      } else {
+        const subdivided = getSubdivisions(currentOriginal, prevOriginal, limit);
+
+        for (let j = 1; j < subdivided.length; j += 1) {
+          const anchor = subdivided[j];
+          inheritRelative(anchor, prevOriginal);
+          clearHandleComponent(anchor, 'left');
+          clearHandleComponent(anchor, 'right');
+          anchor.command = Commands.line;
+          points.push(anchor);
         }
 
-        b = a;
-      },
-      this
-    );
+        const currentClone = currentOriginal.clone();
+        points.push(currentClone);
+      }
+
+      prevOriginal = currentOriginal;
+
+      if (currentOriginal.command === Commands.close) {
+        prevOriginal = subpathStartOriginal;
+      }
+    }
 
     this._automatic = false;
     this._curved = false;

build/two.module.js

@@ -221,7 +221,9 @@ export class Shape extends Element {
    * @param {Object} [options] - Optional options object
    * @param {Boolean} [options.ignoreVisibility] - If `true`, hit test against `shape.visible = false` shapes
    * @param {Number} [options.tolerance] - Padding to hit test against in pixels
-   * @description Remove self from the scene / parent.
+   * @returns {Boolean}
+   * @description Check to see if coordinates are within a {@link Two.Shape}'s bounding rectangle
+   * @nota-bene Expects *world-space coordinates* – the same pixel-space you get from the renderer (e.g., mouse `clientX`/`clientY` adjusted for the canvas’s offset and pixel ratio).
    */
   contains(x, y, options) {
     const opts = options || {};