@ray-js/lamp-bead-strip 1.0.1-beta-1

package/lib/components/utils.js

@@ -0,0 +1,187 @@
+/* eslint-disable radix */
+
+// 解析RGB颜色字符串为数组
+function parseRGB(color) {
+  const result = color.replace('rgba(', '').replace('rgb(', '').replace(')', '').split(',');
+  return [Number(result[0]), Number(result[1]), Number(result[2])];
+}
+
+/**
+ * 生成渐变颜色数组
+ * @param {Array} colors - 长度为2-8的RGB颜色字符串数组，例如['rgb(255, 0, 0)', 'rgb(0, 255, 0)']
+ * @param {number} steps - 希望生成的渐变颜色数量
+ * @return {Array} 生成的渐变颜色数组
+ */
+export function generateGradientColors() {
+  let colors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let steps = arguments.length > 1 ? arguments[1] : undefined;
+  if (colors.length < 2 || colors.length > 8) {
+    throw new Error('颜色数组长度必须为2至8之间');
+  }
+  if (steps <= 0) {
+    throw new Error('步骤数必须大于0');
+  }
+
+  // 生成单个频道的渐变色
+  function interpolate(start, end, factor) {
+    return Math.round(start + (end - start) * factor);
+  }
+
+  // 生成两个颜色之间的渐变色
+  function interpolateColors(color1, color2, factor) {
+    const r = interpolate(color1[0], color2[0], factor);
+    const g = interpolate(color1[1], color2[1], factor);
+    const b = interpolate(color1[2], color2[2], factor);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  const parsedColors = colors.map(parseRGB);
+  const gradientColors = [];
+  for (let i = 0; i < steps; i++) {
+    const scaleIndex = i * (parsedColors.length - 1) / (steps - 1);
+    const startColorIndex = Math.floor(scaleIndex);
+    const endColorIndex = Math.ceil(scaleIndex);
+    const color = interpolateColors(parsedColors[startColorIndex], parsedColors[endColorIndex], scaleIndex - startColorIndex);
+    gradientColors.push(color);
+  }
+  return gradientColors;
+}
+export const topList = [0, 2.81, 2.29, 1.76, 1.2, 0.63, 0.06, -0.52, -1.12, -1.72, -2.1, -2.04, -1.58, -0.96, -0.37, 0.2, 0.78, 1.34, 1.9, 2.45];
+export function getListByIndex(list, number) {
+  const max = list.length - 1;
+  // eslint-disable-next-line no-param-reassign
+  if (number > max) number %= list.length;
+  return list[number];
+}
+export function splitNumber(number, parts) {
+  if (parts < 2 || parts > 8) {
+    throw new Error('Parts must be between 2 and 8');
+  }
+  const base = Math.floor(number / parts); // 基本分割值
+
+  // 余数，用于均匀分摊
+
+  const result = Array(parts).fill(base); // 创建一个数组并初始化为基本分割值
+
+  // 将余数均匀分配到前几个部分中
+  for (let i = 0; i < number % parts; i++) {
+    result[i]++;
+  }
+  return result;
+}
+export function arrayFill(number, str) {
+  if (number <= 0) return [];
+  return new Array(number).fill(str);
+}
+export function splitLight(color) {
+  const numberArr = {
+    2: [10, 10],
+    // 2
+    3: [6, 7, 7],
+    // 3
+    4: [5, 5, 5, 5],
+    // 4
+    5: [5, 5, 5, 5],
+    // 20
+    6: [5, 5, 5, 5],
+    // 12
+    7: [5, 5, 5, 5],
+    // 28
+    8: [5, 5, 5, 5] // 8
+  }[color.length];
+  let colors = color;
+  switch (color.length) {
+    case 5:
+      colors = arrayFill(4, colors).flat(1);
+      break;
+    case 6:
+      colors = arrayFill(2, colors).flat(1);
+      break;
+    case 7:
+      colors = arrayFill(4, colors).flat(1);
+      break;
+    default:
+      break;
+  }
+  const colorsList = splitArray(colors, numberArr.length);
+  return {
+    arr: numberArr,
+    color: colorsList
+  };
+}
+
+/**
+ * 将数组等分割
+ */
+export const splitArray = function (array) {
+  let interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 4;
+  const result = [];
+  let temp = [];
+  // eslint-disable-next-line no-restricted-syntax
+  for (const item of array) {
+    temp.push(item);
+    if (temp.length === interval) {
+      result.push(temp);
+      temp = [];
+    }
+  }
+  if (temp.length) {
+    result.push(temp);
+  }
+  return result;
+};
+/**
+ * @name: 获取数组内颜色叠加的颜色值
+ * @desc:
+ * @param {*} rgbArray
+ * @return {*} String
+ */
+export function averageRGBColors(rgbArray) {
+  const {
+    length
+  } = rgbArray;
+  if (length === 0) {
+    throw new Error('The input array is empty');
+  }
+
+  // 初始化总和数组
+  let total = [0, 0, 0];
+
+  // 解析并叠加每个颜色
+  // eslint-disable-next-line no-restricted-syntax
+  for (const rgbString of rgbArray) {
+    const [r, g, b] = parseRGB(rgbString);
+    total[0] += r;
+    total[1] += g;
+    total[2] += b;
+  }
+
+  // 计算平均值
+  const average = total.map(sum => Math.round(sum / length));
+
+  // 限制颜色分量在0到255之间
+  const clamp = value => Math.max(0, Math.min(255, value));
+
+  // 合成结果RGB字符串
+  const resultRGB = `rgb(${clamp(average[0])}, ${clamp(average[1])}, ${clamp(average[2])})`;
+  return resultRGB;
+}
+export function findOverlapIndices(range1, range2) {
+  const [start1, end1] = range1;
+  const [start2, end2] = range2;
+
+  // 计算重叠起始和结束索引
+  const overlapStart = Math.max(start1 < 0 ? 0 : start1, start2 < 0 ? 0 : start2);
+  const overlapEnd = Math.min(end1 < 0 ? 0 : end1, end2 < 0 ? 0 : end2);
+
+  // 检查是否存在交集
+  if (overlapStart > overlapEnd) {
+    return []; // 没有交集，返回空数组
+  }
+
+  // 生成重叠部分的索引数组
+  const overlapIndices = [];
+  for (let i = overlapStart; i <= overlapEnd; i++) {
+    overlapIndices.push(i);
+  }
+  return overlapIndices;
+}

package/lib/index.config.js

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

package/lib/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IProps } from './props';
+declare const LampBeadStrip: {
+    (props: IProps): React.JSX.Element;
+    defaultProps: IProps;
+    displayName: string;
+};
+export default LampBeadStrip;

