fix: Fix block disposal animations (#7948)

* fix: Fix block disposal animations

* chore: Run lint

* chore: Remove unused import

* fix: Remove unused function arg
This commit is contained in:
Aaron Dodson
2024-03-19 14:08:12 -07:00
committed by GitHub
parent 2bebf6c137
commit 199c00afd5

View File

@@ -38,18 +38,26 @@ export function disposeUiEffect(block: BlockSvg) {
const svgGroup = block.getSvgRoot();
workspace.getAudioManager().play('delete');
const xy = workspace.getSvgXY(svgGroup);
const xy = block.getRelativeToSurfaceXY();
// Deeply clone the current block.
const clone: SVGGElement = svgGroup.cloneNode(true) as SVGGElement;
clone.setAttribute('transform', 'translate(' + xy.x + ',' + xy.y + ')');
workspace.getParentSvg().appendChild(clone);
if (workspace.isDragging()) {
workspace.getLayerManager()?.moveToDragLayer({
getSvgRoot: () => {
return clone;
},
});
} else {
workspace.getLayerManager()?.getBlockLayer().appendChild(clone);
}
const cloneRect = {
'x': xy.x,
'y': xy.y,
'width': block.width,
'height': block.height,
};
disposeUiStep(clone, cloneRect, workspace.RTL, new Date(), workspace.scale);
disposeUiStep(clone, cloneRect, workspace.RTL, new Date());
}
/**
* Animate a cloned block and eventually dispose of it.
@@ -60,29 +68,26 @@ export function disposeUiEffect(block: BlockSvg) {
* @param rect Starting rect of the clone.
* @param rtl True if RTL, false if LTR.
* @param start Date of animation's start.
* @param workspaceScale Scale of workspace.
*/
function disposeUiStep(
clone: Element,
rect: CloneRect,
rtl: boolean,
start: Date,
workspaceScale: number,
) {
const ms = new Date().getTime() - start.getTime();
const percent = ms / 150;
if (percent > 1) {
dom.removeNode(clone);
} else {
const x =
rect.x + (((rtl ? -1 : 1) * rect.width * workspaceScale) / 2) * percent;
const y = rect.y + rect.height * workspaceScale * percent;
const scale = (1 - percent) * workspaceScale;
const x = rect.x + (((rtl ? -1 : 1) * rect.width) / 2) * percent;
const y = rect.y + (rect.height / 2) * percent;
const scale = 1 - percent;
clone.setAttribute(
'transform',
'translate(' + x + ',' + y + ')' + ' scale(' + scale + ')',
);
setTimeout(disposeUiStep, 10, clone, rect, rtl, start, workspaceScale);
setTimeout(disposeUiStep, 10, clone, rect, rtl, start);
}
}