definitions fixed

ui/image/image-common.ts

@@ -0,0 +1,186 @@
+import dependencyObservable = require("ui/core/dependency-observable");
+import view = require("ui/core/view");
+import proxy = require("ui/core/proxy");
+import imageSource = require("image-source");
+import definition = require("ui/image");
+import trace = require("trace");
+import enums = require("ui/enums");
+import utils = require("utils/utils");
+
+var SOURCE = "source";
+var URL = "url";
+var IMAGE = "Image";
+var ISLOADING = "isLoading";
+var STRETCH = "stretch";
+
+function isValidUrl(url: string): boolean {
+    var value = url ? url.trim() : "";
+    return value !== "" && (value.indexOf("~/") === 0 || value.indexOf("http://") === 0 || value.indexOf("https://") === 0);
+}
+
+function onUrlPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var image = <Image>data.object;
+    var value = data.newValue;
+
+    if (isValidUrl(value)) {
+        image.source = null;
+        image["_url"] = value;
+
+        if (value !== "") {
+
+            image._setValue(Image.isLoadingProperty, true);
+
+            if (value.trim().indexOf("~/") === 0) {
+                image.source = imageSource.fromFile(value.trim());
+                image._setValue(Image.isLoadingProperty, false);
+            } else {
+                imageSource.fromUrl(value).then((r) => {
+                    if (image["_url"] === value) {
+                        image.source = r;
+                        image._setValue(Image.isLoadingProperty, false);
+                    }
+                });
+            }
+        }
+    }
+}
+
+export class Image extends view.View implements definition.Image {
+
+    public static urlProperty = new dependencyObservable.Property(
+        URL,
+        IMAGE,
+        new proxy.PropertyMetadata(
+            "",
+            dependencyObservable.PropertyMetadataSettings.None,
+            onUrlPropertyChanged
+            )
+        );
+
+    public static sourceProperty = new dependencyObservable.Property(
+        SOURCE,
+        IMAGE,
+        new proxy.PropertyMetadata(
+            undefined,
+            dependencyObservable.PropertyMetadataSettings.None
+            )
+        );
+
+    public static isLoadingProperty = new dependencyObservable.Property(
+        ISLOADING,
+        IMAGE,
+        new proxy.PropertyMetadata(
+            false,
+            dependencyObservable.PropertyMetadataSettings.None
+            )
+        );
+
+    public static stretchProperty = new dependencyObservable.Property(
+        STRETCH,
+        IMAGE,
+        new proxy.PropertyMetadata(
+            enums.Stretch.aspectFit,
+            dependencyObservable.PropertyMetadataSettings.AffectsLayout
+            )
+        );
+
+    constructor(options?: definition.Options) {
+        super(options);
+    }
+
+    get source(): imageSource.ImageSource {
+        return this._getValue(Image.sourceProperty);
+    }
+    set source(value: imageSource.ImageSource) {
+        this._setValue(Image.sourceProperty, value);
+    }
+
+    get url(): string {
+        return this._getValue(Image.urlProperty);
+    }
+    set url(value: string) {
+        this._setValue(Image.urlProperty, value);
+    }
+
+    get isLoading(): boolean {
+        return this._getValue(Image.isLoadingProperty);
+    }
+
+    get stretch(): string {
+        return this._getValue(Image.stretchProperty);
+    }
+    set stretch(value: string) {
+        this._setValue(Image.stretchProperty, value);
+    }
+
+    public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
+
+        // We don't call super because we measure native view with specific size.     
+        var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
+        var widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
+
+        var height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
+        var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
+        trace.write(this + " :onMeasure: " + utils.layout.getMode(widthMode) + " " + width + ", " + utils.layout.getMode(heightMode) + " " + height, trace.categories.Layout);
+
+        var nativeWidth = this.source ? this.source.width : 0;
+        var nativeHeight = this.source ? this.source.height : 0;
+
+        var measureWidth = Math.max(nativeWidth, this.minWidth);
+        var measureHeight = Math.max(nativeHeight, this.minHeight);
+
+        var finiteWidth: boolean = widthMode !== utils.layout.UNSPECIFIED;
+        var finiteHeight: boolean = heightMode !== utils.layout.UNSPECIFIED;
+
+        if (nativeWidth !== 0 && nativeHeight !== 0 && (finiteWidth || finiteHeight)) {
+            var scale = Image.computeScaleFactor(width, height, finiteWidth, finiteHeight, nativeWidth, nativeHeight, this.stretch);
+            var resultW = nativeWidth * scale.width;
+            var resultH = nativeHeight * scale.height;
+
+            measureWidth = finiteWidth ? Math.min(resultW, width) : resultW;
+            measureHeight = finiteHeight ? Math.min(resultH, height) : resultH;
+
+            trace.write("Image stretch: " + this.stretch +
+                ", nativeWidth: " + nativeWidth +
+                ", nativeHeight: " + nativeHeight, trace.categories.Layout);
+        }
+
+        var widthAndState = view.View.resolveSizeAndState(measureWidth, width, widthMode, 0);
+        var heightAndState = view.View.resolveSizeAndState(measureHeight, height, heightMode, 0);
+
+        this.setMeasuredDimension(widthAndState, heightAndState);
+    }
+
+    private static computeScaleFactor(measureWidth: number, measureHeight: number, widthIsFinite: boolean, heightIsFinite: boolean, nativeWidth: number, nativeHeight: number, imageStretch: string): { width: number; height: number } {
+        var scaleW = 1;
+        var scaleH = 1;
+
+        if ((imageStretch === enums.Stretch.aspectFill || imageStretch === enums.Stretch.aspectFit || imageStretch === enums.Stretch.fill) &&
+            (widthIsFinite || heightIsFinite)) {
+
+            scaleW = (nativeWidth > 0) ? measureWidth / nativeWidth : 0;
+            scaleH = (nativeHeight > 0) ? measureHeight / nativeHeight : 0;
+
+            if (!widthIsFinite) {
+                scaleW = scaleH;
+            }
+            else if (!heightIsFinite) {
+                scaleH = scaleW;
+            }
+            else {
+                // No infinite dimensions.
+                switch (imageStretch) {
+                    case enums.Stretch.aspectFit:
+                        scaleH = scaleW < scaleH ? scaleW : scaleH;
+                        scaleW = scaleH;
+                        break;
+                    case enums.Stretch.aspectFill:
+                        scaleH = scaleW > scaleH ? scaleW : scaleH;
+                        scaleW = scaleH;
+                        break;
+                }
+            }
+        }
+        return { width: scaleW, height: scaleH };
+    }
+}

