CADViewer Technical Documentation, Installation Guide and Reference Samples Library

Angular

NodeJS Server for CAD Conversion

As the first step in installing CADViewer as a Angular 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 Angular installation, typically http://localhost:4200 during development.

Angular Set-up

Get a clean Angular Project up running

>ng new cadviewerApp 

There are numerous resources for this, probably using Angular CLI is fastest, there is an abundancy of online resources, one to recommend is: https://www.youtube.com/watch?v=IZEolKjcjks

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

Install jQuery, Bootstrap and qtip2

Ensure you have jQuery and Bootstrap installed and references in your angular.json file, the following resource gives good guidance: https://www.truecodex.com/course/angular-6/how-to-use-external-js-files-and-javascript-code-in-angular

Install jQuery and Bootstrap first, qtip2 last.

>ng new qtip2 

Install CADViewer in assets

Install the CADViewer front-end into /assets/ in your Angular Project. For the reference cadviewerApp project, this means adding the CADViewer structure to the folder /nodejs/cadviewerApp/src/assets.

c:/nodejs
    └─── cadviewerApp
             └─── src
                   └─── assets
                           └─── 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_NodeJSHandlerSettings.js

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

CADViewer_NodeJSHandlerSettings.js can be found in folder: /nodejs/cadviewerApp/src/assets/cadviewer/app/cv/ . Ensure that you have defined the location of your Angular front-end and the back-end NodeJS CADViewer conversion server.

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

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

Create the CADViewer_Angular01.js file in:

/nodejs/cadviewerApp/src/assets/cadviewer/app/cv/CADViewer_Angular01.js

The standart CADViewer initialization is using a jQuery encapsulation, see Initialize and Load Drawing. In Angular, this must be replaced with a method 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_Angular01_6_2_37.zip

Update angular.json

Update angular.json, “assets”: [] and “styles”: [] to include all the script and stylesheet resources neded to run CADViewer from /src/assets/cadviewer/app/:

Create a CADViewer Component

Create an Angular Component for cadviewer.

>ng generate component cadviewer 

cadviewer.component.html

Define a <div> containing the CADViewer canvas.

Add content to the component for interaction with the CADViewer canvas. Below are the methods implemented in the cadviewerApp sample used to create highlight and multiple selection of Spaces:

The methods above are all implemented in cadviewer.component.ts

  • customHighlightSingleID()
  • customLoadDrawing()
  • customStartMultiSelect()
  • customFinishMultiSelect()
  • customClearSpaces()
  • customColorSpaces()
  • customHatchSpaces()
  • customSpaceBorders()
  • customTooltips()

app.component.html

Add the cadviewer component:

cadviewer.component.scss

Define the height/width of the CADViewer canvas.

cadviewer.component.ts

In cadviewer.component.ts the following implementation steps must be followed to properly allow CADViewer to display:

Event Subscription from ResponsiveJS

The cadviewer.component.ts needs to be setup to import event handling from ResponsiveJS. This is needed to be able to subscript to an event to update the CADViewer canvas each time the window of the browser changes. Import “rxjs” and update OnInit to subscribe on resize and resize CADViewer as well as unsubscribe on destroy.

Furthermore, subscription to an eventhandler for mouse-up is also needed. This event-handler is used to capture mouse interaction with the CADViewer canvas.

Please see cadviewerApp source code for cadviewer.component.ts at the bottom of this section.

Define interfaces for objects used in the communication between Angular and CADViewer JavaScript API

Define the interfaces for all the objects objects needed to communicate between Angular and CADViewer JavaScript API. Custom methods can be written in the helper JavaScript class CADViewer_Angular.js that exports to these interfaces.

Below is a sample interface definition for handling of multipe selection of space objects.

export interface MultiSelectCallbackArray{
  id:number;
  SpaceID:string;
};

Expose all JavaScript methods from cadviewer.min.js and CADViewer_Angular01.js used in cadviewer.component.ts

Event through the angular.json, “assets”: [] and “styles”: [] definitions has been updated to include all the script and stylesheet resources neded to run CADViewer from /src/assets/cadviewer/app/, these needs to be individually exposed in cadviewer.component.ts.

Please refer to the CADViewer API to the methods needed in the implementation, as well as include all relevant methods from the custom javascript class CADViewer_Angular01.js.

Below are the exposed JavaScript methods used in cadviewerApp:

Initialize CADViewer

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

