can remove trait

packages/editor/src/components/ComponentForm/GeneralTraitFormList/GeneralTraitForm.tsx

@@ -1,15 +1,17 @@
 import { ApplicationComponent, ComponentTrait } from '@meta-ui/core';
-import { VStack } from '@chakra-ui/react';
+import { HStack, IconButton, VStack } from '@chakra-ui/react';
+import { CloseIcon } from '@chakra-ui/icons';
 import { renderField } from '../ComponentForm';
 import { formWrapperCSS } from '../style';
 
 type Props = {
   component: ApplicationComponent;
   trait: ComponentTrait;
+  onRemove: () => void;
 };
 
 export const GeneralTraitForm: React.FC<Props> = props => {
-  const { trait, component } = props;
+  const { trait, component, onRemove } = props;
 
   const fields = Object.keys(trait.properties || []).map(key => {
     const value = trait.properties[key];
@@ -23,7 +25,17 @@ export const GeneralTraitForm: React.FC<Props> = props => {
   });
   return (
     <VStack key={trait.type} css={formWrapperCSS}>
-      <strong>{trait.type}</strong>
+      <HStack width="full" justifyContent="space-between">
+        <strong>{trait.type}</strong>
+        <IconButton
+          aria-label="remove trait"
+          variant="ghost"
+          colorScheme="red"
+          size="xs"
+          icon={<CloseIcon />}
+          onClick={onRemove}
+        />
+      </HStack>
       {fields}
     </VStack>
   );

packages/editor/src/components/ComponentForm/GeneralTraitFormList/GeneralTraitFormList.tsx

@@ -3,11 +3,11 @@ import { parseTypeBox } from '@meta-ui/runtime';
 import { HStack, VStack } from '@chakra-ui/react';
 import { TSchema } from '@sinclair/typebox';
 import { AddTraitButton } from './AddTraitButton';
+import { GeneralTraitForm } from './GeneralTraitForm';
 import { eventBus } from '../../../eventBus';
 import { registry } from '../../../metaUI';
-import { AddTraitOperation } from '../../../operations/Operations';
+import { AddTraitOperation, RemoveTraitOperation } from '../../../operations/Operations';
 import { ignoreTraitsList } from '../../../constants';
-import { GeneralTraitForm } from './GeneralTraitForm';
 
 type Props = {
   component: ApplicationComponent;
@@ -19,7 +19,6 @@ export const GeneralTraitFormList: React.FC<Props> = props => {
   const onAddTrait = (type: string) => {
     const traitSpec = registry.getTraitByType(type).spec;
     const initProperties = parseTypeBox(traitSpec.properties as TSchema);
-    console.log('initProperties', initProperties);
     eventBus.send('operation', new AddTraitOperation(component.id, type, initProperties));
   };
 
@@ -28,7 +27,17 @@ export const GeneralTraitFormList: React.FC<Props> = props => {
       return !ignoreTraitsList.includes(t.type);
     })
     .map((t, i) => {
-      return <GeneralTraitForm key={i} component={component} trait={t} />;
+      const onRemoveTrait = () => {
+        eventBus.send('operation', new RemoveTraitOperation(component.id, i));
+      };
+      return (
+        <GeneralTraitForm
+          key={i}
+          component={component}
+          trait={t}
+          onRemove={onRemoveTrait}
+        />
+      );
     });
 
   return (

packages/editor/src/operations/AppModelManager.ts

@@ -8,6 +8,7 @@ import {
   ModifyTraitPropertyOperation,
   ModifyComponentIdOperation,
   AddTraitOperation,
+  RemoveTraitOperation,
 } from './Operations';
 import { produce } from 'immer';
 import { registry } from '../metaUI';
@@ -176,6 +177,7 @@ export class AppModelManager {
         break;
       case 'addTraitOperation':
         const ato = o as AddTraitOperation;
+        let i = 0;
         newApp = produce(this.app, draft => {
           draft.spec.components.forEach(c => {
             if (c.id === ato.componentId) {
@@ -183,11 +185,27 @@ export class AppModelManager {
                 type: ato.traitType,
                 properties: ato.properties,
               });
+              i = c.traits.length - 1;
             }
           });
         });
         if (!noEffect) {
-          // TODO: there is no delete trait operation now
+          const removeTraitOperation = new RemoveTraitOperation(ato.componentId, i);
+          this.undoStack.push(removeTraitOperation);
+        }
+        break;
+      case 'removeTraitOperation':
+        const rto = o as RemoveTraitOperation;
+        newApp = produce(this.app, draft => {
+          draft.spec.components.forEach(c => {
+            if (c.id === rto.componentId) {
+              c.traits.splice(rto.traitIndex, 1);
+            }
+          });
+        });
+        if (!noEffect) {
+          // const removeTraitOperation = new AddTraitOperation(rto.componentId, trait.type);
+          // this.undoStack.push(removeTraitOperation);
         }
         break;
     }

packages/editor/src/operations/Operations.ts

@@ -36,6 +36,11 @@ export class AddTraitOperation {
   ) {}
 }
 
+export class RemoveTraitOperation {
+  kind = 'removeTraitOperation';
+  constructor(public componentId: string, public traitIndex: number) {}
+}
+
 export class ModifyComponentIdOperation {
   kind = 'modifyComponentId';
   constructor(public componentId: string, public value: string) {}