From f3e65fd6fbc52814a4900520d0f55206f09d8b19 Mon Sep 17 00:00:00 2001 From: Patrik Opacic Date: Wed, 3 Apr 2024 21:10:32 +0200 Subject: [PATCH] - introduce the control panel buttons floating below the world view - change right panel & full-screen mode's background to black with 50% or so opacity - map viewport change to fit circles currently displayed as user clicks on tabs #73 --- circles/functions/index.js | 46 +++++++---- circles/src/components/Circle.jsx | 80 +++++++++++++++++-- circles/src/components/CircleAbout.jsx | 3 +- circles/src/components/CircleChat.jsx | 5 +- circles/src/components/CircleDashboard.jsx | 23 ++++-- circles/src/components/CircleElements.jsx | 4 +- .../src/components/CircleExtrasAndMain.jsx | 9 ++- circles/src/components/CircleHomeFeed.jsx | 9 ++- circles/src/components/CircleMap.jsx | 71 +++++++++++++--- circles/src/components/CirclePreview.jsx | 2 +- circles/src/components/Circles.jsx | 26 +++--- circles/src/components/Constants.js | 3 + circles/src/components/Home.jsx | 2 +- circles/src/components/NavigationPanel.jsx | 2 +- circles/src/components/NewCircleGuide.jsx | 4 +- circles/src/components/Notifications.jsx | 4 +- circles/src/components/ProfileMenu.jsx | 8 +- circles/src/components/TopMenu.jsx | 4 +- circles/src/components/UserDashboard.jsx | 2 +- 19 files changed, 236 insertions(+), 71 deletions(-) diff --git a/circles/functions/index.js b/circles/functions/index.js index 6825356..6f4062c 100644 --- a/circles/functions/index.js +++ b/circles/functions/index.js @@ -1379,15 +1379,12 @@ const setUserSeen = async (userId, circleId, category) => { ); }; -const updateMapViewport = async (circleId) => { - const circle = await getCircle(circleId); - if (!circle) return; - +const updateMapViewportForType = async (circle, circleId, type) => { // get all circles with this parent circle const circles = await db .collection("circles") .where("parent_circle.id", "==", circleId) - .where("type", "==", "circle") + .where("type", "==", type) .get(); // get all locations @@ -1402,7 +1399,7 @@ const updateMapViewport = async (circleId) => { } }); - if (locations.length <= 0) return; + if (locations.length <= 0) return false; // calculate map location center let mapCenter = calculateMapCenter(locations); @@ -1419,8 +1416,23 @@ const updateMapViewport = async (circleId) => { bounds: mapBounds, }; + return calculated_map_viewport; +}; + +const updateMapViewport = async (circleId) => { + const circle = await getCircle(circleId); + if (!circle) return; + + // update viewport for all types + let calculated_map_viewports = {}; + calculated_map_viewports["circle"] = await updateMapViewportForType(circle, circleId, "circle"); + calculated_map_viewports["post"] = await updateMapViewportForType(circle, circleId, "post"); + calculated_map_viewports["event"] = await updateMapViewportForType(circle, circleId, "event"); + calculated_map_viewports["project"] = await updateMapViewportForType(circle, circleId, "project"); + calculated_map_viewports["user"] = await updateMapViewportForType(circle, circleId, "user"); + // update circle - await updateCircle(circleId, { calculated_map_viewport: calculated_map_viewport }); + await updateCircle(circleId, { calculated_map_viewports: calculated_map_viewports }); }; //#endregion @@ -1766,15 +1778,17 @@ const upsertCircle = async (authCallerId, circleReq) => { } } - if (hasNewParent || baseChanged) { - // calculate new map viewport for old and new parent circle - if (oldParentId) { - await updateMapViewport(oldParentId); - } - if (circle.parent_circle?.id) { - await updateMapViewport(circle.parent_circle.id); - } - } + // TODO below logic can be removed as viewport is calculated dynamically on front-end based on displayed circles' locations + // if we want to calculate this on the backend, we can uncomment below + // if (hasNewParent || baseChanged) { + // // calculate new map viewport for old and new parent circle + // if (oldParentId) { + // await updateMapViewport(oldParentId); + // } + // if (circle.parent_circle?.id) { + // await updateMapViewport(circle.parent_circle.id); + // } + // } // upsert embeddings upsertCircleEmbedding(circle.id); diff --git a/circles/src/components/Circle.jsx b/circles/src/components/Circle.jsx index 182dc0b..56b5ce2 100644 --- a/circles/src/components/Circle.jsx +++ b/circles/src/components/Circle.jsx @@ -1,5 +1,5 @@ //#region imports -import React, { useEffect, lazy, useRef, useState, useCallback } from "react"; +import React, { useEffect, lazy, useRef, useState, useCallback, useMemo } from "react"; import { Flex, Box, @@ -9,6 +9,7 @@ import { DrawerContent, DrawerCloseButton, Button, + Text, useDisclosure, } from "@chakra-ui/react"; import db from "@/components/Firebase"; @@ -68,7 +69,7 @@ import WidgetController from "@/components/WidgetController"; import NavigationPanel from "@/components/NavigationPanel"; import config from "@/Config"; import CircleGlobusMap from "@/components/CircleGlobusMap"; -import CircleDashboard from "@/components/CircleDashboard"; +import { CircleDashboard, tabs } from "@/components/CircleDashboard"; import { CircleChatWidget } from "@/components/CircleChat"; import { UserDashboard } from "@/components/UserDashboard"; import { CircleSearcher } from "@/components/CircleSearch"; @@ -125,6 +126,18 @@ export const Circle = ({ isGlobal }) => { const [circleHistory, setCircleHistory] = useAtom(circleHistoryAtom); const [initialFocusDone, setInitialFocusDone] = useState(false); const [, setFocusOnMapItem] = useAtom(focusOnMapItemAtom); + const location = useLocationNoUpdates(); + + const pathSegments = location.pathname.split("/"); + const currentTabPath = pathSegments[3]; // assuming the structure is always /{hostId}/{circleId}/{tabPath}/... the relevant segment for tab should be the third one (index 2) + const selectedTab = useMemo(() => { + // get tab with id same as currentTabPath + let tab = tabs.find((x) => x.id === currentTabPath); + if (!tab) { + return tabs.find((x) => x.id === "home"); // default tab + } + return tab; + }, [currentTabPath, tabs, circleId]); const handlePinClick = () => { setIsPinned(!isPinned); @@ -364,12 +377,12 @@ export const Circle = ({ isGlobal }) => { }, [signInStatus?.signedIn, user?.id, circleId, inVideoConference]); // focuses on circle if circle is navigated to directly - useEffect(() => { - if (circleId && circle?.id && !initialFocusDone) { - focusCircle(circle, setFocusOnMapItem); - setInitialFocusDone(true); // Prevent further calls on subsequent renders - } - }, [circleId, circle, initialFocusDone]); + // useEffect(() => { + // if (circleId && circle?.id && !initialFocusDone) { + // focusCircle(circle, setFocusOnMapItem); + // setInitialFocusDone(true); // Prevent further calls on subsequent renders + // } + // }, [circleId, circle, initialFocusDone]); const circlePictureSize = isMobile ? 120 : 160; @@ -378,6 +391,15 @@ export const Circle = ({ isGlobal }) => { const topMenuHeightPx = topMenuHeight + "px"; const contentHeight = windowHeight; + const onTabClick = (tab) => { + const path = tab?.id ?? ""; + navigate(`/${hostId}/${circleId}/${path}`); + }; + + const isTabSelected = (tab) => { + return tab?.id === selectedTab?.id; + }; + return ( @@ -401,6 +423,48 @@ export const Circle = ({ isGlobal }) => { background: "linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))", }} > + {/* Floating control panel */} + {!circleDashboardExpanded && ( + + {tabs + .filter((x) => x.showInMap) + .map((tab) => ( + onTabClick(tab)} + > + + + + {tab.name} + + + + ))} + + )} diff --git a/circles/src/components/CircleAbout.jsx b/circles/src/components/CircleAbout.jsx index d27fa64..9cf1b2b 100644 --- a/circles/src/components/CircleAbout.jsx +++ b/circles/src/components/CircleAbout.jsx @@ -79,6 +79,7 @@ const CircleAbout = ({ onClose, noScrollbars }) => { // bgGradient="linear(to-r,#d3d1d3,#ffffff)" // borderRadius="10px" // margin={isMobile ? "0px" : "0px 10px 10px 0px"} + backgroundColor="white" padding={noPaddingStyle ? "0px" : "5px"} flexGrow={noScrollbars ? "0" : "1"} pointerEvents="auto" @@ -127,7 +128,7 @@ const CircleAbout = ({ onClose, noScrollbars }) => { cursor="pointer" onClick={() => { openCircle(navigate, circle.parent_circle); - focusCircle(circle.parent_circle, setFocusOnMapItem); + // focusCircle(circle.parent_circle, setFocusOnMapItem); setToggleWidgetEvent({ name: "about", value: true }); }} userSelect="none" diff --git a/circles/src/components/CircleChat.jsx b/circles/src/components/CircleChat.jsx index 1d70a83..91b2403 100644 --- a/circles/src/components/CircleChat.jsx +++ b/circles/src/components/CircleChat.jsx @@ -63,6 +63,8 @@ import { AboutButton, CircleLink, CircleRichText } from "@/components/CircleElem import ReactMarkdown from "react-markdown"; import Linkify from "linkify-it"; import { CircleMention } from "@/components/CircleSearch"; +import { altBg, expBgColor } from "./Constants"; +import { circleDashboardExpandedAtom } from "./Atoms"; const linkify = new Linkify(); linkify.tlds("earth", true); @@ -1233,13 +1235,14 @@ export const CircleChat = ({ circle }) => { }; const circleChatBackgroundColor = "#ededed"; // "#e3e3e3"; + const [circleDashboardExpanded, setCircleDashboardExpanded] = useAtom(circleDashboardExpandedAtom); if (!circle) return null; return ( { const handleSelect = (circle) => { setSelectedCircle(circle); openCircle(navigate, circle); - focusCircle(circle, setFocusOnMapItem); + // focusCircle(circle, setFocusOnMapItem); }; if (!selectedCircle?.id) return ; @@ -196,50 +196,63 @@ const CircleSelector = () => { ); }; -const tabs = [ +export const tabs = [ { id: "home", name: "Home", icon: FiHome, + showInMap: true, + type: "circle", }, { id: "chat", name: "Chat", icon: FiMessageCircle, + type: "circle", }, { id: "circles", name: "Circles", icon: FiCircle, + showInMap: true, + type: "circle", }, { id: "events", name: "Events", icon: FiCalendar, + showInMap: true, + type: "event", }, { id: "members", name: "Members", icon: FiUsers, + showInMap: true, + type: "user", }, { id: "projects", name: "Projects", icon: FiClipboard, + showInMap: true, + type: "project", }, { id: "settings", name: "Settings", icon: FiSettings, + type: "circle", }, { id: "admin", name: "Admin", icon: FiShield, + type: "circle", }, ]; -const CircleDashboard = ({ onClose }) => { +export const CircleDashboard = ({ onClose }) => { log("CircleDashboard.render", -1); const [user] = useAtom(userAtom); @@ -254,6 +267,7 @@ const CircleDashboard = ({ onClose }) => { const navigate = useNavigateNoUpdates(); const { hostId, circleId } = useParams(); const dropdownRef = useRef(null); + const [, setFocusOnMapItem] = useAtom(focusOnMapItemAtom); const pathSegments = location.pathname.split("/"); const currentTabPath = pathSegments[3]; // assuming the structure is always /{hostId}/{circleId}/{tabPath}/... the relevant segment for tab should be the third one (index 2) @@ -322,7 +336,6 @@ const CircleDashboard = ({ onClose }) => { )} { )} - + }> } /> diff --git a/circles/src/components/CircleElements.jsx b/circles/src/components/CircleElements.jsx index c23dcc3..23a22a0 100644 --- a/circles/src/components/CircleElements.jsx +++ b/circles/src/components/CircleElements.jsx @@ -341,7 +341,7 @@ export const MessageButton = ({ circle, inPreview, ...props }) => { let relationSet = getRelationSet(user, circle); openCircle(navigate, relationSet); - focusCircle(relationSet, setFocusOnMapItem); + // focusCircle(relationSet, setFocusOnMapItem); setPreviewCircle(null); setToggleWidgetEvent({ name: "chat", value: true }); setToggleWidgetEvent({ name: "about", value: true }); @@ -1695,7 +1695,7 @@ export const OpenButton = ({ circle, ...props }) => { onClick={(event) => { event.stopPropagation(); openCircle(navigate, circle); - focusCircle(circle, setFocusOnMapItem); + // focusCircle(circle, setFocusOnMapItem); }} position="relative" align="center" diff --git a/circles/src/components/CircleExtrasAndMain.jsx b/circles/src/components/CircleExtrasAndMain.jsx index 20d8d95..6f0af95 100644 --- a/circles/src/components/CircleExtrasAndMain.jsx +++ b/circles/src/components/CircleExtrasAndMain.jsx @@ -39,6 +39,7 @@ import CircleAbout from "@/components/CircleAbout"; import Circles from "@/components/Circles"; import { useParams } from "react-router-dom"; import { BoxIf, ScrollbarsIf } from "./CircleElements"; +import { altBg, expBgColor } from "./Constants"; //#endregion const CircleExtrasAndMain = ({ onClose, extras, main, switchWhenExpanded, hideExtrasWhenCompact }) => { @@ -57,7 +58,13 @@ const CircleExtrasAndMain = ({ onClose, extras, main, switchWhenExpanded, hideEx {switchWhenExpanded && circleDashboardExpanded ? getExtras() : main} - + {switchWhenExpanded && circleDashboardExpanded ? main : getExtras()} diff --git a/circles/src/components/CircleHomeFeed.jsx b/circles/src/components/CircleHomeFeed.jsx index 6705376..3ee8949 100644 --- a/circles/src/components/CircleHomeFeed.jsx +++ b/circles/src/components/CircleHomeFeed.jsx @@ -39,6 +39,7 @@ import CircleAbout from "@/components/CircleAbout"; import Circles from "@/components/Circles"; import { useParams } from "react-router-dom"; import { BoxIf, ScrollbarsIf } from "./CircleElements"; +import { altBg, expBgColor } from "./Constants"; //#endregion const CircleHomeFeed = ({ onClose }) => { @@ -53,7 +54,13 @@ const CircleHomeFeed = ({ onClose }) => { - + { @@ -105,21 +108,59 @@ export const CircleMap = ({ width, height, onMapClick, children }, ref) => { return zoomFactor - dynamicAdjustmentFactor; }; + const calculateMapBounds = (locations) => { + // get minimum and maximum latitudes and longitudes + let minLat = Math.min(...locations.map((loc) => loc.latitude)); + let maxLat = Math.max(...locations.map((loc) => loc.latitude)); + let minLng = Math.min(...locations.map((loc) => loc.longitude)); + let maxLng = Math.max(...locations.map((loc) => loc.longitude)); + + // return the calculated bounds + const bounds = { + southwest: { latitude: minLat, longitude: minLng }, + northeast: { latitude: maxLat, longitude: maxLng }, + }; + + return bounds; + }; + + const getMapBoundsForCircles = () => { + // get all locations + let locations = []; + if (circle?.base) { + locations.push(getLatlng(circle.base)); + } + filteredCircles?.forEach((filteredCircle) => { + if (filteredCircle.base) { + locations.push(getLatlng(filteredCircle.base)); + } + }); + + if (locations.length <= 0) return false; + + // calculate bounds + let mapBounds = calculateMapBounds(locations); + return mapBounds; + }; + useEffect(() => { - if (!focusOnMapItem) return; + const mapInstance = mapRef?.current?.getMap(); + if (!mapInstance || !circle) return; + let bounds = getMapBoundsForCircles(); - let transitionSpeed = focusOnMapItem.speed ?? 3; - let transitionCurve = focusOnMapItem.curve ?? 2; - const mapInstance = mapRef.current.getMap(); + // calculate bound based on filtered circles - let calculatedMapViewport = focusOnMapItem?.item?.calculated_map_viewport; - let bounds = calculatedMapViewport?.bounds; + console.log("bounds:", JSON.stringify(bounds, null, 2)); + // console.log("selected tab:", JSON.stringify(selectedTab, null, 2)); if (bounds) { let lngLatBounds = [ [bounds.southwest.longitude, bounds.southwest.latitude], [bounds.northeast.longitude, bounds.northeast.latitude], ]; + let transitionSpeed = 3; + let transitionCurve = 2; + mapInstance.fitBounds(lngLatBounds, { padding: { top: 100, bottom: 10, left: 30, right: 50 }, animate: true, @@ -128,16 +169,20 @@ export const CircleMap = ({ width, height, onMapClick, children }, ref) => { easing: (t) => t, essential: true, }); - setFocusOnMapItem(null); return; } + }, [filteredCircles, circle]); - let zoom = focusOnMapItem.zoom ?? calculatedMapViewport?.zoom_factor ?? 15; - if (calculatedMapViewport?.zoom_factor) { - zoom = adjustZoomForViewport(calculatedMapViewport.zoom_factor); - } + useEffect(() => { + if (!focusOnMapItem) return; + + let transitionSpeed = focusOnMapItem.speed ?? 3; + let transitionCurve = focusOnMapItem.curve ?? 2; + const mapInstance = mapRef.current?.getMap(); + if (!mapInstance) return; - let location = calculatedMapViewport?.center ?? getLocation(focusOnMapItem.item); + let zoom = focusOnMapItem.zoom ?? 15; + let location = getLocation(focusOnMapItem.item); if (!location) { if (focusOnMapItem.item?.id === "global") { diff --git a/circles/src/components/CirclePreview.jsx b/circles/src/components/CirclePreview.jsx index 85b63c2..5bd696e 100644 --- a/circles/src/components/CirclePreview.jsx +++ b/circles/src/components/CirclePreview.jsx @@ -142,7 +142,7 @@ export const ActiveInCircle = ({ circle, location, ...props }) => { onClick={() => { console.log("opening circle"); openCircle(navigate, circle.activity.active_in_circle); - focusCircle(circle.activity.active_in_circle, setFocusOnMapItem); + // focusCircle(circle.activity.active_in_circle, setFocusOnMapItem); setToggleWidgetEvent({ name: "video", value: true }); }} align="center" diff --git a/circles/src/components/Circles.jsx b/circles/src/components/Circles.jsx index 1097c37..2406348 100644 --- a/circles/src/components/Circles.jsx +++ b/circles/src/components/Circles.jsx @@ -49,6 +49,8 @@ import { BsCardHeading } from "react-icons/bs"; import Scrollbars from "react-custom-scrollbars-2"; import { ScrollbarsIf } from "./CircleElements"; import { Route, Routes } from "react-router-dom"; +import { altBg, expBgColor } from "./Constants"; +import { circleDashboardExpandedAtom } from "./Atoms"; //#endregion const CreateNewCircleForm = ({ type, asCard }) => { @@ -184,6 +186,7 @@ export const Circles = ({ type, types, categories, noScrollbars, asCards, sortBy const [, setFocusOnMapItem] = useAtom(focusOnMapItemAtom); const useCompactList = type !== "post" && type !== "event"; const [searchQuery, setSearchQuery] = useState(""); // State for search query + const [circleDashboardExpanded, setCircleDashboardExpanded] = useAtom(circleDashboardExpandedAtom); const navigate = useNavigateNoUpdates(); @@ -228,19 +231,24 @@ export const Circles = ({ type, types, categories, noScrollbars, asCards, sortBy flexGrow={noScrollbars ? "0" : "1"} width="100%" height={noScrollbars ? "auto" : "100%"} + minHeight="100%" flexDirection={"column"} maxWidth="600px" - backgroundColor={asCards ? "#ededed" : "transparent"} + backgroundColor={asCards ? (altBg && circleDashboardExpanded ? "transparent" : "#ededed") : "transparent"} position="relative" > {type !== "post" && ( - setSearchQuery(e.target.value)} - marginTop="10px" - backgroundColor="white" - /> + + setSearchQuery(e.target.value)} + marginTop="10px" + backgroundColor="white" + marginLeft="4px" + marginRight="4px" + /> + )} @@ -251,7 +259,7 @@ export const Circles = ({ type, types, categories, noScrollbars, asCards, sortBy item={item} onClick={() => { openCircle(navigate, item); - focusCircle(item, setFocusOnMapItem); + // focusCircle(item, setFocusOnMapItem); }} asCard={asCards} isCompact={useCompactList} diff --git a/circles/src/components/Constants.js b/circles/src/components/Constants.js index 20b8cba..0e5f187 100644 --- a/circles/src/components/Constants.js +++ b/circles/src/components/Constants.js @@ -1,5 +1,8 @@ import i18n from "@/i18n/Localization"; +export const altBg = true; +export const expBgColor = altBg ? "#000000b5" : "#ededed"; + export const defaultContentWidth = "435px"; export const defaultCoverHeight = { default: 464, mobile: 250 }; export const signInStatusValues = { diff --git a/circles/src/components/Home.jsx b/circles/src/components/Home.jsx index 5bdd809..addaed5 100644 --- a/circles/src/components/Home.jsx +++ b/circles/src/components/Home.jsx @@ -95,7 +95,7 @@ export const Home = () => { marginTop="5px" onClick={() => { openCircle(navigate, item); - focusCircle(item, setFocusOnMapItem); + // focusCircle(item, setFocusOnMapItem); }} > {item.name} diff --git a/circles/src/components/NavigationPanel.jsx b/circles/src/components/NavigationPanel.jsx index 95d52ee..c6b97f1 100644 --- a/circles/src/components/NavigationPanel.jsx +++ b/circles/src/components/NavigationPanel.jsx @@ -35,7 +35,7 @@ const NavigationPanel = ({ isPinned, setIsPinned, onClose }) => { const onCircleClick = (item) => { openCircle(navigate, item); - focusCircle(item, setFocusOnMapItem); + // focusCircle(item, setFocusOnMapItem); if (!isPinned) { onClose(); } diff --git a/circles/src/components/NewCircleGuide.jsx b/circles/src/components/NewCircleGuide.jsx index 15f0891..0d008ea 100644 --- a/circles/src/components/NewCircleGuide.jsx +++ b/circles/src/components/NewCircleGuide.jsx @@ -53,7 +53,7 @@ export const NewCircleGuide = ({ onClose, type, circle, parent_circle, message, case "post": return [allSteps.post]; case "project": - return [allSteps.project,allSteps.images]; + return [allSteps.project, allSteps.images]; default: return [ allSteps.about, @@ -77,7 +77,7 @@ export const NewCircleGuide = ({ onClose, type, circle, parent_circle, message, onClose(); if (createdCircle.type === "circle") { openCircle(navigate, createdCircle); - focusCircle(createdCircle, setFocusOnMapItem); + // focusCircle(createdCircle, setFocusOnMapItem); openAboutCircle(createdCircle, setToggleAbout); } } else { diff --git a/circles/src/components/Notifications.jsx b/circles/src/components/Notifications.jsx index 2f8dae3..e7309ad 100644 --- a/circles/src/components/Notifications.jsx +++ b/circles/src/components/Notifications.jsx @@ -600,7 +600,7 @@ const Notifications = () => { onClick={() => { notificationsOnClose(); openSubcircle(navigate, notification.circle?.parent_circle, notification.circle); - focusCircle(notification.circle?.parent_circle, setFocusOnMapItem); + // focusCircle(notification.circle?.parent_circle, setFocusOnMapItem); }} /> ); @@ -617,7 +617,7 @@ const Notifications = () => { onClick={() => { notificationsOnClose(); openCircle(navigate, notification.source); - focusCircle(notification.source, setFocusOnMapItem); + // focusCircle(notification.source, setFocusOnMapItem); }} /> ); diff --git a/circles/src/components/ProfileMenu.jsx b/circles/src/components/ProfileMenu.jsx index eb2ae4f..a7b112c 100644 --- a/circles/src/components/ProfileMenu.jsx +++ b/circles/src/components/ProfileMenu.jsx @@ -97,7 +97,7 @@ export const ProfileMenu = () => { onClick={() => { profileMenuOnClose(); openCircle(navigate, user); - focusCircle(user, setFocusOnMapItem); + // focusCircle(user, setFocusOnMapItem); setToggleWidgetEvent({ name: "about", value: true }); }} /> @@ -108,7 +108,7 @@ export const ProfileMenu = () => { onClick={() => { profileMenuOnClose(); openCircle(navigate, user); - focusCircle(user, setFocusOnMapItem); + // focusCircle(user, setFocusOnMapItem); setToggleWidgetEvent({ name: "about", value: true }); }} > @@ -119,7 +119,7 @@ export const ProfileMenu = () => { { openCircle(navigate, user); - focusCircle(user, setFocusOnMapItem); + // focusCircle(user, setFocusOnMapItem); setToggleWidgetEvent({ name: "about", value: true }); }} > @@ -128,7 +128,7 @@ export const ProfileMenu = () => { { openCircle(navigate, user); - focusCircle(user, setFocusOnMapItem); + // focusCircle(user, setFocusOnMapItem); log("toggling settings to true", 0, true); setToggleSettings(true); }} diff --git a/circles/src/components/TopMenu.jsx b/circles/src/components/TopMenu.jsx index 74024d7..3d81911 100644 --- a/circles/src/components/TopMenu.jsx +++ b/circles/src/components/TopMenu.jsx @@ -36,7 +36,7 @@ const NavigationButtons = ({ direction, ...props }) => { const circle = circleHistory.history[newPosition]; setCircleHistory({ ...circleHistory, position: newPosition }); openCircle(navigate, circle); - focusCircle(circle, setFocusOnMapItem); + // focusCircle(circle, setFocusOnMapItem); } }; @@ -46,7 +46,7 @@ const NavigationButtons = ({ direction, ...props }) => { const circle = circleHistory.history[newPosition]; setCircleHistory({ ...circleHistory, position: newPosition }); openCircle(navigate, circle); - focusCircle(circle, setFocusOnMapItem); + // focusCircle(circle, setFocusOnMapItem); } }; diff --git a/circles/src/components/UserDashboard.jsx b/circles/src/components/UserDashboard.jsx index 74daad6..87e0c91 100644 --- a/circles/src/components/UserDashboard.jsx +++ b/circles/src/components/UserDashboard.jsx @@ -101,7 +101,7 @@ export const UserDashboard = ({ onClose }) => { cursor="pointer" onClick={() => { openCircle(navigate, circle.parent_circle); - focusCircle(circle.parent_circle, setFocusOnMapItem); + // focusCircle(circle.parent_circle, setFocusOnMapItem); setToggleWidgetEvent({ name: "about", value: true }); }} >