mp-painter - npm Package Compare versions

Comparing version 0.0.14 to 0.1.0

dist/lib/painter.d.ts

 /// <reference types="uni-app" />
-import { CanvasLine } from "./paint-line";
-import { CanvasRect } from "./paint-rect";
-import { CanvasImage } from "./paint-image";
-import { CanvasText } from "./paint-text";
-import { CanvasTextBlock } from "./paint-text-block";
-import { CanvasContainer } from "./paint-container";
+import { PainterLineElementOption, PainterLineElement } from "./painter-element/paint-line";
+import { PainterRectagleElementOption, PainterRectagleElement } from "./painter-element/paint-rect";
+import { PainterImageElementOption, PainterImageElement } from "./painter-element/paint-image";
+import { PainterTextElementOption, PainterTextElement } from "./painter-element/paint-text";
+import { PainterTextBlockElementOption, PainterTextBlockElement } from "./painter-element/paint-text-block";
+import { PainterContainerElementOption, PainterContainerElement } from "./painter-element/paint-container";
 import { UniPlatforms } from "../utils/platform";
+import { Size, Position } from "./value";
+import PainterElement from "./painter-element/paint-element";
 interface IPanterOption {
@@ -13,12 +15,9 @@ upx2px?: (upx: number) => number;
 }
