From 20081500f545f240657960e5cb957a297264577a Mon Sep 17 00:00:00 2001
From: Ishai Sagi <Ishai.sagi@hideandseek.digital>
Date: Mon, 9 Sep 2024 13:38:46 +1000
Subject: [PATCH 1/3] properties to show\hide title and edit icon, property for
 alt and accessibility changes, show url in property pane

---
 samples/react-image-editor/README.md          |  2 ++
 .../ImageManipulation/ImageManipulation.tsx   |  4 ++-
 .../ReactImageEditorWebPart.ts                | 13 +++++++
 .../components/ReactImageEditor.tsx           | 36 +++++++++++--------
 .../webparts/reactImageEditor/loc/en-us.js    |  9 +++--
 .../reactImageEditor/loc/mystrings.d.ts       |  2 ++
 6 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/samples/react-image-editor/README.md b/samples/react-image-editor/README.md
index 0c13c3dab2..f6e4b85a53 100644
--- a/samples/react-image-editor/README.md
+++ b/samples/react-image-editor/README.md
@@ -66,6 +66,7 @@ References to office-ui-fabric-react version 5.x because of SharePoint 2019 Supp
 ## Contributors
 
 * [Peter Paul Kirschner](https://github.com/petkir) 
+* [Ishai Sagi] (http://github.com/ishaisagi-hns)
 
 Thanks to [celum](https://www.celum.com/) and [cubido](https://www.cubido.at/) to allow to share this code.
 
@@ -73,6 +74,7 @@ Thanks to [celum](https://www.celum.com/) and [cubido](https://www.cubido.at/) t
 
 Version|Date|Comments
 -------|----|--------
+1.1.0.0|Sep 09, 2024|Added properties and accessibility
 1.0.0.0|Mar 17, 2021|Initial release
 
 ## Minimal Path to Awesome
diff --git a/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx b/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
index 56093470dc..521a43ddc3 100644
--- a/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
+++ b/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
@@ -59,6 +59,7 @@ export interface IImageManipulationProps {
   editMode?: (mode: boolean) => void;
   configSettings: IImageManipulationConfig;
   displayMode: DisplayMode;
+  altText:string;
 }
 
 export interface IImageManipulationState {
@@ -109,6 +110,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
     this.img = new Image();
     this.img.src = url;
     this.img.crossOrigin = 'Anonymous';
+    this.img.alt=this.props.altText?this.props.altText:'Untitled image';
     this.img.onload = () => {
 
       this.applySettings();
@@ -305,7 +307,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
           <canvas className={this.getMaxWidth()}
             style={{ display: 'none' }}
             ref={this.setManipulateRef}></canvas>
-          <canvas className={this.getMaxWidth()} ref={this.setCanvasRef} ></canvas>
+          <canvas className={this.getMaxWidth()} ref={this.setCanvasRef} aria-label={this.props.altText} role='img' >Your browser does not support displaying canvas elements.</canvas>
           {this.state.settingPanel === SettingPanelType.Crop && (this.getCropGrid())}
           {this.state.settingPanel === SettingPanelType.Resize && (this.getResizeGrid())}
 
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts b/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
index 89971ca2e5..8f68c72ae9 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
@@ -4,6 +4,8 @@ import { Version } from '@microsoft/sp-core-library';
 import {
   BaseClientSideWebPart,
   IPropertyPaneConfiguration,
+  PropertyPaneLabel,
+  PropertyPaneTextField,
   PropertyPaneToggle
 } from '@microsoft/sp-webpart-base';
 
@@ -28,6 +30,10 @@ 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,
+        
+      
 
         updateTitleProperty: (value: string) => { this.properties.title = value; },
         updateUrlProperty: (value: string) => {
@@ -67,9 +73,16 @@ export default class ReactImageEditorWebPart extends BaseClientSideWebPart<IReac
             {
               groupName: strings.BasicGroupName,
               groupFields: [
+                PropertyPaneTextField('altText',{label:strings.AltTextFieldLabel}),
                 PropertyPaneToggle('showTitle', {
                   label: strings.ShowTitleFieldLabel
                 })
+                ,
+                PropertyPaneToggle('showEditIcon', {
+                  label: strings.ShowTitleFieldLabel
+                }),
+                PropertyPaneLabel('urlInfo',{text:`The selected image is at ${this.properties.url?this.properties.url:'Not yet selected'} `})
+                
               ]
             }
           ]
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx b/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
index 86c9ef5fd9..25aa699062 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
@@ -9,9 +9,11 @@ import { ImageManipulation, IImageManipulationSettings } from '../../../componen
 
 export interface IReactImageEditorBaseProps {
   showTitle: boolean;
+  showEditIcon: boolean;
   title: string;
   url?: string;
   settings?: IImageManipulationSettings[];
+  altText?:string;
 
 }
 
@@ -21,6 +23,7 @@ export interface IReactImageEditorProps extends IReactImageEditorBaseProps {
   updateTitleProperty: (value: string) => void;
   updateUrlProperty: (value: string) => void;
   updateManipulationSettingsProperty: (value: IImageManipulationSettings[]) => void;
+
 }
 
 export interface IReactImageEditorState {
@@ -46,10 +49,12 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
     return (
 
       <div className={styles.reactImageEditor}>
-        <WebPartTitle displayMode={this.props.displayMode}
-          title={this.props.title}
-          updateProperty={this.props.updateTitleProperty} />
-        {(isFilePickerOpen || isConfigured) && Environment.type !== EnvironmentType.Local &&
+        {this.props.showTitle &&
+          <WebPartTitle displayMode={this.props.displayMode}
+            title={this.props.title}
+            updateProperty={this.props.updateTitleProperty} />
+        }
+        {(isFilePickerOpen || isConfigured) && Environment.type !== EnvironmentType.Local && this.props.showEditIcon &&
           <FilePicker
             isPanelOpen={isFilePickerOpen}
             accepts={['.gif', '.jpg', '.jpeg', '.png']}
@@ -65,6 +70,7 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
 
             }}
             context={this.props.context}
+
           />}
 
         {!isConfigured ? (<Placeholder iconName='Edit'
@@ -73,16 +79,16 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
           buttonLabel='Configure'
           onConfigure={this._onConfigure} />) :
           (
-          <ImageManipulation
-            settings={this.props.settings}
-            configSettings={{
-              rotateButtons: [-90, -45, -30, 0, 30, 45, 90]
-            }
-            }
-            displayMode={this.props.displayMode}
-            settingsChanged={this._onSettingsChanged}
-            src={this.props.url}
-          />
+            <ImageManipulation
+              settings={this.props.settings}
+              configSettings={{
+                rotateButtons: [-90, -45, -30, 0, 30, 45, 90]
+              }
+              }
+              displayMode={this.props.displayMode}
+              settingsChanged={this._onSettingsChanged}
+              src={this.props.url} altText={this.props.altText}
+            />
           )}
 
       </div >
@@ -95,7 +101,7 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
         this._onUrlChanged(
           'https://media.gettyimages.com/photos/'
           + 'whitewater-paddlers-descend-vertical-waterfall-in-kayak-picture-id1256321293?s=2048x2048'
-          );
+        );
       });
     } else {
       this.setState({ isFilePickerOpen: true });
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js b/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js
index 147b8199be..33486e5a82 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js
@@ -1,7 +1,10 @@
 define([], function() {
   return {
-    "PropertyPaneDescription": "Description",
-    "BasicGroupName": "Group Name",
-    "ShowTitleFieldLabel": "Show webpart title"
+    "PropertyPaneDescription": "",
+    "BasicGroupName": "Web part configuration",
+    "ShowTitleFieldLabel": "Show webpart title",
+    "showEditIcon": "Show edit icon",
+    "AltTextFieldLabel":"Alt Text"
+
   }
 });
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts b/samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts
index 41bd420b97..8a99fe982b 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/loc/mystrings.d.ts
@@ -2,6 +2,8 @@ declare interface IReactImageEditorWebPartStrings {
   PropertyPaneDescription: string;
   BasicGroupName: string;
   ShowTitleFieldLabel: string;
+  ShowEditIconFieldLabel: string;
+  AltTextFieldLabel: string;
 }
 
 declare module 'ReactImageEditorWebPartStrings' {

From 7f60839f42a07522cb6f007b4795b866a8c6f97f Mon Sep 17 00:00:00 2001
From: Ishai Sagi <Ishai.sagi@hideandseek.digital>
Date: Mon, 9 Sep 2024 15:03:04 +1000
Subject: [PATCH 2/3] removing whitespaces

---
 .../webparts/reactImageEditor/components/ReactImageEditor.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx b/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
index 25aa699062..6a93b5ab92 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
@@ -13,7 +13,7 @@ export interface IReactImageEditorBaseProps {
   title: string;
   url?: string;
   settings?: IImageManipulationSettings[];
-  altText?:string;
+  altText?: string;
 
 }
 

From b4b24ca6259eb710eb163237bf23d6ee5e3f8acb Mon Sep 17 00:00:00 2001
From: Ishai Sagi <Ishai.Sagi@HideAndSeek.Digital>
Date: Thu, 3 Oct 2024 13:02:34 +1000
Subject: [PATCH 3/3] 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

---
 .../ImageManipulation/ImageManipulation.tsx   | 46 +++++++++++--------
 .../ReactImageEditorWebPart.manifest.json     |  9 ++--
 .../ReactImageEditorWebPart.ts                |  2 +-
 .../components/ReactImageEditor.tsx           |  4 +-
 .../webparts/reactImageEditor/loc/en-us.js    |  2 +-
 5 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx b/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
index 521a43ddc3..dd3a35d96b 100644
--- a/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
+++ b/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
@@ -59,12 +59,14 @@ export interface IImageManipulationProps {
   editMode?: (mode: boolean) => void;
   configSettings: IImageManipulationConfig;
   displayMode: DisplayMode;
-  altText:string;
+  altText: string;
 }
 
 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);
@@ -110,7 +114,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
     this.img = new Image();
     this.img.src = url;
     this.img.crossOrigin = 'Anonymous';
-    this.img.alt=this.props.altText?this.props.altText:'Untitled image';
+    this.img.alt = this.props.altText ? this.props.altText : 'Untitled image';
     this.img.onload = () => {
 
       this.applySettings();
@@ -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)) {
-            this.setCrop(undefined, undefined, undefined, undefined, this.getAspect());
-          } else {
-            this.setCrop(undefined, undefined, undefined, undefined, undefined);
-          }
-
+        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={() => {
-          if (isNaN(resize.aspect)) {
-            this.setResize(undefined, undefined, this.getAspect());
-          } else {
-            this.setResize(undefined, undefined, undefined);
-          }
+          this.setState({ lockAspectResize: !this.state.lockAspectResize }, () => {
+            if (isNaN(resize.aspect)) {
+              this.setResize(undefined, undefined, this.getAspect());
+            } else {
+              this.setResize(undefined, undefined, undefined);
+            }
+          })
+
 
         }}
 
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json b/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json
index 768987eae2..fecbedf0e9 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.manifest.json
+++ b/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":""
     }
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts b/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
index 8f68c72ae9..955d14a554 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/ReactImageEditorWebPart.ts
+++ b/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'} `})
                 
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx b/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
index 6a93b5ab92..2785a5ed4b 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
+++ b/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));
             }}
diff --git a/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js b/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js
index 33486e5a82..6f3b39b8c5 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/loc/en-us.js
+++ b/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"
 
   }