Loading...
Loading...
Compare original and translation side by side
import { BlueprintManager } from './scripts/blueprint-manager.js';
import { CommandHistory, PlaceCommand, BatchCommand } from './scripts/command-history.js';
import { GhostPreview } from './scripts/ghost-preview.js';
import { SelectionManager } from './scripts/selection-manager.js';
// Initialize systems
const blueprints = new BlueprintManager();
const history = new CommandHistory({ maxSize: 50 });
const ghost = new GhostPreview(scene);
const selection = new SelectionManager({ maxSelection: 100 });
// Save selected pieces as blueprint
const { blueprint } = blueprints.save(selection.getSelection(), 'My Base');
// Load blueprint at new position
const { pieces } = blueprints.load(blueprint.id, newPosition, rotation);
// Place with undo support
history.execute(new PlaceCommand(pieceData, position, rotation, buildingSystem));
history.undo(); // Removes piece
history.redo(); // Restores piece
// Ghost preview with validity feedback
ghost.show('wall', cursorPosition, rotation);
ghost.setValid(canPlace); // Green/red color
ghost.updatePosition(newCursorPosition);
// Multi-select with box selection
selection.boxSelect(startNDC, endNDC, camera, allPieces);
selection.selectConnected(startPiece, getNeighbors); // Flood fill
// Batch operations
history.beginGroup('Delete selection');
for (const piece of selection.getSelection()) {
history.execute(new RemoveCommand(piece, buildingSystem));
}
history.endGroup();import { BlueprintManager } from './scripts/blueprint-manager.js';
import { CommandHistory, PlaceCommand, BatchCommand } from './scripts/command-history.js';
import { GhostPreview } from './scripts/ghost-preview.js';
import { SelectionManager } from './scripts/selection-manager.js';
// Initialize systems
const blueprints = new BlueprintManager();
const history = new CommandHistory({ maxSize: 50 });
const ghost = new GhostPreview(scene);
const selection = new SelectionManager({ maxSelection: 100 });
// Save selected pieces as blueprint
const { blueprint } = blueprints.save(selection.getSelection(), 'My Base');
// Load blueprint at new position
const { pieces } = blueprints.load(blueprint.id, newPosition, rotation);
// Place with undo support
history.execute(new PlaceCommand(pieceData, position, rotation, buildingSystem));
history.undo(); // Removes piece
history.redo(); // Restores piece
// Ghost preview with validity feedback
ghost.show('wall', cursorPosition, rotation);
ghost.setValid(canPlace); // Green/red color
ghost.updatePosition(newCursorPosition);
// Multi-select with box selection
selection.boxSelect(startNDC, endNDC, camera, allPieces);
selection.selectConnected(startPiece, getNeighbors); // Flood fill
// Batch operations
history.beginGroup('Delete selection');
for (const piece of selection.getSelection()) {
history.execute(new RemoveCommand(piece, buildingSystem));
}
history.endGroup();references/builder-ux-advanced.mdreferences/builder-ux-advanced.md| File | Lines | Purpose |
|---|---|---|
| ~450 | Save, load, export/import building designs |
| ~400 | Undo/redo stack with command pattern |
| ~380 | Transparent placement preview with snapping |
| ~420 | Multi-select, box select, group operations |
| 文件 | 行数 | 用途 |
|---|---|---|
| ~450 | 保存、加载、导出/导入建筑设计 |
| ~400 | 基于命令模式的撤销/重做栈 |
| ~380 | 带吸附功能的半透明放置预览 |
| ~420 | 多选、框选、组操作管理 |
execute()undo()execute()undo()// Full integration example
function setupBuildingUX(scene, buildingSystem) {
const history = new CommandHistory({
maxSize: 100,
onChange: (status) => updateUndoRedoButtons(status)
});
const ghost = new GhostPreview(scene, {
validColor: 0x00ff00,
invalidColor: 0xff0000,
snapGrid: 2,
snapRotation: Math.PI / 4
});
const selection = new SelectionManager({
maxSelection: 200,
onSelectionChanged: (pieces) => updateSelectionUI(pieces)
});
const blueprints = new BlueprintManager({
storage: localStorage,
maxBlueprints: 50
});
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'z') history.undo();
if (e.ctrlKey && e.key === 'y') history.redo();
if (e.ctrlKey && e.key === 'c') copySelection();
if (e.ctrlKey && e.key === 'v') pasteBlueprint();
if (e.key === 'r') ghost.rotate(Math.PI / 4);
});
return { history, ghost, selection, blueprints };
}// Full integration example
function setupBuildingUX(scene, buildingSystem) {
const history = new CommandHistory({
maxSize: 100,
onChange: (status) => updateUndoRedoButtons(status)
});
const ghost = new GhostPreview(scene, {
validColor: 0x00ff00,
invalidColor: 0xff0000,
snapGrid: 2,
snapRotation: Math.PI / 4
});
const selection = new SelectionManager({
maxSelection: 200,
onSelectionChanged: (pieces) => updateSelectionUI(pieces)
});
const blueprints = new BlueprintManager({
storage: localStorage,
maxBlueprints: 50
});
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'z') history.undo();
if (e.ctrlKey && e.key === 'y') history.redo();
if (e.ctrlKey && e.key === 'c') copySelection();
if (e.ctrlKey && e.key === 'v') pasteBlueprint();
if (e.key === 'r') ghost.rotate(Math.PI / 4);
});
return { history, ghost, selection, blueprints };
}