Bpartners Annotator component

This is react library for rendering image and polygons using javascript's canvas.

Features

• Show image preview from url or file
• Show polygons preview
• Draw polygon
• Edit drawn polygon

Installing

npm i @bpartners/annotator-component

Example

Import the principal component

import { AnnotatorCanvas } from '@bpartners/annotator-component';

Use the AnnotatorCanvas component.

function App() {
  const [polygons, setPolygons] = useState<Polygon[]>([]);

  return (
    <div>
      <AnnotatorCanvas
        height='70vh'
        width='60vw'
        setPolygons={setPolygons}
        polygonList={polygons}
        image={image}
        allowAnnotation
        buttonsComponent={CustomButtonsComponent}
        zoom={20}
        markerPosition={markerPosition}
      />
    </div>
  );
}

Types

Polygon

interface Polygon {
  id: string; // default uuid
  fillColor: string;
  strokeColor: string;
  points: Point[]; // default []
  isInvisible?: boolean; // default false
  polygonLineSizeProps?: PolygonSizeProps; // default undefined
}

PolygonSizeProps

interface PolygonSizeProps {
  converterApiUrl: string; // default ""
  imageName: string; // default ""
  showLineSize: boolean; // default false
}

Point

interface Point {
  x: number;
  y: number;
}

interface ScaleCallbacks {
  scaleUp: () => void;
  scaleReste: () => void;
  scaleDown: () => void;
}

Props

Name	Type	Description
height	string	The height of the canvas	required
width	string	The width of the canvas	required
setPolygons	(polygons: Polygon[])=> void	Function to update the polygon list state	required
polygonList	Polygon	List of polygons to show	required
image	string,file	Image to show and to annotate	required
polygonLineSizeProps	PolygonLineSizeProps	Props to show polygon line & area measurement	optional
measurementMapper	(measurement: Measurement)=> Measurement	To map measurement before set it as the current state	optional
buttonsComponent	(callback: ScaleCallbacks) => ReactNode	Add a custom buttons component	optional
zoom	number	corresponds to those different zoom : BUILDINGS = 18 BUILDING = 19 HOUSES_0 = 20 HOUSES_1 = 21 HOUSES_2 = 22 HOUSE_PROPERTY = 23	required
markerPosition	Point	Position to put location marker	optional