constrain proportions while resizing images

Question

I implemented drag and drop of images and now i want to constrain proportions of images while resizing.

/**
 * Variable: constrainChildrenOnResize
 * 
 * Specifies if children should be constrained according to the <constrainChildren>
 * switch if cells are resized (including via <foldCells>). Default is false for
 * backwards compatiblity.
 */
mxGraph.prototype.constrainChildrenOnResize = false;

i set this to true but its not working :s

What API/property i need for this functionality..

Answer 1

constrainChildrenOnResize is responsible for positioning and size of the children of resized cell. It means that children should keep their position relatively to the parent-cell.

In your case I would suggest to extend mxVertexHandler using union method. In this example you can see how to implement min-width/min-height restrictions. Using this example you are able to write your own rules for constrain.

Here is my simple solution:

var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function (bounds) {

   var result = vertexHandlerUnion.apply(this, arguments);
   var coff = bounds.width / bounds.height 
   result.width = result.height * coff; 

   return result;
};

So this function is called every time you move mouse during dragging the resizer.

bounds - object, always same and represent old geometry of the cell (before resizing)

result - object, represents new values, which are going to be applied. Between this line ad return statement you can place any code you need to modify result.

In my simple example I just get the initial relation between width and height of the cell (coff) and then set new width by multiplying coff and new height. It will work if you drag corner or top/bottom. In real project this logic should be slightly extended, or you should make visible only corner handlers.

By the way, this code will work for all resizable cells on your graph. If you want to apply it only to images or some other kind of cells - you can put condition and check the cell type before recalculating. You can get current cell or its state via this.state.cell or this.state inside of union function. For example only for vertecies:

... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
   //calculations here
}
return result;