vislite 1.2.0-alpha.6 → 1.2.0-beta.0

package/lib/move/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* move of VISLite JavaScript Library v1.2.0-alpha.6
+* move of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function t(t,r,a,e,n){var u=Math.sqrt(t*t+r*r);return[t*a/u+e,r*a/u+n]}export{t as default};

package/lib/rotate/index.es.js

@@ -1,5 +1,5 @@
 /*!
-* rotate of VISLite JavaScript Library v1.2.0-alpha.6
+* rotate of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function rotate (cx, cy, deg, x, y) {

package/lib/rotate/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* rotate of VISLite JavaScript Library v1.2.0-alpha.6
+* rotate of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function t(t,a,n,r,e){var o=Math.cos(n),s=Math.sin(n);return[(r-t)*o-(e-a)*s+t,(r-t)*s+(e-a)*o+a]}export{t as default};

package/lib/ruler/index.es.js

@@ -1,5 +1,5 @@
 /*!
-* ruler of VISLite JavaScript Library v1.2.0-alpha.6
+* ruler of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function ruler (maxValue, minValue, num, option) {

package/lib/ruler/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* ruler of VISLite JavaScript Library v1.2.0-alpha.6
+* ruler of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function n(n,r,t,e){if(n<r){var i=r;r=n,n=i}else if(n==r)return[n];var a=function(n){for(var r=n<100&&n>-100?10:.1,t=-1,e=n;10==r?e>=-100&&e<=100:e<=-100||e>=100;)t+=1,e*=r;if(10==r)return Math.pow(10,t);for(var i="0.",a=1;a<t;a++)i+="0";return+(i+"1")}(n-r),u=Math.ceil((n-r)*a/t),f=function(t){var e=({3:2,4:5,6:5,7:5,8:10,9:10,11:10,12:10,13:15,14:15,16:15,17:15,18:20,19:20,21:20,22:20,23:25,24:25,26:25,27:25}[u+t]||u+t)/a,i=Math.floor(r/e)*e,f=[];f.push(i);for(var l=1;f[f.length-1]<n;l++)f.push(i+e*l);return f},l=f(0),o=function(){for(var n=[],t=l[l.length-1]-(null==e?void 0:e.max),i=0;i<l.length;i++)i+1<l.length&&l[i+1]-t<r||n.push(l[i]-t);return n},h=function(){for(var r=[],t=l[0]-(null==e?void 0:e.min),i=0;i<l.length&&(r[i]=l[i]-t,!(n<=r[i]));i++);return r};if(e){if("max"in e&&"min"in e&&e.max>=n&&e.min<=r){var m=function(){if(l[0]>=e.min&&l[l.length-1]<=e.max)return!0;var n=o();if(n[0]>=e.min&&n[n.length-1]<=e.max)return l=n,!0;var r=h();return r[0]>=e.min&&r[n.length-1]<=e.max?(l=r,!0):void 0};if(m())return l;for(var v=1;v<100;v++){if(l=f(v),m())return l;if(l=f(-v),m())return l}}"max"in e&&e.max>=n?e.max<l[l.length-1]&&(l=o()):"min"in e&&e.min<=r&&e.min>l[0]&&(l=h())}for(var g=0;g<l.length;g++){var s=l[g]+"";/\./.test(s)&&(/9{7,}$/.test(s)?(s=s.replace(/9{7,}$/,""),l[g]=+(s.substring(0,s.length-1)+(+s[s.length-1]+1))):/0{7,}\d$/.test(s)&&(l[g]=+s.replace(/0{7,}\d$/,"")))}return l}export{n as default};

package/lib/scale/index.es.js

@@ -1,5 +1,5 @@
 /*!
-* scale of VISLite JavaScript Library v1.2.0-alpha.6
+* scale of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function scale (cx, cy, times, x, y) {

package/lib/scale/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* scale of VISLite JavaScript Library v1.2.0-alpha.6
+* scale of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function t(t,e,n,r,u){return[n*(r-t)+t,n*(u-e)+e]}export{t as default};

package/lib/throttle/index.es.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of VISLite JavaScript Library v1.2.0-alpha.6
+* throttle of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function throttle(callback, _option) {

package/lib/throttle/index.es.min.js

@@ -1,5 +1,5 @@
 /*!
-* throttle of VISLite JavaScript Library v1.2.0-alpha.6
+* throttle of VISLite JavaScript Library v1.2.0-beta.0
 * git+https://github.com/oi-contrib/VISLite.git
 */
 function t(t,e){var n={time:200,keep:!1,opportunity:"end"};if(e)for(var p in e)n[p]=e[p];var r,i=!1,o=!1,a=!1;return function(){const e=this;if(r=arguments,i)o=!0,a=!0;else{"end"!=n.opportunity&&t.apply(e,r),i=!0;var p=setInterval((()=>{o?n.keep||t.apply(e,r):("begin"!=n.opportunity&&(a||"end"==n.opportunity)&&t.apply(e,r),i=!1,a=!1,clearInterval(p)),o=!1}),n.time)}}}export{t as default};

