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.

[ibrierley]

Just wondering, if you want it resizable, what about if you set the main svg with a fixed width/height/viewBox, but out that inside an svg with a responsive set, eg 100% width/height and viewBox.

Like here http://svg.dabbles.info/fttest/index.html

You could even do something like

t.setOpts( { size: } ); on a resize, I've just added an example on the link above to make the handles bigger on a resize.

[neilliang]

Cool, very nice example. Looks perfect. Thanks for the assistance.

May I ask you a little question about image resizing? It's not really related with this subject. Do you know any plugin that can control image resizing with slider (Like Jquery UI slider)? I am trying combine Snap svg FreeTransform with slider bar controller. Thanks again.

[ibrierley]

Not sure, depends on what you mean by an image in this context, and if you mean svg, or an img tag or what. I'd just ask the question (you may get more success on Stackoverflow if it's a more general question).

[neilliang]

Okay, I see. Yes, I just made an svg resize demo for Stackoverflow. Thank you bro.

[ibrierley]

Out of interest, I've done some fundamental changes we are now on the development branch into the way some of it works. I'd be interested to know if you are still getting a problem (if so, could you slap it on a jsfiddle).