Skip to content

Commit 6b48dc8

Browse files
CC11001100CC11001100
committed
多项功能增强和问题修复: 1.修复交换动画问题 2.添加交换文字说明支持i18n 3.延长动画时间 4.保存用户速度设置 5.更新长数组预设 6.添加键盘快捷键(R/空格/方向键)
1 parent 654718e commit 6b48dc8

File tree

8 files changed

+611
-368
lines changed

8 files changed

+611
-368
lines changed

‎docs/TODO.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,12 @@
99

1010

1111

12+
13+
14+
15+
16+
17+
18+
19+
20+

‎src/components/VisualizerControls.tsx‎

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,23 @@ import React, { useState, useEffect } from 'react';
22
import { useCustomTranslation } from '../i18n';
33
import './VisualizerControls.css';
44

5+
// 本地存储键名
6+
const SPEED_STORAGE_KEY = 'visualization_speed';
7+
58
// 预设示例
69
const PRESETS = [
710
{ name: 'presets.example1', array: [0, 1, 0, 3, 12] },
811
{ name: 'presets.example2', array: [0] },
912
{ name: 'presets.allZeros', array: [0, 0, 0, 0, 0] },
1013
{ name: 'presets.noZeros', array: [1, 2, 3, 4, 5] },
1114
{ name: 'presets.zerosAtEnd', array: [1, 2, 3, 4, 0, 0] },
12-
{ name: 'presets.longArray', array: [0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0] },
15+
{ name: 'presets.longArray', array: [
16+
0, 5, 0, 7, 9, 0, 1, 0, 8, 0,
17+
2, 0, 3, 0, 10, 0, 4, 6, 0, 11,
18+
0, 15, 0, 17, 0, 12, 0, 13, 0, 19,
19+
0, 20, 0, 22, 0, 16, 0, 14, 0, 18,
20+
21, 0, 25, 0, 23, 0, 24, 0, 26, 0
21+
] }, // 50个元素的长数组，包含25个零
1322
];
1423

