diff --git a/media/editor/dmiEditor.tsx b/media/editor/dmiEditor.tsx index a38631e..100224a 100644 --- a/media/editor/dmiEditor.tsx +++ b/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(null); const setOpenStateIndex = (value: number | null) => { select.sessionPersistentData.setOpenStateId(value); @@ -155,6 +172,16 @@ const Editor: React.FC = () => { ); + const dirDisplay = ( +
+ cycleDirection(true)}> + + + cycleDirection(false)}> + + +
+ ); const backgroundDisplay = ( @@ -179,10 +206,13 @@ const Editor: React.FC = () => { setOpenStateIndex(dmi.states.findIndex(x => x === state))} /> ); + // Direction buttons + infoBarElements.push(dirDisplay); //Search bar infoBarElements.push( void; select: () => void; open: () => void; @@ -61,7 +62,7 @@ const ListStateDisplay: React.FC = props => { /> {props.duplicate &&
Duplicate
}
- +
); @@ -70,6 +71,7 @@ const ListStateDisplay: React.FC = 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 = props => { setSelectedState(index)}