individual eye flares, scaling, other stuff

src/components/EffectsSidebar.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { FabricImage } from 'fabric';
+import get_overlay_padding from '../overlay_image_control_sizes';
 
 interface EffectsSidebarProps {
     overlayImages: FabricImage[];
@@ -10,23 +11,25 @@ function EffectsSidebar({ overlayImages, setOverlayImages }: EffectsSidebarProps
     const [isLoading, setIsLoading] = useState<{ [key: string]: boolean }>({});
 
     const overlayImageUrls = [
-        'images/laser_eyes_1.png',
-        'images/laser_eyes_2.png',
-        'images/laser_eyes_3.png',
-        'images/laser_eyes_4.png'
+        'blue-flare.png',
+        'white-flare.png',
     ];
 
     const handleAddOverlay = (imageUrl: string) => {
         setIsLoading((prev) => ({ ...prev, [imageUrl]: true }));
-        FabricImage.fromURL(imageUrl).then((img) => {
-            img.scale(0.05);
+        FabricImage.fromURL('images/' + imageUrl).then((img) => {
+            img.scale(0.5);
+            img.set({
+                padding: get_overlay_padding(imageUrl),
+            });
             if (img) {
                 setOverlayImages([...overlayImages, img]);
             }
             setIsLoading((prev) => ({ ...prev, [imageUrl]: false }));
         });
     };
 
+    // TODO Buttons should display a small preview image instead of text
     return (
         <div className="effects-sidebar">
             <h3>Add overlay images</h3>

src/components/ImageCanvas.tsx

@@ -54,6 +54,7 @@ function ImageCanvas({ image, overlayImages, fileName }: ImageCanvasProps) {
                         if (!fabricCanvasRef.current) throw new Error('Canvas not found');
                         const canvas = fabricCanvasRef.current;
                         canvas.clear();
+                        img.selectable = false;
                         img.scaleToWidth(canvas.getWidth());
                         img.scaleToHeight(canvas.getHeight());
                         canvas.add(img);

src/overlay_image_control_sizes.tsx

@@ -0,0 +1,16 @@
+// Our overlay images (laser eye effects, emojis, etc) are all pngs with transparent
+// backgrounds. For the laser eye effects, we want the image controls (the box
+// that lets you resize and rotate the image) to be smaller than the images themselves,
+// since the images often contain small lens flare effects which go hella wide.
+// This function gives the padding values to use for the FabricJS image controls.
+// They are selected entirely on vibes.
+export default function get_overlay_padding(image_name: string): number {
+    switch (image_name) {
+        case 'blue-flare.png':
+            return -130;
+        case 'white-flare.png':
+            return -70;
+        default:
+            return 0;
+    }
+}