targetj 1.0.241 → 1.0.242

package/build/TModel.js

@@ -66,17 +66,18 @@ var 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();
-      var x = -this.getScrollLeft(),
-        y = -this.getScrollTop();
+      var scrollTop = this.getScrollTop();
+      var scrollLeft = this.getScrollLeft();
+      var x = -scrollLeft,
+        y = -scrollTop;
       this.viewport.xNext = x;
       this.viewport.xNorth = x;
       this.viewport.xEast = x;
       this.viewport.xSouth = x;
       this.viewport.xWest = x;
-      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.scrollLeft = x;
+      this.viewport.scrollTop = y;
       this.viewport.absX = this.absX;
       this.viewport.absY = this.absY;
       this.viewport.xOverflowReset = x;
@@ -87,22 +88,16 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
       this.viewport.yEast = y;
       this.viewport.ySouth = y;
       this.calcContentWidthHeight();
-      this.viewport.container = this;
+      this.viewport.setContainer(this);
       return this.viewport;
     }
   }, {
     key: "calcContentWidthHeight",
     value: function calcContentWidthHeight() {
-      var contentHeight = this.viewport.ySouth - this.viewport.yNorth;
-      var contentWidth = this.viewport.xEast - this.viewport.xWest;
-      var topBaseHeight = this.viewport.yEast - this.viewport.yNorth;
-      var bottomBaseWidth = this.viewport.xSouth - this.viewport.xWest;
-      if (contentHeight !== this.contentHeight || this.contentWidth !== contentWidth || this.topBaseHeight !== topBaseHeight || this.bottomBaseWidth !== bottomBaseWidth) {
-        this.contentHeight = contentHeight;
-        this.topBaseHeight = topBaseHeight;
-        this.bottomBaseWidth = bottomBaseWidth;
-        this.contentWidth = contentWidth;
-      }
+      this.contentHeight = this.viewport.ySouth - this.viewport.yNorth;
+      this.contentWidth = this.viewport.xEast - this.viewport.xWest;
+      this.topBaseHeight = this.viewport.yEast - this.viewport.yNorth;
+      this.bottomBaseWidth = this.viewport.xSouth - this.viewport.xWest;
     }
   }, {
     key: "adjustViewport",
@@ -499,8 +494,8 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
     value: function getParentValueAtMyIndex(targetName) {
       var parentValue = this.getParentValue(targetName);
       if (Array.isArray(parentValue)) {
-        var _this$getParent3;
-        var index = (_this$getParent3 = this.getParent()) === null || _this$getParent3 === void 0 ? void 0 : _this$getParent3.getChildIndex(this);
+        var _this$getParent;
+        var index = (_this$getParent = this.getParent()) === null || _this$getParent === void 0 ? void 0 : _this$getParent.getChildIndex(this);
         if (typeof index === 'number') {
           return parentValue[index];
         }
@@ -572,8 +567,9 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
       return domParent ? domParent.$dom : null;
     }
   }, {
-    key: "bug",
-    value: function bug() {
+    key: "debug",
+    value: function debug() {
+      var _this6 = this;
       return [{
         visible: this.isVisible()
       }, {
@@ -588,6 +584,8 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
         width: this.getWidth()
       }, {
         height: this.getHeight()
+      }, {
+        tmodelComplete: TargetUtil.isTModelComplete(this)
       }, {
         targets: this.originalTargetNames
       }, {
@@ -604,6 +602,14 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
         styleTargetMap: _toConsumableArray(this.styleTargetMap ? _toConsumableArray(this.styleTargetMap.keys()) : [])
       }, {
         passiveTargetList: this.passiveTargetList
+      }, {
+        incompleteTargets: Object.keys(this.targetValues).filter(function (key) {
+          var _this6$targetValues$k;
+          return ((_this6$targetValues$k = _this6.targetValues[key]) === null || _this6$targetValues$k === void 0 ? void 0 : _this6$targetValues$k.status) !== 'complete';
+        }).map(function (key) {
+          var _this6$targetValues$k2;
+          return "".concat(key, ":").concat((_this6$targetValues$k2 = _this6.targetValues[key]) === null || _this6$targetValues$k2 === void 0 ? void 0 : _this6$targetValues$k2.status);
+        })
       }, {
         updatingChildren: this.updatingChildrenMap ? _toConsumableArray(this.updatingChildrenMap.keys()) : []
       }, {
@@ -641,10 +647,11 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "managesOwnScroll",
     value: function managesOwnScroll() {
+      var _this$$dom$getScrollT, _this$$dom, _this$$dom$getScrollL, _this$$dom2;
       if (TUtil.isDefined(this.val('managesOwnScroll'))) {
         return !!this.val('managesOwnScroll');
       }
-      return !!this.allTargetMap['onScroll'] || !!this.allTargetMap['onScrollLeft'] || !!this.allTargetMap['onScrollTop'] || !!this.allTargetMap['onWindowScroll'];
+      return !!this.allTargetMap['onScroll'] || !!this.allTargetMap['onScrollLeft'] || !!this.allTargetMap['onScrollTop'] || !!this.allTargetMap['onWindowScroll'] || ((_this$$dom$getScrollT = (_this$$dom = this.$dom) === null || _this$$dom === void 0 ? void 0 : _this$$dom.getScrollTop()) !== null && _this$$dom$getScrollT !== void 0 ? _this$$dom$getScrollT : 0) !== 0 || ((_this$$dom$getScrollL = (_this$$dom2 = this.$dom) === null || _this$$dom2 === void 0 ? void 0 : _this$$dom2.getScrollLeft()) !== null && _this$$dom$getScrollL !== void 0 ? _this$$dom$getScrollL : 0) !== 0;
     }
   }, {
     key: "calcVisibility",
@@ -740,11 +747,40 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
       var _this$val5;
       return (_this$val5 = this.val('topBaseHeight')) !== null && _this$val5 !== void 0 ? _this$val5 : 0;
     }
+  }, {
+    key: "getLayoutHeight",
+    value: function getLayoutHeight() {
+      var height = this.getHeight();
+      if (this.usesContentBoxSizing()) {
+        height += this.getPaddingTop() + this.getPaddingBottom();
+      }
+      return height;
+    }
+  }, {
+    key: "getLayoutWidth",
+    value: function getLayoutWidth() {
+      var width = this.getWidth();
+      if (this.usesContentBoxSizing()) {
+        width += this.getPaddingLeft() + this.getPaddingRight();
+      }
+      return width;
+    }
+  }, {
+    key: "usesContentBoxSizing",
+    value: function usesContentBoxSizing() {
+      return this.getBoxSizing() !== "border-box";
+    }
+  }, {
+    key: "getBoxSizing",
+    value: function getBoxSizing() {
+      var _ref5, _ref6, _this$val6;
+      return (_ref5 = (_ref6 = (_this$val6 = this.val("boxSizing")) !== null && _this$val6 !== void 0 ? _this$val6 : this.val("box-sizing")) !== null && _ref6 !== void 0 ? _ref6 : this.getParentValue("boxSizing")) !== null && _ref5 !== void 0 ? _ref5 : "content-box";
+    }
   }, {
     key: "getContainerOverflowMode",
     value: function getContainerOverflowMode() {
-      var _this$val6;
-      return (_this$val6 = this.val('containerOverflowMode')) !== null && _this$val6 !== void 0 ? _this$val6 : 'auto';
+      var _this$val7;
+      return (_this$val7 = this.val('containerOverflowMode')) !== null && _this$val7 !== void 0 ? _this$val7 : 'auto';
     }
   }, {
     key: "getItemOverflowMode",
@@ -851,8 +887,8 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "getBaseElement",
     value: function getBaseElement() {
-      var _this$$dom;
-      return this.val('baseElement') || this.val('element') || ((_this$$dom = this.$dom) === null || _this$$dom === void 0 || (_this$$dom = _this$$dom.element) === null || _this$$dom === void 0 || (_this$$dom = _this$$dom.tagName) === null || _this$$dom === void 0 ? void 0 : _this$$dom.toLowerCase());
+      var _this$$dom3;
+      return this.val('baseElement') || this.val('element') || ((_this$$dom3 = this.$dom) === null || _this$$dom3 === void 0 || (_this$$dom3 = _this$$dom3.element) === null || _this$$dom3 === void 0 || (_this$$dom3 = _this$$dom3.tagName) === null || _this$$dom3 === void 0 ? void 0 : _this$$dom3.toLowerCase());
     }
   }, {
     key: "getOpacity",
@@ -947,8 +983,8 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "getMeasuringScale",
     value: function getMeasuringScale() {
-      var _this$val7;
-      return (_this$val7 = this.val('measuringScale')) !== null && _this$val7 !== void 0 ? _this$val7 : 1;
+      var _this$val8;
+      return (_this$val8 = this.val('measuringScale')) !== null && _this$val8 !== void 0 ? _this$val8 : 1;
     }
   }, {
     key: "getZIndex",
@@ -956,26 +992,54 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
       return this.val('zIndex');
     }
   }, {
-    key: "getTopMargin",
-    value: function getTopMargin() {
-      return this.val('topMargin');
+    key: "getMarginTop",
+    value: function getMarginTop() {
+      var _ref7, _this$val9;
+      return (_ref7 = (_this$val9 = this.val("marginTop")) !== null && _this$val9 !== void 0 ? _this$val9 : this.val("topMargin")) !== null && _ref7 !== void 0 ? _ref7 : TModelUtil.getMarginValue(this, "top");
+    }
+  }, {
+    key: "getMarginLeft",
+    value: function getMarginLeft() {
+      var _ref8, _this$val10;
+      return (_ref8 = (_this$val10 = this.val("marginLeft")) !== null && _this$val10 !== void 0 ? _this$val10 : this.val("leftMargin")) !== null && _ref8 !== void 0 ? _ref8 : TModelUtil.getMarginValue(this, "left");
+    }
+  }, {
+    key: "getMarginRight",
+    value: function getMarginRight() {
+      var _ref9, _this$val11, _this$getParentValue;
+      var margin = (_ref9 = (_this$val11 = this.val("marginRight")) !== null && _this$val11 !== void 0 ? _this$val11 : this.val("rightMargin")) !== null && _ref9 !== void 0 ? _ref9 : TModelUtil.getMarginValue(this, "right");
+      return margin + ((_this$getParentValue = this.getParentValue("gap")) !== null && _this$getParentValue !== void 0 ? _this$getParentValue : 0);
+    }
+  }, {
+    key: "getMarginBottom",
+    value: function getMarginBottom() {
+      var _ref10, _this$val12, _this$getParentValue2;
+      var margin = (_ref10 = (_this$val12 = this.val("marginBottom")) !== null && _this$val12 !== void 0 ? _this$val12 : this.val("bottomMargin")) !== null && _ref10 !== void 0 ? _ref10 : TModelUtil.getMarginValue(this, "bottom");
+      return margin + ((_this$getParentValue2 = this.getParentValue("gap")) !== null && _this$getParentValue2 !== void 0 ? _this$getParentValue2 : 0);
+    }
+  }, {
+    key: "getPaddingTop",
+    value: function getPaddingTop() {
+      var _ref11, _this$val13;
+      return (_ref11 = (_this$val13 = this.val("paddingTop")) !== null && _this$val13 !== void 0 ? _this$val13 : this.val("topPadding")) !== null && _ref11 !== void 0 ? _ref11 : TModelUtil.getPaddingValue(this, "top");
     }
   }, {
-    key: "getLeftMargin",
-    value: function getLeftMargin() {
-      return this.val('leftMargin');
+    key: "getPaddingLeft",
+    value: function getPaddingLeft() {
+      var _ref12, _this$val14;
+      return (_ref12 = (_this$val14 = this.val("paddingLeft")) !== null && _this$val14 !== void 0 ? _this$val14 : this.val("leftPadding")) !== null && _ref12 !== void 0 ? _ref12 : TModelUtil.getPaddingValue(this, "left");
     }
   }, {
-    key: "getRightMargin",
-    value: function getRightMargin() {
-      var _this$getParentValue;
-      return this.val('rightMargin') + ((_this$getParentValue = this.getParentValue('gap')) !== null && _this$getParentValue !== void 0 ? _this$getParentValue : 0);
+    key: "getPaddingRight",
+    value: function getPaddingRight() {
+      var _ref13, _this$val15;
+      return (_ref13 = (_this$val15 = this.val("paddingRight")) !== null && _this$val15 !== void 0 ? _this$val15 : this.val("rightPadding")) !== null && _ref13 !== void 0 ? _ref13 : TModelUtil.getPaddingValue(this, "right");
     }
   }, {
-    key: "getBottomMargin",
-    value: function getBottomMargin() {
-      var _this$getParentValue2;
-      return this.val('bottomMargin') + ((_this$getParentValue2 = this.getParentValue('gap')) !== null && _this$getParentValue2 !== void 0 ? _this$getParentValue2 : 0);
+    key: "getPaddingBottom",
+    value: function getPaddingBottom() {
+      var _ref14, _this$val16;
+      return (_ref14 = (_this$val16 = this.val("paddingBottom")) !== null && _this$val16 !== void 0 ? _this$val16 : this.val("bottomPadding")) !== null && _ref14 !== void 0 ? _ref14 : TModelUtil.getPaddingValue(this, "bottom");
     }
   }, {
     key: "getWidth",
@@ -1042,9 +1106,9 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "isFormControl",
     value: function isFormControl() {
-      var _this$$dom2;
+      var _this$$dom4;
       var t = this.getBaseElement();
-      return t === 'input' || t === 'select' || t === 'textarea' || ((_this$$dom2 = this.$dom) === null || _this$$dom2 === void 0 || (_this$$dom2 = _this$$dom2.element) === null || _this$$dom2 === void 0 ? void 0 : _this$$dom2.isContentEditable);
+      return t === 'input' || t === 'select' || t === 'textarea' || ((_this$$dom4 = this.$dom) === null || _this$$dom4 === void 0 || (_this$$dom4 = _this$$dom4.element) === null || _this$$dom4 === void 0 ? void 0 : _this$$dom4.isContentEditable);
     }
   }, {
     key: "isOverflowHidden",

package/build/TModelUtil.js

@@ -1,11 +1,11 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -28,6 +28,78 @@ var TModelUtil = /*#__PURE__*/function () {
     _classCallCheck(this, TModelUtil);
   }
   return _createClass(TModelUtil, null, [{
+    key: "getMarginValue",
+    value: function getMarginValue(tmodel, side) {
+      var margin = tmodel.val("margin");
+      if (typeof margin === "number") {
+        return margin;
+      }
+      if (Array.isArray(margin)) {
+        if (margin.length === 2) {
+          var _margin = _slicedToArray(margin, 2),
+            vertical = _margin[0],
+            horizontal = _margin[1];
+          return side === "top" || side === "bottom" ? vertical : horizontal;
+        }
+        if (margin.length === 4) {
+          var _margin2 = _slicedToArray(margin, 4),
+            top = _margin2[0],
+            right = _margin2[1],
+            bottom = _margin2[2],
+            left = _margin2[3];
+          if (side === "top") {
+            return top;
+          }
+          if (side === "right") {
+            return right;
+          }
+          if (side === "bottom") {
+            return bottom;
+          }
+          if (side === "left") {
+            return left;
+          }
+        }
+      }
+      return 0;
+    }
+  }, {
+    key: "getPaddingValue",
+    value: function getPaddingValue(tmodel, side) {
+      var padding = tmodel.val("padding");
+      if (typeof padding === "number") {
+        return padding;
+      }
+      if (Array.isArray(padding)) {
+        if (padding.length === 2) {
+          var _padding = _slicedToArray(padding, 2),
+            vertical = _padding[0],
+            horizontal = _padding[1];
+          return side === "top" || side === "bottom" ? vertical : horizontal;
+        }
+        if (padding.length === 4) {
+          var _padding2 = _slicedToArray(padding, 4),
+            top = _padding2[0],
+            right = _padding2[1],
+            bottom = _padding2[2],
+            left = _padding2[3];
+          if (side === "top") {
+            return top;
+          }
+          if (side === "right") {
+            return right;
+          }
+          if (side === "bottom") {
+            return bottom;
+          }
+          if (side === "left") {
+            return left;
+          }
+        }
+      }
+      return 0;
+    }
+  }, {
     key: "shouldMeasureHeightFromDom",
     value: function shouldMeasureHeightFromDom(tmodel) {
       if (tmodel.val('heightFromDom') === false) {

package/build/TargetData.js

@@ -29,10 +29,6 @@ var TargetData = /*#__PURE__*/function () {
         y: 0,
         width: 0,
         height: 0,
-        leftMargin: 0,
-        rightMargin: 0,
-        topMargin: 0,
-        bottomMargin: 0,
         opacity: 1,
         scale: 1,
         scrollLeft: 0,
@@ -768,6 +764,10 @@ _defineProperty(TargetData, "attributesToTargets", {
   paddingright: 'paddingRight',
   paddingtop: 'paddingTop',
   paddingbottom: 'paddingBottom',
+  marginleft: 'marginLeft',
+  marginright: 'marginRight',
+  margintop: 'marginTop',
+  marginbottom: 'marginBottom',
   userselect: 'userSelect',
   arialabel: 'ariaLabel',
   ariacurrent: 'ariaCurrent',
@@ -911,7 +911,7 @@ _defineProperty(TargetData, "allEventMap", {
 });
 _defineProperty(TargetData, "excludedTargetKeys", new Set(['originalTargetName', 'originalTModel', 'activateNextTarget', 'invokerTarget', 'invokerTModel', 'active', 'addChildAction', 'childAction', 'fetchAction']));
 _defineProperty(TargetData, "lifecycleCallbackSet", new Set(['onComplete', 'onValueChange', 'onImperativeEnd', 'onImperativeStep', 'onStepsEnd', 'onSuccess', 'onError']));
-_defineProperty(TargetData, "lifecycleCoreSet", new Set(['value', 'steps', 'cycles', 'enabledOn', 'loop', 'interval']));
+_defineProperty(TargetData, "lifecycleCoreSet", new Set(['value', 'steps', 'cycles', 'enabledOn', 'pauseOn', 'loop', 'interval']));
 _defineProperty(TargetData, "lifecycleMethodSet", new Set([].concat(_toConsumableArray(_TargetData.lifecycleCallbackSet), _toConsumableArray(_TargetData.lifecycleCoreSet))));
 _defineProperty(TargetData, "lifecyclePatterns", {
   step: /^on[A-Za-z]+Step$/,

package/build/TargetExecutor.js

@@ -174,7 +174,7 @@ var TargetExecutor = /*#__PURE__*/function () {
       var newStatus = TargetExecutor.calculateTargetStatus(tmodel, targetValue, key);
       tmodel.setTargetStatus(key, newStatus);
       if (!TargetData.ignoreRerun[key] && tmodel.shouldScheduleRun(key)) {
-        getRunScheduler().schedule(1, 'updateTarget2-' + tmodel.oid);
+        getRunScheduler().schedule(1, 'updateTarget2-' + tmodel.oid + "-" + key);
       }
     }
   }, {

package/build/TargetUtil.js

@@ -298,7 +298,8 @@ var TargetUtil = /*#__PURE__*/function () {
     key: "cleanupTarget",
     value: function cleanupTarget(tmodel, key) {
       TargetUtil.cleanupVisibleComplete(tmodel, key);
-      if (tmodel.isTargetComplete(key) || !TargetUtil.isTargetFullyCompleted(tmodel, key)) {
+      var cannotBeCleaned = tmodel.isTargetComplete(key) || !TargetUtil.isTargetFullyCompleted(tmodel, key);
+      if (cannotBeCleaned) {
         return false;
       }
       tmodel.setTargetComplete(key);
@@ -471,7 +472,7 @@ var TargetUtil = /*#__PURE__*/function () {
         }
         if (tmodel.isTargetTreeComplete(targetName) !== true) {
           //const activeChildrenList = [ ...TargetUtil.getActiveChildren(tmodel, tmodel.targets[targetName].completionScope).values() ];
-          //return  tmodel.oid + "." + targetName + " ==> " + tmodel.getTargetStatus(targetName) + ", " + tmodel.isTargetTreeComplete(targetName) + ":: " + activeChildrenList.map(t => t.oid + ':' + t.hasAnyUpdates()) + ", " + [ ...TargetUtil.getUpdatingChildren(tmodel, targetName, tmodel.targets[targetName].completionScope).keys() ]; 
+          //return  tmodel.oid + "." + targetName + " ==> " + tmodel.getTargetStatus(targetName) + ", " + TargetUtil.isTargetTreeComplete(tmodel, targetName) + ":: " + activeChildrenList.map(t => t.oid + ':' + t.hasAnyUpdates()) + ", " + [ ...TargetUtil.getUpdatingChildren(tmodel, targetName, tmodel.targets[targetName].completionScope).keys() ]; 
           return false;
         }
       }

package/build/Viewport.js

@@ -32,6 +32,11 @@ var Viewport = /*#__PURE__*/function () {
     this.time = 0;
   }
   return _createClass(Viewport, [{
+    key: "setContainer",
+    value: function setContainer(container) {
+      this.container = container;
+    }
+  }, {
     key: "setCurrentChild",
     value: function setCurrentChild(child) {
       this.currentChild = child;
@@ -41,8 +46,8 @@ var Viewport = /*#__PURE__*/function () {
     value: function setLocation() {
       var child = this.currentChild;
       if (!child.targets['excludeXYCalc']) {
-        child.x = this.xNext + child.getLeftMargin();
-        child.y = this.yNext + child.getTopMargin();
+        child.x = this.xNext + child.getMarginLeft() + this.container.getPaddingLeft();
+        child.y = this.yNext + child.getMarginTop() + this.container.getPaddingTop();
       }
     }
   }, {
@@ -58,8 +63,9 @@ var Viewport = /*#__PURE__*/function () {
   }, {
     key: "checkChildOverflow",
     value: function checkChildOverflow() {
-      var childWidth = this.currentChild.getMinWidth();
-      return this.currentChild.x + childWidth + this.currentChild.getLeftMargin() > this.xOverflowLimit;
+      var child = this.currentChild;
+      var childWidth = child.getMinWidth();
+      return this.xNext + child.getMarginLeft() + childWidth + child.getMarginRight() > this.xOverflowLimit;
     }
   }, {
     key: "overflow",
@@ -72,7 +78,7 @@ var Viewport = /*#__PURE__*/function () {
     value: function appendNewLine() {
       var child = this.currentChild;
       var scale = child.getMeasuringScale();
-      var maxHeight = child.getHeight() * scale + this.currentChild.getTopMargin() + this.currentChild.getBottomMargin();
+      var maxHeight = child.getHeight() * scale + this.currentChild.getMarginTop() + this.currentChild.getMarginBottom();
       this.xNext = this.scrollLeft - this.xOverflowReset;
       var ySouth = this.yNext + maxHeight + child.val('appendNewLine');
       this.yEast = this.yNext;
@@ -93,17 +99,17 @@ var Viewport = /*#__PURE__*/function () {
       if (space === 'layout') {
         x = child.x;
         y = child.y;
-        left = x - child.getLeftMargin();
-        right = x + width + child.getRightMargin();
-        top = y - child.getTopMargin();
-        bottom = y + height + child.getBottomMargin();
+        left = x - child.getMarginLeft();
+        right = x + width + child.getMarginRight();
+        top = y - child.getMarginTop();
+        bottom = y + height + child.getMarginBottom();
       } else if (space === 'absolute') {
         x = child.absX - this.absX;
         y = child.absY - this.absY;
         left = x;
-        right = x + width + child.getRightMargin();
+        right = x + width + child.getMarginRight();
         top = y;
-        bottom = y + height + child.getBottomMargin();
+        bottom = y + height + child.getMarginBottom();
       } else {
         x = child.getX();
         y = child.getY();
@@ -125,8 +131,8 @@ var Viewport = /*#__PURE__*/function () {
       var child = this.currentChild;
       var scale = child.getMeasuringScale();
       var topBaseHeight = child.getTopBaseHeight() * scale;
-      var maxHeight = child.getHeight() * scale + this.currentChild.getTopMargin() + this.currentChild.getBottomMargin();
-      var maxWidth = child.getItemOverflowMode() === 'always' && TModelUtil.isWidthDefined(this.container) ? this.container.getWidth() : child.getBaseWidth() * scale + this.currentChild.getLeftMargin() + this.currentChild.getRightMargin();
+      var maxHeight = child.getLayoutHeight() * scale + this.currentChild.getMarginTop() + this.currentChild.getMarginBottom();
+      var maxWidth = child.getItemOverflowMode() === 'always' && TModelUtil.isWidthDefined(this.container) ? this.container.getWidth() : child.getBaseWidth() * scale + this.currentChild.getMarginLeft() + this.currentChild.getMarginRight();
       if (child.type !== 'BI' && this.container.type === 'BI') {
         var layout = this.computeBoundary(child, 'layout');
         var animated = this.computeBoundary(child, 'animated');

package/build/VisibilityUtil.js

@@ -31,56 +31,53 @@ var VisibilityUtil = /*#__PURE__*/function () {
       var width = TUtil.isDefined(child.getWidth()) ? scale * child.getWidth() : 0;
       var height = TUtil.isDefined(child.getHeight()) ? scale * child.getHeight() : 0;
       var visibilityMargin = 20;
-      if (!child.visibilityStatus) {
-        child.visibilityStatus = {};
-      }
-      var status = child.visibilityStatus;
-      var clip = VisibilityUtil.getVisibilityClipRect(child.getParent());
-      if (clip) {
-        status.right = x - visibilityMargin <= clip.r;
-        status.left = x + width + visibilityMargin >= clip.x;
-        status.bottom = y - child.getTopMargin() - visibilityMargin <= clip.b;
-        status.top = y + height + child.getBottomMargin() + visibilityMargin >= clip.y;
-        status.clipX = clip.x;
-        status.clipY = clip.y;
-        status.clipR = clip.r;
-        status.clipB = clip.b;
-        status.parent = clip.source;
-        status.isVisible = status.left && status.right && status.top && status.bottom;
-      } else {
-        status.right = true;
-        status.left = true;
-        status.bottom = true;
-        status.top = true;
-        status.clipX = undefined;
-        status.clipY = undefined;
-        status.clipR = undefined;
-        status.clipB = undefined;
-        status.parent = "none";
-        status.isVisible = true;
-      }
+      var rect = {
+        x: x - visibilityMargin,
+        y: y - visibilityMargin,
+        r: x + width + visibilityMargin,
+        b: y + height + visibilityMargin
+      };
+      var status = VisibilityUtil.checkVisibility(child, rect);
       status.x = x;
       status.y = y;
       status.width = width;
       status.height = height;
+      child.visibilityStatus = status;
       child.actualValues.isVisible = status.isVisible;
       return status.isVisible;
     }
   }, {
-    key: "getVisibilityClipRect",
-    value: function getVisibilityClipRect(container) {
-      var rect = VisibilityUtil.getScreenViewportRect();
-      while (container && container !== tRoot()) {
-        if (VisibilityUtil.shouldClipByAncestor(container)) {
-          var ancestorRect = VisibilityUtil.getAncestorViewportRect(container);
-          rect = rect && !container.allTargetMap['onWindowScroll'] ? VisibilityUtil.intersectVisibilityRects(rect, ancestorRect) : ancestorRect;
-          if (rect.r <= rect.x || rect.b <= rect.y) {
-            break;
+    key: "checkVisibility",
+    value: function checkVisibility(tmodel, rect) {
+      while (tmodel) {
+        var parent = tmodel.getRealParent();
+        if (!parent || parent === tRoot()) {
+          break;
+        }
+        if (VisibilityUtil.shouldClipByAncestor(parent)) {
+          var _clip = VisibilityUtil.getParentClip(parent);
+          var _isVisible = VisibilityUtil.rectsOverlap(rect, _clip);
+          if (!_isVisible) {
+            return {
+              clip: _clip,
+              isVisible: false
+            };
           }
+          rect = VisibilityUtil.intersectRects(parent, rect, _clip);
         }
-        container = container.getRealParent();
+        tmodel = parent;
+      }
+      var clip = VisibilityUtil.getScreenViewportRect();
+      var isVisible = VisibilityUtil.rectsOverlap(rect, clip);
+      if (!isVisible) {
+        return {
+          clip: clip,
+          isVisible: false
+        };
       }
-      return rect;
+      return {
+        isVisible: true
+      };
     }
   }, {
     key: "getScreenViewportRect",
@@ -96,30 +93,41 @@ var VisibilityUtil = /*#__PURE__*/function () {
   }, {
     key: "shouldClipByAncestor",
     value: function shouldClipByAncestor(ancestor) {
-      return ancestor.managesOwnScroll();
+      var overflow = ancestor.val("overflow");
+      return ancestor.managesOwnScroll() || overflow === "hidden" || overflow === "auto" || overflow === "scroll" || overflow === "clip";
     }
   }, {
-    key: "getAncestorViewportRect",
-    value: function getAncestorViewportRect(ancestor) {
-      var _ancestor$$dom, _ancestor$$dom2;
-      var domScrollLeft = ((_ancestor$$dom = ancestor.$dom) === null || _ancestor$$dom === void 0 ? void 0 : _ancestor$$dom.getScrollLeft()) || 0;
-      var domScrollTop = ((_ancestor$$dom2 = ancestor.$dom) === null || _ancestor$$dom2 === void 0 ? void 0 : _ancestor$$dom2.getScrollTop()) || 0;
+    key: "getParentClip",
+    value: function getParentClip(parent) {
+      var _parent$$dom, _parent$$dom2;
+      var domScrollLeft = ((_parent$$dom = parent.$dom) === null || _parent$$dom === void 0 ? void 0 : _parent$$dom.getScrollLeft()) || 0;
+      var domScrollTop = ((_parent$$dom2 = parent.$dom) === null || _parent$$dom2 === void 0 ? void 0 : _parent$$dom2.getScrollTop()) || 0;
+      var height = parent.getHeight();
+      var width = parent.getWidth();
       return {
-        x: ancestor.absX + domScrollLeft,
-        y: ancestor.absY + domScrollTop,
-        r: ancestor.absX + domScrollLeft + ancestor.getWidth(),
-        b: ancestor.absY + domScrollTop + ancestor.getHeight(),
-        source: ancestor
+        x: parent.absX + domScrollLeft,
+        y: parent.absY + domScrollTop,
+        r: parent.absX + width + domScrollLeft,
+        b: parent.absY + height + domScrollTop,
+        source: parent
       };
     }
   }, {
-    key: "intersectVisibilityRects",
-    value: function intersectVisibilityRects(a, b) {
+    key: "rectsOverlap",
+    value: function rectsOverlap(a, b) {
+      return a.x <= b.r && a.r >= b.x && a.y <= b.b && a.b >= b.y;
+    }
+  }, {
+    key: "intersectRects",
+    value: function intersectRects(parent, a, b) {
+      var _parent$$dom3, _parent$$dom4;
+      var domScrollLeft = ((_parent$$dom3 = parent.$dom) === null || _parent$$dom3 === void 0 ? void 0 : _parent$$dom3.getScrollLeft()) || 0;
+      var domScrollTop = ((_parent$$dom4 = parent.$dom) === null || _parent$$dom4 === void 0 ? void 0 : _parent$$dom4.getScrollTop()) || 0;
       return {
-        x: Math.max(a.x, b.x),
-        y: Math.max(a.y, b.y),
-        r: Math.min(a.r, b.r),
-        b: Math.min(a.b, b.b),
+        x: Math.max(a.x - domScrollLeft, b.x - domScrollLeft),
+        y: Math.max(a.y - domScrollTop, b.y - domScrollTop),
+        r: Math.min(a.r - domScrollLeft, b.r - domScrollLeft),
+        b: Math.min(a.b - domScrollTop, b.b - domScrollTop),
         source: b.source
       };
     }