From 9561cb20c96136d47ec7df5f0aca8b557ca8006a Mon Sep 17 00:00:00 2001 From: kozbial Date: Tue, 17 Aug 2021 13:33:41 -0700 Subject: [PATCH] Migrate core/touch.js to goog.module --- core/gesture.js | 10 ++--- core/inject.js | 5 ++- core/touch.js | 95 +++++++++++++++++++++++-------------------- core/touch_gesture.js | 5 ++- tests/deps.js | 6 +-- 5 files changed, 64 insertions(+), 57 deletions(-) diff --git a/core/gesture.js b/core/gesture.js index 855dc76de..bf28e9315 100644 --- a/core/gesture.js +++ b/core/gesture.js @@ -14,8 +14,6 @@ goog.module('Blockly.Gesture'); goog.module.declareLegacyNamespace(); -// TODO(#5073): Add Blockly require after fixing circular dependency. -// goog.require('Blockly'); /* eslint-disable-next-line no-unused-vars */ const BlockSvg = goog.requireType('Blockly.BlockSvg'); const BubbleDragger = goog.require('Blockly.BubbleDragger'); @@ -280,7 +278,7 @@ Gesture.prototype.updateFromEvent_ = function(e) { // Exceeded the drag radius for the first time. if (changed) { this.updateIsDragging_(); - Blockly.longStop_(); + Touch.longStop(); } this.mostRecentEvent_ = e; }; @@ -511,7 +509,7 @@ Gesture.prototype.doStart = function(e) { if ((e.type.toLowerCase() == 'touchstart' || e.type.toLowerCase() == 'pointerdown') && e.pointerType != 'mouse') { - Blockly.longStart(e, this); + Touch.longStart(e, this); } this.mouseDownXY_ = new Coordinate(e.clientX, e.clientY); @@ -561,7 +559,7 @@ Gesture.prototype.handleMove = function(e) { */ Gesture.prototype.handleUp = function(e) { this.updateFromEvent_(e); - Blockly.longStop_(); + Touch.longStop(); if (this.isEnding_) { console.log('Trying to end a gesture recursively.'); @@ -607,7 +605,7 @@ Gesture.prototype.cancel = function() { if (this.isEnding_) { return; } - Blockly.longStop_(); + Touch.longStop(); if (this.isDraggingBubble_) { this.bubbleDragger_.endBubbleDrag( this.mostRecentEvent_, this.currentDragDeltaXY_); diff --git a/core/inject.js b/core/inject.js index 62be9633e..c2446e602 100644 --- a/core/inject.js +++ b/core/inject.js @@ -22,6 +22,7 @@ goog.require('Blockly.Grid'); goog.require('Blockly.Msg'); goog.require('Blockly.Options'); goog.require('Blockly.ScrollbarPair'); +goog.require('Blockly.Touch'); goog.require('Blockly.Tooltip'); goog.require('Blockly.utils'); goog.require('Blockly.utils.aria'); @@ -433,9 +434,9 @@ Blockly.inject.bindDocumentEvents_ = function() { document, 'keydown', null, Blockly.onKeyDown); // longStop needs to run to stop the context menu from showing up. It // should run regardless of what other touch event handlers have run. - Blockly.browserEvents.bind(document, 'touchend', null, Blockly.longStop_); + Blockly.browserEvents.bind(document, 'touchend', null, Blockly.Touch.longStop); Blockly.browserEvents.bind( - document, 'touchcancel', null, Blockly.longStop_); + document, 'touchcancel', null, Blockly.Touch.longStop); // Some iPad versions don't fire resize after portrait to landscape change. if (Blockly.utils.userAgent.IPAD) { Blockly.browserEvents.conditionalBind( diff --git a/core/touch.js b/core/touch.js index 81f82d1fd..a88f754e0 100644 --- a/core/touch.js +++ b/core/touch.js @@ -10,14 +10,10 @@ */ 'use strict'; -/** - * @name Blockly.Touch - * @namespace - */ -goog.provide('Blockly.Touch'); +goog.module('Blockly.Touch'); +goog.module.declareLegacyNamespace(); goog.require('Blockly.internalConstants'); -goog.require('Blockly.utils'); goog.require('Blockly.utils.global'); goog.require('Blockly.utils.string'); @@ -25,10 +21,11 @@ goog.requireType('Blockly.Gesture'); /** - * Whether touch is enabled in the browser. - * Copied from Closure's goog.events.BrowserFeature.TOUCH_ENABLED - */ -Blockly.Touch.TOUCH_ENABLED = + * Whether touch is enabled in the browser. + * Copied from Closure's goog.events.BrowserFeature.TOUCH_ENABLED + * @const + */ +const TOUCH_ENABLED = ('ontouchstart' in Blockly.utils.global || !!(Blockly.utils.global['document'] && document.documentElement && 'ontouchstart' in document.documentElement) || @@ -36,22 +33,22 @@ Blockly.Touch.TOUCH_ENABLED = !!(Blockly.utils.global['navigator'] && (Blockly.utils.global['navigator']['maxTouchPoints'] || Blockly.utils.global['navigator']['msMaxTouchPoints']))); +exports.TOUCH_ENABLED = TOUCH_ENABLED; /** * Which touch events are we currently paying attention to? * @type {?string} - * @private */ -Blockly.Touch.touchIdentifier_ = null; +let touchIdentifier_ = null; /** * The TOUCH_MAP lookup dictionary specifies additional touch events to fire, * in conjunction with mouse events. * @type {Object} */ -Blockly.Touch.TOUCH_MAP = {}; +let TOUCH_MAP = {}; if (Blockly.utils.global['PointerEvent']) { - Blockly.Touch.TOUCH_MAP = { + TOUCH_MAP = { 'mousedown': ['pointerdown'], 'mouseenter': ['pointerenter'], 'mouseleave': ['pointerleave'], @@ -62,19 +59,19 @@ if (Blockly.utils.global['PointerEvent']) { 'touchend': ['pointerup'], 'touchcancel': ['pointercancel'] }; -} else if (Blockly.Touch.TOUCH_ENABLED) { - Blockly.Touch.TOUCH_MAP = { +} else if (TOUCH_ENABLED) { + TOUCH_MAP = { 'mousedown': ['touchstart'], 'mousemove': ['touchmove'], 'mouseup': ['touchend', 'touchcancel'] }; } +exports.TOUCH_MAP = TOUCH_MAP; /** * PID of queued long-press task. - * @private */ -Blockly.longPid_ = 0; +let longPid_ = 0; /** * Context menus on touch devices are activated using a long-press. @@ -84,15 +81,14 @@ Blockly.longPid_ = 0; * if the touch event terminates early. * @param {!Event} e Touch start event. * @param {Blockly.Gesture} gesture The gesture that triggered this longStart. - * @package */ -Blockly.longStart = function(e, gesture) { - Blockly.longStop_(); +const longStart = function(e, gesture) { + longStop(); // Punt on multitouch events. if (e.changedTouches && e.changedTouches.length != 1) { return; } - Blockly.longPid_ = setTimeout(function() { + longPid_ = setTimeout(function() { // Additional check to distinguish between touch events and pointer events if (e.changedTouches) { // TouchEvent @@ -108,27 +104,31 @@ Blockly.longStart = function(e, gesture) { } }, Blockly.internalConstants.LONGPRESS); }; +/** @package */ +exports.longStart = longStart; /** * Nope, that's not a long-press. Either touchend or touchcancel was fired, * or a drag hath begun. Kill the queued long-press task. - * @package */ -Blockly.longStop_ = function() { - if (Blockly.longPid_) { - clearTimeout(Blockly.longPid_); - Blockly.longPid_ = 0; +const longStop = function() { + if (longPid_) { + clearTimeout(longPid_); + longPid_ = 0; } }; +/** @package */ +exports.longStop = longStop; /** * Clear the touch identifier that tracks which touch stream to pay attention * to. This ends the current drag/gesture and allows other pointers to be * captured. */ -Blockly.Touch.clearTouchIdentifier = function() { - Blockly.Touch.touchIdentifier_ = null; +const clearTouchIdentifier = function() { + touchIdentifier_ = null; }; +exports.clearTouchIdentifier = clearTouchIdentifier; /** * Decide whether Blockly should handle or ignore this event. @@ -138,10 +138,11 @@ Blockly.Touch.clearTouchIdentifier = function() { * @return {boolean} True if this event should be passed through to the * registered handler; false if it should be blocked. */ -Blockly.Touch.shouldHandleEvent = function(e) { - return !Blockly.Touch.isMouseOrTouchEvent(e) || - Blockly.Touch.checkTouchIdentifier(e); +const shouldHandleEvent = function(e) { + return !isMouseOrTouchEvent(e) || + checkTouchIdentifier(e); }; +exports.shouldHandleEvent = shouldHandleEvent; /** * Get the touch identifier from the given event. If it was a mouse event, the @@ -150,13 +151,14 @@ Blockly.Touch.shouldHandleEvent = function(e) { * @return {string} The touch identifier from the first changed touch, if * defined. Otherwise 'mouse'. */ -Blockly.Touch.getTouchIdentifierFromEvent = function(e) { +const getTouchIdentifierFromEvent = function(e) { return e.pointerId != undefined ? e.pointerId : (e.changedTouches && e.changedTouches[0] && e.changedTouches[0].identifier !== undefined && e.changedTouches[0].identifier !== null) ? e.changedTouches[0].identifier : 'mouse'; }; +exports.getTouchIdentifierFromEvent = getTouchIdentifierFromEvent; /** * Check whether the touch identifier on the event matches the current saved @@ -170,22 +172,22 @@ Blockly.Touch.getTouchIdentifierFromEvent = function(e) { * @return {boolean} Whether the identifier on the event matches the current * saved identifier. */ -Blockly.Touch.checkTouchIdentifier = function(e) { - const identifier = Blockly.Touch.getTouchIdentifierFromEvent(e); +const checkTouchIdentifier = function(e) { + const identifier = getTouchIdentifierFromEvent(e); - // if (Blockly.touchIdentifier_) is insufficient because Android touch + // if (touchIdentifier_) is insufficient because Android touch // identifiers may be zero. - if (Blockly.Touch.touchIdentifier_ !== undefined && - Blockly.Touch.touchIdentifier_ !== null) { + if (touchIdentifier_ !== undefined && + touchIdentifier_ !== null) { // We're already tracking some touch/mouse event. Is this from the same // source? - return Blockly.Touch.touchIdentifier_ == identifier; + return touchIdentifier_ == identifier; } if (e.type == 'mousedown' || e.type == 'touchstart' || e.type == 'pointerdown') { // No identifier set yet, and this is the start of a drag. Set it and // return. - Blockly.Touch.touchIdentifier_ = identifier; + touchIdentifier_ = identifier; return true; } // There was no identifier yet, but this wasn't a start event so we're going @@ -193,13 +195,14 @@ Blockly.Touch.checkTouchIdentifier = function(e) { // pointer was down. return false; }; +exports.checkTouchIdentifier = checkTouchIdentifier; /** * Set an event's clientX and clientY from its first changed touch. Use this to * make a touch event work in a mouse event handler. * @param {!Event} e A touch event. */ -Blockly.Touch.setClientFromTouch = function(e) { +const setClientFromTouch = function(e) { if (Blockly.utils.string.startsWith(e.type, 'touch')) { // Map the touch event's properties to the event. const touchPoint = e.changedTouches[0]; @@ -207,27 +210,30 @@ Blockly.Touch.setClientFromTouch = function(e) { e.clientY = touchPoint.clientY; } }; +exports.setClientFromTouch = setClientFromTouch; /** * Check whether a given event is a mouse or touch event. * @param {!Event} e An event. * @return {boolean} True if it is a mouse or touch event; false otherwise. */ -Blockly.Touch.isMouseOrTouchEvent = function(e) { +const isMouseOrTouchEvent = function(e) { return Blockly.utils.string.startsWith(e.type, 'touch') || Blockly.utils.string.startsWith(e.type, 'mouse') || Blockly.utils.string.startsWith(e.type, 'pointer'); }; +exports.isMouseOrTouchEvent = isMouseOrTouchEvent; /** * Check whether a given event is a touch event or a pointer event. * @param {!Event} e An event. * @return {boolean} True if it is a touch event; false otherwise. */ -Blockly.Touch.isTouchEvent = function(e) { +const isTouchEvent = function(e) { return Blockly.utils.string.startsWith(e.type, 'touch') || Blockly.utils.string.startsWith(e.type, 'pointer'); }; +exports.isTouchEvent = isTouchEvent; /** * Split an event into an array of events, one per changed touch or mouse @@ -237,7 +243,7 @@ Blockly.Touch.isTouchEvent = function(e) { * @return {!Array} An array of mouse or touch events. Each touch * event will have exactly one changed touch. */ -Blockly.Touch.splitEventByTouches = function(e) { +const splitEventByTouches = function(e) { const events = []; if (e.changedTouches) { for (let i = 0; i < e.changedTouches.length; i++) { @@ -259,3 +265,4 @@ Blockly.Touch.splitEventByTouches = function(e) { } return events; }; +exports.splitEventByTouches = splitEventByTouches; diff --git a/core/touch_gesture.js b/core/touch_gesture.js index 169d80062..7fa4b147f 100644 --- a/core/touch_gesture.js +++ b/core/touch_gesture.js @@ -15,6 +15,7 @@ goog.provide('Blockly.TouchGesture'); goog.require('Blockly.browserEvents'); goog.require('Blockly.Gesture'); +goog.require('Blockly.Touch'); goog.require('Blockly.utils'); goog.require('Blockly.utils.Coordinate'); goog.require('Blockly.utils.object'); @@ -152,7 +153,7 @@ Blockly.TouchGesture.prototype.handleStart = function(e) { this.handleTouchStart(e); if (this.isMultiTouch()) { - Blockly.longStop_(); + Blockly.Touch.longStop(); } } }; @@ -174,7 +175,7 @@ Blockly.TouchGesture.prototype.handleMove = function(e) { if (Blockly.Touch.isTouchEvent(e)) { this.handleTouchMove(e); } - Blockly.longStop_(); + Blockly.Touch.longStop(); } else { Blockly.TouchGesture.superClass_.handleMove.call(this, e); } diff --git a/tests/deps.js b/tests/deps.js index 6bed21032..a213beb75 100644 --- a/tests/deps.js +++ b/tests/deps.js @@ -80,7 +80,7 @@ goog.addDependency('../../core/generator.js', ['Blockly.Generator'], ['Blockly.c goog.addDependency('../../core/gesture.js', ['Blockly.Gesture'], ['Blockly.BlockDragger', 'Blockly.BubbleDragger', 'Blockly.Events', 'Blockly.Events.Click', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.Workspace', 'Blockly.WorkspaceDragger', 'Blockly.blockAnimations', 'Blockly.browserEvents', 'Blockly.internalConstants', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Coordinate'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/grid.js', ['Blockly.Grid'], ['Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/icon.js', ['Blockly.Icon'], ['Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.Size', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'}); -goog.addDependency('../../core/inject.js', ['Blockly.inject'], ['Blockly.BlockDragSurfaceSvg', 'Blockly.Css', 'Blockly.DropDownDiv', 'Blockly.Events', 'Blockly.Grid', 'Blockly.Msg', 'Blockly.Options', 'Blockly.ScrollbarPair', 'Blockly.Tooltip', 'Blockly.WidgetDiv', 'Blockly.Workspace', 'Blockly.WorkspaceDragSurfaceSvg', 'Blockly.WorkspaceSvg', 'Blockly.browserEvents', 'Blockly.common', 'Blockly.utils', 'Blockly.utils.Svg', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.math', 'Blockly.utils.userAgent']); +goog.addDependency('../../core/inject.js', ['Blockly.inject'], ['Blockly.BlockDragSurfaceSvg', 'Blockly.Css', 'Blockly.DropDownDiv', 'Blockly.Events', 'Blockly.Grid', 'Blockly.Msg', 'Blockly.Options', 'Blockly.ScrollbarPair', 'Blockly.Tooltip', 'Blockly.Touch', 'Blockly.WidgetDiv', 'Blockly.Workspace', 'Blockly.WorkspaceDragSurfaceSvg', 'Blockly.WorkspaceSvg', 'Blockly.browserEvents', 'Blockly.common', 'Blockly.utils', 'Blockly.utils.Svg', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.math', 'Blockly.utils.userAgent']); goog.addDependency('../../core/input.js', ['Blockly.Input'], ['Blockly.FieldLabel', 'Blockly.constants', 'Blockly.fieldRegistry', 'Blockly.inputTypes'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/input_types.js', ['Blockly.inputTypes'], ['Blockly.connectionTypes'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/insertion_marker_manager.js', ['Blockly.InsertionMarkerManager'], ['Blockly.ComponentManager', 'Blockly.Events', 'Blockly.blockAnimations', 'Blockly.connectionTypes', 'Blockly.constants', 'Blockly.internalConstants'], {'lang': 'es6', 'module': 'goog'}); @@ -200,8 +200,8 @@ goog.addDependency('../../core/toolbox/separator.js', ['Blockly.ToolboxSeparator goog.addDependency('../../core/toolbox/toolbox.js', ['Blockly.Toolbox'], ['Blockly', 'Blockly.BlockSvg', 'Blockly.CollapsibleToolboxCategory', 'Blockly.ComponentManager', 'Blockly.Css', 'Blockly.DeleteArea', 'Blockly.Events', 'Blockly.Events.ToolboxItemSelect', 'Blockly.Options', 'Blockly.Touch', 'Blockly.browserEvents', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.aria', 'Blockly.utils.dom', 'Blockly.utils.toolbox'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/toolbox/toolbox_item.js', ['Blockly.ToolboxItem'], ['Blockly.utils.IdGenerator'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/tooltip.js', ['Blockly.Tooltip'], ['Blockly.browserEvents', 'Blockly.common', 'Blockly.utils.string']); -goog.addDependency('../../core/touch.js', ['Blockly.Touch'], ['Blockly.internalConstants', 'Blockly.utils', 'Blockly.utils.global', 'Blockly.utils.string']); -goog.addDependency('../../core/touch_gesture.js', ['Blockly.TouchGesture'], ['Blockly.Gesture', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.object']); +goog.addDependency('../../core/touch.js', ['Blockly.Touch'], ['Blockly.internalConstants', 'Blockly.utils.global', 'Blockly.utils.string'], {'lang': 'es6', 'module': 'goog'}); +goog.addDependency('../../core/touch_gesture.js', ['Blockly.TouchGesture'], ['Blockly.Gesture', 'Blockly.Touch', 'Blockly.browserEvents', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.object']); goog.addDependency('../../core/trashcan.js', ['Blockly.Trashcan'], ['Blockly.ComponentManager', 'Blockly.DeleteArea', 'Blockly.Events', 'Blockly.Events.TrashcanOpen', 'Blockly.Options', 'Blockly.Xml', 'Blockly.browserEvents', 'Blockly.internalConstants', 'Blockly.registry', 'Blockly.uiPosition', 'Blockly.utils', 'Blockly.utils.Rect', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.toolbox'], {'lang': 'es6', 'module': 'goog'}); goog.addDependency('../../core/utils.js', ['Blockly.utils'], ['Blockly.Msg', 'Blockly.internalConstants', 'Blockly.utils.Coordinate', 'Blockly.utils.Rect', 'Blockly.utils.colour', 'Blockly.utils.global', 'Blockly.utils.string', 'Blockly.utils.style', 'Blockly.utils.userAgent']); goog.addDependency('../../core/utils/aria.js', ['Blockly.utils.aria'], [], {'lang': 'es6', 'module': 'goog'});