-export interface PaintBaseOption {
-    position: "static" | "absolute";
+export interface PainterElementBaseOption {
+    type: string;
+    position: Position;
     left: number;
     top: number;
 }
-export declare type CanvasObj = CanvasImage | CanvasText | CanvasTextBlock | CanvasLine | CanvasContainer | CanvasRect;
-interface ISize {
-    width: number;
-    height: number;
-}
+export declare type PainterElementOption = PainterTextElementOption | PainterTextBlockElementOption | PainterImageElementOption | PainterLineElementOption | PainterRectagleElementOption | PainterContainerElementOption;
 export default class Painter {
@@ -29,4 +28,5 @@ ctx: CanvasContext;
     constructor(ctx: CanvasContext, { platform, }?: IPanterOption);
-    draw(paintObj: CanvasObj): Promise<ISize>;
-    _drawObj<T extends CanvasObj>(paintObj: T): Promise<ISize>;
+    draw(element: PainterElementOption): Promise<Size>;
+    _drawObj(paintObj: PainterElementOption): Promise<Size>;
+    createElement(paintOption: PainterElementOption, parent?: PainterElement): PainterLineElement | PainterRectagleElement | PainterImageElement | PainterTextElement | PainterTextBlockElement | PainterContainerElement;
     /**
@@ -33,0 +33,0 @@ * 兼容设置填充样式

dist/lib/painter.js

@@ -38,14 +38,12 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var delay_1 = require("../utils/delay");
-var paint_line_1 = __importDefault(require("./paint-line"));
-var paint_rect_1 = __importDefault(require("./paint-rect"));
-var paint_image_1 = __importDefault(require("./paint-image"));
-var paint_text_1 = __importDefault(require("./paint-text"));
-var paint_text_block_1 = __importDefault(require("./paint-text-block"));
-var paint_container_1 = __importDefault(require("./paint-container"));
+var paint_line_1 = require("./painter-element/paint-line");
+var paint_rect_1 = require("./painter-element/paint-rect");
+var paint_image_1 = require("./painter-element/paint-image");
+var paint_text_1 = require("./painter-element/paint-text");
+var paint_text_block_1 = require("./painter-element/paint-text-block");
+var paint_container_1 = require("./painter-element/paint-container");
 var platform_1 = require("../utils/platform");
+var const_1 = require("./const");
 // 开启会导致支付宝小程序报错
@@ -59,4 +57,2 @@ var debug = function () {
 }; //console.log(...v);
-/** 从 0x20 开始到 0x80 的字符宽度数据 */
-var CHAR_WIDTH_SCALE_MAP = [0.296, 0.313, 0.436, 0.638, 0.586, 0.89, 0.87, 0.256, 0.334, 0.334, 0.455, 0.742, 0.241, 0.433, 0.241, 0.427, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.241, 0.241, 0.742, 0.742, 0.742, 0.483, 1.031, 0.704, 0.627, 0.669, 0.762, 0.55, 0.531, 0.744, 0.773, 0.294, 0.396, 0.635, 0.513, 0.977, 0.813, 0.815, 0.612, 0.815, 0.653, 0.577, 0.573, 0.747, 0.676, 1.018, 0.645, 0.604, 0.62, 0.334, 0.416, 0.334, 0.742, 0.448, 0.295, 0.553, 0.639, 0.501, 0.64, 0.567, 0.347, 0.64, 0.616, 0.266, 0.267, 0.544, 0.266, 0.937, 0.616, 0.636, 0.639, 0.64, 0.382, 0.463, 0.373, 0.616, 0.525, 0.79, 0.507, 0.529, 0.492, 0.334, 0.269, 0.334, 0.742, 0.296];
 var Painter = /** @class */ (function () {
@@ -72,3 +68,3 @@ function Painter(ctx, _a) {
     }
-    Painter.prototype.draw = function (paintObj) {
+    Painter.prototype.draw = function (element) {
         return __awaiter(this, void 0, void 0, function () {
@@ -79,3 +75,3 @@ var size;
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, this._drawObj(paintObj)];
+                    case 0: return [4 /*yield*/, this._drawObj(element)];
                     case 1:
@@ -102,19 +98,14 @@ size = _a.sent();
         return __awaiter(this, void 0, void 0, function () {
-            var drawMethod;
+            var element, size;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        drawMethod = {
-                            "text": paint_text_1.default,
-                            "image": paint_image_1.default,
-                            "text-block": paint_text_block_1.default,
-                            "line": paint_line_1.default,
-                            "rect": paint_rect_1.default,
-                            "container": paint_container_1.default
-                        }[paintObj.type];
-                        if (!drawMethod) {
-                            throw new TypeError("Unkown paint obj type: " + paintObj.type);
-                        }
-                        return [4 /*yield*/, drawMethod.call(this, paintObj)];
-                    case 1: return [2 /*return*/, _a.sent()];
+                        element = this.createElement(paintObj);
+                        return [4 /*yield*/, element.layout()];
+                    case 1:
+                        size = _a.sent();
+                        return [4 /*yield*/, element.paint()];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/, size];
                 }
@@ -124,2 +115,13 @@ });
     };
+    Painter.prototype.createElement = function (paintOption, parent) {
+        switch (paintOption.type) {
+            case "text": return new paint_text_1.PainterTextElement(this, paintOption, parent);
+            case "text-block": return new paint_text_block_1.PainterTextBlockElement(this, paintOption, parent);
+            case "image": return new paint_image_1.PainterImageElement(this, paintOption, parent);
+            case "line": return new paint_line_1.PainterLineElement(this, paintOption, parent);
+            case "rect": return new paint_rect_1.PainterRectagleElement(this, paintOption, parent);
+            case "container": return new paint_container_1.PainterContainerElement(this, paintOption, parent);
+            default: throw new TypeError("Unkown painter element type");
+        }
+    };
     /**
@@ -154,3 +156,3 @@ * 兼容设置填充样式
         }
-        if (this.platform == "mp-alipay") {
+        else if (this.platform == "mp-alipay") {
             // 在支付宝 iOS 中获取字符串宽度时, 如果字符串数量较多，可能获取不到正确的宽度
@@ -160,3 +162,3 @@ // 获取到的宽度会始终比换行所需的宽度小，无法正确换行。
                 var code = char.charCodeAt(0);
-                var widthScale = CHAR_WIDTH_SCALE_MAP[code - 0x20] || 1;
+                var widthScale = const_1.CHAR_WIDTH_SCALE_MAP[code - 0x20] || 1;
                 return widthScaleSum + widthScale;
@@ -163,0 +165,0 @@ }, 0) * fontSize;

dist/utils/delay.d.ts

@@ -5,2 +5,2 @@ /**
  */
-export declare function delay(timespan: number): Promise<void>;
+export declare function delay(timespan?: number): Promise<void>;

dist/utils/delay.js

@@ -8,2 +8,3 @@ "use strict";
 function delay(timespan) {
+    if (timespan === void 0) { timespan = 0; }
     return new Promise(function (resolve) { return setTimeout(resolve, timespan); });
@@ -10,0 +11,0 @@ }

dist/utils/promiseQueue.js

 "use strict";
+var __awaiter = (this && this.__awaiter) || function (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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 function promiseQueue(queue) {
-    return new Promise(function (resolve, reject) {
-        var i = 0;
-        var l = queue.length;
-        var results = [];
-        if (l == 0)
-            resolve([]);
-        queue[i]().then(next).catch(reject);
-        function next(ret) {
-            results.push(ret);
-            i++;
-            i < l
-                ? queue[i]().then(next)
-                : resolve(results);
+    var _this = this;
+    return queue.reduce(function (resultPromise, queueItem) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0: return [4 /*yield*/, resultPromise];
+            case 1:
+                _a = [_b.sent()];
+                return [4 /*yield*/, queueItem()];
+            case 2: return [2 /*return*/, __spreadArrays.apply(void 0, _a.concat([[_b.sent()]]))];
         }
-    });
+    }); }); }, Promise.resolve([]));
 }
 exports.promiseQueue = promiseQueue;
 //# sourceMappingURL=promiseQueue.js.map

