HTML Drawing Control

Select assets in a drawing

Single assets

You can enable single asset selection by passing 'click' event handlers to the drawing control's events JSON parameter. You need to define one event handler for each asset type, then construct drawing control.

parameters['events'] = [ {'eventName': 'contextmenu', 'assetType' : 'rm', 'handler' : this.onContextMenuRoom}, {'eventName': 'click', 'assetType' : 'rm', 'handler' : this.onClickAsset}, {'eventName': 'click', 'assetType' : 'eq', 'handler' : this.onClickEquipment, 'bbox': {width: 25, height: 32}}, {'eventName': 'click', 'assetType' : 'pn', 'handler' : this.onClickAsset}, {'eventName': 'click', 'assetType' : 'jk', 'handler' : this.onClickAsset}, {'eventName': 'click', 'assetType' : 'fp', 'handler' : this.onClickAsset}]; var svgControl = new Drawing.DrawingControl("svgDiv", "svg_ctrls", parameters);

Then specify a custom event handler for each asset type in view's controller. To highlight the asset when clicking, call the toggleAssetSelection() API.

onClickAsset: function(params, drawingController){ // toggle the room if clicked drawingController.getController("SelectController").toggleAssetSelection (params['svgId'], params['assetId']); }

Note that the SVG's layers are published in order: for example, the smaller assets, such as equipment and jacks, are placed in front of the larger assets, such as rooms. However, in some case, your asset's order might not be ideal per view.

To handle this, the drawing control provides a per-view parameter: topLayers . You need to specify the topLayers property in the parameters so that these layers can be re-arranged to your per-view preference.

parameters['topLayers'] = 'eq;pn;jk;fp';

For information about how to publish a drawing's layers in the correct order, see the User Help topic, CAD/BIM User's Guide / Smart Client Extension for AutoCAD / Publish Drawings for Mobile, GIS, and the Web / Controlling How Enterprise Graphics are Published.

The options will appear as:

Multiple assets

You can enable multiple asset selection by one or both of these methods:

• Set 'multipleSelectionEnabled' to true
  • parameters['multipleSelectionEnabled'] = 'true';
    
  • Mouse-click multiple times in the drawing to select more than one asset.
    
    
• Turn on the Navigation Toolbar and Asset Selection Window add-ons with the following:
  
  •  parameters['addOnsConfig'] = {'NavigationToolbar': {divId: "svgDiv"}, 'SelectWindow': {assetType: "rm;eq", customEvent: this.onSelectWindow}…};
  • Click the Select Multiple Asset(s) icon , then mouse click-drag-release to select the desired assets.
    

Example view: http://localhost:8080/archibus/schema/ab-products/solutions/programming/drawing/ab-ex-dwg-html-control-multiple-select.axvw