@triniwiz/nativescript-masonkit 1.0.0-beta.114 → 1.0.0-beta.116

package/common.d.ts

@@ -5,7 +5,7 @@ import { fontInternalProperty, backgroundInternalProperty, borderTopLeftRadiusPr
 import { originXProperty, originYProperty } from '@nativescript/core/ui/core/view';
 import { Style } from './style';
 import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderLeftProperty, borderTopProperty, borderRightProperty, borderBottomProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty } from './properties';
-import { isMasonView_, isTextChild_, isText_, native_, pseudoStyles_, eventType_ } from './symbols';
+import { isMasonView_, isTextChild_, isText_, native_, pseudoStyles_, eventType_, touchAction_ } from './symbols';
 import { TextNode } from './text-node';
 export interface MasonChild extends ViewBase {
 }
@@ -241,6 +241,9 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     }>;
     _registerNativeEvent(arg: string, callback: any, thisArg?: any): void;
     _unregisterNativeEvent(arg: string, callback: any, thisArg?: any): void;
+    [touchAction_]: number | undefined;
+    /** Hands `touch-action` to the native node, where the scroll views read it. */
+    _applyTouchAction(): void;
     initNativeView(): void;
     _setNativeViewFrame(nativeView: any, frame: CGRect): void;
     /**

package/common.js

@@ -15,7 +15,7 @@ import { Style, nodeHelper, cssLengthToDip } from './style';
 import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
 import { parseCssTransform } from './css-transform';
 import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderLeftProperty, borderTopProperty, borderRightProperty, borderBottomProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, installMasonSizeUnits, } from './properties';
-import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_, emptyTextNode_, breakRun_, anonymousText_, windowsFontSource_, hostsRuns_, needsAnonymousText_, borderRadiusCorners_, borderSideColors_, eventType_, runMember_, runsInline_, runsSettled_, blockified_ } from './symbols';
+import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_, emptyTextNode_, breakRun_, anonymousText_, windowsFontSource_, hostsRuns_, needsAnonymousText_, borderRadiusCorners_, borderSideColors_, eventType_, runMember_, runsInline_, runsSettled_, blockified_, touchAction_ } from './symbols';
 import { Tree } from './tree';
 import { masonEngine, removeNativeChild } from './windows-panel-helpers';
 import { TextNode } from './text-node';
@@ -183,8 +183,13 @@ function windowsBreakRun(child) {
  * again at the new size. Like core views, it raises `layoutChanged` when the frame changes.
  */
 export function setRootNativeViewFrame(view, nativeView, frame) {
+    // Place the view before adjusting, as core does: the safe-area math reads its
+    // position on screen, and a stale one applied the insets twice.
+    nativeView.frame = frame;
     const adjusted = view.applySafeAreaInsets(frame) ?? frame;
-    nativeView.frame = adjusted;
+    if (!CGRectEqualToRect(adjusted, frame)) {
+        nativeView.frame = adjusted;
+    }
     if (!CGRectEqualToRect(adjusted, frame)) {
         // Each measure pass lays the root out at the safe-area size again, so check the
         // computed size rather than whether the frame changed.
@@ -351,6 +356,13 @@ export class ViewBase extends CustomLayoutView {
         if (__ANDROID__) {
             this._isPaddingRelative = false;
         }
+        // Core's ContainerView defaults this to true: the view extends under the
+        // status bar and home indicator, and core layouts pad their children by
+        // the insets. Mason lays children out from its own style, so a root kept
+        // that default drew its content under the bars. As on the web, content
+        // stays in the safe area; set it to true for a full-bleed root (like
+        // `viewport-fit=cover`) and pad it yourself.
+        this.iosOverflowSafeArea = false;
     }
     get innerHTML() {
         if (__WINDOWS__)
@@ -585,8 +597,19 @@ export class ViewBase extends CustomLayoutView {
             }
         }
     }
+    /** Hands `touch-action` to the native node, where the scroll views read it. */
+    _applyTouchAction() {
+        const flags = this[touchAction_];
+        const native = this[native_];
+        if (flags === undefined || !native)
+            return;
+        const node = native.node ?? (__IOS__ ? this.ios?.node : undefined);
+        if (node)
+            node.touchAction = flags;
+    }
     initNativeView() {
         super.initNativeView();
+        this._applyTouchAction();
         if (this._pendingEventsRegistration.length > 0) {
             const pending = this._pendingEventsRegistration.splice(0);
             for (const registration of pending) {