1524
interface VisualizerControlsProps {
@@ -20,9 +29,19 @@ interface VisualizerControlsProps {
2029
const VisualizerControls: React.FC<VisualizerControlsProps> = ({ onArrayChange, onSpeedChange }) => {
2130
const { t } = useCustomTranslation();
2231
const [inputArray, setInputArray] = useState<string>('');
23-
const [speed, setSpeed] = useState<number>(1);
2432
const [error, setError] = useState<string>('');
2533

34+
// 从localStorage读取之前保存的速度值或使用默认值1.0
35+
const [speed, setSpeed] = useState<number>(() => {
36+
try {
37+
const savedSpeed = localStorage.getItem(SPEED_STORAGE_KEY);
38+
return savedSpeed ? parseFloat(savedSpeed) : 1.0;
39+
} catch (e) {
40+
console.error('Error reading speed from localStorage:', e);
41+
return 1.0;
42+
}
43+
});
44+
2645
// 生成随机数组
2746
const generateRandomArray = () => {
2847
const length = Math.floor(Math.random() * 50) + 1; // 1-50个元素
@@ -39,9 +58,11 @@ const VisualizerControls: React.FC<VisualizerControlsProps> = ({ onArrayChange,
3958
setError('');
4059
};
4160

42-
// 组件初始化时生成随机数据
61+
// 组件初始化时生成随机数据并设置初始速度
4362
useEffect(() => {
4463
generateRandomArray();
64+
// 初始化时将保存的速度值传递给父组件
65+
onSpeedChange(speed);
4566
// eslint-disable-next-line react-hooks/exhaustive-deps
4667
}, []);
4768

@@ -56,6 +77,13 @@ const VisualizerControls: React.FC<VisualizerControlsProps> = ({ onArrayChange,
5677
const newSpeed = parseFloat(e.target.value);
5778
setSpeed(newSpeed);
5879
onSpeedChange(newSpeed);
80+
81+
// 保存到localStorage
82+
try {
83+
localStorage.setItem(SPEED_STORAGE_KEY, newSpeed.toString());
84+
} catch (e) {
85+
console.error('Error saving speed to localStorage:', e);
86+
}
5987
};
6088

6189
// 应用数组

‎src/components/VisualizerPage.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './VisualizerPage.css';
77
const VisualizerPage: React.FC = () => {
88
const { t, i18n } = useCustomTranslation();
99
const [array, setArray] = useState<number[]>([0, 1, 0, 3, 12]);
10+
const [speed, setSpeed] = useState<number>(1.0); // 添加速度状态
1011

1112
// 处理数组变化
1213
const handleArrayChange = (newArray: number[]) => {
@@ -15,7 +16,8 @@ const VisualizerPage: React.FC = () => {
1516

1617
// 处理速度变化
1718
const handleSpeedChange = (newSpeed: number) => {
18-
// 暂时不使用速度控制
19+
setSpeed(newSpeed);
20+
console.log(`设置速度: ${newSpeed}x`);
1921
};
2022

2123
// 根据当前语言决定链接地址
@@ -46,6 +48,7 @@ const VisualizerPage: React.FC = () => {
4648

4749
<VisualizationContainer
4850
inputArray={array}
51+
speed={speed}
4952
/>
5053
</div>
5154
</div>

‎src/components/visualization/ArrayVisualizerD3Enhanced.tsx‎

Lines changed: 83 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,48 @@ const ArrayVisualizerD3Enhanced: React.FC<ArrayVisualizerD3EnhancedProps> = ({ s
9393

9494
// 如果是交换阶段，执行交换动画
9595
if (step.phase === 'swap-start') {
96+
// 打印当前状态，辅助调试
97+
console.log("交换动画 - 当前步骤:", {
98+
slow: step.slow,
99+
fast: step.fast,
100+
phase: step.phase,
101+
message: step.message
102+
});
103+
104+
// 检查数据绑定状态 - 确保正确设置了swapping状态
105+
step.elementData.forEach((d, i) => {
106+
if (d.state.swapping) {
107+
console.log(`元素${i}(值=${d.value})标记为swapping=true`);
108+
}
109+
});
110+
111+
// 根据elementData状态选择要交换的元素，而不是根据slow/fast索引
112+
// 这样可以确保我们选择的是正确的数据对象，无论它们在DOM中的物理位置如何
113+
const swappingElements = elements.filter(d => d.state.swapping);
114+
115+
// 获取实际交换的元素
116+
const elementNodesWithSwap = swappingElements.nodes();
117+
if (elementNodesWithSwap.length !== 2) {
118+
console.error(`警告: 标记为交换的元素数量不是2，而是${elementNodesWithSwap.length}`);
119+
}
120+
121+
// 获取两个交换元素的实际位置和DOM索引
122+
const getElementTransform = (el: Element) => {
123+
const transform = d3.select(el).attr('transform');
124+
const match = transform.match(/translate\(([^,]+),([^)]+)\)/);
125+
if (match && match.length >= 3) {
126+
return {x: parseFloat(match[1]), y: parseFloat(match[2])};
127+
}
128+
return null;
129+
};
130+
131+
// 获取所有元素位置信息，用于调试
132+
const allPositions = elements.nodes().map((node, i) => {
133+
const pos = getElementTransform(node);
134+
return {index: i, pos, swapping: step.elementData[i].state.swapping};
135+
});
136+
console.log("所有元素位置信息:", allPositions);
137+
96138
const paths = createSwapPaths(
97139
step.slow * (elementWidth + elementPadding),
98140
step.fast * (elementWidth + elementPadding),
@@ -195,11 +237,50 @@ const ArrayVisualizerD3Enhanced: React.FC<ArrayVisualizerD3EnhancedProps> = ({ s
195237
}
196238
}
197239

198-
// 高亮将要交换的元素
199-
elements.filter((d, i) => i === step.slow || i === step.fast)
240+
// 高亮将要交换的元素 - 使用swapping标记而不是索引
241+
swappingElements
200242
.selectAll('rect')
201243
.style('filter', 'url(#glow)');
202244

245+
// 重要修改：对元素清晰标记并查找正确的交换元素
246+
// 1. 首先清除所有元素的交换标记
247+
elements.attr('data-swapping', null);
248+
249+
// 2. 直接在DOM中标记需要交换的元素
250+
elements.each(function(d, i) {
251+
if (d.state.swapping) {
252+
if (i === step.slow) {
253+
d3.select(this).attr('data-swapping', 'slow');
254+
console.log(`已标记slow元素，索引=${i}, 值=${d.value}`);
255+
} else if (i === step.fast) {
256+
d3.select(this).attr('data-swapping', 'fast');
257+
console.log(`已标记fast元素，索引=${i}, 值=${d.value}`);
258+
}
259+
}
260+
});
261+
262+
// 3. 并为交换组添加自定义属性，使其更容易识别
263+
swappingElements.attr('class', d => {
264+
const baseClass = `array-element ${d.isZero ? 'zero-element' : ''}`;
265+
return baseClass + ' swapping-element';
266+
});
267+
268+
// 确保找到交换元素
269+
const slowEl = arrayGroup.select('g.array-element[data-swapping="slow"]');
270+
const fastEl = arrayGroup.select('g.array-element[data-swapping="fast"]');
271+
272+
if (slowEl.empty() || fastEl.empty()) {
273+
console.error("找不到交换元素，改用索引查找");
274+
275+
// 备用：如果找不到标记的元素，使用索引位置
276+
const slowNode = elements.nodes()[step.slow];
277+
const fastNode = elements.nodes()[step.fast];
278+
279+
if (slowNode) d3.select(slowNode).attr('data-swapping', 'slow');
280+
if (fastNode) d3.select(fastNode).attr('data-swapping', 'fast');
281+
}
282+
283+
// 使用正确的DOM索引传递给交换动画函数
203284
applySwapAnimation(
204285
arrayGroup,
205286
step.slow,

‎src/components/visualization/VisualizationContainer.tsx‎

Lines changed: 76 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect, useState, useCallback } from 'react';
22
import { useCustomTranslation } from '../../i18n';
33
import './VisualizationContainer.css';
44
import ArrayVisualizerD3Enhanced from './ArrayVisualizerD3Enhanced';
@@ -12,9 +12,13 @@ import ProgressStats from './ProgressStats';
1212
*/
1313
interface VisualizationContainerProps {
1414
inputArray: number[];
15+
speed?: number; // 添加速度参数
1516
}
1617

17-
const VisualizationContainer: React.FC<VisualizationContainerProps> = ({ inputArray }) => {
18+
const VisualizationContainer: React.FC<VisualizationContainerProps> = ({
19+
inputArray,
20+
speed = 1.0 // 默认速度为1.0x
21+
}) => {
1822
const { t } = useCustomTranslation();
1923
const [steps, setSteps] = useState<AlgorithmStepD3[]>([]);
2024
const [currentStepIndex, setCurrentStepIndex] = useState(0);
@@ -28,43 +32,102 @@ const VisualizationContainer: React.FC<VisualizationContainerProps> = ({ inputAr
2832
setIsPlaying(false);
2933
}, [inputArray]);
3034

31-
const handlePlay = () => setIsPlaying(true);
32-
const handlePause = () => setIsPlaying(false);
33-
const handleReset = () => {
35+
// 使用useCallback缓存控制函数，避免在每次渲染时重新创建
36+
const handlePlay = useCallback(() => setIsPlaying(true), []);
37+
const handlePause = useCallback(() => setIsPlaying(false), []);
38+
39+
const handleTogglePlay = useCallback(() => {
40+
setIsPlaying(prev => !prev);
41+
}, []);
42+
43+
const handleReset = useCallback(() => {
3444
setCurrentStepIndex(0);
3545
setIsPlaying(false);
36-
};
46+
}, []);
3747

38-
const handleStepForward = () => {
48+
const handleStepForward = useCallback(() => {
3949
if (currentStepIndex < steps.length - 1) {
4050
setCurrentStepIndex(currentStepIndex + 1);
4151
} else {
4252
setIsPlaying(false);
4353
}
44-
};
54+
}, [currentStepIndex, steps.length]);
4555

46-
const handleStepBackward = () => {
56+
const handleStepBackward = useCallback(() => {
4757
if (currentStepIndex > 0) {
4858
setCurrentStepIndex(currentStepIndex - 1);
4959
}
50-
};
60+
}, [currentStepIndex]);
5161

52-
// 自动播放效果
62+
// 键盘快捷键处理函数
63+
const handleKeyDown = useCallback((event: KeyboardEvent) => {
64+
// 如果用户正在文本输入框中输入，则不触发快捷键
65+
if (
66+
document.activeElement &&
67+
(document.activeElement.tagName === 'INPUT' ||
68+
document.activeElement.tagName === 'TEXTAREA')
69+
) {
70+
return;
71+
}
72+
73+
switch (event.key.toLowerCase()) {
74+
case 'r': // 按R键重置
75+
handleReset();
76+
console.log('快捷键: R - 重置');
77+
break;
78+
case ' ': // 空格键切换播放/暂停
79+
event.preventDefault(); // 防止页面滚动
80+
handleTogglePlay();
81+
console.log(`快捷键: 空格 - ${isPlaying ? '暂停' : '播放'}`);
82+
break;
83+
case 'arrowleft': // 左方向键后退一步
84+
event.preventDefault();
85+
handleStepBackward();
86+
console.log('快捷键: ← - 上一步');
87+
break;
88+
case 'arrowright': // 右方向键前进一步
89+
event.preventDefault();
90+
handleStepForward();
91+
console.log('快捷键: → - 下一步');
92+
break;
93+
default:
94+
break;
95+
}
96+
}, [handleReset, handleTogglePlay, isPlaying, handleStepBackward, handleStepForward]);
97+
98+
// 添加键盘事件监听器
99+
useEffect(() => {
100+
// 添加全局键盘事件监听
101+
window.addEventListener('keydown', handleKeyDown);
102+
103+
// 清理函数，组件卸载时移除事件监听
104+
return () => {
105+
window.removeEventListener('keydown', handleKeyDown);
106+
};
107+
}, [handleKeyDown]);
108+
109+
// 自动播放效果 - 考虑速度参数
53110
useEffect(() => {
54111
if (!isPlaying) return;
55112

113+
// 根据速度调整动画间隔
114+
const baseInterval = 500; // 基础间隔时间为500毫秒
115+
const actualInterval = baseInterval / speed; // 速度越大，间隔越短
116+
117+
console.log(`自动播放速度: ${speed}x, 播放间隔: ${actualInterval}ms`);
118+
56119
const interval = setInterval(() => {
57120
if (currentStepIndex < steps.length - 1) {
58121
setCurrentStepIndex(prev => prev + 1);
59122
} else {
60123
setIsPlaying(false);
61124
}
62-
}, 500); // 500 毫秒的间隔
125+
}, actualInterval);
63126

64127
return () => {
65128
clearInterval(interval);
66129
};
67-
}, [isPlaying, currentStepIndex, steps.length]);
130+
}, [isPlaying, currentStepIndex, steps.length, speed]);
68131

69132
const currentStep = steps[currentStepIndex];
70133

‎src/i18n.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,12 @@ const enTranslation = {
7676
"elementMoved": "{0} moved to position {1}",
7777
"movingPointers": "Moving pointers",
7878
"zeroesMoveComplete": "Completed moving zeros"
79+
},
80+
"animation": {
81+
"swapping": "Swapping Elements",
82+
"swapComplete": "Swap Complete",
83+
"swapElements": "Swap {0} ↔ {1}",
84+
"elementsSwapped": "{0} ↔ {1} Swap Complete"
7985
}
8086
};
8187

@@ -152,6 +158,12 @@ const zhTranslation = {
152158
"elementMoved": "{0} 已移动到位置 {1}",
153159
"movingPointers": "移动指针",
154160
"zeroesMoveComplete": "完成移动零元素"
161+
},
162+
"animation": {
163+
"swapping": "交换元素",
164+
"swapComplete": "交换完成",
165+
"swapElements": "交换 {0} ↔ {1}",
166+
"elementsSwapped": "{0} ↔ {1} 交换完成"
155167
}
156168
};
157169

0 commit comments

Comments
 (0)