Add buttons to rotate sprite previews

media/editor/dmiEditor.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import * as ReactDOM from "react-dom/client";
 import "./dmiEditor.css";
 import * as select from "./state";
-import { Dmi, DmiState } from "../../shared/dmi";
+import { Dirs, Dmi, DmiState } from "../../shared/dmi";
 import {
     DocumentChangedEventMessage,
     MessageType,
@@ -26,6 +26,23 @@ const Editor: React.FC = () => {
         setZoom(value);
     };
 
+    const [direction, setDirection] = useState(Dirs.SOUTH);
+    const ROTATION_DIRECTIONS = [
+        Dirs.SOUTH,
+        Dirs.WEST,
+        Dirs.NORTH,
+        Dirs.EAST
+    ];
+    const cycleDirection = (counterclockwise: boolean) => {
+        let index = ROTATION_DIRECTIONS.indexOf(direction);
+        counterclockwise ? index-- : index++;
+        if (index < 0)
+            index = ROTATION_DIRECTIONS.length - 1;
+        else if (index > ROTATION_DIRECTIONS.length - 1)
+            index = 0;
+        setDirection(ROTATION_DIRECTIONS[index]);
+    };
+
     const [openStateIndex, setOpenStateIndexRaw] = useState<number | null>(null);
     const setOpenStateIndex = (value: number | null) => {
         select.sessionPersistentData.setOpenStateId(value);
@@ -155,6 +172,16 @@ const Editor: React.FC = () => {
             </VSCodeButton>
         </div>
     );
+    const dirDisplay = (
+        <div>
+            <VSCodeButton appearance="icon" onClick={() => cycleDirection(true)}>
+                <span className="codicon codicon-debug-step-back" />
+            </VSCodeButton>
+            <VSCodeButton appearance="icon" onClick={() => cycleDirection(false)}>
+                <span className="codicon codicon-debug-step-over" />
+            </VSCodeButton>
+        </div>
+    );
     const backgroundDisplay = (
         <VSCodeButton appearance="icon" onClick={toggleBackground}>
             <span className="codicon codicon-color-mode" />
@@ -179,10 +206,13 @@ const Editor: React.FC = () => {
             <StateList
                 filterString={searchText}
                 dmi={dmi}
+                direction={direction}
                 pushUpdate={pushDmiUpdate}
                 onOpen={state => setOpenStateIndex(dmi.states.findIndex(x => x === state))}
             />
         );
+        // Direction buttons
+        infoBarElements.push(dirDisplay);
         //Search bar
         infoBarElements.push(
             <VSCodeTextField

media/editor/listView.tsx

@@ -13,6 +13,7 @@ type ListStateDisplayProps = {
     hidden: boolean;
     duplicate: boolean;
     editing?: boolean;
+    direction: Dirs;
     delete: () => void;
     select: () => void;
     open: () => void;
@@ -61,7 +62,7 @@ const ListStateDisplay: React.FC<ListStateDisplayProps> = props => {
             />
             {props.duplicate && <div className="duplicate">Duplicate</div>}
             <div className="statePreview" onDoubleClick={props.open}>
-                <img className="frame" src={iconState.generate_preview(Dirs.SOUTH)} />
+                <img className="frame" src={iconState.generate_preview(props.direction)} />
             </div>
         </div>
     );
@@ -70,6 +71,7 @@ const ListStateDisplay: React.FC<ListStateDisplayProps> = props => {
 type StateListProps = {
     dmi: Dmi;
     filterString: string;
+    direction: Dirs;
     pushUpdate: (newDmi: Dmi) => void;
     onOpen: (state: DmiState) => void;
 };
@@ -288,6 +290,7 @@ export const StateList: React.FC<StateListProps> = props => {
                     <ListStateDisplay
                         key={index}
                         state={state}
+                        direction={props.direction}
                         modify={modify_state(index)}
                         delete={delete_state(index)}
                         select={() => setSelectedState(index)}