jclic 2.2.1 → 2.3.0

package/src/boxes/ActiveBoxContent.js

@@ -1,484 +0,0 @@
-/**
- *  File    : boxes/ActiveBoxContent.js
- *  Created : 13/04/2015
- *  By      : Francesc Busquets <francesc@gmail.com>
- *
- *  JClic.js
- *  An HTML5 player of JClic activities
- *  https://projectestac.github.io/jclic.js
- *
- *  @source https://github.com/projectestac/jclic.js
- *
- *  @license EUPL-1.2
- *  @licstart
- *  (c) 2000-2020 Catalan Educational Telematic Network (XTEC)
- *
- *  Licensed under the EUPL, Version 1.1 or -as soon they will be approved by
- *  the European Commission- subsequent versions of the EUPL (the "Licence");
- *  You may not use this work except in compliance with the Licence.
- *
- *  You may obtain a copy of the Licence at:
- *  https://joinup.ec.europa.eu/software/page/eupl
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the Licence is distributed on an "AS IS" basis, WITHOUT
- *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- *  Licence for the specific language governing permissions and limitations
- *  under the Licence.
- *  @licend
- *  @module
- */
-
-import $ from 'jquery';
-import { Dimension } from '../AWT.js';
-import { getAttr, setAttr, attrForEach, getBoolean, nSlash, startsWith, getMsg } from '../Utils.js';
-import BoxBase from './BoxBase.js';
-import MediaContent from '../media/MediaContent.js';
-
-/**
- * This class is used as a container for horizontal and vertical alignments of content inside a cell.
- */
-export class AlignType {
-  /**
-   * AlignType constructor
-   * @param {string} [h] - Horizontal alignment. Possible values are `left`, `center` and `right`
-   * @param {string} [v] - Vertical alignment. Possible values are `top`, `center` and `bottom`
-   */
-  constructor(h, v) {
-    if (h)
-      this.h = h;
-    if (v)
-      this.v = v;
-  }
-
-  /**
-   * Gets a object with the basic attributes needed to rebuild this instance excluding functions,
-   * parent references, constants and also attributes retaining the default value.
-   * The resulting object is commonly usued to serialize elements in JSON format.
-   * @returns {object} - The resulting object, with minimal attrributes
-   */
-  getAttributes() {
-    return getAttr(this, ['h|center', 'v|center']);
-  }
-
-  /**
-   * Reads the properties of this AlignType from a data object
-   * @param {object} data - The data object to be parsed
-   * @returns {module:boxes/ActiveBoxContent.AlignType}
-   */
-  setAttributes(data) {
-    return setAttr(this, data, ['h', 'v']);
-  }
-}
-
-Object.assign(AlignType.prototype, {
-  h: 'center',
-  v: 'center',
-});
-
-/**
- * This class defines a content that can be displayed by {@link module:boxes/ActiveBox.ActiveBox ActiveBox} objects. This content
- * can be a text, an image, a fragment of an image or a combination of text and images. The style
- * (colors, font and size, borders, shadows, margins, etc.) are specified in the `style` attribute,
- * always pointing to a {@link module:boxes/BoxBase.BoxBase BoxBase} object.
- */
-export class ActiveBoxContent {
-  /**
-   * ActiveBoxContent constructor
-   * @param {string} [id] - An optional identifier.
-   */
-  constructor(id) {
-    if (typeof id !== 'undefined')
-      this.id = id;
-    this.imgAlign = new AlignType();
-    this.txtAlign = new AlignType();
-  }
-
-  /**
-   *
-   * Loads settings from a specific JQuery XML element
-   * @param {external:jQuery} $xml - The XML element to be parsed
-   * @param {module:bags/MediaBag.MediaBag} mediaBag - The media bag used to retrieve images and other media
-   */
-  setProperties($xml, mediaBag) {
-    //
-    // Read attributes
-    attrForEach($xml.get(0).attributes, (name, val) => {
-      switch (name) {
-        case 'id':
-        case 'item':
-          this[name] = Number(val);
-          break;
-
-        case 'width':
-        case 'height':
-          if (this.dimension === null)
-            this.dimension = new Dimension(0, 0);
-          this.dimension[name] = Number(val);
-          break;
-
-        case 'txtAlign':
-        case 'imgAlign':
-          this[name] = this.readAlign(val);
-          break;
-
-        case 'hAlign':
-          // Old style
-          this['txtAlign'] = this.readAlign(val + ',center');
-          this['imgAlign'] = this.readAlign(val + ',center');
-          break;
-
-        case 'border':
-        case 'avoidOverlapping':
-          this[name] = getBoolean(val);
-          break;
-
-        case 'image':
-          this.image = nSlash(val);
-          break;
-      }
-    });
-
-    //
-    // Read inner elements
-    $xml.children().each((_n, child) => {
-      const $node = $(child);
-      switch (child.nodeName) {
-        case 'style':
-          this.style = new BoxBase(null).setProperties($node);
-          break;
-        case 'media':
-          this.mediaContent = new MediaContent().setProperties($node);
-          break;
-        case 'p':
-          if (this.text === null)
-            this.text = '';
-          else
-            this.text += '\n';
-          this.text += child.textContent;
-          break;
-      }
-    });
-
-    if (mediaBag)
-      this.realizeContent(mediaBag);
-
-    return this;
-  }
-
-  /**
-   * Gets a object with the basic attributes needed to rebuild this instance excluding functions,
-   * parent references, constants and also attributes retaining the default value.
-   * The resulting object is commonly usued to serialize elements in JSON format.
-   * @returns {object} - The resulting object, with minimal attrributes
-   */
-  getAttributes() {
-    return getAttr(this, [
-      'id', 'item', 'dimension', 'border', 'avoidOverlapping', 'image', 'text',
-      'objectType', // Used in TextActivityDocument
-      'txtAlign', 'imgAlign', // AlignType
-      'style', // BoxBase
-      'mediaContent', // MediaContent
-    ]);
-  }
-
-  /**
-   * Reads the properties of this ActiveBoxContent from a data object
-   * @param {object|string} data - The data object to be parsed, or just the text content
-   * @param {module:bags/MediaBag.MediaBag} mediaBag - The media bag used to retrieve images and other media
-   * @returns {module:boxes/ActiveBoxContent.ActiveBoxContent}
-   */
-  setAttributes(data, mediaBag) {
-
-    if (typeof data === 'string')
-      this.text = data;
-    else
-      setAttr(this, data, [
-        'id', 'item', 'border', 'avoidOverlapping', 'image', 'text',
-        'objectType',
-        { key: 'dimension', fn: Dimension },
-        { key: 'txtAlign', fn: AlignType },
-        { key: 'imgAlign', fn: AlignType },
-        { key: 'style', fn: BoxBase },
-        { key: 'mediaContent', fn: MediaContent },
-      ]);
-
-    if (mediaBag)
-      this.realizeContent(mediaBag);
-
-    return this;
-  }
-
-  /**
-   * Decode expressions with combined values of horizontal and vertical alignments in the form:
-   * "(left|middle|right),(top|middle|bottom)"
-   * @param {string} str - The string to parse
-   * @returns {module:boxes/ActiveBoxContent.ActiveBoxContent~alignType}
-   */
-  readAlign(str) {
-    const align = new AlignType();
-    if (str) {
-      const v = str.split(',');
-      align.h = v[0].replace('middle', 'center');
-      align.v = v[1].replace('middle', 'center');
-    }
-    return align;
-  }
-
-  /**
-   * Checks if this is an empty content (`text` and `img` are _null_)
-   */
-  isEmpty() {
-    return this.text === null && this.img === null;
-  }
-
-  /**
-   * Checks if two contents are equivalent
-   * @param {module:boxes/ActiveBoxContent.ActiveBoxContent} abc - The content to compare with this.
-   * @param {boolean} checkCase - When `true` the comparing will be case-sensitive.
-   * @returns {boolean}
-   */
-  isEquivalent(abc, checkCase) {
-    if (abc === this)
-      return true;
-    let result = false;
-    if (abc !== null) {
-      if (this.isEmpty() && abc.isEmpty())
-        result = this.id === abc.id;
-      else
-        result = (this.text === null ? abc.text === null
-          : checkCase ? this.text === abc.text
-            : this.text.toLocaleLowerCase() === abc.text.toLocaleLowerCase()
-        ) &&
-          (this.mediaContent === null ? abc.mediaContent === null
-            : this.mediaContent.isEquivalent(abc.mediaContent)
-          ) &&
-          this.img === abc.img &&
-          (this.imgClip === null ? abc.imgClip === null
-            : this.imgClip.equals(abc.imgClip));
-    }
-    return result;
-  }
-
-  /**
-   * Sets the text content of this ActiveBox
-   * @param {string} tx
-   */
-  setTextContent(tx) {
-    // only plain text allowed!
-    if (tx !== null) {
-      this.text = tx;
-      this.checkHtmlText();
-    } else {
-      this.text = null;
-      this.innerHtmlText = null;
-    }
-  }
-
-  /**
-   * Checks if cell's text uses HTML, initializing the `innerHtmlText` member as needed.
-   */
-  checkHtmlText() {
-    this.innerHtmlText = null;
-    if (startsWith(this.text, '<html>', true)) {
-      const htmlText = this.text.trim();
-      const s = htmlText.toLocaleLowerCase();
-      if (s.indexOf('<body') === -1) {
-        const s2 = s.indexOf('</html>');
-        if (s2 >= 0)
-          this.innerHtmlText = htmlText.substring(6, s2);
-      }
-    }
-  }
-
-  /**
-   * Sets a fragment of a main image as a graphic content of this cell.
-   * Cells cannot have two graphic contents, so `image` (the specific image of this cell) should
-   * be cleared with this setting.
-   * @param {external:HTMLImageElement} img - The image data
-   * @param {module:AWT.Shape} imgClip - A shape that clips the portion of image assigned to this content.
-   * @param {string} [animatedGifFile] - When `img` is an animated GIF, its file name
-   */
-  setImgContent(img, imgClip, animatedGifFile) {
-    this.img = img;
-    this.image = null;
-    this.imgClip = imgClip;
-    if (animatedGifFile)
-      this.animatedGifFile = animatedGifFile;
-  }
-
-  /**
-   * Prepares the media content
-   * @param {module:JClicPlayer.JClicPlayer} playStation - Usually a {@link module:JClicPlayer.JClicPlayer JClicPlayer}
-   */
-  prepareMedia(playStation) {
-    if (!this.amp && this.mediaContent && this.mediaContent.type === 'PLAY_VIDEO') {
-      this.amp = playStation.getActiveMediaPlayer(this.mediaContent);
-      this.amp.realize();
-    }
-  }
-
-  /**
-   * Reads and initializes the image associated to this content
-   * @param {module:bags/MediaBag.MediaBag} mediaBag - The media bag of the current project.
-   */
-  realizeContent(mediaBag, ps = null) {
-    if (this.image !== null && this.image.length > 0) {
-      this.mbe = mediaBag.getElement(this.image, true);
-      if (this.mbe) {
-        this.mbe.build(() => {
-          this.img = this.mbe.data;
-          this.animatedGifFile = this.mbe.animated ? this.mbe.getFullPath() : null;
-        }, ps, true);
-      }
-    }
-    if (this.mediaContent !== null) {
-      if (this.image === null && (this.text === null || this.text.length === 0)) {
-        this.img = this.mediaContent.getIcon();
-        this.animatedGifFile = null;
-      }
-    }
-    this.checkHtmlText(mediaBag);
-  }
-
-  /**
-   * Gets a string representing this content, useful for checking if two different contents are
-   * equivalent.
-   * @returns {string}
-   */
-  getDescription() {
-    const result = [];
-    if (this.text && this.text.length)
-      result.push(this.text);
-    if (this.image)
-      result.push(`${getMsg('image')} ${this.image}`);
-    if (this.imgClip)
-      result.push(this.imgClip.toString());
-    if (this.mediaContent)
-      result.push(this.mediaContent.getDescription());
-    return result.join(' ');
-  }
-
-  /**
-   *
-   * Overwrites the original `Object.toString` method, returning `getDescription` instead
-   * @returns {string}
-   */
-  toString() {
-    const result = [];
-    if (this.text && this.text.length)
-      result.push(this.text);
-    if (this.image)
-      result.push(`${getMsg('image')} ${this.image}`);
-    if (this.imgClip)
-      result.push(`${getMsg('image fragment')} ${(this.id >= 0 ? this.id : this.item) + 1}`);
-    return result.join(' ') || getMsg('cell');
-  }
-}
-
-Object.assign(ActiveBoxContent.prototype, {
-  /**
-   * The {@link module:boxes/BoxBase.BoxBase BoxBase} attribute of this content. Can be `null`, meaning {@link module:boxes/ActiveBox.ActiveBox ActiveBox} will
-   * try to find a suitable style scanning down through its own BoxBase, their parent's and, finally,
-   * the default values defined in `BoxBase.prototype`.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#style
-   * @type {module:boxes/BoxBase.BoxBase} */
-  style: null,
-  /**
-   * Optimal dimension of any {@link module:boxes/ActiveBox.ActiveBox ActiveBox} taking this content.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#dimension
-   * @type {module:AWT.Dimension} */
-  dimension: null,
-  /**
-   * The {@link module:boxes/ActiveBox.ActiveBox ActiveBox} can have or not a border despite the settings of {@link module:boxes/BoxBase.BoxBase BoxBase}.
-   * The default value `null` means not to take in consideration this setting.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#border
-   * @type {boolean|null} */
-  border: null,
-  /**
-   * The text to display on the {@link module:boxes/ActiveBox.ActiveBox ActiveBox}. It can have up to two paragraphs.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#text
-   * @type {string} */
-  text: null,
-  /**
-   * The name of the image file to display on the {@link module:boxes/ActiveBox.ActiveBox ActiveBox}.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#image
-   * @type {string} */
-  image: null,
-  /**
-   * An optional shape used to clip the image.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#imgClip
-   * @type {module:AWT.Shape} */
-  imgClip: null,
-  /**
-   * The media content associated with this object.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#mediaContent
-   * @type {module:media/MediaContent.MediaContent} */
-  mediaContent: null,
-  /**
-   * @typedef ActiveBoxContent~alignType
-   * @type {object}
-   * @property {string} h - Valid values are: `left`, `middle`, `right`
-   * @property {string} v - Valud values are: `top`, `middle`, `bottom` */
-  /**
-   * The horizontal and vertical alignment of the image inside the cell.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#imgAlign
-   * @type {module:boxes/ActiveBoxContent.AlignType} */
-  imgAlign: null,
-  /**
-   * The horizontal and vertical alignment of the text inside the cell.
-   * Valid values are: `left`, `middle`, `right`, `top` and `bottom`.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#txtAlign
-   * @type {module:boxes/ActiveBoxContent.AlignType} */
-  txtAlign: null,
-  /**
-   * Whether to avoid overlapping of image and text inside the cell when both are present.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#avoidOverlapping
-   * @type {boolean} */
-  avoidOverlapping: false,
-  /**
-   * Numeric identifier used in activities to resolve relationships between cells
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#id
-   * @type {number} */
-  id: -1,
-  /**
-   * Numeric identifier used in activities to resolve relationships between cells
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#item
-   * @type {number} */
-  item: -1,
-  //
-  // Transient properties build and modified at run-time
-  /**
-   * The realized image used by this box content.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#img
-   * @type {external:HTMLImageElement} */
-  img: null,
-  /**
-   * When `img` is an animated GIF file, this field should contain its file name
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#animatedGifFile
-   * @type {string} */
-  animatedGifFile: null,
-  /**
-   * When not null, this content should be treated as an HTML element
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#innerHtmlText
-   * @type {string} */
-  innerHtmlText: null,
-  /**
-   * The {@link module:media/ActiveMediaPlayer.ActiveMediaPlayer ActiveMediaPlayer} associated with this content. Updated at run-time.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#amp
-   * @type {module:media/ActiveMediaPlayer.ActiveMediaPlayer} */
-  amp: null,
-  /**
-   * The {@link module:bads/MediaBagElement.MediaBagElement} associated with this content, if any. Updated at run-time.
-   * @name module:boxes/ActiveBoxContent.ActiveBoxContent#mbe
-   * @type {module:bags/MediaBagElement.MediaBagElement} */
-  mbe: null,
-});
-
-/**
- * An empty ActiveBoxContent
- * @type {module:boxes/ActiveBoxContent.ActiveBoxContent}
- */
-ActiveBoxContent.EMPTY_CONTENT = new ActiveBoxContent();
-
-export default ActiveBoxContent;

