targetj 1.1.4 → 1.1.6

package/Export.js

@@ -24,6 +24,7 @@ export * from "./build/ParticleChild.js";
 export * from "./build/ParticleRenderer.js";
 export * from "./build/ParticleRuntime.js";
 export * from "./build/ParticleUtil.js";
+export * from "./build/HtmlToCanvas.js";
 
 import * as AppModule from "./build/App.js";
 import * as TModelModule from "./build/TModel.js";
@@ -51,6 +52,7 @@ import * as ParticleChildModule from "./build/ParticleChild.js";
 import * as ParticleRendererModule from "./build/ParticleRenderer.js";
 import * as ParticleRuntimeModule from "./build/ParticleRuntime.js";
 import * as ParticleUtilModule from "./build/ParticleUtil.js";
+import * as HtmlToCanvasModule from "./build/HtmlToCanvas.js";
 
 const TargetJS = {
     ...AppModule,
@@ -78,7 +80,8 @@ const TargetJS = {
     ...ParticleChildModule,
     ...ParticleRendererModule,
     ...ParticleRuntimeModule,
-    ...ParticleUtilModule
+    ...ParticleUtilModule,
+    ...HtmlToCanvas
 };
 
 if (typeof window !== "undefined") {

package/build/$Dom.js

@@ -697,14 +697,24 @@ var $Dom = /*#__PURE__*/function () {
         }).join('&');
       }
       xhr.onreadystatechange = function () {
-        if (xhr.readyState === 4) {
-          if (xhr.status === 200) {
-            var response = query.dataType === 'json' ? JSON.parse(this.responseText) : this.responseText;
-            query.success(response);
-          } else {
-            query.error(xhr.status);
+        if (xhr.readyState !== 4) {
+          return;
+        }
+        if (xhr.status < 200 || xhr.status >= 300) {
+          query.error(xhr.status);
+          return;
+        }
+        var response = xhr.responseText;
+        if (query.dataType === 'json') {
+          try {
+            response = response.trim() ? JSON.parse(response) : null;
+          } catch (error) {
+            console.error('Invalid JSON response:', xhr.responseURL, error);
+            query.error(error);
+            return;
           }
         }
+        query.success(response);
       };
       if (query.type === 'POST') {
         xhr.open(query.type, query.url, true);

package/build/BaseModel.js

@@ -3,6 +3,8 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 _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."); }
@@ -301,7 +303,23 @@ var BaseModel = /*#__PURE__*/function () {
         if (doesNextTargetUsePrevValue || isInactiveKey || isExternalEvent || isInternalEvent || targetType === 'object' || targetType === 'function') {
           if (!TUtil.isDefined(target.value) && !TargetParser.isChildObjectTarget(key, target) && !TargetParser.isIntervalTarget(target)) {
             needsTargetExecution = true;
-            target = TargetUtil.wrapTarget(this, target, key);
+            var value = _objectSpread({}, target);
+            target = TargetUtil.wrapTarget(this, value, key);
+            var _iterator = _createForOfIteratorHelper(TargetData.lifecycleCallbackSet),
+              _step;
+            try {
+              for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                var name = _step.value;
+                if (Object.hasOwn(value, name)) {
+                  target[name] = value[name];
+                  delete value[name];
+                }
+              }
+            } catch (err) {
+              _iterator.e(err);
+            } finally {
+              _iterator.f();
+            }
           }
           TargetUtil.bindTarget(this, key, prevKey, nextKey, keyIndex);
         }
@@ -434,7 +452,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;
           }
@@ -816,12 +834,12 @@ var BaseModel = /*#__PURE__*/function () {
         return false;
       }
       var activated = false;
-      var _iterator = _createForOfIteratorHelper(this.passiveTargetList),
-        _step;
+      var _iterator2 = _createForOfIteratorHelper(this.passiveTargetList),
+        _step2;
       try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
           var _this$animatingMap;
-          var key = _step.value;
+          var key = _step2.value;
           if (!this.isTargetPassiveLoop(key)) {
             continue;
           }
@@ -836,9 +854,9 @@ var BaseModel = /*#__PURE__*/function () {
           activated = true;
         }
       } catch (err) {
-        _iterator.e(err);
+        _iterator2.e(err);
       } finally {
-        _iterator.f();
+        _iterator2.f();
       }
       return activated;
     }
@@ -1104,12 +1122,12 @@ var BaseModel = /*#__PURE__*/function () {
     value: function hasUpdatingImperativeTargets(originalTargetName) {
       var _this$updatingTargetL;
       var updatingList = [].concat(_toConsumableArray((_this$updatingTargetL = this.updatingTargetList) !== null && _this$updatingTargetL !== void 0 ? _this$updatingTargetL : []), _toConsumableArray(this.hasAnimatingTargets() ? _toConsumableArray(this.animatingMap.keys()) : []));
-      var _iterator2 = _createForOfIteratorHelper(updatingList),
-        _step2;
+      var _iterator3 = _createForOfIteratorHelper(updatingList),
+        _step3;
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
           var _this$targetValues$ta;
-          var target = _step2.value;
+          var target = _step3.value;
           if (!this.isTargetImperative(target)) {
             continue;
           }
@@ -1118,9 +1136,9 @@ var BaseModel = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
       return false;
     }
@@ -1130,12 +1148,12 @@ var BaseModel = /*#__PURE__*/function () {
       var _this$updatingTargetL2;
       var updatingList = [].concat(_toConsumableArray((_this$updatingTargetL2 = this.updatingTargetList) !== null && _this$updatingTargetL2 !== void 0 ? _this$updatingTargetL2 : []), _toConsumableArray(this.hasAnimatingTargets() ? _toConsumableArray(this.animatingMap.keys()) : []));
       var targets = [];
-      var _iterator3 = _createForOfIteratorHelper(updatingList),
-        _step3;
+      var _iterator4 = _createForOfIteratorHelper(updatingList),
+        _step4;
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
           var _this$targetValues$ta2;
-          var target = _step3.value;
+          var target = _step4.value;
           if (!this.isTargetImperative(target)) {
             continue;
           }
@@ -1144,9 +1162,9 @@ var BaseModel = /*#__PURE__*/function () {
           }
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator3.f();
+        _iterator4.f();
       }
       return targets;
     }

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";
@@ -34,7 +34,7 @@ import { DomInit } from "./DomInit.js";
 import { StateUtil } from "./StateUtil.js";
 import { TModelFactory } from "./TModelFactory.js";
 import { ParticleExplode } from "./ParticleExplode.js";
-import { HtmlToCanvas } from "./htmlToCanvas.js";
+import { HtmlToCanvas } from "./HtmlToCanvas.js";
 
 /**
  * It provides the base class for all objects in an app where targets are defined. 
@@ -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');
+      }
     }
   }]);
 }();

package/build/index.js

@@ -23,4 +23,5 @@ export * from "./ParticleTModel.js";
 export * from "./ParticleChild.js";
 export * from "./ParticleRenderer.js";
 export * from "./ParticleRuntime.js";
-export * from "./ParticleUtil.js";
+export * from "./ParticleUtil.js";
+export * from "./HtmlToCanvas.js";