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 SVG in correct order, refer to: Controlling How Enterprise Graphics are Published. in ARCHIBUS User Help.

The options will appear as:

Multiple assets

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

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

Copyright © 1984-2018, ARCHIBUS, Inc. All rights reserved.