Merge pull request #65 from MasterCarl/master

Annotation creation using click instead of drag

Author: Kunduin

README.md

@@ -57,19 +57,20 @@ ReactDOM.render(<App />, rootElement);
 
 ## ReactPictureAnnotation Props
 
-| Name            | Type                                                                                            | Comment                                    | required |
-| --------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------ | -------- |
-| onChange        | `(annotationData: IAnnotation[]) => void`                                                       | Called every time the shape changes.       | √        |
-| onSelected      | `(id: string or null) => void`                                                                  | Called each time the selection is changed. | √        |
-| width           | `number`                                                                                        | Width of the canvas.                       | √        |
-| height          | `number`                                                                                        | Height of the canvas.                      | √        |
-| image           | `string`                                                                                        | Image to be annotated.                     | √        |
-| inputElement    | `(value: string,onChange: (value: string) => void,onDelete: () => void) => React.ReactElement;` | Customizable input control.                | X        |
-| annotationData  | `Array<IAnnotation>`                                                                            | Control the marked areas on the page.      | X        |
-| annotationStyle | `IShapeStyle`                                                                                   | Control the mark style                     | X        |
-| selectedId      | `string or null`                                                                                | Selected markId                            | X        |
-| scrollSpeed     | `number`                                                                                        | Speed of wheel zoom, default 0.0005        | X        |
-| marginWithInput | `number`                                                                                        | Margin between input and mark, default 1   | X        |
+| Name                  | Type                                                                                            | Comment                                    | required |
+| --------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------ | -------- |
+| onChange              | `(annotationData: IAnnotation[]) => void`                                                       | Called every time the shape changes.       | √        |
+| onSelected            | `(id: string or null) => void`                                                                  | Called each time the selection is changed. | √        |
+| width                 | `number`                                                                                        | Width of the canvas.                       | √        |
+| height                | `number`                                                                                        | Height of the canvas.                      | √        |
+| image                 | `string`                                                                                        | Image to be annotated.                     | √        |
+| inputElement          | `(value: string,onChange: (value: string) => void,onDelete: () => void) => React.ReactElement;` | Customizable input control.                | X        |
+| annotationData        | `Array<IAnnotation>`                                                                            | Control the marked areas on the page.      | X        |
+| annotationStyle       | `IShapeStyle`                                                                                   | Control the mark style                     | X        |
+| selectedId            | `string or null`                                                                                | Selected markId                            | X        |
+| scrollSpeed           | `number`                                                                                        | Speed of wheel zoom, default 0.0005        | X        |
+| marginWithInput       | `number`                                                                                        | Margin between input and mark, default 1   | X        |
+| defaultAnnotationSize | `number[]`                                                                                      | Size for annotations created by clicking.  | X        |
 
 ## IShapeStyle
 

src/ReactPictureAnnotation.tsx

@@ -24,6 +24,7 @@ interface IReactPictureAnnotationProps {
   height: number;
   image: string;
   annotationStyle: IShapeStyle;
+  defaultAnnotationSize?: number[];
   inputElement: (
     value: string,
     onChange: (value: string) => void,
@@ -85,6 +86,11 @@ export default class ReactPictureAnnotation extends React.Component<
   get annotationStyle() {
     return this.props.annotationStyle;
   }
+
+  get defaultAnnotationSize() {
+    return this.props.defaultAnnotationSize;
+  }
+
   public shapes: IShape[] = [];
   public scaleState = defaultState;
   public currentTransformer: ITransformer;

src/annotation/CreatingAnnotationState.ts

@@ -1,4 +1,5 @@
 import { ReactPictureAnnotation } from "index";
+import { IShape } from "Shape";
 import { IAnnotationState } from "./AnnotationState";
 import { DefaultAnnotationState } from "./DefaultAnnotationState";
 
@@ -32,11 +33,35 @@ export default class CreatingAnnotationState implements IAnnotationState {
     ) {
       shapes.push(data);
     } else {
-      this.context.selectedId = null;
-      onShapeChange();
+      if (data && this.applyDefaultAnnotationSize(data)) {
+        shapes.push(data);
+        onShapeChange();
+      } else {
+        this.context.selectedId = null;
+        onShapeChange();
+      }
     }
     setAnnotationState(new DefaultAnnotationState(this.context));
   };
 
+  private applyDefaultAnnotationSize = (shape: IShape) => {
+    if (this.context.selectedId) {
+      // Don't capture clicks meant to de-select another annotation.
+      return false;
+    }
+    if (
+      !this.context.defaultAnnotationSize ||
+      this.context.defaultAnnotationSize.length !== 2
+    ) {
+      return false;
+    }
+    const [width, height] = this.context.defaultAnnotationSize;
+    shape.adjustMark({
+      width,
+      height,
+    });
+    return true;
+  };
+
   public onMouseLeave = () => this.onMouseUp();
 }

stories/index.stories.tsx

@@ -66,6 +66,7 @@ storiesOf("Hello World", module)
             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