As part of ngOnInit(), this method must be referenced through an Angular method initCADViewer() called on initialization:

  /*  Init CADViewwer */
  public initCADViewer() {
    init_CADViewer();  // we reference external JavaScript method
  }

See the full source of cadviewer.component.ts at the end of this section for reference.


Implement custom functionality

Use the methods defined in cadviewer.component.ts to interface exposed methods defined in CADViewer_Angular01.js when users interact with the user interface defined in cadviewer.component.html.

Sample Functionality - Multiselection of Space Objects

This sample shows how to implement interactive multiselect of spaces and have them exposed through the Angular interface.

1: When a Space is selection in CADViewer the call-back method cvjs_ObjectSelected(rmid, floorplan_div) is called.

2: We now make a custom implementation of cvjs_ObjectSelected(rmid, floorplan_div) in CADViewer_Angular01.js.

3: We first set up a number of helper JavaScript variables in CADViewer_Angular01.js. These variables are flags to control the multiselect, arrays to keep selected objects, etc.

/*   Multiple Select Methods   */
var roomLayerMultiSelect;
var mySpaceArray = [];
var myReturnArray = [];
var mySpaceCounter = 0;
var multiSelect = false;
var selectedSpace = -1;

4: We set up an Angular interface in cadviewer.component.ts used to communicate selections from CADViewer back to Angular

// Define interfaces for objects used to communicate between Angular and CADViewer JavaScript API
export interface MultiSelectCallbackArray{
  id:number;
  SpaceID:string;
};

5: We instantiate this interface in cadviewer.component.ts

// we define an Array instance of an Interface we can use from the callback from MultiSelect
  public myMultiSelect:MultiSelectCallbackArray[] = [
    {id: 1, SpaceID: ' test-multiselect-Space-1 '},
    {id: 2, SpaceID: ' test-multiselect-Space-2'},
  ];

6: We and expose it in cadviewer.component.html

   <td ><strong>Multiselected Spaces:</strong><canvas id="dummy" width="10" height="10"></canvas>
    </td>
    <td *ngFor="let space of myMultiSelect">{{space.SpaceID}} &nbsp;</td>

7: We program in JavaScript three methods, cvjs_multiSelectStart(), cvjs_multiSelectFinish() and cvjs_ObjectSelected()

The methods are listed below with inline comments, variables under 3: are also included.

8: We add buttons to start and finish multiselect in cadviewer.component.html

<td>
<button style="margin-left: 10px" (click)="customStartMultiSelect()">StartMultiSelect</button>
</td> 
<td>
<button style="margin-left: 10px" (click)="customFinishMultiSelect()">FinishMultiSelect</button>
</td> 

9: We add corresponding methods in cadviewer.component.js for CADViewer / Angular communication

  // we define an Array instance of an Interface we can use from the callback from MultiSelect
  public myMultiSelect:MultiSelectCallbackArray[] = [
    {id: 1, SpaceID: ' test-multiselect-Space-1 '},
    {id: 2, SpaceID: ' test-multiselect-Space-2'},
  ];

/* MultiSelect start template implementation */
  public customStartMultiSelect(){

    this.myMultiSelect = cvjs_multiSelectStart(); // call CADViewer method
    
  };
  
   
  /* MultiSelect finish template implementation */
  public customFinishMultiSelect(){

//    window.alert("before "+this.myMultiSelect);
//  when we finish the multiselect, we update myMultiSelect
    this.myMultiSelect = cvjs_multiSelectFinish(); // call CADViewer method

//    window.alert("after "+this.myMultiSelect);

  };
  



Set the scope of bootstrap to be local to CADViewer in cadviewer.component.ts

1: Remove the reference to bootstrap.min.css from angular.json:

	"styles": [
	 ..
	 "node_modules/bootstrap/dist/css/bootstrap.min.css",              
	 ..
	]

2: In the init_CADViewer() method in the file CADViewer_Angular01.js, uncomment the following statement:

  jQuery("<link/>", {
      rel: "stylesheet",
      type: "text/css",
      href: "/assets/cadviewer/app/css/bootstrap.min.css"
  }).appendTo("head");  

3: NOTE: If you need to apply bootstrap to other elements in cadviewer.component.ts, then in cadviewer.component.scss add:

 @import '~bootstrap/dist/css/bootstrap.min.css';



ENJOY - and get in touch!




cadviewer.component.ts - Source Code

Below is the source used in cadviewerApp cadviewer.component.ts with all relevant definitions:

CADViewer_Angular01.js - Source Code

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

Last updated on 15 Sep 2020
Published on 13 Mar 2020