runtime/vdom/Element.ts

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you 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.
 */
/*
 * 2021.01.08 - Move element's method from operation.js to Element class.
 * Copyright (c) 2021 Huawei Device Co., Ltd.
 */

import { Log } from '../utils/index';
import Node from './Node';
import NativeElementClassFactory from './NativeElementClassFactory';
import Document from './Document';
import { TaskCenter } from '../main/manage/event/TaskCenter';
import { FragBlockInterface,
  TemplateInterface,
  compileCustomComponent,
  targetIsComposed
} from '../main/model/compiler';
import Vm from '../main/model';
import { CSS_INHERITANCE } from '../main/app/bundle';
import {interceptCallback} from '../main/manage/event/callbackIntercept';
import {mockWebgl} from '../main/extend/systemplugin/napi/webgl/webgl';
import {mockWebgl2} from '../main/extend/systemplugin/napi/webgl/webgl2';
import { VmOptions } from '../main/model/vmOptions';
/**
 * Element is a basic class to describe a tree node in vdom.
 * @extends Node
 */
class Element extends Node {
  private _style: any;
  private _classStyle: any;
  private _event: any;
  private _idStyle: any;
  private _tagStyle: any;
  private _attrStyle: any;
  private _tagAndTagStyle: any;
  private _firstOrLastChildStyle: any;
  private _universalStyle: any;
  private _id: string | null;
  private _classList: any[];
  private _block: FragBlockInterface;
  private _vm: Vm;
  private _isCustomComponent: boolean;
  private _inheritedStyle: object;
  private _target:TemplateInterface;
  private _hasBefore: boolean;
  private _hasAfter: boolean;
  private _isOpen: boolean;

  protected _children: Node[];
  protected _pureChildren: Element[];
  protected _role: string;
  protected _attr: any;
  protected _dataSet: any;
  protected _isFirstDyanmicName: boolean;

  constructor(type = 'div', props:any = {}, isExtended: boolean = false) {
    super();
    const NativeElementClass = NativeElementClassFactory.nativeElementClassMap.get(type);
    if (NativeElementClass && !isExtended) {
      if (global.pcPreview && type === 'canvas') {
        Object.defineProperty(NativeElementClass.prototype, 'getContext', {
          configurable: true,
          enumerable: true,
          get: function moduleGetter() {
            return (...args: any) => {
              const taskCenter = this.getTaskCenter(this.docId);
              if (taskCenter) {
                // support aceapp callback style
                args = interceptCallback(args);
                if (args[0] === 'webgl') {
                  return mockWebgl();
                } else if (args[0] === 'webgl2') {
                  return mockWebgl2();
                }
                const ret = taskCenter.send('component', {
                  ref: this.ref,
                  component: type,
                  method: 'getContext'
                }, args);
                return ret;
              }
            };
          }
        });
      }
      return new NativeElementClass(props);
    }

    this._nodeType = Node.NodeType.Element;
    this._type = type;
    this._attr = props.attr || {};
    this._style = props.style || {};
    this._classStyle = props.classStyle || {};
    this._event = {};
    this._idStyle = {};
    this._tagStyle = {};
    this._attrStyle = {};
    this._tagAndTagStyle = {};
    this._firstOrLastChildStyle = {};
    this._universalStyle = {};
    this._id = null;
    this._classList = [];
    this._children = [];
    this._pureChildren = [];
    this._isCustomComponent = false;
    this._inheritedStyle = {};
    this._dataSet = {};
    this._isFirstDyanmicName = true;
  }

  /**
   * inherit sytle from parent
   * @type {Object}
   */
  public set inheritedStyle(inheritedStyle: object) {
    this._inheritedStyle = inheritedStyle;
  }

  public get inheritedStyle() {
    return this._inheritedStyle;
  }

  /**
   * Children array except comment node.
   * @type {Node[]}
   */
  public set pureChildren(newPureChildren: Element[]) {
    this._pureChildren = newPureChildren;
  }

  public get pureChildren() {
    return this._pureChildren;
  }