package/src/boxes/ActiveBoxGrid.js

@@ -1,179 +0,0 @@
-/**
- *  File    : boxes/ActiveBoxGrid.js
- *  Created : 19/05/2015
- *  By      : Francesc Busquets <francesc@gmail.com>
- *
- *  JClic.js
- *  An HTML5 player of JClic activities
- *  https://projectestac.github.io/jclic.js
- *
- *  @source https://github.com/projectestac/jclic.js
- *
- *  @license EUPL-1.2
- *  @licstart
- *  (c) 2000-2020 Catalan Educational Telematic Network (XTEC)
- *
- *  Licensed under the EUPL, Version 1.1 or -as soon they will be approved by
- *  the European Commission- subsequent versions of the EUPL (the "Licence");
- *  You may not use this work except in compliance with the Licence.
- *
- *  You may obtain a copy of the Licence at:
- *  https://joinup.ec.europa.eu/software/page/eupl
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the Licence is distributed on an "AS IS" basis, WITHOUT
- *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- *  Licence for the specific language governing permissions and limitations
- *  under the Licence.
- *  @licend
- *  @module
- */
-
-import ActiveBoxBag from './ActiveBoxBag.js';
-import ActiveBox from './ActiveBox.js';
-import { Rectangle, Dimension, Point } from '../AWT.js';
-import { settings, roundTo } from '../Utils.js';
-
-/**
- * This class extends {@link module:boxes/ActiveBoxbag.ActiveBoxBag ActiveBoxBag} with constructors that take an argument of type
- * {@link module:shapers/Shaper.Shaper Shaper} used to build all its {@link module:boxes/ActiveBox.ActiveBox ActiveBox}components. It also maintains information
- * about the number of "rows" and "columns", useful to compute valid (integer) values when
- * resizing or moving its components.
- * @extends module:boxes/ActiveBoxBag.ActiveBoxBag
- */
-export class ActiveBoxGrid extends ActiveBoxBag {
-  /**
-   * ActiveBxGrid constructor
-   * @param {module:boxes/AbstractBox.AbstractBox} parent - The AbstractBox to which this box grid belongs
-   * @param {module:AWT.Container} container - The container where this box grid is placed.
-   * @param {module:boxes/BoxBase} boxBase - The object where colors, fonts, border and other graphic properties
-   * @param {number} px - `X` coordinate of the upper left corner of this box grid
-   * @param {number} py - `Y` coordinate of the upper left corner of this box grid
-   * @param {number} setWidth - Total width of the box grid
-   * @param {number} setHeight - Total height of the box grid
-   * @param {module:shapers/Shaper.Shaper} sh - Shaper used to build the ActiveBox objects
-   */
-  constructor(parent, container, boxBase, px, py, setWidth, setHeight, sh) {
-    // ActiveBoxGrid derives from ActiveBoxBag
-    super(parent, container, boxBase);
-
-    this.nCols = sh.nCols;
-    this.nRows = sh.nRows;
-
-    // This will be the enclosing rectangle of this ActiveBox bag
-    const r = new Rectangle(
-      new Point(px, py),
-      new Dimension(
-        Math.round(setWidth / this.nCols) * this.nCols,
-        Math.round(setHeight / this.nRows) * this.nRows));
-
-    // Create all the [ActiveBox](ActiveBox.html) objects based on the
-    // shapes provided by the [Shaper](Shaper.html)
-    for (let i = 0; i < sh.nCells; i++) {
-      const
-        tmpSh = sh.getShape(i, r),
-        bx = new ActiveBox(this, container, boxBase, i, tmpSh.getBounds());
-      if (!sh.rectangularShapes)
-        bx.setShape(tmpSh);
-      this.addActiveBox(bx);
-    }
-
-    // If the Shaper has `remainder` (extra space), set the background box of this
-    // [BoxBag](BoxBag.html)
-    if (sh.hasRemainder) {
-      const
-        tmpSh = sh.getRemainderShape(r),
-        bx = new ActiveBox(this, container, boxBase, 0, tmpSh.getBounds());
-      bx.setShape(tmpSh);
-      this.setBackgroundBox(bx);
-    }
-  }
-
-  /**
-   * This factory constructor creates a new empty grid with the number of cells indicated by the
-   * {@link module:boxes/ActiveBagContent.ActiveBagContent ActiveBagContent} `abc`, not filling the cells with any content.
-   * @param {module:boxes/AbstractBox.AbstractBox} parent - The AbstractBox to which this box grid belongs
-   * @param {module:AWT.Container} container - The container where this box grid is placed.
-   * @param {number} px - `X` coordinate of the upper left corner of this box grid
-   * @param {number} py - `Y` coordinate of the upper left corner of this box grid
-   * @param {module:boxes/ActiveBagContent.ActiveBagContent} abc - Used only to get the number of cells and the shaper (when `sh` is `null`)
-   * @param {module:shapers/Shaper.Shaper} sh - Shaper used to build the ActiveBox objects
-   * @param {module:boxes/BoxBase.BoxBase} boxBase - The object where colors, fonts, border and other graphic properties
-   * of this box grid are defined.
-   * @returns {module:boxes/ActiveBoxGrid.ActiveBoxGrid}
-   */
-  static createEmptyGrid(parent, container, px, py, abc, sh, boxBase) {
-    const result = abc ? new ActiveBoxGrid(parent, container,
-      boxBase || abc.style,
-      px, py,
-      abc.getTotalWidth(), abc.getTotalHeight(),
-      sh || abc.getShaper()) : null;
-
-    if (result)
-      result.setBorder(abc.border);
-
-    return result;
-  }
-
-  /**
-   * Gets the minimum size of this grid
-   * @returns {module:AWT.Dimension}
-   */
-  getMinimumSize() {
-    return new Dimension(
-      settings.MIN_CELL_SIZE * this.nCols,
-      settings.MIN_CELL_SIZE * this.nRows);
-  }
-
-  /**
-   * Gets a scaled size of this grid, rounded to the nearest integer values
-   * @param {number} scale - The scale factor
-   * @returns {module:AWT.Dimension}
-   */
-  getScaledSize(scale) {
-    return new Dimension(
-      roundTo(scale * this.preferredBounds.dim.width, this.nCols),
-      roundTo(scale * this.preferredBounds.dim.height, this.nRows));
-  }
-
-  /**
-   * Returns the logical coordinates of the provided {@link module:boxes/ActiveBox.ActiveBox ActiveBox}.
-   * The units of the result are not pixels, but ordinal numbers (relative positions) of columns
-   * and rows in the grid.
-   * @param {module:boxes/ActiveBox.ActiveBox} bx - The box to process
-   * @returns {module:AWT.Point}
-   */
-  getCoord(bx) {
-    return new Point(bx.idLoc % this.nCols, Math.floor(bx.idLoc / this.nCols));
-  }
-
-  /**
-   * Calculates the logical distance between two {@link module:boxes/ActiveBox.ActiveBox ActiveBox} objects.
-   * Resulting units are not pixels, but ordinal numbers (relative positions) of columns and rows
-   * in the grid.
-   * @param {module:boxes/ActiveBox.ActiveBox} src - First box
-   * @param {module:boxes/ActiveBox.ActiveBox} dest - Second box
-   * @returns {module:AWT.Point}
-   */
-  getCoordDist(src, dest) {
-    const
-      ptSrc = this.getCoord(src),
-      ptDest = this.getCoord(dest);
-    return new Point(ptDest.x - ptSrc.x, ptDest.y - ptSrc.y);
-  }
-}
-
-Object.assign(ActiveBoxGrid.prototype, {
-  /**
-   * Number of columns of this box grid
-   * @name module:boxes/ActiveBoxGrid.ActiveBoxGrid#nCols
-   * @type {number} */
-  nCols: 1,
-  /**
-   * Number of rows of this box grid
-   * @name module:boxes/ActiveBoxGrid.ActiveBoxGrid#nRows
-   * @type {number} */
-  nRows: 1,
-});
-
-export default ActiveBoxGrid;