targetj 1.0.228 → 1.0.230

package/README.md

@@ -5,7 +5,7 @@
 [![Stars](https://img.shields.io/github/stars/livetrails/targetjs.svg)](https://github.com/livetrails/targetjs/stargazers)
 [![npm version](https://img.shields.io/npm/v/targetj.svg)](https://www.npmjs.com/package/targetj)
 
-TargetJS is a high-performance JavaScript UI framework with ultra-compact syntax. It replaces the "State → Render" model with a Code-Ordered Reactivity. It unifies UI, animations, APIs, event handling, and state into self-contained "Targets" that stack together like intelligent Lego pieces.
+TargetJS is a high-performance JavaScript UI framework with ultra-compact syntax. It replaces the "State → Render" model with "State → transition → Render". It unifies UI, animations, APIs, event handling, and state into self-contained "Targets" that stack together like intelligent Lego pieces using Code-Ordered Reactivity.
 
 It can be used as a full-featured framework or as a lightweight library alongside other frameworks. It is also a highly performant web framework, as shown in the [framework benchmark](https://krausest.github.io/js-framework-benchmark/current.html).
 
@@ -16,7 +16,7 @@ It can be used as a full-featured framework or as a lightweight library alongsid
 
 Traditional frameworks model the UI as a function of state: change state, re-render the UI. When state changes from A → B, the UI immediately jumps to B. The framework doesn’t naturally represent the journey from A → B. But modern, rich user experiences are more like: A → transition → B.
 
-TargetJS treats state as a destination. Values are not only assigned. They can be approached over time through configurable steps. This makes transitions a native part of state change rather than an afterthought. TargetJS also delivers CSS-level transition efficiency.
+TargetJS treats state as a destination. Values are not only assigned. They can be approached over time through configurable steps. This makes transitions a native part of state change. TargetJS also delivers CSS-level transition efficiency.
 
 **Fragmentation across multiple mental models**
 
@@ -34,7 +34,7 @@ In traditional code, that sequence is often scattered across different places su
 
 TargetJS code order and target reactivity allow the implementation to more closely mirror the actual UI sequence.
 
-With its compact style, TargetJS makes the journey from A → B efficient and explicit, with significantly less code than traditional frameworks.
+With its compact style, TargetJS makes the journey from A → B explicit and efficient, with significantly less code than traditional frameworks.
 
 ## ⚡ Quick Start (30 Seconds)
 
@@ -53,17 +53,17 @@ import { App } from "targetj";
 
 App({
   backgroundColor: 'blue', // Starts immediately
-  width: { value: [100, 200], steps: 100 }, // Starts immediately: animate width from 100px to 200px in 100 steps with 8 ms interval per step.
-  height: { value: [100, 200], steps: 100 }, // Starts immediately: animate height.
-  backgroundColor$$: { value: 'red', steps: 100 }, // Wait ($$) for width/height to finish
-  done$$() { console.log("Hello World!"); } // 3. Waits ($$) for the background color
+  width: { value: [100, 200], steps: 100, interval: 8 }, // Starts immediately: animate width from 100px to 200px in 100 steps with 8 ms interval per step.
+  height: { value: [100, 200], steps: 100, interval: 8 }, // Starts immediately: animate height.
+  backgroundColor$$: { value: 'red', steps: 100, interval: 8 }, // Wait ($$) for width/height to finish
+  done$$() { console.log("Hello World!"); } // 3. Waits ($$) for the background color, width/height to finish
 }).mount("#app");
 ```
 
 ## Targets
 
-In TargetJS, targets are the fundamental unit of behavior. 
-Methods, properties, and objects are internally transformed into targets that the framework schedules and executes.
+In TargetJS, targets are the fundamental unit of behavior instead of methods. 
+Methods and properties both are internally transformed into targets that the framework schedules and executes.
 
 
 ### Execution Syntax
@@ -89,6 +89,7 @@ A target can also be defined as an object with optional controls that manage its
 | `interval` | Delay (ms) between steps or executions. |
 | `cycles` | Number of times the target repeats. |
 | `loop` | Boolean form of repetition for continuous execution. |
+| `active` | Boolean property controlling when `value` is executed. |
 | `enabledOn` | Determines whether the target is enabled for execution. |
 | `easing` | Predefined easing function controlling how values update over steps. |
 | `onComplete` | Callback triggered when this target (and its children) finishes. |
@@ -96,7 +97,7 @@ A target can also be defined as an object with optional controls that manage its
 
 ## Examples: Like Button → Animated Like (in 3 Steps)
 
-Let’s see how TargetJS handles a complex interaction that would usually require 50+ lines of React/CSS. The example demonstrates how to run four asynchronous operations in a strict sequential sequence, where each step waits for the previous ones to complete.
+Let’s see how TargetJS handles a complex interaction that would usually require 50+ lines of React/CSS. The example demonstrates how to run four asynchronous operations in a strict sequential sequence. In other words, each step has to wait for all the previous ones to complete.
 
 ### 1) Like button
 
@@ -257,7 +258,7 @@ TargetJS can run inside an existing app mounted into a DOM element managed by an
 
 ```javascript
 import React, { useLayoutEffect, useRef } from "react";
-import { App as TJApp } from "targetj";
+import { App as TApp } from "targetj";
 
 export default function TargetIsland() {
   const hostRef = useRef(null);
@@ -266,7 +267,7 @@ export default function TargetIsland() {
     const el = hostRef.current;
     if (!el) return;
 
-    TJApp({
+    TApp({
       width: { value: [100, 500], steps: 100 },
       height: 200,
       backgroundColor: "purple",
@@ -274,7 +275,7 @@ export default function TargetIsland() {
     }).mount(el);
 
     return () => {
-      TJApp.unmount();
+      TApp.unmount();
     };
   }, []);
 
@@ -409,7 +410,6 @@ App({
       bottomMargin: 8,
       borderRadius: 12,
       backgroundColor: "white",
-      validateVisibilityInParent: true,
       boxShadow: "0 8px 20px rgba(0,0,0,0.08)",
       photo: {
         x: 10, y: 10, width: 34, height: 34,
@@ -501,9 +501,9 @@ TargetJS.tApp.start(); // Restart the application
 TargetJS.tApp.throttle = 0; // Slow down execution (milliseconds between cycles)
 TargetJS.tApp.debugLevel = 1; // Log cycle execution
 ```
-- Use `t()` in the browser console to find an object by its oid.
-- Use `t(oid).bug()` to inspect all the vital properties.
-- Use `t(oid).logTree()` to inspect the UI structure.
+- Use `t(id)` in the browser console to find an object by its element id.
+- Use `t(id).bug()` to inspect all the vital properties.
+- Use `t(id).logTree()` to inspect the UI structure.
 
 ## Documentation
 Explore the potential of TargetJS and dive into our interactive documentation at www.targetjs.io.

package/build/AnimationManager.js

@@ -47,7 +47,6 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
   return _createClass(AnimationManager, [{
     key: "animate",
     value: function animate(tmodel, batch, hooks) {
-      var _this = this;
       if (this.isShuttingDown || !tmodel.hasDom()) {
         return;
       }
@@ -132,6 +131,9 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
             hooks: hooks
           };
           tmodel.addToAnimatingMap(_originalKey, rec);
+          if (tmodel.targetValues[_originalKey]) {
+            tmodel.targetValues[_originalKey].status = 'updating';
+          }
           this.recordMap.set(recId, rec);
         }
       } catch (err) {
@@ -139,16 +141,6 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
       } finally {
         _iterator2.f();
       }
-      var finalize = function finalize() {
-        _this.finalizeAnimation(anim);
-      };
-      anim.addEventListener("finish", finalize, {
-        once: true
-      });
-      anim.addEventListener("cancel", finalize, {
-        once: true
-      });
-      anim.finished.then(finalize).catch(finalize);
       this.startProgressPoller();
     }
   }, {
@@ -208,11 +200,12 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
       } finally {
         _iterator3.f();
       }
+      (0, _App.getRunScheduler)().schedule(35, "finalizeAnimation");
     }
   }, {
     key: "startProgressPoller",
     value: function startProgressPoller() {
-      var _this2 = this;
+      var _this = this;
       if (this.waapiPoller.rafId) {
         return;
       }
@@ -220,7 +213,7 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
       var _tick = function tick() {
         var animsToFinalize = new Set();
         var hasPlaying = false;
-        var _iterator4 = _createForOfIteratorHelper(_this2.recordMap),
+        var _iterator4 = _createForOfIteratorHelper(_this.recordMap),
           _step4;
         try {
           for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
@@ -232,7 +225,7 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
             } else if (record.status === 'playing') {
               hasPlaying = true;
             }
-            _this2.updateTModelFromRecord(record);
+            _this.updateTModelFromRecord(record);
             var ps = record.anim.playState;
             var ct = (_record$anim$effect = record.anim.effect) === null || _record$anim$effect === void 0 || (_record$anim$effect$g = (_record$anim$effect2 = _record$anim$effect).getComputedTiming) === null || _record$anim$effect$g === void 0 ? void 0 : _record$anim$effect$g.call(_record$anim$effect2);
             var finished = ps === "finished" || ps === "idle" || ct && ct.progress >= 0.999999;
@@ -251,18 +244,18 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
         try {
           for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
             var anim = _step5.value;
-            _this2.finalizeAnimation(anim);
+            _this.finalizeAnimation(anim);
           }
         } catch (err) {
           _iterator5.e(err);
         } finally {
           _iterator5.f();
         }
-        if (_this2.recordMap.size > 0 || hasPlaying) {
-          _this2.waapiPoller.rafId = requestAnimationFrame(_tick);
+        if (_this.recordMap.size > 0 || hasPlaying) {
+          _this.waapiPoller.rafId = requestAnimationFrame(_tick);
         } else {
-          _this2.waapiPoller.alive = false;
-          _this2.waapiPoller.rafId = 0;
+          _this.waapiPoller.alive = false;
+          _this.waapiPoller.rafId = 0;
         }
       };
       this.waapiPoller.rafId = requestAnimationFrame(_tick);
@@ -765,6 +758,21 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
       if (!batch) {
         return;
       }
+      var _iterator15 = _createForOfIteratorHelper(tmodel.animatingMap),
+        _step15;
+      try {
+        for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
+          var _step15$value = _slicedToArray(_step15.value, 1),
+            key = _step15$value[0];
+          if (tmodel.targetValues[key]) {
+            tmodel.targetValues[key].status = 'pause';
+          }
+        }
+      } catch (err) {
+        _iterator15.e(err);
+      } finally {
+        _iterator15.f();
+      }
       var cutTime = Math.min(_TUtil.TUtil.now() - batch.startTime, batch.totalDuration);
       this.cutLastBatch(tmodel, batch, cutTime);
       tmodel.pausedBatch = batch;
@@ -814,22 +822,22 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
         return;
       }
       var keySet = new Set(cleanKeys);
-      var _iterator15 = _createForOfIteratorHelper(el.getAnimations()),
-        _step15;
+      var _iterator16 = _createForOfIteratorHelper(el.getAnimations()),
+        _step16;
       try {
-        for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
-          var anim = _step15.value;
+        for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
+          var anim = _step16.value;
           var effect = anim.effect;
           if (!(effect !== null && effect !== void 0 && effect.getKeyframes)) {
             continue;
           }
           var kfs = effect.getKeyframes();
           var touches = false;
-          var _iterator16 = _createForOfIteratorHelper(kfs),
-            _step16;
+          var _iterator17 = _createForOfIteratorHelper(kfs),
+            _step17;
           try {
-            for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
-              var kf = _step16.value;
+            for (_iterator17.s(); !(_step17 = _iterator17.n()).done;) {
+              var kf = _step17.value;
               for (var _i5 = 0, _Object$keys2 = Object.keys(kf); _i5 < _Object$keys2.length; _i5++) {
                 var k = _Object$keys2[_i5];
                 if (keySet.has(k)) {
@@ -842,9 +850,9 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
               }
             }
           } catch (err) {
-            _iterator16.e(err);
+            _iterator17.e(err);
           } finally {
-            _iterator16.f();
+            _iterator17.f();
           }
           if (touches) {
             try {
@@ -853,9 +861,9 @@ var AnimationManager = exports.AnimationManager = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator15.e(err);
+        _iterator16.e(err);
       } finally {
-        _iterator15.f();
+        _iterator16.f();
       }
     }
   }]);

package/build/BaseModel.js

@@ -498,10 +498,11 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
         return;
       }
       var oldStatus = targetValue.status;
-      if (status === 'done' && oldStatus !== 'done' && oldStatus !== 'complete') {
+      if (status === 'done' && oldStatus !== 'done' && oldStatus !== 'complete' && !targetValue.resetFlag) {
         targetValue.completeCount++;
         targetValue.completeTime = _TUtil.TUtil.now();
       }
+      targetValue.resetFlag = false;
       targetValue.status = status;
       if (targetValue.status === 'fetching') {
         this.removeFromActiveTargets(key);
@@ -675,7 +676,8 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
       if (t.loop !== undefined) {
         var loop = typeof t.loop === 'function' ? t.loop.call(this, key) : t.loop;
         if (loop === 'passive') {
-          return false;
+          var values = _TargetParser.TargetParser.getValueStepsCycles(this, key);
+          return values[0] === this.getTargetValue(key) ? false : true;
         }
       }
       return true;
@@ -696,7 +698,7 @@ var BaseModel = exports.BaseModel = /*#__PURE__*/function () {
     key: "getDimLastUpdate",
     value: function getDimLastUpdate() {
       var _this$getLastUpdate, _this$getLastUpdate2, _this$getLastUpdate3, _this$domHeightTimest, _this$domWidthTimesta;
-      return Math.max((_this$getLastUpdate = this.getLastUpdate('width')) !== null && _this$getLastUpdate !== void 0 ? _this$getLastUpdate : 0, (_this$getLastUpdate2 = this.getLastUpdate('height')) !== null && _this$getLastUpdate2 !== void 0 ? _this$getLastUpdate2 : 0, (_this$getLastUpdate3 = this.getLastUpdate('size')) !== null && _this$getLastUpdate3 !== void 0 ? _this$getLastUpdate3 : 0, (_this$domHeightTimest = this.domHeightTimestamp) !== null && _this$domHeightTimest !== void 0 ? _this$domHeightTimest : 0, (_this$domWidthTimesta = this.domWidthTimestamp) !== null && _this$domWidthTimesta !== void 0 ? _this$domWidthTimesta : 0);
+      return Math.max((_this$getLastUpdate = this.getLastUpdate('width')) !== null && _this$getLastUpdate !== void 0 ? _this$getLastUpdate : 0, (_this$getLastUpdate2 = this.getLastUpdate('height')) !== null && _this$getLastUpdate2 !== void 0 ? _this$getLastUpdate2 : 0, (_this$getLastUpdate3 = this.getLastUpdate('dim')) !== null && _this$getLastUpdate3 !== void 0 ? _this$getLastUpdate3 : 0, (_this$domHeightTimest = this.domHeightTimestamp) !== null && _this$domHeightTimest !== void 0 ? _this$domHeightTimest : 0, (_this$domWidthTimesta = this.domWidthTimestamp) !== null && _this$domWidthTimesta !== void 0 ? _this$domWidthTimesta : 0);
     }
   }, {
     key: "getTargetActivationTime",

package/build/Bracket.js

@@ -29,6 +29,7 @@ var Bracket = exports.Bracket = /*#__PURE__*/function (_TModel) {
     _classCallCheck(this, Bracket);
     _this = _callSuper(this, Bracket, ["BI"]);
     _this.parent = parent;
+    _this.currentBrakcetStatus = 2;
     return _this;
   }
   _inherits(Bracket, _TModel);
@@ -157,33 +158,23 @@ var Bracket = exports.Bracket = /*#__PURE__*/function (_TModel) {
   }, {
     key: "shouldCalculateChildren",
     value: function shouldCalculateChildren() {
-      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;
-          }
-        }
+      var nowVisible = this.isVisible();
+      if (this.currentBrakcetStatus >= 1 || this.isNowVisible || this.isNowInvisible) {
+        this.currentBrakcetStatus = Math.max(0, this.currentBrakcetStatus - 1);
         return true;
       }
+      if (nowVisible) {
+        this.currentBrakcetStatus = Math.min(2, this.currentBrakcetStatus + 1);
+      }
       if (this.getDirtyLayout() === false) {
         return false;
       }
-      if (this.isVisible()) {
-        return true;
-      }
-      return false;
+      return nowVisible;
     }
   }, {
     key: "getDirtyLayout",
     value: function getDirtyLayout() {
-      return this.getRealParent().managesOwnScroll ? this.getRealParent().backupDirtyLayout : this.dirtyLayout;
+      return this.getRealParent().managesOwnScroll() ? this.getRealParent().backupDirtyLayout : this.dirtyLayout;
     }
   }, {
     key: "validateVisibilityInParent",

package/build/BracketGenerator.js

@@ -71,6 +71,7 @@ var BracketGenerator = exports.BracketGenerator = /*#__PURE__*/function () {
           var _index = parent.allChildrenList.indexOf(child);
           if (_index >= 0) {
             parent.allChildrenList.splice(_index, 1);
+            BracketGenerator.markBracketDirty(parent);
             if (parent.allChildrenList.length === 0) {
               deleteChildRecursively(parent.parent, parent);
             }
@@ -145,11 +146,13 @@ var BracketGenerator = exports.BracketGenerator = /*#__PURE__*/function () {
         bracket.startIndex = Math.min(bracket.startIndex, index);
         bracket.endIndex = bracket.startIndex + bracket.allChildrenList.length;
         bracket.currentStatus = 'new';
+        bracket.markLayoutDirty('update');
         bracket = targetBracket.getParent();
         while (bracket instanceof _Bracket.Bracket) {
           bracket.startIndex = Math.min(bracket.startIndex, index);
           bracket.endIndex = Math.max(bracket.endIndex, index + 1);
           bracket.currentStatus = 'new';
+          bracket.markLayoutDirty('update');
           bracket = bracket.getParent();
         }
         if (targetBracket.allChildrenList.length > bracketSize) {
@@ -178,11 +181,13 @@ var BracketGenerator = exports.BracketGenerator = /*#__PURE__*/function () {
           var _bracket$parent$allCh;
           (_bracket$parent$allCh = bracket.parent.allChildrenList).splice.apply(_bracket$parent$allCh, [index, 1].concat(chunks));
         }
+        BracketGenerator.markBracketDirty(bracket);
         if (bracket.parent.allChildrenList.length >= bracketSize) {
           var rebuiltChildren = BracketGenerator.buildTreeBottomUp(page, bracket.parent.allChildrenList);
           bracket.parent.allChildrenList = rebuiltChildren;
           bracket.parent.allChildrenList.forEach(function (child) {
             child.parent = bracket.parent;
+            BracketGenerator.markBracketDirty(child);
           });
 
           // Update grandparent relationships
@@ -207,6 +212,12 @@ var BracketGenerator = exports.BracketGenerator = /*#__PURE__*/function () {
           BracketGenerator.bracketMap[page.oid] = BracketGenerator.buildTreeBottomUp(page, topBrackets);
         }
       }
+      chunks.forEach(function (chunk) {
+        return BracketGenerator.markBracketDirty(chunk);
+      });
+      if (chunks[0].parent instanceof _Bracket.Bracket) {
+        BracketGenerator.markBracketDirty(chunks[0].parent);
+      }
     }
   }, {
     key: "findOrCreateBracket",
@@ -233,7 +244,7 @@ var BracketGenerator = exports.BracketGenerator = /*#__PURE__*/function () {
       brackets.push(newBracket);
       if (brackets.length > page.getBracketSize()) {
         var topBrackets = BracketGenerator.buildTreeBottomUp(page, brackets);
-        BracketGenerator.bracketMap[page.oid].brackets = topBrackets;
+        BracketGenerator.bracketMap[page.oid] = topBrackets;
       }
       return newBracket;
     }
@@ -280,6 +291,16 @@ var BracketGenerator = exports.BracketGenerator = /*#__PURE__*/function () {
       BracketGenerator.pageMap = {};
       BracketGenerator.all = {};
     }
+  }, {
+    key: "markBracketDirty",
+    value: function markBracketDirty(bracket) {
+      var current = bracket;
+      while (current && current.type === 'BI') {
+        current.currentStatus = 'new';
+        current.markLayoutDirty('update');
+        current = current.parent;
+      }
+    }
   }]);
 }();
 _defineProperty(BracketGenerator, "bracketMap", {});

package/build/LoadingManager.js

@@ -133,7 +133,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
       var key = this.getTModelKey(tmodel, targetName);
       var loadTargetName = _TUtil.TUtil.getLoadTargetName(targetName);
       var loadingComplete = this.isLoadingComplete(tmodel, targetName);
-      if (loadingComplete || !this.tmodelKeyMap[key]) {
+      if (loadingComplete || !this.tmodelKeyMap[key] || !tmodel.val(loadTargetName)) {
         var _this$tmodelKeyMap, _this$tmodelKeyMap$ke;
         (_this$tmodelKeyMap$ke = (_this$tmodelKeyMap = this.tmodelKeyMap)[key]) !== null && _this$tmodelKeyMap$ke !== void 0 ? _this$tmodelKeyMap$ke : _this$tmodelKeyMap[key] = {
           fetchMap: {},
@@ -143,11 +143,7 @@ var LoadingManager = exports.LoadingManager = /*#__PURE__*/function () {
           activeIndex: 0,
           accessIndex: 0
         };
-      }
-      if (loadingComplete || !tmodel.val(loadTargetName)) {
-        if (!tmodel.val(loadTargetName)) {
-          tmodel.val(loadTargetName, []);
-        }
+        tmodel.val(loadTargetName, []);
       }
       if (!this.tmodelKeyMap[key].fetchMap[fetchId]) {
         this.tmodelKeyMap[key].fetchMap[fetchId] = {

package/build/LocationManager.js

@@ -228,7 +228,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
                   }
                 }
                 viewport.setCurrentChild(child);
-                if (!child.getDirtyLayout() && !child.currentStatus) {
+                if (!child.getDirtyLayout() && !child.currentStatus && child.activeTargetList.length === 0) {
                   _this.calcNextLocation(child, container, viewport);
                   job.index++;
                   return;
@@ -244,7 +244,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
                 var prevX = child.actualValues.x;
                 var prevY = child.actualValues.y;
                 var prevWidth = child.getMinWidth();
-                if (child.isIncluded() && container.manageChildTargetExecution(child)) {
+                if (child.isIncluded()) {
                   _this.calculateTargets(child);
                 }
                 if (prevWidth !== child.getMinWidth() && viewport.isOverflow()) {
@@ -289,12 +289,6 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
                       viewport: undefined,
                       index: 0
                     });
-                  } else if (!child.isVisible() && child.makeChildrenInvisible !== false) {
-                    child.makeChildrenInvisible = false;
-                    _TUtil.TUtil.getDeepList(child).forEach(function (t) {
-                      t.actualValues.isVisible = false;
-                      _this.addToLocationList(t);
-                    });
                   }
                 }
               };
@@ -401,8 +395,7 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
   }, {
     key: "calcNextLocation",
     value: function calcNextLocation(child, container, viewport) {
-      var _child$styleTargetMap,
-        _this2 = this;
+      var _child$styleTargetMap;
       viewport.setLocation();
       if (viewport.isOverflow()) {
         viewport.overflow();
@@ -433,12 +426,6 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
         this.addToLocationList(child);
       }
       this.calculateVisibility(child);
-      if (!child.isVisible() && child.hasChildren()) {
-        _TUtil.TUtil.getDeepList(child).forEach(function (t) {
-          t.actualValues.isVisible = false;
-          _this2.addToLocationList(t);
-        });
-      }
       if (child.isInFlow()) {
         if (_TUtil.TUtil.isNumber(child.val('appendNewLine'))) {
           viewport.appendNewLine();
@@ -455,24 +442,29 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
       var wasVisible = tmodel.isVisible();
       var nowVisible;
       var lastVisibleTest = (_tmodel$visibilitySta = (_tmodel$visibilitySta2 = tmodel.visibilityStatus) === null || _tmodel$visibilitySta2 === void 0 ? void 0 : _tmodel$visibilitySta2.isVisible) !== null && _tmodel$visibilitySta !== void 0 ? _tmodel$visibilitySta : undefined;
-      var nowVisibleTest = tmodel.calcVisibility();
+      if (!tmodel.visibilityStatus) {
+        tmodel.visibilityStatus = {};
+      }
+      tmodel.visibilityStatus.lastIsVisible = tmodel.visibilityStatus.isVisible;
       if (_TUtil.TUtil.isDefined(tmodel.targets.isVisible)) {
         if (typeof tmodel.targets.isVisible.value === 'function') {
           nowVisible = tmodel.targets.isVisible.value.call(tmodel);
         } else {
           nowVisible = !!tmodel.targets.isVisible;
         }
+        tmodel.isNowVisible = !wasVisible && nowVisible;
+        tmodel.isNowInvisible = (wasVisible || wasVisible === undefined) && !nowVisible;
       } else {
+        var nowVisibleTest = tmodel.calcVisibility();
         nowVisible = nowVisibleTest;
+        tmodel.isNowVisible = !wasVisible && nowVisible || !lastVisibleTest && nowVisibleTest;
+        tmodel.isNowInvisible = (wasVisible || wasVisible === undefined) && !nowVisible || lastVisibleTest && !nowVisibleTest;
+        tmodel.actualValues.isVisible = nowVisible;
       }
-      tmodel.actualValues.isVisible = nowVisible;
-      tmodel.isNowVisible = !wasVisible && nowVisible || !lastVisibleTest && nowVisibleTest;
-      tmodel.isNowInvisible = (wasVisible || wasVisible === undefined) && !nowVisible || lastVisibleTest && !nowVisibleTest;
-      if (tmodel.isNowVisible) {
+      if (tmodel.isNowVisible || tmodel.isNowInvisible) {
         tmodel.markLayoutDirty('isNowVisible');
       }
       if (tmodel.isNowInvisible) {
-        tmodel.makeChildrenInvisible = undefined;
         this.addToLocationList(tmodel);
       }
       tmodel.addToParentVisibleChildren();
@@ -529,17 +521,17 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
   }, {
     key: "scheduleResumePaused",
     value: function scheduleResumePaused() {
-      var _this3 = this;
+      var _this2 = this;
       if (this.resumeScheduled || !this.resumePausedList.length) {
         return;
       }
       this.resumeScheduled = true;
       requestAnimationFrame(function () {
         requestAnimationFrame(function () {
-          _this3.resumeScheduled = false;
-          var list = _this3.resumePausedList.slice();
-          _this3.resumePausedList.length = 0;
-          _this3.resumePausedMap = {};
+          _this2.resumeScheduled = false;
+          var list = _this2.resumePausedList.slice();
+          _this2.resumePausedList.length = 0;
+          _this2.resumePausedMap = {};
           var _iterator2 = _createForOfIteratorHelper(list),
             _step2;
           try {

package/build/TModel.js

@@ -70,18 +70,17 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
   return _createClass(TModel, [{
     key: "createViewport",
     value: function createViewport() {
+      var _this$getParent$$dom$, _this$getParent, _this$getParent$$dom$2, _this$getParent2;
       this.viewport = this.viewport || new _Viewport.Viewport();
-      var scrollLeft = -this.getScrollLeft();
-      var scrollTop = -this.getScrollTop();
-      var x = scrollLeft,
-        y = scrollTop;
+      var x = -this.getScrollLeft(),
+        y = -this.getScrollTop();
       this.viewport.xNext = x;
       this.viewport.xNorth = x;
       this.viewport.xEast = x;
       this.viewport.xSouth = x;
       this.viewport.xWest = x;
-      this.viewport.scrollLeft = scrollLeft;
-      this.viewport.scrollTop = scrollTop;
+      this.viewport.scrollLeft = -(this.getScrollLeft() + ((_this$getParent$$dom$ = (_this$getParent = this.getParent()) === null || _this$getParent === void 0 || (_this$getParent = _this$getParent.$dom) === null || _this$getParent === void 0 ? void 0 : _this$getParent.getScrollLeft()) !== null && _this$getParent$$dom$ !== void 0 ? _this$getParent$$dom$ : 0));
+      this.viewport.scrollTop = -(this.getScrollTop() + ((_this$getParent$$dom$2 = (_this$getParent2 = this.getParent()) === null || _this$getParent2 === void 0 || (_this$getParent2 = _this$getParent2.$dom) === null || _this$getParent2 === void 0 ? void 0 : _this$getParent2.getScrollTop()) !== null && _this$getParent$$dom$2 !== void 0 ? _this$getParent$$dom$2 : 0));
       this.viewport.absX = this.absX;
       this.viewport.absY = this.absY;
       this.viewport.xOverflowReset = x;
@@ -115,9 +114,8 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "calcAbsolutePosition",
     value: function calcAbsolutePosition(x, y) {
-      var _this$getParent$$dom$, _this$getParent$$dom, _this$getParent$$dom$2, _this$getParent$$dom2;
-      this.absX = _TUtil.TUtil.isDefined(this.val('absX')) ? this.val('absX') : this.getParent().absX - ((_this$getParent$$dom$ = (_this$getParent$$dom = this.getParent().$dom) === null || _this$getParent$$dom === void 0 ? void 0 : _this$getParent$$dom.getScrollLeft()) !== null && _this$getParent$$dom$ !== void 0 ? _this$getParent$$dom$ : 0) + x;
-      this.absY = _TUtil.TUtil.isDefined(this.val('absY')) ? this.val('absY') : this.getParent().absY - ((_this$getParent$$dom$2 = (_this$getParent$$dom2 = this.getParent().$dom) === null || _this$getParent$$dom2 === void 0 ? void 0 : _this$getParent$$dom2.getScrollTop()) !== null && _this$getParent$$dom$2 !== void 0 ? _this$getParent$$dom$2 : 0) + y;
+      this.absX = _TUtil.TUtil.isDefined(this.val('absX')) ? this.val('absX') : this.getParent().absX + x;
+      this.absY = _TUtil.TUtil.isDefined(this.val('absY')) ? this.val('absY') : this.getParent().absY + y;
     }
   }, {
     key: "calcAbsolutePositionFromDom",
@@ -415,7 +413,11 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
       if (!this.isIncluded() || this.isDomIsland() && !this.hasDom()) {
         return false;
       }
-      var result = this.isVisible() && (this.hasEventDirty() || this.dirtyLayout !== false) || this.isNowVisible;
+      var hasDirtyLayout = this.dirtyLayout !== false;
+      var hasDirtyEvent = this.hasEventDirty();
+      var hasDom = this.hasDom();
+      var visible = this.isVisible();
+      var result = this.currentStatus === 'active' || hasDirtyLayout || visible && hasDirtyEvent || this.isNowVisible || hasDom && hasDirtyEvent;
       this.currentStatus = undefined;
       return result;
     }
@@ -494,8 +496,8 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
     value: function getParentValueAtMyIndex(targetName) {
       var parentValue = this.getParentValue(targetName);
       if (Array.isArray(parentValue)) {
-        var _this$getParent;
-        var index = (_this$getParent = this.getParent()) === null || _this$getParent === void 0 ? void 0 : _this$getParent.getChildIndex(this);
+        var _this$getParent3;
+        var index = (_this$getParent3 = this.getParent()) === null || _this$getParent3 === void 0 ? void 0 : _this$getParent3.getChildIndex(this);
         if (typeof index === 'number') {
           return parentValue[index];
         }