  /**
   * event of element
   * @type {Node[]}
   */
  public get event() {
    return this._event;
  }

  /**
   * Children array.
   * @type {Node[]}
   */
  public set children(newChildren: Node[]) {
    this._children = newChildren;
  }

  public get children() {
    return this._children;
  }

  /**
   * View model of this Element.
   * @type {Vm}
   */
  public get vm() {
    return this._vm;
  }

  public set vm(newVm: Vm) {
    this._vm = newVm;
  }

  public get hasBefore() {
    return this._hasBefore;
  }

  public set hasBefore(hasBefore: boolean) {
    this._hasBefore = hasBefore;
  }

  public get hasAfter() {
    return this._hasAfter;
  }

  public set hasAfter(hasAfter: boolean) {
    this._hasAfter = hasAfter;
  }

  public get isOpen() {
    return this._isOpen;
  }

  public set isOpen(isOpen: boolean) {
    this._isOpen = isOpen;
  }

  /**
   * Class style object of this Element, which keys is style name, and values is style values.
   * @type {JSON}
   */
  public get classStyle() {
    return this._classStyle;
  }

  /**
   * Id style object of this Element, which keys is style name, and values is style values.
   * @type {JSON}
   */
  public get idStyle() {
    return this._idStyle;
  }

  /**
   * Block in this Element.
   * @type {FragBlock}
   */
  public get block() {
    return this._block;
  }

  public set block(newBlock: FragBlockInterface) {
    this._block = newBlock;
  }

  /**
   * Role of this element.
   * @type {string}
   */
  public set role(role: string) {
    this._role = role;
  }

  public get role() {
    return this._role;
  }

  /**
   * ID of this element.
   * @type {string}
   */
  public get id() {
    return this._id;
  }

  public set id(value) {
    this._id = value;
  }

  /**
   * Class list of this element.
   * @type {string[]}
   */
  public get classList() {
    return this._classList;
  }

  public set classList(value: string[]) {
    this._classList = value.slice(0);
  }

  /**
   * Attributes object of this Element.
   * @type {Object}
   */
  public set attr(attr: any) {
    this._attr = attr;
  }

  public get attr() {
    return this._attr;
  }

  /**
   * DataSet object of this Element.
   * @type {Object}
   */
  public set dataSet(dataSet: any) {
    this._dataSet = dataSet;
  }

  public get dataSet() {
    return this._dataSet;
  }

  /**
   * Flag of whether the element is the root of customeComponent.
   * @param {bollean}
   */
  public set isCustomComponent(isCustomComponent: boolean) {
    this._isCustomComponent = isCustomComponent;
  }

  public get isCustomComponent() {
    return this._isCustomComponent;
  }

  /**
   * Style object of this Element.
   * @type {Object}
   */
  public set style(style: any) {
    this._style = style;
  }

  public get style() {
    return this._style;
  }

  /**
     * target object of this Element.
     * @type {Object}
     */
  public set target(target: TemplateInterface) {
    this._target = target;
  }

  public get target() {
    return this._target;
  }

  /**
   * Get TaskCenter instance by id.
   * @param {string} id
   * @return {TaskCenter} TaskCenter
   */
  public getTaskCenter(id: string): TaskCenter | null {
    const doc: Document = this._ownerDocument;
    if (doc && doc.taskCenter) {
      return doc.taskCenter;
    }
    return null;
  }

  /**
   * Establish the connection between parent and child node.
   * @param {Node} child - Target node.
   */
  public linkChild(child: Node): void {
    child.parentNode = this;
    if (this._docId) {
      child.docId = this._docId;
      child.ownerDocument = this._ownerDocument;
      if (child.ownerDocument) {
        child.ownerDocument.nodeMap[child.nodeId] = child;
      }
      child.depth = this._depth + 1;
    }
    if (child.nodeType === Node.NodeType.Element) {
      const element = child as Element;
      element.children.forEach((grandChild: Node) => {
        element.linkChild(grandChild);
      });
    }
  }

