@breakside/jskit 2022.24.0 → 2022.26.0

package/Root/Frameworks/UIKit/UIHTMLDisplayServerSVGContext.js

@@ -25,7 +25,6 @@
 // Context element
 // g
 //   shadow?
-//   tracking?
 //   backgroundColor?
 //   backgroundGradient?
 //   customDrawing?
@@ -35,7 +34,6 @@
 
 JSClass("UIHTMLDisplayServerSVGContext", UIHTMLDisplayServerContext, {
 
-    _trackingIndex: 0,
     _backgroundIndex: 0,
     _backgroundGradientIndex: 0,
     _sublayersIndex: 0,
@@ -56,15 +54,7 @@ JSClass("UIHTMLDisplayServerSVGContext", UIHTMLDisplayServerContext, {
         this.element.style.left = '0';
         this._definitions = _UIHTMLDisplayServerSVGContextDefs.initWithSVGElement(this.element);
         this.element.appendChild(this._definitions.element);
-        this._trackingPath = doc.createElementNS(SVGNamespace, "rect");
-        this._trackingPath.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 0);
-        this._trackingPath.x.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 0);
-        this._trackingPath.width.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 100);
-        this._trackingPath.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER, 100);
-        this._trackingPath.style.pointerEvents = 'all';
-        this._trackingPath.style.visibility = 'hidden';
-        this.element.appendChild(this._trackingPath);
-        this._sublayersIndex = 2;
+        this._sublayersIndex = 1;
     },
 
     initForScreenContext: function(screenContext){
@@ -134,10 +124,6 @@ JSClass("UIHTMLDisplayServerSVGContext", UIHTMLDisplayServerContext, {
         // only called for the root context, which has an svg element
         this.element.width.baseVal.value = size.width;
         this.element.height.baseVal.value = size.height;
-        if (this._trackingPath){
-            this._trackingPath.width.baseVal.value = size.width;
-            this._trackingPath.height.baseVal.value = size.height;
-        }
     },
 
     originTransform: null,
@@ -195,9 +181,6 @@ JSClass("UIHTMLDisplayServerSVGContext", UIHTMLDisplayServerContext, {
             if (this._shadowPath !== null){
                 this._updateShadowPath(layer);
             }
-            if (this._trackingPath !== null){
-                this._updateTrackingPath(layer);
-            }
             if (this._boundsClipPath !== null){
                 this._updateBoundsClipPath(layer);
             }
@@ -262,7 +245,6 @@ JSClass("UIHTMLDisplayServerSVGContext", UIHTMLDisplayServerContext, {
             this._shadowPath.style.fill = 'black';
             this.element.insertBefore(this._shadowPath, this.element.childNodes[0]);
             this._updateShadowPath(layer);
-            ++this._trackingIndex;
             ++this._backgroundIndex;
             ++this._backgroundGradientIndex;
             ++this._sublayersIndex;
@@ -539,68 +521,15 @@ JSClass("UIHTMLDisplayServerSVGContext", UIHTMLDisplayServerContext, {
     },
 
     // ----------------------------------------------------------------------
-    // MARK: - Tracking
-
-    _trackingPath: null,
-    trackingListener: null,
-
-    startMouseTracking: function(trackingType, listener, layer){
-        this._createTrackingPathIfNeeded(layer);
-        if (this.trackingListener !== null){
-            this._trackingPath.removeEventListener('mouseenter', this.trackingListener);
-            this._trackingPath.removeEventListener('mouseleave', this.trackingListener);
-            this._trackingPath.removeEventListener('mousemove', this.trackingListener);
-        }
-        this.trackingListener = listener;
-        if (trackingType & UIView.MouseTracking.enterAndExit){
-            this._trackingPath.addEventListener('mouseenter', this.trackingListener);
-            this._trackingPath.addEventListener('mouseleave', this.trackingListener);
-        }
-        if (trackingType & UIView.MouseTracking.move){
-            this._trackingPath.addEventListener('mousemove', this.trackingListener);
-        }
-    },
-
-    stopMouseTracking: function(){
-        if (this.trackingElement === null || this.trackingListener === null){
-            return;
-        }
-        this._trackingPath.removeEventListener('mouseenter', this.trackingListener);
-        this._trackingPath.removeEventListener('mouseleave', this.trackingListener);
-        this._trackingPath.removeEventListener('mousemove', this.trackingListener);
-        this.trackingListener = null;
-    },
-
-    _createTrackingPathIfNeeded: function(layer){
-        if (this._trackingPath !== null){
-            return null;
-        }
-        this._trackingPath = this.element.ownerDocument.createElementNS(SVGNamespace, "path");
-        this._trackingPath.style.pointerEvents = 'visible';
-        this._trackingPath.style.fill = 'none';
-        this._trackingPath.style.stroke = 'none';
-        this._updateTrackingPath(layer);
-        this.element.insertBefore(this._trackingPath, this.element.childNodes[this._trackingIndex]);
-        ++this._backgroundIndex;
-        ++this._backgroundGradientIndex;
-        ++this._sublayersIndex;
-    },
-
-    _updateTrackingPath: function(layer){
-        this._trackingPath.pathSegList.clear();
-        this._currentPath = this._trackingPath;
-        this.addBorderPathForLayerProperties(layer.presentation, UILayer.Path.shadow);
-        this._currentPath = null;
-    },
+    // MARK: - Cursor
 
     setCursor: function(cursor, layer){
         if (cursor === null){
-            if (this._trackingPath){
-                this._trackingPath.style.cursor = '';
+            if (this.element){
+                this.element.style.cursor = '';
             }
             return;
         }
-        this._createTrackingPathIfNeeded(layer);
         var cssCursorStrings = cursor.cssStrings();
         // UICursor.cssStrings() returns a set of css strings, one of which
         // should work in our browser, but some of which may fail because they
@@ -608,8 +537,8 @@ JSClass("UIHTMLDisplayServerSVGContext", UIHTMLDisplayServerContext, {
         // style.cursor is an empty string, so we'll keep going until it's
         // not an empty string, or we're out of options
         for (var i = 0, l = cssCursorStrings.length; i < l; ++i){
-            this._trackingPath.style.cursor = cssCursorStrings[i];
-            if (this._trackingPath.style.cursor !== ''){
+            this.element.style.cursor = cssCursorStrings[i];
+            if (this.element.style.cursor !== ''){
                 break;
             }
         }

package/Root/Frameworks/UIKit/UIHTMLTextField.js

@@ -267,6 +267,7 @@ JSClass("UIHTMLTextField", UIControl, {
         this.inputElement.style.margin = "0";
         this.inputElement.style.webkitAppearance = "none";
         this.inputElement.style.backgroundColor = "transparent";
+        this.inputElement.style.webkitTapHighlightColor = "transparent";
         // this.inputElement.style.cursor = "text";
         this.inputElement.style.outline = "none";
         this.inputElement.setAttribute("role", "textbox");
@@ -425,10 +426,15 @@ JSClass("UIHTMLTextField", UIControl, {
 
     drawLayerInContext: function(layer, context){
         UIHTMLTextField.$super.drawLayerInContext.call(this, layer, context);
+        this.inputElement.style.boxSizing = "border-box";
+        this.inputElement.style.paddingLeft = this._textInsets.left + "px";
+        this.inputElement.style.paddingRight = this._textInsets.right + "px";
+        this.inputElement.style.paddingTop = this._textInsets.top + "px";
+        this.inputElement.style.paddingBottom = this._textInsets.bottom + "px";
         this.inputElement.style.width = layer.element.style.width;
         this.inputElement.style.height = layer.element.style.height;
-        this.inputElement.value = this._text;
-        this.inputElement.placeholder = this._placeholder;
+        this.inputElement.value = this._text || "";
+        this.inputElement.placeholder = this._placeholder || "";
         var autocomplete = htmlAutocompleteByTextContentType[this._textContentType];
         if (autocomplete === ""){
             if (this._secureEntry){
@@ -486,7 +492,7 @@ JSClass("UIHTMLTextField", UIControl, {
     },
 
     updateElementInsets: function(){
-        var insets = JSInsets(this._textInsets);
+        var insets = JSInsets.Zero;
         if (this._leftAccessoryView !== null){
             insets.left += this._leftAccessoryInsets.width + this._leftAccessorySize.width;
         }

package/Root/Frameworks/UIKit/UIHTMLTextTypesetter.js

@@ -197,22 +197,7 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         var backgroundColor = attributes[JSAttributedString.Attribute.backgroundColor];
         span.style.color = textColor ? textColor.cssString() : 'black';
         span.style.backgroundColor = backgroundColor ? backgroundColor.cssString() : '';
-
-        // Cursor
-        var cursor = attributes[JSAttributedString.Attribute.cursor];
-        if (cursor){
-            var cssCursorStrings = cursor.cssStrings();
-            for (var i = 0, l = cssCursorStrings.length; i < l; ++i){
-                span.style.cursor = cssCursorStrings[i];
-                if (span.style.cursor !== ''){
-                    break;
-                }
-            }  
-            span.style.pointerEvents = 'all';              
-        }else{
-            span.style.cursor = '';
-            span.style.pointerEvents = 'none';
-        }
+        span.style.pointerEvents = 'none';
     },
 
     _styleAttachmentElementWithAttributes: function(span, attributes, attachment){
@@ -226,18 +211,6 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
         span.style.color = '';
         span.style.backgroundColor = '';
         span.style.pointerEvents = 'all';
-        var cursor = attributes[JSAttributedString.Attribute.cursor];
-        if (cursor){
-            var cssCursorStrings = cursor.cssStrings();
-            for (var i = 0, l = cssCursorStrings.length; i < l; ++i){
-                span.style.cursor = cssCursorStrings[i];
-                if (span.style.cursor !== ''){
-                    break;
-                }
-            }
-        }else{
-            span.style.cursor = '';
-        }
     },
 
     // MARK: - Private Helpers for Line Break Suggestion
@@ -272,7 +245,7 @@ JSClass("UIHTMLTextTypesetter", JSTextTypesetter, {
             }
             newline = iterator.isMandatoryLineBreak;
             printable = !newline && !iterator.isWhiteSpace;
-            attachment = runIterator.attachment;
+            attachment = attributes[JSAttributedString.Attribute.attachment] || null;
             if (attachment !== null){
                 attachment.layout(preferredFont, width);
                 usedWidth += attachment.size.width;

package/Root/Frameworks/UIKit/UIHTMLWindowServer.js

@@ -43,7 +43,6 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
         this.rootElement = rootElement;
         this.domDocument = this.rootElement.ownerDocument;
         this.domWindow = this.domDocument.defaultView;
-        this._cursorViewsById = {};
         this.setupRenderingEnvironment();
         this.setupEventListeners();
         this.startObservingAccessibilityNotifications();
@@ -112,24 +111,9 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
 
     // --------------------------------------------------------------------
     // MARK: - Cursor Management
-    
-    _cursorViewsById: null,
-    _isOverridingCursor: false,
-
-    viewDidChangeCursor: function(view, cursor){
-        if (cursor === null){
-            delete this._cursorViewsById[view.objecID];
-        }else{
-            this._cursorViewsById[view.objectID] = view;
-        }
-        if (!this._isOverridingCursor){
-            var context = this.displayServer.contextForLayer(view.layer);
-            context.setCursor(cursor, view.layer);
-        }
-    },
 
     hideCursor: function(){
-        this._setCursor(UICursor.none, true);
+        this._setCursor(UICursor.none);
     },
 
     unhideCursor: function(){
@@ -137,60 +121,11 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
     },
 
     setCursor: function(cursor){
-        this._setCursor(cursor, UICursor._stack.length > 1);
-    },
-
-    _setCursor: function(cursor, isOverride){
-        this.displayServer.screenContext.setCursor(cursor, null);
-        var id;
-        var view;
-        var context;
-        if (isOverride){
-            if (!this._isOverridingCursor){
-                this._isOverridingCursor = true;
-                for (id in this._cursorViewsById){
-                    context = this.displayServer.contextForLayer(this._cursorViewsById[id].layer);
-                    context.setCursor(null, this._cursorViewsById[id].layer);
-                }
-            }
-        }else{
-            if (this._isOverridingCursor){
-                this._isOverridingCursor = false;
-                for (id in this._cursorViewsById){
-                    view = this._cursorViewsById[id];
-                    context = this.displayServer.contextForLayer(view.layer);
-                    context.setCursor(view.cursor, view.layer);
-                }
-            }
-        }
+        this._setCursor(cursor);
     },
 
-    viewDidChangeMouseTracking: function(view, trackingType){
-        var context = this.displayServer.contextForLayer(view.layer);
-        var windowServer = this;
-        if (trackingType === UIView.MouseTracking.none){
-            context.stopMouseTracking();
-        }else{
-            var listener = {
-                handleEvent: function(e){
-                    e.stopPropagation();
-                    this[e.type](e);
-                },
-
-                mouseenter: function(e){
-                    windowServer._createMouseTrackingEventFromDOMEvent(e, UIEvent.Type.mouseEntered, view);
-                },
-
-                mouseleave: function(e){
-                    windowServer._createMouseTrackingEventFromDOMEvent(e, UIEvent.Type.mouseExited, view);
-                },
-
-                mousemove: function(e){
-                    windowServer._createMouseTrackingEventFromDOMEvent(e, UIEvent.Type.mouseMoved, view);
-                }
-            };
-            context.startMouseTracking(trackingType, listener, view.layer);
-        }
+    _setCursor: function(cursor){
+        this.displayServer.screenContext.setCursor(cursor);
     },
 
     // --------------------------------------------------------------------
@@ -395,6 +330,8 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
         if (this._draggingSession === null || this._draggingSession.source === null){
             this.resetMouseState(e.timeStamp / 1000.0);
         }
+        var modifiers = this._modifiersFromDOMEvent(e);
+        this.mouseDidMove(e.timeStamp / 1000.0, modifiers);
     },
 
     wheel: function(e){
@@ -409,16 +346,6 @@ JSClass("UIHTMLWindowServer", UIWindowServer, {
         this.createMouseEvent(type, timestamp, this.mouseLocation, modifiers);
     },
 
-    _createMouseTrackingEventFromDOMEvent: function(e, type, view){
-        this._updateMouseLocation(e);
-        var timestamp = e.timeStamp / 1000.0;
-        var modifiers = this._modifiersFromDOMEvent(e);
-        if (type === UIEvent.Type.mouseMoved){
-            this.mouseDidMove(timestamp, modifiers);
-        }
-        this.createMouseTrackingEvent(type, timestamp, this.mouseLocation, modifiers, view);
-    },
-
     _createScrollEventFromDOMEvent: function(e, type){
         var timestamp = e.timeStamp / 1000.0;
         var modifiers = this._modifiersFromDOMEvent(e);

package/Root/Frameworks/UIKit/UIImageLayer.js

@@ -19,13 +19,12 @@
 JSClass("UIImageLayer", UILayer, {
 
     image: JSDynamicProperty('_image', null),
-    imageFrame: JSDynamicProperty('_imageFrame', null),
+    imageFrame: UILayerAnimatedProperty(),
     templateColor: UILayerAnimatedProperty(),
     automaticRenderMode: JSDynamicProperty('_automaticRenderMode', JSImage.RenderMode.original),
 
     init: function(){
         UIImageLayer.$super.init.call(this);
-        this._imageFrame = JSRect.Zero;
         this.model.templateColor = JSColor.black;
     },
 
@@ -42,17 +41,20 @@ JSClass("UIImageLayer", UILayer, {
     },
 
     setImageFrame: function(imageFrame){
-        this._imageFrame = imageFrame;
-        this.setNeedsDisplay();
+        if (!imageFrame.isEqual(this.model.imageFrame)){
+            this._addImplicitAnimationForKey('imageFrame');
+            this.model.imageFrame = JSRect(imageFrame);
+            this.didChangeProperty('imageFrame');
+        }
     },
 
     drawInContext: function(context){
-        if (this._image !== null && this._imageFrame.size.width > 0 && this._imageFrame.size.height > 0){
+        if (this._image !== null && this.presentation.imageFrame.size.width > 0 && this.presentation.imageFrame.size.height > 0){
             if (this._image.renderMode === JSImage.RenderMode.template || (this._image.renderMode === JSImage.RenderMode.automatic && this._automaticRenderMode === JSImage.RenderMode.template)){
                 context.setFillColor(this.presentation.templateColor);
-                context.fillMaskedRect(this._imageFrame, this._image);
+                context.fillMaskedRect(this.presentation.imageFrame, this._image);
             }else{
-                context.drawImage(this._image, this._imageFrame);
+                context.drawImage(this._image, this.presentation.imageFrame);
             }
         }
     },
@@ -75,6 +77,11 @@ JSClass("UIImageLayer", UILayer, {
 
 UIImageLayer.Properties = Object.create(UILayer.Properties, {
 
+    imageFrame: {
+        writable: true,
+        value: JSRect.Zero
+    },
+
     templateColor: {
         writable: true,
         value: null

package/Root/Frameworks/UIKit/UILabel.js

@@ -32,7 +32,6 @@ JSClass('UILabel', UIView, {
     textInsets: UIViewLayerProperty(),
     allowsSelection: JSDynamicProperty('_allowsSelection', false),
     selectionColor: JSDynamicProperty("_selectionColor", null),
-    userInteractionEnabled: false,
     _accessibilityHidden: true,
 
     initWithFrame: function(frame){
@@ -40,10 +39,12 @@ JSClass('UILabel', UIView, {
         this.maximumNumberOfLines = 1;
         this.textColor = JSColor.text;
         this._selectionColor = JSColor.initWithUIStyles(JSColor.black.colorWithAlpha(0.2), JSColor.white.colorWithAlpha(0.2));
+        this.layer.textContainer.framesetter.typesetter.delegate = this;
     },
 
     initWithSpec: function(spec){
         UILabel.$super.initWithSpec.call(this, spec);
+        this.layer.textContainer.framesetter.typesetter.delegate = this;
         if (spec.containsKey("font")){
             this.font = spec.valueForKey("font", JSFont);
         }
@@ -373,6 +374,78 @@ JSClass('UILabel', UIView, {
         this._updateSelectionHighlightLayers();
     },
 
+    // -------------------------------------------------------------------------
+    // MARK: - Layout
+
+    sizeToFitSize: function(maxSize){
+        UILabel.$super.sizeToFitSize.call(this, maxSize);
+        this.updateMouseTrackingAreas();
+    },
+
+    layoutSubviews: function(){
+        UILabel.$super.layoutSubviews.call(this);
+        this.updateMouseTrackingAreas();
+    },
+
+    linkMouseTrackingAreas: null,
+
+    updateMouseTrackingAreas: function(){
+        UILabel.$super.updateMouseTrackingAreas.call(this);
+        if (this.linkMouseTrackingAreas === null && !this._userInteractionEnabled){
+            return;
+        }
+        if (this.linkMouseTrackingAreas === null){
+            this.linkMouseTrackingAreas = [];
+        }
+        var rects;
+        var rectIndex, rectCount;
+        var linkIndex = 0;
+        var range;
+        var attributes;
+        var attributedString = this.attributedText;
+        var end = attributedString.string.length;
+        var rect;
+        var area;
+        if (this._userInteractionEnabled){
+            range = attributedString.longestRangeOfAttributeAtIndex("link", 0);
+            attributes = attributedString.attributesAtIndex(range.location);
+            while (range.length > 0 && range.location < end){
+                if (attributes.link){
+                    rects = this.layer.textLayoutManager.rectsForCharacterRange(range);
+                    for (rectIndex = 0, rectCount = rects.length; rectIndex < rectCount; ++rectIndex, ++linkIndex){
+                        rect = rects[rectIndex];
+                        if (linkIndex < this.linkMouseTrackingAreas.length){
+                            area = this.linkMouseTrackingAreas[linkIndex];
+                            area.rect = rect;
+                        }else{
+                            area = UIMouseTrackingArea.initWithResponder(this, rect, UIMouseTrackingArea.TrackingType.enterAndExit);
+                            area.cursor = UICursor.pointingHand;
+                            this.linkMouseTrackingAreas.push(area);
+                            this.addMouseTrackingArea(area);
+                        }
+                    }
+                }
+                if (range.end == end){
+                    range = JSRange(end, 0);
+                }else{
+                    range = attributedString.longestRangeOfAttributeAtIndex("link", range.end);
+                    attributes = attributedString.attributesAtIndex(range.location);
+                }
+            }
+        }
+        for (var j = this.linkMouseTrackingAreas.length - 1; j >= linkIndex; --j){
+            area = this.linkMouseTrackingAreas.pop();
+            this.removeMouseTrackingArea(area);
+        }
+    },
+
+    userInteractionEnabled: JSDynamicProperty("_userInteractionEnabled", false),
+
+    setUserInteractionEnabled: function(userInteractionEnabled){
+        this._userInteractionEnabled = userInteractionEnabled;
+        this.updateMouseTrackingAreas();
+    },
+
     // -------------------------------------------------------------------------
     // MARK: - Accessibility
 

package/Root/Frameworks/UIKit/UIMouseTrackingArea.js

@@ -0,0 +1,55 @@
+// #import "UIResponder.js"
+"use strict";
+
+JSClass("UIMouseTrackingArea", UIResponder, {
+
+    responder: null,
+    rect: JSDynamicProperty("_rect", null),
+    trackingType: 0,
+    view: null,
+    cursor: null,
+    userInfo: null,
+    _entered: false,
+
+    initWithResponder: function(responder, rect, trackingType){
+        this.responder = responder;
+        this.rect = rect;
+        this.trackingType = trackingType;
+    },
+
+    setRect: function(rect){
+        this._rect = JSRect(rect);
+    },
+
+    containsPoint: function(location){
+        return this._rect.containsPoint(location);
+    },
+
+    mouseEntered: function(event){
+        if (this.cursor !== null){
+            this.cursor.set();
+        }else{
+            this.responder.mouseEntered(event);
+        }
+    },
+
+    mouseExited: function(event){
+        if (this.cursor !== null){
+            this.cursor.unset();
+        }else{
+            this.responder.mouseExited(event);
+        }
+    },
+
+    mouseMoved: function(event){
+        this.responder.mouseMoved(event);
+    },
+
+});
+
+UIMouseTrackingArea.TrackingType = {
+    none: 0,
+    move: 1,
+    enterAndExit: 2,
+    all: 3
+};

package/Root/Frameworks/UIKit/UIState.js

@@ -161,6 +161,29 @@ JSClass("UIState", JSObject, {
         var state = UIState.initWithPath(this._path);
         state._removeFileExtension();
         return state;
+    },
+
+    isEqual: function(other){
+        if (other === null || other === undefined){
+            return false;
+        }
+        return this._path === other._path;
+    },
+
+    beginsWithState: function(state){
+        if (state === null || state === undefined){
+            return false;
+        }
+        if (this._pathComponents.length < state._pathComponents.length){
+            return false;
+        }
+        var i, l;
+        for (i = 0, l = state._pathComponents.length; i < l; ++i){
+            if (this._pathComponents[i] != state._pathComponents[i]){
+                return false;
+            }
+        }
+        return true;
     }
 
 });