text: var Util = require('../../util');
  
  var _require = require('../../util/format'),
      parseRadius = _require.parseRadius;
  
  var Marker = require('../../shapes/marker');
  
  var Defs = require('./defs');
  
  var SHAPE_TO_TAGS = {
    rect: 'path',
    circle: 'circle',
    line: 'line',
    path: 'path',
    marker: 'path',
    text: 'text',
    polygon: 'polygon',
    image: 'image',
    ellipse: 'ellipse',
    dom: 'foreignObject',
    fan: 'path',
    group: 'g'
  };
  var LETTER_SPACING = 0.3;
  var SVG_ATTR_MAP = {
    opacity: 'opacity',
    fillStyle: 'fill',
    strokeOpacity: 'stroke-opacity',
    fillOpacity: 'fill-opacity',
    strokeStyle: 'stroke',
    x: 'x',
    y: 'y',
    r: 'r',
    rx: 'rx',
    ry: 'ry',
    width: 'width',
    height: 'height',
    x1: 'x1',
    x2: 'x2',
    y1: 'y1',
    y2: 'y2',
    lineCap: 'stroke-linecap',
    lineJoin: 'stroke-linejoin',
    lineWidth: 'stroke-width',
    lineDash: 'stroke-dasharray',
    lineDashOffset: 'stroke-dashoffset',
    miterLimit: 'stroke-miterlimit',
    font: 'font',
    fontSize: 'font-size',
    fontStyle: 'font-style',
    fontVariant: 'font-variant',
    fontWeight: 'font-weight',
    fontFamily: 'font-family',
    startArrow: 'marker-start',
    endArrow: 'marker-end',
    path: 'd',
    "class": 'class',
    id: 'id',
    style: 'style',
    preserveAspectRatio: 'preserveAspectRatio'
  };
  var BASELINE_MAP = {
    top: 'before-edge',
    middle: 'central',
    bottom: 'after-edge',
    alphabetic: 'baseline',
    hanging: 'hanging'
  };
  var ANCHOR_MAP = {
    left: 'left',
    start: 'left',
    center: 'middle',
    right: 'end',
    end: 'end'
  };
  
  var Painter = /*#__PURE__*/function () {
    function Painter(dom) {
      if (!dom) {
        return null;
      }
  
      var svgId = Util.uniqueId('canvas_');
      var canvasDom = Util.createDom("<svg id=\"" + svgId + "\"></svg>");
      dom.appendChild(canvasDom);
      this.type = 'svg';
      this.canvas = canvasDom;
      this.context = new Defs(canvasDom);
      this.toDraw = false;
      return this;
    }
  
    var _proto = Painter.prototype;
  
    _proto.draw = function draw(model) {
      var self = this;
  
      function drawInner() {
        self.animateHandler = Util.requestAnimationFrame(function () {
          self.animateHandler = undefined;
  
          if (self.toDraw) {
            drawInner();
          }
        });
  
        try {
          self._drawChildren(model);
        } catch (ev) {
          // 绘制时异常，中断重绘
          console.warn('error in draw canvas, detail as:');
          console.warn(ev);
        } finally {
          self.toDraw = false;
        }
      }
  
      if (self.animateHandler) {
        self.toDraw = true;
      } else {
        drawInner();
      }
    };
  
    _proto.drawSync = function drawSync(model) {
      this._drawChildren(model);
    };
  
    _proto._drawGroup = function _drawGroup(model, index) {
      var cfg = model._cfg;
  
      if (cfg.removed || cfg.destroyed) {
        return;
      }
  
      if (cfg.tobeRemoved) {
        Util.each(cfg.tobeRemoved, function (item) {
          if (item.parentNode) {
            item.parentNode.removeChild(item);
          }
        });
        cfg.tobeRemoved = [];
      }
  
      this._drawShape(model, index);
  
      if (cfg.children && cfg.children.length > 0) {
        this._drawChildren(model);
      }
    };
  
    _proto._drawChildren = function _drawChildren(parent) {
      var self = this;
      var children = parent._cfg.children;
      var shape; // 防止在画children的时候，父group已经被destroy
  
      if (!children) {
        return;
      }
  
      for (var i = 0; i < children.length; i++) {
        shape = children[i];
  
        if (shape.isGroup) {
          self._drawGroup(shape, i);
        } else {
          self._drawShape(shape, i);
        }
      }
    };
  
    _proto._drawShape = function _drawShape(model, index) {
      var self = this;
      var attrs = model._attrs;
      var cfg = model._cfg;
      var el = cfg.el; // 删除
  
      if (cfg.removed || cfg.destroyed) {
        if (el) {
          el.parentNode.removeChild(cfg.el);
        }
  
        return;
      } // 新增节点
  
  
      if (!el && cfg.parent) {
        self._createDom(model, index);
  
        self._updateShape(model);
      }
  
      el = cfg.el;
  
      if (cfg.visible === false) {
        el.setAttribute('visibility', 'hidden');
        return;
      }
  
      if (cfg.visible && el.hasAttribute('visibility')) {
        el.removeAttribute('visibility');
      } // 更新
  
  
      if (cfg.hasUpdate) {
        self._updateShape(model);
      }
  
      if (attrs.clip && attrs.clip._cfg.hasUpdate) {
        self._updateShape(attrs.clip);
      }
    };
  
    _proto._updateShape = function _updateShape(model) {
      var self = this;
      var attrs = model._attrs;
      var formerAttrs = model._cfg.attrs;
  
      if (!formerAttrs) {
        return;
      }
  
      if (!model._cfg.el) {
        self._createDom(model);
      }
  
      if ('clip' in attrs) {
        this._setClip(model, attrs.clip);
      }
  
      if ('shadowOffsetX' in attrs || 'shadowOffsetY' in attrs || 'shadowBlur' in attrs || 'shadowColor' in attrs) {
        this._setShadow(model);
      }
  
      if (model.type === 'text') {
        self._updateText(model);
  
        return;
      }
  
      if (model.type === 'fan') {
        self._updateFan(model);
      }
  
      if (model.type === 'marker') {
        model._cfg.el.setAttribute('d', self._assembleMarker(attrs));
      }
  
      if (model.type === 'rect') {
        model._cfg.el.setAttribute('d', self._assembleRect(attrs));
      }
  
      for (var key in attrs) {
        if (attrs[key] !== formerAttrs[key]) {
          self._setAttribute(model, key, attrs[key]);
        }
      }
  
      model._cfg.attrs = Util.deepMix({}, model._attrs);
      model._cfg.hasUpdate = false;
    };
  
    _proto._setAttribute = function _setAttribute(model, name, value) {
      var type = model.type;
      var attrs = model._attrs;
      var el = model._cfg.el;
      var defs = this.context; // 计算marker路径
  
      if ((type === 'marker' || type === 'rect') && ~['x', 'y', 'radius', 'r'].indexOf(name)) {
        return;
      } // 圆和椭圆不是x, y， 是cx, cy。 marker的x,y 用于计算marker的路径，不需要写到dom
  
  
      if (~['circle', 'ellipse'].indexOf(type) && ~['x', 'y'].indexOf(name)) {
        el.setAttribute('c' + name, parseInt(value, 10));
        return;
      } // 多边形
  
  
      if (type === 'polygon' && name === 'points') {
        if (!value || value.length === 0) {
          value = '';
        }
  
        if (Util.isArray(value)) {
          value = value.map(function (point) {
            return point[0] + ',' + point[1];
          });
          value = value.join(' ');
        }
  
        el.setAttribute('points', value);
        return;
      } // 设置path
  
  
      if (name === 'path' && Util.isArray(value)) {
        el.setAttribute('d', this._formatPath(value));
        return;
      } // 设置图片
  
  
      if (name === 'img') {
        this._setImage(model, value);
  
        return;
      }
  
      if (name === 'transform') {
        if (!value) {
          el.removeAttribute('transform');
          return;
        }
  
        this._setTransform(model);
  
        return;
      }
  
      if (name === 'rotate') {
        if (!value) {
          el.removeAttribute('transform');
          return;
        }
  
        this._setTransform(model);
  
        return;
      }
  
      if (name === 'matrix') {
        this._setTransform(model);
  
        return;
      }
  
      if (name === 'fillStyle' || name === 'strokeStyle') {
        this._setColor(model, name, value);
  
        return;
      }
  
      if (name === 'clip') {
        return;
      }
  
      if (~name.indexOf('Arrow')) {
        name = SVG_ATTR_MAP[name];
  
        if (!value) {
          model._cfg[name] = null;
          el.removeAttribute(name);
        } else {
          var id = null;
  
          if (typeof value === 'boolean') {
            id = defs.getDefaultArrow(attrs, name);
          } else {
            id = defs.addArrow(attrs, name);
          }
  
          el.setAttribute(name, "url(#" + id + ")");
          model._cfg[name] = id;
        }
  
        return;
      } // foreignObject
  
  
      if (name === 'html') {
        if (typeof value === 'string') {
          el.innerHTML = value;
        } else {
          el.innerHTML = '';
          el.appendChild(value);
        }
      }
  
      if (SVG_ATTR_MAP[name]) {
        el.setAttribute(SVG_ATTR_MAP[name], value);
      }
    };
  
    _proto._createDom = function _createDom(model, index) {
      var type = SHAPE_TO_TAGS[model.type];
      var attrs = model._attrs;
      var parent = model._cfg.parent;
  
      if (!type) {
        throw new Error('the type' + model.type + 'is not supported by svg');
      }
  
      var shape = document.createElementNS('http://www.w3.org/2000/svg', type);
  
      if (model._cfg.id) {
        shape.id = model._cfg.id;
      }
  
      model._cfg.el = shape;
  
      if (parent) {
        var parentNode = parent._cfg.el;
  
        if (typeof index === 'undefined') {
          parentNode.appendChild(shape);
        } else {
          var childNodes = parent._cfg.el.childNodes; // svg下天然有defs作为子节点，svg下子元素index需要+1
  
          if (parentNode.tagName === 'svg') {
            index += 1;
          }
  
          if (childNodes.length <= index) {
            parentNode.appendChild(shape);
          } else {
            parentNode.insertBefore(shape, childNodes[index]);
          }
        }
      }
  
      model._cfg.attrs = {};
  
      if (model.type === 'text') {
        shape.setAttribute('paint-order', 'stroke');
        shape.setAttribute('style', 'stroke-linecap:butt; stroke-linejoin:miter;');
      } else {
        if (!attrs.stroke && !attrs.strokeStyle) {
          shape.setAttribute('stroke', 'none');
        }
  
        if (!attrs.fill && !attrs.fillStyle) {
          shape.setAttribute('fill', 'none');
        }
      }
  
      return shape;
    };
  
    _proto._assembleMarker = function _assembleMarker(attrs) {
      var r = attrs.r;
  
      if (typeof attrs.r === 'undefined') {
        r = attrs.radius;
      }
  
      if (isNaN(Number(attrs.x)) || isNaN(Number(attrs.y)) || isNaN(Number(r))) {
        return '';
      }
  
      var d = '';
  
      if (typeof attrs.symbol === 'function') {
        d = attrs.symbol(attrs.x, attrs.y, r);
      } else {
        d = Marker.Symbols[attrs.symbol || 'circle'](attrs.x, attrs.y, r);
      }
  
      if (Util.isArray(d)) {
        d = d.map(function (path) {
          return path.join(' ');
        }).join('');
      }
  
      return d;
    };
  
    _proto._assembleRect = function _assembleRect(attrs) {
      var x = attrs.x;
      var y = attrs.y;
      var w = attrs.width;
      var h = attrs.height;
      var radius = attrs.radius;
  
      if (!radius) {
        return "M " + x + "," + y + " l " + w + ",0 l 0," + h + " l" + -w + " 0 z";
      }
  
      var r = parseRadius(radius);
  
      if (Util.isArray(radius)) {
        if (radius.length === 1) {
          r.r1 = r.r2 = r.r3 = r.r4 = radius[0];
        } else if (radius.length === 2) {
          r.r1 = r.r3 = radius[0];
          r.r2 = r.r4 = radius[1];
        } else if (radius.length === 3) {
          r.r1 = radius[0];
          r.r2 = r.r4 = radius[1];
          r.r3 = radius[2];
        } else {
          r.r1 = radius[0];
          r.r2 = radius[1];
          r.r3 = radius[2];
          r.r4 = radius[3];
        }
      } else {
        r.r1 = r.r2 = r.r3 = r.r4 = radius;
      }
  
      var d = [["M " + (x + r.r1) + "," + y], ["l " + (w - r.r1 - r.r2) + ",0"], ["a " + r.r2 + "," + r.r2 + ",0,0,1," + r.r2 + "," + r.r2], ["l 0," + (h - r.r2 - r.r3)], ["a " + r.r3 + "," + r.r3 + ",0,0,1," + -r.r3 + "," + r.r3], ["l " + (r.r3 + r.r4 - w) + ",0"], ["a " + r.r4 + "," + r.r4 + ",0,0,1," + -r.r4 + "," + -r.r4], ["l 0," + (r.r4 + r.r1 - h)], ["a " + r.r1 + "," + r.r1 + ",0,0,1," + r.r1 + "," + -r.r1], ['z']];
      return d.join(' ');
    };
  
    _proto._formatPath = function _formatPath(value) {
      value = value.map(function (path) {
        return path.join(' ');
      }).join('');
  
      if (~value.indexOf('NaN')) {
        return '';
      }
  
      return value;
    };
  
    _proto._setTransform = function _setTransform(model) {
      var matrix = model._attrs.matrix;
      var el = model._cfg.el;
      var transform = [];
  
      for (var i = 0; i < 9; i += 3) {
        transform.push(matrix[i] + ',' + matrix[i + 1]);
      }
  
      transform = transform.join(',');
  
      if (transform.indexOf('NaN') === -1) {
        el.setAttribute('transform', "matrix(" + transform + ")");
      } else {
        console.warn('invalid matrix:', matrix);
      }
    };
  
    _proto._setImage = function _setImage(model, img) {
      var attrs = model._attrs;
      var el = model._cfg.el;
  
      if (Util.isString(img)) {
        el.setAttribute('href', img);
      } else if (img instanceof Image) {
        if (!attrs.width) {
          el.setAttribute('width', img.width);
          model._attrs.width = img.width;
        }
  
        if (!attrs.height) {
          el.setAttribute('height', img.height);
          model._attrs.height = img.height;
        }
  
        el.setAttribute('href', img.src);
      } else if (img instanceof HTMLElement && Util.isString(img.nodeName) && img.nodeName.toUpperCase() === 'CANVAS') {
        el.setAttribute('href', img.toDataURL());
      } else if (img instanceof ImageData) {
        var canvas = document.createElement('canvas');
        canvas.setAttribute('width', img.width);
        canvas.setAttribute('height', img.height);
        canvas.getContext('2d').putImageData(img, 0, 0);
  
        if (!attrs.width) {
          el.setAttribute('width', img.width);
          model._attrs.width = img.width;
        }
  
        if (!attrs.height) {
          el.setAttribute('height', img.height);
          model._attrs.height = img.height;
        }
  
        el.setAttribute('href', canvas.toDataURL());
      }
    };
  
    _proto._updateFan = function _updateFan(model) {
      function getPoint(angle, radius, center) {
        return {
          x: radius * Math.cos(angle) + center.x,
          y: radius * Math.sin(angle) + center.y
        };
      }
  
      var attrs = model._attrs;
      var cfg = model._cfg;
      var center = {
        x: attrs.x,
        y: attrs.y
      };
      var d = [];
      var startAngle = attrs.startAngle;
      var endAngle = attrs.endAngle;
  
      if (Util.isNumberEqual(endAngle - startAngle, Math.PI * 2)) {
        endAngle -= 0.00001;
      }
  
      var outerStart = getPoint(startAngle, attrs.re, center);
      var outerEnd = getPoint(endAngle, attrs.re, center);
      var fa = endAngle > startAngle ? 1 : 0;
      var fs = Math.abs(endAngle - startAngle) > Math.PI ? 1 : 0;
      var rs = attrs.rs;
      var re = attrs.re;
      var innerStart = getPoint(startAngle, attrs.rs, center);
      var innerEnd = getPoint(endAngle, attrs.rs, center);
  
      if (attrs.rs > 0) {
        d.push("M " + outerEnd.x + "," + outerEnd.y);
        d.push("L " + innerEnd.x + "," + innerEnd.y);
        d.push("A " + rs + "," + rs + ",0," + fs + "," + (fa === 1 ? 0 : 1) + "," + innerStart.x + "," + innerStart.y);
        d.push("L " + outerStart.x + " " + outerStart.y);
      } else {
        d.push("M " + center.x + "," + center.y);
        d.push("L " + outerStart.x + "," + outerStart.y);
      }
  
      d.push("A " + re + "," + re + ",0," + fs + "," + fa + "," + outerEnd.x + "," + outerEnd.y);
  
      if (attrs.rs > 0) {
        d.push("L " + innerEnd.x + "," + innerEnd.y);
      } else {
        d.push('Z');
      }
  
      cfg.el.setAttribute('d', d.join(' '));
    };
  
    _proto._updateText = function _updateText(model) {
      var self = this;
      var attrs = model._attrs;
      var formerAttrs = model._cfg.attrs;
      var el = model._cfg.el;
  
      this._setFont(model);
  
      for (var attr in attrs) {
        if (attrs[attr] !== formerAttrs[attr]) {
          if (attr === 'text') {
            self._setText(model, "" + attrs[attr]);
  
            continue;
          }
  
          if (attr === 'fillStyle' || attr === 'strokeStyle') {
            this._setColor(model, attr, attrs[attr]);
  
            continue;
          }
  
          if (attr === 'matrix') {
            this._setTransform(model);
  
            continue;
          }
  
          if (SVG_ATTR_MAP[attr]) {
            el.setAttribute(SVG_ATTR_MAP[attr], attrs[attr]);
          }
        }
      }
  
      model._cfg.attrs = Object.assign({}, model._attrs);
      model._cfg.hasUpdate = false;
    };
  
    _proto._setFont = function _setFont(model) {
      var el = model.get('el');
      var attrs = model._attrs;
      var fontSize = attrs.fontSize;
      el.setAttribute('alignment-baseline', BASELINE_MAP[attrs.textBaseline] || 'baseline');
      el.setAttribute('text-anchor', ANCHOR_MAP[attrs.textAlign] || 'left');
  
      if (fontSize && +fontSize < 12) {
        // 小于 12 像素的文本进行 scale 处理
        attrs.matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
        model.transform([['t', -attrs.x, -attrs.y], ['s', +fontSize / 12, +fontSize / 12], ['t', attrs.x, attrs.y]]);
      }
    };
  
    _proto._setText = function _setText(model, text) {
      var el = model._cfg.el;
      var baseline = model._attrs.textBaseline || 'bottom';
  
      if (!text) {
        el.innerHTML = '';
      } else if (~text.indexOf('\n')) {
        var x = model._attrs.x;
        var textArr = text.split('\n');
        var textLen = textArr.length - 1;
        var arr = '';
        Util.each(textArr, function (segment, i) {
          if (i === 0) {
            if (baseline === 'alphabetic') {
              arr += "<tspan x=\"" + x + "\" dy=\"" + -textLen + "em\">" + segment + "</tspan>";
            } else if (baseline === 'top') {
              arr += "<tspan x=\"" + x + "\" dy=\"0.9em\">" + segment + "</tspan>";
            } else if (baseline === 'middle') {
              arr += "<tspan x=\"" + x + "\" dy=\"" + -(textLen - 1) / 2 + "em\">" + segment + "</tspan>";
            } else if (baseline === 'bottom') {
              arr += "<tspan x=\"" + x + "\" dy=\"-" + (textLen + LETTER_SPACING) + "em\">" + segment + "</tspan>";
            } else if (baseline === 'hanging') {
              arr += "<tspan x=\"" + x + "\" dy=\"" + (-(textLen - 1) - LETTER_SPACING) + "em\">" + segment + "</tspan>";
            }
          } else {
            arr += "<tspan x=\"" + x + "\" dy=\"1em\">" + segment + "</tspan>";
          }
        });
        el.innerHTML = arr;
      } else {
        el.innerHTML = text;
      }
    };
  
    _proto._setClip = function _setClip(model, value) {
      var el = model._cfg.el;
  
      if (!value) {
        el.removeAttribute('clip-path');
        return;
      }
  
      if (!el.hasAttribute('clip-path')) {
        this._createDom(value);
  
        this._updateShape(value);
  
        var id = this.context.addClip(value);
        el.setAttribute('clip-path', "url(#" + id + ")");
      } else if (value._cfg.hasUpdate) {
        this._updateShape(value);
      }
    };
  
    _proto._setColor = function _setColor(model, name, value) {
      var el = model._cfg.el;
      var defs = this.context;
  
      if (!value) {
        el.setAttribute(SVG_ATTR_MAP[name], 'none');
        return;
      }
  
      value = value.trim();
  
      if (/^[r,R,L,l]{1}[\s]*\(/.test(value)) {
        var id = defs.find('gradient', value);
  
        if (!id) {
          id = defs.addGradient(value);
        }
  
        el.setAttribute(SVG_ATTR_MAP[name], "url(#" + id + ")");
      } else if (/^[p,P]{1}[\s]*\(/.test(value)) {
        var _id = defs.find('pattern', value);
  
        if (!_id) {
          _id = defs.addPattern(value);
        }
  
        el.setAttribute(SVG_ATTR_MAP[name], "url(#" + _id + ")");
      } else {
        el.setAttribute(SVG_ATTR_MAP[name], value);
      }
    };
  
    _proto._setShadow = function _setShadow(model) {
      var el = model._cfg.el;
      var attrs = model._attrs;
      var cfg = {
        dx: attrs.shadowOffsetX,
        dy: attrs.shadowOffsetY,
        blur: attrs.shadowBlur,
        color: attrs.shadowColor
      };
  
      if (!cfg.dx && !cfg.dy && !cfg.blur && !cfg.color) {
        el.removeAttribute('filter');
      } else {
        var id = this.context.find('filter', cfg);
  
        if (!id) {
          id = this.context.addShadow(cfg, this);
        }
  
        el.setAttribute('filter', "url(#" + id + ")");
      }
    };
  
    return Painter;
  }();
  
  module.exports = Painter;