Optimise note creation for FireFox
This commit is contained in:
parent
863f20be95
commit
38d8ca95b3
47
src/components/konva/BlankNote.tsx
Normal file
47
src/components/konva/BlankNote.tsx
Normal 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;
|
@ -16,7 +16,7 @@ import { getRelativePointerPosition } from "../../helpers/konva";
|
|||||||
|
|
||||||
import useGridSnapping from "../../hooks/useGridSnapping";
|
import useGridSnapping from "../../hooks/useGridSnapping";
|
||||||
|
|
||||||
import Note from "../konva/Note";
|
import BlankNote from "../konva/BlankNote";
|
||||||
|
|
||||||
import { Map } from "../../types/Map";
|
import { Map } from "../../types/Map";
|
||||||
import { Note as NoteType } from "../../types/Note";
|
import { Note as NoteType } from "../../types/Note";
|
||||||
@ -32,20 +32,12 @@ type MapNoteProps = {
|
|||||||
active: boolean;
|
active: boolean;
|
||||||
onNoteCreate: NoteCreateEventHander;
|
onNoteCreate: NoteCreateEventHander;
|
||||||
onNoteMenuOpen: NoteMenuOpenEventHandler;
|
onNoteMenuOpen: NoteMenuOpenEventHandler;
|
||||||
children: React.ReactNode;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
function NoteTool({
|
function NoteTool({ map, active, onNoteCreate, onNoteMenuOpen }: MapNoteProps) {
|
||||||
map,
|
|
||||||
active,
|
|
||||||
onNoteCreate,
|
|
||||||
onNoteMenuOpen,
|
|
||||||
children,
|
|
||||||
}: MapNoteProps) {
|
|
||||||
const interactionEmitter = useInteractionEmitter();
|
const interactionEmitter = useInteractionEmitter();
|
||||||
const userId = useUserId();
|
const userId = useUserId();
|
||||||
const mapStageRef = useMapStage();
|
const mapStageRef = useMapStage();
|
||||||
const [isBrushDown, setIsBrushDown] = useState(false);
|
|
||||||
const [noteData, setNoteData] = useState<NoteType | null>(null);
|
const [noteData, setNoteData] = useState<NoteType | null>(null);
|
||||||
|
|
||||||
const creatingNoteRef = useRef<Konva.Group>(null);
|
const creatingNoteRef = useRef<Konva.Group>(null);
|
||||||
@ -98,7 +90,9 @@ function NoteTool({
|
|||||||
textOnly: false,
|
textOnly: false,
|
||||||
rotation: 0,
|
rotation: 0,
|
||||||
});
|
});
|
||||||
setIsBrushDown(true);
|
if (creatingNoteRef.current) {
|
||||||
|
creatingNoteRef.current.visible(true);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleBrushMove(props: MapDragEvent) {
|
function handleBrushMove(props: MapDragEvent) {
|
||||||
@ -120,7 +114,6 @@ function NoteTool({
|
|||||||
y: brushPosition.y,
|
y: brushPosition.y,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
setIsBrushDown(true);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -131,9 +124,10 @@ function NoteTool({
|
|||||||
if (noteData && creatingNoteRef.current) {
|
if (noteData && creatingNoteRef.current) {
|
||||||
onNoteCreate([noteData]);
|
onNoteCreate([noteData]);
|
||||||
onNoteMenuOpen(noteData.id, creatingNoteRef.current, true);
|
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);
|
interactionEmitter?.on("dragStart", handleBrushDown);
|
||||||
@ -148,13 +142,8 @@ function NoteTool({
|
|||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Group id="notes">
|
|
||||||
{children}
|
|
||||||
<Group ref={creatingNoteRef}>
|
<Group ref={creatingNoteRef}>
|
||||||
{isBrushDown && noteData && (
|
{noteData && <BlankNote note={noteData} />}
|
||||||
<Note note={noteData} map={map} selected={false} />
|
|
||||||
)}
|
|
||||||
</Group>
|
|
||||||
</Group>
|
</Group>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import Konva from "konva";
|
import Konva from "konva";
|
||||||
|
import { Group } from "react-konva";
|
||||||
import { KonvaEventObject } from "konva/lib/Node";
|
import { KonvaEventObject } from "konva/lib/Node";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { v4 as uuid } from "uuid";
|
import { v4 as uuid } from "uuid";
|
||||||
@ -95,12 +96,7 @@ function useMapNotes(
|
|||||||
useBlur(handleBlur);
|
useBlur(handleBlur);
|
||||||
|
|
||||||
const notes = (
|
const notes = (
|
||||||
<NoteTool
|
<Group id="notes">
|
||||||
map={map}
|
|
||||||
active={selectedToolId === "note"}
|
|
||||||
onNoteCreate={onNoteCreate}
|
|
||||||
onNoteMenuOpen={handleNoteMenuOpen}
|
|
||||||
>
|
|
||||||
{(mapState
|
{(mapState
|
||||||
? Object.values(mapState.notes).sort((a, b) =>
|
? Object.values(mapState.notes).sort((a, b) =>
|
||||||
sortNotes(a, b, noteDraggingOptions)
|
sortNotes(a, b, noteDraggingOptions)
|
||||||
@ -129,7 +125,13 @@ function useMapNotes(
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</NoteTool>
|
<NoteTool
|
||||||
|
map={map}
|
||||||
|
active={selectedToolId === "note"}
|
||||||
|
onNoteCreate={onNoteCreate}
|
||||||
|
onNoteMenuOpen={handleNoteMenuOpen}
|
||||||
|
/>
|
||||||
|
</Group>
|
||||||
);
|
);
|
||||||
|
|
||||||
const noteMenu = (
|
const noteMenu = (
|
||||||
|
Loading…
Reference in New Issue
Block a user