@breakside/jskit 2022.50.0 → 2022.52.0

package/Root/Frameworks/UIKit/UIDevice+HTML.js

@@ -20,28 +20,39 @@
 
 (function(){
 
-try{
-    var device = UIDevice.init();
+Object.defineProperties(UIDevice, {
 
-    device.supportsTouchInput = ('ontouchstart' in document.body) && navigator.maxTouchPoints > 0;
-    var primaryPointerHovers = window.matchMedia('(hover)').matches;
-    var primaryFinePointer = window.matchMedia('(pointer: fine)').matches;
+    shared: {
+        configurable: true,
+        get: function(){
+            var device = UIDevice.init();
+            try{
+                device.supportsTouchInput = ('ontouchstart' in document.body) && navigator.maxTouchPoints > 0;
+                var primaryPointerHovers = window.matchMedia('(hover)').matches;
+                var primaryFinePointer = window.matchMedia('(pointer: fine)').matches;
 
-    if (primaryFinePointer){
-        device.primaryPointerAccuracy = UIUserInterface.PointerAccuracy.fine;
-        if (primaryPointerHovers){
-            device.primaryPointerType = UIUserInterface.PointerType.cursor;
-        }else{
-            device.primaryPointerType = UIUserInterface.PointerType.touch;
+                if (primaryFinePointer){
+                    device.primaryPointerAccuracy = UIUserInterface.PointerAccuracy.fine;
+                    if (primaryPointerHovers){
+                        device.primaryPointerType = UIUserInterface.PointerType.cursor;
+                    }else{
+                        device.primaryPointerType = UIUserInterface.PointerType.touch;
+                    }
+                }else if (device.supportsTouchInput){
+                    device.primaryPointerAccuracy = UIUserInterface.PointerAccuracy.coarse;
+                    device.primaryPointerType = UIUserInterface.PointerType.touch;
+                }
+            }catch (e){
+                // assumed to be in a worker env, where UIDevice isn't really applicable
+            }
+            Object.defineProperty(this, "shared", {writable: true, configurable: true, value: device});
+            return device;
+        },
+        set: function(device){
+            Object.defineProperty(this, "shared", {writable: true, configurable: true, value: device});
         }
-    }else if (device.supportsTouchInput){
-        device.primaryPointerAccuracy = UIUserInterface.PointerAccuracy.coarse;
-        device.primaryPointerType = UIUserInterface.PointerType.touch;
     }
 
-    UIDevice.shared = device;
-}catch (e){
-    // assumed to be in a worker env, where UIDevice isn't really applicable
-}
+});
 
 })();

package/Root/Frameworks/UIKit/UIDevice.js

@@ -25,4 +25,18 @@ JSClass("UIDevice", JSObject, {
 
 });
 
-UIDevice.shared = null;
+Object.defineProperties(UIDevice, {
+
+    shared: {
+        configurable: true,
+        get: function(){
+            var device = UIDevice.init();
+            Object.defineProperty(this, "shared", {writable: true, configurable: true, value: device});
+            return device;
+        },
+        set: function(device){
+            Object.defineProperty(this, "shared", {writable: true, configurable: true, value: device});
+        }
+    }
+
+});

package/Root/Frameworks/UIKit/UIHTMLApplication.js

@@ -24,6 +24,7 @@ var logger = JSLog("uikit", "application");
 
 JSClass("UIHTMLApplication", UIApplication, {
 
+    bootstrapper: null,
     domWindow: null,
 
     initWithBundle: function(bundle, windowServer){
@@ -134,6 +135,14 @@ JSClass("UIHTMLApplication", UIApplication, {
         this.domWindow.addEventListener("popstate", this);
     },
 
+    removeEventListeners: function(){
+        this.domWindow.removeEventListener("error", this);
+        this.domWindow.removeEventListener("unhandledrejection", this);
+        this.domWindow.removeEventListener("beforeunload", this);
+        this.domWindow.removeEventListener("hashchange", this);
+        this.domWindow.removeEventListener("popstate", this);
+    },
+
     handleEvent: function(e){
         this['_event_' + e.type](e);
     },
@@ -228,6 +237,7 @@ JSClass("UIHTMLApplication", UIApplication, {
     },
 
     _crash: function(error){
+        this.removeEventListeners();
         if (this.delegate && this.delegate.applicationDidCrash){
             try{
                 var logs = JSLog.getRecords();
@@ -250,28 +260,32 @@ JSClass("UIHTMLApplication", UIApplication, {
 
     _showCrashScreen: function(){
         this.windowServer.stop();
-        var root = this.windowServer.displayServer.rootElement;
-        var cover = root.appendChild(root.ownerDocument.createElement('div'));
-        cover.style.position = 'absolute';
-        cover.style.backgroundColor = 'rgba(0,0,0,0.9)';
-        cover.style.top = '0';
-        cover.style.left = '0';
-        cover.style.right = '0';
-        cover.style.bottom = '0';
-        var message;
-        if (!message){
-            message = "Sorry, there was a problem and the application needs to restart.\n\nPlease reload the page to continue.";
+        if (this.bootstrapper && this.bootstrapper.applicationDidCrash){
+            this.bootstrapper.applicationDidCrash(this);
+        }else{
+            var root = this.windowServer.displayServer.rootElement;
+            var cover = root.appendChild(root.ownerDocument.createElement('div'));
+            cover.style.position = 'absolute';
+            cover.style.backgroundColor = 'rgba(0,0,0,0.9)';
+            cover.style.top = '0';
+            cover.style.left = '0';
+            cover.style.right = '0';
+            cover.style.bottom = '0';
+            var message;
+            if (!message){
+                message = "Sorry, there was a problem and the application needs to restart.\n\nPlease reload the page to continue.";
+            }
+            var label = cover.appendChild(cover.ownerDocument.createElement('div'));
+            label.style.position = 'absolute';
+            label.style.color = 'white';
+            label.style.font = '400 normal 17px/24px sans-serif';
+            label.appendChild(label.ownerDocument.createTextNode(message));
+            label.style.top = 'calc(50% - 36px)';
+            label.style.left = '20px';
+            label.style.right = '20px';
+            label.style.textAlign = 'center';
+            label.style.whiteSpace = 'pre-wrap';
         }
-        var label = cover.appendChild(cover.ownerDocument.createElement('div'));
-        label.style.position = 'absolute';
-        label.style.color = 'white';
-        label.style.font = '400 normal 17px/24px sans-serif';
-        label.appendChild(label.ownerDocument.createTextNode(message));
-        label.style.top = 'calc(50% - 36px)';
-        label.style.left = '20px';
-        label.style.right = '20px';
-        label.style.textAlign = 'center';
-        label.style.whiteSpace = 'pre-wrap';
     }
 
 });
@@ -279,6 +293,7 @@ JSClass("UIHTMLApplication", UIApplication, {
 JSGlobalObject.UIApplicationMain = function(rootElement, bootstrapper){
     var windowServer = UIHTMLWindowServer.initWithRootElement(rootElement);
     var application = UIHTMLApplication.initWithWindowServer(windowServer);
+    application.bootstrapper = bootstrapper;
     application.run(function(error){
         if (error === null){
             application.addEventListeners();

package/Root/Frameworks/UIKit/UIListView.js

@@ -19,6 +19,7 @@
 // #import "UIImageView.js"
 // #import "UIViewPropertyAnimator.js"
 // #import "JSColor+UIKit.js"
+// #import "UIPressGestureRecognizer.js"
 /* global UIListViewCell, UIListViewHeaderFooterView */
 'use strict';
 
@@ -2211,6 +2212,10 @@ JSClass("UIListView", UIScrollView, {
         if (cell === null){
             return;
         }
+        this._contextSelectCell(cell, location);
+    },
+
+    _contextSelectCell: function(cell, location){
         if (this.delegate && this.delegate.menuForListViewCellAtIndexPath){
             var menu = this.delegate.menuForListViewCellAtIndexPath(this, cell.indexPath);
             if (menu !== null){
@@ -2349,7 +2354,7 @@ JSClass("UIListView", UIScrollView, {
         this._touch = null;
     },
 
-    _makeTouchActiveCell: function(touch){
+    _makeTouchActiveCell: function(touch, waitForLongPress){
         var location = touch.locationInView(this);
         var cell = this._cellHitTest(location);
         if (cell === null){
@@ -2361,6 +2366,19 @@ JSClass("UIListView", UIScrollView, {
         }
         cell.active = true;
         this._touch.cell = cell;
+        if (waitForLongPress){
+            this._touch.timer = JSTimer.scheduledTimerWithInterval(UIPressGestureRecognizer.PressInterval.long, function(){
+                this._touch.timer = null;
+                this._longPressCell(location);
+            }, this);
+        }
+    },
+
+    _longPressCell: function(location){
+        var cell = this._touch.cell;
+        var indexPath = cell.indexPath;
+        this._cancelTouchSelection();
+        this._contextSelectCell(cell, location);
     },
 
     touchesBegan: function(touches, event){
@@ -2373,7 +2391,7 @@ JSClass("UIListView", UIScrollView, {
             cell: null,
             timer: JSTimer.scheduledTimerWithInterval(0.05, function(){
                 this._touch.timer = null;
-                this._makeTouchActiveCell(touches[0]);
+                this._makeTouchActiveCell(touches[0], true);
             }, this)
         };
     },

package/Root/Frameworks/UIKit/UIMenuView.js

@@ -110,6 +110,7 @@ JSClass("UIMenuWindow", UIWindow, {
         if (event !== null && event.type == UIEvent.Type.leftMouseDown){
             this._openEvent = null;
             var location = event.locationInView(this);
+            this._lastMoveLocation = JSPoint(location);
             this._adjustHighlightForLocation(location);
             this._itemDownTimestamp = event.timestamp;
         }

package/Root/Frameworks/UIKit/UIScrollGestureRecognizer.js

@@ -0,0 +1,184 @@
+// Copyright 2022 Breakside Inc.
+//
+// Licensed under the Breakside Public License, Version 1.0 (the "License");
+// you may not use this file except in compliance with the License.
+// If a copy of the License was not distributed with this file, you may
+// obtain a copy at
+//
+//     http://breakside.io/licenses/LICENSE-1.0.txt
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// #import "UIGestureRecognizer.js"
+'use strict';
+
+JSClass("UIScrollGestureRecognizer", UIGestureRecognizer, {
+
+    scrollsVertically: JSDynamicProperty("_scrollsVertically", true),
+    scrollsHorizontally: JSDynamicProperty("_scrollsHorizontally", true),
+    contentOffset: JSDynamicProperty("_contentOffset", null),
+
+    getContentOffset: function(){
+        if (this._contentOffset === null){
+            this._contentOffset = JSPoint.Zero;
+        }
+        return this._contentOffset;
+    },
+
+    setContentOffset: function(contentOffset){
+        this._contentOffset = JSPoint(contentOffset);
+    },
+
+    _touchTracking: null,
+    _coasting: null,
+
+    _beginTrackingTouches: function(touches, event){
+        if (this._state !== UIGestureRecognizer.State.possible){
+            this._endCoasting();
+            this._setState(UIGestureRecognizer.State.ended);
+        }
+        var velocity = JSPoint.Zero;
+        if (this._coasting !== null){
+            velocity = this._coasting.velocity;
+        }
+        var touch = touches[0];
+        var location = touch.locationInWindow;
+        this._touchTracking = {
+            identifier: touches[0],
+            startingLocation: JSPoint(location),
+            location: location,
+            contentOffset: JSPoint(this.contentOffset),
+            timestamp: event.timestamp,
+            startingVelocity: velocity,
+            velocity: velocity
+        };
+        this._setState(UIGestureRecognizer.State.began);
+    },
+
+    _endTrackingTouches: function(){
+        this._touchTracking = null;
+    },
+
+    _beginCoasting: function(velocity){
+        this._coasting = {
+            timestamp: -1,
+            displayServer: this.view.layer._displayServer,
+            velocity: velocity
+        };
+        this._coasting.displayServer.schedule(this._displayUpdate, this);
+    },
+
+    _endCoasting: function(){
+        this._coasting = null;
+    },
+
+    touchesBegan: function(touches, event){
+        if (!this._scrollsVertically && !this._scrollsHorizontally){
+            return;
+        }
+        if (this._touchTracking === null){
+            this._beginTrackingTouches(touches, event);
+        }
+    },
+
+    touchesMoved: function(touches, event){
+        if (!this._scrollsVertically && !this._scrollsHorizontally){
+            return;
+        }
+        if (this._touchTracking === null){
+            this._beginTrackingTouches(touches, event);
+            if (this._touchTracking === null){
+                return;
+            }
+        }
+        var touch = event.touchForIdentifier(this._touchTracking.identifier);
+        if (touch === null){
+            touch = touches[0];
+        }
+        var location = touch.locationInWindow;
+        var delta = location.subtracting(this._touchTracking.startingLocation);
+        if (!this._scrollsVertically){
+            delta.y = 0;
+        }
+        if (!this._scrollsHorizontally){
+            delta.x = 0;
+        }
+        var offset = this._touchTracking.contentOffset.subtracting(delta);
+        offset.x = Math.round(offset.x);
+        offset.y = Math.round(offset.y);
+        delta = location.subtracting(this._touchTracking.location);
+        if (!this._scrollsVertically){
+            delta.y = 0;
+        }
+        if (!this._scrollsHorizontally){
+            delta.x = 0;
+        }
+        var dt = event.timestamp - this._touchTracking.timestamp;
+        this._touchTracking.location = location;
+        this._touchTracking.timestamp = event.timestamp;
+        if (dt > 0){
+            this._touchTracking.velocity = JSPoint(delta.x / dt, delta.y / dt);
+        }
+        if (!this.contentOffset.isEqual(offset)){
+            this.contentOffset = offset;
+            this._setState(UIGestureRecognizer.State.changed);
+        }
+    },
+
+    touchesEnded: function(touches, event){
+        if (!this._scrollsVertically && !this._scrollsHorizontally){
+            return;
+        }
+        var dt = event.timestamp - this._touchTracking.timestamp;
+        if (dt < 0.05){
+            this._beginCoasting(this._touchTracking.velocity);
+        }else{
+            this._setState(UIGestureRecognizer.State.ended);
+        }
+        this._endTrackingTouches();
+    },
+
+    touchesCanceled: function(touches, event){
+        if (!this._scrollsVertically && !this._scrollsHorizontally){
+            return;
+        }
+        this._endTrackingTouches();
+        this._setState(UIGestureRecognizer.State.ended);
+    },
+
+    _displayUpdate: function(t){
+        if (this._coasting === null){
+            return;
+        }
+        if (this._coasting.timestamp < 0){
+            this._coasting.timestamp = t;
+            this._coasting.displayServer.schedule(this._displayUpdate, this);
+            return;
+        }
+        if (this.view.window === null){
+            this._endCoasting();
+            return;
+        }
+        if ((this._scrollsHorizontally && Math.abs(this._coasting.velocity.x) >= 10) || (this._scrollsVertically && (Math.abs(this._coasting.velocity.y) >= 10))){
+            var dt = t - this._coasting.timestamp;
+            this._coasting.timestamp = t;
+            var delta = JSPoint(this._coasting.velocity.x * dt, this._coasting.velocity.y * dt);
+            var offset = this.contentOffset.subtracting(delta);
+            offset.x = Math.round(offset.x);
+            offset.y = Math.round(offset.y);
+            this.contentOffset = offset;
+            this._coasting.velocity.x *= 0.97;
+            this._coasting.velocity.y *= 0.97;
+            this._coasting.displayServer.schedule(this._displayUpdate, this);
+            this._setState(UIGestureRecognizer.State.changed);
+        }else{
+            this._endCoasting();
+            this._setState(UIGestureRecognizer.State.ended);
+        }
+    },
+
+});

package/Root/Frameworks/UIKit/UIStackView.js

@@ -220,6 +220,10 @@ JSClass("UIStackView", UIView, {
     getFirstBaselineOffsetFromTop: function(){
         var top = this._contentInsets.top;
         if (this._arrangedSubviews.length > 0){
+            if (this.axis === UIStackView.Axis.horizontal){
+                this.layoutIfNeeded();
+                top = this._arrangedSubviews[0].untransformedFrame.origin.y;
+            }
             top += this._arrangedSubviews[0].firstBaselineOffsetFromTop;
         }
         return top;

package/Root/Frameworks/UIKit/UIWindow.js

@@ -439,6 +439,9 @@ JSClass('UIWindow', UIView, {
         }
         this.windowServer.orderWindowFront(this);
         if (!this._isOpen){
+            if (this.closeAnimator !== null){
+                this.closeAnimator.stop();
+            }
             this._isOpen = true;
             if (this.openAnimator !== null){
                 this.openAnimator.start();

package/Root/Frameworks/UIKitTesting/Info.yaml

@@ -1,6 +1,6 @@
 JSBundleType: framework
 JSBundleIdentifier: io.breakside.JSKit.UIKitTesting
-JSBundleVersion: 2022.50.0
+JSBundleVersion: 2022.52.0
 JSDevelopmentLanguage: en
 JSCopyright: Copyright © 2020 Breakside Inc.
 JSLicenseNotice: |

package/Root/Templates/html/${PROJECT_NAME}/MainWindow.spec.yaml

@@ -19,8 +19,7 @@ MainViewController:
 
 MainView:
   class: UIView
-  backgroundColor:
-    rgba: 255,255,255
+  backgroundColor: background
   subviews:
     - /Label
     - /TestButton
@@ -30,8 +29,7 @@ Label:
   text: .helloWorld
   font:
     size: heading
-  textColor:
-    rgba: 51,51,51
+  textColor: text
   textAlignment: center
 
 TestButton:

package/Root/Templates/html/${PROJECT_NAME}/www/HTMLAppBootstrapper.js

@@ -7,13 +7,18 @@ window.HTMLAppBootstrapper = function(rootElement, jskitapp){
     if (this === undefined){
         return new HTMLAppBootstrapper(rootElement, jskitapp);
     }
-    this.app = jskitapp;
     this.rootElement = rootElement;
-    this.preflightID = jskitapp.preflightId;
-    this.preflightSrc = jskitapp.preflightSrc;
-    this.serviceWorkerSrc = jskitapp.serviceWorkerSrc;
-    this.appSrc = jskitapp.appSrc;
-    this.appCss = jskitapp.appCss;
+    if (jskitapp.TEMPLATE === "JSKIT_APP"){
+        window.bootstrapper = this;
+        this.app = null;
+    }else{
+        this.app = jskitapp;
+        this.preflightID = jskitapp.preflightId;
+        this.preflightSrc = jskitapp.preflightSrc;
+        this.serviceWorkerSrc = jskitapp.serviceWorkerSrc;
+        this.appSrc = jskitapp.appSrc;
+        this.appCss = jskitapp.appCss;
+    }
     this.status = HTMLAppBootstrapper.STATUS.notstarted;
     this.statusDispatchTimeoutID = null;
     this.preflightChecks = [];
@@ -45,7 +50,8 @@ HTMLAppBootstrapper.STATUS = {
     appRunning: 'appRunning',
     appLaunched: 'appLaunched',
     appLaunchFailure: 'appLaunchFailure',
-    appRequiresNoOtherInstances: 'appRequiresNoOtherInstances'
+    appRequiresNoOtherInstances: 'appRequiresNoOtherInstances',
+    appCrashed: 'appCrashed'
 };
 
 HTMLAppBootstrapper.prototype = {
@@ -62,6 +68,9 @@ HTMLAppBootstrapper.prototype = {
     },
 
     run: function(){
+        if (this.app === null){
+            return;
+        }
         this.log_info("boot", "Booting " + this.app.bundleId + ", build " + this.app.buildId);
         if (this.serviceWorkerSrc && window.navigator.serviceWorker){
             this._installUsingServiceWorker(window.navigator.serviceWorker);
@@ -209,6 +218,10 @@ HTMLAppBootstrapper.prototype = {
         this.setStatus(HTMLAppBootstrapper.STATUS.appLaunched);
     },
 
+    applicationDidCrash: function(application){
+        this.setStatus(HTMLAppBootstrapper.STATUS.appCrashed);
+    },
+
     include: function(src, async, callback, errorCallback){
         try{
             this.loadingScripts[src] = {
@@ -238,10 +251,12 @@ HTMLAppBootstrapper.prototype = {
     },
 
     setStatus: function(status){
-        this.log_info("status", this.status + " -> " + status);
+        if (status !== HTMLAppBootstrapper.STATUS.appCrashed){
+            this.log_info("status", this.status + " -> " + status);
+        }
         this.status = status;
         var bootstrapper = this;
-        if (status === HTMLAppBootstrapper.STATUS.appRunning || status === HTMLAppBootstrapper.STATUS.appLaunched){
+        if (status === HTMLAppBootstrapper.STATUS.appRunning || status === HTMLAppBootstrapper.STATUS.appLaunched || status === HTMLAppBootstrapper.STATUS.appCrashed){
             if (this.statusDispatchTimeoutID !== null){
                 clearTimeout(this.statusDispatchTimeoutID);
                 this.statusDispatchTimeoutID = null;