@antv/g/es/dom/Element.js

import { __extends, __read, __spreadArray } from "tslib";
import { GlobalContainer } from 'mana-syringe';
import { SceneGraphService } from '../services/SceneGraphService';
import { Cullable, Geometry, Renderable, Transform, Sortable } from '../components';
import { Node } from './Node';
import { ElementEvent } from './interfaces';
import { formatAttribute, isNil } from '../utils';
import { MutationEvent } from './MutationEvent';
var entityCounter = 0;
/**
 * Has following capabilities:
 * * Node insert/remove, eg. appendChild, removeChild, remove...
 * * Query eg. querySelector getElementById...
 * * Animation
 */

var Element =
/** @class */
function (_super) {
  __extends(Element, _super);

  function Element() {
    var _this = _super !== null && _super.apply(this, arguments) || this;

    _this.sceneGraphService = GlobalContainer.get(SceneGraphService);
    _this.entity = entityCounter++;
    _this.renderable = new Renderable();
    _this.cullable = new Cullable();
    _this.transformable = new Transform();
    _this.sortable = new Sortable();
    _this.geometry = new Geometry();
    /**
     * https://developer.mozilla.org/zh-CN/docs/Web/API/Element/namespaceURI
     */

    _this.namespaceURI = 'g';
    _this.scrollLeft = 0;
    _this.scrollTop = 0;
    /**
     * We don't support border now
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop
     */

    _this.clientTop = 0;
    _this.clientLeft = 0;
    /**
     * is destroyed or not
     */

    _this.destroyed = false;
    /**
     * compatible with `style`
     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
     */

    _this.style = {};
    _this.computedStyle = {};
    _this.parsedStyle = {};
    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes
     */

    _this.attributes = {};
    return _this;
  }

  Element.isElement = function (target) {
    return !!target.getAttribute;
  };

  Object.defineProperty(Element.prototype, "className", {
    /**
     * used in `getElementsByClassName`
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
     */
    get: function get() {
      return this.getAttribute('class') || '';
    },
    set: function set(className) {
      this.setAttribute('class', className);
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "classList", {
    /**
     * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
     */
    get: function get() {
      return this.className.split(' ').filter(function (c) {
        return c !== '';
      });
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "tagName", {
    get: function get() {
      return this.nodeName;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "children", {
    get: function get() {
      return this.childNodes;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "childElementCount", {
    get: function get() {
      return this.childNodes.length;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "firstElementChild", {
    get: function get() {
      return this.firstChild;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "lastElementChild", {
    get: function get() {
      return this.lastChild;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "parentElement", {
    get: function get() {
      return this.parentNode;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "nextSibling", {
    get: function get() {
      if (this.parentNode) {
        var index = this.parentNode.childNodes.indexOf(this);
        return this.parentNode.childNodes[index + 1] || null;
      }

      return null;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Element.prototype, "previousSibling", {
    get: function get() {
      if (this.parentNode) {
        var index = this.parentNode.childNodes.indexOf(this);
        return this.parentNode.childNodes[index - 1] || null;
      }

      return null;
    },
    enumerable: false,
    configurable: true
  }); // eslint-disable-next-line @typescript-eslint/no-unused-vars

  Element.prototype.cloneNode = function (deep) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.appendChild = function (child, index) {
    this.sceneGraphService.attach(child, this, index);
    this.emit(ElementEvent.CHILD_INSERTED, {
      child: child
    }); // child.emit(ElementEvent.INSERTED, {
    //   parent: this,
    //   index,
    // });

    child.dispatchEvent(new MutationEvent(ElementEvent.INSERTED, this, '', '', '', 0, '', ''));
    return child;
  };

  Element.prototype.insertBefore = function (newChild, refChild) {
    if (!refChild) {
      this.appendChild(newChild);
    } else {
      var index = this.childNodes.indexOf(refChild);
      this.appendChild(newChild, index - 1);
    }

    return newChild;
  };

  Element.prototype.replaceChild = function (newChild, oldChild, destroy) {
    var index = this.childNodes.indexOf(oldChild);
    this.removeChild(oldChild, destroy);
    this.appendChild(newChild, index);
    return oldChild;
  };

  Element.prototype.removeChild = function (child, destroy) {
    // should emit on itself before detach
    // child.emit(ElementEvent.REMOVED, {
    //   parent: this,
    // });
    if (destroy === void 0) {
      destroy = true;
    }

    child.dispatchEvent(new MutationEvent(ElementEvent.REMOVED, this, '', '', '', 0, '', '')); // emit destroy event

    if (destroy) {
      child.emit(ElementEvent.DESTROY, {});
      child.destroyed = true;
    } // emit on parent


    this.emit(ElementEvent.CHILD_REMOVED, {
      child: child
    }); // remove from scene graph

    this.sceneGraphService.detach(child); // cannot emit Destroy event now

    if (destroy) {
      // this.removeChildren();
      // remove event listeners
      child.emitter.removeAllListeners();
    }

    return child;
  };

  Element.prototype.removeChildren = function (destroy) {
    var _this = this;

    if (destroy === void 0) {
      destroy = true;
    }

    this.childNodes.slice().forEach(function (child) {
      _this.removeChild(child, destroy);
    });
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
   */


  Element.prototype.matches = function (selector) {
    return this.sceneGraphService.matches(selector, this);
  };

  Element.prototype.getElementById = function (id) {
    return this.sceneGraphService.querySelector("#".concat(id), this);
  };

  Element.prototype.getElementsByName = function (name) {
    return this.sceneGraphService.querySelectorAll("[name=\"".concat(name, "\"]"), this);
  };

  Element.prototype.getElementsByClassName = function (className) {
    return this.sceneGraphService.querySelectorAll(".".concat(className), this);
  };

  Element.prototype.getElementsByTagName = function (tagName) {
    return this.sceneGraphService.querySelectorAll(tagName, this);
  };

  Element.prototype.querySelector = function (selectors) {
    return this.sceneGraphService.querySelector(selectors, this);
  };

  Element.prototype.querySelectorAll = function (selectors) {
    return this.sceneGraphService.querySelectorAll(selectors, this);
  };
  /**
   * search in scene group, but should not include itself
   */


  Element.prototype.find = function (filter) {
    var _this = this;

    var target = null;
    this.forEach(function (object) {
      if (object !== _this && filter(object)) {
        target = object;
        return true;
      }

      return false;
    });
    return target;
  };

  Element.prototype.findAll = function (filter) {
    var _this = this;

    var objects = [];
    this.forEach(function (object) {
      if (object !== _this && filter(object)) {
        objects.push(object);
      }
    });
    return objects;
  };
  /**
   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/after
   */


  Element.prototype.after = function () {
    var _this = this;

    var nodes = [];

    for (var _i = 0; _i < arguments.length; _i++) {
      nodes[_i] = arguments[_i];
    }

    if (this.parentNode) {
      var index_1 = this.parentNode.childNodes.indexOf(this);
      nodes.forEach(function (node, i) {
        var _a;

        return (_a = _this.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(node, index_1 + i + 1);
      });
    }
  };
  /**
   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/before
   */


  Element.prototype.before = function () {
    var _a;

    var nodes = [];

    for (var _i = 0; _i < arguments.length; _i++) {
      nodes[_i] = arguments[_i];
    }

    if (this.parentNode) {
      var index = this.parentNode.childNodes.indexOf(this);

      var _b = __read(nodes),
          first = _b[0],
          rest = _b.slice(1);

      this.parentNode.appendChild(first, index);

      (_a = first).after.apply(_a, __spreadArray([], __read(rest), false));
    }
  };
  /**
   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/replaceWith
   */


  Element.prototype.replaceWith = function () {
    var nodes = [];

    for (var _i = 0; _i < arguments.length; _i++) {
      nodes[_i] = arguments[_i];
    }

    this.after.apply(this, __spreadArray([], __read(nodes), false));
    this.remove();
  };
  /**
   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/append
   */


  Element.prototype.append = function () {
    var _this = this;

    var nodes = [];

    for (var _i = 0; _i < arguments.length; _i++) {
      nodes[_i] = arguments[_i];
    }

    nodes.forEach(function (node) {
      return _this.appendChild(node);
    });
  };
  /**
   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/prepend
   */


  Element.prototype.prepend = function () {
    var _this = this;

    var nodes = [];

    for (var _i = 0; _i < arguments.length; _i++) {
      nodes[_i] = arguments[_i];
    }

    nodes.forEach(function (node, i) {
      return _this.appendChild(node, i);
    });
  };
  /**
   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/replaceChildren
   */


  Element.prototype.replaceChildren = function () {
    var nodes = [];

    for (var _i = 0; _i < arguments.length; _i++) {
      nodes[_i] = arguments[_i];
    }

    while (this.childNodes.length && this.firstChild) {
      this.removeChild(this.firstChild);
    }

    this.append.apply(this, __spreadArray([], __read(nodes), false));
  };
  /**
   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/remove
   */


  Element.prototype.remove = function (destroy) {
    if (destroy === void 0) {
      destroy = true;
    }

    if (this.parentNode) {
      return this.parentNode.removeChild(this, destroy);
    }

    return this;
  };

  Element.prototype.destroy = function () {
    // destroy itself before remove
    this.emit(ElementEvent.DESTROY, {}); // remove from scenegraph first

    this.remove(false); // remove event listeners

    this.emitter.removeAllListeners();
    this.destroyed = true;
  };

  Element.prototype.getGeometryBounds = function () {
    return this.sceneGraphService.getGeometryBounds(this);
  };

  Element.prototype.getRenderBounds = function () {
    return this.sceneGraphService.getBounds(this, true);
  };
  /**
   * get bounds in world space, account for children
   */


  Element.prototype.getBounds = function () {
    return this.sceneGraphService.getBounds(this);
  };
  /**
   * get bounds in local space, account for children
   */


  Element.prototype.getLocalBounds = function () {
    return this.sceneGraphService.getLocalBounds(this);
  };
  /**
   * account for context's bounds in client space,
   * but not accounting for children
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
   */


  Element.prototype.getBoundingClientRect = function () {
    return this.sceneGraphService.getBoundingClientRect(this);
  };
  /**
   * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getClientRects
   */


  Element.prototype.getClientRects = function () {
    return [this.getBoundingClientRect()];
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap
   * eg. circle.computedStyleMap().get('fill');
   */


  Element.prototype.computedStyleMap = function () {
    return new Map(Object.entries(this.computedStyle));
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttributeNames
   */


  Element.prototype.getAttributeNames = function () {
    return Object.keys(this.attributes);
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute
   */


  Element.prototype.getAttribute = function (name) {
    var _a = __read(formatAttribute(name.toString(), ''), 1),
        attributeName = _a[0];

    var value = this.attributes[attributeName]; // if the given attribute does not exist, the value returned will either be null or ""

    return isNil(value) ? null : value;
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute
   */


  Element.prototype.hasAttribute = function (qualifiedName) {
    return this.getAttributeNames().includes(qualifiedName);
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttributes
   */


  Element.prototype.hasAttributes = function () {
    return !!this.getAttributeNames().length;
  };
  /**
   * should use removeAttribute() instead of setting the attribute value to null either directly or using setAttribute(). Many attributes will not behave as expected if you set them to null.
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
   */


  Element.prototype.removeAttribute = function (attributeName) {
    this.setAttribute(attributeName, null);
    delete this.attributes[attributeName];
  };
  /**
   * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
   */


  Element.prototype.setAttribute = function (attributeName, value, // eslint-disable-next-line @typescript-eslint/no-unused-vars
  force) {
    if (force === void 0) {
      force = false;
    }

    this.attributes[attributeName] = value;
  };

  Element.prototype.getAttributeNS = function (namespace, localName) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.getAttributeNode = function (qualifiedName) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.getAttributeNodeNS = function (namespace, localName) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.hasAttributeNS = function (namespace, localName) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.removeAttributeNS = function (namespace, localName) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.removeAttributeNode = function (attr) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.setAttributeNS = function (namespace, qualifiedName, value) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.setAttributeNode = function (attr) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.setAttributeNodeNS = function (attr) {
    throw new Error('Method not implemented.');
  };

  Element.prototype.toggleAttribute = function (qualifiedName, force) {
    throw new Error('Method not implemented.');
  };

  return Element;
}(Node);

export { Element };