aha-svg/lib/svg.js

SVG Tools

// MIT License

// Copyright (c) 2020 FredDon

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.toSVGElement = toSVGElement;
exports.toElement = toElement;
exports.attrstringify = attrstringify;
exports.attrtoSvg = attrtoSvg;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var SVG = function () {
  function SVG(selector, parent) {
    _classCallCheck(this, SVG);

    if (selector instanceof Element) {
      this.target = selector;
    } else {
      this.target = document.querySelector(selector);
    }
    if (!this.target) {
      throw new Error("Can't Find Element");
    }
    this.parentNode = parent;
  }

  _createClass(SVG, [{
    key: 'selector',
    value: function selector(selectorStr) {
      if (typeof selectorStr == 'string') {
        var child = this.target.querySelector(selectorStr);
        if (child) {
          return new SVG(child, this.target);
        }
      }
      return null;
    }
  }, {
    key: 'appendChild',
    value: function appendChild(element) {
      if (element instanceof Element) {
        this.target.appendChild(element);
        return new SVG(element, this.target);
      }
      if (typeof element == 'string') {
        return new SVG(toElement(element), this.target);
      }
      return null;
    }

    // animationSet(){
    // }

  }, {
    key: 'text',
    value: function text(str) {
      this.target.innerText = str;
      return this;
    }
  }, {
    key: 'parent',
    value: function parent() {
      return this.parentNode;
    }
  }, {
    key: 'fill',
    value: function fill(w) {
      this.attr('fill', w);
      return this;
    }
  }, {
    key: 'border',
    value: function border(color) {
      this.attr('stroke', color);
      return this;
    }
  }, {
    key: 'borderWidth',
    value: function borderWidth(width) {
      this.attr('stroke-width', width);
      return this;
    }

    /**
     * 
     * @param {*} w 
     */

  }, {
    key: 'width',
    value: function width(w) {
      this.attr('width', w);
      return this;
    }

    /**
     * 
     * @param {*} h 
     */

  }, {
    key: 'height',
    value: function height(h) {
      this.attr('height', h);
      return this;
    }

    /**
     * 
     * @param {*} v 
     */

  }, {
    key: 'x',
    value: function x(v) {
      this.attr('x', v);
      return this;
    }

    /**
     * 
     * @param {*} v 
     */

  }, {
    key: 'y',
    value: function y(v) {
      this.attr('y', v);
      return this;
    }

    /**
     * 
     * @param {*} v 
     */

  }, {
    key: 'dx',
    value: function dx(v) {
      this.attr('dx', v);
      return this;
    }

    /**
     * 
     * @param {*} v 
     */

  }, {
    key: 'dy',
    value: function dy(v) {
      this.attr('dy', v);
      return this;
    }

    /**
     * 
     * @param {*} v 
     */

  }, {
    key: 'r',
    value: function r(v) {
      this.attr('r', v);
      return this;
    }

    /**
     * 
     * @param {*} v 
     */

  }, {
    key: 'cx',
    value: function cx(v) {
      this.attr('cx', v);
      return this;
    }

    /**
     * 
     * @param {*} v 
     */

  }, {
    key: 'cy',
    value: function cy(v) {
      this.attr('cy', v);
      return this;
    }
  }, {
    key: 'path',
    value: function path(v) {
      this.attr('d', v);
      return this;
    }

    /**
     * 
     * @param {*} attrs k-v or properties object
     */

  }, {
    key: 'attr',
    value: function attr(attrs) {
      if (attrs) {
        var key = arguments[0];
        var val = arguments[1];
        if (typeof key == 'string') {
          this.target.setAttribute('' + key, val);
        } else {
          attrtoSvg(this.target, attrs);
        }
      }
      return this;
    }

    /**
     * 
     * @param {*} style k-v or styles object
     */

  }, {
    key: 'styles',
    value: function styles(style) {
      if (style) {
        var key = arguments[0];
        var val = arguments[1];
        if (typeof key == 'string') {
          this.target.style[key] = val;
        } else {
          for (var k in style) {
            this.target.style[key] = style[k];
          }
        }
      }
      return this;
    }
  }]);

  return SVG;
}();

var selector = function selector(_selector) {
  return new SVG(_selector);
};

function toSVGElement(svgString) {
  if (typeof DOMParser == "undefined") {
    throw new Error('需要DOMParser，请在浏览器执行');
  }
  var parser = new DOMParser();
  var xmlText = '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" version="1.1">' + svgString + '\n  </svg>';
  var documentElement = parser.parseFromString(xmlText, "text/xml").documentElement;
  if (documentElement.querySelector("parsererror")) {
    return null;
  }
  return documentElement;
}

function toElement(svgString) {
  var documentElement = toSVGElement(svgString);
  if (!documentElement) {
    return null;
  }
  var xmlBody = documentElement.firstChild;
  //copy node*
  return document.importNode(xmlBody, true);
}

function attrstringify() {
  var attrJson = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  var queryArr = [];
  for (var k in attrJson) {
    queryArr.push(k + "=" + ('"' + attrJson[k] + '"'));
  }
  return queryArr.join(" ");
}

function attrtoSvg(svgDom) {
  var attrJson = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

  if (svgDom instanceof Element) {
    for (var k in attrJson) {
      svgDom.setAttribute('' + k, attrJson[k]);
    }
  }
}

var XPP = {
  selector: selector,
  toSVGElement: toSVGElement, toElement: toElement, attrtoSvg: attrtoSvg, attrstringify: attrstringify

  // export * as 
};exports.default = XPP;

if (module && module.exports) {
  module.exports = XPP;
}