How to revalidate with no repaint in JavaScript

asked 18 Jan '12, 23:00

Gaudenz's gravatar image

Gaudenz
80.1k1310
accept rate: 39%

edited 18 Jan '12, 23:30


Sometimes it is useful if cell states are updated during a transaction, for example during a layout run. It is possible to invalidate the cell bounds and force an update without causing a repaint by overriding the setVertexLocation of the layout as follows. (This can also be done explicitely for each moved vertex instead of extending setVertexLocation, and this approach can be used not only with layouts.)

\n
graph.getModel().beginUpdate();\ntry \n{ \n  var layout = new mxCircleLayout(graph);\n\n  layoutSetVertexLocation = layout.setVertexLocation; \n  layout.setVertexLocation = function(cell, x, y) \n  { \n    layoutSetVertexLocation.apply(this, arguments); \n    graph.view.rendering = false; \n    graph.view.invalidate(cell, false, false); \n    var pstate = graph.view.getState(graph.model.getParent(cell)); \n    graph.view.validateBounds(pstate, cell); \n    graph.view.rendering = true; \n  }\n\n  layout.execute(parent); \n} \nfinally \n{ \n  graph.getModel().endUpdate(); \n}\n
\n

The call to validateBounds can be replaced with a (single) call to validate (with no args). If a single call should be carried out, which might slightly improve performance, then it should be moved to after the execute call and the rendering flag should be set to false while it executes, eg.

\n
graph.getModel().beginUpdate(); \ntry \n{ \n  var layout = new mxCircleLayout(graph);\n\n  layoutSetVertexLocation = layout.setVertexLocation; \n  layout.setVertexLocation = function(cell, x, y) \n  { \n    layoutSetVertexLocation.apply(this, arguments); \n    graph.view.invalidate(cell, false, false); \n  }\n\n  layout.execute(parent);\n\n  graph.view.rendering = false; \n  graph.view.validate(); \n  graph.view.rendering = true; \n} \nfinally \n{ \n  graph.getModel().endUpdate(); \n}\n
link

answered 18 Jan '12, 23:30

Gaudenz's gravatar image

Gaudenz
80.1k1310
accept rate: 39%

Your answer
toggle preview

Follow this question

By Email:

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

By RSS:

Answers

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

Tags:

×228
×39
×6
×2
×1

Asked: 18 Jan '12, 23:00

Seen: 1,780 times

Last updated: 18 Jan '12, 23:30