From 7209a7f169367fe5379a97775667cfb9cb90e7a3 Mon Sep 17 00:00:00 2001
From: sporklpony <comradesparklepony@gmail.com>
Date: Mon, 7 Dec 2020 10:58:42 -0500
Subject: [PATCH 1/3] Add starting frame to loop and play once

Now loop and play once can have a starting frame set. Currently, loop
goes back to the very beginning, not the starting frame, but that can be
fixed if other behavior is desired.

This should resolve issue #280.
---
 engine/dist/emptyproject.html                 | 58 ++++++++-----------
 engine/dist/wickengine.js                     | 58 ++++++++-----------
 engine/src/base/Clip.js                       | 33 ++++-------
 public/corelibs/wick-engine/emptyproject.html | 58 ++++++++-----------
 public/corelibs/wick-engine/wickengine.js     | 58 ++++++++-----------
 src/Editor/Panels/Inspector/Inspector.jsx     |  1 -
 6 files changed, 104 insertions(+), 162 deletions(-)

diff --git a/engine/dist/emptyproject.html b/engine/dist/emptyproject.html
index 1a60506e1..ff2318181 100644
--- a/engine/dist/emptyproject.html
+++ b/engine/dist/emptyproject.html
@@ -34763,8 +34763,8 @@
 },{"./_descriptors":42,"./_object-dp":52,"./_property-desc":53}],48:[function(require,module,exports){
 module.exports = require('./_global').document && document.documentElement;
 },{"./_global":46}],49:[function(require,module,exports){
-module.exports = !require('./_descriptors') && !require('./_fails')(function(){
-  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
+module.exports = !require('./_descriptors') && !require('./_fails')(function(){
+  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
 });
 },{"./_descriptors":42,"./_dom-create":43,"./_fails":45}],50:[function(require,module,exports){
 // fast apply, http://jsperf.lnkit.com/fast-apply/5
@@ -54400,16 +54400,16 @@
    */
 
 
-  getInstances() {// Implemented by subclasses
-  }
+  getInstances() {} // Implemented by subclasses
+
   /**
    * Check if there are any objects in the project that use this asset.
    * @returns {boolean}
    */
 
 
-  hasInstances() {// Implemented by sublasses
-  }
+  hasInstances() {} // Implemented by sublasses
+
   /**
    * Remove all instances of this asset from the project. (Implemented by ClipAsset, ImageAsset, and SoundAsset)
    */
@@ -55463,8 +55463,8 @@
    */
 
 
-  removeAllInstances() {// TODO
-  }
+  removeAllInstances() {} // TODO
+
   /**
    * Load data in the asset
    */
@@ -57084,8 +57084,7 @@
     this.timeline.activeLayer.addFrame(new Wick.Frame());
     this._animationType = 'loop'; // Can be one of loop, oneFrame, single
 
-    this._singleFrameNumber = 1; // Default to 1, this value is only used if the animation type is single
-
+    this._singleFrameNumber = 1;
     this._playedOnce = false;
     this._isSynced = false;
     this._removed = false;
@@ -57174,7 +57173,7 @@
     if (bool) {
       this.applySyncPosition();
     } else {
-      this.timeline.playheadPosition = 1;
+      this.timeline.playheadPosition = this._singleFrameNumber;
     }
   }
   /**
@@ -57283,11 +57282,7 @@
 
 
   get singleFrameNumber() {
-    if (this.animationType !== 'single') {
-      return null;
-    } else {
-      return this._singleFrameNumber;
-    }
+    return this._singleFrameNumber;
   }
 
   set singleFrameNumber(frame) {
@@ -57308,14 +57303,14 @@
 
 
   get syncFrame() {
-    let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start; // Show the last frame if we're past it on a playOnce Clip.
+    let timelineOffset = this.parentClip.timeline.playheadPosition - (this.parentFrame.start + this._singleFrameNumber); // Show the last frame if we're past it on a playOnce Clip.
 
     if (this.animationType === 'playOnce' && timelineOffset >= this.timeline.length) {
       return this.timeline.length;
     } // Otherwise, show the correct frame.
 
 
-    return timelineOffset % this.timeline.length + 1;
+    return timelineOffset % this.timeline.length + this._singleFrameNumber;
   }
   /**
    * Returns true if the clip has been played through fully once.
@@ -57393,11 +57388,7 @@
 
 
   resetTimelinePosition() {
-    if (this.animationType === 'single') {
-      this.applySingleFramePosition();
-    } else {
-      this.timeline.playheadPosition = 1; // Reset timeline position if we are not on single frame.
-    }
+    this.applySingleFramePosition();
   }
   /**
    * Updates the frame's single frame positions if necessary. Only works if the clip's animationType is 'single'.
@@ -57405,10 +57396,7 @@
 
 
   applySingleFramePosition() {
-    if (this.animationType === 'single') {
-      // Ensure that the single frame we've chosen is reflected no matter what.
-      this.timeline.playheadPosition = this.singleFrameNumber;
-    }
+    this.timeline.playheadPosition = this.singleFrameNumber;
   }
   /**
    * Updates the clip's playhead position if the Clip is in sync mode
@@ -57417,7 +57405,7 @@
 
   applySyncPosition() {
     if (this.isSynced) {
-      this.timeline.playheadPosition = this.syncFrame;
+      this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
     }
   }
   /**
@@ -58360,7 +58348,7 @@
 
     if (this.animationType === 'playOnce') {
       this.playedOnce = false;
-      this.timeline.playheadPosition = 1;
+      this.timeline.playheadPosition = this._singleFrameNumber;
     }
   }
 
@@ -64362,22 +64350,22 @@
    */
 
 
-  onMouseDown(e) {// Implemeneted by subclasses.
-  }
+  onMouseDown(e) {} // Implemeneted by subclasses.
+
   /**
    * The function to call when the mouse drags this element.
    */
 
 
-  onMouseDrag(e) {// Implemeneted by subclasses.
-  }
+  onMouseDrag(e) {} // Implemeneted by subclasses.
+
   /**
    * The function to call when the mouse finishes a click on this element.
    */
 
 
-  onMouseUp(e) {// Implemeneted by subclasses.
-  }
+  onMouseUp(e) {} // Implemeneted by subclasses.
+
   /**
    * Causes the project to call it's onProjectModified function. Call this after modifying the project.
    */
diff --git a/engine/dist/wickengine.js b/engine/dist/wickengine.js
index 831fd766e..06bdca912 100644
--- a/engine/dist/wickengine.js
+++ b/engine/dist/wickengine.js
@@ -34748,8 +34748,8 @@ module.exports = require('./_descriptors') ? function(object, key, value){
 },{"./_descriptors":42,"./_object-dp":52,"./_property-desc":53}],48:[function(require,module,exports){
 module.exports = require('./_global').document && document.documentElement;
 },{"./_global":46}],49:[function(require,module,exports){
-module.exports = !require('./_descriptors') && !require('./_fails')(function(){
-  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
+module.exports = !require('./_descriptors') && !require('./_fails')(function(){
+  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
 });
 },{"./_descriptors":42,"./_dom-create":43,"./_fails":45}],50:[function(require,module,exports){
 // fast apply, http://jsperf.lnkit.com/fast-apply/5
@@ -54385,16 +54385,16 @@ Wick.Asset = class extends Wick.Base {
    */
 
 
-  getInstances() {// Implemented by subclasses
-  }
+  getInstances() {} // Implemented by subclasses
+
   /**
    * Check if there are any objects in the project that use this asset.
    * @returns {boolean}
    */
 
 
-  hasInstances() {// Implemented by sublasses
-  }
+  hasInstances() {} // Implemented by sublasses
+
   /**
    * Remove all instances of this asset from the project. (Implemented by ClipAsset, ImageAsset, and SoundAsset)
    */
@@ -55448,8 +55448,8 @@ Wick.SVGAsset = class extends Wick.FileAsset {
    */
 
 
-  removeAllInstances() {// TODO
-  }
+  removeAllInstances() {} // TODO
+
   /**
    * Load data in the asset
    */
@@ -57069,8 +57069,7 @@ Wick.Clip = class extends Wick.Tickable {
     this.timeline.activeLayer.addFrame(new Wick.Frame());
     this._animationType = 'loop'; // Can be one of loop, oneFrame, single
 
-    this._singleFrameNumber = 1; // Default to 1, this value is only used if the animation type is single
-
+    this._singleFrameNumber = 1;
     this._playedOnce = false;
     this._isSynced = false;
     this._removed = false;
@@ -57159,7 +57158,7 @@ Wick.Clip = class extends Wick.Tickable {
     if (bool) {
       this.applySyncPosition();
     } else {
-      this.timeline.playheadPosition = 1;
+      this.timeline.playheadPosition = this._singleFrameNumber;
     }
   }
   /**
@@ -57268,11 +57267,7 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   get singleFrameNumber() {
-    if (this.animationType !== 'single') {
-      return null;
-    } else {
-      return this._singleFrameNumber;
-    }
+    return this._singleFrameNumber;
   }
 
   set singleFrameNumber(frame) {
@@ -57293,14 +57288,14 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   get syncFrame() {
-    let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start; // Show the last frame if we're past it on a playOnce Clip.
+    let timelineOffset = this.parentClip.timeline.playheadPosition - (this.parentFrame.start + this._singleFrameNumber); // Show the last frame if we're past it on a playOnce Clip.
 
     if (this.animationType === 'playOnce' && timelineOffset >= this.timeline.length) {
       return this.timeline.length;
     } // Otherwise, show the correct frame.
 
 
-    return timelineOffset % this.timeline.length + 1;
+    return timelineOffset % this.timeline.length + this._singleFrameNumber;
   }
   /**
    * Returns true if the clip has been played through fully once.
@@ -57378,11 +57373,7 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   resetTimelinePosition() {
-    if (this.animationType === 'single') {
-      this.applySingleFramePosition();
-    } else {
-      this.timeline.playheadPosition = 1; // Reset timeline position if we are not on single frame.
-    }
+    this.applySingleFramePosition();
   }
   /**
    * Updates the frame's single frame positions if necessary. Only works if the clip's animationType is 'single'.
@@ -57390,10 +57381,7 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   applySingleFramePosition() {
-    if (this.animationType === 'single') {
-      // Ensure that the single frame we've chosen is reflected no matter what.
-      this.timeline.playheadPosition = this.singleFrameNumber;
-    }
+    this.timeline.playheadPosition = this.singleFrameNumber;
   }
   /**
    * Updates the clip's playhead position if the Clip is in sync mode
@@ -57402,7 +57390,7 @@ Wick.Clip = class extends Wick.Tickable {
 
   applySyncPosition() {
     if (this.isSynced) {
-      this.timeline.playheadPosition = this.syncFrame;
+      this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
     }
   }
   /**
@@ -58345,7 +58333,7 @@ Wick.Clip = class extends Wick.Tickable {
 
     if (this.animationType === 'playOnce') {
       this.playedOnce = false;
-      this.timeline.playheadPosition = 1;
+      this.timeline.playheadPosition = this._singleFrameNumber;
     }
   }
 
@@ -64347,22 +64335,22 @@ Wick.GUIElement = class {
    */
 
 
-  onMouseDown(e) {// Implemeneted by subclasses.
-  }
+  onMouseDown(e) {} // Implemeneted by subclasses.
+
   /**
    * The function to call when the mouse drags this element.
    */
 
 
-  onMouseDrag(e) {// Implemeneted by subclasses.
-  }
+  onMouseDrag(e) {} // Implemeneted by subclasses.
+
   /**
    * The function to call when the mouse finishes a click on this element.
    */
 
 
-  onMouseUp(e) {// Implemeneted by subclasses.
-  }
+  onMouseUp(e) {} // Implemeneted by subclasses.
+
   /**
    * Causes the project to call it's onProjectModified function. Call this after modifying the project.
    */
diff --git a/engine/src/base/Clip.js b/engine/src/base/Clip.js
index 5368713fa..9263a9c8a 100644
--- a/engine/src/base/Clip.js
+++ b/engine/src/base/Clip.js
@@ -48,7 +48,7 @@ Wick.Clip = class extends Wick.Tickable {
         this.timeline.addLayer(new Wick.Layer());
         this.timeline.activeLayer.addFrame(new Wick.Frame());
         this._animationType = 'loop'; // Can be one of loop, oneFrame, single
-        this._singleFrameNumber = 1; // Default to 1, this value is only used if the animation type is single
+        this._singleFrameNumber = 1;
         this._playedOnce = false;
         this._isSynced = false;
         this._removed = false;
@@ -141,7 +141,7 @@ Wick.Clip = class extends Wick.Tickable {
         if (bool) {
             this.applySyncPosition();
         } else {
-            this.timeline.playheadPosition = 1; 
+            this.timeline.playheadPosition = this._singleFrameNumber; 
         }
     }
 
@@ -242,11 +242,7 @@ Wick.Clip = class extends Wick.Tickable {
      * @type {number}
      */
     get singleFrameNumber () {
-        if (this.animationType !== 'single') {
-            return null;
-        } else {
-            return this._singleFrameNumber;
-        }
+        return this._singleFrameNumber;
     }
 
     set singleFrameNumber (frame) {
@@ -266,15 +262,17 @@ Wick.Clip = class extends Wick.Tickable {
      * @type {number}
      */
     get syncFrame () {
-        let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start;
+        let timelineOffset = this.parentClip.timeline.playheadPosition -
+            (this.parentFrame.start + this._singleFrameNumber);
 
         // Show the last frame if we're past it on a playOnce Clip.
-        if (this.animationType === 'playOnce' && (timelineOffset >= this.timeline.length)) {
+        if (this.animationType === 'playOnce' &&
+            (timelineOffset >= this.timeline.length)) {
             return this.timeline.length;
         }
 
         // Otherwise, show the correct frame.
-        return (timelineOffset % this.timeline.length) + 1;
+        return (timelineOffset % this.timeline.length) + this._singleFrameNumber;
     }
 
     /**
@@ -348,21 +346,14 @@ Wick.Clip = class extends Wick.Tickable {
      * Resets the clip's timeline position.
      */
     resetTimelinePosition () {
-        if (this.animationType === 'single') {
-            this.applySingleFramePosition();
-        } else {
-            this.timeline.playheadPosition = 1; // Reset timeline position if we are not on single frame.
-        }
+        this.applySingleFramePosition();
     }
 
     /**
      * Updates the frame's single frame positions if necessary. Only works if the clip's animationType is 'single'.
      */
     applySingleFramePosition () {
-        if (this.animationType === 'single') { 
-            // Ensure that the single frame we've chosen is reflected no matter what.
-            this.timeline.playheadPosition = this.singleFrameNumber;
-        }
+        this.timeline.playheadPosition = this.singleFrameNumber;
     }
 
     /**
@@ -370,7 +361,7 @@ Wick.Clip = class extends Wick.Tickable {
      */
     applySyncPosition () {
         if (this.isSynced) {
-            this.timeline.playheadPosition = this.syncFrame;
+            this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
         }
     }
 
@@ -1258,7 +1249,7 @@ Wick.Clip = class extends Wick.Tickable {
 
         if (this.animationType === 'playOnce') {
             this.playedOnce = false;
-            this.timeline.playheadPosition = 1;
+            this.timeline.playheadPosition = this._singleFrameNumber;
         }
 
     }
diff --git a/public/corelibs/wick-engine/emptyproject.html b/public/corelibs/wick-engine/emptyproject.html
index 1a60506e1..ff2318181 100644
--- a/public/corelibs/wick-engine/emptyproject.html
+++ b/public/corelibs/wick-engine/emptyproject.html
@@ -34763,8 +34763,8 @@
 },{"./_descriptors":42,"./_object-dp":52,"./_property-desc":53}],48:[function(require,module,exports){
 module.exports = require('./_global').document && document.documentElement;
 },{"./_global":46}],49:[function(require,module,exports){
-module.exports = !require('./_descriptors') && !require('./_fails')(function(){
-  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
+module.exports = !require('./_descriptors') && !require('./_fails')(function(){
+  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
 });
 },{"./_descriptors":42,"./_dom-create":43,"./_fails":45}],50:[function(require,module,exports){
 // fast apply, http://jsperf.lnkit.com/fast-apply/5
@@ -54400,16 +54400,16 @@
    */
 
 
-  getInstances() {// Implemented by subclasses
-  }
+  getInstances() {} // Implemented by subclasses
+
   /**
    * Check if there are any objects in the project that use this asset.
    * @returns {boolean}
    */
 
 
-  hasInstances() {// Implemented by sublasses
-  }
+  hasInstances() {} // Implemented by sublasses
+
   /**
    * Remove all instances of this asset from the project. (Implemented by ClipAsset, ImageAsset, and SoundAsset)
    */
@@ -55463,8 +55463,8 @@
    */
 
 
-  removeAllInstances() {// TODO
-  }
+  removeAllInstances() {} // TODO
+
   /**
    * Load data in the asset
    */
@@ -57084,8 +57084,7 @@
     this.timeline.activeLayer.addFrame(new Wick.Frame());
     this._animationType = 'loop'; // Can be one of loop, oneFrame, single
 
-    this._singleFrameNumber = 1; // Default to 1, this value is only used if the animation type is single
-
+    this._singleFrameNumber = 1;
     this._playedOnce = false;
     this._isSynced = false;
     this._removed = false;
@@ -57174,7 +57173,7 @@
     if (bool) {
       this.applySyncPosition();
     } else {
-      this.timeline.playheadPosition = 1;
+      this.timeline.playheadPosition = this._singleFrameNumber;
     }
   }
   /**
@@ -57283,11 +57282,7 @@
 
 
   get singleFrameNumber() {
-    if (this.animationType !== 'single') {
-      return null;
-    } else {
-      return this._singleFrameNumber;
-    }
+    return this._singleFrameNumber;
   }
 
   set singleFrameNumber(frame) {
@@ -57308,14 +57303,14 @@
 
 
   get syncFrame() {
-    let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start; // Show the last frame if we're past it on a playOnce Clip.
+    let timelineOffset = this.parentClip.timeline.playheadPosition - (this.parentFrame.start + this._singleFrameNumber); // Show the last frame if we're past it on a playOnce Clip.
 
     if (this.animationType === 'playOnce' && timelineOffset >= this.timeline.length) {
       return this.timeline.length;
     } // Otherwise, show the correct frame.
 
 
-    return timelineOffset % this.timeline.length + 1;
+    return timelineOffset % this.timeline.length + this._singleFrameNumber;
   }
   /**
    * Returns true if the clip has been played through fully once.
@@ -57393,11 +57388,7 @@
 
 
   resetTimelinePosition() {
-    if (this.animationType === 'single') {
-      this.applySingleFramePosition();
-    } else {
-      this.timeline.playheadPosition = 1; // Reset timeline position if we are not on single frame.
-    }
+    this.applySingleFramePosition();
   }
   /**
    * Updates the frame's single frame positions if necessary. Only works if the clip's animationType is 'single'.
@@ -57405,10 +57396,7 @@
 
 
   applySingleFramePosition() {
-    if (this.animationType === 'single') {
-      // Ensure that the single frame we've chosen is reflected no matter what.
-      this.timeline.playheadPosition = this.singleFrameNumber;
-    }
+    this.timeline.playheadPosition = this.singleFrameNumber;
   }
   /**
    * Updates the clip's playhead position if the Clip is in sync mode
@@ -57417,7 +57405,7 @@
 
   applySyncPosition() {
     if (this.isSynced) {
-      this.timeline.playheadPosition = this.syncFrame;
+      this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
     }
   }
   /**
@@ -58360,7 +58348,7 @@
 
     if (this.animationType === 'playOnce') {
       this.playedOnce = false;
-      this.timeline.playheadPosition = 1;
+      this.timeline.playheadPosition = this._singleFrameNumber;
     }
   }
 
@@ -64362,22 +64350,22 @@
    */
 
 
-  onMouseDown(e) {// Implemeneted by subclasses.
-  }
+  onMouseDown(e) {} // Implemeneted by subclasses.
+
   /**
    * The function to call when the mouse drags this element.
    */
 
 
-  onMouseDrag(e) {// Implemeneted by subclasses.
-  }
+  onMouseDrag(e) {} // Implemeneted by subclasses.
+
   /**
    * The function to call when the mouse finishes a click on this element.
    */
 
 
-  onMouseUp(e) {// Implemeneted by subclasses.
-  }
+  onMouseUp(e) {} // Implemeneted by subclasses.
+
   /**
    * Causes the project to call it's onProjectModified function. Call this after modifying the project.
    */
diff --git a/public/corelibs/wick-engine/wickengine.js b/public/corelibs/wick-engine/wickengine.js
index 831fd766e..06bdca912 100644
--- a/public/corelibs/wick-engine/wickengine.js
+++ b/public/corelibs/wick-engine/wickengine.js
@@ -34748,8 +34748,8 @@ module.exports = require('./_descriptors') ? function(object, key, value){
 },{"./_descriptors":42,"./_object-dp":52,"./_property-desc":53}],48:[function(require,module,exports){
 module.exports = require('./_global').document && document.documentElement;
 },{"./_global":46}],49:[function(require,module,exports){
-module.exports = !require('./_descriptors') && !require('./_fails')(function(){
-  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
+module.exports = !require('./_descriptors') && !require('./_fails')(function(){
+  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
 });
 },{"./_descriptors":42,"./_dom-create":43,"./_fails":45}],50:[function(require,module,exports){
 // fast apply, http://jsperf.lnkit.com/fast-apply/5
@@ -54385,16 +54385,16 @@ Wick.Asset = class extends Wick.Base {
    */
 
 
-  getInstances() {// Implemented by subclasses
-  }
+  getInstances() {} // Implemented by subclasses
+
   /**
    * Check if there are any objects in the project that use this asset.
    * @returns {boolean}
    */
 
 
-  hasInstances() {// Implemented by sublasses
-  }
+  hasInstances() {} // Implemented by sublasses
+
   /**
    * Remove all instances of this asset from the project. (Implemented by ClipAsset, ImageAsset, and SoundAsset)
    */
@@ -55448,8 +55448,8 @@ Wick.SVGAsset = class extends Wick.FileAsset {
    */
 
 
-  removeAllInstances() {// TODO
-  }
+  removeAllInstances() {} // TODO
+
   /**
    * Load data in the asset
    */
@@ -57069,8 +57069,7 @@ Wick.Clip = class extends Wick.Tickable {
     this.timeline.activeLayer.addFrame(new Wick.Frame());
     this._animationType = 'loop'; // Can be one of loop, oneFrame, single
 
-    this._singleFrameNumber = 1; // Default to 1, this value is only used if the animation type is single
-
+    this._singleFrameNumber = 1;
     this._playedOnce = false;
     this._isSynced = false;
     this._removed = false;
@@ -57159,7 +57158,7 @@ Wick.Clip = class extends Wick.Tickable {
     if (bool) {
       this.applySyncPosition();
     } else {
-      this.timeline.playheadPosition = 1;
+      this.timeline.playheadPosition = this._singleFrameNumber;
     }
   }
   /**
@@ -57268,11 +57267,7 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   get singleFrameNumber() {
-    if (this.animationType !== 'single') {
-      return null;
-    } else {
-      return this._singleFrameNumber;
-    }
+    return this._singleFrameNumber;
   }
 
   set singleFrameNumber(frame) {
@@ -57293,14 +57288,14 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   get syncFrame() {
-    let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start; // Show the last frame if we're past it on a playOnce Clip.
+    let timelineOffset = this.parentClip.timeline.playheadPosition - (this.parentFrame.start + this._singleFrameNumber); // Show the last frame if we're past it on a playOnce Clip.
 
     if (this.animationType === 'playOnce' && timelineOffset >= this.timeline.length) {
       return this.timeline.length;
     } // Otherwise, show the correct frame.
 
 
-    return timelineOffset % this.timeline.length + 1;
+    return timelineOffset % this.timeline.length + this._singleFrameNumber;
   }
   /**
    * Returns true if the clip has been played through fully once.
@@ -57378,11 +57373,7 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   resetTimelinePosition() {
-    if (this.animationType === 'single') {
-      this.applySingleFramePosition();
-    } else {
-      this.timeline.playheadPosition = 1; // Reset timeline position if we are not on single frame.
-    }
+    this.applySingleFramePosition();
   }
   /**
    * Updates the frame's single frame positions if necessary. Only works if the clip's animationType is 'single'.
@@ -57390,10 +57381,7 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   applySingleFramePosition() {
-    if (this.animationType === 'single') {
-      // Ensure that the single frame we've chosen is reflected no matter what.
-      this.timeline.playheadPosition = this.singleFrameNumber;
-    }
+    this.timeline.playheadPosition = this.singleFrameNumber;
   }
   /**
    * Updates the clip's playhead position if the Clip is in sync mode
@@ -57402,7 +57390,7 @@ Wick.Clip = class extends Wick.Tickable {
 
   applySyncPosition() {
     if (this.isSynced) {
-      this.timeline.playheadPosition = this.syncFrame;
+      this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
     }
   }
   /**
@@ -58345,7 +58333,7 @@ Wick.Clip = class extends Wick.Tickable {
 
     if (this.animationType === 'playOnce') {
       this.playedOnce = false;
-      this.timeline.playheadPosition = 1;
+      this.timeline.playheadPosition = this._singleFrameNumber;
     }
   }
 
@@ -64347,22 +64335,22 @@ Wick.GUIElement = class {
    */
 
 
-  onMouseDown(e) {// Implemeneted by subclasses.
-  }
+  onMouseDown(e) {} // Implemeneted by subclasses.
+
   /**
    * The function to call when the mouse drags this element.
    */
 
 
-  onMouseDrag(e) {// Implemeneted by subclasses.
-  }
+  onMouseDrag(e) {} // Implemeneted by subclasses.
+
   /**
    * The function to call when the mouse finishes a click on this element.
    */
 
 
-  onMouseUp(e) {// Implemeneted by subclasses.
-  }
+  onMouseUp(e) {} // Implemeneted by subclasses.
+
   /**
    * Causes the project to call it's onProjectModified function. Call this after modifying the project.
    */
diff --git a/src/Editor/Panels/Inspector/Inspector.jsx b/src/Editor/Panels/Inspector/Inspector.jsx
index 837bde4c2..58c1ed4ee 100644
--- a/src/Editor/Panels/Inspector/Inspector.jsx
+++ b/src/Editor/Panels/Inspector/Inspector.jsx
@@ -584,7 +584,6 @@ class Inspector extends Component {
           isSearchable={true}
           onChange={(val) => {this.setSelectionAttribute('animationType', val.value)}} />
           {
-            this.getSelectionAttribute('singleFrameNumber') &&
             <InspectorNumericInput
             tooltip="Frame"
             val={this.getSelectionAttribute('singleFrameNumber')}

From 4eaa118b57a1014b0c107a58bc82cb9ebc37ad57 Mon Sep 17 00:00:00 2001
From: sporklpony <comradesparklepony@gmail.com>
Date: Mon, 7 Dec 2020 13:35:22 -0500
Subject: [PATCH 2/3] Fix syncing bugs

In the previous implementation, some bugs related to syncing occurred.
They all should be fixed now; both syncing and non-syncing should work
as expected, with a starting frame.
---
 engine/dist/emptyproject.html                 |  8 ++++----
 engine/dist/wickengine.js                     |  8 ++++----
 engine/src/base/Clip.js                       | 10 ++++------
 public/corelibs/wick-engine/emptyproject.html |  8 ++++----
 public/corelibs/wick-engine/wickengine.js     |  8 ++++----
 5 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/engine/dist/emptyproject.html b/engine/dist/emptyproject.html
index ff2318181..b00733928 100644
--- a/engine/dist/emptyproject.html
+++ b/engine/dist/emptyproject.html
@@ -57303,14 +57303,14 @@
 
 
   get syncFrame() {
-    let timelineOffset = this.parentClip.timeline.playheadPosition - (this.parentFrame.start + this._singleFrameNumber); // Show the last frame if we're past it on a playOnce Clip.
+    let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start; // Show the last frame if we're past it on a playOnce Clip.
 
-    if (this.animationType === 'playOnce' && timelineOffset >= this.timeline.length) {
+    if (this.animationType === 'playOnce' && timelineOffset + this._singleFrameNumber >= this.timeline.length) {
       return this.timeline.length;
     } // Otherwise, show the correct frame.
 
 
-    return timelineOffset % this.timeline.length + this._singleFrameNumber;
+    return (timelineOffset + this._singleFrameNumber - 1) % this.timeline.length + 1;
   }
   /**
    * Returns true if the clip has been played through fully once.
@@ -57405,7 +57405,7 @@
 
   applySyncPosition() {
     if (this.isSynced) {
-      this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
+      this.timeline.playheadPosition = this.syncFrame;
     }
   }
   /**
diff --git a/engine/dist/wickengine.js b/engine/dist/wickengine.js
index 06bdca912..0a9d99458 100644
--- a/engine/dist/wickengine.js
+++ b/engine/dist/wickengine.js
@@ -57288,14 +57288,14 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   get syncFrame() {
-    let timelineOffset = this.parentClip.timeline.playheadPosition - (this.parentFrame.start + this._singleFrameNumber); // Show the last frame if we're past it on a playOnce Clip.
+    let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start; // Show the last frame if we're past it on a playOnce Clip.
 
-    if (this.animationType === 'playOnce' && timelineOffset >= this.timeline.length) {
+    if (this.animationType === 'playOnce' && timelineOffset + this._singleFrameNumber >= this.timeline.length) {
       return this.timeline.length;
     } // Otherwise, show the correct frame.
 
 
-    return timelineOffset % this.timeline.length + this._singleFrameNumber;
+    return (timelineOffset + this._singleFrameNumber - 1) % this.timeline.length + 1;
   }
   /**
    * Returns true if the clip has been played through fully once.
@@ -57390,7 +57390,7 @@ Wick.Clip = class extends Wick.Tickable {
 
   applySyncPosition() {
     if (this.isSynced) {
-      this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
+      this.timeline.playheadPosition = this.syncFrame;
     }
   }
   /**
diff --git a/engine/src/base/Clip.js b/engine/src/base/Clip.js
index 9263a9c8a..38cfec295 100644
--- a/engine/src/base/Clip.js
+++ b/engine/src/base/Clip.js
@@ -262,17 +262,16 @@ Wick.Clip = class extends Wick.Tickable {
      * @type {number}
      */
     get syncFrame () {
-        let timelineOffset = this.parentClip.timeline.playheadPosition -
-            (this.parentFrame.start + this._singleFrameNumber);
+        let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start;
 
         // Show the last frame if we're past it on a playOnce Clip.
         if (this.animationType === 'playOnce' &&
-            (timelineOffset >= this.timeline.length)) {
+            (timelineOffset + this._singleFrameNumber >= this.timeline.length)) {
             return this.timeline.length;
         }
 
         // Otherwise, show the correct frame.
-        return (timelineOffset % this.timeline.length) + this._singleFrameNumber;
+        return ((timelineOffset + this._singleFrameNumber - 1) % this.timeline.length) + 1;
     }
 
     /**
@@ -361,7 +360,7 @@ Wick.Clip = class extends Wick.Tickable {
      */
     applySyncPosition () {
         if (this.isSynced) {
-            this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
+            this.timeline.playheadPosition = this.syncFrame;
         }
     }
 
@@ -1251,7 +1250,6 @@ Wick.Clip = class extends Wick.Tickable {
             this.playedOnce = false;
             this.timeline.playheadPosition = this._singleFrameNumber;
         }
-
     }
 
     _onActive() {
diff --git a/public/corelibs/wick-engine/emptyproject.html b/public/corelibs/wick-engine/emptyproject.html
index ff2318181..b00733928 100644
--- a/public/corelibs/wick-engine/emptyproject.html
+++ b/public/corelibs/wick-engine/emptyproject.html
@@ -57303,14 +57303,14 @@
 
 
   get syncFrame() {
-    let timelineOffset = this.parentClip.timeline.playheadPosition - (this.parentFrame.start + this._singleFrameNumber); // Show the last frame if we're past it on a playOnce Clip.
+    let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start; // Show the last frame if we're past it on a playOnce Clip.
 
-    if (this.animationType === 'playOnce' && timelineOffset >= this.timeline.length) {
+    if (this.animationType === 'playOnce' && timelineOffset + this._singleFrameNumber >= this.timeline.length) {
       return this.timeline.length;
     } // Otherwise, show the correct frame.
 
 
-    return timelineOffset % this.timeline.length + this._singleFrameNumber;
+    return (timelineOffset + this._singleFrameNumber - 1) % this.timeline.length + 1;
   }
   /**
    * Returns true if the clip has been played through fully once.
@@ -57405,7 +57405,7 @@
 
   applySyncPosition() {
     if (this.isSynced) {
-      this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
+      this.timeline.playheadPosition = this.syncFrame;
     }
   }
   /**
diff --git a/public/corelibs/wick-engine/wickengine.js b/public/corelibs/wick-engine/wickengine.js
index 06bdca912..0a9d99458 100644
--- a/public/corelibs/wick-engine/wickengine.js
+++ b/public/corelibs/wick-engine/wickengine.js
@@ -57288,14 +57288,14 @@ Wick.Clip = class extends Wick.Tickable {
 
 
   get syncFrame() {
-    let timelineOffset = this.parentClip.timeline.playheadPosition - (this.parentFrame.start + this._singleFrameNumber); // Show the last frame if we're past it on a playOnce Clip.
+    let timelineOffset = this.parentClip.timeline.playheadPosition - this.parentFrame.start; // Show the last frame if we're past it on a playOnce Clip.
 
-    if (this.animationType === 'playOnce' && timelineOffset >= this.timeline.length) {
+    if (this.animationType === 'playOnce' && timelineOffset + this._singleFrameNumber >= this.timeline.length) {
       return this.timeline.length;
     } // Otherwise, show the correct frame.
 
 
-    return timelineOffset % this.timeline.length + this._singleFrameNumber;
+    return (timelineOffset + this._singleFrameNumber - 1) % this.timeline.length + 1;
   }
   /**
    * Returns true if the clip has been played through fully once.
@@ -57390,7 +57390,7 @@ Wick.Clip = class extends Wick.Tickable {
 
   applySyncPosition() {
     if (this.isSynced) {
-      this.timeline.playheadPosition = this.syncFrame + this._singleFrameNumber;
+      this.timeline.playheadPosition = this.syncFrame;
     }
   }
   /**

From 787c26e6fefdb9a0a819917073be0a2150e91baa Mon Sep 17 00:00:00 2001
From: sporklpony <comradesparklepony@gmail.com>
Date: Tue, 8 Dec 2020 10:54:33 -0500
Subject: [PATCH 3/3] Add and Update Tests for Clip Starting Frame

Now there are tests for the clip starting frame. I also updated tests
that needed to be tweaked after the changes to the clip starting frame.
---
 engine/dist/emptyproject.html                 |   6 +-
 engine/dist/wickengine.js                     |   6 +-
 engine/tests/test.Wick.Clip.js                | 138 +++++++++++++++++-
 public/corelibs/wick-engine/emptyproject.html |   6 +-
 public/corelibs/wick-engine/wickengine.js     |   6 +-
 5 files changed, 148 insertions(+), 14 deletions(-)

diff --git a/engine/dist/emptyproject.html b/engine/dist/emptyproject.html
index b00733928..41daf5e0e 100644
--- a/engine/dist/emptyproject.html
+++ b/engine/dist/emptyproject.html
@@ -14,7 +14,7 @@
         <!-- The Wick Engine build is injected here during the engine build step (see gulpfile.js) -->
         <script>
             /*Wick Engine https://github.com/Wicklets/wick-engine*/
-var WICK_ENGINE_BUILD_VERSION = "2020.12.11.15.25.29";
+var WICK_ENGINE_BUILD_VERSION = "2020.12.13.19.34.4";
 /*!
  * Paper.js v0.12.4 - The Swiss Army Knife of Vector Graphics Scripting.
  * http://paperjs.org/
@@ -34763,8 +34763,8 @@
 },{"./_descriptors":42,"./_object-dp":52,"./_property-desc":53}],48:[function(require,module,exports){
 module.exports = require('./_global').document && document.documentElement;
 },{"./_global":46}],49:[function(require,module,exports){
-module.exports = !require('./_descriptors') && !require('./_fails')(function(){
-  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
+module.exports = !require('./_descriptors') && !require('./_fails')(function(){
+  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
 });
 },{"./_descriptors":42,"./_dom-create":43,"./_fails":45}],50:[function(require,module,exports){
 // fast apply, http://jsperf.lnkit.com/fast-apply/5
diff --git a/engine/dist/wickengine.js b/engine/dist/wickengine.js
index 0a9d99458..f006c677a 100644
--- a/engine/dist/wickengine.js
+++ b/engine/dist/wickengine.js
@@ -1,5 +1,5 @@
 /*Wick Engine https://github.com/Wicklets/wick-engine*/
-var WICK_ENGINE_BUILD_VERSION = "2020.12.11.15.25.29";
+var WICK_ENGINE_BUILD_VERSION = "2020.12.13.19.34.4";
 /*!
  * Paper.js v0.12.4 - The Swiss Army Knife of Vector Graphics Scripting.
  * http://paperjs.org/
@@ -34748,8 +34748,8 @@ module.exports = require('./_descriptors') ? function(object, key, value){
 },{"./_descriptors":42,"./_object-dp":52,"./_property-desc":53}],48:[function(require,module,exports){
 module.exports = require('./_global').document && document.documentElement;
 },{"./_global":46}],49:[function(require,module,exports){
-module.exports = !require('./_descriptors') && !require('./_fails')(function(){
-  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
+module.exports = !require('./_descriptors') && !require('./_fails')(function(){
+  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
 });
 },{"./_descriptors":42,"./_dom-create":43,"./_fails":45}],50:[function(require,module,exports){
 // fast apply, http://jsperf.lnkit.com/fast-apply/5
diff --git a/engine/tests/test.Wick.Clip.js b/engine/tests/test.Wick.Clip.js
index babd9e025..7a7e6cdf3 100644
--- a/engine/tests/test.Wick.Clip.js
+++ b/engine/tests/test.Wick.Clip.js
@@ -1545,7 +1545,7 @@ describe('Wick.Clip', function() {
         it('should have the correct singleFrame number', function () {
             let clip = new Wick.Clip();
             expect(clip.animationType).to.equal('loop');
-            expect(clip.singleFrameNumber).to.equal(null);
+            expect(clip.singleFrameNumber).to.equal(1);
 
             clip.animationType = 'single';
             expect(clip.animationType).to.equal('single');
@@ -1716,13 +1716,147 @@ describe('Wick.Clip', function() {
             clip.animationType = 'single';
             clip.singleFrameNumber = 3;
 
+            let totalTicks = 0;
+
+            project.play({
+                onAfterTick: () => {
+                    expect(clip.timeline.playheadPosition).to.equal(3);
+
+                    totalTicks += 1;
+
+                    if (totalTicks === 7) {
+                        project.stop();
+                        done();
+                    }
+                }
+            });
+        });
+
+        it ('should animate correctly as a looped clip when with different starting frame', function (done) {
+            let project = new Wick.Project();
+
+            let clip = new Wick.Clip();
+            let frame2 = new Wick.Frame({start:2});
+            let frame3 = new Wick.Frame({start:3});
+
+            clip.timeline.addFrame(frame2);
+            clip.timeline.addFrame(frame3);
+
+            clip.animationType = 'loop';
+            clip.singleFrameNumber = 2
 
+            project.activeFrame.addClip(clip);
+            project.framerate = 60; // speed up test time.
 
             let totalTicks = 0;
 
             project.play({
                 onAfterTick: () => {
-                    expect(clip.timeline.playheadPosition).to.equal(3);
+                    expect(clip.timeline.playheadPosition).to.equal(((totalTicks + 1) % 3) + 1);
+                    totalTicks += 1;
+
+                    if (totalTicks === 7) {
+                        project.stop();
+                        done();
+                    }
+                }
+            });
+        });
+
+        it ('should animate correctly as a playOnce clip with a different starting frame', function (done) {
+            let project = new Wick.Project();
+
+            let clip = new Wick.Clip();
+            let frame2 = new Wick.Frame({start:2});
+            let frame3 = new Wick.Frame({start:3});
+
+            clip.timeline.addFrame(frame2);
+            clip.timeline.addFrame(frame3);
+
+            clip.animationType = 'playOnce';
+            clip.singleFrameNumber = 2;
+
+            project.activeFrame.addClip(clip);
+            project.framerate = 60; // speed up test time.
+
+            let totalTicks = 1;
+
+            project.play({
+                onAfterTick: () => {
+                    if (totalTicks <= 2) {
+                        expect(clip.timeline.playheadPosition).to.equal(totalTicks + 1);
+                    } else {
+                        expect(clip.timeline.playheadPosition).to.equal(3);
+                    }
+
+                    totalTicks += 1;
+
+                    if (totalTicks === 7) {
+                        project.stop();
+                        done();
+                    }
+                }
+            });
+        });
+
+        it ('should animate correctly as a synced loop clip with a different starting frame', function (done) {
+            let project = new Wick.Project();
+
+            let clip = new Wick.Clip();
+            let frame2 = new Wick.Frame({start:2});
+            let frame3 = new Wick.Frame({start:3});
+
+            clip.timeline.addFrame(frame2);
+            clip.timeline.addFrame(frame3);
+
+            clip.animationType = 'playOnce';
+            clip.singleFrameNumber = 2;
+
+            project.activeFrame.addClip(clip);
+            project.framerate = 60; // speed up test time.
+
+            clip.isSynced = true;
+
+            let totalTicks = 1;
+
+            project.play({
+                onAfterTick: () => {
+
+                    expect(clip.timeline.playheadPosition).to.equal(2);
+
+                    totalTicks += 1;
+
+                    if (totalTicks === 7) {
+                        project.stop();
+                        done();
+                    }
+                }
+            });
+        });
+        it ('should animate correctly as a synced playOnce clip with a different starting frame', function (done) {
+            let project = new Wick.Project();
+
+            let clip = new Wick.Clip();
+            let frame2 = new Wick.Frame({start:2});
+            let frame3 = new Wick.Frame({start:3});
+
+            clip.timeline.addFrame(frame2);
+            clip.timeline.addFrame(frame3);
+
+            clip.animationType = 'loop';
+            clip.singleFrameNumber = 2;
+
+            project.activeFrame.addClip(clip);
+            project.framerate = 60; // speed up test time.
+
+            clip.isSynced = true;
+
+            let totalTicks = 1;
+
+            project.play({
+                onAfterTick: () => {
+
+                    expect(clip.timeline.playheadPosition).to.equal(2);
 
                     totalTicks += 1;
 
diff --git a/public/corelibs/wick-engine/emptyproject.html b/public/corelibs/wick-engine/emptyproject.html
index b00733928..41daf5e0e 100644
--- a/public/corelibs/wick-engine/emptyproject.html
+++ b/public/corelibs/wick-engine/emptyproject.html
@@ -14,7 +14,7 @@
         <!-- The Wick Engine build is injected here during the engine build step (see gulpfile.js) -->
         <script>
             /*Wick Engine https://github.com/Wicklets/wick-engine*/
-var WICK_ENGINE_BUILD_VERSION = "2020.12.11.15.25.29";
+var WICK_ENGINE_BUILD_VERSION = "2020.12.13.19.34.4";
 /*!
  * Paper.js v0.12.4 - The Swiss Army Knife of Vector Graphics Scripting.
  * http://paperjs.org/
@@ -34763,8 +34763,8 @@
 },{"./_descriptors":42,"./_object-dp":52,"./_property-desc":53}],48:[function(require,module,exports){
 module.exports = require('./_global').document && document.documentElement;
 },{"./_global":46}],49:[function(require,module,exports){
-module.exports = !require('./_descriptors') && !require('./_fails')(function(){
-  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
+module.exports = !require('./_descriptors') && !require('./_fails')(function(){
+  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
 });
 },{"./_descriptors":42,"./_dom-create":43,"./_fails":45}],50:[function(require,module,exports){
 // fast apply, http://jsperf.lnkit.com/fast-apply/5
diff --git a/public/corelibs/wick-engine/wickengine.js b/public/corelibs/wick-engine/wickengine.js
index 0a9d99458..f006c677a 100644
--- a/public/corelibs/wick-engine/wickengine.js
+++ b/public/corelibs/wick-engine/wickengine.js
@@ -1,5 +1,5 @@
 /*Wick Engine https://github.com/Wicklets/wick-engine*/
-var WICK_ENGINE_BUILD_VERSION = "2020.12.11.15.25.29";
+var WICK_ENGINE_BUILD_VERSION = "2020.12.13.19.34.4";
 /*!
  * Paper.js v0.12.4 - The Swiss Army Knife of Vector Graphics Scripting.
  * http://paperjs.org/
@@ -34748,8 +34748,8 @@ module.exports = require('./_descriptors') ? function(object, key, value){
 },{"./_descriptors":42,"./_object-dp":52,"./_property-desc":53}],48:[function(require,module,exports){
 module.exports = require('./_global').document && document.documentElement;
 },{"./_global":46}],49:[function(require,module,exports){
-module.exports = !require('./_descriptors') && !require('./_fails')(function(){
-  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
+module.exports = !require('./_descriptors') && !require('./_fails')(function(){
+  return Object.defineProperty(require('./_dom-create')('div'), 'a', {get: function(){ return 7; }}).a != 7;
 });
 },{"./_descriptors":42,"./_dom-create":43,"./_fails":45}],50:[function(require,module,exports){
 // fast apply, http://jsperf.lnkit.com/fast-apply/5