blockly 9.0.0-beta.0 → 9.0.0-beta.1

package/core/touch.ts

@@ -1,306 +0,0 @@
-/**
- * @license
- * Copyright 2016 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview Touch handling for Blockly.
- */
-
-/**
- * Touch handling for Blockly.
- * @namespace Blockly.Touch
- */
-import * as goog from '../closure/goog/goog.js';
-goog.declareModuleId('Blockly.Touch');
-
-import type {Gesture} from './gesture.js';
-
-
-/**
- * A mock event, created from either a mouse or touch event,
- * with no more than one entry in the changedTouches array.
- */
-interface PseudoEvent {
-  type: string;
-  changedTouches: Touch[];
-  target: Element;
-  stopPropagation: () => void;
-  preventDefault: () => void;
-}
-
-/** Length in ms for a touch to become a long press. */
-const LONGPRESS = 750;
-
-/**
- * Whether touch is enabled in the browser.
- * Copied from Closure's goog.events.BrowserFeature.TOUCH_ENABLED
- */
-export const TOUCH_ENABLED = 'ontouchstart' in globalThis ||
-    !!(globalThis['document'] && document.documentElement &&
-       'ontouchstart' in
-           document.documentElement) ||  // IE10 uses non-standard touch events,
-    // so it has a different check.
-    !!(globalThis['navigator'] &&
-       (globalThis['navigator']['maxTouchPoints'] ||
-        (globalThis['navigator'] as any)['msMaxTouchPoints']));
-
-/** Which touch events are we currently paying attention to? */
-let touchIdentifier_: string|null = null;
-
-/**
- * The TOUCH_MAP lookup dictionary specifies additional touch events to fire,
- * in conjunction with mouse events.
- * @alias Blockly.Touch.TOUCH_MAP
- */
-export const TOUCH_MAP: {[key: string]: string[]} = globalThis['PointerEvent'] ?
-    {
-      'mousedown': ['pointerdown'],
-      'mouseenter': ['pointerenter'],
-      'mouseleave': ['pointerleave'],
-      'mousemove': ['pointermove'],
-      'mouseout': ['pointerout'],
-      'mouseover': ['pointerover'],
-      'mouseup': ['pointerup', 'pointercancel'],
-      'touchend': ['pointerup'],
-      'touchcancel': ['pointercancel'],
-    } :
-    {
-      'mousedown': ['touchstart'],
-      'mousemove': ['touchmove'],
-      'mouseup': ['touchend', 'touchcancel'],
-    };
-
-/** PID of queued long-press task. */
-let longPid_: AnyDuringMigration = 0;
-
-/**
- * Context menus on touch devices are activated using a long-press.
- * Unfortunately the contextmenu touch event is currently (2015) only supported
- * by Chrome.  This function is fired on any touchstart event, queues a task,
- * which after about a second opens the context menu.  The tasks is killed
- * if the touch event terminates early.
- * @param e Touch start event.
- * @param gesture The gesture that triggered this longStart.
- * @alias Blockly.Touch.longStart
- * @internal
- */
-export function longStart(e: Event, gesture: Gesture) {
-  longStop();
-  // Punt on multitouch events.
-  if (e instanceof TouchEvent && e.changedTouches &&
-      e.changedTouches.length !== 1) {
-    return;
-  }
-  longPid_ = setTimeout(function() {
-    // TODO(#6097): Make types accurate, possibly by refactoring touch handling.
-    const typelessEvent = e as AnyDuringMigration;
-    // Additional check to distinguish between touch events and pointer events
-    if (typelessEvent.changedTouches) {
-      // TouchEvent
-      typelessEvent.button = 2;  // Simulate a right button click.
-      // e was a touch event.  It needs to pretend to be a mouse event.
-      typelessEvent.clientX = typelessEvent.changedTouches[0].clientX;
-      typelessEvent.clientY = typelessEvent.changedTouches[0].clientY;
-    }
-
-    // Let the gesture route the right-click correctly.
-    if (gesture) {
-      gesture.handleRightClick(e);
-    }
-  }, LONGPRESS);
-}
-
-/**
- * Nope, that's not a long-press.  Either touchend or touchcancel was fired,
- * or a drag hath begun.  Kill the queued long-press task.
- * @alias Blockly.Touch.longStop
- * @internal
- */
-export function longStop() {
-  if (longPid_) {
-    clearTimeout(longPid_);
-    longPid_ = 0;
-  }
-}
-
-/**
- * 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.
- * @alias Blockly.Touch.clearTouchIdentifier
- */
-export function clearTouchIdentifier() {
-  touchIdentifier_ = null;
-}
-
-/**
- * Decide whether Blockly should handle or ignore this event.
- * Mouse and touch events require special checks because we only want to deal
- * with one touch stream at a time.  All other events should always be handled.
- * @param e The event to check.
- * @return True if this event should be passed through to the registered
- *     handler; false if it should be blocked.
- * @alias Blockly.Touch.shouldHandleEvent
- */
-export function shouldHandleEvent(e: Event|PseudoEvent): boolean {
-  return !isMouseOrTouchEvent(e) || checkTouchIdentifier(e);
-}
-
-/**
- * Get the touch identifier from the given event.  If it was a mouse event, the
- * identifier is the string 'mouse'.
- * @param e Mouse event or touch event.
- * @return The touch identifier from the first changed touch, if defined.
- *     Otherwise 'mouse'.
- * @alias Blockly.Touch.getTouchIdentifierFromEvent
- */
-export function getTouchIdentifierFromEvent(e: Event|PseudoEvent): string {
-  if (e instanceof MouseEvent) {
-    return 'mouse';
-  }
-
-  if (e instanceof PointerEvent) {
-    return String(e.pointerId);
-  }
-
-  /**
-   * TODO(#6097): Fix types. This is a catch-all for everything but mouse
-   * and pointer events.
-   */
-  const pseudoEvent = /** {!PseudoEvent} */ e;
-
-  // AnyDuringMigration because:  Property 'changedTouches' does not exist on
-  // type 'PseudoEvent | Event'. AnyDuringMigration because:  Property
-  // 'changedTouches' does not exist on type 'PseudoEvent | Event'.
-  // AnyDuringMigration because:  Property 'changedTouches' does not exist on
-  // type 'PseudoEvent | Event'. AnyDuringMigration because:  Property
-  // 'changedTouches' does not exist on type 'PseudoEvent | Event'.
-  // AnyDuringMigration because:  Property 'changedTouches' does not exist on
-  // type 'PseudoEvent | Event'.
-  return (pseudoEvent as AnyDuringMigration).changedTouches &&
-          (pseudoEvent as AnyDuringMigration).changedTouches[0] &&
-          (pseudoEvent as AnyDuringMigration).changedTouches[0].identifier !==
-              undefined &&
-          (pseudoEvent as AnyDuringMigration).changedTouches[0].identifier !==
-              null ?
-      String((pseudoEvent as AnyDuringMigration).changedTouches[0].identifier) :
-      'mouse';
-}
-
-/**
- * Check whether the touch identifier on the event matches the current saved
- * identifier.  If there is no identifier, that means it's a mouse event and
- * we'll use the identifier "mouse".  This means we won't deal well with
- * multiple mice being used at the same time.  That seems okay.
- * If the current identifier was unset, save the identifier from the
- * event.  This starts a drag/gesture, during which touch events with other
- * identifiers will be silently ignored.
- * @param e Mouse event or touch event.
- * @return Whether the identifier on the event matches the current saved
- *     identifier.
- * @alias Blockly.Touch.checkTouchIdentifier
- */
-export function checkTouchIdentifier(e: Event|PseudoEvent): boolean {
-  const identifier = getTouchIdentifierFromEvent(e);
-
-  // if (touchIdentifier_) is insufficient because Android touch
-  // identifiers may be zero.
-  if (touchIdentifier_ !== undefined && touchIdentifier_ !== null) {
-    // We're already tracking some touch/mouse event.  Is this from the same
-    // source?
-    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.
-    touchIdentifier_ = identifier;
-    return true;
-  }
-  // There was no identifier yet, but this wasn't a start event so we're going
-  // to ignore it.  This probably means that another drag finished while this
-  // pointer was down.
-  return false;
-}
-
-/**
- * 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 e A touch event.
- * @alias Blockly.Touch.setClientFromTouch
- */
-export function setClientFromTouch(e: Event|PseudoEvent) {
-  // AnyDuringMigration because:  Property 'changedTouches' does not exist on
-  // type 'PseudoEvent | Event'.
-  if (e.type.startsWith('touch') && (e as AnyDuringMigration).changedTouches) {
-    // Map the touch event's properties to the event.
-    // AnyDuringMigration because:  Property 'changedTouches' does not exist on
-    // type 'PseudoEvent | Event'.
-    const touchPoint = (e as AnyDuringMigration).changedTouches[0];
-    // AnyDuringMigration because:  Property 'clientX' does not exist on type
-    // 'PseudoEvent | Event'.
-    (e as AnyDuringMigration).clientX = touchPoint.clientX;
-    // AnyDuringMigration because:  Property 'clientY' does not exist on type
-    // 'PseudoEvent | Event'.
-    (e as AnyDuringMigration).clientY = touchPoint.clientY;
-  }
-}
-
-/**
- * Check whether a given event is a mouse, touch, or pointer event.
- * @param e An event.
- * @return True if it is a mouse, touch, or pointer event; false otherwise.
- * @alias Blockly.Touch.isMouseOrTouchEvent
- */
-export function isMouseOrTouchEvent(e: Event|PseudoEvent): boolean {
-  return e.type.startsWith('touch') || e.type.startsWith('mouse') ||
-      e.type.startsWith('pointer');
-}
-
-/**
- * Check whether a given event is a touch event or a pointer event.
- * @param e An event.
- * @return True if it is a touch or pointer event; false otherwise.
- * @alias Blockly.Touch.isTouchEvent
- */
-export function isTouchEvent(e: Event|PseudoEvent): boolean {
-  return e.type.startsWith('touch') || e.type.startsWith('pointer');
-}
-
-/**
- * Split an event into an array of events, one per changed touch or mouse
- * point.
- * @param e A mouse event or a touch event with one or more changed touches.
- * @return An array of events or pseudo events.
- *     Each pseudo-touch event will have exactly one changed touch and there
- * will be no real touch events.
- * @alias Blockly.Touch.splitEventByTouches
- */
-export function splitEventByTouches(e: Event): Array<Event|PseudoEvent> {
-  const events = [];
-  if (e instanceof TouchEvent) {
-    for (let i = 0; i < e.changedTouches.length; i++) {
-      const newEvent = {
-        type: e.type,
-        changedTouches: [e.changedTouches[i]],
-        target: e.target,
-        stopPropagation() {
-          e.stopPropagation();
-        },
-        preventDefault() {
-          e.preventDefault();
-        },
-      };
-      events[i] = newEvent;
-    }
-  } else {
-    events.push(e);
-  }
-  // AnyDuringMigration because:  Type '(Event | { type: string; changedTouches:
-  // Touch[]; target: EventTarget | null; stopPropagation(): void;
-  // preventDefault(): void; })[]' is not assignable to type '(PseudoEvent |
-  // Event)[]'.
-  return events as AnyDuringMigration;
-}

