Bugfix: change of selectedId didn't changne selected transformer box

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

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;
 

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>
       );
     };