@10yun/cv-mobile-ui 0.5.50 → 0.5.52

package/ui-fireui/nvue/u-circular-progress/gcanvas/context-webgl/Shader.js

@@ -0,0 +1,22 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLShader';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLShader {
+    className = name;
+
+    constructor(id, type) {
+        this.id = id;
+        this.type = type;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}

package/ui-fireui/nvue/u-circular-progress/gcanvas/context-webgl/ShaderPrecisionFormat.js

@@ -0,0 +1,11 @@
+export default class WebGLShaderPrecisionFormat {
+    className = 'WebGLShaderPrecisionFormat';
+
+    constructor({
+        rangeMin, rangeMax, precision
+    }) {
+        this.rangeMin = rangeMin;
+        this.rangeMax = rangeMax;
+        this.precision = precision;
+    }
+}

package/ui-fireui/nvue/u-circular-progress/gcanvas/context-webgl/Texture.js

@@ -0,0 +1,22 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLTexture';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLTexture {
+    className = name;
+
+    constructor(id, type) {
+        this.id = id;
+        this.type = type;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}

package/ui-fireui/nvue/u-circular-progress/gcanvas/context-webgl/UniformLocation.js

@@ -0,0 +1,22 @@
+import {getTransferedObjectUUID} from './classUtils';
+
+const name = 'WebGLUniformLocation';
+
+function uuid(id) {
+    return getTransferedObjectUUID(name, id);
+}
+
+export default class WebGLUniformLocation {
+    className = name;
+
+    constructor(id, type) {
+        this.id = id;
+        this.type = type;
+    }
+
+    static uuid = uuid;
+
+    uuid() {
+        return uuid(this.id);
+    }
+}

package/ui-fireui/nvue/u-circular-progress/gcanvas/context-webgl/classUtils.js

@@ -0,0 +1,3 @@
+export function getTransferedObjectUUID(name, id) {
+    return `${name.toLowerCase()}-${id}`;
+}

package/ui-fireui/nvue/u-circular-progress/gcanvas/env/canvas.js

@@ -0,0 +1,74 @@
+import GContext2D from '../context-2d/RenderingContext';
+import GContextWebGL from '../context-webgl/RenderingContext';
+
+export default class GCanvas {
+
+    // static GBridge = null;
+
+    id = null;
+
+    _needRender = true;
+
+    constructor(id, { disableAutoSwap }) {
+        this.id = id;
+
+        this._disableAutoSwap = disableAutoSwap;
+        if (disableAutoSwap) {
+            this._swapBuffers = () => {
+                GCanvas.GBridge.render(this.id);
+            }
+        }
+    }
+
+    getContext(type) {
+
+        let context = null;
+
+        if (type.match(/webgl/i)) {
+            context = new GContextWebGL(this);
+
+            context.componentId = this.id;
+
+            if (!this._disableAutoSwap) {
+                const render = () => {
+                    if (this._needRender) {
+                        GCanvas.GBridge.render(this.id);
+                        this._needRender = false;
+                    }
+                }
+                setInterval(render, 16);
+            }
+
+            GCanvas.GBridge.callSetContextType(this.id, 1); // 0 for 2d; 1 for webgl
+        } else if (type.match(/2d/i)) {
+            context = new GContext2D(this);
+
+            context.componentId = this.id;
+
+//             const render = ( callback ) => {
+// 
+//                 const commands = context._drawCommands;
+//                 context._drawCommands = '';
+// 
+//                 GCanvas.GBridge.render2d(this.id, commands, callback);
+//                 this._needRender = false;
+//             }
+// 			//draw方法触发
+// 			context._flush = render;
+//             //setInterval(render, 16);
+
+            GCanvas.GBridge.callSetContextType(this.id, 0);
+        } else {
+            throw new Error('not supported context ' + type);
+        }
+
+        return context;
+
+    }
+
+    reset() {
+        GCanvas.GBridge.callReset(this.id);
+    }
+
+
+}

package/ui-fireui/nvue/u-circular-progress/gcanvas/env/image.js

