feat: add background fill functionality for layers

- Implemented FillLayerBackgroundCommand to fill the background of layers with a specified color.
- Introduced BackgroundFillManager to manage background fill operations.
- Updated LayerManager to include fillLayerBackground method.
- Enhanced LayersPanel with a color picker for filling layer backgrounds.
- Modified RasterizeLayerCommand to reflect changes in terminology and functionality.
- Adjusted LayerSort to ensure filled layers are rendered at the correct z-index.
- Updated relevant utility functions and components to support new fill feature.
This commit is contained in:
bighuixiang
2025-07-14 23:42:28 +08:00
parent 24e9ba8ae5
commit fc9a3eddc2
12 changed files with 524 additions and 57 deletions

View File

@@ -0,0 +1,30 @@
import { FillLayerBackgroundCommand } from "../commands/FillLayerBackgroundCommand";
export class BackgroundFillManager {
constructor({ canvas, layers, commandManager, canvasManager }) {
this.canvas = canvas;
this.layers = layers;
this.commandManager = commandManager;
this.canvasManager = canvasManager;
}
/**
* 填充指定图层背景
* @param {string} layerId 图层ID
* @param {string} fillColor 填充颜色
*/
async fillLayerBackground(layerId, fillColor) {
const command = new FillLayerBackgroundCommand({
canvas: this.canvas,
layers: this.layers,
layerId,
fillColor,
canvasManager: this.canvasManager,
});
if (this.commandManager) {
await this.commandManager.execute(command);
} else {
await command.execute();
}
}
}