From f1a0c0adffde64ead4204998efe5016e6a72824a Mon Sep 17 00:00:00 2001
From: ivankorol <ivan@xpl.ai>
Date: Sun, 9 Jan 2022 03:03:36 +0200
Subject: [PATCH] fix(src/reactpictureannotation.tsx): change of selectedId
 didn't changne selected transformer box

When change of selectedId was triggered programmatically by the application logic: only the
selection of the box and display of comment box took place, Transformer box was always stuck on
previously selected annotation. This did not happen when selection was changed by selecting new box
with the mouse, because Transformer was set in that scenario in DefaultAnnotationState.onMouseDown.
This was misleading the user. I added Next button in the storybook to reproduce the faulty behavior.
---
 src/ReactPictureAnnotation.tsx |  6 +++-
 src/Transformer.ts             |  3 +-
 stories/index.stories.tsx      | 65 +++++++++++++++++++++++-----------
 3 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/ReactPictureAnnotation.tsx b/src/ReactPictureAnnotation.tsx
index 3bf4b5f..24bdc3c 100644
--- a/src/ReactPictureAnnotation.tsx
+++ b/src/ReactPictureAnnotation.tsx
@@ -221,7 +221,11 @@ export default class ReactPictureAnnotation extends React.Component<
         );
 
         if (isSelected) {
-          if (!this.currentTransformer) {
+          if (
+            !this.currentTransformer ||
+            this.currentTransformer.shape.getAnnotationData().id !==
+              item.getAnnotationData().id
+          ) {
             this.currentTransformer = new Transformer(
               item,
               this.scaleState.scale
diff --git a/src/Transformer.ts b/src/Transformer.ts
index 054a985..419a70f 100644
--- a/src/Transformer.ts
+++ b/src/Transformer.ts
@@ -1,6 +1,7 @@
 import { IShape, IShapeBase } from "Shape";
 
 export interface ITransformer {
+  shape: IShape;
   checkBoundary: (positionX: number, positionY: number) => boolean;
   startTransformation: (positionX: number, positionY: number) => void;
   onTransformation: (positionX: number, positionY: number) => void;
@@ -12,7 +13,7 @@ export interface ITransformer {
 }
 
 export default class Transformer implements ITransformer {
-  private readonly shape: IShape;
+  public readonly shape: IShape;
   private currentNodeCenterIndex: number;
   private scale: number;
 
diff --git a/stories/index.stories.tsx b/stories/index.stories.tsx
index d919d26..61bddb0 100644
--- a/stories/index.stories.tsx
+++ b/stories/index.stories.tsx
@@ -53,28 +53,51 @@ storiesOf("Hello World", module)
         };
       }, []);
 
+      const onSelectNextClick = () => {
+        let i = 0;
+        let annotationId = "";
+        while (i < annotationData.length) {
+          if (annotationData[i].id === selectedId) {
+            if (i + 1 < annotationData.length) {
+              annotationId = annotationData[i + 1].id;
+            } else {
+              annotationId = annotationData[0].id;
+            }
+          }
+          i += 1;
+        }
+        setSelectedId(annotationId);
+      };
+
       return (
-        <ReactPictureAnnotation
-          width={size.width}
-          height={size.height}
-          annotationData={annotationData}
-          onChange={(data) => setAnnotationData(data)}
-          selectedId={selectedId}
-          onSelect={(e) => setSelectedId(e)}
-          annotationStyle={{
-            ...defaultShapeStyle,
-            shapeStrokeStyle: "#2193ff",
-            transformerBackground: "black",
-          }}
-          defaultAnnotationSize={[120, 90]}
-          image="https://bequank.oss-cn-beijing.aliyuncs.com/landpage/large/60682895_p0_master1200.jpg"
-          inputElement={(value, onChange, onDelete) => (
-            <DefaultInputSection
-              placeholder={"Hello world"}
-              {...{ value, onChange, onDelete }}
-            />
-          )}
-        />
+        <div>
+          <input
+            value={"Select next"}
+            type={"button"}
+            onClick={onSelectNextClick}
+          />
+          <ReactPictureAnnotation
+            width={size.width}
+            height={size.height}
+            annotationData={annotationData}
+            onChange={(data) => setAnnotationData(data)}
+            selectedId={selectedId}
+            onSelect={(e) => setSelectedId(e)}
+            annotationStyle={{
+              ...defaultShapeStyle,
+              shapeStrokeStyle: "#2193ff",
+              transformerBackground: "black",
+            }}
+            defaultAnnotationSize={[120, 90]}
+            image="https://bequank.oss-cn-beijing.aliyuncs.com/landpage/large/60682895_p0_master1200.jpg"
+            inputElement={(value, onChange, onDelete) => (
+              <DefaultInputSection
+                placeholder={"Hello world"}
+                {...{ value, onChange, onDelete }}
+              />
+            )}
+          />
+        </div>
       );
     };