Index: legend.js
===================================================================
--- legend.js (revision 3966)
+++ legend.js (working copy)
@@ -41,6 +41,7 @@
this.lyrtype = 0;
this.curScale = -1;
this.isDisplayed = false;
+ this.iconWasRequested = false;
}
function ScaleRangeItem(min, max, parent)
@@ -52,6 +53,7 @@
this.parent = parent;
this.showlongtheme = false;
this.children = new Array();
+ this.iconWasRequested = false;
}
function StyleItem(legend, filter, geomtype, catindex)
Index: legendui.templ
===================================================================
--- legendui.templ (revision 3966)
+++ legendui.templ (working copy)
@@ -248,33 +248,39 @@
var layerIconImg = "";
if(hasThemes)
{
- for(var j=0; j < styles.length; j++)
+ if(layer.expanded && !sc.iconWasRequested)
{
- var node = styles[j];
- var iconId = GetIconId(layer) + '_Scl_' + layer.curScale + '_Th_' + j;
- var iconImg = RequestThemeStyleIconImg(layer, scale, node.catindex, node.geomtype, iconId);
+ for(var j=0; j < styles.length; j++)
+ {
+ var node = styles[j];
+ var iconId = GetIconId(layer) + '_Scl_' + layer.curScale + '_Th_' + j;
+ var iconImg = RequestThemeStyleIconImg(layer, scale, node.catindex, node.geomtype, iconId);
- code += '
';
- //icon
- code += '' + iconImg + ' | ';
- //legend text
- code += '' + node.legend + ' | ';
- code += '
';
-
- if(!sc.showlongtheme && styles.length > 10)
- {
- if(j == styles.length - 1)
- break;
code += '';
- code += ' | ';
- code += '... | ';
+ //icon
+ code += '' + iconImg + ' | ';
+ //legend text
+ code += '' + node.legend + ' | ';
code += '
';
- j = styles.length - 2;
+
+ if(!sc.showlongtheme && styles.length > 10)
+ {
+ if(j == styles.length - 1)
+ break;
+ code += '';
+ code += ' | ';
+ code += '... | ';
+ code += '
';
+ j = styles.length - 2;
+ }
}
+ if(styles.length <= 10)
+ sc.showlongtheme = true;
+ layerChildren.innerHTML = code;
+
+ sc.iconWasRequested = true;
}
- if(styles.length <= 10)
- sc.showlongtheme = true;
- layerChildren.innerHTML = code;
+
layerIconImg = iconThemeLayer;
}
else
@@ -351,6 +357,7 @@
Expand(node);
}
+// Expanding a node, the legend for the sub-items of this node will be generated dynamically
function Expand(node)
{
var elt = document.getElementById('ChildrenOf_' + node.objectId);
@@ -358,6 +365,10 @@
{
node.expanded = true;
elt.style.display = "block";
+ RefreshNodesState(node.children);
+ iconsToLoad.reverse();
+ LoadNextIcon();
+
if(node.type == 0 || HasLayerThemes(node))
ShowExpandedState(node);
}
@@ -741,10 +752,19 @@
return layer.children[layer.curScale].children.length > 1;
}
-// set the active scale ranges in layers, according to current scale, and set the display state for layers and groups
-// update the layer styles if necessary
+// set the display state for themes, layers and groups and update the layer styles if necessary
function UpdateScaleRanges(nodes)
{
+ RefreshNodesState(nodes);
+}
+
+
+// there are three possible reasons to refresh the nodes' state:
+// the first one is updating scale ranges to refresh the legend images
+// the second one is expanding a group to build the legend images of layers in that group.
+// the third one is expanding a layer node to build the legend images of themes in that layer.
+function RefreshNodesState(nodes)
+{
for(var i=0; i < nodes.length; i++)
{
var node = nodes[i];
@@ -753,7 +773,7 @@
var count = node.children != null? node.children.length: 0;
node.hasVisibleLayers = false;
if(count > 0) {
- UpdateScaleRanges(node.children);
+ RefreshNodesState(node.children);
for(var j=0; j < node.children.length; j++)
{
child = node.children[j];
@@ -790,13 +810,69 @@
break;
}
}
- if(node.displayInLegend && rangeIndex != node.curScale && node.curScale != -1)
- SetLayerStyles(node);
+
+ if(node.displayInLegend && node.curScale != -1)
+ {
+ // scale changed
+ if(rangeIndex != node.curScale)
+ {
+ // the layer's theme will be changed on demand
+ node.children[node.curScale].iconWasRequested = false;
+
+ // the layer's legend image will be changed immediately
+ if(!HasCollapsedParent(node))
+ {
+ SetLayerStyles(node);
+ node.iconWasRequested = true;
+ }
+ // the layer's legend image will be changed on demand
+ else
+ {
+
+ node.iconWasRequested = false;
+ }
+ }
+ // parent group expanded
+ else if(!node.iconWasRequested && !HasCollapsedParent(node))
+ {
+ SetLayerStyles(node);
+ node.iconWasRequested = true;
+ }
+ }
+
node.isDisplayed = node.displayInLegend && node.curScale != -1;
}
+ else if(node.type == 2)
+ {
+ // parent layer expanded
+ if(node.parent.children[node.parent.curScale]=== node && !node.iconWasRequested)
+ {
+ SetLayerStyles(node.parent);
+ }
+ }
}
}
+// To check if any parent node of current node is collapsed.
+function HasCollapsedParent(node)
+{
+ if(node.parent != null)
+ {
+ if(node.parent.expanded == true)
+ {
+ return HasCollapsedParent(node.parent)
+ }
+ else
+ {
+ return true;
+ }
+ }
+ else
+ {
+ return false;
+ }
+}
+
function FindNode(nodes, objectId)
{
for(var i=0; i < nodes.length; i++)