Allow custom menu & expose more methods

Author: graphieros

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import LocalGridPlan from './components/GridPlan.vue';
 import { GridPlanItem } from "grid-plan";
 import { GridPlanItemType } from "grid-plan";
@@ -102,6 +102,7 @@ const config = ref({
   boxThickness: 0.3,
   boxColor: '#5A5A5A',
   boxHeight: 1,
+  showMenu: false,
 })
 
 // setTimeout(() => {
@@ -138,6 +139,14 @@ function createdItem(item) {
   // console.log('CREATED',item)
 }
 
+const utils = computed(() => {
+  const ready = !!plan.value
+  return {
+    setActiveType: ready ? plan.value.setActiveType : (_) => {},
+    
+  }
+})
+
 </script>
 
 <template>
@@ -183,6 +192,12 @@ function createdItem(item) {
     </svg>
       </template>
     </GridPlan> -->
+
+    <div style="padding:12px; background: #5A5A5A">
+      <div v-for="type in types" @click="utils.setActiveType(type)">
+        {{  type.description }}
+      </div>
+    </div>
 
     <LocalGridPlan 
       :availableTypes="types" 

src/components/GridPlan.vue

@@ -157,8 +157,14 @@ function getFocusState(item) {
 }
 
 defineExpose({
+  deleteItem,
+  focusItem,
+  getActiveItem: () => entity.value,
+  getFocusState,
   getItems,
-  unselect
+  selectItem,
+  setActiveType,
+  unselect,
 })
 
 </script>
@@ -177,22 +183,24 @@ defineExpose({
       @unselect="unselect"
     />
 
-    <details v-if="finalConfig.useAccordionMenu" class="grid-plan-menu">
-      <summary class="grid-plan-menu__summary">
-        {{ finalConfig.accordionMenuTitle }}
-      </summary>
-      <div class="grid-plan-menu__body">
+    <template v-if="finalConfig.showMenu">
+      <details v-if="finalConfig.useAccordionMenu" class="grid-plan-menu">
+        <summary class="grid-plan-menu__summary">
+          {{ finalConfig.accordionMenuTitle }}
+        </summary>
+        <div class="grid-plan-menu__body">
+          <div v-for="t in availableTypes" @click="setActiveType(t)">
+            <slot name="availableType" v-bind="{ availableType: t }"/>
+          </div>
+        </div>
+      </details>
+  
+      <div v-else class="grid-plan-menu">
         <div v-for="t in availableTypes" @click="setActiveType(t)">
           <slot name="availableType" v-bind="{ availableType: t }"/>
         </div>
       </div>
-    </details>
-
-    <div v-else class="grid-plan-menu">
-      <div v-for="t in availableTypes" @click="setActiveType(t)">
-        <slot name="availableType" v-bind="{ availableType: t }"/>
-      </div>
-    </div>
+    </template>
 
     <details v-if="finalConfig.showInventory && items.length" class="grid-plan-inventory">
         <summary class="grid-plan-inventory__summary">
@@ -204,6 +212,7 @@ defineExpose({
           </div>
         </div>
     </details>
+
     <Grid
       :readonly="readonly"
       :key="`2d_${step}`" 

src/default_config.json

@@ -28,5 +28,6 @@
     "showBox": true,
     "boxThickness": 0.3,
     "boxHeight": 1,
-    "boxColor": "#5A5A5A"
+    "boxColor": "#5A5A5A",
+    "showMenu": true
 }

types/grid-plan.d.ts

@@ -9,12 +9,23 @@ declare module "grid-plan" {
     export type ItemStateGetter<T extends GridPlanItem = GridPlanItem> =
         ((item: Readonly<T>) => boolean) & (() => boolean);
 
+    export type GridPlanExpose = {
+        deleteItem(item: GridPlanItem): void
+        focusItem(item: GridPlanItem): void
+        getActiveItem(): GridPlanItem
+        getFocusState(item: GridPlanItem): boolean
+        getItems(): GridPlanItem[]
+        selectItem(item: GridPlanItem): void
+        setActiveType(t: GridPlanItemType): void
+        unselect(): void
+    }
+
     export const GridPlan: DefineComponent<{
         placedItems: GridPlanItem[];
         availableTypes: GridPlanItemType[];
         readonly?: boolean;
         config?: GridPlanConfig;
-    }>;
+    }, GridPlanExpose>;
 
     export type Coordinates = {
         x?: number;
@@ -79,6 +90,7 @@ declare module "grid-plan" {
         boxThickness?: number;
         boxHeight?: number;
         boxColor?: string;
+        showMenu?: boolean;
     };
 
     /**