Typescript
This commit is contained in:
parent
74cabdd798
commit
e48d19a817
@ -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;
|
||||
};
|
||||
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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"
|
||||
|
@ -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);
|
||||
}
|
@ -293,7 +293,7 @@ export function useAssetURL(
|
||||
type FileData = {
|
||||
file: string;
|
||||
type: "file";
|
||||
thumbnail: string;
|
||||
thumbnail?: string;
|
||||
quality?: string;
|
||||
resolutions?: Record<string, string>;
|
||||
};
|
||||
|
@ -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;
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
) {
|
||||
|
@ -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 || "");
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user