-
);
}
diff --git a/examples/nextjs-comments-canvas/src/components/DraggableThread.tsx b/examples/nextjs-comments-canvas/src/components/DraggableThread.tsx
new file mode 100644
index 0000000000..ba05b93868
--- /dev/null
+++ b/examples/nextjs-comments-canvas/src/components/DraggableThread.tsx
@@ -0,0 +1,62 @@
+import { useMemo } from "react";
+import { useEditThreadMetadata } from "@liveblocks/react/suspense";
+import { FloatingThread, CommentPin } from "@liveblocks/react-ui";
+import { ThreadData } from "@liveblocks/client";
+import { useDraggable } from "@dnd-kit/core";
+import { useMaxZIndex } from "../hooks";
+
+// A draggable thread
+export function DraggableThread({ thread }: { thread: ThreadData }) {
+ // Open threads that have just been created
+ const defaultOpen = useMemo(() => {
+ return Number(new Date()) - Number(new Date(thread.createdAt)) <= 100;
+ }, [thread]);
+
+ // Enable drag
+ const { isDragging, attributes, listeners, setNodeRef, transform } =
+ useDraggable({
+ id: thread.id,
+ data: { thread }, // Pass thread to DndContext drag end event
+ });
+
+ // If currently dragging, add drag values to current metadata
+ const x = transform ? transform.x + thread.metadata.x : thread.metadata.x;
+ const y = transform ? transform.y + thread.metadata.y : thread.metadata.y;
+
+ // Used to set z-index higher than other threads when dragging
+ const editThreadMetadata = useEditThreadMetadata();
+ const maxZIndex = useMaxZIndex();
+
+ return (
+ setOpen(!open)}>
- {creator ? (
- 
- ) : (
-
- )}
-
+
+
+ {threads.map((thread) => (
+
- {open ? (
-
+ editThreadMetadata({
+ threadId: thread.id,
+ metadata: { zIndex: maxZIndex + 1 },
+ })
+ }
+ style={{
+ position: "absolute",
+ top: 0,
+ left: 0,
+ transform: `translate3d(${x}px, ${y}px, 0)`,
+ zIndex: thread.metadata?.zIndex || 0,
+ }}
+ >
+
+
+ {/* Allows you to place floating composers */}
+
@@ -32,23 +36,37 @@ export function Toolbar() {
{/* Overlay that lets you click and cancel placing */}
{
e.preventDefault();
reset();
}}
- data-enabled={state !== "initial" ? true : undefined}
/>
{/* The visible cursor when you're placing */}
{state === "placing" ? (
{
// On click, get coords and place down composer
- const avatarOffset = 42;
- setCoords({ x: e.clientX + avatarOffset, y: e.clientY });
+ setCoords({ x: e.clientX, y: e.clientY });
setState("placed");
}}
onContextMenu={(e) => {
@@ -75,58 +93,32 @@ function ThreadComposer({
coords: { x: number; y: number };
onSubmit: () => void;
}) {
- // Get create thread function and the current user
- const createThread = useCreateThread();
- const creator = useSelf((me) => me.info);
-
+ // Get the current user
+ const creatorId = useSelf((me) => me.id);
// Create thread above other threads
const maxZIndex = useMaxZIndex();
- // Used to flip composer near edge of screen
- const ref = useRef(null);
- const { nearRightEdge, nearBottomEdge } = useNearEdge(ref);
-
return (
-
- {
- e.preventDefault();
- // Create a new thread with the current coords as metadata
- createThread({
- body,
- metadata: {
- x: coords.x,
- y: coords.y,
- zIndex: maxZIndex + 1,
- },
- });
- onSubmit();
+
+
);
}
@@ -155,9 +147,13 @@ function NewThreadCursor() {
}, []);
return (
-
- {creator ? (
-
- ) : (
-
- )}
-
- ) {
- const [nearRightEdge, setNearRightEdge] = useState(false);
- const [nearBottomEdge, setNearBottomEdge] = useState(false);
-
- const updatePosition = useCallback(() => {
- if (ref.current) {
- const rect = ref.current.getBoundingClientRect();
-
- // Within 400px of right side of screen (i.e. too little space for a thread)
- const nearRight = rect.left >= window.innerWidth - 320;
-
- // In bottom half of screen
- const nearBottom = rect.top >= window.innerHeight / 2;
-
- setNearRightEdge(nearRight);
- setNearBottomEdge(nearBottom);
- }
- }, []);
-
- useLayoutEffect(() => {
- updatePosition();
-
- window.addEventListener("scroll", updatePosition);
- window.addEventListener("resize", updatePosition);
- document.addEventListener("mousemove", updatePosition);
-
- return () => {
- window.removeEventListener("scroll", updatePosition);
- window.removeEventListener("resize", updatePosition);
- document.removeEventListener("mousemove", updatePosition);
- };
- }, [ref.current]);
-
- return { nearRightEdge, nearBottomEdge };
-}