ui/image/image.android.ts

@@ -1,44 +1,58 @@
-
-import observable = require("ui/core/observable");
-import view = require("ui/core/view");
-import application = require("application");
-import imageSource = require("image-source");
+import imageCommon = require("ui/image/image-common");
+import dependencyObservable = require("ui/core/dependency-observable");
+import proxy = require("ui/core/proxy");
+import enums = require("ui/enums");
 
-export class Image extends view.View {
-    private static sourceProperty = "source";
-    private _source: imageSource.ImageSource;
-    private _android: android.widget.ImageView;
-
-    constructor() {
-        super();
-
-        // TODO: Verify that this is always true
-        var context = application.android.currentContext;
-        if (!context) {
-            // TODO: Delayed loading?
-        }
-
-        this._android = new android.widget.ImageView(context);
+// merge the exports of the common file with the exports of this file
+declare var exports;
+require("utils/module-merge").merge(imageCommon, exports);
 
+function onStretchPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var image = <Image>data.object;
+    if (!image.android) {
+        return;
     }
 
+    switch (data.newValue) {
+        case enums.Stretch.aspectFit:
+            image.android.setScaleType(android.widget.ImageView.ScaleType.FIT_CENTER);
+            break;
+        case enums.Stretch.aspectFill:
+            image.android.setScaleType(android.widget.ImageView.ScaleType.CENTER_CROP);
+            break;
+        case enums.Stretch.fill:
+            image.android.setScaleType(android.widget.ImageView.ScaleType.FIT_XY);
+            break;
+        case enums.Stretch.none:
+        default:
+            image.android.setScaleType(android.widget.ImageView.ScaleType.MATRIX);
+            break;
+    }
+}
+
+function onSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var image = <Image>data.object;
+    if (!image.android) {
+        return;
+    }
+
+    if (image.android) {
+        image.android.setImageBitmap(data.newValue ? data.newValue.android : null);
+    }
+}
+
+// register the setNativeValue callback
+(<proxy.PropertyMetadata>imageCommon.Image.sourceProperty.metadata).onSetNativeValue = onSourcePropertyChanged;
+(<proxy.PropertyMetadata>imageCommon.Image.stretchProperty.metadata).onSetNativeValue = onStretchPropertyChanged;
+
+export class Image extends imageCommon.Image {
+    private _android: android.widget.ImageView;
+
     get android(): android.widget.ImageView {
         return this._android;
     }
 
-    get source(): imageSource.ImageSource {
-        return this._source;
+    public _createUI() {
+        this._android = new android.widget.ImageView(this._context);
     }
-
-    set source(value: imageSource.ImageSource) {
-        this.setProperty(Image.sourceProperty, value);
-    }
-
-    public setNativeProperty(data: observable.PropertyChangeData) {
-        if (data.propertyName === Image.sourceProperty) {
-            this._source = data.value;
-            this._android.setImageBitmap(data.value.android);
-        } else if (true) {
-        }
-    }
-}
+}

ui/image/image.d.ts

