Рефакторинг UI компонентов, замена json на graphml

src/renderer/src/components/AboutTheProgramModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import { Modal } from './Modal/Modal';
+import { Modal } from '@renderer/components/UI';
 
 interface AboutTheProgramModalProps {
   isOpen: boolean;

src/renderer/src/components/ComponentAddModal.tsx

@@ -4,11 +4,11 @@ import { twMerge } from 'tailwind-merge';
 
 import UnknownIcon from '@renderer/assets/icons/unknown.svg';
 import { ScrollableList } from '@renderer/components/ScrollableList';
+import { Modal } from '@renderer/components/UI';
 import { EditorManager } from '@renderer/lib/data/EditorManager';
 import { ComponentEntry } from '@renderer/lib/data/PlatformManager';
 import { icons } from '@renderer/lib/drawable/Picto';
 
-import { Modal } from './Modal/Modal';
 import { convert } from './utils/html-element-to-react';
 import { stringToHTML } from './utils/stringToHTML';
 

src/renderer/src/components/ComponentDeleteModal.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { Modal } from './Modal/Modal';
-
-import { ComponentProto } from '@renderer/types/platform';
+import { Modal } from '@renderer/components/UI';
 import { Component as ComponentData } from '@renderer/types/diagram';
+import { ComponentProto } from '@renderer/types/platform';
 
 interface ComponentDeleteModalProps {
   isOpen: boolean;

src/renderer/src/components/ComponentEditModal.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { Modal } from '@renderer/components/UI';
 import { EditorManager } from '@renderer/lib/data/EditorManager';
 import { Component as ComponentData } from '@renderer/types/diagram';
 import { ComponentProto } from '@renderer/types/platform';
 
 import { ComponentFormFields } from './ComponentFormFields';
-import { Modal } from './Modal/Modal';
 
 interface ComponentEditModalProps {
   isOpen: boolean;

src/renderer/src/components/ComponentFormFieldLabel.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import { ReactComponent as QuestionMark } from '@renderer/assets/icons/question-mark.svg';
-
-import { WithHint } from './WithHint';
+import { WithHint } from '@renderer/components/UI';
 
 interface ComponentFormFieldLabelProps {
   label: string;

src/renderer/src/components/CreateModal.tsx

@@ -5,7 +5,14 @@ import { twMerge } from 'tailwind-merge';
 
 import { ReactComponent as AddIcon } from '@renderer/assets/icons/add.svg';
 import { ReactComponent as SubtractIcon } from '@renderer/assets/icons/subtract.svg';
-import { Select, SelectOption } from '@renderer/components/UI';
+import {
+  Select,
+  SelectOption,
+  WithHint,
+  Modal,
+  ColorInput,
+  TextInput,
+} from '@renderer/components/UI';
 import { CanvasEditor } from '@renderer/lib/CanvasEditor';
 import { EditorManager } from '@renderer/lib/data/EditorManager';
 import { operatorSet } from '@renderer/lib/data/PlatformManager';
@@ -20,10 +27,6 @@ import {
 import { ArgumentProto } from '@renderer/types/platform';
 
 import { defaultTransColor } from './DiagramEditor';
-import { ColorInput } from './Modal/ColorInput';
-import { Modal } from './Modal/Modal';
-import { TextInput } from './Modal/TextInput';
-import { WithHint } from './WithHint';
 
 const operandOptions = [
   {

src/renderer/src/components/CreateSchemeModal/CreateSchemeModal.tsx

@@ -5,7 +5,7 @@ import { EditorManager } from '@renderer/lib/data/EditorManager';
 import { PlatformSelection } from './PlatformSelection';
 import { TemplateSelection } from './TemplateSelection';
 
-import { Modal } from '../Modal/Modal';
+import { Modal } from '../UI/Modal/Modal';
 import { TabPanel } from '../UI/Tabs/TabPanel';
 import { Tabs } from '../UI/Tabs/Tabs';
 

src/renderer/src/components/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Modal } from './Modal/Modal';
+import { Modal } from '@renderer/components/UI';
 
 export type ErrorModalData = {
   text: JSX.Element;

src/renderer/src/components/EventsModal.tsx

@@ -1,16 +1,12 @@
 import React, { useLayoutEffect, useState } from 'react';
 
-import './Modal/style.css';
-import { Select, SelectOption } from '@renderer/components/UI';
+import { Select, SelectOption, WithHint, Modal } from '@renderer/components/UI';
 import { CanvasEditor } from '@renderer/lib/CanvasEditor';
 import { EditorManager } from '@renderer/lib/data/EditorManager';
 import { State } from '@renderer/lib/drawable/State';
 import { Action, Event } from '@renderer/types/diagram';
 import { ArgumentProto } from '@renderer/types/platform';
 
-import { Modal } from './Modal';
-import { WithHint } from './WithHint';
-
 import { EventSelection } from '../lib/drawable/Events';
 
 type ArgSet = { [k: string]: string };

src/renderer/src/components/MainContainer/MainContainer.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+
+import { useDropzone } from 'react-dropzone';
+import { twMerge } from 'tailwind-merge';
+
+import { Documentations, Scale } from '@renderer/components';
+import { CanvasEditor } from '@renderer/lib/CanvasEditor';
+import { EditorManager } from '@renderer/lib/data/EditorManager';
+
+import { NotInitialized } from './NotInitialized';
+import { Tabs } from './Tabs';
+
+interface MainContainerProps {
+  manager: EditorManager;
+  editor: CanvasEditor | null;
+  setEditor: (editor: CanvasEditor | null) => void;
+  onRequestOpenFile: (path?: string) => void;
+}
+
+export const MainContainer: React.FC<MainContainerProps> = ({
+  manager,
+  editor,
+  setEditor,
+  onRequestOpenFile,
+}) => {
+  const isInitialized = manager.useData('isInitialized');
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      onRequestOpenFile(acceptedFiles[0].path);
+    },
+    [onRequestOpenFile]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    noKeyboard: true,
+    noClick: true,
+    accept: {
+      '.graphml': [],
+    },
+    multiple: false,
+    onDrop,
+  });
+
+  return (
+    <div
+      className={twMerge(
+        'relative w-full min-w-0 bg-bg-primary',
+        'after:pointer-events-none after:absolute after:inset-0 after:z-50 after:block after:bg-bg-hover after:opacity-0 after:transition-all after:content-[""]',
+        isDragActive && 'opacity-30'
+      )}
+      {...getRootProps()}
+    >
+      <input {...getInputProps()} />
+
+      {isInitialized ? (
+        <Tabs manager={manager} editor={editor} setEditor={setEditor} />
+      ) : (
+        <NotInitialized />
+      )}
+
+      {editor && <Scale editor={editor} manager={manager} />}
+
+      <Documentations topOffset={!!isInitialized} />
+    </div>
+  );
+};

src/renderer/src/components/MainContainer/NotInitialized.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { ReactComponent as Icon } from '@renderer/assets/icons/icon.svg';
+
+const combination = [
+  {
+    name: 'Создать файл',
+    command: {
+      button1: 'Ctrl',
+      button2: 'N',
+    },
+  },
+  {
+    name: 'Открыть файл',
+    command: {
+      button1: 'Ctrl',
+      button2: 'O',
+    },
+  },
+  {
+    name: 'Импорт схемы (Cyberiada-GraphML)',
+    command: {
+      button1: 'Ctrl',
+      button2: 'I',
+    },
+  },
+  {
+    name: 'Во весь экран',
+    command: {
+      button1: 'F11',
+      button2: undefined,
+    },
+  },
+];
+
+export const NotInitialized: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center pt-24">
+      <Icon />
+      <p className="py-6 text-center text-base">
+        Перетащите файл в эту область или воспользуйтесь комбинацией клавиш:
+      </p>
+      <div>
+        {combination.map((value, key) => (
+          <div key={key} className="my-3 flex justify-between">
+            <div className="px-1">{value.name}</div>
+            <div className="flex items-start">
+              <div className="rounded border-b-2 bg-gray-600 px-1 text-gray-300">
+                {value.command.button1}
+              </div>
+              {value.command.button2 && (
+                <>
+                  <p className="px-1">+</p>
+                  <div className="rounded border-b-2 bg-gray-600 px-1 text-gray-300">
+                    {value.command.button2}
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

src/renderer/src/components/MainContainer/index.ts

@@ -0,0 +1 @@
+export * from './MainContainer';

src/renderer/src/components/SaveRemindModal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useForm } from 'react-hook-form';
 
-import { Modal } from './Modal/Modal';
+import { Modal } from '@renderer/components/UI';
 
 interface SaveRemindModalProps {
   isOpen: boolean;