Typescript

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

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;
};

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 {

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);
}

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"

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);
}

View File

@ -293,7 +293,7 @@ export function useAssetURL(
type FileData = {
file: string;
type: "file";
thumbnail: string;
thumbnail?: string;
quality?: string;
resolutions?: Record<string, string>;
};

View File

@ -1,7 +1,7 @@
import React, { useContext } from "react";
import { Stage } from "konva/types/Stage";
import Konva from "konva";
export type MapStage = React.MutableRefObject<Stage | null>;
export type MapStage = React.MutableRefObject<Konva.Stage | null>;
const MapStageContext = React.createContext<MapStage | undefined>(undefined);
export const MapStageProvider = MapStageContext.Provider;

View File

@ -1,14 +1,13 @@
import React, { useState, useEffect, useRef } from "react";
import Konva from "konva";
import { Line, Group, Path, Circle } from "react-konva";
import { LineConfig } from "konva/types/shapes/Line";
import Color from "color";
import Vector2 from "./Vector2";
type HoleyLineProps = {
holes: number[][];
} & LineConfig;
} & Konva.LineConfig;
// Holes should be wound in the opposite direction as the containing points array
export function HoleyLine({ holes, ...props }: HoleyLineProps) {
@ -115,7 +114,7 @@ export function HoleyLine({ holes, ...props }: HoleyLineProps) {
}
}
return <Line {...props} sceneFunc={sceneFunc} />;
return <Line {...props} sceneFunc={sceneFunc as any} />;
}
type TickProps = {
@ -180,11 +179,11 @@ export function Trail({
segments,
color,
}: TrailProps) {
const trailRef: React.MutableRefObject<Konva.Line | undefined> = useRef();
const pointsRef: React.MutableRefObject<TrailPoint[]> = useRef([]);
const trailRef = useRef<Konva.Line>(null);
const pointsRef = useRef<TrailPoint[]>([]);
const prevPositionRef = useRef(position);
const positionRef = useRef(position);
const circleRef: React.MutableRefObject<Konva.Circle | undefined> = useRef();
const circleRef = useRef<Konva.Circle>(null);
// Color of the end of the trail
const transparentColorRef = useRef(
Color(color).lighten(0.5).alpha(0).string()
@ -250,7 +249,7 @@ export function Trail({
}, []);
// Custom scene function for drawing a trail from a line
function sceneFunc(context: CanvasRenderingContext2D) {
function sceneFunc(context: Konva.Context) {
// Resample points to ensure a smooth trail
const resampledPoints = Vector2.resample(pointsRef.current, segments);
if (resampledPoints.length === 0) {
@ -302,6 +301,7 @@ export function Trail({
);
gradient.addColorStop(0, color);
gradient.addColorStop(1, transparentColorRef.current);
// @ts-ignore
context.fillStyle = gradient;
context.fill();
}

View File

@ -1,6 +1,6 @@
import { v4 as uuid } from "uuid";
import Case from "case";
import { Stage } from "konva/types/Stage";
import Konva from "konva";
import blobToBuffer from "./blobToBuffer";
import { createThumbnail, getImageOutline } from "./image";
@ -143,7 +143,7 @@ export async function createTokenFromFile(
}
export function clientPositionToMapPosition(
mapStage: Stage,
mapStage: Konva.Stage,
clientPosition: Vector2,
checkMapBounds = true
): Vector2 | undefined {

View File

@ -1,4 +1,4 @@
import { Layer } from "konva/types/Layer";
import Konva from "konva";
import { useEffect, useRef } from "react";
import { MapStage } from "../contexts/MapStageContext";
@ -17,7 +17,7 @@ function useImageCenter(
stageHeight: number,
stageTranslateRef: React.MutableRefObject<Vector2>,
setStageScale: React.Dispatch<React.SetStateAction<number>>,
imageLayerRef: React.RefObject<Layer>,
imageLayerRef: React.RefObject<Konva.Layer>,
containerRef: React.RefObject<HTMLDivElement>,
responsive = false
) {

View File

@ -7,7 +7,9 @@ import { mapSources as defaultMapSources } from "../maps";
import { Map } from "../types/Map";
function useMapImage(map: Map) {
function useMapImage(
map: Map
): [HTMLImageElement | undefined, "loaded" | "loading" | "failed"] {
const mapURL = useDataURL(map, defaultMapSources);
const [mapImage, mapImageStatus] = useImage(mapURL || "");

View File

@ -2,7 +2,7 @@ import { useRef, useEffect, useState } from "react";
import { useGesture } from "react-use-gesture";
import { Handlers } from "react-use-gesture/dist/types";
import normalizeWheel from "normalize-wheel";
import { Layer } from "konva/types/Layer";
import Konva from "konva";
import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
import { MapStage } from "../contexts/MapStageContext";
@ -22,7 +22,7 @@ function useStageInteraction(
stageScale: number,
onStageScaleChange: StageScaleChangeEventHandler,
stageTranslateRef: React.MutableRefObject<Vector2>,
layerRef: React.RefObject<Layer>,
layerRef: React.RefObject<Konva.Layer>,
maxZoom = 10,
tool = "move",
preventInteraction = false,

View File

@ -1,6 +1,7 @@
import React, { useState, useEffect, useRef } from "react";
import { useState, useEffect, useRef } from "react";
import { Flex, Box, Text } from "theme-ui";
import { useParams } from "react-router-dom";
import Konva from "konva";
import Banner from "../components/banner/Banner";
import ReconnectBanner from "../components/banner/ReconnectBanner";
@ -28,7 +29,6 @@ import NetworkedMapAndTokens from "../network/NetworkedMapAndTokens";
import NetworkedParty from "../network/NetworkedParty";
import Session from "../network/Session";
import { Stage } from "konva/types/Stage";
function Game() {
const { id: gameId }: { id: string } = useParams();
@ -108,7 +108,7 @@ function Game() {
// A ref to the Konva stage
// the ref will be assigned in the MapInteraction component
const mapStageRef = useRef<Stage | null>(null);
const mapStageRef = useRef<Konva.Stage | null>(null);
return (
<AssetsProvider>

View File

@ -1,3 +1,4 @@
import Konva from "konva";
import { DefaultDice } from "./Dice";
import { Map } from "./Map";
import { MapState } from "./MapState";
@ -12,3 +13,11 @@ export type DiceSelectEventHandler = (dice: DefaultDice) => void;
export type RequestCloseEventHandler = () => void;
export type MapTokensStateCreateHandler = (states: TokenState[]) => void;
export type TokenStateChangeEventHandler = (
change: Partial<Record<string, Partial<TokenState>>>
) => void;
export type TokenMenuOpenChangeEventHandler = (
tokenStateId: string,
tokenImage: Konva.Node
) => void;