feat: add capsule and character icon to devtools

fibbojs · Aug 23, 2024 · e2f297e · e2f297e
1 parent 909f54a
commit e2f297e
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 0 deletions.
diff --git a/packages/devtools/src/components/icons/FComponentIcon.vue b/packages/devtools/src/components/icons/FComponentIcon.vue
@@ -2,6 +2,8 @@
   <div class="f-component-icon">
     <FIconCube v-if="iconName === FComponentIconSet.Cube" />
     <FIconSphere v-else-if="iconName === FComponentIconSet.Sphere" />
+    <FIconCapsule v-else-if="iconName === FComponentIconSet.Capsule" />
+    <FIconCharacter v-else-if="iconName === FComponentIconSet.Character" />
     <FIconCamera v-else-if="iconName === FComponentIconSet.Camera" />
     <FIconLight v-else-if="iconName === FComponentIconSet.Light" />
     <FIconMesh v-else-if="iconName === FComponentIconSet.Mesh" />
@@ -16,6 +18,8 @@ import type { PropType } from 'vue'
 import { defineProps } from 'vue'
 import FIconCube from './FIconCube.vue'
 import FIconSphere from './FIconSphere.vue'
+import FIconCapsule from './FIconCapsule.vue'
+import FIconCharacter from './FIconCharacter.vue'
 import FIconCamera from './FIconCamera.vue'
 import FIconLight from './FIconLight.vue'
 import FIconMesh from './FIconMesh.vue'

diff --git a/packages/devtools/src/components/icons/FComponentIconSet.ts b/packages/devtools/src/components/icons/FComponentIconSet.ts
@@ -1,6 +1,8 @@
 export enum FComponentIconSet {
   Cube = 'Cube',
   Sphere = 'Sphere',
+  Capsule = 'Capsule',
+  Character = 'Character',
   Camera = 'Camera',
   Light = 'Light',
   Mesh = 'Mesh',

diff --git a/packages/devtools/src/components/icons/FIconCapsule.vue b/packages/devtools/src/components/icons/FIconCapsule.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9a6 6 0 0 1 6-6h0a6 6 0 0 1 6 6v6a6 6 0 0 1-6 6h0a6 6 0 0 1-6-6z" /></svg>
+</template>
diff --git a/packages/devtools/src/components/icons/FIconCharacter.vue b/packages/devtools/src/components/icons/FIconCharacter.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 12q-1.65 0-2.825-1.175T8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12m-8 8v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20z" /></svg>
+</template>
diff --git a/packages/devtools/src/utils/getIconOfComponent.ts b/packages/devtools/src/utils/getIconOfComponent.ts
@@ -15,6 +15,10 @@ export function getIconOfComponent(component: FComponent): FComponentIconSet {
     return FComponentIconSet.Cube
   if (chain.includes('FSphere'))
     return FComponentIconSet.Sphere
+  if (chain.includes('FCapsule'))
+    return FComponentIconSet.Capsule
+  if (chain.includes('FCharacter3d') || chain.includes('FCharacter2d'))
+    return FComponentIconSet.Character
   if (chain.includes('FCamera'))
     return FComponentIconSet.Camera
   if (chain.includes('FLight'))