@ray-js/lamp-circle-picker 1.0.15-beta.1 → 1.0.16-beta.1

package/lib/component/rjs/index.js

@@ -1,4 +1,8 @@
 import Render from './index.rjs';
+function getArcTopPadding(radius, innerRingRadius) {
+  let touchCircleLineWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  return Math.ceil(4 + (innerRingRadius + (radius - innerRingRadius) / 2) + (radius - innerRingRadius - 4) / 2 + (touchCircleLineWidth || 24) / 2 + 4 - radius);
+}
 const ETipRectPosition = {
   LEFT: 'LEFT',
   RIGHT: 'RIGHT'
@@ -68,7 +72,9 @@ Component({
     colorText: '',
     tipRectPosition: ETipRectPosition.LEFT,
     prePowerOff: false,
-    preShowMask: false
+    preShowMask: false,
+    topPadding: 0,
+    canvasHeight: 200
   },
   observers: {
     'value.**'(v) {
@@ -108,9 +114,11 @@ Component({
       this.render = new Render(this);
       const {
         radius,
-        innerRingRadius
+        innerRingRadius,
+        touchCircleLineWidth = 0
       } = this.data;
       this.render._setCircles(radius, innerRingRadius);
+      this._updateLayoutMetrics(radius, innerRingRadius, touchCircleLineWidth);
     },
     ready() {
       const {
@@ -152,6 +160,7 @@ Component({
       } = this.data;
       this.prePowerOff = inactive;
       this.preShowMask = maskVisible;
+      this._updateLayoutMetrics(radius, innerRingRadius, touchCircleLineWidth);
       // 防止重复渲染
       if (this.lastValue === value) {
         return;
@@ -204,11 +213,21 @@ Component({
         rgb
       });
     },
+    _updateLayoutMetrics(radius, innerRingRadius) {
+      let touchCircleLineWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+      const topPadding = getArcTopPadding(radius, innerRingRadius, touchCircleLineWidth);
+      this.setData({
+        topPadding,
+        canvasHeight: radius * 2 + topPadding,
+        centerY: radius + topPadding
+      });
+    },
     _getLengthByAnglePosition(x, y) {
       const {
-        radius
+        radius,
+        centerY
       } = this.data;
-      var radian = Math.atan2(y - radius, x - radius); // 弧度
+      var radian = Math.atan2(y - centerY, x - radius); // 弧度
       var angle = radian * (180 / Math.PI); // 角度
       let angleData = 0;
       if (+angle > 135 && +angle <= 180) {

package/lib/component/rjs/index.rjs

@@ -1,6 +1,17 @@
 // commonColor.rjs
 const scale = 2;
 
+function getArcTopPadding(radius, innerRingRadius, touchCircleLineWidth = 0) {
+  const midRadius = innerRingRadius + (radius - innerRingRadius) / 2;
+  const thumbDisplayRadius = (radius - innerRingRadius - 4) / 2;
+  const shadowDisplay = (touchCircleLineWidth || 24) / 2;
+  const strokeHalf = 4;
+  const margin = 4;
+  return Math.ceil(
+    margin + midRadius + thumbDisplayRadius + shadowDisplay + strokeHalf - radius
+  );
+}
+
 function reverseColorStops(colorStops) {
   if (!Array.isArray(colorStops)) {
     console.error('【ray-circle-picker=> Input parameter must be an array.');
@@ -398,13 +409,19 @@ export default Render({
     this.radius = radius;
     this.innerRingRadius = innerRingRadius;
 
+    const { touchCircleLineWidth = 0 } = options;
+    this.topPadding = getArcTopPadding(radius, innerRingRadius, touchCircleLineWidth);
+    this.centerY = radius + this.topPadding;
+    this.centerX = radius;
+
     const diameter = radius * 2;
+    const canvasHeight = diameter + this.topPadding;
     canvas.width = diameter * scale;
-    canvas.height = diameter * scale;
+    canvas.height = canvasHeight * scale;
     const ctx = canvas.getContext('2d');
 
-    const poxCenterX = radius * scale;
-    const poxCenterY = radius * scale;
+    const poxCenterX = this.centerX * scale;
+    const poxCenterY = this.centerY * scale;
 
     const colorList = options.colorList.map(item => {
       return {
@@ -454,7 +471,7 @@ export default Render({
 
     ctx.scale(scale, scale);
     canvas.style.width = `${diameter}px`;
-    canvas.style.height = `${diameter}px`;
+    canvas.style.height = `${canvasHeight}px`;
     this.annulusContext = ctx;
   },
 
@@ -515,6 +532,7 @@ export default Render({
   _setCircles(radius, innerRingRadius) {
     this.radius = radius;
     this.innerRingRadius = innerRingRadius;
+    this.centerX = radius;
   },
   _getAnglePositionByValue(value) {
     const ctx = this.annulusContext;
@@ -524,14 +542,9 @@ export default Render({
     }
 
     const angle = 135 + (value / 1000) * 270;
-    const x =
-      this.radius +
-      (this.innerRingRadius + (this.radius - this.innerRingRadius) / 2) *
-        Math.cos((angle * Math.PI) / 180);
-    const y =
-      this.radius +
-      (this.innerRingRadius + (this.radius - this.innerRingRadius) / 2) *
-        Math.sin((angle * Math.PI) / 180);
+    const midRadius = this.innerRingRadius + (this.radius - this.innerRingRadius) / 2;
+    const x = this.centerX + midRadius * Math.cos((angle * Math.PI) / 180);
+    const y = this.centerY + midRadius * Math.sin((angle * Math.PI) / 180);
     const { data } = ctx.getImageData(Math.round(x * 2), Math.round(y * 2), 1, 1);
     const rgb = { r: data[0], g: data[1], b: data[2] };
     this.updateThumbPosition(x, y, rgb);
@@ -560,8 +573,9 @@ export default Render({
       this.preRgb = rgb;
     }
     let ctx = this.canvasThumbCtx;
+    const canvasHeight = this.radius * 2 + (this.topPadding || 0);
     this.canvasThumb.width = this.radius * 4;
-    this.canvasThumb.height = this.radius * 4;
+    this.canvasThumb.height = canvasHeight * 2;
     ctx.clearRect(0, 0, this.canvasThumb.width, this.canvasThumb.height);
     ctx.beginPath();
     const radius = this.radius - this.innerRingRadius - 4; // 圆弧半径
@@ -585,7 +599,7 @@ export default Render({
     ctx.stroke();
     ctx.scale(2, 2);
     this.canvasThumb.style.width = `${this.radius * 2}px`;
-    this.canvasThumb.style.height = `${this.radius * 2}px`;
+    this.canvasThumb.style.height = `${canvasHeight}px`;
   },
   getAnnulusImageData(x, y) {
     const ctx = this.annulusContext;
@@ -621,10 +635,12 @@ export default Render({
   },
   _getValidMaxMinRes(x, y) {
     const { radius, innerRingRadius } = this;
-    const xDistance = Math.abs(x - radius);
-    const yDistance = Math.abs(y - radius);
+    const centerX = this.centerX ?? radius;
+    const centerY = this.centerY ?? radius;
+    const xDistance = Math.abs(x - centerX);
+    const yDistance = Math.abs(y - centerY);
     const distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
-    const radian = Math.atan2(y - radius, x - radius);
+    const radian = Math.atan2(y - centerY, x - centerX);
     let angle = radian * (180 / Math.PI);
 
     const mid = 90
@@ -635,39 +651,23 @@ export default Render({
       angle = 135;
     }
 
+    const midRadius = innerRingRadius + (radius - innerRingRadius) / 2;
+
     if (angle < 45 || angle > 135) {
-      const thumbPositionY =
-        radius +
-        (innerRingRadius + (radius - innerRingRadius) / 2) *
-          Math.sin(Math.atan2(y - radius, x - radius));
-      const thumbPositionX =
-        radius +
-        (innerRingRadius + (radius - innerRingRadius) / 2) *
-          Math.cos(Math.atan2(y - radius, x - radius));
+      const thumbPositionY = centerY + midRadius * Math.sin(Math.atan2(y - centerY, x - centerX));
+      const thumbPositionX = centerX + midRadius * Math.cos(Math.atan2(y - centerY, x - centerX));
       return { x: thumbPositionX, y: thumbPositionY };
     }
     if (angle >= 45 && angle < 80) {
-      const thumbPositionY =
-        radius +
-        (innerRingRadius + (radius - innerRingRadius) / 2) *
-          Math.sin(Math.atan2(210 - radius, 210 - radius));
-      const thumbPositionX =
-        radius +
-        (innerRingRadius + (radius - innerRingRadius) / 2) *
-          Math.cos(Math.atan2(210 - radius, 210 - radius));
+      const endpointRadian = (45 * Math.PI) / 180;
+      const thumbPositionY = centerY + midRadius * Math.sin(endpointRadian);
+      const thumbPositionX = centerX + midRadius * Math.cos(endpointRadian);
       return { x: thumbPositionX, y: thumbPositionY };
     }
     if (angle > 115 && angle <= 135) {
-      // 修正在范围外的点击区域导致的取色问题
-      const _angle = 135;
-      const realAngle = ((180 - _angle) / 180) * Math.PI;
-
-      const thumbPositionY =
-        radius + (innerRingRadius + (radius - innerRingRadius) / 2) * Math.sin(realAngle);
-
-      const thumbPositionX =
-        radius - (innerRingRadius + (radius - innerRingRadius) / 2) * Math.cos(realAngle);
-
+      const endpointRadian = (135 * Math.PI) / 180;
+      const thumbPositionY = centerY + midRadius * Math.sin(endpointRadian);
+      const thumbPositionX = centerX + midRadius * Math.cos(endpointRadian);
       return { x: thumbPositionX, y: thumbPositionY };
     }
   },

package/lib/component/rjs/index.tyml

@@ -4,14 +4,14 @@
         type="2d"
         canvas-id="{{ canvasId }}"
         disable-scroll="true"
-        style="width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;"
+        style="width: {{ radius * 2 }}px; height: {{ canvasHeight }}px;"
     />
-    <view class="lamp-temp-circle-picker-canvasPowerOffMask" style="position: absolute; top: 0; left: 0; width: {{ radius * 2 }}px; height:  {{ radius * 2 }}px;" ty:if="{{ maskVisible }}" />
+    <view class="lamp-temp-circle-picker-canvasPowerOffMask" style="position: absolute; top: 0; left: 0; width: {{ radius * 2 }}px; height: {{ canvasHeight }}px;" ty:if="{{ maskVisible }}" />
     <canvas
         class="lamp-temp-circle-picker-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;"
+        style="position: absolute; top: 0; left: 0; width: {{ radius * 2 }}px; height: {{ canvasHeight }}px;"
     />
 </view>

package/lib/index.js

@@ -5,6 +5,8 @@ import { View, Text } from '@ray-js/components';
 import clsx from 'clsx';
 import Strings from './i18n';
 import AnnulusPickerColor from './component';
+import { useStdPx2Adapt } from './hooks';
+import { getArcTopPadding } from './utils';
 import './index.less';
 const LampCirclePicker = props => {
   const {
@@ -38,6 +40,10 @@ const LampCirclePicker = props => {
   const [innerCircleColor, setInnerCircleColor] = useState('');
   const innerImgRadius = innerRingRadius * 4 * 0.8;
   const _value = value !== null && value !== void 0 ? value : temperature;
+  const adaptedRadius = useStdPx2Adapt(radius);
+  const adaptedInnerRingRadius = useStdPx2Adapt(innerRingRadius);
+  const adaptedTouchCircleLineWidth = useStdPx2Adapt(touchCircleLineWidth);
+  const topPadding = useMemo(() => getArcTopPadding(adaptedRadius, adaptedInnerRingRadius, adaptedTouchCircleLineWidth), [adaptedRadius, adaptedInnerRingRadius, adaptedTouchCircleLineWidth]);
   const canvasId = useMemo(() => {
     return `canvasId_${String(+new Date()).slice(-3)}_${String(Math.random()).slice(-3)}`;
   }, []);
@@ -54,7 +60,10 @@ const LampCirclePicker = props => {
     className: clsx('lamp-temp-circle-picker-container', 'lamp-temp-circle-picker-flexCenter'),
     style: style
   }, showInnerCircle && /*#__PURE__*/React.createElement(View, {
-    className: clsx('lamp-temp-circle-picker-innerBox', 'lamp-temp-circle-picker-flexCenter')
+    className: clsx('lamp-temp-circle-picker-innerBox', 'lamp-temp-circle-picker-flexCenter'),
+    style: {
+      transform: `translateY(${topPadding / 2}px)`
+    }
   }, /*#__PURE__*/React.createElement(View, {
     className: "lamp-temp-circle-picker-ringIcon",
     style: _objectSpread({

package/lib/index.less

@@ -13,7 +13,6 @@
 
     .lamp-temp-circle-picker-textBox {
       flex-direction: column;
-      position: relative;
       z-index: 100;
 
       .lamp-temp-circle-picker-title {

package/lib/utils/index.d.ts

@@ -9,4 +9,8 @@ export declare const getSystemCacheInfo: () => {
     windowWidth: number;
     windowHeight: number;
 };
+/**
+ * @brief Compute top padding so thumb shadow is not clipped at 270°
+ */
+export declare function getArcTopPadding(radius: number, innerRingRadius: number, touchCircleLineWidth?: number): number;
 export { rgbToHsl, rgb2hsv, hsv2rgb };

package/lib/utils/index.js

@@ -48,4 +48,12 @@ export const getSystemCacheInfo = () => {
   }
   return __systemCacheInfo;
 };
+
+/**
+ * @brief Compute top padding so thumb shadow is not clipped at 270°
+ */
+export function getArcTopPadding(radius, innerRingRadius) {
+  let touchCircleLineWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  return Math.ceil(4 + (innerRingRadius + (radius - innerRingRadius) / 2) + (radius - innerRingRadius - 4) / 2 + (touchCircleLineWidth || 24) / 2 + 4 - radius);
+}
 export { rgbToHsl, rgb2hsv, hsv2rgb };

package/package.json

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