targetj 1.0.223 → 1.0.225

package/README.md

@@ -112,16 +112,11 @@ App({
     this.setTarget('backgroundColor', { value: [ '#ffe8ec', '#f5f5f5' ], steps: 12, interval: 12 });
   },
   heart$$: {  // Wait for the button animation to finish, THEN add and animate the heart.
-    html: "♥", color: "crimson", fontSize: 20,
+    html: "♥", color: "crimson", fontSize: 20;
     fly() {
-      const cx = this.getCenterX(), cy = this.getCenterY();
-      this.setTarget({
-        opacity: { value: [0, 1, 1, 0.8, 0.1], steps: 20 },
-        scale:   { value: [0.8, 1.4, 1.1, 0.9, 0.8], steps: 20 },
-        rotate:  { value: [0, 12, -8, 6, 0], steps: 20 },
-        x:       { value: [cx, cx + 22, cx - 16, cx + 10, cx], steps: 30 },
-        y:       { value: [cy - 8, cy - 70, cy - 90, cy - 120, cy - 150], steps: 30 }
-      });
+      const cx = (this.parent.getWidth() - this.getWidth()) / 2;
+      this.setTarget('x', { value: [cx, cx + 22, cx - 16, cx + 10, cx ], steps: 50, cycles: 2 }); // Repeat it twice
+      this.setTarget('y', { value: [0, -120], steps: 400 });
     }
   }  
 }).mount("#likeButton");
