{"action":"created","issue":{"url":"https://api.github.com/repos/svgdotjs/svg.js/issues/650","repository_url":"https://api.github.com/repos/svgdotjs/svg.js","labels_url":"https://api.github.com/repos/svgdotjs/svg.js/issues/650/labels{/name}","comments_url":"https://api.github.com/repos/svgdotjs/svg.js/issues/650/comments","events_url":"https://api.github.com/repos/svgdotjs/svg.js/issues/650/events","html_url":"https://github.com/svgdotjs/svg.js/issues/650","id":220296635,"number":650,"title":"Selecting multiple elements using svg.select.js","user":{"login":"AlessandroDM","id":27023811,"avatar_url":"https://avatars0.githubusercontent.com/u/27023811?v=3","gravatar_id":"","url":"https://api.github.com/users/AlessandroDM","html_url":"https://github.com/AlessandroDM","followers_url":"https://api.github.com/users/AlessandroDM/followers","following_url":"https://api.github.com/users/AlessandroDM/following{/other_user}","gists_url":"https://api.github.com/users/AlessandroDM/gists{/gist_id}","starred_url":"https://api.github.com/users/AlessandroDM/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AlessandroDM/subscriptions","organizations_url":"https://api.github.com/users/AlessandroDM/orgs","repos_url":"https://api.github.com/users/AlessandroDM/repos","events_url":"https://api.github.com/users/AlessandroDM/events{/privacy}","received_events_url":"https://api.github.com/users/AlessandroDM/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-04-07T18:45:00Z","updated_at":"2017-04-07T21:08:46Z","closed_at":"2017-04-07T21:08:46Z","body":"Good Day,\r\nFirst of all thanks for the nice libraries you have shared and sorry if the question is basic.\r\n\r\nI was playing a bit with the library in an attempt to make a small diagram editor.\r\nI am aware of the alternative libraries that offer a diagram editor out of the box, but none I saw worked natively with SVG and I thought it would be fun to try it.\r\n\r\nI started with: svg.js + svg.select.js + svg.resize.js + svg.draggable plugins + svg.draw.js plugins\r\nas they already offered already many functionalities a user would need to manipulate shapes at runtime.\r\n\r\nI believe the \"svg.select.js\" does not have the ability to select multiple shapes so I thought that I could instead add elements into a group and select the group to move / resize or rotate multiple shapes (from the documentation I understood that was the purpose of the group).\r\n\r\nI am able to add multiple shapes to a group and use a function similar to the below:\r\n\r\n    function groupAddElement(el, g)\r\n    {\r\n        //deactivate individual elements \"selectable\", \"draggable\" and \"resize\" runtime features\r\n        el.selectize(false);\r\n        el.draggable(false);\r\n        el.resize(false);\r\n\r\n        //add the element to the group and enable \"selectable\", \"draggable\" on the group.\r\n        g.add(el);\r\n        g.draggable(true,{});\r\n        // every time a new element is added need to re-initialize the selectize.\r\n        g.selectize(false);\r\n        g.selectize({deepSelect:false});\r\n    }\r\n\r\nI can now move shapes at runtime by moving the group but then, how do you move the elements back into the parent without losing their new position after they have been dragged somewhere else?\r\n\r\nIf I do something like this:\r\n\r\n    function groupDeselectAll(g, parentSVG)\r\n    {\r\n        g.draggable(false,{});\r\n        g.selectize(false);\r\n\r\n        //loops through the group shapes to add them back to the main SVG\r\n        g.each(function(i, children) {\r\n            // each SVG element in the diagram that can be moved has a class associated\r\n            // added on creation specifically to allow easier selection.\r\n            if (this.hasClass(\"drawingShapeElement\")) {\r\n                this.draggable(true,{});\r\n                //move back the elements into the main SVG\r\n                parentSVG.add(this);\r\n            }\r\n        });\r\n        \r\n        // clean group just in case (is it necessary?)\r\n        g.remove();\r\n    }\r\n\r\nit will add the elements back into the main SVG object but they will reset their position to their initial state.\r\n\r\nThank you."},"comment":{"url":"https://api.github.com/repos/svgdotjs/svg.js/issues/comments/292652324","html_url":"https://github.com/svgdotjs/svg.js/issues/650#issuecomment-292652324","issue_url":"https://api.github.com/repos/svgdotjs/svg.js/issues/650","id":292652324,"user":{"login":"AlessandroDM","id":27023811,"avatar_url":"https://avatars0.githubusercontent.com/u/27023811?v=3","gravatar_id":"","url":"https://api.github.com/users/AlessandroDM","html_url":"https://github.com/AlessandroDM","followers_url":"https://api.github.com/users/AlessandroDM/followers","following_url":"https://api.github.com/users/AlessandroDM/following{/other_user}","gists_url":"https://api.github.com/users/AlessandroDM/gists{/gist_id}","starred_url":"https://api.github.com/users/AlessandroDM/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AlessandroDM/subscriptions","organizations_url":"https://api.github.com/users/AlessandroDM/orgs","repos_url":"https://api.github.com/users/AlessandroDM/repos","events_url":"https://api.github.com/users/AlessandroDM/events{/privacy}","received_events_url":"https://api.github.com/users/AlessandroDM/received_events","type":"User","site_admin":false},"created_at":"2017-04-07T21:08:46Z","updated_at":"2017-04-07T21:08:46Z","body":"I have adjusted to create a new Group for every \"flatten\" and now it works again.\r\n\r\nThank you for your help, I am having fun with the library."}}
{"actor":{"display_login":"AlessandroDM"}}