From 245cb047df3b6381613be09c72dea916adb214ec Mon Sep 17 00:00:00 2001
From: Peter Paul Kirschner <peter@kirschner.zone>
Date: Tue, 23 Mar 2021 23:22:58 +0100
Subject: [PATCH] reorder

---
 .../ImageManipulation/ImageManipulation.tsx   | 39 ++++++++++---------
 .../components/ReactImageEditor.tsx           |  4 +-
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx b/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
index 1b64d3965..99a41c854 100644
--- a/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
+++ b/samples/react-image-editor/src/components/ImageManipulation/ImageManipulation.tsx
@@ -67,9 +67,11 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
     this.closeFilter = this.closeFilter.bind(this);
 
   }
+
   public componentDidMount(): void {
     this.imageChanged(this.props.src);
   }
+
   public componentDidUpdate(prevProps: IImageManipulationProps): void {
     if (prevProps.src !== this.props.src) {
       this.imageChanged(this.props.src);
@@ -92,6 +94,7 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
       }
     };
   }
+
   private applySettings(): void {
     this.canvasRef.width = this.img.width;
     this.canvasRef.height = this.img.height;
@@ -115,10 +118,10 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
         this.manipulateRef.height = currentheight;
         this.manipulateCtx.save();
         let nothingToDo: boolean = false;
+
         switch (element.type) {
           case ManipulationType.Flip:
             const filp = element as IFlipSettings;
-            ////#region
             if (filp.flipY) {
               this.manipulateCtx.translate(0, currentheight);
               this.manipulateCtx.scale(1, -1);
@@ -175,20 +178,6 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
               this.manipulateCtx.drawImage(this.bufferRef, 0, 0);
             }
             break;
-          case ManipulationType.Filter:
-            nothingToDo = true;
-            const filter = element as IFilterSettings;
-            var imageData = this.bufferCtx.getImageData(0, 0, currentwidth, currentheight);
-            switch (filter.filterType) {
-              case FilterType.Grayscale:
-                imageData = new GrayscaleFilter().process(imageData, currentwidth, currentheight, undefined, undefined);
-                break;
-              case FilterType.Sepia:
-                imageData = new SepiaFilter().process(imageData, currentwidth, currentheight, undefined, undefined);
-                break;
-            }
-            this.bufferCtx.putImageData(imageData, 0, 0);
-            break;
           case ManipulationType.Crop:
             const last = this.props.settings.length === index + 1;
             if (last && this.state.settingPanel === SettingPanelType.Crop) {
@@ -205,12 +194,27 @@ export class ImageManipulation extends React.Component<IImageManipulationProps,
               this.manipulateCtx.drawImage(this.bufferRef, sourceX, sourceY, newwidth, newheight, 0, 0, newwidth, newheight);
             }
             break;
-
           case ManipulationType.Resize:
             const resize = element as IResizeSettings;
             newwidth = resize.width;
             newheight = resize.height;
             this.manipulateCtx.drawImage(this.bufferRef, 0, 0);
+            break;
+          case ManipulationType.Filter:
+            nothingToDo = true;
+            const filter = element as IFilterSettings;
+            var imageData = this.bufferCtx.getImageData(0, 0, currentwidth, currentheight);
+            switch (filter.filterType) {
+              case FilterType.Grayscale:
+                imageData = new GrayscaleFilter().process(imageData, currentwidth, currentheight, undefined, undefined);
+                break;
+              case FilterType.Sepia:
+                imageData = new SepiaFilter().process(imageData, currentwidth, currentheight, undefined, undefined);
+                break;
+            }
+            this.bufferCtx.putImageData(imageData, 0, 0);
+            break;
+
         }
         this.manipulateCtx.restore();
 
@@ -254,9 +258,6 @@ this.canvasCtx.drawImage(this.bufferRef, sourceX, sourceY, sourceWidth, sourceHe
     //this.canvasctx.translate(this.canvasRef.width / 2 * -1, this.canvasRef.height / 2 * -1);
   }
 
-
-
-
   public render(): React.ReactElement<IImageManipulationProps> {
     return (
       <div className={styles.imageEditor} style={{
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 48cba2c39..940b4e754 100644
--- a/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
+++ b/samples/react-image-editor/src/webparts/reactImageEditor/components/ReactImageEditor.tsx
@@ -76,13 +76,13 @@ export default class ReactImageEditor extends React.Component<IReactImageEditorP
           onConfigure={this._onConfigure} />) :
           (
           <ImageManipulation
-            settings={settings}
+            settings={this.props.settings}
             configSettings={{
               rotateButtons: [-90, -45, -30, 0, 30, 45, 90]
             }
             }
             displayMode={DisplayMode.Edit}
-            settingsChanged={this.props.updateManipulationSettingsProperty}
+            settingsChanged={this._onSettingsChanged}
             src={url}
           />
           )}