HTML Drawing Control

Use Navigation Toolbar to navigate a drawing

The Navigation Toolbar is an optional add-on that you can specify in the addOnsConfig parameter before loading the HTML drawing control.

var parameters = new Ab.view.ConfigObject();
parameters['addOnsConfig'] = { 'NavigationToolbar': {divId: "svgDiv"},…};

Navigation toolbar contains the following controls: Zoom In, Zoom Out, Zoom Extents, Zoom Into Window Area, and Select Multiple Assets.

Navigation mode

Zooming for navigation mode

Users have two ways of zooming the drawing:

Navigation toolbar provides a zooming range check so the zooming will stop if zoom factor is out of boundary. The default range is 0.2-10.

• Zoom In
  • Click on the icon will zoom in the drawing by 1.25 from center.
  • The allowed zoom range is 0.2-10, where the icon will be enabled (shown blue)
  • The max zoom factor is 10, the icon will be disabled (shown red) if the zoom factor is more than 10.
• Zoom Out
  • Click on the icon will zoom in the drawing by 0.8 from center.
  • The allowed zoom range is 0.2-10, where the icon will be enabled (shown blue)
  • The max zoom factor is 0.2, the icon will be disabled (shown red) if the zoom factor is less than 0.2.
• Zoom Extents
  • Click on the icon will extend the drawing to the container.
  • When drawing is loaded, it will be in 'zoom extents" state (shown red).
  • When the drawing is not in "zoom extents" state when user zoom in or out, the icon will show blue.

Notes:
The user can execute any combination of zoom in/out action multiple times as needed.
If the zoom scale exceeds the max zoom factor (10), the zoom in icon (blue plus sign) ) will be disabled (will be shown in red) and further action will not zoom in.
If the zoom scale is less than the min zoom factor (0.2), the zoom out icon (blue minus sign) will be disabled (will be shown red) and further action will not zoom out.

Panning in navigation mode

Users can use mouse click-move-release action to pan the drawing, except when they are in "Zoom into Selected Window Area" or "Select Multiple Assets" mode.

Drawing mode

Zooming in drawing mode

• Zoom into selected window area
  • By default, the icon is inactive (shown blue). User can activate the mode by clicking on icon (shown red).
  • Once the icon is activated, user can mouse click-move-release to select a window area, the drawing will zoom in/out to the area after user releases the mouse.
  • If user selects from upper left then move to bottom right, it will be a zoom-in action; if user selects from bottom right to top left, it will be a zoom-out action.
  • User can de-activate the mode by clicking on icon again (shown blue).
• Select multiple assets.
• Zoom into selected window area.
• By default, the icon is inactive (shown in blue). The user can activate the mode by clicking on the icon (shown red). Once the icon is activated, the user can mouse click-move-release to select a window area; all assets that are selected (including partially selected) will be highlighted after user releases the mouse. User can execute this action multiple times to select different parts of the drawing.
• The user can click on and individual asset to unselect the asset, one at a time.
• The user can de-activate the mode by clicking on the icon again (shown blue).
• The highlight color comes from the bean property drawingControlConfig/highlight/selected/fill.color of /WEB-INF/config/context/controls/drawing/controls-drawing.xml.
• To enable ‘Select multiple assets’ mode, you need to set the parameter before the drawing control is constructed:

var parameters = new Ab.view.ConfigObject(); parameters['multipleSelectionEnabled'] = 'true';

Note that you will need to use string 'true' instead of Boolean value true.

Then, you need to specify the asset types and related events:

parameters['addOnsConfig'] = { 'SelectWindow': {assetType: "rm;eq", customEvent: this.onSelectWindow}, …}

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