[FEAT] Bug fix
This commit is contained in:
@@ -137,37 +137,53 @@ export const useLayers = () => {
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
l.sprites[i] = { id: old.id, file, img, url, width: img.width, height: img.height, x: old.x, y: old.y };
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const url = e.target?.result as string;
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
l.sprites[i] = { id: old.id, file, img, url, width: img.width, height: img.height, x: old.x, y: old.y };
|
||||
};
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load replacement image:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
};
|
||||
img.onerror = () => {
|
||||
URL.revokeObjectURL(url);
|
||||
reader.onerror = () => {
|
||||
console.error('Failed to read replacement image file:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const addSprite = (file: File) => {
|
||||
const l = activeLayer.value;
|
||||
if (!l) return;
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const next: Sprite = {
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const url = e.target?.result as string;
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const next: Sprite = {
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
l.sprites = [...l.sprites, next];
|
||||
};
|
||||
l.sprites = [...l.sprites, next];
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load sprite image:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
};
|
||||
img.onerror = () => URL.revokeObjectURL(url);
|
||||
img.src = url;
|
||||
reader.onerror = () => {
|
||||
console.error('Failed to read sprite image file:', file.name);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const processImageFiles = async (files: File[]) => {
|
||||
|
||||
@@ -87,129 +87,157 @@ export const useSprites = () => {
|
||||
const old = sprites.value[i];
|
||||
revokeIfBlob(old.url);
|
||||
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const next: Sprite = {
|
||||
id: old.id,
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: old.x,
|
||||
y: old.y,
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const url = e.target?.result as string;
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const next: Sprite = {
|
||||
id: old.id,
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: old.x,
|
||||
y: old.y,
|
||||
};
|
||||
const arr = [...sprites.value];
|
||||
arr[i] = next;
|
||||
sprites.value = arr;
|
||||
};
|
||||
const arr = [...sprites.value];
|
||||
arr[i] = next;
|
||||
sprites.value = arr;
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load replacement image:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
};
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load replacement image:', file.name);
|
||||
URL.revokeObjectURL(url);
|
||||
reader.onerror = () => {
|
||||
console.error('Failed to read replacement image file:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const addSprite = (file: File) => {
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const s: Sprite = {
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const url = e.target?.result as string;
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const s: Sprite = {
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
sprites.value = [...sprites.value, s];
|
||||
};
|
||||
sprites.value = [...sprites.value, s];
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load new sprite image:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
};
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load new sprite image:', file.name);
|
||||
URL.revokeObjectURL(url);
|
||||
reader.onerror = () => {
|
||||
console.error('Failed to read sprite image file:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const addSpriteWithResize = (file: File) => {
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const { maxWidth, maxHeight } = getMaxDimensions(sprites.value);
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const url = e.target?.result as string;
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const { maxWidth, maxHeight } = getMaxDimensions(sprites.value);
|
||||
|
||||
const newSprite: Sprite = {
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
const newSprite: Sprite = {
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
|
||||
const newMaxWidth = Math.max(maxWidth, img.width);
|
||||
const newMaxHeight = Math.max(maxHeight, img.height);
|
||||
|
||||
if (img.width > maxWidth || img.height > maxHeight) {
|
||||
sprites.value = sprites.value.map(sprite => {
|
||||
let newX = sprite.x;
|
||||
let newY = sprite.y;
|
||||
|
||||
if (img.width > maxWidth) {
|
||||
const relativeX = maxWidth > 0 ? sprite.x / maxWidth : 0;
|
||||
newX = Math.floor(relativeX * newMaxWidth);
|
||||
newX = Math.max(0, Math.min(newX, newMaxWidth - sprite.width));
|
||||
}
|
||||
|
||||
if (img.height > maxHeight) {
|
||||
const relativeY = maxHeight > 0 ? sprite.y / maxHeight : 0;
|
||||
newY = Math.floor(relativeY * newMaxHeight);
|
||||
newY = Math.max(0, Math.min(newY, newMaxHeight - sprite.height));
|
||||
}
|
||||
|
||||
return { ...sprite, x: newX, y: newY };
|
||||
});
|
||||
}
|
||||
|
||||
sprites.value = [...sprites.value, newSprite];
|
||||
triggerForceRedraw();
|
||||
};
|
||||
|
||||
const newMaxWidth = Math.max(maxWidth, img.width);
|
||||
const newMaxHeight = Math.max(maxHeight, img.height);
|
||||
|
||||
if (img.width > maxWidth || img.height > maxHeight) {
|
||||
sprites.value = sprites.value.map(sprite => {
|
||||
let newX = sprite.x;
|
||||
let newY = sprite.y;
|
||||
|
||||
if (img.width > maxWidth) {
|
||||
const relativeX = maxWidth > 0 ? sprite.x / maxWidth : 0;
|
||||
newX = Math.floor(relativeX * newMaxWidth);
|
||||
newX = Math.max(0, Math.min(newX, newMaxWidth - sprite.width));
|
||||
}
|
||||
|
||||
if (img.height > maxHeight) {
|
||||
const relativeY = maxHeight > 0 ? sprite.y / maxHeight : 0;
|
||||
newY = Math.floor(relativeY * newMaxHeight);
|
||||
newY = Math.max(0, Math.min(newY, newMaxHeight - sprite.height));
|
||||
}
|
||||
|
||||
return { ...sprite, x: newX, y: newY };
|
||||
});
|
||||
}
|
||||
|
||||
sprites.value = [...sprites.value, newSprite];
|
||||
triggerForceRedraw();
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load new sprite image:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
};
|
||||
img.onerror = () => {
|
||||
console.error('Failed to load new sprite image:', file.name);
|
||||
URL.revokeObjectURL(url);
|
||||
reader.onerror = () => {
|
||||
console.error('Failed to read sprite image file:', file.name);
|
||||
};
|
||||
img.src = url;
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const processImageFiles = (files: File[]) => {
|
||||
Promise.all(
|
||||
files.map(
|
||||
file =>
|
||||
new Promise<Sprite>(resolve => {
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
resolve({
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
new Promise<Sprite>((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const url = e.target?.result as string;
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
resolve({
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
};
|
||||
img.onerror = () => reject(new Error(`Failed to load image: ${file.name}`));
|
||||
img.src = url;
|
||||
};
|
||||
img.src = url;
|
||||
reader.onerror = () => reject(new Error(`Failed to read file: ${file.name}`));
|
||||
reader.readAsDataURL(file);
|
||||
})
|
||||
)
|
||||
).then(newSprites => {
|
||||
sprites.value = [...sprites.value, ...newSprites];
|
||||
});
|
||||
)
|
||||
.then(newSprites => {
|
||||
sprites.value = [...sprites.value, ...newSprites];
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error processing image files:', err);
|
||||
});
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
|
||||
Reference in New Issue
Block a user