Dynamically increase svg area in the miniature component.

[nsharma1396]

Bug reports:

Hi @chrvadala Amazing work with the library. I need a help with the miniature component. The problem is when the SVG elements in the pan-zoom area are draggable and are dragged out of the viewer area of the miniature, the miniature's inner area still stays fixed with it's original width and height thus covering the pan-zoom area only partially.

Something like this :

Is there any way to dynamically increase the coordinates being accessed by the miniature ?

The jsfiddle link to reproduce this issue is : https://jsfiddle.net/f67qyfsd/281/

[chrvadala]

You can't change the miniature coordinates because the purpose of the miniature is to show just the image part of the paper and not the external contents.

As solution you can develop your custom miniature (see customMiniature prop`) that works with different logic or let me suggest you to work in a different way;

You can have two square area, one inside the other distinguished by different colours:

• The inner square area can be your working area. There you can drop all your items that you want on the stage part of your image.
• The external square area (the outer area) can be your temporary area. There you can drop all your items that you want to move outside the current image, but still on the screen.

Hope that this helps you

[nsharma1396]

Thanks for the response. I don't think implementing the two square approach will be feasible in my app as the canvas will probably contain a large number of shapes which will also be resizable.

I discovered that I could increase the miniature width and height dynamically by updating the SVGWidth and SVGHeight using the setValue() method whenever required.

I have updated the code in jsfiddle ( Link : https://jsfiddle.net/f67qyfsd/311/ ) for this implementation. Not sure whether it is a good approach or not but it is still only for updating the width and the height.

Can't seem to find a way for updating the origin coordinates of the pan-area so I guess will have to add some restrictions for that part unless something like that is possible.