HTML Drawing Control

Place symbols from a legend on a drawing

You can provide users with the ability to drag and drop symbols from a legend onto an HTML drawing. For example, a user working with an equipment view may want to drop equipment symbols onto the floor plan drawing. This is known as placement.

Clicking on a dropped symbol activates grips, allowing you to rotate, delete, or edit the symbol. For example, in the image below, the symbol at the top of the list has been dropped into the floor plan.

You can also offer these options to the user:

Copy Assets searches for all dropped asset symbols in the drawing, and copies those nodes to an array
Reload Reloads the original, base drawing (without the dropped symbols)
Paste Assets re-inserts the previously saved symbols onto the reloaded drawing. “Capture image” will convert and render a zoomed in portion of the .svg into a .png imag
Group deactivates pan/zoom and enables you to select a group of placement symbols. You can then move, clone, or delete the symbols as a group

The following section walks through major setup steps.

Note: Both redline features and symbols from a legend can exist in the same view.

Set up a view for placing legend symbols

  1. In the .axvw, add calls to the necessary .js and .css files, such as:

    <css file="placement.css"/>

    <js file="ab-svg-placement.js"/>

    <js file="ab-svg-placement-control.js"/>

  1. Add a div for the legend. Ensure that class is ”legend”. You can also specify a height to control the legend size and to enable scrolling for the legend.

    <div id="legend" class="legend" style="height: 250px; overflow-x:hidden"></div>

  1. Add a div for the drawing.

    <div id="drawingId"></div>

  2. Follow the regular steps to load the drawing into the drawing div. For Web Central, use the setControlPanel method to keep the control in sync with the window size.

    // resize specified DOM element whenever the panel size changes this.drawingPanel.setContentPanel(Ext.get('panelId'));
    this.drawingPanel.setContentPanel(Ext.get('drawingId'));

  3. In the .js file, create an instance of the control:

    this.placementControl = new Ab.svg.PlacementControl (drawingId, panelId, legendId, assetGroupId, assetClassId, parameters);

    for example: 

    this.placementControl = new Ab.svg.PlacementControl ("drawingId", "panelId ", "legend", 'eq-assets', 'eq-asset', parameters);

  4. In the .js file, load the legend via loadLegend():

    5. var control = this;
    this.placementControl.loadLegend({
    file: “legendFile.svg”,
    afterLoad: function() {
    control.placementControl.setup();
    }
    });

Generally, the callback is the placementControl.setup(), which allows you to establish the drag-and-drop relationship between the legend and the drawing. This method also allows you to specify which layer onto which you want to drop the asset.

this.placementControl.setup()

API

Method Description
loadLegend

Loads the legend.

Parameters:

• config Object. Object of possible options.

Possible options are:

- file String. File for the legend. i.e. legend.svg

- afterLoad Function. Callback function.

- useService Boolean. Whether to use DrawingSvgService to fetch the legend from enterprise graphics folder
setup

This is a typical afterLoad value for loadLegend. This method establishes the drag and drop relationship between the placement legend and the drawing.

Parameters: None
attachGroupListener Attach/reattach listener for the “Group” checkbox. The “Group” checkbox allows you to move, clone, or delete selected placement symbols as a group. The “Group” checkbox should contain an id with the following naming convention: legendId + “_group”.
copyAssets

Each asset dropped onto the drawing will be tagged with a “dropped” class. This method queries for all nodes under the specified layer with for this class. Returns an array of SVGGElements.

Returns:

• Array of SVGGElements dropped onto the drawing
pasteAssets

Places an array of SVGGElements/symbols onto the drawing. Hide interactive grips.

Parameters:

• assetsToPaste – Array. Array of SVGGElements to paste onto the drawing
getControl Returns the placement control.

Sample View

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