Added animation and visibility to notes
This commit is contained in:
parent
5fd3f6d814
commit
9790d4e44f
@ -1,11 +1,13 @@
|
|||||||
import React, { useContext, useEffect, useState, useRef } from "react";
|
import React, { useContext, useEffect, useState, useRef } from "react";
|
||||||
import { Group, Rect, Text } from "react-konva";
|
import { Rect, Text } from "react-konva";
|
||||||
|
import { useSpring, animated } from "react-spring/konva";
|
||||||
|
|
||||||
import AuthContext from "../../contexts/AuthContext";
|
import AuthContext from "../../contexts/AuthContext";
|
||||||
import MapInteractionContext from "../../contexts/MapInteractionContext";
|
import MapInteractionContext from "../../contexts/MapInteractionContext";
|
||||||
|
|
||||||
import * as Vector2 from "../../helpers/vector2";
|
import * as Vector2 from "../../helpers/vector2";
|
||||||
import colors from "../../helpers/colors";
|
import colors from "../../helpers/colors";
|
||||||
|
import usePrevious from "../../helpers/usePrevious";
|
||||||
|
|
||||||
const snappingThreshold = 1 / 5;
|
const snappingThreshold = 1 / 5;
|
||||||
const textPadding = 4;
|
const textPadding = 4;
|
||||||
@ -103,6 +105,11 @@ function Note({
|
|||||||
const [fontSize, setFontSize] = useState(1);
|
const [fontSize, setFontSize] = useState(1);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const text = textRef.current;
|
const text = textRef.current;
|
||||||
|
|
||||||
|
if (!text) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
function findFontSize() {
|
function findFontSize() {
|
||||||
// Create an array from 4 to 18 scaled to the note size
|
// Create an array from 4 to 18 scaled to the note size
|
||||||
const sizes = Array.from(
|
const sizes = Array.from(
|
||||||
@ -120,18 +127,34 @@ function Note({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
setFontSize(findFontSize());
|
setFontSize(findFontSize());
|
||||||
}, [note, noteWidth]);
|
}, [note, noteWidth]);
|
||||||
|
|
||||||
const textRef = useRef();
|
const textRef = useRef();
|
||||||
|
|
||||||
|
// Animate to new note positions if edited by others
|
||||||
|
const noteX = note.x * mapWidth;
|
||||||
|
const noteY = note.y * mapHeight;
|
||||||
|
const previousWidth = usePrevious(mapWidth);
|
||||||
|
const previousHeight = usePrevious(mapHeight);
|
||||||
|
const resized = mapWidth !== previousWidth || mapHeight !== previousHeight;
|
||||||
|
const skipAnimation = note.lastModifiedBy === userId || resized;
|
||||||
|
const props = useSpring({
|
||||||
|
x: noteX,
|
||||||
|
y: noteY,
|
||||||
|
immediate: skipAnimation,
|
||||||
|
});
|
||||||
|
|
||||||
|
// When a note is hidden if you aren't the map owner hide it completely
|
||||||
|
if (map && !note.visible && map.owner !== userId) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Group
|
<animated.Group
|
||||||
|
{...props}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
onTap={handleClick}
|
onTap={handleClick}
|
||||||
x={note.x * mapWidth}
|
|
||||||
y={note.y * mapHeight}
|
|
||||||
width={noteWidth}
|
width={noteWidth}
|
||||||
height={noteHeight}
|
height={noteHeight}
|
||||||
offsetX={noteWidth / 2}
|
offsetX={noteWidth / 2}
|
||||||
@ -144,6 +167,7 @@ function Note({
|
|||||||
onMouseUp={handlePointerUp}
|
onMouseUp={handlePointerUp}
|
||||||
onTouchStart={handlePointerDown}
|
onTouchStart={handlePointerDown}
|
||||||
onTouchEnd={handlePointerUp}
|
onTouchEnd={handlePointerUp}
|
||||||
|
opacity={note.visible ? 1.0 : 0.5}
|
||||||
>
|
>
|
||||||
<Rect
|
<Rect
|
||||||
width={noteWidth}
|
width={noteWidth}
|
||||||
@ -172,7 +196,7 @@ function Note({
|
|||||||
/>
|
/>
|
||||||
{/* Use an invisible text block to work out text sizing */}
|
{/* Use an invisible text block to work out text sizing */}
|
||||||
<Text visible={false} ref={textRef} text={note.text} wrap="none" />
|
<Text visible={false} ref={textRef} text={note.text} wrap="none" />
|
||||||
</Group>
|
</animated.Group>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user