Optimise note creation for FireFox

This commit is contained in:
Mitchell McCaffrey 2021-10-21 16:12:41 +11:00
parent 863f20be95
commit 38d8ca95b3
3 changed files with 66 additions and 28 deletions

View File

@ -0,0 +1,47 @@
import { Rect } from "react-konva";
import {
useMapWidth,
useMapHeight,
} from "../../contexts/MapInteractionContext";
import { useGridCellPixelSize } from "../../contexts/GridContext";
import colors from "../../helpers/colors";
import { Note as NoteType } from "../../types/Note";
type NoteProps = {
note: NoteType;
};
function BlankNote({ note }: NoteProps) {
const mapWidth = useMapWidth();
const mapHeight = useMapHeight();
const gridCellPixelSize = useGridCellPixelSize();
const minCellSize = Math.min(
gridCellPixelSize.width,
gridCellPixelSize.height
);
const noteWidth = minCellSize * note.size;
const noteHeight = noteWidth;
return (
<Rect
x={note.x * mapWidth}
y={note.y * mapHeight}
width={noteWidth}
height={noteHeight}
offsetX={noteWidth / 2}
offsetY={noteHeight / 2}
shadowColor="rgba(0, 0, 0, 0.16)"
shadowOffset={{ x: 3, y: 6 }}
shadowBlur={6}
cornerRadius={0.25}
fill={colors[note.color]}
/>
);
}
export default BlankNote;

View File

@ -16,7 +16,7 @@ import { getRelativePointerPosition } from "../../helpers/konva";
import useGridSnapping from "../../hooks/useGridSnapping";
import Note from "../konva/Note";
import BlankNote from "../konva/BlankNote";
import { Map } from "../../types/Map";
import { Note as NoteType } from "../../types/Note";
@ -32,20 +32,12 @@ type MapNoteProps = {
active: boolean;
onNoteCreate: NoteCreateEventHander;
onNoteMenuOpen: NoteMenuOpenEventHandler;
children: React.ReactNode;
};
function NoteTool({
map,
active,
onNoteCreate,
onNoteMenuOpen,
children,
}: MapNoteProps) {
function NoteTool({ map, active, onNoteCreate, onNoteMenuOpen }: MapNoteProps) {
const interactionEmitter = useInteractionEmitter();
const userId = useUserId();
const mapStageRef = useMapStage();
const [isBrushDown, setIsBrushDown] = useState(false);
const [noteData, setNoteData] = useState<NoteType | null>(null);
const creatingNoteRef = useRef<Konva.Group>(null);
@ -98,7 +90,9 @@ function NoteTool({
textOnly: false,
rotation: 0,
});
setIsBrushDown(true);
if (creatingNoteRef.current) {
creatingNoteRef.current.visible(true);
}
}
function handleBrushMove(props: MapDragEvent) {
@ -120,7 +114,6 @@ function NoteTool({
y: brushPosition.y,
};
});
setIsBrushDown(true);
}
}
@ -131,9 +124,10 @@ function NoteTool({
if (noteData && creatingNoteRef.current) {
onNoteCreate([noteData]);
onNoteMenuOpen(noteData.id, creatingNoteRef.current, true);
// Hide creating note tool here as settings noteData to null
// was causing performance issues in FireFox
creatingNoteRef.current.visible(false);
}
setNoteData(null);
setIsBrushDown(false);
}
interactionEmitter?.on("dragStart", handleBrushDown);
@ -148,13 +142,8 @@ function NoteTool({
});
return (
<Group id="notes">
{children}
<Group ref={creatingNoteRef}>
{isBrushDown && noteData && (
<Note note={noteData} map={map} selected={false} />
)}
</Group>
<Group ref={creatingNoteRef}>
{noteData && <BlankNote note={noteData} />}
</Group>
);
}

View File

@ -1,4 +1,5 @@
import Konva from "konva";
import { Group } from "react-konva";
import { KonvaEventObject } from "konva/lib/Node";
import { useState } from "react";
import { v4 as uuid } from "uuid";
@ -95,12 +96,7 @@ function useMapNotes(
useBlur(handleBlur);
const notes = (
<NoteTool
map={map}
active={selectedToolId === "note"}
onNoteCreate={onNoteCreate}
onNoteMenuOpen={handleNoteMenuOpen}
>
<Group id="notes">
{(mapState
? Object.values(mapState.notes).sort((a, b) =>
sortNotes(a, b, noteDraggingOptions)
@ -129,7 +125,13 @@ function useMapNotes(
}
/>
))}
</NoteTool>
<NoteTool
map={map}
active={selectedToolId === "note"}
onNoteCreate={onNoteCreate}
onNoteMenuOpen={handleNoteMenuOpen}
/>
</Group>
);
const noteMenu = (