  /**
   * Insert a node into list at the specified index.
   * @param {Node} target - Target node.
   * @param {number} newIndex - Target index.
   * @param {Object} [options] - options of insert method.
   * @param {boolean} [options.changeSibling=false] - If need to change sibling's index.
   * @param {boolean} [options.isInPureChildren=false] - If in pure children array or children array.
   * @return {number} New index of node.
   */
  public insertIndex(target: Node, newIndex: number, { changeSibling = false, isInPureChildren = false }): number {
    const list: Node[] = isInPureChildren ? this._pureChildren : this._children;
    if (newIndex < 0) {
      newIndex = 0;
    }
    const before: Node = list[newIndex - 1];
    const after: Node = list[newIndex];
    list.splice(newIndex, 0, target);
    if (changeSibling) {
      before && (before.nextSibling = target);
      target.previousSibling = before;
      target.nextSibling = after;
      after && (after.previousSibling = target);
    }
    return newIndex;
  }

  /**
   * Move the node to a new index in list.
   * @param {Node} target - Target node.
   * @param {number} newIndex - Target index.
   * @param {Object} [options] - options of insert method.
   * @param {boolean} [options.changeSibling=false] - If need to change sibling's index.
   * @param {boolean} [options.isInPureChildren=false] - If in pure children array or children array.
   * @return {number} New index of node.
   */
  public moveIndex(target: Node, newIndex: number, { changeSibling = false, isInPureChildren = false }): number {
    const list: Node[] = isInPureChildren ? this._pureChildren : this._children;
    const index: number = list.indexOf(target);
    if (index < 0) {
      return -1;
    }
    if (changeSibling) {
      const before: Node = list[index - 1];
      const after: Node = list[index + 1];
      before && (before.nextSibling = after);
      after && (after.previousSibling = before);
    }
    list.splice(index, 1);
    let newIndexAfter = newIndex;
    if (index <= newIndex) {
      newIndexAfter = newIndex - 1;
    }
    const beforeNew: Node = list[newIndexAfter - 1];
    const afterNew: Node = list[newIndexAfter];
    list.splice(newIndexAfter, 0, target);
    if (changeSibling) {
      if (beforeNew) {
        beforeNew.nextSibling = target;
      }
      target.previousSibling = beforeNew;
      target.nextSibling = afterNew;
      if (afterNew) {
        afterNew.previousSibling = target;
      }
    }
    if (index === newIndexAfter) {
      return -1;
    }
    return newIndex;
  }

  /**
   * Remove the node from list.
   * @param {Node} target - Target node.
   * @param {Object} [options] - options of insert method.
   * @param {boolean} [options.changeSibling=false] - If need to change sibling's index.
   * @param {boolean} [options.isInPureChildren=false] - If in pure children array or children array.
   */
  public removeIndex(target, { changeSibling = false, isInPureChildren = false}): void {
    const list: Node[] = isInPureChildren ? this._pureChildren : this._children;
    const index: number = list.indexOf(target);
    if (index < 0) {
      return;
    }
    if (changeSibling) {
      const before: Node = list[index - 1];
      const after: Node = list[index + 1];
      before && (before.nextSibling = after);
      after && (after.previousSibling = before);
    }
    list.splice(index, 1);
  }

  /**
   * Get the next sibling element.
   * @param {Node} node - Target node.
   * @return {Node} Next node of target node.
   */
  public nextElement(node: Node): Element {
    while (node) {
      if (node.nodeType === Node.NodeType.Element) {
        return node as Element;
      }
      node = node.nextSibling;
    }
  }

  /**
   * Get the previous sibling element.
   * @param {Node} node - Target node.
   * @return {Node} Previous node of target node.
   */
  public previousElement(node: Node): Element {
    while (node) {
      if (node.nodeType === Node.NodeType.Element) {
        return node as Element;
      }
      node = node.previousSibling;
    }
  }

