Vwa.Shape.addPredefinedOverlay Method
Applies to: SharePoint Server 2010
Creates a predefined visual overlay that is based on the specified type and content, and that is positioned as specified.
var value = Shape.addPredefinedOverlay(Vwa.OverlayType overlayType, string overlayID, string content, [Vwa.HorizontalAlignment horizontalPosition], [Vwa.VerticalAlignment verticalPosition], [integer overlayWidth], [integer overlayHeight])
Parameters
overlayType A Vwa.OverlayType constant that specifies the type of the overlay, text or image.
overlayID A string that specifies the identifier (ID) of the overlay. It must be unique among all the overlay identifiers.
content A string that specifies the content of the predefined overlay. See Remarks for values.
horizontalPosition An optional Vwa.HorizontalAlignment constant that specifies the horizontal position of the center of the overlay, relative to the bounding box of the shape. The default value is Vwa.HorizontalAlignment.center.
verticalPosition An optional Vwa.VerticalAlignment constant that specifies the vertical position of the center of the overlay, relative to the bounding box of the shape. The default value is Vwa.VerticalAlignment.middle.
overlayWidth An optional positive integer that specifies the width of the overlay, in pixels. The default value is 100.
overlayHeight An optional positive integer that specifies the height of the overlay, in pixels. The default value is 50.
Return Value
Object The underlying object that represents the overlay.
Remarks
The overlayType value can be either Vwa.OverlyType.image or Vwa.OverlyType.text.
If overlayType is Vwa.OverlyType.text, content must be the text to be displayed, using a SPAN element if the display mode is Vwa.DisplayMode.raster, or a TextBlock element if the display mode is Vwa.DisplayMode.silverlight.
If overlayType is Vwa.OverlyType.image, content must be the URL of an image to be displayed, using an IMG element if the display mode is Vwa.DisplayMode.raster, or an Image element if the display mode is Vwa.DisplayMode.silverlight.
Shapes can have one or more overlays. The Web Part infrastructure is responsible for zooming and panning overlays with the original drawing.
The underlying object that represents the overlay is either a DIV object if the current display mode is Vwa.DisplayMode.raster, or a Canvas object if the current display mode is Vwa.DisplayMode.silverlight. To determine what the current display mode is, you can use the Vwa.VwaControl.getDisplayMode method.
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 or Silverlight overlay on shapes in a Visio Web Access Web Part when the mouse enters the bounding box of the shape.
<script type="text/javascript">
// Declare global variables.
var vwaControl;
var vwaPage;
var vwaShapes;
var vwaShape;
// 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 and add event handlers.
function onDiagramComplete() {
try{
vwaPage = vwaControl.getActivePage();
vwaShapes = vwaPage.getShapes();
// Remove the handlers from the Visio Web Access Web Part before adding them back.
vwaControl.removeHandler("shapemouseleave", onShapeMouseLeave);
vwaControl.removeHandler("shapemouseenter", onShapeMouseEnter);
vwaControl.addHandler("shapemouseleave", onShapeMouseLeave);
vwaControl.addHandler("shapemouseenter", onShapeMouseEnter);
}
catch(err){
alert(err);
}
}
// Determine whether a shape contains data when the mouse hovers over it.
function onShapeMouseEnter(source, args) {
try{
// Get the shape that raised the event from the arguments passed in.
var shapeId = args;
vwaShape = vwaShapes.getItemById(shapeId);
// Get the shape's data in an array of anonymous objects.
var shapeDataArray = vwaShape.getShapeData();
// Display the shape's data, if the shape has any.
if (shapeDataArray.length > 0) {
displayShapeData(shapeDataArray);
}
}
catch(err){
alert(err);
}
}
// Display shape data over a shape.
function displayShapeData(dataArray) {
// Get the value of the display mode for the Visio Web Access Web Part.
var displayMode = vwaControl.getDisplayMode();
// Test to see what the current display mode is.
if (displayMode == 1) {
// The display mode is Silverlight; add Silverlight graphic overlays.
createOverlaySL(dataArray);
}
else {
// The display mode is raster format; add HTML graphic overlays.
createOverlayHTML(dataArray);
}
}
// Create a Silverlight overlay over a shape.
function createOverlaySL(dataArray) {
// Create formatted XAML fragment to contain the shape data.
var xamlBuilder = "<TextBlock Height='100' Width='100' FontSize='10'>";
// Add HTML to the fragment for each label/value pair in the array of shape data.
for (var i = 0; i < dataArray.length; i++) {
xamlBuilder += dataArray[i].label + ": " + dataArray[i].formattedValue + "<LineBreak/>";
}
xamlBuilder += "</TextBlock>";
vwaShape.addOverlay(
"overlay_" + vwaShape.getId(),
"<Canvas>" +
"<Rectangle Height='100' Width='100' Fill='#880000FF' ></Rectangle>" +
xamlBuilder +
"</Canvas>",
1,
1,
100,
100);
}
// Create an HTML overlay over a shape.
function createOverlayHTML(dataArray) {
// Create the formatted HTML fragment to contain the shape data.
var htmlBuilder = "<div style='font-family:Segoe;color:#000000'>";
// Add HTML to the fragment for each label/value pair in the array of shape data.
for (var i = 0; i < dataArray.length; i++) {
htmlBuilder += dataArray[i].label + ": " + dataArray[i].formattedValue + "<br />";
}
htmlBuilder += "</div>";
// Create a formatted div tag for visual overlay.
vwaShape.addOverlay(
"overlay_" + vwaShape.getId(),
"<div id=\"HTMLDiv\" style=\"width: 100%; height:" +
"100%;background-color:#0000FF;z-order:32;" +
"filter:alpha(opacity=30);\"><\/div>",
1,
1,
100,
100);
// Display the HTML as a predefined text overlay, centered over the shape.
vwaShape.addPredefinedOverlay(Vwa.OverlayType.text,
"text_" + vwaShape.getId(),
htmlBuilder,
1,
1,
100,
100);
}
// Dismiss the overlay from the shape two seconds after the mouse leaves the shape's bounding box.
onShapeMouseLeave = function (source, args) {
try{
var tmpShape = vwaShapes.getItemById(args);
setTimeout(
function() {
vwaShape.removeOverlay("text_" + tmpShape.getId());
vwaShape.removeOverlay("overlay_" + tmpShape.getId());
},
2000);
}
catch(err){
alert(err);
}
}
</script>