Merge pull request #2022 from rachel-fenichel/feature/canvas_transition

Add support for transitioning the workspace block and bubble canvases on scrollCenter
This commit is contained in:
Rachel Fenichel
2018-08-27 11:31:06 -07:00
committed by GitHub
3 changed files with 35 additions and 0 deletions

View File

@@ -164,6 +164,11 @@ Blockly.Css.CONTENT = [
'z-index: 50;', /* Display below toolbox, but above everything else. */
'}',
'.blocklyBlockCanvas.blocklyCanvasTransitioning,',
'.blocklyBubbleCanvas.blocklyCanvasTransitioning {',
'transition: transform .5s;',
'}',
'.blocklyTooltipDiv {',
'background-color: #ffffc7;',
'border: 1px solid #ddc;',

View File

@@ -1595,6 +1595,32 @@ Blockly.WorkspaceSvg.prototype.zoomToFit = function() {
this.scrollCenter();
};
/**
* Add a transition class to the block and bubble canvas, to animate any
* transform changes.
* @package
*/
Blockly.WorkspaceSvg.prototype.beginCanvasTransition = function() {
Blockly.utils.addClass(
/** @type {!SVGElement} */ this.svgBlockCanvas_,
'blocklyCanvasTransitioning');
Blockly.utils.addClass(
/** @type {!SVGElement} */ this.svgBubbleCanvas_,
'blocklyCanvasTransitioning');
};
/**
* Remove transition class from the block and bubble canvas.
* @package
*/
Blockly.WorkspaceSvg.prototype.endCanvasTransition = function() {
Blockly.utils.removeClass(
/** @type {!SVGElement} */ this.svgBlockCanvas_,
'blocklyCanvasTransitioning');
Blockly.utils.removeClass(
/** @type {!SVGElement} */ this.svgBubbleCanvas_,
'blocklyCanvasTransitioning');
};
/**
* Center the workspace.
*/

View File

@@ -302,7 +302,11 @@ Blockly.ZoomControls.prototype.createZoomResetSvg_ = function(rnd) {
Blockly.bindEventWithChecks_(zoomresetSvg, 'mousedown', null, function(e) {
ws.markFocused();
ws.setScale(ws.options.zoomOptions.startScale);
ws.beginCanvasTransition();
ws.scrollCenter();
setTimeout(function() {
ws.endCanvasTransition();
}, 500);
Blockly.Touch.clearTouchIdentifier(); // Don't block future drags.
e.stopPropagation(); // Don't start a workspace scroll.
e.preventDefault(); // Stop double-clicking from selecting text.