adrianhajdin / figma_clone

Figma Clone using Next.js, Fabric.js and Liveblocks in TypeScript

figma_clone's Issues

Am getting this error while working on canvas "YouTube timestamp: 1:56:31/ 4:04:52 "

./node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

License

Hi,
Thank you so much for releasing this code! Would you mind adding a license (ie MIT/ISC/Apache)?
Thanks!

Image Is not showing if we open 2 window side by side

websocket error

please help @adrianhajdin

Hydration ERROR please help

I am getting hydration error please someone help

Regarding font

The Brush Script MT font is now applying on the text when fonts are changed I don't know if it is an internal issue or a system issue but I am facing it if anyone has any solution please help.

Batch callback error when implementing the Comments Bubble

I get this error when trying to see the result of the Comments Bubble feature.

But when I comment out this block of code from CommentsOverlay.tsx the error goes away. which means the error is most likely coming from somewhere in OverlayThread component. Any tips on how to fix this error will be greatly appreciated.

{threads
.filter((thread) => !thread.metadata.resolved)
.map((thread) => (
<OverlayThread
key={thread.id}
thread={thread}
maxZIndex={maxZIndex}
/>
))}

cursor issue

when ever i am clicking comment button ( / ) or reacting with emojis it is taking some gap from my cursor
how to solve this ?

createRoomContext is not a function

I'm getting this error -

my liveblocks.config.ts code -

import { LiveMap, createClient } from '@liveblocks/client';
import { createRoomContext } from '@liveblocks/react';

const client = createClient({
  throttle: 16,
  publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!,
});

// Presence represents the properties that exist on every user in the Room
// and that will automatically be kept in sync. Accessible through the
// `user.presence` property. Must be JSON-serializable.
type Presence = {
  // cursor: { x: number, y: number } | null,
  // ...
};

// Optionally, Storage represents the shared document that persists in the
// Room, even after all users leave. Fields under Storage typically are
// LiveList, LiveMap, LiveObject instances, for which updates are
// automatically persisted and synced to all connected clients.
type Storage = {
  // author: LiveObject<{ firstName: string, lastName: string }>,
  // ...
  canvasObjects: LiveMap<string, any>;
};

// Optionally, UserMeta represents static/readonly metadata on each user, as
// provided by your own custom auth back end (if used). Useful for data that
// will not change during a session, like a user's name or avatar.
type UserMeta = {
  // id?: string,  // Accessible through `user.id`
  // info?: Json,  // Accessible through `user.info`
};

// Optionally, the type of custom events broadcast and listened to in this
// room. Use a union for multiple events. Must be JSON-serializable.
type RoomEvent = {
  // type: "NOTIFICATION",
  // ...
};

// Optionally, when using Comments, ThreadMetadata represents metadata on
// each thread. Can only contain booleans, strings, and numbers.
export type ThreadMetadata = {
  resolved: boolean;
  zIndex: number;
  time?: number;
  x: number;
  y: number;
};

export const {
  suspense: {
    RoomProvider,
    useRoom,
    useMyPresence,
    useUpdateMyPresence,
    useSelf,
    useOthers,
    useOthersMapped,
    useOthersConnectionIds,
    useOther,
    useBroadcastEvent,
    useEventListener,
    useErrorListener,
    useStorage,
    useObject,
    useMap,
    useList,
    useBatch,
    useHistory,
    useUndo,
    useRedo,
    useCanUndo,
    useCanRedo,
    useMutation,
    useStatus,
    useLostConnectionListener,
    useThreads,
    useUser,
    useCreateThread,
    useEditThreadMetadata,
    useCreateComment,
    useEditComment,
    useDeleteComment,
    useAddReaction,
    useRemoveReaction,
  },
} = createRoomContext<Presence, Storage, UserMeta, RoomEvent, ThreadMetadata>(
  client,
  {
    async resolveUsers({ userIds }) {
      // Used only for Comments. Return a list of user information retrieved
      // from `userIds`. This info is used in comments, mentions etc.

      // const usersData = await __fetchUsersFromDB__(userIds);
      //
      // return usersData.map((userData) => ({
      //   name: userData.name,
      //   avatar: userData.avatar.src,
      // }));

      return [];
    },
    async resolveMentionSuggestions({ text, roomId }) {
      // Used only for Comments. Return a list of userIds that match `text`.
      // These userIds are used to create a mention list when typing in the
      // composer.
      //
      // For example when you type "@jo", `text` will be `"jo"`, and
      // you should to return an array with John and Joanna's userIds:
      // ["[email protected]", "[email protected]"]

      // const userIds = await __fetchAllUserIdsFromDB__(roomId);
      //
      // Return all userIds if no `text`
      // if (!text) {
      //   return userIds;
      // }
      //
      // Otherwise, filter userIds for the search `text` and return
      // return userIds.filter((userId) =>
      //   userId.toLowerCase().includes(text.toLowerCase())
      // );

      return [];
    },
  }
);

