Floorplan

This component can be used to render a floorplan, with optionally clickable shapes within it. The
floorplan can be panned and zoomed both on normal and touch devices. As an option, clicking on a
shape allows a popup to be shown around it and if a flag is set for it to be moved.

!screenshot.png

Props

- width: Number - width of floorplan control in pixels
- height: Number - height of floorplan control in pixels
- shapes: [Shape] - an array of shapes to render on the floorplan. See below for a definition of
Shape. required
- image: String - a url to an image that will be rendered as the floorplan's background image.
required
- imageRotation: Number - an optional number of degrees to rotate the floorplan.
- cursorTagText: String - Text to display in the cursor tag that is visible when no shape is
selected. Defaults to Click to add a doorway.
- onCreateShape: (Number, Number) => any - Called when the user clicks the background of the
floorplan without a shape selected, which typically would indicate a creation. The two arguments
are the x and y position of the click relative to the top left hand corner of the floorplan image.
- onShapeMovement: (String, Number, Number) - A shape that has its allowMovement flag enabled
has been moved. The first argument is the id of the shape, and the second two arguments are the x
and y coordinates that the shape has been moved to. This function is expected to update the
coordinates of the shape indicated by the first argument in the shapes prop in order for shape
movement to work properly.
- onShapeClick: (String) => any - Called when a shape has been clicked. The id of the clicked
shape is passed as the single argument to the callback.

$3

- id: String - id of the shape.
- shape: ReactElement - "shape" to render on the floorplan. Passed the contents of this object in
the shape prop along with a selected and isMoving flag, and expected to render a svg group
representing the shape.
- x: Number - X coordinate of the shape.
- y: Number - Y coordinate of the shape.
- width: Number - Width of the shape, used to calculate the shape's center.
- height: Number - Height of the shape, used to calculate the shape's center.
- allowMovement: Boolean - can this shape be moved when selected/
- popup: ReactElement - a component to render in the popup that is rendered when a shape is
selected.