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

package/minialipay/ui-canvas/index.js

@@ -1,101 +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);
-        }
-    }
+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

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

package/miniprogram/ui-canvas/index.js

@@ -1,117 +1,117 @@
-import RawCanvas from "../../lib/RawCanvas/index.es.min.js";
-import drawImage from "./drawImage.js";
-
-let dpr = wx.getSystemInfoSync().pixelRatio;
-
-// https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
-
-Component({
-    properties: {
-        width: {
-            type: Number,
-            value: 300
-        },
-        height: {
-            type: Number,
-            value: 150
-        },
-        region: {
-            type: Boolean,
-            value: true
-        }
-    },
-    data: {
-        help: {}
-    },
-    lifetimes: {
-        ready() {
-
-        }
-    },
-    methods: {
-        fetch() {
-            return new Promise((resolve, reject) => {
-
-                let getCanvasContext = (idName, doback) => {
-                    if (idName != 'region' || this.data.region) {
-                        const query = wx.createSelectorQuery().in(this);
-                        query.select('#' + idName)
-                            .fields({ node: true, size: true })
-                            .exec((res) => {
-                                const canvas = res[0].node;
-                                const ctx = canvas.getContext('2d');
-
-                                canvas.width = res[0].width * (idName == "region" ? 1 : dpr);
-                                canvas.height = res[0].height * (idName == "region" ? 1 : dpr);
-
-                                if (idName != "region") {
-                                    ctx.scale(dpr, dpr);
-                                }
-
-                                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.data.region ? {
-                            getContext() {
-                                return region;
-                            }
-                        } : null);
-
-                        this.data.help.instance.toDataURL = () => {
-                            return new Promise((resolveUrl) => {
-                                if (panvas.toDataURL) {
-                                    resolveUrl(panvas.toDataURL());
-                                } else {
-                                    wx.canvasToTempFilePath({
-                                        canvasId: "painter",
-                                        success: function (e) {
-                                            resolveUrl(e.tempFilePath);
-                                        },
-                                        fail: function (e) {
-                                            console.log(e)
-                                        }
-                                    }, this);
-                                }
-                            });
-                        };
-
-                        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.triggerEvent('dotouchstart', {
-                    name: regionName,
-                    x: x,
-                    y: y
-                })
-            });
-        },
-        doitstart(event) {
-            this.doit(event);
-        }
-    }
-
-});
+import RawCanvas from "../../lib/RawCanvas/index.es.min.js";
+import drawImage from "./drawImage.js";
+
+let dpr = wx.getSystemInfoSync().pixelRatio;
+
+// https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
+
+Component({
+    properties: {
+        width: {
+            type: Number,
+            value: 300
+        },
+        height: {
+            type: Number,
+            value: 150
+        },
+        region: {
+            type: Boolean,
+            value: true
+        }
+    },
+    data: {
+        help: {}
+    },
+    lifetimes: {
+        ready() {
+
+        }
+    },
+    methods: {
+        fetch() {
+            return new Promise((resolve, reject) => {
+
+                let getCanvasContext = (idName, doback) => {
+                    if (idName != 'region' || this.data.region) {
+                        const query = wx.createSelectorQuery().in(this);
+                        query.select('#' + idName)
+                            .fields({ node: true, size: true })
+                            .exec((res) => {
+                                const canvas = res[0].node;
+                                const ctx = canvas.getContext('2d');
+
+                                canvas.width = res[0].width * (idName == "region" ? 1 : dpr);
+                                canvas.height = res[0].height * (idName == "region" ? 1 : dpr);
+
+                                if (idName != "region") {
+                                    ctx.scale(dpr, dpr);
+                                }
+
+                                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.data.region ? {
+                            getContext() {
+                                return region;
+                            }
+                        } : null);
+
+                        this.data.help.instance.toDataURL = () => {
+                            return new Promise((resolveUrl) => {
+                                if (panvas.toDataURL) {
+                                    resolveUrl(panvas.toDataURL());
+                                } else {
+                                    wx.canvasToTempFilePath({
+                                        canvasId: "painter",
+                                        success: function (e) {
+                                            resolveUrl(e.tempFilePath);
+                                        },
+                                        fail: function (e) {
+                                            console.log(e)
+                                        }
+                                    }, this);
+                                }
+                            });
+                        };
+
+                        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.triggerEvent('dotouchstart', {
+                    name: regionName,
+                    x: x,
+                    y: y
+                })
+            });
+        },
+        doitstart(event) {
+            this.doit(event);
+        }
+    }
+
+});

package/package.json

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

package/src/Canvas.ts

@@ -1,85 +1,85 @@
-import type CanvasType from '../types/Canvas'
-import type CanvasOptionType from '../types/CanvasOption'
-
-import OralCanvas from './common/canvas/index'
-import { initOption } from './common/option'
-
-class Canvas extends OralCanvas implements CanvasType {
-    private __canvas: HTMLCanvasElement
-    private __el: HTMLElement
-    constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
-        if (!el) {
-            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
-        }
-
-        option = initOption(option, {
-            region: true,
-            willReadFrequently: false
-        })
-
-        width = width || el.clientWidth
-        height = height || el.clientHeight
-
-        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
-
-        const _el = el as any
-
-        // 如果已经初始化过了
-        if (_el._vislite_canvas_) {
-            ViewCanvas = _el._vislite_canvas_[0]
-            RegionCanvas = _el._vislite_canvas_[1]
-        }
-
-        // 否则就初始化
-        else {
-            ViewCanvas = document.createElement('canvas')
-            el.appendChild(ViewCanvas)
-
-            if (option.region) {
-                RegionCanvas = document.createElement('canvas')
-            }
-
-            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
-
-            el.setAttribute('vislite', 'Canvas')
-        }
-
-        // 设置画布大小
-        const canvasArray = [RegionCanvas, ViewCanvas]
-        for (let index = 0; index < canvasArray.length; index++) {
-            const canvas = canvasArray[index]
-            if (canvas) {
-                canvas.style.width = width + "px"
-                canvas.setAttribute('width', (index * width + width) + "")
-
-                canvas.style.height = height + "px"
-                canvas.setAttribute('height', (index * height + height) + "")
-            }
-        }
-
-        super(ViewCanvas, RegionCanvas, {
-            willReadFrequently: option.willReadFrequently,
-        }, 2)
-
-        this.__canvas = ViewCanvas
-        this.__el = el
-        this.painter.scale(2, 2)
-    }
-
-    toDataURL(): Promise<string> {
-        return new Promise(resolve => {
-            resolve(this.__canvas.toDataURL())
-        })
-    }
-
-    bind(eventName: string, callback: (regionName: string, x: number, y: number) => void) {
-        this.__el.addEventListener(eventName, (event: any) => {
-            this.getRegion(event.offsetX, event.offsetY).then(regionName => {
-                callback(regionName, event.offsetX, event.offsetY)
-            })
-        })
-        return this
-    }
-}
-
+import type CanvasType from '../types/Canvas'
+import type CanvasOptionType from '../types/CanvasOption'
+
+import OralCanvas from './common/canvas/index'
+import { initOption } from './common/option'
+
+class Canvas extends OralCanvas implements CanvasType {
+    private __canvas: HTMLCanvasElement
+    private __el: HTMLElement
+    constructor(el: HTMLElement | null, option: CanvasOptionType = {}, width: number = 0, height: number = 0) {
+        if (!el) {
+            throw new Error("VISLite Canvas:The mount point requires an HTMLElement type but encountered null.")
+        }
+
+        option = initOption(option, {
+            region: true,
+            willReadFrequently: false
+        })
+
+        width = width || el.clientWidth
+        height = height || el.clientHeight
+
+        let ViewCanvas: HTMLCanvasElement, RegionCanvas: HTMLCanvasElement | null = null
+
+        const _el = el as any
+
+        // 如果已经初始化过了
+        if (_el._vislite_canvas_) {
+            ViewCanvas = _el._vislite_canvas_[0]
+            RegionCanvas = _el._vislite_canvas_[1]
+        }
+
+        // 否则就初始化
+        else {
+            ViewCanvas = document.createElement('canvas')
+            el.appendChild(ViewCanvas)
+
+            if (option.region) {
+                RegionCanvas = document.createElement('canvas')
+            }
+
+            _el._vislite_canvas_ = [ViewCanvas, RegionCanvas]
+
+            el.setAttribute('vislite', 'Canvas')
+        }
+
+        // 设置画布大小
+        const canvasArray = [RegionCanvas, ViewCanvas]
+        for (let index = 0; index < canvasArray.length; index++) {
+            const canvas = canvasArray[index]
+            if (canvas) {
+                canvas.style.width = width + "px"
+                canvas.setAttribute('width', (index * width + width) + "")
+
+                canvas.style.height = height + "px"
+                canvas.setAttribute('height', (index * height + height) + "")
+            }
+        }
+
+        super(ViewCanvas, RegionCanvas, {
+            willReadFrequently: option.willReadFrequently,
+        }, 2)
+
+        this.__canvas = ViewCanvas
+        this.__el = el
+        this.painter.scale(2, 2)
+    }
+
+    toDataURL(): Promise<string> {
+        return new Promise(resolve => {
+            resolve(this.__canvas.toDataURL())
+        })
+    }
+
+    bind(eventName: string, callback: (regionName: string, x: number, y: number) => void) {
+        this.__el.addEventListener(eventName, (event: any) => {
+            this.getRegion(event.offsetX, event.offsetY).then(regionName => {
+                callback(regionName, event.offsetX, event.offsetY)
+            })
+        })
+        return this
+    }
+}
+
 export default Canvas