Merge pull request #708 from sketch-hq/image-size-property

ImageData size property

Author: bomberstudios

CHANGELOG.json

@@ -1,6 +1,7 @@
 {
   "unreleased": [
-    "[New] Add `resizeToOriginalSize` method on `Image`"
+    "[New] Add `resizeToOriginalSize` method on `Image`",
+    "[New] Add `size` property on `ImageData`"
   ],
   "releases": {
     "63": ["[New] Updated `LibraryType` enum"],

Source/dom/models/ImageData.js

@@ -80,6 +80,19 @@ ImageData.define('nsdata', {
   },
 })
 
+ImageData.define('size', {
+  /**
+   * The size of the image.
+   *
+   * @return {object} The image's size.
+   */
+  get() {
+    const s = this._object.image().size()
+    const size = { width: parseFloat(s.width), height: parseFloat(s.height) }
+    return size
+  },
+})
+
 ImageData.define('id', {
   exportable: true,
   importable: false,

Source/dom/models/__tests__/ImageData.test.js

@@ -1,6 +1,6 @@
 /* globals expect, test */
 import { base64Image } from '../../../test-utils'
-import { Image } from '../..'
+import { Image, Rectangle } from '../..'
 
 test('should return an ImageData when accessing `image`', (context, document) => {
   const page = document.selectedPage
@@ -13,3 +13,30 @@ test('should return an ImageData when accessing `image`', (context, document) =>
   })
   expect(image.image.type).toBe('ImageData')
 })
+
+test('should return image size when accessing `size`', (context, document) => {
+  const page = document.selectedPage
+
+  const image = new Image({
+    parent: page,
+    image: {
+      base64: base64Image,
+    },
+  })
+  expect(image.image.size.width).toBe(50)
+  expect(image.image.size.height).toBe(50)
+})
+
+test('should return image size regardless of scale', (context, document) => {
+  const page = document.selectedPage
+
+  const image = new Image({
+    parent: page,
+    image: {
+      base64: base64Image,
+    },
+  })
+  image.frame = new Rectangle(0, 0, 300, 200)
+  expect(image.image.size.width).toBe(50)
+  expect(image.image.size.height).toBe(50)
+})

docs/api/Image.md

@@ -78,9 +78,15 @@ For performance reasons, Sketch initializes the `Image` object lazily. So if you
 var imageData = imageLayer.image
 
 imageData.nsimage // return a native NSImage
-image.nsdata // return a native NSData representation of the image
+imageData.nsdata // return a native NSData representation of the image
 ```
 
 An `ImageData` is a wrapper around a native `NSImage`.
 
 You can access the native `NSImage` with `nsimage` or a native `NSData` representation of the image with `nsdata`.
+
+```javascript
+imageLayer.image.size // { width: 100, height: 100 }
+```
+
+As a convenience, you can access the original size of an `ImageData` object via its `size` property.