@ray-js/lamp-circle-picker 1.0.7-beta-1 → 1.0.8-beta-1

package/lib/component/index.js

@@ -2,12 +2,16 @@
 import React from 'react';
 import RectColorPicker from './rjs';
 export default function RectColor(props) {
+  const canvasIdRef = React.useRef(props.canvasId || `canvasId_${String(+new Date()).slice(-3)}_${String(Math.random()).slice(-3)}`);
   return /*#__PURE__*/React.createElement(RectColorPicker, {
+    canvasId: canvasIdRef.current,
     radius: props.radius,
     innerRingRadius: props.innerRingRadius,
     value: props.value,
     useEventChannel: props.useEventChannel,
     eventChannelName: props.eventChannelName,
+    touchCircleStrokeStyle: props.touchCircleStrokeStyle,
+    touchCircleLineWidth: props.touchCircleLineWidth,
     bindstart: e => {
       const {
         detail

package/lib/component/props.d.ts

@@ -29,18 +29,6 @@ export interface IProps {
      * @default 'lampCirclePickerEventChannel'
      */
     eventChannelName?: string;
-    /**
-     * @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
@@ -59,5 +47,18 @@ export interface IProps {
      * @default ''
      */
     onTouchEnd?: (value: number) => void;
+    /**
+     * @description.en touchCircleStrokeStyle
+     * @description.zh 触摸圆环描边颜色
+     * @default null
+     */
+    touchCircleStrokeStyle?: string;
+    /**
+     * @description.en touchCircleLineWidth
+     * @description.zh 触摸圆环描边宽度
+     * @default null
+     */
+    touchCircleLineWidth?: number;
+    canvasId?: string;
 }
 export declare const defaultProps: IProps;

package/lib/component/props.js

@@ -8,5 +8,7 @@ export const defaultProps = {
   eventChannelName: 'lampCirclePickerEventChannel',
   onTouchStart: nilFn,
   onTouchMove: nilFn,
-  onTouchEnd: nilFn
+  onTouchEnd: nilFn,
+  touchCircleStrokeStyle: null,
+  touchCircleLineWidth: null
 };

package/lib/component/rjs/index.js

@@ -35,15 +35,17 @@ Component({
     },
     onTouchStart: Function,
     onTouchMove: Function,
-    onTouchEnd: Function
+    onTouchEnd: Function,
+    touchCircleStrokeStyle: String,
+    touchCircleLineWidth: Number,
+    canvasId: String
   },
   data: {
     render: null,
     isTouch: false,
     touchType: '',
     colorText: '',
-    tipRectPosition: ETipRectPosition.LEFT,
-    canvasId: "canvasId_".concat(String(+new Date()).slice(-3), "_").concat(String(Math.random()).slice(-3))
+    tipRectPosition: ETipRectPosition.LEFT
   },
   observers: {
     'value.**'(v) {
@@ -89,26 +91,35 @@ Component({
         innerRingRadius,
         value = 0,
         useEventChannel,
-        eventChannelName
+        eventChannelName,
+        touchCircleStrokeStyle,
+        touchCircleLineWidth
       } = this.data;
       const ratio = getSystemInfo().pixelRatio || 2;
       canvasId && this.render.renderAnnulusColor(canvasId, radius, innerRingRadius, ratio, {
         useEventChannel,
-        eventChannelName
+        eventChannelName,
+        touchCircleStrokeStyle,
+        touchCircleLineWidth
       });
-      this._updatePosByRgb(value);
       this.lastValue = value;
     },
+    initedCanvas() {
+      const {
+        value = 0
+      } = this.data;
+      this._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);
+      (_this$render = this.render) === null || _this$render === void 0 || _this$render._getAnglePositionByValue(value);
     },
     _getRgb(x, y) {
       var _this$render2;
-      (_this$render2 = this.render) === null || _this$render2 === void 0 ? void 0 : _this$render2.getAnnulusImageData(x, y);
+      (_this$render2 = this.render) === null || _this$render2 === void 0 || _this$render2.getAnnulusImageData(x, y);
     },
     _getAnnulusImageData(dataRes) {
       const {

package/lib/component/rjs/index.rjs

@@ -1,10 +1,15 @@
 // commonColor.rjs
 export default Render({
   rectContext: null,
+  touchCircleStrokeStyle: null,
+  touchCircleLineWidth: null,
 
   // 环形色盘
   async renderAnnulusColor(id, radius, innerRingRadius, temp = 0, options = {}) {
     let canvas = null;
+    const { touchCircleStrokeStyle, touchCircleLineWidth } = options || {}
+    this.touchCircleStrokeStyle = touchCircleStrokeStyle
+    this.touchCircleLineWidth = touchCircleLineWidth
     try {
       canvas = await getCanvasById(id);
     } catch (error) {
@@ -60,6 +65,7 @@ export default Render({
     canvas.style.height = `${radius * 2}px`;
     this.annulusContext = ctx;
     this.renderAnnulusColorThumb(id, temp);
+    this.callMethod('initedCanvas', {})
   },
   async renderAnnulusColorThumb(id, temp = 0) {
     if (!this.canvasThumb) {
@@ -110,6 +116,14 @@ export default Render({
     ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
     ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
     ctx.fill();
+
+    if(this.touchCircleStrokeStyle) {
+      ctx.shadowColor = this.touchCircleStrokeStyle;
+    }
+    if(this.touchCircleLineWidth) {
+      ctx.shadowBlur = this.touchCircleLineWidth;
+    }
+
     ctx.strokeStyle = '#fff';
     ctx.lineWidth = 8;
     ctx.stroke();

package/lib/index.d.ts

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

package/lib/index.js

@@ -21,7 +21,10 @@ const LampCirclePicker = props => {
     style,
     onTouchStart,
     onTouchMove,
-    onTouchEnd
+    onTouchEnd,
+    showInnerCircle = true,
+    touchCircleLineWidth,
+    touchCircleStrokeStyle
   } = props;
   const innerImgRadius = innerRingRadius * 4 * 0.8;
   const _value = value !== null && value !== void 0 ? value : temperature;
@@ -34,12 +37,14 @@ const LampCirclePicker = props => {
     innerRingRadius: innerRingRadius,
     useEventChannel: useEventChannel || false,
     eventChannelName: eventChannelName,
+    touchCircleLineWidth: touchCircleLineWidth,
+    touchCircleStrokeStyle: touchCircleStrokeStyle,
     onTouchStart: onTouchStart,
     onTouchMove: onTouchMove,
     onTouchEnd: onTouchEnd
   }), /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.innerBox, styled.flexCenter)
-  }, /*#__PURE__*/React.createElement(Image, {
+  }, showInnerCircle && /*#__PURE__*/React.createElement(Image, {
     src: ring,
     className: styled.ringIcon,
     style: {

package/lib/props.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface IProps {
     /**
      * @description.zh 默认数值
@@ -5,6 +6,12 @@ export interface IProps {
      * @default
      */
     value: number;
+    /**
+     * @description.en temperature
+     * @description.zh 色温
+     * @default null
+     */
+    temperature?: number;
     /**
      * @description.zh 内部色环宽度
      * @description.en The width of inner color ring
@@ -35,4 +42,52 @@ export interface IProps {
      * @default ''
      */
     onTouchEnd?: (value: number) => void;
+    /**
+     * @description.en showInnerCircle
+     * @description.zh 展示数值圆环
+     * @default true
+     */
+    showInnerCircle?: boolean;
+    /**
+     * @description.en useEventChannel
+     * @description.zh 使用事件
+     * @default false
+     */
+    useEventChannel?: boolean;
+    /**
+     * @description.en eventChannelName
+     * @description.zh 事件名
+     * @default null
+     */
+    eventChannelName?: string;
+    /**
+     * @description.en titleStyle
+     * @description.zh 标题样式
+     * @default null
+     */
+    titleStyle?: React.CSSProperties;
+    /**
+     * @description.en descStyle
+     * @description.zh 描述样式
+     * @default null
+     */
+    descStyle?: React.CSSProperties;
+    /**
+     * @description.en style
+     * @description.zh 样式
+     * @default null
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description.en touchCircleStrokeStyle
+     * @description.zh 触摸圆环描边颜色
+     * @default null
+     */
+    touchCircleStrokeStyle?: string;
+    /**
+     * @description.en touchCircleLineWidth
+     * @description.zh 触摸圆环描边宽度
+     * @default null
+     */
+    touchCircleLineWidth?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/lamp-circle-picker",
-  "version": "1.0.7-beta-1",
+  "version": "1.0.8-beta-1",
   "description": "照明缺角色环",
   "main": "lib/index",
   "files": [
@@ -18,13 +18,13 @@
   "scripts": {
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
     "build": "ray build --type=component",
-    "watch": "ray start --type=component",
+    "watch": "ray start --type=component --output ./example/src/lib",
     "build:tuya": "ray build ./example --target=tuya",
     "build:wechat": "ray build ./example --target=wechat",
     "build:web": "ray build ./example --target=web",
     "build:native": "ray build ./example --target=native",
     "start:native": "ray start ./example -t native --verbose",
-    "start:tuya": "ray start ./example -t tuya --verbose",
+    "start:tuya": "ray start ./example",
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
     "prepublishOnly": "yarn build",
@@ -36,13 +36,11 @@
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
-    "@ray-js/babel-preset-standard": "^0.6.14",
-    "@ray-js/cli": "0.6.16",
-    "@ray-js/ray": "^0.6.14",
-    "@ray-js/components": "^0.6.14",
-    "@ray-js/framework": "^0.6.14",
-    "@ray-js/rn-transformer-helper": "^0.5.5",
-    "@ray-js/types": "^0.6.14",
+    "@ray-js/babel-preset-standard": "^0.4.11",
+    "@ray-js/cli": "^1.4.44",
+    "@ray-js/panel-sdk": "^1.12.0",
+    "@ray-js/ray": "^1.4.9",
+    "@ray-js/types": "^0.6.15",
     "@types/node": "^17.0.43",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.1",