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

UI system for @antv/f6

import { __extends } from "tslib";
import UINode from './base';

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

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

    _this.backgroudNode = null;
    return _this;
  }

  UIDivNode.prototype.draw = function (parentGNode) {
    var _a, _b;

    if (!this.gNode) {
      this.gNode = parentGNode.addGroup({
        id: (_a = this.attributes) === null || _a === void 0 ? void 0 : _a.id,
        className: this.styleNode.dom.attrs.class
      });
    }

    var gNode = this.gNode;
    var styleNode = this.styleNode;
    gNode.resetMatrix();
    (_b = this.backgroudNode) === null || _b === void 0 ? void 0 : _b.remove();
    var backgroudNode = this.backgroudNode = gNode.addGroup();
    gNode.translate(this.left, this.top);
    var style = styleNode.style; // zIndex

    typeof style.zIndex === 'number' && gNode.setZIndex(style.zIndex); // 绘制background

    backgroudNode.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        fill: style.backgroundColor || '#fff',
        fillOpacity: style.backgroundOpacity,
        opacity: style.opacity,
        width: this.width,
        height: this.height,
        radius: [style.borderTopLeftRadius || 0, style.borderTopRightRadius || 0, style.borderBottomLeftRadius || 0, style.borderBottomLeftRadius || 0],
        shadowBlur: style.shadowBlur || 0,
        shadowColor: style.shadowColor || null,
        shadowOffsetX: style.shadowOffsetX || 0,
        shadowOffsetY: style.shadowOffsetY || 0
      },
      capture: style.pointerEvents === 'none' ? false : true
    });

    if (style.backgroundImage) {
      backgroudNode.addShape('image', {
        attrs: {
          x: 0,
          y: 0,
          img: style.url,
          width: this.width,
          height: this.height
        },
        capture: false
      });
    } // 绘制边框


    var border = {
      attrs: {
        x: (style.borderWidth || 0) / 2,
        y: (style.borderWidth || 0) / 2,
        lineWidth: style.borderWidth,
        stroke: style.borderColor,
        width: this.width - (style.borderWidth || 0),
        height: this.height - (style.borderWidth || 0),
        radius: [(style.borderTopLeftRadius || 0) * ((this.width - (style.borderWidth || 0)) / this.width), (style.borderTopRightRadius || 0) * ((this.width - (style.borderWidth || 0)) / this.width), (style.borderBottomLeftRadius || 0) * ((this.width - (style.borderWidth || 0)) / this.width), (style.borderBottomLeftRadius || 0) * ((this.width - (style.borderWidth || 0)) / this.width)]
      },
      capture: false
    };

    if (style.borderStyle === 'dashed') {
      border.attrs.lineDash = style.lineDash || [2, 2];
    }

    backgroudNode.addShape('rect', border);

    if (style.overflow === 'hidden') {
      gNode.setClip({
        type: 'rect',
        attrs: {
          width: this.width,
          height: this.height,
          radius: [style.borderTopLeftRadius || 0, style.borderTopRightRadius || 0, style.borderBottomLeftRadius || 0, style.borderBottomLeftRadius || 0]
        }
      });
    }

    backgroudNode.toBack();
  };

  return UIDivNode;
}(UINode);

export default UIDivNode;