  /**
   * Append a child node.
   * @param {Node} node - Target node.
   * @return {number} the signal sent by native
   */
  public appendChild(node: Node): void {
    if (node.parentNode && node.parentNode !== this) {
      return;
    }

    if (!node.parentNode) {
      this.linkChild(node as Element);
      this.insertIndex(node, this.children.length, { changeSibling: true });
      if (this.docId) {
        this.registerNode(node);
      }
      if (node.nodeType === Node.NodeType.Element) {
        const element = node as Element;
        this.insertIndex(element, this.pureChildren.length, { isInPureChildren: true });
        this.inheritStyle(node, true);
        const taskCenter = this.getTaskCenter(this.docId);
        if (taskCenter) {
          return taskCenter.send(
            'dom',
            { action: 'addElement' },
            [this.ref, element.toJSON(), -1]
          );
        }
      }
    } else {
      this.moveIndex(node, this.children.length, { changeSibling: true });
      if (node.nodeType === Node.NodeType.Element) {
        this.moveIndex(node, this.pureChildren.length, { isInPureChildren: true });
      }
    }
  }

  /**
   * Insert a node before specified node.
   * @param {Node} node - Target node.
   * @param {Node} before - The node next to the target position.
   * @return {number} the signal sent by native
   */
  public insertBefore(node: Node, before: Node): void {
    if (node.parentNode && node.parentNode !== this) {
      return;
    }
    if (node === before || node.nextSibling && node.nextSibling === before) {
      return;
    }
    // If before is not exist, return.
    if (this.children.indexOf(before) < 0) {
      return;
    }
    if (!node.parentNode) {
      this.linkChild(node as Element);
      this.insertIndex(node, this.children.indexOf(before), { changeSibling: true });
      if (this.docId) {
        this.registerNode(node);
      }
      if (node.nodeType === Node.NodeType.Element) {
        const element = node as Element;
        const pureBefore = this.nextElement(before);
        const index = this.insertIndex(
          element,
          pureBefore
            ? this.pureChildren.indexOf(pureBefore)
            : this.pureChildren.length,
          { isInPureChildren: true }
        );
        this.inheritStyle(node);
        const taskCenter = this.getTaskCenter(this.docId);
        if (taskCenter) {
          return taskCenter.send(
            'dom',
            { action: 'addElement' },
            [this.ref, element.toJSON(), index]
          );
        }
      }
    } else {
      this.moveIndex(node, this.children.indexOf(before), { changeSibling: true });
      if (node.nodeType === Node.NodeType.Element) {
        const pureBefore = this.nextElement(before);
        this.moveIndex(
          node,
          pureBefore
            ? this.pureChildren.indexOf(pureBefore)
            : this.pureChildren.length,
          { isInPureChildren: true}
        );
      }
    }
  }

  /**
   * Insert a node after specified node.
   * @param {Node} node - Target node.
   * @param {Node} after - The node in front of the target position.
   * @return {number} the signal sent by native
   */
  public insertAfter(node: Node, after: Node) {
    if (node.parentNode && node.parentNode !== this) {
      return;
    }
    if (node === after || node.previousSibling && node.previousSibling === after) {
      return;
    }
    if (!node.parentNode) {
      this.linkChild(node as Element);
      this.insertIndex(node, this.children.indexOf(after) + 1, { changeSibling: true });

      if (this.docId) {
        this.registerNode(node);
      }
      if (node.nodeType === Node.NodeType.Element) {
        const element = node as Element;
        const index = this.insertIndex(
          element,
          this.pureChildren.indexOf(this.previousElement(after)) + 1,
          { isInPureChildren: true }
        );
        this.inheritStyle(node);
        const taskCenter = this.getTaskCenter(this.docId);
        if (taskCenter) {
          return taskCenter.send(
            'dom',
            { action: 'addElement' },
            [this.ref, element.toJSON(), index]
          );
        }
      }
    } else {
      this.moveIndex(node, this.children.indexOf(after) + 1, { changeSibling: true});
      if (node.nodeType === Node.NodeType.Element) {
        this.moveIndex(
          node,
          this.pureChildren.indexOf(this.previousElement(after)) + 1,
          { isInPureChildren: true }
        );
      }
    }
  }

