mirror of
https://github.com/google/blockly.git
synced 2026-01-04 15:40:08 +01:00
de904ab128
* chore: remove deprecated functionality in events files * chore: remove deprecated items in renderers * chore: remove deprecated items in core * chore: remove mixin deprecation * chore: fix tests after removing deprecations
596 lines
18 KiB
TypeScript
596 lines
18 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2012 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* Object representing a mutator dialog. A mutator allows the
|
|
* user to change the shape of a block using a nested blocks editor.
|
|
*
|
|
* @class
|
|
*/
|
|
import * as goog from '../closure/goog/goog.js';
|
|
goog.declareModuleId('Blockly.Mutator');
|
|
|
|
// Unused import preserved for side-effects. Remove if unneeded.
|
|
import './events/events_bubble_open.js';
|
|
|
|
import type {Block} from './block.js';
|
|
import type {BlockSvg} from './block_svg.js';
|
|
import type {BlocklyOptions} from './blockly_options.js';
|
|
import {Bubble} from './bubble.js';
|
|
import {config} from './config.js';
|
|
import type {Connection} from './connection.js';
|
|
import type {Abstract} from './events/events_abstract.js';
|
|
import {BlockChange} from './events/events_block_change.js';
|
|
import * as eventUtils from './events/utils.js';
|
|
import {Icon} from './icon_old.js';
|
|
import {Options} from './options.js';
|
|
import type {Coordinate} from './utils/coordinate.js';
|
|
import * as dom from './utils/dom.js';
|
|
import {Svg} from './utils/svg.js';
|
|
import * as toolbox from './utils/toolbox.js';
|
|
import * as xml from './utils/xml.js';
|
|
import type {WorkspaceSvg} from './workspace_svg.js';
|
|
|
|
/**
|
|
* Class for a mutator dialog.
|
|
*/
|
|
export class Mutator extends Icon {
|
|
private quarkNames: string[];
|
|
|
|
/**
|
|
* Workspace in the mutator's bubble.
|
|
* Due to legacy code in procedure block definitions, this name
|
|
* cannot change.
|
|
*/
|
|
private workspace_: WorkspaceSvg | null = null;
|
|
|
|
/** Width of workspace. */
|
|
private workspaceWidth = 0;
|
|
|
|
/** Height of workspace. */
|
|
private workspaceHeight = 0;
|
|
|
|
/**
|
|
* The SVG element that is the parent of the mutator workspace, or null if
|
|
* not created.
|
|
*/
|
|
private svgDialog: SVGSVGElement | null = null;
|
|
|
|
/**
|
|
* The root block of the mutator workspace, created by decomposing the
|
|
* source block.
|
|
*/
|
|
private rootBlock: BlockSvg | null = null;
|
|
|
|
/**
|
|
* Function registered on the main workspace to update the mutator contents
|
|
* when the main workspace changes.
|
|
*/
|
|
private sourceListener: Function | null = null;
|
|
|
|
/**
|
|
* The PID associated with the updateWorkpace_ timeout, or null if no timeout
|
|
* is currently running.
|
|
*/
|
|
private updateWorkspacePid: ReturnType<typeof setTimeout> | null = null;
|
|
|
|
/** @param quarkNames List of names of sub-blocks for flyout. */
|
|
constructor(quarkNames: string[], block: BlockSvg) {
|
|
super(block);
|
|
this.quarkNames = quarkNames;
|
|
}
|
|
|
|
/**
|
|
* Set the block this mutator is associated with.
|
|
*
|
|
* @param block The block associated with this mutator.
|
|
* @internal
|
|
*/
|
|
setBlock(block: BlockSvg) {
|
|
this.block_ = block;
|
|
}
|
|
|
|
/**
|
|
* Returns the workspace inside this mutator icon's bubble.
|
|
*
|
|
* @returns The workspace inside this mutator icon's bubble or null if the
|
|
* mutator isn't open.
|
|
* @internal
|
|
*/
|
|
getWorkspace(): WorkspaceSvg | null {
|
|
return this.workspace_;
|
|
}
|
|
|
|
/**
|
|
* Draw the mutator icon.
|
|
*
|
|
* @param group The icon group.
|
|
*/
|
|
protected override drawIcon_(group: Element) {
|
|
// Square with rounded corners.
|
|
dom.createSvgElement(
|
|
Svg.RECT,
|
|
{
|
|
'class': 'blocklyIconShape',
|
|
'rx': '4',
|
|
'ry': '4',
|
|
'height': '16',
|
|
'width': '16',
|
|
},
|
|
group
|
|
);
|
|
// Gear teeth.
|
|
dom.createSvgElement(
|
|
Svg.PATH,
|
|
{
|
|
'class': 'blocklyIconSymbol',
|
|
'd':
|
|
'm4.203,7.296 0,1.368 -0.92,0.677 -0.11,0.41 0.9,1.559 0.41,' +
|
|
'0.11 1.043,-0.457 1.187,0.683 0.127,1.134 0.3,0.3 1.8,0 0.3,' +
|
|
'-0.299 0.127,-1.138 1.185,-0.682 1.046,0.458 0.409,-0.11 0.9,' +
|
|
'-1.559 -0.11,-0.41 -0.92,-0.677 0,-1.366 0.92,-0.677 0.11,' +
|
|
'-0.41 -0.9,-1.559 -0.409,-0.109 -1.046,0.458 -1.185,-0.682 ' +
|
|
'-0.127,-1.138 -0.3,-0.299 -1.8,0 -0.3,0.3 -0.126,1.135 -1.187,' +
|
|
'0.682 -1.043,-0.457 -0.41,0.11 -0.899,1.559 0.108,0.409z',
|
|
},
|
|
group
|
|
);
|
|
// Axle hole.
|
|
dom.createSvgElement(
|
|
Svg.CIRCLE,
|
|
{'class': 'blocklyIconShape', 'r': '2.7', 'cx': '8', 'cy': '8'},
|
|
group
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Clicking on the icon toggles if the mutator bubble is visible.
|
|
* Disable if block is uneditable.
|
|
*
|
|
* @param e Mouse click event.
|
|
*/
|
|
protected override iconClick_(e: PointerEvent) {
|
|
if (this.getBlock().isEditable()) {
|
|
super.iconClick_(e);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Create the editor for the mutator's bubble.
|
|
*
|
|
* @returns The top-level node of the editor.
|
|
*/
|
|
private createEditor(): SVGSVGElement {
|
|
/* Create the editor. Here's the markup that will be generated:
|
|
<svg>
|
|
[Workspace]
|
|
</svg>
|
|
*/
|
|
this.svgDialog = dom.createSvgElement(Svg.SVG, {
|
|
'x': Bubble.BORDER_WIDTH,
|
|
'y': Bubble.BORDER_WIDTH,
|
|
});
|
|
// Convert the list of names into a list of XML objects for the flyout.
|
|
let quarkXml;
|
|
if (this.quarkNames.length) {
|
|
quarkXml = xml.createElement('xml');
|
|
for (let i = 0, quarkName; (quarkName = this.quarkNames[i]); i++) {
|
|
const element = xml.createElement('block');
|
|
element.setAttribute('type', quarkName);
|
|
quarkXml.appendChild(element);
|
|
}
|
|
} else {
|
|
quarkXml = null;
|
|
}
|
|
const block = this.getBlock();
|
|
const workspaceOptions = new Options({
|
|
// If you want to enable disabling, also remove the
|
|
// event filter from workspaceChanged_ .
|
|
'disable': false,
|
|
'parentWorkspace': block.workspace,
|
|
'media': block.workspace.options.pathToMedia,
|
|
'rtl': block.RTL,
|
|
'horizontalLayout': false,
|
|
'renderer': block.workspace.options.renderer,
|
|
'rendererOverrides': block.workspace.options.rendererOverrides,
|
|
} as BlocklyOptions);
|
|
workspaceOptions.toolboxPosition = block.RTL
|
|
? toolbox.Position.RIGHT
|
|
: toolbox.Position.LEFT;
|
|
const hasFlyout = !!quarkXml;
|
|
if (hasFlyout) {
|
|
workspaceOptions.languageTree = toolbox.convertToolboxDefToJson(quarkXml);
|
|
}
|
|
this.workspace_ = this.newWorkspaceSvg(workspaceOptions);
|
|
this.workspace_.internalIsMutator = true;
|
|
this.workspace_.addChangeListener(eventUtils.disableOrphans);
|
|
|
|
// Mutator flyouts go inside the mutator workspace's <g> rather than in
|
|
// a top level SVG. Instead of handling scale themselves, mutators
|
|
// inherit scale from the parent workspace.
|
|
// To fix this, scale needs to be applied at a different level in the DOM.
|
|
const flyoutSvg = hasFlyout ? this.workspace_.addFlyout(Svg.G) : null;
|
|
const background = this.workspace_.createDom('blocklyMutatorBackground');
|
|
|
|
if (flyoutSvg) {
|
|
// Insert the flyout after the <rect> but before the block canvas so that
|
|
// the flyout is underneath in z-order. This makes blocks layering during
|
|
// dragging work properly.
|
|
background.insertBefore(flyoutSvg, this.workspace_.svgBlockCanvas_);
|
|
}
|
|
this.svgDialog.appendChild(background);
|
|
|
|
return this.svgDialog;
|
|
}
|
|
|
|
/**
|
|
* @internal
|
|
*/
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
newWorkspaceSvg(options: Options): WorkspaceSvg {
|
|
throw new Error(
|
|
'The implementation of newWorkspaceSvg should be ' +
|
|
'monkey-patched in by blockly.ts'
|
|
);
|
|
}
|
|
|
|
/** Add or remove the UI indicating if this icon may be clicked or not. */
|
|
override updateEditable() {
|
|
super.updateEditable();
|
|
if (!this.getBlock().isInFlyout) {
|
|
if (this.getBlock().isEditable()) {
|
|
if (this.iconGroup_) {
|
|
dom.removeClass(this.iconGroup_, 'blocklyIconGroupReadonly');
|
|
}
|
|
} else {
|
|
// Close any mutator bubble. Icon is not clickable.
|
|
this.setVisible(false);
|
|
if (this.iconGroup_) {
|
|
dom.addClass(this.iconGroup_, 'blocklyIconGroupReadonly');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Resize the bubble to match the size of the workspace. */
|
|
private resizeBubble() {
|
|
// If the bubble exists, the workspace also exists.
|
|
if (!this.workspace_) {
|
|
return;
|
|
}
|
|
const doubleBorderWidth = 2 * Bubble.BORDER_WIDTH;
|
|
const canvas = this.workspace_.getCanvas();
|
|
const workspaceSize = canvas.getBBox();
|
|
let width = workspaceSize.width + workspaceSize.x;
|
|
let height = workspaceSize.height + doubleBorderWidth * 3;
|
|
const flyout = this.workspace_.getFlyout();
|
|
if (flyout) {
|
|
const flyoutScrollMetrics = flyout
|
|
.getWorkspace()
|
|
.getMetricsManager()
|
|
.getScrollMetrics();
|
|
height = Math.max(height, flyoutScrollMetrics.height + 20);
|
|
width += flyout.getWidth();
|
|
}
|
|
const isRtl = this.getBlock().RTL;
|
|
if (isRtl) {
|
|
width = -workspaceSize.x;
|
|
}
|
|
width += doubleBorderWidth * 3;
|
|
// Only resize if the size difference is significant. Eliminates
|
|
// shuddering.
|
|
if (
|
|
Math.abs(this.workspaceWidth - width) > doubleBorderWidth ||
|
|
Math.abs(this.workspaceHeight - height) > doubleBorderWidth
|
|
) {
|
|
// Record some layout information for workspace metrics.
|
|
this.workspaceWidth = width;
|
|
this.workspaceHeight = height;
|
|
// Resize the bubble.
|
|
this.bubble_!.setBubbleSize(
|
|
width + doubleBorderWidth,
|
|
height + doubleBorderWidth
|
|
);
|
|
this.svgDialog!.setAttribute('width', `${width}`);
|
|
this.svgDialog!.setAttribute('height', `${height}`);
|
|
this.workspace_.setCachedParentSvgSize(width, height);
|
|
}
|
|
|
|
if (isRtl) {
|
|
// Scroll the workspace to always left-align.
|
|
canvas.setAttribute('transform', `translate(${this.workspaceWidth}, 0)`);
|
|
}
|
|
this.workspace_.resize();
|
|
}
|
|
|
|
/** A method handler for when the bubble is moved. */
|
|
private onBubbleMove() {
|
|
if (this.workspace_) {
|
|
this.workspace_.recordDragTargets();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Show or hide the mutator bubble.
|
|
*
|
|
* @param visible True if the bubble should be visible.
|
|
*/
|
|
override setVisible(visible: boolean) {
|
|
if (visible === this.isVisible()) {
|
|
// No change.
|
|
return;
|
|
}
|
|
const block = this.getBlock();
|
|
if (visible) {
|
|
// Create the bubble.
|
|
this.bubble_ = new Bubble(
|
|
block.workspace,
|
|
this.createEditor(),
|
|
block.pathObject.svgPath,
|
|
this.iconXY_ as Coordinate,
|
|
null,
|
|
null
|
|
);
|
|
// The workspace was created in createEditor.
|
|
const ws = this.workspace_!;
|
|
// Expose this mutator's block's ID on its top-level SVG group.
|
|
this.bubble_.setSvgId(block.id);
|
|
this.bubble_.registerMoveEvent(this.onBubbleMove.bind(this));
|
|
const tree = ws.options.languageTree;
|
|
const flyout = ws.getFlyout();
|
|
if (tree) {
|
|
flyout!.init(ws);
|
|
flyout!.show(tree);
|
|
}
|
|
|
|
this.rootBlock = block.decompose!(ws)!;
|
|
const blocks = this.rootBlock.getDescendants(false);
|
|
for (let i = 0, child; (child = blocks[i]); i++) {
|
|
child.queueRender();
|
|
}
|
|
// The root block should not be draggable or deletable.
|
|
this.rootBlock.setMovable(false);
|
|
this.rootBlock.setDeletable(false);
|
|
let margin;
|
|
let x;
|
|
if (flyout) {
|
|
margin = flyout.CORNER_RADIUS * 2;
|
|
x = this.rootBlock.RTL ? flyout.getWidth() + margin : margin;
|
|
} else {
|
|
margin = 16;
|
|
x = margin;
|
|
}
|
|
if (block.RTL) {
|
|
x = -x;
|
|
}
|
|
this.rootBlock.moveBy(x, margin);
|
|
// Save the initial connections, then listen for further changes.
|
|
if (block.saveConnections) {
|
|
const thisRootBlock = this.rootBlock;
|
|
block.saveConnections(thisRootBlock);
|
|
this.sourceListener = () => {
|
|
const currentBlock = this.getBlock();
|
|
if (currentBlock.saveConnections) {
|
|
currentBlock.saveConnections(thisRootBlock);
|
|
}
|
|
};
|
|
block.workspace.addChangeListener(this.sourceListener);
|
|
}
|
|
this.resizeBubble();
|
|
// When the mutator's workspace changes, update the source block.
|
|
const boundListener = this.workspaceChanged.bind(this);
|
|
ws.addChangeListener(boundListener);
|
|
if (flyout) flyout.getWorkspace().addChangeListener(boundListener);
|
|
// Update the source block immediately after the bubble becomes visible.
|
|
this.updateWorkspace();
|
|
this.applyColour();
|
|
} else {
|
|
// Dispose of the bubble.
|
|
this.svgDialog = null;
|
|
this.workspace_!.dispose();
|
|
this.workspace_ = null;
|
|
this.rootBlock = null;
|
|
this.bubble_?.dispose();
|
|
this.bubble_ = null;
|
|
this.workspaceWidth = 0;
|
|
this.workspaceHeight = 0;
|
|
if (this.sourceListener) {
|
|
block.workspace.removeChangeListener(this.sourceListener);
|
|
this.sourceListener = null;
|
|
}
|
|
}
|
|
eventUtils.fire(
|
|
new (eventUtils.get(eventUtils.BUBBLE_OPEN))(block, visible, 'mutator')
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Fired whenever a change is made to the mutator's workspace.
|
|
*
|
|
* @param e Custom data for event.
|
|
*/
|
|
private workspaceChanged(e: Abstract) {
|
|
if (!this.shouldIgnoreMutatorEvent_(e) && !this.updateWorkspacePid) {
|
|
this.updateWorkspacePid = setTimeout(() => {
|
|
this.updateWorkspacePid = null;
|
|
this.updateWorkspace();
|
|
}, 0);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns whether the given event in the mutator workspace should be ignored
|
|
* when deciding whether to update the workspace and compose the block or not.
|
|
*
|
|
* @param e The event.
|
|
* @returns Whether to ignore the event or not.
|
|
*/
|
|
shouldIgnoreMutatorEvent_(e: Abstract) {
|
|
return (
|
|
e.isUiEvent ||
|
|
e.type === eventUtils.CREATE ||
|
|
(e.type === eventUtils.CHANGE &&
|
|
(e as BlockChange).element === 'disabled')
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Updates the source block when the mutator's blocks are changed.
|
|
* Bump down any block that's too high.
|
|
*/
|
|
private updateWorkspace() {
|
|
if (!this.workspace_!.isDragging()) {
|
|
const blocks = this.workspace_!.getTopBlocks(false);
|
|
const MARGIN = 20;
|
|
|
|
for (let b = 0, block; (block = blocks[b]); b++) {
|
|
const blockXY = block.getRelativeToSurfaceXY();
|
|
|
|
// Bump any block that's above the top back inside.
|
|
if (blockXY.y < MARGIN) {
|
|
block.moveBy(0, MARGIN - blockXY.y);
|
|
}
|
|
// Bump any block overlapping the flyout back inside.
|
|
if (block.RTL) {
|
|
let right = -MARGIN;
|
|
const flyout = this.workspace_!.getFlyout();
|
|
if (flyout) {
|
|
right -= flyout.getWidth();
|
|
}
|
|
if (blockXY.x > right) {
|
|
block.moveBy(right - blockXY.x, 0);
|
|
}
|
|
} else if (blockXY.x < MARGIN) {
|
|
block.moveBy(MARGIN - blockXY.x, 0);
|
|
}
|
|
}
|
|
}
|
|
|
|
// When the mutator's workspace changes, update the source block.
|
|
if (this.rootBlock && this.rootBlock.workspace === this.workspace_) {
|
|
const existingGroup = eventUtils.getGroup();
|
|
if (!existingGroup) {
|
|
eventUtils.setGroup(true);
|
|
}
|
|
const block = this.getBlock();
|
|
const oldExtraState = BlockChange.getExtraBlockState_(block);
|
|
|
|
block.compose!(this.rootBlock);
|
|
|
|
const newExtraState = BlockChange.getExtraBlockState_(block);
|
|
if (oldExtraState !== newExtraState) {
|
|
eventUtils.fire(
|
|
new (eventUtils.get(eventUtils.BLOCK_CHANGE))(
|
|
block,
|
|
'mutation',
|
|
null,
|
|
oldExtraState,
|
|
newExtraState
|
|
)
|
|
);
|
|
// Ensure that any bump is part of this mutation's event group.
|
|
const mutationGroup = eventUtils.getGroup();
|
|
setTimeout(function () {
|
|
const oldGroup = eventUtils.getGroup();
|
|
eventUtils.setGroup(mutationGroup);
|
|
block.bumpNeighbours();
|
|
eventUtils.setGroup(oldGroup);
|
|
}, config.bumpDelay);
|
|
}
|
|
|
|
// Don't update the bubble until the drag has ended, to avoid moving
|
|
// blocks under the cursor.
|
|
if (!this.workspace_!.isDragging()) {
|
|
setTimeout(() => this.resizeBubble(), 0);
|
|
}
|
|
eventUtils.setGroup(existingGroup);
|
|
}
|
|
}
|
|
|
|
/** Dispose of this mutator. */
|
|
override dispose() {
|
|
this.getBlock().mutator = null;
|
|
super.dispose();
|
|
}
|
|
|
|
/** Update the styles on all blocks in the mutator. */
|
|
updateBlockStyle() {
|
|
const ws = this.workspace_;
|
|
|
|
if (ws && ws.getAllBlocks(false)) {
|
|
const workspaceBlocks = ws.getAllBlocks(false);
|
|
for (let i = 0, block; (block = workspaceBlocks[i]); i++) {
|
|
block.setStyle(block.getStyleName());
|
|
}
|
|
|
|
const flyout = ws.getFlyout();
|
|
if (flyout) {
|
|
const flyoutBlocks = flyout.getWorkspace().getAllBlocks(false);
|
|
for (let i = 0, block; (block = flyoutBlocks[i]); i++) {
|
|
block.setStyle(block.getStyleName());
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Reconnect an block to a mutated input.
|
|
*
|
|
* @param connectionChild Connection on child block.
|
|
* @param block Parent block.
|
|
* @param inputName Name of input on parent block.
|
|
* @returns True iff a reconnection was made, false otherwise.
|
|
*/
|
|
static reconnect(
|
|
connectionChild: Connection,
|
|
block: Block,
|
|
inputName: string
|
|
): boolean {
|
|
if (!connectionChild || !connectionChild.getSourceBlock().workspace) {
|
|
return false; // No connection or block has been deleted.
|
|
}
|
|
const connectionParent = block.getInput(inputName)!.connection;
|
|
const currentParent = connectionChild.targetBlock();
|
|
if (
|
|
(!currentParent || currentParent === block) &&
|
|
connectionParent &&
|
|
connectionParent.targetConnection !== connectionChild
|
|
) {
|
|
if (connectionParent.isConnected()) {
|
|
// There's already something connected here. Get rid of it.
|
|
connectionParent.disconnect();
|
|
}
|
|
connectionParent.connect(connectionChild);
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
/**
|
|
* Get the parent workspace of a workspace that is inside a mutator, taking
|
|
* into account whether it is a flyout.
|
|
*
|
|
* @param workspace The workspace that is inside a mutator.
|
|
* @returns The mutator's parent workspace or null.
|
|
*/
|
|
static findParentWs(workspace: WorkspaceSvg): WorkspaceSvg | null {
|
|
let outerWs = null;
|
|
if (workspace && workspace.options) {
|
|
const parent = workspace.options.parentWorkspace;
|
|
// If we were in a flyout in a mutator, need to go up two levels to find
|
|
// the actual parent.
|
|
if (workspace.isFlyout) {
|
|
if (parent && parent.options) {
|
|
outerWs = parent.options.parentWorkspace;
|
|
}
|
|
} else if (parent) {
|
|
outerWs = parent;
|
|
}
|
|
}
|
|
return outerWs;
|
|
}
|
|
}
|