Подсказки при наведении (#119)

kruzhok-team · Dec 6, 2023 · 7d07656 · 7d07656
1 parent a8897c2
commit 7d07656
Show file tree

Hide file tree

Showing 7 changed files with 202 additions and 64 deletions.
diff --git a/src/renderer/src/assets/icons/question-mark.svg b/src/renderer/src/assets/icons/question-mark.svg
diff --git a/src/renderer/src/components/ComponentFormFieldLabel.tsx b/src/renderer/src/components/ComponentFormFieldLabel.tsx
@@ -1,17 +1,34 @@
 import React from 'react';
 
+import { ReactComponent as QuestionMark } from '@renderer/assets/icons/question-mark.svg';
+
+import { WithHint } from './WithHint';
+
 interface ComponentFormFieldLabelProps {
   label: string;
+  hint?: string;
   children: React.ReactNode;
 }
 
 export const ComponentFormFieldLabel: React.FC<ComponentFormFieldLabelProps> = ({
   label,
+  hint,
   children,
 }) => {
   return (
     <label className="flex items-center gap-2">
-      <span className="w-24">{label}</span>
+      <div className="flex w-28 items-center gap-1">
+        <span>{label}</span>
+        {hint && (
+          <WithHint hint={hint}>
+            {(props) => (
+              <div className="shrink-0" {...props}>
+                <QuestionMark className="h-5 w-5" />
+              </div>
+            )}
+          </WithHint>
+        )}
+      </div>
       {children}
     </label>
   );

diff --git a/src/renderer/src/components/ComponentFormFields.tsx b/src/renderer/src/components/ComponentFormFields.tsx
@@ -70,7 +70,7 @@ export const ComponentFormFields: React.FC<ComponentFormFieldsProps> = ({
         const name = param.name ?? idx;
         const value = parameters[name] ?? '';
         return (
-          <ComponentFormFieldLabel key={idx} label={name + ':'}>
+          <ComponentFormFieldLabel key={idx} label={name + ':'} hint={param.description}>
             <input
               className="w-[250px] rounded border border-border-primary bg-transparent px-2 py-1 text-text-primary outline-none"
               value={value}

diff --git a/src/renderer/src/components/CreateModal.tsx b/src/renderer/src/components/CreateModal.tsx
@@ -23,6 +23,7 @@ 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 = [
   {
@@ -128,28 +129,38 @@ export const CreateModal: React.FC<CreateModalProps> = ({
   const isEditingEvent = isData === undefined;
 
   const compoEntry = (idx: string) => {
+    const proto = machine.platform.getComponent(idx);
+
     return {
       value: idx,
       label: (
-        <div className="flex items-center">
-          {machine.platform.getFullComponentIcon(idx, 'mr-1 h-7 w-7')}
-          {idx}
-        </div>
+        <WithHint hint={proto?.description ?? ''} offset={15} placement="right">
+          {(props) => (
+            <div className="flex items-center" {...props}>
+              {machine.platform.getFullComponentIcon(idx, 'mr-1 h-7 w-7')}
+              {idx}
+            </div>
+          )}
+        </WithHint>
       ),
     };
   };
 
-  const eventEntry = (name: string, compo?: string) => {
+  const eventEntry = (name: string, compo?: string, description?: string) => {
     return {
       value: name,
       label: (
-        <div className="flex items-center">
-          <img
-            src={machine.platform.getEventIconUrl(compo ?? components.value, name, true)}
-            className="mr-1 h-7 w-7 object-contain"
-          />
-          {name}
-        </div>
+        <WithHint hint={description ?? ''} offset={15} placement="right">
+          {(props) => (
+            <div className="flex items-center" {...props}>
+              <img
+                src={machine.platform.getEventIconUrl(compo ?? components.value, name, true)}
+                className="mr-1 h-7 w-7 object-contain"
+              />
+              {name}
+            </div>
+          )}
+        </WithHint>
       ),
     };
   };
@@ -169,21 +180,25 @@ export const CreateModal: React.FC<CreateModalProps> = ({
     };
   };
 
-  const conditionEntry = (name: string, compo?: string) => {
+  const conditionEntry = (name: string, compo?: string, description?: string) => {
     return {
       value: name,
       label: (
-        <div className="flex items-center">
-          <img
-            src={machine.platform.getVariableIconUrl(
-              compo ? param1Components.value : param2Components.value,
-              name,
-              true
-            )}
-            className="mr-1 h-7 w-7 object-contain"
-          />
-          {name}
-        </div>
+        <WithHint hint={description ?? ''} offset={15} placement="right">
+          {(props) => (
+            <div className="flex items-center" {...props}>
+              <img
+                src={machine.platform.getVariableIconUrl(
+                  compo ? param1Components.value : param2Components.value,
+                  name,
+                  true
+                )}
+                className="mr-1 h-7 w-7 object-contain"
+              />
+              {name}
+            </div>
+          )}
+        </WithHint>
       ),
     };
   };
@@ -215,18 +230,20 @@ export const CreateModal: React.FC<CreateModalProps> = ({
 
   const optionsMethods = !components
     ? []
-    : machine.platform.getAvailableEvents(components.value).map(({ name }) => eventEntry(name));
+    : machine.platform
+        .getAvailableEvents(components.value)
+        .map(({ name, description }) => eventEntry(name, undefined, description));
 
   const optionsParam1Methods = !components
     ? []
     : machine.platform
         .getAvailableVariables(param1Components.value)
-        .map(({ name }) => conditionEntry(name, param1Components.value));
+        .map(({ name, description }) => conditionEntry(name, param1Components.value, description));
   const optionsParam2Methods = !components
     ? []
     : machine.platform
         .getAvailableVariables(param2Components.value)
-        .map(({ name }) => conditionEntry(name, param2Components.value));
+        .map(({ name, description }) => conditionEntry(name, param2Components.value, description));
 
   const [methods, setMethods] = useState<SelectOption | null>(optionsMethods[0]);
   const [param1Methods, setParam1Methods] = useState<SelectOption | null>(optionsParam1Methods[0]);

diff --git a/src/renderer/src/components/EventsModal.tsx b/src/renderer/src/components/EventsModal.tsx
@@ -10,6 +10,8 @@ import { State } from '@renderer/lib/drawable/State';
 import { Action, Event } from '@renderer/types/diagram';
 import { ArgumentProto } from '@renderer/types/platform';
 
+import { WithHint } from './WithHint';
+
 import { EventSelection } from '../lib/drawable/Events';
 
 type ArgSet = { [k: string]: string };
@@ -54,43 +56,57 @@ export const CreateEventsModal: React.FC<EventsModalProps> = ({
   const isEditingEvent = props.isData?.event.actionIdx === null;
 
   const compoEntry = (idx: string) => {
+    const proto = machine.platform.getComponent(idx);
+
     return {
       value: idx,
       label: (
-        <div className="flex items-center">
-          {machine.platform.getFullComponentIcon(idx, 'mr-1 h-7 w-7')}
-          {idx}
-        </div>
+        <WithHint hint={proto?.description ?? ''} offset={15} placement="right">
+          {(props) => (
+            <div className="flex items-center" {...props}>
+              {machine.platform.getFullComponentIcon(idx, 'mr-1 h-7 w-7')}
+              {idx}
+            </div>
+          )}
+        </WithHint>
       ),
     };
   };
 
-  const eventEntry = (name: string, compo?: string) => {
+  const eventEntry = (name: string, compo?: string, description?: string) => {
     return {
       value: name,
       label: (
-        <div className="flex items-center">
-          <img
-            src={machine.platform.getEventIconUrl(compo ?? components.value, name, true)}
-            className="mr-1 h-7 w-7 object-contain"
-          />
-          {name}
-        </div>
+        <WithHint hint={description ?? ''} offset={15} placement="right">
+          {(props) => (
+            <div className="flex items-center" {...props}>
+              <img
+                src={machine.platform.getEventIconUrl(compo ?? components.value, name, true)}
+                className="mr-1 h-7 w-7 object-contain"
+              />
+              {name}
+            </div>
+          )}
+        </WithHint>
       ),
     };
   };
 
-  const actionEntry = (name: string, compo?: string) => {
+  const actionEntry = (name: string, compo?: string, description?: string) => {
     return {
       value: name,
       label: (
-        <div className="flex items-center">
-          <img
-            src={machine.platform.getActionIconUrl(compo ?? components.value, name, true)}
-            className="mr-1 h-7 w-7 object-contain"
-          />
-          {name}
-        </div>
+        <WithHint hint={description ?? ''} offset={15} placement="right">
+          {(props) => (
+            <div className="flex items-center" {...props}>
+              <img
+                src={machine.platform.getActionIconUrl(compo ?? components.value, name, true)}
+                className="mr-1 h-7 w-7 object-contain"
+              />
+              {name}
+            </div>
+          )}
+        </WithHint>
       ),
     };
   };
@@ -107,8 +123,12 @@ export const CreateEventsModal: React.FC<EventsModalProps> = ({
   const optionsMethods = !components
     ? []
     : isEditingEvent
-    ? machine.platform.getAvailableEvents(components.value).map(({ name }) => eventEntry(name))
-    : machine.platform.getAvailableMethods(components.value).map(({ name }) => actionEntry(name));
+    ? machine.platform
+        .getAvailableEvents(components.value)
+        .map(({ name, description }) => eventEntry(name, undefined, description))
+    : machine.platform
+        .getAvailableMethods(components.value)
+        .map(({ name, description }) => actionEntry(name, undefined, description));
 
   const [methods, setMethods] = useState<SelectOption | null>(optionsMethods[0]);
 

diff --git a/src/renderer/src/components/Sidebar/Explorer.tsx b/src/renderer/src/components/Sidebar/Explorer.tsx
@@ -9,6 +9,8 @@ import { useComponents } from '@renderer/hooks';
 import { CanvasEditor } from '@renderer/lib/CanvasEditor';
 import { EditorManager } from '@renderer/lib/data/EditorManager';
 
+import { WithHint } from '../WithHint';
+
 interface ExplorerProps {
   editor: CanvasEditor | null;
   manager: EditorManager;
@@ -58,6 +60,28 @@ export const Explorer: React.FC<ExplorerProps> = ({ editor, manager }) => {
     onRequestAddComponent();
   };
 
+  const renderComponent = (name: string) => {
+    const proto = editor?.container.machineController.platform.getComponent(name);
+
+    return (
+      <WithHint key={name} hint={proto?.description ?? ''} placement="right">
+        {(props) => (
+          <div
+            className={twMerge('flex items-center p-1', name == cursor && 'bg-bg-active')}
+            onClick={() => onClick(name)}
+            onAuxClick={() => onAuxClick(name)}
+            onDoubleClick={() => onCompDblClick(name)}
+            onContextMenu={() => onCompRightClick(name)}
+            {...props}
+          >
+            {editor?.container.machineController.platform?.getFullComponentIcon(name)}
+            <p className="ml-2 line-clamp-1">{name}</p>
+          </div>
+        )}
+      </WithHint>
+    );
+  };
+
   return (
     <section className="flex flex-col" onClick={() => onUnClick()}>
       <h3 className="mx-4 mb-3 border-b border-border-primary py-2 text-center text-lg">
@@ -80,19 +104,7 @@ export const Explorer: React.FC<ExplorerProps> = ({ editor, manager }) => {
           listItems={Object.keys(components)}
           heightOfItem={10}
           maxItemsToRender={50}
-          renderItem={(key) => (
-            <div
-              key={key}
-              className={twMerge('flex items-center p-1', key == cursor && 'bg-bg-active')}
-              onClick={() => onClick(key)}
-              onAuxClick={() => onAuxClick(key)}
-              onDoubleClick={() => onCompDblClick(key)}
-              onContextMenu={() => onCompRightClick(key)}
-            >
-              {editor?.container.machineController.platform?.getFullComponentIcon(key)}
-              <p className="ml-2 line-clamp-1">{key}</p>
-            </div>
-          )}
+          renderItem={renderComponent}
         />
       </div>