my repo - https://github.com/rafiqulshopon/figma-clone

@adrianhajdin Could you please help me to solve this issue.

Canvas error

It is showing no errors in console and everything seems fine in the code , but when i am clicking on the canvas the shapes are not appearing. PLZ HELP
in your video the process starts from 1:56:30
i guess from there is some error in my code

Module parse failed: /canvas/build/Release/canvas.node Unexpected character '�'

how i solve this .

Context menu not opening on right click

dimension error

how to solve this errors ?
plz help @adrianhajdin

Got this Error unexpectedly.

And this is my liveblocks.config.ts file:

import { LiveMap, createClient } from "@liveblocks/client";
import { createRoomContext } from "@liveblocks/react";

const client = createClient({
throttle: 16,
publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!,
});

// Presence represents the properties that exist on every user in the Room
// and that will automatically be kept in sync. Accessible through the
// user.presence property. Must be JSON-serializable.
type Presence = {
// cursor: { x: number, y: number } | null,
// ...
};

// Optionally, Storage represents the shared document that persists in the
// Room, even after all users leave. Fields under Storage typically are
// LiveList, LiveMap, LiveObject instances, for which updates are
// automatically persisted and synced to all connected clients.
type Storage = {
// author: LiveObject<{ firstName: string, lastName: string }>,
// ...
canvasObjects: LiveMap<string, any>;
};

// Optionally, UserMeta represents static/readonly metadata on each user, as
// provided by your own custom auth back end (if used). Useful for data that
// will not change during a session, like a user's name or avatar.
type UserMeta = {
// id?: string, // Accessible through user.id
// info?: Json, // Accessible through user.info
};

// Optionally, the type of custom events broadcast and listened to in this
// room. Use a union for multiple events. Must be JSON-serializable.
type RoomEvent = {
// type: "NOTIFICATION",
// ...
};

// Optionally, when using Comments, ThreadMetadata represents metadata on
// each thread. Can only contain booleans, strings, and numbers.
export type ThreadMetadata = {
resolved: boolean;
zIndex: number;
time?: number;
x: number;
y: number;
};

export const {
suspense: {
RoomProvider,
useRoom,
useMyPresence,
useUpdateMyPresence,
useSelf,
useOthers,
useOthersMapped,
useOthersConnectionIds,
useOther,
useBroadcastEvent,
useEventListener,
useErrorListener,
useStorage,
useObject,
useMap,
useList,
useBatch,
useHistory,
useUndo,
useRedo,
useCanUndo,
useCanRedo,
useMutation,
useStatus,
useLostConnectionListener,
useThreads,
useUser,
useCreateThread,
useEditThreadMetadata,
useCreateComment,
useEditComment,
useDeleteComment,
useAddReaction,
useRemoveReaction,
},
} = createRoomContext<Presence, Storage, UserMeta, RoomEvent, ThreadMetadata>(
client,
{
async resolveUsers({ userIds }) {
// Used only for Comments. Return a list of user information retrieved
// from userIds. This info is used in comments, mentions etc.

  // const usersData = await __fetchUsersFromDB__(userIds);
  //
  // return usersData.map((userData) => ({
  //   name: userData.name,
  //   avatar: userData.avatar.src,
  // }));

  return [];
},
async resolveMentionSuggestions({ text, roomId }) {
  // Used only for Comments. Return a list of userIds that match `text`.
  // These userIds are used to create a mention list when typing in the
  // composer.
  //
  // For example when you type "@jo", `text` will be `"jo"`, and
  // you should to return an array with John and Joanna's userIds:
  // ["[email protected]", "[email protected]"]

  // const userIds = await __fetchAllUserIdsFromDB__(roomId);
  //
  // Return all userIds if no `text`
  // if (!text) {
  //   return userIds;
  // }
  //
  // Otherwise, filter userIds for the search `text` and return
  // return userIds.filter((userId) =>
  //   userId.toLowerCase().includes(text.toLowerCase())
  // );

  return [];
},

}
);

Please help !!! @adrianhajdin

im getting a few errors when deploying on github

Invalid next.config.js options detected:
⚠ Unrecognized key(s) in object: 'images' at "experimental"

Failed to compile.

./node_modules/canvas/build/Release/canvas.node

Import trace for requested module:
./node_modules/canvas/build/Release/canvas.node
./node_modules/canvas/lib/bindings.js
./node_modules/canvas/index.js
./node_modules/jsdom/lib/jsdom/utils.js
./node_modules/fabric/dist/fabric.js
./lib/canvas.ts
./app/App.tsx

Build failed because of webpack errors

even after updating the next.config.mjs and adding environment variable... please help!