From 40a591e48b55c3717cf6cbe00ae614c45d63b134 Mon Sep 17 00:00:00 2001 From: MrWindlike Date: Thu, 7 Jul 2022 13:59:28 +0800 Subject: [PATCH 1/3] feat: make the slot more compact --- .../__tests__/model/componentModel.spec.ts | 4 +- .../editor/src/AppModel/ComponentModel.ts | 2 +- .../StructureTree/ComponentTree.tsx | 42 +++++++++---------- 3 files changed, 22 insertions(+), 26 deletions(-) diff --git a/packages/editor/__tests__/model/componentModel.spec.ts b/packages/editor/__tests__/model/componentModel.spec.ts index 782c4e0e..d0f69c3b 100644 --- a/packages/editor/__tests__/model/componentModel.spec.ts +++ b/packages/editor/__tests__/model/componentModel.spec.ts @@ -99,7 +99,7 @@ describe('append to another component', () => { }); }); it('is in right place in allComponents', () => { - expect(appModel.allComponents[4]).toBe(newComponent); + expect(appModel.allComponents[2]).toBe(newComponent); }); it('keep immutable after create component', () => { const newSchema = appModel.toSchema(); @@ -107,7 +107,7 @@ describe('append to another component', () => { expect(origin.length).toBe(newSchema.length - 1); expect(origin[0]).toBe(newSchema[0]); expect(origin[1]).toBe(newSchema[1]); - const newComponentSchema = newSchema[4]; + const newComponentSchema = newSchema[2]; expect(newComponentSchema.id).toBe('text10'); expect(newComponentSchema.traits[0].properties).toEqual({ container: { id: 'vstack1', slot: 'content' }, diff --git a/packages/editor/src/AppModel/ComponentModel.ts b/packages/editor/src/AppModel/ComponentModel.ts index 86417b5d..1c6bc0b2 100644 --- a/packages/editor/src/AppModel/ComponentModel.ts +++ b/packages/editor/src/AppModel/ComponentModel.ts @@ -183,7 +183,7 @@ export class ComponentModel implements IComponentModel { parent.children[slot] = []; } - parent.children[slot].push(this); + parent.children[slot].unshift(this); parent.appModel._bindComponentToModel(this); this.parent = parent; this.parentSlot = slot; diff --git a/packages/editor/src/components/StructureTree/ComponentTree.tsx b/packages/editor/src/components/StructureTree/ComponentTree.tsx index 4db4110d..87eff2cc 100644 --- a/packages/editor/src/components/StructureTree/ComponentTree.tsx +++ b/packages/editor/src/components/StructureTree/ComponentTree.tsx @@ -57,6 +57,23 @@ const ComponentTree = (props: ComponentTreeProps) => { return slots.map(_slot => { let slotContent; const slotChildren = slotMap.get(_slot); + const slotName = ( + + + Slot: {_slot} + + + ); + if (slotChildren && slotChildren.length > 0) { slotContent = slotChildren.map(c => { return ( @@ -74,35 +91,14 @@ const ComponentTree = (props: ComponentTreeProps) => { ); }); } else { - slotContent = ( - - - Empty - - - ); + slotContent = slotName; } - const slotName = ( - - Slot: {_slot} - - ); - return ( {/* although component can have multiple slots, but for now, most components have only one slot so we hide slot name to save more view area */} - {slots.length > 1 ? slotName : undefined} + {(slotChildren || []).length ? slotName : undefined} {slotContent} From 4b4f7296741512ebfaff57cf73fdd55d0d60bf58 Mon Sep 17 00:00:00 2001 From: MrWindlike Date: Mon, 11 Jul 2022 14:58:44 +0800 Subject: [PATCH 2/3] refactor: split the `appendTo` of component model --- .../editor/__tests__/model/componentModel.spec.ts | 4 ++-- packages/editor/src/AppModel/ComponentModel.ts | 11 ++++++----- packages/editor/src/AppModel/IAppModel.ts | 3 ++- .../leaf/component/createComponentLeafOperation.ts | 6 +++--- 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/editor/__tests__/model/componentModel.spec.ts b/packages/editor/__tests__/model/componentModel.spec.ts index d0f69c3b..4f26f399 100644 --- a/packages/editor/__tests__/model/componentModel.spec.ts +++ b/packages/editor/__tests__/model/componentModel.spec.ts @@ -79,7 +79,7 @@ describe('append to another component', () => { const origin = appModel.toSchema(); const newComponent = appModel.createComponent('core/v1/text' as ComponentType); const parent = appModel.getComponentById('vstack1' as any)!; - newComponent.appendTo(parent, 'content' as SlotName); + newComponent.appendToSlotFront(parent, 'content' as SlotName); expect(newComponent.parent).toBe(parent); expect(newComponent.parentId).toEqual('vstack1'); expect(newComponent.parentSlot).toEqual('content'); @@ -120,7 +120,7 @@ describe('append to another component', () => { const origin = appModel.toSchema(); const text1 = appModel.getComponentById('text1' as any)!; it('append component to top level', () => { - text1.appendTo(); + text1.appendToRoot(); const newSchema = appModel.toSchema(); expect(newSchema[newSchema.length - 1].id).toBe('text1'); expect(newSchema.length).toBe(origin.length); diff --git a/packages/editor/src/AppModel/ComponentModel.ts b/packages/editor/src/AppModel/ComponentModel.ts index 1c6bc0b2..6ae4648a 100644 --- a/packages/editor/src/AppModel/ComponentModel.ts +++ b/packages/editor/src/AppModel/ComponentModel.ts @@ -169,15 +169,12 @@ export class ComponentModel implements IComponentModel { return trait; } - appendTo = (parent?: IComponentModel, slot?: SlotName) => { + appendToSlotFront = (parent: IComponentModel, slot: SlotName) => { // remove from current position if (this.parent) { this.parent.removeChild(this); } - if (!parent || !slot) { - this.appModel.appendChild(this); - return; - } + // update parent if (!parent.children[slot]) { parent.children[slot] = []; @@ -193,6 +190,10 @@ export class ComponentModel implements IComponentModel { this._isDirty = true; }; + appendToRoot = () => { + this.appModel.appendChild(this); + }; + removeChild(child: IComponentModel) { const slotChildren = this.children[child.parentSlot!]; if (slotChildren) { diff --git a/packages/editor/src/AppModel/IAppModel.ts b/packages/editor/src/AppModel/IAppModel.ts index 497c5cf5..10e7ae56 100644 --- a/packages/editor/src/AppModel/IAppModel.ts +++ b/packages/editor/src/AppModel/IAppModel.ts @@ -99,7 +99,8 @@ export interface IComponentModel { toSchema(): ComponentSchema; updateComponentProperty: (property: string, value: unknown) => void; // move component from old parent to new parent(or top level if parent is undefined). - appendTo: (parent?: IComponentModel, slot?: SlotName) => void; + appendToSlotFront: (parent: IComponentModel, slot: SlotName) => void; + appendToRoot: () => void; // move component to the behind of another component in same level moveAfter: (after: IComponentModel | null) => IComponentModel; // append other component as child of this component diff --git a/packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts b/packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts index 96c46342..0de570c3 100644 --- a/packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts +++ b/packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts @@ -24,11 +24,11 @@ export class CreateComponentLeafOperation extends BaseLeafOperation Date: Tue, 12 Jul 2022 10:01:03 +0800 Subject: [PATCH 3/3] refactor: revert the codes of `appendTo` --- .../editor/__tests__/model/componentModel.spec.ts | 8 ++++---- packages/editor/src/AppModel/ComponentModel.ts | 13 ++++++------- packages/editor/src/AppModel/IAppModel.ts | 3 +-- .../leaf/component/createComponentLeafOperation.ts | 6 +++--- 4 files changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/editor/__tests__/model/componentModel.spec.ts b/packages/editor/__tests__/model/componentModel.spec.ts index 4f26f399..782c4e0e 100644 --- a/packages/editor/__tests__/model/componentModel.spec.ts +++ b/packages/editor/__tests__/model/componentModel.spec.ts @@ -79,7 +79,7 @@ describe('append to another component', () => { const origin = appModel.toSchema(); const newComponent = appModel.createComponent('core/v1/text' as ComponentType); const parent = appModel.getComponentById('vstack1' as any)!; - newComponent.appendToSlotFront(parent, 'content' as SlotName); + newComponent.appendTo(parent, 'content' as SlotName); expect(newComponent.parent).toBe(parent); expect(newComponent.parentId).toEqual('vstack1'); expect(newComponent.parentSlot).toEqual('content'); @@ -99,7 +99,7 @@ describe('append to another component', () => { }); }); it('is in right place in allComponents', () => { - expect(appModel.allComponents[2]).toBe(newComponent); + expect(appModel.allComponents[4]).toBe(newComponent); }); it('keep immutable after create component', () => { const newSchema = appModel.toSchema(); @@ -107,7 +107,7 @@ describe('append to another component', () => { expect(origin.length).toBe(newSchema.length - 1); expect(origin[0]).toBe(newSchema[0]); expect(origin[1]).toBe(newSchema[1]); - const newComponentSchema = newSchema[2]; + const newComponentSchema = newSchema[4]; expect(newComponentSchema.id).toBe('text10'); expect(newComponentSchema.traits[0].properties).toEqual({ container: { id: 'vstack1', slot: 'content' }, @@ -120,7 +120,7 @@ describe('append to another component', () => { const origin = appModel.toSchema(); const text1 = appModel.getComponentById('text1' as any)!; it('append component to top level', () => { - text1.appendToRoot(); + text1.appendTo(); const newSchema = appModel.toSchema(); expect(newSchema[newSchema.length - 1].id).toBe('text1'); expect(newSchema.length).toBe(origin.length); diff --git a/packages/editor/src/AppModel/ComponentModel.ts b/packages/editor/src/AppModel/ComponentModel.ts index 6ae4648a..86417b5d 100644 --- a/packages/editor/src/AppModel/ComponentModel.ts +++ b/packages/editor/src/AppModel/ComponentModel.ts @@ -169,18 +169,21 @@ export class ComponentModel implements IComponentModel { return trait; } - appendToSlotFront = (parent: IComponentModel, slot: SlotName) => { + appendTo = (parent?: IComponentModel, slot?: SlotName) => { // remove from current position if (this.parent) { this.parent.removeChild(this); } - + if (!parent || !slot) { + this.appModel.appendChild(this); + return; + } // update parent if (!parent.children[slot]) { parent.children[slot] = []; } - parent.children[slot].unshift(this); + parent.children[slot].push(this); parent.appModel._bindComponentToModel(this); this.parent = parent; this.parentSlot = slot; @@ -190,10 +193,6 @@ export class ComponentModel implements IComponentModel { this._isDirty = true; }; - appendToRoot = () => { - this.appModel.appendChild(this); - }; - removeChild(child: IComponentModel) { const slotChildren = this.children[child.parentSlot!]; if (slotChildren) { diff --git a/packages/editor/src/AppModel/IAppModel.ts b/packages/editor/src/AppModel/IAppModel.ts index 10e7ae56..497c5cf5 100644 --- a/packages/editor/src/AppModel/IAppModel.ts +++ b/packages/editor/src/AppModel/IAppModel.ts @@ -99,8 +99,7 @@ export interface IComponentModel { toSchema(): ComponentSchema; updateComponentProperty: (property: string, value: unknown) => void; // move component from old parent to new parent(or top level if parent is undefined). - appendToSlotFront: (parent: IComponentModel, slot: SlotName) => void; - appendToRoot: () => void; + appendTo: (parent?: IComponentModel, slot?: SlotName) => void; // move component to the behind of another component in same level moveAfter: (after: IComponentModel | null) => IComponentModel; // append other component as child of this component diff --git a/packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts b/packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts index 0de570c3..96c46342 100644 --- a/packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts +++ b/packages/editor/src/operations/leaf/component/createComponentLeafOperation.ts @@ -24,11 +24,11 @@ export class CreateComponentLeafOperation extends BaseLeafOperation