![](\"examples/renderer-html/mesh.png\")
\n\n### Text\n\n| Parameters | Type | Description |\n| ---------------- | ----------------------------------- | ----------------------------------------------------- |\n| id `!required` | string | id of the renderObject |\n| tags | array | renderObject tags |\n| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text `!required` | string | text to draw on the screen |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n![](\"examples/renderer-html/text.png\")
\n\n### Sprite\n\n| Parameters | Type | Description |\n| ---------------- | ----------------------------------- | ----------------------------------------------------- |\n| id `!required` | string | id of the renderObject |\n| tags | array | renderObject tags |\n| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n![](\"examples/renderer-html/sprite.png\"){kind=icon}
\n\n### Line\n\n| Parameters | Type | Description |\n| ------------------ | ----------------------------------- | ----------------------------------------------------- |\n| id `!required` | string | id of the renderObject |\n| tags | array | renderObject tags |\n| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |\n| lineWidth | number | the width of the line |\n| points `!required` | array | points for constructing the line |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n![](\"examples/renderer-html/line.png\")
\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.","_id":"@wework/floormap.gl@0.8.0-rc3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-9rLChRMM8srsJzuq6mLUncc06SQDuNKbAQCVuX3YUIArr3jxt+motdtLC2gZHlBGIlRvVZauTqmXxFLlIAGXeg==","shasum":"f5b35b0a368c676a90d937269e6724810a14563b","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.0-rc3.tgz","fileCount":8,"unpackedSize":3276926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLxLlCRA9TVsSAnZWagAAZQYP/ji9k1vJqNOYsDv9wz92\n3n0fS/KbHcl8dBJ6VQh2bAsgLcEJEwARYIFS9ig/OQtnYwMcHJNR0D74MRQZ\nbtfZRcYon6/MV+BjDpAC2x4bi6LjNd73E/FGpWjHVre095dQOo0R959zAEpu\nR53hjJKzPDMG268rGt7eXejRqB5qa9EUEC6n4RSe65i6vv7qzCRfxWG6tjdD\nSR9Az87v42A1O6UVRmjXA2omMxtW40hFACgexGdrKQ6Jx55CujegCvnze/2Y\nUg+6MgRb/LAYm2LSxW+xT9OXYH5AbimRjPDrSIwV9jL3YhVWUg6vz+vxRskF\nqFwcgSXhGp/9viGc2ba0PiflKYa1Bh+bYCCkJ9fQ5WUOV5O7Vxou6NKJyIvt\nZYq74fWMqQdoorBsMLp54SQ9qjFPrDPc8arQ8OEG05BPM1KSkr9X+EmRljaY\nwPD/r3KwdZFvd2hUKy6NhbEzvKBMkx880CkKpjMEupM5jXAJMhkAO/UJkC50\nUDM91FPll3tvhNPn6uS5dveFNGVigDPT7hvK2CCqtufRcJ0VynJr0LMFcVXN\n19Kzvf6G7OgzhkZv7jjktL8LAtlX9oBXTYdWty9uty9krp6Gt0k55IcWm3LI\n1lbjg5xmQyR0bpemejxHhv9jHPR8igj3mFkmUeAaWdCF7s/do5vGYkCZRdzL\nMfS9\r\n=FYdq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmq6woyKd3p1I/DwZP3YdRXUvnNeU2eCsz8+bu69EVzAiEAnMu6eEK3sFJgszUxNpU0xBTA1IbrHoZ1XlF8P8GnPL8="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.0-rc3_1546588900437_0.8335049304006399"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.1-rc1":{"name":"@wework/floormap.gl","version":"0.8.1-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.2.0","babel-eslint":"^10.0.1","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"75ad43554989abff3649bc339a702fbb578eaa64","readme":"# floormap.gl\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Quick Start](#quick-start)\n- [Building the library](#Building-the-library)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Quick Start\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n### Start the demo\n\n```\nyarn start:demo\n```\n\n### Outcome\n\n\n\n# Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\nGently reminder: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n### Text\n\n| Parameters | Type | Description |\n| ---------------- | ----------------------------------- | ----------------------------------------------------- |\n| id `!required` | string | id of the renderObject |\n| tags | array | renderObject tags |\n| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text `!required` | string | text to draw on the screen |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ---------------- | ----------------------------------- | ----------------------------------------------------- |\n| id `!required` | string | id of the renderObject |\n| tags | array | renderObject tags |\n| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------------ | ----------------------------------- | ----------------------------------------------------- |\n| id `!required` | string | id of the renderObject |\n| tags | array | renderObject tags |\n| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |\n| lineWidth | number | the width of the line |\n| points `!required` | array | points for constructing the line |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.","_id":"@wework/floormap.gl@0.8.1-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-GNJo7s3JqU+06GILYVvCog4UHSzoDaDx07OpQHXkf1qXYTm4QO6iSYaPfqVYtZPl+Y6lUOQYT5lMhtjehfgnYw==","shasum":"2e88650b1a1089e08201ad948c2a255b1fc0b9c2","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.1-rc1.tgz","fileCount":8,"unpackedSize":3276926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLxeDCRA9TVsSAnZWagAAU0oQAJG6c6jmN2mWm9IHNQ+7\ndqozj+pnjRQ5ThovuZEVpA7O04B//huVNNoW0BZwInkJI3K9ADCVr85kEJ5O\ncBk1BZifYiUFlvtgp21sfMkGAYwkcuK9Ys47xaqNsJHuLDYIwbxhXA3bqp2W\nTJXw1A9OoJPfjilcW4SrOZxfeasMFJkcXBg33ZRosbLQBLWpGSyQXnUisCW9\nvSdPyIe94x5iIel4QDSU50OTC9W8Q0CtsVi/RIvYZcQ6irphWYjhfiFF116+\nXNxMTv6Sl8YOptIHyBj9LTSCu8g+UVyy+eM2+mU+448p/4iPh7dsTNXeY/pc\nl+VQ8EgS6hL3x+tOESyEGy7KK7HWe7JMa9Rp/82n0FyDThd7ZkBsS0R7Puph\nyAdhpRyebK9cuWR3ZsXwLCs4/KTx/jCR7WW67IdduFi550js/lSsLOPoLJOS\nHO9/g5uca7cbmDsr/G13AFmaKaLKUgiwcmS5GlDWR/11IVtGvEuV9x+YDYYD\nhDxYSTkCszvc8vux3GnCffSqfK05ZuZUqwqTQixf8WyIo6GZAfGxBwlVC81S\nqPfLSwqajMS/yANtEtao2krPeTtj9JnlqchJATogk5MoBHTrSNmWav0HQnHh\n2X/YITOErhe8TI4vWb/8RsIqDt+e5eXvJ3Y8CpeoH/d8rZdgmJtYQeO2OmN2\n6ENG\r\n=GPua\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFZSqlVraa8klhbOjeiu/KB5ZRPEfvvelVK8LBoH3tBAiBhgJ6NwQdOaDLUajKn+hiUrQaVqLeFHjc6qkQ6kUWXnQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.1-rc1_1546590082891_0.493828080441022"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.1":{"name":"@wework/floormap.gl","version":"0.8.1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.2.0","babel-eslint":"^10.0.1","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"e5ab69f13da85011ec229f074c9c7c92fb280d43","description":"A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.","_id":"@wework/floormap.gl@0.8.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-6UaLm5SINdxz+RapyHdWCqFtvdDyBod/wl79RNRNKImSiKmCK4yoVMX0j1ajpPYVqaiWbegTOpNV7jVUsy7pWw==","shasum":"7e4f4ea6691754c3b9d8210876f14b9031cc28a4","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.1.tgz","fileCount":8,"unpackedSize":3276922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLxf4CRA9TVsSAnZWagAA1VAP/i/YvLjzCBQU4oERlP3Z\nCo9Z9HUaAxad3nuYmZO9agzmedEAN40I0qPF1tUsQ4wsLY6B2QMTUH/f0gYA\n+SR4X96cZSJjV9wm7+YO53lXLpf5ajzi1ICFV7bc88zxDhzK7Xu7wwW1Ln1Z\ndUQx2SMclcm96rUxlYaaMTf96k1AGrMioQX8Xh/VQdKAYf/dtS4IMSrZ/2rg\nUmdegty30N70nslK/hWtjH3ddqNK3bB+ACl9D+Zoz+qZtxWi1OKLg5BG6Gpa\nXwEbZodS24uTFKK7YlpkeAMAJGs2RnRd6K01o9Z8Sdg9cfiFNezp9Oz0USze\nwBEaNP2clunyb5LujI6bATQZcVcEFBORDb7OYqIgiojZbtb5o59RpVVvn0/f\ncR/Utc58O3ipN5Fwuzw5ewYvqKioLKAMp3rXS617iGMQYvbcWg0dsBRd1AJq\nZ2Oz0g9lR06iJjVuCCMeYoF2Nv765t0UnH5I0Gcj+gFLKUCd4rqCJWDktmuH\n4LAgic1OVez26Bdz//ZAs2fgfBJoNWcwca/IkH2U7X/YoFTuskzy43pDTeQ5\nK6r9Uyo8W/V8c4QugEXR51xNkmlxR76BXuNvLFsMDgHUpdCfIwTGT/6WsrFH\njK1nNW/s1Tjqjw/nr+3vwZ+RtK1cPQtph5+CByCESzjJ+qF/CAp+M9XpmH9A\nO80G\r\n=w8am\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmj2cbVcclLJi9aum5sKOAYbm45rUwJBO9B66uoP63tQIgFwY12/lRl8utwquHbTenSQmCJko3B0IGJKWcqJ2Y90U="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.1_1546590199290_0.6881582517085294"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.2-rc1":{"name":"@wework/floormap.gl","version":"0.8.2-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.2.0","babel-eslint":"^10.0.1","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"552763e7efceae24957d233d9e111800908bf06c","readme":"# floormap.gl\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Quick Start](#quick-start)\n- [Building the library](#Building-the-library)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Quick Start\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n### Sample Applications\n\nWe have created sample applications that make use of the floormap.gl library, you may run it by entering the command below\n\n```\nyarn start:demo\n```\n\n\n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n
\n
\n\n---\n\n
\n
\n
\n\n# Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\nGently reminder: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.","_id":"@wework/floormap.gl@0.8.2-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-CP2x4d/NSRpwft4FfGDB+HG5KOnKg1GwsLfcht/FkS5yCnrnspDhclY+3n2tSZfGdYOA8FAKSJQopTwYLNXtZw==","shasum":"dd728811986882e5f9263cf8493e46203bb672ff","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.2-rc1.tgz","fileCount":8,"unpackedSize":3279292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPWOGCRA9TVsSAnZWagAASEUP/jcLPGwmCpRtxViQiLN7\nF+l5DqFmm1clZz82ccJEG6GYUhM9fVeLX/3LqMldocPhSEjeqlQbyLUEWLaZ\n2ECSvG3DPKMDKNErz7yBFTpd0Nd4XK+R71pIPsjNIpUO+1w88eOkPJQmMW0O\nb1WlGyYz+pXZTLYJV72HOQfotX9agqQe1ahLamHeoixLgBVLn/pK0mhC/d0z\nIkbrOXMjJqAImAlL0XerAkjX17kBlntlxmbd3uK7EP2Gob9jh6Ub/evAkZJl\nFqIBgXlmWIYyZfD2bWYapdZtykFaatbqMlpoN2InPQXHEhJ/rb+DI+m3J+i4\nQsY4Nmn7/nDlrJ2f+paM29oIRWOR+0VXccTvWQHjfPM4FW+1VrWH0SMavnp0\nyGCfjLzUCdYKvE2aVxtrOwRbaqM2QNgeqM4k9cBBXL5b34maF0R15fWM+uX2\n8xmISTzyWKLxUzu/UOVqDx0B7XQGsQrpq8cnqTtgbP0VDMBOvKrfMjJGg4OA\nlk/TyktaJn4tnnUqxq73I3deMdv8Ni7a8hWSVyvpzd2Gt8oEnsJyVfO+oLDC\nEhAEt84+Rcs7RHLU/mN4H7FhojISTJDZ8gv7lr2acetJqmJaUC04qvL7eIoP\nRMXG3UhMAw3YGsiKtW1AVY+DeOn+v3iKn2cIku+fy5MKJYBTZVwvA8knsUQg\nsh8B\r\n=gs20\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx/AnTi4hTPKAkGNsRd6x72IqpIMUnEwLeDNuc/S3UmAIgWxXSFx0EDtjHYhvPI+jKcG7CUIZG9Cq5XQHyW+0UElw="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.2-rc1_1547527045630_0.6530380789974477"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.2-rc3":{"name":"@wework/floormap.gl","version":"0.8.2-rc3","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.2.0","babel-eslint":"^10.0.1","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"e9df0f38e63c26c753c1570994c3169c1ebf9304","readme":"# floormap.gl\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\nNote: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | ------------------------------------------------------------------------ |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90` |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.","_id":"@wework/floormap.gl@0.8.2-rc3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-yZ84BlX6Cv2vNTaVe/5wd/HUHBkUxOsOEDdZfoeLIpJhAFeZ8HiHJXnuwCth1dy1qmx0ygZvZD06/gtQnSYIgQ==","shasum":"556c25b62f1299efb59cebe58b66b4ae00355168","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.2-rc3.tgz","fileCount":8,"unpackedSize":3279786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPaiNCRA9TVsSAnZWagAAijUP/iLGXxhij0RGUazrVwxv\nEVg/zElLtxq1ExT6T6Vw9SUmy6mRvpusHCmFcs9P96R71FXTnfjOxpO2zM3w\nsBstmJLhvsDtVRYUmo8b7OjYfC8boyH/D/1B5t4C1A+RCqjopZ88lKIOHltu\nnajVQq8WA45h930gBf4UcxbmhDmPRzW/TUcwGknVThv+Q35OgD759dnSN1MC\n52AuIaYMDU7b0xjBOiPYG80r1GiFx/0ZcX58m04TlgGT3Is7FTKoFGGOHgeN\nzOcRdwDphr5pJzEL+XF3BIiYlZljhuSZQOIDP6WMWuSUjzd+FIF2Etp2zbHj\n9Xm2o7mdKaJWH/DZxMMXyAqFKGsaOr9dGqDg1yKBJbkfPw37rJ04zvSAXjgf\n/iMnVAtFVQQMecu/NA0yti9v43k8/koVYFr1YNrLZJNsug02TZFtWfyCQd3f\nJZ3+UjkxZlxsk7yriZQMUwF9FfmvKIv+gS8bpPYjmNXAcZVCMYv4+rPZdVsD\n9KoJ5WxegOGBwvMqOPNFYGPbvpE2hm7W0UsFhIqM1yeBy88oBywmvoA5bi9+\nvayGrKT466jyiTaiAauUvUg6AWoO+EJuPOI7gIj6dcfavufooSzQG5jvZMoY\njsXQls/cUfcCCRmt9UKr4yDcuV5q7UAb3c+kFDaATi6ou6RL19TcbpzA+/lJ\nI6fK\r\n=eLq+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDplNkt+jRiCvmiMlAwib6dI28QDxjrOyoooTr/Z/7Q+gIhANnRF8Lw0WBLwiBA9Dpxl2nUXtOofgoQlA+6qSmQCcSW"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.2-rc3_1547544716332_0.2939007158245581"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.2-rc4":{"name":"@wework/floormap.gl","version":"0.8.2-rc4","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.2.0","babel-eslint":"^10.0.1","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"66c42f1ecdb22aa7bd155395c83a2a14dfd8b90b","readme":"# floormap.gl\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\nNote: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | ------------------------------------------------------------------------ |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90` |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.","_id":"@wework/floormap.gl@0.8.2-rc4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-m4VwpESpQ5vOJ+s+WFxQ5uB4OpC6eX2U9nWPHOlPqWuIUamMMLeark0MKWlcFieFO91dw17KFaxLLkJ4om3i6A==","shasum":"85b360f5ce43b1bbb1176b89a9c9fbe5dec12ee0","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.2-rc4.tgz","fileCount":8,"unpackedSize":3280744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPb+nCRA9TVsSAnZWagAAI6YP/jAhbC0oa5oQLtwdDGyq\nkiE0LO9MjcaP2dEwndBxUzAlymVye5Qz9lSfrxeNWbL9FTySy4zCsmE9ZG96\noUb7mDdGt2cQFjiQSeRQ9Tj11yhNkXt8krMsESawqeUhWy09Sv4VBue/NULX\nOctxltiNWejox4shEJWFPjV0roeeMa/6bs21RVHg4uecBJ5Ha1aOaSJh1g7D\n7jyWHDOU8fjIqap5RxBZ3McvRwvE9VOaJl3D2vR9w7Ct3UR7Vufqh6lFB5TW\nxkZC7ppbzidyFzx0vT6l93xpSbpztuSnuRkahpH4+v8XzQS5TBWUJKlbptL5\ndWuwqsInqC//gAlpTgATw1EixQcVXbmxuLwkIV+2R+BS9lXlwdbsZlzOU7hl\ngJQCVr2juxg74DW9D33g0yyqr5Z9eBATnG/9HLYF+RvSx/MaGjzpBboaqbjj\nfsvN6rP+C6AjXmPyAb2gLsvXwQAwzS1Fuc45n6TfRS4tsCSXZbUOpjvpP985\nLToJTYIZdUU0A0Zb8nmX2kpaTKKKsYSSbzt1MmYLqoOUWGhlIFTA9IIwBeB/\nMmF+L6056YIdG7DpuSJW8/oi8FieamkArkAq10UV/MOukpZYtQV4R5vwXhat\nAxolb24RZPKRY1ErBRiPLvFjYETDYQtSe1fiY0J0c2Zmb7xUAVO7rOUq1s1u\nsn6t\r\n=qsaV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSzPdGECFeunVZcQ+Yvzg8mMUgOo5gIN1xNaRPTr0mbAiEAhQbzEWKa0Awx0Jf6H+Ntzcim9pmcP6fCzApY28QVvjA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.2-rc4_1547550631158_0.3913436953530829"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.2-rc5":{"name":"@wework/floormap.gl","version":"0.8.2-rc5","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"2364a39c1673c6a8abd04b764fa1ce23d884d832","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | ------------------------------------------------------------------------ |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90` |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.8.2-rc5","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-1KBvQOCXQUh1iRofEaH15x4hEaWCxK+OT+bzEhbLGy3aq+Lc2mGif/eLhp+O3X5H5SEMHO0S93n/cgfMi34EUw==","shasum":"4f05854325562ad789577ded7f0d429b8759684c","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.2-rc5.tgz","fileCount":8,"unpackedSize":3220916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQDGACRA9TVsSAnZWagAAbqAP/0sLjUXSt7/M/FZDQqMx\nDdg8rfGDCKRi5ZYMYw7UWYt2ip7L4Lw9CHnSaq+vnQMBUHzRZ06rIsnpLIoh\nWlS7dug2NTARctRh7vW3DXeJWkkI6SlcXa2clSSQzL+kM99082RQjdwd3bSb\nrHovMQ5yJWuGc0XGLAERYlI/x4OtwD6RHJ9LUwrhTq/uomLlWCVWbbEOl/PY\nB0EUymhy5xysxvn5FWegTgK+a4R5TylnN7F/5Sm68AHbi5zqjEyIqSmx5REm\nya5Io0Ln7+SuCoQsGYzYpOcH4wf4f2BcFO7PMrZs4/GZksVy28VZEKQk5ET+\nsrzbC6j9ih4YRgLb7DGG2Ttx+fHHXi8Dxk/RFs1RgKhJOAZDQ603W0yguHv0\nnTPg7AP7sUGaC9f/Gt8CScZJailKskEV5HLqGtgX1RN9gvPcMDqtet1xrXFj\nOunnwyYtcSRYxGIwpEF0U9bRFz6hYPQMzpeSgzN36WX6uXaesFyRsGEQdCR6\nAAnD87ErPeaLPN0DWu1d2nU8fB/slbWUQjnEIFKx16ZXkV7JgVMe37Zv6f3k\nljgGQkqcuAzP/EpszDMQ0W0+RHIJabDDbP/i+jm3kBNHff4qFVfOpgvheJdd\nN5l6J0Cz4AbjJE4yqcef8vnAyOdSUgcrrAxrRAt7M+tVrqxdgLRdp6Yx8m3n\nuj2q\r\n=KGfZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGA+dYnyQgbS5rPTDjgRB8ZLAsnysrUYQz6tAcUQ78urAiA83QFgZB2eRT/0zXiw6yjXkPMKQzBz4Oc/UvBjcN/zsw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.2-rc5_1547710848018_0.00820242881256128"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.2-rc6":{"name":"@wework/floormap.gl","version":"0.8.2-rc6","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"d6e728589a0c576e8b942ba9439f3e69a3cd3516","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | ------------------------------------------------------------------------ |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90` |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.8.2-rc6","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-k+D9d2eFr1+rozF+U0Pa/0iPPuGAqkQcrGt+KYOdPNPUGehRcIcOq/r8UcSnY0sLzpEJyDgL3Zq4IZAm5rIsfA==","shasum":"20f2017b056d02c58ad07fba545f26c925df320d","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.2-rc6.tgz","fileCount":8,"unpackedSize":3221624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQDyhCRA9TVsSAnZWagAAQo0P/jmHmkOi4s2MXUXtkqfU\n2hbfPl7/m4r+0zwppA/S4oRNqNK6ZrChgNdm6bSj3AnAK7cuXZcrzi/brfZ6\nAANgxbmFhKy7BV0WWDHxw7n3x3SsH44R9Co8YwVKaOfS8LyYuzhcKKf35vjC\nsb0OD7DyP3TXqJE4Sc0154Rg7HscTHtB3Yjyzl+gWeRB6DrjGbzz265j5z0P\np6y2ZHhTBf52fC1dVaomF5T8uTGnezDtEF5/LMyH/dLyQulk7WXSRTxEU1Y4\nIk0JZA1g4BNrY1huNuHay1VRzLof8mYoYX280rH6JI8VArsnxDHOBcSklC1g\nhNFBHSXJD9UcuOTNSV3YCxqhihiqHx0SVOjRAHzEml8wDckV10j7yX+u2b8q\nmGhIySSZSSTw9hHKT0UW5+s8NEYVE6tUUNYNXPy8dNq6gd7GVLJAF6TWFnRH\nAcsYczSRjkX0UzBmdeOSJSayxZ9HzVCuUKTARhFrnCMFeFCb3fZAAVraaRYB\n8FQBfuS/RXM7N0qYYli/7rJVJXnKjWYMW4b9GNsCJrk4gjRlcG2LFv4PyVYP\ngtdyBjuEOvHzIIx1k6f6Ya+RxONEF903AUjjWHchM1UD3xx/tcWNPxr+GR0d\nltCfkBfEbvoGut+gMskGKQF+pw683dVSWhaEgwxsTqqEOmFurPFVxw+5m8Cr\nzC9w\r\n=sJKV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5OawFCfytZSmSkN8xScBJWunA+mG1VYgfW9Qtvd8N9AiBhq/UGGoSq7CzMcl6zuPWop+hd2O/4cWzyl+kDJ9MAYg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.2-rc6_1547713696161_0.990726381616611"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.2":{"name":"@wework/floormap.gl","version":"0.8.2","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"c50686f59235dcd6558fd7904a2046f329140b92","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.8.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-UdVPlrLZbRv4p6bH0YoRhYdd1+pIHBzmK8NEDE4A+X+mgYUTcF+a8LaD/8yaWGgHr5iezt+z5oJwJVmx+gkAiw==","shasum":"07ee8565535bd03346dee49f892117b9a6f9331a","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.2.tgz","fileCount":8,"unpackedSize":3224868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcTm8RCRA9TVsSAnZWagAANFIP/0cS0kNfhAtD/YeNjfZ5\nzJWvhIH4m+rYdz9XD+hCyIvcMXZnQ5+8xahLZvJp5jaxSxvrNHQ3/4lv0y/M\nyhBLOZGYyNql74heuDcyJCA7bRhLFg07OhzmmE8iYh4BfJKwrDhzftratLoP\nLAOsvgaR1yUm+680UToWDE6blZGURVyRxIKhXxrapRYWIcvZA7W4NBdJOX90\nIcRvZWl7Wt5SUSIu7xZorzQihVKfQ4GZAsWV8ppktqTbMLkYaCnboDkjdOOa\nbqavNR4CrzGxb37BH8cikJ5bY2LksJlbA/3zagh00MrSq2GgHri1L63ybHFU\nY4tQoLMsw8MJiIf9CImTFrhasyK9dToqYzB8j56RK4imcKpeYw6rJPbEqwyS\npNgPgbmQwdMKx4XfENyQbyDxbAVLOjPfABIs1P2tPTAQ8YOrc5HXfMyZpNbT\n1OshEoYhWh4BEPqshZfUPtD/+W0mAd/SlJdkDI03DIrO8NYDNc91nb/OriiR\nz5t8xVwSVSLZHAhaND/jf4nAneR3ogGHTOAH9zI+pWJsTHmR5oqA3IoFmcr3\ndJCrgVRX2b85bwEonTNQCZumt7gnyTNTIUL8QTdhl1U1G7DPgnIK/4ybYZot\nFTID5jtz4j1a6haJjgATmG5GhFlb6W2U2PQsJ9O1fXV6h5MGTKZlx354bIDx\nK4dY\r\n=9g8s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAkDOQ9j+yCTlmAwr9M1JzgI532ssu2HQ4SeJa9fYNusAiEA5tJAJrMlV5/ROwwTWhglPqnWMXJpAk76U4LbKwTlNik="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.2_1548644112108_0.48969701446945346"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.3-rc1":{"name":"@wework/floormap.gl","version":"0.8.3-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"fd456c91ccb2b6080a5de9eac661ee8d6238c05e","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | ------------------------------------------------------------------------ |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90` |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.8.3-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-Qfu9hFf4W6joo0drsygF8u/f+qN/4F3gscHT2T5cl1TtGPXapcwQ5Lwktawp8pftrwaIuK91Dg5yXNSIuSv9IA==","shasum":"2778361d8b720615fdf3c8e4f60c1ebda8d2059b","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.3-rc1.tgz","fileCount":8,"unpackedSize":3226489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUDBkCRA9TVsSAnZWagAAYBoP/jQlqSBq9FpOnCzPYjnw\nyS+0zIrsAoe468epz5i+9jtg/nO9EQJUTslNsSVWz8bR7+saEJQla9VX2XPf\nxIvh5iMAcdc+pEK9kJsCS6DMjkRTTO/lXL/1mL9WVNtBeiZd7vE7fTxt6m/v\ntKkphoieLmxq66s/iEfRoef0w4i+NJlIhibdngXyTHlzKk4hQdpbAS7ez78u\nojticYUdbWxLYqZfc3qBs3EenPu9HQbCWY0SCyXvYctdZGMLCINJ8YVFXWgx\nD9ByoXEOSrW5xpuKu8DOVUhte03Ye3JnVeOz/GaIU50JSpRjeyppyzYStn2o\nvPKgVp2pYB7D9xGf4qlKrdCCIyWT4WyGQXV79mAl+C3jYmc4HwBtTxou0S6x\njhMuZLtq4VShsMmIQQU+LTajBptRIzNsjSUdmrwPvLOaKwNguLGGIEbZpQnL\nsqwU2QxHljdB2I8HwGuPf4LjFZKV7RjPNDNJOdi1R/2Pt5mxacTKJQPP7Rpm\n6q9fCX37AglmPOorNskxgBu9wuYNUrW4UGakiPZq91WXZcj76GPfQpQQtp3I\nHmCKFQaGRd9WL95VNux60Lx2yRLBVseSzeDNYiaoN0cm40swcqNPAMBHA98E\nCh3bLiu3JywgLdR3jtqW5PxerpTlJOXqDdzvkKzvBvg10Ka0t+HyhhZLUWcB\nkSRg\r\n=KhsF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDb37De0yzWJHOFHoVzBu17po/iTuleS05STMxdmpQgegIhAMrwNuIr2vxybSn8+uE6ZsqXtd0xOpXOhNGfRV7GrUL/"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.3-rc1_1548759139860_0.9741896310446634"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.3":{"name":"@wework/floormap.gl","version":"0.8.3","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"^0.99.0","three-line-2d":"^1.1.6","three.textsprite":"^18.10.24"},"gitHead":"e23632c2db6f5abc6bbbb21ee2db830ea869fa75","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.8.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-TzHUrt4MnlSpSRMApzkNFmQc5bSKPfzCzZmeFgm1puX/MTxB9dGTH0OWU35nCDoiR2W5o1Vwud/OAQBnydSM9w==","shasum":"8f3e20ba2d33527b80a0050aed0fc6a7dbe5a536","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.3.tgz","fileCount":8,"unpackedSize":3226485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUDOlCRA9TVsSAnZWagAAh18P/1Bt7yJy8txB/7zxn0QM\nvOr7Kc9PNvVZMl7hFvtLLa9RvoUKnyiDhGxvyXO26u3S2+ncfCw7b0X9PFOW\nWgHxSr2XcYclLzhsM3ESEpnH1Q8DwoZ9Fxzu6/y/s07Eh5hrAB6YvejMiZYn\npGR6It07jmqmiC/9vzhi1KM4FPo5WIc0ccKR6F3rZ5Smu6yBGfvYGx9Ar0Pc\nPKfyS5lUk/84tnVszmSw6+jfzx8o9v5ccGsAQSuKrwRjSpCVGK/48pawUScz\nbdtrwrA/GhGuBzY/suhVg+f+IwUj8A+ArFh6wPfSRwWkBIqdR/44QWYQok48\nTx8NpzUs1gCu1YyS6apam5aZGbYqCcyDqlCF/YnPi1falUDTUBFfcF9Lh8vQ\nnS5ACxfriUQSu/VWLVJtChy8kQ8KgKRuJJiyDvB08o+bKreaciXkdceegsOj\nYy1cM8ikPveELi9uvOxegx7btv9GQDwkMbAMDh8OnL/fg5wfqhCml2xGmzAp\nCce2Z4ZXvuKUlRZ3uFtRD3eg0hisXVo6eG1XXSqOY+DctBAs9ashfUcdrbMF\n0Kxb0S5Ah8hMp917mIKfhcC7SpKOI37TQoW6JzuUGX5ZK+VjhMurNsbJT6d9\nhqOBI42DCiMoH/M8eMGzK6njpCVUVHFN0a7f6Y8iAOR00M7PdZNoHMslEyi6\n6FtC\r\n=3urR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHH9wDmOqMMdfEvp+KDoPTluifGauLVIO7XlVXYr12AAiEA73RaephVSNp2GWxGf45iLgGtdMxr82q1WvJz4sP1a1Y="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.3_1548759972570_0.13312554603837512"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.4":{"name":"@wework/floormap.gl","version":"0.8.4","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.99.0","three-line-2d":"^1.1.6","three.textsprite":"18.10.24"},"gitHead":"87d94d837fc7aff057d41410235ea5706e3218b5","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.8.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-zheEHz+ZMxCYImWv0w93oppuLnRjA9hLH91ngoqi3Sxfjz3aWM7zVrSpJeNY+SSKjrN64AlALRE5OjgKyxVJUQ==","shasum":"eea0e13b1c1af17d095183ccafe35049f76dac44","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.4.tgz","fileCount":8,"unpackedSize":3226483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcU7LvCRA9TVsSAnZWagAA1D4P/jHo/hCrxqFQfU6C7Bjo\nd6Gg6UALzDrRwk/7996sZdqf0O8GgbcMhOA7mJv27n+dqlaGsk4sdyE13pAV\nvPOKbkqF6LwQ5K4Pbojv9AilOnQnSlHY1TmNesFDmN8lw7KZISYzZn2ngvCo\nlcUhyAbXvwvkTn9h5dT9HwcPuSGkqz/rgFxWcoB51kullp0hqIcf7MvY5k/L\n+bIPVEw+UmQEupiXTKj3Qbpury2BeQmVO1INgR9XlyVlA0SdKssdWMagtFe+\nb2R5k5Ve1S9+j0rF47wVE8xLbqbggADLMEjF0jBPKTD4vXFluVWjHW/WBgSO\nN0n1gIl0XAhSOBZUG/pQPyHW+YE+dOP/5UmfGJdI22ZCk7XnGAIRG5j2XOmW\n9+p34BtMG+cSZxJnMjUIWU/IcGrZF406cHnS2QnXY4y83EWcYg+CatOJiGfi\njgvAFc/pH4kuNeFy6/saNM2HfGfh8DTVdg+zwePcWCPJ1jqZJe7fE440dlJg\nMZ4UaVqS7lFXTXiPsDVmloBp7j+/m0NfH39Qi+brZmFHkp/Ntqmz/ViXVYce\nUrRLGYS8MibB9NMDWCcDpJBEMwJ1E+0FMG7UoxY5qTFtN1EofbnT3AtDJYPm\nL0E+YhTnMWuv5QE/+D7JLi5yE1vc1cV0APynEs9EHq6vTPELFXwaOGwZmT5f\nKI+Y\r\n=it9f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQoEWdPAtClDWm1NBQCXCxC0Es/8ZSlA8Dz4ItGZLgUgIgbrEtHZtJj544K0j+RPI2kGYQi1rVIgz74oKuyRz5CLw="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.4_1548989166129_0.28751288526991226"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.5-rc1":{"name":"@wework/floormap.gl","version":"0.8.5-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.textsprite":"18.10.24"},"gitHead":"62642b87580952a4e2e133f621a5e885a8ce46d2","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | ------------------------------------------------------------------------ |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90` |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.8.5-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-X4JkkUok04RaYbt41sYJCuEY5c4bfZQF6I8d10AwoasxouEg6nERn84vfQZfOp/ZoK/apBut4dHs9sn/2ubWqg==","shasum":"b2f41eb12224cafda0643921e1478fae8cfc4108","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.5-rc1.tgz","fileCount":8,"unpackedSize":3236448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcW5f6CRA9TVsSAnZWagAADZgQAIaYzAWvOUvnrRW/EJgD\nufTBqV46AE0JqHbZogD9Wi+yfro/VjkNrnijOT2kSowutls4tUWrRkbrHzW5\n2aaz3OSKW8mLMkKDiDYAKZcLFKiRi9zAPct/NqCkIF4ABJDt26Gh4ZNP4kO1\n2lG41/gz524hD3gpmfB/5xfCO1DfcZtNNaIbn1YSdW/YknmfiDIZDSJocXZu\ntz5/+b+4QWSkruXk5fLufFlFScJ7P/ETmhv7kMasWMrvU0GuQZVhx4CX3Epc\n/rDATg5o1/dXzsTCF/6TjtEkdofFbyd7OutP5s5h7CMO3L7nlEGakDs9iM3c\nPKmjq5yRc46h+j/mOjRgpRpjnAVLrO/H/EhkVuCMxGFgMDhqWAeqsGuLPxwC\n7dyqnS0/pcY44tOl942l1DssVI3pGRUC7J7KFvQzo2wpiT7DcGIUf0adMQVp\noFWUHN4CYoAXk5La8LKfK/Zx+1UniChsxELJf5ABsRtTb1OPXC8qUCVXE0vV\nOKmZizY5RXi9d9Hng7bJRfJa0EloJTCrT5p2F5n+5aY1jDJX/n2mEdW1ADMZ\nJOSLJSYIoRYNiJh09Ua34ai1vFFeRajiuSeWmEgAX6Q5TDmFtljONNEwKJA2\nWSgduwgZmlmbG39j2NfHTIvEcJOHbOhzuCBklo87/O5IJ3KpgLdJ5AxDHh1F\n9u63\r\n=X22c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDtew8bRZubsTyvsIFX6jiqEUNEFxdscqHRiQ4G1q8VAIhAIj/XiaQuLou/iExlQK6yj12x5OgrgsR2lFL5bD95/2u"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.5-rc1_1549506553764_0.30071602018562604"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.8.5-rc2":{"name":"@wework/floormap.gl","version":"0.8.5-rc2","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"e007cb708e2d49905435c4ccb7f4f567129051a5","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.8.5-rc2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-gULOUseVLTdD/xlQbGpEOcKBZvFeM2SMUmsVrpDh9EHzBHV7JwR1DgP/B6meoTiqTuuFFLYopIKzGFIxX8lkTA==","shasum":"f018a72c9ce7c09a743cfd6c432e4837d3f3a7ac","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.8.5-rc2.tgz","fileCount":8,"unpackedSize":3269267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcX+3nCRA9TVsSAnZWagAAmZkP/j8p5n9EMLdHWdzNhB31\n3gFjD3Sn/mWKNiyAldeoAe6MBEfvqC7mMcYlMHLaZHNKEsLhqLPuJuaO2wff\nO3wBObaS0y/L+EeTkHJOSBhRRCV8u6iTONIwGRAjL9nlAttEFDKWXBt/aeNt\nCrBqgALLfgBed9CDPgeMRpz7+ijIKH1YhqIPZfSyFEeEhJd8+UMY0boN8rNu\n6iHRV1+KTkHsNyUy+RplFlmnMWxifS0GGYSw/ZHNXsx6BV63cbv4iI7fSU4r\nJ5dWa3dp9/3muc1AOC5gPIR/aI3knNKxXqeNGJt5/RiuGukrFQSaMMhJxyfz\nimNNWHHI/mh7gQtIUmbdlA3MhcMMesQ5Z8An2V/yb5VAeJwcam8ingKR/zwQ\ncPBp64xsxJGLIWFFrjsT3i4DHgd7idX8fth6DLmQ+ujkQ1X68fivYCtRf+7u\nRLvo46Ksc0Tj/vsIzaLdIIsviKLYTfr6M4hC0FLN5MXGX0J2mrEn34qy7xma\n9Gc+mXCTmA3lHAYirbWPACwBtW306Jv1VK9qwi7DGM8ixkZ2zxJSlNJqJ4/H\nbrjYdS2Ak4ZhAY4hTYXeGPDx5vl/DOKHUp6p9vEP9fnzz40Tak/fe7B7eB3N\nr0mcVssWVHauD8CdR6zxZmQaGvK00tGCCsuepUu8ZnwAP2NW4UuiUopMPRAg\nFxGn\r\n=hPsi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGWU6BQv9C8DEE/qcrVZ6gYpItAr6SyCaNF96SpmkG01AiEAzacZ3ufOZyID5nQPL0ecGW5ZbeTYeNxEzdQyLSutQIg="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.8.5-rc2_1549790694373_0.792511762961384"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.9.0":{"name":"@wework/floormap.gl","version":"0.9.0","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"1be00da557c6b3985ac17cae1dbe00ec89223f00","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.9.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-S4cvH31Anyvcq9xJ7aPxUX+UADAb8pRQ6jAunGjNgBvNRRXzRmGMm5hEA4YdDbCZ0RK7LSMobcw4tiY3ZpjZMg==","shasum":"466bdbb658747e4f61b6e682161b4dd7298c2d42","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.9.0.tgz","fileCount":8,"unpackedSize":3269263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYnPbCRA9TVsSAnZWagAA1dIP+wduJB54tH/Q+7B0n/oV\naXhM2uvnHLkPG85BX+MMDxStSzqeOth13f2/LPKUIEGrs3dxDGzwVI8KDOj8\nBsLEubClDLKBLzq9xuZokQs7k7h6oPv8EhAF9ru8bXSMI7IzntZJEGT4oewN\nYgJcmijc1xi//ZZ8AQm+2kQJJgXGo5HZ2v64aXrCKWABvAP4YjB4ZV44RLsX\n29c6lEeV+z75PZ04U6D/6GqMkbRQY5TYGYikVBgWgSKzaN7gAmaeWksK0Tvn\nK23F45rBjXaGhATHhxfN9RThuV9pUd12xE+sr6MULBzKFV7UA0qljLgI+nwJ\nPdOdY1ZItXoxQiK1309sXiqvRgiGVeoGuZuxDdcLZArLC6ZyCxWTJg/wSMoo\nNwUtxc9GnjqdKoBAYbX4BrFM0HyfRjmbN+/7l/N0Ok2wRdHIv1ohFGjSGRWk\nMvKHxx54diDmmcbRie7ZYdGxTegk1Ug+zkVnNBvopd9QEBqM3G+MyLqtTdnR\n6OFJWnwo1WkPohe1kh6Z/oh0aK1K8gZxovjS6zlIy5Zz/4j/l7w7AlfF6mXj\nHTKJgACckMRA6j0clQBT49vg6yPUyhhqDsZD8RmhASpDJjcJ1/5CcgZntVrA\ncW2g/oXowrzW2w5hyBSxVSoX3ITtxjMy0RxCQD4wgrH0B5IZEDHGbaGxnicb\nk/Cj\r\n=6Zdp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC95MowKGBjCWD7ZrhMhi253yRJpq2NmxI0c6Dym8vitgIgU8cP+zKVDbDREYRdNdIrQuvZuv/MZatT30x98qywvoY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.9.0_1549956058972_0.3928936317113416"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.9.1-rc1":{"name":"@wework/floormap.gl","version":"0.9.1-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"390ca32103e066c9e3bf4941aa6427d5913bdae9","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.9.1-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-WibQ8yIqHttICcSTbjMcG9V/0B6+14SHH7RhNxjOs3sha35vimPk32NpEbUZc/Y8l4Dcd1oL+TOeI6K2ylYGdA==","shasum":"688cfc4e434df843ae404d657c72ff753dd664b8","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.9.1-rc1.tgz","fileCount":8,"unpackedSize":3280352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceSK8CRA9TVsSAnZWagAAsesP/iLYpoVJRPl2cTNQPhpn\nCwsAUEozYRVLB/2pYJrFwgvWbv99tAAPE6SHqft8ieabVRJBzf4EPnA5322H\nRpBeyxxQWe2Uyxkfr1ppH7JFVGF4uxgdKMnjKO0IDA7p3dciONTLk9SS3cpY\nTIXqsOm5cpbgbSs987ZLZRQEB+kbHSotM7H9aqVF9GU39us00jaqhKTxiRfg\nr91yzJHebXMb6ph5k6eMnl7WwgHy1vjCT00yZAU96Tc7qxasF+R+5un7VVBU\n2jIijQB+CK72pGmoiVvN+AAqH4t2Zjx5gZZ6rsPRMRo2Ir/WT/rPrGl52Tnd\nGn1QtEIhI1MRQzB+tKrMBLZE2eMNQSJJ690IYRWPQF8jKRcZNu6wTP5YlNoV\nAai2SlYIjRV65yJ98ijDlxq7MR586NM/6a9z86q4lXhbKtlKLSLQNfaE2fQc\noO00DoPDD5CDkY6lx5j/hOjrB5qY5coAEFv5sWNtmqV/n1oYaDyetsH4IgNM\n0D8dFz1U0mRZrQbOmFfcgvMREAteHyqK68K/ewyLph+9JX4f6LDq8ILH8UTw\nbhxSGhHN1htJmT1OXHr8+KqAhSoglrUc/qx63PkpQp7UszZR0ES0xn53gsER\ny/S3JB+02bQWSMj1Oge8/OnAfW10ktpQddDsZPtBSwHzFT7tLt+pmcwywBau\nLKC7\r\n=Ge/U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERQhhhBq/QyiRzfEU6NGgRskl4yl8Bja+1uYHXyCyGcAiAN91bR6a6jWu6mD+BRm7N/Ojbrm9lyVOt/aS/NqFfL/A=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.9.1-rc1_1551442619624_0.5139206444658351"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"0.9.1":{"name":"@wework/floormap.gl","version":"0.9.1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"24596137a4133e9922a57773d601c4af81bc570d","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@0.9.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-DwpjmXwylgQPMNNssR1o+mYTmAmOI5zYcqMmI77b6ER5Q4VpfFs5cO4senFHC9Y+BCpweKb/GROQbXMIYaCbLw==","shasum":"063c70e61694aa7397a12ba3910f53fbd441174e","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-0.9.1.tgz","fileCount":8,"unpackedSize":3280348,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceSdGCRA9TVsSAnZWagAAgUwQAJlhmojrFmgWU6EBY2D9\nkFrFIYiYuoxBVX0XNjT74hp49VSbZUaqnE2GljoyPLq4M4sGPc+nAFt8C5E/\nlwxSSXE8SSUXZuQbqKFMdWhOric7nMU6l7ciRFASDFhF7HVQFtjtyS6viFrw\nHwRvWg/cItCo++pdLdC9P3R1lHebYZfnC+Lu/qeU9CJvJz6PceY6f5cDIXJI\nRRp/AjS8LqesqzHOUobMTXQEGpRNWH2JqiqxQJlEl8Goz2WJWVYtHSFLOafg\ngpLjs0Qk9/+SiCDtaFfX3F+O7wzQ++A3Ac2P3TaK+K4rOo3PwassHDiUGmri\nthUV9tP0toHEwEcaYCw0Qogy6jXVSE/NMxnI90+4IY6/d9LYOWPv5/szHWY3\nINkBbXPHY25KVF/IAMLKpC6AGdKH40UdS+f87J3YHeKphTWmkJVUlb6+G+KB\nzQVsXtvSTIWj+23i5TJuWEg87UACoPpwxMGfAgarpONjoEPEqKMyYq3SkyM1\ndmA706BJErCFZtuaShBgOLh6s/1Zpc9OPXM97e7ujAjEHVDfCzKIdPMhatgX\nUT0GSUGqYzGZwHdafZ9pT/50LUAwFTNvjhJc5ktk3DS6GzVpX+SWtXJhde+N\nH40ZCaDm52nJpCPl/3LYWP7yxSk06nPKF30aR/YZNNR2Yk5/YKxgyrOp8nxt\nxfGq\r\n=ejvy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAI/oWjhDjKYl8gx+Ed5+CnqZbIXHjcIfksqvOgGQc8sAiEAndV3fFrldzmoeYRUEVw+LQKb0v8jivHEpfkhmng2zyU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_0.9.1_1551443781359_0.6431695104322981"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.0-rc1":{"name":"@wework/floormap.gl","version":"1.0.0-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"6033b694862a25e861bb00a83bb2f1e16d373e4f","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.0.0-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-59Lvez8dLutkyCBgoFX630vikqoK5pnVdYesc95mbXfhY+nqaCsWyyNRXt54SW9S6CdUKru4sdI+X/t+4D199w==","shasum":"d6d00db034a708fae3dcce62ccf1bc94b90f9294","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.0.0-rc1.tgz","fileCount":8,"unpackedSize":3282028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcf6ElCRA9TVsSAnZWagAAi/0QAKH+krgDq98t/cwrRhsP\nFQai8/DSs0/j36qR68sn2gfsEJ1RivMkxiOHTMBmy7iWJrshvdXl4Sw3wolp\npd2Wtkx8ggyKocD57n2UaSAORJahd7rg+E8rTCZ8386/HOEb+589S3kWaWE7\n4TDCmlUPXm87JPZ7eqilt9KaSpnaK/emMO6ayG410Jij2cbZMjU0+89Uovl/\nHulephbImZQCd7X4k1dbXrytfIl9EOUUy3TF6IkSJ7lcC0Q1vYCcqWn5P4Zb\nKToAYiO3lgYly1aSeXLDN97n22VreOMM65I4jZ5bUH3HG3QKbfob/XVu6dlm\nKeyctt2EpewFPno4nx8fm+nXb8KP2hNhZ+hsJwpF2FEYkAA5GLCj/XEKkQBn\n5aAejBokGxJD01JRiFEXM5law6KIrZ/0pOOANvejEYmhJaBOm+/sqpzSGIwu\nnDqdj1mu5lr+mX6XFI3ow4SzqQ1Gs8nBpcekmin8+Msm1gfOMMm2MPSH1SfA\ntURNB5rM4XlzWTzebKOnA0BviKem4d6rAiHtIG/SwZ6POPr/0aC2VEZXhFJl\nChf3WRTPOjyF6K14Jl3ZaVgEskSEj+sxKPler2GGqEuu9OTABjQoMMg6yg30\nArDILaVt/TW8lUnC0tByQfr8qEAYRgTF0D9k27K9Lr3RTaQnaA6/nG5GfiNj\nS7tR\r\n=Aymj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7q2yPZP+eL7DJAfkX1W+jmObv/o1ZrrUSOoLe1R8TPAiBjjfLQbNw2wFRFD0GS16LnTXBsOH7I5Cq95K+bGmymGg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.0.0-rc1_1551868196630_0.2724652311885032"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.0-rc2":{"name":"@wework/floormap.gl","version":"1.0.0-rc2","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"4589b050811580a0694cb04c6275ae73bf6ac436","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.0.0-rc2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-sCNuT8yYfBOmVSGKkJtUED3ndfjSllk7jPzRcWQ23QsRBRwsLJ6xgnmoTtHewTlYrKscDNzcD1TGj/JF6yifmg==","shasum":"05944a5ab6a33db2681de61986a8c83619ad3dfa","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.0.0-rc2.tgz","fileCount":8,"unpackedSize":3285858,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgTFMCRA9TVsSAnZWagAAAZcP+QHAa7K0QKuSfa3aNuHc\nRsYtjDVlXnZSNxLorjMoCswmKWI3LeTb+WjMpYDljFsX/SwCR0aGpOUWWuzg\ntbtoA7Z6HS65QGzRQWHg2BroIKm+AK/sZ48D5OWVS4JqFeGGc7eQ7XjdnJ4P\nFCk17zTcdtF3Y+k63fadUdsWJ0NVEoa66x2WqLlpAwBo2wnRaQ1uwlsEY/Ft\nCk4e7v8Fivdc7IlR/8RZuC5h3f81I81i7/RgcjFymitkXtnmyq3eS1yHWplJ\n/Q92F6H+44MbY10eeMnVf/Db5yvxc/ttvAEqhpLKoTsYLKCAkE0kpmCv/Ta3\nsFb4r9+m6XFXHLDFDeKPP8P53c2M2EngKL6O319zzd8lXjpmpEvM8CIVlHeZ\npHuo57iZpv8HQi7KPLf4a1tKle+d9Ai6fIARQATKbOpHWjVMFWCtBV0Xka3O\nynsxu79g2nAWV219IdNpagGRZ2Fv1rkcllvDdVQX2srPD0V8uOcEswtM7fGk\nAlTVbebl19s9D4MOAqW7jDeFwwaZSHMbienpxHwl96KGByB86P0YFO2Y1jpm\nzkTdyU9iO84e73mZs0FLGyxn52/hHMJIzmNJ1BUQjd+2WA7nFaVs/eVgWAOb\nzb+V+gNsyP5cli5JhSf1/qglNCkeXe6/KlRe2aMEJyV8UrTcUex9xk43KtHj\nbxOj\r\n=vtkq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEyv4mqfemkYW36LIDXpBMF+qYZ8U1ckF6+nubBthIPHAiBH3Gz/EYwrKGzzbJK5MShlhbcUe65A2dnRk3l2aR2uHg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"drbaxter821@gmail.com","name":"drbaxter821"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"me@philsturgeon.uk","name":"philsturgeon"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.0.0-rc2_1551970636308_0.8649441739004198"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.0-rc3":{"name":"@wework/floormap.gl","version":"1.0.0-rc3","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"a23b3f27d8b2048f81c48ee3f258f1dbedd01776","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.0.0-rc3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-3HMM/FDMDRZgsRF/WbioA2EIL/uzjGlqL4ZLEq/5f6Dxzt3JVJVgZRHIAWEd7qfMIuTR+QhLZcqu1sF53E2Q6Q==","shasum":"cdec0358d0548612de0dd91f22cc632021c9e666","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.0.0-rc3.tgz","fileCount":8,"unpackedSize":3287300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgkHjCRA9TVsSAnZWagAAXOsP/ilJkIy4FXTlEkeUkzOH\nV7DHfNw/3G3JjamEocxLQBB0RlwJ8QVU2//5ebiKWbD0RrDaSMBee6Tsq6FP\nSezUbdFT7nIKbKrG7bFauThS6RGJ2q+MBrJMm33fs/OFOtITtFspwdDQNfSX\nUON1D4VKphXXazcWgKrEmZN/fWcVUlzhtMxqIAVtceIy3oUJJOjfMKUHYXd2\njCcK1zqF12KFoMW5iQ2HyK1j4dn/2CtarCwTjiAJeAe57NEEQBkcB/DL2tvs\nL64RSlHQH3Ub2FxTtXJpnkX/RQ9uzJl75EshPW1p2xyc5IyLOHyI1n2cIf1j\nc35ReDOIGRdLZS5eOIOapotfbVRMXKnMbJm3NopwU5VqDl2W3RuMjcLZ0t2V\n+uAab4A+tKWnAQ/8LW91P0Sn+LAeceD9kZyEoE5flyxvo12wAbvmBDNw8+Xt\nNp9MY6l6TkcO9ystJjF2VabjIfwUPsB++pZMDT26V6mEb1WfhRlW9zFuIZ+Z\nH9Fqx2G3tX5h003LAeCHUePSnG4StW2ghgBq3B0bkH+4pPrP1Dr1mcqokeQk\nRnp/XRoBiSFAGwIjBvClrdZQX6E14jvV/kaiW860UzXVkNuCRa+rGhkR65Rh\nRg1gAV9oa39gDV8j9Pp/TJH/a806mTkzKhQjqZmm0NVWiLTDbDyr2e+9zpfY\nFYyb\r\n=ZoLt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnPj/ud4wnNNtt5PBrdhYCU+HfuzOt+Gxx78VjQWMTkwIgQH0971gwgMtxeZ+3W5yH7ktiLXchtJhN50xUidTsjJk="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.0.0-rc3_1552040419112_0.11278417153543674"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.0":{"name":"@wework/floormap.gl","version":"1.0.0","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","coveralls":"^3.0.2","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"f63883870678b0cae2fe67ad977a19f7848688bc","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-9a0G1DDCt83/VQQI2Z9e/8hBGIiToLIsUnbuOH6jY0dy8iNWywrUczJWPAcUshES8nehQ8dsI0zqJGnKDqM7Vw==","shasum":"af81eb0d1e2504683acfdebab34c520ea2f40569","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.0.0.tgz","fileCount":8,"unpackedSize":3287296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciyRJCRA9TVsSAnZWagAA2EAQAIRrb+nEaAVSnBtLzg8U\nvB+J8fMozHz/SpdW70YbuvDmaFhED8ABRFNNgF6xAPhO7WXIskMnBLgWI/Gf\n+Kc0J1dY0LC5AYZxw5Q41/ryfJRBCs5H+V/LZWCUwZbvMaS0d7Vk77UEnWpM\nbhYI6vHRzhSHmGiB5BIecSxQF8k9m0w+4Al6PIWvHZVm9DDvxNuB8ytvFa/c\nQxx1N/cXgSDoC9Wn5BuKfVzdtufE39YX6zJnJJvw8dd1UtIfjImI15pPz5ro\nCthdxRaksaydwZumvTNchZSjnbmRNQE91zaZ0muNo8e87jHPjrOoQB6831Z9\nVjmlsX1EHZGGfsgQnyujy4K6uiCgojK9Leh7s3xAGPiF+eF66mqdO9IRXPbA\nHQ3nNbFyiMaL3Co3BHyxv/r3zKDjmTgIyul4I1I25sYt6kcF7A5XckvHyHP9\nJvnZrBUkL1bEVDxhkoh8xhOkHDegWgsOoZh25dyMgIWS93I64bV/bVWpy+LU\ni7gwSRg+RdT/rfSqnqnnujb2QaEMI/atuE70ax8ey+k5L/ZP4doD+bxeaXlK\nH9tekbtTzsNrVCrVEzzENA5XDgRfYys3Ds4BPs8+jaaDzOqt64gCjAFwtYtd\nOOwBd5lZmLLe1OxFy4oaazEL+toLfPHodOgkgPZROXnD0eRAesmtEfDwxjAf\n51o8\r\n=fOSC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmDI1wknbc/n47EpViZkbMiayznXBn5YFVVYSGoUBOXAiEAx9/k8RBduMxHmyLLFwYU/aCjktmwopaMzFrXsVVw6B0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.0.0_1552622663979_0.08252883441179604"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1-rc1":{"name":"@wework/floormap.gl","version":"1.0.1-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"1ddd1bb3bb4fa7930a0a56e83882b7ce2e4b6206","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.0.1-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-Ar3SIVSHHr/2oB3DOHk5XY9XHNy4oH1a15x1aiZJqNRAJbyA7DnOyMljsqwywukqpWNEc9dzCA1OolFxpv0O2w==","shasum":"ffd1d2ae38ebfd3b94c8897d729cd0fd93895c05","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.0.1-rc1.tgz","fileCount":8,"unpackedSize":3296658,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmyFICRA9TVsSAnZWagAAA7kP/3yOdF/ozkNvDK6NEjpG\n7vjByStFLww9LY7El6BkmV/uD+MeTQDXySGsYVWaWcmciz/+AkSj8sk37+wW\npHeyTYRMbBmcZx1XFlgHTBP0w4urr4E0j7bcVpS52GKBO7gRnBsiPTMVVjNa\nX8XDNZ+SjmlSQ7ujuEYlDwVLNRahhRG9QVUqKnzzqpHGeguCoXQGVpG1ov9C\nYhkfbCioMOkQQKJtTuqP4yM/AF4GnSHN7mXPc/UXfZDR8KOvH+pypxdyYnLk\nuj+AWXBn160SyMcHZwy8oSmHtD58bS7TlnReOAFhLjDAfUHZVkCa0i/LIy/l\nWgIsDGfnCQGC9QYkEWzV2Ep+NbqW6cBA8JuvL87FCSOONaAfPKaBawqA/o2g\nQOnbXTP0SEoUVxutK+L9GmgFWV9WRG97NGvr2K1QGi/FhMOyA7Ixc5YdK/GX\nHg7HzkVbDkuljOT89NXlxAyQDSTAgsdPZZ7USRKePR2ukUL7lnRZ1ZXaWP57\ncp1wMYsPHYamVFraZBtmtJK254noB/93WSI6zgVdLjkygzoWSsyGiOXs6B/H\nEC034r7G/j5Ov35IalbMCLpjGXB59HFz3ez5e0G38xEOvzyhnxfNeu55Im+r\n8tSG1GYsFrkjS15p7C6ltM7jOHO3doMnSgopwSAWXI5bmIIg1E311HvZdA6N\nPPMx\r\n=8+Z9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYUo6J68C4I87+tXDCTDHRJtON604WDQu2P12E5yRrkAiBcGtB3hoBCUjB3YGi/qcQYjmGF2voXyI021p2VouX1mg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.0.1-rc1_1553670471805_0.17235904384065015"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.0.1":{"name":"@wework/floormap.gl","version":"1.0.1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"1b65d10c3670e6cda66f63f78942b7c5cb2f3c70","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-q3ATdPyagntwbuxPjXIJA/EWFaXEPP5xu202vo6jAU8d5kOk7TK5qMlshJQEJU0w8dGsgs1bZQphHZtdxEopmg==","shasum":"7bc165637e51fd69f51a8f792a459d0527a18242","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.0.1.tgz","fileCount":8,"unpackedSize":3296654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmyLwCRA9TVsSAnZWagAAuJIQAKGA64V6AIZjx8KHxzlp\nMNF+JZUGfDTO6pqHptSV0hVSiOPUnm93zZZu11h2B2SJVUVgLZwJTZKPIO7b\nQORk+QpWtqT/FX+jP91sJcwr9P8YdNdln8f5lXaWiRGpx/rND7sqY0EHt+HH\nSb/IV4gc3xpUfCf8h6nvpRmhmkBPB3r11091mKB4LssUt9Jpk72N4fxcOWDF\nIf1jWE5tJ1EweMEgxEcwJXWDX3yD4BI2EPdWi9a0ktaWHnp2fO0CieGPQVwX\nqZlmQwoH06MnVGd3FaNiPkv7RdiTccCscgYAeqV6skFLZoygNzrzwckquRvT\nxsHPwzSM8oPLSHSbV2aQrq9+jhzlb4Ir54SzAEutDBihL7AQEvNbh3q6odMz\nY/jsZcZrHyzP7n+zHjJceKstr/XaiEiuZ6wtmHLbzPTRuqaH/Pyc6X8ePZCz\nnRBqZZllkzD0+MA/LgRa/AsQ0YebpkpQsGzh2LFs6Rv3APhPc3AL5QxQPXQc\nQ5i/fDmr3RJ3RdsXSw3k3Z0wcHdi1FFHAH37YJSNHeWQlp2XXyoN5IhCKQ9T\nAAjh9rVkNpIodbNzovyQhxbskXLygk7/BPe6IfaQLFxeAXtF0IKU3n3pDgXU\nKokC1I22/dbVpwMFDEhE78/S55xyiskWNpHSrRHg71YjEzsYmfP+b7mMbUWH\n/Ivq\r\n=yfx8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwCs9jC3dKmEAv+16VxEygKb/RBbeyoYKw7XV5EbHAzAIgWnNA6V86NvJN2OyaXWyD5I0ZfwNSfpf33JyAi14N2KA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"narcisa.codreanu@gmail.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.0.1_1553670895880_0.028943668897034147"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0-rc1":{"name":"@wework/floormap.gl","version":"1.1.0-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"d9d8f1b8f1a97b119ac76735e2e3e66f86425e17","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.1.0-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-F07S18yQpU1aFhszeiOW3rxiV61Ef+8zQrwODCX620RtSqkE0hFRpp/56vOK2SO72JyKGXn6xZn4A2mWHh82OA==","shasum":"2ca5f9340b3cde19f8c5eb5d277be18e160f5607","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.1.0-rc1.tgz","fileCount":8,"unpackedSize":3301084,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpYTVCRA9TVsSAnZWagAAu0cP/1onhVCMSqWFSkZtBcma\ne4AFYjGsF/W7O4EPliEU7GOYvZ58QKFd5+m8LHah5Fe9W828YfeIE1lsTK2O\nhJBU76mT2WZ0EAcF6fdXI7TesAnqIh1GYD7lPP5k6tW/AfupKl2hZu0tlhvy\nN0FV/6pREkUudeURuEiAf9sfaUMxbOERru2HbmP0LtFgN/UsmNWoXCdWUnhD\nh1pMUKBeNu/8p65CNA2NuV0eL8kYWa44Z3OnyP0Z2PL/K8KIfOw9E03Gcrsg\n9FKtMIfWOqsmu4FYusqDaFlKAL/RzAtJ2j8nSmSUh/Wj0uyV5Z9RnT44sK2s\n79qzf4OkcD7QihNtxCmfP2wOJADSWRFCrYQB6t4yl4QqDT8dCckw1epox10q\nerI27eoZNTz1tVtS+g0NLbE8OwZMStT0Wz5AzYTuhPocQEcX+rO47HOjkNwG\nY1HkXgHK4MnTAb1bVk4GNV3aztK/A3AYWFCMhLU02+AsKsFbsBwBz8Z+SQtQ\n2fyckBUdT07Cs9Ib2goJW9PBoEDDHJJsQM+r0zObVWcCEDoj9v9FAK0t/JNa\ngJSKPGMyvy10kZ29VI/a+bFCWtwunq7TcYHhfWO5HHcEUCVjQtLz84/iJF7w\nuQUAROSictJAY6SuuT2SlC4E/IZV2vHP+aqT0u8CGt1HqtjXmyYH7DCc+Mn6\nlYeg\r\n=ZvvK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFWbxsTXkf+EyWI3VW09mUDcnLWRAFApATq4AO7W+5UQAiABRnpoza1LutBSr3/4fwf/b6zu8XwShQvc3g70RT+ruA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.1.0-rc1_1554351317083_0.6317518836406817"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.0":{"name":"@wework/floormap.gl","version":"1.1.0","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"417d68021a53a5553d7a273242fac373bfea1ef7","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.1.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-stg4GTOtl3zCavG92LaB09MF+GCfa/sJas+b/22u4UYaqMf8P3bvuwWSI6SX41lrKt1Z4rMvhf1h9yKyCxktZg==","shasum":"62d0da7b6aa772f1bc0d4b0297708963110919ed","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.1.0.tgz","fileCount":8,"unpackedSize":3301080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpZqECRA9TVsSAnZWagAA8HMQAIrErtoQ2O65X/7h8V7B\nDvDo6/qWTf67vrDBKb8D/EspS5qtRvBDqQ5kldtK7riS3BcXKW5OEgxDaxvp\nIJKT5AjemFmNsuxpN6Yr7cMj9672FJiFWXh+V9HmJogS4YwZf3jbTpnhYG+2\nzYChmPNmye3l++dGKwChB+BYZo/0fS6jIEp4snYE4wFa8zKDKoBBBysqFgpC\n2bUuNlF87yGGXW59kgsuzluv+MQvukmDB0+YNLv2T2mw/7ebiC4PiSUB8cIn\ny9L9MoBDoTm3ZQcCBKicOJ1rf5mhFV3UQkTfO7sSwgrr3f+Cg052n+UzOKjm\njrBUplG781AbRaUpAjNjO6SS6pxXr/6p+s8kEqXV1zVPdIclE+hmgm/iLuzw\n9xA3v1yfAB/rFkZ9Cb5ldkbZZy2KAFM5sRyBGnWe9c4hO5mMScQm2c413lZD\nTR3aKMqD63bL6bAlaZDIasGkGw5pqxFq8HkChfGqFNZmvRRsujynvSEtYctF\nlqlP3BI33yWX2Rps+TuwyE4tlR3T0G5CPyKM5ioIRI+qqFbHgYUle7aQvU1G\nI5Ttr+7BycRu4fXn1M/tKIYvRUNH1T7gQLAylqvIjc9Ld8aNRUaKDFtouyV4\nN9fgZXpxW+KRhdMVN8hxDW6PCti2meEXQzlH/nnfJIc0U8gqlHXvp52ZhZYX\no7XF\r\n=9KYA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElJmhzQBJHNhK+GqbZ/wr66Zb3G5FU4Bnq0sK48oyrVAiAbrmciQdN7rBWZcUBDgmD5wxw39paR/3Lj0nSTGmdU/Q=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.1.0_1554356867544_0.1664282388756353"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1-rc1":{"name":"@wework/floormap.gl","version":"1.1.1-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"a425e65aab8ceca1ce444b77445b62e7558741cf","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.1.1-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-KDJB1A4VDhaSOsc5iSf7vfa+wxI1N/8Hip/T0ruotSGsx0yppLqpZwGXFTKNZbNleo3+n2aSrvObTbR516tg/g==","shasum":"a79ccad48a6f98c97ebb155f4c5d0598f0bb546e","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.1.1-rc1.tgz","fileCount":8,"unpackedSize":3301584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsAGcCRA9TVsSAnZWagAAE5IP/jE9Nh2J2vzeAtdWDO8x\nfwcBuc4OjT0e3SjvAMLZIwQM37ENLUfgwXwfe94G6UcNJveLpNJdhHgBJYxU\nzFLSuVDNc7bCV+Jja6as1BUFu3kLcgyDaJb8dD+lBDdmCESrPx858QzBHphK\nHhJdirDbtkp9c9Xk+mNYeZsktnXe/BQpjtMneDiP2pSurQmQWskIAhKqCO7I\nPRRpTWgIe6DPhokXnfCJHhyK2s8eXpU6TF53qQ3d2Au2pWGV6fRe1frBgxkw\ns5U62fMy0ciOY2oaWpq1Q0sqxl+EZ4akE9mJji7ZP+gb6fbD0sBFHpyBu4li\nQvjeMmbbFArl1izWbOwFMagvCfn9OU6c+5WLUkED099TECbsElA3y/yzu6yq\nJfr4SvXTJzHUkZmrwMxV6LAEZLv4Izrot2p5BRy6ex9HQtF9b54IV55eN+1d\n0r9UlLaVknFyPb6s9o9apkeQTNvLGv1F2bokV5Mrq1+ac7dGRMheYn57rnpH\nh92aM9qmHpenhqTQbgi8O91bKuk3zT5JyAK8nKJTz3hINqa15qOH+VO5q8sf\nlrNrIQxVT8o3oNUbePx0oGEKpUWYQn24jb/fxTFN9VcgvdKaZpkDnhJLgQrq\nugd3pQnvEAjSa8G6LnJcx0MaKk8lQzbKg4AE92Fuwbot2uusWZhekxIYvuE7\nGFaM\r\n=9L6y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFkleeIbmX6zCtl4Bdm5T6ub+Rzv/jVV6RQU1/iflSAAiEAmx4O8LgIQwsSfGeRiVkVqfzXrL//nNNFNfMO8nJug9o="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.1.1-rc1_1555038619606_0.5461372789475991"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.1":{"name":"@wework/floormap.gl","version":"1.1.1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"e4a91ce1fec278388747979cc1e7b50ee57cf413","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.1.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-99JmckEZB/DaTKXsAbBkEvgRokzSBphFFpLWPRD1mXxoxehGqPdIdJIF124PDDEZsxJaGxuDNLOhE/ZpnNPySw==","shasum":"d8a9071f40f6ee91ddbde7dc3a9c78eeef59220a","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.1.1.tgz","fileCount":8,"unpackedSize":3301580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsFStCRA9TVsSAnZWagAAIbMQAIB+uTWb403OsAOokI5i\nminMmeQyF+pTRgK3/ecNa/69rkqJOfDYS6XkGpv0WqPyynvgVTclbxYqyC64\n7ZF2AsopSGl3l2hSdBz44gs8Iy4iJhTGGda5lD6qQsoK9iGaQ0sfdWXxXBEH\njhVYf/PdueemH6TOZacliMrQDIFy9iG9zPSAVkzqGZbUXt3CIWii7X9A1rOS\nym5RQTxPGekoEQPCJT12PSdhwWzHN29Ciianfr/WqmCii+A3ptNXuwZWzB2Y\nm51oxbjdUFLldBZfGBjwYIYfs1xPKjnFhUc7ZYomhddYg0ztBzGzv8psW6w1\nlGa4Vb0HACRkm5qqStWHEVgM/b2WcPsQ/8RumuBO0ErpHIdKXNkkzCDmEiRB\n6R0nXxY7bqog1oyuMeac0w8EBowpk4owaN3mTxIOwmYRbR7GHyi77YNaHVhF\n2g1QQZUK/TsRj7NYMyo6LiG/R1Ab+Y/s4d5+qS6FhaqjDMsFMcwodcY+ffZC\n9XH4F5MyyC6XAChkqm6AwKNdckJCYxRvAMq1ChACNigNKd5i5zlVeUNhlXL6\nWx83FnL03TjrnEmNHlQA0Mdmb1iL00jxvKaIWjHy6Bv4I3aczOxRU9Kamo4k\n2K2D1XIDPqP+Tw7SIcIbY+s4c/EwGv7vTvIAqumbSNdQLQ8oK4bvUka95PkY\ndmmI\r\n=AMEF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpIFm/Iodpv40/198lVF/9jcXJT/sQblbnaATsbEqz3gIgYKrAVltHvOP2Aca+r9Ro3Xom3fVy+2jKYqQIKBClToA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.1.1_1555059883821_0.02316276436400022"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.2-dev-lerna.1":{"name":"@wework/floormap.gl","version":"1.1.2-dev-lerna.1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"5a25539b7c6772775675ed8ea6502fd76274221d","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.1.2-dev-lerna.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.3/node@v10.15.0+x64 (darwin)","dist":{"integrity":"sha512-af+JIgD8sSQG4qDa4dP3bfNhMvfWpXLJ2/syWTxKNTQEGurOTFodRFGHZEJ0KRjUAUhdBRAcidhqPhqV6DIX0g==","shasum":"3f55c1084855148aea3ac453ff66405abef92b11","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.1.2-dev-lerna.1.tgz","fileCount":6,"unpackedSize":791468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuD47CRA9TVsSAnZWagAAM6cP/Aqz69dQhuRly2Qe9ssC\nJW0FWaGZUoUODnYM0OrLC8Qe3WOTagIv8dQ5ZaObtEM64zYKAYmt1W2dWmfP\nIj5pBoHjgUdmcCLM3T8NIl2qLkRCUbZ5bWO8pqDtOQcjJ1g3ynLSAdZLxbHv\nUID22PRHXU31mp1gSEOdGolss6lyNhXOrRNkzKnQQVJbYc7zvpJZKW3D7B3r\nJm6/qnV/Vvq/ag092NYEqdAnpI2HB6SThw1ItLfQWJw0QO6QY/jhBL9cof0j\noK7KxgKDeWhsylt8O2LW4gSdAKpL8Oh60TpjSMwuukR6Mn2W8vgpfcibn23A\nM4pxQCL0c7JxLd70A9sNYWHXhV9cPHjrvcaU2ENv+yUh8iruA/2ZUj+gdBFc\nNo/md13HzddaiA1fkhuXxVjS/cZeR8KPLDyHkT7xh22pADfHJAIJO0xEfoec\n3SbIj93Hm4/blXBkbfyshqDH3X9sriZgdl18NcumgXspdyCr6Oy6K/Ja943V\nAW76nyO7AETCn1aZwvlroM+NBCM7bUipMxiQV9L5W7l6+rpgxDUOY/yc0glu\n+mksw5q/m5p/Kl1hDZuQ2kLXSYPLjxiGg+xLcx5i8POXLKEfZRM3SqjrwZyJ\nQ97e9ZR2gCag0F7ZcZBpJclN6v9zOpoIomf3+vvo9qqRopRoyV+/ECr2fFVz\nVLh0\r\n=CgNy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRtyYNeWHV1bgNOAwlP8hRMvousYTybK4yK/zmhcdrpwIgXKEEapBnsShb9N6CsL7qFdY5GSSWqccg8t9yuxWXvws="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.1.2-dev-lerna.1_1555578427214_0.22798099906478586"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.0-rc1":{"name":"@wework/floormap.gl","version":"1.2.0-rc1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"27915f47f8b97aab763d3886e36f9971d85cc00d","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.0-rc1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-uRmmmS3ivyd8cY42BKOWPdbUNPGeI+V7feeVnUc+iBkBUfE3xopQFhKndG9dyRbkbfsFipyYS3tVRQ5xyzq0sw==","shasum":"5721771cd87cab3f21c03d873a4e63c9530ce9e4","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.0-rc1.tgz","fileCount":8,"unpackedSize":3306725,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwWUkCRA9TVsSAnZWagAAQUMP/j7WTVNWIOy08prR8aN5\nj9C29EK2kQCKe7d05bkIUIbhrNH7MMJJGnwzIMrZbANcSgKRl7UBQ+IHv24H\nKa9cZJ1RpHtX8+q7D3IvDh/Rxrj5RH6q+WjrmadhCGNUws0lD0veT+M7FvS2\n62vgQbFyolchHsA7p3ExXp+thHP5b+2CN0F33kZ1BvqEPgBTVs+vZUKiFIJM\nRqxvEgfIIL2QKujouRnbrQVm8rGWMP0JOnIOVpe64d70Gjh9hqPfGIh3WsMR\n6prlH7zkoTGMgChpetH7GrgynDLVxVXpb88xHww7RXUyVIYAJ86bP8Z7GUXn\npMGAWN5NMMrJQZR1JBjkqeHjpe/7S+Ru6oYc/mIOehUk3ahgKzUMN/N2j0qr\ndZ2RajC0lyg5/SNmTIyzNtCXVBuZ/CoB+r2qxVl4oN3omvmKwPwajZNxHGZt\ncuu6nUUhVp87j+KepOJ5zaOvxvRV5kvEnNG2UNsp+XudPLoGeJt8trfjmQId\ntHj/y76pGtH+LRBr68MY4ZwRTmRYjvUIwcIzvWvoUG54Ysq95q2tIhtADrAJ\n9RGYtvMg7gDFKwvJfFuAh63h43PFr7aFwnNC1xNGxz2Uhlk/L1aG9kBhXfIa\nTo4dF6pdR0tJFx1rKXxRNuewND5L+yVJpCaBQpnbC028g/4GxATsHHUjk4WJ\nF6ao\r\n=bAB8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXOfMCLiqufmMdFdVN7gg0jRCNr0TXy6edMKBS9ZXj1wIhAPRqX5oUu0Xw7vhh3Cy4TUrNE9/X0rzoH+0EoKEcmpw4"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.0-rc1_1556178211975_0.9520762404906118"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.0-rc2":{"name":"@wework/floormap.gl","version":"1.2.0-rc2","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"26b453a2d69480f1d3f25d3764129b3799a71bd2","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.0-rc2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-4lH6iuXYhhPF3/gmJ215OOjIqwRAEmK6UJWeLUyrx7xqsmRHkqlZHIb6ULwTpSLwwtnb2jN0D/C+Lm8V2pq4Vw==","shasum":"9f8f3120a9126d4c6e7f6cb1b5ba8da0fe2356ab","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.0-rc2.tgz","fileCount":8,"unpackedSize":3310243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwcj9CRA9TVsSAnZWagAAFIsQAI4GGkpMRs88HrSo68Ul\nfYtg7LD+0IWylni3WKHv5P6byazDpMUTM/bDSDrTum4n5FWtH/ZnOCEiuwdS\nkKB8vCPCT9Ge++lRg+76BwWODWKgBwdNUgn4jqvXSYPhS1Fcsd+gw995m7d/\ndHjmaatiJAyTfxjsS9fmMR9kC/1W+JKU4UNU+Cq5A8ia2hdDx7utoozBCY4/\nH0F9sXx25kguMicja6BRlksHOzgk/V7UW2qv4NVXNCOMwWO6pIS2OGRvrkN0\nSLNjyo0Zz3XUXorNb1Cc2JMuNJJfVSJV/wuVaL3IQ5cOB0CT5BA20JV5rSE4\nz+hCpG9ui+cd8A53S1WbvSWpGcOGxU5so3qnU8OzLPnalxsGN3HUXT9hvT6c\n6ILUZ3MARLdIJbzbUdoV1n/G2mSpAe65DDmePa94U0Gi8RSLLk3VQlC9dGKx\nly4IQv18Ibt3uwWfE0tFUmNNoylxwayOg+3FCI7CfyKHyOPFHqiHFw9gFQME\nooGm8I6Yiw4nvDXdGe+qDJ2mQE4WyBJAY9IyEAp7qP9t7P+PDszkFjmf5t0Y\nFJuj7tR65dYNcmpctAddlAewFlvauIUxD723qeBQJwYG1ckCj5h1YoDd8Ngj\nfJXIJbD44bT1Wwxn5ukD+ICX80pRSsr5O2CMnmCWqbFEvJcT7wTVYGcxE1Ms\ns+Ox\r\n=B/r0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVTHJ7B6ARqNhO3c6ZEjcYa2WXBTBPhaYdFqtcVTDiNAIhAJmpG7l+PAK/EM0gAAnAllriLuovYlQPZC5yVywG8RIh"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.0-rc2_1556203772168_0.205218657795309"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.0-rc3":{"name":"@wework/floormap.gl","version":"1.2.0-rc3","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"0580d7b5bb1417347a86770830b5e129c1333cb1","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.0-rc3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-66UKR7fJrKmQV0iKDHTqO+hQ/ktrw4ANCRgMG/VlXQzbeu1mwrSUVSmcKnNe0T9B5d+MZpal5Cr5EKBxnwbz7w==","shasum":"3c0d13659656584efe4f324268a30f72e303b964","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.0-rc3.tgz","fileCount":8,"unpackedSize":3311960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxq6XCRA9TVsSAnZWagAAgC4P/R5CJqW4r122vb4R6Yzi\nxrAk2Hzm0LImHACKq03q6eGJMHEp1iy+3f36tuK0tKNvq0nKhENRM46gwXR5\ngpB384GBcljfZI/RydSUCBHSJOV7rGO/HdClrP7wCPwkn3iMi9wJyLQ//eNw\nQQcXmS6hYexQwtQvvKspjfTac59SK9PVpK+QwtRTUFyhXrVh/7b2A0I+/UQb\nsGPub+ddD2ameWEwgijzxMhMl9c6RuwQRg0Uj3lTycVytQLD5mREHIv6iwqA\ncaB+pFCl1jwEsd7daeKxqS8Gyy5jEPaeLAySpeSpByocKKBDSI2ulcKay7WL\nIM/wpTe9wJMOcEfDdp4oV0SvTvZGBKtjAzUjJf6yvBTJWi+jH+36xXexWq6T\nxOY+mb0jyzTsdM6bvIcBZyfRGCS3X9XupvI7n4UGxUbvWjdLik26Ey/xiBht\n/npG8BWfDF0NEbN508z9efVgZHiyNQALOvgPcwjuZfpf9i0V2Selsp8OHbnr\nP2oX1iHkRNqKpZq7cW8Kvwa5FbajyRQ5i7AFvY5IdjPlxiFLehrZ7Cz1ej6p\nk2HrUWnUPpQNfUnrlsht5eE0AvbhBwP62dR4Tm4PRYRU6+cgsT79ERo4vQZg\nxMrWTpq8sl/AAkaGqU1wiTAxLOA/OniFlsjEfVMmO0mHy0YpnfvWSD/Q8Lzj\niPpE\r\n=ieY4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOw70K8Aue8xJj3DoXJeyg1ZA6PfiHbM9QHgyAPruIyAiBrHPOUxAqwmHwUElhVBAZ4p8UR4KhC9nHpiWCPXH/M6w=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.0-rc3_1556524694603_0.8916415732586973"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.0":{"name":"@wework/floormap.gl","version":"1.2.0","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"f9bba549480398c797aa1f39d820ee93773a4581","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"dist":{"integrity":"sha512-cOPvsPnVItLJ6ufz5eqkZ/yKBZkLpx20ZACiE2h+T8uhTR6kCAiWIhnz8kB+S/qBqjCSuwQSa4y9Nn5da2OjXg==","shasum":"520a855b311f48bd1ec35d40a66a422430e774bd","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.0.tgz","fileCount":8,"unpackedSize":3311956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcx6nyCRA9TVsSAnZWagAAgLsP/0woPJIqsr8l/dFkDJVv\nUW9f9yZMyx3NG9cNC7nshwZQ9oUJ7r0qD6LDOMPvBmjx2mtwqy3veH9yRtfY\n+AOjDXFyfIe3/1Hi+UAY8GC2j7uBzd9dajnyBguSOj5cS3vXyMOnMgEmAyEo\nTw8s7tJHwceykM4NFeczUBny+4mBAplkWwu5oZ7apwk5R6FuJME9n58+6EcV\ni774qK/diGi98GB+t6qMvX2ZTULVjbEyjIdFmvbkdoq+VjMGdTWgdqNI8t+h\nRvbPpnW2xU/LHHnHkYEMfYY0NzNU3qEHUQFGpRSiExjiTUVmgGOPnQKyUFuV\nLuhU4vf8r1omuc3wEaIZYHzEDMgD0/fiCowHcr18Ryw2zYJrwXJxirNFEokb\ny91LFO9/h/FeXJJQvFtm7aM3kKC1Iu9sbHaz+DpVa2qst0coGRrEr6oLytBT\nZrbj5iE/50e7vQhJarOp/2agD4VM0d/IWlu/7cYwLnx69Nr1kaudtEJPhVbp\njs3pysV0rjjOwMOtUr15hcmL/6hYTWVey4QHMNiMc5cT49R/FmgZlVX3ZW9e\n0kHjB/pfXICSaYRJR/IMB4T5P1FsyCFG3CFDXGGl/wRARNLfpeCrqj7JCWeQ\ncDHJq9UOMjbBJxIeU8kkN0A2sVwOhYaMSZq3e2X54st6IpW532yOI7xMlSfl\nGbij\r\n=VSty\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICykZlNMz651RXpKu91wGSr3Ub4H4viD+5Gpg80sesQQAiEA+LvR779pZFUyFYs9uwSbd+QvX89tLiROCicNnz0n65U="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.0_1556589041831_0.8461722225167105"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.1.2-dev-lerna.2":{"name":"@wework/floormap.gl","version":"1.1.2-dev-lerna.2","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest --verbose","test:cover":"jest --coverage","test:ci":"jest --ci --coverage --verbose"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","eslint":"^5.10.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jest":"^22.1.3","eslint-plugin-jsx-a11y":"^6.1.2","eslint-plugin-react":"^7.11.1","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"ad447241208d2ff29a11ed1640c4118423175bbb","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.1.2-dev-lerna.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.3/node@v10.15.0+x64 (darwin)","dist":{"integrity":"sha512-TyNnvHwHpk+KHVPwueepKLuRp/7GpkKWAX+A0lY59r08iDwnHJu0YzmjHVfhMB9oXVbb1nHhNXSluImmOwDvPQ==","shasum":"f5acb1aa97fd99f7001a6c4b58bfb916a5e1a3da","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.1.2-dev-lerna.2.tgz","fileCount":6,"unpackedSize":791468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0QlDCRA9TVsSAnZWagAAYMwP/jR+CMH9g6QiisarUNud\nMpOH3XWPcWE4pAAeEwzoJeAXmL9hrE132ETgdEj+xBcQEJiT3my6at7hshfk\nJQpGOzePWz+gEboztK+UdZh3LkYXPIPnBSRE10ggt0R4ZWJbOKt7eYHEyEW9\n26OSmF1LA8ElWIcGj0L6KWXiFncqBmZ/fK+OtOr99dmH4B0XcMQdGqUht3ar\nGmgFkrZ5Ce5klT9KNhUIUz/gCSJHv0KD7kz4+OasJuB5K2nGuW6cqWnJzRcL\nISMrqmtUYNY6P+BnA2UKqfcNqsvStYIMIWYgM2SAAFMqp0n2zjoUia25uNjz\nHp76cMHZPZQyo/i3DN7VkqXWLDwRUR77SJ3ist6St7hbcZmL4aSRaEUlxhxW\n0Vm3p0vtLSLqwOA/w5E73aXRMlPVQvif52ElAN/D6hgG+nZ0+8n2s9gg6tn/\naK81KkEgGw44KC3GK5ZefpB1CtcMTTv9zuMeEn4HQerce/yCYO3w7SfuVx2u\nT3TwRFjkLF22P1SLYQOSSpCT3HxJTN0bHhco+34yrqeJXNrzo/yO5J7nBDQY\nZdVdBU02A9JvIOzcmHpuOiZ69LBMMw/jjjbflzosBGRLxL14j0Egxnb84hs/\n6NfuZtf0eUVFiE6wcBe2a5wJVkPMo9RozjvQHPoJHQksuPoWh9RhJKFi74lV\nDdMr\r\n=syL5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqNvG2Z21maxzpQ0P7gOXXMserCzl0OiQoZIKMh8tzfQIgU8DobBLMAdf+NiiyvB6+KVAmJax4PT6bqCKeqHUnTXE="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.1.2-dev-lerna.2_1557203266532_0.8951121495555725"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc-lerna.20":{"name":"@wework/floormap.gl","version":"1.2.1-rc-lerna.20","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"9b152ec1953d70b93e594f7f3f8692cf219e1a4c","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc-lerna.20","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-u4Z7PMR+RX1ewcUEGNI17rFffIW3oCLjCI5kCNDznLqAeaS0ruBfqZ56kOEJxQqCTzq7fgpwMOJRdZCord9n+Q==","shasum":"a5799d31a29806e0728a861675420498758254cb","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc-lerna.20.tgz","fileCount":8,"unpackedSize":4000480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2VDlCRA9TVsSAnZWagAANGoP/2+DVZ8cRU3t+zHmsnPX\nGrg2bW5USumEXZQteu1KX5j3kqpkPbqDysxr2Fmn3cGjwEjrae8X1doQd7Kg\ntBuSslvzITH7d9HwyZLZTIWaS32wcTi8W1TxvocTdfojGgcOQSlzZMcG7EDZ\nqklfyv63zyE1Unm88qiFWQjLXm41fKeaklLAyaz6t2lCA4Kc6/qHg4+pWDJe\nES5Et96Nk6BJWqL2Qjv9Rzdsl9snrZRYzRgdlovUglrytyusXTjuoXf+RhLV\nZPpnZPLtrTdbaIf+70C7HVvuWO7VRuC80qzpFJgwmyPkw4u3ifp06XDlP1sc\nvM51aS8NhURg8CV2JbMNaMM3YT/KDbcCe8+m2BWQUtedRMsctFc+BzJEFaU6\nq48awYRrzvX+cCm9yDWeZhBlkM7pUfgunnKyCnh1p+GLNffbqf9pykTtW0z5\nY50A+MZxLj5nS5jp+7bSelvYTqdSgrYItmsu58q/5mLtd4yTFt9UpGpSoT0l\nU4ToeZLhRXjWf8AsDCM+GEAfxh4tn9k9BJBDTeR/WBvV5qEhBLZDCBJrPgP0\nSX2OVZ1YoSM6i6NDpXY/nYyQBX8BYkqAr9O7ZWPzlt/8oAHx+IG/wFkf3qLY\nTfLgZp2KDOEdsdxYc7q/MpGLqKZexCSN6q5Dwr6SL38xrP9vCDCr/QCXzPQL\n266D\r\n=kxP/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwKnKW2H0Y8N67KEe3osTqcS7L+kXw0z9gyzVSmhc9OAiEAiSev+pybxETPtUHIWvVXh273REZTmaS0jGRdbLUJbew="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc-lerna.20_1557745893045_0.8290685498287338"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc-lerna.21":{"name":"@wework/floormap.gl","version":"1.2.1-rc-lerna.21","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"f2cdbc5e8277d60b04ebb7a1e31221b5524ebccd","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc-lerna.21","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-q2bSRlrkF03OR5KPA+kVCA7idNHA2mYYte9dmoNTU/Pkf8yG9ZmyrvU116qDbqeXsvUToNBXmI3lORRIbB6xlQ==","shasum":"4459d71112124e152f908c81525a037108052f64","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc-lerna.21.tgz","fileCount":8,"unpackedSize":4000480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2VSiCRA9TVsSAnZWagAAmLgP/ipiPAYuLP83SNx2gyGL\nVMcP9D0PL9ATVc3k9TMPhqzE4d+mk/JY1WACCVt0nDOMxcO/9yWhRe5DsaEL\nxxb522wpEvEmukuqSvsPKvcFCv9Omi3FLxj7teR8elJF1FgnJwBeEbvhSgvM\nx/0EzCamkoU5igWZ5M0hgC3T4Dtz+6tLb1v10tzkxJlSj3ZDHgJ42XsqwHHi\nTqrJd6AaETVFYdOwM5qT16l7GFiXCAbMRztELeheDjVL5gODFXubAHR/U3Oz\nyCCD4ewwGYN4Dbb8ZgE3MHbBLMcEu+MH2AvYCmNypIMQHioIxjEKWJnBXBr6\na88zsp/BrQ4tCM6Sv7SGBe0Nd3tTK2Q6e9kS3lvsCdDOUunU1VbA7WG2teuU\n+Oqn2A4bkHegihoKrpG6FwTjJzzEeDxa9DghVhW1r4iP0bCcW57sGky0Wpjp\nx7W/YW6zHZde0rL9Q+LaMKv/MzZZSVqN27UkXgM0xgjJjveb2vrhETWrGD+x\n2SfdN/d1Ms4ZqHtr5Mn1KPlJcgITk6MQaN/7lABSrO/v5arFgLM7HNbpvPtG\nnyduv1zA6iwudU8PYp9NUx8W28HrsY2wi4yako/nkIOBV1W6PGr3Tcn4vJmT\ngC4VtjSTvHJwYJaND4Kp6LxhJITfZnd8Di0MFz88pDYEwY+Xpi1WWmxvGwTQ\nfiV3\r\n=01r5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFXpCMIsMQlyLiTcgXMYrAodvGv9Mo/I3++tLPsPzUv2AiBCd4pcLsGEmkYYkbie2zkSOZkqVbLIpkRLrvf6DZasdA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc-lerna.21_1557746849521_0.022683320048638933"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc-lerna.22":{"name":"@wework/floormap.gl","version":"1.2.1-rc-lerna.22","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"af56bc0b98da0119c36fc98bfbd7da39a3a56bcd","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc-lerna.22","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-TrHwOImIQpPM8/HbaBJTEpi37ssPD9Mgfubnn1J4o0KTC32S6t36/+s+NvAv0vLR+dRfHWAFPaSlgcgEY60VrQ==","shasum":"fdd9573277f5b092c12162d0436b9991a41ee9b3","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc-lerna.22.tgz","fileCount":8,"unpackedSize":4000480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3RJaCRA9TVsSAnZWagAAesQP/j+VDKRRTBUb19LaIHsZ\nNf0adx9iQq4L63ek5KovsrE6UK2yWjclCa8W5jp/VZpAYgxFbyM7X6SH/K1t\nbqwtfc56Tv92WMdngDKqUgbwjbl5uj+TStCSROQ2mj9vRS1pZf2He5L09LC2\nsArXCHrqUMn479DMoNwlIdyBWOjuSu37OU7huFC2NllBUyfKfcJVqClb9Iy4\nF7o/+DztcZ/IuumeUd1X+96gKmKBh6xN/HLUH6O+pN629NjvBhvkBtudEOz2\nbhJYTY+cjQmBqEK5Em7TsU7MM8xkswFDJBvH6k+az0DMVfEDj6opZNX5pGle\nZay0o0R0UEjJhKD4jIfZaF9Wh5ZesRVrYPYQpPePaYUX5pwZ6hcBAwrCQVdn\nny+OzDDGScoX4Kc1zfBkFH3wX501+0SBTCM/rZ8KNYfTJtP3xucJWrzDJEic\nINroFvgYiT2J2388nvzKObC7dT2AcVx8uUMyLERsBXIOl0bpUBexvjowJgPe\nlBiomlAhFil6aXPO909XHpzXRvekxn1sUKZpjziQsGOZcwAruDko48f1bQdS\nxcZjOGXt/jZOA5EFVLSh7Lpxg1di6JnIkQUZ2eS4LHUGzNoK9UFZ0/iibZtd\nqtBac64Z5Au5yeQw1Yvs5S/8U0bWY+MXazjuOAcsaK7ZaX17Us01PyGyGT72\n1Fr0\r\n=eiSw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEL8e0QsXbij0w7lk9kP+e4XJ3nI68503wqV+28oGEeQIgY8Q8hTJqd+a3+7QtMRU12cY3CRWREpqn3ez1V1LOUgI="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc-lerna.22_1557992025918_0.9189236786361696"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc-lerna.23":{"name":"@wework/floormap.gl","version":"1.2.1-rc-lerna.23","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"f13af804e615ffc028d7604eb5de7136cc67a8bd","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc-lerna.23","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-q2Cnc7Y60tAPi9yxNWNNBCqJ8T4BJk2ax8YAsP0xYByon68iUcM1ICgQ1epiLcma3D+HDavn12va7JAi89naqw==","shasum":"a47bff082955f18a2bdda01e0a326be0de184886","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc-lerna.23.tgz","fileCount":8,"unpackedSize":4000480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3nF6CRA9TVsSAnZWagAAqo0P/31h58B+/12OI8yqIhMB\nMxszXGdNa3fd36vmS2UrVpfJlGGD3l48NSIELj/7kgK6/BhdD4L8kYwRoPJC\n+S2QOmuM6ZHX1M4sU6JlOHAEdM+xALzjCP6xtnUTxYlSzC0N6jMbWZNf9+1z\nreoOWCGNM1AvBx0fujwr+TMdWlmlKWrO39WMQRF0EjDTgGfZ7npChbYr5kmf\n2vm8hQHcyJVi6tgr4Dkoe2EAkk3CPIxHvIhJALsnsZb7C/CNGrgOx5DPZJQo\n+sCNGds6SDPq6VIj7ZGT98KHaJVIEYsSKgqWl4kMaKC9Ehq9kYYNx065+akE\nVS1RtMLyVfQapIBlOuhawJlgR93IC8Dd16/tHQfclpsSkNdp8ydD4YH6uniU\nJ1JCXiS9YhM+qO3icCSZ1+uLUDnNg1EUuhaGrtkuI0RI5XJmW2p1wZbJZif0\n1eBB73nj02LWK7pzcSmCwupfjZ74Lfnex/FwCZJGpuSpC67G3DZ6HQykKZnh\ne84zc1e+iovGyGcuNDzCnooERTkHE3mKCFoIizR7FTNtlVSJl4iSYB3ldOme\nP6ZsDfyFECDHYZXL4lKRqnafMeoZazv+a2Iyw3iJ5fJnPxzoFhPEp31+Fzte\nMPbE4WJJ/VoTj7GwlEE24rkxbZZalemWZ9xvKajPhCmoUnRljbMp68bc1To4\nG/Fn\r\n=MlY5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrqVgUzqwQFWwN7rT5XpEJsqhev7lsumMjciN3KvqT1AiAhXX+Rprcbg+ekrco2cTYb2w7TmRhMYbpA0UJr1BXIOA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc-lerna.23_1558081913386_0.931944610838181"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc-lerna.25":{"name":"@wework/floormap.gl","version":"1.2.1-rc-lerna.25","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"70c126894375a2c439c86419f344fd48ea38681d","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc-lerna.25","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-yXXjMgDUtkLDm0iOoIdLJbkPp3/YCLuSa8j5RJEoTGkTQXTIxxWdduFIpEumdqGRUOPn5xHiBdcB7pwu2lv+Ag==","shasum":"2786d0c1f4f27571d6e0b7728565c0ca62ab1253","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc-lerna.25.tgz","fileCount":8,"unpackedSize":4000480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5LGMCRA9TVsSAnZWagAAVkAP/RzhwOAjnxwiS2hR6dvn\ntne6RDPLvM+GUDFrED2aNORWJJ11RsCdLLgopxbC3nnQedoWpRcSe4umYEnw\nXMYJ5UrIrMOF9x3crvYZ//GJpD0ZZwpKODphi7+nNoZvAb0jrFN1q6pW28XM\nsuPfXHVA4Yn/L4UUOwKvkjlx94M78TOZUS6X+3yya4jQwDofI+jrMD1/j4LQ\nde4V07wG5dULcr0FtG6Pbu9af1JPgrAf6d/2vq1/ZUV9wpXnPP022kLhpxnX\nUrEeUmikkuDkAG7I+Nv3R+TJr2JIUZmhvxbRr1rfWk93FzXc316Z2QzgatGV\n8nnBgc6j0+0NkZCFLh3+DRE6FLO07UO304p9uJea/ePJyJitPDMjUIY6n8Bl\nkYxGB94YvbM2jtL4BDmVe+hcAlKxPoT721YqolChPYifv8vtYM6zXWeM/wH3\npCewWJrs815Dr8l3ow7OtjeqWa3plXOKTGsbB5GFRA+sEpC5LkA/FiVH/j31\nZZiqcPSrNR9MYCeS5fggP+LLCyYu0R+iRGIpAh19BBOags1WMgGj8APOOSfB\na10ZKXBILRK03/ZQ7AEKF9F8DEltakObkTnADRoX2OPC3FcxjVjbcqqLwKRK\n3yYds9J9B4eIUIF2M9tsRwlzhWRbxBfOVjfs57f4BMlmJ4IHsk23Z4nggC58\n4WAD\r\n=ampy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiSm4RY2sZzxP1LzzIBBp4a48RIfW10liQb4ALeYwPVwIhAIcW3ZPgCFXQ3JF5pXBuhk6wVBkvq/ZKCs7Em6Gc6I+m"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc-lerna.25_1558491531986_0.1521329936024678"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc-lerna.26":{"name":"@wework/floormap.gl","version":"1.2.1-rc-lerna.26","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"adb30cb1df823a74e7572251831a6f2e42b4fb2d","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc-lerna.26","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-TjARwtVQm52jO6NBf3VFXde98qD6k9XGMSLmmWCQQ+lYEiBoiAF+K4YnJKBocc47OIf4V8HHLpC/qAs5mMT6dA==","shasum":"fe7ef29dfab655a983bb12c0059782e14ef97a08","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc-lerna.26.tgz","fileCount":8,"unpackedSize":4000480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5MFhCRA9TVsSAnZWagAAGwoP/37+afodSrpsxU7uXnSY\n73+A9QI75M+JdKlKoVwK/hfpVQ/zKMgqtySwO+LGWSpREfV6KVr4vrrGPkyO\nvuZ4Z6ii4NJRuiowf2HAGLgVCQ0wLoykc0Sx9zjGdBcaaX1rYdEQ1AQ3V+22\nwPTHrv6XPh8ut5KEyESC69Cz1NLgFDns6Z/4lYo8BIUWDRc88zjJsBaVunXB\n7AQetusj6IDD++Ri6jKbh1m/EdyTPTkolS/3J/nAXHpC5vcTv41RdNT2mGmT\nGlz1644f3mERnw7ylKQI0MCNMw+rY8uds6mGMxJykTGcVbwSOxhS31F/u62o\nRa9G4uQb5/e5mXdpgjCPZm32OpsOUHdGge41lr21xPwSfiA5BwDLo6Isa/U/\nXDEWlsRVhQ+b6YEoe++CVE+ePy3brqzjEzgOMyV1RwjnS7zhadKFsSk0M2iE\nitvrwvIyngeoc1ovbWTIjKyuw96N1NkO6xVnvoc7FCB/PDMkIGYMYnOEYMJU\nEOEiFtB231Mjgrxn6Wore7F1wdgmNAXKaP1ZfpUoD0/SYleilEQvcB3P5Wm1\nJ6IiXeGnsjGKjzXl0MuQeX0O6apXNskd9W+MUb+7nT2Gp2+7RAXWxn9PbGgP\n9qE23nkUk2bzWqrrDZw3I2xsF5flqNk6ufQOWNPdudPHtmf8NCvGtOG3UMX+\nKR4L\r\n=2lEu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiIL5TmiKceTTVIRMWJbI2W4++uYbwDuk+539sGRM9KQIhAMcjS4VJG4iLFx7676nZFLTVhkV/qCbAXj50RNGqzjN4"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc-lerna.26_1558495584935_0.8452411195201923"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc-lerna.28":{"name":"@wework/floormap.gl","version":"1.2.1-rc-lerna.28","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"ae370f8ddcd7dfe107caec719d8531782a27ed7c","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc-lerna.28","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-izduo6uo4jsO0LPrZ+XYE4n0jpiVbPKqbv4FVhxmbkFJ05OUJq/TNDN2r16zD6uQ1bMl6equ9XvM3LKUZMQJFQ==","shasum":"b0af7e3dbc5b7416e670f7aa4851b6a5bf5b2eaf","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc-lerna.28.tgz","fileCount":8,"unpackedSize":4000480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5NvtCRA9TVsSAnZWagAAo3MP/2Abqml2Hk6luXvJWLSd\nIyBKLEGc6KxLcHK9qGF+aU3mfG9+94M8M61HO1Z0MvDyqnQXOBwvNGyMd9EI\nAuLvlgM3LdL9B2Nko90EwFWznao9BwaAxgVa+ktNm3ql7mpfcowok4bZxKXl\n7COJdPMrFU8oysfpl2UShCQQscPNi7DVuCoefLqt2JEbMduZN3ilbuU6rwPk\n0fSpoO53bP9Rv0owO9uQ7AmThCryo8JNFzTnfTkJs4pQ9BXQBUusl7PNyI8e\n6oy6Wv4FFc/+4DZTygRCMNWt9gx3rmSukDJ3HzoE6j2w0scc/OUarBAmPn/r\niTM3Nxw9Y2zAyTsUSuZVzM/K+Jo1PbPYLJHaJBXGo+Nt7ZvAO92P0t8RIRdc\n10uWoqgYELmQBBs0O0lZWs9sFxx4ZeoBCAfjr292YVLNVK+1OgQzmpmDHF2K\niT9oR2QlNcfjq5Cqx0YeHWKZUtQYJO5KY3M1NAXiYmyrHgKJrAO8kYt7riUM\nRMsm8CtDui7PJpCbBar3p73/0dQtm4dAeyyrNL/0R11OMWmgtN94U2UuQ3QX\n9reV8W6kJR5fqU4JtYApv1j08rh8sgR78BS+u586gE4TmvhzHUVNiYgr18ur\nAgJD661ZqQMIUa9tr7YYtnKNn6WVBl55Vrb1YsAYRQce1UOCIkoWbN68lItf\n84qQ\r\n=B+0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfv06N4RnO0TgUeI1wXsXp++4xGWxVH2xqEkN4mFoClAIhAJU+hT77szqIgOZnOnfWQreDsDrIawm3v/vGjMAWarRl"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc-lerna.28_1558502380553_0.201788096072111"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc-lerna.29":{"name":"@wework/floormap.gl","version":"1.2.1-rc-lerna.29","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"8cb04356c32bbce7dceea65cf59b46a08e6655a2","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc-lerna.29","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-DSfRf9P6CFjSGfv/cC3OpQv0gOLyrHgYUb/p+/urGD0Ygf66AA4PBeVYjj4v3dDDvieBOExZ+k1kJ4EGvV/S5w==","shasum":"5ade3007a1569de93666c0118d44468027acd706","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc-lerna.29.tgz","fileCount":8,"unpackedSize":4000480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5N7TCRA9TVsSAnZWagAAM7sQAJjTGMsM+EBoDWYEynqE\nBJ8Ed1+jG4cWFr0vHYFocIMPN0IjKflMpdjNA/bVF61rR59qjFfjMnpj0zgg\nF0pBieOr6pJ1wTrGu4cNmp7wO11QLK4uDHcrVcIvm0cgsRqxn17THpLmEZGd\nCXpOeAKAI6D91OQ0htdJwHC7qzLP41nDxk19A45VnHfv1Qwh5d7wkTLIzeED\nUIooi/EgwAmc3YYxWlG+Uid3CX6FU0TJdcWoxrBSy0FF6jjKG8WgYxh/AK5V\nH33KwavWeh85EIGT3bMZPRVj82DA5K8ltzEAR9iGmgMEs2yaCqoOGFPzVVm1\nrg6ZfExsQv6hswyeKAMT601VlGx9hTIZitxEW+V2QGbK5br42Tvog5i4anaH\n5ak7NdAApfSKSrgWG8ca1Xa37MyU20GRACMwOlDdH+a9/fDclDC+ncA9zR0i\ne6fG8OrOV8h9LrdkiZgboelPeiR+Ryc29CqVlLF5/faw/qcmF8NBdQkUnqWN\nr2GUe/tHf1H/2gbkon0lCPxTqNa2MwLZqZB2yRgo1BeUiHOeK3lUO5B1zmLA\npYfKQUsUWJqkkdQbCI44qJe9pN/+1unp6sFSuwTVMkvKoZ+J0Cr3u+bt7F2w\n7W3zM1R57A5sw2fvlLNayr07ApxBxDQL8wTR3wzLGkH9kuxMkdjrbBUoqEdU\noxKC\r\n=uM8s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6VqdNEfViXtoaMsbKXalbpwHd1b30WHVx7wfuDkrfjAIga3DcdSX2no8ADyMB5L4eb95uW4vwM4xP2nh8NJYoeuM="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc-lerna.29_1558503122248_0.8419236372671399"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-rc.30":{"name":"@wework/floormap.gl","version":"1.2.1-rc.30","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"29559039515da5d557e157cb5df6df82e758f332","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-rc.30","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-bqmpb0IMNkTlXED4CbVPzA1CRQeD1SuVGo0TNuF/m6eU92waNVYYDPz5yh/BZvj2CgvoL1jYA/eLVj+Dr4MRGA==","shasum":"38353f227bd5b6c2b3ac8c8f821b5f03e2e6385e","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-rc.30.tgz","fileCount":8,"unpackedSize":4000474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5PS0CRA9TVsSAnZWagAAAmUP/iwie/ll9X/MDtrSmZ6p\nCUIUMj7KSCIcUUE9GQ9ILzigv0oc83P/OezL+g+g1rOlM2eWQWmJU46JAzIf\nfJ6ja4qT/eoGXFD/F9SUyPju+2/ebT+XlhMkSpin5LNuggauzyvDUGeCEmFe\nKWgJ6D5PmZP7iU+Gs+bqkSK2O+5vQxH65g35BbyBztH0jWJsEyFRzxDP6dh/\nNxhQQidjqMyUuE5rf5Q/mve71gZjUDoSJSEkjc3O64urRgNcHATZCWGGKjZ0\nJBhS/FTNGMwUqPRal+9vTINBVm6Q8azLOahACqLd3Es1XFkXzLgna1276vvg\nFHMunnafyDarZ4E9ukJtdfzH4H+mVMM0EhlUs1IfomZpw7bR15tr6NEKPTUz\ndj+6+WGvKY26o2oz3FkyvD+gvydIzMam/y8LPJGNHOcBStDAZ5DR0hlNEbka\nLAJZmYSIPok2VqJg/V1E8ZgpvOnbDwbFa9+/rO5xFbwSChMaJiOiYzjRReQf\nePDUY9WtNBFQK1Tkxrklm5VEFoe/wKl34/503tXPxg3j/hERcu0Q5wd7fgRX\nz/hxm2sFdZ37vZNt/4UpUjLa+CBWENMGUEn1O5zcq2yFQPApS8cQRNqajkY8\noJk/223ZJiZhh5DMSi8YltTLxPVupuv26W/HFWY8lS+xRqFQnoJKDjzbUIQ5\nzNha\r\n=tHL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5HhqHWNP3wYs0rV+6YK6lUys7JBdEE47CMHw3yXlFVgIgHmwSUKrpiHMJQvxvxZk5JdKMkl+TPZZVxHsAQHZv36Q="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-rc.30_1558508723842_0.580473276275445"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.34":{"name":"@wework/floormap.gl","version":"1.2.1-next.34","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"3c99aeb114ff261cc1b53168af8acf3019ec34cb","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.34","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-40EF3VfvbIy0atZ+VelIJ1OAFAaOxRKGOhEbEIDUdDlaQ8S+Egf/j/CHUQUzBJzoBS5zUN1Da6J2H+eyUSiBhQ==","shasum":"e8f4c0fc6a9ba2b67601fa825b253293bd3747f4","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.34.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc54OVCRA9TVsSAnZWagAAIhIQAJnlry4yk+4GOjs9vaza\nkIT+aJ33+Em5J8knG0Ve9TplgB2NBu4N7ForXqk+Tgj3gn3n7LWpCJLnfifH\nee9ws5IYqexIZaiOtr5pQM51fubU8NrW15KkkqQFL7Qtbu9sjQyx8us52Sir\nzCEa8h7sKk+ogdEdQX8RnKlxOX4V/gzknloowbJqdierhy900JVESQO0lrwc\nm9ByfPXpPKCHvZraLy+MGWfgxtOsWs7gHEeOfdOwcpaQ4iZfxmw+T1KX0VNv\nUrFr6dCz+J4kk+6Xjj6iMCkRYunYWIsb/jooDURCZY+QOdcQqh2nHaQifWl6\necDiIWf1ePXqyFSIuPNJY6mfO9q1Ii10NUQPcF3R2chi6rzD4FMon7uOwIPX\nb+bv13MUxYl2bVDM/Z3K42lCbWetUGEgbp5KWwb/3JBYxCDSKXRCdBs89chV\nea6KY36VxKBDDlQWsShLNHbNcAtHXRiF1u4ynOieUk+CV2yiwuSxQjt2aAMs\nRGxvvkbk50nlKOA6QpPNQKWWIV/LNEUXnEA466/H/O0gt4ekwP7OHQFf8hFq\nuSOeuq04np99h8oPneDjCwbhDfSHuV/D2fTF4kjfR+IQTKcWDTHZG1kiTR/k\n3OTwoo9xIo5kKwJorHWbz5e2OCWQg3XGYUXhC01W4YDRbqXYGnXj07Z9uFAN\n2OwG\r\n=6e7W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeJG7iD+4LRg1keX+X5PxHfRlr5N8mk3CfyxmCBgZMMAiAUpPe47AYi0kJZbd+jNS/U3DB9yCUXYY3X2CPKnTX8ig=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.34_1558676372446_0.6413005702912526"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.35":{"name":"@wework/floormap.gl","version":"1.2.1-next.35","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"e364e3b14744a220011f258bf207e9e3aaa637ae","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.35","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-Z9TuKH6qwCdtXjiYDHaLwGnpEoV6iXdXt8HXY23Y5q1/zhEFuUUbFNAyKb78v0xLHnsZ1Oz8GQ1+fd73J2rnCA==","shasum":"231914920fffae98e8254a754493669137d38a0a","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.35.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc75xwCRA9TVsSAnZWagAAPeAQAJJMyMfIEmEB0FlF3WZK\ncNPdOQsnASPQ2b6JCUYLpwyXvuHNEQGcDkSPO9R5lnA5o6y2c5fcyvT/z72l\naYjrqU8pIVY+qNKw9yNwS1pkGJOhqnyEecdLSGkWjBffXlx8ByBLO4biHlJj\nndNeXc/YVc39KxJG91e+dTydgOYNbeTR314wLpzIeJ2Gqu7SI1k8dxhWtPtr\nLnmxl1u5R+4fqJmJ2kmL5uX2bQ0snEmLHaJoPozYR2Bs440n6E0WDhnSLnvu\n01BTu+hgLvVqiyc5qCtVeMoapvJ09pwAx3KioceBG/dvsvpa5L8i6wi7QOoh\nQBgBDxXwTXKwupTmk637+3wV3PTctk2rGA3JJoS7LeqWFHKyAL3cwZ0WnWf/\n2hZ37a/nyOatJoAiZ8z8JslogXKNFreDMk3KdSluywA6lyzveEWPO0C27yYd\nkDgy9J+fygwORqQFfk0UqlyQYO8nggvSUHvD48OILRlk+Ku+7zxmi2rzLV0D\nftd6EDRT4EKG7tQ+CD6IQL1uyvCwkDKSOfwigSoxW9Bg/UYZtRtXfvWd30rl\nXBomBbiQ+wnG60HB4FkMQYc4W1v1YkPln6He2/JWj+E43jiPXIi/DsXIYbXN\nwyuw1b45yCQ8x0OHyg00DYNz8BKuBRH5PVzJsFjTzOWUQXyqqQoyCCe7rnwP\nRy62\r\n=33NQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5gmL4ThSXuJjWPxhvFgFEKNvinSl+Y21tJabpFkTWyAiB92AGXysX0VavOEJqRAjNzkyKL4+amjuoXOEkPVKak8g=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.35_1559207023560_0.6174504362091373"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.36":{"name":"@wework/floormap.gl","version":"1.2.1-next.36","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"bfe28a8610ae3ad5508223fd2ffa2f0b22f8bcd6","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.36","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-VaSvKEodUKVXXMIhwExBSWeHkA980YbvbCZH3RlS5uGpIQJhElxzXXmqiFnE4gzDzGF93nte7SHWfztkEG7liQ==","shasum":"4d4e40ab706381d214911420c685e05eebe42f02","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.36.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc76EUCRA9TVsSAnZWagAAKsIP/0yivmgb5/lsheIN6qfT\nlbQGMFcXxxx/r2WoYMowLzvJ1WDZ9Wm36dRklVlArSCcD/NfGf+ctzKL5LGx\nkFVIZfLTFZcxtKJsLgZtF44kfwt5wiHdizsTwY6YqAqqe5Gp2wnDya0kZ2wV\nF0HF4+iOs1KTnOvi7N5yI3+QaWaVQKood8BKpWzIdiwbpRnn4ZhyeGgG7WsT\nF7DNReAGyIn3koEgJu3F6iniyeq6OYJU9D3AjAZBccerJMDIPpYzeEuJEDP0\nrm7lcQwgwaulKdZP25uCWyJR7iI6+nasT7ko8JHBaiCVc2sLC0pRxA81DlQ0\nZ18aTunQgUjqIZtndxVJd50HdgaVpBP9SsYTyaGbus4VET0RrkjjHcQ9XTzm\nlITTBfByBn6j8aMAmDyeKPyK9OTPL6LyDDyOcuxlNvlYWorG/+2+AzN46+5z\npVv4cDu1fe5+29ivV7rBXsSYO2mIyqeP2Zg2wZSqO69wX482oUTLHGB0tbPx\naDVnLqU09Dj9bsOr4tbPKlljdTsDNnbFCaEnNLzw1jJq0e3WETZHHCpXubTT\n89Ck9Dz1cbcpatIuRNrNlQU3RPtzGqlGkACDGau4RtXBxY/c+jfoty1TcKCM\nNX21cAP+kPrNe3bZDGmTv+KhKEqtUNA6N9V1BhJswPDk26LQdIoPi8rA7uVk\n/Tpe\r\n=mucg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBk0j3zJCvS5PcE/St4tY6WD2NFXXKPe+Zh5OkH222XeAiEAyWsZL8lkhRu3J8nFDOJ0s5er1bt+QtVrYB2cCoj98LY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.36_1559208212139_0.10768381393434812"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.37":{"name":"@wework/floormap.gl","version":"1.2.1-next.37","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"9c58a034bb229c139cee5934ee6552fc2221f834","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.37","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-vseAFzaW+jeFEAL+rv6czGC3vha76vuSNmaY1xIFdNHus0jhVK/Ku+/B5x74EdARjH5xalFPjVvy/nyP/67jrw==","shasum":"45c6d1f51f0d6d5c9e763c1a36300b5baa6b3886","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.37.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8QcHCRA9TVsSAnZWagAA7hUQAJ9UvMxU5z9jnHG/1sz8\nLveCXbTIEecwKvzwHY7j5/PFXLl6wMceNMFbSGtl8p3lX7b2fJq6H3hTd88I\nEFDM5GSL/lAB2lCHX4tSy/3/eZ3PK7ywTpGA6bRBB6GiCkJLHzpb3nD63EJ3\nIlvLN6FuyJnNg5lb24rIEvi4dGYEG8tRWqswI4LIfD4SJUnjtTxugj0KpRLY\nBELefKdldYmd+mdOOzrzU38sqDYBewNrEEhKSic7YrY0+sOcZXsNalNKnWDM\n4z/kD78EwUh/dYETPyrERiTh60rKSWHFVSsiHjppE9HlnAZaxXNudU8aDNEh\nHadXGx3nQwhZ/PSeHxwOEa8BmnaeOMpOBuKnxjUQjo14wBGocVzNDEuugAt/\nulE7bfpIq5DgP13k/gVPpmcSIOdKPH2XkCycruzon8cALSL5JIyfqK/fVrDR\nS3JGayiThi1128a9+uHKDR6Or87Cni9q6wTU+svhiPyb2v+88T0ZClnpB9Oj\nLeIXs4x20m5jo5RtkJszW9Ar/yXsW0Uj6TEw5nrx/whSKGl4YhYyexz8TlHT\nJcCZwlOSVB3OgpPeRERdKMLQPfgKFixDqpL2oRMml1soQzLlALnIT2fY/n7u\nhYbmd7udVm7dSK4S0jSNct56k/r5/GlwBndHwhFFDdXQzTwUdYvtyhy2JwqR\n/wiN\r\n=PTvS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+APJPxF31BShDoLCdwszdftVc7fEcHY5lpvV7j1QMDAiAaRLhmdQ30q/Wd/FMDMkjCPtZ4acQGwwIcXiNPT/rOGg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.37_1559299846218_0.38900466655955146"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.38":{"name":"@wework/floormap.gl","version":"1.2.1-next.38","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"ae90a17fee353fb21d0e9b7dbf2aacbdc4c7859d","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.38","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-RHvTNr1zhuhk1aTcRZ+1Xy9YPSDc+9q8Em0wIWqicFViKzOtUYhLpqFl+WJDeRjSC5krIn+0EJdXB0wehTfPrg==","shasum":"5fabea67f42e4c91932782940f9bf63e3133e973","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.38.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9kzhCRA9TVsSAnZWagAA3nAP/0LGTF+Xq4fc+7fRb5Q5\ncmLvqE+ede3HkQ1GQ7EC4BaAfcgJ9k/dfJsPZV+xYwAIxsrxwe1TMFFLp2Xm\n+3GPmSnjc97BO29b4CBM/7iLxJigTJL82CyatHz5I9iXapurKofDZTe2ZtqM\ndCTV8PZCRSrC8VC0edJD/IOv+K6pQMQji19cx82hz9VxgegerxcjSw9cphQG\ne+1GsdPKRgu3pMz6E5+Nd7hP6PUYidRmAY2zV0SHRTQDwYuvFR4YYGZPucDv\n06CUPwEYQOHfrVsecvtBaSIy/VkfBj2xff3U3aNrl1PwwXHSbQLwbiXU0qMm\nTndI6NaAlC45G4vZGd0QqHe4G3mP+E1yrbf8FFEXS9ZdLKqZjEXBQVCpZ30v\nHqHHhkcwgYf8ApeLlDHQFJr/XQ3jozcS+AHLGh4zEUGRG3x+nDsPLvld/xzq\nCpyZe4pSuq/L7xrxDG/T6lUN0Ejqr22MCRCpuEYvhr0BzN0rc0G1uoybYOUX\nywZl9XQs87YCP57mkqhPLFRupA6TKjzVzg8d6JjOEK2FQvvFM0pJUwU0iypc\noRkve/w1NBQTEY780EgRRcDTp/6YM0pLI47+2YiKJNpRptqdaakWTSA31wIG\nDLznsD0kUYawLPQgKsXIHlNX0LdtGT1HakbkRf+32m7k5cpbviAJyPuNvCYW\nTgaS\r\n=NHya\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRdtkwvX0nd9GTa6mBu1mGgmfgt78+N62WhlIem9VelQIgQZv53p/ogHwtrZlwuVsiYqUB394wgq5E2/wOhihbcJ0="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.38_1559645409013_0.30412028120068135"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.39":{"name":"@wework/floormap.gl","version":"1.2.1-next.39","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"b64c0d65e1e7b50c3677b2ace76e852c4391007f","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.39","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-yjX6lzcy9uuHcQOhwMLn2KngE31aimok1BCZDdS87f48OMsqy8hcbxCUK5/wesPM9ASnScetfATShBys6xrKow==","shasum":"7df0ab64e41c1068573f650e4a6cbfea3089439d","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.39.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc958gCRA9TVsSAnZWagAAh0sP/jvfV2qUUDdKHWE3iKUq\nRekdt5Is7paApeafR5S1Ap+Ed8ZtbpOj7/Rguvs9O8KvLh8NdL7mC/TCbwsR\nqoH8eKHMsJLQJJWppwDKwzevDPNLXl4zcY8IA7mTgyKS3TBiEfziaS5uz/EC\nDHOS4iJ/M667uqoLQVkl2KwaloYon8pLzszuQsPw+ZIpmU/K+k4+gQDdEiWW\n1rRCfdxO0fPcpFV10PrguKamcR2Jz7Voi89I+5YZDxbX26QY/2ysQJTTg8X6\ncVrX3+iT1brKiIFuH3E62LNn2MNugPvPokRKbxcRFM6l6eLyufn1I5uqK6HW\nxsehmMmGSsndKGdc6tKf/4BFFHDzuaFtF34+lx683E1+DQ8vaQ2OROT12hIS\nvHZ8blYCx7udwUIcZDRi6WOvvAO20mKHygKRA3RgXdN8cm4EyPIQw+be1WwI\n02GsxONQxCw4OagkVAwfDlPgyeqqhCZHBF3Qx5CTgw9Q/XJVxZNz663KOFCJ\n90U4CDA4TCF2iR/hx6kdJzOgGWQeqqUXBiTYUHeRpXwytGGZPtebltxy615X\nVjVba35sQXPq5x6BFReubwOWbWSkqYZ3R3gbaFR0t0MT3a1uc+IBrWbegfGr\nJIuhNVkPjwg8gyaH1RY9IYMIF3OZ85x/1CdFcRafGgrF/w89nHTLHWwosM9L\nztEE\r\n=GWOo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5kWZIcKKapkSdHCHDOWUHvj3aIVvGrczImf4m2cbA9gIgNp/q8rad0ACF4pkx6B0c8YGOhgUPtqoAjJnM1m7xSds="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.39_1559732000189_0.8737417614319876"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.40":{"name":"@wework/floormap.gl","version":"1.2.1-next.40","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"36be7337d179897d31d07c0bb77c329da9e02e85","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.40","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-R6+t2Wu7ejv/ReGrH7aJ7Oe3gVZZWhzQIC+4QCFVgHKMDZPTD7b7YkwghPsPABCaC4Yo6zniJTRhbmSdAovSsQ==","shasum":"0b868b59128930f326cd5f291447ced370deded2","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.40.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/bQgCRA9TVsSAnZWagAAX+cP/iBNiTQNj05A4TrjWHfG\ngsdEdrmnIGC48ho/XOGKS74YZlOeNfgOCQwIl75tVy0iBHb4mcv+a3I8thH7\naF5ReNkilrbiNd02cU1ez2Lr+946xZX9retwAD6GNUmfzRUHTGTjnKL6CAHg\nrQm8mM/M9zHrxi8NmE+TVMecwdZa3r/FEyrddqNbd1sP7EhD/Vu1APVcI5pj\nA7GbrX7FyfmtyQMaujPORkGPT0lImzXOwvHO1TCf0QuRJa54GOQqE7XsWEPQ\nW2dsNMmsW3mIcUEh8zFXNtdfqzHcOql2RFGAMgz0A4m0MV5rbOKf7tUkfpfI\nsfQ6aSW1dHki8f/IABOV78YeqqTlfnBDF4us7kNSXJDFrD8mVTSJrLoIN+b3\nMSwbUazXW9LD7HXXdi9ZKfzpKdk7z6OnhzfokDWWkXVaXsYwGSTTawoa1oA1\nLo1myonRS6c7NHKruMqiz4ZKpn31y55g8HCRqBxFmSX0Z9bWWo8nifqfE1wx\nrLHaBJyNBuI3N/2E3Y7dk+ks6JXrpM741TbjcvV6XX5ldmMJmi724ZTfQAoS\nlbQIKquRxUAQzLjuiRbcD5/2lDfufGM3OQLzz7q0bQTjIA9woyJgC/sx2fe9\nxUN6Lx7wq87hWcVwVUV00nZwrBnHJeW9ip2P7yIfrVn+GtGUN6+Bs8/TzGVT\nDUrr\r\n=CbAJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeXXghh99mjEdahZnbVV3DWkWkzZEN1+S8xmGg4ngbTwIhAI/2cpFTth1n+7c5+/6XDa21VnN1XvByz4NFMZD5UeEC"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.40_1560130591687_0.22308042274752649"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.44":{"name":"@wework/floormap.gl","version":"1.2.1-next.44","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"30ee05684b95eda5142e38789934061ac327e946","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.44","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-dyIRb8jQqRHi8dlOhBNJNK4Xh5+ZEcLoKzjh8fQ3t3frPyxod1gmu+HGtpNq+5bzPIYDi5J/oKVzBG+B2Mz20w==","shasum":"fcd0819e9b8feb6191fe36ee89c01853013e90aa","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.44.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/fPoCRA9TVsSAnZWagAAE18P/33kBgvgxdrXFMR3otkW\n+BpswrBCL0rvIXkk5PE2Px67WxpU3QqR/Pf3dt1lRM/4C6T9K3Y3fSGCfWTJ\nR8orFfn2FzCqi3iqFVL8yzc3khsqmfoviEqZYFlRXXrk8Hy/rInynygrWCj6\nPfRth6NWxfLlhCy7C7M4rpWOCgkB7dz2a/ltUOXsqYQqdpJpZsoyr0Fg3Kjr\ncqhWCEeVFFzPxIsPxIcGzI1FmHHW+fKvEVksPg4M3NeiA8nPOVM5Q4gY1Wtn\na0wNof6iajsRVUWr8+wApcQDqoKpElskKvnZ+GddxSKmdYKDP0pJXxxl8L5X\nteB0rAtE68yoi4sTuafAOxeS8hV5/imoA4BK3i+mdykvdX9+ZFszQL2CNT8I\n556A8cOVYF6NSUJqMmX5x/wowb+dcRUsHOt3IgXAZO3PCpuM9Qw0u4Hu1N6E\nJxuBKC+DbtCM4ZVDwfm3F+lqDXMfcrWA7EfglY9Z7vyei+6Kb6CjqbtJDyHD\nVj5UZ7Vw7AokZU9KLrMAw60aoLoDsVo1otXU4qOFbQp1xK56Tpj9Q2aWLONP\nEXH4lg1+XpJ/H4ogBPg1hE3XaVYozR6/FqGLjgHTWhL/HdqmB8QcWVjwa5vB\nIooVZeHtEXoJ1t9dHG6j+ejZnwoSgdGZyRyE4K0QZuOyvKefcMuPR9nDdGxc\nONsj\r\n=BfID\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWd+mXtsRsNw4G5vtNSThpZnpbpfl5VymMNYaFn2HehAiEA5eGl8GtRb27/n8Gou/vX/9QklMaq4tdqgN00frZRSIE="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.44_1560146919832_0.44359202015118737"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.45":{"name":"@wework/floormap.gl","version":"1.2.1-next.45","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"52edc1b4ff29c2521203f713ae8c006fe8795f1f","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.45","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-76WJeuq+77ePZbIgLpN/i0cZMHi/zxyJY6d1vgtblCyK1U/+WuCWmMOyTs/F1GgSP8PSREU1B+DovT8P+RuqlQ==","shasum":"2b060aa972449950accde93a316e61bf2f135bd1","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.45.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/5FhCRA9TVsSAnZWagAAJ1IQAIv2RaQ7WQBra0LRwsNS\nJ2x9Tqe/MMjRTvSSm6gYzjDRTMcdLGXveAOgLumVwI/2ftqwJDjcos7SFSI0\nh4qigXIVXQn2TtXemeFOljVOJzsLjnGCuC+Ca06H/cJNDGfnCLMLNufq4ZiM\nbCyCx3KAfHL6o9LXjDQ+Z3sCqXVRJ5gkHUoKkA0Bwfn1Tvmj5eOZf+5h2r4K\nZMbwTeAjXeFwtuWVwD/q+rPJa76x9fnWHpzoW2HkVS3hZysHrEX+47s2jGn5\nBlDFO4BFp+Si6QPXkeqIXJqupGbhlJEvWVSCgs2VjRAVKYqN/HKi9ICzp1A/\nw1wdSrT9ghPcvMBWd1lWBObNV5zUKWnbEpLy/zFweIs1HkbkdumQsUan+TSL\nc3A93maGyn27cvWYWEKXJean1vwDlnK2c4qwV69INw46YYdOll+SzBTemMmu\n8YKV9ae+xvCkhC6y8ZFboT6Livt/iCCjcvRy91UC6jgFqZKTG7UmQA+YYIyP\nL3Eokr9OkcDLFI1tDcnfajpD8wO+15ZQdcZEUdHtBkqB7s9RUBxELjVLLftD\nHzLzD6mOQs3aEGEvfplQrb+WdF2eVmgKzlpEmlg7bQPbNJnpRmtg50NdzZ7z\nViOO9CuQyUcuCfoteUzTGoHQ+05HcC12ZtjJrZSxxGFhjr1ToP+oI48Cv6Q2\n+GQY\r\n=+wL+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWv5rlw5//J9AhgJuz1jskysaQ5eLC8imGZUVDHIxZ2AiAhFYQvM9QmxdyoX45mf2wz4eZzy2ZUQ7uxel3NQKvQcg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.45_1560252769148_0.431472632330546"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.46":{"name":"@wework/floormap.gl","version":"1.2.1-next.46","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"904aa1fb91e098ba809a7294a9f1442fc9aa773d","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.46","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-lOHPdJTrAiQ1iOduMC7O2I3ftnnlULwJ3wn2hnyrNxMvAw4l+4J+NxdT6ttvYO9LYTwqfQmBUeU5RAbylq+MsA==","shasum":"f1c5f61fb1c4a139e588083fcf01222249eb2ae3","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.46.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAKWyCRA9TVsSAnZWagAAdzoP/37czEFOxlGP2EnSTDiS\n7EyHZGI0z61IdEZAJgkaQxFKojL6VG0XXNGcrM5tvg546/wGnYW8F5achmfG\nrkyhADpTN5knjlTh5MeYD1QleofWCzFYOXb/Ti2o7HxV6eakBDNLMf8Psv4m\npU7LEx6rHmatgWPBIvkE7NGfHHAgxMD4NjCPiwYtMnGK7370bQIOHWryRbAw\nKDZ02RXWVlzW6l+JIcMKywnf7HjKo3qVQphY7p2rUEXypX+RTedqO26WJ2rx\nKVjNxUc4jtWsnFWaDDpgHc8HNH/qgP9OzDnOLEM0IwxJgeRF/z+tgofgKABD\nKSnTgvsDSGi7I9fqoWHt7QDe105bO5PReetyj2oyvVOBzed6ERCf6H84U3KN\nmVQ1FBbEZOC2P2v/BY/RGrc3PYzPO5POhvLRYUALiigvD4F5+spcuwYK/wfV\nGz1WfTfW/TrTVp9D/vwekS5b1G8ZwHZeaM7diPiWaujRaTZNYeCb6O/Uu+VV\neb40nUra8eRleAQVhqQlngddA/asusLHJqzl+0klfNcEEKm75/0UddDubDKd\no4uuhdqFZ2LfdpgDF4hBe6aSOq3HiE8+dJSwHc9OsanJP4TQXsXEMa9qCeew\nQaHWQZwO4Me3F02XsYWFMimnjXwhbDyhyJw938iW3qkPjV3STRGzkVTvrOxu\novHF\r\n=K547\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChmhXdJjqToXp8JeLsEDtSX7QzFzm8DVQnmncqbSJjSgIgWKWz8a9sJR3ILH7GQhd8ELTkPBRF5nEDwp1RyB3e9DQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.46_1560323506043_0.24456448143434018"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.47":{"name":"@wework/floormap.gl","version":"1.2.1-next.47","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"73c5cd5595ab6b18358e9f01f0e1a3f516d784a2","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.47","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-EDQyXDcK+7HGj/4lPx+XKcYf9cLfbufP+guQbuvbWcQjhq6iPTmqBsuIAh40qnEn4sdVDL+yli/JYx1So6wYHQ==","shasum":"f9bac3753579d17808b836a058914343e4c868ac","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.47.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAy9pCRA9TVsSAnZWagAA1JEP/0B0D7n2ddCYxbKc7zg2\n6JbI2eaHqghDBwcjcVE8djlUp3FBP0xdWZVMbYy0X4oK1FvuYY1PzcNHBEv7\n87NKI+1EyzuJVSbxEf5bZvCc+RLtRU7fWHx+M1bEUOYhBdVWsmHmg/JkRTlZ\nCwt4d0gLntsVIOkGrH+6zz+iUxCm1bfmizA1bdk2cUnPiPzpSved+jaQm67u\nreMjRQ62/T+EzZhtzz3y9mkIZwFmAqVtyLCYacyhrAFT3XwZ3eU135ahMEe4\n0gwnk/99cJ+d7HiuMqenMMQIkAzN99yQ+VoAqu2DLwcQuifinj2XjsOP55Z4\nbpB2ygJEFxFLADfeAZ1e5psSuOCJ+beYQp9Y7yXxSFJmRIh5Q1hSZKCNmPJ/\nZb0s/D4tTCn0eFyMiAHSu7MLNj9Alx5WZs7ucMojV4txsFGsoy5Urt0JIkdJ\nNiHigxAjGA+jyG8rGst372oeUg9DXibZ1i+LRoSOBlb1d2JvxuCL1KnkEzjT\nI09X4S5YWQGxK5kX38Qa6OM7DcQtR4jjffZtVhnN0BChDig1apby+mOInar+\nbbT0OWukThhNvmNd0yD9t5pWFmEH5biyVvswhdTI2/fkL8keCKrCSAMj/Etz\n/kG1lS0d/qadnqF7tK0R4UblKkzpDR82ZHwB30Z9mqQQXzUAGsQ6wETe16bC\nOLsN\r\n=fG9c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBY36a0H1QJJIsXJOVtDDJUXz+7YMG219vVcOqJMLGukAiAEHx/MGT40gpibKLRTE9lh3qzprurE5H6vqYOD7Epmyw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.47_1560489832600_0.9442103340965669"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1-next.48":{"name":"@wework/floormap.gl","version":"1.2.1-next.48","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"d5f7f00cb8f60f1f99171299d419a910cbfc57e2","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1-next.48","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-pxdDG9gSeN9FiiOYEqKPbdtORi0E2yXpIlK0UDqQMI+llA8szjjhWOxYaL6CjiLlF37aypt6eepbwhNjwQb4Ww==","shasum":"0b2c1f6812faf3b3e603139e1cdae9908bd662d0","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1-next.48.tgz","fileCount":8,"unpackedSize":4000476,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAzthCRA9TVsSAnZWagAAzcsP/i0nZvIPaUJvwrwOvrqJ\nzb8P8RSa4irmKfXsAqYLIX7mX99TVKlx5vc7/4oY0zen3K33P9QBNglD8FxZ\n04JNKfL1DQ9y825SVV7p08eTOrPMiU6x9QTGwZD+Cs7Cl3L6KYYjfuWMmwkc\n66T6Ks1kEi8igMR+L8pAPz/CD2/mcVTPqSs3wnHG5w1T38/8xHsUy7jQVmqh\nhxtml6/W3hrtqmP5CxlU0Uw8yzUVUiMwFAf6FNssnS5sUvTQRKRSzdhG/lzO\noXgrz36MrmaoOUU8ilqTVwFcPneQIwVQh0rDKcuit63pszsH43ArDcyBgUh7\ns2RmJQunjZoYg7hwppw5DO/wbii0HRlvsfYmxmTKOac62ajPO5QIIwnAQaY/\n0cJmHW8bttF4TwtHT4OxHrcU0BbDu7Uq5MjRa1bH+G/AtqxwSIjViPrYPsVG\nfxJ9R1YbVni4v7OIlVEIneKeWQh1jPkiLpuJ8DfZIh906Vu1IKz2QO7rvnq5\nnnJOhywZ8jkvzFheLV5yvJlmoOXRqFT3wrTqV94uksOhV/O5MdZx05s+GkXa\nNIvXpcZy0MBBdbd90XARjIWPQM98+6e6Zs4ng8M4LEdPTfwvY7E6UKvg+OLR\nFv/w49lbZ+cG+ba/N773xLLowD676eM7kw2NavXUNzfbc9euzj/2VrFtNYFg\nir3f\r\n=ZZak\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCH0VmOhO2FwcUp9J8rkuFwza+FN/JAmRm6ZGmVYtmT/QIgaZZUWzTHGUR64DQphLidRV91TfLh1nAilHB1mnMJ9ew="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1-next.48_1560492896579_0.7162625305560844"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.1":{"name":"@wework/floormap.gl","version":"1.2.1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"c0870c600bfec3a6b4a2b5c6bd6c1d0bd7d2a1a4","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-8l71a5nyr4/TIsKfBPNzLWMqDhN7XJlkAlzayIDzkwiNFe7Js+COuPerZTN7QB8zGbmXQk7265iNeLVhjw6zXg==","shasum":"6707655e9fb4190694fec7198cabd0d3417b49c6","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.1.tgz","fileCount":9,"unpackedSize":4001284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA0CjCRA9TVsSAnZWagAATaUP/ib8BqVwpRwbpvNWFjwX\nQawmMKcB1VDOnTRIenlwDu+eX1553NaFIFcYJh4Xh6N/PmKMIpR/c4yHLUfn\nAKZLSHk3Sg0kidB2MjLxN2hF8Hkl6953N8R5np268Q0QeiH22bQJ+VDjh6cC\nejA9bVB2W3PJ0Johahw/DnAWr2DQWRRMTdbMk0e0WX2YnEFVXMbZi5tVBYZG\n9nkj8cNGojxeZUCuOuNppWiGeRSkQYkFBQo2A7eUTb018egA8W9By1pQGXXU\nnJMYozcnTdwIPxn45t98RSRUDxafBl4cZMHXjyTTd3FtbTBE5kJgaW5L18sC\nro+xZSfToIDtU2Uw4tc8IipSXzf4sxbPMDmy+EJ+mxPLXT5OBg+9CR6wT7rD\nDsMxWejsNOB5IP16FV71bdqUNRiwZy4ny+pLJwaMLnKZhxfhHuY0A0yoyvpS\nq69nD3caXXqwHnsp72hK3O8cMEYgkgAhr4ur4gQn34STI9SnT5MtT9nKfrdT\nvivR5Q+zNIb9Oewqfe3qaoWCbOqP6RBMA1Qr6Rxfr4WskF8IBvSg35xF59SL\nc0qbjHEkWLthZvqWrZojZnL1wObUzLJ7HKee9BJusouldCxmdVEr7KaHg/Mo\nBCXkoEtw10f68g/CUg+ZlRy/29IKPo2OylhL8ccdZtsJc9REJh867tPHaPst\nMNPT\r\n=dhQo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgKYzjp77amfRL9TDbHQrYofpn6L8vaNP9TwjXn1wj4wIgf2ZFjeym59KZ8AJago4eIr4b9aAi4zvYwPOXZbXhO9Q="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.1_1560494242885_0.4461093116556163"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.2":{"name":"@wework/floormap.gl","version":"1.2.2","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"272a81bd024d25a2835e9d92ff3415c129bd7232","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-P6y0EhrXMqAUHepF2hEeD5BbNp68baFb06WKwyM+4qJnueDkYCEf6n2TToEOQn6knr10gj5Y3+dBRF28dgNAFg==","shasum":"f7374ed971f92d8a2ee9aacaa0c89d9e1ea27e85","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.2.tgz","fileCount":9,"unpackedSize":4001357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA0cgCRA9TVsSAnZWagAA4FcP/0VMTrEtm/RkCGw0yrD9\nLNd77dXXFL4UZIscptgiEdF6KmIrqVvd1jTPmbyEnLBX+BsQivbU/Kdj2lK9\n7UKKQqM6Bw2YZQzBp84DYJjyZOih2gzo25Xxn/Z2vYFMKK731V4p1R1J66wg\nifCeQmS8T7MC1+hQYFvvE2aVyRt6euSXpM5nDHvDwGY+CdP3L4xYF3R2w3wi\nTTriC3m4HEYMaZubbGPqU0EbwYA5gbFo5ECnRycSEhR6SZf+K7FUTw53mCvr\nc0UoHYH5xY+hhtfJx8xhYKSxEkI5/vLmOfHsGaRCwKgx3NgL4tc4z73GGJBv\neVwGOOwwvK9in9HZO25F8zXAkyUOVi714cQvGpRbVNQT53Ndg/K8f19wfT5G\n3weJhLhwJvH/FC5QpB0BYUbBg2oVaHvCGPfnkFQ/ZvY/nawI7zfutN5J1TRM\nfIrH2WBci+OXNlhxVRr6cCkgcPrgjOpqA/ce6kyZC4uYggCpsTJnAphO50M9\ndycQmt8jjVcnnENZNpQhu2z9XOM0nyfQ0D4jLCOor51UGgSzundbWNfSWjNV\nMW9U8vmySB5B7KflvOTmp32di0W537ecqOJ6SdXWz91cm+jPB52aitdB/D0g\ncnhVM2h5nMS1sh75JPEoQWVy6jPbxSCuxpIIy2QXA7mbkjyKoFSviGhxrQXV\nluUa\r\n=wK6z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtgaG8M+5ZiOzF7keHp0zLSz8dbMT4I0cmjrkuAJFDsAiEArw1bFfSjiedrt+XuBP3QFSuE5KbaEpbN35cgG3zhydw="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.2_1560495903488_0.43573131954723743"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-next.0":{"name":"@wework/floormap.gl","version":"1.2.3-next.0","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"ecbfe612fb94783c936c3917bd0379d3b3e63a34","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3-next.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-q7U/NQxJQw4ejf8Pqhb7fUuySY7OZZ3CodXoQipA4EJHJpJ29Afr7SQWMMaaZmlzDlg0jaxlNu6Jl61f8cDWIA==","shasum":"bee02d4073b556dc6a2a2381f16ab7b22f86737a","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3-next.0.tgz","fileCount":9,"unpackedSize":4001372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdBzqPCRA9TVsSAnZWagAA6AAP/isNJLR9Py0EEBeHIuEF\nr11ram4goH2TL1dSdrcu4MJ3mNZNmH/2ExQq/E3KhpPrsRscstIpfSTyDxJi\nTxPV2QZmmNFdFW5a4Ei2sckU4Vi5m84RdzM5+MNxeVZp4NwM86pl2FdPawOS\nPXmVgyPJBemjRCTFgv5DdGj4Fm9itBzTazzljh+D1Ckkw22GndCL0Ah2nOCx\nYV2s84SDWHAUK1IYKEDlzppO3Qe0lLol49JViD6dh9UgsHrIU+Qozw5V51Eu\n4WjHWclgUPy3iZaupJNggrsp5xoziS5aVVYEINsYWXQlkHijR53ExfHFYGMo\ncCKIpJn9/y0A7sxYT5j6qKL06BvJkd3O5uHZuEW4JtRGw+4ZNSgkR1EkpnND\nd6/LnwDMTmqHHw+CvCD9i5zYDUGCnJLroRm+Ep6oHJKuV38UUCSecT1JMH1M\nNBvcyszd3p+Gv/onbCWAPQF6US+7sFJAoxdSNzACjDwb/kuvcgj20FLeQ7Cs\nsCwRBLUod3qoeVVBPr5xZRFt83KrfxJoCPtF/LiYkBD8NYP0qMjWEzZt1d/w\ngBn0MwfDsYiMlJN36J+eWwVMFNEyjNR3Ikmwi/qxqKyiUk8nPxDJnZYka8bn\nTQWa9Wn+FAoYVYZWr1e5B+e8JOJclLwNP5IbCNnjX/gSK2I038fuLcvhIsnn\nbASs\r\n=/Mth\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE9dCpBACXTjviRCDOUEpzJPDxhxhbVKLIeCIw0Pq3u/AiAgZrVYACPdEYxCCiAL6CiV1f7uj0tkY7JWTJ8K+mHaww=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3-next.0_1560754830112_0.21324600122694903"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-next.1":{"name":"@wework/floormap.gl","version":"1.2.3-next.1","module":"dist/index.es.js","main":"dist/index.js","license":"MIT","scripts":{"dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c -w","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build":"yarn prebuild && NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"b077b5f46b71b096b4ebc78c6b4455033827a52a","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3-next.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-y5kvM9TBYeKHgnFLn7saC74d2SqjSkfd3oCwpm/x7VDEzM8FTNDqzMTP+vE+jFkqWgHUgnSnWBmOMz0FJJClpQ==","shasum":"3f4a72a8b14babc3a37667e022ddb15c934d071c","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3-next.1.tgz","fileCount":9,"unpackedSize":4001372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCFdPCRA9TVsSAnZWagAAA68QAIWDgX9rgJ9eTWIVVxAT\nnMMPIha7zaGlwOxwFdj/9z91dhDlPfN52ZS6yqpMA75WDPhiezd1riIt6xTg\npo42E85LuqeREDmOwx8tid6CrnAZMIY6tvTm8DP/40saVOW+RgJ58KdQQvRv\nP0iy9U+BxMm+5QKz2pNFmO3xlb+gcgqoXlxr4mT1ugubro/L0i9OXdMcXFe5\n4x/mPoo8h9cmSIBnIgg/qEON08f61Y03qXlUAYL423IFyC55wJbLn7FBiCQ6\nt0btlQhZo6Ijx4wzk7LolLCNklPdR5veHwfP8X3kSP7S36VyLT55F6DN0UsP\n2o6uZBV5Sd7DQR8juQUBZUxivS1+l5xO1zmBaSZiVvaOIoLGje21rSSFshI/\n+PmSzoYipAlmsyr6EBE0GBFtMJYYak+K+D+gZMagm6pvwLZRHWW+Nx2lPw+a\nP1SDPikT/nnBOi+2ybCOBwhhNF7smNmsY3GKblMKLyBJ4QdIq/XBFOEcdjf3\nQoA7RVerrF28rEBbyK1SQQ8vHdWra7GqatlHS3tJO0iIPAIrq2ha5oIhQzKt\nzaFwKi8bI4h3VTDyFQfcq8C9SnFj2b/l2s5d6gu9JuxfKotgY3vQds5aNN8s\nP/+yqgF2DGDC5Ik7hYIP7jxL5dzzL/kjz6mVV95Msaw+XNUkVwf/sUGVXTFY\nYrVS\r\n=baXB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKb/aZ2Kl14sDgrIaKOOW2CDYMqqLoib8wCs/r2CLUvAiEAoEk81JZpLpClSqkiAvIHwvg82ChHOtX67UAKPZk5UlM="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3-next.1_1560827726541_0.6882541936283524"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-ss.2":{"name":"@wework/floormap.gl","version":"1.2.3-ss.2","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && NODE_ENV=development MINjs=0 rollup -c","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"d2f17f9bfea6afd213c386862330c0310659d8fa","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3-ss.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-u/bfrgCh/w2thXj8QaDPGDfTNrhRis2jzrUUaisyWAr+jKv8Q+tWh2ZA3VV+8toNKhjAc0s7FquW69MHQIIuFA==","shasum":"d1954558df95705349a48d8646b9619a5ed2beb6","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3-ss.2.tgz","fileCount":91,"unpackedSize":4832337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCaocCRA9TVsSAnZWagAAr9AP/iZz8NPm0Z487uQU2zUj\nct3Eu4xdmU8ipyrquPnXTlailEeHdCME7ykCsB5EDNoWldrVdHGeHgbOngJf\nVeLp4wJg7/yZTYLdlvUWAS8QnLGkLQBwVQxLNskvmaZYQ3IjiRYGkNW6AZMO\nng7NystYxZhgs8ey+Wu8nMEVISR5h+3vMjmvHd9/ybd+Lc71KMp9IB2A8JUS\nzsg/fBibZRuo7hrazcM0bt4DHEU4uUpTX7uX85X/6qm5iDJleilbtDdJbdY9\nPDxz5MpNsK2j0uQw68u23TXpllf+P1hKeEqwa06bqdhS3u5RlVoWZzv9Qlg7\nItm4D6vIoRX9eV1E5UzOJKfBW7YA3U66rFrh17Neps9kUHjm1A+FH2M1n1BV\nl8adRb7kaNEQtkC21s6bk/dtDiLm6f8uqirO9tiTHa6V0Uslm7yUlZt/hiVK\nRbRVPBof7s2AYz2cy7hL4PKIMogXbQ59aytdCMOmnwZg+El0CcQIc+ABflzI\ncoP0prblThTAyVNBrqd9oGjHoi0oj3kS0EXvd2qeQpDF6p5te/hdLIiktqv3\niBFIaMv/mYBwhPMOSKeEQfgcRCc6idV62Jgt3fvOcDSkiUPZoglXYPg66jcf\nsO8e8N/lH/Kv7AqBpSgJTnRYJCHbqBzJhbg8/K8Sp6dEFGgFX5p/PwCRPBBr\n0VtF\r\n=o5Rv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8i0P1Wnon9z5ZUxGtwO+hdAAc9xBNMQaGNMPiWdEg7wIhAIyZF/ZwwJslwmfo5TKzuXY85yB1kal+QZVWiyRgBJgi"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3-ss.2_1560914459680_0.067230031209772"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-ss.5":{"name":"@wework/floormap.gl","version":"1.2.3-ss.5","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"7775e4cd55b18f68dc787ee1d840ee96f8ab3b11","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3-ss.5","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-cSxJ0IwZvt2Nbrj6qzu+ID+NUISkSmHol5RfYP0uuyF6XukSir5O2qDvtYXTI3Xf0gdeXbLE99fmfJntBN3W/g==","shasum":"4f569b9f391a8ad4840891824ece9bc848984918","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3-ss.5.tgz","fileCount":89,"unpackedSize":4831939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCbZACRA9TVsSAnZWagAANq8P/0j6XFizQOc8bD5RRRdH\nc5fstee2wFzHlG37CdVZoss1khLJdEb/mzZoQgopdKvglB1DRqGGaZcWxIFM\nkHO8VejDmg5dMnqXRE3JO3CGKCDSlzDY/mXbgs5/XxMh99dWzN7HFNRFN8ow\nxD6AsoCUkw7lZTygxJkXcqr7dR3608fMOp42NmsrqpLPmJk1k3yZWAe2yQ3y\nvmZImvUIPLSFVEk2RYYVTT5poKTSUCYZpYoDMjTsS3BBaLX7lNWp5k5KXZ8j\noQlFdQHTEY1JCukJswpSMXBzmS44beSeOECSIvxZhu0FVFvN/DlZjOAQwftQ\nP0RdgDHX7Xcy+OIbD4aGzugrhdSND+GX/Xb2/U9fMMvDQd8dJ4hHEyi79gnX\nPwNxXG+qapw5ku+c0bduhGZ1oNrj2Ep0sQD4FWpCdQ+qJyqEh4/lTzZiKSU3\nftHPfwJY/7yp1tEcD2s3CA+dnbKuGtX6sVHPiS5sxV8e096AJ8JW2D2N/GV7\nnXLBXe9dG61C5QZYR2HlIsw9iyOxeIXKju2MiP31/fpxPQn4nJn+Mw+GVilg\nPyB6bdKLmFZvahtxqTJWTRiW7i44yNrvKqbMEy8vMHKuh8Hy5Vq4rrhr+Pn7\nhBbgBs7b0mkTTpO7P+1R/DqbT3QNaG7s0/KujWYQSFdasDOMevr++GTbKdNb\nj/bD\r\n=pyg/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFb5IHD2JL4HOX089WPUpawbxPRNBqI689nFhBLHMsVZAiBWKqdIKg9smyhAnqYa5N3TyHlV3RApzWDyl/YAq+I/EQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3-ss.5_1560917567796_0.380831980309553"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-ss.6":{"name":"@wework/floormap.gl","version":"1.2.3-ss.6","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"82c004b15aa5bccb9cd2feccd095b5a7d4433521","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3-ss.6","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.13.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-v4HtJf3Hcfg5qvvSAnMCYH1MX1Fb442fx07fVmf7QYd8Ze4cGq5baQR3TkkVmce/Q+QA+3d6OOxse2uz9BJIig==","shasum":"52c2f61d6fa3028cc8a7d62dd981edd569ddc01f","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3-ss.6.tgz","fileCount":87,"unpackedSize":4066146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCbwvCRA9TVsSAnZWagAAtPwQAIt2wAJARRAUN3Vgoeve\n50Hy+Rt5Io3hKFtMuwK2ldn0SS516feNmrsWXCecKFb8nG728UhZEM75THE0\naT3zSGBmhuc8deKMfkzGxDfpnYf8DfOtaTeL0sWQ3te4zrFocEX9EysPgM62\nerKi+TyltyNz2HTfCsbgN314kFe6whw4jvAzyOvX/Sv4cHYV8JEwVIg8BWPc\n+lnaDwoe99vkUbp6u0d4y5LoTa0bXRehZ1UBSz8wCuAvHGB/Nzt3dOSJI1Dw\nLvynJ1lGtgT2XdCApPbceitPbEknVqIjt3LbYWmOj7os1NvtJdNgffF5JN6i\nngAU6oaCowJxbg2X8ztZLyvFmmtY5McFVtwPExwaUHN9nCyvWez80eaQDfJx\nc71vA+f7MJRKk2Rx77tcWJC+WK2HYyoQmADiAUTXEQvqR7XB9414sQLnEqWJ\nsb1Nxy4OC3llFulCA1G3NyFkv3v6BuWFvwEDsfoRq+wnPMBkCPv9GocTZ2bC\n1qpBbwPz3DBMGEPNGEI6IH9ZIEtWk7lgIuBER9WvPtd7OCPNY82lkXTgzaFY\n+3nIhUado7iizKwlqtRG0X/REDjqIwwmM5U0ewFmr+pHd9q45NkbcRyJ59hZ\n0TFJTZvWcgbaiL9br8KUxg72xiNaIrwXEq8HDglUfIWutuR+M7WWi6F0F0nE\nmXDp\r\n=jTkI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbml8R679oOE5yKwhhuL4hM1CATfP6ez4318AQc8x2eAiEAo2x6nxuCETQJCssnNGeYwRQC6yYd5HPUMvTI523K+tQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3-ss.6_1560919086838_0.9761788856885649"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-next.2":{"name":"@wework/floormap.gl","version":"1.2.3-next.2","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/core":"^7.2.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"2a89c0da9651e623187a62b872cd9d58c110df2b","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3-next.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-G4OoEtCMxDea1smEkuM0uyhhEhHA82cy9aNmIXFBBrfcK6ZH8B/VyyJqah6R/u3AvN9rxc3zIot4g711Oj39BQ==","shasum":"f049e3f45e534bc2a0c0ef48b8a0291a93e0e770","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3-next.2.tgz","fileCount":87,"unpackedSize":4066148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCcHnCRA9TVsSAnZWagAA3TUP/ikXYeiVnp2oNOtHtwHW\nmmC8fRInaSHhl1poW/OVY7UtV6MtdRorkzIfXKhTNrWi3jLipjFQ+JZkYSHo\nejCYHx+GPBHd9enaUd++/PUlHZ8HxYhPewchntMrBUBTA8mTAkWnVqul3H1d\njg7o9deqN2wHwkbUGNUHJtPkEkelTefLH39leUW5KUc6noPhj0Armk1q7DKn\nRXm3YJfMQlAHAR1MmTVeQd7XlU84/bQJjPVgAi07pUhpxWLEsyxQXbx4Zn3C\nA7W6JfboZPfrO1x2BlM9z+erCylSlzG8suJ91OHY3SKM7ZrKwur8YATJD34w\nZl0l/ArSppG8pzvLCCLhBMsrDTCNRSRXABpcNre+apY+cy4lbnc6+/EFk4a+\ngk1PCXtWlbQ8d//V4E1/q9YCV/1eePrmPnVv5E8fQgLdAYhQWjDDjnJYJ+5F\n9Y2HY+OB37h/6r/gBktPWzuNTHvDSbxYg4iOEZpFdlXNreD3aM5AkU/Mfyxt\nt3WUp2pj3HxfoCoZrgizlJiIqFcefrtjfLl0RpapvsnKXYYilDoe3XpSIlpZ\nnbISznSI9BcuMtg2V26eEn6XdcYiaDWRIsm7jC4gpZ7jeXkBTGcmNaSC0t3q\n012amhHsQL73NWxob0sEf4x9WMY/kTZa7lxp8U5KC+OI9sXRxCzlI+y+15d2\nuJp/\r\n=n5+C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH69xuGLO38ene6kWC8YJhyIVdqYuLDPhWfOZ9DBwvWxAiAxyrpZKLRkWTFyffLiURJtAq+5Kos3WypoIHbTK0pHaw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3-next.2_1560920550629_0.4985636309813446"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-next.3":{"name":"@wework/floormap.gl","version":"1.2.3-next.3","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"1eff8be63d7fbdeaf524aeaa5205b833526d5c32","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3-next.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-9AZgk3gi+dgIFtgcyDA5kjYxtFfOrX8VjTkfxYdJ6aNjdasm9W7kRX1jKpb3UFl7HNOtgiWTymZ9jpaSG8swwA==","shasum":"558c1bad1679b05ef1c6744077681f06319aa539","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3-next.3.tgz","fileCount":87,"unpackedSize":4066119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCcbVCRA9TVsSAnZWagAACBYQAI/c2+UvN2l9B5J3Zbos\nlszXjei6C8u1ox6aqQDcm0Wcw4cSEedyuHjcoe38UiZeG0LnXCTQFlo8D37w\nTnNHwCoMLe9yU781ivmuGQoRU9dUeNEY80Gb0acVteT+Y+9sI43njCl3qIWh\nRxN/80X1EWttJaK5p9HarFqQbfJtNSBdcvcO+VH58q7/zNL13ADukkZf2R7R\ntT63hOS4B0C0pUUhMirprr6hAO8Ry75EdiEhf0jR6xBIA0Y6F8e09WbQ9uX7\nLTAPkUovVH/AX/PARSNUMVbNmPUs2irrMpT4fV9Vwcav4FBxN0kjE674KYvB\nPbFRNc3uPwnO6HFHNRRCLi/qscEwyeFj+9zwBBLpqjCPPaILjX4NIIxPbfCH\nbMW9c35dWs6nGsqqnDyQX5c0XAM/Y37arRha75kAIaSEwZZKmCw5+lCF7oVM\nBsuZ4hNA0zDgcfxeMzTqPVzVLf/Sodcsl996HcyQyBrR2t+xOhepMM/c/0In\nLe9NV4DD4f/wvx5OmtwGa9M2R3R/Ywkikfd7cqenqzcP9/9Xd4ZziBnBjI4p\nBz0Zy8jnbXqBSNO5MqwCA1ZYFOZ3NLIpT0acy9/6dr5HqpBXyoJfqV17EJnA\n2XpIEjKJHYo4gQCVMbi65euuOVO8OVJq4owge/gwj2VUbxzu1m5h6OksUZbI\nezSz\r\n=PAF8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfIC/Mu4reYuc6o/Wu19O3WGbkZ9l06XH9u9GBt1gWywIhAKbTpDVTOFLl7t7gre5ANXNQf5sMP9ZSVUqZrevXwEYP"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3-next.3_1560921812923_0.767012449177005"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3":{"name":"@wework/floormap.gl","version":"1.2.3","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"9946a5e1b45480a90ccab0c974d8de09c9a44669","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-9/jxMth0YLuH5/Hjx/+UMtD15jYJLQaJUWRovtm7pD6sXJQBUa/xFhD1KPQyDZDtAiGiHJ3iTBIjYDTh+wiDKQ==","shasum":"30d99b7edcd73979386c9db9159455e6bdf003cf","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3.tgz","fileCount":87,"unpackedSize":4066423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCdtHCRA9TVsSAnZWagAAdQIQAIVv+yxg3AQYsA1AknB0\nEQzJKnEEHsdNlKiyCurH1h4P7zVSTwth0ByMDRwHLzIP7Y7atcwGHSu1iTQH\nKREIH/kikaHjHHVgWfRXbz6RgTGn6nUVv/NxaO8VEnvt/kZ6231bEzQOcKFq\nAQu8Rmtz05SK3jNjq8S4mE9ek1Ddn8ES7/9V7eAgobL19iRl0GGfyB+cw08F\nVwosIM9YIvnbscFmrO7uUL72Wnt5mtK8fFDLvM4o+BEYTVLr40U5PzIoqs/D\nd/o9wlpNXcNkOgp9mXfXyXmDPe5W+vYzuJ0X0odBySk0K6JtsNAOMlqjNGWu\nUi5g4fS+FDLwJCwjca1VPXAFEE10qibcuWTpuXt+IttLOPx1is4uUEQ9W73Q\n4BSfN1JgtSof20uR/brca5I3y37ay7sz28SP59645OeoO3vS/qSceLonzkcZ\n6vv99Ri/6TZAsI2sQNC0UR7WCtf4wFM+X0sN7pX1nLmAjDDmKhnO7EAa+BGy\nGdImSI4kN6boLflZj+xR1SVtM4LDF2+0FfqsyYZPtKPkE4GDesBViZOZAxVl\n9uYQYpkoi9yqrdGLUPspa4YtJXicCQkVNpGA4VzJvaKVHW+/APlK5fDoy1uR\nPDBSVXk5pR5yOJGUHk1zP/6B4Q7ofqhKWwBauvzSf3M41u/n2fczmH4ncEBX\nkxLL\r\n=j6NB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHN/G1NhdmzAx9MwhRxNlzdNmgsu7vUEASZCCJ7g/nByAiBVV89UCcNM+mdbnFk4WB/bIMEJNHdWMB6pbG1bvGtDhQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3_1560927046518_0.3759396164743447"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.3-rc.6":{"name":"@wework/floormap.gl","version":"1.2.3-rc.6","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"92fd01d261438ac9b154b901ea9f862f52f54a15","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.3-rc.6","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.13.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-EvMQNLzPHUrqrkGRFl9NH3Gxfo/wOTVrV0YqFNUcUSwzKH/lqG6nSp5g9oRcGMkuLkEv8L+JLNsg3slcZ1Qc6w==","shasum":"721ad15dab00e97dcbed9ee934e830a29cc296dc","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.3-rc.6.tgz","fileCount":87,"unpackedSize":4066436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCgHQCRA9TVsSAnZWagAAGPAQAICtaieIvham0uI1sVS/\ndK41orj+fWbKb9gMq5UT6Z771ERASasuOBacM5bFwOKuaXmQNfKxwFajh5UI\nE8OC3p5He42Wod0HKNwwGzgyCVpixST+NgTPyPhBnocEj3zZ84P33D+eu0hI\nlLbwaRMn7XVZpI3HIBhyQYzYb4cBCCrWhWDZ2CPazzSixkjAy4n/1wFAPzNU\nSbaCZscnb3gEU8JCqUrRwD8e+AxmboAKL+XjVswbDV5hVcRF1BZgvfIXEiiZ\neH4kY+nX//h2f6jpbpYZgXqp7cOk+BjCnY9/7tcC39xvdX/xIcxLbvBbbCIa\n5nEa5kUR/RUbJF7iB2nbKvuijTOfN/L7WRIevpaU+gYdcNS2mvEIfzqSD7MP\ngZjjTTW1f+KOAFyFgKGrwRPdx3szRfbHMFCa3QOfjQ+f0ctJ52+aweKbVlk9\nYrFI3a1h7zTtZk2hdPrceTL5R72Gp0RfRq2u9V0SdJgRD2yHHClXEDMOSS39\nOU4/KiUij0SlOIYsVGe2NOAeyETZXB/2aSR2rojliy2099eax9SRWPYvRMfD\nbJpaWyvx6daAouIqwMdA9zXHMVSALQ5Piy8C8nSBGlEzfXf73n+z6Lscg7WW\nueijJiRZH1dj96DHV9VoWNdVVoAJB5JV3j01CqHj273MJtJMTrjBQbo5l075\nOitl\r\n=q16N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUZg6GIX/ecxkxrzMhwndyUQIdHJ4L1caxjrbvwqb0CQIgDHhuDxyboXQK9e1uNZg/zn1deLivHNt0d38PGtbfyW4="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.3-rc.6_1560936911475_0.2624094167674791"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4-rc.11":{"name":"@wework/floormap.gl","version":"1.2.4-rc.11","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-proposal-optional-chaining":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"8b203f47420f6093661fd2e5b33db93a4e799250","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.4-rc.11","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-LbtDti9ljtxayRlOLsDawwhytAu3V4Ev+XBc14+Sf+oKEZrRfnYNvLL7nzEd/Kra+rFR98GDQlStUAk6mwWIyQ==","shasum":"3c94f18d80faeeee2f772e212ee0c9b7b103902b","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.4-rc.11.tgz","fileCount":87,"unpackedSize":4067796,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJrXUCRA9TVsSAnZWagAA6QUP/2xoFd72Vc+ECMJjMgDZ\n/aJ70CzHJGEU8C4yBdx/hFHK9Rzf80eoxnTCcpwx+X0K6Jj7FWEOhJMGtmGN\nmJEMP9M6lEUYHIZqR3ZEWu6hFLV4+pYd4UlRhR88ybwA4bwgWj3k4jh0a3OI\nJWXzzU6nAySftysq0N/SJZKofLGNpfySD3/yuKejzACTfVag6qoRp0ZTM08t\nzzTy2GdllfiL8asfcSwLb72hBgirYhMZnIgCxicluEdcto3JU+QOImTMVQT2\nVS3BzjDIBfFHp1aoO6yWd8qU8S5/oMWmsD6FsWOULVLSg2N5FMLLTrYPrqCa\nc52H6mmwSM/Cu9j+aXq4lF8jTcP1kP84pfHGyK0p4AdpeTSRDSve5/+OqI5q\njSa1kH5KaxrRGtidZgt77+PZj4iMy1/ctmIYCZr9UnhR636iZOIpfklNrg8a\nhbzz2E7Rf613cgTOt7jnglOysXaCtNwfPUIiYQw6Wmg9S4rn/F939R6sIuhJ\nLB7h3xTluWfwasWbPQNGmbGAsoN058K/Oik63dS4It8mAjogRbdOq76OL+F4\nemtSCet1XBShtdyCsjfd6z44pUzumoD1tMSa0poHntAKYLA9ObcWc3wvlxhu\nSB4cw6D5aQUAY0G/zdyxoA8WGqjY1o/N3XFGuI+TTS5gNIeUxdQDfXihAAI9\nbuhu\r\n=FRRV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlQu6JNIUqzXLkBfYu5vJBZxYuQZtaIoAyM2/3gJmQTAiA6RfGxIHRGp9UT9vANqlAJEkY9wvIKK9DmjFbz6HI6Ww=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.4-rc.11_1562818003569_0.4636169695808219"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4-rc.12":{"name":"@wework/floormap.gl","version":"1.2.4-rc.12","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-proposal-optional-chaining":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"96a390b90e88a014dfbea1871ef9ec4c5d05dede","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.4-rc.12","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-HTEQ8SeHjPZVvl5hAZ1x8J96lhC7ulDDwtjaxNVqSWOY0ZuFCUv7R8VnLMLlt5LV1SD8FdK1wbEq3HnB0gcrVQ==","shasum":"bd862f16bcf16ac4a2c63f52533ca7d14cdb3995","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.4-rc.12.tgz","fileCount":87,"unpackedSize":4057284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJsRlCRA9TVsSAnZWagAAM/EP/18pLLjlH9PAhvNI7zPP\nvJh2iZuc2iagj+WRsq5um4Rcs8naSlEF4R+Fx4GqWUrQYUW5fr5O/uXBVwlD\nhh41ihQ76FC8G2f59gmlxvrHE+AkPAfs9drLHnP5YH4BAZywxmIU1TIdCgmN\nhm/YPydev2Rjk8Aw7EA0DrJXRTmjZh44CbtbAleiB60tnRln8lnHQTT6NA4d\nB1lyKXVXPleKSprWRwpgkM5DMFwh510fo/312grnaeYXGPRFdfoPQtpMhJUl\n2MMD8MymiwOcTgBmdx2jcpy68u9llstkYRXdNGkQGuzgTDaMAq8pTvhHDpq2\nZpR27kZqUV8Vd5T3LW/NKSaGPeTO6HQJmlfRpc+8mHWKLvGyhLuzjuQdB5IM\nhqHa0BIFOsGtoyQt/wUb6BerPEBXA29a7yeK+EgzauntbsPJ6kkXIR3zzIOc\nPxL2r+knzxms3dFsuAbv9XCRPpbzfzUOd9NoSm2+GvqIO1FBQEGDzzPi4oW2\nlw41jG2kQ7YYNU6t+mn5jm2h6gSAlNRzHczv1BKHflLlto7ivoRPxyB8Libg\nAanqm12nAcLbWXpL/KW1ACbtQWUVVRwsXqDgPj86HPXXMtGh5ZU9abgvIWCr\nppUUHwS9aI6HfIa4qR5F+Qx+om1nZrhwtKvp/InA4192OSC3A2SANcgx+Khj\n+faJ\r\n=CYFq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3E8DdTXlk0XePfi2ug3BI7TR5dm1xYquuNShhTBq+KwIhAIOpa7JlSvZ6gU2sRlESVLWaF46WheLGclzT+OkvtHVy"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.4-rc.12_1562821733003_0.5510659242439089"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4":{"name":"@wework/floormap.gl","version":"1.2.4","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-proposal-optional-chaining":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"c04431577f231c12b83ec78b97f7742f78820ac8","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.4","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-4hGetUajQnGlpBY3SxNHzKMy1+vbNkKk+widRnex41xqOyi93f2pE/jgP+Ji+K4gTqk2ZeOwb7IDBqGFTOJT2g==","shasum":"b54b44ac3f89c95dfd5900169ba5e2138e4596a9","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.4.tgz","fileCount":87,"unpackedSize":4057623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKZBoCRA9TVsSAnZWagAAkVIP/2KesEuxBffD9ntULnkM\nGuB62UlUvlAIK2oFR6FQy71SecyR30qlxoHvqHdXqVty419bAo0uBKdNS85s\nY2kRCaT+R7weG4A9sgfkhE0o2qaIAFyBxt5n2kcqwlGFI6gD//JGcueOaPfQ\nBG19GqocQj6udUdYbMQqiw9xIQhbl9H61A/7PPmmNixaVRilgTXP7TKkoJ/e\nX0dqXv47j6HkP0VSLYdD6+PySP4d/f56ek24UH+RZWLcrF2nSVYjLB5kg5OC\nKr4m+z8vS9gDH10+mOuC7mNODCKP/ukAbOvhW+xZRSaMbPrGUMmL93Gqr+rH\nOkvRbfqJwGP6WeKoJOQOMcCufnVBbQSDhKM+AC4fIf1RlmZXte0MMePlKxdg\nF0tXF/5XJy28+ZEBfAgR6SpQO0k3hmf8rx0OCgzXORMLSwVJkEs2mh6q8BOZ\nashV16apnDcTsGoGuQJsBoS7yYXBcFPKV2Kqw1wWt16Q7blfMwgiuPRhmMCW\n4FxA3cT8ETVbrGaZXL8eL6oyX7iIbEf4hwJqJYNqp+KZkLdIF8gH/mc+ZLAN\nGWuQk95qfVVe/rzpO7ABBn6FTJOCz8uMlNalkYtko746e0A7UFiR41X4Q1zs\nAW73PMTOSJi36ohBm/hVUUGgrrLQk+rm5q2w+nqsC+W7Nw5sVvUIgjnhbpcU\nEaFH\r\n=liXm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAYM0ZHsVLi/GmAl3vU9am2qvN6F4nehpTgzfnaF5J5wAiEAraU4Mbu7eyQWuDUNQuM49/OJVtbLUmxbOZ6Ec6uOs6Q="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.4_1563005031581_0.375986036580257"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.4-rc.15":{"name":"@wework/floormap.gl","version":"1.2.4-rc.15","module":"es/index.js","main":"lib/index.js","license":"MIT","scripts":{"dev":"npm run build:es -- --watch --verbose","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","prebuild":"rimraf dist es lib","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-proposal-optional-chaining":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"e94f30af330091f99b36599ae1f65b78e8322473","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.4-rc.15","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.15.0/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-pnRtMekY2blYOyPr9GBEv+P5HBcH8VrB7h3qEM4tyzxbmoIYMel4MEL+8Fu8V2iGOb+TAjL8mtgZdCSis8t6Bg==","shasum":"c694397d76b6028599a7d4ce520c2795f39116c4","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.4-rc.15.tgz","fileCount":87,"unpackedSize":4057637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLXOlCRA9TVsSAnZWagAAGQAP/2/ftVT2sWpF7tLkEs0Z\nc3cefJFVsVh2AqAgXWr1y10oR42Un2yGOH/WQqK1E6e8b25vSxxmw4zmQbZ2\nsrse/LxtVk0uz0wY4frz3Nxwxtd+XYwpvyHOuEmh+7rrrlUVtY77P8fDzLEp\nWT/XVPg07S8cf+mFxUxKTk+R9fyCF65xELkUJUOVfauC4BeQEh6Gaj2ZD30b\n5Taz5ipqjv2rcU/i3qd8e3kjotnEG3eEQeSVdLzBg8r8tpU4e1v7BGk0srd+\nFN/HnlHCd2fWASx8utVedWdeyNlu4cSlunsMfKDWWXYRHC7QjM55Vsr3Ooyh\nUPnZqOqQ5hqCiPL52UBEcSjiI1U4mSKi0ul0CkXK8qQm9GE2zPXCqj0rKzqG\nQwkxHbj4gN+C9TAxASh95vJeyGiEHKDuuCEK8eOPIaj42wV/GqPl9dj0goL+\nvS2RpCX/yUnex0NLTwhKB6EAkojj2vynKKv8HetxQlwlLxdQcSow338ZrKh/\n9b5LCTM7EjvvVFPYS55QRdsL4X1diOmm3Y3VE0CSNETxoPJtDx6rhp3ievb4\n8A2qonN+P31Co6s78e3YeNH/5rzGitj/uvBjkhe5O24nTnCJ1nWdMJu10VSK\niBbM/Ay/Pf+DwH3Pth2B06Y/Udu+dWCxUM7cDcDSE66Z3S8QxnI0yRQnMFdP\n1NdA\r\n=Glnd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfVGjZn3wU6xSAKLrs7hWIL22yTYZGiQPFF8v2vHSBHgIhAJHw+UN54kpnW4dQ+SHc4+uUrRGOWgW+jCkDe1uA3/aN"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.4-rc.15_1563259812987_0.029713995703636975"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.2.5-rc.39":{"name":"@wework/floormap.gl","version":"1.2.5-rc.39","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-proposal-optional-chaining":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"692373872402d2fb782ee2ffab35e8fa94b695af","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.2.5-rc.39","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-pF3F1E9EuDpWrxEKMZY9GBVEaw1tpvZu5yHYM7qrNORt1MOrX2WpPowoR2V7JW+LR9f+TA5n/tC03eV26UlqbQ==","shasum":"bd6b6f57e6a1d63647cc04f5b8b77eba84bb3055","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.2.5-rc.39.tgz","fileCount":87,"unpackedSize":4057646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkZfgCRA9TVsSAnZWagAAMYIP/3hdEwMc5KtGDYb2IoUy\nbv8ms6O/sKnkY44NJbgGgvcmBLFKmlt5YB38f+QFWpvHSJ/M4PSXe82zXvRK\nhFkqKoj6RaVCL76INmxgs2WBBm/bt6uG67GS7bXJfHADCoKZeUuNvccKtZZO\nKJJyq9E4dcDmEscgYTBN8o6A7HUa59YolneYPrdfrRJ9sKYFNHJ+p8EN5sT4\nBh3ZUV5eTFstEAJS4RpqwByp+yddMyBvVpL3075JI23DuAekQKvEGysrBBNV\nAd/33bVXYhrZAZE2pt2ih/+ZsZHiHoCwU8kudOvektL6F5bcP6qKqz1HGIU9\nFvX+bWQSw+ghzdwSqAru7NwbGydwMoHuKHkcRtb9iHRa7ZF8nVK9H3db8VEg\nbWJMwRWVTykMnvleYHJrTVz218Cr2K/OVwjOvZgbztyBzZ8cipqZWFBF+sIj\n8Z6VJKChpdRkknpnH27H6VtXgrAU1ajM/RLwW5594PTNAGLs9s3zzB3YNILV\nSwT9ASG4fonZ5gCITvrzg/LsSi3BkZuNhXnT3QYV3cXgMCG+D8mVIul0sQwl\nPJN6UeFIpHSZH7tIYu2MeySA5kD4ZSVg1zrKPB4/3Nrt2ng8bLYs76/oYdi7\n49C4wORHKxi6Ujs6ypkdQ5Xj1u6vuGBVls+WPPYW+zm2JimF8Mo5OsvxTimQ\nHI51\r\n=5zaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHO25DkAmk16vt3L/eh+q/d/31/+/cRq9dHdPEg6ksS4AiEAi2XBkO7VBtAN1P14qzIpWhLGXb+14cTyBUMJHvb5Tt8="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.2.5-rc.39_1569822687467_0.7399307959185735"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.0":{"name":"@wework/floormap.gl","version":"1.3.0","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/core":"^7.4.5","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/plugin-proposal-decorators":"^7.2.3","@babel/plugin-proposal-object-rest-spread":"^7.2.0","@babel/plugin-proposal-optional-chaining":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-runtime":"^7.2.0","@babel/preset-env":"^7.2.0","babel-core":"^7.0.0-bridge.0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","concurrently":"^4.1.0","coveralls":"^3.0.3","jest":"^23.6.0","jest-canvas-mock":"^1.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"71d73e3d7751ab0a759145396eef3fa1242104a0","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-yUI7u8rocR/8Mv4zeUjDUKzlMUyZvrwU58JlxcjIhFaMlxm/yTuNbhJ/YfZaFtfy/Xil6PMhBARckCnj63sbsQ==","shasum":"6e5f51c05e335f278d8f6c4acd609aa3dd3c08a4","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.0.tgz","fileCount":87,"unpackedSize":4057973,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkbOkCRA9TVsSAnZWagAAq88P+QD5sY2kujcoyI6YH+n1\nDyQ9d8hy5R34w4cln738APccCfcsG340abHNYHg2DG+TJ4uG2zllXS1jZUVP\nrKLlRaBglqOXWzQJsolRKzuZ5JLTQTCylf7v7srqxLkGeLfm9DvZhrb+Odh7\nWsFZLHfy+Cn+3hQ4cWHFp0mHgoLvQM0jgaBCg7I3Pf/VbOWFCjL19lGEyozY\nDn72q32n4qxZlBIDiagr6JPOj//xASH2PZ5IYsi7aRWp7OsvrkK/009z9fFP\nQ8rinaRuYO2/0A9kJNdvvKeicP4gjLqshGyb46wUjO78kA5VcrDM9LSNPNGB\nme0sbEkjn5+TVEyh7I9pHQ+ID2orZD4KU+Sa3Ex+tuQf0wl0tA0APYIVMk5s\n3oQHE7KZ+seBpSmW+RyTD/0RkR90pHUYjCVqOQvJ+1RHt/fn57jCmdTWKQJE\nILkkU/Ve1l+aum09jBcWTi2hS/AXGOfg3SwMJOpXwoJufyOnmbKhoWeLZI9I\nRcC2frBisezjeThMhuclY7Jk7IQe5R4Sfzvn6NyTLsS/codrwiXD3COj1HHu\nT6EdqjZoFkh6Hq1HmkGi0lKlqZS9twbYKlCgKQTMDbozsNT5enoPOKZXcZ3P\nKwBuyHTLZyERN3nSEAhPyBwWac36p7/cel9toDC53AEFjUDJETBq6NxY06/k\neK13\r\n=/+q1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDebSN9NfDWszf06m5h90Vo8C3MJccXPAMxLpvPwa3YsgIhAMZtRGp6jKzhpb6lAcFXRQGVsSUsJsRHabY/USDRRS/a"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.0_1569829796025_0.3019320979198987"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.1-rc.0":{"name":"@wework/floormap.gl","version":"1.3.1-rc.0","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"316898a7334c8e3a1700233f60106a7838bede2e","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.1-rc.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-JSOfGEroVWjrxT+2+7ExRkQk7WMhEFmQExMIx2VOfKwHjQzZ1dKEqTxvBb4IBNYjAA0tpVanOo39w3Fp98St+w==","shasum":"2055e726715285d86d2fb60ad1ff1a783523a1c7","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.1-rc.0.tgz","fileCount":87,"unpackedSize":4091121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkuR0CRA9TVsSAnZWagAAMA0P/jpPIFQHushZAO0rJ71q\nKA+qmfN1bRrzvFn7FAns/N50lzfiI3be2irVUceZxUG8gAB0wneKysAQnpBX\nDB8mtGZwarnZgAvW30BhD29gTnfx+EctYym5SqDze07JqYe1rHtlEZwrSl6z\n7xPdDvXPQ5JMuMnc+/BnnYOP4g77S28VTIHj6pPaIkkrcwmm0YssKSIXnHkT\nFHaOF7OC6WQ9+5uSYa91Ks5u07LzPN3vlEC3PHk+ArfGj9S0eI2XKKoSGyt6\n8KTaZt/XRSOWmL0svg21UoSNd3ROcN5F98B8UItwh2pQ4C7BR1GrpeaKmDTY\nvWTmlvEP1c2wmgzWh000AJPtJbRxQl0KSQVhPPqf99sUUY9sISiXWqV5sF1X\nUJfVSE6H1QSRp227J7zDC8j82Xg+02h4f04OQ3WVDZsbgiqEMPBMohOJ09XQ\n2iz0kVmE5F6tA68CFe5o7PN5X0e2G/gWF61N7AIc5dDyPfeo1u0edvI//5xL\naXk/HHlMWAUC5SYbIVxjme+PsDOz1s6MK3NH/edqwiOcLQyyhYLJZLH/fNPn\nSZS3bcGfPKzZ8bnsuot7QkIg6qkaSFenKXu+i0WnT07PJv+nf7B0g+Ii6nDr\niq6taKPUQJl3Lbcb8x0uLz8bZF2nN8Bj6RMZwVKzxBpP75NMruGU35tzwoIy\ntod3\r\n=+hua\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0jkKJc2FiwoICRmdxdkVqaPbNYTbCVLOhl/s18jZa1AIgO/wdrYKbx+cNu8t1cDeodUilrgcYn6MHzqY5X39WlHA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.1-rc.0_1569907827873_0.28566445663002416"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.1":{"name":"@wework/floormap.gl","version":"1.3.1","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"db3a8f6e3b56fe8f9d914e39b88dbfd921a34d2a","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-/M3zx1vSpOXS3NPczmYPZXv7sb8UyhxEoQKptzNDqT5qhEZXgv3FxQoqZSNhBv64+skgsIlbFPZeTBSrkrMdNg==","shasum":"cff5bb5aa62ca478b725a194803cf7c8100fd894","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.1.tgz","fileCount":87,"unpackedSize":4091308,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlHPqCRA9TVsSAnZWagAAs/IP/3d6siMETqWQam/AyoRk\n/T2JFTW20aB6MpsevNDoWdhxnU41Ns19Tkmf7TLB6U3DByv5PlU18o9O4XqS\nwGhz2d2dg/hSLqNSL5VY+BHSiNKhtiGiF9Du0sJzQoJwH55EjZxgxIX+k74B\nh57s67V/H8aEtI1sntavoqUsyjWurbF/sTRor7EujrOuZ//rBKIBtGQZ+5SM\nBcsby6uds0Vg14e98I+0zmOPbnwKeZaBvGqzH29cA8KsJrxW/99YWt3xMIFz\nfgAnw1nHVup5sSDbCRxlbgy2TPRvr4Ac5/USKuBMsiU5PM0oAZMzxQZUTRAY\nvxJA+x5oL0KPn22IXGqC4G8UbkyPRYFXt2riJI6w+mcOGWxhxbJsnU0JbM9k\nmvKGbgmI0+DVtYOjmOloFFX/okEwnwPBlY6kjq2VpUq73L99ZlKs1VKLY5yI\nfd5zcy0skRv874DE+AwDInD1EDEcn403LqP9I49lt1S7J+UCbqKJPma3xx/S\nVfTNPdwih+TtClQkgNFIxUbHSfCAw5RoWW7Z8NhXnrg7s+oOY1vQ4Vfd/6up\nr/B2qtVxqH4M5G7eic4J4cs6J/l4NWTnpF2dIxwNTYVZpI4Fnbew0fFyEUJs\nD3qaeu7JTr81swzGb2iIGZ95xCZUr191duuGx3OJBRSBV5WzBTHFaUT1xLJR\nZVZS\r\n=q4Nc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7JB/VGc+nGBOCYI6506kPmsYq0L+hwbEKtXFM9KCyYwIgd1q1FhsTSbWTuYzmm9Pr4sA+CbViqe2JeFdnut42W04="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.1_1570010090014_0.40727377775705587"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.1-rc.7":{"name":"@wework/floormap.gl","version":"1.3.1-rc.7","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"59a37e75f004b2009713c04bd137243764b92885","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.1-rc.7","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-cgGXzmHdvmqJIUOHzSzYTU9vFtzVMy4Pv26tHbeN062ZVRY7QvRi1DbvfxDuiUHUmWhYW9dK0nsbAR1qWS32Ew==","shasum":"5078a82f0cdf93a61234a6650e3f0985c7aa4d4e","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.1-rc.7.tgz","fileCount":87,"unpackedSize":4091321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlJTVCRA9TVsSAnZWagAAu6gP/iqaY87CaTeGkXqLP1Yh\n8Ltjk299mOpPFILyqwuFOg4yDWf5LWGk55ehY/tFT6BOjFH830Z8aw/5zsJ7\ndpivVmnJGCxdk2VSG2TL9lMAtBQN/H4R8nKtpKXksYCZiCokvQZeRya6xwoe\n2ooWHxxbYZBEfzFA9+I/AkZ9tveGm7pM2mBiJE/fnegVl0igvVMNwEa7lcWW\nhXxwNB4sNYU56ivf8aN6qB3INn+Ymxbqk1gSlX50s8VhA6zMJH5pnw2YElA+\nOg+WX0mJFmsaPIR0q+lOfjY6RIS/GjBkcvwzN6wngZtW5dCi+0gSGgD7+KZM\nUsgHN6hS6X5UlpOR8bMnqZ1RU5qxvTirL6VthoPUqJq20CK5q4ITF5wHvdIu\nWcJAUEaOdc46RW3q/i3du99A5/jtNorZ31pCeC/CJk2kf5+uZlHzhTbiIDQ6\nC3L7DT2N3SXIGsYl+4N/6n9GDTvJxx404ZCGfEX2dRZDeIfbviW+41wrFHO7\nMtGTU2bzk0JTZRABZ+8LOEqkNpvQhp32P3iL3OWtjJVmHPVCHZ8a9A+n2+7R\nJ3VWFlUTtDviSjCeQUsFfJgIR8RBbjkAY4ISbfU9kHy857yL/dQKyA75lB2X\nnPt2k06PcFFZtsto5ccjmYAcKE1EQifWPe1KjBp1NoosftYQ9vZHvP8eEZJG\nkvAg\r\n=0mRd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmwcCCPhe2oF51Ih99ADdbK++jTx7hrT6tEQkxDbA43wIhAJmHzNwDlrVdzgRa6fBli9wHLz1GyyLeJFsM4xRhpV1e"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.1-rc.7_1570018516333_0.6179500347526976"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.1-rc.8":{"name":"@wework/floormap.gl","version":"1.3.1-rc.8","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"797f601d61af2538700820d9fc2e5225db96d7a9","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.1-rc.8","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-M7NdNaLWgyr0Fvw6GtlXKHceH2bPtJHiV4AeXz80Zf++sRGQ5pMuBEyTL54rJS59b2+wI1HSI5kGVtOhHfLTXQ==","shasum":"8347db04d6e4a2776869f8a9ad0d366b46a60e44","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.1-rc.8.tgz","fileCount":87,"unpackedSize":4091623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlVzNCRA9TVsSAnZWagAAt3wQAJm87yrZMwQUl27UBfG7\nqSpJGz6Zhg78dKYkGVLtNKT+zuoUPBHqcXiyHPhj92C0x7xxdkzM93mvd4Em\nHmITjh7/mgFVK+AysnSxGLXqnBc3EVy4XrRUPcKFboWLzmh7OCvkwU13Vm3Q\nfVExgW/TueNgs2GM4c0gcFWvyhWoNoFrBBWvxvPTMGQGT0k1dOfpQyGKy2OL\nNl8CjQ2463nZAMTmEPkucpy+leHyFwfo+7Xjeymsln31OVmk5CxPRZzksmnT\nWM7c+mOMKGWeGZHLdbJjWxvCBlJC/1Sog9aFdTamEXd5N2OG2CU38IeQ4q+o\n584KbeLstOv73dxjySCViehO1OyPuOy/3ByjMHc0adgdDg7AfP5cKB/iKUWb\nAJQymM5kVNphsOn5Axd87XES9wAO9cgPLsrOtQRG7t4U5L5h3ZZduUr6Ynby\nwf57+iGaQ0LHyZU6eEG6EnE74sqYznH+MbEsdCT8PFfvY+fhYbZpgAJtzpdF\nrTBru5+0ICwRISaz7dfH3ohDkVIRWpHrRO/15fqqDOGYgDWH8No0PQQW1M/d\nAk6qflK/6n4Af3itfRK6YO7jerMkmqdhSNpppoDPQqhNsHg3mvVU088/s2Yg\np00TsTuVIqDgOlodU5cXIyVJwSRNe2nQObf++QFaW8GWsHX3zwQ0vEpDngaL\nttT3\r\n=2dYQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIByaVGizK2dEe0gNxjDBo8lFvHYLoP2IpHyPUI9EIWH+AiAPrSbKDg9OiEEgRgIbyvkhxciQptBuR/f0QLo73pr0qA=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.1-rc.8_1570069708488_0.6523957982706823"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.2":{"name":"@wework/floormap.gl","version":"1.3.2","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"5935f7d7feaf36feb9592fcb01327179d962e79e","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-ydLzxVOXbI+QrMKcY89C+cu5yifYvV+CD8PDkEXCXfv63baDvN+H18U+hoqjNe7CD8qy8g/3HpxpnyNj/PKc4w==","shasum":"3b9561ef1666dcc03ff419fec88eba831e97ff1e","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.2.tgz","fileCount":87,"unpackedSize":4091962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlWGWCRA9TVsSAnZWagAAskcQAJJFlW+jzVyGLKDlSSWQ\nPA5t1fYzBznxMGsmG09/dH/z9XfKQZ6UpQJDGg/ErX2hyqGdiEcjEywhxAqB\nZZfBD8cIdYzDdxV643yZ+JotXQe4jVu2T93Fc195SpMDB+gWot3kBZoEHOCR\nd9FZ0lq4hE+6vgpBMRJW120I+bT7aWfxLEKZgua5dFumGsuWihtaJVFJQZxF\nUpmrfa9rQncQ8PjJSJezTIguFsgG3ztz6xcaISPeS3ejnRSPFn5X6HHfsohc\nUbfMpv5T4DOcOHhJ7p4tQ1IZMgP3VwVJ6Q5Sy7QAxiUiewf+JFu3ABT7nVMM\nhPLKNoGB90s6TZtMa7rZT25XFUmJJcSaek/MpDss04iK42yeImEci5N4/yHY\n2K/tiuPtMQO6RlmbDCEUyFJkMlTW2PFtgXnDL5+d7Q4qquW5HSn0JayLNYZa\nNdAbOf/63BRFSsb1G+H9WMKxAQqbWKQ6K4VLbcPcZcTFMMPpba+ACdWoS3Ut\nA+vuz1wT5qrd7TzQXY6nApKgo/zohuRlWHNXdjTdHTuIYqZZrww5pzKTbZCL\nZ2u25Anw8OYoXj8r7nKDRXQT+nRy3Pdt7N9j/0a46CL3q1T+uy2FgA5IyHGC\nZdHgawJPwPftUrDqM0Ef3VO7jRNq1pgq2fJ9U7KezBQeAuStrUazNlUBMPc4\n22ph\r\n=4KgC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHp6LacIvd738MgN5R5+3xEOkxRg7sMl+3ElPr6s+wQAIhAOhP6VzUaZXCUzVJxxLFdaanTHFOR1G1+XOSYlnQlJzu"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.2_1570070933223_0.8109240000412863"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.1-rc.12":{"name":"@wework/floormap.gl","version":"1.3.1-rc.12","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"297d86b9f022d3ddbb8251a5bfea6c61e00e5942","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.1-rc.12","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-7AyXSfoFRj8TveIZwmYlAdxAH1HeMS9XpnaqmZM0mG+PGSwREvwosSQOY7vGFNNXhUTQAv0y7EomJt04Btd6uQ==","shasum":"ad0c96db006c17f0127bd6a8e789c3d6f02e75ff","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.1-rc.12.tgz","fileCount":87,"unpackedSize":4091976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnDG2CRA9TVsSAnZWagAA4vIP/2H3Jl8jNm0ZauLSLMWT\nW7moFCdP+IgWdYY4+DYvePnYIS6bZyMNeCClS0shOELcrlg2dP0Ccmi726lQ\nyvZ6IUgrwrbGVMPldk6+d6YHvlxYi60VY+V1+zAGu9e0zlgk9L4BG0/HrfyJ\nw+OP4nIL2thT3g2w2aY/kBpmpj0VfyryqlKDl+DP4sP4WIzmtYhlc1B6D2sA\nr9gBzDhrVOzj6EK117JHHBK5VKumuUlUk+JHTLcFgkH9QpkNEuaiFE5kEuFa\ntAIpvlByIfDi/Uwojlug8qgwDu2yYh5m6NQoGxbOd6Fpn8Gky1FXAtjRia0R\nIj49PRGTSAGhdiGPOK9dYC5PNAA1FlpoiZK8yS5bIGc8A774qxe0Fik9GENR\nzbwLN0R6xlLupXwPigQOsBnXje907nAb+6lBy1WnpB5vmGB9wkUB1BVekWf5\nSuc8tNg+o2HVIWds3EjuNhjWnpjBCJ+mFoLTyh9Jy5u1QLR3airEHyHj5Cnv\n7ji6ypMVVMG2o38h68SaWx5Oy9CEqNq5Oc/677vCs0355T06ooO7hUacRb4F\nBCCiAa/5AcFyGB6rKBPsMKBzpsV8i9vNH/2w1lOrSm74rdCueKB+jI8DdYP3\nmgZTtRFs2HqX2I7SPEAHy2if/vCpPUD6aCOecih/Nf4vDLt1Lme8XJLEi3gq\nyFoU\r\n=zqYG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDS0dOvG81RlS89ztKJv48o09hgCWlzWGR5cXY4KgcaQIgQflIJLmmvGgtA/5/1eI+WYDi3/voh1Sx7zEPbaKBnMU="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.1-rc.12_1570517429326_0.2758017715596832"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.3-rc.4":{"name":"@wework/floormap.gl","version":"1.3.3-rc.4","module":"es/index.js","main":"lib/index.js","license":"WeWork","scripts":{"dev":"npm run build:commonjs -- --watch --verbose","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"115c0a9f5843d5dc077011bd2abb0a111e2e0f1e","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.3-rc.4","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-Sa83F3FtTtkUOd0JUbfFjYjmOpnK4Bw4QLe1Y8CNmVAmk/6fZssQ2h/w54tqCD5f+b2UAzo4hi+Z23Slh5YFPA==","shasum":"2fa6c6b84a47855656b401c84e2587dc53433c3a","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.3-rc.4.tgz","fileCount":87,"unpackedSize":4091987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrXEqCRA9TVsSAnZWagAAxbIQAJhJ6Ngv4SsoXUY+RTI0\nEVEUtKyJyb94PyYMrQgZipf+nh6JRyLUoCVv7kyB2hq8sURtuviSg6ejHx0h\nZIRguCqxsa8lBaI/GN9BdgwVKa2sTejobETb/XK7/cBuMq2SFZCyHcZjXgRT\nuu/SOqn+i+6DUTTbOi9If3TLQDLlAMhCWpHibFj0Ninfb8mdvx6EJ+cg4+17\n1kNpNHP4i7UDCh9fru4C51fLXWga9v4IabYU7du14n4KWuEu1GtOFJJv7s4e\n9u+snY7/z8nj78lncjlaEGXUOwOpXs+UbYFCqMTmXqSAnUSJeDnaJtaQqGa8\npnu/r4Y6xIi5eKeB60PLPUZibOHJRjjYYjWtzyNgR2qSQKJmnFILmWOhN8fW\nZPzlwGUtaFr7jTqVuePUpZihhcQNspYxYCXgRYpR1ibx1/ge0cyHmJsrrMiR\nFemT4jhXJwY9toNpg544b9yHj/LI0aEJeoZBgt4VxLqWEFeYM+vPtaEvpwSQ\nuz2md4p1ibiIXMW25yZnmgjc/7etbc3AyVrxZlieTAh96AXL+n/y2HVJzUNl\nWynVHnG5AvPlNJYrwoKDScJq1eYb6RUnyEJQZMYEHjt9izjaIxRWJMOCXzjk\nXOe3PD0uYJ/ECwWAnEPPd6VWGBDL7I2QHoQJ4IVmq9mwxef2XWIkSrCUKRdJ\nkMGJ\r\n=wtzD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9q2kObENhoJIe4IkOljamm81634kjLWIHsej9oIeNYQIhAKZIwiAmmbzwD+UJ00j/k+KEiRrKMRnU+amfIqCMb2z2"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errolzz@gmail.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.3-rc.4_1571647785921_0.7681558149440835"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.3-rc.5":{"name":"@wework/floormap.gl","version":"1.3.3-rc.5","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"73f7f977f304f534b12de773c5908cc2d1bdcd13","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.3-rc.5","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-5R0PZ/Q44E95rnhOQfiPwpmYm8sZzCcxdEOBOmtIsRidROem+MVi6yNnXu4Bl/ML0TVACet/k09A1Vralk/wLg==","shasum":"538d53f233c1aa777c82bd6fdbdc0a8c224592bd","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.3-rc.5.tgz","fileCount":90,"unpackedSize":4048167,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrpHbCRA9TVsSAnZWagAAyMEP/A6QdxfU5t86wy3/ZHqh\nc0O6+RFVOmG0fe3g/blAb1mardgSQyt5NMoGuvHC9SQrCSswRO/nqHhwmOTz\nziHgVOyTlVOqBKIWoJBgPPKOlcgGNjSocG2BixTcbsVa8xqTvToUZ66P1ZDm\nuGH2UxVDz9nOBoY2UWzfFzmCFpyd3OnbKlEDjAdP76RKI1H1pch9zNUGIlMn\nYaItLc5W8AT5tK0SspV97/1F7OBUbjumyr01MaHol7kogLJrSFF3bd+qjXnh\n0iTdluizIarFbHsHxOuAX2U/gvJioBkCSErbg+sPH2onf/GHJGKb92P4uuU7\nvA28plYf5YCf31m9LQDjUJgoFlgKW5R5vwbCW+IQIdALvbX6pz51tQj+seHw\nXZZCEZgrLCFoHgXGE+NvbYskHxClJob3Xmu56XlG496osdiDLQtC1grSSS0l\nR1vS3O42ww4kjkhzVdIFM5VPmMTgzVC9ne94jlxwoVv6FYjbcxdzR7bqhWU9\ndz7tB+30zIqD86LwIJ+1ysgYHDufLTmtFUdKVzPBdBvVq2LIJYYf5zIaV7wt\nYJgtOi0H4ti+d/XGzdePypoGWBeSS7DB3ousH5ucwLcKwu06sIq9DNk2IhrV\n5zdeFZdfDKbpmNz8qTQ/OPpq648h2ciSAcaM0TcuEOnaju7WEvDtv5u/WAjo\nmXt/\r\n=tQbR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBTCg+uYFP8N0ybxkYAKSb5huReZzVs0Buh6cu6F2sGgIgSgMSlFIF7/8PFl7CnBuJaQrveZxgp0Dcb8aSrF7KeDM="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errolzz@gmail.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.3-rc.5_1571721690561_0.8695003493232236"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.3":{"name":"@wework/floormap.gl","version":"1.3.3","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions .ts,.tsx,.js,.jsx --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^4.1.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"5b6bb73e6e00021a1b508798efaccafc02af2ed4","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-Cm7p6rM5GpfrLn1+eWe0r/BjTPUPpWR4//4Yrprx6v84z5LEJridMeJ4e8G3e4qwRTMBsouBMicqdW4vDgCfCQ==","shasum":"cd44e0f5f55ee62a87fbd3fb7040a76941293551","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.3.tgz","fileCount":90,"unpackedSize":4048502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduTQ0CRA9TVsSAnZWagAA8MAP/igRXpXnu6W+75VmMCgF\nT2ivc0OCyrhNDV317KT3Yn6Terno0d01Drp+g7O7qnjPUpiKQKLOAuVQcEaw\nvfFesrjoMhadES2/EEOsT4Wi712hRY1l9cCfOopjAKsAkZyO8+KC0w2aw5MX\nFN2/Ek68r6mrkReUcOZDoR1Gchm0D0jbdEDN4OgTWsYoD9sRyMPqzM3iKTrD\niQTPm0IDUqhDfTynBP9J2poEfSWn4aGhV8+jmaW4CHsgbqkqYTZ7/rLW017r\n5pWIByDNh1iYrWMYQEFqm2G7jIpsZt/1V7coyCQQ349ldL11BZyd+9bOgqCG\nBSayBoEYe9+yf0ltWTT80lJqX4h2spVE9fc3gwt1YsL726geguJ5vd5C3Qyu\nbkjAqORcQQpwx65KU8USvOgRuVgxcvZPVGuvW+0vK8AX0rXzcB/9sZA0PHDz\nEbv/0slL7jV9lI69OHYZXURsvD5Y7P1xIriACDYhYEvayaSVWBosYy4AAGaO\nMLTr+XY4IC+CeaZVf8LgUy/NzK1JyT3HcdGQdu8qPxTB6Sf6wqEZFwSYcfiE\ng3g2Vw978WB3vMdWvAkJ3NBwBwwTlZM5EbbJKYiftqtAgqJtAu6BcC2cvgtM\nlW6Ktz/hkDDJVBd6qLJ26rpYCyLtwGuLpJFPARvKMpqK4lo3QoQrC8P85Era\nIcXW\r\n=KW2S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATtnk4SVgVUsa3gGovwUrAom5CFRq3STn8LJzylIUDoAiEAqSViZ0lezk31gI0jB15cbgNDF3c+IixP7CEnhcB+c9s="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errolzz@gmail.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.3_1572418612046_0.19758147416715643"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.3-rc.6":{"name":"@wework/floormap.gl","version":"1.3.3-rc.6","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"1146f57555c61a4764cc5b9cdde37accd560cb00","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.3-rc.6","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-ddnLIc7/YVBhnxSMi2MTvPadUtDbQZy/+u2RQlD8r8xzGM9iloM1nZvlhFhG1AOJiF1iGYlHRwyhxqhNTscp3g==","shasum":"86d8013a36aab76640efa2235fbaf8c24a67c5e8","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.3-rc.6.tgz","fileCount":90,"unpackedSize":4048175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdv/LmCRA9TVsSAnZWagAAC7UP/1+6Sw1wVSLE5HJoDD+9\nRxzxv9hlBEr4hm8zqMvh0x0FCtrZ4w1+h/xSk3KUPrSWaTfWVVTXXpfWHeOF\nd5qVop/ynnIHUuw9uBWXh3URacDNXyqCwac0HlYLLFoW16Vjdlq19sVx3pjX\n+PqpbId8tmpmZ+NJ/ruMJTWfojs1PoSLugEkmOzvfNA0XxkDXHGgOIkeTwo+\n+wYRGBbJbVzfIhhahp/sw1znckU7GJ1VrMVzv0qpO6kkMxzmKUkX8Vacupyf\nTjF35WndUmCct++ec/fD0B9HqmWBrTNOYwN8JQMYRPY/TCtuCV/OSBeXZUHc\nb2f+W7q9FWhEht3mz+wIsK8Uzb9v/shFVvGIpvtByzYSrtcnLw6KmXvQ4J0F\nV5aWzLiliO0NctJZhAzjSrxws5t05YGrI/Pg7lBYyQzjnPwQcDiK/j2kiqby\ns4Ii7JXM+/440Y9ocyTjDCmZaCkY0LZt/4HfjxEUhM36dTfCHNvbeVJUfXKJ\nXIHaMpWW8PQTtNjwrlE99MxH7usf1wlsZcwVx6KRufU7AkULK04/7Fp2Y5qQ\nhLSvbh8cNvrdhbQAg/iS+a4tN7W4iCcmTe7dvpc4pK5uNEnbUPoRgj8AEzKO\nx3qQJgj7hUeE/GaF/8fObuMzsRXQ/Piy5KXzR6SuR9qm72291Afnl+UNBGLA\nPQIC\r\n=FbJk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRbKoYKaKerlZjF1DTgeXASvwRP2kQyRSJhXpWlyYLQwIgKl+k+FNazYTfIZENnPqta7i43x3FoZH1YbDPBAo3OEA="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.3-rc.6_1572860646012_0.964609356287953"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.0":{"name":"@wework/floormap.gl","version":"1.4.0","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"753661b0b313ef1a4700298d1dbff69521c2818e","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.4.0","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-H7Ve/P6c114cERyvoffSyChX1ZIdS1bmUPmMEkwWkRX6g77Q8SocmPVKV153noQNfTR8LeM4eW9hi+68lCEI/Q==","shasum":"a09e0ec4530b40a5e7cf605e8871e6d3776d6973","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.4.0.tgz","fileCount":90,"unpackedSize":4048870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdv/SyCRA9TVsSAnZWagAAHkcQAJcDpVWWXR2oZgp+aYDw\nCpp4IcFGyne7iLbsf1BhsIr3VBjpKNIjNkrxYHXvwDFkEzdddHA8uFZEds1e\naX0ZaGdflkA16ZDtN6M4rNTBIwp2HX7NH6pyolfZjjboTPj9uZcAfh5vLX7S\nt1H/mDMlXqt9rgVHavxCVsyaOhpyQKH92+z//OVZjUkyuXuAioMX8QASU5lh\nhVjk4YBD2hQfiuthUkYYF6mTf31a6zAY0nn+Vu0g9rqWwr0v85r8EFL/Qjpa\n0+4+XncvNSLNkzs9TFpPPMRvC7Mv7WjbQxWD2ZSoHD1jXN18YQVcsHcTmldJ\n5RWABGxqsnVWQs9iiOhiCqM92fKvnDkzLrwB5fna75Ah3hOviEp/ePca8rbc\nOqn79Wn4RTAMOFooHM9GjtHWIuj2MBciFy6IucMJGGQU7DEtyYPjqH5Cae+V\noZUmd02Ra80Pn2F+kxa2D9FVtcovH6lyW1Bzsi3AS9Weg7EDY9zz1+uj8Ojm\ndKDMlqWnrLfKRyTBn913a/G58HZiP1poEr+Pgedsk77XJdF3AZ9GjkKlB38k\n/IlWastVWidSBXu4dszL0oGcpmT0keoCtG8n4GQ+DAJVbXGgRpfIDohvbBLp\nQIgtv5i/XWlRtLHhvszruKwBALyNmfKWP47LpEuVRKpIKkNuQr645FHO0Cvm\nJDVE\r\n=TY35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHT9vkLaJ8aH3jtKs39g4V4Q2/u+uBUWurWsqGXFUb3EAiEAmnU28vvtYqbUxrCWslMi8LcYa9tTEsSEcshXNfJePMo="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.4.0_1572861105910_0.2297900838347613"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.3-rc.8":{"name":"@wework/floormap.gl","version":"1.3.3-rc.8","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:es -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"397f9ddab0c9ee9897ba2b45f5a45da0ceca34c8","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.3-rc.8","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.16.4/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-eaUgHsA15lzuMIrDrzzht+wzsGTxNPwTPasPDF0kzcDtwZ+bN7XhmOpeWhdvlCikilF2mqRWmSkR5s+fgrstIg==","shasum":"c4236a223f949e7e3288bbdcec15aec13a652e35","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.3-rc.8.tgz","fileCount":90,"unpackedSize":4048883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwRZdCRA9TVsSAnZWagAAv/cP/2bfTnHMoJyI8PGQLhbf\nI0UTlJjtJJ52KdfKCqJ7+GA01wVhHvdgu2px+5zmrMROBGN86Hl6ofbk9DBc\n5xrvpQd2WfDiRO3rrOxepXHcOV6k5rQB0EqP6OFGCymCkosmlbAB2p5mg5kE\n4GEB96Iyf5JEWLie23udI6p3aeR7pToElnDs3KPx/Xez0Bg4GMzteMwLfeOf\njHeL2WjOJXFqx+Dr5oSCJpWGDE0BRfVkYg8O3t8rkDDvl/jPLgjfcIB9FTeF\nvJZvqQQC+Zhhb9MTUUBH8PENwm0pWIrf9XF3eAkQe099iMd2n/7r6Eyqkl70\n9h9hbqy8G0mcIzp9CoiY/tLOG75UmILhEeCPnbLeN34IV6dlXeBEsueGH4Ok\ntVID02g720JuU7929prGP9cldbSushZwhZHCBFTiU/jI/hqyjGgb8ruCaZIC\nujSS4vhNfu5AGBIM+ZLc0i80Y5CCFns4U9H2j5AD8ICfcRBVVLE4rrD5JNe/\nhDV6sJ/KJ8r+QjVM787iS4be42vT8K7610+D41e/5sm27lyuY84Ji4c7RCiI\npiD4T6Z7R/OrzsjSf4PzzKn4KlSHT4Qt4Mi5PzE7ny+lGVxXa+jQylVXnNtU\niOJCqBTJMxu1RPBpNsRXipzCcEESNlBX0KowTC9Ude8i7HWWjIsxSaZyziKO\naBNn\r\n=69Gi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRdWhgIj+dp+s2vibBsqABLP7P8TKA0KxJD2y6/c/DqAiA4hqJOlPqxFFUdTLbsdKikI/BadVnKzOu5+J7we5aHwg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.3-rc.8_1572935260758_0.536642925368872"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.3-tsdx.15":{"name":"@wework/floormap.gl","version":"1.3.3-tsdx.15","license":"WeWork","main":"dist/index.js","module":"dist/index.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"tsdx watch","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom","lint":"tsdx lint","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","source-map-explorer":"^1.6.0","tsdx":"^0.11.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"783a0b975ca7ef68617ac34fa5ae9d25da3e6514","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.3-tsdx.15","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.16.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-K5e3p+e7BonKy8d+jbZLlvC5OlE36drU/GdFwBac2dTzKy5F7w52MobONmgQ+jGIAG9ae1v+FewTTl3We01vjQ==","shasum":"05d1d9bfabb0019a95ae733a49f1b82219da4408","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.3-tsdx.15.tgz","fileCount":15,"unpackedSize":1160262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd13vKCRA9TVsSAnZWagAAVwsP/i/A+uoiK4StrYgpz0oG\nqhzPm/VGtqlxcMxHGFh5qsNqnAr0H75DG4nJ4W7qIAxnaHIiikjJWyqcJGjJ\nsfUtQobct996NPL+lbMH/FkImBNE4x0yNa6p3CHXd61qPzY0VJAbx5I+cnY8\nHhyyfbf91+ZylW3VZKEDM1bawghgUJu2fAZk7DLx1jA7dU3CCeSxQhgXmNW7\nGP4bc0r759JRzJ3aWVmNRqPQ1Xw2wrh7Pc0KBOhNqKdlpRDHO1Gqg/lNcczX\nqCVhjqd+lwTIfaV03ERnZ/fo+lce7aWOHmpduuHku9UtFYzLhcCfG0S/IxbN\nwPZFD7cJBlpt+xu+ef3EzFQDIviI/DNh4vOdfxoaSWF/zBwbgj2Vm85KiV32\nsFwk8tdrWwE+quPYDs05EvioFyK9cUKxZgQmk/Rl357OL3GaTWzZKD9ayvBy\n9JYGhR/RdD0/qd5UPmFYIK9p9frxlYNhUobyK2sXuXgYJ5r8g+UsoyRF5QEJ\njda28l08pa/8/GpZUB5gExaOKJYShdMaiNKHKF/kDKJ1wXm16BckypEt8zLP\n3egAzyiZVMFHd3U+1jdzSgDY8WmUVPsCZCMlFJ1XGhL8w1hZl1ARjoMVlvUe\nLXa/O1Pw9NNZHBBt97gYfcx1UvboKPspb2pRAZphyay2w6GL0kilSszUlwsO\nx8+E\r\n=EVYI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDl4vLUQ6DvgiK4Ri6DimUfSdmq7zX70KJsdi+nF2aO6AiEA8Mwr8EMIIu+3WnKu0mBpFqKnjDV1uUlgi0YrCTfVnfY="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.3-tsdx.15_1574403018398_0.33993862077200654"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.3-tsdx2.15":{"name":"@wework/floormap.gl","version":"1.3.3-tsdx2.15","license":"WeWork","main":"dist/index.js","module":"dist/index.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"tsdx watch","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom","lint":"tsdx lint","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","source-map-explorer":"^1.6.0","tsdx":"^0.11.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"783a0b975ca7ef68617ac34fa5ae9d25da3e6514","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.3-tsdx2.15","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.16.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-E3KhjOBO/ra2ufDtC+uVGnUJdkXn1oDNwkg8HQj98i29rCOiVC2txiZA3mOAe4yRbBM39agX4LWDs26aB6okXg==","shasum":"cc0c5e857eda165cf5067b48fdedc7eb8c2e9a0e","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.3-tsdx2.15.tgz","fileCount":15,"unpackedSize":1160263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd140TCRA9TVsSAnZWagAABAYP/Rzz/TDUjubzYSMYCnfx\nu7vEc6tWs0hcKOoShqrh8B5hYOh4TGRYkXPThb3lr9bhd9XyyqVvevvlCjpi\naTxJ/uP2RPryxKksPwypOS+5M6ATbr2sMs0RdzTqEBXRbemHSOYaXfeW2qcY\nZeAMgNSP4Nt1cZdoP0ot1xG5PhABbghA2HfFV0gfFeHM54EJizgvgapvOljO\nT3H6Pk1xy7u+AHjrnkbSEKFlMoX6XSEL7xCMfn3Mhor05adPiFjm2ikRjS1N\nyyzFtorzm7Ibbe+PnRpEQEBc8iM4KDcyZEmdBk4iqZytgQazAD0M1ydxSNXm\nq28BfRYCh3jis9DWAOopIqMMwbD4GvAM32srCaUi7L45C9jHFH1VkqqIW81k\nb3rkw3lEia/XZtiLqBH6hhwLswp7joDS/gEKMqgVw2gvExnEvY+sTzbpcr6L\nNVBKTqWGdw000CysNcY9OB7A6j7A5NV6W4SXrv4ufLTQ405houlMMzRmuOto\ndGRgBytO9J5YcBL0WYFzSUB+r45j5E28upmUVSoQ1enn8sZ10rmyrGEDWaoy\nAESnufjzrETBLz6fg3DwXaGxwD1vlcUQpH0LZlD5PkhuLUQbNrGUi6Kc4dPg\nY7ubiSOBnsaJQFkrDaDzkKdkJFUsrDk6xVhn7JWtVxEPP99rW1ASDoLkUbVK\nEdCP\r\n=ANTp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwrI/zFJdW8H6f6AIzxfw11qHzbWF6/qGpfRSC5Gy7nAiBcd2sUN2P0aZzpqLXnevWaZXKDLIlfTMm0RTgVbSBPUg=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.3-tsdx2.15_1574407442711_0.8729967774413381"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.3.3-tsdx-2.15":{"name":"@wework/floormap.gl","version":"1.3.3-tsdx-2.15","license":"WeWork","main":"dist/index.js","module":"dist/index.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"tsdx watch","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom","lint":"tsdx lint","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","source-map-explorer":"^1.6.0","tsdx":"^0.11.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"783a0b975ca7ef68617ac34fa5ae9d25da3e6514","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.3.3-tsdx-2.15","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.16.4/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-ebfO+niftzxxIt3mdgXRdF+nyrMa2V2Ubv37LBPN8zrvvtCr+13tEd9hDoarDeVqV95G8AIRoOtY3epKy3L0kQ==","shasum":"b975f8dbd671b4899ef3aa27422f8fcd166b4949","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.3.3-tsdx-2.15.tgz","fileCount":15,"unpackedSize":1160264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd15BRCRA9TVsSAnZWagAAUrEP/ilB6RDi0O5LbcjAXtK3\nGqeQmRfE3CTCK6FWiGQdtgtibhtR5wXCXE41JYZ/ga+lG5ZQA3EO8jsx9Br6\n0DvWvo3n5swCwViB25/FTfg+8J0E/mKyp+NsFzZAW2lC1gvu1Dz4lTsrfmqa\n/WjkdaHRiVohDju2GfmONt/7wRj9gLZ3N+XSu3lXvYstQZcVw+9BvUAdmBLO\nkskqU7NYSIBEsHZ7N3Vt9/jy4YmgaKY872s0UatQt88G6LmxINFZAZPPcuMy\n7NyTqkCWfXbvJfIl/VAynT6cufTHmkIfuCNQpBpjwHjkoSSCnqmSKrbagnTU\nq4cIMgzu4rNLO6zB/GRbKjIsk2SDsbyuTCtp244TY4PKezS3dFfV5Lz+xbLG\nR3HTP8Pm10OBB++WRQ5vjgbhg52tnXbZVQiGp0o0fONzooay86FlnQwvuIJN\nOUYTctzT5BM1yUARUYtm3P49s2oXMXtb2P3RBW8miraOdCIXIxRBucXbu1iw\n1e3N3Emdni+Th/TVo8Ydoe3Y2l/QprAJp9J3pYaSRiVVyPBMPGCdQcBJu8MM\nMF2Y9MS8XpaXG1fb06EFThYyIbpQkVVbTba5Zv5JN5YrQcfKKZBfMoE1BDe9\n+o7w1cCKQndEyvSed7Oawgu5SVqQXjFcYTY8aQeJwtHFIHofk9Yqf+Sq3Zok\nu4Nb\r\n=HdjJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIElSbouHa5RYbof7u8bMdwR5v2GmMjpqAGP0HkH2R90JAiEAtvPsMiOm/nzTIjqVQFCU5nTDDOhTFo0spYQUqjuKb0c="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.3.3-tsdx-2.15_1574408265844_0.8211277166482853"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.1-tsdx-2.20":{"name":"@wework/floormap.gl","version":"1.4.1-tsdx-2.20","license":"WeWork","main":"dist/index.js","module":"dist/index.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"tsdx watch","start":"tsdx watch","build":"tsdx build","test":"tsdx test --env=jsdom","lint":"tsdx lint","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2","source-map-explorer":"^1.6.0","tsdx":"^0.11.0"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"3e319e89aa4a80ff592d8fef3251601a4241d5b6","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.4.1-tsdx-2.20","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.18.3/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-BEPTjGfIoHmeaVl8cloERYqQjED2h3innmvxR6WjZuuQul9am0eKCuDfuT7sCPqRk7StV0zIOMErctLGidm2Tg==","shasum":"a5ead086633840f31f24ccf8eb742e0eff549d34","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.4.1-tsdx-2.20.tgz","fileCount":23,"unpackedSize":1163407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2z+fCRA9TVsSAnZWagAAa8gQAJyjwTlB6BSRcAnml9uS\nJiHgXQeL0LYN2hu6CcOco4zfGFT13W18pQf1idQWGCrXY1mVR/fWq6lln0tt\n+8qbnmxRevIzDShi9cAhSp8J5lUC6tIqDxGtQ9HjheBgq1j4kv9MxTWm1BBm\nGkTMRvaN8b7UEnaccxGb/C9QOql0slj6GFLHAl0EqaDu0bFGl7PCLWl5WdEj\nt1Wiur8lvvdIaY4Y7KEYLTZxI2PBZW3bSYevqZwccKdHtrVk97b6idy5EofK\ns9Udm8an0dJyOLPDKNcP9+BjDzUDHCzD/GVAX/C4H/hnJKGKROjm3fIHHkkI\nZ6fhnsMBhmFPjWoi8jyKiL79w9H3CQQRkUgusFskS2sIbH9Y5FzDt3W2AgRi\n8ijSS6bTSMHGtAhlxbddiFA2i7NEck0QoC2XrINoxyCBP4qOvesm5lD9VC2H\nGYKvDpY3KXaU9nunVqp7C4U3T8dshJqOmskQZbPMzhv7pPP6lk+YJ+ExTjlN\nOOO9MhVQjDQ9MYVj6ltrazImyUmjpffq9hQ1wvRuJ6YUijHqrPFb4b+XRTCK\n3DYd/JnNfb2hdqMN+dalGBpEVyamFQxutQcFu11TcGd2GtXg/n+CjvNiTTvi\n+BtRfXtQnnG9wwab8l8loUm4yZ6ErT8nKqk5r/lJL95CvG4WSWRVEfhMMMfX\ngHeJ\r\n=+C4X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFm1wMFx8JJIRoOhOpXZfejdLhaqPFYj4Sp0ui6gfKSgIhAPJ073UkMrldIbStBaE60T5qwx6VwNQhxdGwxK/Pj0gv"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.4.1-tsdx-2.20_1574649758702_0.5577709758519449"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.1-rc.15":{"name":"@wework/floormap.gl","version":"1.4.1-rc.15","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commons -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"e34dabd6e6b3eb20155f9af3468d220c8ceb7b6a","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.4.1-rc.15","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-tCPPDu3uajoHIJKcJyaUfT0cFmDtVOGXMGiZeDW21NdF4VgKXsX0e8aear7ZMkJYt4irB6b/ye4TDLsytSmYBg==","shasum":"a74f5aa79e7f569ed2d14a990c92a525de0ec6c0","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.4.1-rc.15.tgz","fileCount":90,"unpackedSize":4048889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5NZtCRA9TVsSAnZWagAASc4QAJKMz3OwWJvn3e6wwss9\nZZRZAvE0mt5cJTwFleShRHuYUFFlTfPqB7gFPAAMeLIQll7c7kvEsgcP/A0i\nhWUPHjSx2A0NXJ0vxmvhHDdj9JQSynHlgk2S0480Vt6h5C40NrvaD2vOggAe\nLa39e2Mrq9O/tQgQIwRSz5k/O0g/Iu2KrvEpH1QW+8J86YxrDQ+U2v7lUtNa\ner5csa3Tw2rwZ1fBidJ1rQb6WZhcjzmtbCxO75eCG6yqzBv4EZXUV7QhC5uV\nCcGUirOr7iCQi5+BomCxv+0G7ojQgkC2txPn1LUEVL/wjI8O+0vcBuspir6d\n9umD4iUefoNYoSWKUeElTjnAqob/dPk4losL+agoiUNzM0UfPF9SS3P7Pusn\neyi/a6uZ8Upjc2UTDmNzyEfSxcPjMQZ3MDvXsyH3fV3+A3pW9vWpwbAqfwHK\nUF3XF0Z8YOB63HtjZi6Ie1LBXeb8fcMFFf6W5KOSbk8vfGox/mjbhrH5Pn7O\n5mA/9vMQuZRdzoPDcjXQpalDqb82kVGIY1wROFC2dKrtp8xyqbE4tzumpQxU\nD7NO6TYPSE8rPDWABqUEU0QJv4kq6qOc5JxzZMkCTZLFeQA5ZgxO7x3Sr2Tm\npPg2xd1YKZTLKBjvsSW0CbBbjiAagGOcJkvfbKp/LZ3WGEBGTD802gG7/w7a\nG5Jf\r\n=ziMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNjOP543O6gGpchmRzdyga2EqRr/5gWaKpkVTEoWosUAiB1ArHZ97V21JZna1iJN2OeOWEYiUpTvSSlXJgdRCtEcw=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.4.1-rc.15_1575278188960_0.13237806097706661"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.1":{"name":"@wework/floormap.gl","version":"1.4.1","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commons -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"439856465d46e9f526b63b26c11f5cce4381fa62","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.4.1","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-sEJODGHCE86K6LZQmIDGqnEHRSkizRKQCGv48VXxQy3uRfri7+doGjRRjEQxT9HGX7h2sISXQzmXKTq4iAGAyQ==","shasum":"143403042607bae12d4383c97d13fe1af1fa9734","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.4.1.tgz","fileCount":90,"unpackedSize":4049075,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5NvACRA9TVsSAnZWagAAmF4P/RIHPJVR+0gC9YxgOWWj\nHCopbIWHANYzVrV2cFnfXUlO+rLMQI/nWTECvLQ06PzXmLxfuB3Qe9x1aytZ\n9DXVap+JmnJzonxPr5vg9ug+WxsmVaD2+FH8Dzw4m4R/+un1BFBNJfHROLU0\nx6NooOwoUsGH1ptH6wgUUqATiJ1dRTTEZ+dd0BwqCmcOOw+kkxTuQz5+iz0U\n9uk1JFJn/rWc0HhpU+xNLEeOrbVq2wejRDaDas2dQN5btCNz0yjALnz8mkpC\nhI7oeiWjNv1wE0sxCiPq4zi5TuV3Ik9xxSzkAlKMEx8oogWRk3dtHwUItW3W\n+S6srHgIKJhjhOfM2ZQXhAFzx2VmiAli7dqDz1nFUSn8pSli4IvVSk4N+rBl\nGOgxlRrKpJHIwOT72jg+vyTsDnESqagCmylq2QSOEuH3zEEDL5e9K06Ss9jm\n9vMIyrlbTsCJQnSsByc+g0n10SnkQ/2Mh+gzBfufS4PBUNMkw5Llh+yQIoSb\nr/0dqu0L5hXWlpbVTDBPKzKvKw8935DAMdY357P+yfPRcPw8YUvYMJhAyqSr\nMbzQbbGn+5G4I6K6dQBrwvhJzTJRJ4l8aazVtcljPo2iq85yZZIkwjLPiscd\npDLyU/SiH1xtB1EiuVts5RSwmp6Uqnwijzwryejl7KXtpJ1camcjdQYvNsW0\nvvPL\r\n=P7Nd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBCERXJGv+xUGd0lYSoUQwO6lzm+O/ZSGmUIJuKbMTMAIgOA6uUb+tFM7TT3pBY4x2Oeyviccfs4amtDbfJHMoQSc="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.4.1_1575279551364_0.3693346460986904"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.2-rc.3":{"name":"@wework/floormap.gl","version":"1.4.2-rc.3","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"a2b6256831278c2cd96998f3120ebd650ea27510","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.4.2-rc.3","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-GqOD1fopFoSJ9W8KxR2xSyzs2ym62dVcxxiFD06SJS271dLenBUFxpoP/aglgzy7Z6hhOAt58xDbRJaiCmrsJQ==","shasum":"ee3c6d210f1b2f11d11bff95773a4b90ea4beeec","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.4.2-rc.3.tgz","fileCount":90,"unpackedSize":4049089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd51M5CRA9TVsSAnZWagAAKPoP/jhNvcz/ZoR++p46nnIy\nK5Tr03Z8M5HmuzXVYhp+wTQtBbZ0dpSOrmJSuFQyQtiR2qA4EH4bxn0i3vWK\nmdFLDM4+ZIRdegnWUoy2WpMKvSI8udwcL71ZRjZ/M8OQ60PFHkJZcXUkNEHu\n53tzZl7S+Uj222opB2uDwiKVhrCPYgh3CmTJIpawTc/LeEcSubwYEsnrYFHF\nUMoWSCkVkmOda/JU2F6rWtXZtGYmHjvo8KlFi+Q45lJXI7tim4t01Typ7cXI\nE1r1Ln5CQ2eu5SELAjqc6bPu3obYhDl/C05KD3yuWCHM/tP+Qruhohflkss0\n3QGxLlTs1xLPVIAzn4piopfS7xU/tSpjNBGn+n0CfhvWZQTVFZmbax3GpZZU\nSDbds/HF+AmHuTlKcxYAH+GdgGR6e/flIOsGGM1X6LpymmPBSFtPEAy8uyGR\nmjFYMyPh907Qtr00PFgQcQ3QABsBdkOiqzJHThE6rHfKtIbG6hH0lqNfgiCK\naxmp9FkUsI/e6zhY8NtwxfuDyUlauPStPt+JcbCLq6aFzn9G/BcbiKzK5COh\nG3Emm8hq3HTxXadZ3f9oId2olC3CDxlbZlKtgQfbTE19p4Sak1BD9GaJm1n5\n8FkVPD32AtSX4I2N2Ww0vaU1369Fhi9YXooB6ntABrH8Pg3tLbAIQ1oITxez\nFGai\r\n=wtZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8qgYNes5v+3JZ1HhrLrbMl4nOQpFMxu0n0HHduau8wAiB3FkSovgPQcg4Pva4QoVS5mKLj69RoEaEs1QZa0BShuQ=="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.4.2-rc.3_1575441208453_0.15191715220282442"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.2":{"name":"@wework/floormap.gl","version":"1.4.2","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"a83e212373c5c12036b86cb081a16f6943767ed3","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.4.2","_nodeVersion":"10.15.0","_npmVersion":"lerna/3.18.3/node@v10.15.0+x64 (linux)","dist":{"integrity":"sha512-4l8JocI7sKYi93SrFal7WovgdvidhYeIfvtsFZYYJhsdnSo4V29lzCSKKdoZlXWHTf5/Xxh4penvU7o8OmYsBA==","shasum":"78cf39e92dcc63efbb63d36a9eb7cef4306e11df","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.4.2.tgz","fileCount":90,"unpackedSize":4049276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd51N2CRA9TVsSAnZWagAARe8P/0k8Av6CYP73GntB70Tw\np7HjXSZhj2dthV1PnYXzSGawiWwjbjTj2BFtlSsJF9ruyLF/dzd6Iy3ZujAc\nuVLIXiTk0nLwDUvXc69VhV9mLUD2AaPmVc9fgQ6l/J5MZlB/FXWIVj8wtj8C\nBpsEKLvra58aqnNewVaWxIhr8IrOzTtLFzgRLjTqYVv2LqBCwJKPvcIrWJUd\nk/XcKAO7Bm/3sJ4F+eLT0VkT/lkXxTPmznwmu8Tmah5G9A0u1CCXO4b/kDBK\nISAAZC73YFRuslgrzj4XONRtMqDggNL7Ue2Nfh5s1yxPRxsZVjYQ4jYwv9X/\nXwtp4xfJPMtQSo1uHbCKwqF5fWd4q+s2F/VU7EODyKQYezx6Nsj3DNuGhFPy\ncjz9wCby8L5E8KauAza61F/xQ0ftsWb9JIT3ilYOWb+zyXygWNgFwPG8nj5K\nZZut4d8HRZ3VWOyEgKouq5SkYGU0QoblqRAghty63xdvQkVVadORkoXOE8Bh\n1APz2oYrRCi3U9ZuhYWTYVIE5AFpbnqRimJZ02UG+9jnaPp054nHbDrcGXMa\nYu8Wz6aIyUHIu2M+dr8Labg1uk7DB/edxkd8vBP54zbRT38icwNlu3yGepjl\n068fVKwrplBTtGoifMZKWEl1UmyPOZk4fwalKRUHYw2N2SxC+GhwG+I53tYM\nJ4BL\r\n=QBHA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDprx4gsW6E4IGrCZuNpUlne/279i7qLwgypacyhDN4wQIgW9e65vIgVYGvNjpTdofUEoXA2SWEVnA7f7TQ6wsMAak="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.4.2_1575441270302_0.2480039304096957"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.4.3-rc.22":{"name":"@wework/floormap.gl","version":"1.4.3-rc.22","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"58e46fde687211e9551af3eaf28c9d7718a7ce18","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.4.3-rc.22","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-gAoD/PF7BMIBpN6pnLmHtevaTYblcWbJMhozTOwi0/fxhJpuEk1197kgKUAiEL1cnyI1ppUEwEtmQ/kPUbfp8g==","shasum":"98cbc5044c43fd135d9c154fbbc3bbd8148b4499","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.4.3-rc.22.tgz","fileCount":90,"unpackedSize":4052844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJWrSCRA9TVsSAnZWagAA9sIP+wRWlPmWAN76JlO8jItP\ncKAVLeh4LhzvXjoI2p5ZNu9y2181ITY5aJqAgOXPy8Fu/5Gy1gXKJHxu/maf\njRsZKfU9JxHVwOObf7TuH+0a+ypElAO2LGv3BXrtzaW14QebkAvlhDs959ZV\n5CwjOy8p8BM9Qu/e1X47uP/1ynSZe3wwiHPpvRziEowmMxth8uZGH0Wh7b07\nq4ooSC0nMx2chAUFFNapyW4JwC2wtHiR4oct10FqPj2edv2uBFtp2XdcbARM\nPC9xHfywBkka2WhWy+Ixbiyf0XW9pI1Msq29CanqyZyjw56697fwjHyPlvec\nEvS8l16GMMiChRR1IQ8+4wh+jujeiedHPDLUa0qXU6UltZ0YXLPiLf0vHKG9\nJH4wvX6lGN7XpeFQX0bXsN46s/yiCXy2MSPGor+V4JPhiMu6SdUe/z9sfqkI\nMnYXFaCnRNUkXWPdFRbAW2HRjdNo9beMjAnTWtPLBct8r8gJ8f5B+VnOho1u\nSzWvpQcUpDEL+kYlH1xnz7/f4grPS11dw6aDjmOVjlwOo3ftnrzAM78V+uNf\n1U6FpfQJ99C9CY+WHkDKpOnfAFE+Axlwl5LMqk8Q1mAOcQlqvhIzLzqBI3I7\nOcC+6XqJJjyTjTvdi5USC/UJL9GosqWfHSbuOVP/7EVrSml2zM322lOPgqsV\nxert\r\n=vPvG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ+xfYok36UarHkSUKMw8JD70YMGaMdVR4yCBi0h/hMQIhAP9kWC1Cnw5G+SIqP4ZC8LQb5SFrQ4+g96ZSfDZmOrwd"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.4.3-rc.22_1579510481675_0.5925108789598033"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.0":{"name":"@wework/floormap.gl","version":"1.5.0","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs && npm run build:umd","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"95bd8e3388e7ef830dfa12abff19ff29e18cad66","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-UJUQ+SjCu9OH7OFiZvzMllfCKXey+zWXe+wynSzNqXp1T6mcJX+eEtkNKQiwyczU9EvgRnMvouRksFVbKUHphw==","shasum":"0668bf746dc4b03b5a04593ece9355aa260bcf05","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.0.tgz","fileCount":90,"unpackedSize":4053186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKmRICRA9TVsSAnZWagAAwUkP/1qQS52eM/3SCjAJ/al4\npDnhJB9ggFGA6xfgwcTVRd6XylI6KhfkWAkA4NeJ1EGCstP2t8Fk9HCxB6xb\npVNfwv+m6kBXi19DtotsJpYaQvSmCZNwBX1JOmUKVWB3gCCTVPpR7xXM2u0Q\nQ0n7WzcspK08bjir3QZvnc+2/MqQPsrBdM+QsI73vBVcp7dHfkvXbHN86euE\nOR4HkvMLHt2QiLhFXX2fxNSvMXi1QA/7B38dfP9e0//4M7oV5PK2svwpgYvr\nqPBpcp267nMZ3h6VXn7TUAxpgQkBVSq5XSUvje4Fcpq79ProylbK0QgqFd8n\nUca5C1P8Uo+GEeVv8awZxEq8BS1sVKdo6BawXDcE6I+1CPFajBA5SDNK5DJ3\nvfjuI9wzbBsB/rbgp3/FFXo60IyR+Y7GTP6pUXqXaz5z2ZRlJjF1XJ7KMCEL\nX2AP01Fic6JrHbMfS8LkuoKmPfqihkF5ByjkIQPItyfqSpcxKrGXJdaS8mKd\nuhVsmmql6HUdyO/yac9SB+GBwVGZVqx7ZU6JB9WrQrq9YBBmu0OARL+ay5EQ\nCt2mVXphfHUPPXEETiUbR4tiyr3EGJJmQpRpZzXXWXLKVADjYoEotN20cjyx\ntiAsOcB4Ex5/g8yBqwFs+FNpsGMUWLQLGHnIhzACFrmkJ5LC37MvTUhtGlYC\nh4Vx\r\n=4rXN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHf/b5DIRAnDKz5Cv6omhdcDT4/snGlV3ZKNuLu6yu4GAiEAwAxmEOao1Ke99Ya6Idvp2Vl0s+cZXh+5/r4qRRTOztk="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.0_1579836487936_0.9732336603023826"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.1-rc.2":{"name":"@wework/floormap.gl","version":"1.5.1-rc.2","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"5b15e74b3f11e45ce40db5cc3a799c3611bbad3b","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.1-rc.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-JNnV13ENnXy7RUa7Zp6DX2728TIeJgal9nsQ1xAQd490MykwqeLxOWKd5raX9390X20kfL1EoufP8c8gXLkROQ==","shasum":"0ec7324596522603463ca820de481e8ffdddedd7","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.1-rc.2.tgz","fileCount":86,"unpackedSize":847419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMlbDCRA9TVsSAnZWagAA4VsP/3Wg5FxLREKRfRfCAvYb\nn6NpdaTvydzTlqwCVlbCeXrR/pqSyxnQOOlImOxPKjloDX+qsisHIydX9OvC\nAv7OGO6Xu19b3VfAa0cxOlsY0PGXRaJDOqwu168G6vWOWnnIcJxbIl9S/NvK\nt71Wv5XdPARZjIP8lbQwBxBmulFPkqI2zGLNg9pnN5F0l3PQjw9nsgHuxJ0J\nSJVMPRsQZtHhBDKaScfgx1HlodEgwZV2JoAriKUim6lz8mH01NW2iaxRt1m5\nRMI/cY73/2RYekR2/WKwbt3uUsfjBQpJJocmN4L21EqQizBy4FD7BbY3z9v7\nj0R2CvHJ7miZq8g2BsB58ckjBQbM7lGTaLRWcdjZmuCmZSqL0gkhD2yIdwZ2\nRS6QRnBEp+k80aR3KJyaVEx6i4A53ZNcQUoIYaaNuQnS1QtRPi0k/cGOQDbR\nqJueBK5fuL3uRRaCM1V+000eXrE1wd5Oh8CZK3W1NKtgr9Tt4VljAaDnZ3W/\nACiNn3SW9gHLBPmsHRmA6KKcIi1ogIKy2T3rydGzEgnShQ0qGDv8EcalhQLH\ntvu+y/ZxAKHbOiGFm0daVLbpy3dP7STKYINVwAWAaG+NczkmZ4kHLSuaTAXg\nViAdRTneYi4wzrKo/b1hwxXE+LknYxsriqWFjEbSgQQz7L8CULb/M9bhidnb\nsRaC\r\n=/CTw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVOE3w62FDwdgL5FPKodS6efWg6WnyVHENIughJLkXowIhAJS6fLYFl0ZO49sT0min7ou+k/TYZNSp3TTnCc8Bap6Z"}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.1-rc.2_1580357315060_0.04732794859257172"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.1":{"name":"@wework/floormap.gl","version":"1.5.1","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"89a34ce866a89cf2800db96d88564adc51851378","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.1","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-BXCJd1XNlGQUYIyhhhojcmVRigqdADKNSRL1CvC86bKo3UzoEsl/h7XAv1fyCNAAiM2PulEJ8X7+U4jPI6vhLg==","shasum":"8ceb9b4f13c229df8ec6984a93caec0e09704374","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.1.tgz","fileCount":86,"unpackedSize":847606,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOpXwCRA9TVsSAnZWagAAzCUQAJU0doD3kHHrzWvU40WU\nfT1VYKL693EGE9b4XSET9rDMaJLqbGiMRXSVv+vFg141VrzE+UxgaXzv0jZo\npkcxj+IUKapw2PaQSGKjT1Qapajus7AhXyr7BSldnnQ2FNqcptguaK3XGcYX\nRTPM68L/E5qL/KW15dOMJOrbP4pc5WU0U/wYtsb86XJ782dwURd6zKyj1jPe\nrJWQ3ZWOWwqiVhJpiJ+KWqZbStS1dzvNxOHmVTnyRUh4g2UVt0AVne3m0F9n\niq4ij8BqKttGIIi4CXWURyLJdv0dK/6eZXEUMi+u59xpXxbhPAXIAU9TMSFI\ni2FZ1WQRO18fsjKsjhQJVPNVFfirTy3C7i1WGF43NHapmdp+eX6FI4q2KK8l\n29jOs2W4mD7rsSM89b8z915GjgdvcOMeCOwBQF3n92UwLEzzVTX3WYxeklXQ\n2w/lp245tCxwgo2vFCiiQPJ390W8GuQgQyTl4ncEwJ5hYllKfxNDGUtzCfZy\nFdzSIHG3U19cn0ioqymbGr+BcdVOtvbDQyoYYNRTezv+oTBAi5yiLsVIuRdi\n2Oy3FblFbvI+Xza/Z4mcTBGj4mPirFLGL5DioKu8hmEEqbjfMc0ocH+9rPHD\nAK2UgpH1iPY1yukMiGZrTmYUIewQblf62uPDJsewfaxwDdP6wKQzsMjVI1MD\n/87v\r\n=NcUx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYwgmM3rKqnt4RWFEl6Y6F/nDq/PII9Eag2U8Q97X6cAiEAqvlVoWkur754YNGBrJCaiWsRa486iNL5Jewh/1bW/Mk="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.1_1580897775448_0.6025753196353016"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.2-rc.2":{"name":"@wework/floormap.gl","version":"1.5.2-rc.2","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"54aeddf72f9b4dbd710491af4849d79ff3842f31","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.2-rc.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-yQ/87TH1T2EAuWXVxbW11+7IP5VqkPkZWlwy1e1zHwk/+CjHBUGtAZfYYKRJ1eK+T8YezmYhOq7zAl7Pi039rQ==","shasum":"124aa544bd8ebc19ce083b418d1db2d21c336e07","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.2-rc.2.tgz","fileCount":86,"unpackedSize":847619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQROrCRA9TVsSAnZWagAAOIUP/3J4LAr8Cu9PYSTAcCuE\nPhPdtxVdf7j9/H9zLIbRe4uy+/dhPZNqx+ITMW3rBxVTczlAaHahsurKbbvH\nLisfaPy43YhaiZosxPCK33OQJg6wGcu5lmu5XMfEvqoayYkIdlgkuhlT96aM\ndY88d1B4V8weGhFHyDfrI+qobr+DGqlcHEAcF28NHeL7O7roQxEhbRyosLt6\nKCsj6jr8l3kaFlQIgVy0CNOs/bHoqoqTiewh+XAZ3u4i8Ah8ZZL7q3N27cVQ\nvmNemewZRDVLTUet03vtxISzcST+wzegHuQJ6XHda4jS28PY9Hp1i4Wk9bLm\nIZS2IglO5+L7BbSP95UyRn475zY8sfqRR3N9uGvGVnT/xa1nkrrSuQti9vlr\nesIXoRggJaGwo6CY7ExiwNOhTrPiWb4kB5d5apeibsg6AJx5iGfzyRbbFBKb\nJf44uy0dFjxb276dK6bXP0Ezp48zzyda7GbWLOD6cW2ClyvX1Q6RkFRD468f\nAlYpJjjU+Kc1BD9ThfBGPZQNBEvY+bgWnSwxrRbF2LGOU6U/SOUrQwV8n3LS\n3c9pNTwnw7cJANIj1g1jEbmC955Euj80S9DbxPhkEX9HftrD1JvNrizjT70Z\nLeDQcVesckdwuI0AM9OeQXygI84s9wSPutWcBYAHZMRZicgxcquM7SwYwfWU\nnRXh\r\n=FTlC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAL3VPMj1zDIR4G+Sw7cFPJh4usmYkblb5H9OP9VESLCAiEAlYZU47bfvB/FxP53qFYyYEHKpeTTHM9QKkrkms1VvCQ="}]},"maintainers":[{"email":"adamjraider@gmail.com","name":"adamraider"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"bethany.hyland@wework.com","name":"b-insh"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"connor.carpenter@wework.com","name":"connorcarpenter-wework"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"emrebsonmez@gmail.com","name":"emrebsonmez"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"i8ramin@gmail.com","name":"i8ramin"},{"email":"iainmcgin@google.com","name":"iainmcgin"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"jgbenito7@gmail.com","name":"jgbenito7"},{"email":"jimmyhsu+npm@live.com","name":"jimmyhsu"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kaushal.saraf@wework.com","name":"kaushalsaraf-weworker"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"naftalilubin@gmail.com","name":"maniator"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"mhotwagner@gmail.com","name":"mhotwagnerr"},{"email":"michael.gee@wework.com","name":"michael-gee10"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"sumit.chhetri@wework.com","name":"shhetri"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"axel.esquite@wework.com","name":"weaxel"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"me@weiweiwu.me","name":"wuweiweiwu"},{"email":"errol.schwartz3@wework.com","name":"wzrdfght"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.2-rc.2_1581323179090_0.18537281725488497"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.2":{"name":"@wework/floormap.gl","version":"1.5.2","module":"es/index.js","main":"lib/index.js","types":"dist/index.d.ts","license":"WeWork","scripts":{"dev":"concurrently \"npm run type-check:watch\" \"npm run build:commonjs -- --watch --verbose\"","type-check":"tsc --project ./tsconfig.build.json","type-check:watch":"npm run type-check -- --watch","prebuild":"rimraf dist es lib","clean":"rimraf dist es lib","build:dev":"yarn prebuild && npm run build:es -- --watch","build:commonjs":"cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore \"**/*.test.js\" --ignore \"**/__tests__/\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:es":"babel src --out-dir es --ignore \"**/*.test.js\" --ignore \"**/__tests__\" --ignore \"**/__mocks__\" --extensions \".js,.jsx,.ts,.tsx\" --delete-dir-on-start --no-comments --copy-files","build:umd":"NODE_ENV=production MINjs=1 rollup -c","build":"npm run build:es && npm run build:commonjs","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","analyze":"source-map-explorer ./dist/floormap.gl.min.js ./dist/floormap.gl.min.js.map","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","test":"jest","test:cover":"jest --coverage","test:ci":"jest --ci --coverage"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","rollup":"^0.66.6","rollup-plugin-babel":"^4.0.3","rollup-plugin-commonjs":"^9.2.0","rollup-plugin-image":"^1.0.2","rollup-plugin-json":"^3.1.0","rollup-plugin-node-builtins":"^2.1.2","rollup-plugin-node-globals":"^1.4.0","rollup-plugin-node-resolve":"^3.4.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-uglify":"^6.0.0","rollup-plugin-url":"^2.0.1","source-map-explorer":"^1.6.0"},"dependencies":{"@babel/runtime":"^7.2.0","d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"6c3b92e57cdee65ee02c1483487b97e56e363e8b","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-Qh8fLYiTKlzQxz2zYsghxOwReOzjaHXLlBbHf091lGPYJcpQS6wUFAAfBovn9D2Rec0pE4XS3xrcTck8tj+YEw==","shasum":"88dacde8488ced8aee4f99df20acc06597906ef2","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.2.tgz","fileCount":86,"unpackedSize":847806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRhMKCRA9TVsSAnZWagAAuSYP/1J38GYxH6xVnBIqkfPw\nyEUcNCdh1c2hK1Qu+sJoz7JiXbsbXbwVIgQgFRDABcgEGVGs61n722HQhvbW\nd3nTIJng3YydT8U01DeuGMT+wzC1yx+7ZEhZXbdekxJ3GAqc5xOWF8CliioE\n/huTfDwzE2hovpTqA3uEtgTiQSJ96SUc1QUmJIuFI0kbnws+5rynqEcqAVrc\ndrkOkXceggtamx3mVQ6i2+V6sqHl6bXesojPzSKcNhbErSrMqIaR1JrIigUK\nf4U0udiuCVUJGIihYLiZ5CceazNHuGz6pDtxGaj56d/Z4IslA120lemy5zDx\nUyNYTJ6FgC4/cr42Vx81AxmbgfP8bk5WAM7rqwTAizDQ+vLDx+rI7MeOAUNn\nvEZTktnaEAdTAUHc5Lw3IiykhBKjah6xTTEDehuBCinC1OdNuKZKXFKYGalo\nhGdNYdA3qUFBTnw/XXWXeKeu+DfHPVrZeEUECX8UQSNFkYzesssxIuCztmti\nCswTTCeeiUW04vwbbNlUsDuFQX3mKXvEyma8drU7zcLESvelKgS91ScOhWIk\n5A/kvPzedSF1XGnVC1JO+/UaIayWYh3U40uJDuVdpCExWW9q5bUTf/+aq7pX\nqr3wEBhpaG+jTWTsghZw5b3Yj4lAZZaW18JNURWzudtDyhhC2peO9uxiKI7Z\n0s3i\r\n=imAx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGG4cYTZ+QhKFvaY559YwqPitWVunqIpzh2LszPYccgWAiEAmEzQI9Z7wMrFLdqqkkxz8fzFFb1zJkzZW2YPsq6rMMA="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.2_1581650697769_0.7111290262619723"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.3-rc.4":{"name":"@wework/floormap.gl","version":"1.5.3-rc.4","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"3fe6b18bf9c8b55f77e274534088a6f2d60edfc4","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.3-rc.4","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-eAJnL9aeQfbLz8AQyt+Cf2y+YxUlgTMfSRglIcsU+o9STYd8hVl2xHXO6TVRnxjMqH+8G1kUM6JpK//Osx0RkQ==","shasum":"51eb8f0cfe54c9e71da4c8cfe2b01ad26a8582d4","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.3-rc.4.tgz","fileCount":11,"unpackedSize":1195458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS6FnCRA9TVsSAnZWagAAhasP/R5VWpq1EbS0DZPAwsFF\n9V4SThQqxYyan6oOgaYecNihjX9uiulMQeSvda48eVJy7s35zoieoDmffQjK\neRb5h0um/AspbE6unxdo172aHFI7uTKB7PrKCc+RgwZU0Ee8h3Up/AWelyqd\n5//t1ijOzovR9U1mDANRXIML13nXGuQSd2//3Imia2lsmc1AM6jEk1sH9a6F\n+rNrW2fJv8BKrzEnReG4iHhz0IYgIGY129zvERwvmdxGs0qxB8SqxIl7FEfv\nf5KUwwZ2A9RiXyPlsRGZEiAiWHJLAC/7zGUndQJqi5RFU3yGY4KqFm+8859/\n+Rf3vJdelXgonWDhK0wL/2UotY01Ot1v3cEsc1ja7s1Dun9+fvVMJSLU0S79\nGWf0ttLpeDhd5dK5KijadxYetOWJBczaTyDtIMk0lM83In93OlX1z7Yd4Drg\nCJOMGMirdzhqphcSWSqQ+UPdopn7r1rYzvGgU1HCzauFCvzJwvJaYWqcSq19\nsapz572aBSkkMDYOoy75WWvQDnVajDPJeZfX7OvLFMwcH+eTwPOFXxHQbpjS\n0OcIWhqcXOW9Zhxpl2o04+HnPsDetu10HjrU99mpyweDhssQbU3y6b1XlFDl\nfyNQ3jkgrlx9OsN7MTMA35lsOxkRKXguM/Y62etJqJzngFmXMU3Wt/Pu8U+D\ncO7I\r\n=apGf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU8xDQfkczRx0g9FHyMdgT+1O8FKZTRQ5an54jIAm66wIgLUz5DPgJCT7Z/ikH471BCYExsd8jRf7j4jWy88z+4Ts="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.3-rc.4_1582014822760_0.652962699165204"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.3-rc.6":{"name":"@wework/floormap.gl","version":"1.5.3-rc.6","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"9f7fa6bc8e0d0b3e468fd06ce09122cbf869e5b7","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.3-rc.6","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-Al9oUJkDrUYlj5veDWFkaw1dVxv3aZV722T9tcbLLnfZT18rd/EW+ga7DQnFLDyuqyHGOpFlIIKNUmRU3fabRQ==","shasum":"60f3d4708a9c27a5326ccf61b127783d615cbb43","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.3-rc.6.tgz","fileCount":11,"unpackedSize":1198434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTOhvCRA9TVsSAnZWagAARG4P/2KHMVnLg9KoyFR1zfG5\nt39A0EnDYkhhJ08UknTW04vYKmkbB8NmrSzwFTXXvRgmX7dqvspe5PoGkLIU\not3rgMcB5EcZx3YLL+4kB5gNkes2OJF25llMHRXtE47CNCz+fRlPDKbVt7n5\nct5N8ULwa5JIRcDD5kbLyRU8SwiAsGI/1+WfyZ9LQeVdyHghnLt23Wfjba3F\na7TjRLrkS34LMRLCV7fupDTI4CkF3Zcv7qUEExxQJKhnNl3NYMzKj/CTDUPw\ncYQUp8H3ms1S7s9Qskd1KQ0hBYdFPDLamjrK7NGhzI7ZmsPm+USAd8O1yOLs\nf3uwk6LnGZr12yGBbjh6YgRhWZUA1rxjinmFnHfmsGQK++eXwVgITs5D0RZD\nfyIeGkZGT9gB2/9H1Ctzo68lcgBGpH7X82XtgiRvPNpEwwRRsshzyJ0ok2al\nXhqviy62IF+J2AUvawBN/Gol94tZLicenRACqHMTXjrzhBxwQkAXlclHCcFe\n+wD4W9/2tXcY55fO8LCrW4Lg5MzquK0YItsP6aQi4PwCIN/HKOenKgLdLCGY\nMNYmB96EGIA2bDve3oJmbBBSyEpsShoCbu7Estadid56eg8s9vB62EMBM5g7\nSN9U5tsPziEwIi0tCUiWXldpLFuovEn9pk5Sx5RSbNBid27R/SRQhkTyRn1e\nS04m\r\n=/QDV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL1p46bTI5HV9lWhPN+CDAdYdICsjQaemRJL3I4Cgn4wIgPtVf0Ryyfd0J69aaxPz+efyg+fpbOVJ3/SgI4gCKgPQ="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.3-rc.6_1582098542645_0.6511375591675272"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.3":{"name":"@wework/floormap.gl","version":"1.5.3","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"416b8d8a8e50927d6085e3e2380de800aee1b144","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.3","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-y3Kr1QnUAPy+pEX9J1AJHvfs5GIWRPaKf+tc9Vykizt2FLFS2cweIxt8PSKLl5PDR0H44nZyKChHlHjlw/WL9g==","shasum":"9277ca17b7d1220c3f7b058d72658c85d772896e","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.3.tgz","fileCount":11,"unpackedSize":1198621,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWIr4CRA9TVsSAnZWagAA9YsP/A/5LSDLqI0Ao1BGlr+R\njZKs/77qmxVUmvjQwud2O1wTlgbY/0bf6ZNneaN/oklqSxKgNeL14VoQXfA+\naTEEI94I7SSXWqpzUp7xWoGa9+F07SrVKJiAWiWj1kto7W41v0PWUY3+JAdv\njtVa4d5HCVdNpByoNmn9uqFQUDcAeaWlfF/FqazvmDzkgpYSMJZ+FevqqF51\nCoUkbuR/y10HDup4oU9nHLXGVaK0JquavIw88kjWXlNPrlH9vpHbXS/jcqJC\n2R2nr6YFIYwo1QxRTy97E7ay2gxYnxLEJd5dOzT9VZjuorfD4/eoPToMS+mA\ncpwH0kl5SyZxWyyKwv7f4nNT/0FZNhG8k9uro5/Kp4udCiF/KEFY+WjzSq+J\nKdc8MlnXqZIsuaM888Kb3rxq2s1KnLMZwQ7pqCVfJCMqJHFHIoZLxe4AOGLR\nYk6gebejWrXvrFctR1dcPBGyGYdnyMPWL3O631iBzRKkzGwuaE3N3AbXg84m\n8IlUkIVTbqIhZXz1PKKBTA2eSFfvYVxuZR0ez/I0Z0VEq3UtTLtCiSwEW/rd\npxciNxH17hklJrQetyhNX/jnnpXwvf7ot5oF1orA02mpLZ9xsaBh8PXESO7/\no83+9pnIcTorwKUWz9Sj/cbV/naKN+5GaLHmncYvlwyjIkwXkSPG5ox2V4Pu\n3rwq\r\n=n+Sp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZzfET5HReT0JFSo92VWHhexK86Zy0AOhRJJgCAGP+bwIhAL/Z1YEDWTYmpLkYTlhRHUThfusK2zaFJ4tgRpYn4+vR"}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.3_1582861047372_0.9493094605688885"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.5.4-rc.2":{"name":"@wework/floormap.gl","version":"1.5.4-rc.2","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"a6317f3e748b8f29ead2fd7f8fb0555ff2787d95","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.5.4-rc.2","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-qz8cS/NZ3X4jTULRF9gaWfSH4lNgKaK8trXll5bLJD/ZFQaLLeJTSLzF2YPzKhezTsx47BlxVZlupKuNUt8AkA==","shasum":"b6f749aa522679cf9ab69f801788ab0eca858841","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.5.4-rc.2.tgz","fileCount":11,"unpackedSize":1206663,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZMLICRA9TVsSAnZWagAA/4YP/0HjSEm0jRjbV0zIAzLh\nl9SbfUXzYsIQ8CFUEV+mo4+c9bTaKkfsgpmH9KVZ7patoMd3a7f9sQoOnCdI\nDuWcs+dmlyWkfi/YMZXGxOXv5wOryU3i+GLLfaWZ/YLFrJjhNmmGgwPYweBW\nDwxkHkjQjZ6UDJ2wQ8NQ7tHyON1Sdz/ky3h3EjUXm4DvZXywIZYyHZPhBpwj\nLdu9IWhq2BMTBHnjjzylaTlBdmCF+5n0dusqdY0lVCQu29wACNcxoIhDK31f\nLRjAC9rtX2G0DZyDQqCqvRJ+vFOLJoj3lCUfI7ZsMmAwitk5QecgMtPdKq9T\nYWPs5GQ3HdNS+h+bgKsplLV7J4oBPL/ezuxwLFpECohq9WV2NmvbvTUHXSA6\nuB0+y6UoJjkJRIrjGlMF1NgE9aUYTXchzcdqsLTy+JhBI17y4r+xlmIHTV7/\nXRQoNdYlITKpxmzkkrwDOeTlbt9XGlfY/BfcgBceYsq0lqaDbuILND4sBm7y\n7cF7ze+oef5cmPyG9KpRMPKzsbHOEOjuyjw7MXv0Gy6mH5ggz6WluFyy9d8d\nQMa5ERiwQ9ianmHTvrkrOu9+qezdIeYPviE2py1hkxYIbeA0MxrAq61mrvq5\nB6fwRicHa2TU1K0qhvkjk1CcypBE9rac6regTdgnskV8hvxfWNM505S65F9r\niyw1\r\n=D5OC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+sSlQTHFjtK4ugTYI3BiR1pnGJxstDeUlKhjy9okqowIgKx1cDbNqBOS4z4G9uWXNgEu+IdzXhLn9sho0hXm2TV4="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@yahoo.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.5.4-rc.2_1583661768096_0.66736184907445"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.0":{"name":"@wework/floormap.gl","version":"1.6.0","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"7447de83c9090ba85ae9bf97be8bd82eb34eef32","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.6.0","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.19.0/node@v12.4.0+x64 (linux)","dist":{"integrity":"sha512-tvR3g2SW+Iu+GkU0XgcztqVZsmwN/LPtNhIc0Io5DHjr+YQrLSGxKQEL5foM/xdXZdMUIBePWWUDe/5jcIRAOA==","shasum":"ed0129b906c2fd9fce670561bba37dc5e337416d","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.6.0.tgz","fileCount":11,"unpackedSize":1207043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeat9XCRA9TVsSAnZWagAAeCQP/1cJ1t49cmCYL1xitklO\n2ZLLIS7onOw+sBUBV/PjVzm8bObEbm2ww1x6iXdIcZ5c3DeUuC3nW9bJPidw\n+HK2No+rKpQA64Chka3bDvB5aJUj7hfiQK/3vgFmR1BFTatQvce9bXFK6QSj\nBsGdXtYWmMhDEGpIpzibH+75e8Gnlnj/fCl181LkF3nzBo44RUG/PEqKLWcY\n5thicqjBXfcVkQCL+Kjm6pa3t2lGUr9srXNcA4CODsjw4UcYcx+L54OOkjcH\n+zSVgqsGQNJdY0d2aMgmHBTQD5m2MG9Eun3rs/3qoYgHnuqONRgx6mmAFa46\neuBtiWuUcu64pU1kRkZBxb/k7UvhmbB0fZcu6emu7AWf0KYJm8ZBPaBL3LfD\nrCCkwzltsa3KLdqhGRODd3LazMDVDEsR7uQeOL2glBXBJ0LfO96kBFRLI+xu\npa/naRsM0AeIF84R+tZFMsR3ftmIG7J7PMS5/vqmA17lSBNhrSBP/sXMAAdp\n1ZIEejOH3cGDPv8XQRK4HNBDVUsOTCeHWXdL+7F3XOkUCvmarbKPs5/OCu51\nCgsdwLUp8Nx3YdQIvA0oDgyakz0rdycYNygksxxmk2bij1ZsocpduAVQvQhW\nov9djOIAZraazfOKP2ruJes1C+k1fnhj8eoBBSO1kambXZvrYeXJXDH4hGhz\nxTO9\r\n=BfPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3gkAK94/7d8OLX/jyaBjDMy0bVX2+eIDgGAzIS8z3RwIgez4byHe3i5bBkJhxdnXmA6TpKfiyitasVFGgOuQ+9pE="}]},"maintainers":[{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"alexbryan01@gmail.com","name":"alexsbryan"},{"email":"andrew.toelle@wework.com","name":"atoelle"},{"email":"brian.mcgough@wework.com","name":"bmcgough-wework"},{"email":"cmugla@gmail.com","name":"cmugla"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"gilad.bar@wework.com","name":"giladbar"},{"email":"glosch00@gmail.com","name":"glosch"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"guillaume.vachon@gmail.com","name":"gvachon"},{"email":"hamid.aghdaee@gmail.com","name":"hamidagh"},{"email":"james.etienne@waltzapp.com","name":"james.etienne"},{"email":"jasonnoahchoi@gmail.com","name":"jasonnoahchoi"},{"email":"kamal.azougagh@gmail.com","name":"kamal.azougagh"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kevenboo+npm@pm.me","name":"kevenboo"},{"email":"khaled.murywed@wework.com","name":"khalmur"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"vamsee.lakamsani@wework.com","name":"lakamsani"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"loay.gewily@wework.com","name":"loay"},{"email":"max@carrotcreative.com","name":"maxerogers"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"mysterlune@gmail.com","name":"mysterlune"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.harrison2@wework.com","name":"nharrison"},{"email":"pshin518@gmail.com","name":"pattishin"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"ben.miller4@wework.com","name":"thebenmiller"},{"email":"timothy.shi@wework.com","name":"timshiwework"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"},{"email":"yon.bergman@wework.com","name":"yonbergmanww"}],"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.6.0_1584062295239_0.9151403672382679"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.1.0":{"name":"@wework/floormap.gl","version":"2.1.0","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"58ace0382564024ecbb4e1bf8342469a18c84448","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@2.1.0","_nodeVersion":"12.16.2","_npmVersion":"lerna/3.22.1/node@v12.16.2+x64 (darwin)","dist":{"integrity":"sha512-iDa+viQpVUCtJ0uZtyZAWIZb4CsyQoYTK3pRhBSJYnuDohJOiRHevbSKOSNRH1bp5ThlowA/rOAFvDmorEh7pA==","shasum":"7f7eebfd1b8a6278b892bf84f768af82bf44a390","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-2.1.0.tgz","fileCount":11,"unpackedSize":1208918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUHSvCRA9TVsSAnZWagAAmIMP/253Vt5k56GSabgAzI/B\nhbzc23nGtAmX/gcfCFLASn6RKcfQKIhcxmCmSq1wH6LOcAmKrv5BujmCiyw7\nUsaasgVh2BJ1ljlU7NviRi27uUziwLOEh/xs4Vn83mqwzRMCyvj/JMHZDW9R\nsSfOSW5NlddSHMmzuox6JatiChRY060laut5UhPLYWA/Q2Kb+ayegggq51v3\nL96QR14Vtwoc4wyBdBeM8ObiNGH/bsjtCbhpYEyWkVRm9hPOnkpxgIs3xTgE\nKh+E76a5g6+5qh248zdsgmJ6w39S+iDRJrXVNWlriifICkRmhi7prMV8prt/\nb80/tfuExojisQ6+VjjrMOHzPLP1TLWqcAT9h8claEpdCbRbEdhHC0A97W3l\nuryoyG/O5QJ3y0HhwbFcZoKc9v8wQG9aYBNoRvIDY9PhKCo983/sBU8EMj4G\nfALdpGc3OXqf93S3Lk/CMwaEde4yP7GbNHo9/7aZm2lUPO+jKDpobcX7jJR0\nzz4bzAvok605X7hPLqE/AGF7oyfeTivCCH5FyXEX/9irTpIhoCT4uCH2xWIH\n9G5qq+dbtZvCdMColZRJFocwZ3Kb8TA+H6ZXBGibf7jGpszD/qeSbQXcXH7v\nao6jkRzs9s1blhwpswQqO96/9FpicqvpdG/ae26tvw5aRZqeycCQ0A4jDmVb\n8aGQ\r\n=ifsz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxowiICpl0l1LG/scoCnm0ZU0rCyLj5LIo2FGUhgW+2AiBUY6RbLMWn6z06VBmpV3jzib8zkMCrIRO4WVGYN+fEBg=="}]},"maintainers":[{"email":"alexander.cartmell@wework.com","name":"acartmell"},{"email":"aishwarya.parthasarathy@wework.com","name":"aishwaryap"},{"email":"alex.beltran@wework.com","name":"alex.beltran.we"},{"email":"austin.hammer@wework.com","name":"austinhammerwework"},{"email":"barak.cohen@wework.com","name":"barakwework"},{"email":"dan.behrman@wework.com","name":"dbehrman"},{"email":"me@djtarazona.com","name":"djtarazona"},{"email":"hello@goliatone.com","name":"goliatone"},{"email":"jirat.ki@wework.com","name":"jiratki-we"},{"email":"kconst@gmail.com","name":"kconst"},{"email":"kenya.stewart2@wework.com","name":"kenyav"},{"email":"khomitskyi.o@gmail.com","name":"kh0st"},{"email":"kobi.meirson@wework.com","name":"kobimww"},{"email":"leo.duquesnel@wework.com","name":"leoduquesnel"},{"email":"liormb@gmail.com","name":"liormb"},{"email":"tekarimegraesh@gmail.com","name":"minareth"},{"email":"morgan.plant@wework.com","name":"morganwework"},{"email":"mryave@gmail.com","name":"mryave"},{"email":"codreanu.narcisa@yahoo.com","name":"narcisacodreanu"},{"email":"nicole.famulare@wework.com","name":"nicole-wework"},{"email":"shiwen.phan@wework.com","name":"phanshiwen"},{"email":"roderick.buenviaje@wework.com","name":"rbuenviaje"},{"email":"richard.soni@wework.com","name":"richsoni-ww"},{"email":"smartang@gmail.com","name":"smartang"},{"email":"r.a.quinones@gmail.com","name":"tdurd3n"},{"email":"tyler.elko@wework.com","name":"telkowework"},{"email":"tanya.trinkle@wework.com","name":"ttrinkle"},{"email":"v.sapovskiy@gmail.com","name":"vadim_sapovsky"},{"email":"tech-admin@wework.com","name":"wework-dev"},{"email":"digital-growth-eng@wework.com","name":"wework-growth"}],"_npmUser":{"name":"jiratki-we","email":"jirat.ki@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_2.1.0_1599108270679_0.5292916113177073"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"1.6.1-rc.82":{"name":"@wework/floormap.gl","version":"1.6.1-rc.82","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint","prepare":"tsdx build"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"d968d60c5bbcb6921720ce26c904f2979352389b","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@1.6.1-rc.82","_nodeVersion":"12.13.1","_npmVersion":"lerna/3.22.1/node@v12.13.1+x64 (darwin)","dist":{"integrity":"sha512-jkZ1lP6weOqo7ITBB3jZjf+2gKSAQWsUevB7EOFKoJG45vs1ko/YrHCo1oez+n98dbo8CdUzhvZcOA2QQkfjDQ==","shasum":"9e14dc526a2c91a76915692de3743b09195160f4","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-1.6.1-rc.82.tgz","fileCount":11,"unpackedSize":1207057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfln6BCRA9TVsSAnZWagAA7NMP/jSxdYV3PNPsjoFeb1hQ\nnLoj5DiZULp4m7EQbrhUGYRiO2B8C398tVlO/7oRCXB9+mZvJGBkzm9qlM6h\nypiWkcb1LYxCkl3TBMh8nBodJEIQYBNWpTnXapF7fyZyME/GV7rBuNSS1gb7\nEKiKGpUGOJDQTBF46xL3cSta/6UuRXVw9dj0PsE+qKV/EyKnC1arSbyHGsp5\nGyTX41xqjUlm/0arFOQqYuNERn9oD97qH/+/BjZ9i9k9o+kCesj1ecikqlY6\nqZr6xHuV0Tk2R6qiAWgAy3w5cIwaLcYgjiYQDeJqX+IhjDAFsQUItTh1iH95\nLod4/ewrzJlMsCKCQAwDZDSBurF7hngr3n4VLh14ZkVQ7SVdhvdWB6VzkZeD\n20BFUN5S05q6vlsjJqLgb8b64gWiSrRVscOgoze2OT6VJK9ewJaUotsjJgkc\nD9uhbDCGS43bVKUZnCRXMy79+6sa3+g4wM4HXt12mM7/X6YvkQhdhfQHErs/\nHrwo61Q+wYGUVNH87FrQMvGlwD8gwnzyk4Ir5o1MpvWjSB4KF/Ho9t0qxOt4\n8lr1YrAUg6wJxUp1M57VsQgJ/lsqmBS6wvo8DtCj0sVV+k/EpC1MJSUAFbYt\n8ehthBOQDJ/ZHZ3DpFEWPSzlYRVdutKgbJLX1n6CZFqJC0th0EXpcfETPJ7U\na6sW\r\n=VCFd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWUkQ3Nr5xR8k18+n4KSCE0KTykmQklkVbANdRFcSnHgIhAJZYPcEaY6lMY1caPviFFl9avGEIIvDEvz75hBaqMJKg"}]},"maintainers":[{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_1.6.1-rc.82_1603698304872_0.3293652389620312"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.5.1-rc.5":{"name":"@wework/floormap.gl","version":"2.5.1-rc.5","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"f24f5908c37f9e65f2637d539c1689ccbae6bd06","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@2.5.1-rc.5","_nodeVersion":"12.4.0","_npmVersion":"lerna/3.22.1/node@v12.4.0+x64 (darwin)","dist":{"integrity":"sha512-n2rG8jzcYpJqfR7XTTKq+WfR/OtMhevg1onhhp8jh8HBX2r1UIN7Yl085sT2ZK/x9nHumxWqgvJmTFMx23Tqmw==","shasum":"ce85b3586f3f5952160720ef7de998c421117ec7","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-2.5.1-rc.5.tgz","fileCount":11,"unpackedSize":1208931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs1x7CRA9TVsSAnZWagAAXYcP/3+5xu3g31+0t6xtjpQb\ngIZALSLI/cTv6nq0MZMLhBKFOsR3fB9+V2lD7nBL8/w3URPtK3K+uKHhr3HH\nB5e4gNN57b1W1wCbz9SyN3gbDkUIy6iqWxIMphGz7hRVz0wQZoZCq1Rj0tDm\nfbhm5ij1zVNa6KhvCJAzt6qVRfmRxqRROSjYQ/0ol/sb80g4pu3uOPMGeWko\nYRfk31EdwwlUZtfZyOTnbIpEx998OUwabwxGFmhd+VgVL26HOHaH3S/zYToJ\nI9r7r1+Jzz8TBlx/eXwBe/N8ZmHsKUv0d6D7HSiSApGus8Jxmg78RPmPILxx\nZDeNn0Ac3GLzdsDRm720PwZ+nDksRXkVBgBK3zLTE2Ij63r0vGtpVIaerFCc\nSBH+eSJvnB/kA7bPOoMDvlrmm4WUu9EcjQg3zj1RfsTU1abjq84IwbF+lFUG\nM9kPaQu2IG92FD/hPUaEnmGc5XJuel0W2D5z6mnD5tH1SvcJIVO3TL2ptMyQ\nB9tY/U/+WCMzSRAUs8CarrVmT/QzeR8/5SkKo37Gjg6Quu78BGTq2IiV1Dpm\nTD7xTsiy5QURK4pLrxq4afSNr7lJjFYEvLZLfeQVuBkk+8N2iKIEMz4p01jH\nbPrmRlxzeTQ9pALKUjfkDwAEK13cDx9PHnK23xRzG+Djrf2myw0/vh6vZmWy\nubPx\r\n=omAC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZ2LsJNnbXaf1QVRsFHZzEQD9GHXfcZOFniNY1sgLw4AiB8pubwqmlGIG77CTCtHDPLeXORJJe7lLNc0f3VezTADg=="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_2.5.1-rc.5_1605590139275_0.7886491383217398"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.6.2-rc.0":{"name":"@wework/floormap.gl","version":"2.6.2-rc.0","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"c8b561c53d1fa4abd70875d5299877e816f7da59","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@2.6.2-rc.0","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (darwin)","dist":{"integrity":"sha512-ZKKS9/6JDp7NurSvqchb19YnCqOOiJL5/f61L4Nu8431LK3DPfcNTfjF2O2KpK5+320tx1umTmtWqcA9FeyXqQ==","shasum":"82e8a065f61a70138fe764ba162b688317aeeedc","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-2.6.2-rc.0.tgz","fileCount":4,"unpackedSize":40067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0bYICRA9TVsSAnZWagAAX9gP/jzhI5TXEUw7ffHlZKlX\nQDQZCosYBydhkvAhR8f5AY0arHVCfV0awMR5OadR/O3CoSNFM35bLZAUkkX3\n6A5Q5+DdSZuQc0rkJ6IAz4G2J9wwZiHRTJ1MF8tRRCujTsBBYkhvlSepGve9\n9BxypOHdLPZhdUciWr7fDFYssfoC/yk7j50XdpCwMXaZgCdQyUiChwsWQeTC\nyV72UKX0Q/pSotPX5UC9Al6XpxgrxrSn/joNF3OGjaB2kWRo/E0R4Ezzh2D9\nMLRbsu+09vRlDlyT3E4hLiyz9O2sSimYfHkZswDWEfolSJvcQyn64wSyhFsq\nRJuDFc7Rzb5/l+dShZTs6LUHluTLjed9kLki0FRteOL5yRzs4UFOm96fomHb\n6skcmz7ACVPET7TDW6EfOfOJhFf45v2DaWcqRsaMOoPET0rTkPmuUGwY9WY3\nGzYc+L5mTwOoxvGWhAnOcIjsnrHfOhmfxCjaHXylOIwShOW4MXopE/enkOL3\nJnhTDLs6jijHlnWMREX7npWogaSdc0Xxmxush8u2JNNZtxOjhd6dk+gy/f+Y\ncS1RXfEpk9wRssiAsDP7YTCd2Pfy+u+Snphk30N1HK47ebUvdIxkIYsd1Mgj\nBIlbvQ/LFyFQoxK4nptsHYQeTVABd66okCMGz2jV+DO4L6iOyrNkCoxPNOSM\nrwC+\r\n=xJ+4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA7059fQQKIBTqHjRhwQ3gT+VBG4Gxv/XA8yYySR1Rq1AiEA6oNZEoItAWhhno44TEYuJ7Zc/LzjJ0DVZ1VqycG2OYs="}]},"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"maintainers":[{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_2.6.2-rc.0_1607579144095_0.3193853492690639"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.6.2-rc.1":{"name":"@wework/floormap.gl","version":"2.6.2-rc.1","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"5d16447c57441c0676740c03b7aa9934a30ef6a7","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@2.6.2-rc.1","_nodeVersion":"12.20.0","_npmVersion":"lerna/3.22.1/node@v12.20.0+x64 (darwin)","dist":{"integrity":"sha512-uhFKx3C/uD8JRbSukrxTKW+dSAsMBpBdDlfZcBEraGYqmkF7ef6sv0HMfJjJPcokqlybCTIk0tjFP+aLa5fIBQ==","shasum":"9375a3357c9c455780944c9321c9589a5a06fb4a","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-2.6.2-rc.1.tgz","fileCount":11,"unpackedSize":1210442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0glgCRA9TVsSAnZWagAAueYP/1bk7tUZTM0Vk+N08PMu\nFMp3UqFs7EgLt48CaHS+qWCON0W+DNuWtS6dJyDTfL0wylu9jtiDKyqJ0BJm\nO+M3zwgsRkxbxDxpqRzomRaa2KVJdA3ToJ4KzPFS2Yt3LVtHkEUFKouU2WYF\nv7yv4/YCx/x1Bs6O9DLGO/z7MaA8QvDn2E3Kj+1UmQMA5MPC9pgBHhp/NY3C\nnEFh1D/NdaUgecIq7Y/wGgrBd2iHZOkfKpug9I+XPtnLtiE07cMBFSgj1m6U\nBEM6I9am5xhU/g0HY3/eZLZzb+YT3Hen1V9psYxlPorXV34VrbVCOSpguAQu\ndwfAQobfb7ksKA4D2p3U5f10G4dIvVnNMEe535wcVg0Ma8z3lAZDFglH/gyo\n2lvRkiAuvdai34IHV2cfqk+J8J/EsC2OvVjO2RTTN81wUgUNKf3LIwj6IzZc\nrRQkaa7eJjYKfVYpkdrueBqyPNFiN/NucGUeU3/oSVeJ5Imiuu/TlHarOAJG\n4kP7AtoD2CpfYYyJVmH2D8dfeFgLRHii+B0qefAxYIM3evNi1vS/xpqO5T/N\nSao5nVoxDqqSISIfu7C681mTNaOy2i+LRCTM9g501xsk437JpwOSxsYKQRjE\nkGRrtew23XHE8HFLAQPw75jDWzhElFOcdj5R4yMPHpKVUfqQWHcWNFl1cGlQ\nLkVT\r\n=rbMR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHrK5eYnKnHZ8188e0qE3wglZa9QkpTy39h5HuUhhWwTAiEA/c0bYfKNSF5fABkYGpIPhcKd0wnyWV3/RLAsen6O+cA="}]},"_npmUser":{"name":"monc3f","email":"moncif.loukili@wework.com"},"directories":{},"maintainers":[{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"sing.yiu","email":"sing.yiu@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"monc3f","email":"moncif.loukili@wework.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"romanswework","email":"roman.kameniev@wework.com"},{"name":"ttrinkle","email":"tanya.trinkle@wework.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"vadim_sapovsky","email":"v.sapovskiy@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"dbehrman","email":"dan.behrman@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"alex.beltran.we","email":"alex.beltran@wework.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"kconst","email":"kconst@gmail.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"richsoni-ww","email":"richard.soni@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_2.6.2-rc.1_1607600479536_0.3956962064908238"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.25.2":{"name":"@wework/floormap.gl","version":"2.25.2","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"f6560f401ef7fffb7910400fe5259b6744e59f32","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@2.25.2","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-033wma3ebqFWSnQTmS/IxVhG7Ndw/0izhDZhqhJXgMhYurtEAifsW0hXSdNNNqdNY05jJbwPLHu4LhlUGkNxTw==","shasum":"2a89fdaad3ab7ec011201339a4517304c07cefd0","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-2.25.2.tgz","fileCount":11,"unpackedSize":1211118,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa84A4sp1CjHFvQPw1KiZeqB3tKzKAYUrrrGjpOElZIAIhAO3Z7YbnlADI4ODVb3CMAtp+tfmqHLeLOIsMZRglzR6N"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_2.25.2_1636727300428_0.38159165858098243"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.25.5":{"name":"@wework/floormap.gl","version":"2.25.5","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"2de063b964b64589fe051e05d473ac8d359ea3b3","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@2.25.5","_nodeVersion":"12.17.0","_npmVersion":"lerna/3.22.1/node@v12.17.0+x64 (darwin)","dist":{"integrity":"sha512-Fc7yIayFRMIFq7RtjEvA105y9DFbBMDOLCo4l5Y8aBHSGiRNrIrM1GVyIaLKhN4pIjqS7KmEsOozMAZgBmcuWQ==","shasum":"53f61a1f2e24c6f670b0d246682674ab7f4ae83e","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-2.25.5.tgz","fileCount":11,"unpackedSize":1211279,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlyRPCRA9TVsSAnZWagAAjcMP/iryD3wBQuogaNStrOCl\nRaL8tDvoClKT9+n/G5U5wWuufQqt3MgTRQ9i8L3VZpGueM+rnMALrGQGwcgx\nufTlMEzmhz8bV668GyX9ta/FHHoUhT39QF73X4Xv71aM+63h4J6SwYyYo2c2\n6XycTLJZhqivOmkuxRYlVmrdMjP1NKti9OCLFnpGxToxoSFO+xb2gDlbIAtR\nCSEBg/zva+CCoYl6aCauvpsPATixag2+jRiZWTadLZDx5TY1Eq34AoQBCOvP\nEJkbmJZjOq8bpcc+CUpO+XZD4VnYq2ZD3HsrL+NjFdbHTidXail1zOtGjSoG\n0lWeiJdxG3QG/DyjVtzIZ3yYmBPPaf89wiW7WdMPGspz4c/uZbuJXKBCgVDH\nL3SWuxXMa4394CV/6VZDUtimEieOUMAlmH6i5E6Wq9PlWG8A4bJqDT9iRBq5\ndQSmpVDW5esOLy5k0fhkI288y57YVeAKXNRcNOV8K6P6AZaVO10mq0ToOXuO\nDyF56LVJhPtYRwQXQ95F+hMl3z4/HfGbssJZIjSVuOszMXSrNYtKb0pRNuqR\nR2iFG/SRmY01QfYwnMe8u3xfCRh82UiEUCBrp9NI6ItYq49EaWu7KtrmF+SM\nHDT8UQNUq700zQhZXwWcwl2snH3GNoB7hug41fUUeanC3FmkYE9Kq9kTqoPs\n3/YT\r\n=bNYc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1VWXXSeMZmgskVz9wbYlBspeFj8/3+pdWM21405eSngIhAMiKRxGXkNfk1E/5fMUlkXPTpFR8pGHfMQkR4JEYjQQI"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_2.25.5_1637295183088_0.00962213068318385"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.26.0":{"name":"@wework/floormap.gl","version":"2.26.0","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"9653334d68ce3fe46b261a57054930961e6ea90b","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@2.26.0","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-02A8MWYP68U5wfK+NG6OPXrJqqaRIxC82GLBIkR1cPYGFgQIbFDNK1qpG/pdbZr5NfxhaqHNP/y8CCaL35GHZw==","shasum":"eff39b2aa0109789abfa14f690c208f09351808c","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-2.26.0.tgz","fileCount":11,"unpackedSize":1211439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhngEeCRA9TVsSAnZWagAAvzUP/3pQxeTZNP6QfotjJ8fx\n7I+iC9trc391WSkYqWfAzFIJHzC3akf1j055AjboAO04IbVA13Pb6rldCpTd\nHdlb5uwhFtyI9C5thXCMfAcxogThKrajCfqNCc3IPRbupNja6DPCa8a/0U09\nAWkTX5ZzHu5rBRl5qsNwcl7gLGw4itTOXNklgyhMg7WciqZ0YEGPZQMfQexa\n792o4prRGEAsZ15f2ceiI2U6IA4F+LkUPk3+b6OFqfK1yHMbX6PIJnEaCLWE\nL2QuThN9EVksMRMaRMCSKiJTOZB2Tvd9Ghcbqdg0eFS4yOb25UtzJ8yKwc4e\n0vTTTlyb4mH6nclUMzNf6PTYLpNGDJ53/tZxWuenQLRaFPN93MSBCI8VG/6s\nYfXFTK8Tw/VJ763H39zoAmE5qPLA09HpJtNUUfNUJw6dpGUJWrMgH5bpbZw/\na+jreLZLTXG8RWaD2ADVN37oJ0OR4oJXklCq5KphpO10iPRoCQi5YCJ6ybme\nRHQ/dVia2QL/VyfqkUTtkWshELRTnMlUbMTE6snNNNVfLQFsIeNqlCQF8jLK\nusuFC9sgYgf6OuaVt3BFrUsET57XFGG2ZQUuLi7r8/xUkTjrAovMxBXGKQ6S\nWr9d78daq4Eh0NdUSlNkB3Uxm5TeuPM094dpCMJ9cjrfUoAjhHoOb2CwaME5\nqHoA\r\n=EwUG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQ3BMsaM0Xg4xBYqZnmT3FbVHGNl58ISpFu5SufdW0wAiAPlTGZH9xCCdv5B8nHZtRpuzSzTuKN3ktvEbp+NJwG3w=="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_2.26.0_1637744926697_0.47015292699459366"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"2.28.0":{"name":"@wework/floormap.gl","version":"2.28.0","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"ade8663f05c6c863b3ffbcf3f238be030e0e4a49","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@2.28.0","_nodeVersion":"12.14.0","_npmVersion":"lerna/3.22.1/node@v12.14.0+x64 (darwin)","dist":{"integrity":"sha512-m/O7TeW/bEL375+R+5Q1LYQspvLMLODSCEZk1c0iIKRQCNZZBQAEiGZMHH+tb2hHG6Ap0ds/ZibB5sGjhzz3Sg==","shasum":"de7eb3d23ac5e612b7dfe287730580e2f6c43676","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-2.28.0.tgz","fileCount":11,"unpackedSize":1211599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqObMCRA9TVsSAnZWagAAFlcP/3uOUDJ88OQDB2EETvXS\nph+8C3Z8TgMi9GSvXI9ary0F75pXMLtkKXDfLa69UcaHHEspBLavrozyU6lm\nHZAYsvTJlCQXYEY99Fm5be1PDK8RDBFfuJnTIyoAKteLdZ4ib8vmCS6t8FSs\nxv0QKVxnsRd7sJ09+q0g6+lZ4T5/XZrsmKLMYSexrMrgHsegrISXZhpcLSil\nrSVR0jk2Tk55sTIqNCoth4KGX9X/otDx0L5K93gWSOds+ttDDYDFVni+XZi0\npDNqeVKdlOMS75ODGe8D2E798N0nehfqZdxnhl3/RkosiVeP9aoD9T8fHkQL\npdjx1o+sFK5T2a7lTy6WWrwfEUexYJvYBKJoE7ciZfFsA0CQITVnIxvOZz3p\nAgNoN5L/mER9qlsbSBZvuGmNfMMLyD5kK81/P4WaQ01O80xLpjOQ1aVGrDO6\nqXFzWV3N5C7i8AwelOKeWLCYu+TqN4A5NGIbi77HRdQZdIgMhBEVpbzGCKMw\nA9omPh58t27N1T2Rv3CA8IoHJok5bXxeF6GhCXdu6I3oKFv+tkjDwUEeu+Gx\naX2Sa6WaM/e6DQFJJCyjDUYPSxUT8Pc92ayI1oAiLwTWnBzr5a+yvDtN47kL\n0J56mp40YJujMM1H7rp1lSrtlnOgOixfs0D9265v5CfnCUtOSuPKgBAR33SY\nMQw2\r\n=NaPu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoVP5OROjejPe+WF97LFFY38/Vbb7XS2NbqNr8aOS6SAIgULvhIV1Kh0DV2S1TbelwnrM3LowlG+hKWu0JP/S33p0="}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"tdurd3n","email":"r.a.quinones@gmail.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_2.28.0_1638459084405_0.14760089270211396"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.0.0":{"name":"@wework/floormap.gl","version":"3.0.0","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"3fcf2ae412662eadd5b88e8786656a16eb3fd001","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@3.0.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-Qm07xoMbakgKhjNWNEF/0Y+JWMDElYjibQecUePcsflSybft3tcgy7+kMaYZ+FrYz4/zhdGn0U5wSD+GuaXERQ==","shasum":"b05325864ffcd702f8826446a9346f9f33851900","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-3.0.0.tgz","fileCount":11,"unpackedSize":1211757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA5Y+CRA9TVsSAnZWagAAMoUP/jIMrYBOW2KljOmWp7jb\n9JSskqWc4SsLC+el4leIx/mrnAcp1q3/92VBYiMBKC84LHkUzvoziJjkrt3h\niOGzMhjZfB9EV2mOLuZHtrzpRAXxpp8yWtoKruUmottfaFlrgFB1HAIVj2xm\nOYej3FR/XQmqhYq6auEQGF3Gzfh3y91hC6YMWsm2MIz+sPQO2DegGS5JBJwc\nLCg6SM2++HoCRsdA34z9kY5YKivwI4nzyTN28Qcu93csJ9Sj10L6SZ+9cmvU\n8R+cqfInTc/JRla4tCB+gRNtE4/YZIrC8qnU8VK+xTpFFt54eBErkDVtiPjZ\n6rET7yEhhz5vxYMfV++wWMHbLkkZstBVfb5FYa4/eH+0YfpTqN2uOCbG3QzF\nlZZTKx1yxmOiwzINSZEdxFlLPrx2+I7r5KLAeROlqm3j9mq7FLUl3rYHFufw\ndg8JD1/WWvzEscShAk4SZCfwU1C/+fkTkoyiLinLvJrHfrrzRN6ixyITMHKj\nPI9KfpbQCrKUe98g9NoC6NHwCQL7ud/dQzgoslqkM0Tn/KSCqA/JmqShqc8k\n3dOWRz136t5JZkHYoC9NP2NfQUiR9uQZTNQcpECc678qEyhnIIdHiaDGohLk\nBZ+ysY6JESHmJSh5ulSyKwnTESwjMfCZfgMlzvl4d18ncz91shjXylmcQtAX\ngHOQ\r\n=p/fz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDwlopH471wJk0kmRNZJPITJ6X+GX9teFUhit/qH6tjgIhAOIM2m5eL9eBn2TMv+1ynjz/Czro1/Q67LbC/46h1wPK"}]},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_3.0.0_1644402238045_0.8469244775666982"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.7.7":{"name":"@wework/floormap.gl","version":"3.7.7","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"6b2859764ee9c3ef248aacc15eed75afa576d6f7","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@3.7.7","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-i0XAqOxJHUquN+b6lLb7h1ZKZNmklwIWBzdCWpYg5I+l9y1UXlH0r+IJjc23PDSp+HYzvcMJlGRCiYPBVZs3ZQ==","shasum":"73eb2524d1b78dd086f60f26bdf22b0d19b3baed","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-3.7.7.tgz","fileCount":11,"unpackedSize":1211915,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQmwWBFlmm42yZZfF7a6BoOgW/S2Njpij88p6/fUVPcQIgQAk4TcJOnlUXFqOzQZGdodfcmI//JuoCKuPYgirIP28="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixq8FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWgQ/+K/PQjMHC25qR+z4NCSe33sEGBW+hurljDWUxLhbL+wsBFqEr\r\nuqZeQUr2K3NH7gX5R5A9fgvb7w4G+66F5/RZthQdURLPIxEz9ydS8B98+CI/\r\nCnChJgEoH5kXCnMdk5pWpMTEHbwpxpKWSzcsYqWWqa76kl8yz9Bwn2RomBhz\r\n/wYJmro2zlV/fuFF1GALLKTIrOYm8ikkD5cKKGVc05Ml4sjs6RZSHXmOMZ90\r\nlcGf1Rlj8wY5R1QzKR3gCDT4h8BI6IEUKVQmuftseqx/49SzXbXQIdwEMRHP\r\nNPlFZmBTMNvu+yLEWhy4OqJ/GLPmzRoQllSy+yrEfXe+dsASK5rNnPlnCt6q\r\nM7RZ8Qsou47tS9W0Fcbanq+sSFu0MelexckqibQyQXU5FSHJyrhenUGtkioQ\r\nHuFuZ4I11DdH8KZbjm76tjRi4r+/8AD1IWuuSL8My1SIKhIuixHdSSzXf9BB\r\nznJobZ1dnwLn0f4gl+2VnaUWG20JCI5LlfWvxGBwVyg8PzQXVoigXNK0i4T5\r\nuxIkH8vLVftVgAY1hrwfwgnhTXw7qFpyDZuf4+NoGmrVv0geZO4h1Rg8jyxU\r\n5i623J6F3lNjiy9jIQ+YRwm7uOw0B01zECedAvDotayU+RlymUMct4JO0voI\r\nHx9dqLXmYG+KG3W9lpy0GwpdaOMmE7tWm9o=\r\n=33O0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"alexander.cartmell@wework.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_3.7.7_1657188101437_0.07084699636325009"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."},"3.13.2":{"name":"@wework/floormap.gl","version":"3.13.2","main":"dist/index.js","module":"dist/floormap-gl.esm.js","typings":"dist/index.d.ts","license":"WeWork","scripts":{"clean":"rimraf dist es lib","demo":"cd examples/demo && yarn start","prestart:demo":"cd examples/demo && yarn","start:demo":"concurrently \"npm:dev\" \"npm:demo\"","jsdoc":"jsdoc -r src/ --readme ./README.md -d docs -t node_modules/minami","dev":"tsdx watch --verbose","start":"tsdx watch","build":"tsdx build","test":"tsdx test","lint":"tsdx lint"},"devDependencies":{"concurrently":"^5.0.0","jsdoc":"^3.5.5","minami":"^1.2.3","rimraf":"^2.6.2"},"dependencies":{"d3-selection":"^1.3.2","d3-zoom":"^1.7.3","lodash.get":"^4.4.2","lodash.has":"^4.5.2","parameter":"^3.5.0","three":"0.100.0","three-line-2d":"^1.1.6","three.texttexture":"19.0.0"},"gitHead":"8406c65ae007c6d68e1dd3716b63781073b9eed6","readme":"# floormap.gl\n\n[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop)\n[](https://coveralls.io/github/WeConnect/floormap.gl)\n\nA javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.\n\n- [Get Started](#Get-Started)\n- [Example usage in HTML](#Example-usage-in-HTML)\n- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)\n- [Sample Applications](#Sample-Applications)\n- [Creating a new Renderer](#Creating-a-new-Renderer)\n- [List of APIs in floormap.gl](#list-of-apis-in-floormap-gl)\n- [Events](#Events)\n- [RenderObjects](#RenderObjects)\n\n# Get Started\n\n### Clone the project\n\n```\ngit clone git@github.com:WeConnect/floormap.gl.git\ncd floormap.gl\n```\n\n### Install dependencies\n\n```\nyarn install\n```\n\n> Note: For those users who encounters error like `https://registry.yarnpkg.com/@wework%2ffloormap-utils: Not found` after this step, he or she may need to `yarn login` first to the wework npm registry and then `yarn install` again. Alternatively, you can manually build and link the [floormap-utils](https://github.com/WeConnect/floormap-utils) library.\n\n### Building the library\n\n```\nyarn build\n```\n\nA `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files\n\n> Note: In order to use this floormap.gl library in your own node application, you may `yarn link` first and it will register `@wework/floormap.gl` in your local development. Then `yarn link '@wework/floormap.gl'` in your node application\n\n# Example usage in HTML\n\n```javascript\n\n\n\n \n \n \n \n\n- [Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Floormap/index.jsx) : example of rendering a floormap\n\n\n\n
\n\n- [Memory Test](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Memtest/index.jsx) : testing the memory leak of this library\n\n\n\n
\n\n- [Streaming](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Streaming/index.jsx) : example of rendering the scene by using streaming data\n\n\n\n
\n\n- [Wayfinding](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Wayfinding/index.jsx) : example of rendering line and points in a floormap\n\n\n\n
\n\n- [Instancing](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/Instancing/index.jsx) : example of using instancing rendering method to draw chairs and tables\n\n\n\n
\n\n- [Multiple Floormap](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleFloormap/index.jsx) : example of renderering multiple floormap in a single renderer\n\n\n\n
\n\n- [Multiple Renderer](https://github.com/WeConnect/floormap.gl/blob/develop/examples/demo/src/MultipleRenderer/index.jsx) : example of using multiple renderers in a single application\n\n\n\n
\n\n---\n\n# Creating a new Renderer\n\n```javascript\nimport FloorMapGL from '@wework/floormap.gl'\n\nvar renderer = new FloorMapGL({\n target: domElement,\n size: {\n width: 720,\n height: 480\n },\n backgroundColor: 'black',\n antialias: true,\n pixelRatio: 2,\n camera: {\n maxPolarAngle: 90,\n enableRotate: true,\n zoomLevel: 1\n },\n groundPlane: true\n})\n```\n\n| Name | Type | Description |\n| --------------- | ----------------------------- | -------------------------------------------------------------------- |\n| target | object | domElement, it is `required` |\n| size | [sizeObject](#sizeObject) | window size of the renderer |\n| backgroundColor | string | background color of the renderer, default is `'black'` |\n| antialias | boolean | Options to smooth the jagged line, default is `true` |\n| pixelRatio | number | The rendering resolution, default is `2` |\n| camera | [cameraObject](#cameraObject) | camera settings |\n| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |\n\n##### sizeObject\n\n| Name | Type | Description |\n| ------ | ------ | ------------------------------------------------------ |\n| width | number | the width of the renderer window, by default is `700` |\n| height | number | the height of the renderer window, by default is `400` |\n\n##### cameraObject\n\n| Name | Type | Description |\n| ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| zoomLevel | number | zoom level of the camera view, default is `1` |\n| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |\n| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90`. If you set it to `0` it will disable the camera to rotate in 3D view |\n\n# List of APIs in floormap.gl\n\n- [draw](#draw)\n- [updateWindowDimension](#updateWindowDimension)\n- [getIdsByTags](#getIdsByTags)\n- [fitContent](#fitContent)\n- [getZoom](#getZoom)\n- [setZoom](#setZoom)\n- [getCenter](#getCenter)\n- [getRenderObject](#getRenderObject)\n- [setCameraViewPoint](#setCameraViewPoint)\n- [setCameraViewAngle](#setCameraViewAngle)\n- [setMaxCameraViewAngle](#setMaxCameraViewAngle)\n- [createInstancedMesh](#createInstancedMesh)\n- [addToInstancedMesh](#addToInstancedMesh)\n- [drawInstancedMesh](#drawInstancedMesh)\n- [removeInstancedMesh](#removeInstancedMesh)\n- [addEventListener](#addEventListener)\n- [removeEventListener](#removeEventListener)\n- [removeAllEventListeners](#removeAllEventListeners)\n- [remove](#remove)\n- [removeAll](#removeAll)\n\n### draw\n\nDraw the list of renderObjects onto the screen\n\n`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`\n\n| Parameters | Type | Description |\n| ----------------- | -------- | ---------------------------------------------------------------------------- |\n| arrayOfParams | array | array of RenderObjects |\n| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |\n| onSuccess | function | callback function when successfully render this draw call |\n| onError | function | callback function when there is an error occur in this draw call |\n\n###### Example:\n\n```javascript\n// create your renderObjects and push into your array first\nconst renderObjects = []\nrenderObjects.push({\n id: '001',\n tags: '',\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n only: false\n }\n },\n points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],\n interactable: true,\n visible: true,\n extrude: 0,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 },\n draw: true\n})\n\n// draw all the renderObjects using .draw\nrenderer.draw(\n renderObjects,\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n\n// to update the renderObjects in the future\n// using the same .draw() api to update the specific renderObject by id\nrenderer.draw(\n [\n {\n id: '001',\n style: {\n color: 'rgb(155, 255, 55)'\n },\n position: { x: 10, y: 0, z: 0 }\n }\n ],\n false,\n (success) => {\n console.log(success)\n },\n (errors) => {\n console.log(errors)\n }\n)\n```\n\n---\n\n### updateWindowDimension\n\nUpdate the size of the renderer window\n\n`.updateWindowDimension({ width: Number, height: Number })`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------- |\n| width | number | new width for the renderer window |\n| height | number | new height for the renderer window |\n\n###### Example:\n\n```javascript\nrenderer.updateWindowDimension({ width, height })\n```\n\n---\n\n### setCameraViewPoint\n\nSet the camera panning position\n\n`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewPoint({\n position: { x: 2, y: 0, z: 5 }\n})\n```\n\n---\n\n### setCameraViewAngle\n\nSet the camera rotation view angle\n\n`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| polarAngle | number | rotation angle in 3d view, default is `0` degree |\n| azimuthAngle | number | rotation angle in 2d view, default is `0` degree |\n\n###### Example:\n\n```javascript\nrenderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })\n```\n\n---\n\n### setMaxCameraViewAngle\n\nSet the maximum camera rotation view angle\n\n`.setMaxCameraViewAngle({ maxPolarAngle: Number, maxAzimuthAngle: Number })`\n\n| Parameters | Type | Description |\n| --------------- | ------ | ---------------------------------------------------------- |\n| maxPolarAngle | number | how far you can rotate in 3d view, default is `90` degree |\n| maxAzimuthAngle | number | how far you can rotate in 2d view, default is `360` degree |\n\n###### Example:\n\n```javascript\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 90, maxAzimuthAngle: 360 })\nrenderer.setMaxCameraViewAngle({ maxPolarAngle: 0 }) // Here is one way to disable 3D view\n```\n\n---\n\n### getIdsByTags\n\nGet all the renderObjects id by tags\n\n`.getIdsByTags(tags: Array)`\n\n###### Example:\n\n```javascript\nrenderer.getIdsByTags(['tag1', 'tag2'])\n```\n\n---\n\n### getRenderObject\n\nget renderObject parameters\n\n`.getRenderObject(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.getRenderObject('uuid')\n```\n\n---\n\n### fitContent\n\nAdjust the renderer camera view frustum to fit the content space / given drawn boundaries\n\n`.fitContent(params: Object)`\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------------------------------------------ |\n| id | string | renderObject id, default is the whole `renderScene boundary` |\n| padding | number | add the padding for the camera view, default is `0` |\n| points | array | custom boundary shape, `optional` |\n\n###### Example:\n\n```javascript\nthis.renderer.fitContent()\nthis.renderer.fitContent({ padding: 50 })\nthis.renderer.fitContent({ id: '07-124', padding: 50 })\nthis.renderer.fitContent({ points: points, padding: 50 })\n```\n\n---\n\n### createInstancedMesh\n\n`.createInstancedMesh(renderObject: object)`\n\n###### Example:\n\n```javascript\nrenderer.createInstancedMesh({\n id: 'MESH_GROUP_1',\n mesh: {\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [...],\n extrude: 5\n },\n})\n```\n\n---\n\n### addToInstancedMesh\n\n`.addToInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.addToInstancedMesh({\n id: 'UUID',\n instancingId: 'MESH_GROUP_1',\n style: {\n color: 'rgb(100,101,102)'\n },\n position: { x: 0, y: 0, z: 0 },\n rotation: { z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n})\n```\n\n---\n\n### drawInstancedMesh\n\n`.drawInstancedMesh(params: object)`\n\n###### Example:\n\n```javascript\nrenderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })\n```\n\n---\n\n### removeInstancedMesh\n\n`.removeInstancedMesh(id: string)`\n\n###### Example:\n\n```javascript\nrenderer.removeInstancedMesh('MESH_GROUP_1')\n```\n\n---\n\n### addEventListener\n\nsubscribe to a renderer event\n\n`.addEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeEventListener\n\nunsubscribe to a renderer event\n\n`.removeEventListener(eventName: String, callback: Function)`\n\n###### Example:\n\n```javascript\nrenderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)\nrenderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)\nrenderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)\n```\n\n---\n\n### removeAllEventListeners\n\nunsubscribe all the renderer event listeners\n\n`.removeAllEventListeners()`\n\n---\n\n### remove\n\nremove specific renderObject by id\n\n`.remove(id: String)`\n\n###### Example:\n\n```javascript\nrenderer.remove(id)\n```\n\n---\n\n### removeAll\n\nremove all the renderObjects in the renderer\n\n`.removeAll()`\n\n###### Example:\n\n```javascript\nrenderer.removeAll()\n```\n\n---\n\n# Events\n\n| Name | Value | Description |\n| ------------------------------- | --------------- | ----------------------------------------------------------------------- |\n| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |\n| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |\n| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |\n| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |\n| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |\n| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |\n| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |\n| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |\n\n#### ONCLICK\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONHOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOVER\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEOUT\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONMOUSEMOVE\n\n| Payload | Type | Description |\n| -------- | ------ | -------------------------------------------------- |\n| id | string | id of the renderObject |\n| point | object | intersection point in the world space, x y z value |\n| mousePos | object | the mouse position in screen space, x y value |\n\n#### ONRENDER\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n#### ONERROR\n\n| Payload | Type | Description |\n| ------- | ------ | -------------- |\n| error | object | Error() object |\n\n#### ONTEXTURELOAD\n\n| Payload | Type | Description |\n| ------------- | ------ | ------------------------------------------------ |\n| frameTime | number | the time taken to complete this draw call |\n| memory | object | gpu memory info |\n| render | object | render info |\n| renderObjects | array | list of renderObjects to render in the draw call |\n\n# RenderObjects\n\n- [Mesh](#Mesh)\n- [Text](#Text)\n- [Sprite](#Sprite)\n- [Line](#Line)\n\n### Mesh\n\n| Parameters | Type | Description |\n| ----------------- | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |\n| points | array | points to construct a shape `required` |\n| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| extrude | number | extrude level for the mesh |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| rotation | [transformObject](#transformObject) | rotation of the renderObject |\n| scale | [transformObject](#transformObject) | scale of the renderObject |\n\n###### Example:\n\n```javascript\n{\n id: '001', // required\n tags: ['level 3'],\n type: 'MESH',\n style: {\n color: 'rgb(155, 255, 55)',\n side: 'FRONT',\n texture: {\n img: '',\n repeat: 0.5\n }\n outline: {\n color: 'rgb(255, 0, 0)',\n width: 0.2,\n only: false\n }\n },\n points: [\n { x: -1, y: -1 },\n { x: 1, y: -1 },\n { x: 1, y: 1 },\n { x: -1, y: 1 }\n ],\n geometryTranslate: {x: -1, y: -1, z: 0},\n interactable: true,\n visible: true,\n extrude: 2,\n position: { x: 0, y: 0, z: 0 },\n rotation: { x: 0, y: 0, z: 0 },\n scale: { x: 1, y: 1, z: 1 }\n}\n```\n\n###### Draw Outcome:\n\n
\n\n### Text\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| text | string | text to draw on the screen `required` |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| scalar | number | text size |\n\n###### Example:\n\n```javascript\n{\n id: '002',\n tags: ['nothing'],\n type: 'TEXT',\n position: { x: 0, y: 0, z: 0 },\n scalar: 1.0,\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n fontFamily: 'Arial, Helvetica, sans-serif',\n textAlign: 'center',\n fontWeight: 'normal', // normal, bold, bolder, lighter\n fontStyle: 'italic' // normal, italic, oblique\n },\n text: 'hello world',\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Sprite\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [textStyleObject](#textStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '003',\n tags: ['level 3'],\n type: 'SPRITE',\n position: { x: 2, y: 0 },\n center: { x: 0.5, y: 0.5 },\n style: {\n color: 'rgb(255, 255, 255)',\n img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',\n width: 'auto',\n height: 'auto',\n maxWidth: 3,\n maxHeight: 3\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n### Line\n\n| Parameters | Type | Description |\n| ------------ | ----------------------------------- | ---------------------------------------------------------------- |\n| id | string | id of the renderObject `required` |\n| tags | array | renderObject tags |\n| type | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' `required` |\n| lineWidth | number | the width of the line |\n| points | array | points for constructing the line `required` |\n| position | [transformObject](#transformObject) | position of the renderObject |\n| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |\n| interactable | boolean | interaction of this object disable or enable |\n| visible | boolean | visibility flag |\n\n###### Example:\n\n```javascript\n{\n id: '004',\n tags: ['level 3'],\n type: 'LINE',\n lineWidth: 1.0,\n points: [\n { x: 0, y: 0 },\n { x: 100, y: 0 },\n { x: 100, y: 90 },\n { x: 200, y: 20 }\n ],\n style: {\n color: 'rgb(255, 0, 255)',\n opacity: 0.7\n },\n interactable: false,\n visible: true\n}\n```\n\n###### Draw Outcome:\n\n\n\n## Type Definitions\n\n### transformObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------- |\n| x | number | set value in x-axis |\n| y | number | set value in y-axis |\n| z | number | set value in z-axis |\n\n### meshStyleObject\n\n| Parameters | Type | Description |\n| -------------- | ------ | ------------------------------------------------ |\n| color | string | color of the object |\n| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |\n| texture | number | texture setting of the renderObject |\n| texture.img | string | img path or url |\n| texture.repeat | number | how many times to repeat the image on the object |\n| outline | number | outline setting of the renderObject |\n| outline.color | number | outline color of the object |\n| outline.only | number | if true then will be outline only object |\n\n### textStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ---------------------------------------------------------------- |\n| color | string | color of the text |\n| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |\n| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |\n| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |\n| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |\n\n### spriteStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ---------------- | --------------------------------------- |\n| color | string | color of the sprite |\n| img | string | image path or url |\n| width | number or string | width of the sprite, default is 'auto' |\n| height | number or string | height of the sprite, default is 'auto' |\n| maxWidth | number | maximum width of the sprite |\n| maxHeight | number | maximum height of the sprite |\n\n### lineStyleObject\n\n| Parameters | Type | Description |\n| ---------- | ------ | ------------------------ |\n| color | string | color of the line |\n| opacity | number | transparency of the line |\n","readmeFilename":"README.md","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github","_id":"@wework/floormap.gl@3.13.2","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (darwin)","dist":{"integrity":"sha512-mAVFUsFdQXb2JyZSKxAYtjRSUY4EtTOyE8kKq60A+vw3CGfK593RpBbH4FHYOwhTfHavz/11PfC9EsVUF8UgRQ==","shasum":"6ede918f450b7e0d185c1ae96432ec16fd62a6f2","tarball":"https://registry.npmjs.org/@wework/floormap.gl/-/floormap.gl-3.13.2.tgz","fileCount":11,"unpackedSize":1212077,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC89iNkeHtLNcJvhg0ap4x1iwGzWuae6XyqtNlNdoUFRQIhAOrzQaT5BeZfbkf9aNved8qQt1fABecGJF4xOxGeVhhw"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHcEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMHg//fTHE9o2z342MrdtFvzm9WYI5ZFB0c56+r/69mG1Qf6j5mkEn\r\n9V0Jw3pYckHfh2Nudl9Tsf/KCktPXjxZvCSgnLcmmU3eULcKU/tDzzDCHENv\r\nr3zePjfq5FOT1oJAVOuM/pWJ4OV9mEWoChowI/CcDnNVVb7S28OAJvGyCx4C\r\nEOWYx8OjNEQofU4D4R5w/AWp1sldNGLv4b9S3YCcBNCEuZN6uExWa8H0ngh/\r\nRQp/W8RQe90PNhXmxWJ1k2MmgSbfNSG8yEB2SPy7CEJcJ0iUgwJ/dFinFf+A\r\niLGH7aySx8RTpPzYlZr/1J1Y5qExp4t1LMLUyGAPJY7KNXgcQ19lCYk7tOW+\r\nz05CNF39OGf9yNl9eZfLaqQts6A/yRqNNvT51kOeN6AD74qt9kz9rheRzuVW\r\nHoVyrtC8tVtbLs2AXq02a8lpmoMjfqIbdHOi4b85Vh9mc/Gd//C+TT28lrji\r\nI5XtKVhONeOe97fvJHvLGUObMvb9b3ZmdKDcBzE6FwevztPV1IR18IBm6L3i\r\nKLm/W0fLNg4Jp/WxnESV8f8pbhOOpMdz+cuKv6972cl5bHbBDByvYtfEZQXY\r\npp/kGntZV6yVCXQDcI11xkSbVzocSpJqLADifrVDJ+DVbfOIa+iMQgbSJGTI\r\nZ3JNs0NqSaVj2Tw1xKKxkQxssEgwBD7dv2Q=\r\n=uqhu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"wework-dev","email":"tech-admin@wework.com"},"directories":{},"maintainers":[{"name":"wework-dev","email":"tech-admin@wework.com"},{"name":"volodymyr.pratsin","email":"volodymyr.pratsin@wework.com"},{"name":"wework-growth","email":"digital-growth-eng@wework.com"},{"name":"mryave","email":"mryave@gmail.com"},{"name":"narcisacodreanu","email":"codreanu.narcisa@yahoo.com"},{"name":"telkowework","email":"tyler.elko@wework.com"},{"name":"rbuenviaje","email":"roderick.buenviaje@wework.com"},{"name":"leoduquesnel","email":"leo.duquesnel@wework.com"},{"name":"liormb","email":"liormb@gmail.com"},{"name":"aishwaryap","email":"aishwarya.parthasarathy@wework.com"},{"name":"kenyav","email":"kenya.stewart2@wework.com"},{"name":"nicole-wework","email":"nicole.famulare@wework.com"},{"name":"acartmell","email":"acartmell@gmail.com"},{"name":"smartang","email":"smartang@gmail.com"},{"name":"minareth","email":"tekarimegraesh@gmail.com"},{"name":"kh0st","email":"khomitskyi.o@gmail.com"},{"name":"whittier","email":"sarah.sampan@wework.com"},{"name":"kyokeefesally","email":"kyle@wework.com"},{"name":"eburgoswework","email":"emiliano@wework.com"},{"name":"seansmith_wework","email":"sean.smith2@wework.com"},{"name":"lekan.nicholson","email":"lekan.nicholson@wework.com"},{"name":"mossolinski","email":"mateusz.ossolinski@wework.com"},{"name":"befron","email":"benjamin.efron@wework.com"},{"name":"kostiantyn.yaremenko","email":"kostiantyn.yaremenko@wework.com"},{"name":"ubin.malla","email":"ubin.malla@wework.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/floormap.gl_3.13.2_1667790595901_0.036030166682169185"},"_hasShrinkwrap":false,"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2018-12-07T10:09:43.246Z","0.4.1":"2018-12-07T10:09:43.473Z","modified":"2024-04-22T20:51:39.768Z","0.4.2":"2018-12-14T13:54:24.900Z","0.5.0":"2018-12-17T07:41:51.696Z","0.5.1":"2018-12-17T07:45:29.661Z","0.5.2":"2018-12-17T08:22:50.409Z","0.5.3":"2018-12-17T08:41:52.780Z","0.6.0":"2018-12-18T08:01:31.833Z","0.7.0":"2018-12-19T01:45:12.737Z","0.8.0":"2018-12-21T23:37:08.685Z","0.8.0-rc1":"2019-01-02T09:25:01.993Z","0.8.0-rc3":"2019-01-04T08:01:40.646Z","0.8.1-rc1":"2019-01-04T08:21:23.182Z","0.8.1":"2019-01-04T08:23:19.481Z","0.8.2-rc1":"2019-01-15T04:37:25.754Z","0.8.2-rc3":"2019-01-15T09:31:56.515Z","0.8.2-rc4":"2019-01-15T11:10:31.327Z","0.8.2-rc5":"2019-01-17T07:40:48.234Z","0.8.2-rc6":"2019-01-17T08:28:16.339Z","0.8.2":"2019-01-28T02:55:12.263Z","0.8.3-rc1":"2019-01-29T10:52:20.069Z","0.8.3":"2019-01-29T11:06:12.719Z","0.8.4":"2019-02-01T02:46:06.313Z","0.8.5-rc1":"2019-02-07T02:29:14.009Z","0.8.5-rc2":"2019-02-10T09:24:54.603Z","0.9.0":"2019-02-12T07:20:59.150Z","0.9.1-rc1":"2019-03-01T12:16:59.816Z","0.9.1":"2019-03-01T12:36:21.482Z","1.0.0-rc1":"2019-03-06T10:29:56.827Z","1.0.0-rc2":"2019-03-07T14:57:16.485Z","1.0.0-rc3":"2019-03-08T10:20:19.274Z","1.0.0":"2019-03-15T04:04:24.217Z","1.0.1-rc1":"2019-03-27T07:07:51.975Z","1.0.1":"2019-03-27T07:14:56.008Z","1.1.0-rc1":"2019-04-04T04:15:17.294Z","1.1.0":"2019-04-04T05:47:47.699Z","1.1.1-rc1":"2019-04-12T03:10:19.881Z","1.1.1":"2019-04-12T09:04:44.093Z","1.1.2-dev-lerna.1":"2019-04-18T09:07:07.383Z","1.2.0-rc1":"2019-04-25T07:43:32.172Z","1.2.0-rc2":"2019-04-25T14:49:32.380Z","1.2.0-rc3":"2019-04-29T07:58:14.769Z","1.2.0":"2019-04-30T01:50:42.076Z","1.1.2-dev-lerna.2":"2019-05-07T04:27:46.754Z","1.2.1-rc-lerna.20":"2019-05-13T11:11:33.314Z","1.2.1-rc-lerna.21":"2019-05-13T11:27:29.867Z","1.2.1-rc-lerna.22":"2019-05-16T07:33:46.156Z","1.2.1-rc-lerna.23":"2019-05-17T08:31:53.594Z","1.2.1-rc-lerna.25":"2019-05-22T02:18:52.222Z","1.2.1-rc-lerna.26":"2019-05-22T03:26:25.166Z","1.2.1-rc-lerna.28":"2019-05-22T05:19:40.773Z","1.2.1-rc-lerna.29":"2019-05-22T05:32:02.479Z","1.2.1-rc.30":"2019-05-22T07:05:24.130Z","1.2.1-next.34":"2019-05-24T05:39:32.704Z","1.2.1-next.35":"2019-05-30T09:03:43.914Z","1.2.1-next.36":"2019-05-30T09:23:32.308Z","1.2.1-next.37":"2019-05-31T10:50:46.469Z","1.2.1-next.38":"2019-06-04T10:50:09.371Z","1.2.1-next.39":"2019-06-05T10:53:20.407Z","1.2.1-next.40":"2019-06-10T01:36:31.906Z","1.2.1-next.44":"2019-06-10T06:08:40.034Z","1.2.1-next.45":"2019-06-11T11:32:49.383Z","1.2.1-next.46":"2019-06-12T07:11:46.280Z","1.2.1-next.47":"2019-06-14T05:23:52.830Z","1.2.1-next.48":"2019-06-14T06:14:56.774Z","1.2.1":"2019-06-14T06:37:23.070Z","1.2.2":"2019-06-14T07:05:03.817Z","1.2.3-next.0":"2019-06-17T07:00:30.405Z","1.2.3-next.1":"2019-06-18T03:15:26.779Z","1.2.3-ss.2":"2019-06-19T03:20:59.969Z","1.2.3-ss.5":"2019-06-19T04:12:48.162Z","1.2.3-ss.6":"2019-06-19T04:38:07.001Z","1.2.3-next.2":"2019-06-19T05:02:30.900Z","1.2.3-next.3":"2019-06-19T05:23:33.181Z","1.2.3":"2019-06-19T06:50:46.734Z","1.2.3-rc.6":"2019-06-19T09:35:11.788Z","1.2.4-rc.11":"2019-07-11T04:06:43.745Z","1.2.4-rc.12":"2019-07-11T05:08:53.246Z","1.2.4":"2019-07-13T08:03:51.930Z","1.2.4-rc.15":"2019-07-16T06:50:13.298Z","1.2.5-rc.39":"2019-09-30T05:51:27.711Z","1.3.0":"2019-09-30T07:49:56.398Z","1.3.1-rc.0":"2019-10-01T05:30:28.152Z","1.3.1":"2019-10-02T09:54:50.209Z","1.3.1-rc.7":"2019-10-02T12:15:16.607Z","1.3.1-rc.8":"2019-10-03T02:28:28.740Z","1.3.2":"2019-10-03T02:48:53.451Z","1.3.1-rc.12":"2019-10-08T06:50:29.514Z","1.3.3-rc.4":"2019-10-21T08:49:46.187Z","1.3.3-rc.5":"2019-10-22T05:21:30.758Z","1.3.3":"2019-10-30T06:56:52.205Z","1.3.3-rc.6":"2019-11-04T09:44:06.314Z","1.4.0":"2019-11-04T09:51:46.279Z","1.3.3-rc.8":"2019-11-05T06:27:41.058Z","1.3.3-tsdx.15":"2019-11-22T06:10:18.635Z","1.3.3-tsdx2.15":"2019-11-22T07:24:03.000Z","1.3.3-tsdx-2.15":"2019-11-22T07:37:46.219Z","1.4.1-tsdx-2.20":"2019-11-25T02:42:38.998Z","1.4.1-rc.15":"2019-12-02T09:16:29.294Z","1.4.1":"2019-12-02T09:39:11.635Z","1.4.2-rc.3":"2019-12-04T06:33:28.884Z","1.4.2":"2019-12-04T06:34:30.520Z","1.4.3-rc.22":"2020-01-20T08:54:41.852Z","1.5.0":"2020-01-24T03:28:08.205Z","1.5.1-rc.2":"2020-01-30T04:08:35.293Z","1.5.1":"2020-02-05T10:16:15.781Z","1.5.2-rc.2":"2020-02-10T08:26:19.276Z","1.5.2":"2020-02-14T03:24:57.923Z","1.5.3-rc.4":"2020-02-18T08:33:42.981Z","1.5.3-rc.6":"2020-02-19T07:49:02.940Z","1.5.3":"2020-02-28T03:37:27.957Z","1.5.4-rc.2":"2020-03-08T10:02:48.232Z","1.6.0":"2020-03-13T01:18:15.546Z","2.1.0":"2020-09-03T04:44:30.837Z","1.6.1-rc.82":"2020-10-26T07:45:05.049Z","2.5.1-rc.5":"2020-11-17T05:15:39.461Z","2.6.2-rc.0":"2020-12-10T05:45:44.317Z","2.6.2-rc.1":"2020-12-10T11:41:19.864Z","2.25.2":"2021-11-12T14:28:20.651Z","2.25.5":"2021-11-19T04:13:03.315Z","2.26.0":"2021-11-24T09:08:46.896Z","2.28.0":"2021-12-02T15:31:24.616Z","3.0.0":"2022-02-09T10:23:58.189Z","3.7.7":"2022-07-07T10:01:41.648Z","3.13.2":"2022-11-07T03:09:56.098Z"},"maintainers":[{"email":"support@npmjs.com","name":"npm-support"}],"license":"WeWork","readme":"","readmeFilename":"","description":"[](https://circleci.com/gh/WeConnect/floormap.gl/tree/develop) [![Coverage Status](https://coveralls.io/repos/github"}