Add Two.Arc listeners for width and height changes

extras/js/arc.js

@@ -1,7 +1,7 @@
-(function() {
-
+(function () {
   const TWO_PI = Math.PI * 2;
-  const cos = Math.cos, sin = Math.sin;
+  const cos = Math.cos,
+    sin = Math.sin;
 
   /**
    * @name Two.Arc
@@ -16,7 +16,6 @@
    * @param {Number} [resolution=4] - The number of vertices used to construct the circle.
    */
   class Arc extends Two.Path {
-
     _flagWidth = false;
     _flagHeight = false;
     _flagStartAngle = false;
@@ -28,7 +27,6 @@
     _endAngle = TWO_PI;
 
     constructor(x, y, width, height, startAngle, endAngle, resolution) {
-
       if (typeof resolution !== 'number') {
         resolution = Two.Resolution;
       }
@@ -87,7 +85,6 @@
       if (typeof y === 'number') {
         this.position.y = y;
       }
-
     }
 
     /**
@@ -105,31 +102,31 @@
      * @nota-bene Try not to call this method more than once a frame.
      */
     _update() {
-
-      if (this._flagVertices || this._flagRadius || this._flagStartAngle
-        || this._flagEndAngle) {
-
+      if (
+        this._flagVertices ||
+        this._flagRadius ||
+        this._flagStartAngle ||
+        this._flagWidth ||
+        this._flagHeight ||
+        this._flagEndAngle
+      ) {
         const { width, height, startAngle, endAngle, vertices } = this;
         const rx = width / 2;
         const ry = height / 2;
 
         for (let i = 0; i < vertices.length; i++) {
-
           const v = vertices[i];
           const pct = i / (vertices.length - 1);
           const theta = pct * (endAngle - startAngle) + startAngle;
 
           v.x = rx * cos(theta);
           v.y = ry * sin(theta);
-
         }
-
       }
 
       super._update.call(this);
 
       return this;
-
     }
 
     /**
@@ -139,14 +136,15 @@
      * @description Called internally to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.
      */
     flagReset() {
-
       super.flagReset.call(this);
 
-      this._flagWidth = this._flagHeight = this._flagStartAngle
-        = this._flagEndAngle = false;
+      this._flagWidth =
+        this._flagHeight =
+        this._flagStartAngle =
+        this._flagEndAngle =
+          false;
 
       return this;
-
     }
 
     /**
@@ -157,11 +155,18 @@
      * @description Create a new instance of {@link Two.ArcSegment} with the same properties of the current path.
      */
     clone() {
-
       const { width, height, startAngle, endAngle } = this;
       const resolution = this.vertices.length;
 
-      const clone = new Arc(0, 0, width, height, startAngle, endAngle, resolution);
+      const clone = new Arc(
+        0,
+        0,
+        width,
+        height,
+        startAngle,
+        endAngle,
+        resolution
+      );
 
       clone.position.copy(this.position);
       clone.rotation = this.rotation;
@@ -183,62 +188,59 @@
       }
 
       return clone;
-
     }
-
   }
 
   const protos = {
     width: {
       enumerable: true,
-      get: function() {
+      get: function () {
         return this._width;
       },
-      set: function(v) {
+      set: function (v) {
         if (v !== this._width) {
           this._width = v;
           this._flagWidth = true;
         }
-      }
+      },
     },
     height: {
       enumerable: true,
-      get: function() {
+      get: function () {
         return this._height;
       },
-      set: function(v) {
+      set: function (v) {
         if (v !== this._height) {
           this._height = v;
           this._flagHeight = true;
         }
-      }
+      },
     },
     startAngle: {
       enumerable: true,
-      get: function() {
+      get: function () {
         return this._startAngle;
       },
-      set: function(v) {
+      set: function (v) {
         if (v !== this._startAngle) {
           this._startAngle = v;
           this._flagStartAngle = true;
         }
-      }
+      },
     },
     endAngle: {
       enumerable: true,
-      get: function() {
+      get: function () {
         return this._endAngle;
       },
-      set: function(v) {
+      set: function (v) {
         if (v !== this._endAngle) {
           this._endAngle = v;
           this._flagEndAngle = true;
         }
-      }
-    }
+      },
+    },
   };
 
   Two.Arc = Arc;
-
 })();

extras/js/zui.js

@@ -1,13 +1,10 @@
-(function() {
-
+(function () {
   class Surface {
-
     constructor(object) {
       this.object = object;
     }
 
     limits(min, max) {
-
       const min_exists = typeof min !== 'undefined';
       const max_exists = typeof max !== 'undefined';
 
@@ -19,15 +16,13 @@
       this.max = max_exists ? max : this.max;
 
       return this;
-
     }
 
     apply(px, py, s) {
       this.object.translation.set(px, py);
       this.object.scale = s;
       return this;
     }
-
   }
 
   /**
@@ -37,20 +32,18 @@
    * @param {HTMLElement} [domElement=document.body] - The HTML Element to attach event listeners to.
    */
   class ZUI {
-
     constructor(group, domElement) {
-
       this.limits = {
         scale: ZUI.Limit.clone(),
         x: ZUI.Limit.clone(),
-        y: ZUI.Limit.clone()
+        y: ZUI.Limit.clone(),
       };
 
       this.viewport = domElement || document.body;
       this.viewportOffset = {
         top: 0,
         left: 0,
-        matrix: new Two.Matrix()
+        matrix: new Two.Matrix(),
       };
 
       this.surfaceMatrix = new Two.Matrix();
@@ -60,7 +53,6 @@
       this.updateSurface();
 
       this.add(new Surface(group));
-
     }
 
     static Surface = Surface;
@@ -72,14 +64,14 @@
     static Limit = {
       min: -Infinity,
       max: Infinity,
-      clone: function() {
+      clone: function () {
         const result = {};
         for (let k in this) {
           result[k] = this[k];
         }
         return result;
-      }
-    }
+      },
+    };
 
     static TranslateMatrix(m, x, y) {
       m.elements[2] += x;
@@ -105,7 +97,6 @@
     }
 
     addLimits(min, max) {
-
       if (typeof min !== 'undefined') {
         if (this.limits.scale.min) {
           this.limits.scale.min = Math.max(min, this.limits.scale.min);
@@ -125,7 +116,6 @@
       }
 
       return this;
-
     }
 
     clientToSurface(a, b, c) {
@@ -173,7 +163,6 @@
     }
 
     zoomSet(zoom, clientX, clientY) {
-
       const newScale = this.fitToLimits(zoom);
       this.zoom = ZUI.ScaleToPosition(newScale);
 
@@ -193,7 +182,6 @@
       this.translateSurface(dx, dy);
 
       return this;
-
     }
 
     translateSurface(x, y) {
@@ -203,7 +191,6 @@
     }
 
     updateOffset() {
-
       const rect = this.viewport.getBoundingClientRect();
 
       this.viewportOffset.left = rect.left - document.body.scrollLeft;
@@ -214,18 +201,15 @@
         .translate(this.viewportOffset.left, this.viewportOffset.top);
 
       return this;
-
     }
 
     updateSurface() {
-
       const e = this.surfaceMatrix.elements;
       for (let i = 0; i < this.surfaces.length; i++) {
         this.surfaces[i].apply(e[2], e[5], e[0]);
       }
 
       return this;
-
     }
 
     reset() {
@@ -238,9 +222,7 @@
     fitToLimits(s) {
       return ZUI.Clamp(s, this.limits.scale.min, this.limits.scale.max);
     }
-
   }
 
   Two.ZUI = ZUI;
-
 })();