let mainWrap = document.querySelector('#mainWrap');

// element or group that have transform inline
let gruopWithTransform = document.querySelector('#groupWithTransform');
let rectWithTransform = document.querySelector('#rectWithTransform');

const groupWrap = (el) => {
  let ghostGroup = document.createElement('g');

  if (el.nodeName == 'g') {
    if (el.hasAttribute('id')) {
      ghostGroup.id = el.id;
      el.removeAttribute('id');
    }
  } else {
    ghostGroup.setAttribute('transform', el.getAttribute('transform'));
    el.removeAttribute('transform');
  }

  if(el.nodeName === 'g') {
    ghostGroup.classList.add('ghostGroupVisibleInLayers');
    el.classList.add('ghostGroupInvisibleInLayers');
  } else {
    ghostGroup.classList.add('ghostGroupInvisibleInLayers');
  }

  el.parentNode.insertBefore(ghostGroup, el);
  ghostGroup.appendChild(el);
}

groupWrap(gruopWithTransform);
groupWrap(rectWithTransform);