  /**
   * Remove a child node, and decide whether it should be destroyed.
   * @param {Node} node - Target node.
   * @param {boolean} [preserved=false] - If need to keep the target node.
   */
  public removeChild(node: Node, preserved: boolean = false): void {
    if (node.parentNode) {
      this.removeIndex(node, { changeSibling: true });
      if (node.nodeType === Node.NodeType.Element) {
        this.removeIndex(node, { isInPureChildren: true});
        const taskCenter = this.getTaskCenter(this.docId);
        if (taskCenter) {
          taskCenter.send(
            'dom',
            { action: 'removeElement' },
            [node.ref]
          );
        }
      }
    }
    if (!preserved) {
      node.destroy();
    }
  }

  /**
   * Clear all child nodes.
   */
  public clear(): void {
    const taskCenter: TaskCenter = this.getTaskCenter(this._docId);
    if (taskCenter) {
      this._pureChildren.forEach(child => {
        taskCenter.send('dom', { action: 'removeElement' }, [child.ref]);
      });
    }
    this._children.forEach(node => {
      node.destroy();
    });
    this._children.length = 0;
    this._pureChildren.length = 0;
  }

  /**
   * Set dataSet for an element.
   * @param {string} key - dataSet name.
   * @param {string} value - dataSet value.
   */
  public setData(key: string, value: string): void {
    this.dataSet[key] = value;
  }

  /**
   * Set an attribute, and decide whether the task should be send to native.
   * @param {string} key - Arribute name.
   * @param {string | number} value - Arribute value.
   * @param {boolean} [silent=false] - If use silent mode.
   */
  public setAttr(key: string, value: string | number, silent: boolean = false): void {
    if (this.attr[key] === value && silent !== false) {
      return;
    }
    this.attr[key] = value;
    const taskCenter = this.getTaskCenter(this.docId);
    if (!silent && taskCenter) {
      const result = {};
      result[key] = value;
      taskCenter.send('dom', { action: 'updateAttrs' }, [this.ref, result]);
    }

    if (this._type === 'compontent' && key === 'name') {
      if (this._isFirstDyanmicName === true) {
        Log.info('compontent first setAttr name = ' + value);
        this._isFirstDyanmicName = false;
      } else {
        Log.info('compontent second setAttr name,' + value);
        if (taskCenter) {
          const node = this._nextSibling;
          taskCenter.send('dom', { action: 'removeElement' }, [node.ref]);
        }
        const parentNode = this._parentNode as Element;
        const component: VmOptions | null = targetIsComposed(this._vm, value.toString());
        const meta = {};
        if (component) {
          compileCustomComponent(this._vm, component, this._target, parentNode, value.toString(), meta);
          return;
        }
      }
    }
  }

