New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@wework/floormap.gl

Package Overview
Dependencies
Maintainers
20
Versions
124
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wework/floormap.gl - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1-rc1

dist/floormap.gl.min.js
dist/floormap.gl.min.js.map

5

package.json
{
"name": "@wework/floormap.gl",
"version": "0.8.0",
"version": "0.8.1-rc1",
"module": "dist/index.es.js",

@@ -40,2 +40,4 @@ "main": "dist/index.js",

"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",

@@ -54,3 +56,2 @@ "rollup-plugin-peer-deps-external": "^2.2.0",

"three": "^0.99.0",
"three-instanced-mesh": "^0.96.1",
"three-line-2d": "^1.1.6",

@@ -57,0 +58,0 @@ "three.textsprite": "^18.10.24"

796

README.md
# floormap.gl
A renderer library
A javascript rendering engine that provides a simple interface to draw shapes, image, text and line on the screen.
- [Quick Start](#quick-start)
- [Building the library](#Building-the-library)
- [Example usage in HTML](#Example-usage-in-HTML)
- [Example usage in ReactJs application](#Example-usage-in-ReactJs-application)
- [Creating a new Renderer](#Creating-a-new-Renderer)
- [Events](#Events)
- [RenderObjects](#RenderObjects)
# Quick Start
Clone
### Clone the project
```

@@ -14,3 +22,4 @@ git clone git@github.com:WeConnect/floormap.gl.git

Install dependencies
### Install dependencies
```

@@ -20,12 +29,173 @@ yarn install

Start the demo
### Start the demo
```
yarn start:demo
```
# Example usage of the APIs
### Create the Renderer
### Outcome
![alt text](examples/demo/demo.png)
# Building the library
```
yarn build
```
A `dist` folder will be created, and outputs files are `floormap.gl.min.js`, `index.js` and `index.es.js` files
<b>Gently reminder:</b> 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
# Example usage in HTML
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FloorMapGL</title>
</head>
<body>
<div id="floormap"></div>
<script type="text/javascript" src="dist/floormap.gl.min.js" ></script>
<script>
// create a renderer
var renderer = new FloorMapGL({
target: document.getElementById('floormap'),
size: {
width: 500,
height: 500
},
backgroundColor: 'grey',
antialias: true,
pixelRatio: 2
})
// draw a simple mesh
renderer.draw({
id: '001',
tags: ['hello'],
type: 'MESH',
style: {
color: 'rgb(155, 255, 55)',
side: 'FRONT',
outline: {
color: 'rgb(255, 0, 0)',
only: false
}
},
points: [
{ x: -1, y: -1 },
{ x: 1, y: -1 },
{ x: 1, y: 1 },
{ x: -1, y: 1 }
],
interactable: true,
extrude: 0,
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
scale: { x: 10, y: 10, z: 10 }
},
false,
(success) => {
console.log(success)
},
(error) => {
console.log(e)
})
</script>
</body>
</html>
```
# Example usage in ReactJs application
link the floormap.gl package in your node application
```
yarn link '@wework/floormap.gl'
```
or download the package directly from the npm
```
yarn add '@wework/floormap.gl'
```
Example usage in a react application
```javascript
import React, { Component } from 'react'
import FloorMapGL from '@wework/floormap.gl'
class FloorMap extends Component {
componentDidMount() {
this.renderer = new FloorMapGL({
target: this.mount,
size: {
width: 500,
height: 500
},
backgroundColor: 'grey',
antialias: true,
pixelRatio: 2
})
this.renderer.draw(
{
id: '001',
tags: ['hello'],
type: 'MESH',
style: {
color: 'rgb(155, 255, 55)',
side: 'FRONT',
outline: {
color: 'rgb(255, 0, 0)',
only: false
}
},
points: [
{ x: -1, y: -1 },
{ x: 1, y: -1 },
{ x: 1, y: 1 },
{ x: -1, y: 1 }
],
interactable: true,
extrude: 0,
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
scale: { x: 10, y: 10, z: 10 }
},
false,
(success) => {
console.log(success)
},
(error) => {
console.log(e)
}
)
}
render() {
return (
<div
ref={(mount) => {
this.mount = mount
}}
/>
)
}
}
export default FloorMap
```
# Creating a new Renderer
```javascript
import FloorMapGL from '@wework/floormap.gl'
var renderer = new FloorMapGL({

@@ -49,6 +219,65 @@ target: domElement,

### .draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)
| Name | Type | Description |
| --------------- | ----------------------------- | -------------------------------------------------------------------- |
| target | object | domElement, it is `required` |
| size | [sizeObject](#sizeObject) | window size of the renderer |
| backgroundColor | string | background color of the renderer, default is `'black'` |
| antialias | boolean | Options to smooth the jagged line, default is `true` |
| pixelRatio | number | The rendering resolution, default is `2` |
| camera | [cameraObject](#cameraObject) | camera settings |
| groundPlane | boolean | invisible ground plane for the mouse interaction, default is `false` |
##### sizeObject
| Name | Type | Description |
| ------ | ------ | ------------------------------------------------------ |
| width | number | the width of the renderer window, by default is `700` |
| height | number | the height of the renderer window, by default is `400` |
##### cameraObject
| Name | Type | Description |
| ------------- | ------- | ------------------------------------------------------------------------ |
| zoomLevel | number | zoom level of the camera view, default is `1` |
| enableRotate | boolean | to enable to control and rotate the camera view angle, default is `true` |
| maxPolarAngle | number | max horizontal rotation of the camera in degree, default is `90` |
# List of APIs in floormap.gl
- [draw](#draw)
- [updateWindowDimension](#updateWindowDimension)
- [getIdsByTags](#getIdsByTags)
- [fitContent](#fitContent)
- [getZoom](#getZoom)
- [setZoom](#setZoom)
- [getCenter](#getCenter)
- [setCameraViewPoint](#setCameraViewPoint)
- [setCameraViewAngle](#setCameraViewAngle)
- [createInstancedMesh](#createInstancedMesh)
- [addToInstancedMesh](#addToInstancedMesh)
- [drawInstancedMesh](#drawInstancedMesh)
- [addEventListener](#addEventListener)
- [removeEventListener](#removeEventListener)
- [removeAllEventListeners](#removeAllEventListeners)
- [remove](#remove)
- [removeAll](#removeAll)
### draw
Draw the list of renderObjects onto the screen
`.draw(renderObjects: array, transparentUpdate: boolean, onSuccess: function, onError: function)`
| Parameters | Type | Description |
| ----------------- | -------- | ---------------------------------------------------------------------------- |
| arrayOfParams | array | array of RenderObjects |
| transparentUpdate | boolean | flag to enable clearing and re-render the scene again for transparent object |
| onSuccess | function | callback function when successfully render this draw call |
| onError | function | callback function when there is an error occur in this draw call |
###### Example:
```javascript
renderObjects = []
// create your renderObjects and push into your array first
const renderObjects = []
renderObjects.push({

@@ -66,8 +295,3 @@ id: '001',

},
points: [
{x: -1, y: -1},
{x: 1, y: -1},
{x: 1, y: 1},
{x: -1, y: 1}
],
points: [{ x: -1, y: -1 }, { x: 1, y: -1 }, { x: 1, y: 1 }, { x: -1, y: 1 }],
interactable: true,

@@ -82,118 +306,356 @@ visible: true,

renderer.draw(renderObjects, false, (event) => {}, (event) => {})
```
OR
```javascript
renderer.draw({
id: '001',
tags: '',
type: 'MESH',
style: {
color: 'rgb(155, 255, 55)',
side: 'FRONT',
outline: {
color: 'rgb(255, 0, 0)',
only: false
// draw all the renderObjects using .draw
renderer.draw(
renderObjects,
false,
(success) => {
console.log(success)
},
(errors) => {
console.log(errors)
}
)
// to update the renderObjects in the future
// using the same .draw() api to update the specific renderObject by id
renderer.draw(
[
{
id: '001',
style: {
color: 'rgb(155, 255, 55)'
},
position: { x: 10, y: 0, z: 0 }
}
],
false,
(success) => {
console.log(success)
},
points: [
{x: -1, y: -1},
{x: 1, y: -1},
{x: 1, y: 1},
{x: -1, y: 1}
],
interactable: true,
visible: true,
extrude: 0,
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 0, z: 0 },
scale: { x: 1, y: 1, z: 1 },
draw: true
})
(errors) => {
console.log(errors)
}
)
```
### Update renderObject
---
### updateWindowDimension
Update the size of the renderer window
`.updateWindowDimension({ width: Number, height: Number })`
| Parameters | Type | Description |
| ---------- | ------ | ---------------------------------- |
| width | number | new width for the renderer window |
| height | number | new height for the renderer window |
###### Example:
```javascript
renderer.draw([{
id: '001',
style: {
color: 'rgb(155, 255, 55)',
},
position: { x: 10, y: 0, z: 0 }
}])
renderer.updateWindowDimension({ width, height })
```
### .updateWindowDimension(params)
---
### setCameraViewPoint
Set the camera panning position
`.setCameraViewPoint({ position: { x: Number, y: Number, z: Number } })`
###### Example:
```javascript
renderer.updateWindowDimension({ width, height })
renderer.setCameraViewPoint({
position: { x: 2, y: 0, z: 5 }
})
```
### Remove the specific object by id
---
### setCameraViewAngle
Set the camera rotation view angle
`.setCameraViewAngle({ polarAngle: Number, azimuthAngle: Number })`
###### Example:
```javascript
renderer.remove(id)
renderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })
```
### Clear all the objects in the renderer
---
### getIdsByTags
Get all the renderObjects id by tags
`.getIdsByTags(tags: Array)`
###### Example:
```javascript
renderer.removeAll()
renderer.getIdsByTags(['tag1', 'tag2'])
```
### Set camera look at
---
### fitContent
Adjust the renderer camera view frustum to fit the content space / given drawn boundaries
`.fitContent(params: Object)`
| Parameters | Type | Description |
| ---------- | ------ | ------------------------------------------------------------ |
| id | string | renderObject id, default is the whole `renderScene boundary` |
| padding | number | add the padding for the camera view, default is `0` |
| points | array | custom boundary shape, `optional` |
###### Example:
```javascript
renderer.setCameraViewPoint({
position: { x: 2, y: 0, z: 5 },
target: { x: 2, y: 0, z: 0 }
this.renderer.fitContent()
this.renderer.fitContent({ padding: 50 })
this.renderer.fitContent({ id: '07-124', padding: 50 })
this.renderer.fitContent({ points: points, padding: 50 })
```
---
### createInstancedMesh
`.createInstancedMesh(renderObject: object)`
###### Example:
```javascript
renderer.createInstancedMesh({
id: 'MESH_GROUP_1',
mesh: {
style: {
color: 'rgb(155, 255, 55)',
side: 'FRONT',
outline: {
color: 'rgb(255, 0, 0)',
width: 0.2,
only: false
}
},
points: [...],
extrude: 5
},
})
```
### Set camera rotation angle
---
### addToInstancedMesh
`.addToInstancedMesh(params: object)`
###### Example:
```javascript
renderer.setCameraViewAngle({ polarAngle: 45, azimuthAngle: -45 })
renderer.addToInstancedMesh({
id: 'UUID',
instancingId: 'MESH_GROUP_1',
style: {
color: 'rgb(100,101,102)'
},
position: { x: 0, y: 0, z: 0 },
rotation: { z: 0 },
scale: { x: 1, y: 1, z: 1 }
})
```
### get all the ids by tags
---
### drawInstancedMesh
`.drawInstancedMesh(params: object)`
###### Example:
```javascript
renderer.getIdsByTags('tag')
renderer.getIdsByTags(['tag1', 'tag2'])
renderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })
```
---
### addEventListener
subscribe to a renderer event
`.addEventListener(eventName: String, callback: Function)`
###### Example:
```javascript
renderer.addEventListener('onmouseover', mouseEnterCallback)
renderer.addEventListener('onmouseout', mouseLeaveCallback)
renderer.addEventListener('onclick', onClickCallback)
renderer.addEventListener('onmousemove', onMouseMoveCallback)
renderer.addEventListener('onrender', onRenderCallback)
renderer.addEventListener('onerror', onErrorCallback)
renderer.addEventListener('onzoom', onZoomCallback)
renderer.addEventListener('ondrag', onDragCallback)
renderer.addEventListener('onrotate', onRotateCallback)
renderer.addEventListener('ontextureload', onTextureLoadCallback)
renderer.addEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)
renderer.addEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)
renderer.addEventListener(renderer.Events.ONCLICK, onClickCallback)
```
---
### removeEventListener
unsubscribe to a renderer event
`.removeEventListener(eventName: String, callback: Function)`
###### Example:
```javascript
renderer.removeEventListener('onmouseover', mouseEnterCallback)
renderer.removeEventListener('onmouseout', mouseLeaveCallback)
renderer.removeEventListener('onclick', onClickCallback)
renderer.removeEventListener('onmousemove', onMouseMoveCallback)
renderer.removeEventListener('onrender', onRenderCallback)
renderer.removeEventListener('onerror', onErrorCallback)
renderer.removeEventListener('onzoom', onZoomCallback)
renderer.removeEventListener('ondrag', onDragCallback)
renderer.removeEventListener('onrotate', onRotateCallback)
renderer.removeEventListener('ontextureload', onTextureLoadCallback)
renderer.removeEventListener(renderer.Events.ONMOUSEOVER, mouseEnterCallback)
renderer.removeEventListener(renderer.Events.ONMOUSEOUT, mouseLeaveCallback)
renderer.removeEventListener(renderer.Events.ONCLICK, onClickCallback)
```
### fitContent
---
### removeAllEventListeners
unsubscribe all the renderer event listeners
`.removeAllEventListeners()`
---
### remove
remove specific renderObject by id
`.remove(id: String)`
###### Example:
```javascript
this.renderer.fitContent()
this.renderer.fitContent({padding: 50})
this.renderer.fitContent({id: '07-124', padding: 50})
this.renderer.fitContent({points: points, padding: 50})
renderer.remove(id)
```
## RenderObject samples
### MESH rendering setting
---
### removeAll
remove all the renderObjects in the renderer
`.removeAll()`
###### Example:
```javascript
renderer.removeAll()
```
---
# Events
| Name | Value | Description |
| ------------------------------- | --------------- | ----------------------------------------------------------------------- |
| [ONCLICK](#ONCLICK) | 'onclick' | when the user select the interactable renderObject by clicking/touching |
| [ONHOVER](#ONHOVER) | 'onmousehover' | when the user mouse hovering the interactable renderObject |
| [ONMOUSEOVER](#ONMOUSEOVER) | 'onmouseover' | when moving the mouse pointer onto a renderObject |
| [ONMOUSEOUT](#ONMOUSEOUT) | 'onmouseout' | when moving the mouse pointer out of a renderObject |
| [ONMOUSEMOVE](#ONMOUSEMOVE) | 'onmousemove' | when moving the mouse pointer |
| [ONRENDER](#ONRENDER) | 'onrender' | when .draw api successfully sent all the data to the gpu to render |
| [ONERROR](#ONERROR) | 'onerror' | when floormap.gl renderer encounters any internal errors |
| [ONTEXTURELOAD](#ONTEXTURELOAD) | 'ontextureload' | when texture is loaded and sent to the gpu |
#### ONCLICK
| Payload | Type | Description |
| -------- | ------ | -------------------------------------------------- |
| id | string | id of the renderObject |
| point | object | intersection point in the world space, x y z value |
| mousePos | object | the mouse position in screen space, x y value |
#### ONHOVER
| Payload | Type | Description |
| -------- | ------ | -------------------------------------------------- |
| id | string | id of the renderObject |
| point | object | intersection point in the world space, x y z value |
| mousePos | object | the mouse position in screen space, x y value |
#### ONMOUSEOVER
| Payload | Type | Description |
| -------- | ------ | -------------------------------------------------- |
| id | string | id of the renderObject |
| point | object | intersection point in the world space, x y z value |
| mousePos | object | the mouse position in screen space, x y value |
#### ONMOUSEOUT
| Payload | Type | Description |
| -------- | ------ | -------------------------------------------------- |
| id | string | id of the renderObject |
| point | object | intersection point in the world space, x y z value |
| mousePos | object | the mouse position in screen space, x y value |
#### ONMOUSEMOVE
| Payload | Type | Description |
| -------- | ------ | -------------------------------------------------- |
| id | string | id of the renderObject |
| point | object | intersection point in the world space, x y z value |
| mousePos | object | the mouse position in screen space, x y value |
#### ONRENDER
| Payload | Type | Description |
| ------------- | ------ | ------------------------------------------------ |
| frameTime | number | the time taken to complete this draw call |
| memory | object | gpu memory info |
| render | object | render info |
| renderObjects | array | list of renderObjects to render in the draw call |
#### ONERROR
| Payload | Type | Description |
| ------- | ------ | -------------- |
| error | object | Error() object |
#### ONTEXTURELOAD
| Payload | Type | Description |
| ------------- | ------ | ------------------------------------------------ |
| frameTime | number | the time taken to complete this draw call |
| memory | object | gpu memory info |
| render | object | render info |
| renderObjects | array | list of renderObjects to render in the draw call |
# RenderObjects
- [Mesh](#Mesh)
- [Text](#Text)
- [Sprite](#Sprite)
- [Line](#Line)
### Mesh
| Parameters | Type | Description |
| ------------------ | ----------------------------------- | ----------------------------------------------------- |
| id `!required` | string | id of the renderObject |
| tags | array | renderObject tags |
| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |
| style | [meshStyleObject](#meshStyleObject) | style of the renderObject |
| points `!required` | array | points to construct a shape |
| geometryTranslate | [transformObject](#transformObject) | translation for the geometry in object space |
| interactable | boolean | interaction of this object disable or enable |
| visible | boolean | visibility flag |
| extrude | number | extrude level for the mesh |
| position | [transformObject](#transformObject) | position of the renderObject |
| rotation | [transformObject](#transformObject) | rotation of the renderObject |
| scale | [transformObject](#transformObject) | scale of the renderObject |
###### Example:
```javascript
{

@@ -225,3 +687,3 @@ id: '001', // required

visible: true,
extrude: 0,
extrude: 2,
position: { x: 0, y: 0, z: 0 },

@@ -233,3 +695,22 @@ rotation: { x: 0, y: 0, z: 0 },

### TEXT rendering setting
###### Draw Outcome:
<img src="examples/renderer-html/mesh.png" width="500">
### Text
| Parameters | Type | Description |
| ---------------- | ----------------------------------- | ----------------------------------------------------- |
| id `!required` | string | id of the renderObject |
| tags | array | renderObject tags |
| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |
| style | [textStyleObject](#textStyleObject) | style of the renderObject |
| text `!required` | string | text to draw on the screen |
| interactable | boolean | interaction of this object disable or enable |
| visible | boolean | visibility flag |
| position | [transformObject](#transformObject) | position of the renderObject |
| scalar | number | text size |
###### Example:
```javascript

@@ -250,3 +731,3 @@ {

},
text: 'hello',
text: 'hello world',
interactable: false,

@@ -257,3 +738,20 @@ visible: true

### SPRITE rendering setting
###### Draw Outcome:
<img src="examples/renderer-html/text.png" width="500">
### Sprite
| Parameters | Type | Description |
| ---------------- | ----------------------------------- | ----------------------------------------------------- |
| id `!required` | string | id of the renderObject |
| tags | array | renderObject tags |
| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |
| position | [transformObject](#transformObject) | position of the renderObject |
| style | [textStyleObject](#textStyleObject) | style of the renderObject |
| interactable | boolean | interaction of this object disable or enable |
| visible | boolean | visibility flag |
###### Example:
```javascript

@@ -268,3 +766,3 @@ {

color: 'rgb(255, 255, 255)',
img: meeting_room,
img: 'https://cdn.spacemob.co/img/meeting_room@2x.png',
width: 'auto',

@@ -280,3 +778,22 @@ height: 'auto',

### LINE rendering setting
###### Draw Outcome:
<img src="examples/renderer-html/sprite.png" width="500">
### Line
| Parameters | Type | Description |
| ------------------ | ----------------------------------- | ----------------------------------------------------- |
| id `!required` | string | id of the renderObject |
| tags | array | renderObject tags |
| type `!required` | string | renderObject type, 'MESH', 'SPRITE', 'TEXT' or 'LINE' |
| lineWidth | number | the width of the line |
| points `!required` | array | points for constructing the line |
| position | [transformObject](#transformObject) | position of the renderObject |
| style | [lineStyleObject](#lineStyleObject) | style of the renderObject |
| interactable | boolean | interaction of this object disable or enable |
| visible | boolean | visibility flag |
###### Example:
```javascript

@@ -303,34 +820,55 @@ {

### Instanced Mesh
```javascript
###### Draw Outcome:
renderer.createInstancedMesh({
id: 'MESH_GROUP_1',
mesh: {
style: {
color: 'rgb(155, 255, 55)',
side: 'FRONT',
outline: {
color: 'rgb(255, 0, 0)',
width: 0.2,
only: false
}
},
points: [...],
extrude: 5
},
})
<img src="examples/renderer-html/line.png" width="500">
renderer.addToInstancedMesh({
id: 'UUID',
instancingId: 'MESH_GROUP_1',
style: {
color: 'rgb(100,101,102)'
},
position: { x: 0, y: 0, z: 0 },
rotation: { z: 0 },
scale: { x: 1, y: 1, z: 1 },
})
## Type Definitions
renderer.drawInstancedMesh({ id: 'MESH_GROUP_1' })
```
### transformObject
| Parameters | Type | Description |
| ---------- | ------ | ------------------- |
| x | number | set value in x-axis |
| y | number | set value in y-axis |
| z | number | set value in z-axis |
### meshStyleObject
| Parameters | Type | Description |
| -------------- | ------ | ------------------------------------------------ |
| color | string | color of the object |
| side | string | 'FRONT', 'BACK' or 'DOUBLE', default is 'FRONT' |
| texture | number | texture setting of the renderObject |
| texture.img | string | img path or url |
| texture.repeat | number | how many times to repeat the image on the object |
| outline | number | outline setting of the renderObject |
| outline.color | number | outline color of the object |
| outline.only | number | if true then will be outline only object |
### textStyleObject
| Parameters | Type | Description |
| ---------- | ------ | ---------------------------------------------------------------- |
| color | string | color of the text |
| fontFamily | string | default is 'Arial, Helvetica, sans-serif' |
| textAlign | number | text alignment, 'center', 'left' or 'right', default is 'center' |
| fontWeight | string | 'normal', 'bold', 'bolder' or 'lighter', default is 'normal' |
| fontStyle | number | 'normal', 'italic' or 'oblique', default is 'normal' |
### spriteStyleObject
| Parameters | Type | Description |
| ---------- | ---------------- | --------------------------------------- |
| color | string | color of the sprite |
| img | string | image path or url |
| width | number or string | width of the sprite, default is 'auto' |
| height | number or string | height of the sprite, default is 'auto' |
| maxWidth | number | maximum width of the sprite |
| maxHeight | number | maximum height of the sprite |
### lineStyleObject
| Parameters | Type | Description |
| ---------- | ------ | ------------------------ |
| color | string | color of the line |
| opacity | number | transparency of the line |
.vscode/settings.json
dist/index.es.js

Sorry, the diff of this file is too big to display

dist/index.es.js.map

Sorry, the diff of this file is not supported yet

dist/index.js

Sorry, the diff of this file is too big to display

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc