CADViewer Technical Documentation, Installation Guide and Reference Samples Library

React JS

NodeJS Server for CAD Conversion

As the first step in installing CADViewer as a ReactJS Component, install the NodeJS back-end converter structure, see NodeJS.

Ensure that it is a full installation consisting of both /cadviewer/converters/ and /cadviewer/app/ in addition to /cadviewer/content/ with sample CAD files.

Set the ServerFrontEndUrl variable in CADViewer_config.json to point to the Url of the ReactJS installation, typically http://localhost:3000 or http://localhost:8000 during development. In our sample implemetation we choose: http://localhost:8000.

ReactJS Set-up

Get a clean React Project up running

npx create-react-app my-app
cd my-app
npm start

There are numerous resources for this, please see: https://reactjs.org/docs/create-a-new-react-app.html.

As an alternative, from our online resources, access and download the complete ReactJS CADViewerApp where the component structure outlined below is already implemented:

Install CADViewer front-end in public

Install the CADViewer front-end into /public/ in your React JS Project. For the reference cadviewerApp project, this means adding the CADViewer structure to the folder /reactjs/cadviewerApp/public.

c:/reactjs
    └───  cadviewerApp
                  └─── public
                           └─── cadviewer
                                    └── app
                                         ├── cv
                                         │    ├── cv-pro 
                                         │    │   ├── menu_config
                                         │    │   ├── language_table
                                         │    │   └── space
                                         │    │         ├── css 
                                         │    │         └── html
                                         │    ├── cv-core
                                         │    │   ├── menu_config
                                         │    │   └── language_table
                                         │    └── cv-custom_commands
                                         ├── fonts
                                         ├── images
                                         ├── js
                                         ├── css
                                         └── user_resources	            

Update CADViewer_ReactJSHandlerSettings.js

Update the configuration file CADViewer_ReactJSHandlerSettings.js with your server settings, so that React can connect to the back-end NodeJS Conversion and file-load server.

CADViewer_ReactJSHandlerSettings.js can be found in folder: /reactjs/cadviewerApp/public/cadviewer/app/cv/ . Ensure that you have defined the location of your ReactJS front-end and the back-end NodeJS CADViewer conversion server.

Create a JavaScript file to initialize and control CADViewer in ReactJS component

This JavaScript file is used to add custom API methods to control the interaction between CADViewer and ReactJS components as well as CADViewer initialization.

Create the CADViewer_ReactJS01.js file in:

/reactjs/cadviewerApp/cadviewer/app/cv/CADViewer_ReactJS01.js

The standart CADViewer initialization is using a jQuery encapsulation, see Initialize and Load Drawing.

In React, this must be replaced with a method windows.init_CADViewer(). Furthermore CADViewer_Angular01.js must contain all the CADViewer call-back methods described in /cadviewertechdocs/frontend/callback/ as well as any custom methods using the CADViewer API.

For the cadviewerApp sample, use this template file: CADViewer_ReactJS01_6_2_79.zip , source code can be found below.

Add CADViewer script and class files to cadviewerApp/public/index.html

The CADViewer JavaScript and stylesheet libraries needs to be added on top level to be freely accessed from the CADViewer component.

Add reference to the CADViewer Component in cadviewerApp/public/index.html

Create a CADViewer Component - cadviewerApp/src/CADViewer.js

Create a ReactJS Component for CADViewer. The full source is listed last in this article.

define componentDidMount()

In the componentDidMount(), three actions must take place:

1: Set a file name to load.
2: Reference the initialization code for CADViewer defined in CADViewer_ReactJS01.js.
3: Set window.addEventListener for resize handler

handle the resize of browser

The resize-handler must call the internal CADViewer methods for canvas resize.

set up the CADViewer floorplan_div

The canvas floorplan Id as referenced in the initialization class in CADViewer_NodeJS01.js must be defined.

Initialize CADViewer

In CADViewer_ReactJS01.js, the method init_CADViewer() contain all the initialication steps, including loading of a sample drawing, as described in Initialize and Load Drawing.

See source code below in section: CADViewer_ReactJS01.js - Source Code


CADViewer - Callback Methods

In CADViewer_ReactJS01.js, the following call-back method are implemented:

function cvjs_ObjectSelected(rmid, floorplan_div) : This method echo any click or selection of Space Objects in CADViewer

cvjs_graphicalObjectOnChange(type, graphicalObject, spaceID) : This method echo any creation or delete of Space Objects, Relines, StickyNotes and Image Space Objects

See source code below in section: CADViewer_ReactS01.js - Source Code


CADViewer.js React Component - Source Code

Below is the source used in cadviewerApp CADViewer.js component with all relevant definitions:

CADViewer_ReactJS01.js - Source Code

Below is the source used in cadviewerApp CADViewer_ReactJS01.js with all relevant definitions:

ENJOY - and get in touch!



Last updated on 18 Nov 2020
Published on 10 Oct 2020