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;
  xRef: RefObject<HTMLParagraphElement>;
  yRef: RefObject<HTMLParagraphElement>;
}

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
scale	number	Controlled zoom delta added on top of the computed fit-to-container scale (0 = just fit). Provide it to own the zoom from outside, e.g. to keep two instances on one screen independent. Omit for internal (uncontrolled) zoom.	optional
onScaleChange	(scale: number) => void	Called with the new zoom delta whenever the user zooms in/out or resets. Pair with scale for a controlled component, or use alone to persist the zoom level.	optional
scrollPosition	Point	Saved viewport-center position as a { x, y } fraction (0..1) of the scrollable area. Feed back the last value from onScrollChange to restore the scroll position on (re)mount instead of recentering. Pair with scale: persisting zoom without scroll leaves the image at the wrong position after a render.	optional
onScrollChange	(position: Point) => void	Called with the new viewport-center fraction whenever the user scrolls. Persist it and feed it back through scrollPosition to keep the view stable across remounts.	optional
storageKey	string	localStorage key under which the component persists its own zoom + scroll. When set, it restores the saved view on (re)mount and writes it back on every zoom/scroll — persistence with no scale/scrollPosition state to thread. Give each independent instance a distinct key; explicit scale/scrollPosition props still win when provided.	optional