Vwa.Shape.addHighlight Method

Applies to: SharePoint Server 2010

Draws a rectangular highlight around the bounding box of the shape.

var value = Shape.addHighlight(integer width, string color)

Parameters

width A positive integer that specifies the width of the highlight's stroke in pixels.

color A string that specifies the color of the highlight. It must have the form "#RRGGBB", where each letter represents a hexadecimal digit between 0 and F, and where RR is the red value between 0 and 0xFF (255), GG the green value between 0 and 0xFF (255), and BB is the blue value between 0 and 0xFF (255).

Return Value

Void Returns nothing.

Remarks

A shape can have only one highlight. Before a highlight is added, any existing highlight associated with a shape is removed automatically.

For more information about how to add a Visio Web Access Web Part to a SharePoint Web Parts page, see Customizing Visio Web Drawings in the Visio Web Access Web Part.

Example

The following example creates an HTML text box and button in the Content Editor Web Part. When the button is clicked, the example checks the currently displayed page in the Web Drawing for a shape that matches the string provided in the text box. If a matching shape is found, the shape is highlighted and the Web Part is centered on the shape.

<script type="text/javascript">

// Create the HTML input controls.
document.write("<div> Shape to search for: " +
               "<input type='text' id='shapename' />" + 
               "<input type='button' id='search' value='Search' style='width:100px;height:22px' onclick='searchPage()' />" +
               "&nbsp;<span id='output' style='color:#FF0000'></span></div>");

// Declare global variables.
var vwaControl;
var vwaPage;
var vwaShapes;
var vwaShape;
var shapeBounds;
var searchOutput;

// Hook into the AJAX Sys.Application.load event.
Sys.Application.add_load(onApplicationLoad)

// Capture a reference to the current session of the Visio Web Access Web Part.
function onApplicationLoad() {
    try{
        vwaControl= new Vwa.VwaControl(getVWAWebPartID());
        vwaControl.addHandler("diagramcomplete", onDiagramComplete);
    }
    catch(err){
        alert(err);
    }
}

// Search the SharePoint page to get the WebPartID# for the Visio Web Access Web Part.
function getVWAWebPartID() {
    
    // Get a NodesList of all the div tags on the page. 
    var divArray = document.getElementsByTagName("div");
    var webPartElementID;
    
    // Iterate through the NodesList to get the node with the class attribute "VisioWebAccess."
    for (var i = 0; i < divArray.length; i++) {
        var node = divArray[i];
        
        // Return the first instance of the Visio Web Access Web Part.
        if (node.className == "VisioWebAccess") {
            webPartElementID = node.parentNode.parentNode.id;
            break;
        }
    }
    return webPartElementID;
}

// Capture references to global variables.
function onDiagramComplete(){
    try{
        vwaPage = vwaControl.getActivePage();
        vwaShapes = vwaPage.getShapes();
        searchOutput = document.getElementById('output');
    }
    catch(err){
        alert(err);
    }
}

// Search the displayed page for the shape specified by the user.
function searchPage() {
    try {
        
        // Remove any highlights currently displayed in the drawing.
        if (vwaShape) {vwaShape.removeHighlight()}
        
        // Get the user's input and get the shape object from the page.
        shapeName = document.getElementById('shapename').value;
        vwaShape = vwaShapes.getItemByName(shapeName);
        
        // Focus drawing on the shape if it is found.
        if (vwaShape) {
            focusOnShape();
        }
        // Provide feedback to the user if the shape is not found.
        else {
           searchOutput.innerHTML = " Shape not found.";
        }
    }
    catch (err) {
        alert(err);
    }
}

// Focus the displayed Web Drawing page on and highlight the shape sought by the user.
function focusOnShape()
{
    var isInView;
    var shapeId = vwaShape.getId();
    var shapeX, shapeY;

    // Get the location of the shape on the page.
    shapeBounds = vwaShape.getBounds();
    shapeX = shapeBounds.x;
    shapeY = shapeBounds.y;
    searchOutput.innerHTML = " Shape at: x = " + shapeX + "px, y = " + shapeY + "px";
    
    // Select the shape the user searched for and highlight it.
    vwaPage.setSelectedShape(shapeId);
    vwaShape.addHighlight(5, "#FF0000");

    // Check whether the shape is currently in view; if not, zoom out of the Web Drawing page.
    isInView = vwaPage.isShapeInView(shapeId);
    if (!isInView){
       vwaPage.setZoom(-1);
    }
}

</script>

See Also

Reference

Vwa.Shape Class

Vwa.Shape Class Methods