package/minialipay/ui-canvas/drawImage.js

@@ -0,0 +1,36 @@
+export default function (_this, drawImage, canvas) {
+    return function (imgUrl, x, y, w, h) {
+        return new Promise((resolve) => {
+
+            let doit = (imgsrc) => {
+                if (canvas.createImage) {
+                    let img = canvas.createImage();
+                    img.onload = function () {
+                        drawImage.call(_this, img, x, y, w, h, true).then(() => {
+                            resolve({});
+                        });
+                    };
+                    img.src = imgsrc;
+                }
+
+                // 低版本兼容
+                else {
+                    drawImage.call(_this, imgsrc, x, y, w, h, true).then(() => {
+                        resolve({});
+                    });
+                }
+            };
+
+            if (/^http/.test(imgUrl)) {
+                my.downloadFile({
+                    url: imgUrl,
+                    success: function (res) {
+                        doit(res.tempFilePath);
+                    },
+                })
+            } else {
+                doit(imgUrl);
+            }
+        });
+    };
+};

package/minialipay/ui-canvas/index.acss

@@ -0,0 +1,5 @@
+/* 辅助的区域不应该可以看见 */
+.region {
+  position: fixed;
+  left: 50000px;
+}

package/minialipay/ui-canvas/index.axml

@@ -0,0 +1,4 @@
+<view>
+    <canvas type="2d" id="{{'painter-'+uniqueid}}" style="{{'width:'+(width+'px')+';'+('height:'+(height+'px')+';')}}" width="{{2*width+'px'}}" height="{{2*height+'px'}}" onTouchStart="doitstart"></canvas>
+    <canvas a:if="{{region}}" type="2d" id="{{'region-'+uniqueid}}" style="{{'width:'+(width+'px')+';'+('height:'+(height+'px')+';')}}" id="{{'region-'+uniqueid}}" class="region"></canvas>
+</view>

package/minialipay/ui-canvas/index.d.ts

@@ -0,0 +1 @@
+export {};

package/minialipay/ui-canvas/index.js

@@ -0,0 +1,101 @@
+import RawCanvas from "../../lib/RawCanvas/index.es.min.js";
+import drawImage from "./drawImage.js";
+
+// https://opendocs.alipay.com/mini/framework/custom-component-overview
+
+Component({
+    props: {
+        width: 300,
+        height: 150,
+        region: true,
+        onDoTouchstart: () => { }
+    },
+    data: {
+        uniqueid: (Math.random() * 10000).toFixed(0),
+        help: {}
+    },
+    methods: {
+        fetch() {
+            return new Promise((resolve, reject) => {
+
+                let getCanvasContext = (idName, doback) => {
+                    if (idName != 'region' || this.props.region) {
+                        my.createSelectorQuery().select('#' + idName + '-' + this.data.uniqueid).node().exec((res) => {
+                            const canvas = res[0].node;
+                            const ctx = canvas.getContext('2d');
+
+                            if (idName != "region") {
+                                ctx.scale(2, 2);
+                            }
+
+                            doback(ctx, idName != 'region' ? canvas : null);
+
+                        })
+                    } else {
+                        doback(null);
+                    }
+                };
+
+                getCanvasContext("painter", (painter, panvas) => {
+                    getCanvasContext("region", region => {
+
+                        this.data.help.instance = new RawCanvas({
+                            getContext() {
+                                return painter;
+                            }
+                        }, this.props.region ? {
+                            getContext() {
+                                return region;
+                            }
+                        } : null);
+
+                        this.data.help.instance.toDataURL = () => {
+                            return new Promise((resolveUrl) => {
+                                if (panvas.toDataURL) {
+                                    resolveUrl(panvas.toDataURL());
+                                } else {
+                                    panvas.toTempFilePath({
+                                        x: 0,
+                                        y: 0,
+                                        width: this.props.widht,
+                                        height: this.props.height,
+                                        success(e) {
+                                            resolveUrl(e.tempFilePath);
+                                        },
+                                        fail(error) {
+                                            console.error(error);
+                                        }
+                                    });
+                                }
+                            });
+                        };
+
+                        this.data.help.instance.drawImage = drawImage(
+                            this.data.help.instance,
+                            this.data.help.instance.drawImage,
+                            panvas
+                        );
+
+                        resolve(this.data.help.instance);
+                    });
+                });
+
+            });
+        },
+        doit(event) {
+            let x = event.touches[0].x;
+            let y = event.touches[0].y;
+
+            this.data.help.instance.getRegion(x, y).then((regionName) => {
+                this.props.onDoTouchstart({
+                    name: regionName,
+                    x: x,
+                    y: y
+                });
+            });
+        },
+        doitstart(event) {
+            this.doit(event);
+        }
+    }
+});

