absolute-layout

tns-core-modules/ui/core/view-common.ts

@@ -1057,7 +1057,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     // }
 }
 
-function getLengthEffectiveValue(density: number, param: Length): number {
+export function getLengthEffectiveValue(density: number, param: Length): number {
     switch (param.unit) {
         case "px":
             return Math.round(param.value);

tns-core-modules/ui/layouts/absolute-layout/absolute-layout-common.ts

@@ -1,9 +1,19 @@
-import definition = require("ui/layouts/absolute-layout");
-import {LayoutBase} from "ui/layouts/layout-base";
-import {View} from "ui/core/view";
-import {PropertyMetadata} from "ui/core/proxy";
-import {Property, PropertyChangeData} from "ui/core/dependency-observable";
-import {registerSpecialProperty} from "ui/builder/special-properties";
+import { AbsoluteLayout as AbsoluteLayoutDefinition } from "ui/layouts/absolute-layout";
+import { LayoutBase, View, Property, Length, lengthComparer } from "ui/layouts/layout-base";
+
+export * from "ui/layouts/layout-base";
+
+declare module "ui/core/view" {
+    interface View {
+        left: Length;
+        top: Length;
+        effectiveLeft: number;
+        effectiveTop: number;
+    }
+}
+
+View.prototype.effectiveLeft = 0;
+View.prototype.effectiveTop = 0;
 
 function validateArgs(element: View): View {
     if (!element) {
@@ -12,65 +22,56 @@ function validateArgs(element: View): View {
     return element;
 }
 
-registerSpecialProperty("left", (instance, propertyValue) => {
-    AbsoluteLayout.setLeft(instance, !isNaN(+propertyValue) && +propertyValue);
-});
-registerSpecialProperty("top", (instance, propertyValue) => {
-    AbsoluteLayout.setTop(instance, !isNaN(+propertyValue) && +propertyValue);
-});
-
-export class AbsoluteLayout extends LayoutBase implements definition.AbsoluteLayout {
-    private static isValid(value: number): boolean {
-        return isFinite(value);
+export class AbsoluteLayoutBase extends LayoutBase implements AbsoluteLayoutDefinition {
+    // TODO: Do we still need this? it can be get like view.left
+    public static getLeft(element: View): Length {
+        return validateArgs(element).left;
     }
 
-    private static onLeftPropertyChanged(data: PropertyChangeData) {
-        var view = data.object;
-        if (view instanceof View) {
-            var layout = view.parent;
-            if (layout instanceof AbsoluteLayout) {
-                layout.onLeftChanged(view, data.oldValue, data.newValue);
-            }
-        }
+    // TODO: Do we still need this? it can be set like view.left=value
+    public static setLeft(element: View, value: Length): void {
+        validateArgs(element).left = value;
     }
 
-    private static onTopPropertyChanged(data: PropertyChangeData) {
-        var view = data.object;
-        if (view instanceof View) {
-            var layout = view.parent;
-            if (layout instanceof AbsoluteLayout) {
-                layout.onTopChanged(view, data.oldValue, data.newValue);
-            }
-        }
+    // TODO: Do we still need this? it can be get like view.top
+    public static getTop(element: View): Length {
+        return validateArgs(element).top;
     }
 
-    public static leftProperty = new Property("left", "AbsoluteLayout",
-        new PropertyMetadata(0, undefined, AbsoluteLayout.onLeftPropertyChanged, AbsoluteLayout.isValid));
-
-    public static topProperty = new Property("top", "AbsoluteLayout",
-        new PropertyMetadata(0, undefined, AbsoluteLayout.onTopPropertyChanged, AbsoluteLayout.isValid));
-
-    public static getLeft(element: View): number {
-        return validateArgs(element)._getValue(AbsoluteLayout.leftProperty);
+    // TODO: Do we still need this? it can be set like view.top=value
+    public static setTop(element: View, value: Length): void {
+        validateArgs(element).top = value;
     }
 
-    public static setLeft(element: View, value: number): void {
-        validateArgs(element)._setValue(AbsoluteLayout.leftProperty, value);
-    }
-
-    public static getTop(element: View): number {
-        return validateArgs(element)._getValue(AbsoluteLayout.topProperty);
-    }
-
-    public static setTop(element: View, value: number): void {
-        validateArgs(element)._setValue(AbsoluteLayout.topProperty, value);
-    }
-
-    protected onLeftChanged(view: View, oldValue: number, newValue: number) {
+    onLeftChanged(view: View, oldValue: Length, newValue: Length) {
         //
     }
 
-    protected onTopChanged(view: View, oldValue: number, newValue: number) {
+    onTopChanged(view: View, oldValue: Length, newValue: Length) {
         //
     }
-}
+}
+
+export const zeroLenth: Length = { value: 0, unit: "px" };
+
+export const leftProperty = new Property<View, Length>({
+    name: "left", defaultValue: zeroLenth,
+    valueChanged: (target, oldValue, newValue) => {
+        const layout = target.parent;
+        if (layout instanceof AbsoluteLayoutBase) {
+            layout.onLeftChanged(target, oldValue, newValue);
+        }
+    }, valueConverter: (v) => Length.parse(v)
+});
+leftProperty.register(AbsoluteLayoutBase);
+
+export const topProperty = new Property<View, Length>({
+    name: "top", defaultValue: zeroLenth,
+    valueChanged: (target, oldValue, newValue) => {
+        const layout = target.parent;
+        if (layout instanceof AbsoluteLayoutBase) {
+            layout.onTopChanged(target, oldValue, newValue);
+        }
+    }, valueConverter: (v) => Length.parse(v)
+});
+topProperty.register(AbsoluteLayoutBase);

tns-core-modules/ui/layouts/absolute-layout/absolute-layout.android.ts

@@ -1,10 +1,6 @@
-import utils = require("utils/utils");
-import common = require("./absolute-layout-common");
-import {View} from "ui/core/view";
-import {PropertyMetadata} from "ui/core/proxy";
-import {PropertyChangeData} from "ui/core/dependency-observable";
+import { AbsoluteLayoutBase, leftProperty, topProperty, Length, zeroLength } from "./absolute-layout-common";
 
-global.moduleMerge(common, exports);
+export * from "./absolute-layout-common";
 
 function setNativeProperty(data: PropertyChangeData, setter: (lp: org.nativescript.widgets.CommonLayoutParams) => void) {
     var view = data.object;
@@ -29,7 +25,7 @@ function setNativeTopProperty(data: PropertyChangeData) {
 (<PropertyMetadata>common.AbsoluteLayout.leftProperty.metadata).onSetNativeValue = setNativeLeftProperty;
 (<PropertyMetadata>common.AbsoluteLayout.topProperty.metadata).onSetNativeValue = setNativeTopProperty;
 
-export class AbsoluteLayout extends common.AbsoluteLayout {
+export class AbsoluteLayout extends AbsoluteLayoutBase {
 
     private _layout: org.nativescript.widgets.AbsoluteLayout;
 
@@ -44,4 +40,13 @@ export class AbsoluteLayout extends common.AbsoluteLayout {
     public _createUI() {
         this._layout = new org.nativescript.widgets.AbsoluteLayout(this._context);
     }
+
+    -------------------------
+    This should be defined with Object.DefineProperty on a View type........
+    get [leftProperty.native](): Length {
+        return zeroLength;
+    }
+    set [leftProperty.native](value: Length) {
+        return zeroLength;
+    }
 }

tns-core-modules/ui/layouts/absolute-layout/absolute-layout.d.ts

@@ -29,10 +29,10 @@
     /**
      * Represents the observable property backing the left property.
      */
-    export const leftProperty: Property<AbsoluteLayout, number>;
+    export const leftProperty: Property<View, number>;
 
     /**
      * Represents the observable property backing the top property.
      */
-    export const topProperty: Property<AbsoluteLayout, number>;
+    export const topProperty: Property<View, number>;
 }