Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Typescript

Browse Source
This commit is contained in:
Mitchell McCaffrey
2021-07-16 21:39:45 +10:00
parent 74cabdd798
commit e48d19a817
14 changed files with 81 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/map/DragOverlay.tsx
+2 -2
View File
@@ -1,12 +1,12 @@
import { useEffect, useRef, useState } from "react";
import { Box, IconButton } from "theme-ui";
import { Node } from "konva/types/Node";
import Konva from "konva";
import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
type DragOverlayProps = {
dragging: boolean;
node: Node;
node: Konva.Node;
onRemove: () => void;
};
src/components/map/MapEditor.tsx
+3 -4
View File
@@ -1,6 +1,7 @@
import React, { useState, useRef } from "react";
import { Box, IconButton } from "theme-ui";
import { Stage, Layer, Image } from "react-konva";
import Konva from "konva";
import ReactResizeDetector from "react-resize-detector";
import useMapImage from "../../hooks/useMapImage";
@@ -23,8 +24,6 @@ import MapGrid from "./MapGrid";
import MapGridEditor from "./MapGridEditor";
import { Map } from "../../types/Map";
import { GridInset } from "../../types/Grid";
import { Stage as StageType } from "konva/types/Stage";
import { Layer as LayerType } from "konva/types/Layer";
type MapSettingsChangeEventHandler = (change: Partial<Map>) => void;
@@ -43,8 +42,8 @@ function MapEditor({ map, onSettingsChange }: MapEditorProps) {
const defaultInset = getGridDefaultInset(map.grid, map.width, map.height);
const stageTranslateRef = useRef({ x: 0, y: 0 });
const mapStageRef = useRef<StageType>(null);
const mapLayerRef = useRef<LayerType>(null);
const mapStageRef = useRef<Konva.Stage>(null);
const mapLayerRef = useRef<Konva.Layer>(null);
const [preventMapInteraction, setPreventMapInteraction] = useState(false);
function handleResize(width?: number, height?: number): void {
src/components/map/MapGridEditor.tsx
+10 -6
View File
@@ -1,6 +1,6 @@
import { useRef } from "react";
import { Group, Circle, Rect } from "react-konva";
import { KonvaEventObject, Node } from "konva/types/Node";
import Konva from "konva";
import {
useDebouncedStageScale,
@@ -49,19 +49,23 @@ function MapGridEditor({ map, onGridChange }: MapGridEditorProps) {
const handlePreviousPositionRef = useRef<Vector2>();
function handleScaleCircleDragStart(event: KonvaEventObject<MouseEvent>) {
function handleScaleCircleDragStart(
event: Konva.KonvaEventObject<MouseEvent>
) {
const handle = event.target;
const position = getHandleNormalizedPosition(handle);
handlePreviousPositionRef.current = position;
}
function handleScaleCircleDragMove(event: KonvaEventObject<MouseEvent>) {
function handleScaleCircleDragMove(
event: Konva.KonvaEventObject<MouseEvent>
) {
const handle = event.target;
onGridChange(getHandleInset(handle));
handlePreviousPositionRef.current = getHandleNormalizedPosition(handle);
}
function handleScaleCircleDragEnd(event: KonvaEventObject<MouseEvent>) {
function handleScaleCircleDragEnd(event: Konva.KonvaEventObject<MouseEvent>) {
onGridChange(getHandleInset(event.target));
setPreventMapInteraction(false);
}
@@ -74,7 +78,7 @@ function MapGridEditor({ map, onGridChange }: MapGridEditorProps) {
setPreventMapInteraction(false);
}
function getHandleInset(handle: Node): GridInset {
function getHandleInset(handle: Konva.Node): GridInset {
const name = handle.name();
// Find distance and direction of dragging
@@ -202,7 +206,7 @@ function MapGridEditor({ map, onGridChange }: MapGridEditorProps) {
useKeyboard(handleKeyDown);
function getHandleNormalizedPosition(handle: Node) {
function getHandleNormalizedPosition(handle: Konva.Node) {
return Vector2.divide({ x: handle.x(), y: handle.y() }, mapSize);
}
src/components/map/MapInteraction.tsx
+4 -5
View File
@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useState } from "react";
import { Box } from "theme-ui";
import ReactResizeDetector from "react-resize-detector";
import { Stage, Layer, Image } from "react-konva";
import Konva from "konva";
import { EventEmitter } from "events";
import useMapImage from "../../hooks/useMapImage";
@@ -18,8 +19,6 @@ import { GridProvider } from "../../contexts/GridContext";
import { useKeyboard } from "../../contexts/KeyboardContext";
import shortcuts from "../../shortcuts";
import { Layer as LayerType } from "konva/types/Layer";
import { Image as ImageType } from "konva/types/shapes/Image";
import { Map, MapToolId } from "../../types/Map";
import { MapState } from "../../types/MapState";
@@ -63,8 +62,8 @@ function MapInteraction({
// Avoid state udpates when panning the map by using a ref and updating the konva element directly
const stageTranslateRef = useRef({ x: 0, y: 0 });
const mapStageRef = useMapStage();
const mapLayerRef = useRef<LayerType>(null);
const mapImageRef = useRef<ImageType>(null);
const mapLayerRef = useRef<Konva.Layer>(null);
const mapImageRef = useRef<Konva.Image>(null);
function handleResize(width?: number, height?: number) {
if (width && height && width > 0 && height > 0) {
@@ -223,7 +222,7 @@ function MapInteraction({
>
<Layer ref={mapLayerRef}>
<Image
image={mapLoaded && mapImage}
image={(mapLoaded && mapImage) || undefined}
width={mapWidth}
height={mapHeight}
id="mapImage"
src/components/map/MapToken.js → src/components/map/MapToken.tsx
+31 -13
View File
@@ -1,6 +1,7 @@
import React, { useState, useRef } from "react";
import { useState, useRef } from "react";
import { Image as KonvaImage, Group } from "react-konva";
import { useSpring, animated } from "@react-spring/konva";
import Konva from "konva";
import useImage from "use-image";
import usePrevious from "../../hooks/usePrevious";
@@ -23,6 +24,23 @@ import { Intersection, getScaledOutline } from "../../helpers/token";
import Vector2 from "../../helpers/Vector2";
import { tokenSources } from "../../tokens";
import { TokenState } from "../../types/TokenState";
import { Map } from "../../types/Map";
import {
TokenMenuOpenChangeEventHandler,
TokenStateChangeEventHandler,
} from "../../types/Events";
type MapTokenStateProps = {
tokenState: TokenState;
onTokenStateChange: TokenStateChangeEventHandler;
onTokenMenuOpen: TokenMenuOpenChangeEventHandler;
onTokenDragStart: (event: Konva.KonvaEventObject<DragEvent>) => void;
onTokenDragEnd: (event: Konva.KonvaEventObject<DragEvent>) => void;
draggable: boolean;
fadeOnHover: boolean;
map: Map;
};
function MapToken({
tokenState,
@@ -33,7 +51,7 @@ function MapToken({
draggable,
fadeOnHover,
map,
}) {
}: MapTokenStateProps) {
const userId = useUserId();
const mapWidth = useMapWidth();
@@ -43,16 +61,16 @@ function MapToken({
const gridCellPixelSize = useGridCellPixelSize();
const tokenURL = useDataURL(tokenState, tokenSources);
const [tokenImage] = useImage(tokenURL);
const [tokenImage] = useImage(tokenURL || "");
const tokenAspectRatio = tokenState.width / tokenState.height;
const snapPositionToGrid = useGridSnapping();
const intersectingTokensRef = useRef([]);
const intersectingTokensRef = useRef<Konva.Node[]>([]);
const previousDragPositionRef = useRef({ x: 0, y: 0 });
function handleDragStart(event) {
function handleDragStart(event: Konva.KonvaEventObject<DragEvent>) {
const tokenGroup = event.target;
if (tokenState.category === "vehicle") {
@@ -65,7 +83,7 @@ function MapToken({
);
// Find all other tokens on the map
const layer = tokenGroup.getLayer();
const layer = tokenGroup.getLayer() as Konva.Layer;
const tokens = layer.find(".character");
for (let other of tokens) {
if (other === tokenGroup) {
@@ -80,7 +98,7 @@ function MapToken({
onTokenDragStart(event);
}
function handleDragMove(event) {
function handleDragMove(event: Konva.KonvaEventObject<DragEvent>) {
const tokenGroup = event.target;
// Snap to corners of grid
if (map.snapToGrid) {
@@ -98,10 +116,10 @@ function MapToken({
}
}
function handleDragEnd(event) {
function handleDragEnd(event: Konva.KonvaEventObject<DragEvent>) {
const tokenGroup = event.target;
const mountChanges = {};
const mountChanges: Record<string, Partial<TokenState>> = {};
if (tokenState.category === "vehicle") {
for (let other of intersectingTokensRef.current) {
mountChanges[other.id()] = {
@@ -127,7 +145,7 @@ function MapToken({
onTokenDragEnd(event);
}
function handleClick(event) {
function handleClick(event: Konva.KonvaEventObject<MouseEvent>) {
if (draggable) {
const tokenImage = event.target;
onTokenMenuOpen(tokenState.id, tokenImage);
@@ -136,8 +154,8 @@ function MapToken({
const [tokenOpacity, setTokenOpacity] = useState(1);
// Store token pointer down time to check for a click when token is locked
const tokenPointerDownTimeRef = useRef();
function handlePointerDown(event) {
const tokenPointerDownTimeRef = useRef<number>(0);
function handlePointerDown(event: Konva.KonvaEventObject<PointerEvent>) {
if (draggable) {
setPreventMapInteraction(true);
}
@@ -146,7 +164,7 @@ function MapToken({
}
}
function handlePointerUp(event) {
function handlePointerUp(event: Konva.KonvaEventObject<PointerEvent>) {
if (draggable) {
setPreventMapInteraction(false);
}