Переработка UI/UX переименования

.vscode/settings.json

@@ -17,6 +17,6 @@
   },
   "eslint.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   }
 }

src/renderer/src/components/StateNameModal.tsx

@@ -3,6 +3,8 @@ import React, { useLayoutEffect, useState } from 'react';
 import { State } from '@renderer/lib/drawable/State';
 import { Point } from '@renderer/types/graphics';
 
+import { WithHint } from './WithHint';
+
 interface StateNameModalProps {
   isOpen: boolean;
   onClose: () => void;
@@ -53,16 +55,25 @@ export const StateNameModal: React.FC<StateNameModalProps> = (props) => {
   };
 
   return (
-    <input
-      style={inputStyle}
-      autoFocus
-      className="fixed rounded-t-[6px] bg-[#525252] text-white outline outline-2 outline-white"
-      placeholder="Придумайте название"
-      maxLength={20}
-      onKeyUp={handleKeyUp}
-      onBlur={onClose}
-      onChange={(e) => setValue(e.target.value)}
-      value={value}
-    />
+    <WithHint
+      hint="Нажмите ⏎, чтобы применить"
+      offset={{ crossAxis: -20, mainAxis: 10 }}
+      placement="top-end"
+    >
+      {(props) => (
+        <input
+          {...props}
+          style={inputStyle}
+          autoFocus
+          className="fixed rounded-t-[6px] bg-[#525252] text-white outline outline-2 outline-white"
+          placeholder="Придумайте название"
+          maxLength={20}
+          onKeyUp={handleKeyUp}
+          onBlur={onClose}
+          onChange={(e) => setValue(e.target.value)}
+          value={value}
+        />
+      )}
+    </WithHint>
   );
 };

src/renderer/src/components/WithHint.tsx

@@ -10,13 +10,16 @@ import {
   FloatingArrow,
   arrow,
   Placement,
+  OffsetOptions,
 } from '@floating-ui/react';
 import { createPortal } from 'react-dom';
 
+import { getColor } from '@renderer/theme';
+
 interface WithHintProps {
   children: (props: Record<string, any>) => React.ReactNode;
-  hint: string;
-  offset?: number;
+  hint: React.ReactNode;
+  offset?: OffsetOptions;
   placement?: Placement;
 }
 
@@ -56,12 +59,18 @@ export const WithHint: React.FC<WithHintProps> = ({
         hint &&
         createPortal(
           <div
-            className="z-[100] max-w-sm rounded-sm bg-bg-secondary px-2 py-1 shadow-xl transition-opacity"
+            className="z-[100] max-w-sm rounded-sm border border-border-primary bg-bg-secondary px-2 py-1 shadow-xl transition-opacity"
             ref={refs.setFloating}
             style={floatingStyles}
             {...getFloatingProps()}
           >
-            <FloatingArrow className="fill-bg-secondary" ref={arrowRef} context={context} />
+            <FloatingArrow
+              className="fill-bg-secondary"
+              ref={arrowRef}
+              context={context}
+              stroke={getColor('border-primary')}
+              strokeWidth={0.5}
+            />
             {hint}
           </div>,
           document.body

src/renderer/src/lib/data/StatesController.ts

@@ -47,6 +47,17 @@ export class StatesController extends EventEmitter<StatesControllerEvents> {
   };
 
   handleStateClick = (state: State, e: { event: MyMouseEvent }) => {
+    const drawBounds = state.drawBounds;
+    const titleHeight = state.titleHeight;
+    const y = e.event.y - drawBounds.y;
+    const x = e.event.x - drawBounds.x;
+
+    if (y <= titleHeight && x >= drawBounds.width - 25 / this.container.app.manager.data.scale) {
+      this.emit('changeStateName', state);
+    }
+  };
+
+  handleStateMouseDown = (state: State, e: { event: MyMouseEvent }) => {
     this.container.machineController.selectState(state.id);
 
     const targetPos = state.computedPosition;
@@ -140,7 +151,8 @@ export class StatesController extends EventEmitter<StatesControllerEvents> {
   };
 
   watchState(state: State) {
-    state.on('mousedown', this.handleStateClick.bind(this, state));
+    state.on('click', this.handleStateClick.bind(this, state));
+    state.on('mousedown', this.handleStateMouseDown.bind(this, state));
     state.on('mouseup', this.handleMouseUpOnState.bind(this, state));
     state.on('dblclick', this.handleStateDoubleClick.bind(this, state));
     state.on('contextmenu', this.handleContextMenu.bind(this, state));
@@ -152,7 +164,8 @@ export class StatesController extends EventEmitter<StatesControllerEvents> {
   }
 
   unwatchState(state: State) {
-    state.off('mousedown', this.handleStateClick.bind(this, state));
+    state.off('click', this.handleStateClick.bind(this, state));
+    state.off('mousedown', this.handleStateMouseDown.bind(this, state));
     state.off('mouseup', this.handleMouseUpOnState.bind(this, state));
     state.off('dblclick', this.handleStateDoubleClick.bind(this, state));
     state.off('contextmenu', this.handleContextMenu.bind(this, state));

src/renderer/src/lib/drawable/Picto.tsx

@@ -2,6 +2,7 @@ import { twMerge } from 'tailwind-merge';
 
 import InitialIcon from '@renderer/assets/icons/initial state.svg';
 import EdgeHandle from '@renderer/assets/icons/new transition.svg';
+import Pen from '@renderer/assets/icons/pen.svg';
 import UnknownIcon from '@renderer/assets/icons/unknown-alt.svg';
 import { Rectangle } from '@renderer/types/graphics';
 
@@ -29,6 +30,7 @@ const basePicto = {
   EdgeHandle: EdgeHandle,
   InitialIcon: InitialIcon,
   unknown: UnknownIcon,
+  pen: Pen,
   system: resolveImg('common/system.svg'),
   variable: resolveImg('common/variable.svg'),
 

src/renderer/src/lib/drawable/State.ts

@@ -3,6 +3,7 @@ import theme, { getColor } from '@renderer/theme';
 import { EdgeHandlers } from './EdgeHandlers';
 import { Events } from './Events';
 import { Node } from './Node';
+import { icons } from './Picto';
 
 import { Container } from '../basic/Container';
 
@@ -54,6 +55,7 @@ export class State extends Node {
   draw(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement) {
     this.drawBody(ctx);
     this.drawTitle(ctx);
+    this.drawPen(ctx);
     this.eventBox.draw(ctx);
 
     if (!this.children.isEmpty) {
@@ -215,6 +217,24 @@ export class State extends Node {
     ctx.closePath();
   }
 
+  private drawPen(ctx: CanvasRenderingContext2D) {
+    const icon = icons.get('pen');
+    if (!icon) return;
+
+    const { x, y } = this.drawBounds;
+    const { width } = this.computedTitleSizes;
+    const size = 16 / this.container.app.manager.data.scale;
+    const p = 9 / this.container.app.manager.data.scale;
+
+    ctx.beginPath();
+    ctx.fillStyle = style.titleColor;
+    ctx.strokeStyle = style.titleColor;
+
+    ctx.drawImage(icon, x + width - size - p, y + p, size, size);
+
+    ctx.closePath();
+  }
+
   setIsSelected(value: boolean) {
     this.isSelected = value;
   }