Merge pull request #5362 from ishaisagi-hns/image-aspect-fix

samples/react-image-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-editor",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "main": "lib/index.js",
   "engines": {
@@ -9,7 +9,8 @@
   "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
-    "test": "gulp test"
+    "test": "gulp test",
+    "ship": "gulp clean && gulp build && gulp bundle --ship && gulp package-solution --ship"
   },
   "dependencies": {
     "@microsoft/sp-core-library": "~1.4.0",

samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx

@@ -321,38 +321,71 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
   }
   private getCropGrid(): JSX.Element {
     const lastset: ICropSettings = this.getLastManipulation() as ICropSettings;
-    let lastdata: ICrop = { sx: 0, sy: 0, width: 0, height: 0 };
+    let lastdata: ICrop;
 
+    // Initialize crop data based on the current settings or default to aspect ratio
     if (lastset && lastset.type === ManipulationType.Crop) {
       lastdata = lastset;
+    } else {
+      const aspect = this.state.lockAspectCrop ? this.getAspect() : undefined;
+      lastdata = {
+        sx: 0,
+        sy: 0,
+        width: this.canvasRef ? this.canvasRef.width : 0,
+        height: this.state.lockAspectCrop && this.canvasRef && this.canvasRef.width && aspect
+          ? this.canvasRef.width / aspect
+          : this.canvasRef ? this.canvasRef.height : 0,
+      };
+      lastdata.aspect = aspect; // Set the aspect if the lock is enabled
     }
-    return (<ImageCrop
-      crop={lastdata}
-      showRuler
-      sourceHeight={this.img.height}
-      sourceWidth={this.img.width}
-      onChange={(crop) => {
-        this.setCrop(crop.sx, crop.sy, crop.width, crop.height, crop.aspect);
-      }
-      }
-    />);
+
+    console.log('Crop data passed to ImageCrop:', lastdata);
+
+    return (
+      <ImageCrop
+        crop={lastdata}
+        showRuler
+        sourceHeight={this.img.height}
+        sourceWidth={this.img.width}
+        onChange={(crop) => {
+          this.setCrop(crop.sx, crop.sy, crop.width, crop.height, crop.aspect);
+        }}
+      />
+    );
   }
 
   private getResizeGrid(): JSX.Element {
     const lastset: IResizeSettings = this.getLastManipulation() as IResizeSettings;
+    let lastdata: IResizeSettings;
+
+    // Initialize resize data based on the current settings or default to aspect ratio
     if (lastset && lastset.type === ManipulationType.Resize) {
-      return (<ImageGrid
-        width={lastset.width} height={lastset.height}
-        aspect={lastset.aspect}
-        onChange={(size) => this.setResize(size.width, size.height, lastset.aspect)}
-      />);
+      lastdata = lastset;
+    } else {
+      const aspect = this.state.lockAspectResize ? this.getAspect() : undefined;
+      lastdata = {
+        type: ManipulationType.Resize,
+        width: this.canvasRef ? this.canvasRef.width : 0,
+        height: this.state.lockAspectResize && this.canvasRef && this.canvasRef.width && aspect
+          ? this.canvasRef.width / aspect
+          : this.canvasRef ? this.canvasRef.height : 0,
+        aspect: aspect,
+      };
     }
-    return (<ImageGrid
-      onChange={(size) => this.setResize(size.width, size.height, undefined)}
-      // aspect={this.getAspect()}
-      width={this.canvasRef.width} height={this.canvasRef.height} />);
+
+    console.log('Resize data passed to ImageGrid:', lastdata);
+
+    return (
+      <ImageGrid
+        width={lastdata.width}
+        height={lastdata.height}
+        aspect={lastdata.aspect}
+        onChange={(size) => this.setResize(size.width, size.height, lastdata.aspect)}
+      />
+    );
   }
 
+
   private getMaxWidth(): string {
     const { settingPanel } = this.state;
     if (settingPanel === SettingPanelType.Crop || settingPanel === SettingPanelType.Resize) {

samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts

@@ -30,16 +30,24 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
         title: this.properties.title,
         url: this.properties.url,
         settings: this.properties.settings,
-        showEditIcon:this.properties.showEditIcon,
-        altText:this.properties.altText,
-
-
+        showEditIcon: this.properties.showEditIcon,
+        altText: this.properties.altText,
+        hideRecentTab: this.properties.hideRecentTab,
+        hideWebSearchTab: this.properties.hideWebSearchTab,
+        hideStockImages: this.properties.hideStockImages,
+        hideOrganisationalAssetTab: this.properties.hideOrganisationalAssetTab,
+        hideOneDriveTab: this.properties.hideOneDriveTab,
+        hideSiteFilesTab: this.properties.hideSiteFilesTab,
+        hideLocalUploadTab: this.properties.hideLocalUploadTab,        
+        hideLinkUploadTab: this.properties.hideLinkUploadTab,
+
+
 
         updateTitleProperty: (value: string) => { this.properties.title = value; },
         updateUrlProperty: (value: string) => {
-        // tslint:disable-next-line: curly
-        if (this.properties.url !== value)
-          this.properties.url = value;
+          // tslint:disable-next-line: curly
+          if (this.properties.url !== value)
+            this.properties.url = value;
           this.properties.settings = [];
           this.render();
         },
@@ -73,16 +81,56 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
             {
               groupName: strings.BasicGroupName,
               groupFields: [
-                PropertyPaneTextField('altText',{label:strings.AltTextFieldLabel}),
+                PropertyPaneTextField('altText', { label: strings.AltTextFieldLabel }),
                 PropertyPaneToggle('showTitle', {
                   label: strings.ShowTitleFieldLabel
                 })
                 ,
                 PropertyPaneToggle('showEditIcon', {
                   label: strings.ShowEditIconFieldLabel
                 }),
-                PropertyPaneLabel('urlInfo',{text:`The selected image is at ${this.properties.url?this.properties.url:'Not yet selected'} `})
-
+                PropertyPaneLabel('urlInfo', { text: `The selected image is at ${this.properties.url ? this.properties.url : 'Not yet selected'} ` }),
+                PropertyPaneToggle('hideRecentTab', {
+                  label: 'Hide Recent Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideWebSearchTab', {
+                  label: 'Hide Web Search Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideStockImages', {
+                  label: 'Hide Stock Images Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideOrganisationalAssetTab', {
+                  label: 'Hide Organisational Asset Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideOneDriveTab', {
+                  label: 'Hide OneDrive Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideSiteFilesTab', {
+                  label: 'Hide Site Files Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+                PropertyPaneToggle('hideLocalUploadTab', {
+                  label: 'Hide Local Upload Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),               
+                PropertyPaneToggle('hideLinkUploadTab', {
+                  label: 'Hide Link Upload Tab',
+                  onText: 'Yes',
+                  offText: 'No'
+                }),
+
               ]
             }
           ]