Merge pull request #177 from ls1intum/fix/handling-diagramTypes

Fix/handling diagram types

Author: egenerse

.nvmrc

@@ -1 +1 @@
-v20.18.0
+v22.14.0

library/lib/App.tsx

@@ -16,7 +16,7 @@ import "@xyflow/react/dist/style.css"
 import "@/styles/app.css"
 import { useDiagramStore, useMetadataStore } from "./store/context"
 import { useShallow } from "zustand/shallow"
-import { ApollonMode, DiagramType } from "./types"
+import { ApollonMode } from "./types"
 import {
   MIN_SCALE_TO_ZOOM_OUT,
   MAX_SCALE_TO_ZOOM_IN,
@@ -75,9 +75,7 @@ function App({ onReactFlowInit }: AppProps) {
         flexGrow: 1,
       }}
     >
-      {diagramMode === ApollonMode.Modelling && (
-        <Sidebar selectedDiagramType={DiagramType.ClassDiagram} />
-      )}
+      {diagramMode === ApollonMode.Modelling && <Sidebar />}
       <SvgMarkers />
       <ReactFlow
         id={`react-flow-library-${diagramId}`}

library/lib/components/Sidebar.tsx

@@ -1,16 +1,16 @@
-import React, { FC, useCallback, useEffect, useState } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import {
   DropElementConfig,
   dropElementConfigs,
   transformScale,
 } from "@/constants/dropElementConfig"
 import { DividerLine } from "./DividerLine"
-import { DiagramType, DropNodeData } from "@/types"
+import { DropNodeData } from "@/types"
 import { createPortal } from "react-dom"
 import { useReactFlow, type Node } from "@xyflow/react"
 import { MOUSE_UP_OFFSET_IN_PIXELS, SNAP_TO_GRID_PX } from "@/constants"
 import { generateUUID, getPositionOnCanvas, resizeAllParents } from "@/utils"
-import { useDiagramStore } from "@/store/context"
+import { useDiagramStore, useMetadataStore } from "@/store/context"
 import { useShallow } from "zustand/shallow"
 
 /* ========================================================================
@@ -30,11 +30,14 @@ const enableScroll = () => {
    Sidebar Component
    Renders the draggable elements based on the selected diagram type.
    ======================================================================== */
-interface SidebarProps {
-  selectedDiagramType: DiagramType
-}
 
