targetj 1.0.260 → 1.1.0

package/build/ParticleUtil.js

@@ -14,7 +14,6 @@ function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r),
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { TargetData } from "./TargetData.js";
 import { TargetParser } from "./TargetParser.js";
 import { TargetUtil } from "./TargetUtil.js";
 import { TUtil } from "./TUtil.js";
@@ -23,35 +22,34 @@ var ParticleUtil = /*#__PURE__*/function () {
     _classCallCheck(this, ParticleUtil);
   }
   return _createClass(ParticleUtil, null, [{
-    key: "isGpuChildrenTarget",
-    value: function isGpuChildrenTarget(key) {
-      return ParticleUtil.gpuChildrenTargets.has(TargetUtil.getTargetName(key));
+    key: "affectsChildLayout",
+    value: function affectsChildLayout(key) {
+      return ["x", "y", "width", "height"].includes(ParticleUtil.getTargetName(key));
     }
   }, {
-    key: "getGpuRenderTargetName",
-    value: function getGpuRenderTargetName(key) {
-      var cleanKey = TargetUtil.getTargetName(key);
-      return ParticleUtil.gpuRenderAliases[cleanKey] || cleanKey;
+    key: "affectsChildFlowLayout",
+    value: function affectsChildFlowLayout(key) {
+      return ["width", "height"].includes(ParticleUtil.getTargetName(key));
     }
   }, {
-    key: "isGpuRenderTarget",
-    value: function isGpuRenderTarget(key) {
-      return ParticleUtil.gpuRenderTargets.has(ParticleUtil.getGpuRenderTargetName(key));
+    key: "isChildrenTarget",
+    value: function isChildrenTarget(key) {
+      return ParticleUtil.childrenTargets.has(TargetUtil.getTargetName(key));
     }
   }, {
-    key: "isIgnoredGpuStyleTarget",
-    value: function isIgnoredGpuStyleTarget(key) {
+    key: "getTargetName",
+    value: function getTargetName(key) {
       var cleanKey = TargetUtil.getTargetName(key);
-      return TargetData.styleSet.has(cleanKey) && !ParticleUtil.isGpuRenderTarget(cleanKey);
+      return ParticleUtil.gpuRenderAliases[cleanKey] || cleanKey;
     }
   }, {
-    key: "affectsChildLayout",
-    value: function affectsChildLayout(key) {
-      return ParticleUtil.childLayoutTargets.has(ParticleUtil.getGpuRenderTargetName(key));
+    key: "isGpuTarget",
+    value: function isGpuTarget(key) {
+      return ParticleUtil.gpuRenderTargets.has(ParticleUtil.getTargetName(key));
     }
   }, {
-    key: "getGpuTargetMode",
-    value: function getGpuTargetMode(key) {
+    key: "getTargetMode",
+    value: function getTargetMode(key) {
       if (key.endsWith("$$")) {
         return "deferred";
       }
@@ -60,55 +58,40 @@ var ParticleUtil = /*#__PURE__*/function () {
       }
       return "immediate";
     }
-  }, {
-    key: "classifyGpuChildTarget",
-    value: function classifyGpuChildTarget(key, value) {
-      /*
-       * Interval is a property of the target definition, not the target name.
-       * Check it before render/style classification.
-       */
-      if (TargetParser.isIntervalTarget(value)) {
-        return "interval";
-      }
-      if (ParticleUtil.isGpuRenderTarget(key)) {
-        return "render";
-      }
-      if (ParticleUtil.isIgnoredGpuStyleTarget(key)) {
-        return "ignoredStyle";
-      }
-      return "runtime";
-    }
   }, {
     key: "isTransientRuntimeField",
     value: function isTransientRuntimeField(key) {
       return ParticleUtil.transientRuntimeFields.has(key);
     }
   }, {
-    key: "isFunctionBasedGpuValue",
-    value: function isFunctionBasedGpuValue(value) {
-      if (typeof value === "function") {
+    key: "isFunctionBasedTarget",
+    value: function isFunctionBasedTarget(target) {
+      if (typeof target === "function") {
         return true;
       }
-      return TargetParser.isTargetSpecObject(value) && typeof value.value === "function";
+      return TargetParser.isTargetSpecObject(target) && typeof target.value === "function";
     }
   }, {
-    key: "resolveGpuRenderValue",
-    value: function resolveGpuRenderValue(value, child) {
-      if (typeof value === "function") {
-        return value.call(child);
+    key: "resolveValue",
+    value: function resolveValue(target, child) {
+      if (typeof target === "function") {
+        return ParticleUtil.resolveValue(target.call(child), child);
       }
-      if (!TargetParser.isTargetSpecObject(value)) {
-        return value;
+      if (!TargetParser.isTargetSpecObject(target)) {
+        return target;
       }
-      var resolved = _objectSpread({}, value);
+      var resolved = _objectSpread({}, target);
       if (typeof resolved.value === "function") {
-        resolved.value = resolved.value.call(child);
+        resolved.value = ParticleUtil.resolveValue(resolved.value.call(child), child);
       }
       return resolved;
     }
   }, {
-    key: "getGpuInitialRenderValue",
-    value: function getGpuInitialRenderValue(value) {
+    key: "getInitialValue",
+    value: function getInitialValue(value) {
+      if (TargetParser.isValueStepsCycleArray(value)) {
+        return value[0];
+      }
       if (!TargetParser.isTargetSpecObject(value)) {
         return value;
       }
@@ -118,113 +101,56 @@ var ParticleUtil = /*#__PURE__*/function () {
       return value.value;
     }
   }, {
-    key: "setGpuInitialChildValue",
-    value: function setGpuInitialChildValue(child, key, value) {
+    key: "setInitialValue",
+    value: function setInitialValue(child, key, value) {
       if (!child || !TUtil.isDefined(value)) {
         return;
       }
       child.val(key, value);
     }
   }, {
-    key: "createGpuRuntimeTarget",
-    value: function createGpuRuntimeTarget(key, value) {
-      return {
-        key: key,
-        targetName: ParticleUtil.getGpuRenderTargetName(key),
-        kind: ParticleUtil.classifyGpuChildTarget(key, value),
-        mode: ParticleUtil.getGpuTargetMode(key),
-        target: TargetParser.isTargetSpecObject(value) ? _objectSpread({}, value) : {
-          value: value
-        }
-      };
-    }
-  }, {
-    key: "requiresGpuChildRuntime",
-    value: function requiresGpuChildRuntime(key, value) {
-      var mode = ParticleUtil.getGpuTargetMode(key);
-      var kind = ParticleUtil.classifyGpuChildTarget(key, value);
-      if (kind === "interval" || kind === "runtime") {
+    key: "requiresRuntime",
+    value: function requiresRuntime(key, target) {
+      var mode = ParticleUtil.getTargetMode(key);
+      if (!ParticleUtil.isGpuTarget(key) || TargetParser.isIntervalTarget(target)) {
         return true;
       }
       if (mode !== "immediate") {
         return true;
       }
-      if (!ParticleUtil.isGpuRenderTarget(key)) {
-        return false;
+      if (TargetParser.isValueStepsCycleArray(target)) {
+        return true;
       }
-
-      /*
-       * A plain render function such as x() or backgroundColor() can simply
-       * be resolved immediately. It does not require an animation runtime.
-       */
-      if (typeof value === "function") {
+      if (!TargetParser.isTargetSpecObject(target)) {
         return false;
       }
-      if (!TargetParser.isTargetSpecObject(value)) {
-        return false;
-      }
-
-      /*
-       * Simple GPU transitions such as:
-       *
-       * x: {
-       *     value: [0, 500],
-       *     steps: 100
-       * }
-       *
-       * can continue using the existing bulk GPU transition path.
-       *
-       * Targets with their own execution timing or function-valued value
-       * require the lightweight child runtime.
-       */
-      return typeof value.value === "function" || TUtil.isDefined(value.interval) || TUtil.isDefined(value.easing) || TUtil.isDefined(value.cycles) || TUtil.isDefined(value.loop);
+      return typeof target.value === "function" || typeof target.steps === "function" || TUtil.isDefined(target.interval) || TUtil.isDefined(target.easing) || TUtil.isDefined(target.cycles) || TUtil.isDefined(target.loop) || TUtil.isDefined(target.pauseOn);
     }
   }, {
-    key: "compileGpuChildDefinition",
-    value: function compileGpuChildDefinition(child, definition) {
+    key: "compileChildDefinition",
+    value: function compileChildDefinition(child, definition) {
       var renderDefinition = {};
       var runtimeTargets = [];
-      var ignoredStyles = [];
-      var layoutFunctions = [];
       var entries = Object.entries(definition).map(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
           key = _ref2[0],
-          value = _ref2[1];
+          target = _ref2[1];
         return {
           key: key,
-          value: value,
-          kind: ParticleUtil.classifyGpuChildTarget(key, value),
-          mode: ParticleUtil.getGpuTargetMode(key),
-          targetName: ParticleUtil.getGpuRenderTargetName(key),
-          requiresRuntime: ParticleUtil.requiresGpuChildRuntime(key, value)
+          target: target,
+          mode: ParticleUtil.getTargetMode(key),
+          targetName: ParticleUtil.getTargetName(key),
+          requiresRuntime: ParticleUtil.requiresRuntime(key, target)
         };
       });
-
-      /*
-       * Resolve ordinary immediate non-function render values first.
-       *
-       * This seeds width/height/etc. before x() and other functions execute.
-       */
       var _iterator = _createForOfIteratorHelper(entries),
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var entry = _step.value;
-          if (entry.kind !== "render" || entry.mode !== "immediate" || entry.requiresRuntime || ParticleUtil.isFunctionBasedGpuValue(entry.value)) {
-            continue;
-          }
-          var resolved = ParticleUtil.resolveGpuRenderValue(entry.value, child);
-          renderDefinition[entry.targetName] = resolved;
-          ParticleUtil.setGpuInitialChildValue(child, entry.targetName, ParticleUtil.getGpuInitialRenderValue(resolved));
+          var cleanKey = TargetUtil.getTargetName(entry.key);
+          child.allTargetMap[cleanKey] = entry.key;
         }
-
-        /*
-         * Resolve plain immediate function-valued render targets after
-         * static dimensions have been initialized.
-         *
-         * Keep layout functions so they can be recalculated after the
-         * parent's first layout.
-         */
       } catch (err) {
         _iterator.e(err);
       } finally {
@@ -235,24 +161,16 @@ var ParticleUtil = /*#__PURE__*/function () {
       try {
         for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           var _entry = _step2.value;
-          if (_entry.kind !== "render" || _entry.mode !== "immediate" || _entry.requiresRuntime || !ParticleUtil.isFunctionBasedGpuValue(_entry.value)) {
+          if (_entry.mode !== "immediate" || ParticleUtil.isFunctionBasedTarget(_entry.target)) {
             continue;
           }
-          var _resolved = ParticleUtil.resolveGpuRenderValue(_entry.value, child);
-          renderDefinition[_entry.targetName] = _resolved;
-          ParticleUtil.setGpuInitialChildValue(child, _entry.targetName, ParticleUtil.getGpuInitialRenderValue(_resolved));
-          if (ParticleUtil.affectsChildLayout(_entry.targetName)) {
-            layoutFunctions.push({
-              key: _entry.key,
-              targetName: _entry.targetName,
-              value: _entry.value
-            });
+          var resolved = ParticleUtil.resolveValue(_entry.target, child);
+          var initialValue = ParticleUtil.getInitialValue(resolved);
+          ParticleUtil.setInitialValue(child, _entry.targetName, initialValue);
+          if (ParticleUtil.isGpuTarget(_entry.key) && !_entry.requiresRuntime) {
+            renderDefinition[_entry.targetName] = resolved;
           }
         }
-
-        /*
-         * Preserve runtime targets in their original code order.
-         */
       } catch (err) {
         _iterator2.e(err);
       } finally {
@@ -263,34 +181,34 @@ var ParticleUtil = /*#__PURE__*/function () {
       try {
         for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var _entry2 = _step3.value;
-          if (_entry2.kind === "ignoredStyle") {
-            ignoredStyles.push(_entry2.key);
+          if (_entry2.mode !== "immediate" || !ParticleUtil.isGpuTarget(_entry2.key) || !ParticleUtil.isFunctionBasedTarget(_entry2.target)) {
             continue;
           }
-          if (!_entry2.requiresRuntime) {
+          var _resolved = ParticleUtil.resolveValue(_entry2.target, child);
+          _entry2.requiresRuntime = ParticleUtil.requiresRuntime(_entry2.key, _resolved);
+          if (_entry2.requiresRuntime) {
+            var _initialValue = ParticleUtil.getInitialValue(_resolved);
+            if (TUtil.isDefined(_initialValue)) {
+              renderDefinition[_entry2.targetName] = _initialValue;
+              ParticleUtil.setInitialValue(child, _entry2.targetName, _initialValue);
+            }
             continue;
           }
-          runtimeTargets.push(ParticleUtil.createGpuRuntimeTarget(_entry2.key, _entry2.value));
-
-          /*
-           * An immediate animated render target needs an initial GPU-visible
-           * value, but the animation itself belongs to childRuntimePrograms.
-           *
-           * Example:
-           *
-           * y: {
-           *     value() { return [0, 500]; },
-           *     steps: 30,
-           *     interval: 20
-           * }
-           *
-           * renderDefinition gets y: 0.
-           */
-          if (_entry2.kind === "render" && _entry2.mode === "immediate") {
-            var _resolved2 = ParticleUtil.resolveGpuRenderValue(_entry2.value, child);
-            var initialValue = ParticleUtil.getGpuInitialRenderValue(_resolved2);
-            renderDefinition[_entry2.targetName] = initialValue;
-            ParticleUtil.setGpuInitialChildValue(child, _entry2.targetName, initialValue);
+          renderDefinition[_entry2.targetName] = _resolved;
+          ParticleUtil.setInitialValue(child, _entry2.targetName, ParticleUtil.getInitialValue(_resolved));
+          var resolvedValue = TargetParser.isTargetSpecObject(_resolved) ? _resolved.value : _resolved;
+          if (ParticleUtil.affectsChildLayout(_entry2.targetName) && !Array.isArray(resolvedValue)) {
+            runtimeTargets.push({
+              key: _entry2.key,
+              targetName: _entry2.targetName,
+              mode: _entry2.mode,
+              target: TargetParser.isTargetSpecObject(_entry2.target) ? _objectSpread({}, _entry2.target) : {
+                value: _entry2.target
+              },
+              requiresRuntime: false,
+              requiresInitialResolution: false,
+              renderable: true
+            });
           }
         }
       } catch (err) {
@@ -298,20 +216,50 @@ var ParticleUtil = /*#__PURE__*/function () {
       } finally {
         _iterator3.f();
       }
+      var _iterator4 = _createForOfIteratorHelper(entries),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var _entry3 = _step4.value;
+          if (!_entry3.requiresRuntime) {
+            continue;
+          }
+          var requiresInitialResolution = _entry3.mode === "immediate" && ParticleUtil.isGpuTarget(_entry3.key) && ParticleUtil.isFunctionBasedTarget(_entry3.target);
+          var runtimeTarget = {
+            key: _entry3.key,
+            targetName: _entry3.targetName,
+            mode: _entry3.mode,
+            target: TargetParser.isTargetSpecObject(_entry3.target) ? _objectSpread({}, _entry3.target) : {
+              value: _entry3.target
+            },
+            requiresRuntime: true,
+            requiresInitialResolution: requiresInitialResolution,
+            renderable: ParticleUtil.isGpuTarget(_entry3.key)
+          };
+          runtimeTargets.push(runtimeTarget);
+          if (ParticleUtil.isGpuTarget(_entry3.key) && _entry3.mode === "immediate" && !ParticleUtil.isFunctionBasedTarget(_entry3.target)) {
+            var _resolved2 = ParticleUtil.resolveValue(_entry3.target, child);
+            var _initialValue2 = ParticleUtil.getInitialValue(_resolved2);
+            renderDefinition[_entry3.targetName] = _initialValue2;
+            ParticleUtil.setInitialValue(child, _entry3.targetName, _initialValue2);
+          }
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
       return {
         renderDefinition: renderDefinition,
-        runtimeTargets: runtimeTargets,
-        ignoredStyles: ignoredStyles,
-        layoutFunctions: layoutFunctions
+        runtimeTargets: runtimeTargets
       };
     }
   }]);
 }();
-_defineProperty(ParticleUtil, "gpuRenderTargets", new Set(["x", "y", "width", "height", "borderRadius", "backgroundColor", "rotate"]));
+_defineProperty(ParticleUtil, "gpuRenderTargets", new Set(["x", "y", "width", "height", "borderRadius", "backgroundColor", "rotate", "opacity", "scale"]));
 _defineProperty(ParticleUtil, "gpuRenderAliases", {
   background: "backgroundColor"
 });
-_defineProperty(ParticleUtil, "childLayoutTargets", new Set(["x", "y", "width", "height"]));
-_defineProperty(ParticleUtil, "gpuChildrenTargets", new Set(["addChildren", "children"]));
+_defineProperty(ParticleUtil, "childrenTargets", new Set(["addChildren", "children"]));
 _defineProperty(ParticleUtil, "transientRuntimeFields", new Set(["particleRenderer", "childHandles", "particleValuesDirty", "particleRenderRequested", "pendingGpuChildren", "layoutEpoch", "completeLayoutEpoch", "completeChildrenLayoutState", "layoutCompleteWaiters", "particleSyncPromise", "restoringParticleRuntime"]));
 export { ParticleUtil };

package/build/RunScheduler.js

@@ -249,9 +249,11 @@ var RunScheduler = /*#__PURE__*/function () {
         var newDelay = this.nextRuns.length > 0 ? this.nextRuns[0].delay - (TUtil.now() - this.nextRuns[0].insertTime) : undefined;
         var manager = getManager();
         var hasImmediateWork = manager.lists.restyle.length > 0 || manager.lists.reasyncStyle.length > 0 || getLocationManager().activatedList.length > 0;
-        if (newDelay === undefined || manager.lists.activeTModels.length > 0 || manager.lists.updatingTModels.length > 0 || hasImmediateWork) {
+        var hasNoDomVisibilityWork = manager.lists.noDomVisibilityTModels.length > 0;
+        if (newDelay === undefined || manager.lists.activeTModels.length > 0 || manager.lists.updatingTModels.length > 0 || hasImmediateWork || hasNoDomVisibilityWork) {
           if (manager.lists.updatingTModels.length > 0) {
             this.schedule(1, "getManager-needsRerun-updatingTModels");
+            return;
           } else if (manager.lists.activeTModels.length > 0) {
             var activeTModel = manager.lists.activeTModels.find(function (tmodel) {
               return tmodel.targetExecutionCount === 0 || tmodel.activeTargetList.filter(function (target) {
@@ -264,10 +266,15 @@ var RunScheduler = /*#__PURE__*/function () {
               var delay = !this.activeStartTime || TUtil.now() - this.activeStartTime > 15 ? 1 : 15;
               this.activeStartTime = TUtil.now();
               this.schedule(delay, "getManager-needsRerun-".concat(activeTModel.oid, "-").concat(activeTModel.activeTargetList));
+              return;
             }
-          } else if (hasImmediateWork) {
+          }
+          if (hasImmediateWork) {
             this.schedule(1, 'needsRerun-dom-work');
           }
+          if (hasNoDomVisibilityWork) {
+            this.schedule(15, "needsRerun-noDomVisibility");
+          }
         }
       }
       this.executeNextRun();
@@ -402,7 +409,7 @@ var RunScheduler = /*#__PURE__*/function () {
       if (runToExecute) {
         this.setDelayProcess(runToExecute.runId, runToExecute.insertTime, runToExecute.delay, TUtil.now(), 0);
       } else if (this.nextRuns.length > 0) {
-        var nextValidRun = this.nextRuns[0];
+        var nextValidRun = this.nextRuns.shift();
         var _now = TUtil.now();
         var _newDelay = Math.max(0, nextValidRun.delay - (_now - nextValidRun.insertTime));
         this.setDelayProcess(nextValidRun.runId, nextValidRun.insertTime, nextValidRun.delay, _now + _newDelay, _newDelay);

package/build/StateManager.js

@@ -146,7 +146,7 @@ var StateManager = /*#__PURE__*/function () {
               getLoader().restoreRuntimeSnapshot(checkpoint.loaderSnapshot, tmodelIdMap);
               $pageDom = TModelUtil.getPageDom();
               $pageDom.innerHTML(checkpoint.html);
-              TModelUtil.restoreDomState($pageDom, checkpoint.domState);
+              TModelUtil.restoreMountedDom($pageDom, checkpoint.domState);
               this.showGpuRestoreVisuals(checkpoint.gpuVisuals);
               tApp.tRoot.$dom = TModelUtil.getRootDom();
               visibleModels = checkpoint.visibleOids.map(function (oid) {
@@ -161,7 +161,7 @@ var StateManager = /*#__PURE__*/function () {
               return tApp.start();
             case 31:
               $restoredPageDom = TModelUtil.getPageDom();
-              TModelUtil.restoreDomState($restoredPageDom, checkpoint.domState);
+              TModelUtil.restoreMountedDom($restoredPageDom, checkpoint.domState);
               _context2.next = 35;
               return TModelUtil.restoreScroll(checkpoint);
             case 35:
@@ -261,8 +261,8 @@ var StateManager = /*#__PURE__*/function () {
   }, {
     key: "connectRestoredDoms",
     value: function connectRestoredDoms(visibleModels, allModels) {
-      var newVisibles = DomInit.initCacheDoms(visibleModels);
-      var restoredWithDom = TUtil.uniqueTModels([].concat(_toConsumableArray(visibleModels), _toConsumableArray(newVisibles)));
+      var restoredDoms = DomInit.initCacheDoms(visibleModels);
+      var restoredWithDom = TUtil.uniqueTModels([].concat(_toConsumableArray(visibleModels), _toConsumableArray(restoredDoms)));
       this.normalizeRestoredModels(allModels);
       tApp.manager.visibleOidMap = {};
       var _iterator4 = _createForOfIteratorHelper(restoredWithDom),
@@ -270,7 +270,7 @@ var StateManager = /*#__PURE__*/function () {
       try {
         for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
           var tmodel = _step4.value;
-          if (tmodel.isIncluded()) {
+          if (tmodel.isIncluded() && tmodel.isVisible()) {
             tApp.manager.visibleOidMap[tmodel.oid] = tmodel;
           }
         }
@@ -281,11 +281,48 @@ var StateManager = /*#__PURE__*/function () {
       }
       return restoredWithDom;
     }
+  }, {
+    key: "getGpuVisualClipRect",
+    value: function getGpuVisualClipRect(element) {
+      var rect = element.getBoundingClientRect();
+      var left = Math.max(0, rect.left);
+      var top = Math.max(0, rect.top);
+      var right = Math.min(window.innerWidth, rect.right);
+      var bottom = Math.min(window.innerHeight, rect.bottom);
+      for (var parent = element.parentElement; parent; parent = parent.parentElement) {
+        var style = getComputedStyle(parent);
+        var parentRect = parent.getBoundingClientRect();
+        var clipsX = ["hidden", "clip", "auto", "scroll"].includes(style.overflowX);
+        var clipsY = ["hidden", "clip", "auto", "scroll"].includes(style.overflowY);
+        if (clipsX) {
+          left = Math.max(left, parentRect.left);
+          right = Math.min(right, parentRect.right);
+        }
+        if (clipsY) {
+          top = Math.max(top, parentRect.top);
+          bottom = Math.min(bottom, parentRect.bottom);
+        }
+        if (right <= left || bottom <= top) {
+          return {
+            left: left,
+            top: top,
+            width: 0,
+            height: 0
+          };
+        }
+      }
+      return {
+        left: left,
+        top: top,
+        width: right - left,
+        height: bottom - top
+      };
+    }
   }, {
     key: "captureGpuVisuals",
     value: function () {
       var _captureGpuVisuals = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        var visuals, _i, _Object$values, tmodel, renderer, canvas, rect, bitmap;
+        var visuals, _i, _Object$values, tmodel, renderer, canvas, rect, clipRect, bitmap;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -293,7 +330,7 @@ var StateManager = /*#__PURE__*/function () {
               _i = 0, _Object$values = Object.values(App.tmodelIdMap);
             case 2:
               if (!(_i < _Object$values.length)) {
-                _context3.next = 18;
+                _context3.next = 21;
                 break;
               }
               tmodel = _Object$values[_i];
@@ -303,37 +340,48 @@ var StateManager = /*#__PURE__*/function () {
                 _context3.next = 8;
                 break;
               }
-              return _context3.abrupt("continue", 15);
+              return _context3.abrupt("continue", 18);
             case 8:
               rect = canvas.getBoundingClientRect();
-              _context3.next = 11;
+              clipRect = this.getGpuVisualClipRect(canvas);
+              if (!(clipRect.width <= 0 || clipRect.height <= 0)) {
+                _context3.next = 12;
+                break;
+              }
+              return _context3.abrupt("continue", 18);
+            case 12:
+              _context3.next = 14;
               return renderer.captureBitmap();
-            case 11:
+            case 14:
               bitmap = _context3.sent;
               if (bitmap) {
-                _context3.next = 14;
+                _context3.next = 17;
                 break;
               }
-              return _context3.abrupt("continue", 15);
-            case 14:
+              return _context3.abrupt("continue", 18);
+            case 17:
               visuals[tmodel.oid] = {
                 bitmap: bitmap,
                 left: rect.left,
                 top: rect.top,
                 width: rect.width,
-                height: rect.height
+                height: rect.height,
+                clipLeft: clipRect.left,
+                clipTop: clipRect.top,
+                clipWidth: clipRect.width,
+                clipHeight: clipRect.height
               };
-            case 15:
+            case 18:
               _i++;
               _context3.next = 2;
               break;
-            case 18:
+            case 21:
               return _context3.abrupt("return", visuals);
-            case 19:
+            case 22:
             case "end":
               return _context3.stop();
           }
-        }, _callee3);
+        }, _callee3, this);
       }));
       function captureGpuVisuals() {
         return _captureGpuVisuals.apply(this, arguments);
@@ -360,23 +408,32 @@ var StateManager = /*#__PURE__*/function () {
       });
       for (var _i2 = 0, _Object$values2 = Object.values(visuals); _i2 < _Object$values2.length; _i2++) {
         var visual = _Object$values2[_i2];
-        if (!(visual !== null && visual !== void 0 && visual.bitmap)) {
+        if (!(visual !== null && visual !== void 0 && visual.bitmap) || visual.clipWidth <= 0 || visual.clipHeight <= 0) {
           continue;
         }
+        var clip = document.createElement("div");
+        Object.assign(clip.style, {
+          position: "absolute",
+          left: "".concat(visual.clipLeft, "px"),
+          top: "".concat(visual.clipTop, "px"),
+          width: "".concat(visual.clipWidth, "px"),
+          height: "".concat(visual.clipHeight, "px"),
+          overflow: "hidden"
+        });
         var preview = document.createElement("canvas");
         preview.width = visual.bitmap.width;
         preview.height = visual.bitmap.height;
         Object.assign(preview.style, {
           position: "absolute",
-          left: "".concat(visual.left, "px"),
-          top: "".concat(visual.top, "px"),
+          left: "".concat(visual.left - visual.clipLeft, "px"),
+          top: "".concat(visual.top - visual.clipTop, "px"),
           width: "".concat(visual.width, "px"),
           height: "".concat(visual.height, "px"),
           display: "block"
         });
-        var context = preview.getContext("2d");
-        context.drawImage(visual.bitmap, 0, 0);
-        overlay.appendChild(preview);
+        preview.getContext("2d").drawImage(visual.bitmap, 0, 0);
+        clip.appendChild(preview);
+        overlay.appendChild(clip);
       }
       document.body.appendChild(overlay);
       return overlay;

package/build/StateUtil.js

@@ -24,7 +24,7 @@ var TMODEL_REF_KEY = "__targetjsTModelRef";
  * These fields are reconstructed separately or must be connected to the
  * current DOM rather than copied from the old tree.
  */
-var EXCLUDED_RUNTIME_FIELDS = new Set(["_state", "targets", "targetDefinitions", "restoringRuntime", "restoredUsesExistingDom", "type", "oid", "oidNum", "originalId", "parent", "allChildrenList", "allChildrenMap", "$dom", "viewport", "visibilityStatus", "currentStatus", "dirtyLayout", "originWindowEpoch", "hasDomNow", "isNowVisible", "domHeightTimestamp", "domWidthTimestamp", "lastBatch", "waapiBatch", "finalKeyframe", "finalRawFrame"]);
+var EXCLUDED_RUNTIME_FIELDS = new Set(["_state", "targets", "targetDefinitions", "restoringRuntime", "restoredUsesExistingDom", "particleRenderer", "particleRuntime", "particleSyncPromise", "layoutCompleteWaiters", "isPrevTargetUpdated", "type", "oid", "oidNum", "originalId", "parent", "allChildrenList", "allChildrenMap", "$dom", "viewport", "visibilityStatus", "currentStatus", "dirtyLayout", "originWindowEpoch", "hasDomNow", "isNowVisible", "domHeightTimestamp", "domWidthTimestamp", "lastBatch", "waapiBatch", "finalKeyframe", "finalRawFrame"]);
 var CHILD_OPERATION_FIELDS = ["addedChildren", "deletedChildren", "movedChildren"];
 var RUNTIME_TIMESTAMP_FIELDS = new Set(["lastUpdate", "scheduleTimeStamp", "completeTime", "creationTime", "activationTime", "catchupAt", "startTime", "lastResizeHandledTime"]);
 var TARGET_RUNTIME_FIELDS = ["originalTargetName", "originalTModel", "invokerTargetName", "invokerTModel", "fetchAction", "childAction", "addChildAction"];