fix onion skinning & layer opacity

foobar404 · Mar 1, 2024 · 208c3c0 · 208c3c0
1 parent 2d2a0c4
commit 208c3c0
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 43 deletions.
diff --git a/roadmap.md b/roadmap.md
@@ -4,22 +4,15 @@
 
 # Bugs 
 - issues with resizing the canvas (active layer)
-- onion skinning doesint work
-- layer opacity doesint work
 - local saves arnt showing up
 
-# MVP
+# Pre-Launch
 - box selection tools
 
 - laso selection
 
 - undo / redo 
 
-- previous 2 color switch
-    - just as a quick reference, does no effect the pallete
- - colors used in pallette  
-        - when changing color in pallete, update all instances of that color in all layers 
-
 - import/export 
     - Asprites export settings
     - import png/jpg as a layer 
@@ -34,17 +27,22 @@
     - delete local saved projects  
     - paste reference image url 
 
+- previous 2 color switch
+    - just as a quick reference, does no effect the pallete
+ - colors used in pallette  
+        - when changing color in pallete, update all instances of that color in all layers 
+
 - light/dark theme
 
 - minimize UI
 
-# After Launch
-- user accounts
 - site domain 
+
+# Launch
+- user accounts
 - login page
 - payment page
-- effects
-
+
 # Stretch 
 - themes, grid colors
     - you can theme it

diff --git a/src/pages/Home/Canvas.tsx b/src/pages/Home/Canvas.tsx
@@ -790,6 +790,8 @@ function useCanvas() {
     }
 
     function paint() {
+        canvas1.getCtx().globalAlpha = 1;
+        canvas2.getCtx().globalAlpha = 1;
         canvas1.clear();
         canvas2.clear();
         mainCanvas.clear();
@@ -872,40 +874,30 @@ function useCanvas() {
         }
 
         // render previous frame
-        // if (stateCache.current.onionSkin != 0) {
-        //     // find activeframe and get the previous one
-        //     const activeFrame = stateCache.current.activeFrame;
-        //     const previousFrame = stateCache.current.frames.find(frame => frame.symbol === activeFrame.symbol);
-
-        //     let reversedLayers = stateCache.current.activeFrame.layers.slice().reverse();
-        //     reversedLayers.forEach((layer) => {
-        //         // apply layer opacity
-        //         let imageData = layer.image;
-        //         for (let i = 3; i < imageData.data.length; i += 4) {
-        //             imageData.data[i] *= stateCache.current.onionSkin / 255;
-        //         }
-
-        //         canvas1.putImageData(imageData, 0, 0);
-        //         mainCanvas.drawImage(canvas1.getElement(), 0, 0);
-
-        //         // Paint new pixels if the layer matches the active layer
-        //         if (layer.symbol === stateCache.current.activeLayer.symbol) {
-        //             canvas1.putImageData(canvas1Img, 0, 0); // Overwrite the off-screen canvas with new pixels
-        //             mainCanvas.drawImage(canvas1.getElement(), 0, 0); // Copy the new pixels to the main canvas
-        //         }
-        //     });
-        // }
+        if (stateCache.current.onionSkin != 0) {
+            // find activeframe and get the previous one
+            const frameIndex = stateCache.current.frames.findIndex(frame => frame.symbol === stateCache.current.activeFrame.symbol);
+            const previousFrame = stateCache.current.frames[frameIndex - 1];
+
+            if (previousFrame) {
+                let reversedLayers = previousFrame.layers.slice().reverse();
+                canvas1.getCtx().globalAlpha = stateCache.current.onionSkin / 255;
+
+                reversedLayers.forEach((layer) => {
+                    canvas2.putImageData(layer.image);
+                    canvas1.drawImage(canvas2.getElement());
+                    mainCanvas.drawImage(canvas1.getElement());
+                });
+            }
+        }
 
         // render active frame
         let reversedLayers = stateCache.current.activeFrame.layers.slice().reverse();
         reversedLayers.forEach((layer) => {
-            // apply layer opacity
-            let imageData = layer.image;
-            for (let i = 3; i < imageData.data.length; i += 4) {
-                imageData.data[i] *= layer.opacity / 255;
-            }
+            canvas2.putImageData(layer.image);
+            canvas1.getCtx().globalAlpha = layer.opacity / 255;
+            canvas1.drawImage(canvas2.getElement());
 
-            canvas1.putImageData(imageData, 0, 0);
             mainCanvas.drawImage(canvas1.getElement(), 0, 0);
 
             // Paint new pixels if the layer matches the active layer

diff --git a/src/pages/Home/Frames.tsx b/src/pages/Home/Frames.tsx
@@ -67,7 +67,7 @@ export function Frames() {
                         data-for="tooltip"
                         className="c-button --xs --fourth mr-2"
                         onClick={() => data.setOnionSkin(data.onionSkin == 255 ? 0 : 255)}>
-                        {data.onionSkin ? <MdLayersClear /> : <MdLayers />}
+                        {data.onionSkin ? <MdLayers /> : <MdLayersClear />}
                     </button>
                     <label data-tip="onion skin opacity" data-for="tooltip">
                         <p hidden>onion skin slider</p>

diff --git a/src/pages/Home/Layers.tsx b/src/pages/Home/Layers.tsx
@@ -2,7 +2,7 @@ import { ILayer } from "../../types";
 import { MdDelete } from "react-icons/md";
 import { RiGitMergeFill } from "react-icons/ri";
 import { IoEye, IoCopy } from "react-icons/io5";
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useCanvas, useGlobalStore } from "../../utils";
 import { HiEyeOff, HiDocumentAdd } from "react-icons/hi";
 import { BsFillCaretDownFill, BsFillCaretUpFill } from "react-icons/bs";
@@ -111,6 +111,7 @@ function useLayers() {
     const canvas2 = useCanvas();
     const layersAreVisible = layerOpacity === 255;
     const { setFrames, frames, activeFrame, setActiveFrame, activeLayer, setActiveLayer, canvasSize } = useGlobalStore();
+    const previousActiveLayer = useRef<Symbol>(activeLayer.symbol);
 
     useEffect(() => {
         let map: any = {};
@@ -125,6 +126,13 @@ function useLayers() {
         onionSkinHandler(layerOpacity);
     }, [layerOpacity]);
 
+    useEffect(() => {
+        if (previousActiveLayer.current !== activeLayer.symbol) {
+            previousActiveLayer.current = activeLayer.symbol;
+            onionSkinHandler(layerOpacity);
+        }
+    }, [activeLayer]);
+
     // resize layers when canvas is resized
     useEffect(() => {
         const centerImageData = (oldImageData, newWidth, newHeight) => {