add History tab

src/renderer/src/components/Compiler.tsx → src/renderer/src/components/Sidebar/Compiler.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
+
 import { twMerge } from 'tailwind-merge';
 
+import { Compiler } from '@renderer/components/Modules/Compiler';
+import { Settings } from '@renderer/components/Modules/Settings';
+import { CanvasEditor } from '@renderer/lib/CanvasEditor';
+import { EditorManager } from '@renderer/lib/data/EditorManager';
 import { useSidebar } from '@renderer/store/useSidebar';
-import { CompilerResult } from '@renderer/types/CompilerTypes';
-
-import { Compiler } from '../components/Modules/Compiler';
-import { Settings } from '../components/Modules/Settings';
 import { useTabs } from '@renderer/store/useTabs';
-import { EditorManager } from '@renderer/lib/data/EditorManager';
-import { CanvasEditor } from '@renderer/lib/CanvasEditor';
+import { CompilerResult } from '@renderer/types/CompilerTypes';
 
 export interface CompilerProps {
   manager: EditorManager;
@@ -178,4 +178,4 @@ export const CompilerTab: React.FC<CompilerProps> = ({
       </div>
     </section>
   );
-};
+};

src/renderer/src/components/Explorer.tsx → src/renderer/src/components/Sidebar/Explorer.tsx

@@ -8,7 +8,7 @@ import { useAddComponent, useEditDeleteComponent } from '@renderer/hooks';
 import { CanvasEditor } from '@renderer/lib/CanvasEditor';
 import { EditorManager } from '@renderer/lib/data/EditorManager';
 