package/lib/index.js

@@ -0,0 +1,20 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import LampBeadStripRjs from './components';
+import { getSystemInfoRes } from './utils';
+import { defaultProps } from './props';
+const {
+  windowWidth = 375
+} = getSystemInfoRes();
+const LampBeadStrip = props => {
+  // 组件缩放能力
+
+  return /*#__PURE__*/React.createElement(LampBeadStripRjs, {
+    prop: _objectSpread(_objectSpread({}, props), {}, {
+      scale: props.scale || windowWidth / 375
+    })
+  });
+};
+LampBeadStrip.defaultProps = defaultProps;
+LampBeadStrip.displayName = 'LampBeadStrip';
+export default LampBeadStrip;

package/lib/props.d.ts

@@ -0,0 +1,67 @@
+export interface IProps {
+    /**
+     * @description.zh 样式类
+     * @description.en class Name
+     * @default ''
+     */
+    className?: string;
+    /**
+     * @description.zh 动画模式 1-16
+     * @description.en Animation mode 1-16
+     * @default 1
+     */
+    mode?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+    /**
+     * @description.zh canvas唯一标识
+     * @description.en canvasId Unique identifier
+     */
+    canvasId: string | number;
+    /**
+     * @description.zh canvas父亲盒子样式
+     * @description.en canvas father box style
+     */
+    containerStyle?: string;
+    /**
+     * @description.zh canvas 盒子样式
+     * @description.en canvas Box style
+     */
+    canvasStyle?: string;
+    /**
+     * @description.zh 动画颜色列表必须：rgb
+     * @description.en Animation Color List must rgb
+     */
+    colors: string[];
+    /**
+     * @description.zh 动画速度 1%-100% 对应动画帧刷新间隔 60ms～350ms，速度值越大，间隔越短
+     * @description.en The animation speed ranges from 1% to 100%, corresponding to a frame refresh interval of 60ms to 350ms. The larger the speed value, the shorter the interval
+     * @default 50
+     */
+    speed?: number;
+    /**
+     * @description.zh 是否播放动画
+     * @description.en Whether to play the animation.
+     * @default true
+     */
+    ready?: boolean;
+    /**
+     * @description.zh 缩放比例，适应屏幕
+     * @description.en Zoom ratio adapts to the screen
+     */
+    scale?: number;
+    /**
+     * @description.zh 详细控制 direction 方向(0/1) segmented 段落(0/1) expand 扩展(0/1/2)
+     * @description.en Detailed control of direction (0/1) segmented paragraph (0/1) expand (0/2)
+     */
+    contentValue?: {
+        expand?: 0 | 1 | 2;
+        direction?: 0 | 1;
+        segmented?: 0 | 1;
+    };
+    /**
+     * @description.zh 关闭灯的颜色
+     * @description.en Turn off the color of the light
+     * @default 'rgb(58,58,58)'
+     */
+    closeColor?: string;
+}
+export declare const defaultProps: IProps;