package/minialipay/ui-canvas/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vislite",
-  "version": "1.2.0-alpha.6",
+  "version": "1.2.0-beta.0",
   "description": "灵活、快速、简单的数据可视化交互式跨端前端库",
   "main": "./lib/index.umd.min.js",
   "typings": "./types/index.d.ts",

package/src/common/canvas/default.ts

@@ -0,0 +1,62 @@
+import type { arcCapType } from '../../../types/painterConfig'
+
+export default function (type?: string) {
+
+    let special = {
+        // 文字大小
+        "fontSize": 16,
+
+        // 字体
+        "fontFamily": "sans-serif",
+
+        // 字重
+        "fontWeight": 400,
+
+        // 字类型
+        "fontStyle": "normal",
+
+        // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
+        "arcStartCap": <arcCapType>'butt',
+
+        // 圆弧结束端闭合方式，和上一个类似
+        "arcEndCap": <arcCapType>'butt'
+    }
+
+    let init = {
+        // 填充色或图案
+        "fillStyle": 'black',
+
+        // 轮廓色或图案
+        "strokeStyle": 'black',
+
+        // 线条宽度(单位px，下同)
+        "lineWidth": 1,
+
+        // 线的端点类型，（"butt"平直边缘、"round"半圆和"square"矩形）
+        "lineCap": "butt",
+
+        // 线的拐角连接方式，（"miter"连接处边缘延长相接、"bevel"对角线斜角和"round"圆）
+        "lineJoin": "miter",
+
+        // 设置线条虚线，应该是一个数组[number,...]
+        "lineDash": [],
+
+        // 文字水平对齐方式（"left"左对齐、"center"居中和"right"右对齐）
+        "textAlign": 'left',
+
+        // 文字垂直对齐方式（"middle"垂直居中、"top"上对齐和"bottom"下对齐）
+        "textBaseline": 'middle',
+
+        // 阴影的模糊系数，默认0，也就是无阴影
+        "shadowBlur": 0,
+
+        // 阴影的颜色
+        "shadowColor": "black"
+    }
+
+    if (type == 'special') return special
+    else if (type == 'init') return init
+    else return {
+        ...special, ...init
+    }
+}

package/src/common/canvas/index.ts

@@ -5,6 +5,7 @@ import PainterRender from "./painter"
 import assemble from "../assemble"
 import { linearGradient, radialGradient, conicGradient } from "./gradient"
 import { initText } from './config'