-import { ScrollableList } from './ScrollableList';
+import { ScrollableList } from '@renderer/components/ScrollableList';
 
 interface ExplorerProps {
   editor: CanvasEditor | null;

src/renderer/src/components/Sidebar/History.tsx

@@ -0,0 +1,136 @@
+import React, { useId } from 'react';
+
+import { twMerge } from 'tailwind-merge';
+
+import { ReactComponent as Arrow } from '@renderer/assets/icons/arrow-down.svg';
+import { CanvasEditor } from '@renderer/lib/CanvasEditor';
+import { Action, actionDescriptions, Stack } from '@renderer/lib/data/UndoRedo';
+
+interface HistoryProps {
+  editor: CanvasEditor | null;
+}
+
+const groupByNumberOfConnectedActions = (stack: Stack) => {
+  const res: Array<Action<any> | Action<any>[]> = [];
+
+  let i = stack.length - 1;
+  while (i >= 0) {
+    const numberOfConnectedActions = stack[i].numberOfConnectedActions;
+    if (numberOfConnectedActions) {
+      const block: Action<any>[] = [];
+      for (let j = 0; j < numberOfConnectedActions + 1; j++) {
+        block.push(stack[i]);
+        i--;
+      }
+      res.push(block.reverse());
+    } else {
+      res.push(stack[i]);
+      i--;
+    }
+  }
+
+  return res;
+};
+
+const HistoryItem: React.FC<{ data: Action<any>; labelClassName?: string }> = ({
+  data,
+  labelClassName,
+}) => {
+  const { type } = data;
+
+  const id = useId();
+
+  return (
+    <div className="w-full">
+      <input id={id} type="checkbox" className="peer sr-only" />
+      <label
+        htmlFor={id}
+        className={twMerge(
+          'flex w-full items-center justify-between rounded-sm p-1 peer-checked:rounded-b-none peer-checked:bg-bg-hover hover:bg-bg-hover',
+          labelClassName
+        )}
+      >
+        {actionDescriptions[type](data.args).name}
+        <Arrow height={20} width={20} />
+      </label>
+
+      <div className="max-h-0 overflow-hidden rounded-b-sm bg-bg-hover transition-all peer-checked:max-h-[1000px]">
+        <p className="whitespace-pre-wrap border-t border-border-primary p-1">
+          {actionDescriptions[type](data.args).description}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const HistoryWithoutEditor: React.FC = () => {
+  return <p>Нельзя посмотреть историю до инциализации</p>;
+};
+
+const HistoryWithEditor: React.FC<{ editor: CanvasEditor }> = ({ editor }) => {
+  const { undoStack, redoStack } = editor.container.machine.undoRedo.use();
+
+  return (
+    <div>
+      <div className="mb-4 flex gap-1">
+        <button className="btn-secondary" onClick={() => editor.container.machine.undoRedo.undo()}>
+          Назад
+        </button>
+        <button className="btn-secondary" onClick={() => editor.container.machine.undoRedo.redo()}>
+          Вперёд
+        </button>
+      </div>
+
+      <div>
+        <h3 className="mb-3 font-semibold">Undo Stack</h3>
+        <div className="h-[400px] space-y-1 overflow-y-auto pr-3 scrollbar-thin scrollbar-track-scrollbar-track scrollbar-thumb-scrollbar-thumb scrollbar-track-rounded-full scrollbar-thumb-rounded-full">
+          {groupByNumberOfConnectedActions(undoStack).map((item, i) => {
+            if (Array.isArray(item)) {
+              return (
+                <div key={i} className="space-y-1 rounded-sm border border-border-primary p-1">
+                  {item.map((data, j) => (
+                    <HistoryItem key={j} data={data} />
+                  ))}
+                </div>
+              );
+            }
+
+            return <HistoryItem key={i} data={item} labelClassName="pr-2" />;
+          })}
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 font-semibold">Redo Stack</h3>
+        <div className="h-[400px] space-y-1 overflow-y-auto pr-3 scrollbar-thin scrollbar-track-scrollbar-track scrollbar-thumb-scrollbar-thumb scrollbar-track-rounded-full scrollbar-thumb-rounded-full">
+          {groupByNumberOfConnectedActions(redoStack).map((item, i) => {
+            if (Array.isArray(item)) {
+              return (
+                <div key={i} className="space-y-1 rounded-sm border border-border-primary p-1">
+                  {item.map((data, j) => (
+                    <HistoryItem key={j} data={data} />
+                  ))}
+                </div>
+              );
+            }
+
+            return <HistoryItem key={i} data={item} />;
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const History: React.FC<HistoryProps> = ({ editor }) => {
+  return (
+    <section className="flex flex-col">
+      <h3 className="mx-4 mb-3 border-b border-border-primary py-2 text-center text-lg">
+        История изменений
+      </h3>
+      <div className="px-4">
+        {editor ? <HistoryWithEditor editor={editor} /> : <HistoryWithoutEditor />}
+      </div>
+    </section>
+  );
+};

src/renderer/src/components/Loader.tsx → src/renderer/src/components/Sidebar/Loader.tsx

@@ -1,19 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import { ReactComponent as Update } from '@renderer/assets/icons/update.svg';
-import { ReactComponent as Setting } from '@renderer/assets/icons/settings.svg';
+
 import { twMerge } from 'tailwind-merge';
-import { Device } from '@renderer/types/FlasherTypes';
-import { CompilerResult } from '@renderer/types/CompilerTypes';
+
+import { ReactComponent as Setting } from '@renderer/assets/icons/settings.svg';
+import { ReactComponent as Update } from '@renderer/assets/icons/update.svg';
+import { ErrorModal, ErrorModalData } from '@renderer/components/ErrorModal';
+import { FlasherSelectModal } from '@renderer/components/FlasherSelectModal';
 import {
   FLASHER_CONNECTED,
   FLASHER_CONNECTING,
   FLASHER_CONNECTION_ERROR,
   FLASHER_NO_CONNECTION,
   Flasher,
-} from './Modules/Flasher';
+} from '@renderer/components/Modules/Flasher';
 import { EditorManager } from '@renderer/lib/data/EditorManager';
-import { FlasherSelectModal } from './FlasherSelectModal';
-import { ErrorModal, ErrorModalData } from './ErrorModal';
+import { CompilerResult } from '@renderer/types/CompilerTypes';
+import { Device } from '@renderer/types/FlasherTypes';
 
 const LAPKI_FLASHER = window.api.LAPKI_FLASHER;
 
@@ -92,12 +94,12 @@ export const Loader: React.FC<FlasherProps> = ({ manager, compilerData }) => {
 
   const handleErrorMessageDisplay = async () => {
     // выводимое для пользователя сообщение
-    var errorMsg: JSX.Element = <p>`Неизвестный тип ошибки`</p>;
+    let errorMsg: JSX.Element = <p>`Неизвестный тип ошибки`</p>;
     if (flasherIsLocal) {
       await window.electron.ipcRenderer
         .invoke('Module:getStatus', LAPKI_FLASHER)
         .then(function (obj) {
-          let errorDetails = obj.details;
+          const errorDetails = obj.details;
           switch (obj.code) {
             // код 0 означает, что не было попытки запустить загрузчик, по-идее такая ошибка не может возникнуть, если только нет какой-то ошибки в коде.
             case 0:

src/renderer/src/components/Sidebar/Menus.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from 'react';
+
 import { Resizable } from 're-resizable';
 import { twMerge } from 'tailwind-merge';
+
 import { useSidebar } from '@renderer/store/useSidebar';
 
 interface MenusProps {
@@ -50,7 +52,7 @@ export const Menus: React.FC<MenusProps> = ({ items }) => {
       maxWidth={maxWidth}
       onResize={handleResize}
       onResizeStop={handleResizeStop}
-      className="overflow-y-auto overflow-x-hidden border-r border-border-primary bg-bg-secondary scrollbar-thin scrollbar-track-slate-700 scrollbar-thumb-slate-500"
+      className="overflow-hidden border-r border-border-primary bg-bg-secondary scrollbar-thin scrollbar-track-slate-700 scrollbar-thumb-slate-500"
     >
       <div className={twMerge('h-full w-full', isCollapsed && 'opacity-0')}>
         {items.map((Element, i) => (

src/renderer/src/components/Setting.tsx → src/renderer/src/components/Sidebar/Setting.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { useThemeContext } from '@renderer/store/ThemeContext';
 import { Select } from '@renderer/components/UI';
+import { useThemeContext } from '@renderer/store/ThemeContext';
 
 interface SettingProps {}
 

src/renderer/src/components/Sidebar/Sidebar.tsx

@@ -1,20 +1,25 @@
 import React, { useMemo, useState } from 'react';
 
-import { Explorer, Menu, CompilerTab, Loader } from '../../components';
-
-import { ReactComponent as MenuIcon } from '@renderer/assets/icons/menu.svg';
-import { ReactComponent as ComponentsIcon } from '@renderer/assets/icons/components.svg';
 import { ReactComponent as CompilerIcon } from '@renderer/assets/icons/compiler.svg';
+import { ReactComponent as ComponentsIcon } from '@renderer/assets/icons/components.svg';
 import { ReactComponent as DriveIcon } from '@renderer/assets/icons/drive.svg';
+import { ReactComponent as HistoryIcon } from '@renderer/assets/icons/history.svg';
+import { ReactComponent as MenuIcon } from '@renderer/assets/icons/menu.svg';
 import { ReactComponent as SettingsIcon } from '@renderer/assets/icons/settings.svg';
-import { Setting } from '../Setting';
+import { CanvasEditor } from '@renderer/lib/CanvasEditor';
+import { EditorManager } from '@renderer/lib/data/EditorManager';
+import { CompilerResult } from '@renderer/types/CompilerTypes';
 
+import { CompilerTab } from './Compiler';
+import { Explorer } from './Explorer';
+import { History } from './History';
 import { Labels } from './Labels';
+import { Loader } from './Loader';
+import { Menu } from './Menu';
 import { Menus } from './Menus';
+import { Setting } from './Setting';
+
 import { Badge } from '../UI';
-import { CompilerResult } from '@renderer/types/CompilerTypes';
-import { CanvasEditor } from '@renderer/lib/CanvasEditor';
-import { EditorManager } from '@renderer/lib/data/EditorManager';
 
 export interface SidebarCallbacks {
   onRequestNewFile: () => void;
@@ -67,6 +72,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
         setCompilerStatus={setCompilerStatus}
       />,
       <Loader manager={manager} compilerData={compilerData} />,
+      <History editor={editor} />,
       <Setting />,
     ],
     [manager, editor, compilerData, openData, compilerStatus]
@@ -91,9 +97,12 @@ export const Sidebar: React.FC<SidebarProps> = ({
         Icon: <DriveIcon />,
       },
       {
-        Icon: <SettingsIcon />,
+        Icon: <HistoryIcon />,
         bottom: true,
       },
+      {
+        Icon: <SettingsIcon />,
+      },
     ],
     [isEditorDataStale]
   );

src/renderer/src/components/index.ts

@@ -1,12 +1,8 @@
 export * from './Modal';
 export * from './CodeEditor';
-export * from './Compiler';
 export * from './CreateModal';
 export * from './DiagramEditor';
 export * from './Documentation/Documentation';
-export * from './Explorer';
-export * from './Loader';
-export * from './Menu';
 export * from './SaveRemindModal';
 export * from './PlatformSelectModal';
 export * from './FlasherSelectModal';

src/renderer/src/lib/data/StateMachine.ts

@@ -314,7 +314,7 @@ export class StateMachine extends EventEmitter {
 
     // Вычисляем новую координату, потому что после отсоединения родителя не сможем.
     const newBounds = { ...state.bounds, ...state.compoundPosition };
-    this.changeStatePosition(id, state.bounds, newBounds);
+    this.changeStatePosition(id, state.bounds, newBounds, canUndo);
     // this.container.app.manager.changeStateBounds(id, newBounds);
 
     if (canUndo) {
@@ -617,7 +617,7 @@ export class StateMachine extends EventEmitter {
 
       if (canUndo) {
         this.undoRedo.do({
-          type: 'changeEvent',
+          type: 'changeEventAction',
           args: { stateId, event, newValue, prevValue },
         });
       }