Lazarus Location Selector

This is a react component that allows the user to select a location on a body diagram. The component will zoom into the first selection, allowing the user to either continue or move the selector again to a more specific location.

This component will return a locationData object containing the coordinates as percentages, and a general body-part name (e.g. left hand, abdomen, face)

For a more responsive version, use lazarus-location-selector-v2

Installation

npm install lazarus-location-selector

Usage

import {LocationSelector} from 'lazarus-location-selector'

Props

props: {
  onClickCancel: f() /* triggered by clicking "x" in upper-left corner */
  getLocationData: f() /* will store location data */
  sex: 'male' || 'female' /* defaults to 'male' */
  isOverlay: boolean /* shows instructions, location, and buttons when true */
  onChangeSelection: f() /* is passed ('body part', [x, y]) */
  isView2: boolean /* when true, zooms into area currently selected */
}

Overlay

If props.isOverlay:

• buttons and text appear over the image (e.g. first 2 images above)

• onClickCancel is required for 'x' button in upper left corner to function

If !props.isOverlay:

• Only button to appear is the image flip button (e.g. 3rd image above)

• props.onChangeSelection is necessary to display the currently selected body part in parent element

• props.isView2 is necessary to zoom into selection

Example location data

{
  Front: true,
  MoleCoordinates: [49, 44],
  MoleLocation: 'right arm',
  Time: 1624396481604,
}

Notes:

Explicitly declare height of LocationSelector's parent to ensure that first image and "zoomed" image are the same height

onCropComplete (View1.js) method visualization:

Guide to publishing react component used for this build: https://levelup.gitconnected.com/publish-react-components-as-an-npm-package-7a671a2fb7f