package.json

 {
   "name": "mp-painter",
-  "version": "0.0.14",
+  "version": "0.1.0",
   "description": "A declarative canvas lib using with mini-program, espacially with uniapp.",
@@ -8,4 +8,5 @@ "main": "dist/lib/painter.js",
   "scripts": {
-    "dev": "tsc -w -p src",
-    "build": "tsc -p src",
+    "test": "jest",
+    "dev": "tsc -w",
+    "build": "tsc",
     "prepublish": "npm run build"
@@ -25,7 +26,12 @@ },
   "dependencies": {
-    "@types/uni-app": "^1.4.1"
+    "debug": "^4.1.1"
   },
   "devDependencies": {
-    "typescript": "^3.6.2"
+    "@types/uni-app": "^1.4.1",
+    "@types/debug": "^4.1.5",
+    "@types/jest": "^24.0.23",
+    "jest": "^24.9.0",
+    "ts-jest": "^24.2.0",
+    "typescript": "^3.7.4"
   }
 }

src/lib/painter.ts

 import { delay } from "../utils/delay";
 
-import paintLine, { CanvasLine } from "./paint-line";
-import paintRect, { CanvasRect } from "./paint-rect";
-import paintImage, { CanvasImage } from "./paint-image";
-import paintText, { CanvasText, PaintTextObject } from "./paint-text";
-import paintTextBlock, { CanvasTextBlock } from "./paint-text-block";
-import paintContainer, { CanvasContainer } from "./paint-container";
+import { PainterLineElementOption, PainterLineElement } from "./painter-element/paint-line";
+import { PainterRectagleElementOption, PainterRectagleElement } from "./painter-element/paint-rect";
+import { PainterImageElementOption, PainterImageElement } from "./painter-element/paint-image";
+import { PainterTextElementOption, PainterTextElement } from "./painter-element/paint-text";
+import { PainterTextBlockElementOption, PainterTextBlockElement } from "./painter-element/paint-text-block";
+import { PainterContainerElementOption, PainterContainerElement } from "./painter-element/paint-container";
 import { PLATFORM, UniPlatforms } from "../utils/platform";
+import { Size, Position } from "./value";
+import { CHAR_WIDTH_SCALE_MAP } from "./const";
+import PainterElement from "./painter-element/paint-element";
 
