{"action":"created","issue":{"url":"https://api.github.com/repos/SVG-Edit/svgedit/issues/26","repository_url":"https://api.github.com/repos/SVG-Edit/svgedit","labels_url":"https://api.github.com/repos/SVG-Edit/svgedit/issues/26/labels{/name}","comments_url":"https://api.github.com/repos/SVG-Edit/svgedit/issues/26/comments","events_url":"https://api.github.com/repos/SVG-Edit/svgedit/issues/26/events","html_url":"https://github.com/SVG-Edit/svgedit/issues/26","id":119369529,"number":26,"title":"Chrome is unusable when selecting lots of paths","user":{"login":"codedread","id":100364,"avatar_url":"https://avatars.githubusercontent.com/u/100364?v=3","gravatar_id":"","url":"https://api.github.com/users/codedread","html_url":"https://github.com/codedread","followers_url":"https://api.github.com/users/codedread/followers","following_url":"https://api.github.com/users/codedread/following{/other_user}","gists_url":"https://api.github.com/users/codedread/gists{/gist_id}","starred_url":"https://api.github.com/users/codedread/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/codedread/subscriptions","organizations_url":"https://api.github.com/users/codedread/orgs","repos_url":"https://api.github.com/users/codedread/repos","events_url":"https://api.github.com/users/codedread/events{/privacy}","received_events_url":"https://api.github.com/users/codedread/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":19,"created_at":"2015-11-29T16:37:05Z","updated_at":"2016-04-22T18:26:54Z","closed_at":null,"body":"Open SVG-edit with the SVG file pasted below and then drag-select a bunch of the paths.  You can see that Chrome has a hard time rendering the select boxes and keeping up with the mouse.  No similar problem exists in Firefox which keeps up just fine.\r\n\r\n========\r\n\r\n<svg width=\"500\" height=\"500\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\">\r\n <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->\r\n <g stroke=\"null\">\r\n  <title>Features</title>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m148.72322,202.77881c3.67596,-7.00858 4.05699,-8.48969 7.73283,-15.49817c4.82916,-5.13416 10.29091,15.0087 12.77013,22.47559\" id=\"svg_18\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m134.34709,188.39349c2.60612,-9.00548 4.22293,-15.91933 9.37553,-22.53543c5.15273,-6.61609 7.35718,15.71062 10.2251,23.18295\" id=\"svg_7\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m136.16826,164.55119c1.1557,-5.18611 3.70772,-8.86615 7.38377,-15.87468c4.82896,-5.13423 10.29083,15.00858 12.77013,22.47551\" id=\"svg_9\"/>\r\n  <path stroke=\"#000000\" id=\"svg_5\" fill=\"none\" stroke-width=\"2\" d=\"m130.94594,204.61511c3.67603,-7.00833 9.60486,-25.04381 14.08055,-16.27576c4.47578,8.76801 2.61897,14.25388 6.4225,23.25299\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m152.97641,175.37897c3.67586,-7.00858 4.05688,-8.48958 7.73283,-15.49817c4.82898,-5.13432 10.29091,15.00867 12.77014,22.47546\" id=\"svg_8\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m150.13936,156.1627c3.67606,-7.00853 4.05699,-8.48958 7.73294,-15.49815c4.82898,-5.13428 10.29082,15.00871 12.77002,22.47554\" id=\"svg_10\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m168.68434,166.18129c3.67595,-7.00853 4.0569,-8.4897 7.73285,-15.49821c4.82907,-5.13431 10.29094,15.00853 12.77016,22.47537\" id=\"svg_11\"/>\r\n  <path stroke=\"#000000\" id=\"svg_6\" fill=\"none\" stroke-width=\"2\" d=\"m205.0256,137.67624c3.6759,-7.00862 4.05692,-8.48962 7.73285,-15.49835c4.8291,-5.13411 10.29095,15.00867 12.77005,22.47548\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m216.67606,92.73186c-2.45419,-3.70404 -2.69266,-4.47987 -5.14682,-8.18393c-3.30978,-2.7504 -7.60007,7.6183 -9.5123,11.45415\" id=\"svg_39\"/>\r\n  <path stroke=\"#000000\" id=\"svg_13\" fill=\"none\" stroke-width=\"2\" d=\"m194.38721,115.84761c3.6759,-7.00873 4.05688,-8.48973 7.73282,-15.49831c4.82913,-5.13412 10.29089,15.0087 12.77014,22.47536\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m189.23273,144.93457c2.86975,-7.40543 3.08279,-8.92207 5.95258,-16.32764c4.22498,-5.68558 11.90253,13.64261 15.2005,20.75206\" id=\"svg_17\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m164.20309,147.66077c5.39839,-10.29269 5.95789,-12.46753 11.35617,-22.76022c7.09175,-7.53992 15.11285,22.04138 18.75372,33.00671\" id=\"svg_12\"/>\r\n  <path stroke=\"#000000\" id=\"svg_14\" fill=\"none\" stroke-width=\"2\" d=\"m221.53101,130.08604c3.67593,-7.00848 4.05679,-8.4895 7.73282,-15.49803c4.8291,-5.13428 10.29086,15.00858 12.77011,22.47531\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m252.53738,119.94174c3.67596,-7.00867 4.05692,-8.48962 7.73288,-15.49823c4.8291,-5.13429 10.2908,15.00868 12.77002,22.47539\" id=\"svg_34\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m252.0069,59.41127c2.8374,-4.2672 3.12933,-5.16995 5.96677,-9.43725c3.7392,-3.12103 8.04279,9.18108 9.99158,13.74242\" id=\"svg_36\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m259.95792,87.08681c3.67596,-7.00858 4.05688,-8.48962 7.73282,-15.4984c4.82916,-5.13402 10.29083,15.0088 12.77005,22.4756\" id=\"svg_35\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m239.05927,99.37352c3.67593,-7.00835 4.05698,-8.48949 7.73279,-15.49802c4.82932,-5.13422 10.29086,15.00865 12.77017,22.47546\" id=\"svg_33\"/>\r\n  <path stroke=\"#000000\" id=\"svg_20\" fill=\"none\" stroke-width=\"2\" d=\"m209.35367,110.6425c6.68887,-12.75301 7.38211,-15.44804 14.07104,-28.20078c8.78687,-9.34227 18.72534,27.31003 23.23669,40.89679\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m165.71919,115.79915c2.83745,-4.26738 3.12932,-5.16995 5.96667,-9.43719c3.73929,-3.12099 8.04288,9.18094 9.99161,13.74226\" id=\"svg_38\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m180.1962,124.27328c3.67586,-7.00854 4.05692,-8.48961 7.73285,-15.49814c4.82913,-5.13432 10.2908,15.00879 12.77011,22.47556\" id=\"svg_15\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m144.56628,228.48172c3.67604,-7.00858 9.60486,-25.04404 14.08057,-16.27588c4.4758,8.76801 2.61899,14.25378 6.4225,23.25308\" id=\"svg_26\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m143.79399,260.17172c3.67596,-7.00858 9.60478,-25.04401 14.08057,-16.27579c4.4758,8.76804 2.61908,14.25391 6.42241,23.25317\" id=\"svg_27\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m128.49568,242.01157c3.67593,-7.00836 9.60486,-25.04382 14.08055,-16.27582c4.47578,8.76816 2.61908,14.25375 6.4225,23.25302\" id=\"svg_22\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m87.64987,265.83051c-2.44299,-4.35745 -2.67896,-5.27109 -5.12199,-9.62842c-3.30164,-3.23181 -7.62361,8.99377 -9.54773,13.5177\" id=\"svg_42\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m86.35857,261.17676c3.6759,-7.0087 9.60474,-25.04413 14.08052,-16.27588c4.47578,8.76801 2.61899,14.25388 6.42241,23.25317\" id=\"svg_24\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m119.25476,268.492c3.67586,-7.00858 9.60478,-25.04401 14.08055,-16.27579c4.47571,8.76794 2.61899,14.25369 6.42233,23.25299\" id=\"svg_28\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m103.65144,248.14322c3.67601,-7.00854 9.60474,-25.04401 14.08063,-16.27594c4.47568,8.76819 2.61888,14.25397 6.42232,23.25314\" id=\"svg_23\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m118.26764,195.03024c-2.44283,-4.35754 -2.679,-5.2709 -5.12202,-9.62854c-3.30139,-3.2317 -7.62361,8.99408 -9.54776,13.51782\" id=\"svg_40\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m101.94829,231.44849c-2.44299,-4.35745 -2.67903,-5.27106 -5.12204,-9.62842c-3.30147,-3.23178 -7.62358,8.99377 -9.54767,13.51767\" id=\"svg_41\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m98.34485,223.09976c3.67595,-7.00858 9.60487,-25.04401 14.08058,-16.27597c4.47566,8.76819 2.61896,14.25388 6.42241,23.2532\" id=\"svg_25\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m115.46883,220.05466c3.67587,-7.00867 9.60478,-25.04391 14.08057,-16.27585c4.47569,8.7681 2.619,14.25375 6.42242,23.25317\" id=\"svg_21\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m112.90187,184.77457c1.76805,-5.90698 5.02887,-9.94191 9.86702,-17.73328c6.01857,-5.51451 10.67798,18.32697 12.93161,27.20609\" id=\"svg_16\"/>\r\n  <path stroke=\"#000000\" fill=\"none\" stroke-width=\"2\" d=\"m137.50252,277.67395c3.67577,-7.00867 9.60469,-25.04407 14.08058,-16.27594c4.47577,8.76801 2.61888,14.25388 6.4223,23.25317\" id=\"svg_29\"/>\r\n </g>\r\n</svg>\r\n"},"comment":{"url":"https://api.github.com/repos/SVG-Edit/svgedit/issues/comments/213542584","html_url":"https://github.com/SVG-Edit/svgedit/issues/26#issuecomment-213542584","issue_url":"https://api.github.com/repos/SVG-Edit/svgedit/issues/26","id":213542584,"user":{"login":"flintobrien","id":297997,"avatar_url":"https://avatars.githubusercontent.com/u/297997?v=3","gravatar_id":"","url":"https://api.github.com/users/flintobrien","html_url":"https://github.com/flintobrien","followers_url":"https://api.github.com/users/flintobrien/followers","following_url":"https://api.github.com/users/flintobrien/following{/other_user}","gists_url":"https://api.github.com/users/flintobrien/gists{/gist_id}","starred_url":"https://api.github.com/users/flintobrien/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/flintobrien/subscriptions","organizations_url":"https://api.github.com/users/flintobrien/orgs","repos_url":"https://api.github.com/users/flintobrien/repos","events_url":"https://api.github.com/users/flintobrien/events{/privacy}","received_events_url":"https://api.github.com/users/flintobrien/received_events","type":"User","site_admin":false},"created_at":"2016-04-22T18:26:54Z","updated_at":"2016-04-22T18:26:54Z","body":"We've seen a problem in Chrome and Firefox; particularly when the top-level selections have matrix transforms. With a large SVG document (270 top-level elements), select-all takes over 1 minute. When there are a few elements, you don't see the problem.\r\n\r\nChrome's profiler points to the native getBBox() taking all the time. \r\n\r\n**The problems are due to:**\r\n\r\n1) Both the thumbnail preview window and the prevalence of elements with matrix transforms (in our sample document). When getStrokedBBox/getCheckedBBox() sees a matrix transform, it calculates the BBox by enclosing a clone of the element and adding it to the DOM, calling getBBox(), then removing it. Without the transforms, there's no DOM change, so it's faster. If you delete the thumbnail and keep the transforms, it's faster, but still slow.\r\n\r\n2) The various getBBox utility functions call the native getBBox() function multiple times for each element. It's at least 4 times for each top-level element when performing a rubber band selection.\r\n\r\n3) svgcanvas: addToSelection() calls svgedit.utilities.getBBox(), throws the bbox away, then calls selectorManager.requestSelector() which calls svgedit.utilities.getBBox() again.\r\n\r\nI've worked this week to refactor the related functions to calculate the BBox without updating the DOM and only call the native getBBox() once. I hope it's satisfactory. Stay tuned for some pull requests. GEC fork."}}