Layer Architecture

InfiView Layers Feature Presentation from infiview on Vimeo.

What are Layers

Normally when you work with InfiView applications you only have one viewport. With layers it is possible to have multiple view ports sitting on top of each other. The different layers can then be blended together, hidden and revealed so that data can be visually mixed. This enables you to create many interesting new features in your applications. A map application could for example have bitmap graphics on one layer and vector edges displaying routes in another layer. A third layer could display street names etc. The user would then be able to turn these layers on and off as desired.

It should be noted that there is no class in InfiView called "Layer". Instead the viewports themselves become layers when they are added to a special container component called LayerPane. Sometimes when we talk about layers we then actually mean Viewports inside a LayerPane.

CLICK to run the InfiView layers demo

The LayerPane Component

To create a layered InfiView application you create several view ports and add them all to a LayerPane component. The LayerPane component only takes infiview.AbstractViewport derivates as children. The LayerPane completely takes over the control of size and position of all its Viewports and positions them exactly on top of each other. All Viewports are automatically kept in sync by the LayerPane. Zooming and panning in the LayerPane translates to all its Viewports.

Viewport Shadowing

Because Viewports are stacked on top of each other, the top-most Viewport shadows underlying Viewports. The initial order of the Viewports is determined by the order they are added to the LayerPane. The first viewport will be at the bottom of the stack and the last will be at the top. If you wish to override this order you can use z-index.

Propagation Order

Because layers, and their nodes, shadow each other visually, this affects event propagation. When you for example click a node and when two nodes are on top of each other, only one node will receive the event. In essence, nodes shadow each other from receiving events. When you click with the mouse in the LayerPane the top most layer receives the event. If there is no node at that location in the top layer, the event will propagate to the lower layers. It will search the Viewports until it finds one with a node in the mouse location and select that node. If no node is found, it will start marquee selection for the top Viewport. The default search order (or propagation order) is the reverse of the order the Viewports were added. This means that the last added viewport will receive events first.

You can override this order in the ADF using an order number attribute. A low order number means early in the propagation order.


<iv:LayerPane id="lp" top="0" left="0" bottom="0" right="0" >
	<iv:InfiViewViewport id="vp1" iv:LayerPane.order="1" 
...

In the above example the viewport has an order number of 1 and nodes on this Viewport will only be selected if they are not shadowed by nodes in the same mouse location at layer 0. If you wish to change the order later on in your program you can do so with JavaScript in the following way, using the same component id’s from the previous example.


var vp1 = application.getComponentById("vp1 ");
lp.setOrder(vp1, 0);

If you move a layer to the top by setting its order other layers will be shifted down in the order queue.

It is also possible to force the propagation skip a specific layer. It can be useful if you have a layer where the opacity has made is so transparent that it is unlikely that the user want to manipulate nodes on it. In xml layers can be skipped like this:


<iv:InfiViewViewport iv:LayerPane.skip= "true" 
...

Skipping propagation using JavaScript looks like this:


infiview.LayerPane.setSkip(oViewport, bSkip)

Blending Layers

Blending layers involves setting opacity, background color and modifying the order on the layers. When a layer or a node covers another layer and it's nodes, we say that it "shadows" the other layer. Here are some useful facts that will make you understand how it all works.