rotsprite MVP

Author: kirjavascript

app/components/import/state.js

@@ -63,21 +63,29 @@ class ImportState {
         this.canvas = node;
         this.ctx = node.getContext('2d');
 
-        const img = new Image();
+        if (this.path) {
+            const img = new Image();
+
+            img.onload = () => {
+                node.width = img.width;
+                node.height = img.height;
+                this.ctx.drawImage(img, 0, 0);
+                requestAnimationFrame(this.loaded);
+            };
 
-        img.onload = () => {
-            node.width = img.width;
-            node.height = img.height;
-            this.ctx.drawImage(img, 0, 0);
-            requestAnimationFrame(this.loaded);
-        };
+            img.onerror = (e) => {
+                errorMsg('Import Error', `Error loading ${this.path}`);
+                this.cancel();
+            };
 
-        img.onerror = (e) => {
-            errorMsg('Import Error', `Error loading ${this.path}`);
-            this.cancel();
-        };
+            img.src = this.path;
 
-        img.src = this.path;
+        } else if (this.rotCanvas) {
+            console.log(this.rotCanvas);
+            this.ctx.drawImage(this.rotCanvas, 0, 0);
+            delete this.rotCanvas;
+            requestAnimationFrame(this.loaded);
+        }
     };
 
     loaded = () => {

app/components/mappings/rotate.js

@@ -6,6 +6,8 @@ import { rotateImageData } from '#util/rotsprite';
 import { Input, Slider, Item, Button, Modal } from '#ui';
 import { mappingState } from './state';
 
+import { importState } from '../import/state';
+
 function rotateCurrentSprite(canvas, angle) {
     const spriteCanv = exportSprite(environment.currentSprite);
     const spriteCtx = spriteCanv.getContext('2d');
@@ -41,6 +43,11 @@ export const Rotate = observer(() => {
         return value;
     };
 
+    function reImport() {
+        importState.rotCanvas = canvasRef.current;
+        importState.config.active = true;
+    }
+
     return (
         <Modal
             className="rotsprite"
@@ -86,7 +93,7 @@ export const Rotate = observer(() => {
                 <Button color="magenta" onClick={mappingState.toggleRotate}>
                     close
                 </Button>
-                <Button color="red">Reimport</Button>
+                <Button color="red" onClick={reImport}>Reimport</Button>
             </div>
         </Modal>
     );