feat: add layer icon

packages/core/src/graphics/ellipse.ts

@@ -149,4 +149,8 @@ export class SuikaEllipse extends SuikaGraphics<EllipseAttrs> {
       )})"`;
     }
   }
+
+  override getLayerIconPath() {
+    return 'M11 6C11 8.76142 8.76142 11 6 11C3.23858 11 1 8.76142 1 6C1 3.23858 3.23858 1 6 1C8.76142 1 11 3.23858 11 6Z';
+  }
 }

packages/core/src/graphics/graphics/graphics.ts

@@ -823,6 +823,10 @@ export class SuikaGraphics<ATTRS extends GraphicsAttrs = GraphicsAttrs> {
     };
   }
 
+  getLayerIconPath() {
+    return 'M1 1H11V11H1V1Z';
+  }
+
   getWorldTransform(): IMatrixArr {
     const parent = this.getParent();
     if (parent) {

packages/core/src/graphics/line.ts

@@ -98,4 +98,8 @@ export class SuikaLine extends SuikaGraphics<LineAttrs> {
       strokePaints: this.attrs.stroke ?? [],
     };
   }
+
+  override getLayerIconPath() {
+    return 'M0.5 0.5 L 10.5 10.5';
+  }
 }

packages/core/src/graphics/rect.ts

@@ -403,4 +403,8 @@ export class SuikaRect extends SuikaGraphics<RectAttrs> {
       this.attrs.height
     }" transform="matrix(${tf.join(' ')})"${cornerRadiusStr}`;
   }
+
+  override getLayerIconPath() {
+    return 'M1 1H11V11H1V1Z';
+  }
 }

packages/core/src/graphics/regular_polygon.ts

@@ -209,4 +209,8 @@ export class SuikaRegularPolygon extends SuikaGraphics<RegularPolygonAttrs> {
       .map((p) => `${p.x},${p.y}`)
       .join(' ')}" transform="matrix(${tf.join(' ')})"`;
   }
+
+  override getLayerIconPath() {
+    return 'M6 2L11.1962 11H0.803848L6 2Z';
+  }
 }

packages/core/src/graphics/star.ts

@@ -214,4 +214,8 @@ export class SuikaStar extends SuikaGraphics<StarAttrs> {
       .map((p) => `${p.x},${p.y}`)
       .join(' ')}" transform="matrix(${tf.join(' ')})"`;
   }
+
+  override getLayerIconPath() {
+    return 'M6.5 2L7.51031 5.10942H10.7798L8.13472 7.03115L9.14503 10.1406L6.5 8.21885L3.85497 10.1406L4.86528 7.03115L2.22025 5.10942H5.48969L6.5 2Z';
+  }
 }

packages/core/src/graphics/text.ts

@@ -124,6 +124,10 @@ export class SuikaText extends SuikaGraphics<TextAttrs> {
     return `>${content}</text>`;
   }
 