package/core/touch_gesture.ts

@@ -1,295 +0,0 @@
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-
-/**
- * @fileoverview The class extends Gesture to support pinch to zoom
- * for both pointer and touch events.
- */
-
-/**
- * The class extends Gesture to support pinch to zoom
- * for both pointer and touch events.
- * @class
- */
-import * as goog from '../closure/goog/goog.js';
-goog.declareModuleId('Blockly.TouchGesture');
-
-import * as browserEvents from './browser_events.js';
-import {Gesture} from './gesture.js';
-import * as Touch from './touch.js';
-import {Coordinate} from './utils/coordinate.js';
-import type {WorkspaceSvg} from './workspace_svg.js';
-
-
-/*
- * Note: In this file "start" refers to touchstart, mousedown, and pointerstart
- * events.  "End" refers to touchend, mouseup, and pointerend events.
- */
-
-/** A multiplier used to convert the gesture scale to a zoom in delta. */
-const ZOOM_IN_MULTIPLIER = 5;
-
-/** A multiplier used to convert the gesture scale to a zoom out delta. */
-const ZOOM_OUT_MULTIPLIER = 6;
-
-/**
- * Class for one gesture.
- * @alias Blockly.TouchGesture
- */
-export class TouchGesture extends Gesture {
-  /** Boolean for whether or not this gesture is a multi-touch gesture. */
-  private isMultiTouch_ = false;
-
-  /** A map of cached points used for tracking multi-touch gestures. */
-  private cachedPoints = new Map<string, Coordinate|null>();
-
-  /**
-   * This is the ratio between the starting distance between the touch points
-   * and the most recent distance between the touch points.
-   * Scales between 0 and 1 mean the most recent zoom was a zoom out.
-   * Scales above 1.0 mean the most recent zoom was a zoom in.
-   */
-  private previousScale_ = 0;
-
-  /** The starting distance between two touch points. */
-  private startDistance_ = 0;
-
-  /**
-   * A handle to use to unbind the second touch start or pointer down listener
-   * at the end of a drag.
-   * Opaque data returned from Blockly.bindEventWithChecks_.
-   */
-  private onStartWrapper_: browserEvents.Data|null = null;
-
-  /** Boolean for whether or not the workspace supports pinch-zoom. */
-  private isPinchZoomEnabled_: boolean|null = null;
-  override onMoveWrapper_: AnyDuringMigration;
-  override onUpWrapper_: AnyDuringMigration;
-
-  /**
-   * Start a gesture: update the workspace to indicate that a gesture is in
-   * progress and bind mousemove and mouseup handlers.
-   * @param e A mouse down, touch start or pointer down event.
-   * @internal
-   */
-  override doStart(e: MouseEvent) {
-    this.isPinchZoomEnabled_ = this.startWorkspace_.options.zoomOptions &&
-        this.startWorkspace_.options.zoomOptions.pinch;
-    super.doStart(e);
-    if (!this.isEnding_ && Touch.isTouchEvent(e)) {
-      this.handleTouchStart(e);
-    }
-  }
-
-  /**
-   * Bind gesture events.
-   * Overriding the gesture definition of this function, binding the same
-   * functions for onMoveWrapper_ and onUpWrapper_ but passing
-   * opt_noCaptureIdentifier.
-   * In addition, binding a second mouse down event to detect multi-touch
-   * events.
-   * @param e A mouse down or touch start event.
-   * @internal
-   */
-  override bindMouseEvents(e: Event) {
-    this.onStartWrapper_ = browserEvents.conditionalBind(
-        document, 'mousedown', null, this.handleStart.bind(this),
-        /* opt_noCaptureIdentifier */ true);
-    this.onMoveWrapper_ = browserEvents.conditionalBind(
-        document, 'mousemove', null, this.handleMove.bind(this),
-        /* opt_noCaptureIdentifier */ true);
-    this.onUpWrapper_ = browserEvents.conditionalBind(
-        document, 'mouseup', null, this.handleUp.bind(this),
-        /* opt_noCaptureIdentifier */ true);
-
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  /**
-   * Handle a mouse down, touch start, or pointer down event.
-   * @param e A mouse down, touch start, or pointer down event.
-   * @internal
-   */
-  handleStart(e: Event) {
-    if (this.isDragging()) {
-      // A drag has already started, so this can no longer be a pinch-zoom.
-      return;
-    }
-    if (Touch.isTouchEvent(e)) {
-      this.handleTouchStart(e);
-
-      if (this.isMultiTouch()) {
-        Touch.longStop();
-      }
-    }
-  }
-
-  /**
-   * Handle a mouse move, touch move, or pointer move event.
-   * @param e A mouse move, touch move, or pointer move event.
-   * @internal
-   */
-  override handleMove(e: MouseEvent) {
-    if (this.isDragging()) {
-      // We are in the middle of a drag, only handle the relevant events
-      if (Touch.shouldHandleEvent(e)) {
-        super.handleMove(e);
-      }
-      return;
-    }
-    if (this.isMultiTouch()) {
-      if (Touch.isTouchEvent(e)) {
-        this.handleTouchMove(e);
-      }
-      Touch.longStop();
-    } else {
-      super.handleMove(e);
-    }
-  }
-
-  /**
-   * Handle a mouse up, touch end, or pointer up event.
-   * @param e A mouse up, touch end, or pointer up event.
-   * @internal
-   */
-  override handleUp(e: Event) {
-    if (Touch.isTouchEvent(e) && !this.isDragging()) {
-      this.handleTouchEnd(e);
-    }
-    if (!this.isMultiTouch() || this.isDragging()) {
-      if (!Touch.shouldHandleEvent(e)) {
-        return;
-      }
-      super.handleUp(e);
-    } else {
-      e.preventDefault();
-      e.stopPropagation();
-
-      this.dispose();
-    }
-  }
-
-  /**
-   * Whether this gesture is part of a multi-touch gesture.
-   * @return Whether this gesture is part of a multi-touch gesture.
-   * @internal
-   */
-  isMultiTouch(): boolean {
-    return this.isMultiTouch_;
-  }
-
-  /**
-   * Sever all links from this object.
-   * @internal
-   */
-  override dispose() {
-    super.dispose();
-
-    if (this.onStartWrapper_) {
-      browserEvents.unbind(this.onStartWrapper_);
-    }
-  }
-
-  /**
-   * Handle a touch start or pointer down event and keep track of current
-   * pointers.
-   * @param e A touch start, or pointer down event.
-   * @internal
-   */
-  handleTouchStart(e: Event) {
-    const pointerId = Touch.getTouchIdentifierFromEvent(e);
-    // store the pointerId in the current list of pointers
-    this.cachedPoints.set(pointerId, this.getTouchPoint(e));
-    const pointers = Array.from(this.cachedPoints.keys());
-    // If two pointers are down, store info
-    if (pointers.length === 2) {
-      const point0 = (this.cachedPoints.get(pointers[0]))!;
-      const point1 = (this.cachedPoints.get(pointers[1]))!;
-      this.startDistance_ = Coordinate.distance(point0, point1);
-      this.isMultiTouch_ = true;
-      e.preventDefault();
-    }
-  }
-
-  /**
-   * Handle a touch move or pointer move event and zoom in/out if two pointers
-   * are on the screen.
-   * @param e A touch move, or pointer move event.
-   * @internal
-   */
-  handleTouchMove(e: MouseEvent) {
-    const pointerId = Touch.getTouchIdentifierFromEvent(e);
-    // Update the cache
-    this.cachedPoints.set(pointerId, this.getTouchPoint(e));
-
-    if (this.isPinchZoomEnabled_ && this.cachedPoints.size === 2) {
-      this.handlePinch_(e);
-    } else {
-      super.handleMove(e);
-    }
-  }
-
-  /**
-   * Handle pinch zoom gesture.
-   * @param e A touch move, or pointer move event.
-   */
-  private handlePinch_(e: MouseEvent) {
-    const pointers = Array.from(this.cachedPoints.keys());
-    // Calculate the distance between the two pointers
-    const point0 = (this.cachedPoints.get(pointers[0]))!;
-    const point1 = (this.cachedPoints.get(pointers[1]))!;
-    const moveDistance = Coordinate.distance(point0, point1);
-    const scale = moveDistance / this.startDistance_;
-
-    if (this.previousScale_ > 0 && this.previousScale_ < Infinity) {
-      const gestureScale = scale - this.previousScale_;
-      const delta = gestureScale > 0 ? gestureScale * ZOOM_IN_MULTIPLIER :
-                                       gestureScale * ZOOM_OUT_MULTIPLIER;
-      const workspace = this.startWorkspace_;
-      const position = browserEvents.mouseToSvg(
-          e, workspace.getParentSvg(), workspace.getInverseScreenCTM());
-      workspace.zoom(position.x, position.y, delta);
-    }
-    this.previousScale_ = scale;
-    e.preventDefault();
-  }
-
-  /**
-   * Handle a touch end or pointer end event and end the gesture.
-   * @param e A touch end, or pointer end event.
-   * @internal
-   */
-  handleTouchEnd(e: Event) {
-    const pointerId = Touch.getTouchIdentifierFromEvent(e);
-    if (this.cachedPoints.has(pointerId)) {
-      this.cachedPoints.delete(pointerId);
-    }
-    if (this.cachedPoints.size < 2) {
-      this.cachedPoints.clear();
-      this.previousScale_ = 0;
-    }
-  }
-
-  /**
-   * Helper function returning the current touch point coordinate.
-   * @param e A touch or pointer event.
-   * @return The current touch point coordinate
-   * @internal
-   */
-  getTouchPoint(e: Event): Coordinate|null {
-    if (!this.startWorkspace_) {
-      return null;
-    }
-    // TODO(#6097): Make types accurate, possibly by refactoring touch handling.
-    const typelessEvent = e as AnyDuringMigration;
-    return new Coordinate(
-        typelessEvent.changedTouches ? typelessEvent.changedTouches[0].pageX :
-                                       typelessEvent.pageX,
-        typelessEvent.changedTouches ? typelessEvent.changedTouches[0].pageY :
-                                       typelessEvent.pageY);
-  }
-}