feat - Pencil, Zoom in/out (Swipe and Pinch Gestures), Panning, Undo, Redo, Clear canvas, updated UI, cleaner code, new toolbar, custom cursors, stroke color support and more..

apps/excelidraw-frontend/app/canvas/[roomId]/page.tsx

@@ -1,3 +1,4 @@
+
 import { RoomCanvas } from "@/components/RoomCanvas";
 
 export default async function CanvasPage({ params }: {

apps/excelidraw-frontend/app/create-room/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+import { PencilRuler } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import Link from "next/link";
+import axios from "axios";
+import { toast } from "react-toastify";
+export default function SigninPage() {
+    const router = useRouter();
+    const [formData, setFormData] = useState({
+        name: "",
+    });
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { id, value } = e.target;
+        setFormData((prev) => ({ ...prev, [id]: value }));
+    };
+
+    const createRoom = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (formData.name) {
+            try {
+                const data = {
+                    name: formData.name,
+                };
+                const response = await axios.post("/room", data);
+                const roomId = response.data.roomId;
+                toast.success("Room created successfully");
+                router.push("/canvas/"+roomId);
+            } catch (error) {
+                console.log(error);
+                toast.error("Something went wrong");
+            }
+        }
+    };
+    return (
+        <>
+            <div className="bg-gradient-to-t from-indigo-900 to-white via-indigo-300 dark:from-gray-950 dark:to-indigo-900">
+                <div className="absolute top-50 right-50 p-4 cursor-pointer">
+                    <PencilRuler
+                        className="h-8 w-auto text-indigo-600 dark:text-indigo-400"
+                        onClick={() => {
+                            router.push("/");
+                        }}
+                    />
+                </div>
+                <div className="flex min-h-screen items-center justify-center">
+                    <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
+                        <div className="text-center">
+                            <h1 className="text-2xl font-bold text-gray-800">
+                                Create a room and collaborate
+                            </h1>
+                        </div>
+                        <form className="mt-6" onSubmit={createRoom}>
+                            <div className="mb-4">
+                                <label
+                                    htmlFor="name"
+                                    className="block text-sm font-medium text-gray-700"
+                                >
+                                    Please enter your name
+                                </label>
+                                <input
+                                    type="text"
+                                    id="name"
+                                    name="name"
+                                    value={formData.name}
+                                    onChange={handleInputChange}
+                                    className="mt-1 block w-full px-3 py-2 border text-zinc-800 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                                    placeholder="Harkirat"
+                                />
+                            </div>
+                            <div>
+                                <button
+                                    type="submit"
+                                    className="w-full py-2 px-4 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none sm:text-sm font-medium"
+                                >
+                                    Create room
+                                </button>
+                            </div>
+                            <div className="text-center mt-4">
+                                <p className="text-zinc-700">Want to join a room? <a className="underline" href="/join-room">Join room</a></p>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

apps/excelidraw-frontend/app/globals.css

@@ -5,12 +5,12 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 221 83% 53%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
@@ -22,8 +22,13 @@
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 221 83% 53%;
-    --radius: 0.75rem;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
   .dark {
@@ -33,7 +38,7 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 217.2 91.2% 59.8%;
+    --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
@@ -45,6 +50,50 @@
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+
+/* Define custom cursors */
+.cursor-hand {
+  cursor: grab;
+}
+.cursor-pencil {
+  cursor: crosshair;
+}
+.cursor-rect {
+  cursor: crosshair;
+}
+.cursor-circle {
+  cursor: crosshair;
+}
+.cursor-erase {
+  cursor: url('../assets/icons8-eraser-32.png'), auto;
+}
+.cursor-clear {
+  cursor: url('../assets/icons8-clear-40.png'), auto;
+}
+.cursor-point {
+  cursor: url('../assets/icons8-cursor-32.png'), auto;
+}
+.cursor-line {
+  cursor: crosshair;
+}
+.cursor-rhombus {
+  cursor: crosshair;
+}

apps/excelidraw-frontend/app/join-room/page.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { PencilRuler } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "react-toastify";
+export default function SigninPage() {
+    const router = useRouter();
+    const [formData, setFormData] = useState({
+        roomId: "",
+    });
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { id, value } = e.target;
+        setFormData((prev) => ({ ...prev, [id]: value }));
+    };
+
+    const joinRoom = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (formData.roomId) {
+            try {
+                router.push("/canvas/"+formData.roomId);
+                toast.success("Joined the room successfully");
+            } catch (error) {
+                console.log(error);
+                toast.error("Something went wrong");
+            }
+        }
+    };
+    return (
+        <>
+            <div className="bg-gradient-to-t from-indigo-900 to-white via-indigo-300 dark:from-gray-950 dark:to-indigo-900">
+                <div className="absolute top-50 right-50 p-4 cursor-pointer">
+                    <PencilRuler
+                        className="h-8 w-auto text-indigo-600 dark:text-indigo-400"
+                        onClick={() => {
+                            router.push("/");
+                        }}
+                    />
+                </div>
+                <div className="flex min-h-screen items-center justify-center">
+                    <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
+                        <div className="text-center">
+                            <h1 className="text-2xl font-bold text-gray-800">
+                                Join a room and collaborate
+                            </h1>
+                        </div>
+                        <div className="text-center mt-1">
+                            <p className="text-sm text-gray-500 font-light">(Ask your friend to share the room ID)</p>
+                        </div>
+                        <form className="mt-6" onSubmit={joinRoom}>
+                            <div className="mb-4">
+                                <label
+                                    htmlFor="roomId"
+                                    className="block text-md font-medium text-gray-700"
+                                >
+                                    Enter room ID
+                                </label>
+                                <input
+                                    type="text"
+                                    id="roomId"
+                                    name="roomId"
+                                    value={formData.roomId}
+                                    onChange={handleInputChange}
+                                    className="mt-1 block w-full px-3 py-2 border text-zinc-800 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                                    placeholder="1234"
+                                />
+                            </div>
+                            <div>
+                                <button
+                                    type="submit"
+                                    className="w-full py-2 px-4 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none sm:text-sm font-medium"
+                                >
+                                    Join room
+                                </button>
+                            </div>
+                            <div className="text-center mt-4">
+                                <p className="text-zinc-700">Want to create a room? <a className="underline" href="/create-room">Create room</a></p>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}

apps/excelidraw-frontend/app/layout.tsx

@@ -1,5 +1,9 @@
+"use client";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ToastContainer } from "react-toastify";
+import { Provider } from "react-redux";
+import store from "@repo/store/store";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -12,10 +16,10 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+// export const metadata: Metadata = {
+//   title: "Excalidraw",
+//   description: "Draw, collaborate and chat with your team in real-time",
+// };
 
 export default function RootLayout({
   children,
@@ -27,7 +31,22 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <Provider store={store}>
+          <ToastContainer
+            position="top-right"
+            autoClose={3000}
+            hideProgressBar={false}
+            newestOnTop={true}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            theme="system"
+            limit={5}
+          />
+          {children}
+        </Provider>
       </body>
     </html>
   );