Add custom SVG cursors and update cursor handling
- Introduced new SVG cursor assets: cross, default, export, move, open, pen, and pointing. - Implemented SCSS styles for cursor usage in the scene container, defining specific cursors for different modes (draw, pointer, pen, measure, hand). - Enhanced cursor functionality by adding a utility function to handle canvas cursor changes based on user actions, mapping specific actions to corresponding cursor styles.
This commit is contained in:
@@ -1,17 +1,14 @@
|
||||
import React, { useEffect } from "react";
|
||||
import useModuleStore from "../store/useModuleStore";
|
||||
import {
|
||||
useSocketStore,
|
||||
useOrganization,
|
||||
useUserName,
|
||||
useWallItems,
|
||||
useSaveVersion,
|
||||
useViewSceneStore,
|
||||
useProjectName,
|
||||
useRenameModeStore,
|
||||
useSelectedFloorItem,
|
||||
useZones,
|
||||
useSelectedComment,
|
||||
useSocketStore,
|
||||
useOrganization,
|
||||
useUserName,
|
||||
useWallItems,
|
||||
useSaveVersion,
|
||||
useProjectName,
|
||||
useZones,
|
||||
useActiveTool,
|
||||
} from "../store/builder/store";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useSelectedUserStore } from "../store/collaboration/useCollabStore";
|
||||
@@ -30,125 +27,136 @@ import { getVersionHistoryApi } from "../services/factoryBuilder/versionControl/
|
||||
import { useVersionHistoryStore } from "../store/builder/useVersionHistoryStore";
|
||||
import { VersionProvider } from "../modules/builder/version/versionContext";
|
||||
import { sharedWithMeProjects } from "../services/dashboard/sharedWithMeProject";
|
||||
import { handleCanvasCursors } from "../utils/handleCanvasCursors";
|
||||
|
||||
const Project: React.FC = () => {
|
||||
let navigate = useNavigate();
|
||||
const echo = useLogger();
|
||||
const { setToggleUI } = useToggleStore();
|
||||
const { setActiveModule } = useModuleStore();
|
||||
const { setUserName } = useUserName();
|
||||
const { setOrganization } = useOrganization();
|
||||
const { setWallItems } = useWallItems();
|
||||
const { setZones } = useZones();
|
||||
const { isVersionSaved } = useSaveVersion();
|
||||
const { projectId } = useParams();
|
||||
const { setProjectName } = useProjectName();
|
||||
const { userId, email, organization, userName } = getUserData();
|
||||
const { selectedUser } = useSelectedUserStore();
|
||||
const { isLogListVisible } = useLogger();
|
||||
const { setVersions } = useVersionHistoryStore();
|
||||
let navigate = useNavigate();
|
||||
const echo = useLogger();
|
||||
const { setToggleUI } = useToggleStore();
|
||||
const { setActiveModule } = useModuleStore();
|
||||
const { setUserName } = useUserName();
|
||||
const { setOrganization } = useOrganization();
|
||||
const { setWallItems } = useWallItems();
|
||||
const { setZones } = useZones();
|
||||
const { isVersionSaved } = useSaveVersion();
|
||||
const { projectId } = useParams();
|
||||
const { setProjectName } = useProjectName();
|
||||
const { userId, email, organization, userName } = getUserData();
|
||||
const { selectedUser } = useSelectedUserStore();
|
||||
const { isLogListVisible } = useLogger();
|
||||
const { setVersions } = useVersionHistoryStore();
|
||||
const { activeTool } = useActiveTool();
|
||||
|
||||
useEffect(() => {
|
||||
if (!email || !userId) {
|
||||
console.error("User data not found in localStorage");
|
||||
return;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!email || !userId) {
|
||||
console.error("User data not found in localStorage");
|
||||
return;
|
||||
}
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
const projects = await getAllProjects(userId, organization);
|
||||
const shared = await sharedWithMeProjects();
|
||||
|
||||
const fetchProjects = async () => {
|
||||
try {
|
||||
const projects = await getAllProjects(userId, organization);
|
||||
const shared = await sharedWithMeProjects();
|
||||
const allProjects = [...(projects?.Projects || []), ...(shared || [])];
|
||||
|
||||
const allProjects = [...(projects?.Projects || []), ...(shared || [])];
|
||||
const matchedProject = allProjects.find(
|
||||
(val: any) => val.projectUuid === projectId || val._id === projectId
|
||||
);
|
||||
|
||||
const matchedProject = allProjects.find(
|
||||
(val: any) => val.projectUuid === projectId || val._id === projectId
|
||||
);
|
||||
if (matchedProject) {
|
||||
setProjectName(matchedProject.projectName);
|
||||
await viewProject(organization, matchedProject._id, userId);
|
||||
} else {
|
||||
console.warn("Project not found with given ID:", projectId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching projects:", error);
|
||||
}
|
||||
};
|
||||
|
||||
if (matchedProject) {
|
||||
setProjectName(matchedProject.projectName);
|
||||
await viewProject(organization, matchedProject._id, userId);
|
||||
} else {
|
||||
console.warn("Project not found with given ID:", projectId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching projects:", error);
|
||||
}
|
||||
};
|
||||
fetchProjects();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
fetchProjects();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
if (!projectId) return;
|
||||
getVersionHistoryApi(projectId)
|
||||
.then((data) => {
|
||||
const versions: VersionHistory = [];
|
||||
data.versions.forEach((version: any) => {
|
||||
versions.push({
|
||||
version: version.version,
|
||||
versionId: version.versionId,
|
||||
versionName: version.versionName,
|
||||
versionDescription: version.description,
|
||||
timeStamp: version.createdAt,
|
||||
createdBy: version.createdBy.userName,
|
||||
});
|
||||
});
|
||||
setVersions(versions);
|
||||
})
|
||||
.catch(() => {
|
||||
console.error("Error fetching version history");
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [projectId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVersionSaved) {
|
||||
setToggleUI(true, true);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isVersionSaved]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!projectId) return;
|
||||
getVersionHistoryApi(projectId).then((data) => {
|
||||
const versions: VersionHistory = [];
|
||||
data.versions.forEach((version: any) => {
|
||||
versions.push({
|
||||
version: version.version,
|
||||
versionId: version.versionId,
|
||||
versionName: version.versionName,
|
||||
versionDescription: version.description,
|
||||
timeStamp: version.createdAt,
|
||||
createdBy: version.createdBy.userName
|
||||
})
|
||||
})
|
||||
setVersions(versions);
|
||||
}).catch(() => {
|
||||
console.error("Error fetching version history")
|
||||
})
|
||||
}, [projectId])
|
||||
useEffect(() => {
|
||||
setWallItems([]);
|
||||
setZones([]);
|
||||
setActiveModule("builder");
|
||||
if (email) {
|
||||
const token = localStorage.getItem("token");
|
||||
const refreshToken = localStorage.getItem("refreshToken");
|
||||
if (token) {
|
||||
useSocketStore
|
||||
.getState()
|
||||
.initializeSocket(email, organization, token, refreshToken);
|
||||
}
|
||||
if (organization && userName) {
|
||||
setOrganization(organization);
|
||||
setUserName(userName);
|
||||
}
|
||||
echo.success("Log in successful");
|
||||
} else {
|
||||
navigate("/");
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVersionSaved) {
|
||||
setToggleUI(true, true);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isVersionSaved]);
|
||||
useEffect(() => {
|
||||
handleCanvasCursors(activeTool);
|
||||
console.log('activeTool: ', activeTool);
|
||||
}, [activeTool]);
|
||||
|
||||
useEffect(() => {
|
||||
setWallItems([]);
|
||||
setZones([]);
|
||||
setActiveModule("builder");
|
||||
if (email) {
|
||||
const token = localStorage.getItem("token");
|
||||
const refreshToken = localStorage.getItem("refreshToken")
|
||||
if (token) {
|
||||
useSocketStore.getState().initializeSocket(email, organization, token, refreshToken);
|
||||
}
|
||||
if (organization && userName) {
|
||||
setOrganization(organization);
|
||||
setUserName(userName);
|
||||
}
|
||||
echo.success("Log in successful");
|
||||
} else {
|
||||
navigate("/");
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="project-main">
|
||||
<SceneProvider layout="Main Layout">
|
||||
<VersionProvider>
|
||||
<MainSceneProvider />
|
||||
</VersionProvider>
|
||||
</SceneProvider>
|
||||
<SceneProvider layout="Comparison Layout">
|
||||
<VersionProvider>
|
||||
<ComparisonSceneProvider />
|
||||
</VersionProvider>
|
||||
</SceneProvider>
|
||||
{selectedUser && <FollowPerson />}
|
||||
{isLogListVisible && (
|
||||
<RenderOverlay>
|
||||
<LogList />
|
||||
</RenderOverlay>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="project-main">
|
||||
<SceneProvider layout="Main Layout">
|
||||
<VersionProvider>
|
||||
<MainSceneProvider />
|
||||
</VersionProvider>
|
||||
</SceneProvider>
|
||||
<SceneProvider layout="Comparison Layout">
|
||||
<VersionProvider>
|
||||
<ComparisonSceneProvider />
|
||||
</VersionProvider>
|
||||
</SceneProvider>
|
||||
{selectedUser && <FollowPerson />}
|
||||
{isLogListVisible && (
|
||||
<RenderOverlay>
|
||||
<LogList />
|
||||
</RenderOverlay>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Project;
|
||||
|
||||
Reference in New Issue
Block a user