311 lines
9.2 KiB
JavaScript
311 lines
9.2 KiB
JavaScript
import { ButtonEffect } from '../effect-base.js';
|
|
|
|
/**
|
|
* External Image Background Effect
|
|
* Loads an external image from a URL and displays it as the background
|
|
*/
|
|
export class ExternalImageBackgroundEffect extends ButtonEffect {
|
|
constructor() {
|
|
super({
|
|
id: 'bg-external-image',
|
|
name: 'External Image Background',
|
|
type: 'background',
|
|
category: 'Background',
|
|
renderOrder: 1
|
|
});
|
|
|
|
// Cache for loaded images
|
|
this.imageCache = new Map();
|
|
this.loadingImages = new Map();
|
|
this.generator = null;
|
|
|
|
// Set up event listener for image loads
|
|
this.boundImageLoadHandler = this.handleImageLoad.bind(this);
|
|
window.addEventListener('imageLoaded', this.boundImageLoadHandler);
|
|
}
|
|
|
|
/**
|
|
* Handle image load event
|
|
*/
|
|
handleImageLoad() {
|
|
// Trigger a redraw if we have a generator reference
|
|
if (this.generator) {
|
|
this.generator.updatePreview();
|
|
}
|
|
}
|
|
|
|
defineControls() {
|
|
return [
|
|
{
|
|
id: 'bg-image-file',
|
|
type: 'file',
|
|
label: 'Image File',
|
|
defaultValue: '',
|
|
accept: 'image/*',
|
|
showWhen: 'bg-type',
|
|
description: 'Select an image file from your computer'
|
|
},
|
|
{
|
|
id: 'bg-image-fit',
|
|
type: 'select',
|
|
label: 'Image Fit',
|
|
defaultValue: 'cover',
|
|
options: [
|
|
{ value: 'cover', label: 'Cover (fill, crop if needed)' },
|
|
{ value: 'contain', label: 'Contain (fit inside)' },
|
|
{ value: 'stretch', label: 'Stretch (may distort)' },
|
|
{ value: 'center', label: 'Center (actual size)' },
|
|
{ value: 'manual', label: 'Manual (custom zoom & position)' }
|
|
],
|
|
showWhen: 'bg-type',
|
|
description: 'How the image should fit in the canvas'
|
|
},
|
|
{
|
|
id: 'bg-image-zoom',
|
|
type: 'range',
|
|
label: 'Image Zoom',
|
|
defaultValue: 100,
|
|
min: 10,
|
|
max: 500,
|
|
step: 5,
|
|
showWhen: 'bg-image-fit',
|
|
description: 'Zoom level for manual positioning (percentage)'
|
|
},
|
|
{
|
|
id: 'bg-image-offset-x',
|
|
type: 'range',
|
|
label: 'Horizontal Position',
|
|
defaultValue: 50,
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
showWhen: 'bg-image-fit',
|
|
description: 'Horizontal position of the image (percentage)'
|
|
},
|
|
{
|
|
id: 'bg-image-offset-y',
|
|
type: 'range',
|
|
label: 'Vertical Position',
|
|
defaultValue: 50,
|
|
min: 0,
|
|
max: 100,
|
|
step: 1,
|
|
showWhen: 'bg-image-fit',
|
|
description: 'Vertical position of the image (percentage)'
|
|
},
|
|
{
|
|
id: 'bg-image-opacity',
|
|
type: 'range',
|
|
label: 'Image Opacity',
|
|
defaultValue: 1,
|
|
min: 0,
|
|
max: 1,
|
|
step: 0.05,
|
|
showWhen: 'bg-type',
|
|
description: 'Transparency of the background image'
|
|
}
|
|
];
|
|
}
|
|
|
|
isEnabled(controlValues) {
|
|
return controlValues['bg-type'] === 'external-image';
|
|
}
|
|
|
|
/**
|
|
* Start loading an image from a blob URL with caching
|
|
* Triggers async loading but returns immediately
|
|
* @param {string} blobUrl - Blob URL created from uploaded file
|
|
*/
|
|
startLoadingImage(blobUrl) {
|
|
// Skip if already cached or loading
|
|
if (this.imageCache.has(blobUrl) || this.loadingImages.has(blobUrl)) {
|
|
return;
|
|
}
|
|
|
|
// Mark as loading to prevent duplicate requests
|
|
this.loadingImages.set(blobUrl, true);
|
|
|
|
const img = new Image();
|
|
|
|
img.onload = () => {
|
|
this.imageCache.set(blobUrl, img);
|
|
this.loadingImages.delete(blobUrl);
|
|
// Trigger a redraw when image loads
|
|
const event = new CustomEvent('imageLoaded');
|
|
window.dispatchEvent(event);
|
|
};
|
|
|
|
img.onerror = () => {
|
|
// Cache the error state to prevent retry spam
|
|
this.imageCache.set(blobUrl, 'ERROR');
|
|
this.loadingImages.delete(blobUrl);
|
|
// Trigger a redraw to show error state
|
|
const event = new CustomEvent('imageLoaded');
|
|
window.dispatchEvent(event);
|
|
};
|
|
|
|
img.src = blobUrl;
|
|
}
|
|
|
|
/**
|
|
* Get cached image if available
|
|
* @param {string} blobUrl - Blob URL
|
|
* @returns {HTMLImageElement|string|null} Image element, 'ERROR', or null
|
|
*/
|
|
getCachedImage(blobUrl) {
|
|
return this.imageCache.get(blobUrl) || null;
|
|
}
|
|
|
|
/**
|
|
* Draw image with the specified fit mode
|
|
*/
|
|
drawImage(context, img, fitMode, opacity, width, height, zoom, offsetX, offsetY) {
|
|
context.globalAlpha = opacity;
|
|
|
|
const imgRatio = img.width / img.height;
|
|
const canvasRatio = width / height;
|
|
|
|
let drawX = 0;
|
|
let drawY = 0;
|
|
let drawWidth = width;
|
|
let drawHeight = height;
|
|
|
|
switch (fitMode) {
|
|
case 'cover':
|
|
// Fill the canvas, cropping if necessary
|
|
if (imgRatio > canvasRatio) {
|
|
// Image is wider, fit height
|
|
drawHeight = height;
|
|
drawWidth = height * imgRatio;
|
|
drawX = (width - drawWidth) / 2;
|
|
} else {
|
|
// Image is taller, fit width
|
|
drawWidth = width;
|
|
drawHeight = width / imgRatio;
|
|
drawY = (height - drawHeight) / 2;
|
|
}
|
|
break;
|
|
|
|
case 'contain':
|
|
// Fit inside the canvas, showing all of the image
|
|
if (imgRatio > canvasRatio) {
|
|
// Image is wider, fit width
|
|
drawWidth = width;
|
|
drawHeight = width / imgRatio;
|
|
drawY = (height - drawHeight) / 2;
|
|
} else {
|
|
// Image is taller, fit height
|
|
drawHeight = height;
|
|
drawWidth = height * imgRatio;
|
|
drawX = (width - drawWidth) / 2;
|
|
}
|
|
break;
|
|
|
|
case 'center':
|
|
// Center the image at actual size
|
|
drawWidth = img.width;
|
|
drawHeight = img.height;
|
|
drawX = (width - drawWidth) / 2;
|
|
drawY = (height - drawHeight) / 2;
|
|
break;
|
|
|
|
case 'manual':
|
|
// Manual positioning with zoom and offset controls
|
|
const zoomFactor = zoom / 100;
|
|
|
|
// Start with the larger dimension to ensure coverage
|
|
if (imgRatio > canvasRatio) {
|
|
// Image is wider relative to canvas
|
|
drawHeight = height * zoomFactor;
|
|
drawWidth = drawHeight * imgRatio;
|
|
} else {
|
|
// Image is taller relative to canvas
|
|
drawWidth = width * zoomFactor;
|
|
drawHeight = drawWidth / imgRatio;
|
|
}
|
|
|
|
// Calculate the range of movement (how far can we move the image)
|
|
const maxOffsetX = drawWidth - width;
|
|
const maxOffsetY = drawHeight - height;
|
|
|
|
// Convert percentage (0-100) to actual position
|
|
// 0% = image fully left/top, 100% = image fully right/bottom
|
|
drawX = -(maxOffsetX * offsetX / 100);
|
|
drawY = -(maxOffsetY * offsetY / 100);
|
|
break;
|
|
|
|
case 'stretch':
|
|
// Stretch to fill (default values already set)
|
|
break;
|
|
}
|
|
|
|
context.drawImage(img, drawX, drawY, drawWidth, drawHeight);
|
|
context.globalAlpha = 1; // Reset alpha
|
|
}
|
|
|
|
apply(context, controlValues, animState, renderData) {
|
|
const file = controlValues['bg-image-file'];
|
|
const fitMode = controlValues['bg-image-fit'] || 'cover';
|
|
const opacity = controlValues['bg-image-opacity'] ?? 1;
|
|
const zoom = controlValues['bg-image-zoom'] ?? 100;
|
|
const offsetX = controlValues['bg-image-offset-x'] ?? 50;
|
|
const offsetY = controlValues['bg-image-offset-y'] ?? 50;
|
|
|
|
// If no file selected, fill with a placeholder color
|
|
if (!file || !file.blobUrl) {
|
|
context.fillStyle = '#cccccc';
|
|
context.fillRect(0, 0, renderData.width, renderData.height);
|
|
|
|
// Draw placeholder text
|
|
context.fillStyle = '#666666';
|
|
context.font = '8px Arial';
|
|
context.textAlign = 'center';
|
|
context.textBaseline = 'middle';
|
|
context.fillText('Select an image', renderData.centerX, renderData.centerY);
|
|
return;
|
|
}
|
|
|
|
// Start loading if not already cached or loading
|
|
const cachedImage = this.getCachedImage(file.blobUrl);
|
|
|
|
if (!cachedImage) {
|
|
// Not cached yet - start loading
|
|
this.startLoadingImage(file.blobUrl);
|
|
|
|
// Draw loading state
|
|
context.fillStyle = '#3498db';
|
|
context.fillRect(0, 0, renderData.width, renderData.height);
|
|
|
|
context.fillStyle = '#ffffff';
|
|
context.font = '6px Arial';
|
|
context.textAlign = 'center';
|
|
context.textBaseline = 'middle';
|
|
context.fillText('Loading...', renderData.centerX, renderData.centerY);
|
|
return;
|
|
}
|
|
|
|
if (cachedImage === 'ERROR') {
|
|
// Failed to load
|
|
context.fillStyle = '#ff6b6b';
|
|
context.fillRect(0, 0, renderData.width, renderData.height);
|
|
|
|
context.fillStyle = '#ffffff';
|
|
context.font = '6px Arial';
|
|
context.textAlign = 'center';
|
|
context.textBaseline = 'middle';
|
|
context.fillText('Failed to load', renderData.centerX, renderData.centerY - 4);
|
|
context.fillText('image', renderData.centerX, renderData.centerY + 4);
|
|
return;
|
|
}
|
|
|
|
// Image is loaded - draw it
|
|
this.drawImage(context, cachedImage, fitMode, opacity, renderData.width, renderData.height, zoom, offsetX, offsetY);
|
|
}
|
|
}
|
|
|
|
// Auto-register effect
|
|
export function register(generator) {
|
|
const effect = new ExternalImageBackgroundEffect();
|
|
effect.generator = generator; // Store reference for redraws
|
|
generator.registerEffect(effect);
|
|
}
|