Initialize and Load Drawing
Initialization
Use the initialization method that corresponds to the attribute controls you want to run CADViewer with. The minimum initialization must reference a div element <div> with a defined id, in all our Samples and Repositories we use ‘floorPlan’.
The initialization should be onLoad or onComponentMount, and then an additional handler needs to be exposed for Resize.
Method Calls
Use the intialization calls to the CADViewer API methods in the following order:
The initalization portion of the code can be modified depending on the Handlers used in implementation and based of Framework, and the declaration part will change as more controls for File Modals, Redlines, Image Objects, Interactive Highlight Modal controls, etc. are added.
Note: Some method calls are optional and some are mandatory. Click on the method to open the API documentation. Initialize the methods in this order.
-
cvjs_CADViewerPro(true) - required
-
cvjs_debugMode(true) -optional
- cvjs_setAllServerPaths_and_Handlers() - required
Note: This method sets set the location of ServerUrl, ServerBackEndUrl, ServerLocation (blank in most cases). It also defines the Front-end Handler(JavaScript, React, Angular or VueJS) and Back-end Handler technology(PHP, Servlets, DotNet, DotNetCore, NodeJS). Based on Front-end/Back-end combination CADViewer resolves various internal methods differently.
-
cvjs_emailSettings_PDF_publish() - optional
-
cvjs_loadCADViewerLanguage() - required
-
cvjs_setTopMenuXML() - optional
- cvjs_InitCADViewer_app() - required
Note:: There are several cvjs_InitCADViewer_app_xx_yy() methods used for either base initialization of CADViewer as well as for custom control and settings of Space Object Custom Modals. Please see the relevant sections for choice of initialization method. Also note that the parameter app_folder only needs to be set when installing as standard JavaScript library, when installing via npm all sources are loaded up internally and this parameter can be set to “/cadviewer/app/” or “”.
-
cvjs_setLicenseKeyPath() - optional
-
cvjs_setLicenseKeyDirect() - optional
-
cvjs_allowFileLoadToServer() - optional
-
cvjs_setServerHandlersPath() - required, initialization differs depending on Handlers
-
cvjs_conversion_addAXconversionParameter() - optional
-
cvjs_LoadDrawing() - required
-
cvjs_resizeWindow_position() - required
-
cvjs_resizeWindow_fixedSize() - required - use either cvjs_resizeWindow_position() or cvjs_resizeWindow_fixedSize()
Initialization Sample - JavaScript class library / jQuery
In the standard javascript set-up, a jQuery ready() element is used, together with a jQuery resize() element.
Note: Please visit our GirHub Repositories for samples on other platforms.
$(document).ready(function()
{
//$(document).html();
// Set CADViewer with full CADViewer Pro features
cvjs_CADViewerPro(true);
cvjs_debugMode(true);
cvjs_setAllServerPaths_and_Handlers(ServerBackEndUrl, ServerUrl, ServerLocation, "PHP", "JavaScript", "floorPlan");
// uncomment if you want to use NodeJS cadviewer-conversion-server as backend
//cvjs_setHandlers_FrontEnd("NodeJS", "JavaScript", "floorPlan");
cvjs_PrintToPDFWindowRelativeSize(0.8);
cvjs_setFileModalEditMode(false);
// http://127.0.0.1:8081/html/CADViewer_json_610.html?drawing_name=/home/mydrawing.dgn&dgn_workspace=/home/workspace.txt&json_location=c:/nodejs/cadviewer/content/helloworld.json&print_modal_custom_checkbox=add_json
// IF CADVIEWER IS OPENED WITH A URL http://localhost/cadviewer/html/CADViewer_sample_610.html?drawing_name=../content/drawings/dwg/hq17.dwg
// or CADViewer_sample_610.html?drawing_name=http://localhost/cadviewer/content/drawings/dwg/hq17.dwg
// this code segment will pass over the drawing_name to FileName for load of drawing
var myDrawing = cvjs_GetURLParameter("drawing_name");
console.log("DRAWING NAME >"+cvjs_GetURLParameter("drawing_name")+"</end> ");
if (myDrawing==""){
console.log("no drawing_name parameter!!!");
}
else{
// console.log("we pass over to FileName to load Drawing");
FileName = myDrawing;
}
// For "Merge DWG" / "Merge PDF" commands, set up the email server to send merged DWG files or merged PDF files with redlines/interactive highlight.
// See php / xampp documentation on how to prepare your server
cvjs_emailSettings_PDF_publish("From CAD Server", "my_from_address@mydomain.com", "my_cc_address@mydomain.com", "my_reply_to@mydomain.com");
// CHANGE LANGUAGE - DEFAULT IS ENGLISH
cvjs_loadCADViewerLanguage("English", "/app/cv/cv-pro/language_table/cadviewerProLanguage.xml");
// Available languages: "English" ; "French, "Korean", "Spanish", "Portuguese", "Portuguese (Brazil)" ; "Russian" ; "Malay" ; "Chinese-Simplified"
// Set Icon Menu Interface controls. Users can:
// 1: Disable all icon interfaces
// cvjs_displayAllInterfaceControls(false, "floorPlan"); // disable all icons for user control of interface
// 2: Disable either top menu icon menus or navigation menu, or both
// cvjs_displayTopMenuIconBar(false, "floorPlan"); // disable top menu icon bar
// cvjs_displayTopNavigationBar(false, "floorPlan"); // disable top navigation bar
// 3: Users can change the number of top menu icon pages and the content of pages, based on a configuration file in folder /cadviewer/app/js/menu_config/
cvjs_setTopMenuXML("floorPlan", "cadviewer_full_commands_01.xml", "/app/cv/cv-pro/menu_config/");
/* vertical icon bar sample with integrated zoom icons - when using this, comment out cvjs_setTopMenuXML("floorPlan", "cadviewer_full_commands_01.xml"); */
// cvjs_setTopMenuXML("floorPlan", "cadviewer_verticalmeasurementbar_01.xml"); //cvjs_setTopMenuXML("floorPlan", "cadviewer_full_commands_01.xml", "/app/cv/cv-pro/menu_config/");
// cvjs_displayZoomIconBar(false, "floorPlan");
// cvjs_measurementLinesScaleFactor(1.0);
/* end vertical icon bar */
// Initialize CADViewer - needs the div name on the svg element on page that contains CADViewerJS and the location of the
// main application "app" folder. It can be either absolute or relative
// SETTINGS OF THE COLORS OF SPACES
cvjsRoomPolygonBaseAttributes = {
fill: '#D3D3D3', // #FFF #ffd7f4
"fill-opacity": "0.15", // 0.1
stroke: '#CCC',
'stroke-width': 1,
'stroke-linejoin': 'round',
};
cvjsRoomPolygonHighlightAttributes = {
fill: '#a4d7f4',
"fill-opacity": "0.5",
stroke: '#a4d7f4',
'stroke-width': 3
};
cvjsRoomPolygonSelectAttributes = {
fill: '#5BBEF6',
"fill-opacity": "0.5",
stroke: '#5BBEF6',
'stroke-width': 3
};
/** FIXED POP-UP MODAL
// THIS IS THE DESIGN OF THE pop-up MODAL WHEN CLICKING ON SPACES
var my_cvjsPopUpBody = "<div class=\"cvjs_modal_1\" onclick=\"my_own_clickmenu1();\">Hello<br>Menu 1<br><i class=\"glyphicon glyphicon-transfer\"></i></div>";
my_cvjsPopUpBody += "<div class=\"cvjs_modal_1\" onclick=\"my_own_clickmenu2();\">Custom<br>Menu 2<br><i class=\"glyphicon glyphicon-info-sign\"></i></div>";
my_cvjsPopUpBody += "<div class=\"cvjs_modal_1\" onclick=\"cvjs_zoomHere();\">Zoom<br>Here<br><i class=\"glyphicon glyphicon-zoom-in\"></i></div>";
// Initialize CADViewer - needs the div name on the svg element on page that contains CADViewerJS and the location of the
// And we intialize with the Space Object Custom values
cvjs_InitCADViewer_highLight_popUp_app("floorPlan", ServerUrl+"app/", cvjsRoomPolygonBaseAttributes, cvjsRoomPolygonHighlightAttributes, cvjsRoomPolygonSelectAttributes, my_cvjsPopUpBody );
**/
/** DYNAMIC POP-UP MODAL ON CALLBACK **/
// set funtional attributes for popup menu body when clicking on an object
// This modal is populated on callback, so this is a placeholder only
var my_cvjsPopUpBody = "";
// Setting Space Object Modals Display to be based on a callback method - VisualQuery mode -
// see documentation:
// myCustomPopUpBody is the method with the template for the call back modal - required to be implemented
// populateMyCustomPopUpBody is the method which on click will populate the call-back modal dynamically
cvjs_setCallbackForModalDisplay(true, myCustomPopUpBody, populateMyCustomPopUpBody);
// Initialize CADViewer - needs the div name on the svg element on page that contains CADViewerJS and the location of the
// And we intialize with the Space Object Custom values
cvjs_InitCADViewer_highLight_popUp_app("floorPlan", ServerUrl+"app/", cvjsRoomPolygonBaseAttributes, cvjsRoomPolygonHighlightAttributes, cvjsRoomPolygonSelectAttributes, my_cvjsPopUpBody );
// set the location to license key, typically the js folder in main app application folder ../app/js/
cvjs_setLicenseKeyPath(ServerUrl+"/app/cv/");
// alternatively, set the key directly, by pasting in the cvKey portion of the cvlicense.js file, note the JSON \" around all entities
//cvjs_setLicenseKeyDirect('{ \"cvKey\": \"00110010 00110010 00110000 00110010 00110001 00111001 00111001 00110001 00110100 00111000 00110001 00110100 00110101 00110001 00110101 00110111 00110001 00110101 00111001 00110001 00110100 00111000 00110001 00110101 00110010 00110001 00110100 00110101 00110001 00110100 00110001 00110001 00110100 00110000 00110001 00111001 00110111 00110010 00110000 00110111 00110010 00110000 00110110 00110010 00110000 00110001 00110010 00110001 00110000 00110010 00110000 00111000 00110010 00110001 00110000 00110010 00110000 00111000 00110010 00110001 00110000 00110010 00110000 00110111 00110001 00111001 00111000 00110010 00110000 00110110 00110010 00110000 00111000 00110010 00110000 00110111 00110001 00111001 00111001 00110010 00110001 00110001 00110010 00110000 00111000 00110010 00110000 00110111 00110010 00110001 00110001 00110010 00110000 00110101 00110010 00110000 00111000 \" }');
// Sets the icon interface for viewing, layerhanding, measurement, etc. only
//cvjs_setIconInterfaceControls_ViewingOnly();
// disable canvas interface. For developers building their own interface
// cvjs_setIconInterfaceControls_DisableIcons(true);
// Set the icon interface to include image handling
// cvjs_setIconInterfaceControls_ImageInsert();
cvjs_allowFileLoadToServer(true);
// cvjs_setUrl_singleDoubleClick(1);
// cvjs_encapsulateUrl_callback(true);
// NOTE BELOW: THESE SETTINGS ARE FOR SERVER CONTROLS FOR UPLOAD OF REDLINES
cvjs_setRedlinesAbsolutePath(ServerUrl+'/content/redlines/fileloader_610/', ServerLocation+'/content/redlines/fileloader_610/');
// NOTE ABOVE: THESE SETTINGS ARE FOR SERVER CONTROLS FOR UPLOAD OF REDLINES
// NOTE BELOW: THESE SETTINGS ARE FOR SERVER CONTROLS FOR UPLOAD OF FILES AND FILE MANAGER
// I am setting the full path to the location of the floorplan drawings (typically /home/myserver/drawings/floorplans/)
// and the relative location of floorplans drawings relative to my current location
// as well as the URL to the location of floorplan drawings with username and password if it is protected "" "" if not
// cvjs_setServerFileLocation(ServerLocation+'/content/drawings/dwg/', '../content/drawings/dwg/', ServerUrl+'/content/drawings/dwg/',"","");
cvjs_setServerFileLocation_AbsolutePaths(ServerLocation+'/content/drawings/dwg/', ServerUrl+'content/drawings/dwg/',"","");
// NOTE ABOVE: THESE SETTINGS ARE FOR SERVER CONTROLS FOR UPLOAD OF FILES AND FILE MANAGER
cvjs_setInsertImageObjectsAbsolutePath(ServerUrl+'drawings/demo/inserted_image_objects/', ServerLocation+'/drawings/demo/inserted_image_objects/');
// NOTE BELOW: THESE SETTINGS ARE FOR SERVER CONTROLS OF SPACE OBJECTS
// Set the path to folder location of Space Objects
cvjs_setSpaceObjectsAbsolutePath(ServerUrl+'/content/spaceObjects/demoUsers/', ServerLocation+'/content/spaceObjects/demoUsers/');
// NOTE ABOVE: THESE SETTINGS ARE FOR SERVER CONTROLS OF SPACE OBJECTS
// NOTE BELOW: THESE SETTINGS ARE FOR SERVER CONTROLS FOR CONVERTING DWG, DXF, DWF files
// settings of Converter Path, Controller and Converter Name are done in the XXXHandlerSettings.js files
cvjs_conversion_clearAXconversionParameters();
cvjs_conversion_addAXconversionParameter("last", "");
// cvjs_conversion_addAXconversionParameter("firstlayout", "");
cvjs_conversion_addAXconversionParameter("fpath", ServerLocation + "/converters/ax2022/windows/fonts/");
// cvjs_conversion_addAXconversionParameter ("RL", "IDB");
// cvjs_conversion_addAXconversionParameter ("TL", "IDB_REF");
// cvjs_conversion_addAXconversionParameter ("hlall", "");
// NOTE ABOVE: THESE SETTINGS ARE FOR SERVER CONTROLS FOR CONVERTING DWG, DXF, DWF files
// Load file - needs the svg div name and name and path of file to load
cvjs_LoadDrawing("floorPlan", FileName );
// set maximum CADViewer canvas side
cvjs_resizeWindow_position("floorPlan" );
// alternatively set a fixed CADViewer canvas size
// cvjs_resizeWindow_fixedSize(800, 600, "floorPlan");
}); // end ready()
$(window).resize(function() {
// set maximum CADViewer canvas side
cvjs_resizeWindow_position("floorPlan" );
// alternatively set a fixed CADViewer canvas size
// cvjs_resizeWindow_fixedSize(800, 600, "floorPlan");
cvjs_LoadTopIconMenuXML_preconfigured("floorPlan"); //cvjs_setTopMenuXML("floorPlan", "cadviewer_full_commands_01.xml", "/app/cv/cv-pro/menu_config/");
});
Initialization Sample - Framework ReactJS
In an npm installation referencing cadviewer import class, the initialization is done on componentDidMount with _handleWindowResize implemented for redraw.
Note that when installing via npm, all callback methods in CADViewer needs to be injected back into the CADViewer class component.
class CADViewer extends Component {
async componentDidMount () {
// window.alert("loading 6.4.05");
window.addEventListener('resize', this._handleWindowResize);
// connecting to Servlets Server
//var ServerBackEndUrl = "http://localhost:8080/cadviewer/";
//var ServerLocation = "c:/xampp/tomcat/webapps/cadviewer/";
// Connecting to .NET Server
//var ServerBackEndUrl = "http://localhost:53737/";
//var ServerLocation = "c:/visualstudio/cadviewer/";
// Standard NodeJS Server
var ServerBackEndUrl = "http://localhost:3000/";
var ServerLocation = ""; // leave blank
// ONLINE TEST SERVER
//var ServerBackEndUrl = "http://convertcad.online:3000/";
//var ServerLocation = "/home/cadviewer/convertcad.online/cadviewer-conversion-server/";
// Standard Front-end
var ServerUrl = "http://localhost:8000/";
//var FileName = ServerBackEndUrl+ "/content/drawings/dwg/hq17_2spaces.dwg";
var FileName = ServerBackEndUrl+ "/content/drawings/dwg/hq17_.dwg";
cadviewer.cvjs_debugMode(true);
// cadviewer.cvjs_setLeafletJS(true);
// Set all paths, and handlers, changes these depending on back-end server
cadviewer.cvjs_setAllServerPaths_and_Handlers(ServerBackEndUrl, ServerUrl, ServerLocation, "NodeJS", "ReactJS", "floorPlan");
// Setting all callback methods - they have to be injected into the CADViewer class componnet
cadviewer.cvjs_setCallbackMethod("cvjs_OnLoadEnd", cvjs_OnLoadEnd);
cadviewer.cvjs_setCallbackMethod("cvjs_graphicalObjectOnChange", cvjs_graphicalObjectOnChange);
cadviewer.cvjs_setCallbackMethod("cvjs_OnLoadEndRedlines", cvjs_OnLoadEndRedlines);
cadviewer.cvjs_setCallbackMethod("cvjs_ObjectSelected", cvjs_ObjectSelected);
cadviewer.cvjs_setCallbackMethod("cvjs_measurementCallback", cvjs_measurementCallback);
cadviewer.cvjs_setCallbackMethod("cvjs_CalibrateMeasurementCallback", cvjs_CalibrateMeasurementCallback);
cadviewer.cvjs_setCallbackMethod("cvjs_Url_callback", cvjs_Url_callback);
cadviewer.cvjs_setCallbackMethod("cvjs_loadSpaceImage_UserConfiguration", cvjs_loadSpaceImage_UserConfiguration);
cadviewer.cvjs_setCallbackMethod("cvjs_NoObjectSelected", cvjs_NoObjectSelected);
cadviewer.cvjs_setCallbackMethod("cvjs_SVGfileObjectClicked", cvjs_SVGfileObjectClicked);
cadviewer.cvjs_setCallbackMethod("cvjs_SVGfileObjectMouseEnter", cvjs_SVGfileObjectMouseEnter);
cadviewer.cvjs_setCallbackMethod("cvjs_SVGfileObjectMouseLeave", cvjs_SVGfileObjectMouseLeave);
cadviewer.cvjs_setCallbackMethod("cvjs_SVGfileObjectMouseMove", cvjs_SVGfileObjectMouseMove);
cadviewer.cvjs_setCallbackMethod("cvjs_ParseDisplayDataMaps", cvjs_ParseDisplayDataMaps);
cadviewer.cvjs_setCallbackMethod("cvjs_QuickCountCallback", cvjs_QuickCountCallback);
cadviewer.cvjs_setCallbackMethod("cvjs_OnHyperlinkClick", cvjs_OnHyperlinkClick);
cadviewer.cvjs_setCallbackMethod("cvjs_setUpStickyNotesRedlines", cvjs_setUpStickyNotesRedlines);
cadviewer.cvjs_setCallbackMethod("custom_host_parser_PopUpMenu", custom_host_parser_PopUpMenu);
cadviewer.cvjs_setCallbackMethod("cvjs_customHostParser", cvjs_customHostParser);
cadviewer.cvjs_setCallbackMethod("drawPathsGeneric", drawPathsGeneric );
cadviewer.cvjs_setCallbackMethod("cvjs_callbackForModalDisplay", cvjs_callbackForModalDisplay);
cadviewer.cvjs_setCallbackMethod("cvjs_populateMyCustomPopUpBody", cvjs_populateMyCustomPopUpBody);
cadviewer.cvjs_setCallbackMethod("cvjs_customModalPopUpBody", cvjs_customModalPopUpBody);
cadviewer.cvjs_setCallbackMethod("cvjs_NoObjectSelectedStickyNotes", cvjs_NoObjectSelectedStickyNotes);
cadviewer.cvjs_setCallbackMethod("cvjs_NoObjectSelectedHyperlinks", cvjs_NoObjectSelectedHyperlinks);
cadviewer.cvjs_setCallbackMethod("cvjs_ObjectSelectedHyperlink", cvjs_ObjectSelectedHyperlink);
cadviewer.cvjs_setCallbackMethod("cvjs_ObjectSelectedStickyNotes", cvjs_ObjectSelectedStickyNotes);
cadviewer.cvjs_setCallbackMethod("cvjs_saveStickyNotesRedlinesUser", cvjs_saveStickyNotesRedlinesUser);
cadviewer.cvjs_setCallbackMethod("cvjs_loadStickyNotesRedlinesUser", cvjs_loadStickyNotesRedlinesUser);
cadviewer.cvjs_setCallbackMethod("my_own_clickmenu1", my_own_clickmenu1);
cadviewer.cvjs_setCallbackMethod("my_own_clickmenu2", my_own_clickmenu2);
cadviewer.cvjs_setCallbackMethod("cvjs_popupTitleClick", cvjs_popupTitleClick);
cadviewer.cvjs_setCallbackMethod("cvjs_mousedown", cvjs_mousedown);
cadviewer.cvjs_setCallbackMethod("cvjs_click", cvjs_click);
cadviewer.cvjs_setCallbackMethod("cvjs_dblclick", cvjs_dblclick);
cadviewer.cvjs_setCallbackMethod("cvjs_mouseout", cvjs_mouseout);
cadviewer.cvjs_setCallbackMethod("cvjs_mouseover", cvjs_mouseover);
cadviewer.cvjs_setCallbackMethod("cvjs_mouseleave", cvjs_mouseleave);
cadviewer.cvjs_setCallbackMethod("cvjs_mouseenter", cvjs_mouseenter);
cadviewer.cvjs_setCallbackMethod("cvjs_graphicalObjectCreated", cvjs_graphicalObjectCreated);
// END set all callback methods
// Location of installation folders
// NOTE: THE LOCATION OF THE ServerLocation/ServerUrl VARIABLES ARE DEFINED IN /cadviewer/app/cv/XXXHandlerSettings.js
// var ServerLocation =
// var ServerUrl =
cadviewer.cvjs_CADViewerPro(true);
// Pass over the location of the installation, will update the internal paths
cadviewer.cvjs_PrintToPDFWindowRelativeSize(0.8);
cadviewer.cvjs_setFileModalEditMode(false);
// For "Merge DWG" / "Merge PDF" commands, set up the email server to send merged DWG files or merged PDF files with redlines/interactive highlight.
// See php / xampp documentation on how to prepare your server
cadviewer.cvjs_emailSettings_PDF_publish("From CAD Server", "my_from_address@mydomain.com", "my_cc_address@mydomain.com", "my_reply_to@mydomain.com");
// CHANGE LANGUAGE - DEFAULT IS ENGLISH
cadviewer.cvjs_loadCADViewerLanguage("English"); //cadviewer.cvjs_loadCADViewerLanguage("English", "/app/cv/cv-pro/language_table/cadviewerProLanguage.xml");
// Available languages: "English" ; "French, "Korean", "Spanish", "Portuguese", "Chinese-Simplified", "Chinese-Traditional"
// Set Icon Menu Interface controls. Users can:
// 1: Disable all icon interfaces
// cvjs_displayAllInterfaceControls(false, "floorPlan"); // disable all icons for user control of interface
// 2: Disable either top menu icon menus or navigation menu, or both
//cvjs_displayTopMenuIconBar(false, "floorPlan"); // disable top menu icon bar
//cvjs_displayTopNavigationBar(false, "floorPlan"); // disable top navigation bar
// 3: Users can change the number of top menu icon pages and the content of pages, based on a configuration file in folder /cadviewer/app/js/menu_config/
cadviewer.cvjs_setTopMenuXML("floorPlan", "cadviewer_full_commands_01.xml"); //cadviewer.cvjs_setTopMenuXML("floorPlan", "cadviewer_full_commands_01.xml", "/cadviewer/app/cv/cv-pro/menu_config/");
// Initialize CADViewer - needs the div name on the svg element on page that contains CADViewerJS and the location of the
// main application "app" folder. It can be either absolute or relative
var BaseAttributes = {
fill: '#d8e1e3', //'#d8e1e3', // '#ffd7f4', //'#D3D3D3', // #FFF #ffd7f4
"fill-opacity": "0.1",
stroke: '#CCC', // #CCC
'stroke-width': 0.5,
'stroke-opacity': "0.7",
'stroke-linejoin': 'round'
};
// Location Highlight Attribute (no separation between location types)
var HighlightAttributes = {
fill: '#a4d7f4',
"fill-opacity": "0.8",
stroke: '#a4d7f4',
'stroke-width': 1,
'stroke-opacity': "0.8"
};
// Location Select Attribute (no separation between location types)
var SelectAttributes = { // fill: '#5BBEF6',
fill: '#5BBEF6',
"fill-opacity": "0.8",
stroke: '#5BBEF6',
'stroke-width': 1,
'stroke-opacity': "0.8"
};
/** FIXED POP-UP MODAL **/
// THIS IS THE DESIGN OF THE pop-up MODAL WHEN CLICKING ON SPACES
// KEEP METHODS NAME AS IS FOR NOW...............
var my_cvjsPopUpBody = "<div class=\'cvjs_modal_1\' id=\'my_own_clickmenu1()\'>Custom<br>Menu 1<br><i class=\'fa fa-undo\'></i></div>";
my_cvjsPopUpBody += "<div class=\'cvjs_modal_1\' id=\'my_own_clickmenu2()\'>Custom<br>Menu 2<br><i class=\'fa fa-info-circle\'></i></div>";
my_cvjsPopUpBody += "<div class=\'cvjs_modal_1\' id=\'cvjs_zoomHere()\'>Zoom<br>Here<br><i class=\'fa fa-search-plus\'></i></div>";
// Initialize CADViewer - needs the div name on the svg element on page that contains CADViewerJS and the location of the
// And we intialize with the Space Object Custom values
// cvjs_InitCADViewer_highLight_popUp_app("floorPlan", ServerUrl+"app/", cvjsRoomPolygonBaseAttributes, cvjsRoomPolygonHighlightAttributes, cvjsRoomPolygonSelectAttributes, my_cvjsPopUpBody);
// cvjs_InitCADViewer_highLight_popUp_app("floorPlan", ServerUrl+ "/cadviewer/app/", cvjsRoomPolygonBaseAttributes, cvjsRoomPolygonHighlightAttributes, cvjsRoomPolygonSelectAttributes, my_cvjsPopUpBody );
cadviewer.cvjs_InitCADViewer_highLight_popUp_app("floorPlan", "/cadviewer/app/", BaseAttributes, HighlightAttributes, SelectAttributes, my_cvjsPopUpBody );
// set the location to license key, typically the js folder in main app application folder ../app/cv/
//cadviewer.cvjs_setLicenseKeyPath("/cadviewer/app/cv/");
// alternatively, set the key directly, by pasting in the cvKey portion of the cvlicense.js file, note the JSON \" around all entities
cadviewer.cvjs_setLicenseKeyDirect('{ \"cvKey\": \"00110010 00110010 00110000 00110001 00110010 00110000 00110100 00110001 00110100 00111000 00110001 00110100 00110101 00110001 00110101 00110111 00110001 00110101 00111001 00110001 00110100 00111000 00110001 00110101 00110010 00110001 00110100 00110101 00110001 00110100 00110001 00110001 00110100 00110000 00110001 00111001 00110111 00110010 00110000 00110111 00110010 00110000 00110110 00110010 00110000 00110001 00110010 00110001 00110000 00110010 00110000 00111000 00110010 00110001 00110000 00110010 00110000 00111000 00110010 00110001 00110000 00110010 00110000 00110111 00110001 00111001 00111000 00110010 00110000 00110110 00110010 00110000 00111000 00110010 00110000 00110110 00110010 00110000 00110101 00110010 00110001 00110001 00110010 00110000 00111000 00110010 00110000 00110111 00110010 00110001 00110001 00110010 00110000 00110101 00110010 00110000 00110111 00110001 00111001 00111000 00110001 00110100 00110001 00110001 00110100 00110100 00110001 00110101 00111001 00110001 00110101 00110111 00110001 00110101 00110101 \" }');
// Sets the icon interface for viewing, layerhanding, measurement, etc. only
//cvjs_setIconInterfaceControls_ViewingOnly();
// disable canvas interface. For developers building their own interface
// cvjs_setIconInterfaceControls_DisableIcons(true);
cadviewer.cvjs_allowFileLoadToServer(true);
// cvjs_setUrl_singleDoubleClick(1);
// cvjs_encapsulateUrl_callback(true);
// NOTE BELOW: THESE SETTINGS ARE FOR SERVER CONTROLS FOR UPLOAD OF REDLINES
// NOTE BELOW: THESE SETTINGS ARE FOR SERVER CONTROLS FOR UPLOAD OF REDLINES, FILES, SPACE OBJECTS
cadviewer.cvjs_setServerFileLocation_AbsolutePaths(ServerLocation+'/content/drawings/dwg/', ServerUrl+'content/drawings/dwg/',"","");
cadviewer.cvjs_setRedlinesAbsolutePath(ServerBackEndUrl+'/content/redlines/fileloader_610/', ServerLocation+'/content/redlines/fileloader_610/');
cadviewer.cvjs_setSpaceObjectsAbsolutePath(ServerBackEndUrl+'/content/spaceObjects/', ServerLocation+'/content/spaceObjects/');
cadviewer.cvjs_setInsertImageObjectsAbsolutePath(ServerBackEndUrl+'/content/inserted_image_objects/', ServerLocation+'/content/inserted_image_objects/')
cadviewer.cvjs_conversion_clearAXconversionParameters();
// cadviewer.cvjs_conversion_addAXconversionParameter("lw", "0.3");
// cadviewer.cvjs_conversion_addAXconversionParameter("lwmin", "0.3");
// process layers for spaces RL/TL
cadviewer.cvjs_conversion_addAXconversionParameter("RL", "RM_");
cadviewer.cvjs_conversion_addAXconversionParameter("TL", "RM_TXT");
// calculate areas of spaces
cadviewer.cvjs_conversion_addAXconversionParameter("LA", "");
// process all handles
// cadviewer.cvjs_conversion_addAXconversionParameter("HLALL", "");
// open the last saved view in the file
cadviewer.cvjs_conversion_addAXconversionParameter("last", "");
// Load file - needs the svg div name and name and path of file to load
cadviewer.cvjs_LoadDrawing("floorPlan", FileName );
// set maximum CADViewer canvas side
cadviewer.cvjs_resizeWindow_position("floorPlan" );
// alternatively set a fixed CADViewer canvas size
// cvjs_resizeWindow_fixedSize(600, 400, "floorPlan");
}
componentWillUnmount () {
window.removeEventListener('resize', this._handleWindowResize);
}
_handleWindowResize () {
console.log("_handleResize")
// we put the resize in a try-catch in case the init_CADViewer() has not initialized yet, and values are zero
try{
cadviewer.cvjs_resizeWindow_position("floorPlan" );
// window.vjs_resizeWindow_fixedSize(600, 400, "floorPlan");
}
catch(err) {console.log(err);}
}
render(){
return (
<div className="CADViewer">
{/*This is the CADViewer floorplan div declaration*/}
<div id="floorPlan" >
</div>
{/*End of CADViewer declaration*/}.
</div>
);
}