0.1.8-beta-0.3 • Published 21 days ago
map-builder-canvas v0.1.8-beta-0.3
Map Builder Canvas
About
An indoor map builder built using Canvas API which helps to draw map elements, track elements and gateways in your react application.
Content
Features
- Zoom and Pan
- Drawing and plotting of map elements, track elements and gateways.
- Undo and Redo
- The left panel contains the list of elements
- The right panel to edit the properties of elements
Installation
npm i map-builder-canvas
Props
Props | Description | Default | Required | Type |
---|---|---|---|---|
canvasWidth | Canvas width within the layout | true | true | number |
canvasHeight | Canvas height within the layout | true | true | number |
facilityElements | Array containing all the elements to be plotted | true | ||
zone | Contains the details of the zone | true | ||
clusterList | Cluster list for map elements and gateways | true | true | |
clusterListTrack | Cluster list for track elements | true | ||
hardwareVendors | Hardware vendors list for BLE Anchors | true | ||
actuatorGroups | Actuator groups list for Actuators | true | ||
isCameraAddonEnabled | is the camera addon enabled | false | ||
canViewCameras | camera addon view permission | false | ||
canCreateCameras | camera addon create permission | false | ||
canEditCameras | camera addon edit permission | false | ||
cameraGroups | Camera groups list for Cameras | false | ||
onImageEditClick | Function to edit the image | false | function | |
onAddImageClick | Function to add an image | false | function | |
onAddClusterClick | Function to add new cluster | false | function | |
toolBarCustomComponent | Addition components like buttons that can be added in top panel | true | false | React component |
Example
import { CanvasDrawing } from 'map-builder-canvas';
...
const addImageOnClick = () => {
console.log(">>>add image on click")
};
const editImageOnClick = () => {
console.log(">>>edit image on click")
};
const addClusterOnClick = () => {
console.log(">>>add cluster on click")
};
const zoneDetails = {
_id: '61ea6ec9a1b585018f46ad06',
coordinates: [],
labels: [],
name: 'Manufacturing Unit',
description: 'Manufacturing Unit',
width: 1000,
height: 700,
sequenceNumber: 2,
createdAt: '2022-01-21T08:28:57.775Z',
updatedAt: '2022-06-04T14:37:11.230Z',
__v: 0
};
const facilityElementsDetails = [
{
_id: '61ea6eca46585018f46ad2e',
type: 'image',
label: '',
elementType: 'image',
elementProperties: { opacity: 1 },
imageProperties: {
uploadId: {
_id: '61ea6ecaa1b585018f46ad2f',
fileName: 'map',
size: '2046',
mimeType: 'image',
fileId: '61ea6ecaa1b585018f46adee',
__v: 0,
createdAt: '2022-01-21T08:28:58.249Z',
updatedAt: '2022-06-12T15:04:42.096Z'
},
width: 1000,
height: 700,
fileUrl: 'https://miro.medium.com/max/1000/1*P4Z6NIm0dHypW2NnXqinqg.jpeg'
},
zoneId: '61ea6ec9a1b585018f46ad06',
__v: 0,
createdAt: '2022-01-21T08:28:58.249Z',
updatedAt: '2022-06-12T15:04:42.096Z'
},
{
_id: '61ea6ecaa1b585018f46ad2d',
type: 'map',
coordinates: [
{ x: '1000', y: '700' },
{ x: '1000', y: '0' },
{ x: '0', y: '0' },
{ x: '0', y: '700' }
],
elementType: 'polygon',
label: 'Outer Boundary',
labelCoordinates: { x: null, y: null },
zoneId: '61ea6ec9a1b585018f46ad06',
__v: 0,
createdAt: '2022-01-21T08:28:58.248Z',
updatedAt: '2022-06-12T15:04:42.000Z'
},
{
_id: '61ea6ecaa1b585018f46ad2e',
type: 'map',
coordinates: [
{ x: '156', y: '162' },
{ x: '156', y: '0' },
{ x: '0', y: '0' },
{ x: '0', y: '161' },
{ x: '156', y: '161' }
],
elementType: 'polyline',
label: 'Office Building',
labelCoordinates: { x: 25, y: 37 },
zoneId: '61ea6ec9a1b585018f46ad06',
__v: 0,
createdAt: '2022-01-21T08:28:58.249Z',
updatedAt: '2022-06-12T15:04:42.096Z',
clusterId: '61ea6ec9a1b585018f46ad0a'
},
{
_id: '61ea6ecaa1b585018f46ad22',
type: 'track',
coordinates: [
{ x: '110', y: '205' },
{ x: '5', y: '205' },
{ x: '5', y: '270' },
{ x: '110', y: '270' }
],
elementType: 'polygon',
label: '',
labelCoordinates: { x: null, y: null },
zoneId: '61ea6ec9a1b585018f46ad06',
clusterId: 'cluster1',
__v: 0,
createdAt: '2022-01-21T08:28:58.012Z',
updatedAt: '2022-06-12T15:04:42.338Z'
},
{
_id: '61ea6ecaa1b585018f46ad23',
type: 'track',
coordinates: [
{ x: '5', y: '293' },
{ x: '5', y: '329' },
{ x: '70', y: '329' },
{ x: '70', y: '293' }
],
elementType: 'polygon',
label: '',
labelCoordinates: { x: null, y: null },
zoneId: '61ea6ec9a1b585018f46ad06',
clusterId: 'cluster2',
__v: 0,
createdAt: '2022-01-21T08:28:58.019Z',
updatedAt: '2022-06-12T15:04:42.341Z'
},
{
_id: '61ea6ecaa1b585018f46ad6c',
coordinates: { x: 30, y: 205, z: 2 },
name: 'SY-21-001',
hardwareType: 'BLE',
identifierKey: 'macId',
identifierValue: 'FFFFFFFFFFE3',
plotCoordinates: { x: 50, y: 240, z: 2 },
clusterId: 'clsuetr1',
type: 'standalone',
createdAt: '2022-01-21T08:28:58.442Z',
__v: 0,
elementType: 'gateway',
zoneId: '61ea6ec9a1b585018f46ad06'
},
{
_id: '61f90022a906b0004b65c93b',
coordinates: { x: 12, y: 11, z: 10 },
name: 'SanityAnchor',
hardwareVendor: 'TCL',
identifierKey: 'beaconId',
identifierValue: 123456,
beaconType: 'NON_HAZARDOUS',
plotCoordinates: { x: 12, y: 11, z: 10 },
clusterId: 'cluster2',
zoneId: '61ea6ec9a1b585018f46ad06',
createdAt: '2022-02-01T09:40:50.725Z',
updatedAt: '2022-02-02T10:47:20.674Z',
__v: 0,
serialNumber: null,
elementType: 'gateway'
}
];
const clusterListData = [
{ label: "Cluster 1", value: "cluster1" },
{ label: "Cluster 2", value: "cluster2" },
{ label: "Cluster 3", value: "cluster3" },
{ label: "Cluster 4", value: "cluster4" }
];
const clusterListTrackData = [
{ label: "Cluster 3", value: "cluster3" },
{ label: "Cluster 4", value: "cluster4" }
];
const hardwareVendorsList = [
{ label: "Vendor 1", value: "vendor 1" },
{ label: "Vendor 2", value: "vendor 2" }
];
const actuatorGroupsList = [
{ label: 'Actuator Group 1', value: '61ea6ec9a109u5018f46ad06' },
{ label: 'Actuator Group 2', value: '61ea6ec9a1b5786418f46ad06' }
]
export const cameraGroupList = [
{ label: 'Camera Group 1', value: '61ea6ec9a109u5018f46ad0c' },
{ label: 'Camera Group 2', value: '61ea6ec9a1b5786418f46ad1c' }
];
...
<CanvasDrawing
canvasWidth={window.innerWidth}
canvasHeight={window.innerHeight}
facilityElements={facilityElementsDetails}
zone={zoneDetails}
clusterList={clusterListData}
clusterListTrack={clusterListTrackData}
hardwareVendors={hardwareVendorsList}
actuatorGroups={actuatorGroupsList}
cameraGroupList={cameraGroupList}
onImageEditClick={addImageOnClick}
onAddImageClick={editImageOnClick}
onAddClusterClick={addClusterOnClick}
/>
0.1.8-beta-0.3
21 days ago
0.1.8-beta-0.2
26 days ago
0.1.8-beta-0.1
28 days ago
0.1.7-beta-0.1
3 months ago
0.1.5-beta-0.1
12 months ago
0.1.6
11 months ago
0.1.5
12 months ago
0.1.4-beta-0.1
1 year ago
0.1.4-beta-0.2
1 year ago
0.1.4
1 year ago
0.1.3-beta-0.2
2 years ago
0.1.3-beta-0.3
1 year ago
0.1.3
1 year ago
0.1.3-beta-0.1
2 years ago
0.1.0
2 years ago
0.1.0-beta-0.5
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0-beta-0.4
2 years ago
0.1.1-beta-0.1
2 years ago
0.1.0-beta-0.3
2 years ago
0.1.0-beta-0.2
2 years ago
0.1.0-beta-0.1
2 years ago