拖动组件

package.json

@@ -17,12 +17,13 @@
     "start:native": "ray start --target=native"
   },
   "dependencies": {
-    "@ray-js/ray": "^0.6.15",
+    "@ray-js/components-ty-lamp": "^1.3.0",
     "@ray-js/panel-sdk": "^1.1.4",
+    "@ray-js/ray": "^0.6.15",
+    "core-js": "^3.23.5",
     "fast-deep-equal": "^3.1.3",
     "jotai": "^1.7.0",
-    "lodash": "^4.17.21",
-    "core-js": "^3.23.5"
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@commitlint/cli": "^7.2.1",
@@ -56,4 +57,4 @@
   },
   "author": "",
   "license": "ISC"
-}
+}
\ No newline at end of file

src/components/hubCircle/index.tsx

-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { LampCirclePicker } from '@ray-js/components-ty-lamp';
+import throttle from 'lodash/throttle';
 import { utils } from '@ray-js/panel-sdk';
 import { getElementById } from '@ray-js/api';
 import { hsvToDpdata, dpdataToHsv, temperatureToRgb } from '@/utils';
@@ -65,12 +67,30 @@ const HubCircle: React.FC<Props> = props => {
     { temp_value: 300, bright_value: 300, color: '#FFE2A4', active: false },
   ]);
 
+  const getColor = (bright_value: number, KL = (6500 - 2700) / 2 + 2700) => {
+    const colorRgb = temperatureToRgb(KL);
+    const colorHsv = rgb2hsv(colorRgb[0], colorRgb[1], colorRgb[2]);
+    const nowColor = hsv2rgbString(colorHsv[0], colorHsv[1], colorHsv[2], bright_value / 1000);
+    return nowColor;
+  };
+
   const [dataState, setDataState] = useState({
     angleValue: 0, // 角度值 0 ~ 360
     angleShow: 0, // 角度展示 0 ~ 180
     tempshow: (6500 - 2700) / 2 + 2700, // 色温展示
-    nowColor: '#FFE2A4', // 当前颜色
+    nowColor: '#000', // 当前颜色
+    bright_value: dpState.bright_value,
   });
+
+  useEffect(() => {
+    const kl = getTempshowByDpTemp(dpState.temp_value);
+    const color = getColor(dpState.bright_value, kl);
+    setDataState({
+      ...dataState,
+      nowColor: color,
+      tempshow: kl,
+    });
+  }, []);
   // 442
   const circleLocationOrigin = (tempValue: number) => {
     let rad;
@@ -183,7 +203,7 @@ const HubCircle: React.FC<Props> = props => {
     dataSourse.mouse_offset.y = mouse_offset_y;
   };
 
-  const handleBarMove = (e: any) => {
+  const handleBarMove = throttle((e: any) => {
     e.origin.stopPropagation();
     const event_offset_x =
       e.origin.touches[0].clientX -
@@ -214,12 +234,19 @@ const HubCircle: React.FC<Props> = props => {
       left,
       top,
     });
-  };
+  }, 50);
 
   const handleBarEnd = () => {
     setColorStateAtom({ ifDrag: false });
     const dpValue = getTempDpValue(dataState.angleValue, dataState.angleShow);
-    console.log(dpValue);
+    const colorRgb = temperatureToRgb(dataState.tempshow);
+    const colorHsv = rgb2hsv(colorRgb[0], colorRgb[1], colorRgb[2]);
+    const nowColor = hsv2rgbString(colorHsv[0], colorHsv[1], dpState.bright_value, 1);
+
+    setDataState({
+      ...dataState,
+      nowColor,
+    });
     props.onSetDpState('temp_value', dpValue);
   };
 
@@ -292,6 +319,43 @@ const HubCircle: React.FC<Props> = props => {
     setModalShow(flag);
   };
 
+  const handleSlider = (type, e) => {
+    const bright_value = e.value;
+    props.onSetDpState('bright_value', bright_value);
+  };
+
+  const handleSlidering = (type, e) => {
+    const bright_value = e.value;
+    const colorRgb = temperatureToRgb(dataState.tempshow);
+    const colorHsv = rgb2hsv(colorRgb[0], colorRgb[1], colorRgb[2]);
+    const nowColor = hsv2rgbString(
+      colorHsv[0],
+      colorHsv[1],
+      colorHsv[2],
+      dataState.bright_value / 1000
+    );
+
+    setDataState({
+      ...dataState,
+      nowColor,
+      bright_value,
+    });
+  };
+
+  const getTempshowByDpTemp = (dpTemp: number) => {
+    const start = dataSourse.tempValue[0];
+    const end = dataSourse.tempValue[1];
+    const tempValue = ((end - start) / 1000) * dpTemp + start;
+    return tempValue;
+  };
+  // const [temperature, setTemperature] = useState(dpState.temp_value);
+  // const handleMove = (v: number) => {
+  //   setTemperature(v);
+  // };
+  // const handleEnd = (v: number) => {
+  //   setTemperature(v);
+  // };
+
   return (
     <View className={styles.box}>
       <View className={styles.header}>
@@ -306,12 +370,19 @@ const HubCircle: React.FC<Props> = props => {
               top: `${circleLocation.top}px`,
               width: `${dataSourse.bar_r * 2}px`,
               height: `${dataSourse.bar_r * 2}px`,
+              backgroundColor: dataState.nowColor,
             }}
             onTouchStart={handleBarTouch}
             onTouchMove={handleBarMove}
             onTouchEnd={handleBarEnd}
           />
         </View>
+        {/* <LampCirclePicker
+          canvasId="whiteRing"
+          temperature={temperature}
+          onTouchMove={handleMove}
+          onTouchEnd={handleEnd}
+        /> */}
       </View>
       <View className={styles.panel}>
         {/* <View className={styles.configList}>
@@ -345,17 +416,13 @@ const HubCircle: React.FC<Props> = props => {
               min={codeMap.bright_value.property.min}
               max={codeMap.bright_value.property.max}
               step={codeMap.bright_value.property.step}
-              value={dpState.bright_value}
-              onChange={e => props.onSetDpState('bright_value', e.value)}
+              value={dataState.bright_value}
+              onChange={e => handleSlider('bright_value', e)}
+              onChanging={e => handleSlidering('bright_value', e)}
             />
           </View>
           <Text className={styles.SliderValue}>
-            {toParseInt(
-              (dpState.bright_value /
-                (codeMap.bright_value.property.max - codeMap.bright_value.property.min)) *
-                100
-            )}
-            %
+            {toParseInt((dataState.bright_value / 1000) * 100)}%
           </Text>
         </View>
         <View className={styles.configList}>

src/components/hubColorCircle/index.tsx

@@ -309,6 +309,7 @@ const HubCircle: React.FC<Props> = props => {
               top: `${circleLocation.top}px`,
               width: `${dataSourse.bar_r * 2}px`,
               height: `${dataSourse.bar_r * 2}px`,
+              backgroundColor: dataState.nowColor,
             }}
             onTouchStart={handleBarTouch}
             onTouchMove={handleBarMove}

src/utils/index.ts

@@ -95,7 +95,8 @@ export const format = (value: string, len = 2) => {
 
 /**
  * @desc 将色温转化为rgb
- * 范围为1000~40000
+ * 范围为2700~6500
+ * 对应范围为1000~40000
  * @param {number} temperature - 5000
  *
  * @return {array} [r,g,b]