@ray-js/lamp-circle-picker 1.0.12-beta-1 → 1.0.12-beta-2

package/example/src/pages/index.tsx

@@ -17,28 +17,34 @@ const DemoBlock = ({ title, children }) => (
 export default function Home() {
   const [temperature, setTemperature] = useState(20);
 
-  const handleMove = (v: number) => {
-    setTemperature(v);
-  };
-
   const handleEnd = (v: number) => {
     setTemperature(v);
   };
+
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     setTemperature(500);
+  //   }, 4000);
+  // }, []);
+
+  const [inactive, setPowerOff] = useState(false);
   useEffect(() => {
     setTimeout(() => {
-      setTemperature(500);
+      setPowerOff(true);
     }, 3000);
   }, []);
 
+  const [maskVisible, setShowMask] = useState(false);
+  useEffect(() => {
+    setTimeout(() => {
+      // setShowMask(true);
+    }, 2000);
+  }, []);
+
   return (
     <View className={styles.view}>
       <DemoBlock title="基础用法">
-        <LampCirclePicker
-          value={temperature}
-          useEventChannel
-          onTouchMove={handleMove}
-          onTouchEnd={handleEnd}
-        />
+        <LampCirclePicker value={temperature} useEventChannel onTouchEnd={handleEnd} />
       </DemoBlock>
 
       <DemoBlock title="HideThumb">
@@ -47,7 +53,14 @@ export default function Home() {
           useEventChannel
           hideThumb
           lineCap="butt"
-          onTouchMove={handleMove}
+          onTouchEnd={handleEnd}
+        />
+      </DemoBlock>
+      <DemoBlock title="Inactive and maskVisible">
+        <LampCirclePicker
+          value={temperature}
+          inactive={inactive}
+          maskVisible={maskVisible}
           onTouchEnd={handleEnd}
         />
       </DemoBlock>
@@ -76,7 +89,6 @@ export default function Home() {
             color: 'blue',
           }}
           useEventChannel
-          onTouchMove={handleMove}
           onTouchEnd={handleEnd}
         />
       </DemoBlock>

package/lib/component/index.js

@@ -13,6 +13,8 @@ export default function RectColor(props) {
     value: props.value,
     hideThumb: (_props$hideThumb = props.hideThumb) !== null && _props$hideThumb !== void 0 ? _props$hideThumb : false,
     canvasId: props.canvasId,
+    inactive: props.inactive,
+    maskVisible: props.maskVisible,
     colorList: (_props$colorList = props.colorList) !== null && _props$colorList !== void 0 ? _props$colorList : [],
     useEventChannel: props.useEventChannel,
     lineCap: props.lineCap || 'round',
@@ -23,22 +25,44 @@ export default function RectColor(props) {
       const {
         detail
       } = e;
-      const temp = Math.floor(detail);
-      props.onTouchStart && props.onTouchStart(temp);
+      const {
+        rgb,
+        value
+      } = detail;
+      const temp = Math.floor(value);
+      props.onTouchStart && props.onTouchStart(temp, rgb);
     },
     bindmove: e => {
       const {
         detail
       } = e;
-      const temp = Math.floor(detail);
-      props.onTouchMove && props.onTouchMove(temp);
+      const {
+        rgb,
+        value
+      } = detail;
+      const temp = Math.floor(value);
+      props.onTouchMove && props.onTouchMove(temp, rgb);
     },
     bindend: e => {
       const {
         detail
       } = e;
-      const temp = Math.floor(detail);
-      props.onTouchEnd && props.onTouchEnd(temp);
+      const {
+        rgb,
+        value
+      } = detail;
+      const temp = Math.floor(value);
+      props.onTouchEnd && props.onTouchEnd(temp, rgb);
+    },
+    bindinit: e => {
+      const {
+        detail
+      } = e;
+      const {
+        rgb,
+        value
+      } = detail;
+      props.onInit && props.onInit(value, rgb);
     }
   });
 }

package/lib/component/props.d.ts

@@ -49,6 +49,20 @@ export interface IProps {
         offset: number;
         color: string;
     }[];
+    /**
+     * @description.zh 关闭状态
+     * @description.en inactive
+     * @default false
+     * @version 1.1.0
+     */
+    inactive?: boolean;
+    /**
+     * @description.zh 是否显示遮罩
+     * @description.en maskVisible
+     * @default false
+     * @version 1.1.0
+     */
+    maskVisible?: boolean;
     /**
      * @description.zh 事件通道名称
      * @description.en Event channel name
@@ -60,19 +74,41 @@ export interface IProps {
      * @description.en Finger press when the callback function
      * @default ''
      */
-    onTouchStart?: (value: number) => void;
+    onTouchStart?: (value: number, rgb: {
+        r: number;
+        g: number;
+        b: number;
+    }) => void;
     /**
      * @description.zh 手指按下拖动时的回调函数
      * @description.en Finger to press the drag of the callback function
      * @default ''
      */
-    onTouchMove?: (value: number) => void;
+    onTouchMove?: (value: number, rgb: {
+        r: number;
+        g: number;
+        b: number;
+    }) => void;
     /**
      * @description.zh 手指按下结束时的回调函数
      * @description.en Finger press at the end of the callback function
      * @default ''
      */
-    onTouchEnd?: (value: number) => void;
+    onTouchEnd?: (value: number, rgb: {
+        r: number;
+        g: number;
+        b: number;
+    }) => void;
+    /**
+     * @description.zh 初始化时的回调函数
+     * @description.en Initialization when the callback function
+     * @default ''
+     */
+    onInit?: (value: number, rgb: {
+        r: number;
+        g: number;
+        b: number;
+    }) => void;
     /**
      * @description.en touchCircleStrokeStyle
      * @description.zh 触摸圆环描边颜色

package/lib/component/rjs/index.js

@@ -32,6 +32,16 @@ Component({
       type: Number,
       value: 0
     },
+    // 是否显示遮罩
+    maskVisible: {
+      type: Boolean,
+      value: false
+    },
+    // 关闭状态
+    inactive: {
+      type: Boolean,
+      value: false
+    },
     // 是否启用事件通道
     useEventChannel: {
       type: Boolean,
@@ -56,7 +66,9 @@ Component({
     isTouch: false,
     touchType: '',
     colorText: '',
-    tipRectPosition: ETipRectPosition.LEFT
+    tipRectPosition: ETipRectPosition.LEFT,
+    prePowerOff: false,
+    preShowMask: false
   },
   observers: {
     'value.**'(v) {
@@ -67,6 +79,28 @@ Component({
         this._updatePosByRgb(v);
         this.lastValue = v;
       }
+    },
+    inactive(v) {
+      var _this$render, _this$render2;
+      if (this.prePowerOff === v) {
+        return;
+      }
+      (_this$render = this.render) === null || _this$render === void 0 || _this$render.updateOptions({
+        inactive: v
+      });
+      this.prePowerOff = v;
+      (_this$render2 = this.render) === null || _this$render2 === void 0 || _this$render2.updateThumbPosition(null, null, null);
+    },
+    maskVisible(v) {
+      var _this$render3, _this$render4;
+      if (this.preShowMask === v) {
+        return;
+      }
+      this.preShowMask = v;
+      (_this$render3 = this.render) === null || _this$render3 === void 0 || _this$render3.updateOptions({
+        maskVisible: v
+      });
+      (_this$render4 = this.render) === null || _this$render4 === void 0 || _this$render4.updateThumbPosition(null, null, null);
     }
   },
   lifetimes: {
@@ -84,9 +118,9 @@ Component({
       } = this.data;
       this.initCanvas();
       this.timer = setTimeout(() => {
-        var _this$render;
+        var _this$render5;
         this.initCanvas();
-        (_this$render = this.render) === null || _this$render === void 0 || _this$render.checkIsRender(canvasId);
+        (_this$render5 = this.render) === null || _this$render5 === void 0 || _this$render5.checkIsRender(canvasId);
       }, 300);
     },
     detached() {
@@ -112,8 +146,12 @@ Component({
         colorList,
         lineCap = 'round',
         touchCircleStrokeStyle = '',
-        touchCircleLineWidth = 0
+        touchCircleLineWidth = 0,
+        inactive = false,
+        maskVisible = false
       } = this.data;
+      this.prePowerOff = inactive;
+      this.preShowMask = maskVisible;
       // 防止重复渲染
       if (this.lastValue === value) {
         return;
@@ -125,10 +163,16 @@ Component({
         lineCap,
         colorList,
         touchCircleStrokeStyle,
-        touchCircleLineWidth
+        touchCircleLineWidth,
+        inactive,
+        maskVisible
       });
       this.lastValue = value;
     },
+    updateOptions(options) {
+      var _this$render6, _this$render6$updateO;
+      (_this$render6 = this.render) === null || _this$render6 === void 0 || (_this$render6$updateO = _this$render6.updateOptions) === null || _this$render6$updateO === void 0 || _this$render6$updateO.call(_this$render6, options);
+    },
     initedCanvas() {
       const {
         value
@@ -136,25 +180,29 @@ Component({
       value !== undefined && this._updatePosByRgb(value);
     },
     _updatePosByRgb(value) {
-      var _this$render2;
+      var _this$render7;
       if (value === undefined) {
         return;
       }
-      (_this$render2 = this.render) === null || _this$render2 === void 0 || _this$render2._getAnglePositionByValue(value);
+      (_this$render7 = this.render) === null || _this$render7 === void 0 || _this$render7._getAnglePositionByValue(value);
     },
     _getRgb(x, y) {
-      var _this$render3;
-      (_this$render3 = this.render) === null || _this$render3 === void 0 || _this$render3.getAnnulusImageData(x, y);
+      var _this$render8;
+      (_this$render8 = this.render) === null || _this$render8 === void 0 || _this$render8.getAnnulusImageData(x, y);
     },
     _getAnnulusImageData(dataRes) {
       const {
         position,
-        touchType
+        touchType = 'init',
+        rgb
       } = dataRes;
       this.touchType = touchType;
       const result = this._getLengthByAnglePosition(position.x, position.y);
       this.lastValue = result;
-      this.triggerEvent(touchType, result);
+      this.triggerEvent(touchType, {
+        value: result,
+        rgb
+      });
     },
     _getLengthByAnglePosition(x, y) {
       const {

package/lib/component/rjs/index.rjs

@@ -53,7 +53,6 @@ export default Render({
     return rgb ? { r: parseInt(rgb[1]), g: parseInt(rgb[2]), b: parseInt(rgb[3]) } : null;
   },
 
-
   getGradientColors(colorStops, steps) {
     if (
       !Array.isArray(colorStops) ||
@@ -265,9 +264,10 @@ export default Render({
   // 环形色盘 降级绘制
   async renderAnnulusColorLowRank(id, radius, innerRingRadius, options = {}) {
     let canvas = null;
-    const { touchCircleStrokeStyle, ringBorderColor } =
-      options;
+    const { touchCircleStrokeStyle, ringBorderColor, inactive, maskVisible } = options;
     this.touchCircleStrokeStyle = touchCircleStrokeStyle;
+    this.inactive = inactive;
+    this.maskVisible = maskVisible;
     try {
       canvas = await getCanvasById(id);
     } catch (error) {
@@ -279,7 +279,6 @@ export default Render({
       return;
     }
 
-    this.options = options || {};
     this.radius = radius;
     this.innerRingRadius = innerRingRadius;
 
@@ -300,8 +299,8 @@ export default Render({
     const startDegree = 135;
     const offsetDegree = 270;
     const endDegree = startDegree + offsetDegree;
-  
-     this.drawRingWithConicGradient({
+
+    this.drawRingWithConicGradient({
       startAngle: startDegree,
       endAngle: endDegree,
       offsetDegree,
@@ -324,11 +323,19 @@ export default Render({
   // 环形色盘
   async renderAnnulusColor(id, radius, innerRingRadius, temp = 0, options = {}) {
     let canvas = null;
-    const { touchCircleStrokeStyle = '', touchCircleLineWidth = 0, hideThumb = false, lineCap = 'round' } = options || {};
+    const {
+      touchCircleStrokeStyle = '',
+      touchCircleLineWidth = 0,
+      hideThumb = false,
+      lineCap = 'round',
+      inactive = false,
+      maskVisible = false,
+    } = options || {};
     this.touchCircleStrokeStyle = touchCircleStrokeStyle;
     this.touchCircleLineWidth = touchCircleLineWidth;
     this.hideThumb = hideThumb;
-
+    this.inactive = inactive;
+    this.maskVisible = maskVisible;
     try {
       canvas = await getCanvasById(id);
     } catch (error) {
@@ -382,7 +389,7 @@ export default Render({
       } catch (err) {
         console.error('createConicGradient:', err);
       }
-     !this.hideThumb && this.renderAnnulusColorThumb(id, temp);
+      !this.hideThumb && this.renderAnnulusColorThumb(id, temp);
       this.callMethod('initedCanvas', {});
       return;
     }
@@ -393,6 +400,16 @@ export default Render({
     !this.hideThumb && this.renderAnnulusColorThumb(id, temp);
     this.callMethod('initedCanvas', {});
   },
+  updateOptions(options) {
+    const { touchCircleStrokeStyle, touchCircleLineWidth, hideThumb, inactive, maskVisible } =
+      options || {};
+
+    this.touchCircleStrokeStyle = touchCircleStrokeStyle ?? this.touchCircleStrokeStyle;
+    this.touchCircleLineWidth = touchCircleLineWidth ?? this.touchCircleLineWidth;
+    this.hideThumb = hideThumb ?? this.hideThumb;
+    this.inactive = inactive ?? this.inactive;
+    this.maskVisible = maskVisible ?? this.maskVisible;
+  },
   async renderAnnulusColorThumb(id, temp = 0) {
     if (this.hideThumb) {
       return;
@@ -430,7 +447,14 @@ export default Render({
       (this.innerRingRadius + (this.radius - this.innerRingRadius) / 2) *
         Math.sin((angle * Math.PI) / 180);
     const { data } = ctx.getImageData(x * 2, y * 2, 1, 1);
-    this.updateThumbPosition(x, y, { r: data[0], g: data[1], b: data[2] });
+    const rgb = { r: data[0], g: data[1], b: data[2] };
+    this.updateThumbPosition(x, y, rgb);
+    const emitRes = {
+      position: { x, y },
+      touchType: this.touchType,
+      rgb,
+    };
+    this.callMethod('_getAnnulusImageData', emitRes);
   },
   updateThumbPosition(x, y, rgb) {
     if (this.hideThumb) {
@@ -440,6 +464,15 @@ export default Render({
       console.error('canvasThumb not found');
       return;
     }
+    if (typeof x !== 'number' || typeof y !== 'number') {
+      x = this.preX;
+      y = this.preY;
+      rgb = this.preRgb;
+    } else {
+      this.preX = x;
+      this.preY = y;
+      this.preRgb = rgb;
+    }
     let ctx = this.canvasThumbCtx;
     this.canvasThumb.width = this.radius * 4;
     this.canvasThumb.height = this.radius * 4;
@@ -451,7 +484,7 @@ export default Render({
     ctx.arc(x * 2, y * 2, radius, startAngle, endAngle, true);
     ctx.shadowBlur = 24;
     ctx.shadowColor = 'rgba(0, 0, 0, 0.2)';
-    ctx.fillStyle = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
+    ctx.fillStyle = this.inactive ? '#000000' : 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
     ctx.fill();
 
     if (this.touchCircleStrokeStyle) {
@@ -482,6 +515,7 @@ export default Render({
     const emitRes = {
       position: { x, y },
       touchType: this.touchType,
+      rgb: { r, g, b },
     };
     this.callMethod('_getAnnulusImageData', emitRes);
 
@@ -543,6 +577,9 @@ export default Render({
     }
   },
   handleCanvasStartEvent(evt) {
+    if (this.hideThumb) {
+      return;
+    }
     this.touchType = 'start';
     const { changedTouches } = evt;
     const [point] = changedTouches;
@@ -554,6 +591,9 @@ export default Render({
     this._getRgb(validXY.x, validXY.y);
   },
   handleCanvasEndEvent(evt) {
+    if (this.hideThumb) {
+      return;
+    }
     this.touchType = 'end';
     const { changedTouches } = evt;
     const [point] = changedTouches;

package/lib/component/rjs/index.tyml

@@ -5,13 +5,13 @@
         canvas-id="{{ canvasId }}"
         disable-scroll="true"
         style="width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;"
-    >
-    </canvas>
+    />
+    <view class="canvasPowerOffMask" style="position: absolute; top: 0; left: 0; width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;" ty:if="{{ maskVisible }}" />
     <canvas
         class="canvasThumbWrapper"
         type="2d"
         canvas-id="{{ canvasId }}_thumb"
         disable-scroll="true"
         style="position: absolute; top: 0; left: 0; width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;"
-    ></canvas>
+    />
 </view>

package/lib/component/rjs/index.tyss

@@ -9,6 +9,11 @@
   z-index: 11;
 }
 
+.canvasPowerOffMask {
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s ease;
+}
+
 .thumb {
   position: absolute;
   width: 44rpx;

package/lib/index.d.ts

@@ -17,6 +17,7 @@ declare const LampCirclePicker: {
         onTouchStart: () => null;
         onTouchMove: () => null;
         onTouchEnd: () => null;
+        onInit: () => null;
     };
 };
 export default LampCirclePicker;

package/lib/index.js

@@ -1,6 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/esnext.iterator.map.js";
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { View, Text } from '@ray-js/components';
 import clsx from 'clsx';
 import Strings from './i18n';
@@ -23,6 +23,8 @@ const LampCirclePicker = props => {
     showInnerCircle = true,
     touchCircleLineWidth = 0,
     touchCircleStrokeStyle = '',
+    inactive = false,
+    maskVisible = false,
     innerBorderStyle = {
       width: 5,
       color: '#eee'
@@ -32,6 +34,7 @@ const LampCirclePicker = props => {
     onTouchMove,
     onTouchEnd
   } = props;
+  const [innerCircleColor, setInnerCircleColor] = useState('');
   const innerImgRadius = innerRingRadius * 4 * 0.8;
   const _value = value !== null && value !== void 0 ? value : temperature;
   const canvasId = useMemo(() => {
@@ -49,22 +52,7 @@ const LampCirclePicker = props => {
   return /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.container, styled.flexCenter),
     style: style
-  }, /*#__PURE__*/React.createElement(AnnulusPickerColor, {
-    canvasId: canvasId,
-    hideThumb: hideThumb,
-    value: _value,
-    radius: radius,
-    touchCircleLineWidth: touchCircleLineWidth,
-    touchCircleStrokeStyle: touchCircleStrokeStyle,
-    innerRingRadius: innerRingRadius,
-    colorList: _colorList,
-    lineCap: lineCap,
-    useEventChannel: useEventChannel || false,
-    eventChannelName: eventChannelName,
-    onTouchStart: onTouchStart,
-    onTouchMove: onTouchMove,
-    onTouchEnd: onTouchEnd
-  }), /*#__PURE__*/React.createElement(View, {
+  }, /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.innerBox, styled.flexCenter)
   }, showInnerCircle && /*#__PURE__*/React.createElement(View, {
     className: styled.ringIcon,
@@ -72,7 +60,8 @@ const LampCirclePicker = props => {
       width: innerImgRadius,
       height: innerImgRadius,
       borderRadius: innerImgRadius,
-      border: `${borderWidth}px solid ${borderColor}`
+      border: `${borderWidth}px solid ${borderColor}`,
+      backgroundColor: innerCircleColor || 'transparent'
     }
   }), /*#__PURE__*/React.createElement(View, {
     className: clsx(styled.textBox, styled.flexCenter)
@@ -82,7 +71,30 @@ const LampCirclePicker = props => {
   }, Math.trunc(_value / 10), "%"), /*#__PURE__*/React.createElement(Text, {
     className: styled.desc,
     style: descStyle
-  }, descText !== null && descText !== void 0 ? descText : Strings.getLang('temperature')))));
+  }, descText !== null && descText !== void 0 ? descText : Strings.getLang('temperature')))), /*#__PURE__*/React.createElement(AnnulusPickerColor, {
+    canvasId: canvasId,
+    hideThumb: hideThumb,
+    value: _value,
+    radius: radius,
+    touchCircleLineWidth: touchCircleLineWidth,
+    touchCircleStrokeStyle: touchCircleStrokeStyle,
+    innerRingRadius: innerRingRadius,
+    colorList: _colorList,
+    inactive: inactive,
+    maskVisible: maskVisible,
+    lineCap: lineCap,
+    useEventChannel: useEventChannel || false,
+    eventChannelName: eventChannelName,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: (v, rgb) => {
+      setInnerCircleColor(`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`);
+      onTouchEnd === null || onTouchEnd === void 0 || onTouchEnd(v);
+    },
+    onInit: (v, rgb) => {
+      setInnerCircleColor(`rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`);
+    }
+  }));
 };
 const nilFn = () => null;
 LampCirclePicker.defaultProps = {
@@ -105,6 +117,7 @@ LampCirclePicker.defaultProps = {
   style: {},
   onTouchStart: nilFn,
   onTouchMove: nilFn,
-  onTouchEnd: nilFn
+  onTouchEnd: nilFn,
+  onInit: nilFn
 };
 export default LampCirclePicker;

package/lib/index.module.less

@@ -13,6 +13,7 @@
 
     .textBox {
       flex-direction: column;
+      z-index: 100;
 
       .title {
         font-weight: 600;

package/lib/props.d.ts

@@ -45,8 +45,8 @@ export interface IProps {
      */
     onTouchStart?: (value: number) => void;
     /**
-     * @description.zh 手指按下拖动时的回调函数
-     * @description.en Finger to press the drag of the callback function
+     * @description.zh 手指按下拖动时的回调函数, 一般不建议使用，存在性能问题, 使用的话 也需要添加节流防止高频触发
+     * @description.en Finger to press the drag of the callback function, not recommended to use, there is a performance problem, if used, it is also necessary to add throttle to prevent high-frequency triggering
      * @default ''
      */
     onTouchMove?: (value: number) => void;
@@ -68,6 +68,20 @@ export interface IProps {
      * @default false
      */
     useEventChannel?: boolean;
+    /**
+     * @description.en inactive
+     * @description.zh 关闭状态
+     * @default false
+     * @version 1.1.0
+     */
+    inactive?: boolean;
+    /**
+     * @description.en maskVisible
+     * @description.zh 是否显示遮罩
+     * @default false
+     * @version 1.1.0
+     */
+    maskVisible?: boolean;
     /**
      * @description.en eventChannelName
      * @description.zh 事件名

package/package.json

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