@triniwiz/nativescript-masonkit 1.0.0-beta.111 → 1.0.0-beta.112

package/common.d.ts

@@ -2,6 +2,7 @@ import { AddChildFromBuilder, CustomLayoutView, View as NSView, ViewBase as NSVi
 import { Display, Gap, GridAutoFlow, JustifyItems, JustifySelf, Length, LengthAuto, Overflow, Position, BoxSizing, VerticalAlign, FlexDirection, Float, Clear } from '.';
 import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
 import { fontInternalProperty, backgroundInternalProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
+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';
@@ -61,6 +62,13 @@ declare module '@nativescript/core/ui/styling/style' {
         transform: string;
     }
 }
+/**
+ * iOS: sets the frame of a Mason root, a Mason view whose parent is a core view. Core leaves
+ * the safe area to each view (`View._modifyNativeViewFrame`), so the root honours
+ * `iosOverflowSafeArea` the same way: when the frame grows past the safe area it lays out
+ * again at the new size. Like core views, it raises `layoutChanged` when the frame changes.
+ */
+export declare function setRootNativeViewFrame(view: any, nativeView: any, frame: CGRect): void;
 export declare function windowsMemberKind(child: any): 'run' | 'break' | 'text' | 'box';
 export declare function setWindowsInnerHTML(build: (view: any, html: string) => void): void;
 export declare class ViewBase extends CustomLayoutView implements AddChildFromBuilder {
@@ -168,6 +176,8 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     [floatProperty.setNative]: (value: any) => void;
     [cornerShapeProperty.setNative]: (value: any) => void;
     [boxShadowProperty.setNative]: (value: any) => void;
+    [originXProperty.setNative]: (value: number) => any;
+    [originYProperty.setNative]: (value: number) => any;
     [transformProperty.setNative]: (value: any) => void;
     _children: (NSView | {
         text?: string;
@@ -444,6 +454,8 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     get inset(): LengthAuto;
     set textOverFlow(value: CoreTypes.TextOverflowType);
     get textOverFlow(): CoreTypes.TextOverflowType;
+    updateNativeTransform(): any;
+    animate(options: any): any;
 }
 export declare function windowsFontSource(font: any): string;
 export declare class TextBase extends ViewBase {

package/common.js

@@ -9,6 +9,8 @@ import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowP
 import { fontInternalProperty, backgroundInternalProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
 import { _forceStyleUpdate } from './utils';
 import { borderRadiusCorners, composeBorderRadius, isCssLength, parseCornerRadius, toCamelCase } from './css-shorthands';
+import { originXProperty, originYProperty } from '@nativescript/core/ui/core/view';
+import { animateTransforms } from './css-keyframes';
 import { Style, nodeHelper, cssLengthToDip } from './style';
 import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
 import { parseCssTransform } from './css-transform';
@@ -174,6 +176,32 @@ function windowsBreakRun(child) {
     }
     return run;
 }
+/**
+ * iOS: sets the frame of a Mason root, a Mason view whose parent is a core view. Core leaves
+ * the safe area to each view (`View._modifyNativeViewFrame`), so the root honours
+ * `iosOverflowSafeArea` the same way: when the frame grows past the safe area it lays out
+ * again at the new size. Like core views, it raises `layoutChanged` when the frame changes.
+ */
+export function setRootNativeViewFrame(view, nativeView, frame) {
+    const adjusted = view.applySafeAreaInsets(frame) ?? 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.
+        const width = Utils.layout.toDevicePixels(adjusted.size.width);
+        const height = Utils.layout.toDevicePixels(adjusted.size.height);
+        const layout = view.ios.node.computedLayout;
+        if (Math.round(layout.width) !== Math.round(width) || Math.round(layout.height) !== Math.round(height)) {
+            view.ios.mason_computeWithSize(width, height);
+            view.ios.mason_markRootComputeAppliedWithSize(width, height);
+        }
+    }
+    const previous = view._masonRootFrame;
+    if (!previous || !CGRectEqualToRect(previous, adjusted)) {
+        view._masonRootFrame = adjusted;
+        view._raiseLayoutChangedEvent();
+    }
+}
 export function windowsMemberKind(child) {
     if (child[textNode_])
         return 'run';
@@ -3158,6 +3186,49 @@ export class ViewBase extends CustomLayoutView {
             }
         }
     }
+    // Core's scale/rotate/translate on Windows. Core's own TransformGroup never renders on a Mason
+    // element, so View.rotate etc. did nothing; they're set natively as one matrix instead. CSS
+    // keyframes and animate() play them per frame (css-keyframes.ts).
+    updateNativeTransform() {
+        if (!__WINDOWS__) {
+            // @ts-ignore
+            return super.updateNativeTransform?.();
+        }
+        const native = this.nativeViewProtected;
+        if (!native)
+            return;
+        const self = this;
+        NativeScript.Mason.Css.SetTransforms(native, typeof self.scaleX === 'number' ? self.scaleX : 1, typeof self.scaleY === 'number' ? self.scaleY : 1, self.rotate || 0, self.translateX || 0, self.translateY || 0, self.originX ?? 0.5, self.originY ?? 0.5);
+    }
+    animate(options) {
+        if (!__WINDOWS__ || !options || !('rotate' in options || 'scale' in options || 'translate' in options)) {
+            return super.animate(options);
+        }
+        // Core's storyboards would animate a transform that doesn't show on a Mason view.
+        const { rotate, scale, translate, ...rest } = options;
+        const core = ['opacity', 'backgroundColor', 'width', 'height'].some((key) => key in rest) ? super.animate(rest) : null;
+        const transforms = animateTransforms(this, options);
+        const promise = Promise.all([core, transforms.done]).then(() => undefined);
+        promise.cancel = () => {
+            transforms.cancel();
+            core?.cancel?.();
+        };
+        return promise;
+    }
+    [originXProperty.setNative](value) {
+        if (!__WINDOWS__) {
+            // @ts-ignore
+            return super[originXProperty.setNative]?.(value);
+        }
+        this.updateNativeTransform();
+    }
+    [originYProperty.setNative](value) {
+        if (!__WINDOWS__) {
+            // @ts-ignore
+            return super[originYProperty.setNative]?.(value);
+        }
+        this.updateNativeTransform();
+    }
     [transformProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
@@ -3176,7 +3247,7 @@ export class ViewBase extends CustomLayoutView {
                         NativeScript.Mason.Css.ClearTransform(nv);
                     else {
                         NativeScript.Mason.Css.ApplyTransform(nv, m[0], m[1], m[2], m[3], m[4], m[5]);
-                        nv.RenderTransformOrigin = { X: this.originX ?? 0.5, Y: this.originY ?? 0.5 };
+                        NativeScript.Mason.Css.SetTransformOrigin(nv, this.originX ?? 0.5, this.originY ?? 0.5);
                     }
                 }
                 catch (_) { }