+  override getLayerIconPath() {
+    return 'M0 0H11V3H10V1H6V9H7.5V10H3.5V9H5V1H1V3H0V0Z';
+  }
+
   getGlyphs() {
     if (this._glyphs) return this._glyphs;
     this._glyphs = calcGlyphInfos(this.attrs.content, {

packages/suika/src/components/LayerPanel/LayerPanel.tsx

@@ -4,7 +4,7 @@ import { type IObject, MutateGraphsAndRecord } from '@suika/core';
 import { type FC, useContext, useEffect, useState } from 'react';
 
 import { EditorContext } from '../../context';
-import { Tree } from './LayerItem/tree';
+import { LayerTree } from './LayerTree/LayerTree';
 
 export const LayerPanel: FC = () => {
   const editor = useContext(EditorContext);
@@ -44,6 +44,13 @@ export const LayerPanel: FC = () => {
     editor.render();
   };
 
+  const getLayerIcon = (id: string) => {
+    if (!editor) return '';
+
+    const graphics = editor.doc.getGraphicsById(id);
+    return graphics ? graphics.getLayerIconPath() : '';
+  };
+
   const setEditorHlId = (id: string) => {
     if (editor) {
       const graphics = editor.doc.getGraphicsById(id) ?? null;
@@ -85,7 +92,7 @@ export const LayerPanel: FC = () => {
 
   return (
     <div className="layer-panel">
-      <Tree
+      <LayerTree
         treeData={objects}
         activeIds={Array.from(selectedIds)}
         hlId={hlId}
@@ -94,6 +101,7 @@ export const LayerPanel: FC = () => {
         setHlId={setEditorHlId}
         setName={setName}
         setSelectedGraph={setSelectedGraph}
+        getLayerIcon={getLayerIcon}
       />
     </div>
   );

packages/suika/src/components/LayerPanel/LayerTree/LayerIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface LayerIconProps {
+  content: string;
+  enableStroke?: boolean;
+  enableFill?: boolean;
+}
+
+export const LayerIcon = React.memo(
+  ({ content, enableStroke = true, enableFill }: LayerIconProps) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xmlnsXlink="http://www.w3.org/1999/xlink"
+        width="12"
+        height="12"
+      >
+        <path
+          d={content}
+          fill={enableFill ? 'currentColor' : 'none'}
+          strokeWidth="1"
+          stroke={enableStroke ? 'currentColor' : 'none'}
+        />
+      </svg>
+    );
+  },
+);

packages/suika/src/components/LayerPanel/LayerItem/LayerItem.scss → packages/suika/src/components/LayerPanel/LayerTree/LayerItem.scss

@@ -56,6 +56,15 @@
       flex-shrink: 0;
     }
 
+    .sk-layer-icon {
+      width: 18px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-shrink: 0;
+      color: #0000004d;
+    }
+
     .sk-layout-name {
       padding: 0 4px;
       border: 1px solid transparent;

packages/suika/src/components/LayerPanel/LayerItem/LayerItem.tsx → packages/suika/src/components/LayerPanel/LayerTree/LayerItem.tsx

@@ -12,10 +12,12 @@ import {
 import classNames from 'classnames';
 import { type FC, useEffect, useRef, useState } from 'react';
 
+import { LayerIcon } from './LayerIcon';
 import { type IBaseEvents } from './type';
 
 interface IProps extends IBaseEvents {
   id: string;
+  type: string;
   name: string;
   children?: IObject[];
   active?: boolean;
@@ -35,6 +37,7 @@ const LayerItem: FC<IProps> = ({
   active = false,
   activeSecond = false,
   id,
+  type,
   activeIds = [],
   level = 0,
   hlId,
@@ -47,6 +50,7 @@ const LayerItem: FC<IProps> = ({
   setHlId,
   setName,
   setSelectedGraph,
+  getLayerIcon,
 }) => {
   const indentWidth = level * 16;
   const [isEditing, setIsEditing] = useState(false);
@@ -116,6 +120,13 @@ const LayerItem: FC<IProps> = ({
         <div className="sk-group-collapse-btn">
           {children?.length ? <SmallCaretDownSolid /> : undefined}
         </div>
+        <div className="sk-layer-icon">
+          <LayerIcon
+            content={getLayerIcon(id)}
+            enableFill={type === 'Text'}
+            enableStroke={type !== 'Text'}
+          />
+        </div>
         {!isEditing && (
           <span key={'span'} className="sk-layout-name">
             {layoutName}
@@ -187,6 +198,7 @@ const LayerItem: FC<IProps> = ({
             <LayerItem
               key={item.id}
               id={item.id}
+              type={item.type}
               name={item.name}
               active={activeIds.includes(item.id)}
               activeSecond={activeSecond || activeIds.includes(item.id)}
@@ -203,6 +215,7 @@ const LayerItem: FC<IProps> = ({
               toggleLock={toggleLock}
               setHlId={setHlId}
               setSelectedGraph={setSelectedGraph}
+              getLayerIcon={getLayerIcon}
             />
           ))}
         </div>

packages/suika/src/components/LayerPanel/LayerItem/tree.tsx → packages/suika/src/components/LayerPanel/LayerTree/LayerTree.tsx

@@ -8,9 +8,10 @@ interface IProps extends IBaseEvents {
   treeData: IObject[];
   activeIds: string[];
   hlId: string;
+  getLayerIcon: (id: string) => string;
 }
 
-export const Tree: FC<IProps> = ({
+export const LayerTree: FC<IProps> = ({
   treeData,
   activeIds = [],
   hlId: hoverId,
@@ -19,11 +20,13 @@ export const Tree: FC<IProps> = ({
   setHlId: setHoverId,
   setName,
   setSelectedGraph,
+  getLayerIcon,
 }) => {
   return (
     <div>
       {[...treeData].reverse().map((item) => (
         <LayerItem
+          type={item.type}
           active={activeIds.includes(item.id)}
           activeSecond={activeIds.includes(item.id)}
           key={item.id}
@@ -39,6 +42,7 @@ export const Tree: FC<IProps> = ({
           setHlId={setHoverId}
           setName={setName}
           setSelectedGraph={setSelectedGraph}
+          getLayerIcon={getLayerIcon}
         />
       ))}
     </div>

packages/suika/src/components/LayerPanel/LayerItem/type.ts → packages/suika/src/components/LayerPanel/LayerTree/type.ts

@@ -8,4 +8,5 @@ export interface IBaseEvents {
     objId: string,
     event: React.MouseEvent<Element, MouseEvent>,
   ) => void;
+  getLayerIcon: (id: string) => string;
 }