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

Fix erase of drawing and fog with a short click

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-11-20 09:24:28 +11:00
parent b214b939df
commit f48a39c3ad
2 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/map/MapDrawing.js
View File

@ -137,10 +137,7 @@ function MapDrawing({
onShapeAdd(drawingShape);
}
if (erasingShapes.length > 0) {
onShapesRemove(erasingShapes.map((shape) => shape.id));
setErasingShapes([]);
}
eraseHoveredShapes();
setDrawingShape(null);
setIsBrushDown(false);
@ -165,6 +162,13 @@ function MapDrawing({
}
}
function eraseHoveredShapes() {
if (erasingShapes.length > 0) {
onShapesRemove(erasingShapes.map((shape) => shape.id));
setErasingShapes([]);
}
}
function renderShape(shape) {
const defaultProps = {
key: shape.id,
@ -172,6 +176,8 @@ function MapDrawing({
onTouchOver: () => handleShapeOver(shape, isBrushDown),
onMouseDown: () => handleShapeOver(shape, true),
onTouchStart: () => handleShapeOver(shape, true),
onMouseUp: eraseHoveredShapes,
onTouchEnd: eraseHoveredShapes,
fill: colors[shape.color] || shape.color,
opacity: shape.blend ? 0.5 : 1,
id: shape.id,

34
src/components/map/MapFog.js
View File

@ -144,20 +144,7 @@ function MapFog({
setDrawingShape(null);
}
// Erase
if (editingShapes.length > 0) {
if (toolSettings.type === "remove") {
onShapesRemove(editingShapes.map((shape) => shape.id));
} else if (toolSettings.type === "toggle") {
onShapesEdit(
editingShapes.map((shape) => ({
...shape,
visible: !shape.visible,
}))
);
}
setEditingShapes([]);
}
eraseHoveredShapes();
setIsBrushDown(false);
}
@ -281,6 +268,23 @@ function MapFog({
useKeyboard(handleKeyDown, handleKeyUp);
function eraseHoveredShapes() {
// Erase
if (editingShapes.length > 0) {
if (toolSettings.type === "remove") {
onShapesRemove(editingShapes.map((shape) => shape.id));
} else if (toolSettings.type === "toggle") {
onShapesEdit(
editingShapes.map((shape) => ({
...shape,
visible: !shape.visible,
}))
);
}
setEditingShapes([]);
}
}
function handleShapeOver(shape, isDown) {
if (shouldHover && isDown) {
if (editingShapes.findIndex((s) => s.id === shape.id) === -1) {
@ -305,6 +309,8 @@ function MapFog({
onTouchOver={() => handleShapeOver(shape, isBrushDown)}
onMouseDown={() => handleShapeOver(shape, true)}
onTouchStart={() => handleShapeOver(shape, true)}
onMouseUp={eraseHoveredShapes}
onTouchEnd={eraseHoveredShapes}
points={points}
stroke={colors[shape.color] || shape.color}
fill={colors[shape.color] || shape.color}