Связь для комментариев.

src/renderer/src/components/DiagramEditor.tsx

@@ -155,9 +155,9 @@ export const DiagramEditor: React.FC = () => {
   };
 
   // TODO(bryzZz) Нужно делить на две модалки
-  // Тут возникло много as any
-  // это потому что для состояния и перехода типы разные но модалка одна
-  // и приходится приводить к какому-то обшему типу
+  // Тут возникло много "as any"
+  // это потому что для состояния и перехода типы разные, но модалка одна
+  // и приходится приводить к какому-то общему типу
   const handleCreateModalSubmit = (data: CreateModalResult) => {
     if (data.key === 2) {
       editor.controller.states.changeStateEvents({
@@ -170,8 +170,8 @@ export const DiagramEditor: React.FC = () => {
     } else if (transition && data.key === 3) {
       editor.controller.transitions.changeTransition({
         id: transition.id,
-        source: transition.source.id,
-        target: transition.target.id,
+        sourceId: transition.source.id,
+        targetId: transition.target.id,
         color: data.color ?? DEFAULT_TRANSITION_COLOR,
         label: {
           trigger: data.trigger,
@@ -181,8 +181,8 @@ export const DiagramEditor: React.FC = () => {
       });
     } else if (newTransitionData) {
       editor.controller.transitions.createTransition({
-        source: newTransitionData.source.id,
-        target: newTransitionData.target.id,
+        sourceId: newTransitionData.source.id,
+        targetId: newTransitionData.target.id,
         color: data.color ?? DEFAULT_TRANSITION_COLOR,
         label: {
           trigger: data.trigger,

src/renderer/src/components/Hierarchy/Hierarchy.tsx

@@ -13,7 +13,7 @@ import { twMerge } from 'tailwind-merge';
 
 import './style-modern.css';
 import { useSettings } from '@renderer/hooks';
-import { State } from '@renderer/lib/drawable';
+import { FinalState, State } from '@renderer/lib/drawable';
 import { MyMouseEvent } from '@renderer/lib/types/mouse';
 import { useEditorContext } from '@renderer/store/EditorContext';
 import { escapeRegExp } from '@renderer/utils';
@@ -24,7 +24,7 @@ import { TitleRender } from './TitleRender';
 
 export interface HierarchyItemData {
   title: string;
-  type: 'state' | 'initialState' | 'finalState' | 'choiceState' | 'transition';
+  type: 'state' | 'initialState' | 'finalState' | 'choiceState' | 'transition' | 'note';
 }
 
 export const Hierarchy: React.FC = () => {
@@ -39,6 +39,7 @@ export const Hierarchy: React.FC = () => {
   const finalStates = model.useData('elements.finalStates');
   const choiceStates = model.useData('elements.choiceStates');
   const transitions = model.useData('elements.transitions');
+  const notes = model.useData('elements.notes');
 
   const [search, setSearch] = useState('');
   const [focusedItem, setFocusedItem] = useState<TreeItemIndex>();
@@ -90,6 +91,20 @@ export const Hierarchy: React.FC = () => {
       };
     }
 
+    for (const noteId in notes) {
+      const note = notes[noteId];
+
+      data[noteId] = {
+        index: noteId,
+        isFolder: false,
+        //TODO: (XidFanSan) надо добавить название заметки (title)
+        data: { title: note.text ?? 'Комментарий', type: 'note' },
+        children: [],
+        canRename: false,
+        canMove: false,
+      };
+    }
+
     for (const stateId in choiceStates) {
       data[stateId] = {
         index: stateId,
@@ -115,9 +130,13 @@ export const Hierarchy: React.FC = () => {
       }
     }
 
+    for (const [noteId] of [...Object.entries(notes)]) {
+      data.root.children?.push(noteId);
+    }
+
     for (const transitionId in transitions) {
       const transition = transitions[transitionId];
-      const targetName = data[transition.target]?.data?.title;
+      const targetName = data[transition.targetId]?.data?.title;
 
       data[transitionId] = {
         index: transitionId,
@@ -129,12 +148,12 @@ export const Hierarchy: React.FC = () => {
         canRename: false,
         canMove: false,
       };
-      data[transition.source].children?.push(transitionId);
-      data[transition.source].isFolder = true;
+      data[transition.sourceId].children?.push(transitionId);
+      data[transition.sourceId].isFolder = true;
     }
 
     return data;
-  }, [choiceStates, finalStates, initialStates, states, transitions]);
+  }, [choiceStates, finalStates, initialStates, notes, states, transitions]);
 
   // Синхронизация дерева и состояний
   const handleFocusItem = (item: TreeItem<HierarchyItemData>) => setFocusedItem(item.index);
@@ -170,6 +189,7 @@ export const Hierarchy: React.FC = () => {
 
   const onFocus = (item: TreeItem) => () => {
     controller.selectState(item.index.toString());
+    controller.selectNote(item.index.toString());
     controller.selectTransition(item.index.toString());
   };
 
@@ -207,12 +227,23 @@ export const Hierarchy: React.FC = () => {
     if (state && state instanceof State) {
       return controller.states.handleContextMenu(state, { event: mouse });
     }
+    if (state && state instanceof FinalState) {
+      return controller.states.handleFinalStateContextMenu(state, {
+        event: mouse,
+      });
+    }
     const transition = controller.transitions.get(item.index.toString());
     if (transition) {
       return controller.transitions.handleContextMenu(transition, {
         event: mouse,
       });
     }
+    const note = controller.notes.get(item.index.toString());
+    if (note) {
+      return controller.notes.handleContextMenu(note, {
+        event: mouse,
+      });
+    }
   };
 
   const onDragStart = (item: TreeItem, actions: TreeItemActions) => (e) => {
@@ -284,7 +315,13 @@ export const Hierarchy: React.FC = () => {
         return setSelectedItems([transitionId]);
       }
     }
-  }, [states, transitions]);
+
+    for (const [noteId, note] of Object.entries(notes)) {
+      if (note?.selection) {
+        return setSelectedItems([noteId]);
+      }
+    }
+  }, [notes, states, transitions]);
 
   return (
     <div className={twMerge(theme !== 'light' && 'rct-dark')}>

src/renderer/src/components/Hierarchy/TitleRender.tsx

@@ -1,6 +1,7 @@
 import { ReactComponent as InitialStateIcon } from '@renderer/assets/icons/arrow_down_right.svg';
 import { ReactComponent as ChoiceStateIcon } from '@renderer/assets/icons/choice_state.svg';
 import { ReactComponent as FinalStateIcon } from '@renderer/assets/icons/final_state.svg';
+import { ReactComponent as NoteIcon } from '@renderer/assets/icons/note.svg';
 import { ReactComponent as StateIcon } from '@renderer/assets/icons/state.svg';
 import { ReactComponent as TransitionIcon } from '@renderer/assets/icons/transition-alt.svg';
 
@@ -24,6 +25,7 @@ const icons: Record<
   initialState: InitialStateIcon,
   transition: TransitionIcon,
   finalState: FinalStateIcon,
+  note: NoteIcon,
   choiceState: ChoiceStateIcon,
 };
 

src/renderer/src/components/Modules/Compiler.ts

@@ -28,8 +28,8 @@ function actualizeTransitions(oldTransitions: { [key: string]: CompilerTransitio
   for (const transitionId in oldTransitions) {
     const oldTransition = oldTransitions[transitionId];
     newTransitions[transitionId] = {
-      source: oldTransition.source,
-      target: oldTransition.target,
+      sourceId: oldTransition.source,
+      targetId: oldTransition.target,
       color: oldTransition.color,
       label: {
         trigger: oldTransition.trigger,
@@ -70,8 +70,8 @@ function actualizeInitialState(
   const initialId = generateId();
   const transitionId = generateId();
   const transition: Transition = {
-    source: initialId,
-    target: oldInitial.target,
+    sourceId: initialId,
+    targetId: oldInitial.target,
     color: randomColor(),
   };
   const initial: InitialState = {

src/renderer/src/hooks/useDiagramContextMenu.ts

@@ -241,7 +241,7 @@ export const useDiagramContextMenu = () => {
             editor.controller.transitions.changeTransition({
               ...transition.data,
               id: transition.id,
-              source: state.id,
+              sourceId: state.id,
             });
           },
         };
@@ -256,60 +256,64 @@ export const useDiagramContextMenu = () => {
             editor.controller.transitions.changeTransition({
               ...transition.data,
               id: transition.id,
-              target: state.id,
+              targetId: state.id,
             });
           },
         };
       };
 
       const sourceArray = [
         ...Array.from(editor.controller.states.getStates()).filter(
-          (value) => transition.data.source !== value[0]
+          (value) => transition.data.sourceId !== value[0]
         ),
       ];
 
       const targetArray = [
         ...Array.from(editor.controller.states.getStates()).filter(
-          (value) => transition.data.target !== value[0]
+          (value) => transition.data.targetId !== value[0]
         ),
       ];
 
       handleEvent(position, [
-        {
-          label: 'Копировать',
-          type: 'copy',
-          action: () => {
-            editor?.controller.copySelected();
-          },
-        },
-        {
-          label: 'Выбрать исход(source)',
-          type: 'source',
-          isFolder: true,
-          children: [...sourceArray.map(([_id, value]) => source(value))],
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          action: () => {},
-        },
-        {
-          label: 'Выбрать цель(target)',
-          type: 'target',
-          isFolder: true,
-          children: [...targetArray.map(([_id, value]) => target(value))],
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          action: () => {},
-        },
-        {
-          label: 'Посмотреть код',
-          type: 'showCodeAll',
-          action: () => {
-            openTab({
-              type: 'transition',
-              name: transition.id,
-              code: editor.model.serializer.getTransition(transition.id) ?? '',
-              language: 'json',
-            });
-          },
-        },
+        ...(transition.data.label
+          ? [
+              {
+                label: 'Копировать',
+                type: 'copy',
+                action: () => {
+                  editor?.controller.copySelected();
+                },
+              },
+              {
+                label: 'Выбрать исход(source)',
+                type: 'source',
+                isFolder: true,
+                children: [...sourceArray.map(([_id, value]) => source(value))],
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                action: () => {},
+              },
+              {
+                label: 'Выбрать цель(target)',
+                type: 'target',
+                isFolder: true,
+                children: [...targetArray.map(([_id, value]) => target(value))],
+                // eslint-disable-next-line @typescript-eslint/no-empty-function
+                action: () => {},
+              },
+              {
+                label: 'Посмотреть код',
+                type: 'showCodeAll',
+                action: () => {
+                  openTab({
+                    type: 'transition',
+                    name: transition.id,
+                    code: editor.model.serializer.getTransition(transition.id) ?? '',
+                    language: 'json',
+                  });
+                },
+              },
+            ]
+          : []),
         {
           label: 'Удалить',
           type: 'delete',

src/renderer/src/lib/data/EditorController/EditorController.ts

@@ -386,6 +386,8 @@ export class EditorController {
 
     this.removeSelection();
 
+    this.app.model.changeNoteSelection(id, true);
+
     note.setIsSelected(true);
   }
 
@@ -418,6 +420,7 @@ export class EditorController {
 
     this.notes.forEach((note) => {
       note.setIsSelected(false);
+      this.app.model.changeNoteSelection(note.id, false);
     });
 
     this.view.isDirty = true;