DraggableTest2

import React, { useRef, useEffect } from 'react';
import interact from 'interactjs';

interface ResizableIframeProps {
  windowIndex: number;
  iframeSrc: string;
}

const ResizableIframe: React.FC<ResizableIframeProps> = ({ windowIndex, iframeSrc }) => {
  const resizableRef = useRef<HTMLDivElement>(null);
  const iframeRef = useRef<HTMLIFrameElement>(null);

  const handleResizeStart = (event: any) => {
    const target = event.target;
    target.setAttribute('data-x', target.offsetLeft);
    target.setAttribute('data-y', target.offsetTop);

    iframeRef.current?.style.setProperty('pointer-events', 'none');
  };

  const handleResizeMove = (event: any) => {
    const target = event.target;
    const x = parseFloat(target.getAttribute('data-x')) || 0;
    const y = parseFloat(target.getAttribute('data-y')) || 0;

    if (resizableRef.current) {
      resizableRef.current.style.width = event.rect.width + 'px';
      resizableRef.current.style.height = event.rect.height + 'px';

      const newX = x + event.deltaRect.left;
      const newY = y + event.deltaRect.top;

      resizableRef.current.style.transform = `translate(${newX}px, ${newY}px)`;

      target.setAttribute('data-x', newX.toString());
      target.setAttribute('data-y', newY.toString());
    }
  };

  const handleResizeEnd = () => {
    iframeRef.current?.style.setProperty('pointer-events', 'auto');
  };

  const handleDragMoveStart = () => {
    iframeRef.current?.style.setProperty('pointer-events', 'none');
  };

  const handleDragMoveEnd = () => {
    iframeRef.current?.style.setProperty('pointer-events', 'auto');
  };

  const dragMoveListener = (event: any) => {
    const target = resizableRef.current;
    const x = (parseFloat(target?.getAttribute('data-x')) || 0) + event.dx;
    const y = (parseFloat(target?.getAttribute('data-y')) || 0) + event.dy;

    target?.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

    target?.setAttribute('data-x', x.toString());
    target?.setAttribute('data-y', y.toString());
  };

  useEffect(() => {
    if (resizableRef.current) {
      interact(resizableRef.current)
        .resizable({
          edges: { bottom: true, right: true },
          restrictEdges: {
            outer: 'parent',
            endOnly: true,
          },
          restrictSize: {
            min: { width: 50, height: 50 },
          },
          inertia: true,
        })
        .on('resizestart', handleResizeStart)
        .on('resizemove', handleResizeMove)
        .on('resizeend', handleResizeEnd);

      const draggableRef = resizableRef.current.querySelector('.draggable-window');
      if (draggableRef) {
        interact(draggableRef)
          .draggable({
            inertia: true,
            modifiers: [
              interact.modifiers.restrictRect({
                restriction: 'parent',
                endOnly: true,
              }),
            ],
            autoScroll: true,
            listeners: {
              move: dragMoveListener,
            },
          })
          .on('dragstart', handleDragMoveStart)
          .on('dragend', handleDragMoveEnd);
      }
    }
  }, []);

  return (
    <div className="window" ref={resizableRef} style={{ transform: 'translate(0px, 0px)' }}>
      <div className="border-window">
        <div className="draggable-window">Draggable frame {windowIndex}</div>
        <embed src={iframeSrc} ref={iframeRef}></embed>
      </div>
    </div>
  );
};

export default ResizableIframe;