Update token duplicate and removing to include attached tokens

This commit is contained in:
Mitchell McCaffrey 2021-08-12 10:23:02 +10:00
parent 6c27a6cbd3
commit 14fbb41e9d
5 changed files with 40 additions and 21 deletions

View File

@ -145,7 +145,11 @@ function Token({
}
}
setDragging(true);
onTokenDragStart(event, tokenState.id);
onTokenDragStart(
event,
tokenState.id,
attachedTokensRef.current.map((token) => token.id())
);
}
function handleDragMove(event: Konva.KonvaEventObject<DragEvent>) {
@ -211,11 +215,16 @@ function Token({
});
setDragging(false);
onTokenDragEnd(
event,
tokenState.id,
attachedTokensRef.current.map((token) => token.id())
);
attachmentCharactersRef.current = [];
attachedTokensRef.current = [];
setAttachmentOverCharacter(false);
onTokenDragEnd(event, tokenState.id);
}
function handleClick() {

View File

@ -1,23 +1,29 @@
import DragOverlay from "../map/DragOverlay";
import { TokenStateRemoveHandler } from "../../types/Events";
import { TokenState } from "../../types/TokenState";
import { TokenDraggingOptions } from "../../types/Token";
type TokenDragOverlayProps = {
onTokenStateRemove: TokenStateRemoveHandler;
tokenState: TokenState;
dragging: boolean;
draggingOptions: TokenDraggingOptions;
};
function TokenDragOverlay({
onTokenStateRemove,
tokenState,
dragging,
draggingOptions,
}: TokenDragOverlayProps) {
function handleTokenRemove() {
onTokenStateRemove([tokenState.id]);
onTokenStateRemove([
draggingOptions.tokenStateId,
...draggingOptions.attachedTokenStateIds,
]);
}
return <DragOverlay dragging={dragging} onRemove={handleTokenRemove} />;
return (
<DragOverlay
dragging={draggingOptions.dragging}
onRemove={handleTokenRemove}
/>
);
}
export default TokenDragOverlay;

View File

@ -60,17 +60,23 @@ function useMapTokens(
function handleTokenDragStart(
_: KonvaEventObject<DragEvent>,
tokenStateId: string
tokenStateId: string,
attachedTokenStateIds: string[]
) {
if (duplicateToken) {
const state = mapState?.tokens[tokenStateId];
let newStates: TokenState[] = [];
for (let id of [tokenStateId, ...attachedTokenStateIds]) {
const state = mapState?.tokens[id];
if (state) {
onTokensStateCreate([{ ...state, id: uuid() }]);
newStates.push({ ...state, id: uuid() });
}
}
onTokensStateCreate(newStates);
}
setTokenDraggingOptions({
dragging: true,
tokenStateId,
attachedTokenStateIds,
});
}
@ -173,14 +179,10 @@ function useMapTokens(
/>
);
const tokenDraggingState =
tokenDraggingOptions && mapState?.tokens[tokenDraggingOptions.tokenStateId];
const tokenDragOverlay = tokenDraggingOptions && tokenDraggingState && (
const tokenDragOverlay = tokenDraggingOptions && (
<TokenDragOverlay
onTokenStateRemove={handleTokenStateRemove}
tokenState={tokenDraggingState}
dragging={!!(tokenDraggingOptions && tokenDraggingOptions.dragging)}
draggingOptions={tokenDraggingOptions}
/>
);

View File

@ -34,7 +34,8 @@ export type TokenMenuCloseChangeEventHandler = () => void;
export type TokenSettingsChangeEventHandler = (change: Partial<Token>) => void;
export type TokenDragEventHandler = (
event: Konva.KonvaEventObject<DragEvent>,
tokenStateId: string
tokenStateId: string,
attachedTokenStateIds: string[]
) => void;
export type NoteCreateEventHander = (notes: Note[]) => void;

View File

@ -39,4 +39,5 @@ export type TokenMenuOptions = {
export type TokenDraggingOptions = {
dragging: boolean;
tokenStateId: string;
attachedTokenStateIds: string[];
};