@@ -152,14 +147,9 @@ App({
   heart$$: {
     html: "♥", color: "crimson", fontSize: 20,
     fly() {
-      const cx = this.getCenterX(), cy = this.getCenterY();
-      this.setTarget({
-        opacity: { value: [0, 1, 1, 0.8, 0.1], steps: 20 },
-        scale:   { value: [0.8, 1.4, 1.1, 0.9, 0.8], steps: 20 },
-        rotate:  { value: [0, 12, -8, 6, 0], steps: 20 },
-        x:       { value: [cx, cx + 22, cx - 16, cx + 10, cx], steps: 30 },
-        y:       { value: [cy - 8, cy - 70, cy - 90, cy - 120, cy - 150], steps: 30 }
-      });
+      const cx = (this.parent.getWidth() - this.getWidth()) / 2;
+      this.setTarget('x', { value: [cx, cx + 22, cx - 16, cx + 10, cx ], steps: 50, cycles: 2 }); // Repeat it twice
+      this.setTarget('y', { value: [0, -120], steps: 400 });
     }
   },
   fetch$$: { method: "POST", id: 123, url: "/api/like" }, // Wait for the heart to finish, THEN fetch
@@ -334,7 +324,7 @@ App({
     gap: 10,
     fetch: {
         interval: 1000,
-        cycles: 4,
+        cycles: 5,
         value(i) { return `https://targetjs.io/api/randomUser?id=user${i}`; }
     },
     child$() {   
@@ -411,7 +401,7 @@ App({
   },
   wave$$: {
     interval: 30,
-    cycles() { return this.visibleChildren.length - 1; },
+    cycles() { return this.visibleChildren.length; },
     value(i) {
       const child = this.visibleChildren[i];
       child.setTarget("scale", { value: [1, 1.06, 1], steps: 18 });

package/build/AnimationManager.js

@@ -180,10 +180,14 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
             tmodel.val(originalKey, value);
             var targetValue = tmodel.targetValues[originalKey];
             if (targetValue) {
+              var _targetValue$valueLis, _targetValue$valueLis2;
               targetValue.step = tmodel.getTargetSteps(originalKey);
-              targetValue.cycle = Array.isArray(targetValue.valueList) ? targetValue.valueList.length : tmodel.getTargetCycles(originalKey);
+              targetValue.valuePointer = (_targetValue$valueLis = (_targetValue$valueLis2 = targetValue.valueList) === null || _targetValue$valueLis2 === void 0 ? void 0 : _targetValue$valueLis2.length) !== null && _targetValue$valueLis !== void 0 ? _targetValue$valueLis : 0;
               targetValue.value = value;
               tmodel.setActual(originalKey, value);
+              if (tmodel.isTargetImperative(originalKey)) {
+                targetValue.cycle = targetValue.cycles;
+              }
             }
           }
           if (!tmodel.hasAnimatingTargets()) {

package/build/BaseModel.js

@@ -314,7 +314,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         this.addToStyleTargetList(key);
       }
       if (_TargetParser.TargetParser.isIntervalTarget(target)) {
-        target.cycles = 1;
+        target.cycles = 2;
         target.isInterval = true;
       } else if (!needsTargetExecution) {
         var _target;
@@ -759,7 +759,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
     key: "getTargetCycles",
     value: function getTargetCycles(key) {
       var _this$targetValues$ke17, _this$targetValues$ke18;
-      var cycles = (_this$targetValues$ke17 = (_this$targetValues$ke18 = this.targetValues[key]) === null || _this$targetValues$ke18 === void 0 ? void 0 : _this$targetValues$ke18.cycles) !== null && _this$targetValues$ke17 !== void 0 ? _this$targetValues$ke17 : 0;
+      var cycles = (_this$targetValues$ke17 = (_this$targetValues$ke18 = this.targetValues[key]) === null || _this$targetValues$ke18 === void 0 ? void 0 : _this$targetValues$ke18.cycles) !== null && _this$targetValues$ke17 !== void 0 ? _this$targetValues$ke17 : 1;
       var target = this.targets[key];
       if (!target) {
         return cycles;
@@ -772,13 +772,25 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
       var _this$targetValues$ke19, _this$targetValues$ke20;
       return (_this$targetValues$ke19 = (_this$targetValues$ke20 = this.targetValues[key]) === null || _this$targetValues$ke20 === void 0 ? void 0 : _this$targetValues$ke20.cycle) !== null && _this$targetValues$ke19 !== void 0 ? _this$targetValues$ke19 : 0;
     }
+  }, {
+    key: "getValueListPointer",
+    value: function getValueListPointer(key) {
+      var _this$targetValues$ke21, _this$targetValues$ke22;
+      return (_this$targetValues$ke21 = (_this$targetValues$ke22 = this.targetValues[key]) === null || _this$targetValues$ke22 === void 0 ? void 0 : _this$targetValues$ke22.valuePointer) !== null && _this$targetValues$ke21 !== void 0 ? _this$targetValues$ke21 : 0;
+    }
   }, {
     key: "incrementTargetCycle",
     value: function incrementTargetCycle(key) {
       if (this.targetValues[key]) {
         this.targetValues[key].cycle++;
       }
-      return this.targetValues[key].cycle;
+    }
+  }, {
+    key: "incrementValueListPointer",
+    value: function incrementValueListPointer(key) {
+      if (this.targetValues[key]) {
+        this.targetValues[key].valuePointer++;
+      }
     }
   }, {
     key: "setTargetInterval",
@@ -986,9 +998,9 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
   }, {
     key: "addToAnimatingMap",
     value: function addToAnimatingMap(key) {
-      var _this$targetValues$ke21, _this$getParent7;
+      var _this$targetValues$ke23, _this$getParent7;
       var record = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-      if ((_this$targetValues$ke21 = this.targetValues[key]) !== null && _this$targetValues$ke21 !== void 0 && _this$targetValues$ke21.snapAnimation) {
+      if ((_this$targetValues$ke23 = this.targetValues[key]) !== null && _this$targetValues$ke23 !== void 0 && _this$targetValues$ke23.snapAnimation) {
         return;
       }
       this.animatingMap || (this.animatingMap = new Map());
@@ -1107,7 +1119,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         targetValue.step = 0;
         targetValue.cycle = 0;
         targetValue.steps = 0;
-        targetValue.cycles = 0;
+        targetValue.cycles = 1;
         targetValue.interval = 0;
         targetValue.status = '';
       }
@@ -1156,7 +1168,8 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
           targetValue.executionFlag = false;
           targetValue.scheduleTimeStamp = undefined;
           targetValue.step = 0;
-          targetValue.cycle = Array.isArray(targetValue.valueList) ? 1 : 0;
+          targetValue.cycle = 0;
+          targetValue.valuePointer = Array.isArray(targetValue.valueList) ? 1 : 0;
           targetValue.initialValue = undefined;
         } else {
           var _this$targets$key$cyc, _this$targets$key;

package/build/Bracket.js

@@ -157,9 +157,28 @@ var Bracket = exports.Bracket = /*#__PURE__*/function (_TModel) {
   }, {
     key: "shouldCalculateChildren",
     value: function shouldCalculateChildren() {
-      var result = this.isVisible() && this.getDirtyLayout() !== false || this.currentStatus === 'new' || this.isNowVisible;
-      this.currentStatus = undefined;
-      return result;
+      if (this.currentStatus === 'new' || this.isNowVisible) {
+        var visibleChild = this.getChildren().find(function (child) {
+          return child.calcVisibility();
+        });
+        this.currentStatus = undefined;
+        if (visibleChild) {
+          this.currentStatus = 'new';
+          var parent = this.parent;
+          while (parent && parent.type === 'BI') {
+            parent.currentStatus = 'new';
+            parent = parent.parent;
+          }
+        }
+        return true;
+      }
+      if (this.getDirtyLayout() === false) {
+        return false;
+      }
+      if (this.isVisible()) {
+        return true;
+      }
+      return false;
     }
   }, {
     key: "getDirtyLayout",

package/build/DomInit.js

@@ -192,7 +192,7 @@ var DomInit = exports.DomInit = /*#__PURE__*/function () {
                 parentModel[childrenKey].value.push(newModel);
               } else if (typeof parentModel[childrenKey] === 'string') {
                 parentModel[childrenKey] = {
-                  cycles: _TUtil.TUtil.isNumber(+parentModel[childrenKey]) ? +parentModel[childrenKey] : 0,
+                  cycles: _TUtil.TUtil.isNumber(+parentModel[childrenKey]) ? +parentModel[childrenKey] : 1,
                   value: [newModel]
                 };
               } else if (_typeof(parentModel[childrenKey]) === 'object') {
@@ -200,7 +200,7 @@ var DomInit = exports.DomInit = /*#__PURE__*/function () {
               }
             } else {
               parentModel.children$ = {
-                cycles: 0,
+                cycles: 1,
                 value: [newModel]
               };
             }

package/build/LoadingManager.js

@@ -262,7 +262,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
     value: function calculateTargetStatus(tmodel, key) {
       var cycle = tmodel.getTargetCycle(key);
       var cycles = tmodel.getTargetCycles(key);
-      if (tmodel.isTargetInLoop(key) || cycle < cycles) {
+      if (tmodel.isTargetInLoop(key) || cycle < cycles - 1) {
         return 'active';
       } else if (!this.isLoadingSuccessful(tmodel, key)) {
         return 'fetching';
@@ -305,7 +305,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
           }
           targetResults[fetchEntry.order] = res.result;
         }
-        tmodel.val(targetName, (targetResults === null || targetResults === void 0 ? void 0 : targetResults.length) === 1 && tmodel.getTargetCycles(targetName) === 0 ? targetResults[0] : targetResults);
+        tmodel.val(targetName, (targetResults === null || targetResults === void 0 ? void 0 : targetResults.length) === 1 && tmodel.getTargetCycles(targetName) <= 1 ? targetResults[0] : targetResults);
         var newStatus = _this4.calculateTargetStatus(tmodel, targetName);
         tmodel.setTargetStatus(targetName, newStatus);
         tmodel.setLastUpdate(targetName);
@@ -350,7 +350,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
           }
           targetResults[fetchEntry.order] = res;
         }
-        tmodel.val(targetName, (targetResults === null || targetResults === void 0 ? void 0 : targetResults.length) === 1 && tmodel.getTargetCycles(targetName) === 0 ? targetResults[0] : targetResults);
+        tmodel.val(targetName, (targetResults === null || targetResults === void 0 ? void 0 : targetResults.length) === 1 && tmodel.getTargetCycles(targetName) <= 1 ? targetResults[0] : targetResults);
         tmodelEntry.errorCount++;
         _this5.callOnErrorHandler(tmodel, targetName);
         var newStatus = _this5.calculateTargetStatus(tmodel, targetName);

package/build/LocationManager.js

@@ -236,9 +236,6 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
                 if (child.isDomIsland()) {
                   _this.domIslandSet.add(child);
                 }
-                if (child.shouldBeBracketed() && !_TUtil.TUtil.isDefined(child.getDomParent().targets['onWindowScroll'])) {
-                  child.getDomParent().addTarget('onWindowScroll', '');
-                }
                 viewport.setLocation();
                 if (viewport.isOverflow()) {
                   viewport.overflow();

package/build/TModelUtil.js

@@ -348,6 +348,9 @@ var TModelUtil = exports.TModelUtil = /*#__PURE__*/function () {
   }, {
     key: "shouldUseImplicitTransformOrder",
     value: function shouldUseImplicitTransformOrder(tmodel) {
+      if (tmodel.val('useTargetTransformOrder')) {
+        return true;
+      }
       var names = tmodel.originalTargetNames || [];
       var hasAny = function hasAny(arr) {
         return arr.some(function (k) {
@@ -357,7 +360,7 @@ var TModelUtil = exports.TModelUtil = /*#__PURE__*/function () {
       var hasPerspective = hasAny(["perspective"]);
       var hasTranslate = hasAny(["translateX", "translateY", "translateZ", "x", "y", "z"]);
       var hasRotate = hasAny(["rotateX", "rotateY", "rotateZ"]) || hasAny(["rotate3DX"]) && hasAny(["rotate3DY"]) && hasAny(["rotate3DZ"]) && hasAny(["rotate3DAngle"]);
-      var hasSkew = hasAny(["skewX", "skewY"]);
+      var hasSkew = hasAny(["skewX", "skewY", "skew"]);
       var hasScale = hasAny(["scaleX", "scaleY", "scaleZ"]) || hasAny(["scale3DX"]) && hasAny(["scale3DY"]) && hasAny(["scale3DZ"]);
       var groups = 0;
       if (hasPerspective) {

package/build/TargetExecutor.js

@@ -39,9 +39,9 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
     value: function prepareTarget(tmodel, key) {
       _TargetUtil.TargetUtil.currentTargetName = key;
       _TargetUtil.TargetUtil.currentTModel = tmodel;
-      if (tmodel.isExecuted(key) && tmodel.getTargetCycles(key) > 0) {
-        if (tmodel.getTargetCycle(key) < tmodel.getTargetCycles(key)) {
-          tmodel.incrementTargetCycle(key, tmodel.getTargetCycle(key));
+      if (tmodel.isExecuted(key) && tmodel.getTargetCycles(key) > 1) {
+        if (tmodel.getTargetCycle(key) < tmodel.getTargetCycles(key) - 1) {
+          tmodel.incrementTargetCycle(key);
         } else {
           tmodel.resetTargetCycle(key);
         }
@@ -56,7 +56,6 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
       tmodel.allTargetMap[cleanKey] = key;
       TargetExecutor.resolveTargetValue(tmodel, key);
       TargetExecutor.updateTarget(tmodel, tmodel.targetValues[key], key, false);
-      _TargetUtil.TargetUtil.shouldActivateNextTarget(tmodel, key);
     }
   }, {
     key: "assignImperativeTargetValue",
@@ -76,6 +75,7 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
   }, {
     key: "executeImperativeTarget",
     value: function executeImperativeTarget(tmodel, key, value, steps, interval, easing, originalTargetName, originalTModel) {
+      var cycles = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 1;
       var targetValue;
       if (typeof key === 'string') {
         var cleanKey = _TargetUtil.TargetUtil.getTargetName(key);
@@ -86,18 +86,21 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
         var vSteps = _TUtil.TUtil.isDefined(value.steps) ? value.steps : steps;
         var vInterval = _TUtil.TUtil.isDefined(value.interval) ? value.interval : interval;
         var vEasing = _TUtil.TUtil.isDefined(value.easing) ? value.easing : easing;
+        var vCycles = _TUtil.TUtil.isDefined(value.cycles) ? value.cycles : cycles;
         targetValue = TargetExecutor.assignImperativeTargetValue(tmodel, key, originalTargetName, originalTModel);
-        TargetExecutor.assignListTarget(tmodel, key, targetValue, value.list, value.list[0], vSteps, vInterval, vEasing);
+        TargetExecutor.assignListTarget(tmodel, key, targetValue, value.list, value.list[0], vSteps, vInterval, vEasing, vCycles);
       } else if (_TargetParser.TargetParser.isTargetSpecObject(value)) {
         var valueArray = _TargetParser.TargetParser.getValueStepsCycles(tmodel, value, key);
         var newValue = valueArray[0];
         var newSteps = valueArray[1];
         var newInterval = valueArray[2];
         var newEasing = valueArray[3];
+        var newCycles = valueArray[4];
         steps = _TUtil.TUtil.isDefined(newSteps) ? newSteps : steps;
         interval = _TUtil.TUtil.isDefined(newInterval) ? newInterval : interval;
         easing = _TUtil.TUtil.isDefined(newEasing) ? newEasing : easing;
-        TargetExecutor.executeImperativeTarget(tmodel, key, newValue, steps, interval, easing, originalTargetName, originalTModel);
+        cycles = _TUtil.TUtil.isDefined(newCycles) ? newCycles : cycles;
+        TargetExecutor.executeImperativeTarget(tmodel, key, newValue, steps, interval, easing, originalTargetName, originalTModel, cycles);
         return;
       } else if (_TargetParser.TargetParser.isObjectTarget(key, value)) {
         var completeValue = _TargetData.TargetData.cssFunctionMap[key] ? _objectSpread(_objectSpread({}, _TargetData.TargetData.cssFunctionMap[key]), value) : value;
@@ -106,14 +109,16 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
           var newSteps = steps;
           var newInterval = interval;
           var newEasing = easing;
+          var newCycles = cycles;
           if (_typeof(newValue) === 'object' && !_TargetParser.TargetParser.isListTarget(newValue)) {
             var _valueArray = _TargetParser.TargetParser.getValueStepsCycles(tmodel, completeValue[objectKey], objectKey);
             newValue = _valueArray[0];
             newSteps = _TUtil.TUtil.isDefined(_valueArray[1]) ? _valueArray[1] : steps;
             newInterval = _TUtil.TUtil.isDefined(_valueArray[2]) ? _valueArray[2] : interval;
             newEasing = _TUtil.TUtil.isDefined(_valueArray[3]) ? _valueArray[3] : easing;
+            newCycles = _TUtil.TUtil.isDefined(_valueArray[4]) ? _valueArray[4] : cycles;
           }
-          TargetExecutor.executeImperativeTarget(tmodel, objectKey, newValue, newSteps, newInterval, newEasing, originalTargetName, originalTModel);
+          TargetExecutor.executeImperativeTarget(tmodel, objectKey, newValue, newSteps, newInterval, newEasing, originalTargetName, originalTModel, newCycles);
         });
       } else {
         if (_typeof(value) === 'object' && !_TargetParser.TargetParser.isListTarget(value)) {
@@ -123,16 +128,19 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
             steps = _TUtil.TUtil.isDefined(_valueArray2[1]) ? _valueArray2[1] : steps;
             interval = _TUtil.TUtil.isDefined(_valueArray2[2]) ? _valueArray2[2] : interval;
             easing = _TUtil.TUtil.isDefined(_valueArray2[3]) ? _valueArray2[3] : easing;
-            TargetExecutor.executeImperativeTarget(tmodel, key, value, steps, interval, easing, originalTargetName, originalTModel);
+            cycles = _TUtil.TUtil.isDefined(_valueArray2[4]) ? _valueArray2[4] : cycles;
+            TargetExecutor.executeImperativeTarget(tmodel, key, value, steps, interval, easing, originalTargetName, originalTModel, cycles);
           } else {
-            targetValue = TargetExecutor.assignImperativeTargetValue(tmodel, key, originalTargetName, originalTModel);
-            TargetExecutor.assignSingleTarget(targetValue, value, undefined, steps, 0, interval, easing);
+            targetValue = TargetExecutor.assignImperativeTargetValue(tmodel, key, originalTargetName, originalTModel, cycles);
+            TargetExecutor.assignSingleTarget(targetValue, value, undefined, steps, cycles, interval, easing);
             targetValue.step = 0;
+            targetValue.cycle = 0;
           }
         } else {
-          targetValue = TargetExecutor.assignImperativeTargetValue(tmodel, key, originalTargetName, originalTModel);
-          TargetExecutor.assignSingleTarget(targetValue, value, undefined, steps, 0, interval, easing);
+          targetValue = TargetExecutor.assignImperativeTargetValue(tmodel, key, originalTargetName, originalTModel, cycles);
+          TargetExecutor.assignSingleTarget(targetValue, value, undefined, steps, cycles, interval, easing);
           targetValue.step = 0;
+          targetValue.cycle = 0;
         }
       }
       if (targetValue) {
@@ -162,6 +170,7 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
     key: "calculateTargetStatus",
     value: function calculateTargetStatus(tmodel, targetValue, key) {
       var _tmodel$targets$key;
+      var valuePointer = tmodel.getValueListPointer(key);
       var cycle = tmodel.getTargetCycle(key);
       var cycles = tmodel.getTargetCycles(key);
       var step = tmodel.getTargetStep(key);
@@ -170,9 +179,9 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
         return 'done';
       } else if (step < steps) {
         return 'updating';
-      } else if (Array.isArray(targetValue.valueList) && cycle < targetValue.valueList.length - 1) {
+      } else if (Array.isArray(targetValue.valueList) && valuePointer < targetValue.valueList.length - 1) {
         return 'updating';
-      } else if (tmodel.isTargetInLoop(key) || cycle < cycles) {
+      } else if (tmodel.isTargetInLoop(key) || cycle < cycles - 1) {
         return 'active';
       } else if ((_tmodel$targets$key = tmodel.targets[key]) !== null && _tmodel$targets$key !== void 0 && _tmodel$targets$key.fetchAction && !(0, _App.getLoader)().isLoadingSuccessful(tmodel, key)) {
         return 'fetching';
@@ -182,19 +191,19 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
     }
   }, {
     key: "assignListTarget",
-    value: function assignListTarget(tmodel, key, targetValue, valueList, initialValue, steps, interval, easing) {
+    value: function assignListTarget(tmodel, key, targetValue, valueList, initialValue, steps, interval, easing, cycles) {
       targetValue.valueList = valueList;
       targetValue.stepList = Array.isArray(steps) ? steps : _TUtil.TUtil.isDefined(steps) && steps > 0 ? [steps] : [1];
       targetValue.intervalList = Array.isArray(interval) ? interval : _TUtil.TUtil.isDefined(interval) ? [interval || 8] : [8];
       targetValue.easingList = Array.isArray(easing) ? easing : _TUtil.TUtil.isDefined(easing) ? [easing] : [_Easing.Easing.LINEAR];
-      targetValue.cycle = 1;
+      targetValue.cycles = cycles;
+      targetValue.valuePointer = 1;
       targetValue.value = valueList[1];
       targetValue.initialValue = initialValue;
       targetValue.steps = targetValue.stepList[0];
       targetValue.interval = targetValue.intervalList[0];
       targetValue.easing = targetValue.easingList[0];
       targetValue.step = 0;
-      targetValue.cycles = 0;
       targetValue.snapAnimation = false;
       tmodel.val(key, initialValue);
       tmodel.setActual(key, initialValue);
@@ -206,11 +215,14 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
       delete targetValue.stepList;
       delete targetValue.intervalList;
       delete targetValue.easingList;
+      if (_TUtil.TUtil.isDefined(targetValue.valuePointer)) {
+        targetValue.valuePointer = 0;
+      }
       targetValue.initialValue = initialValue;
       targetValue.lastValue = targetValue.value;
       targetValue.value = value;
       targetValue.steps = steps || 0;
-      targetValue.cycles = cycles || 0;
+      targetValue.cycles = cycles || 1;
       targetValue.interval = interval || 0;
       targetValue.easing = easing;
       targetValue.snapAnimation = false;
@@ -242,12 +254,12 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
       var newSteps = valueArray[1] || 0;
       var newInterval = valueArray[2] || 0;
       var newEasing = valueArray[3];
-      var newCycles = valueArray[4] || 0;
+      var newCycles = valueArray[4] || 1;
       var targetValue = tmodel.targetValues[key] || _TargetUtil.TargetUtil.emptyValue();
       tmodel.targetValues[key] = targetValue;
       var easing = _TUtil.TUtil.isDefined(newEasing) ? newEasing : _TUtil.TUtil.isDefined(tmodel.targets[key].easing) ? tmodel.targets[key].easing : undefined;
       if (_TargetParser.TargetParser.isIntervalTarget(newValue)) {
-        TargetExecutor.assignSingleTarget(targetValue, undefined, undefined, 0, 1, newValue.interval, easing);
+        TargetExecutor.assignSingleTarget(targetValue, undefined, undefined, 0, 2, newValue.interval, easing);
       } else if (_TargetParser.TargetParser.isChildTarget(key, newValue)) {
         tmodel.addChild(newValue);
         TargetExecutor.assignSingleTarget(targetValue, newValue, undefined, 0, newCycles, newInterval, easing);
@@ -278,7 +290,7 @@ var TargetExecutor = exports.TargetExecutor = /*#__PURE__*/function () {
         (0, _App.getLoader)().fetchImage(tmodel, newValue);
         TargetExecutor.assignSingleTarget(targetValue, newValue, undefined, 0, newCycles, newInterval, easing);
       } else if (_TargetParser.TargetParser.isListTarget(newValue)) {
-        TargetExecutor.assignListTarget(tmodel, key, targetValue, newValue.list, newValue.list[0], newSteps, newInterval, easing);
+        TargetExecutor.assignListTarget(tmodel, key, targetValue, newValue.list, newValue.list[0], newSteps, newInterval, easing, newCycles);
       } else {
         var _tmodel$targets$key$d, _tmodel$targets$key2;
         if (newSteps > 0 && !_TUtil.TUtil.areEqual(tmodel.val(key), newValue, (_tmodel$targets$key$d = (_tmodel$targets$key2 = tmodel.targets[key]) === null || _tmodel$targets$key2 === void 0 ? void 0 : _tmodel$targets$key2.deepEquality) !== null && _tmodel$targets$key$d !== void 0 ? _tmodel$targets$key$d : false)) {

package/build/TargetManager.js

@@ -78,6 +78,7 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
       tmodel.resetScheduleTimeStamp(key);
       _TargetExecutor.TargetExecutor.prepareTarget(tmodel, key);
       _TargetExecutor.TargetExecutor.executeDeclarativeTarget(tmodel, key);
+      _TargetUtil.TargetUtil.shouldActivateNextTarget(tmodel, key);
     }
   }, {
     key: "setActualValues",
@@ -192,10 +193,15 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
           originalTarget.onImperativeEnd.call(originalTModel, key, originalTModel.val(key));
           originalTModel.setTargetMethodName(originalTargetName, "onImperativeEnd");
         }
+        if (tmodel.getTargetCycle(key) < tmodel.getTargetCycles(key) - 1) {
+          tmodel.incrementTargetCycle(key);
+          tmodel.resetTargetStep(key);
+          tmodel.resetTargetInitialValue(key);
+        }
       } else {
         var _tmodel$targets$key;
-        if (!targetValue.valueList && tmodel.getTargetCycle(key) < tmodel.getTargetCycles(key)) {
-          tmodel.incrementTargetCycle(key, tmodel.getTargetCycle(key));
+        if (tmodel.getTargetCycle(key) < tmodel.getTargetCycles(key) - 1) {
+          tmodel.incrementTargetCycle(key);
           tmodel.resetTargetStep(key);
           tmodel.resetTargetInitialValue(key);
           tmodel.resetTargetExecutionFlag(key);
@@ -211,11 +217,14 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
   }, {
     key: "calculateTargetStatus",
     value: function calculateTargetStatus(tmodel, targetValue, key) {
+      var valuePointer = tmodel.getValueListPointer(key);
       var cycle = tmodel.getTargetCycle(key);
       var cycles = tmodel.getTargetCycles(key);
-      if (Array.isArray(targetValue.valueList) && cycle < targetValue.valueList.length - 1) {
+      if (Array.isArray(targetValue.valueList) && valuePointer < targetValue.valueList.length) {
         return 'updating';
-      } else if (tmodel.isTargetInLoop(key) || cycle < cycles) {
+      } else if (tmodel.isTargetImperative(key) && cycle < cycles - 1) {
+        return 'updating';
+      } else if (tmodel.isTargetInLoop(key) || cycle < cycles - 1) {
         return 'active';
       } else {
         return 'done';
@@ -223,8 +232,9 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
     }
   }, {
     key: "handleWebAnimationAPI",
-    value: function handleWebAnimationAPI(tmodel, cleanKey, key, targetValue, from, to, steps, interval) {
+    value: function handleWebAnimationAPI(tmodel, cleanKey, key, targetValue, from, to, steps, interval, timeShift) {
       var _batch$keyMap;
+      var skipStartFrame = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
       var batch = tmodel.waapiBatch || (tmodel.waapiBatch = {
         frames: [],
         easing: undefined,
@@ -233,14 +243,15 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
       });
       var isTransform = _TargetData.TargetData.isTransformKey(cleanKey);
       var getFrameAtTime = function getFrameAtTime(t) {
+        var shifted = t + timeShift;
         for (var i = 0; i < batch.frames.length; i++) {
           var _frame = batch.frames[i];
-          if (Math.abs(_frame.keyTime - t) < 0.0001) {
+          if (Math.abs(_frame.keyTime - shifted) < 0.0001) {
             return _frame;
           }
         }
         var frame = {
-          keyTime: t,
+          keyTime: shifted,
           tfMap: {},
           styleMap: {},
           keyMeta: new Map()
@@ -254,13 +265,15 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
         var stepList = targetValue.stepList || [1];
         var intervalList = targetValue.intervalList;
         var step = targetValue.step;
-        var frame = getFrameAtTime(0);
-        if (isTransform) {
-          frame.tfMap[cleanKey] = step > 0 && _TUtil.TUtil.isDefined(tmodel.val(key)) ? tmodel.val(key) : valueList[0];
-          tmodel.val(key, frame.tfMap[cleanKey]);
-        } else {
-          frame.styleMap[cleanKey] = valueList[0];
-          tmodel.val(key, frame.styleMap[cleanKey]);
+        if (!skipStartFrame) {
+          var frame = getFrameAtTime(0);
+          if (isTransform) {
+            frame.tfMap[cleanKey] = step > 0 && _TUtil.TUtil.isDefined(tmodel.val(key)) ? tmodel.val(key) : valueList[0];
+            tmodel.val(key, frame.tfMap[cleanKey]);
+          } else {
+            frame.styleMap[cleanKey] = valueList[0];
+            tmodel.val(key, frame.styleMap[cleanKey]);
+          }
         }
         for (var i = 1; i < valueList.length; i++) {
           var stepValue = stepList[(i - 1) % stepList.length];
@@ -278,17 +291,22 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
             interval: intervalValue
           });
         }
-        targetValue.cycle = valueList.length - 1;
+        targetValue.valuePointer = valueList.length;
       } else {
         interval = interval || 8;
         keyDuration = steps * interval;
-        var frame0 = getFrameAtTime(0);
+        if (!skipStartFrame) {
+          var frame0 = getFrameAtTime(0);
+          if (isTransform) {
+            frame0.tfMap[cleanKey] = from;
+          } else {
+            frame0.styleMap[cleanKey] = from;
+          }
+        }
         var frame1 = getFrameAtTime(keyDuration);
         if (isTransform) {
-          frame0.tfMap[cleanKey] = from;
           frame1.tfMap[cleanKey] = to;
         } else {
-          frame0.styleMap[cleanKey] = from;
           frame1.styleMap[cleanKey] = to;
         }
         tmodel.val(key, from);
@@ -300,9 +318,10 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
       if (tmodel.getTargetEasing(key)) {
         batch.easing = tmodel.getTargetEasing(key);
       }
-      batch.totalDuration = Math.max(batch.totalDuration, keyDuration);
+      batch.totalDuration = Math.max(batch.totalDuration, timeShift + keyDuration);
       ((_batch$keyMap = batch.keyMap)[cleanKey] || (_batch$keyMap[cleanKey] = new Set())).add(key);
       tmodel.removeFromUpdatingTargets(key);
+      return keyDuration;
     }
   }, {
     key: "setActualValue",
@@ -320,6 +339,7 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
       var step = tmodel.getTargetStep(key);
       var steps = tmodel.getTargetSteps(key);
       var cycle = tmodel.getTargetCycle(key);
+      var valuePointer = tmodel.getValueListPointer(key);
       var interval = tmodel.getTargetInterval(key);
       var initialValue = tmodel.getTargetInitialValue(key);
       var lastUpdateTime = tmodel.getLastUpdate(key);
@@ -330,7 +350,11 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
       }
       if (tmodel.canBeAnimated(cleanKey)) {
         if (tmodel.hasDom()) {
-          this.handleWebAnimationAPI(tmodel, cleanKey, key, targetValue, initialValue, theValue, steps, interval);
+          var cycles = tmodel.isTargetImperative(key) ? tmodel.getTargetCycles(key) : 0;
+          var cycleDuration = this.handleWebAnimationAPI(tmodel, cleanKey, key, targetValue, initialValue, theValue, steps, interval, 0);
+          for (var c = 1; c < cycles; c++) {
+            this.handleWebAnimationAPI(tmodel, cleanKey, key, targetValue, initialValue, theValue, steps, interval, c * cycleDuration, true);
+          }
         }
         return;
       }
@@ -353,15 +377,15 @@ var TargetManager = exports.TargetManager = /*#__PURE__*/function () {
       tmodel.setLastUpdate(key);
       step = steps;
       var scheduleTime = 1;
-      if (targetValue.valueList && cycle < targetValue.valueList.length - 1) {
-        tmodel.incrementTargetCycle(key, tmodel.getTargetCycle(key));
-        cycle = tmodel.getTargetCycle(key);
+      if (targetValue.valueList && valuePointer < targetValue.valueList.length) {
+        tmodel.incrementValueListPointer(key);
+        valuePointer = tmodel.getValueListPointer(key);
         tmodel.resetTargetStep(key);
         targetValue.initialValue = targetValue.value;
-        targetValue.value = targetValue.valueList[cycle];
-        targetValue.steps = targetValue.stepList[(cycle - 1) % targetValue.stepList.length];
-        targetValue.interval = Array.isArray(targetValue.intervalList) ? targetValue.intervalList[(cycle - 1) % targetValue.intervalList.length] : 0;
-        targetValue.easing = targetValue.easingList[(cycle - 1) % targetValue.easingList.length];
+        targetValue.value = targetValue.valueList[valuePointer];
+        targetValue.steps = targetValue.stepList[(valuePointer - 1) % targetValue.stepList.length];
+        targetValue.interval = Array.isArray(targetValue.intervalList) ? targetValue.intervalList[(valuePointer - 1) % targetValue.intervalList.length] : 0;
+        targetValue.easing = targetValue.easingList[(valuePointer - 1) % targetValue.easingList.length];
         scheduleTime = interval;
       } else {
         this.fireOnEnd(tmodel, key);

package/build/TargetParser.js

@@ -225,7 +225,7 @@ var TargetParser = exports.TargetParser = /*#__PURE__*/function () {
         steps = 0,
         interval = 0,
         easing = undefined,
-        cycles = 0;
+        cycles = 1;
       var resolveMaybeFn = function resolveMaybeFn(v) {
         for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
           args[_key - 1] = arguments[_key];
@@ -268,7 +268,7 @@ var TargetParser = exports.TargetParser = /*#__PURE__*/function () {
             steps = _TUtil.TUtil.isDefined(target.steps) ? resolveMaybeFn(target.steps, cycle) : 0;
             interval = _TUtil.TUtil.isDefined(target.interval) ? resolveMaybeFn(target.interval, cycle) : 8;
             easing = _TUtil.TUtil.isDefined(target.easing) ? resolveMaybeFn(target.easing, cycle) : easing;
-            cycles = _TUtil.TUtil.isDefined(target.cycles) ? resolveMaybeFn(target.cycles, cycle, tmodel.getTargetCycles(key)) : 0;
+            cycles = _TUtil.TUtil.isDefined(target.cycles) ? resolveMaybeFn(target.cycles, cycle, tmodel.getTargetCycles(key)) : 1;
             return [value, steps, interval, easing, cycles];
           } else if (_typeof(valueResult) === 'object' && _TUtil.TUtil.isDefined(valueResult.value) && _TUtil.TUtil.isDefined(valueResult.steps)) {
             return getValue(valueResult);
@@ -278,7 +278,7 @@ var TargetParser = exports.TargetParser = /*#__PURE__*/function () {
           interval = _TUtil.TUtil.isDefined(target.interval) ? resolveMaybeFn(target.interval, cycle) : 0;
           easing = _TUtil.TUtil.isDefined(target.easing) ? resolveMaybeFn(target.easing, cycle) : easing; // keep prior easing if not supplied
 
-          cycles = _TUtil.TUtil.isDefined(target.cycles) ? resolveMaybeFn(target.cycles, cycle, tmodel.getTargetCycles(key)) : 0;
+          cycles = _TUtil.TUtil.isDefined(target.cycles) ? resolveMaybeFn(target.cycles, cycle, tmodel.getTargetCycles(key)) : 1;
           return Array.isArray(value) ? getValue(value) : [value, steps, interval, easing, cycles];
         }