targetj 1.0.110 → 1.0.111

package/README.md

@@ -184,78 +184,39 @@ In the example below, we define a target named load. Inside the value function,
 
 In this example, we set the cycles to 9, triggering the API call 10 times at intervals of 1 second (interval set to 1000). Each API response is appended as a separate object in the output. Because we didn’t specify the fourth argument, the response is always fetched directly from the API rather than from the cache.
 
-![api loading example](https://targetj.io/img/apiLoading3.gif)
+![api loading example](https://targetj.io/img/apiLoading4.gif)
 
 ```bash
 import { App, TModel, getLoader, getScreenHeight, getScreenWidth, Moves } from "targetj";
 
-App(
-  new TModel("apiCall", {
-    width: getScreenWidth,
-    height: getScreenHeight,
-    load: {
-      interval: 1000,
-      cycles: 9,
-      value: function (cycle) {
-        return getLoader().fetch(this, "https://targetj.io/api/randomUser", { id: `user${cycle}` });
-      },
-      onSuccess(res) {
-        this.addChild(new TModel("user", {
-            bounce: {
-              loop: true,
-              value() {
-                this.setTarget("move",
-                  Moves.bounceSimple(this, {
-                    xStart: this.getX() || Math.random() * 300,
-                    yStart: 200,
-                    from: 0,
-                    to: 200,
-                    widthStart: 50,
-                    heightStart: 50,
-                  }), 20);
-              }
-            },
-            lineHeight: 50,
-            textAlign: "center",
-            html: res.result.name,
-            background: "yellow",
-          })
-        );
-      },
-    },
-  })
-);
-```
-
-## Event handling example
-
-In the following example, the background color of the pane changes randomly whenever you click on it. The `canHandleEvents` target ensures that the object can handle touch events, such as clicks. However, we’ve set a limit of 10 executions for the background change. After reaching this limit, the component will no longer respond to click events. The `onClickEvent` is a system target that activates all associated targets when a click occurs. The `html` target tracks the number of executions and displays it within the pane.
-
-![event handling example](https://targetj.io/img/eventHandling.gif)
-
-```bash
-import { App, TModel } from "targetj";
-
-App(
-  new TModel("events", {
-    canHandleEvents() {
-      return this.getTargetExecutionCount("background") < 10 ? "touch" : "";
-    },
-    width: 120,
-    height: 120,
-    background: {
-      active: false,
-      initialValue: "#f00",
-      value() {
-        return "#" + Math.random().toString(16).slice(-6);
-      },
+App(new TModel("apiCall", {
+  width: 160,
+  height: getScreenHeight,
+  load: {
+    interval: 1000,
+    cycles: 8,
+    value: function (cycle) {
+      return getLoader().fetch(this, "https://targetj.io/api/randomUser", {
+        id: `user${cycle}`,
+      });
     },
-    html() {
-      return this.getTargetExecutionCount("background");
-    },
-    onClickEvent: ["background", "canHandleEvents", "html"]
-  })
-);
+    onSuccess(res) {
+      this.addChild(
+        new TModel("user", {
+          lineHeight: 50,
+          textAlign: "center",
+          html: res.result.name,
+          width: 50,
+          height: 50,
+          rightMargin: 5,
+          bottomMargin: 5,
+          color: "#fff",
+          background: "#B388FF",
+        })
+      );
+    }
+  }
+}));
 ```
 
 ## Animation API example
@@ -360,14 +321,14 @@ import { App, TModel, getEvents, getScreenHeight, getScreenWidth, } from "target
 
 App(new TModel("scroller", {
     canHandleEvents: "scrollTop",
-    innerOverflowWidth: 0,
+    containerOverflowMode: 'always',
     children: {
       value() {
         const childrenCount = this.getChildren().length;
         return Array.from({ length: 5 }, (_, i) =>
             new TModel("scrollItem", {
               width: 300,
-              background: "brown",
+              background: "#B388FF",
               height: 30,
               color: "#fff",
               textAlign: "center",
@@ -418,7 +379,7 @@ App(new TModel("simpleApp", {
                         width: 100,
                         height: 50,
                         lineHeight: 50,
-                        outerOverflowWidth: 0,
+                        itemOverflowMode: 'never',
                         opacity: 0.5,
                         cursor: "pointer",
                         html: menu,

package/build/$Dom.js

@@ -85,11 +85,11 @@ var $Dom = exports.$Dom = /*#__PURE__*/function () {
       if (!this.element) {
         return;
       }
+      var currentValue = this.element.value;
       if (_TUtil.TUtil.isDefined(_value)) {
         this.element.value = _value;
-      } else {
-        return this.element.value;
       }
+      return currentValue;
     }
   }, {
     key: "select",

package/build/EventListener.js

@@ -34,7 +34,9 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
     this.touchTimeStamp = 0;
     this.cursor = {
       x: 0,
-      y: 0
+      y: 0,
+      handlerX: 0,
+      handlerY: 0
     };
     this.start0 = undefined;
     this.start1 = undefined;
@@ -282,7 +284,6 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
         } else if (diff > 600) {
           this.clearTouch();
           this.touchTimeStamp = 0;
-          this.touchCount = 0;
         }
         (0, _App.getRunScheduler)().schedule(runDelay, "scroll decay");
       }
@@ -290,12 +291,13 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
   }, {
     key: "findEventHandlers",
     value: function findEventHandlers(_ref) {
-      var tmodel = _ref.tmodel;
+      var tmodel = _ref.tmodel,
+        eventType = _ref.eventType;
       var touchHandler, scrollLeftHandler, scrollTopHandler, pinchHandler, focusHandler;
       if (tmodel) {
         touchHandler = _SearchUtil.SearchUtil.findFirstTouchHandler(tmodel);
-        scrollLeftHandler = _SearchUtil.SearchUtil.findFirstScrollLeftHandler(tmodel);
-        scrollTopHandler = _SearchUtil.SearchUtil.findFirstScrollTopHandler(tmodel);
+        scrollLeftHandler = _SearchUtil.SearchUtil.findFirstScrollLeftHandler(tmodel, eventType);
+        scrollTopHandler = _SearchUtil.SearchUtil.findFirstScrollTopHandler(tmodel, eventType);
         pinchHandler = _SearchUtil.SearchUtil.findFirstPinchHandler(tmodel);
         focusHandler = _$Dom.$Dom.hasFocus(tmodel) ? tmodel : this.currentHandlers.focus;
       }
@@ -330,7 +332,9 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
         return;
       }
       var lastEvent = this.eventQueue.shift();
-      this.findEventHandlers(lastEvent);
+      if (this.touchCount === 0) {
+        this.findEventHandlers(lastEvent);
+      }
       this.currentEventName = lastEvent.eventName;
       this.currentEventType = lastEvent.eventType;
       this.currentKey = this.currentTouch.key;
@@ -373,15 +377,16 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
           }
         }
       }
+      var newEvent = {
+        eventName: eventName,
+        eventItem: eventItem,
+        eventType: eventType,
+        originalName: originalName,
+        tmodel: tmodel,
+        timeStamp: now
+      };
       if (queue) {
-        this.eventQueue.push({
-          eventName: eventName,
-          eventItem: eventItem,
-          eventType: eventType,
-          originalName: originalName,
-          tmodel: tmodel,
-          timeStamp: now
-        });
+        this.eventQueue.push(newEvent);
       }
       switch (eventName) {
         case 'mousedown':
@@ -396,6 +401,11 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
           this.start1 = this.getTouch(event, 1);
           this.cursor.x = this.start0.x;
           this.cursor.y = this.start0.y;
+          this.findEventHandlers(newEvent);
+          if (this.currentHandlers.touch) {
+            this.cursor.handlerX = this.start0.x - this.currentHandlers.touch.getX();
+            this.cursor.handlerY = this.start0.y - this.currentHandlers.touch.getY();
+          }
           event.stopPropagation();
           break;
         case 'mousemove':
@@ -525,6 +535,16 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
     value: function cursorY() {
       return this.cursor.y;
     }
+  }, {
+    key: "swipeX",
+    value: function swipeX() {
+      return this.cursor.x - this.cursor.handlerX;
+    }
+  }, {
+    key: "swipeY",
+    value: function swipeY() {
+      return this.cursor.y - this.cursor.handlerY;
+    }
   }, {
     key: "pinchDelta",
     value: function pinchDelta() {
@@ -578,13 +598,28 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
   }, {
     key: "isSwipeEvent",
     value: function isSwipeEvent() {
-      return (this.deltaX() !== 0 || this.deltaY() !== 0) && this.touchCount === 1;
+      return this.hasDelta() && this.touchCount === 1;
+    }
+  }, {
+    key: "isScrollEvent",
+    value: function isScrollEvent() {
+      return this.hasDelta() && this.isCurrentSource('wheel');
+    }
+  }, {
+    key: "hasDelta",
+    value: function hasDelta() {
+      return this.deltaX() !== 0 || this.deltaY() !== 0;
     }
   }, {
     key: "isEndEvent",
     value: function isEndEvent() {
       return this.getEventType() === 'end';
     }
+  }, {
+    key: "isStartEvent",
+    value: function isStartEvent() {
+      return this.getEventType() === 'start';
+    }
   }, {
     key: "getEventName",
     value: function getEventName() {
@@ -757,19 +792,14 @@ var EventListener = exports.EventListener = /*#__PURE__*/function () {
           this.currentTouch.orientation = "horizontal";
           this.currentTouch.dir = deltaX <= -1 ? "left" : deltaX >= 1 ? "right" : this.currentTouch.dir;
           this.currentTouch.source = source;
-          this.currentTouch.deltaX = deltaX;
-          this.currentTouch.deltaY = 0;
         }
       } else if (this.currentTouch.orientation === "none" || this.currentTouch.orientation === "horizontal" && diff < -3 || this.currentTouch.orientation === "vertical") {
         this.currentTouch.orientation = "vertical";
         this.currentTouch.dir = deltaY <= -1 ? "up" : deltaY >= 1 ? "down" : this.currentTouch.dir;
         this.currentTouch.source = source;
-        this.currentTouch.deltaY = deltaY;
-        this.currentTouch.deltaX = 0;
-      } else {
-        this.currentTouch.deltaY = 0;
-        this.currentTouch.deltaX = 0;
       }
+      this.currentTouch.deltaY = deltaY;
+      this.currentTouch.deltaX = deltaX;
     }
   }, {
     key: "wheel",

package/build/LocationManager.js

@@ -67,19 +67,21 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
       var shouldCalculateChildTargets = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var allChildren = this.getChildren(container);
       var viewport = container.createViewport();
-      var visibleChildrenCount = container.visibleChildren.length;
       container.visibleChildren.length = 0;
+      var visibleChildrenLength = container.visibleChildren.length;
+      var childrenLength = container.getChildren().length;
+      var length = allChildren.length;
       var i = 0;
-      var childrenLength = allChildren.length;
-      while (i < childrenLength) {
+      while (i < length) {
         var child = allChildren[i++];
         if (!child) {
           continue;
         }
+        viewport.setCurrentChild(child);
+        viewport.setLocation();
         if (container.manageChildTargetExecution(child, shouldCalculateChildTargets)) {
           this.calculateTargets(child);
         }
-        viewport.setCurrentChild(child);
         viewport.setLocation();
         child.overflowingFlag = false;
         if (container.getContainerOverflowMode() === 'always' || child.getItemOverflowMode() === 'always' || container.getContainerOverflowMode() === 'auto' && child.getItemOverflowMode() === 'auto' && viewport.isOverflow()) {
@@ -89,15 +91,13 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
         if (child.isIncluded() && !this.hasLocationMap[child.oid]) {
           this.addToLocationList(child);
         }
-        if (child.isTargetEnabled('x') && !child.isTargetUpdating('x') && !child.isTargetImperative('x') && child.getTargetSteps('x') === 0) {
-          _TargetExecutor.TargetExecutor.resolveTargetValue(child, 'x');
-          _TargetExecutor.TargetExecutor.snapActualToTarget(child, 'x');
+        if (child.isTargetEnabled('x') && !child.isTargetUpdating('x') && !child.isTargetImperative('x')) {
+          _TargetExecutor.TargetExecutor.executeDeclarativeTarget(child, 'x');
         } else if (!_TUtil.TUtil.isDefined(child.targetValues.x)) {
           child.val('x', child.x);
         }
-        if (child.isTargetEnabled('y') && !child.isTargetUpdating('y') && !child.isTargetImperative('y') && child.getTargetSteps('y') === 0) {
-          _TargetExecutor.TargetExecutor.resolveTargetValue(child, 'y');
-          _TargetExecutor.TargetExecutor.snapActualToTarget(child, 'y');
+        if (child.isTargetEnabled('y') && !child.isTargetUpdating('y') && !child.isTargetImperative('y')) {
+          _TargetExecutor.TargetExecutor.executeDeclarativeTarget(child, 'y');
         } else if (!_TUtil.TUtil.isDefined(child.targetValues.y)) {
           child.val('y', child.y);
         }
@@ -142,18 +142,21 @@ var LocationManager = exports.LocationManager = /*#__PURE__*/function () {
         container.calcContentWidthHeight();
         this.locationListStats.push("".concat(child.oid, "-").concat(child.updatingTargetList.length, "-").concat(_TUtil.TUtil.now() - this.startTime));
       }
-      if ((visibleChildrenCount !== container.visibleChildren.length || container.visibleChildren.length === 0) && container.targets['onVisibleChildrenChange']) {
+      if ((visibleChildrenLength !== container.visibleChildren.length || container.visibleChildren.length === 0) && container.targets['onVisibleChildrenChange']) {
         this.activateTargets(container, container.targets['onVisibleChildrenChange']);
       }
+      if (childrenLength !== container.getChildren().length && container.targets['onChildrenChange']) {
+        this.activateTargets(container, container.targets['onChildrenChange']);
+      }
     }
   }, {
     key: "calculateTargets",
     value: function calculateTargets(tmodel) {
-      var childrenCount = tmodel.getChildren().length;
+      var childrenLength = tmodel.getChildren().length;
       this.activateTargetsOnEvents(tmodel);
       _App.tApp.targetManager.applyTargetValues(tmodel);
       _App.tApp.targetManager.setActualValues(tmodel);
-      if (childrenCount !== tmodel.getChildren().length && tmodel.targets['onChildrenChange']) {
+      if (tmodel.getChildren().length === 0 && childrenLength > 0 && tmodel.targets['onChildrenChange']) {
         this.activateTargets(tmodel, tmodel.targets['onChildrenChange']);
       }
       if (tmodel.hasDom()) {

package/build/SearchUtil.js

@@ -30,19 +30,32 @@ var SearchUtil = exports.SearchUtil = /*#__PURE__*/function () {
     }
   }, {
     key: "findFirstScrollTopHandler",
-    value: function findFirstScrollTopHandler(tmodel) {
-      return SearchUtil.findEventHandler(tmodel, 'scrollTop');
+    value: function findFirstScrollTopHandler(tmodel, eventType) {
+      return SearchUtil.findScrollHandler(tmodel, eventType, 'scrollTop');
     }
   }, {
     key: "findFirstScrollLeftHandler",
-    value: function findFirstScrollLeftHandler(tmodel) {
-      return SearchUtil.findEventHandler(tmodel, 'scrollLeft');
+    value: function findFirstScrollLeftHandler(tmodel, eventType) {
+      return SearchUtil.findScrollHandler(tmodel, eventType, 'scrollLeft');
     }
   }, {
     key: "findFirstTouchHandler",
     value: function findFirstTouchHandler(tmodel) {
       return SearchUtil.findEventHandler(tmodel, 'touch');
     }
+  }, {
+    key: "findScrollHandler",
+    value: function findScrollHandler(tmodel, eventType, eventName) {
+      while (tmodel) {
+        if (tmodel.canHandleEvents('swipe') && eventType !== 'wheel') {
+          break;
+        }
+        if (tmodel.canHandleEvents(eventName)) {
+          return tmodel;
+        }
+        tmodel = tmodel.getParent();
+      }
+    }
   }, {
     key: "findEventHandler",
     value: function findEventHandler(tmodel, eventName) {

package/build/TModel.js

@@ -127,40 +127,21 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
       return this;
     }
   }, {
-    key: "removeAllChildren",
-    value: function removeAllChildren() {
-      this.allChildren.length = 0;
-      this.updatingChildrenList.length = 0;
-      this.updatingChildrenMap = {};
-      (0, _App.getRunScheduler)().schedule(10, 'removeAllChildren-' + this.oid);
-      return this;
-    }
-
-    //we need to use the parent so in case there is a bracket, the child will be added to the real parent
-  }, {
-    key: "addToParentVisibleChildren",
-    value: function addToParentVisibleChildren() {
-      if (this.isVisible() && this.isInFlow() && this.getParent()) {
-        this.getParent().visibleChildren.push(this);
+    key: "moveChildTo",
+    value: function moveChildTo(child, toIndex) {
+      var newArray = this.allChildren.slice(0);
+      var fromIndex = this.allChildren.indexOf(child);
+      if (fromIndex === -1 || toIndex < 0 || toIndex > newArray.length) {
+        return;
       }
-    }
-  }, {
-    key: "shouldCalculateChildren",
-    value: function shouldCalculateChildren() {
-      if (_TUtil.TUtil.isDefined(this.actualValues.calculateChildren)) {
-        return this.actualValues.calculateChildren;
+      newArray.splice(fromIndex, 1);
+      if (toIndex === newArray.length) {
+        newArray.push(child);
+      } else {
+        newArray.splice(toIndex, 0, child);
       }
-      return this.isVisible() && this.isIncluded() && (this.hasChildren() || this.addedChildren.count > 0 || this.getContentHeight() > 0);
-    }
-  }, {
-    key: "getFirstChild",
-    value: function getFirstChild() {
-      return this.hasChildren() ? this.getChildren()[0] : undefined;
-    }
-  }, {
-    key: "hasChildren",
-    value: function hasChildren() {
-      return this.getChildren().length > 0;
+      this.allChildren = newArray;
+      (0, _App.getRunScheduler)().schedule(10, "addChild-".concat(this.oid, "-").concat(child.oid));
     }
   }, {
     key: "getChildren",
@@ -197,6 +178,49 @@ var TModel = exports.TModel = /*#__PURE__*/function (_BaseModel) {
       }
       return this.allChildren;
     }
+  }, {
+    key: "removeAllChildren",
+    value: function removeAllChildren() {
+      this.allChildren.length = 0;
+      this.updatingChildrenList.length = 0;
+      this.updatingChildrenMap = {};
+      (0, _App.getRunScheduler)().schedule(10, 'removeAllChildren-' + this.oid);
+      return this;
+    }
+
+    //we need to use the parent so in case there is a bracket, the child will be added to the real parent
+  }, {
+    key: "addToParentVisibleChildren",
+    value: function addToParentVisibleChildren() {
+      if (this.isVisible() && this.isInFlow() && this.getParent()) {
+        this.getParent().visibleChildren.push(this);
+      }
+    }
+  }, {
+    key: "shouldCalculateChildren",
+    value: function shouldCalculateChildren() {
+      if (_TUtil.TUtil.isDefined(this.actualValues.calculateChildren)) {
+        return this.actualValues.calculateChildren;
+      }
+      return this.isVisible() && this.isIncluded() && (this.hasChildren() || this.addedChildren.count > 0 || this.getContentHeight() > 0);
+    }
+  }, {
+    key: "getFirstChild",
+    value: function getFirstChild() {
+      return this.hasChildren() ? this.getChildren()[0] : undefined;
+    }
+  }, {
+    key: "hasChildren",
+    value: function hasChildren() {
+      return this.getChildren().length > 0;
+    }
+  }, {
+    key: "findChildren",
+    value: function findChildren(type) {
+      return this.getChildren().filter(function (child) {
+        return child.type === type;
+      });
+    }
   }, {
     key: "getLastChild",
     value: function getLastChild() {

package/build/TargetUtil.js

@@ -427,13 +427,19 @@ _defineProperty(TargetUtil, "targetConditionMap", {
   onClickEvent: function onClickEvent(tmodel) {
     return (0, _App.getEvents)().getEventType() === 'click' && (0, _App.getEvents)().isClickHandler(tmodel);
   },
+  onTouchStart: function onTouchStart(tmodel) {
+    return (0, _App.getEvents)().isStartEvent() && (0, _App.getEvents)().isTouchHandler(tmodel);
+  },
   onTouchEnd: function onTouchEnd() {
     return (0, _App.getEvents)().isEndEvent();
   },
   onKeyEvent: function onKeyEvent() {
     return (0, _App.getEvents)().getEventType() === 'key' && (0, _App.getEvents)().currentKey;
   },
-  onSwipeEvent: function onSwipeEvent() {
+  onSwipeEvent: function onSwipeEvent(tmodel) {
+    return (0, _App.getEvents)().isTouchHandler(tmodel) && (0, _App.getEvents)().isSwipeEvent();
+  },
+  onAnySwipeEvent: function onAnySwipeEvent() {
     return (0, _App.getEvents)().isSwipeEvent();
   },
   onTouchEvent: function onTouchEvent(tmodel) {

package/build/Viewport.js

@@ -60,7 +60,7 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
     key: "appendNewLine",
     value: function appendNewLine() {
       var height = this.currentChild.getHeight() * this.currentChild.getMeasuringScale();
-      this.xNext = this.xOverflowReset;
+      this.xNext = this.scrollLeft - this.absX + this.xOverflowReset;
       this.yNext = this.ySouth > this.yNext ? this.ySouth + this.currentChild.val('appendNewLine') : this.ySouth + height + this.currentChild.val('appendNewLine');
       this.yEast = this.yNext;
       this.xSouth = this.xNext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "targetj",
-  "version": "1.0.110",
+  "version": "1.0.111",
   "keywords": [
     "targetj"
   ],