Changed web part name, added alt text to image in properties, added properties to show\hide edit icon, made the title off and icon off by default, made aspect lock on by default

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

@@ -65,6 +65,8 @@ export interface IImageManipulationProps {
 export interface IImageManipulationState {
   settingPanel: SettingPanelType;
   redosettings: IImageManipulationSettings[];
+  lockAspectCrop: boolean;
+  lockAspectResize: boolean;
 }
 
 export class ImageManipulation extends React.Component<IImageManipulationProps, IImageManipulationState> {
@@ -82,7 +84,9 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
 
     this.state = {
       settingPanel: SettingPanelType.Closed,
-      redosettings: []
+      redosettings: [],
+      lockAspectCrop: true,
+      lockAspectResize: true
     };
     this.openPanel = this.openPanel.bind(this);
     this.setRotate = this.setRotate.bind(this);
@@ -602,17 +606,20 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
     return (<div>
       <Checkbox
         label={strings.LockAspect}
-        checked={!isNaN(crop.aspect)}
-        onChange={() => {
-          if (isNaN(crop.aspect)) {
+        checked={this.state.lockAspectCrop}
+        onChange={(e, checked) => {
+          // Toggle the lockAspect state when checkbox is checked/unchecked
+          this.setState({ lockAspectCrop: checked }, () => {
+            // Call the setCrop function with appropriate arguments based on the new state
+            if (this.state.lockAspectCrop) {
               this.setCrop(undefined, undefined, undefined, undefined, this.getAspect());
             } else {
               this.setCrop(undefined, undefined, undefined, undefined, undefined);
             }
-
+          });
         }}
-
       />
+
       <TextField
         label={strings.SourceX}
         value={'' + crop.sx}
@@ -642,13 +649,16 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
 
       <Checkbox
         label={strings.LockAspect}
-        checked={!isNaN(resize.aspect)}
+        checked={this.state.lockAspectResize}
         onChange={() => {
+          this.setState({ lockAspectResize: !this.state.lockAspectResize }, () => {
             if (isNaN(resize.aspect)) {
               this.setResize(undefined, undefined, this.getAspect());
             } else {
               this.setResize(undefined, undefined, undefined);
             }
+          })
+
 
         }}
 

samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json

@@ -12,12 +12,13 @@
   "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70",
     "group": { "default": "Other" },
-    "title": { "default": "react-image-editor" },
-    "description": { "default": "react-image-editor description" },
+    "title": { "default": "Advanced Image Editor" },
+    "description": { "default": "Add an image to the page, resize and edit the image." },
     "officeFabricIconFontName": "Page",
     "properties": {
-      "title": "react-image-editor Sample",
-      "showTitle":true,
+      "title": "Advanced Image Editor",
+      "showTitle":false,
+      "showEditIcon":false,
       "settings":[],
       "url":""
     }

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

@@ -79,7 +79,7 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
                 })
                 ,
                 PropertyPaneToggle('showEditIcon', {
-                  label: strings.ShowTitleFieldLabel
+                  label: strings.ShowEditIconFieldLabel
                 }),
                 PropertyPaneLabel('urlInfo',{text:`The selected image is at ${this.properties.url?this.properties.url:'Not yet selected'} `})
                 

samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx

@@ -54,11 +54,11 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
             title={this.props.title}
             updateProperty={this.props.updateTitleProperty} />
         }
-        {(isFilePickerOpen || isConfigured) && Environment.type !== EnvironmentType.Local && this.props.showEditIcon &&
+        {(isFilePickerOpen || (isConfigured && this.props.displayMode === DisplayMode.Edit)) && Environment.type !== EnvironmentType.Local &&
           <FilePicker
             isPanelOpen={isFilePickerOpen}
             accepts={['.gif', '.jpg', '.jpeg', '.png']}
-            buttonIcon='FileImage'
+            buttonIcon={'FileImage'}
             onSave={(filePickerResult: IFilePickerResult) => {
               this.setState({ isFilePickerOpen: false }, () => this._onUrlChanged(filePickerResult.fileAbsoluteUrl));
             }}

samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js

@@ -3,7 +3,7 @@ define([], function() {
     "PropertyPaneDescription": "",
     "BasicGroupName": "Web part configuration",
     "ShowTitleFieldLabel": "Show webpart title",
-    "showEditIcon": "Show edit icon",
+    "ShowEditIconFieldLabel": "Show edit icon",
     "AltTextFieldLabel":"Alt Text"
 
   }