title: KonvaJS: how to keep the position and rotation of the shape in the group after detached?
body: <p>How can keep the position and rotation and scale properties of shapes in the group after detached?</p>
  
  <p>It looks shapes are lost there changed properties if detach every shapes in the group after the user move or resize, rotate the group that wrapped under the Transformer.</p>
  
  <p>I try it like following source.</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;button id="ungroup"&gt;ungroup&lt;/button&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>    const stage = new Konva.Stage({
         container: 'container',
         width: window.innerWidth,
         height: window.innerHeight
      });
  
      const layer = new Konva.Layer();
      stage.add(layer);
  
      const rect = new Konva.Rect({
         x : 50, y : 50, width: 100, height: 100,
         fill: 'black',
      });
      const rect2 = new Konva.Rect({
         x : 150, y : 50, width: 80, height: 80,
         fill: 'red',
      });
  
      const group = new Konva.Group({
          draggable: true
      });
      group.add(rect);
      group.add(rect2);
  
      const tr = new Konva.Transformer({
          node: group
      });
  
      layer.add(group);
      layer.add(tr);
      layer.draw();
  
      document.getElementById('ungroup').addEventListener('click', () =&gt; {
          tr.remove()
        // how can keep the moved or rotated properties?
        rect.moveTo(layer);
        rect2.moveTo(layer);
          group.removeChildren();
        group.remove();
        layer.draw();
      });
  </code></pre>
  
  <p>A group has two rectangle can move with a transformer.
  But after detach them, they lose movement and scale and rotation.</p>