Files
blockly/core/keyboard_nav/basic_cursor.js
Neil Fraser a65afdc189 Simplify Closure-sourced code for menus (#3880)
* Remove cargo-culted bloat from CSS

The `goog-menuitem-icon` and `goog-menuitem-noicon` classes are not present in Blockly.  Blockly doesn’t support the CSS compiler, so #noflip has no effect.  Shorten uncompressible warning string.

Also remove the “Copied from Closure” notes.  These were intended so that the CSS could be easily updated as the Closure Library evolved.  We are no longer linked to the Closure Library.

* Fix bug (in prod) where menu highlighting is lost

Previously, open playground.  Right-click on workspace.  Mouse-over “Add comment” (it highlights).  Mouse over “Download screenshot” (disabled option).  Mouse over “Add comment” (highlighting is lost).

Also remove `canHighlightItem` helper function.  In theory this helps abstract the concept of non-highlightable options.  But in practice it was only called in one of the several places that it should have been.  This was a false abstraction.

* Add support for Space/PgUp/PgDn/Home/End to menus

* Eliminate calls to clearHighlighted

The JSDoc for `setHighlightedIndex` specifically states, “If another item was previously highlighted, it is un-highlighted.”  This is not what was implemented, but it should be.  This commit adds the un-highlighting, and removes all the calls previously required to correct this bug.

* Stop wrapping at top or bottom of menu.

Real OS menus don’t wrap when one cursors off the top or bottom.

Also, replace the overly complicated helper function with a simple 1/-1 step value.

* Remove unused menu code

* Simplify menu roles

Remove unneeded sets to RTL on Menu (only MenuItem cares).

* Fix lack of disposal for context menus.

Context menus only disposed properly when an option was clicked.  If they were dismissed by clicking outside the menu there was no disposal.  This might result in a memory leak.
Also un-extract (inject?) several now trivial functions.

* Remove Component dependency from Menu & MenuItem

Component is now only used by the category tree.

* Remove unused functions in Component

These were used by Menu/MenuItem.

* Fix dependencies.

* Record highlighted menu item by object, not index

Less code, simpler.

* Rename CSS classes goog-menu* to blocklyMenu*

Old classes remain in DOM and are deprecated so that any custom CSS will continue to function.

* Remove unused focus tracker in tree.

* Add support for space/enter to toggle tree cats

* Delete unsettable .isUserCollapsible_ from tree

* Change visibility tags throughout menus.

The previous tags were inherited from Closure and don’t reflect current usage in the Blockly codebase.

The core/components/tree files are non-compliant in this regard, but I’m not going to update them since they need to be replaced and there’s no need to create an interim API change.

* Remove property on DOM element linking to JS obj

Performance is slower (O(n) rather than (O(1)), but ’n’ is the number of entries on the menu, so shouldn’t be more than a dozen or so.

* Fixes a compile error (node != element)

Usually we avoid parentElement in Blockly.  That’s because it has very spotty behaviour with SVG.  But in this case we are in pure HTML.
2020-05-06 23:55:17 -04:00

209 lines
5.8 KiB
JavaScript

/**
* @license
* Copyright 2019 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview The class representing a basic cursor.
* Used to demo switching between different cursors.
* @author aschmiedt@google.com (Abby Schmiedt)
*/
'use strict';
goog.provide('Blockly.BasicCursor');
goog.require('Blockly.ASTNode');
goog.require('Blockly.Cursor');
/**
* Class for a basic cursor.
* This will allow the user to get to all nodes in the AST by hitting next or
* previous.
* @constructor
* @extends {Blockly.Cursor}
*/
Blockly.BasicCursor = function() {
Blockly.BasicCursor.superClass_.constructor.call(this);
};
Blockly.utils.object.inherits(Blockly.BasicCursor, Blockly.Cursor);
/**
* Find the next node in the pre order traversal.
* @return {Blockly.ASTNode} The next node, or null if the current node is
* not set or there is no next value.
* @override
*/
Blockly.BasicCursor.prototype.next = function() {
var curNode = this.getCurNode();
if (!curNode) {
return null;
}
var newNode = this.getNextNode_(curNode, this.validNode_);
if (newNode) {
this.setCurNode(newNode);
}
return newNode;
};
/**
* For a basic cursor we only have the ability to go next and previous, so
* in will also allow the user to get to the next node in the pre order traversal.
* @return {Blockly.ASTNode} The next node, or null if the current node is
* not set or there is no next value.
* @override
*/
Blockly.BasicCursor.prototype.in = function() {
return this.next();
};
/**
* Find the previous node in the pre order traversal.
* @return {Blockly.ASTNode} The previous node, or null if the current node
* is not set or there is no previous value.
* @override
*/
Blockly.BasicCursor.prototype.prev = function() {
var curNode = this.getCurNode();
if (!curNode) {
return null;
}
var newNode = this.getPreviousNode_(curNode, this.validNode_);
if (newNode) {
this.setCurNode(newNode);
}
return newNode;
};
/**
* For a basic cursor we only have the ability to go next and previous, so
* out will allow the user to get to the previous node in the pre order traversal.
* @return {Blockly.ASTNode} The previous node, or null if the current node is
* not set or there is no previous value.
* @override
*/
Blockly.BasicCursor.prototype.out = function() {
return this.prev();
};
/**
* Uses pre order traversal to navigate the Blockly AST. This will allow
* a user to easily navigate the entire Blockly AST without having to go in
* and out levels on the tree.
* @param {Blockly.ASTNode} node The current position in the AST.
* @param {!function(Blockly.ASTNode) : boolean} isValid A function true/false
* depending on whether the given node should be traversed.
* @return {Blockly.ASTNode} The next node in the traversal.
* @protected
*/
Blockly.BasicCursor.prototype.getNextNode_ = function(node, isValid) {
if (!node) {
return null;
}
var newNode = node.in() || node.next();
if (isValid(newNode)) {
return newNode;
} else if (newNode) {
return this.getNextNode_(newNode, isValid);
}
var siblingOrParent = this.findSiblingOrParent_(node.out());
if (isValid(siblingOrParent)) {
return siblingOrParent;
} else if (siblingOrParent) {
return this.getNextNode_(siblingOrParent, isValid);
}
return null;
};
/**
* Reverses the pre order traversal in order to find the previous node. This will
* allow a user to easily navigate the entire Blockly AST without having to go in
* and out levels on the tree.
* @param {Blockly.ASTNode} node The current position in the AST.
* @param {!function(Blockly.ASTNode) : boolean} isValid A function true/false
* depending on whether the given node should be traversed.
* @return {Blockly.ASTNode} The previous node in the traversal or null if no
* previous node exists.
* @protected
*/
Blockly.BasicCursor.prototype.getPreviousNode_ = function(node, isValid) {
if (!node) {
return null;
}
var newNode = node.prev();
if (newNode) {
newNode = this.getRightMostChild_(newNode);
} else {
newNode = node.out();
}
if (isValid(newNode)) {
return newNode;
} else if (newNode) {
return this.getPreviousNode_(newNode, isValid);
}
return null;
};
/**
* Decides what nodes to traverse and which ones to skip. Currently, it
* skips output, stack and workspace nodes.
* @param {Blockly.ASTNode} node The AST node to check whether it is valid.
* @return {boolean} True if the node should be visited, false otherwise.
* @protected
*/
Blockly.BasicCursor.prototype.validNode_ = function(node) {
var isValid = false;
var type = node && node.getType();
if (type == Blockly.ASTNode.types.OUTPUT ||
type == Blockly.ASTNode.types.INPUT ||
type == Blockly.ASTNode.types.FIELD ||
type == Blockly.ASTNode.types.NEXT ||
type == Blockly.ASTNode.types.PREVIOUS ||
type == Blockly.ASTNode.types.WORKSPACE) {
isValid = true;
}
return isValid;
};
/**
* From the given node find either the next valid sibling or parent.
* @param {Blockly.ASTNode} node The current position in the AST.
* @return {Blockly.ASTNode} The parent AST node or null if there are no
* valid parents.
* @private
*/
Blockly.BasicCursor.prototype.findSiblingOrParent_ = function(node) {
if (!node) {
return null;
}
var nextNode = node.next();
if (nextNode) {
return nextNode;
}
return this.findSiblingOrParent_(node.out());
};
/**
* Get the right most child of a node.
* @param {Blockly.ASTNode} node The node to find the right most child of.
* @return {Blockly.ASTNode} The right most child of the given node, or the node
* if no child exists.
* @private
*/
Blockly.BasicCursor.prototype.getRightMostChild_ = function(node) {
if (!node.in()) {
return node;
}
var newNode = node.in();
while (newNode.next()) {
newNode = newNode.next();
}
return this.getRightMostChild_(newNode);
};