Cannot zoom in the same function where addImg was performed

Thanks for a great package! I have been using react-sketch for building image processing applications, such as http://dash-canvas.herokuapp.com/. My app is a component which has a SketchField child component, as in the demo for this repo. After performing some image processing operation, I’m updating the image through props using this._sketch.addImg, but I also would like to keep the same zoom factor which was used just before firing the image processing operation. My problem is that I cannot make the canvas zoom just after addImg, in the same function: the image is updated, but no zoom is performed. Surprisingly, if I add a breakpoint between the two operations and I run the function in the debugger, the zoom operation is performed as expected. Here is the code of the componentDidUpdate function (I checked that the problem is still there if the two operations – addImg and zoom-- are in another function, no zoom is performed).

   componentDidUpdate(prevProps) {
   let sketch = this._sketch;
      if (
          (this.props.image_content !== prevProps.image_content)){
          let opts = {left:0,
                      top:0,
                      scale:this.props.scale}
          sketch.addImg(this.props.image_content, opts); // OK, the image updates
          sketch.zoom(this.props.zoom); // not OK, nothing happens, except in the debugger
      };
      };

Any idea of how I can force the zoom to be performed?

[tbolis]

unfortunately nothing that comes in mind right now, will take a closer look

[emmanuelle]

I solved the issue by calling sketch._fc.setZoom instead of sketch.zoom. By the way, why is SketchField.zoom not calling Canvas.setZoom (of fabric.js)? I found out it’s instead modifying the scale and position of all objects of the canvas. For the record, my new code is

 componentDidUpdate(prevProps) {
    let sketch = this._sketch;
    if (
	(this.props.image_content !== prevProps.image_content)){
	sketch.clear();
	this.props.setProps({json_data: ''});
	let opts = {left:0,
	 	    top:0,
	            scale:this.props.scale}
	sketch.addImg(this.props.image_content, opts);
	sketch._fc.setZoom(this.props.zoom);
    };    
    };

and it works as I want (adding the image and setting the correct zoom).

Thanks a lot for your help, feel free to close the issue or I’ll do it later.