@ray-js/lamp-circle-picker 1.0.4 → 1.0.5-beta-2

package/README.md

@@ -40,6 +40,20 @@ interface IProps {
    * @default 140
    */
   radius?: number;
+  /**
+   * @description.zh 注意⚠️：基础库版本大于2.18.0, 是否启用事件通道，当多个 rjs 组件同时使用时，用于优化 rjs 间数据传输时的性能问题
+   * @description.en Note ⚠️ : The base library version is greater than 2.18.0， Whether to enable event channels to optimize the performance of data transfer between rjs when multiple rjs components are used simultaneously
+   * @default false
+   */
+  useEventChannel?: boolean;
+
+  /**
+   * @description.zh 事件通道名称
+   * @description.en Event channel name
+   * @default 'lampCirclePickerEventChannel'
+   */
+  eventChannelName?: string;
+
   /**
    * @description.zh 手指按下时的回调函数
    * @description.en Finger press when the callback function
@@ -75,3 +89,22 @@ export default () => {
   return <LampCirclePicker value={temperature} onTouchMove={handleMove} onTouchEnd={handleEnd} />;
 };
 ```
+
+```js
+// Turns on the use event channel property, which can be used in other rjs components
+Render({
+  // other xxx
+  renderChannel() {
+    const eventChannelName = 'lampCirclePickerEventChannel';
+    this.instance.eventChannel.on(eventChannelName, e => {
+      // Here you can receive the color data that is passed when the color changes
+      const {
+        data, // temp
+        touchType, // : 'start' | 'move' | 'end'
+        pos,
+      } = e;
+      console.log('eventChannel get', e);
+    });
+  },
+});
+```

package/lib/component/index.config.js

@@ -1,16 +1,16 @@
-export var web = {
+export const web = {
   backgroundColor: '#f2f4f6',
   navigationBarTitleText: ''
 };
-export var wechat = {
+export const wechat = {
   backgroundColor: '#f2f4f6',
   navigationBarTitleText: ''
 };
-export var tuya = {
+export const tuya = {
   backgroundColor: '#f2f4f6',
   navigationBarTitleText: ''
 };
-export var native = {
+export const native = {
   backgroundColor: 'transparent',
   isBleOfflineOverlay: false,
   useSafeAreaView: true,

package/lib/component/index.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import { IProps } from './props';
-export default function RectColor(props: IProps): JSX.Element;
+export default function RectColor(props: IProps): React.JSX.Element;

package/lib/component/index.js

@@ -6,19 +6,27 @@ export default function RectColor(props) {
     radius: props.radius,
     innerRingRadius: props.innerRingRadius,
     value: props.value,
-    bindstart: function onTouchStart(e) {
-      var detail = e.detail;
-      var temp = Math.floor(detail);
+    useEventChannel: props.useEventChannel,
+    eventChannelName: props.eventChannelName,
+    bindstart: e => {
+      const {
+        detail
+      } = e;
+      const temp = Math.floor(detail);
       props.onTouchStart && props.onTouchStart(temp);
     },
-    bindmove: function onTouchMove(e) {
-      var detail = e.detail;
-      var temp = Math.floor(detail);
+    bindmove: e => {
+      const {
+        detail
+      } = e;
+      const temp = Math.floor(detail);
       props.onTouchMove && props.onTouchMove(temp);
     },
-    bindend: function onTouchEnd(e) {
-      var detail = e.detail;
-      var temp = Math.floor(detail);
+    bindend: e => {
+      const {
+        detail
+      } = e;
+      const temp = Math.floor(detail);
       props.onTouchEnd && props.onTouchEnd(temp);
     }
   });

package/lib/component/props.d.ts

@@ -17,6 +17,18 @@ export interface IProps {
      * @default 140
      */
     radius?: number;
+    /**
+     * @description.zh 注意⚠️：基础库版本大于2.18.0, 是否启用事件通道，当多个 rjs 组件同时使用时，用于优化 rjs 间数据传输时的性能问题
+     * @description.en Note ⚠️ : The base library version is greater than 2.18.0， Whether to enable event channels to optimize the performance of data transfer between rjs when multiple rjs components are used simultaneously
+     * @default false
+     */
+    useEventChannel?: boolean;
+    /**
+     * @description.zh 事件通道名称
+     * @description.en Event channel name
+     * @default 'lampCirclePickerEventChannel'
+     */
+    eventChannelName?: string;
     /**
      * @description.zh 手指按下时的回调函数
      * @description.en Finger press when the callback function

package/lib/component/props.js

@@ -1,11 +1,11 @@
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-var nilFn = function () {
-  return null;
-};
-export var defaultProps = {
+const nilFn = () => null;
+export const defaultProps = {
   value: 0,
   innerRingRadius: 80,
   radius: 140,
+  useEventChannel: false,
+  eventChannelName: 'lampCirclePickerEventChannel',
   onTouchStart: nilFn,
   onTouchMove: nilFn,
   onTouchEnd: nilFn

package/lib/component/rjs/index.js

@@ -1,10 +1,6 @@
-import "core-js/modules/es.number.constructor.js";
-import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.array.slice.js";
-import "core-js/modules/es.json.stringify.js";
 import Render from './index.rjs';
 import { getSystemInfo } from '@ray-js/api';
-var ETipRectPosition = {
+const ETipRectPosition = {
   LEFT: 'LEFT',
   RIGHT: 'RIGHT'
 };
@@ -25,6 +21,15 @@ Component({
       type: Number,
       value: 0
     },
+    // 是否启用事件通道
+    useEventChannel: {
+      type: Boolean,
+      value: false
+    },
+    eventChannelName: {
+      type: String,
+      value: 'lampCirclePickerEventChannel'
+    },
     onTouchStart: Function,
     onTouchMove: Function,
     onTouchEnd: Function
@@ -38,7 +43,7 @@ Component({
     canvasId: "canvasId_".concat(String(+new Date()).slice(-3), "_").concat(String(Math.random()).slice(-3))
   },
   observers: {
-    'value.**': function value(v) {
+    'value.**'(v) {
       if (this.touchType === 'move') {
         return;
       }
@@ -49,65 +54,76 @@ Component({
     }
   },
   lifetimes: {
-    attached: function attached() {
+    attached() {
       this.render = new Render(this);
-      var _this$data = this.data,
-        radius = _this$data.radius,
-        innerRingRadius = _this$data.innerRingRadius;
+      const {
+        radius,
+        innerRingRadius
+      } = this.data;
       this.render._setCircles(radius, innerRingRadius);
     },
-    ready: function ready() {
-      var _this = this;
-      var canvasId = this.data.canvasId;
+    ready() {
+      const {
+        canvasId
+      } = this.data;
       this.initCanvas();
-      setTimeout(function () {
-        _this.initCanvas();
-        _this.render.checkIsRender(canvasId);
+      setTimeout(() => {
+        this.initCanvas();
+        this.render.checkIsRender(canvasId);
       }, 300);
     }
   },
   methods: {
-    getCanvas: function getCanvas(canvas) {
+    getCanvas(canvas) {
       if (JSON.stringify(canvas) === '{}') {
         this.initCanvas();
       }
     },
-    initCanvas: function initCanvas() {
-      var _this$data2 = this.data,
-        canvasId = _this$data2.canvasId,
-        radius = _this$data2.radius,
-        innerRingRadius = _this$data2.innerRingRadius,
-        _this$data2$value = _this$data2.value,
-        value = _this$data2$value === void 0 ? 0 : _this$data2$value;
-      var ratio = getSystemInfo().pixelRatio || 2;
-      canvasId && this.render.renderAnnulusColor(canvasId, radius, innerRingRadius, ratio);
+    initCanvas() {
+      const {
+        canvasId,
+        radius,
+        innerRingRadius,
+        value = 0,
+        useEventChannel,
+        eventChannelName
+      } = this.data;
+      const ratio = getSystemInfo().pixelRatio || 2;
+      canvasId && this.render.renderAnnulusColor(canvasId, radius, innerRingRadius, ratio, {
+        useEventChannel,
+        eventChannelName
+      });
       this._updatePosByRgb(value);
       this.lastValue = value;
     },
-    _updatePosByRgb: function _updatePosByRgb(value) {
+    _updatePosByRgb(value) {
       var _this$render;
       if (value === undefined) {
         return;
       }
       (_this$render = this.render) === null || _this$render === void 0 ? void 0 : _this$render._getAnglePositionByValue(value);
     },
-    _getRgb: function _getRgb(x, y) {
+    _getRgb(x, y) {
       var _this$render2;
       (_this$render2 = this.render) === null || _this$render2 === void 0 ? void 0 : _this$render2.getAnnulusImageData(x, y);
     },
-    _getAnnulusImageData: function _getAnnulusImageData(dataRes) {
-      var position = dataRes.position,
-        touchType = dataRes.touchType;
+    _getAnnulusImageData(dataRes) {
+      const {
+        position,
+        touchType
+      } = dataRes;
       this.touchType = touchType;
-      var result = this._getLengthByAnglePosition(position.x, position.y);
+      const result = this._getLengthByAnglePosition(position.x, position.y);
       this.lastValue = result;
       this.triggerEvent(touchType, result);
     },
-    _getLengthByAnglePosition: function _getLengthByAnglePosition(x, y) {
-      var radius = this.data.radius;
+    _getLengthByAnglePosition(x, y) {
+      const {
+        radius
+      } = this.data;
       var radian = Math.atan2(y - radius, x - radius); // 弧度
       var angle = radian * (180 / Math.PI); // 角度
-      var angleData = 0;
+      let angleData = 0;
       if (+angle > 135 && +angle <= 180) {
         angleData = angle - 135;
       } else if (angle > -180 && angle <= 0) {
@@ -115,7 +131,7 @@ Component({
       } else if (angle > 0 && angle <= 45) {
         angleData = 225 + angle;
       }
-      var result = Math.round(angleData / 270 * 1000);
+      const result = Math.round(angleData / 270 * 1000);
       return result;
     }
   }

package/lib/component/rjs/index.rjs

@@ -3,14 +3,23 @@ export default Render({
   rectContext: null,
 
   // 环形色盘
-  async renderAnnulusColor(id, radius, innerRingRadius, temp = 0) {
-    const canvas = await getCanvasById(id);
-    canvas.width = radius * 4;
-    canvas.height = radius * 4;
+  async renderAnnulusColor(id, radius, innerRingRadius, temp = 0, options = {}) {
+    let canvas = null;
+    try {
+      canvas = await getCanvasById(id);
+    } catch (error) {
+      console.error(error);
+      return;
+    }
     if (!canvas) {
       console.error('canvas not found');
       return;
     }
+    const { useEventChannel, eventChannelName } = options || {};
+    this.useEventChannel = useEventChannel;
+    this.eventChannelName = eventChannelName;
+    canvas.width = radius * 4;
+    canvas.height = radius * 4;
     const ctx = canvas.getContext('2d');
 
     const startAngle = Math.PI * 0.75;
@@ -118,11 +127,20 @@ export default Render({
     const g = data[1];
     const b = data[2];
     this.updateThumbPosition(x, y, { r, g, b });
-    const dataRes = {
+    const emitRes = {
       position: { x, y },
       touchType: this.touchType,
     };
-    this.callMethod('_getAnnulusImageData', dataRes);
+    this.callMethod('_getAnnulusImageData', emitRes);
+
+    if (this.useEventChannel) {
+      try {
+        console.log(this.eventChannelName, 'this.eventChannelName');
+        this.instance?.eventChannel.emit(this.eventChannelName, emitRes);
+      } catch (error) {
+        console.error(error);
+      }
+    }
   },
   _getRgb(x, y) {
     if (x && y) {

package/lib/exampleComponent/demoRjs/index.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-undef */
+import Render from './index.rjs';
+Component({
+  lifetimes: {
+    created() {
+      this.render = new Render(this);
+    },
+    ready() {
+      this.render.renderChannel();
+    }
+  }
+});

package/lib/exampleComponent/demoRjs/index.json

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

package/lib/exampleComponent/demoRjs/index.rjs

@@ -0,0 +1,8 @@
+export default Render({
+  renderChannel() {
+    const eventChannelName = 'lampCirclePickerEventChannel';
+    this.instance.eventChannel.on(eventChannelName, (e) => {
+      console.log('eventChannel get', e);
+    });
+  },
+});

package/lib/exampleComponent/demoRjs/index.tyml

@@ -0,0 +1,4 @@
+<view 
+    class="container"
+>
+</view>

package/lib/exampleComponent/demoRjs/index.tyss

@@ -0,0 +1,6 @@
+.container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/lib/i18n/index.d.ts

@@ -1,3 +1,14 @@
 import { kit } from '@ray-js/panel-sdk';
-declare const _default: kit.I18N;
+declare const _default: kit.I18N<{
+    en: {
+        temperature: string;
+    };
+    zh: {
+        temperature: string;
+    };
+}, {
+    temperature: string;
+} | {
+    temperature: string;
+}>;
 export default _default;

package/lib/i18n/index.js

@@ -1,4 +1,6 @@
 import { kit } from '@ray-js/panel-sdk';
 import Strings from './strings';
-var I18N = kit.I18N;
+const {
+  I18N
+} = kit;
 export default new I18N(Strings);

package/lib/index.config.js

@@ -1,16 +1,16 @@
-export var web = {
+export const web = {
   backgroundColor: '#f2f4f6',
   navigationBarTitleText: ''
 };
-export var wechat = {
+export const wechat = {
   backgroundColor: '#f2f4f6',
   navigationBarTitleText: ''
 };
-export var tuya = {
+export const tuya = {
   backgroundColor: '#f2f4f6',
   navigationBarTitleText: ''
 };
-export var native = {
+export const native = {
   backgroundColor: 'transparent',
   isBleOfflineOverlay: false,
   useSafeAreaView: true,

package/lib/index.d.ts

@@ -1,18 +1,25 @@
-/// <reference types="react" />
+import React from 'react';
 interface IProps {
     radius?: number;
     innerRingRadius?: number;
     value: number;
+    useEventChannel?: boolean;
+    eventChannelName?: string;
     temperature?: number;
     onTouchStart?: (v: number) => void;
     onTouchMove?: (v: number) => void;
     onTouchEnd?: (v: number) => void;
+    titleStyle?: React.CSSProperties;
+    descStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
 }
 declare const LampCirclePicker: {
-    (props: IProps): JSX.Element;
+    (props: IProps): React.JSX.Element;
     defaultProps: {
         radius: number;
         innerRingRadius: number;
+        useEventChannel: boolean;
+        eventChannelName: string;
         onTouchStart: () => null;
         onTouchMove: () => null;
         onTouchEnd: () => null;

package/lib/index.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.math.trunc.js";
 import React from 'react';
 import { View, Image, Text } from '@ray-js/components';
 import clsx from 'clsx';
@@ -6,23 +5,35 @@ import res from './res';
 import Strings from './i18n';
 import AnnulusPickerColor from './component';
 import styled from './index.module.less';
-var ring = res.ring;
-var LampCirclePicker = function (props) {
-  var value = props.value,
-    temperature = props.temperature,
-    radius = props.radius,
-    innerRingRadius = props.innerRingRadius,
-    onTouchStart = props.onTouchStart,
-    onTouchMove = props.onTouchMove,
-    onTouchEnd = props.onTouchEnd;
-  var innerImgRadius = innerRingRadius * 4 * 0.8;
-  var _value = value !== null && value !== void 0 ? value : temperature;
+const {
+  ring
+} = res;
+const LampCirclePicker = props => {
+  const {
+    value,
+    temperature,
+    radius,
+    innerRingRadius,
+    useEventChannel,
+    eventChannelName,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    titleStyle,
+    descStyle,
+    style
+  } = props;
+  const innerImgRadius = innerRingRadius * 4 * 0.8;
+  const _value = value !== null && value !== void 0 ? value : temperature;
   return /*#__PURE__*/React.createElement(View, {
-    className: clsx(styled.container, styled.flexCenter)
+    className: clsx(styled.container, styled.flexCenter),
+    style: style
   }, /*#__PURE__*/React.createElement(AnnulusPickerColor, {
     value: _value,
     radius: radius,
     innerRingRadius: innerRingRadius,
+    useEventChannel: useEventChannel || false,
+    eventChannelName: eventChannelName,
     onTouchStart: onTouchStart,
     onTouchMove: onTouchMove,
     onTouchEnd: onTouchEnd
@@ -38,17 +49,19 @@ var LampCirclePicker = function (props) {
   }), /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.textBox, styled.flexCenter)
   }, /*#__PURE__*/React.createElement(Text, {
-    className: styled.title
+    className: styled.title,
+    style: titleStyle
   }, Math.trunc(_value / 10), "%"), /*#__PURE__*/React.createElement(Text, {
-    className: styled.desc
+    className: styled.desc,
+    style: descStyle
   }, Strings.getLang('temperature')))));
 };
-var nilFn = function () {
-  return null;
-};
+const nilFn = () => null;
 LampCirclePicker.defaultProps = {
   radius: 140,
   innerRingRadius: 80,
+  useEventChannel: false,
+  eventChannelName: 'lampCirclePickerEventChannel',
   onTouchStart: nilFn,
   onTouchMove: nilFn,
   onTouchEnd: nilFn

package/lib/res/index.js

@@ -1,6 +1,6 @@
 import ring from './ring.png';
 import colorBg from './colorBg.png';
 export default {
-  ring: ring,
-  colorBg: colorBg
+  ring,
+  colorBg
 };

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 declare const rgb2hsv: any, hsv2rgb: any;
-declare type HSL = {
+type HSL = {
     h: number;
     s: number;
     l: number;

package/lib/utils/index.js

@@ -1,21 +1,23 @@
 import { utils } from '@ray-js/panel-sdk';
-var rgb2hsv = utils.rgb2hsv,
-  hsv2rgb = utils.hsv2rgb;
+const {
+  rgb2hsv,
+  hsv2rgb
+} = utils;
 /* eslint-disable no-param-reassign */
-var rgbToHsl = function (r, g, b) {
+const rgbToHsl = (r, g, b) => {
   r /= 255;
   g /= 255;
   b /= 255;
-  var max = Math.max(r, g, b);
-  var min = Math.min(r, g, b);
-  var h;
-  var s;
-  var l = (max + min) / 2;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h;
+  let s;
+  const l = (max + min) / 2;
   if (max === min) {
     h = 0;
     s = 0; // achromatic
   } else {
-    var d = max - min;
+    const d = max - min;
     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
     switch (max) {
       case r:
@@ -34,8 +36,8 @@ var rgbToHsl = function (r, g, b) {
   }
   return {
     h: h * 360,
-    s: s,
-    l: l
+    s,
+    l
   };
 };
 export { rgbToHsl, rgb2hsv, hsv2rgb };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-circle-picker",
-  "version": "1.0.4",
+  "version": "1.0.5-beta-2",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [