71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
/**
|
|
* Image greyscale filter transformation
|
|
* Non-destructive greyscale conversion
|
|
*/
|
|
|
|
import Konva from 'konva';
|
|
|
|
/**
|
|
* Apply greyscale filter to image
|
|
*/
|
|
export function applyGreyscale(image: Konva.Image | Konva.Group): void {
|
|
// Find the actual image node
|
|
const imageNode = image instanceof Konva.Image ? image : image.findOne('Image');
|
|
if (!imageNode) return;
|
|
|
|
// Apply greyscale filter using Konva.Filters
|
|
(imageNode as Konva.Image).filters([Konva.Filters.Grayscale]);
|
|
(imageNode as Konva.Image).cache();
|
|
}
|
|
|
|
/**
|
|
* Remove greyscale filter from image
|
|
*/
|
|
export function removeGreyscale(image: Konva.Image | Konva.Group): void {
|
|
const imageNode = image instanceof Konva.Image ? image : image.findOne('Image');
|
|
if (!imageNode) return;
|
|
|
|
(imageNode as Konva.Image).filters([]);
|
|
(imageNode as Konva.Image).clearCache();
|
|
}
|
|
|
|
/**
|
|
* Toggle greyscale filter
|
|
*/
|
|
export function toggleGreyscale(image: Konva.Image | Konva.Group): void {
|
|
const imageNode = image instanceof Konva.Image ? image : image.findOne('Image');
|
|
if (!imageNode) return;
|
|
|
|
const filters = (imageNode as Konva.Image).filters() || [];
|
|
|
|
if (filters.length > 0 && filters.some((f) => f.name === 'Grayscale')) {
|
|
removeGreyscale(image);
|
|
} else {
|
|
applyGreyscale(image);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check if greyscale is applied
|
|
*/
|
|
export function isGreyscaleApplied(image: Konva.Image | Konva.Group): boolean {
|
|
const imageNode = image instanceof Konva.Image ? image : image.findOne('Image');
|
|
if (!imageNode) return false;
|
|
|
|
const filters = (imageNode as Konva.Image).filters() || [];
|
|
return filters.some((f) => f.name === 'Grayscale');
|
|
}
|
|
|
|
/**
|
|
* Set greyscale state explicitly
|
|
*/
|
|
export function setGreyscale(image: Konva.Image | Konva.Group, enabled: boolean): void {
|
|
const isCurrentlyGreyscale = isGreyscaleApplied(image);
|
|
|
|
if (enabled && !isCurrentlyGreyscale) {
|
|
applyGreyscale(image);
|
|
} else if (!enabled && isCurrentlyGreyscale) {
|
|
removeGreyscale(image);
|
|
}
|
|
}
|