HTML Drawing Control

Use asset and add-on event handlers

There are two types of event handlers:

  • Asset event handler
  • Add-on event handlers

Asset event handler

To link an asset type with an event handler, define one event handler for each event and each asset type in ‘events’ parameter, then pass them to Drawing.DrawingControl’s constructor.

Example:

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);

Note: The contextmenu event is in fact a "right-click" event, for which you can create your own event or context menu items as needed.

Add-on event handlers

Several add-ons support custom event handler, you pass the event handler to AddOnsConfig .

AssetTooltip

You need to define one custom event for each asset type, the event will fire  when the user mouses over the asset type.

parameters['addOnsConfig'] = {...
'AssetTooltip': {handlers: [{assetType: 'rm', handler: this.onMouseOverRm},
{assetType: 'eq', handler: this.onMouseOverEq},
{assetType: 'jk', handler: this.onMouseOverJack} };

Note: The Drawing Control will only show the tooltip when user hoovers the mouse over the asset for extensive time (0.5 sec). This approach avoids showing tooltips all over the screen when the user moves the mouse around the drawing.

InfoWindow

You can define a custom event when user close the InfoWindow .

parameters['addOnsConfig'] = {... { 'InfoWindow': {divId: "svgDiv"},  customEvent: this.onCloseInfoWindow} };

SelectWindow

You can define a custom event for when the user releases the mouse after the window selection action. (mouse click-drag-release)

parameters['addOnsConfig'] = {...
{'SelectWindow': {divId: "svgDiv"},  customEvent: this.onSelectWindow}
};

LayerPopup

You can define a custom event when the user checks or unchecks the asset layer.

parameters['addOnsConfig'] = {...
{ 'LayersPopup': {divId: "svgDiv"},  customEvent: onCheckBoxChanged}s };

DatasourceSelector

You can define a custom event after user changes highlight or label Datasource selection using dropdown list.

parameters['addOnsConfig'] = {... { 'DatasourceSelector': {panelId: "svg_ctrls", afterSelectedDataSourceChanged: this.afterSelectedDataSourceChanged}, };

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