pull from upstream

kruzhok-team · Oct 4, 2023 · a84f5a3 · a84f5a3
2 parents 4d65ea7 + 8e84118
commit a84f5a3
Show file tree

Hide file tree

Showing 13 changed files with 246 additions and 109 deletions.
diff --git a/demos/demo4 (schema v2).json b/demos/demo4 (schema v2).json
@@ -206,13 +206,17 @@
   "components": {
     "diod1": {
       "parameters": {
-        "pin": "12"
+        "pin": "12",
+        "labelColor": "#0008f5",
+        "label": "1"
       },
       "type": "LED"
     },
     "button1": {
       "parameters": {
-        "pin": "4"
+        "pin": "4",
+        "labelColor": "#c70000",
+        "label": "1"
       },
       "type": "Button"
     }

diff --git a/src/renderer/src/components/ComponentEditModal.tsx b/src/renderer/src/components/ComponentEditModal.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
-import { Modal } from './Modal/Modal';
-
-import { ComponentProto } from '@renderer/types/platform';
 import { Component as ComponentData } from '@renderer/types/diagram';
+import { ComponentProto } from '@renderer/types/platform';
+
+import { Modal } from './Modal/Modal';
 
 interface ComponentEditModalProps {
   isOpen: boolean;
@@ -77,15 +77,37 @@ export const ComponentEditModal: React.FC<ComponentEditModalProps> = ({
       {proto.singletone ? (
         ''
       ) : (
-        <label className="mb-2 flex items-center gap-2">
-          Name:
-          <input
-            className="w-[250px] max-w-[250px] rounded border border-white bg-transparent px-2 py-1 outline-none transition-colors placeholder:font-normal"
-            maxLength={20}
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-          />
-        </label>
+        <>
+          <label className="mb-2 flex items-center gap-2">
+            Название:
+            <input
+              className="w-[250px] max-w-[250px] rounded border border-white bg-transparent px-2 py-1 outline-none transition-colors placeholder:font-normal"
+              maxLength={20}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </label>
+          <label key="label" className="flex items-center gap-2">
+            Метка:
+            <input
+              className="w-[250px] max-w-[250px] rounded border bg-transparent px-2 py-1 outline-none transition-colors placeholder:font-normal"
+              value={parameters['label'] ?? ''}
+              name={'label'}
+              maxLength={3}
+              onChange={handleInputChange}
+            />
+          </label>
+          <label key="labelColor" className="flex items-center gap-2">
+            Цвет метки:
+            <input
+              className="ml-2 rounded border border-neutral-200 bg-transparent text-neutral-50 outline-none transition-colors focus:border-neutral-50"
+              value={parameters['labelColor'] ?? '#FFFFFF'}
+              name={'labelColor'}
+              type="color"
+              onChange={handleInputChange}
+            />
+          </label>
+        </>
       )}
       {Object.entries(proto.parameters ?? {}).map(([idx, param]) => {
         const name = param.name ?? idx;

diff --git a/src/renderer/src/components/CreateModal.tsx b/src/renderer/src/components/CreateModal.tsx
@@ -105,10 +105,7 @@ export const CreateModal: React.FC<CreateModalProps> = ({
       value: idx,
       label: (
         <div className="flex items-center">
-          <img
-            src={machine.platform.getComponentIconUrl(idx, true)}
-            className="mr-1 h-7 w-7 object-contain"
-          />
+          {machine.platform.getFullComponentIcon(idx, 'mr-1 h-7 w-7')}
           {idx}
         </div>
       ),
@@ -240,8 +237,7 @@ export const CreateModal: React.FC<CreateModalProps> = ({
   const [argForm, setArgForm] = useState<ArgForm>([]);
 
   const retrieveArgForm = (compo: string, method: string) => {
-    const compoType = machine.platform.resolveComponent(compo);
-    const component = machine.platform.data.components[compoType];
+    const component = machine.platform.getComponent(compo);
     if (!component) return [];
 
     const argList: ArgumentProto[] | undefined = isEditingEvent
@@ -537,7 +533,9 @@ export const CreateModal: React.FC<CreateModalProps> = ({
       color: formData.color,
     };
 
-    onSubmit(data);
+    if ((isData !== undefined && method.length !== 0) || isData === undefined) {
+      onSubmit(data);
+    }
   });
   //-----------------------------------------------------------------------------------------------------
 
@@ -639,7 +637,7 @@ export const CreateModal: React.FC<CreateModalProps> = ({
           (dataDo ? (
             <p className="text-success">Событие существует!</p>
           ) : (
-            <p className="text-error">Событие отсутствует!</p>
+            <p className="text-orange-500">Событие отсутствует!</p>
           ))}
         {parameters?.length >= 0 ? <div className="mb-6">{parameters}</div> : ''}
       </div>
@@ -776,7 +774,7 @@ export const CreateModal: React.FC<CreateModalProps> = ({
       <div className="flex">
         <label className="mx-1">Делай: </label>
         <div className="ml-1 mr-2 flex h-44 w-full flex-col overflow-y-auto break-words rounded bg-neutral-700 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-[#FFFFFF] scrollbar-thumb-rounded-full">
-          {method === undefined ||
+          {method.length === 0 ||
             method.map((data, key) => (
               <div
                 key={'Methods' + key}
@@ -792,10 +790,7 @@ export const CreateModal: React.FC<CreateModalProps> = ({
                     'm-2 flex min-h-[3rem] w-36 items-center justify-around rounded-lg border-2 bg-neutral-700 px-1'
                   )}
                 >
-                  <img
-                    style={{ height: '32px', width: '32px' }}
-                    src={machine.platform.getComponentIconUrl(data.component, true)}
-                  />
+                  {machine.platform.getFullComponentIcon(data.component)}
                   <div className="h-full border-2 border-white"></div>
                   <img
                     style={{ height: '32px', width: '32px' }}
@@ -810,6 +805,7 @@ export const CreateModal: React.FC<CreateModalProps> = ({
                 {data.args !== undefined || <div>{data.args}</div>}
               </div>
             ))}
+          {method.length === 0 && <div className="flex text-error">Вы не выбрали действия!</div>}
         </div>
         <div className="flex flex-col">
           <button

diff --git a/src/renderer/src/components/EventsModal.tsx b/src/renderer/src/components/EventsModal.tsx
@@ -58,10 +58,7 @@ export const CreateEventsModal: React.FC<EventsModalProps> = ({
       value: idx,
       label: (
         <div className="flex items-center">
-          <img
-            src={machine.platform.getComponentIconUrl(idx, true)}
-            className="mr-1 h-7 w-7 object-contain"
-          />
+          {machine.platform.getFullComponentIcon(idx, 'mr-1 h-7 w-7')}
           {idx}
         </div>
       ),
@@ -128,8 +125,7 @@ export const CreateEventsModal: React.FC<EventsModalProps> = ({
   const [argForm, setArgForm] = useState<ArgForm>([]);
 
   const retrieveArgForm = (compo: string, method: string) => {
-    const compoType = machine.platform.resolveComponent(compo);
-    const component = machine.platform.data.components[compoType];
+    const component = machine.platform.getComponent(compo);
     if (!component) return [];
 
     const argList: ArgumentProto[] | undefined = isEditingEvent

diff --git a/src/renderer/src/components/Explorer.tsx b/src/renderer/src/components/Explorer.tsx
@@ -3,7 +3,6 @@ import React, { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import { ReactComponent as AddIcon } from '@renderer/assets/icons/new transition.svg';
-import UnknownIcon from '@renderer/assets/icons/unknown.svg';
 import { ComponentEditModal, ComponentAddModal, ComponentDeleteModal } from '@renderer/components';
 import { useAddComponent, useEditDeleteComponent } from '@renderer/hooks';
 import { CanvasEditor } from '@renderer/lib/CanvasEditor';
@@ -86,12 +85,7 @@ export const Explorer: React.FC<ExplorerProps> = ({ editor, manager }) => {
               onDoubleClick={() => onCompDblClick(key)}
               onContextMenu={() => onCompRightClick(key)}
             >
-              <img
-                className="h-8 w-8 object-contain"
-                src={
-                  editor?.container.machine.platform?.getComponentIconUrl(key, true) ?? UnknownIcon
-                }
-              />
+              {editor?.container.machine.platform?.getFullComponentIcon(key)}
               <p className="ml-2 line-clamp-1">{key}</p>
             </div>
           )}

diff --git a/src/renderer/src/components/Menu.tsx b/src/renderer/src/components/Menu.tsx
@@ -18,7 +18,7 @@ export const Menu: React.FC<MenuProps> = (props: MenuProps) => {
     },
     {
       text: 'Открыть...',
-      onClick: props.onRequestOpenFile,
+      onClick: () => props.onRequestOpenFile(), // Если передавать просто функцию, в параметры может попать то что не нужно
     },
     {
       text: 'Сохранить',

diff --git a/src/renderer/src/components/Setting.tsx b/src/renderer/src/components/Setting.tsx
@@ -32,6 +32,7 @@ export const Setting: React.FC<SettingProps> = () => {
             options={themeOptions}
             value={themeOptions.find((o) => o.value === theme)}
             onChange={({ value }: any) => setTheme(value)}
+            isSearchable={false}
           />
         </div>
       </div>

diff --git a/src/renderer/src/hooks/useDiagramContextMenu.ts b/src/renderer/src/hooks/useDiagramContextMenu.ts
@@ -111,12 +111,6 @@ export const useDiagramContextMenu = (editor: CanvasEditor | null, manager: Edit
             });
           },
         },
-        {
-          label: 'Центрировать камеру',
-          action: () => {
-            editor?.container.viewCentering();
-          },
-        },
         {
           label: 'Удалить',
           action: () => {
@@ -158,12 +152,6 @@ export const useDiagramContextMenu = (editor: CanvasEditor | null, manager: Edit
             });
           },
         },
-        {
-          label: 'Центрировать камеру',
-          action: () => {
-            editor?.container.viewCentering();
-          },
-        },
         {
           label: 'Удалить',
           action: () => {

diff --git a/src/renderer/src/lib/basic/Container.ts b/src/renderer/src/lib/basic/Container.ts
@@ -230,8 +230,17 @@ export class Container {
       arrY.push(transition.condition.bounds.y);
     });
 
-    this.app.manager.data.scale = 1;
-    this.app.manager.data.offset = { x: -Math.min(...arrX), y: -Math.min(...arrY) };
+    let minX = Math.min(...arrX);
+    let minY = Math.min(...arrY);
+    // Если нод нет то минимум координат будет Infinity, в таком случае нужно привести к нулю
+    minX = isFinite(minX) ? -minX : 0;
+    minY = isFinite(minY) ? -minY : 0;
+    // Отступ для красоты
+    minX += 40;
+    minY += 40;
+
+    this.setScale(1);
+    this.app.manager.data.offset = { x: minX, y: minY };
 
     this.isDirty = true;
   }

diff --git a/src/renderer/src/lib/data/EditorManager.ts b/src/renderer/src/lib/data/EditorManager.ts
@@ -55,6 +55,8 @@ export class EditorManager {
   resetEditor?: () => void;
 
   init(basename: string | null, name: string, elements: Elements) {
+    this.data.isInitialized = false; // Для того чтобы весь интрфейс обновился
+
     this.data = emptyEditorData();
 
     const self = this;