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

package/dist/index.cjs.js

@@ -73,7 +73,7 @@ function createUUID() {
 
 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;
         }
@@ -95,7 +95,7 @@ function deepClone(target) {
     }
     return _clone(target);
 }
-function is(data) {
+function is$1(data) {
     return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
 }
 
@@ -138,6 +138,16 @@ var istype = {
     },
 };
 
+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) {
@@ -254,7 +264,420 @@ function loadHTML(html, opts) {
     });
 }
 
+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,
@@ -279,7 +702,8 @@ var index = {
     istype: istype,
     data: {
         deepClone: deepClone,
-    }
+    },
+    Context: Context,
 };
 
 module.exports = index;

package/dist/index.d.ts

@@ -1,10 +1,112 @@
+import { TypeBoardSizeOptions } from '@idraw/types';
+import { TypeContext } from '@idraw/types';
+
 declare function compose(middleware: Middleware[]): (context: any, next?: Middleware) => any;
 
+declare class Context implements TypeContext {
+    private _opts;
+    private _ctx;
+    private _transform;
+    constructor(ctx: CanvasRenderingContext2D, opts: Options);
+    getContext(): CanvasRenderingContext2D;
+    resetSize(opts: TypeBoardSizeOptions): void;
+    calcDeviceNum(num: number): number;
+    calcScreenNum(num: number): number;
+    getSize(): {
+        width: number;
+        height: number;
+        contextWidth: number;
+        contextHeight: number;
+        devicePixelRatio: number;
+    };
+    setTransform(config: Transform): void;
+    getTransform(): {
+        scale: number;
+        scrollX: number;
+        scrollY: number;
+    };
+    setFillStyle(color: string | CanvasPattern | CanvasGradient): void;
+    fill(fillRule?: CanvasFillRule | undefined): void;
+    arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean | undefined): void;
+    rect(x: number, y: number, w: number, h: number): void;
+    fillRect(x: number, y: number, w: number, h: number): void;
+    clearRect(x: number, y: number, w: number, h: number): void;
+    beginPath(): void;
+    closePath(): void;
+    lineTo(x: number, y: number): void;
+    moveTo(x: number, y: number): void;
+    arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+    setLineWidth(w: number): number;
+    setLineDash(nums: number[]): void;
+    isPointInPath(x: number, y: number): boolean;
+    isPointInPathWithoutScroll(x: number, y: number): boolean;
+    setStrokeStyle(color: string): void;
+    stroke(): void;
+    translate(x: number, y: number): void;
+    rotate(angle: number): void;
+    drawImage(...args: any[]): void;
+    createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null;
+    measureText(text: string): TextMetrics;
+    setTextAlign(align: CanvasTextAlign): void;
+    fillText(text: string, x: number, y: number, maxWidth?: number | undefined): void;
+    strokeText(text: string, x: number, y: number, maxWidth?: number | undefined): void;
+    setFont(opts: {
+        fontSize: number;
+        fontFamily?: string;
+        fontWeight?: 'bold';
+    }): void;
+    setTextBaseline(baseline: CanvasTextBaseline): void;
+    setGlobalAlpha(alpha: number): void;
+    save(): void;
+    restore(): void;
+    scale(ratioX: number, ratioY: number): void;
+    setShadowColor(color: string): void;
+    setShadowOffsetX(offsetX: number): void;
+    setShadowOffsetY(offsetY: number): void;
+    setShadowBlur(blur: number): void;
+    ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean | undefined): void;
+    private _doSize;
+    private _doX;
+    private _doY;
+}
+
 declare function createUUID(): string;
 
 declare function deepClone(target: any): any;
 
 declare const _default: {
+    is: {
+        x: (value: any) => boolean;
+        y: (value: any) => boolean;
+        w: (value: any) => boolean;
+        h: (value: any) => boolean;
+        angle: (value: any) => boolean;
+        number: (value: any) => boolean;
+        borderWidth: (value: any) => boolean;
+        borderRadius: (value: any) => boolean;
+        color: (value: any) => boolean;
+        imageSrc: (value: any) => boolean;
+        imageURL: (value: any) => boolean;
+        imageBase64: (value: any) => boolean;
+        svg: (value: any) => boolean;
+        html: (value: any) => boolean;
+        text: (value: any) => boolean;
+        fontSize: (value: any) => boolean;
+        lineHeight: (value: any) => boolean;
+        textAlign: (value: any) => boolean;
+        fontFamily: (value: any) => boolean;
+        fontWeight: (value: any) => boolean;
+        strokeWidth: (value: any) => boolean;
+    };
+    check: {
+        attrs: (attrs: any) => boolean;
+        textDesc: (desc: any) => boolean;
+        rectDesc: (desc: any) => boolean;
+        circleDesc: (desc: any) => boolean;
+        imageDesc: (desc: any) => boolean;
+        svgDesc: (desc: any) => boolean;
+        htmlDesc: (desc: any) => boolean;
+    };
     time: {
         delay: typeof delay;
         compose: typeof compose;
@@ -41,6 +143,7 @@ declare const _default: {
     data: {
         deepClone: typeof deepClone;
     };
+    Context: typeof Context;
 };
 export default _default;
 
@@ -66,10 +169,24 @@ declare function loadSVG(svg: string): Promise<HTMLImageElement>;
 
 declare type Middleware = (ctx: any, next: Middleware) => any;
 
+declare type Options = {
+    width: number;
+    height: number;
+    contextWidth: number;
+    contextHeight: number;
+    devicePixelRatio: number;
+};
+
 declare function throttle(fn: (...args: any[]) => any, timeout: number): (...args: any[]) => any;
 
 declare function toColorHexNum(color: string): number;
 
 declare function toColorHexStr(color: number): string;
 
+declare type Transform = {
+    scale?: number;
+    scrollX?: number;
+    scrollY?: number;
+};
+
 export { }