Blocks are moved into this SVG during a drag, improving performance. The entire SVG is translated using CSS transforms instead of SVG so the blocks are never repainted during drag improving performance.
Containing element.
Dom structure when the workspace is being dragged. If there is no drag in progress, the SVG is empty and display: none.
Move the blockCanvas and bubbleCanvas out of the surface SVG and on to newSurface.
The element to put the drag surface contents into.
Create the drag surface and inject it into the container.
Reports the surface translation in scaled workspace coordinates. Use this when finishing a drag to return blocks to the correct position.
Current translation of the surface
Set the SVG to have the block canvas and bubble canvas in it and then show the surface.
The block canvas
The
The element to insert the block canvas and bubble canvas after when it goes back in the DOM at the end of a drag.
The width of the workspace SVG element.
The height of the workspace SVG element.
The scale of the workspace being dragged.
Translate the entire drag surface during a drag. We translate the drag surface instead of the blocks inside the surface so that the browser avoids repainting the SVG. Because of this, the drag coordinates must be adjusted by scale.
X translation for the entire surface
Y translation for the entire surface
Fake class which should be extended to avoid inheriting static properties