@voxelfarm/voxelfarm-react-viewer v1.0.1

Voxel Farm Embedded Viewer

Installation

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

Usage

You can use the component the following way:

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.

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/)