Merge pull request #196 from ls1intum/chore/cleanup-of-store-management

Chore/cleanup of store management

Author: egenerse

library/lib/App.tsx

@@ -26,7 +26,6 @@ import {
   useNodeDragStop,
   useConnect,
   useReconnect,
-  useCanvasClickEvents,
   useElementInteractions,
 } from "./hooks"
 import { useDragOver } from "./hooks/useDragOver"
@@ -62,7 +61,6 @@ function App({ onReactFlowInit }: AppProps) {
   const { onConnect, onConnectEnd, onConnectStart, onEdgesDelete } =
     useConnect()
   const { onReconnect } = useReconnect()
-  const { onNodeClick, onEdgeClick, onPaneClick } = useCanvasClickEvents()
   const { onBeforeDelete, onNodeDoubleClick, onEdgeDoubleClick } =
     useElementInteractions()
 
@@ -98,19 +96,13 @@ function App({ onReactFlowInit }: AppProps) {
         maxZoom={MAX_SCALE_TO_ZOOM_IN}
         snapToGrid
         snapGrid={[SNAP_TO_GRID_PX, SNAP_TO_GRID_PX]}
-        onNodeClick={onNodeClick}
-        onEdgeClick={onEdgeClick}
         onNodeDoubleClick={onNodeDoubleClick}
         onEdgeDoubleClick={onEdgeDoubleClick}
-        onPaneClick={onPaneClick}
         onBeforeDelete={onBeforeDelete}
         proOptions={proOptions}
         edgesReconnectable={isDiagramModifiable}
         nodesConnectable={isDiagramModifiable}
         nodesDraggable={isDiagramModifiable}
-        elementsSelectable={isDiagramModifiable}
-        edgesFocusable={isDiagramModifiable}
-        nodesFocusable={isDiagramModifiable}
       >
         <CustomBackground />
         <CustomMiniMap />

library/lib/apollon-editor.tsx

@@ -10,18 +10,21 @@ import {
   getDiagramBounds,
 } from "./utils"
 import { UMLDiagramType } from "./types"
-import { createDiagramStore, DiagramStore } from "./store/diagramStore"
-import { createMetadataStore, MetadataStore } from "./store/metadataStore"
+import { createDiagramStore, DiagramStore } from "@/store/diagramStore"
+import { createMetadataStore, MetadataStore } from "@/store/metadataStore"
+import { createPopoverStore, PopoverStore } from "@/store/popoverStore"
 import {
   DiagramStoreContext,
   MetadataStoreContext,
   PopoverStoreContext,
 } from "./store/context"
-import { YjsSyncClass } from "./store/yjsSync"
+import {
+  MessageType,
+  SendBroadcastMessage,
+  YjsSyncClass,
+} from "@/sync/yjsSyncClass"
 import * as Y from "yjs"
 import { StoreApi } from "zustand"
-import { createPopoverStore } from "./store"
-import { PopoverStore } from "./store/popoverStore"
 import * as Apollon from "./typings"
 
 export class ApollonEditor {
@@ -77,10 +80,10 @@ export class ApollonEditor {
     if (options?.mode) {
       this.metadataStore.getState().setMode(options.mode)
     }
-    if (options?.enablePopups) {
-      this.metadataStore.getState().setPopupEnabled(options.enablePopups)
+    if (options?.enablePopups !== undefined) {
+      this.popoverStore.getState().setPopupEnabled(options.enablePopups)
     }
-    if (options?.readonly) {
+    if (options?.readonly !== undefined) {
       this.metadataStore.getState().setReadonly(options.readonly)
     }
 
@@ -269,8 +272,8 @@ export class ApollonEditor {
     }
   }
 
-  public sendBroadcastMessage(sendFn: (base64Data: string) => void) {
-    this.syncManager.setSendFunction(sendFn)
+  public sendBroadcastMessage(sendFn: SendBroadcastMessage) {
+    this.syncManager.setSendBroadcastMessage(sendFn)
   }
 
   public receiveBroadcastedMessage(base64Data: string) {
@@ -314,7 +317,7 @@ export class ApollonEditor {
   }
 
   static generateInitialSyncMessage(): string {
-    const syncMessage = new Uint8Array(new Uint8Array([0]))
+    const syncMessage = new Uint8Array(new Uint8Array([MessageType.YjsSYNC]))
     return YjsSyncClass.uint8ToBase64(syncMessage)
   }
 }

library/lib/components/popovers/PopoverManager.tsx

@@ -1,5 +1,8 @@
-import { useMetadataStore } from "@/store"
-import { useDiagramStore, usePopoverStore } from "@/store/context"
+import {
+  useDiagramStore,
+  usePopoverStore,
+  useMetadataStore,
+} from "@/store/context"
 import { ApollonMode } from "@/typings"
 import { useShallow } from "zustand/shallow"
 import {
@@ -65,35 +68,33 @@ export const PopoverManager = ({
   type,
 }: PopoverManagerProps) => {
   const viewportCenter = useViewportCenter()
-  const { nodes, interactiveElementId, setInteractiveElementId } =
-    useDiagramStore(
-      useShallow((state) => ({
-        nodes: state.nodes,
-        interactiveElementId: state.interactiveElementId,
-        setInteractiveElementId: state.setInteractiveElementId,
-      }))
-    )
-  const { diagramMode, readonly } = useMetadataStore(
+  const { nodes } = useDiagramStore(
     useShallow((state) => ({
-      diagramMode: state.mode,
-      readonly: state.readonly,
+      nodes: state.nodes,
     }))
   )
-  const { popoverElementId, setPopOverElementId } = usePopoverStore(
+
+  const { diagramMode, readonly } = useMetadataStore(
     useShallow((state) => ({
-      popoverElementId: state.popoverElementId,
-      setPopOverElementId: state.setPopOverElementId,
+      diagramMode: state.mode,
+      readonly: state.readonly,
     }))
   )
+  const { popoverElementId, popupEnabled, setPopOverElementId } =
+    usePopoverStore(
+      useShallow((state) => ({
+        popoverElementId: state.popoverElementId,
+        popupEnabled: state.popupEnabled,
+        setPopOverElementId: state.setPopOverElementId,
+      }))
+    )
 
-  if (!anchorEl) {
+  if (!anchorEl || !popupEnabled) {
     return null
   }
 
-  const open =
-    popoverElementId === elementId && elementId === interactiveElementId
+  const open = popoverElementId === elementId
   const onClose = () => {
-    setInteractiveElementId(null)
     setPopOverElementId(null)
   }
 

library/lib/components/toolbars/edgeToolBar/CustomEdgeToolBar.tsx

@@ -1,11 +1,10 @@
 import { IPoint } from "@/edges"
 import { useDiagramModifiable } from "@/hooks/useDiagramModifiable"
-import { useDiagramStore } from "@/store"
+import { useIsOnlyThisElementSelected } from "@/hooks/useIsOnlyThisElementSelected"
 import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined"
 import EditIcon from "@mui/icons-material/Edit"
 import { Box } from "@mui/material"
 import { forwardRef, ForwardedRef } from "react"
-import { useShallow } from "zustand/shallow"
 
 interface CustomEdgeToolbarProps {
   edgeId: string
@@ -20,12 +19,10 @@ export const CustomEdgeToolbar = forwardRef(
     { edgeId, position, onEditClick, onDeleteClick }: CustomEdgeToolbarProps,
     ref: ForwardedRef<SVGForeignObjectElement>
   ) => {
-    const interactiveElementId = useDiagramStore(
-      useShallow((state) => state.interactiveElementId)
-    )
     const isDiagramModifiable = useDiagramModifiable()
 
-    const selected = interactiveElementId === edgeId
+    const selected = useIsOnlyThisElementSelected(edgeId)
+
     const showToolbar = selected && isDiagramModifiable
     const foreignObjectStyle = showToolbar
       ? { borderRadius: 8, boxShadow: "0 0 4px 0 rgb(0 0 0 / .2)" }

library/lib/hooks/index.ts

@@ -5,6 +5,5 @@ export * from "./useNodeDragStop"
 export * from "./useHandleOnResize"
 export * from "./useEdges"
 export * from "./useEdgeToolbar"
-export * from "./useCanvasClickEvents"
 export * from "./useElementInteractions"
 export * from "./useGoToNextAssessment"

library/lib/hooks/useCanvasClickEvents.ts

@@ -1,4 +1,4 @@
-import { useDiagramStore, usePopoverStore } from "@/store/context"
+import { usePopoverStore } from "@/store/context"
 import {
   NodeMouseHandler,
   OnBeforeDelete,
@@ -16,11 +16,6 @@ export const useElementInteractions = () => {
       setPopOverElementId: state.setPopOverElementId,
     }))
   )
-  const { setInteractiveElementId } = useDiagramStore(
-    useShallow((state) => ({
-      setInteractiveElementId: state.setInteractiveElementId,
-    }))
-  )
 
   const onBeforeDelete: OnBeforeDelete = () => {
     if (isDiagramModifiable) {
@@ -30,12 +25,10 @@ export const useElementInteractions = () => {
   }
 
   const onNodeDoubleClick: NodeMouseHandler<Node> = (_event, node) => {
-    setInteractiveElementId(node.id)
     setPopOverElementId(node.id)
   }
 
   const onEdgeDoubleClick: EdgeMouseHandler<Edge> = (_event, edge) => {
-    setInteractiveElementId(edge.id)
     setPopOverElementId(edge.id)
   }
   return {

library/lib/hooks/useElementInteractions.ts

@@ -1,13 +1,14 @@
 import { useDiagramStore } from "@/store"
 import { useShallow } from "zustand/shallow"
 import { usePopoverStore } from "@/store/context"
+import { useReactFlow } from "@xyflow/react"
 
 export const useGoToNextAssessment = (elementId: string) => {
-  const { nodes, edges, setInteractiveElementId } = useDiagramStore(
+  const { updateNode } = useReactFlow()
+  const { nodes, edges } = useDiagramStore(
     useShallow((state) => ({
       nodes: state.nodes,
       edges: state.edges,
-      setInteractiveElementId: state.setInteractiveElementId,
     }))
   )
   const setPopOverElementId = usePopoverStore(
@@ -20,7 +21,8 @@ export const useGoToNextAssessment = (elementId: string) => {
     const totalElements = elements.length
     const nextIndex = (currentIndex + 1) % totalElements
     const nextElement = elements[nextIndex]
-    setInteractiveElementId(nextElement.id)
+    updateNode(elementId, { selected: false })
+    updateNode(nextElement.id, { selected: true })
     setPopOverElementId(nextElement.id)
   }
 

library/lib/hooks/useGoToNextAssessment.ts

@@ -0,0 +1,12 @@
+import { useDiagramStore } from "@/store"
+import { useShallow } from "zustand/shallow"
+
+export const useIsOnlyThisElementSelected = (elementId: string) => {
+  const { selectedElementIds } = useDiagramStore(
+    useShallow((state) => ({
+      selectedElementIds: state.selectedElementIds,
+    }))
+  )
+
+  return selectedElementIds.length === 1 && selectedElementIds[0] === elementId
+}

library/lib/hooks/useIsOnlyThisElementSelected.ts

@@ -19,15 +19,20 @@ export function TitleAndDesctiption({
   }
 
   return (
-    <DefaultNodeWrapper width={width} height={height} elementId={id}>
+    <DefaultNodeWrapper
+      width={width}
+      height={height}
+      elementId={id}
+      selected={!!selected}
+    >
       <TitleAndDescriptionSVG
         width={width}
         height={height}
         title={title}
         description={description || ""}
       />
       <NodeResizer
-        isVisible={selected}
+        isVisible={!!selected}
         minHeight={200}
         handleStyle={{ width: 8, height: 8 }}
       />