diff --git a/src/components/led-strip-configuration/display-info-panel.tsx b/src/components/led-strip-configuration/display-info-panel.tsx index 3f5286d..f0f0810 100644 --- a/src/components/led-strip-configuration/display-info-panel.tsx +++ b/src/components/led-strip-configuration/display-info-panel.tsx @@ -24,7 +24,7 @@ export const DisplayInfoPanel: Component = (props) => {
- 显示器信息 + 显示器信息 {localProps.display.is_primary && (
主显示器
)} diff --git a/src/components/led-strip-configuration/display-view.tsx b/src/components/led-strip-configuration/display-view.tsx index f7eb405..b324173 100644 --- a/src/components/led-strip-configuration/display-view.tsx +++ b/src/components/led-strip-configuration/display-view.tsx @@ -6,6 +6,7 @@ import { DisplayInfoPanel } from './display-info-panel'; import { LedStripPart } from './led-strip-part'; import { ScreenView } from './screen-view'; + type DisplayViewProps = { display: DisplayInfo; }; diff --git a/src/components/led-strip-configuration/led-count-control-panel.tsx b/src/components/led-strip-configuration/led-count-control-panel.tsx new file mode 100644 index 0000000..ed9d804 --- /dev/null +++ b/src/components/led-strip-configuration/led-count-control-panel.tsx @@ -0,0 +1,155 @@ +import { invoke } from '@tauri-apps/api/core'; +import { Component, createMemo, For, JSX, splitProps } from 'solid-js'; +import { DisplayInfo } from '../../models/display-info.model'; +import { ledStripStore } from '../../stores/led-strip.store'; +import { Borders } from '../../constants/border'; + +type LedCountControlItemProps = { + displayId: number; + border: Borders; + label: string; +}; + +const LedCountControlItem: Component = (props) => { + const config = createMemo(() => { + return ledStripStore.strips.find( + (s) => s.display_id === props.displayId && s.border === props.border + ); + }); + + const handleDecrease = () => { + if (config()) { + invoke('patch_led_strip_len', { + displayId: props.displayId, + border: props.border, + deltaLen: -1, + }).catch((e) => { + console.error(e); + }); + } + }; + + const handleIncrease = () => { + if (config()) { + invoke('patch_led_strip_len', { + displayId: props.displayId, + border: props.border, + deltaLen: 1, + }).catch((e) => { + console.error(e); + }); + } + }; + + const handleInputChange = (e: Event) => { + const target = e.target as HTMLInputElement; + const newValue = parseInt(target.value); + const currentLen = config()?.len || 0; + + if (!isNaN(newValue) && newValue >= 0 && newValue <= 1000) { + const deltaLen = newValue - currentLen; + if (deltaLen !== 0) { + invoke('patch_led_strip_len', { + displayId: props.displayId, + border: props.border, + deltaLen: deltaLen, + }).catch((e) => { + console.error(e); + // Reset input value on error + target.value = currentLen.toString(); + }); + } + } else { + // Reset invalid input + target.value = (config()?.len || 0).toString(); + } + }; + + return ( +
+
+
+ + {props.label} + +
+ +
+ + + { + if (e.key === 'Enter') { + handleInputChange(e); + } + }} + /> + + +
+
+
+ ); +}; + +type LedCountControlPanelProps = { + display: DisplayInfo; +} & JSX.HTMLAttributes; + +export const LedCountControlPanel: Component = (props) => { + const [localProps, rootProps] = splitProps(props, ['display']); + + const borders: { border: Borders; label: string }[] = [ + { border: 'Top', label: '上' }, + { border: 'Bottom', label: '下' }, + { border: 'Left', label: '左' }, + { border: 'Right', label: '右' }, + ]; + + return ( +
+
+
+ LED数量控制 +
显示器 {localProps.display.id}
+
+ +
+ + {(item) => ( + + )} + +
+ +
+ 💡 提示：点击 +/- 按钮或直接输入数值来调整LED数量（范围：0-1000） +
+
+
+ ); +}; diff --git a/src/components/led-strip-configuration/led-strip-configuration.tsx b/src/components/led-strip-configuration/led-strip-configuration.tsx index 66a9a7a..58b3a6a 100644 --- a/src/components/led-strip-configuration/led-strip-configuration.tsx +++ b/src/components/led-strip-configuration/led-strip-configuration.tsx @@ -7,6 +7,7 @@ import { LedStripConfigContainer } from '../../models/led-strip-config'; import { setLedStripStore } from '../../stores/led-strip.store'; import { listen } from '@tauri-apps/api/event'; import { LedStripPartsSorter } from './led-strip-parts-sorter'; +import { LedCountControlPanel } from './led-count-control-panel'; import { createStore } from 'solid-js/store'; import { LedStripConfigurationContext, @@ -132,15 +133,30 @@ export const LedStripConfiguration = () => { 显示器配置
可视化编辑
- - {displayStore.displays.map((display) => { - console.log('LedStripConfiguration: Rendering DisplayView for display:', display); - return ; - })} - -
- 💡 提示：鼠标滚轮调整灯条长度，悬停查看详细信息 +
+ + {displayStore.displays.map((display) => { + console.log('LedStripConfiguration: Rendering DisplayView for display:', display); + return ; + })} +
+
+ 💡 提示：悬停显示器查看详细信息，使用下方控制面板调整LED数量 +
+
+
+ + {/* LED Count Control Panels */} +
+
+

LED数量控制

+
实时调整
+
+
+ {displayStore.displays.map((display) => ( + + ))}
diff --git a/src/components/led-strip-configuration/led-strip-part.tsx b/src/components/led-strip-configuration/led-strip-part.tsx index 1904874..1ce62c6 100644 --- a/src/components/led-strip-configuration/led-strip-part.tsx +++ b/src/components/led-strip-configuration/led-strip-part.tsx @@ -34,7 +34,7 @@ export const Pixel: Component = (props) => { title={props.color} >
@@ -60,16 +60,32 @@ export const LedStripPart: Component = (props) => { ); if (index === -1) { + console.log('🔍 LED: Strip config not found', { + displayId: localProps.config.display_id, + border: localProps.config.border, + availableStrips: ledStripStore.strips.length + }); return; } const mapper = ledStripStore.mappers[index]; if (!mapper) { + console.log('🔍 LED: Mapper not found', { index, mappersCount: ledStripStore.mappers.length }); return; } const offset = mapper.start * 3; + console.log('🎨 LED: Updating colors', { + displayId: localProps.config.display_id, + border: localProps.config.border, + stripLength: localProps.config.len, + mapperPos: mapper.pos, + offset, + colorsArrayLength: ledStripStore.colors.length, + firstFewColors: Array.from(ledStripStore.colors.slice(offset, offset + 9)) + }); + const colors = new Array(localProps.config.len).fill(null).map((_, i) => { const index = offset + i * 3; const r = ledStripStore.colors[index] || 0; @@ -78,6 +94,12 @@ export const LedStripPart: Component = (props) => { return `rgb(${r}, ${g}, ${b})`; }); + console.log('🎨 LED: Generated colors', { + border: localProps.config.border, + colorsCount: colors.length, + sampleColors: colors.slice(0, 3) + }); + setColors(colors); }); @@ -102,19 +124,7 @@ export const LedStripPart: Component = (props) => { }, }); - const onWheel = (e: WheelEvent) => { - if (localProps.config) { - invoke('patch_led_strip_len', { - displayId: localProps.config.display_id, - border: localProps.config.border, - deltaLen: e.deltaY > 0 ? 1 : -1, - }) - .then(() => {}) - .catch((e) => { - console.error(e); - }); - } - }; + return (
= (props) => { stripConfiguration.selectedStripPart?.displayId === localProps.config?.display_id, }} - onWheel={onWheel} + > {(item) => }