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.
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.
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 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 the CADViewer_ReactJS01.js file in:
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
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.
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.
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: