rotate UI complete

Author: kirjavascript

app/components/mappings/rotate.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { environment } from '#store/environment';
 import { observer } from 'mobx-react';
 import { exportSprite } from '#formats/image';
@@ -7,14 +7,12 @@ import rotSprite, {
     addMarginToImageData,
     getRotateDiagonal,
 } from '#util/rotsprite';
-import { Input, Slider, Item, SelectBase, Button, Modal } from '#ui';
+import { Input, Slider, Item, Button, Modal } from '#ui';
 import { mappingState } from './state';
 
 export const Rotate = observer(() => {
     const canvasRef = useRef();
 
-    const [value, setValue] = useState(0);
-
     useEffect(() => {
         if (!canvasRef.current) return;
         const spriteCanv = exportSprite(environment.currentSprite);
@@ -75,42 +73,55 @@ export const Rotate = observer(() => {
         return value;
     };
 
-    // mappingState.rotateShow
+    const { active } = mappingState.rotate;
 
     return (
-        <>
-            {String(!!value)}
-            <SelectBase
-                options={[...Array(2).keys()].map((d) => String(d))}
-                value={value}
-                onChange={(e) => setValue(e.value === '1')}
-            />
-
-            <Modal
-                className="rotsprite"
-                spring={{
-                    top: value ? -150 : 50,
-                    opacity: value ? 1 : 0.5,
-                }}
-            >
-                <Item>Rotate Sprite</Item>
-                <canvas ref={canvasRef} />
-                <Input
-                    store={mappingState.rotate}
-                    assert={assertInput}
-                    accessor="angle"
-                    isNumber
-                />
-                <Slider
-                    min="0"
-                    step="1"
-                    max="360"
-                    store={mappingState.rotate}
-                    accessor="angle"
-                />
+        <Modal
+            className="rotsprite"
+            spring={{
+                top: active ? 15 : -100,
+                opacity: active ? 1 : 0,
+            }}
+        >
+            <Item>Rotate Sprite</Item>
+            <canvas ref={canvasRef} />
+            <div className="angles">
+                <div className="numbers">
+                    {Array.from({ length: 8 }, (_, i) => {
+                        const angle = i * 45;
+                        return (
+                            <Button
+                                key={i}
+                                onClick={() => {
+                                    mappingState.rotate.angle = angle;
+                                }}
+                            >
+                                {angle}
+                            </Button>
+                        );
+                    })}
+                    <Input
+                        store={mappingState.rotate}
+                        assert={assertInput}
+                        accessor="angle"
+                        isNumber
+                    />
+                </div>
+
+                    <Slider
+                        min="0"
+                        step="1"
+                        max="360"
+                        store={mappingState.rotate}
+                        accessor="angle"
+                    />
+            </div>
+            <div className="actions">
+                <Button color="magenta" onClick={mappingState.toggleRotate}>
+                    close
+                </Button>
                 <Button color="red">Reimport</Button>
-                <Button color="magenta">close</Button>
-            </Modal>
-        </>
+            </div>
+        </Modal>
     );
 });

app/components/mappings/state/index.js

@@ -63,7 +63,6 @@ class MappingState {
             scale: observable,
             x: observable,
             y: observable,
-            rotate: observable,
             resetPanAndZoom: action,
             setWidth: action,
             setZoom: action,
@@ -81,6 +80,8 @@ class MappingState {
             selectAll: action,
             selectNone: action,
             selectToggle: action,
+            rotate: observable,
+            toggleRotate: action,
             rawEditor: observable,
             toggleRawEditor: action,
             newMapping: observable,
@@ -181,6 +182,10 @@ class MappingState {
         active: false,
     };
 
+    toggleRotate = () => {
+        this.rotate.active = !this.rotate.active;
+    };
+
     // raw editor
 
     rawEditor = {

app/controls/commands.js

@@ -280,6 +280,12 @@ export const commands = [
                 mappingState.toggleRawEditor();
             },
         },
+        {
+            map: 'R', name: 'Rotate Sprite', color: 'white', noMultiplier: true,
+            func: () => {
+                mappingState.toggleRotate();
+            },
+        },
     ],
 
     [

styles/components/mappings.scss

@@ -40,7 +40,6 @@
     top: 15px;
     left: 15px;
     padding: 5px;
-    z-index: 1;
     .mapping {
         position: relative;
         margin: 5px;
@@ -75,7 +74,6 @@
         justify-content: space-between;
         margin-bottom: 10px;
     }
-    z-index: 2;
     left: 15px;
     right: 15px;
 }

styles/components/rotsprite.scss

@@ -1,18 +1,33 @@
 .rotsprite {
-    z-index: 3;
-    // left: 15px;
-    // right: 15px;
-
     canvas {
         background-image: url(../images/t.png);
         border: 3px solid $grey;
         width: 400px;
         height: 400px;
+        margin: 10px;
+    }
+
+    .angles {
+        margin: 10px;
+        .numbers {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+        }
+        .ui-input {
+            display: inline;
+        }
+        .ui-input input, .button {
+            text-align: center;
+            width: 30px;
+            margin: 0;
+        }
     }
 
-    .close {
+    .actions {
         display: flex;
         justify-content: space-between;
-        margin-bottom: 10px;
+        margin: 10px;
+        margin-bottom: 0;
     }
 }