Display:none causes crop to reset

[atomworks]

I'm using a workflow where the user uploads an image, then once that's successful they move on to the cropper. This works perfectly up until I hit the final stage.

Each stage is basically shown or hidden, all the elements are there in the code at once but only one stage at a time is visible. As soon as you hide the cropper it resets the bounding of the crop and updates the cropped version in the scope accordingly. I've managed to replicate this by simply adding display:none in the element inspector and re-enabling it. I've found a way to script around the issue but it's not as nice or efficient as having this behaviour fixed in the module.

Module is great by the way. Loving it! Thanks for sharing.

[mike-suggitt]

@atomworks I'm taking a look at this myself right now

[atomworks]

Excellent. If I can provide any other information just let me know and I'll see what I can do!

[mike-suggitt]

Ok I think i might have it. I'm not going to do a pull request as I have a slightly mangled / feature diverse repo. HOWEVER, try replacing the following lines at the end of setMaxDimensions in crop-host.js

var center = theArea.getCenterPoint();
theArea.setCenterPoint({x: center.x*ratioNewCurWidth, y: center.y*ratioNewCurHeight});

with

var center = theArea.getCenterPoint();
theArea.setSize({w: theArea.getSize().w * ratioNewCurWidth, h: theArea.getSize().h * ratioNewCurHeight});
theArea.setCenterPoint({x: center.x * ratioNewCurWidth, y: center.y * ratioNewCurHeight});

[mike-suggitt]

Can I assume from your silence that this worked? :)

[atomworks]

Hi Mike, apologies!

I'm running a circuit on tasks for this project and haven't got round to checking this yet. I was expecting to have had a chance by now so apologies for not responding!

I'll take a look at it and get back to you today / tomorrow! Thanks for taking a look in to this, much appreciated!

[theBliz]

+1
got the same issue but in crop-host.js there are not those line of code at the end of setMaxDimensions.
I tried to add the fix you suggest at the end of setMaxDimension but it didn't work.

Edit:
I found out that deleting the code line

elCanvas.prop('width',canvasDims[0]).prop('height',canvasDims[1]).css({'margin-left': -canvasDims[0]/2+'px', 'margin-top': -canvasDims[1]/2+'px'}); var ratioNewCurWidth=ctx.canvas.width/curWidth, ratioNewCurHeight=ctx.canvas.height/curHeight, ratioMin=Math.min(ratioNewCurWidth, ratioNewCurHeight); theArea.setX(theArea.getX()*ratioNewCurWidth); theArea.setY(theArea.getY()*ratioNewCurHeight); theArea.setSize(theArea.getSize()*ratioMin); console.log(theArea.getSize()*ratioMin);

in setMaxDimension, the ngImgCrop plugin works fine.