@@ -0,0 +1,96 @@
+let incId = 1;
+
+const noop = function () { };
+
+class GImage {
+
+    static GBridge = null;
+
+    constructor() {
+        this._id = incId++;
+        this._width = 0;
+        this._height = 0;
+        this._src = undefined;
+        this._onload = noop;
+        this._onerror = noop;
+        this.complete = false;
+    }
+
+    get width() {
+        return this._width;
+    }
+    set width(v) {
+        this._width = v;
+    }
+
+    get height() {
+        return this._height;
+    }
+
+    set height(v) {
+        this._height = v;
+    }
+
+    get src() {
+        return this._src;
+    }
+
+    set src(v) {
+
+        if (v.startsWith('//')) {
+            v = 'http:' + v;
+        }
+
+        this._src = v;
+
+        GImage.GBridge.perloadImage([this._src, this._id], (data) => {
+            if (typeof data === 'string') {
+                data = JSON.parse(data);
+            }
+            if (data.error) {
+                var evt = { type: 'error', target: this };
+                this.onerror(evt);
+            } else {
+                this.complete = true;
+                this.width = typeof data.width === 'number' ? data.width : 0;
+                this.height = typeof data.height === 'number' ? data.height : 0;
+                var evt = { type: 'load', target: this };
+                this.onload(evt);
+            }
+        });
+    }
+
+    addEventListener(name, listener) {
+        if (name === 'load') {
+            this.onload = listener;
+        } else if (name === 'error') {
+            this.onerror = listener;
+        }
+    }
+
+    removeEventListener(name, listener) {
+        if (name === 'load') {
+            this.onload = noop;
+        } else if (name === 'error') {
+            this.onerror = noop;
+        }
+    }
+
+    get onload() {
+        return this._onload;
+    }
+
+    set onload(v) {
+        this._onload = v;
+    }
+
+    get onerror() {
+        return this._onerror;
+    }
+
+    set onerror(v) {
+        this._onerror = v;
+    }
+}
+
+export default GImage;

package/ui-fireui/nvue/u-circular-progress/gcanvas/env/tool.js

