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

Separated prop tokens from tokens to render below drawings and notes

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-08-05 15:17:10 +10:00
parent 26f91dbb8f
commit 59d46e1d27
3 changed files with 78 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/map/Map.tsx
View File

@ -137,7 +137,7 @@ function Map({
onFogDraw(new EditStatesAction(shapes));
}
const { tokens, tokenMenu, tokenDragOverlay } = useMapTokens(
const { tokens, propTokens, tokenMenu, tokenDragOverlay } = useMapTokens(
map,
mapState,
onMapTokenStateChange,
@ -199,6 +199,7 @@ function Map({
onSelectedToolChange={setSelectedToolId}
>
{map && map.showGrid && <MapGrid map={map} />}
{propTokens}
<DrawingTool
map={map}
drawings={drawShapes}

57
src/components/tools/SelectTool.tsx
View File

@ -177,25 +177,25 @@ function SelectTool({
return;
}
if (selection && mapStage) {
const tokensGroup = mapStage.findOne<Konva.Group>("#tokens");
const notesGroup = mapStage.findOne<Konva.Group>("#notes");
if (tokensGroup && notesGroup) {
const points = getSelectionPoints(selection);
const intersection = new Intersection(
{
type: "path",
points: scaleAndFlattenPoints(points, {
x: mapWidth,
y: mapHeight,
}),
},
{ x: selection.x, y: selection.y },
{ x: 0, y: 0 },
0
);
const tokensGroups = mapStage.find<Konva.Group>("#tokens");
const notesGroups = mapStage.find<Konva.Group>("#notes");
const points = getSelectionPoints(selection);
const intersection = new Intersection(
{
type: "path",
points: scaleAndFlattenPoints(points, {
x: mapWidth,
y: mapHeight,
}),
},
{ x: selection.x, y: selection.y },
{ x: 0, y: 0 },
0
);
let intersectingItems: SelectionItem[] = [];
let intersectingItems: SelectionItem[] = [];
for (let tokensGroup of tokensGroups) {
const tokens = tokensGroup.children;
if (tokens) {
for (let token of tokens) {
@ -207,6 +207,9 @@ function SelectTool({
}
}
}
}
for (let notesGroup of notesGroups) {
const notes = notesGroup.children;
if (notes) {
for (let note of notes) {
@ -218,18 +221,16 @@ function SelectTool({
}
}
}
}
if (intersectingItems.length > 0) {
onSelectionChange((prevSelection) => {
if (!prevSelection) {
return prevSelection;
}
return { ...prevSelection, items: intersectingItems };
});
onSelectionMenuOpen(true);
} else {
onSelectionChange(null);
}
if (intersectingItems.length > 0) {
onSelectionChange((prevSelection) => {
if (!prevSelection) {
return prevSelection;
}
return { ...prevSelection, items: intersectingItems };
});
onSelectionMenuOpen(true);
} else {
onSelectionChange(null);
}

76
src/hooks/useMapTokens.tsx
View File

@ -76,38 +76,56 @@ function useMapTokens(
setTokenDraggingOptions(undefined);
}
function tokenFromTokenState(tokenState: TokenState) {
return (
map && (
<Token
key={tokenState.id}
tokenState={tokenState}
onTokenStateChange={onTokenStateChange}
onTokenMenuOpen={handleTokenMenuOpen}
onTokenMenuClose={handleTokenMenuClose}
onTokenDragStart={handleTokenDragStart}
onTokenDragEnd={handleTokenDragEnd}
draggable={
selectedToolId === "move" &&
!(tokenState.id in disabledTokens) &&
!tokenState.locked
}
selectable={
selectedToolId === "move" &&
((!(tokenState.id in disabledTokens) && !tokenState.locked) ||
map.owner === userId)
}
fadeOnHover={
tokenState.category !== "prop" && selectedToolId === "drawing"
}
map={map}
selected={
!!tokenMenuOptions &&
isTokenMenuOpen &&
tokenMenuOptions.tokenStateId === tokenState.id
}
/>
)
);
}
const tokens = map && mapState && (
<Group id="tokens">
{Object.values(mapState.tokens)
.filter((tokenState) => tokenState.category !== "prop")
.sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
.map((tokenState) => (
<Token
key={tokenState.id}
tokenState={tokenState}
onTokenStateChange={onTokenStateChange}
onTokenMenuOpen={handleTokenMenuOpen}
onTokenMenuClose={handleTokenMenuClose}
onTokenDragStart={handleTokenDragStart}
onTokenDragEnd={handleTokenDragEnd}
draggable={
selectedToolId === "move" &&
!(tokenState.id in disabledTokens) &&
!tokenState.locked
}
selectable={
selectedToolId === "move" &&
((!(tokenState.id in disabledTokens) && !tokenState.locked) ||
map.owner === userId)
}
fadeOnHover={selectedToolId === "drawing"}
map={map}
selected={
!!tokenMenuOptions &&
isTokenMenuOpen &&
tokenMenuOptions.tokenStateId === tokenState.id
}
/>
))}
.map(tokenFromTokenState)}
</Group>
);
const propTokens = map && mapState && (
<Group id="tokens">
{Object.values(mapState.tokens)
.filter((tokenState) => tokenState.category === "prop")
.sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
.map(tokenFromTokenState)}
</Group>
);
@ -135,7 +153,7 @@ function useMapTokens(
/>
);
return { tokens, tokenMenu, tokenDragOverlay };
return { tokens, propTokens, tokenMenu, tokenDragOverlay };
}
export default useMapTokens;