targetj 1.0.241 → 1.0.243

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/TModelManager.js

@@ -51,6 +51,7 @@ var TModelManager = /*#__PURE__*/function () {
       this.preservedDomMap = {};
       this.targetMethodMap = {};
       this.noDomMap = {};
+      this.domPolicyMap = new Map();
     }
   }, {
     key: "clearFrameLists",
@@ -76,6 +77,7 @@ var TModelManager = /*#__PURE__*/function () {
       this.preservedDomMap = {};
       this.clearFrameLists();
       this.deleteDoms();
+      this.domPolicyMap.clear();
     }
   }, {
     key: "analyze",
@@ -166,15 +168,13 @@ var TModelManager = /*#__PURE__*/function () {
               activated.push(tmodel);
             }
           }
-          if (visible || tmodel.requiresDom()) {
-            if (tmodel.canHaveDom() && !tmodel.hasDom() && tmodel.isIncluded() && !this.noDomMap[tmodel.oid]) {
-              var _tmodel$getDomHolder, _tmodel$getDomParent;
-              if ((_tmodel$getDomHolder = tmodel.getDomHolder()) !== null && _tmodel$getDomHolder !== void 0 && _tmodel$getDomHolder.exists() || this.noDomMap[(_tmodel$getDomParent = tmodel.getDomParent()) === null || _tmodel$getDomParent === void 0 ? void 0 : _tmodel$getDomParent.oid]) {
-                this.lists.noDom.push(tmodel);
-                this.noDomMap[tmodel.oid] = true;
-              } else {
-                tmodel.markLayoutDirty('noDomHolder');
-              }
+          if (this.shouldCreateDom(tmodel, visible) && !this.noDomMap[tmodel.oid]) {
+            var _tmodel$getDomHolder, _tmodel$getDomParent;
+            if ((_tmodel$getDomHolder = tmodel.getDomHolder()) !== null && _tmodel$getDomHolder !== void 0 && _tmodel$getDomHolder.exists() || this.noDomMap[(_tmodel$getDomParent = tmodel.getDomParent()) === null || _tmodel$getDomParent === void 0 ? void 0 : _tmodel$getDomParent.oid]) {
+              this.lists.noDom.push(tmodel);
+              this.noDomMap[tmodel.oid] = true;
+            } else {
+              tmodel.markLayoutDirty('noDomHolder');
             }
           }
         }
@@ -203,6 +203,9 @@ var TModelManager = /*#__PURE__*/function () {
       if (!tmodel.isIncluded()) {
         return false;
       }
+      if (this.getDomPolicy(tmodel) === "keep") {
+        return true;
+      }
       if (!tmodel.isVisible() && TUtil.isDefined(tmodel.targets.isVisible)) {
         return false;
       }
@@ -218,6 +221,38 @@ var TModelManager = /*#__PURE__*/function () {
       }
       return false;
     }
+  }, {
+    key: "shouldCreateDom",
+    value: function shouldCreateDom(tmodel, visible) {
+      if (!tmodel.canHaveDom() || !tmodel.isIncluded() || tmodel.hasDom()) {
+        return false;
+      }
+      if (visible) {
+        return true;
+      }
+      if (tmodel.requiresDom()) {
+        return true;
+      }
+      return this.getDomPolicy(tmodel) === "keep";
+    }
+  }, {
+    key: "getDomPolicy",
+    value: function getDomPolicy(tmodel) {
+      if (this.domPolicyMap.has(tmodel.oid)) {
+        return this.domPolicyMap.get(tmodel.oid);
+      }
+      var current = tmodel;
+      while (current && current !== tRoot()) {
+        var policy = current.val("domPolicy");
+        if (TUtil.isDefined(policy)) {
+          this.domPolicyMap.set(tmodel.oid, policy);
+          return policy;
+        }
+        current = current.parent;
+      }
+      this.domPolicyMap.set(tmodel.oid, "auto");
+      return "auto";
+    }
   }, {
     key: "isBracketVisible",
     value: function isBracketVisible(tmodel) {

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/TargetManager.js

@@ -230,10 +230,14 @@ var TargetManager = /*#__PURE__*/function () {
       var valuePointer = tmodel.getValueListPointer(key);
       var cycle = tmodel.getTargetCycle(key);
       var cycles = tmodel.getTargetCycles(key);
+      var step = tmodel.getTargetStep(key);
+      var steps = tmodel.getTargetSteps(key);
       if (Array.isArray(targetValue.valueList) && valuePointer < targetValue.valueList.length) {
         return 'updating';
       } else if (tmodel.isTargetImperative(key) && cycle < cycles - 1) {
         return 'updating';
+      } else if (step < steps) {
+        return 'updating';
       } else if (tmodel.isTargetInLoop(key) || cycle < cycles - 1) {
         return 'active';
       } else {

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');