@antv/f6-ui/es/ui-node/base.js

UI system for @antv/f6

import { __assign, __spreadArray } from "tslib";
import { isSelectorMatchDom, reflowAttrs } from '../utils/index';
import { computeLayout } from '../utils/ui';

var UIBaseNode =
/** @class */
function () {
  function UIBaseNode(styleNode) {
    var _this = this;

    this.styleNode = null;
    this.gNode = null;
    this.parent = null;
    this.children = [];
    this.isMounted = false;
    this.isDisplay = true;
    this._parentGNode = null;
    this._prevAttrs = null;
    this._prevStyle = null;
    this._prevLayout = null;
    this.events = {};

    this.trigger = function (e) {
      var _a, _b;

      var shape = e.target;

      while (shape && !shape.get('uiNode')) {
        shape = shape.get('parent');
      }

      e.targetGNode = shape || null;
      e.uiNode = (_a = shape === null || shape === void 0 ? void 0 : shape.get('uiNode')) !== null && _a !== void 0 ? _a : null;
      (_b = _this.events[e.type]) === null || _b === void 0 ? void 0 : _b.forEach(function (fn) {
        return fn(e, _this);
      });
    };

    this.styleNode = styleNode;
  }

  Object.defineProperty(UIBaseNode.prototype, "top", {
    get: function get() {
      var _a, _b;

      return (_b = (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.top;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(UIBaseNode.prototype, "left", {
    get: function get() {
      var _a, _b;

      return (_b = (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.left;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(UIBaseNode.prototype, "width", {
    get: function get() {
      var _a, _b;

      return (_b = (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.width;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(UIBaseNode.prototype, "height", {
    get: function get() {
      var _a, _b;

      return (_b = (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.height;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(UIBaseNode.prototype, "tagName", {
    get: function get() {
      var _a, _b;

      return (_b = (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.tagName;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(UIBaseNode.prototype, "style", {
    get: function get() {
      var _a;

      return (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.style;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(UIBaseNode.prototype, "attributes", {
    get: function get() {
      var _a, _b;

      return (_b = (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.attrs;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(UIBaseNode.prototype, "_layout", {
    get: function get() {
      var _a;

      return (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a._layout;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(UIBaseNode.prototype, "parentGNode", {
    get: function get() {
      var _a;

      return ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.gNode) || this._parentGNode;
    },
    set: function set(gNode) {
      this._parentGNode = gNode;
    },
    enumerable: false,
    configurable: true
  });

  UIBaseNode.prototype.setParent = function (parent) {
    this.parent = parent;
  };

  UIBaseNode.prototype.appendChild = function () {
    var _this = this;

    var list = [];

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

    list.forEach(function (child) {
      child.setParent(_this);

      _this.children.push(child);

      child.styleNode && _this.styleNode && !_this.styleNode.originChildren.includes(child.styleNode) && _this.styleNode.originChildren.push(child.styleNode);
    });
    this.reflow();
  };

  UIBaseNode.prototype.removeChild = function (child) {
    if (!child) return;
    child.remove();
  };

  UIBaseNode.prototype.remove = function () {
    var _a, _b;

    var parent = this.parent;
    (_a = this.gNode) === null || _a === void 0 ? void 0 : _a.remove();

    if (parent) {
      parent.children.splice(1, parent.children.indexOf(this));
      (_b = parent.styleNode) === null || _b === void 0 ? void 0 : _b.children.splice(1, parent.children.indexOf(this.styleNode));
      if (this.isMounted) parent.reflow();
    }

    if (this.isMounted) this.unmount();
  };

  UIBaseNode.prototype.query = function (selector) {
    if (typeof selector !== 'string') return;
    var arr = selector.split(/\s+/g).filter(function (s) {
      return s !== '';
    });
    var stack = [[this, arr]];

    while (stack.length) {
      var _a = stack.shift(),
          uiNode = _a[0],
          selectorArr = _a[1];

      for (var _i = 0, _b = uiNode.children; _i < _b.length; _i++) {
        var child = _b[_i];
        var rest = [];

        if (child.styleNode && isSelectorMatchDom(child.styleNode.dom, selectorArr[0])) {
          if (selectorArr.slice(1).length === 0) {
            return child;
          } else {
            rest = selectorArr.slice(1);
          }
        } else {
          rest = selectorArr;
        }

        stack.push([child, rest]);
      }
    }
  };

  UIBaseNode.prototype.queryAll = function (selector) {
    if (typeof selector !== 'string') return;
    var arr = selector.split(/\s+/g).filter(function (s) {
      return s !== '';
    });
    var result = [];
    var stack = [[this, arr, result]];

    while (stack.length) {
      var _a = stack.shift(),
          uiNode = _a[0],
          selectorArr = _a[1],
          result_1 = _a[2];

      for (var _i = 0, _b = uiNode.children; _i < _b.length; _i++) {
        var child = _b[_i];
        var rest = [];

        if (child.styleNode && isSelectorMatchDom(child.styleNode.dom, selectorArr[0])) {
          if (selectorArr.slice(1).length === 0) {
            result_1.push(child);
            rest = [selectorArr[0]];
          } else {
            rest = selectorArr.slice(1);
          }
        } else {
          rest = selectorArr;
        }

        stack.push([child, rest, result_1]);
      }
    }

    return result;
  }; // 手动挂载G节点


  UIBaseNode.prototype.manualMount = function (parentGNode) {
    this.parentGNode = parentGNode;
    this.layout();
    this.mount();
  };

  UIBaseNode.prototype.reflow = function () {
    var _a; // 节点没有挂载到G上


    if (!this.parentGNode) return; // 上浮到absolute或根节点

    if (((_a = this.style) === null || _a === void 0 ? void 0 : _a.position) !== 'absolute' && this.parent) {
      this.parent.reflow();
      return;
    } // 开始重排


    this.layout();
    this.render();
  }; // 计算布局


  UIBaseNode.prototype.layout = function () {
    this._prevLayout = __assign({}, this._layout || {});
    this.clearLayout();
    computeLayout(this.styleNode);
    return;
  };

  UIBaseNode.prototype.mount = function () {
    var _a;

    if (this.isMounted) {
      return;
    }

    if (((_a = this.style) === null || _a === void 0 ? void 0 : _a.display) === 'none') {
      this.isDisplay = false;
      return;
    } // 保存之后会对比


    this._prevAttrs = this.attributes;
    this._prevStyle = this.style;
    this.draw(this.parentGNode);
    this.isMounted = true;
    this.gNode.set('uiNode', this);
    this.gNode.on('*', this.trigger);
    this.children.forEach(function (child) {
      return child.mount();
    });
    this.didMount();
  }; // 全部draw一遍后触发下


  UIBaseNode.prototype.didMount = function () {};

  UIBaseNode.prototype.unmount = function () {
    if (!this.isMounted) return;
    this.isMounted = false;
    this.children.forEach(function (child) {
      return child.unmount();
    });
    this.didUnmount();
  };

  UIBaseNode.prototype.didUnmount = function () {};

  UIBaseNode.prototype.render = function () {
    var _a, _b, _c;

    if (!this.isMounted) {
      this.mount();
      return;
    } // if (!this.shouldUpdate(this._prevAttrs, this._prevStyle)) return;
    // 处理display的情况


    if (((_a = this.style) === null || _a === void 0 ? void 0 : _a.display) === 'none') {
      this.isDisplay = false;
      (_b = this.gNode) === null || _b === void 0 ? void 0 : _b.remove(false);
      return false;
    }

    if (this.isDisplay === false) {
      this.isDisplay = true;
      (_c = this.parentGNode) === null || _c === void 0 ? void 0 : _c.add(this.gNode);
    }

    var should = this.shouldUpdate(this._prevAttrs, this._prevStyle, this._prevLayout);
    should && this.draw();
    this.children.forEach(function (child) {
      return child.render();
    });
    should && this.didUpdate();
  };

  UIBaseNode.prototype.didUpdate = function () {};

  UIBaseNode.prototype.shouldUpdate = function (prevAttr, prevStyle, prevLayout) {
    return true;
  };

  UIBaseNode.prototype.draw = function (parentGNode) {};

  UIBaseNode.prototype.animate = function () {};

  UIBaseNode.prototype.clearLayout = function () {
    this.styleNode.isDirty = true;
    this.children.forEach(function (child) {
      child.clearLayout();
    });
  };

  UIBaseNode.prototype.setAttribute = function (key, value) {
    var _a;

    if (this.styleNode && this.styleNode.dom) {
      this._prevAttrs = __assign({}, this.styleNode.dom.attrs);
      this.styleNode.dom.attrs[key] = value;
      if (!((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isMounted)) return;
      this.render();
    }
  };

  UIBaseNode.prototype.setStyle = function (key, value) {
    if (this.styleNode && this.styleNode.style) {
      this._prevStyle = __assign({}, this.styleNode.dom.style);
      this.styleNode.style[key] = value;
      if (this.parent && !this.parent.isMounted) return;

      if (reflowAttrs[key]) {
        this.reflow();
      } else {
        this.render();
      }
    }
  };

  UIBaseNode.prototype.getAttribute = function (key) {
    var _a, _b;

    return (_b = (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.dom) === null || _b === void 0 ? void 0 : _b.attrs[key];
  };

  UIBaseNode.prototype.getStyle = function (key) {
    var _a, _b, _c;

    return (_b = (_a = this.styleNode) === null || _a === void 0 ? void 0 : _a.layout[key]) !== null && _b !== void 0 ? _b : (_c = this.styleNode) === null || _c === void 0 ? void 0 : _c.style[key];
  };

  UIBaseNode.prototype.setText = function (text) {
    var textNode = this.query('text');

    if (textNode && textNode.styleNode && textNode.styleNode.dom) {
      textNode.styleNode.dom.text = text;
      textNode.render();
    }
  };

  UIBaseNode.prototype.on = function (eventName, fn) {
    this.events[eventName] = __spreadArray(__spreadArray([], this.events[eventName] || []), [fn]);
  };

  UIBaseNode.prototype.off = function (eventName, fn) {
    if (!fn) {
      delete this.events[eventName];
      return;
    }

    var events = this.events[eventName];
    var index = events === null || events === void 0 ? void 0 : events.indexOf(fn);
    if (index && index !== -1) events === null || events === void 0 ? void 0 : events.splice(index, 1);
  };

  return UIBaseNode;
}();

export default UIBaseNode;