cadviewer/README.md

CADViewer - JavaScript CAD Viewer Library for FrameWorks (ReactJS, Angular, VueJS, etc.)

# Installing CADViewer

## CADViewer for frameworks (ReactJS, VueJS, Angular etc.) 


#### Install CADViewer

**1:** Install CADViewer with ***npm i cadviewer*** on all framework platforms. See specifics below for each platform on how to add auxillary files and connect with the back-end CAD conversion server.

#### Add Assets

**2:** In your ***/src*** (Angular) or ***/public*** (NodeJS/VueJS) folder create the ***[assets/cadviewer/](https://cadviewer.com/downloads/cadviewer/assets/assets_cadviewer.zip)*** folder, then unzip and add the content from the CADViewer assets file: ***[assets_cadviewer.zip](https://cadviewer.com/downloads/cadviewer/assets/assets_cadviewer.zip)*** (the folder structure will be ***/assets/cadviewer/app/...***). The assets can also be found in the /node_modules/cadviewer/dist/assets/ folder after installation.

#### If using TypeScript

**3:** If you are using typescript, then ***cadviewer.d.ts*** is in the **/node_modules/cadviewer/dist/** */ folder after installation and is referenced through package.json. The types definitions can also be pulled from [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with **npm i @types/cadviewer**.

#### Notes:

***Note 1:*** For any installation issues, please refer to CADViewer [FAQ](https://cadviewer.com/cadviewertechdocs/faq)


***Note 2:*** For plain-vanilla JavaScript top-level library, please use our [GitHub](https://github.com/CADViewer/cadviewer-script-library) repository [cadviewer-script-library](https://github.com/CADViewer/cadviewer-script-library).


***Note 3:*** Always install the back-end ***[cadviewer-conversion-server](https://github.com/CADViewer/cadviewer-conversion-server)*** (windows) or ***[cadviewer-conversion-server-linux](https://github.com/CADViewer/cadviewer-conversion-server-linux)***  (linux) for CAD conversion, Redlines and Space Object management.  (see **5:** below)


#### Use Integrated Samples

To see how a CAD Canvas is set up with callback methods and initialization of CADViewer, as an alternative to **1: - 3:** above, use the following samples as a template:

**4A:** ***ReactJS*** - download the CADViewer [React](https://github.com/CADViewer/cadviewer-testapp-react-01) implementation sample from the [Github](https://github.com/CADViewer/cadviewer-testapp-react-01) repository ***[cadviewer-testapp-react-01](https://github.com/CADViewer/cadviewer-testapp-react-01)***.

**4B:** ***VueJS*** - download the CADViewer [VueJS](https://github.com/CADViewer/cadviewer-testapp-vue-01) implementation sample from [Github](https://github.com/CADViewer/cadviewer-testapp-vue-v01) repository ***[cadviewer-testapp-vue-01](https://github.com/CADViewer/cadviewer-testapp-vue-01)***.


**4C:** ***Angular*** - download a CADViewer [Angular](https://github.com/CADViewer/cadviewer-testapp-angular-v02) implementation sample from the repositories either [Github](https://github.com/CADViewer/cadviewer-testapp-angular-v01) - Angular 11 (***[cadviewer-testapp-angular-v01](https://github.com/CADViewer/cadviewer-testapp-angular-v01)***) or [Github](https://github.com/CADViewer/cadviewer-testapp-angular-v02)  - Angular 13 with TypeScript (***[cadviewer-testapp-angular-v02](https://github.com/CADViewer/cadviewer-testapp-angular-v02)***).


These samples illustrates initialization and loading of CADViewer as well as illustrates the functional interface for [highlight](https://cadviewer.com/cadviewertechdocs/spacemanagement/) and adding [interactive](https://cadviewer.com/cadviewertechdocs/spacemanagement/) image content to the CAD canvas. 

#### Install Back-End Converter

**5:** Install a back-end CAD Conversion server to process CAD files and communicate with CADViewer.

Download the Node JS CAD Conversion server (or alternatively the PHP, .NET or Servlet Server implementations). Go to:  https://cadviewer.com/download/, register and receive email and then download from **CADViewer Handler/Connector Scripts**.

***Note:*** that the preferred CAD Server with React/Vue/Angular, is the **CADViewer NodeJS CAD Conversion Server** which can be downloaded directly from the [Github](https://github.com/CADViewer/cadviewer-conversion-server) repositories ***[cadviewer-conversion-server](https://github.com/CADViewer/cadviewer-conversion-server)*** (windows) or ***[cadviewer-conversion-server-linux](https://github.com/CADViewer/cadviewer-conversion-server-linux)***  (linux).

You can always update the back-end CAD Converter [AutoXchange 2023](https://www.tailormade.com/ax2020techdocs/) in the server structure:  Go to: https://cadviewer.com/download/, register, receive email and then download from **AutoXchange 2023 Downloads**.


Note that the path book-keeping is important for proper initialization, where the ***ServerBackEndUrl*** and ***ServerLocation*** is the location and Url of the CAD Server and ServerUrl is the Url of the React/VueJS/Angular application encapulating CADViewer. 

    var ServerBackEndUrl = "http://localhost:3000/";
    var ServerUrl = "http://localhost:8000/"; // react
    // var ServerUrl = "http://localhost:8080/"; // vue
    // var ServerUrl = "http://localhost:4200/"; // angular
	var ServerLocation = "";  // leave blank (only use for dev purposes)
        
The [CADViewer Back-End](https://cadviewer.com/cadviewertechdocs/handlers/) install instructions are at: https://cadviewer.com/cadviewertechdocs/handlers/.

The [CADViewer Front-End](https://cadviewer.com/cadviewertechdocs/frontend/) install instructions are at: https://cadviewer.com/cadviewertechdocs/frontend/.


### General Information


**LICENSE: TMS 1.0:** Use freely on localhost. Commercial use requires licensing, both using entirely or in parts. Contact Tailor Made Software, https://cadviewer.com/contact, for more information. 


The general documentation on **[CADViewer](https://cadviewer.com/cadviewertechdocs/)** is found at: https://cadviewer.com/cadviewertechdocs/.

The general documentation on **[AutoXchange 2023](https://tailormade.com/ax2020techdocs/)** is found at: https://tailormade.com/ax2020techdocs/.

The ***[CADViewer API](https://cadviewer.com/cadviewerproapi/global.html)*** is found at: https://cadviewer.com/cadviewerproapi/global.html. 


Read the Guide on how to **[create hotspots](https://cadviewer.com/highlight/main/)** and **[modify hotspots](https://cadviewer.com/highlight2/main/)**, this will help you work with the code in the integrated samples. Also please reference the general documentation on **[Space Management](https://cadviewer.com/cadviewertechdocs/spacemanagement/)**.