@idraw/util 0.2.0-alpha.16 → 0.2.0-alpha.22

package/dist/index.global.js

@@ -74,7 +74,7 @@ var iDrawUtil = (function () {
 
   function deepClone(target) {
       function _clone(t) {
-          var type = is(t);
+          var type = is$1(t);
           if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
               return t;
           }
@@ -96,7 +96,7 @@ var iDrawUtil = (function () {
       }
       return _clone(target);
   }
-  function is(data) {
+  function is$1(data) {
       return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
   }
 
@@ -139,6 +139,16 @@ var iDrawUtil = (function () {
       },
   };
 
+  var __assign = function() {
+      __assign = Object.assign || function __assign(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
   function __awaiter(thisArg, _arguments, P, generator) {
       function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
       return new (P || (P = Promise))(function (resolve, reject) {
@@ -255,7 +265,420 @@ var iDrawUtil = (function () {
       });
   }
 
+  var Context = (function () {
+      function Context(ctx, opts) {
+          this._opts = opts;
+          this._ctx = ctx;
+          this._transform = {
+              scale: 1,
+              scrollX: 0,
+              scrollY: 0,
+          };
+      }
+      Context.prototype.getContext = function () {
+          return this._ctx;
+      };
+      Context.prototype.resetSize = function (opts) {
+          this._opts = __assign(__assign({}, this._opts), opts);
+      };
+      Context.prototype.calcDeviceNum = function (num) {
+          return num * this._opts.devicePixelRatio;
+      };
+      Context.prototype.calcScreenNum = function (num) {
+          return num / this._opts.devicePixelRatio;
+      };
+      Context.prototype.getSize = function () {
+          return {
+              width: this._opts.width,
+              height: this._opts.height,
+              contextWidth: this._opts.contextWidth,
+              contextHeight: this._opts.contextHeight,
+              devicePixelRatio: this._opts.devicePixelRatio,
+          };
+      };
+      Context.prototype.setTransform = function (config) {
+          this._transform = __assign(__assign({}, this._transform), config);
+      };
+      Context.prototype.getTransform = function () {
+          return {
+              scale: this._transform.scale,
+              scrollX: this._transform.scrollX,
+              scrollY: this._transform.scrollY,
+          };
+      };
+      Context.prototype.setFillStyle = function (color) {
+          this._ctx.fillStyle = color;
+      };
+      Context.prototype.fill = function (fillRule) {
+          return this._ctx.fill(fillRule || 'nonzero');
+      };
+      Context.prototype.arc = function (x, y, radius, startAngle, endAngle, anticlockwise) {
+          return this._ctx.arc(this._doSize(x), this._doSize(y), this._doSize(radius), startAngle, endAngle, anticlockwise);
+      };
+      Context.prototype.rect = function (x, y, w, h) {
+          return this._ctx.rect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
+      };
+      Context.prototype.fillRect = function (x, y, w, h) {
+          return this._ctx.fillRect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
+      };
+      Context.prototype.clearRect = function (x, y, w, h) {
+          return this._ctx.clearRect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
+      };
+      Context.prototype.beginPath = function () {
+          return this._ctx.beginPath();
+      };
+      Context.prototype.closePath = function () {
+          return this._ctx.closePath();
+      };
+      Context.prototype.lineTo = function (x, y) {
+          return this._ctx.lineTo(this._doSize(x), this._doSize(y));
+      };
+      Context.prototype.moveTo = function (x, y) {
+          return this._ctx.moveTo(this._doSize(x), this._doSize(y));
+      };
+      Context.prototype.arcTo = function (x1, y1, x2, y2, radius) {
+          return this._ctx.arcTo(this._doSize(x1), this._doSize(y1), this._doSize(x2), this._doSize(y2), this._doSize(radius));
+      };
+      Context.prototype.setLineWidth = function (w) {
+          return this._ctx.lineWidth = this._doSize(w);
+      };
+      Context.prototype.setLineDash = function (nums) {
+          var _this = this;
+          return this._ctx.setLineDash(nums.map(function (n) { return _this._doSize(n); }));
+      };
+      Context.prototype.isPointInPath = function (x, y) {
+          return this._ctx.isPointInPath(this._doX(x), this._doY(y));
+      };
+      Context.prototype.isPointInPathWithoutScroll = function (x, y) {
+          return this._ctx.isPointInPath(this._doSize(x), this._doSize(y));
+      };
+      Context.prototype.setStrokeStyle = function (color) {
+          this._ctx.strokeStyle = color;
+      };
+      Context.prototype.stroke = function () {
+          return this._ctx.stroke();
+      };
+      Context.prototype.translate = function (x, y) {
+          return this._ctx.translate(this._doSize(x), this._doSize(y));
+      };
+      Context.prototype.rotate = function (angle) {
+          return this._ctx.rotate(angle);
+      };
+      Context.prototype.drawImage = function () {
+          var args = [];
+          for (var _i = 0; _i < arguments.length; _i++) {
+              args[_i] = arguments[_i];
+          }
+          var image = args[0];
+          var sx = args[1];
+          var sy = args[2];
+          var sw = args[3];
+          var sh = args[4];
+          var dx = args[args.length - 4];
+          var dy = args[args.length - 3];
+          var dw = args[args.length - 2];
+          var dh = args[args.length - 1];
+          if (args.length === 9) {
+              return this._ctx.drawImage(image, this._doSize(sx), this._doSize(sy), this._doSize(sw), this._doSize(sh), this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
+          }
+          else {
+              return this._ctx.drawImage(image, this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
+          }
+      };
+      Context.prototype.createPattern = function (image, repetition) {
+          return this._ctx.createPattern(image, repetition);
+      };
+      Context.prototype.measureText = function (text) {
+          return this._ctx.measureText(text);
+      };
+      Context.prototype.setTextAlign = function (align) {
+          this._ctx.textAlign = align;
+      };
+      Context.prototype.fillText = function (text, x, y, maxWidth) {
+          if (maxWidth !== undefined) {
+              return this._ctx.fillText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
+          }
+          else {
+              return this._ctx.fillText(text, this._doSize(x), this._doSize(y));
+          }
+      };
+      Context.prototype.strokeText = function (text, x, y, maxWidth) {
+          if (maxWidth !== undefined) {
+              return this._ctx.strokeText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
+          }
+          else {
+              return this._ctx.strokeText(text, this._doSize(x), this._doSize(y));
+          }
+      };
+      Context.prototype.setFont = function (opts) {
+          var strList = [];
+          if (opts.fontWeight === 'bold') {
+              strList.push("" + opts.fontWeight);
+          }
+          strList.push(this._doSize(opts.fontSize || 12) + "px");
+          strList.push("" + (opts.fontFamily || 'sans-serif'));
+          this._ctx.font = "" + strList.join(' ');
+      };
+      Context.prototype.setTextBaseline = function (baseline) {
+          this._ctx.textBaseline = baseline;
+      };
+      Context.prototype.setGlobalAlpha = function (alpha) {
+          this._ctx.globalAlpha = alpha;
+      };
+      Context.prototype.save = function () {
+          this._ctx.save();
+      };
+      Context.prototype.restore = function () {
+          this._ctx.restore();
+      };
+      Context.prototype.scale = function (ratioX, ratioY) {
+          this._ctx.scale(ratioX, ratioY);
+      };
+      Context.prototype.setShadowColor = function (color) {
+          this._ctx.shadowColor = color;
+      };
+      Context.prototype.setShadowOffsetX = function (offsetX) {
+          this._ctx.shadowOffsetX = this._doSize(offsetX);
+      };
+      Context.prototype.setShadowOffsetY = function (offsetY) {
+          this._ctx.shadowOffsetY = this._doSize(offsetY);
+      };
+      Context.prototype.setShadowBlur = function (blur) {
+          this._ctx.shadowBlur = this._doSize(blur);
+      };
+      Context.prototype.ellipse = function (x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+          this._ctx.ellipse(this._doSize(x), this._doSize(y), this._doSize(radiusX), this._doSize(radiusY), rotation, startAngle, endAngle, counterclockwise);
+      };
+      Context.prototype._doSize = function (num) {
+          return this._opts.devicePixelRatio * num;
+      };
+      Context.prototype._doX = function (x) {
+          var _a = this._transform, scale = _a.scale, scrollX = _a.scrollX;
+          var _x = (x - scrollX) / scale;
+          return this._doSize(_x);
+      };
+      Context.prototype._doY = function (y) {
+          var _a = this._transform, scale = _a.scale, scrollY = _a.scrollY;
+          var _y = (y - scrollY) / scale;
+          return this._doSize(_y);
+      };
+      return Context;
+  }());
+
+  function number(value) {
+      return (typeof value === 'number' && (value > 0 || value <= 0));
+  }
+  function x(value) {
+      return number(value);
+  }
+  function y(value) {
+      return number(value);
+  }
+  function w(value) {
+      return (typeof value === 'number' && value >= 0);
+  }
+  function h(value) {
+      return (typeof value === 'number' && value >= 0);
+  }
+  function angle(value) {
+      return (typeof value === 'number' && value >= -360 && value <= 360);
+  }
+  function borderWidth(value) {
+      return w(value);
+  }
+  function borderRadius(value) {
+      return number(value) && value >= 0;
+  }
+  function color(value) {
+      return isColorStr(value);
+  }
+  function imageURL(value) {
+      return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
+  }
+  function imageBase64(value) {
+      return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
+  }
+  function imageSrc(value) {
+      return (imageBase64(value) || imageURL(value));
+  }
+  function svg(value) {
+      return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
+  }
+  function html(value) {
+      var result = false;
+      if (typeof value === 'string') {
+          var div = document.createElement('div');
+          div.innerHTML = value;
+          if (div.children.length > 0) {
+              result = true;
+          }
+          div = null;
+      }
+      return result;
+  }
+  function text(value) {
+      return typeof value === 'string';
+  }
+  function fontSize(value) {
+      return number(value) && value > 0;
+  }
+  function lineHeight(value) {
+      return number(value) && value > 0;
+  }
+  function strokeWidth(value) {
+      return number(value) && value > 0;
+  }
+  function textAlign(value) {
+      return ['center', 'left', 'right'].includes(value);
+  }
+  function fontFamily(value) {
+      return typeof value === 'string' && value.length > 0;
+  }
+  function fontWeight(value) {
+      return ['bold'].includes(value);
+  }
+  var is = {
+      x: x,
+      y: y,
+      w: w,
+      h: h,
+      angle: angle,
+      number: number,
+      borderWidth: borderWidth,
+      borderRadius: borderRadius,
+      color: color,
+      imageSrc: imageSrc,
+      imageURL: imageURL,
+      imageBase64: imageBase64,
+      svg: svg,
+      html: html,
+      text: text,
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      textAlign: textAlign,
+      fontFamily: fontFamily,
+      fontWeight: fontWeight,
+      strokeWidth: strokeWidth,
+  };
+
+  function attrs(attrs) {
+      var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
+      if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
+          return false;
+      }
+      if (!(angle >= -360 && angle <= 360)) {
+          return false;
+      }
+      return true;
+  }
+  function box(desc) {
+      if (desc === void 0) { desc = {}; }
+      var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
+      if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+          return false;
+      }
+      return true;
+  }
+  function rectDesc(desc) {
+      var bgColor = desc.bgColor;
+      if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+          return false;
+      }
+      if (!box(desc)) {
+          return false;
+      }
+      return true;
+  }
+  function circleDesc(desc) {
+      var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
+      if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+          return false;
+      }
+      return true;
+  }
+  function imageDesc(desc) {
+      var src = desc.src;
+      if (!is.imageSrc(src)) {
+          return false;
+      }
+      return true;
+  }
+  function svgDesc(desc) {
+      var svg = desc.svg;
+      if (!is.svg(svg)) {
+          return false;
+      }
+      return true;
+  }
+  function htmlDesc(desc) {
+      var html = desc.html;
+      if (!is.html(html)) {
+          return false;
+      }
+      return true;
+  }
+  function textDesc(desc) {
+      var text = desc.text, color = desc.color, fontSize = desc.fontSize, lineHeight = desc.lineHeight, fontFamily = desc.fontFamily, textAlign = desc.textAlign, fontWeight = desc.fontWeight, bgColor = desc.bgColor, strokeWidth = desc.strokeWidth, strokeColor = desc.strokeColor;
+      if (!is.text(text)) {
+          return false;
+      }
+      if (!is.color(color)) {
+          return false;
+      }
+      if (!is.fontSize(fontSize)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
+          return false;
+      }
+      if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
+          return false;
+      }
+      if (!box(desc)) {
+          return false;
+      }
+      return true;
+  }
+  var check = {
+      attrs: attrs,
+      textDesc: textDesc,
+      rectDesc: rectDesc,
+      circleDesc: circleDesc,
+      imageDesc: imageDesc,
+      svgDesc: svgDesc,
+      htmlDesc: htmlDesc,
+  };
+
   var index = {
+      is: is,
+      check: check,
       time: {
           delay: delay,
           compose: compose,
@@ -280,7 +703,8 @@ var iDrawUtil = (function () {
       istype: istype,
       data: {
           deepClone: deepClone,
-      }
+      },
+      Context: Context,
   };
 
   return index;