targetj 1.1.4 → 1.1.5

package/build/BaseModel.js

@@ -434,7 +434,7 @@ var BaseModel = /*#__PURE__*/function () {
             this.calcAbsolutePosition(this.getX(), this.getY());
           }
         } else if (key === 'width' || key === 'height') {
-          var dimension = Math.floor(key === 'width' ? this.getWidth() : this.getHeight());
+          var dimension = Math.floor(key === 'width' ? this.val('width') : this.val('height'));
           if (this.styleMap[key] === dimension) {
             styleFlag = false;
           }

package/build/TModel.js

@@ -22,7 +22,7 @@ function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? O
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 import { BaseModel } from "./BaseModel.js";
-import { App, getLocationManager, getRunScheduler, getEvents, getManager } from "./App.js";
+import { App, getLocationManager, getRunScheduler, getEvents, getManager, getScreenWidth, getScreenHeight } from "./App.js";
 import { Viewport } from "./Viewport.js";
 import { TUtil } from "./TUtil.js";
 import { VisibilityUtil } from "./VisibilityUtil.js";
@@ -907,7 +907,7 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
     key: "getLayoutHeight",
     value: function getLayoutHeight() {
       var height = this.getHeight();
-      if (this.usesContentBoxSizing()) {
+      if (!this.isDomIsland() && this.usesContentBoxSizing()) {
         height += this.getPaddingTop() + this.getPaddingBottom();
       }
       return height;
@@ -916,7 +916,7 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
     key: "getLayoutWidth",
     value: function getLayoutWidth() {
       var width = this.getWidth();
-      if (this.usesContentBoxSizing()) {
+      if (!this.isDomIsland() && this.usesContentBoxSizing()) {
         width += this.getPaddingLeft() + this.getPaddingRight();
       }
       return width;
@@ -1200,24 +1200,34 @@ var TModel = /*#__PURE__*/function (_BaseModel) {
   }, {
     key: "getWidth",
     value: function getWidth() {
-      if (TUtil.isDefined(this.targets.width) || TUtil.isDefined(this.targetValues.width)) {
-        return this.val("width");
+      if (this.isDomIsland() && this.domIslandSize) {
+        return this.domIslandSize.width;
       }
-      if (TUtil.isDefined(this.targets.dim) || TUtil.isDefined(this.targetValues.dim)) {
-        return this.val("dim");
+      var hasWidth = TUtil.isDefined(this.targets.width) || TUtil.isDefined(this.targetValues.width);
+      var hasDim = TUtil.isDefined(this.targets.dim) || TUtil.isDefined(this.targetValues.dim);
+      var value = this.val(!hasWidth && hasDim ? 'dim' : 'width');
+      if (typeof value !== 'string') {
+        return value;
       }
-      return this.val("width");
+      var parent = this.getRealParent();
+      var parentWidth = parent ? parent.getWidth() : getScreenWidth();
+      return TModelUtil.resolveDimension(value, parentWidth);
     }
   }, {
     key: "getHeight",
     value: function getHeight() {
-      if (TUtil.isDefined(this.targets.height) || TUtil.isDefined(this.targetValues.height)) {
-        return this.val("height");
+      if (this.isDomIsland() && this.domIslandSize) {
+        return this.domIslandSize.height;
       }
-      if (TUtil.isDefined(this.targets.dim) || TUtil.isDefined(this.targetValues.dim)) {
-        return this.val("dim");
+      var hasHeight = TUtil.isDefined(this.targets.height) || TUtil.isDefined(this.targetValues.height);
+      var hasDim = TUtil.isDefined(this.targets.dim) || TUtil.isDefined(this.targetValues.dim);
+      var value = this.val(!hasHeight && hasDim ? 'dim' : 'height');
+      if (typeof value !== 'string') {
+        return value;
       }
-      return this.val("height");
+      var parent = this.getRealParent();
+      var parentHeight = parent ? parent.getHeight() : getScreenHeight();
+      return TModelUtil.resolveDimension(value, parentHeight);
     }
   }, {
     key: "getScrollTop",

package/build/TModelUtil.js

@@ -548,27 +548,11 @@ var TModelUtil = /*#__PURE__*/function () {
             transformUpdate = true;
           }
         } else if (key === 'dim') {
-          var dim = Math.floor(tmodel.val('dim'));
-          if (tmodel.styleMap['height'] !== dim || tmodel.$dom.getStyleValue('height') !== dim) {
-            tmodel.styleMap['height'] = dim;
-            tmodel.$dom.height(dim);
-          }
-          if (tmodel.styleMap['width'] !== dim || tmodel.$dom.getStyleValue('width') !== dim) {
-            tmodel.styleMap['width'] = dim;
-            tmodel.$dom.width(dim);
-          }
-        } else if (key === 'width') {
-          var width = Math.floor(tmodel.getWidth());
-          if (tmodel.styleMap['width'] !== width || tmodel.$dom.getStyleValue('width') !== width) {
-            tmodel.styleMap['width'] = width;
-            tmodel.$dom.width(width);
-          }
-        } else if (key === 'height') {
-          var height = Math.floor(tmodel.getHeight());
-          if (tmodel.styleMap['height'] !== height || tmodel.$dom.getStyleValue('height') !== height) {
-            tmodel.styleMap['height'] = height;
-            tmodel.$dom.height(height);
-          }
+          var dim = tmodel.val('dim');
+          TModelUtil.applyDimensionStyle(tmodel, 'width', dim);
+          TModelUtil.applyDimensionStyle(tmodel, 'height', dim);
+        } else if (key === 'width' || key === 'height') {
+          TModelUtil.applyDimensionStyle(tmodel, key, tmodel.val(key));
         } else if (TargetData.styleWithUnitMap[key]) {
           if (TUtil.isDefined(tmodel.val(key)) && tmodel.styleMap[key] !== tmodel.val(key)) {
             tmodel.$dom.style(key, TUtil.isNumber(tmodel.val(key)) ? "".concat(tmodel.val(key), "px") : tmodel.val(key));
@@ -586,6 +570,58 @@ var TModelUtil = /*#__PURE__*/function () {
       }
       tmodel.styleTargetMap.clear();
     }
+  }, {
+    key: "applyDimensionStyle",
+    value: function applyDimensionStyle(tmodel, key, value) {
+      if (!TUtil.isDefined(value)) {
+        return;
+      }
+      var cssValue = typeof value === 'number' ? "".concat(Math.floor(value), "px") : value;
+      if (tmodel.styleMap[key] !== value || tmodel.$dom.style(key) !== cssValue) {
+        tmodel.styleMap[key] = value;
+        tmodel.$dom.style(key, cssValue);
+        if (tmodel.isDomIsland()) {
+          tmodel.originWindowEpoch = -1;
+          getRunScheduler().schedule(1, 'domIslandDimensionStyle');
+        }
+      }
+    }
+  }, {
+    key: "resolveDimension",
+    value: function resolveDimension(value, parentSize) {
+      if (typeof value !== 'string') {
+        return value;
+      }
+      var str = value.trim();
+      var single = /^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)$/i.exec(str);
+      var convert = function convert(term) {
+        var number = parseFloat(term);
+        if (term.endsWith('%')) {
+          if (!Number.isFinite(parentSize)) {
+            throw new Error("Percentage dimension requires a definite parent size: ".concat(value));
+          }
+          return number * parentSize / 100;
+        }
+        return number;
+      };
+      if (single) {
+        return convert(str);
+      }
+      var calc = /^calc\((.*)\)$/i.exec(str);
+      if (!calc) {
+        throw new Error("Unsupported dimension: ".concat(value));
+      }
+      var expression = calc[1].replace(/\s+/g, '');
+      var terms = expression.match(/[+-]?(?:\d+\.?\d*|\.\d+)(?:%|px)/gi);
+      if (!terms || terms.join('') !== expression || terms.slice(1).some(function (term) {
+        return !/^[+-]/.test(term);
+      })) {
+        throw new Error("Unsupported calc expression: ".concat(value));
+      }
+      return terms.reduce(function (total, term) {
+        return total + convert(term);
+      }, 0);
+    }
   }, {
     key: "commitAnimatedStyles",
     value: function commitAnimatedStyles(tmodel, originalKeys) {
@@ -611,24 +647,13 @@ var TModelUtil = /*#__PURE__*/function () {
             }
             continue;
           }
-          if (key === "dim") {
-            var dim = Math.floor(value);
-            tmodel.styleMap.width = dim;
-            tmodel.styleMap.height = dim;
-            tmodel.$dom.width(dim);
-            tmodel.$dom.height(dim);
-            continue;
-          }
-          if (key === "width") {
-            var width = Math.floor(value);
-            tmodel.styleMap.width = width;
-            tmodel.$dom.width(width);
+          if (key === 'dim') {
+            TModelUtil.applyDimensionStyle(tmodel, 'width', value);
+            TModelUtil.applyDimensionStyle(tmodel, 'height', value);
             continue;
           }
-          if (key === "height") {
-            var height = Math.floor(value);
-            tmodel.styleMap.height = height;
-            tmodel.$dom.height(height);
+          if (key === 'width' || key === 'height') {
+            TModelUtil.applyDimensionStyle(tmodel, key, value);
             continue;
           }
           var styleValue = typeof value === "number" && TargetData.styleWithUnitMap[key] ? "".concat(value, "px") : "".concat(value);
@@ -736,10 +761,10 @@ var TModelUtil = /*#__PURE__*/function () {
             if (TUtil.isDefined(style) && tmodel.styleMap.style !== style) {
               tmodel.$dom.setStyleByMap(style);
               if (style.height) {
-                tmodel.val('height', parseInt(style.height, 10));
+                tmodel.val('height', style.height);
               }
               if (style.width) {
-                tmodel.val('width', parseInt(style.width, 10));
+                tmodel.val('width', style.width);
               }
               tmodel.styleMap.style = style;
             }
@@ -1095,6 +1120,17 @@ var TModelUtil = /*#__PURE__*/function () {
         tmodel.absY = rect.top;
         tmodel.markLayoutDirty('islandAbsXY');
       }
+      var size = tmodel.domIslandSize;
+      if (!size || size.width !== rect.width || size.height !== rect.height) {
+        tmodel.domIslandSize = {
+          width: rect.width,
+          height: rect.height
+        };
+        var now = TUtil.now();
+        tmodel.domWidthTimestamp = now;
+        tmodel.domHeightTimestamp = now;
+        tmodel.markLayoutDirty('islandDimensions');
+      }
     }
   }]);
 }();