  /**
   * Set a style property, and decide whether the task should be send to native.
   * @param {string} key - Style name.
   * @param {string | number} value - Style value.
   * @param {boolean} [silent=false] - If use silent mode.
   */
  public setStyle(key: string, value: string | number, silent: boolean = false): void {
    if (this.style[key] === value && silent !== false) {
      return;
    }
    this.style[key] = value;
    const taskCenter = this.getTaskCenter(this.docId);
    if (!silent && taskCenter) {
      const result = {};
      result[key] = value;
      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, this.toStyle()]);
      if (CSS_INHERITANCE.includes(key)) {
        this.broadcastStyle();
      }
    }
  }

  /**
   * Set style properties from class.
   * @param {object} classStyle - Style properties.
   */
  public setClassStyle(classStyle: any): void {
    let canUpdate: boolean = false;
    const taskCenter = this.getTaskCenter(this.docId);
    Object.keys(classStyle).forEach(key => {
      if (CSS_INHERITANCE.includes(key) && taskCenter) {
        if (!this.isSameStyle(this.classStyle[key], classStyle[key], key)) {
          canUpdate = true;
        }
      }
    });
    for (const key in this._classStyle) {
      this._classStyle[key] = '';
    }

    Object.assign(this._classStyle, classStyle);
    if (taskCenter) {
      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, this.toStyle()]);
      if (canUpdate) {
        this.broadcastStyle();
      }
    }
  }

  /**
   * Set style properties from class.
   * @param {object} classStyle - Style properties.
   */
  public setCustomFlag(): void {
    this._isCustomComponent = true;
  }

  /**
   * Set IdStyle properties from class.
   * @param {string} key - Style name.
   * @param {string|number} value - Style value.
   * @param {boolean} [silent=false] - If use silent mode.
   */
  public setIdStyle(key: string, value: string | number, silent: boolean = false): void {
    if (this._idStyle[key] === value && silent !== false) {
      return;
    }
    // if inline style has define return
    if (this.style[key]) {
      return;
    }
    this._idStyle[key] = value;
    const taskCenter = this.getTaskCenter(this.docId);
    if (!silent && taskCenter) {
      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, this._idStyle]);
      if (CSS_INHERITANCE.includes(key)) {
        this.broadcastStyle();
      }
    }
  }

  /**
   * Set TagStyle properties from class.
   * @param {string} key - Style name.
   * @param {string|number} value - Style value.
   * @param {boolean} [silent=false] - If use silent mode.
   */
  public setTagStyle(key: string, value: string | number, silent: boolean = false): void {
    if (this._tagStyle[key] === value && silent !== false) {
      return;
    }
    // If inline id class style has define return.
    if (this.style[key] || this._idStyle[key] || this._attrStyle[key] || this._classStyle[key] || this._firstOrLastChildStyle[key] || this._tagAndTagStyle[key]) {
      return;
    }
    this._tagStyle[key] = value;
    const taskCenter = this.getTaskCenter(this.docId);
    if (!silent && taskCenter) {
      const result = {};
      result[key] = value;
      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, result]);
    }
  }

  public setAttrStyle(key: string, value: string | number, silent: boolean = false): void {
    if (this._attrStyle[key] === value && silent !== false) {
      return;
    }
    // If inline id style define return.
    if (this.style[key] || this._idStyle[key]) {
      return;
    }
    this._attrStyle[key] = value;
    const taskCenter = this.getTaskCenter(this.docId);
    if (!silent && taskCenter) {
      const result = {};
      result[key] = value;
      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, result]);
    }
  }

  public setTagAndTagStyle(key: string, value: string | number, silent: boolean = false): void {
    if (this._tagAndTagStyle[key] === value && silent !== false) {
      return;
    }
    // If inline id class style has define return.
    if (this.style[key] || this._idStyle[key] || this._attrStyle[key] || this._classStyle[key] || this._firstOrLastChildStyle[key]) {
      return;
    }
    this._tagAndTagStyle[key] = value;
    const taskCenter = this.getTaskCenter(this.docId);
    if (!silent && taskCenter) {
      const result = {};
      result[key] = value;
      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, result]);
    }
  }

  public setFirstOrLastChildStyle(key: string, value: string | number, silent: boolean = false): void {
    if (this._firstOrLastChildStyle[key] === value && silent !== false) {
      return;
    }
    // If inline id class style has define return.
    if (this.style[key] || this._idStyle[key] || this._attrStyle[key]) {
      return;
    }
    this._firstOrLastChildStyle[key] = value;
    const taskCenter = this.getTaskCenter(this.docId);
    if (!silent && taskCenter) {
      const result = {};
      result[key] = value;
      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, result]);
    }
  }

  public setUniversalStyle(key: string, value: string | number, silent: boolean = false): void {
    if (this._universalStyle[key] === value && silent !== false) {
      return;
    }
    // If inline id class style has define return.
    if (this.style[key] || this._idStyle[key] || this._classStyle[key] || this._tagStyle[key] || this._tagAndTagStyle[key]) {
      return;
    }
    this._universalStyle[key] = value;
    const taskCenter = this.getTaskCenter(this.docId);
    if (!silent && taskCenter) {
      const result = {};
      result[key] = value;
      taskCenter.send('dom', { action: 'updateStyle' }, [this.ref, result]);
    }
  }

  /**
   * Add an event handler.
   * @param {string} type - Event name.
   * @param {Function} handler - Event handler.
   * @param {Object} [params] - Event parameters.
   */
  public addEvent(type: string, handler?: Function, params?: any): void {
    if (!this._event) {
      this._event = {};
    }
    if (!this._event[type]) {
      this._event[type] = { handler, params };
    }
  }

  /**
   * Remove an event handler.
   * @param {string} type - Event name
   */
  public removeEvent(type: string): void {
    if (this._event && this._event[type]) {
      delete this._event[type];
    }
  }

  /**
   * Fire an event manually.
   * @param {string} type - Event name.
   * @param {function} event - Event handler.
   * @param {boolean} isBubble - Whether or not event bubble
   * @param {boolean} [options] - Event options
   * @return {*} anything returned by handler function.
   */
  public fireEvent(type: string, event: any, isBubble?: boolean, options?: any) {
    Log.debug(`Element#fireEvent, type = ${type}, event = ${event}, isBubble = ${isBubble}, options = ${options}.`);
    const BUBBLE_EVENTS = [
      'mouse', 'click', 'longpress', 'touchstart',
      'touchmove', 'touchend', 'panstart', 'panmove',
      'panend', 'horizontalpan', 'verticalpan', 'swipe'
    ];
    let result = null;
    let isStopPropagation = false;
    const eventDesc = this._event[type];
    if (eventDesc && event) {
      const handler = eventDesc.handler;
      event.stopPropagation = () => {
        isStopPropagation = true;
      };
      if (options && options.params) {
        result = handler.call(this, event, ...options.params);
      } else {
        result = handler.call(this, event);
      }
    }

    if (!isStopPropagation && isBubble && BUBBLE_EVENTS.indexOf(type) !== -1) {
      if (this._parentNode) {
        const parentNode = this._parentNode as Element;
        event.currentTarget = parentNode;
        parentNode.fireEvent(type, event, isBubble); // no options
      }
    }

    return result;
  }

  /**
   * Get all styles of current element.
   * @return {object} style
   */
  public toStyle(): any {
    // Selector Specificity  inline > #id > .class > tag > inheritance.
    const style = Object.assign({}, this._inheritedStyle);
    this.assignStyle(style, this._universalStyle);
    this.assignStyle(style, this._tagStyle);
    this.assignStyle(style, this._tagAndTagStyle);
    this.assignStyle(style, this._classStyle);
    this.assignStyle(style, this._attrStyle);
    this.assignStyle(style, this._firstOrLastChildStyle);
    this.assignStyle(style, this._idStyle);
    this.assignStyle(style, this.style);
    return style;
  }

  /**
   * Assign style.
   * @param {*} src - Source style object.
   * @param {*} dest - Target style object.
   */
  public assignStyle(src: any, dest: any): void {
    if (dest) {
      const keys = Object.keys(dest);

      // Margin and padding style: the style should be empty in the first.
      keys.sort(function(style1, style2) {
        if (dest[style1] === '') {
          return 1;
        } else {
          return -1;
        }
      });
      let i = keys.length;
      while (i--) {
        const key = keys[i];
        const val = dest[key];
        if (val) {
          src[key] = val;
        } else {
          if ((val === '' || val === undefined) && src[key]) {
            return;
          }
          src[key] = val;
        }
      }
    }
  }

  /**
   * Convert current element to JSON like object.
   * @param {boolean} [ignoreChildren=false] - whether to ignore child nodes, default false
   * @return {JSON} JSON object of this element.
   */
  public toJSON(ignoreChildren = false): JSON {
    const result: any = {
      ref: this.ref,
      type: this._type,
      attr: this.attr,
      style: this.toStyle(),
      customComponent: this._isCustomComponent
    };
    const event = [];
    for (const type in this._event) {
      const { params } = this._event[type];
      if (!params) {
        event.push(type);
      } else {
        event.push({ type, params });
      }
    }
    if (event.length) {
      result.event = event;
    }
    if (!ignoreChildren && this._pureChildren.length) {
      result.children = this._pureChildren.map(child => child.toJSON());
    }
    if (this._id) {
      result.id = this._id;
    }
    return result;
  }

  /**
   * Convert to HML element tag string.
   * @override
   * @return {string} hml of this element.
   */
  public toString(): string {
    const id = this._id !== null ? this._id : '';
    return '<' + this._type +
        ' id =' + id +
        ' attr=' + JSON.stringify(this.attr) +
        ' style=' + JSON.stringify(this.toStyle()) + '>' +
        this.pureChildren.map((child) => child.toString()).join('') +
        '</' + this._type + '>';
  }

  /**
   * Destroy this element
   */
  public destroy() {
    Log.debug(`Element#destroy this._type = ${this._type}.`);
    if (this._event && this._event['detached']) {
      this.fireEvent('detached', {});
    }
    this._attr = {};
    this._style = {};
    this._classStyle = {};
    this._event = {};
    this._idStyle = {};
    this._tagStyle = {};
    this._attrStyle = {};
    this._tagAndTagStyle = {};
    this._firstOrLastChildStyle = {};
    this._universalStyle = {};
    this._classList.length = 0;

    if (this.destroyHook) {
      this.destroyHook();
      this.destroyHook = null;
    }
    if (this._children) {
      this._children.forEach((child: Node): void => {
        child.destroy();
      });
      this._children.length = 0;
    }
    if (this._pureChildren) {
      this._pureChildren.length = 0;
    }
    super.destroy();
  }

  /**
   * the judgement of whether the inherited style should update
   * @param {string | Array} oldClassStyle
   * @param {string | Array} newClassStyle
   * @param {string} key
   * @returns {boolean}
   */
  isSameStyle(oldClassStyle: string | any[], newClassStyle: string | any[], key: string) {
    if (key === 'fontFamily') {
      if (oldClassStyle[0].fontFamily === newClassStyle[0].fontFamily) {
        return true;
      }
    } else {
      if (oldClassStyle === newClassStyle) {
        return true;
      }
    }
    return false;
  }

  /**
   * iterate child node for updating inheritedstyle
   */
  broadcastStyle() {
    if (this.pureChildren) {
      for (const child in this.pureChildren) {
        this.pureChildren[child].setInheritedStyle();
        this.pureChildren[child].broadcastStyle();
      }
    }
  }

  /**
   * before update inherited style
   * clear up the inherited style
   */
  resetInheritedStyle() {
    this.inheritedStyle = {};
  }

  /**
   * inherited style from parent
   */
  public setInheritedStyle() {
    this.resetInheritedStyle();
    const parentNode: Element = this.parentNode as Element;
    parentNode.inheritStyle(this);
    const taskCenter = this.getTaskCenter(this.docId);
    if (taskCenter) {
      taskCenter.send(
        'dom',
        { action: 'updateStyle' },
        [this.ref, this.toStyle()]
      );
    }
  }

  /**
   * inherit style of parent.
   * @return {object} element
   */
  public inheritStyle(node, isFirst = false) {
    // for first render, save time
    const allStyle = this.toStyle();
    this.setChildStyle(allStyle, node._inheritedStyle);
  }

  /**
   * set inherited style to child
   * @param {object} parentStyle
   * @param {object} childStyle
   * @param {object} node
   */
  public setChildStyle(parentStyle, childStyle) {
    Object.keys(parentStyle).forEach(key => {
      if (CSS_INHERITANCE.includes(key)) {
        childStyle[key] = parentStyle[key];
      }
    });
  }

  private registerNode(node) {
    const doc = this._ownerDocument;
    if (doc) {
      doc.nodeMap[node.nodeId] = node;
    }
  }
}

export default Element;