Merge branch 'master' of https://github.com/Kunduin/react-picture-annotation

Author: Kunduin

README.md

@@ -2,4 +2,191 @@
 
 [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/kunduin/react-picture-annotation/blob/master/LICENSE) [![Travis (.com)](https://img.shields.io/travis/com/kunduin/react-picture-annotation.svg)](https://travis-ci.com/Kunduin/react-picture-annotation) [![npm](https://img.shields.io/npm/v/react-picture-annotation.svg)](https://www.npmjs.com/package/react-picture-annotation) [![Greenkeeper badge](https://badges.greenkeeper.io/Kunduin/react-picture-annotation.svg)](https://greenkeeper.io/)
 
-**This project is under active development**
+A simple annotation component.
+
+![rect](./doc/rect.gif)
+
+## Install
+
+```Bash
+# npm
+npm install react-picture-annotation
+
+# yarn
+yarn add react-picture-annotation
+```
+
+## Basic Example
+
+[![Edit react-picture-annotation-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-picture-annotation-example-cw49e?fontsize=14)
+
+```jsx
+const App = () => {
+  const [pageSize, setPageSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
+  const onResize = () => {
+    setPageSize({ width: window.innerWidth, height: window.innerHeight });
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  const onSelect = selectedId => console.log(selectedId);
+  const onChange = data => console.log(data);
+
+  return (
+    <div className="App">
+      <ReactPictureAnnotation
+        image="https://source.unsplash.com/random/800x600"
+        onSelect={onSelect}
+        onChange={onChange}
+        width={pageSize.width}
+        height={pageSize.height}
+      />
+    </div>
+  );
+};
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<App />, rootElement);
+```
+
+## Props
+
+### AnnotationData `not required`
+
+**TYPE**
+
+```ts
+Array<IAnnotation>
+```
+
+see [IAnnotation](#iannotation)
+
+**COMMENT**
+
+Control the marked areas on the page.
+
+### selectedId `not required`
+
+**TYPE**
+
+```ts
+string | null;
+```
+
+**COMMENT**
+
+Control the selected shape.
+
+### onChange `required`
+
+**TYPE**
+
+```ts
+(annotationData: IAnnotation[]) => void
+```
+
+**COMMENT**
+
+Called every time the shape changes.
+
+### onSelected `required`
+
+**TYPE**
+
+```ts
+(id: string | null) => void
+```
+
+**COMMENT**
+
+Called each time the selection is changed.
+
+### width `required`
+
+**TYPE**
+
+```ts
+number;
+```
+
+**COMMENT**
+
+Width of the canvas.
+
+### height `required`
+
+**TYPE**
+
+```ts
+number;
+```
+
+**COMMENT**
+
+Height of the canvas.
+
+### image `required`
+
+**TYPE**
+
+```ts
+string;
+```
+
+**COMMENT**
+
+Image to be annotated.
+
+### inputElement `not required`
+
+**TYPE**
+
+```ts
+(value: string, onChange: (value: string) => void, onDelete: () => void) =>
+  React.ReactElement;
+```
+
+**COMMENT**
+
+Customizable input control.
+
+**EXAMPLE**
+
+```jsx
+<ReactPictureAnnotation
+  {...props}
+  inputElement={inputProps => <MyInput {...inputProps} />}
+/>
+```
+
+## Types
+
+### IAnnotation
+
+```js
+{
+  id:"to identify this shape",    // required,
+  comment:"string type comment",  // not required
+  mark:{
+    type:"RECT",                  // now only support rect
+
+    // The number of pixels in the upper left corner of the image
+    x:0,
+    y:0,
+
+    // The size of tag
+    width:0,
+    height:0
+  }
+}
+```
+
+## Licence
+
+[MIT License](https://github.com/kunduin/react-picture-annotation/blob/master/LICENSE)

doc/rect.gif

@@ -5,11 +5,11 @@ import { DefaultAnnotationState } from "./annotation/DefaultAnnotationState";
 import DefaultInputSection from "./DefaultInputSection";
 // import DeleteButton from "./DeleteButton";
 import { IShape, IShapeBase, RectShape, shapeStyle } from "./Shape";
-import { ITransformer } from "./Transformer";
+import Transformer, { ITransformer } from "./Transformer";
 
 interface IReactPictureAnnotationProps {
   annotationData?: IAnnotation[];
-  selectedId?: string;
+  selectedId?: string | null;
   onChange: (annotationData: IAnnotation[]) => void;
   onSelect: (id: string | null) => void;
   width: number;
@@ -191,14 +191,17 @@ export default class ReactPictureAnnotation extends React.Component<
 
       for (const item of this.shapes) {
         const isSelected = item.getAnnotationData().id === this.selectedId;
-
         const { x, y, height } = item.paint(
           this.canvas2D,
           this.calculateShapePosition,
           isSelected
         );
 
-        if (isSelected && this.currentTransformer) {
+        if (isSelected) {
+          if (!this.currentTransformer) {
+            this.currentTransformer = new Transformer(item);
+          }
+
           hasSelectedItem = true;
 
           this.currentTransformer.paint(

src/ReactPictureAnnotation.tsx

@@ -14,46 +14,51 @@ storiesOf("Hello World", module)
   .add("with text", () => {
     const AnnotationComponent = () => {
       const [size, setSize] = useState({
-        width: window.innerWidth,
-        height: window.innerHeight
+        width: window.innerWidth - 16,
+        height: window.innerHeight - 16
       });
 
-      const [image, setImage] = useState(
-        "https://bequank.oss-cn-beijing.aliyuncs.com/landpage/large/60682895_p0_master1200.jpg"
-      );
-
       const [annotationData, setAnnotationData] = useState<
         Array<IAnnotation<IShapeData>>
-      >([]);
+      >([
+        {
+          id: "a",
+          comment: "HA HA HA",
+          mark: {
+            type: "RECT",
+            width: 161,
+            height: 165,
+            x: 229,
+            y: 92
+          }
+        }
+      ]);
+
+      const [selectedId, setSelectedId] = useState<string | null>("a");
 
       const onResize = () => {
-        setSize({ width: window.innerWidth, height: window.innerHeight });
+        setSize({
+          width: window.innerWidth - 16,
+          height: window.innerHeight - 16
+        });
       };
 
       useEffect(() => {
         window.addEventListener("resize", onResize);
-        setTimeout(() => {
-          setImage(
-            "https://bequank.oss-cn-beijing.aliyuncs.com/landpage/large/20180904.jpg"
-          );
-          setAnnotationData([]);
-        }, 2000);
         return () => {
           window.removeEventListener("resize", onResize);
         };
       }, []);
 
       return (
-        // tslint:disable-next-line: jsx-no-lambda
         <ReactPictureAnnotation
           width={size.width}
           height={size.height}
           annotationData={annotationData}
-          // tslint:disable-next-line: jsx-no-lambda
           onChange={data => setAnnotationData(data)}
-          // tslint:disable-next-line: jsx-no-lambda
-          onSelect={() => null}
-          image={image}
+          selectedId={selectedId}
+          onSelect={e => setSelectedId(e)}
+          image="https://bequank.oss-cn-beijing.aliyuncs.com/landpage/large/60682895_p0_master1200.jpg"
         />
       );
     };