smooth-dnd icon indicating copy to clipboard operation
smooth-dnd copied to clipboard

Add support for Canvas on ghost of dragging

Open cbazza opened this issue 5 years ago • 0 comments

Basically when dragging something that has canvas inside, the ghost clone has blank canvas; it would be great if you could copy the previous canvas into the cloned one so that the ghost works properly, hide this new functionality behind a flag.

https://github.com/kutlugsahin/smooth-dnd/blob/master/src/mediator.ts

line 88:   const ghost: HTMLElement = wrapperElement.cloneNode(true) as HTMLElement; 

The problem is that cloneNode doesn't copy content of canvas so cloned canvas is blank so need to do something like this following line 88.

if (copyFullCanvas) {
        let elements = ghost.querySelectorAll("canvas");
        if (elements.length) {
            let sourceCanvas = wrapperElement.querySelectorAll("canvas");
            elements.forEach((canvas, idx)=>{
                let destCtx = canvas.getContext('2d');
                destCtx.drawImage(sourceCanvas[idx], 0, 0);
            });
        }
}

cbazza avatar Oct 19 '19 00:10 cbazza