To brief about the context. When a logged in user in our product revisits an already visited mxGraph page. All the htmls rendered are re-attached(HTMLElement.appendChild()) instead of going through the rendering logic for each cell. This has been done in this way to improve performance. This works properly in both chrome and Firefox. But in IE it has a weired behaviour of not applying the fill color for both vertices and edges. But when the tree is moved all the fill color gets applied. I am attaching the following code, which can be run in IE and Firefox to see the difference in behavior. 'Remove' and 'Add Back' need to be clicked to see the inconsistency."<!--\n $Id: tree.html,v 1.7 2010-05-31 16:05:57 gaudenz Exp $\n Copyright (c) 2006-2010, JGraph Ltd


Tree example for mxGraph. This example demonstrates folding\n of subtrees in a acyclic graph (tree).\n-->\n<html>\n<head>\n <title>Tree example for mxGraph</title>

<!-- Sets the basepath for the library if not in same directory -->\n<script type="text/javascript">\n    mxBasePath = '../src';\n</script>\n\n<!-- Loads and initiaizes the library -->\n<script type="text/javascript" src="http://www.jgraph.com/demo/mxgraph/src/js/mxclient.php?version="></script>\n<script type="text/javascript">\n    /*\n        Defines a custom shape for the tree node that includes the\n        upper half of the outgoing edge(s).\n    */\n    function TreeNodeShape() { };\n\n    TreeNodeShape.prototype = new mxCylinder();\n    TreeNodeShape.prototype.constructor = TreeNodeShape;\n\n    // Defines the length of the upper edge segment.\n    TreeNodeShape.prototype.segment = 5;\n\n    // Needs access to the cell state for rendering\n    TreeNodeShape.prototype.apply = function(state)\n    {\n        mxCylinder.prototype.apply.apply(this, arguments);\n        this.state = state;\n    };\n\n    TreeNodeShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)\n    {\n        var graph = this.state.view.graph;\n        var hasChildren = graph.model.getOutgoingEdges(this.state.cell).length > 0;\n\n        if (isForeground)\n        {\n            if (hasChildren)\n            {\n                // Painting outside of vertex bounds is used here\n                path.moveTo(w / 2, h + this.segment);\n                path.lineTo(w / 2, h);\n                path.end();\n            }\n        }\n        else\n        {\n            path.moveTo(0, 0);\n            path.lineTo(w, 0);\n            path.lineTo(w, h);\n            path.lineTo(0, h);\n            path.close();\n        }\n    };\n\n    mxCellRenderer.prototype.defaultShapes['treenode'] = TreeNodeShape;\n\n    // Defines a custom perimeter for the nodes in the tree\n    mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source)\n    {\n        var pt = null;\n\n        if (source)\n        {\n            pt = new mxPoint(start.x + start.width / 2,\n                    start.y + start.height + TreeNodeShape.prototype.segment);\n        }\n        else\n        {\n            pt = new mxPoint(start.x + start.width / 2, start.y);\n        }\n\n        edge.setAbsoluteTerminalPoint(pt, source);\n    };\n</script>\n\n<!-- Example code -->\n<script type="text/javascript">\n    // Program starts here. Creates a sample graph in the\n    // DOM node with the specified ID. This function is invoked\n    // from the onLoad event handler of the document (see below).\n\n    var container = document.createElement('div');\n\n    function main()\n    {\n        // Checks if browser is supported\n        if (!mxClient.isBrowserSupported())\n        {\n            // Displays an error message if the browser is\n            // not supported.\n            mxUtils.error('Browser is not supported!', 200, false);\n        }\n        else\n        {\n            // Sets the collapse and expand icons. The values below are the default\n            // values, but this is how to replace them if you need to.\n            mxGraph.prototype.collapsedImage = new mxImage('src/images/collapsed.gif', 9, 9);\n            mxGraph.prototype.expandedImage = new mxImage('src/images/expanded.gif', 9, 9);\n\n            // Workaround for Internet Explorer ignoring certain styles\n\n            container.setAttribute("id", "container");\n            container.style.position = 'absolute';\n            container.style.overflow = 'hidden';\n            container.style.left = '0px';\n            container.style.top = '50px';\n            container.style.right = '0px';\n            container.style.bottom = '0px';\n\n            if (mxClient.IS_IE)\n            {\n                new mxDivResizer(container);\n            }\n\n            var mainDiv = document.createElement('div');\n            mainDiv.setAttribute("id", "mainDiv");\n            mainDiv.appendChild(container);\n            document.body.appendChild(mainDiv);\n\n            // Creates the graph inside the given container\n            var graph = new mxGraph(container);\n\n            // Set some stylesheet options for the visual appearance\n            var style = graph.getStylesheet().getDefaultVertexStyle();\n            style[mxConstants.STYLE_SHAPE] = 'treenode';\n            style[mxConstants.STYLE_GRADIENTCOLOR] = 'white';\n            style[mxConstants.STYLE_SHADOW] = true;\n\n            style = graph.getStylesheet().getDefaultEdgeStyle();\n            style[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom;\n            style[mxConstants.STYLE_ROUNDED] = true;\n\n            // Enables automatic sizing for vertices after editing and\n            // panning by using the left mouse button.\n            graph.setAutoSizeCells(true);\n            graph.setPanning(true);\n            graph.panningHandler.useLeftButtonForPanning = true;\n\n            // Stops editing on enter or escape keypress\n            var keyHandler = new mxKeyHandler(graph);\n\n            // Enables automatic layout on the graph and installs\n            // a tree layout for all groups who's children are\n            // being changed, added or removed.\n            var layout = new mxCompactTreeLayout(graph, false);\n            layout.useBoundingBox = false;\n            layout.levelDistance = 30;\n            layout.nodeDistance = 10;\n\n            var layoutMgr = new mxLayoutManager(graph);\n\n            layoutMgr.getLayout = function(cell)\n            {\n                if (cell.getChildCount() > 0)\n                {\n                    return layout;\n                }\n            };\n\n            // Disallow any selections\n            graph.setCellsSelectable(false);\n            graph.isCellSelectable = function(cell) {\n                return true;\n            };\n\n            // Defines the condition for showing the folding icon\n            graph.isCellFoldable = function(cell)\n            {\n                return this.model.getOutgoingEdges(cell).length > 0;\n            };\n\n            // Defines the position of the folding icon\n            graph.cellRenderer.getControlBounds = function(state)\n            {\n                if (state.control != null)\n                {\n                    var oldScale = state.control.scale;\n                    var w = state.control.bounds.width / oldScale;\n                    var h = state.control.bounds.height / oldScale;\n                    var s = state.view.scale;\n\n                    return new mxRectangle(state.x + state.width / 2 - w / 2 * s,\n                        state.y + state.height + TreeNodeShape.prototype.segment * s - h / 2 * s,\n                        w * s, h * s);\n                }\n\n                return null;\n            };\n\n            // Implements the click on a folding icon\n            graph.foldCells = function(collapse, recurse, cells)\n            {\n                this.model.beginUpdate();\n                try\n                {\n                    toggleSubtree(this, cells[0], !collapse);\n                    this.model.setCollapsed(cells[0], collapse);\n\n                    // Executes the layout for the new graph since\n                    // changes to visiblity and collapsed state do\n                    // not trigger a layout in the current manager.\n                    layout.execute(graph.getDefaultParent());\n                }\n                finally\n                {\n                    this.model.endUpdate();\n                }\n            };\n\n            // Gets the default parent for inserting new cells. This\n            // is normally the first child of the root (ie. layer 0).\n            var parent = graph.getDefaultParent();\n\n            // Adds the root vertex of the tree\n            graph.getModel().beginUpdate();\n            try\n            {\n                var w = graph.container.offsetWidth;\n                var root = graph.insertVertex(parent, 'treeRoot', 'Root', w/2 - 30, 20, 60, 40);\n\n                var v1 = graph.insertVertex(parent, 'v1', 'Child 1', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', root, v1);\n\n                var v2 = graph.insertVertex(parent, 'v2', 'Child 2', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', root, v2);\n\n                var v3 = graph.insertVertex(parent, 'v3', 'Child 3', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', root, v3);\n\n                var v11 = graph.insertVertex(parent, 'v11', 'Child 1.1', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', v1, v11);\n\n                var v12 = graph.insertVertex(parent, 'v12', 'Child 1.2', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', v1, v12);\n\n                var v21 = graph.insertVertex(parent, 'v21', 'Child 2.1', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', v2, v21);\n\n                var v22 = graph.insertVertex(parent, 'v22', 'Child 2.2', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', v2, v22);\n\n                var v221 = graph.insertVertex(parent, 'v221', 'Child 2.2.1', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', v22, v221);\n\n                var v222 = graph.insertVertex(parent, 'v222', 'Child 2.2.2', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', v22, v222);\n\n                var v31 = graph.insertVertex(parent, 'v31', 'Child 3.1', 0, 0, 60, 40);\n                graph.insertEdge(parent, null, '', v3, v31);\n            }\n            finally\n            {\n                // Updates the display\n                graph.getModel().endUpdate();\n            }\n        }\n    };\n\n    // Updates the visible state of a given subtree taking into\n    // account the collapsed state of the traversed branches\n    function toggleSubtree(graph, cell, show)\n    {\n        show = (show != null) ? show : true;\n        var cells = [];\n\n        graph.traverse(cell, true, function(vertex)\n        {\n            if (vertex != cell)\n            {\n                cells.push(vertex);\n            }\n\n            // Stops recursion if a collapsed cell is seen\n            return vertex == cell || !graph.isCellCollapsed(vertex);\n        });\n\n        graph.toggleCells(show, cells, true);\n    };\n\n    function remove() {\n        var mainDiv = document.getElementById("mainDiv");\n        mainDiv.removeChild(container);\n    }\n\n    function addBack() {\n        var mainDiv = document.getElementById("mainDiv");\n        mainDiv.appendChild(container);\n    }\n\n</script>\n
\n</head>\n\n\n<body onload="main();">\n
\n<input type="button" value="Remove" onclick="javascript:remove();"/>\n<input type="button" value="Add Back" onclick="javascript:addBack();"/>\n
\n</body>\n</html>\n"\nPlease provide some suggestion on this browser specific problem.

asked 29 Aug '11, 05:02

sachinshetty's gravatar image

accept rate: 0%

Looks like an IE bug. You can call mxGraph.refresh() after adding the container back into the page in IE, but that will make it slow again. Another idea is to use mainDiv.innerHTML and restore that. This seems to paint correctly, but it replaces the referenced DOM nodes (eg. graph.container).


answered 29 Aug '11, 07:25

Gaudenz's gravatar image

accept rate: 39%

edited 23 Oct '11, 23:37

Please specify whether you are talking about browser refresh or we have any API in mx library.

(22 Oct '11, 01:07) sachinshetty
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: 29 Aug '11, 05:02

Seen: 4,630 times

Last updated: 23 Oct '11, 23:37