Merge pull request kruzhok-team#58 from bryzZz/icons-fit

Очередной фикс соотношения сторон иконок
L140-beep · Oct 13, 2023 · 8d7371c · 8d7371c
2 parents 6f382fc + b35fb78
commit 8d7371c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 28 deletions.
diff --git a/src/renderer/src/components/Sidebar/Explorer.tsx b/src/renderer/src/components/Sidebar/Explorer.tsx
@@ -4,12 +4,11 @@ import { twMerge } from 'tailwind-merge';
 
 import { ReactComponent as AddIcon } from '@renderer/assets/icons/new transition.svg';
 import { ComponentEditModal, ComponentAddModal, ComponentDeleteModal } from '@renderer/components';
+import { ScrollableList } from '@renderer/components/ScrollableList';
 import { useAddComponent, useEditDeleteComponent } from '@renderer/hooks';
 import { CanvasEditor } from '@renderer/lib/CanvasEditor';
 import { EditorManager } from '@renderer/lib/data/EditorManager';
 
-import { ScrollableList } from '@renderer/components/ScrollableList';
-
 interface ExplorerProps {
   editor: CanvasEditor | null;
   manager: EditorManager;

diff --git a/src/renderer/src/lib/data/PlatformManager.tsx b/src/renderer/src/lib/data/PlatformManager.tsx
@@ -187,7 +187,7 @@ export class PlatformManager {
       icon: this.getComponentIcon(query.component, false),
     };
     // console.log(['getComponentIcon', name, isName, query, icons.get(query)!.src]);
-    return picto.getMarkedSvg(iconQuery, className);
+    return picto.getMarkedIcon(iconQuery, className);
   }
 
   getEventIcon(component: string, method: string) {

diff --git a/src/renderer/src/lib/drawable/Picto.tsx b/src/renderer/src/lib/drawable/Picto.tsx
@@ -1,3 +1,5 @@
+import { twMerge } from 'tailwind-merge';
+
 import InitialIcon from '@renderer/assets/icons/initial state.svg';
 import EdgeHandle from '@renderer/assets/icons/new transition.svg';
 import UnknownIcon from '@renderer/assets/icons/unknown-alt.svg';
@@ -113,7 +115,7 @@ export class Picto {
       const tX = x + width / this.scale;
       const tY = y + (height - 1) / this.scale;
       ctx.save();
-      ctx.font = `600 ${16 / this.scale}px/0 Fira Mono`;
+      ctx.font = `600 ${16 / this.scale}px/0 Fira Sans`;
       ctx.fillStyle = iconData.color ?? 'white';
       ctx.strokeStyle = 'white';
       ctx.lineWidth = 0.5 / this.scale;
@@ -129,41 +131,27 @@ export class Picto {
   }
 
   /**
-   * Генерирует SVG-ноду для значка с меткой.
+   * Генерирует иконку для значка с меткой.
    * По сути, дублирует {@link drawImage} вне canvas.
    *
    * @param data Контейнер с данными значка
    * @param className Атрибут class для генерируемой ноды (дополнительно)
    * @returns JSX-нода со значком
    */
-  getMarkedSvg(data: MarkedIconData, className?: string) {
+  getMarkedIcon(data: MarkedIconData, className?: string) {
     const icon = icons.get(data.icon);
     return (
-      <svg
-        className={className ?? 'h-8 w-8 object-contain'}
-        viewBox="0 0 32 32"
-        preserveAspectRatio="xMidYMid meet"
-      >
-        <image width={32} height={32} href={icon?.src ?? UnknownIcon} />;
-        {!data.label ? (
-          ''
-        ) : (
-          <text
-            x="32"
-            y="31"
-            fontSize="16"
-            fill={data.color ?? 'white'}
-            textAnchor="end"
-            fontFamily="Fira Mono"
-            fontWeight="600"
-            stroke="white"
-            strokeWidth={0.5}
+      <div className={twMerge('relative h-8 w-8 shrink-0', className)}>
+        <img className="h-full w-full object-contain" src={icon?.src ?? UnknownIcon} />
+        {data.label && (
+          <p
+            className="absolute bottom-0 right-0 text-right font-Fira text-base font-semibold leading-none [-webkit-text-stroke:_1px_white]"
+            style={{ color: data.color ?? 'white' }}
           >
             {data.label}
-          </text>
+          </p>
         )}
-        <text></text>
-      </svg>
+      </div>
     );
   }