@atlaskit/media-avatar-picker 23.0.0 → 23.1.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/media-avatar-picker
 
+## 23.1.0
+
+### Minor Changes
+
+- [`6c6bd435635`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c6bd435635) - TC-2422: add the ability for avatars to have different output sizes
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.0.0
 
 ### Major Changes

package/dist/cjs/avatar-picker-dialog/index.js

@@ -146,20 +146,21 @@ var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageNavigatorLoad", function (loadParams) {
       _this.exportCroppedImage = loadParams.export;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "exportCroppedImage", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "exportCroppedImage", function (outputSize) {
       return '';
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSaveClick", function () {
       var _this$props = _this.props,
           onImagePicked = _this$props.onImagePicked,
           onImagePickedDataURI = _this$props.onImagePickedDataURI,
-          onAvatarPicked = _this$props.onAvatarPicked;
+          onAvatarPicked = _this$props.onAvatarPicked,
+          outputSize = _this$props.outputSize;
       var _this$state = _this.state,
           selectedImage = _this$state.selectedImage,
           selectedAvatar = _this$state.selectedAvatar;
 
       if (selectedImage) {
-        var exportedCroppedImageURI = _this.exportCroppedImage();
+        var exportedCroppedImageURI = _this.exportCroppedImage(outputSize);
 
         if (onImagePicked) {
           onImagePicked((0, _mediaUi.dataURItoFile)(exportedCroppedImageURI), fixedCrop);

package/dist/cjs/image-navigator/index.js

@@ -170,12 +170,12 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
 
       _this.exportCrop();
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "exportCroppedImage", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "exportCroppedImage", function (outputSize) {
       var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
           imageElement = _assertThisInitialize.imageElement;
 
       if (imageElement) {
-        var canvas = (0, _viewport2.renderViewport)(_this.state.viewport, imageElement);
+        var canvas = (0, _viewport2.renderViewport)(_this.state.viewport, imageElement, document.createElement('canvas'), outputSize);
 
         if (canvas) {
           return canvas.toDataURL();

package/dist/cjs/predefined-avatar-list/index.js

@@ -35,9 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "23.0.0",
+	"version": "23.1.0",
 	"sideEffects": false
 }

package/dist/cjs/viewport/viewport-render.js

@@ -13,6 +13,7 @@ exports.radians = radians;
 
 var renderViewport = function renderViewport(viewport, image) {
   var canvas = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document.createElement('canvas');
+  var outputSize = arguments.length > 3 ? arguments[3] : undefined;
   var visibleSourceBounds = viewport.visibleSourceBounds,
       innerBounds = viewport.innerBounds,
       itemSourceBounds = viewport.itemSourceBounds,
@@ -20,8 +21,10 @@ var renderViewport = function renderViewport(viewport, image) {
   var sourceBounds = visibleSourceBounds;
   var width = innerBounds.width,
       height = innerBounds.height;
-  canvas.width = width;
-  canvas.height = height;
+  var targetSizeActual = outputSize !== null && outputSize !== void 0 ? outputSize : width;
+  var outputScaleFactor = targetSizeActual / width;
+  canvas.width = width * outputScaleFactor;
+  canvas.height = height * outputScaleFactor;
   var ctx = canvas.getContext('2d');
 
   if (ctx && image) {
@@ -34,13 +37,13 @@ var renderViewport = function renderViewport(viewport, image) {
 
       case 3:
         sourceBounds = sourceBounds.hFlipWithin(itemSourceBounds).vFlipWithin(itemSourceBounds);
-        ctx.translate(width, height);
+        ctx.translate(width * outputScaleFactor, height * outputScaleFactor);
         ctx.scale(-1, -1);
         break;
 
       case 4:
         sourceBounds = sourceBounds.vFlipWithin(itemSourceBounds);
-        ctx.translate(0, height);
+        ctx.translate(0, height * outputScaleFactor);
         ctx.scale(1, -1);
         break;
 
@@ -75,7 +78,7 @@ var renderViewport = function renderViewport(viewport, image) {
         break;
     }
 
-    ctx.drawImage(image, sourceBounds.x, sourceBounds.y, sourceBounds.width, sourceBounds.height, 0, 0, width, height);
+    ctx.drawImage(image, sourceBounds.x, sourceBounds.y, sourceBounds.width, sourceBounds.height, 0, 0, width * outputScaleFactor, height * outputScaleFactor);
     return canvas;
   } else {
     return null;

package/dist/es2019/avatar-picker-dialog/index.js

@@ -60,13 +60,14 @@ export class AvatarPickerDialog extends PureComponent {
       this.exportCroppedImage = loadParams.export;
     });
 
-    _defineProperty(this, "exportCroppedImage", () => '');
+    _defineProperty(this, "exportCroppedImage", outputSize => '');
 
     _defineProperty(this, "onSaveClick", () => {
       const {
         onImagePicked,
         onImagePickedDataURI,
-        onAvatarPicked
+        onAvatarPicked,
+        outputSize
       } = this.props;
       const {
         selectedImage,
@@ -74,7 +75,7 @@ export class AvatarPickerDialog extends PureComponent {
       } = this.state;
 
       if (selectedImage) {
-        const exportedCroppedImageURI = this.exportCroppedImage();
+        const exportedCroppedImageURI = this.exportCroppedImage(outputSize);
 
         if (onImagePicked) {
           onImagePicked(dataURItoFile(exportedCroppedImageURI), fixedCrop);

package/dist/es2019/image-navigator/index.js

@@ -110,13 +110,13 @@ export class ImageNavigator extends Component {
       this.exportCrop();
     });
 
-    _defineProperty(this, "exportCroppedImage", () => {
+    _defineProperty(this, "exportCroppedImage", outputSize => {
       const {
         imageElement
       } = this;
 
       if (imageElement) {
-        const canvas = renderViewport(this.state.viewport, imageElement);
+        const canvas = renderViewport(this.state.viewport, imageElement, document.createElement('canvas'), outputSize);
 
         if (canvas) {
           return canvas.toDataURL();

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "23.0.0",
+	"version": "23.1.0",
 	"sideEffects": false
 }

package/dist/es2019/viewport/viewport-render.js

@@ -1,5 +1,5 @@
 export const radians = deg => deg * (Math.PI / 180);
-export const renderViewport = (viewport, image, canvas = document.createElement('canvas')) => {
+export const renderViewport = (viewport, image, canvas = document.createElement('canvas'), outputSize) => {
   const {
     visibleSourceBounds,
     innerBounds,
@@ -11,8 +11,10 @@ export const renderViewport = (viewport, image, canvas = document.createElement(
     width,
     height
   } = innerBounds;
-  canvas.width = width;
-  canvas.height = height;
+  const targetSizeActual = outputSize !== null && outputSize !== void 0 ? outputSize : width;
+  const outputScaleFactor = targetSizeActual / width;
+  canvas.width = width * outputScaleFactor;
+  canvas.height = height * outputScaleFactor;
   const ctx = canvas.getContext('2d');
 
   if (ctx && image) {
@@ -25,13 +27,13 @@ export const renderViewport = (viewport, image, canvas = document.createElement(
 
       case 3:
         sourceBounds = sourceBounds.hFlipWithin(itemSourceBounds).vFlipWithin(itemSourceBounds);
-        ctx.translate(width, height);
+        ctx.translate(width * outputScaleFactor, height * outputScaleFactor);
         ctx.scale(-1, -1);
         break;
 
       case 4:
         sourceBounds = sourceBounds.vFlipWithin(itemSourceBounds);
-        ctx.translate(0, height);
+        ctx.translate(0, height * outputScaleFactor);
         ctx.scale(1, -1);
         break;
 
@@ -66,7 +68,7 @@ export const renderViewport = (viewport, image, canvas = document.createElement(
         break;
     }
 
-    ctx.drawImage(image, sourceBounds.x, sourceBounds.y, sourceBounds.width, sourceBounds.height, 0, 0, width, height);
+    ctx.drawImage(image, sourceBounds.x, sourceBounds.y, sourceBounds.width, sourceBounds.height, 0, 0, width * outputScaleFactor, height * outputScaleFactor);
     return canvas;
   } else {
     return null;

package/dist/esm/avatar-picker-dialog/index.js

@@ -114,7 +114,7 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
       _this.exportCroppedImage = loadParams.export;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "exportCroppedImage", function () {
+    _defineProperty(_assertThisInitialized(_this), "exportCroppedImage", function (outputSize) {
       return '';
     });
 
@@ -122,13 +122,14 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
       var _this$props = _this.props,
           onImagePicked = _this$props.onImagePicked,
           onImagePickedDataURI = _this$props.onImagePickedDataURI,
-          onAvatarPicked = _this$props.onAvatarPicked;
+          onAvatarPicked = _this$props.onAvatarPicked,
+          outputSize = _this$props.outputSize;
       var _this$state = _this.state,
           selectedImage = _this$state.selectedImage,
           selectedAvatar = _this$state.selectedAvatar;
 
       if (selectedImage) {
-        var exportedCroppedImageURI = _this.exportCroppedImage();
+        var exportedCroppedImageURI = _this.exportCroppedImage(outputSize);
 
         if (onImagePicked) {
           onImagePicked(dataURItoFile(exportedCroppedImageURI), fixedCrop);

package/dist/esm/image-navigator/index.js

@@ -138,12 +138,12 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
       _this.exportCrop();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "exportCroppedImage", function () {
+    _defineProperty(_assertThisInitialized(_this), "exportCroppedImage", function (outputSize) {
       var _assertThisInitialize = _assertThisInitialized(_this),
           imageElement = _assertThisInitialize.imageElement;
 
       if (imageElement) {
-        var canvas = renderViewport(_this.state.viewport, imageElement);
+        var canvas = renderViewport(_this.state.viewport, imageElement, document.createElement('canvas'), outputSize);
 
         if (canvas) {
           return canvas.toDataURL();

package/dist/esm/predefined-avatar-list/index.js

@@ -5,9 +5,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "23.0.0",
+	"version": "23.1.0",
 	"sideEffects": false
 }

package/dist/esm/viewport/viewport-render.js

@@ -3,6 +3,7 @@ export var radians = function radians(deg) {
 };
 export var renderViewport = function renderViewport(viewport, image) {
   var canvas = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : document.createElement('canvas');
+  var outputSize = arguments.length > 3 ? arguments[3] : undefined;
   var visibleSourceBounds = viewport.visibleSourceBounds,
       innerBounds = viewport.innerBounds,
       itemSourceBounds = viewport.itemSourceBounds,
@@ -10,8 +11,10 @@ export var renderViewport = function renderViewport(viewport, image) {
   var sourceBounds = visibleSourceBounds;
   var width = innerBounds.width,
       height = innerBounds.height;
-  canvas.width = width;
-  canvas.height = height;
+  var targetSizeActual = outputSize !== null && outputSize !== void 0 ? outputSize : width;
+  var outputScaleFactor = targetSizeActual / width;
+  canvas.width = width * outputScaleFactor;
+  canvas.height = height * outputScaleFactor;
   var ctx = canvas.getContext('2d');
 
   if (ctx && image) {
@@ -24,13 +27,13 @@ export var renderViewport = function renderViewport(viewport, image) {
 
       case 3:
         sourceBounds = sourceBounds.hFlipWithin(itemSourceBounds).vFlipWithin(itemSourceBounds);
-        ctx.translate(width, height);
+        ctx.translate(width * outputScaleFactor, height * outputScaleFactor);
         ctx.scale(-1, -1);
         break;
 
       case 4:
         sourceBounds = sourceBounds.vFlipWithin(itemSourceBounds);
-        ctx.translate(0, height);
+        ctx.translate(0, height * outputScaleFactor);
         ctx.scale(1, -1);
         break;
 
@@ -65,7 +68,7 @@ export var renderViewport = function renderViewport(viewport, image) {
         break;
     }
 
-    ctx.drawImage(image, sourceBounds.x, sourceBounds.y, sourceBounds.width, sourceBounds.height, 0, 0, width, height);
+    ctx.drawImage(image, sourceBounds.x, sourceBounds.y, sourceBounds.width, sourceBounds.height, 0, 0, width * outputScaleFactor, height * outputScaleFactor);
     return canvas;
   } else {
     return null;

package/dist/types/avatar-picker-dialog/index.d.ts

@@ -26,7 +26,7 @@ export declare class AvatarPickerDialog extends PureComponent<AvatarPickerDialog
      * Initialised with no-op function.  Is assigned cropped image exporting
      * function when internal ImageCropper mounts via this.onImageNavigatorLoad
      */
-    exportCroppedImage: () => string;
+    exportCroppedImage: (outputSize?: number | undefined) => string;
     onSaveClick: () => void;
     onShowMore: () => void;
     onGoBack: () => void;

package/dist/types/avatar-picker-dialog/types.d.ts

@@ -35,6 +35,8 @@ export interface AvatarPickerDialogProps {
     isLoading?: boolean;
     /** This property decribe the text related to the Avatar. */
     predefinedAvatarsText?: string;
+    /** The target width/height of the resulting (square) avatar. Leave blank for default (200x200) */
+    outputSize?: number;
 }
 export interface AvatarPickerDialogState {
     mode: Mode;

package/dist/types/image-navigator/index.d.ts

@@ -4,7 +4,7 @@ import { WrappedComponentProps } from 'react-intl-next';
 import { Vector2 } from '@atlaskit/media-ui';
 import { Viewport } from '../viewport';
 export interface LoadParameters {
-    export: () => string;
+    export: (outputSize?: number) => string;
 }
 export declare type OnLoadHandler = (params: LoadParameters) => void;
 export declare const viewport: Viewport;
@@ -55,7 +55,7 @@ export declare class ImageNavigator extends Component<Props & WrappedComponentPr
      * @param height the height of the image
      */
     onImageLoaded: (image: HTMLImageElement) => void;
-    exportCroppedImage: () => string;
+    exportCroppedImage: (outputSize?: number | undefined) => string;
     exportCrop(): void;
     validateFile(imageFile: File): string | null;
     readFile(imageFile: File): Promise<void>;

package/dist/types/viewport/viewport-render.d.ts

@@ -1,3 +1,3 @@
 import { Viewport } from './viewport';
 export declare const radians: (deg: number) => number;
-export declare const renderViewport: (viewport: Viewport, image: HTMLImageElement, canvas?: HTMLCanvasElement) => HTMLCanvasElement | null;
+export declare const renderViewport: (viewport: Viewport, image: HTMLImageElement, canvas?: HTMLCanvasElement, outputSize?: number | undefined) => HTMLCanvasElement | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-avatar-picker",
-  "version": "23.0.0",
+  "version": "23.1.0",
   "description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,12 +27,12 @@
   },
   "dependencies": {
     "@atlaskit/button": "^16.0.0",
-    "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/media-ui": "^18.0.0",
+    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/media-ui": "^19.0.0",
     "@atlaskit/modal-dialog": "^12.2.0",
-    "@atlaskit/range": "^5.1.0",
+    "@atlaskit/range": "^6.0.0",
     "@atlaskit/spinner": "^15.0.0",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/theme": "^12.1.0",
     "@babel/runtime": "^7.0.0",
     "exenv": "^1.2.2"
   },
@@ -42,11 +42,10 @@
     "styled-components": "^3.2.6"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/docs": "*",
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/media-test-helpers": "^29.0.0",
-    "@atlaskit/page": "^12.0.0",
+    "@atlaskit/media-test-helpers": "^29.1.0",
+    "@atlaskit/page": "^12.1.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@types/enzyme": "^3.1.15",
     "enzyme": "^3.10.0",