@@ -0,0 +1,24 @@
+
+export function ArrayBufferToBase64 (buffer) {
+    var binary = '';
+    var bytes = new Uint8ClampedArray(buffer);
+    for (var len = bytes.byteLength, i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+}
+	
+export function Base64ToUint8ClampedArray(base64String) {
+	const padding = '='.repeat((4 - base64String.length % 4) % 4);
+	const base64 = (base64String + padding)
+		.replace(/\-/g, '+')
+		.replace(/_/g, '/');
+
+	const rawData = atob(base64);
+	const outputArray = new Uint8ClampedArray(rawData.length);
+
+	for (let i = 0; i < rawData.length; ++i) {
+		outputArray[i] = rawData.charCodeAt(i);
+	}
+	return outputArray;
+}

package/ui-fireui/nvue/u-circular-progress/gcanvas/index.js

@@ -0,0 +1,47 @@
+import GCanvas from './env/canvas';
+import GImage from './env/image';
+
+import GWebGLRenderingContext from './context-webgl/RenderingContext';
+import GContext2D from './context-2d/RenderingContext';
+
+import GBridgeWeex from './bridge/bridge-weex';
+
+export let Image = GImage;
+
+export let WeexBridge = GBridgeWeex;
+
+export function enable(el, {
+	bridge,
+	debug,
+	disableAutoSwap,
+	disableComboCommands
+} = {}) {
+
+	const GBridge = GImage.GBridge = GCanvas.GBridge = GWebGLRenderingContext.GBridge = GContext2D.GBridge = bridge;
+
+	GBridge.callEnable(el.ref, [
+		0, // renderMode: 0--RENDERMODE_WHEN_DIRTY, 1--RENDERMODE_CONTINUOUSLY
+		-1, // hybridLayerType:  0--LAYER_TYPE_NONE 1--LAYER_TYPE_SOFTWARE 2--LAYER_TYPE_HARDWARE
+		false, // supportScroll
+		false, // newCanvasMode
+		1, // compatible
+		'white', // clearColor
+		false // sameLevel: newCanvasMode = true && true => GCanvasView and Webview is same level
+	]);
+
+	if (debug === true) {
+		GBridge.callEnableDebug();
+	}
+	if (disableComboCommands) {
+		GBridge.callEnableDisableCombo();
+	}
+
+	var canvas = new GCanvas(el.ref, {
+		disableAutoSwap
+	});
+	let pixelRatio = uni.getSystemInfoSync().pixelRatio;
+	canvas.width = el.style.width * pixelRatio;
+	canvas.height = el.style.height * pixelRatio;
+
+	return canvas;
+};

package/ui-fireui/nvue/u-circular-progress/u-circular-progress.nvue

@@ -0,0 +1,203 @@
+<template>
+  <view class="up-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
+    <gcanvas :ref="progressCanvasId" :style="{ width: diam + 'px', height: (height || diam) + 'px' }"></gcanvas>
+    <slot />
+  </view>
+</template>
+
+<script>
+//nuve 专用
+import { enable, WeexBridge } from './gcanvas/index.js';
+export default {
+  name: 'thorCircularProgress',
+  props: {
+    /*
+		  传值需使用rpx进行转换保证各终端兼容
+		  px = rpx / 750 * uni.getSystemInfoSync().windowWidth
+		  圆形进度条(画布)宽度，直径 [px]
+		*/
+    diam: {
+      type: Number,
+      default: 60
+    },
+    //圆形进度条(画布)高度，默认取diam值[当画半弧时可传值，height有值时则取height]
+    height: {
+      type: Number,
+      default: 60
+    },
+    //进度条线条宽度[px]
+    lineWidth: {
+      type: Number,
+      default: 4
+    },
+    /*
+		 线条的端点样式
+		 butt：向线条的每个末端添加平直的边缘
+		 round	向线条的每个末端添加圆形线帽
+		 square	向线条的每个末端添加正方形线帽
+		*/
+    lineCap: {
+      type: String,
+      default: 'round'
+    },
+    //圆环进度字体大小 [px]
+    fontSize: {
+      type: Number,
+      default: 26
+    },
+    //圆环进度字体颜色
+    fontColor: {
+      type: String,
+      default: '#16b999'
+    },
+    //是否显示进度文字
+    fontShow: {
+      type: Boolean,
+      default: true
+    },
+    /*
+		 自定义显示文字[默认为空，显示百分比，fontShow=true时生效]
+		 可以使用 slot自定义显示内容
+		*/
+    percentText: {
+      type: String,
+      default: ''
+    },
+    //进度条颜色
+    progressColor: {
+      type: String,
+      default: '#16b999'
+    },
+    //起始弧度，单位弧度
+    sAngle: {
+      type: Number,
+      default: -Math.PI / 2
+    },
+    //指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针
+    counterclockwise: {
+      type: Boolean,
+      default: false
+    },
+    //进度百分比 [10% 传值 10]
+    percentage: {
+      type: Number,
+      default: 0
+    },
+    //进度百分比缩放倍数[使用半弧为100%时，则可传2]
+    multiple: {
+      type: Number,
+      default: 1
+    },
+    //动画执行时间[单位毫秒，低于50无动画]
+    duration: {
+      type: Number,
+      default: 800
+    },
+    //backwards: 动画从头播；forwards：动画从上次结束点接着播
+    activeMode: {
+      type: String,
+      default: 'backwards'
+    }
+  },
+  computed: {
+    canvasChange() {
+      return `${this.diam},${this.height},${this.lineWidth}`;
+    }
+  },
+  watch: {
+    percentage(val) {
+      this.initDraw();
+    },
+    canvasChange() {
+      this.initDraw(true);
+    }
+  },
+  data() {
+    return {
+      progressCanvasId: this.getCanvasId(),
+      progressContext: null,
+      canvasObj: null,
+      //起始百分比
+      startPercentage: 0,
+      // dpi
+      pixelRatio: uni.getSystemInfoSync().pixelRatio
+    };
+  },
+  mounted() {
+    this.initDraw(true);
+  },
+  methods: {
+    //初始化绘制
+    initDraw(init) {
+      let start = this.activeMode === 'backwards' ? 0 : this.startPercentage;
+      this.drawProgressCircular(start);
+    },
+    //进度圆环
+    drawProgressCircular(startPercentage) {
+      let ctx = this.progressContext;
+      if (!ctx) {
+        let ganvas = this.$refs[this.progressCanvasId];
+        /*通过元素引用获取canvas对象*/
+        this.canvasObj = enable(ganvas, {
+          bridge: WeexBridge
+        });
+        /*获取绘图所需的上下文，目前不支持3d*/
+        ctx = this.canvasObj.getContext('2d');
+        this.progressContext = ctx;
+      }
+      ctx.setLineWidth(this.lineWidth);
+      ctx.setStrokeStyle(this.progressColor);
+      let time = this.duration / this.percentage;
+      startPercentage = this.duration < 50 ? this.percentage - 1 : startPercentage;
+      startPercentage++;
+      if (startPercentage > this.percentage) {
+        return false;
+      }
+      if (this.fontShow) {
+        ctx.setFontSize(this.fontSize);
+        ctx.setFillStyle(this.fontColor);
+        ctx.setTextAlign('center');
+        ctx.setTextBaseline('middle');
+        let percentage = this.percentText;
+        if (!percentage) {
+          percentage = this.counterclockwise ? 100 - startPercentage * this.multiple : startPercentage * this.multiple;
+          percentage = `${percentage}%`;
+        }
+        let radius = this.diam / 2;
+        ctx.fillText(percentage, radius, radius);
+      }
+      let eAngle = ((2 * Math.PI) / 100) * startPercentage + this.sAngle;
+      this.drawArc(ctx, eAngle);
+      setTimeout(() => {
+        this.startPercentage = startPercentage;
+        this.drawProgressCircular(startPercentage);
+        this.$emit('change', {
+          percentage: startPercentage
+        });
+      }, time);
+    },
+    //创建弧线
+    drawArc(ctx, eAngle) {
+      ctx.setLineCap(this.lineCap);
+      ctx.beginPath();
+      let radius = this.diam / 2; //x=y
+      ctx.arc(radius, radius, radius - this.lineWidth, this.sAngle, eAngle, this.counterclockwise);
+      ctx.stroke();
+      ctx.draw();
+    },
+    //生成canvasId
+    getCanvasId() {
+      let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        return (c === 'x' ? (Math.random() * 16) | 0 : 'r&0x3' | '0x8').toString(16);
+      });
+      return uuid;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.up-circular-container {
+  position: relative;
+}
+</style>