cloud-blocks/core/cengage_workspace_svg.js

Cloud Blocks is a library for building scratch computing interfaces with Luxrobo MODI.

/**
 * @license
 * Visual Blocks Editor
 *
 * Copyright 2014 Google Inc.
 * https://developers.google.com/blockly/
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * @fileoverview Object representing a workspace rendered as SVG for codesketch.
 * @author Sophie
 */
'use strict';

goog.provide('Blockly.CengageWorkspaceSvg');

goog.require('Blockly.CengageToolbox');
goog.require('Blockly.CengageGesture');

/**
 * Class for a workspace.  This is an onscreen area with optional trashcan,
 * scrollbars, bubbles, and dragging.
 * @param {!Blockly.Options} options Dictionary of options.
 * @param {Blockly.BlockDragSurfaceSvg=} opt_blockDragSurface Drag surface for
 *     blocks.
 * @param {Blockly.WorkspaceDragSurfaceSvg=} opt_wsDragSurface Drag surface for
 *     the workspace.
 * @extends {Blockly.Workspace}
 * @constructor
 */
Blockly.CengageWorkspaceSvg = function (
  options,
  opt_blockDragSurface,
  opt_wsDragSurface
) {
  Blockly.CengageWorkspaceSvg.superClass_.constructor.call(
    this,
    options,
    opt_blockDragSurface,
    opt_wsDragSurface
  );
};

goog.inherits(Blockly.CengageWorkspaceSvg, Blockly.WorkspaceSvg);

Blockly.CengageWorkspaceSvg.prototype.tutorialOn = false;
/**
 * Create the workspace DOM elements.
 * @param {string=} opt_backgroundClass Either 'blocklyMainBackground' or
 *     'blocklyMutatorBackground'.
 * @return {!Element} The workspace's SVG group.
 */
Blockly.CengageWorkspaceSvg.prototype.createDom = function (
  opt_backgroundClass
) {
  /**
   * <g class="blocklyWorkspace">
   *   <rect class="blocklyMainBackground" height="100%" width="100%"></rect>
   *   [Trashcan and/or flyout may go here]
   *   <g class="blocklyBlockCanvas"></g>
   *   <g class="blocklyBubbleCanvas"></g>
   * </g>
   * @type {SVGElement}
   */
  this.svgGroup_ = Blockly.utils.createSvgElement(
    'g',
    { class: 'blocklyWorkspace' },
    null
  );

  // Note that a <g> alone does not receive mouse events--it must have a
  // valid target inside it.  If no background class is specified, as in the
  // flyout, the workspace will not receive mouse events.
  if (opt_backgroundClass) {
    /** @type {SVGElement} */
    this.svgBackground_ = Blockly.utils.createSvgElement(
      'rect',
      { height: '100%', width: '100%', class: opt_backgroundClass },
      this.svgGroup_
    );

    if (opt_backgroundClass == 'blocklyMainBackground' && this.grid_) {
      this.svgBackground_.style.fill =
        'url(#' + this.grid_.getPatternId() + ')';
    }
  }
  /** @type {SVGElement} */
  this.svgBlockCanvas_ = Blockly.utils.createSvgElement(
    'g',
    { class: 'blocklyBlockCanvas' },
    this.svgGroup_,
    this
  );
  /** @type {SVGElement} */
  this.svgBubbleCanvas_ = Blockly.utils.createSvgElement(
    'g',
    { class: 'blocklyBubbleCanvas' },
    this.svgGroup_,
    this
  );

  var bottom = Blockly.Scrollbar.scrollbarThickness;
  if (this.options.hasTrashcan) {
    bottom = this.addTrashcan_(bottom);
  }
  if (this.options.zoomOptions && this.options.zoomOptions.controls) {
    this.addZoomControls_(bottom);
  }

  if (!this.isFlyout) {
    Blockly.bindEventWithChecks_(
      this.svgGroup_,
      'mousedown',
      this,
      this.onMouseDown_
    );
    if (this.options.zoomOptions && this.options.zoomOptions.wheel) {
      // Mouse-wheel.
      Blockly.bindEventWithChecks_(
        this.svgGroup_,
        'wheel',
        this,
        this.onMouseWheel_
      );
    }
  }

  // Determine if there needs to be a category tree, or a simple list of
  // blocks.  This cannot be changed later, since the UI is very different.
  if (this.options.hasCategories) {
    /**
     * @type {Blockly.CengageToolbox}
     * @private
     */
    this.toolbox_ = new Blockly.CengageToolbox(this);
  }
  if (this.grid_) {
    this.grid_.update(this.scale);
  }
  this.recordCachedAreas();
  return this.svgGroup_;
};

Blockly.CengageWorkspaceSvg.prototype.getGesture = function (e) {
  var isStart = e.type == 'mousedown' || e.type == 'touchstart';

  var gesture = this.currentGesture_;
  if (gesture) {
    if (isStart && gesture.hasStarted()) {
      // That's funny.  We must have missed a mouse up.
      // Cancel it, rather than try to retrieve all of the state we need.
      gesture.cancel();
      return null;
    }
    return gesture;
  }

  // No gesture existed on this workspace, but this looks like the start of a
  // new gesture.
  if (isStart) {
    this.currentGesture_ = new Blockly.CengageGesture(e, this);
    return this.currentGesture_;
  }
  // No gesture existed and this event couldn't be the start of a new gesture.
  return null;
};

/**
 * @author Tom
 */
Blockly.CengageWorkspaceSvg.prototype.setBackgroundVisible = function (
  isVisible
) {
  this.svgGroup_.style.display = isVisible ? 'none' : 'block';
};