Moved notes to be above drawings

This commit is contained in:
Mitchell McCaffrey 2021-01-28 16:26:28 +11:00
parent 2108d32501
commit ff8d7c1547
4 changed files with 21 additions and 4 deletions

View File

@ -411,6 +411,7 @@ function Map({
onNoteDragEnd={() =>
setNoteDraggingOptions({ ...noteDraggingOptions, dragging: false })
}
fadeOnHover={selectedToolId === "drawing"}
/>
);
@ -455,8 +456,8 @@ function Map({
disabledControls={disabledControls}
>
{mapGrid}
{mapNotes}
{mapDrawing}
{mapNotes}
{mapTokens}
{mapFog}
{mapPointer}

View File

@ -10,7 +10,6 @@ import {
getUpdatedShapeData,
getStrokeWidth,
} from "../../helpers/drawing";
import { getRelativePointerPositionNormalized } from "../../helpers/konva";
import * as Vector2 from "../../helpers/vector2";
function MapMeasure({ map, selectedToolSettings, active, gridSize }) {

View File

@ -7,7 +7,6 @@ import MapStageContext from "../../contexts/MapStageContext";
import AuthContext from "../../contexts/AuthContext";
import { getBrushPosition } from "../../helpers/drawing";
import { getRelativePointerPositionNormalized } from "../../helpers/konva";
import Note from "../note/Note";
@ -24,6 +23,7 @@ function MapNotes({
draggable,
onNoteDragStart,
onNoteDragEnd,
fadeOnHover,
}) {
const { interactionEmitter } = useContext(MapInteractionContext);
const { userId } = useContext(AuthContext);
@ -111,6 +111,7 @@ function MapNotes({
onNoteChange={onNoteChange}
onNoteDragStart={onNoteDragStart}
onNoteDragEnd={onNoteDragEnd}
fadeOnHover={fadeOnHover}
/>
))}
<Group ref={creatingNoteRef}>

View File

@ -19,6 +19,7 @@ function Note({
draggable,
onNoteDragStart,
onNoteDragEnd,
fadeOnHover,
}) {
const { userId } = useContext(AuthContext);
const { mapWidth, mapHeight, setPreventMapInteraction } = useContext(
@ -89,6 +90,19 @@ function Note({
}
}
const [noteOpacity, setNoteOpacity] = useState(1);
function handlePointerEnter() {
if (fadeOnHover) {
setNoteOpacity(0.5);
}
}
function handlePointerLeave() {
if (noteOpacity !== 1.0) {
setNoteOpacity(1.0);
}
}
const [fontSize, setFontSize] = useState(1);
useEffect(() => {
const text = textRef.current;
@ -160,7 +174,9 @@ function Note({
onMouseUp={handlePointerUp}
onTouchStart={handlePointerDown}
onTouchEnd={handlePointerUp}
opacity={note.visible ? 1.0 : 0.5}
onMouseEnter={handlePointerEnter}
onMouseLeave={handlePointerLeave}
opacity={note.visible ? noteOpacity : 0.5}
>
{!note.textOnly && (
<Rect