# @voxelfarm/voxelfarm-react-viewer

> Voxel Farm Embedded Viewer

Latest version **1.0.1** (published 2022-07-12) · Copyright 2022 Voxel Farm, all rights reserved. license · 0 weekly downloads

## Install

```sh
npm install @voxelfarm/voxelfarm-react-viewer
pnpm add @voxelfarm/voxelfarm-react-viewer
yarn add @voxelfarm/voxelfarm-react-viewer
bun add @voxelfarm/voxelfarm-react-viewer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-07-12 |
| First published | 2022-07-11 |
| Weekly downloads | 0 |
| License | Copyright 2022 Voxel Farm, all rights reserved. |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 3.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Amgad Tewfik |
| Maintainers | voxelfarm |

## Links

- npm: https://www.npmjs.com/package/@voxelfarm/voxelfarm-react-viewer
- npm.io page: https://npm.io/package/@voxelfarm/voxelfarm-react-viewer

## Dependencies (12)

- [react](https://npm.io/package/react.md) ^16.13.1
- [webpack](https://npm.io/package/webpack.md) ^4.42.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [css-loader](https://npm.io/package/css-loader.md) ^3.5.2
- [raw-loader](https://npm.io/package/raw-loader.md) ^4.0.0
- [url-loader](https://npm.io/package/url-loader.md) ^4.1.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.9.0
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.11
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.1.0
- [style-loader](https://npm.io/package/style-loader.md) ^1.1.3
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.9.5
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.9.4

## Recent versions

- 1.0.1 (latest) — 2022-07-12
- 1.0.0 — 2022-07-11

## README

> Voxel Farm Embedded Viewer

## Installation

```sh
$ npm install --save @voxelfarm/voxelfarm-react-viewer
```

## Usage

You can use the component the following way:

```jsx

import React from 'react'
import EmbeddedViewer from '@voxelfarm/voxelfarm-react-viewer';

/**
 * React component that encapsulates a viewer to spatial data.
 */
<EmbeddedViewer
    /**  the id of the project. */
    projectId={string}
    /** the url of the streaming server. */
    streamingUrl={string}
    /** the url of the rest server. */
    restUrl={string}
    /** the id of the view. */
    viewId={string}
    /* create a view with json */
    viewJSON={string}
    /** (true/false) show/hide zoomToExtent button. */
    zoomToExtent={boolean}
    /** (true/false) show/hide fullscreen button. */
    fullscreen={boolean}
    /** (true/false) show/hide home button. */
    home={boolean}
    /** (true/false) show/hide the options button. */
    options={boolean}
    /** (true/false) show the controls inside/outside of the view. */
    showControlsInView={boolean}
    /** Event Notification is triggered when a change in a region occurs. 
     *  The event includes the following properties:
     *  voxelfarmPoints: the position of the region in Voxel Farm coordinates.
     *  voxelfarmMinY: min Y in Voxel Farm coordinates.
     *  voxelfarmMaxY: max Y in Voxel Farm coordinates.
     *  worldPoints: the position of the region in World coordinates.
     *  worldMinZ: min Z in world coordinates.
     *  worldMaxZ: max Z in world coordinates.
    */
    onRegionChange={EventHandler}
     /** Event Notification is triggered when clicking on a layer. 
      *  The event includes the following properties:
      *  eventType: mousedown/mouseup
      *  canvasPosition: the position of the canvas.
      *  layerId: the layer Id where the click occured.
      *  position: the position of the click in the screen.
      *  voxelfarmPosition: the position of the layer in Voxel Farm coordinates.
      *  windowPosition: the position of the window.
      *  worldPosition: the position of the layer in world coordinates.
      * 
     */
    onLayerClick={EventHandler}
     /** Function to return authentication if it is required */
    requestAuthToken={function}
/>

```

## Examples

This is an example on how to retrieve layer information from the embedded view, how to change an input parameter for a layer and how to refresh the view.

```jsx

import React, {Component} from 'react';
import EmbeddedViewer from '@voxelfarm/voxelfarm-react-viewer';

/**
 * React component that uses a EmbeddedViewer Component and add HTML input and a button .
 */
export default class App extends Component {
    /**
     * Event handler of the onClick Event
     *
     */
    onClick(){
        /* Using the React ref of the instance of the Emebedded Viewer Component. */
        if (this.viewer){
            /* getLayers method is called first to retreive the list of layers with their inputs. */
            const layers = this.viewer.getLayers();
            /* In this example we chose "com.voxelfarm.program.view.blockmodel" as the layer's type to make the modification upon. */
            if (layers.length > 0 && layers[0].type == "com.voxelfarm.program.view.blockmodel"){
                /* chosing the first layer */
                const firstLayer = layers[0];
                /* get the first layer id */
                const layerId = firstLayer.id;
                /* get the list of available inputs for this particular layer. */
                const inputs = firstLayer.inputs;
                /* get the input for a particular id here will take query as an example. */
                const inputId = "query";
                const input = inputs[inputId];
                /* get the label of this particular input */
                const label = input.label;
                /* get the type of this particular input */
                const type = input.type;
                /* retreive the value from the html input */
                const inputValue = document.querySelector('input').value;
                /* call setLayerInput method to set the value from the input string */
                this.viewer.setLayerInput(layerId, inputId, inputValue);
                /* call refreshView to update the view with the new value passed */
                this.viewer.refreshView();
            }
        }
    }

    /**
     * render function for the react component
     *
     */
    render(){
        return (     
            <div>
                <EmbeddedViewer 
                    /* ref is used to point to the instance of the EmbeddedViewer and assigned to variable called this.viewer */
                    ref={elem => this.viewer = elem}
                    projectId="<projectId>"
                    streamingUrl="<streamingUrl>"
                    restUrl="<restUrl>}"
                    /* either property viewId or viewJSON that can be used*/ 
                    viewId="<viewId>"
                    fullscreen="true"
                    zoomToExtent="true"
                    options="true"
                    home="false"
                    showControlsInView="true"                    
                />
                {/* adding an html input that includes the value that needs to be changed in the view. */}
                <input type="text" defaultValue="ins_fe > 10" />
                {/* an html button to trigger the modification of the view. */}
                <button onClick={e=>{this.onClick()}}>Search</button>
            </div>
        )
    }
}

```

## Note

* Either property viewJSON or viewId can be used at one time to create the viewer.

## License

Voxel Farm Copyright 2022 © (https://www.voxelfarm.com/)

---
_Source: https://npm.io/package/@voxelfarm/voxelfarm-react-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._