Add ability to delete a component.

grantjbutler · Jan 29, 2022 · 150eb4e · 150eb4e
1 parent c1a7337
commit 150eb4e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/components/Sidebar/TreeControl.vue b/src/components/Sidebar/TreeControl.vue
@@ -20,7 +20,7 @@
             <menu-item v-for="action in embedActions" :key="action.title" @click="action.action()">{{ action.title }}</menu-item>
           </Submenu>
           <menu-separator/>
-          <menu-item>Delete</menu-item>
+          <menu-item @click="deleteComponent()">Delete</menu-item>
         </context-menu>
       </template>
     </context-menu-providing>
@@ -40,7 +40,7 @@ import {
 } from '@headlessui/vue';
 import { ChevronRightIcon } from '@heroicons/vue/solid';
 import { useStore } from '@/store/app';
-import { ADD_CHILD, SELECT_COMPONENT, EMBED_IN_COMPONENT } from '@/store/mutation-types';
+import { ADD_CHILD, SELECT_COMPONENT, EMBED_IN_COMPONENT, DELETE_COMPONENT } from '@/store/mutation-types';
 
 interface ContainerAction {
   title: string
@@ -124,14 +124,19 @@ export default defineComponent({
       return actions
     })
 
+    const deleteComponent = () => {
+      store.commit(DELETE_COMPONENT, { id: component.value.id });
+    }
+
     return {
       selectComponent,
       isSelected,
       isContainerComponent,
       containerActions,
       embedActions,
       addFlexComponent,
-      addSourceComponent
+      addSourceComponent,
+      deleteComponent
     }
   }
 })

diff --git a/src/store/app.ts b/src/store/app.ts
@@ -12,6 +12,7 @@ import {
   SELECT_COMPONENT,
   ADD_CHILD,
   EMBED_IN_COMPONENT,
+  DELETE_COMPONENT,
   EXERCISE_LAYOUT,
   FLEX_SET_DIRECTION,
   FLEX_SET_DISTRIBUTION,
@@ -56,6 +57,15 @@ export const store = createStore<State>({
       if (!parent || !(parent instanceof ContainerComponent)) { return }
       parent.addChild(payload.component)
     },
+    [DELETE_COMPONENT](state: State, payload: { id: string }) {
+      const component = state.rootComponent.childWithId(payload.id);
+      if (!component || !component.parent) { return }
+      component.removeFromParent();
+
+      if (state.selectedComponent == component) {
+        state.selectedComponent = null;
+      }
+    },
     [EMBED_IN_COMPONENT](state: State, payload: { id: string, container: ContainerComponent }) {
       if (state.rootComponent.id == payload.id) {
         payload.container.addChild(state.rootComponent)

diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts
@@ -1,6 +1,7 @@
 export const SELECT_COMPONENT = 'SELECT_COMPONENT'
 export const ADD_CHILD = 'ADD_CHILD'
 export const EMBED_IN_COMPONENT = 'EMBED_IN_COMPONENT'
+export const DELETE_COMPONENT = 'DELETE_COMPONENT'
 
 export const EXERCISE_LAYOUT = 'EXERCISE_LAYOUT'
 
@@ -19,6 +20,7 @@ export const SET_OBS_SCENES = 'SET_OBS_SCENES'
 export const layoutExercisingMutations = [
   ADD_CHILD,
   EMBED_IN_COMPONENT,
+  DELETE_COMPONENT,
   FLEX_SET_DIRECTION,
   FLEX_SET_DISTRIBUTION,
   FLEX_SET_SPACING,