Changeset 7652

Timestamp:

07/31/08 20:17:59 (1 month ago)

Author:

euzuro

Message:

ordering <exclamation point/>. you can now gracefully z-order your vectors... and you can even 'yOrder' them and add background images, making for a nice 3dish look. be sure to check out the two new example html's: marker-shadow.html and ordering.html. Big thanks to tcoulter (funkyc) for a prolonged effort with this patch. It has come a long way and now what a beautiful finish. (Closes #1357)

Files:

• trunk/openlayers/examples/marker-shadow.html (added)
• trunk/openlayers/examples/marker_shadow.png (added)
• trunk/openlayers/examples/ordering.html (added)
• trunk/openlayers/lib/OpenLayers/Layer/Vector.js (modified) (3 diffs)
• trunk/openlayers/lib/OpenLayers/Renderer/Elements.js (modified) (19 diffs)
• trunk/openlayers/tests/Renderer/Elements.html (modified) (9 diffs)

trunk/openlayers/lib/OpenLayers/Layer/Vector.js

@@ -153 +153 @@
-     */
-    renderer: null,
+    
+    /**
+     * APIProperty: yOrdering
+     * {String} Whether or not externalGraphic y-ordering is enabled on this 
+     *     layer. Default is false.
+     */
+    yOrdering: false,
-   
-    /** 
@@ -253 +260 @@
-            var rendererClass = OpenLayers.Renderer[this.renderers[i]];
-            if (rendererClass && rendererClass.prototype.supported()) {
-this.renderer = new rendererClass(this.div
-
+ this.renderer = new rendererClass(this.div, this.yOrdering
+ 
-            }  
-        }  
@@ -333 +340 @@
-            
-            this.renderer.root.style.visibility = "visible";
-
+
-            // Force a reflow on gecko based browsers to prevent jump/flicker.
-            // This seems to happen on only certain configurations; it was originally

trunk/openlayers/lib/OpenLayers/Renderer/Elements.js

@@ -6 +6 @@
- * @requires OpenLayers/Renderer.js
- */
+
+/**
+ * Class: OpenLayers.ElementsIndexer
+ * This class takes care of figuring out which order elements should be
+ *     placed in the DOM based on given indexing methods. 
+ */
+OpenLayers.ElementsIndexer = OpenLayers.Class({
+   
+    /**
+     * Property: maxZIndex
+     * {Integer} This is the largest-most z-index value for a node
+     *     contained within the indexer.
+     */
+    maxZIndex: null,
+    
+    /**
+     * Property: order
+     * {Array<String>} This is an array of node id's stored in the
+     *     order that they should show up on screen. Id's higher up in the
+     *     array (higher array index) represent nodes with higher z-indeces.
+     */
+    order: null, 
+    
+    /**
+     * Property: indices
+     * {Object} This is a hash that maps node ids to their z-index value
+     *     stored in the indexer. This is done to make finding a nodes z-index 
+     *     value O(1).
+     */
+    indices: null,
+    
+    /**
+     * Property: compare
+     * {Function} This is the function used to determine placement of
+     *     of a new node within the indexer. If null, this defaults to to
+     *     the Z_ORDER_DRAWING_ORDER comparison method.
+     */
+    compare: null,
+   
+    /**
+     * APIMethod: initialize
+     * Create a new indexer with 
+     * 
+     * Parameters:
+     * yOrdering - {Boolean} Whether to use y-ordering.
+     */
+    initialize: function(yOrdering) {
+
+        this.compare = yOrdering ? 
+            OpenLayers.ElementsIndexer.IndexingMethods.Z_ORDER_Y_ORDER :
+            OpenLayers.ElementsIndexer.IndexingMethods.Z_ORDER_DRAWING_ORDER;
+            
+        this.order = [];
+        this.indices = {};
+        this.maxZIndex = 0;
+    },
+    
+    /**
+     * APIMethod: insert
+     * Insert a new node into the indexer. In order to find the correct 
+     *     positioning for the node to be inserted, this method uses a binary 
+     *     search. This makes inserting O(log(n)). 
+     * 
+     * Parameters:
+     * newNode - {DOMElement} The new node to be inserted.
+     * root - {DOMElement} The root node from which to insert the new node.
+     */
+    insert: function(newNode, root) {
+        var nodeId = newNode.id;
+        
+        this.determineZIndex(newNode);       
+
+        var leftIndex = -1;
+        var rightIndex = this.order.length;
+        var middle;
+
+        while (rightIndex - leftIndex > 1) {
+            middle = parseInt((leftIndex + rightIndex) / 2);
+            
+            var nextId = this.order[middle];
+            var nextNode = OpenLayers.Util.getElement(nextId);
+            
+            var placement = this.compare(this, newNode, nextNode);
+            
+            if (placement > 0) {
+                leftIndex = middle;
+            } else {
+                rightIndex = middle;
+            } 
+        }
+        
+        this.order.splice(rightIndex, 0, nodeId);
+        this.indices[nodeId] = this.getZIndex(newNode);
+        
+        // If the new node should be before another in the index
+        // order, insert the new node before the next; else, lets just
+        // append the new one on the end, making it the highest in the index order.
+        var nextIndex = rightIndex + 1;
+        if (nextIndex < this.order.length) {
+            var nextNode = OpenLayers.Util.getElement(this.order[nextIndex]);
+            root.insertBefore(newNode, nextNode);
+        } else {
+            root.appendChild(newNode);
+        }
+    },
+    
+    /**
+     * APIMethod: remove
+     * 
+     * Parameters:
+     * node - {DOMElement} The node to be removed.
+     */
+    remove: function(node) {
+        var nodeId = node.id;
+        var arrayIndex = OpenLayers.Util.indexOf(this.order, nodeId);
+        if (arrayIndex >= 0) {
+            // Remove it from the order array, as well as deleting the node
+            // from the indeces hash.
+            this.order.splice(arrayIndex, 1);
+            delete this.indices[nodeId];
+            
+            // Reset the maxium z-index based on the last item in the 
+            // order array.
+            var lastId = this.order[this.order.length - 1];
+            this.maxZIndex = this.indices[lastId];
+        }
+    },
+    
+    /**
+     * APIMethod: exists
+     * 
+     * Parameters:
+     * node- {DOMElement} The node to test for existence.
+     * 
+     * Returns:
+     * {Boolean} Whether or not the node exists in the indexer?
+     */
+    exists: function(node) {
+        return (this.indices[node.id] != null);
+    },
+    
+    /**
+     * APIMethod: getZIndex
+     * Get the z-index value for the current node from the node data itself.
+     * 
+     * Parameters:
+     * node - {DOMElement} The node whose z-index to get.
+     * 
+     * Returns:
+     * {Integer} The z-index value for the specified node (from the node 
+     *     data itself).
+     */
+    getZIndex: function(node) {
+        return node._style.graphicZIndex;  
+    },
+    
+    /**
+     * Method: determineZIndex
+     * Determine the z-index for the current node if there isn't one, 
+     *     and set the maximum value if we've found a new maximum.
+     * 
+     * Parameters:
+     * node - {DOMElement} 
+     */
+    determineZIndex: function(node) {
+        var zIndex = node._style.graphicZIndex;
+        
+        // Everything must have a zIndex. If none is specified,
+        // this means the user *must* (hint: assumption) want this
+        // node to succomb to drawing order. To enforce drawing order
+        // over all indexing methods, we'll create a new z-index that's
+        // greater than any currently in the indexer.
+        if (zIndex == null) {
+            zIndex = this.maxZIndex;
+            node._style.graphicZIndex = zIndex; 
+        } else if (zIndex > this.maxZIndex) {
+            this.maxZIndex = zIndex;
+        }
+    },
+    
+    CLASS_NAME: "OpenLayers.ElementsIndexer"
+});
+
+/**
+ * Namespace: OpenLayers.ElementsIndexer.IndexingMethods
+ * These are the compare methods for figuring out where a new node should be 
+ *     placed within the indexer. These methods are very similar to general 
+ *     sorting methods in that they return -1, 0, and 1 to specify the 
+ *     direction in which new nodes fall in the ordering.
+ */
+OpenLayers.ElementsIndexer.IndexingMethods = {
+    
+    /**
+     * Method: Z_ORDER
+     * This compare method is used by other comparison methods.
+     *     It can be used individually for ordering, but is not recommended,
+     *     because it doesn't subscribe to drawing order.
+     * 
+     * Parameters:
+     * indexer - {<OpenLayers.ElementsIndexer>}
+     * newNode - {DOMElement}
+     * nextNode - {DOMElement}
+     * 
+     * Returns:
+     * {Integer}
+     */
+    Z_ORDER: function(indexer, newNode, nextNode) {
+        var newZIndex = indexer.getZIndex(newNode);
+
+        var returnVal = 0;
+        if (nextNode) {
+            var nextZIndex = indexer.getZIndex(nextNode);
+            returnVal = newZIndex - nextZIndex; 
+        }
+        
+        return returnVal;
+    },
+
+    /**
+     * APIMethod: Z_ORDER_DRAWING_ORDER
+     * This method orders nodes by their z-index, but does so in a way
+     *     that, if there are other nodes with the same z-index, the newest 
+     *     drawn will be the front most within that z-index. This is the 
+     *     default indexing method.
+     * 
+     * Parameters:
+     * indexer - {<OpenLayers.ElementsIndexer>}
+     * newNode - {DOMElement}
+     * nextNode - {DOMElement}
+     * 
+     * Returns:
+     * {Integer}
+     */
+    Z_ORDER_DRAWING_ORDER: function(indexer, newNode, nextNode) {
+        var returnVal = OpenLayers.ElementsIndexer.IndexingMethods.Z_ORDER(
+            indexer, 
+            newNode, 
+            nextNode
+        );
+        
+        // Make Z_ORDER subscribe to drawing order by pushing it above
+        // all of the other nodes with the same z-index.
+        if (nextNode && returnVal == 0) {
+            returnVal = 1;
+        }
+        
+        return returnVal;
+    },
+
+    /**
+     * APIMethod: Z_ORDER_Y_ORDER
+     * This one should really be called Z_ORDER_Y_ORDER_DRAWING_ORDER, as it
+     *     best describes which ordering methods have precedence (though, the 
+     *     name would be too long). This method orders nodes by their z-index, 
+     *     but does so in a way that, if there are other nodes with the same 
+     *     z-index, the nodes with the lower y position will be "closer" than 
+     *     those with a higher y position. If two nodes have the exact same y 
+     *     position, however, then this method will revert to using drawing  
+     *     order to decide placement.
+     * 
+     * Parameters:
+     * indexer - {<OpenLayers.ElementsIndexer>}
+     * newNode - {DOMElement}
+     * nextNode - {DOMElement}
+     * 
+     * Returns:
+     * {Integer}
+     */
+    Z_ORDER_Y_ORDER: function(indexer, newNode, nextNode) {
+        var returnVal = OpenLayers.ElementsIndexer.IndexingMethods.Z_ORDER(
+            indexer, 
+            newNode, 
+            nextNode
+        );
+        
+        if (nextNode && returnVal == 0) {
+            var newLat = newNode._geometry.getBounds().bottom;
+            var nextLat = nextNode._geometry.getBounds().bottom;
+            
+            var result = nextLat - newLat;
+            returnVal = (result ==0) ? 1 : result;
+        }
+        
+        return returnVal;       
+    }
+};
-
-/**
@@ -43 +329 @@
-    
-    /**
+     * Property: Indexer
+     * {<OpenLayers.ElementIndexer>} An instance of OpenLayers.ElementsIndexer 
+     *     created upon initialization.
+     */
+    indexer: null, 
+    
+    /**
+     * Constant: BACKGROUND_ID_SUFFIX
+     * {String}
+     */
+    BACKGROUND_ID_SUFFIX: "_background",
+    
+    /**
-     * Property: minimumSymbolizer
-     * {Object}
@@ -58 +357 @@
-     * Parameters:
-     * containerID - {String}
-
-
+
+
+
-        OpenLayers.Renderer.prototype.initialize.apply(this, arguments);
-
@@ -67 +367 @@
-        this.rendererRoot.appendChild(this.root);
-        this.container.appendChild(this.rendererRoot);
+        
+        this.indexer = new OpenLayers.ElementsIndexer(yOrdering);
-    },
-    
@@ -136 +438 @@
-        };
-
+        //
+        if (style.backgroundGraphic) {
+            this.redrawBackgroundNode(geometry.id, geometry, style, featureId);
+        }
+        
-        if (style.display != "none") {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-        } else {
-            node = OpenLayers.Util.getElement(geometry.id);
@@ -158 +451 @@
-            }
-        }
+    },
+    
+    /**
+     * Method: redrawNode
+     * 
+     * Parameters:
+     * id - {String}
+     * geometry - {<OpenLayers.Geometry>}
+     * style - {Object}
+     * featureId - {String}
+     */
+    redrawNode: function(id, geometry, style, featureId) {
+        // Get the node if it's already on the map.
+        var currentNode = OpenLayers.Util.getElement(id);
+        
+        // Create a new node, or use the current one if it's
+        // already there.
+        var newNode;
+        if (!currentNode) {
+            var nodeType = this.getNodeType(geometry, style);
+            newNode = this.createNode(nodeType, id);
+        } else {
+            newNode = currentNode;
+        }
+        
+        // Set the data for the node, then draw it.
+        newNode._featureId = featureId;
+        newNode._geometry = geometry;
+        newNode._geometryClass = geometry.CLASS_NAME;
+        newNode._style = style;
+        newNode = this.drawGeometryNode(newNode, geometry, style);
+        
+        // If the node is known to the indexer, remove it so we can
+        // recalculate where it should go.
+        if (this.indexer.exists(newNode)) {
+            this.indexer.remove(newNode);
+        }
+        
+        // Insert the node into the indexer so it can show us where to place it.
+        //  Note that this operation is O(log(n)). If there's a performance 
+        //  problem (when dragging, for instance) this is likely where it 
+        //  would be.
+        this.indexer.insert(newNode, this.root);
+        
+        this.postDraw(newNode); 
+    },
+    
+    /**
+     * Method: redrawBackgroundNode
+     * Redraws the node using special 'background' style properties. Basically
+     *     just calls redrawNode(), but instead of directly using the 
+     *     'externalGraphic', 'graphicXOffset', 'graphicYOffset', and 
+     *     'graphicZIndex' properties directly from the specified 'style' 
+     *     parameter, we create a new style object and set those properties 
+     *     from the corresponding 'background'-prefixed properties from 
+     *     specified 'style' parameter.
+     * 
+     * Parameters:
+     * id - {String}
+     * geometry - {<OpenLayers.Geometry>}
+     * style - {Object}
+     * featureId - {String}
+     */
+    redrawBackgroundNode: function(id, geometry, style, featureId) {
+        var backgroundStyle = OpenLayers.Util.extend({}, style);
+        
+        // Set regular style attributes to apply to the background styles.
+        backgroundStyle.externalGraphic = backgroundStyle.backgroundGraphic;
+        backgroundStyle.graphicXOffset = backgroundStyle.backgroundXOffset;
+        backgroundStyle.graphicYOffset = backgroundStyle.backgroundYOffset;
+        backgroundStyle.graphicZIndex = backgroundStyle.backgroundGraphicZIndex;
+        
+        // Erase background styles.
+        backgroundStyle.backgroundGraphic = null;
+        backgroundStyle.backgroundXOffset = null;
+        backgroundStyle.backgroundYOffset = null;
+        backgroundStyle.backgroundGraphicZIndex = null;
+        
+        this.redrawNode(
+            id + this.BACKGROUND_ID_SUFFIX, 
+            geometry, 
+            backgroundStyle, 
+            null
+        );
-    },
-
@@ -214 +591 @@
-     * Method: postDraw
-     * Things that have do be done after the geometry node is appended
-
+    
-     * 
-     * Parameters:
@@ -224 +601 @@
-     * Method: drawPoint
-     * Virtual function for drawing Point Geometry. 
-
-
+    
+    
-     * 
-     * Parameters: 
@@ -236 +613 @@
-     * Method: drawLineString
-     * Virtual function for drawing LineString Geometry. 
-
-
+    
+    
-     * 
-     * Parameters: 
@@ -248 +625 @@
-     * Method: drawLinearRing
-     * Virtual function for drawing LinearRing Geometry. 
-
-
+    
+    
-     * 
-     * Parameters: 
@@ -260 +637 @@
-     * Method: drawPolygon
-     * Virtual function for drawing Polygon Geometry. 
-
-
+   
+   
-     * 
-     * Parameters: 
@@ -272 +649 @@
-     * Method: drawRectangle
-     * Virtual function for drawing Rectangle Geometry. 
-
-
+    
+    
-     * 
-     * Parameters: 
@@ -284 +661 @@
-     * Method: drawCircle
-     * Virtual function for drawing Circle Geometry. 
-
-
+    
+    
-     * 
-     * Parameters: 
@@ -296 +673 @@
-     * Method: drawSurface
-     * Virtual function for drawing Surface Geometry. 
-
-
+    
+    
-     * 
-     * Parameters: 
@@ -313 +690 @@
-     * Returns:
-     * {<OpenLayers.Geometry>} A geometry from an event that 
-                    happened on a layer
+happened on a layer.
-     */
-    getFeatureIdFromEvent: function(evt) {
@@ -341 +718 @@
-            var element = OpenLayers.Util.getElement(geometry.id);
-            if (element && element.parentNode) {
+                if (element.geometry) {
+                    element.geometry.destroy();
+                    element.geometry = null;
+                }
-                element.parentNode.removeChild(element);
+
+                this.indexer.remove(element);
+                
+                var backgroundId = geometry.id + this.BACKGROUND_ID_SUFFIX;
+                var bElem = OpenLayers.Util.getElement(backgroundId);
+                if (bElem && bElem.parentNode) {
+                    // No need to destroy the geometry since the element and the background
+                    // node share the same geometry.
+                    bElem.parentNode.removeChild(bElem);
+                }
-            }
-        }
-    
+
-
-    /** 
@@ -355 +746 @@
-     * Parameters:
-     * id - {String}
-
+.
-     * 
-     * Returns:
-
+.
-     */
-    nodeFactory: function(id, type) {
@@ -373 +764 @@
-    },
-    
+    /** 
+     * Method: createNode
+     * 
+     * Parameters:
+     * type - {String} Kind of node to draw.
+     * id - {String} Id for node.
+     * 
+     * Returns:
+     * {DOMElement} A new node of the given type and id.
+     *     This function must be overridden by subclasses.
+     */
+    createNode: function(type, id) {},
+
-    /**
-     * Method: isComplexSymbol
@@ -386 +790 @@
-        return (graphicName != "circle") && !!graphicName;
-    },
-
+
-    CLASS_NAME: "OpenLayers.Renderer.Elements"
-});

trunk/openlayers/tests/Renderer/Elements.html

@@ -4 +4 @@
-  <script type="text/javascript">
-
-
-
-
-
-
-
+
+
+
-        OpenLayers.Renderer.Elements.prototype._createRenderRoot =
-            OpenLayers.Renderer.Elements.prototype.createRenderRoot;
@@ -26 +23 @@
-        };
-        
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        OpenLayers.Renderer.Elements.prototype.createRenderRoot =
-            OpenLayers.Renderer.Elements.prototype._createRenderRoot;
-        OpenLayers.Renderer.Elements.prototype.createRoot =
-            OpenLayers.Renderer.Elements.prototype._createRoot;
+        OpenLayers.Renderer.Elements.prototype.createNode =
+            OpenLayers.Renderer.Elements.prototype._createNode;
+    }
+
+    function test_Elements_constructor(t) {
+        t.plan(6);
+        
+        setUp();
+        
+        var r = create_renderer();
+        
+        t.ok(r instanceof OpenLayers.Renderer.Elements, "new OpenLayers.Renderer.Elements returns Elements object" );
+        t.ok(r.rendererRoot != null, "elements rendererRoot is not null");
+        t.ok(r.root != null, "elements root is not null");
+        t.ok(r.indexer != null, "indexer is not null.");
+        
+        t.ok(r.root.parentNode == r.rendererRoot, "elements root is correctly appended to rendererRoot");
+        t.ok(r.rendererRoot.parentNode == r.container, "elements rendererRoot is correctly appended to container");
+        
+        tearDown();
-    }
-    
@@ -44 +78 @@
-        t.plan(5);
-        
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-        OpenLayers.Renderer.prototype._destroy = 
-            OpenLayers.Renderer.prototype.destroy;
-
+
+
-        OpenLayers.Renderer.prototype.destroy = function() {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-        OpenLayers.Renderer.prototype.destroy = 
-            OpenLayers.Renderer.prototype._destroy;
+
-    }
-    
@@ -83 +111 @@
-        t.plan(1);
-        
-
-
-
-
-
-
+
+
+
-        var element = document.createElement("div");
-        r.root = element;
@@ -99 +124 @@
-        t.ok(r.root.childNodes.length == 0, "root is correctly cleared");
-        
-
-
+
-    }
-    
-    function test_Elements_drawGeometry(t) {
-        t.plan(5);
-
-
-
-
-
-
-
+
+
+
+
-        
-        var element = document.createElement("div");
@@ -148 +169 @@
-        r.drawGeometry(geometry, style, featureId);
-        t.ok(g_Node.parentNode != r.root, "node is correctly removed");
-
-
-
-
+
+
-    }
-
@@ -157 +176 @@
-        t.plan(9);
-        
-
-
-
-
-
-
+
+
+
-        
-        var element = document.createElement("div");
@@ -282 +298 @@
-        r.drawGeometry(geometry, style);
-        t.ok(properDraw, "drawGeometry called drawPolygon when passed a multi-polygon");
-
-
-
+
+
-    }
-    
@@ -309 +324 @@
-    
-    function test_Elements_erasegeometry(t) {
-
-
-
-
-
+
+
+
+
+
+
+
+
-        var geometry = {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+