-export const Sidebar: FC<SidebarProps> = ({ selectedDiagramType }) => {
+export const Sidebar = () => {
+  const diagramType = useMetadataStore(useShallow((state) => state.diagramType))
+
+  if (dropElementConfigs[diagramType].length === 0) {
+    return null
+  }
+
   return (
     <aside style={{ height: "100%", backgroundColor: "#f0f0f0" }}>
       <div
@@ -45,7 +48,7 @@ export const Sidebar: FC<SidebarProps> = ({ selectedDiagramType }) => {
           margin: "10px",
         }}
       >
-        {dropElementConfigs[selectedDiagramType].map((config) => (
+        {dropElementConfigs[diagramType].map((config) => (
           <React.Fragment key={`${config.type}_${config.defaultData.name}`}>
             {config.type === "colorDescription" && (
               <DividerLine style={{ margin: "3px 0" }} height={2} />

library/lib/constants/dropElementConfig.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ClassSVG, PackageSVG } from "@/components"
 import { generateUUID } from "@/utils"
-import { ClassType, DiagramType } from "@/types"
+import { ClassType, UMLDiagramType } from "@/types"
 import { DiagramNodeTypeKeys } from "@/nodes"
 
 export * from "./layoutConstants"
@@ -17,8 +17,8 @@ export type DropElementConfig = {
   svg: React.FC<any>
 }
 
-export const dropElementConfigs: Record<DiagramType, DropElementConfig[]> = {
-  [DiagramType.ClassDiagram]: [
+export const dropElementConfigs: Record<UMLDiagramType, DropElementConfig[]> = {
+  [UMLDiagramType.ClassDiagram]: [
     {
       type: "package",
       width: droppedElementWidth,
@@ -78,7 +78,7 @@ export const dropElementConfigs: Record<DiagramType, DropElementConfig[]> = {
       svg: (props) => <ClassSVG {...props} />,
     },
   ],
-  [DiagramType.ObjectDiagram]: [
+  [UMLDiagramType.ObjectDiagram]: [
     {
       type: "class",
       width: droppedElementWidth,
@@ -92,4 +92,14 @@ export const dropElementConfigs: Record<DiagramType, DropElementConfig[]> = {
       svg: (props) => <ClassSVG {...props} />,
     },
   ],
+  [UMLDiagramType.ActivityDiagram]: [],
+  [UMLDiagramType.BPMN]: [],
+  [UMLDiagramType.CommunicationDiagram]: [],
+  [UMLDiagramType.ComponentDiagram]: [],
+  [UMLDiagramType.DeploymentDiagram]: [],
+  [UMLDiagramType.PetriNet]: [],
+  [UMLDiagramType.ReachabilityGraph]: [],
+  [UMLDiagramType.SyntaxTree]: [],
+  [UMLDiagramType.UseCaseDiagram]: [],
+  [UMLDiagramType.Flowchart]: [],
 }

library/lib/index.tsx

@@ -11,9 +11,8 @@ import {
   mapFromReactFlowNodeToApollonNode,
   mapFromReactFlowEdgeToApollonEdge,
 } from "./utils"
-import { DiagramType } from "./types"
-export * from "./types"
-import { ApollonDiagram, ApollonOptions } from "./types/EditorOptions"
+import { UMLDiagramType } from "./types"
+import { ApollonOptions, UMLModel } from "./types/EditorOptions"
 import {
   createDiagramStore,
   DiagramStore,
@@ -31,6 +30,12 @@ import { StoreApi } from "zustand"
 import { createPopoverStore } from "./store"
 import { PopoverStore } from "./store/popoverStore"
 
+export * from "./types"
+
+type Subscribers = {
+  [key: number]: () => void
+}
+
 export class Apollon2 {
   private root: ReactDOM.Root
   private reactFlowInstance: ReactFlowInstance | null = null
@@ -39,7 +44,7 @@ export class Apollon2 {
   private readonly diagramStore: StoreApi<DiagramStore>
   private readonly metadataStore: StoreApi<MetadataStore>
   private readonly popoverStore: StoreApi<PopoverStore>
-
+  private subscribers: Subscribers = {}
   constructor(element: HTMLElement, options?: ApollonOptions) {
     if (!(element instanceof HTMLElement)) {
       throw new Error("Element is required to initialize Apollon2")
@@ -58,7 +63,6 @@ export class Apollon2 {
     const diagramId =
       options?.model?.id || Math.random().toString(36).substring(2, 15)
 
-    console.log("Diagram constructor called with diagramId", diagramId)
     // Initialize React root
     this.root = ReactDOM.createRoot(element, {
       identifierPrefix: `apollon2-${diagramId}`,
@@ -68,7 +72,7 @@ export class Apollon2 {
 
     // Initialize metadata and diagram type
     const diagramName = options?.model?.title || "Untitled Diagram"
-    const diagramType = options?.model?.type || DiagramType.ClassDiagram
+    const diagramType = options?.model?.type || UMLDiagramType.ClassDiagram
     this.metadataStore
       .getState()
       .updateMetaData(diagramName, parseDiagramType(diagramType))
@@ -131,10 +135,14 @@ export class Apollon2 {
     return this.reactFlowInstance ? this.reactFlowInstance.getEdges() : []
   }
 
+  set diagramType(type: UMLDiagramType) {
+    this.metadataStore.getState().updateDiagramType(type)
+    this.diagramStore.getState().setNodesAndEdges([], [])
+  }
+
   public dispose() {
     const diagramId = this.diagramStore.getState().diagramId
     console.log("Disposing Apollon2 instance with diagramId", diagramId)
-
     try {
       this.syncManager.stopSync()
       this.root.unmount()
@@ -214,15 +222,21 @@ export class Apollon2 {
     }
   }
 
-  public subscribeToModalNodeEdgeChange(
+  private getNewSubscriptionId(subscribers: Subscribers): number {
+    // largest key + 1
+    if (Object.keys(subscribers).length === 0) return 0
+    return Math.max(...Object.keys(subscribers).map((key) => parseInt(key))) + 1
+  }
+
+  public subscribeToModelChange(
     callback: (state: DiagramStoreData) => void
-  ) {
-    return this.diagramStore.subscribe((state) =>
-      callback({
-        nodes: state.nodes,
-        edges: state.edges,
-      })
+  ): number {
+    const subscriberId = this.getNewSubscriptionId(this.subscribers)
+    const unsubscribeCallback = this.diagramStore.subscribe(() =>
+      callback(this.getDiagram())
     )
+    this.subscribers[subscriberId] = unsubscribeCallback
+    return subscriberId
   }
 
   public subscribeToDiagramNameChange(
@@ -248,12 +262,12 @@ export class Apollon2 {
     return { diagramTitle, diagramType }
   }
 
-  public getDiagram(): ApollonDiagram {
+  public getDiagram(): UMLModel {
     const { nodes, edges, diagramId } = this.diagramStore.getState()
     const { diagramTitle, diagramType } = this.metadataStore.getState()
     return {
       id: diagramId,
-      version: "2.0",
+      version: "4.0.0",
       title: diagramTitle,
       type: diagramType,
       nodes: nodes.map((node) => mapFromReactFlowNodeToApollonNode(node)),

library/lib/store/diagramStore.ts

@@ -41,8 +41,8 @@ export type DiagramStore = {
   edges: Edge[]
   interactiveElementId: string | null
   diagramId: string
-  setDiagramId: (diagramId: string) => void
   assessments: Record<string, Assessment>
+  setDiagramId: (diagramId: string) => void
   setNodes: (payload: Node[] | ((nodes: Node[]) => Node[])) => void
   setEdges: (payload: Edge[] | ((edges: Edge[]) => Edge[])) => void
   setNodesAndEdges: (nodes: Node[], edges: Edge[]) => void

library/lib/store/metadataStore.ts

@@ -3,35 +3,35 @@ import { devtools, subscribeWithSelector } from "zustand/middleware"
 import { parseDiagramType } from "@/utils"
 import * as Y from "yjs"
 import { getDiagramMetadata } from "@/sync/ydoc"
-import { DiagramType } from "@/types"
+import { UMLDiagramType } from "@/types"
 import { ApollonMode } from "@/types/EditorOptions"
 
 export type MetadataStore = {
   diagramTitle: string
-  diagramType: DiagramType
+  diagramType: UMLDiagramType
   mode: ApollonMode
   readonly: boolean
   popupEnabled: boolean
   setPopupEnabled: (isPopupEnabled: boolean) => void
   setMode: (mode: ApollonMode) => void
   setReadonly: (readonly: boolean) => void
   updateDiagramTitle: (diagramTitle: string) => void
-  updateDiagramType: (diagramType: DiagramType) => void
-  updateMetaData: (diagramTitle: string, diagramType: DiagramType) => void
+  updateDiagramType: (diagramType: UMLDiagramType) => void
+  updateMetaData: (diagramTitle: string, diagramType: UMLDiagramType) => void
   updateMetaDataFromYjs: () => void
   reset: () => void
 }
 
 type InitialMetadataState = {
   diagramTitle: string
-  diagramType: DiagramType
+  diagramType: UMLDiagramType
   mode: ApollonMode
   readonly: boolean
   popupEnabled: boolean
 }
 const initialMetadataState: InitialMetadataState = {
   diagramTitle: "Untitled Diagram",
-  diagramType: DiagramType.ClassDiagram,
+  diagramType: UMLDiagramType.ClassDiagram,
   mode: ApollonMode.Modelling,
   readonly: false,
   popupEnabled: true,

library/lib/styles/app.css

@@ -21,6 +21,7 @@ body {
   --panel-shadow: 0 0 4px 0 rgb(0 0 0 / 0.2);
   --text: #0a0a0a;
   --xy-edge-stroke: black;
+  --xy-minimap-mask-background-color-props: #00000020;
 }
 
 .react-flow__panel,
@@ -35,11 +36,6 @@ body {
   display: block;
 }
 
-.react-flow__minimap-mask {
-  fill: var(--background);
-  fill-opacity: 0.85;
-}
-
 .react-flow__node-toolbar {
   display: flex;
   gap: 8px;

library/lib/types/Assessments.ts

@@ -8,7 +8,7 @@ export type Assessment = {
   elementType: string
   score: number
   feedback?: string
-  // dropInfo?: any;
+  dropInfo?: unknown
   label?: string
   labelColor?: string
   correctionStatus?: FeedbackCorrectionStatus

library/lib/types/DiagramType.ts

@@ -1,4 +1,16 @@
-export enum DiagramType {
-  ClassDiagram = "ClassDiagram",
-  ObjectDiagram = "ObjectDiagram",
-}
+export type UMLDiagramType = keyof typeof UMLDiagramType
+
+export const UMLDiagramType = {
+  ClassDiagram: "ClassDiagram",
+  ObjectDiagram: "ObjectDiagram",
+  ActivityDiagram: "ActivityDiagram",
+  UseCaseDiagram: "UseCaseDiagram",
+  CommunicationDiagram: "CommunicationDiagram",
+  ComponentDiagram: "ComponentDiagram",
+  DeploymentDiagram: "DeploymentDiagram",
+  PetriNet: "PetriNet",
+  ReachabilityGraph: "ReachabilityGraph",
+  SyntaxTree: "SyntaxTree",
+  Flowchart: "Flowchart",
+  BPMN: "BPMN",
+} as const

library/lib/types/EditorOptions.ts

@@ -1,5 +1,16 @@
 import { Assessment } from "./Assessments"
-import { DiagramType } from "./DiagramType"
+import { UMLDiagramType } from "./DiagramType"
+
+export enum Locale {
+  en = "en",
+  de = "de",
+}
+
+export enum ApollonMode {
+  Modelling = "Modelling",
+  Exporting = "Exporting",
+  Assessment = "Assessment",
+}
 
 export type ApollonNode = {
   id: string
@@ -28,14 +39,20 @@ export type ApollonEdge = {
     [key: string]: unknown
   }
 }
-export type ApollonDiagram = {
+
+export type Selection = {
+  nodes: { [id: string]: boolean }
+  edges: { [id: string]: boolean }
+}
+
+export type UMLModel = {
+  version: `4.${number}.${number}`
   id: string
-  version: string
   title: string
-  type: DiagramType
+  type: UMLDiagramType
   nodes: ApollonNode[]
   edges: ApollonEdge[]
-  assessments: Record<string, Assessment>
+  assessments: { [id: string]: Assessment }
 }
 
 export enum ApollonView {
@@ -44,15 +61,15 @@ export enum ApollonView {
   Highlight = "Highlight",
 }
 
-export enum ApollonMode {
-  Modelling = "Modelling",
-  Exporting = "Exporting",
-  Assessment = "Assessment",
-}
-
 export type ApollonOptions = {
+  type?: UMLDiagramType
   mode?: ApollonMode
   readonly?: boolean
   enablePopups?: boolean
-  model?: ApollonDiagram
+  model?: UMLModel
+  theme?: Partial<Record<string, string>>
+  locale?: Locale
+  copyPasteToClipboard?: boolean
+  colorEnabled?: boolean
+  scale?: number
 }