Handles' position is not updated after window resizing

[neilliang]

This is an awesome svg transformer. I love it. I found an issue. As the demo image bellow, the handles are not in right position as the browser being resized. How do I solve this issue? thanks.

[ibrierley]

Thanks for the update, I will try and get round to checking through the code, but it may be a short while as I'm away soon for a bit. So I can replicate, are you just resizing the browse by dragging the corners of the browser or whatever ?

Can you make it happen here http://svg.dabbles.info/Snap.svg.FreeTransform/ ? Just wondering if it's a combination of things, so if you have a jsfiddle example or something it would be very useful.

[neilliang]

The handle's position is not updated after browser resized. I think that is because the svg set percentage width base on browser. So, svg size keeps changing by the browser. This might be not an issue, just a improvement feature.

[ibrierley]

Do you mean the papers svg (that you are adding your path/image and the handles to) is 100%/100% width/height ?

[neilliang]

Yes, I think so. SVG default width and height are 100%? I am not sure.

Here are my code and svg file.

      <svg id="main-container"></svg>
      <script src="snap.svg-min.js"></script>
      <script src="snap.svg.free_transform.js"></script>
      <style>
         #   .ftdisc { fill: grey; }
         #   .fthandle { fill: grey; }
         #   .ftcentercircle { fill: red; }
         #   .ftbbox { stroke-width: 10; }
         #   .ftaxisline { stroke-width: 10; }
      </style>
      <script type="text/javascript">
         var s = Snap('#main-container');
         var ft;
                 Snap.load( "phone1.svg", function( frag ) {
                 var g = s.g();
                 g.append(frag);
         		
         	var allG = s.select('.myG');      
                       ft = s.freeTransform( allG, { snap: { rotate: 1 }, size: 8, draw: 'bbox',keepRatio: true,undrag: false});
         		window.onresize = function(event) {
         		console.log('window resized')
                      ft.updateHandles()
         	    };
         } );          
      </script>

phone1.svg

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g class="myG"> 
	<g>
		<path d="M461.913,5.565c-26.811,0-48.766,21.176-50.026,47.681c-52.002,17.83-138.69,52.493-272.757,52.493H116.87
			c-22.225,0-41.106,14.556-47.636,34.632C29.97,147.153,0,181.436,0,222.609s29.97,75.455,69.234,82.237
			c5.618,17.27,20.377,30.442,38.541,33.79l21.318,126.063c4.09,24.183,24.86,41.736,49.387,41.736
			c30.514,0,53.702-27.421,48.692-57.48l-17.664-105.984c93.9,9.151,145.539,29.512,202.379,49.001
			c1.26,26.505,23.215,47.681,50.026,47.681c27.618,0,50.087-22.469,50.087-50.087V55.652C512,28.034,489.531,5.565,461.913,5.565z
			 M66.783,269.834c-19.435-6.89-33.391-25.459-33.391-47.225s13.956-40.336,33.391-47.226V269.834z M178.479,473.043
			c-8.175,0-15.098-5.851-16.462-13.912l-20.232-119.64c11.07,0.043,22.237,0.348,33.445,0.923l19.005,114.03
			C195.858,464.186,188.359,473.043,178.479,473.043z M197.009,308.373c-19.403-1.504-38.796-2.287-57.878-2.287H116.87
			c-9.206,0.001-16.696-7.489-16.696-16.695V155.826c0-9.206,7.49-16.696,16.696-16.696h22.261c19.083,0,38.476-0.784,57.878-2.287
			V308.373z M411.826,356.65c-44.604-15.292-93.983-34.459-181.426-44.979V133.546c86.614-10.42,135.465-29.223,181.426-44.98
			V356.65z M478.609,389.565c0,9.206-7.49,16.696-16.696,16.696s-16.696-7.49-16.696-16.696c0-4.33,0-329.281,0-333.913
			c0-9.206,7.49-16.696,16.696-16.696s16.696,7.49,16.696,16.696V389.565z"/>
	</g>
</g>
</svg>

[neilliang]

Well, I just set svg width 500px, the result is the same. I think I found the problem. Here is what I have done to avoid the issue.

1. Set fixed svg width to prevent svg from resized by browser.
2. Set fixed height to main-canvas to prevent svg from moving by drag browser.

If svg gets resized/moved by browser, the handles won't update the position.

[neilliang]

Alright, I just saw that you've updated comment. I'll make a fiddle example later.

[neilliang]

Try to resize the fiddle window or browser, you will see the issue.
https://jsfiddle.net/nta1s22f/

[ibrierley]

Just wondering if this may work as a workaround until I get a closer look.
https://jsfiddle.net/nta1s22f/2/

[neilliang]

Yeah the demo looks nice. But that brings another issue :(
After you unplug and re-create the object, the handles become so small...Is that solvable?

[ibrierley]

Hmm yep, I think for the moment, you may have to remove the viewbox from the svg to get it to work. Appreciate that may not fix the problem for you, but I suspect this one is probably quite a tricky problem, and I don't think I will have time just atm to fix

[neilliang]

Sorry, I went on vacation these days. I tested the demo again. Seems to you have fixed it?? Looks perfect :D

[ibrierley]

Hah nope, maybe you had removed the viewbox from the svg ?

[neilliang]

nope, the svg comes from another site. I don't have permission to edit it.

[neilliang]

Oh my bad, the problem is still there..If the object get resized by handles before the browser resizing, it happens. Never mind, thanks for taking time for this.

[neilliang]

Just let you know. Event remove the viewpoint, the handle size issue still happends.