package/lib/props.js

@@ -0,0 +1,18 @@
+/*
+ * @Author: mjh
+ * @Date: 2024-09-12 09:55:13
+ * @LastEditors: mjh
+ * @LastEditTime: 2024-10-21 14:00:58
+ * @Description:
+ */
+
+export const defaultProps = {
+  mode: 1,
+  canvasId: undefined,
+  ready: true,
+  speed: 50,
+  colors: [],
+  contentValue: {},
+  closeColor: 'rgb(58,58,58)',
+  className: ''
+};

package/lib/utils.d.ts

@@ -0,0 +1 @@
+export declare const getSystemInfoRes: () => {} | null;

package/lib/utils.js

@@ -0,0 +1,21 @@
+/*
+ * @Author: mjh
+ * @Date: 2024-09-02 15:08:35
+ * @LastEditors: mjh
+ * @LastEditTime: 2024-09-02 15:08:46
+ * @Description:
+ */
+import { getSystemInfoSync } from '@ray-js/ray';
+let _systemInfo = null;
+export const getSystemInfoRes = () => {
+  if (_systemInfo) {
+    return _systemInfo;
+  }
+  try {
+    _systemInfo = getSystemInfoSync();
+  } catch (error) {
+    console.error(error);
+    return {};
+  }
+  return _systemInfo;
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@ray-js/lamp-bead-strip",
+  "version": "1.0.1-beta-1",
+  "description": "动画灯珠条带",
+  "main": "lib/index",
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "types": "lib/index.d.ts",
+  "maintainers": [
+    "tuya_npm",
+    {
+      "name": "tuyafe",
+      "email": "tuyafe@tuya.com"
+    }
+  ],
+  "scripts": {
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+    "build": "patch-package && ray build --type=component",
+    "watch": "ray start --type=component --output ./example/src/lib",
+    "build:tuya": "ray build ./example",
+    "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",
+    "start:wechat": "ray start ./example -t wechat --verbose",
+    "start:web": "ray start ./example -t web",
+    "prepublishOnly": "yarn build",
+    "release-it": "standard-version"
+  },
+  "peerDependencies": {
+    "@ray-js/ray": "^1.4.9"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@commitlint/cli": "^7.2.1",
+    "@commitlint/config-conventional": "^9.0.1",
+    "@ray-js/cli": "^1.4.9",
+    "@ray-js/panel-sdk": "^1.12.1",
+    "@ray-js/ray": "^1.4.9",
+    "core-js": "^3.19.1",
+    "eslint-config-tuya-panel": "^0.4.2",
+    "husky": "^1.2.0",
+    "lint-staged": "^10.2.11",
+    "patch-package": "^8.0.0",
+    "standard-version": "9.3.2"
+  },
+  "resolutions": {
+    "@ray-js/builder-mp": "1.4.15"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS --config commitlint.config.js",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write",
+      "git add"
+    ]
+  }
+}