V0.2.1

package.json

@@ -16,7 +16,19 @@
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-scripts": "5.0.1",
-    "typescript": "^4.8.4"
+    "typescript": "^4.8.4",
+    "workbox-background-sync": "^6.6.0",
+    "workbox-broadcast-update": "^6.6.0",
+    "workbox-cacheable-response": "^6.6.0",
+    "workbox-core": "^6.6.0",
+    "workbox-expiration": "^6.6.0",
+    "workbox-google-analytics": "^6.6.0",
+    "workbox-navigation-preload": "^6.6.0",
+    "workbox-precaching": "^6.6.0",
+    "workbox-range-requests": "^6.6.0",
+    "workbox-routing": "^6.6.0",
+    "workbox-strategies": "^6.6.0",
+    "workbox-streams": "^6.6.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/Layer.tsx

@@ -5,11 +5,16 @@ import { createDrawable } from '../generators/createDrawable';
 
 const Layer = ({ values }:{values:LayerState}) => {
     const { rect, canvas, buffer, thumbnail, visible, opacity, mixBlendMode } = values;
+    const { imageData } = values;
     const {
         position: [x, y],
         size: [width, height]
     } = rect;
 
+    //update state of layer
+    useEffect(()=>{
+        canvas.ctx?.putImageData(imageData, 0, 0);
+    }, [canvas, imageData]);
     // resizeCanvas
     useEffect(()=>{
         if(buffer&&canvas){

src/components/menu/NewFile.tsx

@@ -74,7 +74,7 @@ export const NewFile = () => {
                 </div>
                 <label>
                     Name
-                    <input type="text" name='name' value={name} onChange={update} />
+                    <input type="text" name='name' autoComplete="off" value={name} onChange={update} />
                 </label>
                 <label>
                     Width

src/contexts/AppContext.tsx

@@ -71,7 +71,7 @@ export const AppStateProvider = (props: { children: string | number | boolean |
         ],
         selectedTool: 0,
         color: '#000000',
-        alpha: 255,
+        alpha: 1,
         tolerance: 0.15,
     });
     return<EditorContext.Provider value={useDrawing}>

src/generators/createLayer.ts

@@ -10,6 +10,11 @@ export const createLayer = (name:string, rect:Rect):LayerState => {
     const canvas = createDrawable({ size });
     const buffer = createDrawable({ size });
     const thumbnail = createDrawable({ size: [40, 40 * (height / width)] });
+
+    // dummy context and canvas for creating initial imageData state
+    const ctx = document.createElement('canvas').getContext('2d');
+    if (!ctx) throw new Error('2d context could not be created');
+
     return {
         key: uid(),
         name,
@@ -20,6 +25,7 @@ export const createLayer = (name:string, rect:Rect):LayerState => {
         visible: true,
         opacity: 1,
         mixBlendMode: blendModes[0],
-        handles: []
+        handles: [],
+        imageData: ctx.createImageData(width, height)
     };
 };

src/index.tsx

@@ -4,6 +4,7 @@ import ReactModal from 'react-modal';
 import App from './App';
 import { AppStateProvider } from './contexts/AppContext';
 import { content, overlay } from './css/Modal.css';
+import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import './css/index.css';
 
 ReactModal.defaultStyles = {
@@ -15,4 +16,6 @@ const root = ReactDOM.createRoot(document.getElementById('root') || document.bod
 root.render(
     <AppStateProvider>
         <App />
-    </AppStateProvider>);
+    </AppStateProvider>);
+
+serviceWorkerRegistration.register();

src/serviceWorkerRegistration.ts

@@ -0,0 +1,142 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://cra.link/PWA
+
+const isLocalhost = Boolean(
+    window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+);
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void;
+  onUpdate?: (registration: ServiceWorkerRegistration) => void;
+};
+
+export function register(config?: Config) {
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+        const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+        if (publicUrl.origin !== window.location.origin) {
+            // Our service worker won't work if PUBLIC_URL is on a different origin
+            // from what our page is served on. This might happen if a CDN is used to
+            // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+            return;
+        }
+
+        window.addEventListener('load', () => {
+            const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+            if (isLocalhost) {
+                // This is running on localhost. Let's check if a service worker still exists or not.
+                checkValidServiceWorker(swUrl, config);
+
+                // Add some additional logging to localhost, pointing developers to the
+                // service worker/PWA documentation.
+                navigator.serviceWorker.ready.then(() => {
+                    console.log(
+                        'This web app is being served cache-first by a service ' +
+              'worker. To learn more, visit https://cra.link/PWA'
+                    );
+                });
+            } else {
+                // Is not localhost. Just register service worker
+                registerValidSW(swUrl, config);
+            }
+        });
+    }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+    navigator.serviceWorker
+        .register(swUrl)
+        .then((registration) => {
+            registration.onupdatefound = () => {
+                const installingWorker = registration.installing;
+                if (installingWorker == null) {
+                    return;
+                }
+                installingWorker.onstatechange = () => {
+                    if (installingWorker.state === 'installed') {
+                        if (navigator.serviceWorker.controller) {
+                            // At this point, the updated precached content has been fetched,
+                            // but the previous service worker will still serve the older
+                            // content until all client tabs are closed.
+                            console.log(
+                                'New content is available and will be used when all ' +
+                  'tabs for this page are closed. See https://cra.link/PWA.'
+                            );
+
+                            // Execute callback
+                            if (config && config.onUpdate) {
+                                config.onUpdate(registration);
+                            }
+                        } else {
+                            // At this point, everything has been precached.
+                            // It's the perfect time to display a
+                            // "Content is cached for offline use." message.
+                            console.log('Content is cached for offline use.');
+
+                            // Execute callback
+                            if (config && config.onSuccess) {
+                                config.onSuccess(registration);
+                            }
+                        }
+                    }
+                };
+            };
+        })
+        .catch((error) => {
+            console.error('Error during service worker registration:', error);
+        });
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+    // Check if the service worker can be found. If it can't reload the page.
+    fetch(swUrl, {
+        headers: { 'Service-Worker': 'script' },
+    })
+        .then((response) => {
+            // Ensure service worker exists, and that we really are getting a JS file.
+            const contentType = response.headers.get('content-type');
+            if (
+                response.status === 404 ||
+        (contentType != null && contentType.indexOf('javascript') === -1)
+            ) {
+                // No service worker found. Probably a different app. Reload the page.
+                navigator.serviceWorker.ready.then((registration) => {
+                    registration.unregister().then(() => {
+                        window.location.reload();
+                    });
+                });
+            } else {
+                // Service worker found. Proceed as normal.
+                registerValidSW(swUrl, config);
+            }
+        })
+        .catch(() => {
+            console.log('No internet connection found. App is running in offline mode.');
+        });
+}
+
+export function unregister() {
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.ready
+            .then((registration) => {
+                registration.unregister();
+            })
+            .catch((error) => {
+                console.error(error.message);
+            });
+    }
+}

src/types/LayerState.ts

@@ -14,5 +14,6 @@ export interface LayerState {
   opacity: number
   mixBlendMode: BlendMode
   handles: Handle[]
+  imageData: ImageData
 }