@@ -1,11 +1,68 @@
-declare module "ui/image" {
-
+/**
+ * Contains the Image class, which represents an image widget.
+ */
+declare module "ui/image" {
+    import dependencyObservable = require("ui/core/dependency-observable");
     import imageSource = require("image-source");
+    import view = require("ui/core/view");
 
-    class Image {
+    /**
+     * Represents a class that provides functionality for loading and streching image(s).
+     */
+    export class Image extends view.View {
+        public static urlProperty: dependencyObservable.Property;
+        public static sourceProperty: dependencyObservable.Property;
+        public static isLoadingProperty: dependencyObservable.Property;
+        public static stretchProperty: dependencyObservable.Property;
+
+        /**
+         * Gets the native [android widget](http://developer.android.com/reference/android/widget/ImageView.html) that represents the user interface for this component. Valid only when running on Android OS.
+         */
         android: android.widget.ImageView;
-        ios: UIKit.UIImageView;
 
+        /**
+         * Gets the native iOS [UIImageView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImageView_Class/) that represents the user interface for this component. Valid only when running on iOS.
+         */
+        ios: UIImageView;
+
+        /**
+         * Gets or sets the image source of the image.
+         */
         source: imageSource.ImageSource;
+
+        /**
+         * Gets or sets the URL of the image.
+         */
+        url: string;
+
+        /**
+         * Gets a value indicating if the image is currently loading
+         */
+        isLoading: boolean;
+
+        /**
+         * Gets or sets the image stretch mode.
+         */
+        stretch: string;
     }
-}
+
+    /**
+     * Provides common options for creating an image.
+     */
+    export interface Options extends view.Options {
+        /**
+         * Gets or sets the image source of the image.
+         */
+        source: imageSource.ImageSource;
+
+        /**
+         * Gets or sets the URL of the image.
+         */
+        url: string;
+
+        /**
+         * Gets or sets the image stretch mode.
+         */
+        stretch: string;
+    }
+}

ui/image/image.ios.ts

@@ -1,36 +1,60 @@
-
-import observable = require("ui/core/observable");
-import view = require("ui/core/view");
-import imageSource = require("image-source");
+import imageCommon = require("ui/image/image-common");
+import dependencyObservable = require("ui/core/dependency-observable");
+import proxy = require("ui/core/proxy");
+import definition = require("ui/image");
+import enums = require("ui/enums");
 
-export class Image extends view.View {
-    private static sourceProperty = "source";
-    private _source: imageSource.ImageSource;
-    private _ios: UIKit.UIImageView;
+// merge the exports of the common file with the exports of this file
+declare var exports;
+require("utils/module-merge").merge(imageCommon, exports);
 
-    constructor() {
-        super();
-        this._ios = new UIKit.UIImageView();
+function onStretchPropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var image = <Image>data.object;
+
+    switch (data.newValue) {
+        case enums.Stretch.aspectFit:
+            image.ios.contentMode = UIViewContentMode.UIViewContentModeScaleAspectFit;
+            break;
+        case enums.Stretch.aspectFill:
+            image.ios.contentMode = UIViewContentMode.UIViewContentModeScaleAspectFill;
+            break;
+        case enums.Stretch.fill:
+            image.ios.contentMode = UIViewContentMode.UIViewContentModeScaleToFill;
+            break;
+        case enums.Stretch.none:
+        default:
+            image.ios.contentMode = UIViewContentMode.UIViewContentModeTopLeft;
+            break;
+    }
+}
+
+function onSourcePropertyChanged(data: dependencyObservable.PropertyChangeData) {
+    var image = <Image>data.object;
+    image.ios.image = data.newValue ? data.newValue.ios : null;
+
+    if (isNaN(image.width) || isNaN(image.height)) {
+        image.requestLayout();
+    }
+}
+
+// register the setNativeValue callback
+(<proxy.PropertyMetadata>imageCommon.Image.stretchProperty.metadata).onSetNativeValue = onStretchPropertyChanged;
+(<proxy.PropertyMetadata>imageCommon.Image.sourceProperty.metadata).onSetNativeValue = onSourcePropertyChanged;
+
+export class Image extends imageCommon.Image {
+    private _ios: UIImageView;
+    
+    constructor(options?: definition.Options) {
+        super(options);
+
+        //TODO: Think of unified way of setting all the default values.
+        this._ios = new UIImageView();
+        this._ios.contentMode = UIViewContentMode.UIViewContentModeScaleAspectFit;
+        this._ios.clipsToBounds = true;
+        super._prepareNativeView(this._ios);
     }
 
-    get ios(): UIKit.UIImageView {
+    get ios(): UIImageView {
         return this._ios;
     }
-
-    get source(): imageSource.ImageSource {
-        return this._source;
-    }
-
-    set source(value: imageSource.ImageSource) {
-        this.setProperty(Image.sourceProperty, value);
-    }
-
-    public setNativeProperty(data: observable.PropertyChangeData) {
-        if (data.propertyName === Image.sourceProperty) {
-            this._source = data.value;
-            this._ios.image = this._source.ios;
-            this._ios.sizeToFit();
-        } else if (true) {
-        }
-    }
 } 

ui/image/index.ts

@@ -1,2 +0,0 @@
-declare var module, require;
-module.exports = require("ui/image/image");

ui/image/package.json

@@ -0,0 +1,2 @@
+{ "name" : "image",
+  "main" : "image.js" }