+import defaultFactory from "./default"
 
 class Canvas extends PainterRender {
     readonly name: string = "Canvas"
@@ -33,12 +34,17 @@ class Canvas extends PainterRender {
 
     config(configs: CanvasConfigType) {
         for (const key in configs) {
-            this.useConfig(key, configs[key])
+            this.useConfig(key, (configs as any)[key])
         }
 
         return this
     }
 
+    reset() {
+        this.config(defaultFactory() as CanvasConfigType)
+        return this
+    }
+
     // 是否绘制的内容只需要进行区域记录
     onlyRegion(flag: boolean) {
         this.__onlyRegion = flag
@@ -54,14 +60,14 @@ class Canvas extends PainterRender {
     setRegion(regionName: string | number) {
         if (this.__region) {
             if (regionName) {
-                if (this.__regionList[regionName] == void 0) {
-                    const tempColor = this.__regionAssemble()
-                    this.__regionList[regionName] =
+                if ((this.__regionList as any)[regionName] == void 0) {
+                    const tempColor = this.__regionAssemble();
+                    (this.__regionList as any)[regionName] =
                         "rgb(" + tempColor[0] + "," + tempColor[1] + "," + tempColor[2] + ")"
                 }
 
-                this.__region.useConfig("fillStyle", this.__regionList[regionName]) &&
-                    this.__region.useConfig("strokeStyle", this.__regionList[regionName])
+                this.__region.useConfig("fillStyle", (this.__regionList as any)[regionName]) &&
+                    this.__region.useConfig("strokeStyle", (this.__regionList as any)[regionName])
             } else {
                 this.__region.useConfig("fillStyle", "#000000") &&
                     this.__region.useConfig("strokeStyle", "#000000")
@@ -93,7 +99,7 @@ class Canvas extends PainterRender {
                             "," +
                             currentRGBA[2] +
                             ")" ==
-                            this.__regionList[key]
+                            (this.__regionList as any)[key]
                         ) {
                             resolve(key)
                             break

package/src/common/canvas/painter.ts

@@ -1,8 +1,8 @@
-import type { arcCapType } from '../../../types/painterConfig'
 import type CanvasOptsType from '../../../types/CanvasOpts'
 
 import { initText, initArc, initCircle, initRect } from './config'
 import texts from './texts'
+import defaultFactory from "./default"
 
 class Painter {
 
@@ -16,62 +16,11 @@ class Painter {
 
     // 用于记录配置
     // 因为部分配置的设置比较特殊，只先记录意图
-    __specialConfig = {
-
-        // 文字大小
-        "fontSize": 16,
-
-        // 字体
-        "fontFamily": "sans-serif",
-
-        // 字重
-        "fontWeight": 400,
-
-        // 字类型
-        "fontStyle": "normal",
-
-        // 圆弧开始端闭合方式（"butt"直线闭合、"round"圆帽闭合）
-        "arcStartCap": <arcCapType>'butt',
-
-        // 圆弧结束端闭合方式，和上一个类似
-        "arcEndCap": <arcCapType>'butt'
-    } as {
+    __specialConfig = defaultFactory("special") as {
         [key: string]: any
     }
 
-    private __initConfig = {
-
-        // 填充色或图案
-        "fillStyle": 'black',
-
-        // 轮廓色或图案
-        "strokeStyle": 'black',
-
-        // 线条宽度(单位px，下同)
-        "lineWidth": 1,
-
-        // 线的端点类型，（"butt"平直边缘、"round"半圆和"square"矩形）
-        "lineCap": "butt",
-
-        // 线的拐角连接方式，（"miter"连接处边缘延长相接、"bevel"对角线斜角和"round"圆）
-        "lineJoin": "miter",
-
-        // 设置线条虚线，应该是一个数组[number,...]
-        "lineDash": [],
-
-        // 文字水平对齐方式（"left"左对齐、"center"居中和"right"右对齐）
-        "textAlign": 'left',
-
-        // 文字垂直对齐方式（"middle"垂直居中、"top"上对齐和"bottom"下对齐）
-        "textBaseline": 'middle',
-
-        // 阴影的模糊系数，默认0，也就是无阴影
-        "shadowBlur": 0,
-
-        // 阴影的颜色
-        "shadowColor": "black"
-
-    }
+    private __initConfig = defaultFactory("init")
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     constructor(canvas: HTMLCanvasElement, opts: CanvasOptsType = {}, region?: Painter, isPainter = false, scaleSize = 1) {
@@ -122,7 +71,7 @@ class Painter {
 
         // 其它情况直接生效即可
         else if (key in this.__initConfig) {
-            this.painter[key] = value
+            (this.painter as any)[key] = value
         }
 
         // 如果属性未被定义
@@ -446,12 +395,12 @@ class Painter {
             if (typeof img == 'string' && !isImage) {
                 const imgInstance = new Image()
                 imgInstance.onload = () => {
-                    this.painter.drawImage(imgInstance, 0, 0, imgInstance.width, imgInstance.height, x, y, w, h)
+                    this.painter.drawImage(imgInstance, x, y, w, h)
                     resolve({})
                 }
                 imgInstance.src = img
             } else {
-                this.painter.drawImage(img as CanvasImageSource, 0, 0, w, h, x, y, w, h)
+                this.painter.drawImage(img as CanvasImageSource, x, y, w, h)
                 resolve({})
             }
 
@@ -467,7 +416,7 @@ class Painter {
             if (key in this) {
                 throw new Error("VISLite Canvas:Method already exists and cannot be overwritten.")
             } else {
-                this[key] = (...args: any) => {
+                (this as any)[key] = (...args: any) => {
                     let value = methods[key].apply(this, args)
                     if (value != void 0) return value
                     return this

package/src/common/svg/default.ts

@@ -0,0 +1,27 @@
+import type { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from "../../../types/painterConfig"
+
+export default function () {
+    return {
+        // 颜色
+        fillStyle: "#000",
+        strokeStyle: "#000",
+
+        // 文字对齐方式
+        textAlign: <textAlignType>"left",
+        textBaseline: <textBaselineType>"middle",
+
+        // 文字
+        "fontSize": 16,
+        "fontFamily": "sans-serif",
+
+        // arc二端闭合方式['butt':直线闭合,'round':圆帽闭合]
+        "arcStartCap": <arcCapType>"butt",
+        "arcEndCap": <arcCapType>"butt",
+
+        // 线条
+        lineDash: [],
+        lineWidth: 1,
+        lineCap: <lineCapType>"butt",
+        lineJoin: <lineJoinType>"miter"
+    }
+}

package/src/common/svg/index.ts

@@ -1,39 +1,16 @@
 import type { default as SVGConfigType, svgElType, svgBoardType } from "../../../types/SVGConfig"
-import type { arcCapType, textAlignType, textBaselineType, lineCapType, lineJoinType } from "../../../types/painterConfig"
 
 import { initText, initCircle, initPath, initRect, initArc } from "./config"
 import { toNode, setAttribute, getAttribute, full, fill, stroke } from "./tool"
 import rotate from "../../rotate"
 import { linearGradient, radialGradient } from "./gradient"
+import defaultFactory from "./default"
 
 class SVG {
     readonly name: string = "SVG"
 
     // 用于记录配置
-    private __config = {
-
-        // 颜色
-        fillStyle: "#000",
-        strokeStyle: "#000",
-
-        // 文字对齐方式
-        textAlign: <textAlignType>"left",
-        textBaseline: <textBaselineType>"middle",
-
-        // 文字
-        "fontSize": 16,
-        "fontFamily": "sans-serif",
-
-        // arc二端闭合方式['butt':直线闭合,'round':圆帽闭合]
-        "arcStartCap": <arcCapType>"butt",
-        "arcEndCap": <arcCapType>"butt",
-
-        // 线条
-        lineDash: [],
-        lineWidth: 1,
-        lineCap: <lineCapType>"butt",
-        lineJoin: <lineJoinType>"miter"
-    }
+    private __config = defaultFactory()
 
     // 作用的节点
     private __useEl: SVGElement
@@ -53,12 +30,17 @@ class SVG {
             return this.__config[params]
         } else {
             for (const key in params) {
-                this.__config[key] = params[key]
+                (this.__config as any)[key] = (params as any)[key]
             }
         }
         return this
     }
 
+    reset() {
+        this.config(defaultFactory())
+        return this
+    }
+
     /**
      * 基础方法
      * ---------------------------------

package/types/Canvas.d.ts

@@ -7,6 +7,11 @@ export default interface CanvasType {
      */
     config(configs: CanvasConfigType): this
 
+    /**
+     * 重置
+     */
+    reset(): this
+
     /**
      * 绘制一个实心文字
      * @param text 需要绘制的文字

package/types/SVG.d.ts

@@ -8,6 +8,11 @@ export default interface SVGType {
      */
     config(configs: SVGConfigType): this
 
+    /**
+    * 重置
+    */
+    reset(): this
+
     /**
      * 标记应用节点
      */