mirror of
https://github.com/google/blockly.git
synced 2026-01-07 00:50:27 +01:00
edc2a5cd0c
* fix: Fix errors under strict compilation. * fix: Fix tests that referenced properties converted to data attributes. * fix: Incorporate feedback on resolving compiler errors. * refactor: Revert changes to skew and translate attributes. * refactor: Introduce LegacyContextMenuOption type to correspond to documented fields. * refactor: Introduce PathLeftShape and PathDownShape vs casting to PuzzleTab/Notch. * chore: Added nullability modifiers to type annotations. * refactor: Export FlyoutItem directly. * chore: clang-format renderers/zelos/drawer.js.
606 lines
19 KiB
JavaScript
606 lines
19 KiB
JavaScript
/**
|
|
* @license
|
|
* Copyright 2016 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
/**
|
|
* @fileoverview Components for creating connections between blocks.
|
|
*/
|
|
'use strict';
|
|
|
|
/**
|
|
* Components for creating connections between blocks.
|
|
* @class
|
|
*/
|
|
goog.module('Blockly.RenderedConnection');
|
|
|
|
const common = goog.require('Blockly.common');
|
|
const dom = goog.require('Blockly.utils.dom');
|
|
const eventUtils = goog.require('Blockly.Events.utils');
|
|
const internalConstants = goog.require('Blockly.internalConstants');
|
|
const svgPaths = goog.require('Blockly.utils.svgPaths');
|
|
const svgMath = goog.require('Blockly.utils.svgMath');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {Block} = goog.requireType('Blockly.Block');
|
|
const {config} = goog.require('Blockly.config');
|
|
/* eslint-disable-next-line no-unused-vars */
|
|
const {ConnectionDB} = goog.requireType('Blockly.ConnectionDB');
|
|
const {ConnectionType} = goog.require('Blockly.ConnectionType');
|
|
const {Connection} = goog.require('Blockly.Connection');
|
|
const {Coordinate} = goog.require('Blockly.utils.Coordinate');
|
|
const {Svg} = goog.require('Blockly.utils.Svg');
|
|
|
|
/**
|
|
* A shape that has a pathDown property.
|
|
* @typedef {{
|
|
* pathDown: string,
|
|
* }}
|
|
*/
|
|
let PathDownShape; // eslint-disable-line no-unused-vars
|
|
|
|
/**
|
|
* A shape that has a pathLeft property.
|
|
* @typedef {{
|
|
* pathLeft: string,
|
|
* }}
|
|
*/
|
|
let PathLeftShape; // eslint-disable-line no-unused-vars
|
|
|
|
/**
|
|
* Maximum randomness in workspace units for bumping a block.
|
|
* @const
|
|
*/
|
|
const BUMP_RANDOMNESS = 10;
|
|
|
|
/**
|
|
* Class for a connection between blocks that may be rendered on screen.
|
|
* @extends {Connection}
|
|
* @alias Blockly.RenderedConnection
|
|
*/
|
|
class RenderedConnection extends Connection {
|
|
/**
|
|
* @param {!BlockSvg} source The block establishing this connection.
|
|
* @param {number} type The type of the connection.
|
|
*/
|
|
constructor(source, type) {
|
|
super(source, type);
|
|
|
|
/** @type {!BlockSvg} */
|
|
this.sourceBlock_;
|
|
|
|
/**
|
|
* Connection database for connections of this type on the current
|
|
* workspace.
|
|
* @const {!ConnectionDB}
|
|
* @private
|
|
*/
|
|
this.db_ = source.workspace.connectionDBList[type];
|
|
|
|
/**
|
|
* Connection database for connections compatible with this type on the
|
|
* current workspace.
|
|
* @const {!ConnectionDB}
|
|
* @private
|
|
*/
|
|
this.dbOpposite_ =
|
|
source.workspace
|
|
.connectionDBList[internalConstants.OPPOSITE_TYPE[type]];
|
|
|
|
/**
|
|
* Workspace units, (0, 0) is top left of block.
|
|
* @type {!Coordinate}
|
|
* @private
|
|
*/
|
|
this.offsetInBlock_ = new Coordinate(0, 0);
|
|
|
|
/**
|
|
* Describes the state of this connection's tracked-ness.
|
|
* @type {RenderedConnection.TrackedState}
|
|
* @private
|
|
*/
|
|
this.trackedState_ = RenderedConnection.TrackedState.WILL_TRACK;
|
|
|
|
/**
|
|
* Connection this connection connects to. Null if not connected.
|
|
* @type {RenderedConnection}
|
|
*/
|
|
this.targetConnection = null;
|
|
}
|
|
|
|
/**
|
|
* Dispose of this connection. Remove it from the database (if it is
|
|
* tracked) and call the super-function to deal with connected blocks.
|
|
* @override
|
|
* @package
|
|
*/
|
|
dispose() {
|
|
super.dispose();
|
|
if (this.trackedState_ === RenderedConnection.TrackedState.TRACKED) {
|
|
this.db_.removeConnection(this, this.y);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get the source block for this connection.
|
|
* @return {!BlockSvg} The source block.
|
|
* @override
|
|
*/
|
|
getSourceBlock() {
|
|
return /** @type {!BlockSvg} */ (super.getSourceBlock());
|
|
}
|
|
|
|
/**
|
|
* Returns the block that this connection connects to.
|
|
* @return {?BlockSvg} The connected block or null if none is connected.
|
|
* @override
|
|
*/
|
|
targetBlock() {
|
|
return /** @type {BlockSvg} */ (super.targetBlock());
|
|
}
|
|
|
|
/**
|
|
* Returns the distance between this connection and another connection in
|
|
* workspace units.
|
|
* @param {!Connection} otherConnection The other connection to measure
|
|
* the distance to.
|
|
* @return {number} The distance between connections, in workspace units.
|
|
*/
|
|
distanceFrom(otherConnection) {
|
|
const xDiff = this.x - otherConnection.x;
|
|
const yDiff = this.y - otherConnection.y;
|
|
return Math.sqrt(xDiff * xDiff + yDiff * yDiff);
|
|
}
|
|
|
|
/**
|
|
* Move the block(s) belonging to the connection to a point where they don't
|
|
* visually interfere with the specified connection.
|
|
* @param {!RenderedConnection} staticConnection The connection to move away
|
|
* from.
|
|
* @package
|
|
*/
|
|
bumpAwayFrom(staticConnection) {
|
|
if (this.sourceBlock_.workspace.isDragging()) {
|
|
// Don't move blocks around while the user is doing the same.
|
|
return;
|
|
}
|
|
// Move the root block.
|
|
let rootBlock = this.sourceBlock_.getRootBlock();
|
|
if (rootBlock.isInFlyout) {
|
|
// Don't move blocks around in a flyout.
|
|
return;
|
|
}
|
|
let reverse = false;
|
|
if (!rootBlock.isMovable()) {
|
|
// Can't bump an uneditable block away.
|
|
// Check to see if the other block is movable.
|
|
rootBlock = staticConnection.getSourceBlock().getRootBlock();
|
|
if (!rootBlock.isMovable()) {
|
|
return;
|
|
}
|
|
// Swap the connections and move the 'static' connection instead.
|
|
staticConnection = this;
|
|
reverse = true;
|
|
}
|
|
// Raise it to the top for extra visibility.
|
|
const selected = common.getSelected() == rootBlock;
|
|
selected || rootBlock.addSelect();
|
|
let dx = (staticConnection.x + config.snapRadius +
|
|
Math.floor(Math.random() * BUMP_RANDOMNESS)) -
|
|
this.x;
|
|
let dy = (staticConnection.y + config.snapRadius +
|
|
Math.floor(Math.random() * BUMP_RANDOMNESS)) -
|
|
this.y;
|
|
if (reverse) {
|
|
// When reversing a bump due to an uneditable block, bump up.
|
|
dy = -dy;
|
|
}
|
|
if (rootBlock.RTL) {
|
|
dx = (staticConnection.x - config.snapRadius -
|
|
Math.floor(Math.random() * BUMP_RANDOMNESS)) -
|
|
this.x;
|
|
}
|
|
rootBlock.moveBy(dx, dy);
|
|
selected || rootBlock.removeSelect();
|
|
}
|
|
|
|
/**
|
|
* Change the connection's coordinates.
|
|
* @param {number} x New absolute x coordinate, in workspace coordinates.
|
|
* @param {number} y New absolute y coordinate, in workspace coordinates.
|
|
*/
|
|
moveTo(x, y) {
|
|
if (this.trackedState_ === RenderedConnection.TrackedState.WILL_TRACK) {
|
|
this.db_.addConnection(this, y);
|
|
this.trackedState_ = RenderedConnection.TrackedState.TRACKED;
|
|
} else if (this.trackedState_ === RenderedConnection.TrackedState.TRACKED) {
|
|
this.db_.removeConnection(this, this.y);
|
|
this.db_.addConnection(this, y);
|
|
}
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
|
|
/**
|
|
* Change the connection's coordinates.
|
|
* @param {number} dx Change to x coordinate, in workspace units.
|
|
* @param {number} dy Change to y coordinate, in workspace units.
|
|
*/
|
|
moveBy(dx, dy) {
|
|
this.moveTo(this.x + dx, this.y + dy);
|
|
}
|
|
|
|
/**
|
|
* Move this connection to the location given by its offset within the block
|
|
* and the location of the block's top left corner.
|
|
* @param {!Coordinate} blockTL The location of the top left
|
|
* corner of the block, in workspace coordinates.
|
|
*/
|
|
moveToOffset(blockTL) {
|
|
this.moveTo(
|
|
blockTL.x + this.offsetInBlock_.x, blockTL.y + this.offsetInBlock_.y);
|
|
}
|
|
|
|
/**
|
|
* Set the offset of this connection relative to the top left of its block.
|
|
* @param {number} x The new relative x, in workspace units.
|
|
* @param {number} y The new relative y, in workspace units.
|
|
*/
|
|
setOffsetInBlock(x, y) {
|
|
this.offsetInBlock_.x = x;
|
|
this.offsetInBlock_.y = y;
|
|
}
|
|
|
|
/**
|
|
* Get the offset of this connection relative to the top left of its block.
|
|
* @return {!Coordinate} The offset of the connection.
|
|
* @package
|
|
*/
|
|
getOffsetInBlock() {
|
|
return this.offsetInBlock_;
|
|
}
|
|
|
|
/**
|
|
* Move the blocks on either side of this connection right next to each other.
|
|
* @package
|
|
*/
|
|
tighten() {
|
|
const dx = this.targetConnection.x - this.x;
|
|
const dy = this.targetConnection.y - this.y;
|
|
if (dx !== 0 || dy !== 0) {
|
|
const block = this.targetBlock();
|
|
const svgRoot = block.getSvgRoot();
|
|
if (!svgRoot) {
|
|
throw Error('block is not rendered.');
|
|
}
|
|
// Workspace coordinates.
|
|
const xy = svgMath.getRelativeXY(svgRoot);
|
|
block.getSvgRoot().setAttribute(
|
|
'transform', 'translate(' + (xy.x - dx) + ',' + (xy.y - dy) + ')');
|
|
block.moveConnections(-dx, -dy);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Find the closest compatible connection to this connection.
|
|
* All parameters are in workspace units.
|
|
* @param {number} maxLimit The maximum radius to another connection.
|
|
* @param {!Coordinate} dxy Offset between this connection's location
|
|
* in the database and the current location (as a result of dragging).
|
|
* @return {!{connection: ?RenderedConnection, radius: number}} Contains two
|
|
* properties: 'connection' which is either another connection or null,
|
|
* and 'radius' which is the distance.
|
|
*/
|
|
closest(maxLimit, dxy) {
|
|
return this.dbOpposite_.searchForClosest(this, maxLimit, dxy);
|
|
}
|
|
|
|
/**
|
|
* Add highlighting around this connection.
|
|
*/
|
|
highlight() {
|
|
let steps;
|
|
const sourceBlockSvg = /** @type {!BlockSvg} */ (this.sourceBlock_);
|
|
const renderConstants =
|
|
sourceBlockSvg.workspace.getRenderer().getConstants();
|
|
const shape = renderConstants.shapeFor(this);
|
|
if (this.type === ConnectionType.INPUT_VALUE ||
|
|
this.type === ConnectionType.OUTPUT_VALUE) {
|
|
// Vertical line, puzzle tab, vertical line.
|
|
const yLen = renderConstants.TAB_OFFSET_FROM_TOP;
|
|
steps = svgPaths.moveBy(0, -yLen) + svgPaths.lineOnAxis('v', yLen) +
|
|
(/** @type {!PathDownShape} */ (shape)).pathDown +
|
|
svgPaths.lineOnAxis('v', yLen);
|
|
} else {
|
|
const xLen =
|
|
renderConstants.NOTCH_OFFSET_LEFT - renderConstants.CORNER_RADIUS;
|
|
// Horizontal line, notch, horizontal line.
|
|
steps = svgPaths.moveBy(-xLen, 0) + svgPaths.lineOnAxis('h', xLen) +
|
|
(/** @type {!PathLeftShape} */ (shape)).pathLeft +
|
|
svgPaths.lineOnAxis('h', xLen);
|
|
}
|
|
const xy = this.sourceBlock_.getRelativeToSurfaceXY();
|
|
const x = this.x - xy.x;
|
|
const y = this.y - xy.y;
|
|
Connection.highlightedPath_ = dom.createSvgElement(
|
|
Svg.PATH, {
|
|
'class': 'blocklyHighlightedConnectionPath',
|
|
'd': steps,
|
|
'transform': 'translate(' + x + ',' + y + ')' +
|
|
(this.sourceBlock_.RTL ? ' scale(-1 1)' : ''),
|
|
},
|
|
this.sourceBlock_.getSvgRoot());
|
|
}
|
|
|
|
/**
|
|
* Remove the highlighting around this connection.
|
|
*/
|
|
unhighlight() {
|
|
dom.removeNode(Connection.highlightedPath_);
|
|
delete Connection.highlightedPath_;
|
|
}
|
|
|
|
/**
|
|
* Set whether this connections is tracked in the database or not.
|
|
* @param {boolean} doTracking If true, start tracking. If false, stop
|
|
* tracking.
|
|
* @package
|
|
*/
|
|
setTracking(doTracking) {
|
|
if ((doTracking &&
|
|
this.trackedState_ === RenderedConnection.TrackedState.TRACKED) ||
|
|
(!doTracking &&
|
|
this.trackedState_ === RenderedConnection.TrackedState.UNTRACKED)) {
|
|
return;
|
|
}
|
|
if (this.sourceBlock_.isInFlyout) {
|
|
// Don't bother maintaining a database of connections in a flyout.
|
|
return;
|
|
}
|
|
if (doTracking) {
|
|
this.db_.addConnection(this, this.y);
|
|
this.trackedState_ = RenderedConnection.TrackedState.TRACKED;
|
|
return;
|
|
}
|
|
if (this.trackedState_ === RenderedConnection.TrackedState.TRACKED) {
|
|
this.db_.removeConnection(this, this.y);
|
|
}
|
|
this.trackedState_ = RenderedConnection.TrackedState.UNTRACKED;
|
|
}
|
|
|
|
/**
|
|
* Stop tracking this connection, as well as all down-stream connections on
|
|
* any block attached to this connection. This happens when a block is
|
|
* collapsed.
|
|
*
|
|
* Also closes down-stream icons/bubbles.
|
|
* @package
|
|
*/
|
|
stopTrackingAll() {
|
|
this.setTracking(false);
|
|
if (this.targetConnection) {
|
|
const blocks = this.targetBlock().getDescendants(false);
|
|
for (let i = 0; i < blocks.length; i++) {
|
|
const block = blocks[i];
|
|
// Stop tracking connections of all children.
|
|
const connections = block.getConnections_(true);
|
|
for (let j = 0; j < connections.length; j++) {
|
|
/** @type {!RenderedConnection} */ (connections[j])
|
|
.setTracking(false);
|
|
}
|
|
// Close all bubbles of all children.
|
|
const icons = block.getIcons();
|
|
for (let j = 0; j < icons.length; j++) {
|
|
icons[j].setVisible(false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Start tracking this connection, as well as all down-stream connections on
|
|
* any block attached to this connection. This happens when a block is
|
|
* expanded.
|
|
* @return {!Array<!Block>} List of blocks to render.
|
|
*/
|
|
startTrackingAll() {
|
|
this.setTracking(true);
|
|
// All blocks that are not tracked must start tracking before any
|
|
// rendering takes place, since rendering requires knowing the dimensions
|
|
// of lower blocks. Also, since rendering a block renders all its parents,
|
|
// we only need to render the leaf nodes.
|
|
let renderList = [];
|
|
if (this.type !== ConnectionType.INPUT_VALUE &&
|
|
this.type !== ConnectionType.NEXT_STATEMENT) {
|
|
// Only spider down.
|
|
return renderList;
|
|
}
|
|
const block = this.targetBlock();
|
|
if (block) {
|
|
let connections;
|
|
if (block.isCollapsed()) {
|
|
// This block should only be partially revealed since it is collapsed.
|
|
connections = [];
|
|
block.outputConnection && connections.push(block.outputConnection);
|
|
block.nextConnection && connections.push(block.nextConnection);
|
|
block.previousConnection && connections.push(block.previousConnection);
|
|
} else {
|
|
// Show all connections of this block.
|
|
connections = block.getConnections_(true);
|
|
}
|
|
for (let i = 0; i < connections.length; i++) {
|
|
renderList.push.apply(renderList, connections[i].startTrackingAll());
|
|
}
|
|
if (!renderList.length) {
|
|
// Leaf block.
|
|
renderList = [block];
|
|
}
|
|
}
|
|
return renderList;
|
|
}
|
|
|
|
/**
|
|
* Behavior after a connection attempt fails.
|
|
* Bumps this connection away from the other connection. Called when an
|
|
* attempted connection fails.
|
|
* @param {!Connection} otherConnection Connection that this connection
|
|
* failed to connect to.
|
|
* @package
|
|
*/
|
|
onFailedConnect(otherConnection) {
|
|
const block = this.getSourceBlock();
|
|
if (eventUtils.getRecordUndo()) {
|
|
const group = eventUtils.getGroup();
|
|
setTimeout(function() {
|
|
if (!block.isDisposed() && !block.getParent()) {
|
|
eventUtils.setGroup(group);
|
|
this.bumpAwayFrom(
|
|
/** @type {!RenderedConnection} */ (otherConnection));
|
|
eventUtils.setGroup(false);
|
|
}
|
|
}.bind(this), config.bumpDelay);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Disconnect two blocks that are connected by this connection.
|
|
* @param {!Block} parentBlock The superior block.
|
|
* @param {!Block} childBlock The inferior block.
|
|
* @protected
|
|
* @override
|
|
*/
|
|
disconnectInternal_(parentBlock, childBlock) {
|
|
super.disconnectInternal_(parentBlock, childBlock);
|
|
const renderedParent = /** @type {!BlockSvg} */ (parentBlock);
|
|
const renderedChild = /** @type {!BlockSvg} */ (childBlock);
|
|
|
|
// Rerender the parent so that it may reflow.
|
|
if (renderedParent.rendered) {
|
|
renderedParent.render();
|
|
}
|
|
if (renderedChild.rendered) {
|
|
renderedChild.updateDisabled();
|
|
renderedChild.render();
|
|
// Reset visibility, since the child is now a top block.
|
|
renderedChild.getSvgRoot().style.display = 'block';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Respawn the shadow block if there was one connected to the this connection.
|
|
* Render/rerender blocks as needed.
|
|
* @protected
|
|
* @override
|
|
*/
|
|
respawnShadow_() {
|
|
super.respawnShadow_();
|
|
const blockShadow = this.targetBlock();
|
|
if (!blockShadow) {
|
|
return;
|
|
}
|
|
blockShadow.initSvg();
|
|
blockShadow.render(false);
|
|
|
|
const parentBlock = this.getSourceBlock();
|
|
if (parentBlock.rendered) {
|
|
parentBlock.render();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Find all nearby compatible connections to this connection.
|
|
* Type checking does not apply, since this function is used for bumping.
|
|
* @param {number} maxLimit The maximum radius to another connection, in
|
|
* workspace units.
|
|
* @return {!Array<!Connection>} List of connections.
|
|
* @package
|
|
*/
|
|
neighbours(maxLimit) {
|
|
return this.dbOpposite_.getNeighbours(this, maxLimit);
|
|
}
|
|
|
|
/**
|
|
* Connect two connections together. This is the connection on the superior
|
|
* block. Rerender blocks as needed.
|
|
* @param {!Connection} childConnection Connection on inferior block.
|
|
* @protected
|
|
*/
|
|
connect_(childConnection) {
|
|
super.connect_(childConnection);
|
|
|
|
const renderedChildConnection = /** @type {!RenderedConnection} */
|
|
(childConnection);
|
|
|
|
const parentConnection = this;
|
|
const parentBlock = parentConnection.getSourceBlock();
|
|
const childBlock = renderedChildConnection.getSourceBlock();
|
|
const parentRendered = parentBlock.rendered;
|
|
const childRendered = childBlock.rendered;
|
|
|
|
if (parentRendered) {
|
|
parentBlock.updateDisabled();
|
|
}
|
|
if (childRendered) {
|
|
childBlock.updateDisabled();
|
|
}
|
|
if (parentRendered && childRendered) {
|
|
if (parentConnection.type === ConnectionType.NEXT_STATEMENT ||
|
|
parentConnection.type === ConnectionType.PREVIOUS_STATEMENT) {
|
|
// Child block may need to square off its corners if it is in a stack.
|
|
// Rendering a child will render its parent.
|
|
childBlock.render();
|
|
} else {
|
|
// Child block does not change shape. Rendering the parent node will
|
|
// move its connected children into position.
|
|
parentBlock.render();
|
|
}
|
|
}
|
|
|
|
// The input the child block is connected to (if any).
|
|
const parentInput = parentBlock.getInputWithBlock(childBlock);
|
|
if (parentInput) {
|
|
const visible = parentInput.isVisible();
|
|
childBlock.getSvgRoot().style.display = visible ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Function to be called when this connection's compatible types have changed.
|
|
* @protected
|
|
*/
|
|
onCheckChanged_() {
|
|
// The new value type may not be compatible with the existing connection.
|
|
if (this.isConnected() &&
|
|
(!this.targetConnection ||
|
|
!this.getConnectionChecker().canConnect(
|
|
this, this.targetConnection, false))) {
|
|
const child = this.isSuperior() ? this.targetBlock() : this.sourceBlock_;
|
|
child.unplug();
|
|
// Bump away.
|
|
this.sourceBlock_.bumpNeighbours();
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Enum for different kinds of tracked states.
|
|
*
|
|
* WILL_TRACK means that this connection will add itself to
|
|
* the db on the next moveTo call it receives.
|
|
*
|
|
* UNTRACKED means that this connection will not add
|
|
* itself to the database until setTracking(true) is explicitly called.
|
|
*
|
|
* TRACKED means that this connection is currently being tracked.
|
|
* @enum {number}
|
|
*/
|
|
RenderedConnection.TrackedState = {
|
|
WILL_TRACK: -1,
|
|
UNTRACKED: 0,
|
|
TRACKED: 1,
|
|
};
|
|
|
|
exports.RenderedConnection = RenderedConnection;
|