Function createCardGhost

public/js/dragAndDrop.js:95–193

(card, rect, opts)

}

function createCardGhost(card, rect, opts) {
  const options = opts || {};
  const scale   = typeof options.scale === 'number' ? options.scale : 1;
  const opacity = typeof options.opacity === 'number' ? options.opacity : 1;
  const transformOrigin = typeof options.transformOrigin === 'string'
    ? options.transformOrigin
    : 'center center';
  const materialIcon = typeof options.materialIcon === 'string' ? options.materialIcon : '';
  const materialIconOpacity = typeof options.materialIconOpacity === 'number' ? options.materialIconOpacity : 0;
  const materialIconScale = typeof options.materialIconScale === 'number' ? options.materialIconScale : 1.15;
  const bodyOpacity = typeof options.bodyOpacity === 'number' ? options.bodyOpacity : 0.6;
  const appZoomScale = getAppZoomScale();

  const cs = window.getComputedStyle(card);

  const wrap = document.createElement('div');
  wrap.className = 'card-ghost-wrap';

  Object.assign(wrap.style, {
    position: 'fixed',
    left: rect.left + 'px',
    top: rect.top + 'px',
    width: rect.width + 'px',
    height: rect.height + 'px',
    margin: '0',
    zIndex: '12000',
    pointerEvents: 'none',
    transformOrigin,
    transform: 'scale(' + scale + ')',
    opacity: String(opacity),

    backgroundColor: cs.backgroundColor || 'rgba(24,24,24,.96)',
    borderRadius: cs.borderRadius || '',
    boxShadow: cs.boxShadow || '',
    borderColor: cs.borderColor || '',
    borderWidth: cs.borderWidth || '',
    borderStyle: cs.borderStyle || '',
    backdropFilter: cs.backdropFilter || '',

    // ✨ make the ghost crisper
    overflow: 'hidden',
    willChange: 'transform, opacity',
    backfaceVisibility: 'hidden'
  });

  const ghost = card.cloneNode(true);
  Object.assign(ghost.style, {
    position: 'absolute',
    left: '0',
    top: '0',
    zIndex: '1',
    width: (rect.width / appZoomScale) + 'px',
    height: (rect.height / appZoomScale) + 'px',
    margin: '0',
    pointerEvents: 'none',
    transformOrigin: 'top left',
    transform: `scale(${appZoomScale})`,
    backgroundColor: 'transparent',