@@ -16,4 +19,5 @@ interface IPanterOption {
 
-export interface PaintBaseOption {
-  position: "static" | "absolute"
+export interface PainterElementBaseOption {
+  type: string
+  position: Position
   left: number
@@ -23,40 +27,13 @@ top: number
 
-interface CanvasObjTypeMap {
-  "text": CanvasText,
-  "text-block": CanvasTextBlock,
-  "image": CanvasImage,
-  "line": CanvasLine,
-  "rect": CanvasRect,
-  "container": CanvasContainer
-}
+export type PainterElementOption =
+  PainterTextElementOption |
+  PainterTextBlockElementOption |
+  PainterImageElementOption |
+  PainterLineElementOption |
+  PainterRectagleElementOption |
+  PainterContainerElementOption;
 
-type CanvasObjType<T extends keyof CanvasObjTypeMap> = CanvasObjTypeMap[T];
-
-export type CanvasObj = CanvasImage | CanvasText | CanvasTextBlock | CanvasLine | CanvasContainer | CanvasRect;
-
-type BasePaintObject = [string, Partial<PaintBaseOption>];
-type PaintObject = PaintTextObject;
-
-interface ISize {
-  width: number,
-  height: number
-}
-
-interface PaintMethod<T extends PaintBaseOption> {
-  (paintOption: T): Promise<ISize>
-}
-
-interface DrawMethod {
-  (
-    /** 要绘制的对象 */
-    paintObj: PaintBaseOption,
-  ): Promise<ISize>
-}
-
 // 开启会导致支付宝小程序报错
 const debug = (...v: any[]) => void 0; //console.log(...v);
 
-/** 从 0x20 开始到 0x80 的字符宽度数据 */
-const CHAR_WIDTH_SCALE_MAP = [0.296, 0.313, 0.436, 0.638, 0.586, 0.89, 0.87, 0.256, 0.334, 0.334, 0.455, 0.742, 0.241, 0.433, 0.241, 0.427, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.586, 0.241, 0.241, 0.742, 0.742, 0.742, 0.483, 1.031, 0.704, 0.627, 0.669, 0.762, 0.55, 0.531, 0.744, 0.773, 0.294, 0.396, 0.635, 0.513, 0.977, 0.813, 0.815, 0.612, 0.815, 0.653, 0.577, 0.573, 0.747, 0.676, 1.018, 0.645, 0.604, 0.62, 0.334, 0.416, 0.334, 0.742, 0.448, 0.295, 0.553, 0.639, 0.501, 0.64, 0.567, 0.347, 0.64, 0.616, 0.266, 0.267, 0.544, 0.266, 0.937, 0.616, 0.636, 0.639, 0.64, 0.382, 0.463, 0.373, 0.616, 0.525, 0.79, 0.507, 0.529, 0.492, 0.334, 0.269, 0.334, 0.742, 0.296];
-
 export default class Painter {
@@ -79,4 +56,4 @@
 
-  async draw(paintObj: CanvasObj){
-    let size = await this._drawObj(paintObj);
+  async draw(element: PainterElementOption){
+    let size = await this._drawObj(element);
 
@@ -93,17 +70,19 @@ // debug("call context draw method");
 
-  async _drawObj<T extends CanvasObj>(paintObj: T){
-    let drawMethod: ((canvasObj: any) => Promise<ISize>) = {
-      "text": paintText,
-      "image": paintImage,
-      "text-block": paintTextBlock,
-      "line": paintLine,
-      "rect": paintRect,
-      "container": paintContainer
-    }[paintObj.type];
+  async _drawObj(paintObj: PainterElementOption){
+    let element = this.createElement(paintObj);
+    let size = await element.layout();
+    await element.paint();
+    return size;
+  }
 
-    if(!drawMethod){
-      throw new TypeError("Unkown paint obj type: " + paintObj.type);
+  createElement(paintOption: PainterElementOption, parent?: PainterElement){
+    switch(paintOption.type){
+      case "text":        return new PainterTextElement     (this, paintOption, parent);
+      case "text-block":  return new PainterTextBlockElement(this, paintOption, parent);
+      case "image":       return new PainterImageElement    (this, paintOption, parent);
+      case "line":        return new PainterLineElement     (this, paintOption, parent);
+      case "rect":        return new PainterRectagleElement (this, paintOption, parent);
+      case "container":   return new PainterContainerElement(this, paintOption, parent);
+      default: throw new TypeError("Unkown painter element type");
     }
-    
-    return await drawMethod.call(this, paintObj);
   }
@@ -132,3 +111,3 @@
   }
-
+  
   measureText(text: string, fontSize: number){
@@ -139,3 +118,4 @@ if(this.platform == "mp-baidu"){
       if(width) return width / 10 * fontSize;
-    } if(this.platform == "mp-alipay") {
+
+    } else if(this.platform == "mp-alipay") {
       // 在支付宝 iOS 中获取字符串宽度时, 如果字符串数量较多，可能获取不到正确的宽度
@@ -148,2 +128,3 @@ // 获取到的宽度会始终比换行所需的宽度小，无法正确换行。
       }, 0) * fontSize;
+
     } else {
@@ -150,0 +131,0 @@ this.ctx.setFontSize(fontSize);

src/utils/delay.ts

@@ -5,4 +5,4 @@ /**
  */
-export function delay(timespan: number): Promise<void>{
+export function delay(timespan: number = 0): Promise<void>{
 	return new Promise(resolve => setTimeout(resolve, timespan));
-}
+}

src/utils/promiseQueue.ts

 export function promiseQueue<T>(queue: (() => Promise<T>)[]): Promise<T[]> {
-    return new Promise((resolve, reject) => {
-        let i = 0;
-        let l = queue.length;
-        let results: T[] = [];
-        if (l == 0) resolve([]);
-
-        queue[i]().then(next).catch(reject);
-        function next(ret: T) {
-            results.push(ret);
-            i++;
-            i < l
-                ? queue[i]().then(next)
-                : resolve(results);
-        }
-    });
-}
+    return queue.reduce(
+        async (resultPromise, queueItem) => [...await resultPromise, await queueItem()], 
+        Promise.resolve([]) as Promise<T[]>
+    );
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

196430

increased by105.66%

Number of package files

94

increased by88%

Lines of code

3200

increased by93.12%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

151

increased byInfinity%

Worsened metrics

Dev dependency count

6

increased by500%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addeddebug@^4.1.1

• + Addeddebug@4.3.5(transitive)

• + Addedms@2.1.2(transitive)

• - Removed@types/uni-app@^1.4.1

• - Removed@babel/parser@7.24.7(transitive)

• - Removed@types/uni-app@1.4.8(transitive)

• - Removed@vue/compiler-sfc@2.7.16(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.7(transitive)

• - Removedpicocolors@1.0.1(transitive)

• - Removedpostcss@8.4.38(transitive)

• - Removedprettier@2.8.8(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-js@1.2.0(transitive)

• - Removedvue@2.7.16(transitive)