Added token rotation

This commit is contained in:
Mitchell McCaffrey 2020-05-22 21:10:05 +10:00
parent a8bd5ab672
commit ef1c875088
3 changed files with 40 additions and 11 deletions

View File

@ -178,7 +178,7 @@ function MapToken({
onDragEnd={handleDragEnd} onDragEnd={handleDragEnd}
onDragStart={handleDragStart} onDragStart={handleDragStart}
opacity={tokenOpacity} opacity={tokenOpacity}
name={token.isVehicle ? "vehicle" : "token"} name={token && token.isVehicle ? "vehicle" : "token"}
id={tokenState.id} id={tokenState.id}
> >
<KonvaImage <KonvaImage
@ -188,17 +188,22 @@ function MapToken({
x={0} x={0}
y={0} y={0}
image={tokenSourceImage} image={tokenSourceImage}
rotation={tokenState.rotation}
offsetX={tokenWidth / 2}
offsetY={tokenHeight / 2}
/> />
<TokenStatus <Group offsetX={tokenWidth / 2} offsetY={tokenHeight / 2}>
tokenState={tokenState} <TokenStatus
width={tokenWidth} tokenState={tokenState}
height={tokenHeight} width={tokenWidth}
/> height={tokenHeight}
<TokenLabel />
tokenState={tokenState} <TokenLabel
width={tokenWidth} tokenState={tokenState}
height={tokenHeight} width={tokenWidth}
/> height={tokenHeight}
/>
</Group>
</Group> </Group>
); );
} }

View File

@ -74,6 +74,11 @@ function TokenMenu({
onTokenChange({ ...tokenState, size: newSize }); onTokenChange({ ...tokenState, size: newSize });
} }
function handleRotationChange(event) {
const newRotation = parseInt(event.target.value);
onTokenChange({ ...tokenState, rotation: newRotation });
}
function handleModalContent(node) { function handleModalContent(node) {
if (node) { if (node) {
// Focus input // Focus input
@ -192,6 +197,24 @@ function TokenMenu({
mr={1} mr={1}
/> />
</Flex> </Flex>
<Flex sx={{ alignItems: "center" }}>
<Text
as="label"
variant="body2"
sx={{ width: "95%", fontSize: "16px" }}
p={1}
>
Rotation:
</Text>
<Slider
value={(tokenState && tokenState.rotation) || 0}
onChange={handleRotationChange}
step={45}
min={0}
max={360}
mr={1}
/>
</Flex>
</Box> </Box>
</MapMenu> </MapMenu>
); );

View File

@ -33,6 +33,7 @@ function Tokens({ onMapTokenStateCreate }) {
x: token.x, x: token.x,
y: token.y, y: token.y,
lastEditedBy: userId, lastEditedBy: userId,
rotation: 0,
}); });
} }
} }