nv-basic-bw 1.0.19 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calc.js +59 -1
- package/package.json +1 -1
package/calc.js
CHANGED
|
@@ -255,6 +255,63 @@ const get_deep_elements_from_point = (x, y) => {
|
|
|
255
255
|
return Array.from(elements);
|
|
256
256
|
};
|
|
257
257
|
|
|
258
|
+
/**
|
|
259
|
+
* 根据索引获取具备高辨识度的状态样式 (Indexed Distinct Style)
|
|
260
|
+
* 采用黄金角算法确保色相跨度最大，并结合背景材质进行分组细化。
|
|
261
|
+
*/
|
|
262
|
+
function get_indexed_distinct_style(idx, total) {
|
|
263
|
+
if (idx === 0) return {
|
|
264
|
+
backgroundColor: '#ffffff',
|
|
265
|
+
backgroundImage: 'none',
|
|
266
|
+
color: '#000'
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
const goldenAngle = 137.508;
|
|
270
|
+
const hue = (idx * goldenAngle) % 360;
|
|
271
|
+
|
|
272
|
+
// 分组逻辑：将 360 度分为 6 个主色相组
|
|
273
|
+
const group = Math.floor(hue / 60);
|
|
274
|
+
|
|
275
|
+
let style = {
|
|
276
|
+
backgroundColor: `hsl(${hue}, 75%, 82%)`, // 统一亮度
|
|
277
|
+
backgroundImage: 'none',
|
|
278
|
+
color: '#000',
|
|
279
|
+
fontWeight: 'bold',
|
|
280
|
+
border: 'none'
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
const dark_mask = 'rgba(0,0,0,0.12)';
|
|
284
|
+
const light_mask = 'rgba(255,255,255,0.4)';
|
|
285
|
+
|
|
286
|
+
// 基于 group 的背景材质编码 (Visual Fingerprinting)
|
|
287
|
+
if (group === 0) { // 红色系 - 纯平材质
|
|
288
|
+
style.backgroundImage = 'none';
|
|
289
|
+
}
|
|
290
|
+
else if (group === 1) { // 黄色系 - 经典波点
|
|
291
|
+
style.backgroundImage = `radial-gradient(${dark_mask} 15%, transparent 16%)`;
|
|
292
|
+
style.backgroundSize = '6px 6px';
|
|
293
|
+
}
|
|
294
|
+
else if (group === 2) { // 绿色系 - 微型格纹
|
|
295
|
+
style.backgroundImage = `linear-gradient(45deg, ${dark_mask} 25%, transparent 25%, transparent 75%, ${dark_mask} 75%, ${dark_mask}), linear-gradient(45deg, ${dark_mask} 25%, transparent 25%, transparent 75%, ${dark_mask} 75%, ${dark_mask})`;
|
|
296
|
+
style.backgroundSize = '10px 10px';
|
|
297
|
+
style.backgroundPosition = '0 0, 5px 5px';
|
|
298
|
+
}
|
|
299
|
+
else if (group === 3) { // 青色系 - 散斑材质
|
|
300
|
+
style.backgroundImage = `radial-gradient(${dark_mask} 15%, transparent 16%), radial-gradient(${light_mask} 15%, transparent 16%)`;
|
|
301
|
+
style.backgroundSize = '8px 8px';
|
|
302
|
+
style.backgroundPosition = '0 0, 4px 4px';
|
|
303
|
+
}
|
|
304
|
+
else if (group === 4) { // 蓝色系 - 垂直栅栏纹
|
|
305
|
+
style.backgroundImage = `linear-gradient(90deg, ${dark_mask} 1px, transparent 1px)`;
|
|
306
|
+
style.backgroundSize = '4px 100%';
|
|
307
|
+
}
|
|
308
|
+
else { // 紫色系 - 柔光渐变
|
|
309
|
+
style.backgroundImage = `radial-gradient(circle at center, ${light_mask} 0%, transparent 75%)`;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
return style;
|
|
313
|
+
}
|
|
314
|
+
|
|
258
315
|
module.exports = {
|
|
259
316
|
creat_rect_desc,
|
|
260
317
|
get_rect_desc_bfr_transfrom,
|
|
@@ -267,5 +324,6 @@ module.exports = {
|
|
|
267
324
|
get_z_stacking_context_chain,
|
|
268
325
|
compare_z_physically,
|
|
269
326
|
is_below_at_z,is_same_at_z,is_upper_at_z,
|
|
270
|
-
get_deep_elements_from_point
|
|
327
|
+
get_deep_elements_from_point,
|
|
328
|
+
get_indexed_distinct_style
|
|
271
329
|
}
|