fix: component dnd (#3497)

* fix: builder script error because of not hydrated tags

fix: builder script error after element was added

fix: issues with empty Action Select fields

fix: action create/update form issues

fix: runtime actions cleanup when related action removed

refactor: builder click overlay

fix: elementTree bad state warning

fix: elementTree bad state warning

revert: unwanted change after rebase

refactor: fix edit component on context menu

fix: use converted element directly as root element

refactor: builder click overlay

wip: fix drag and drop

wip: adding droppable rectangles

feat: finish element blueprints

refactor: comment old spec

fix: dnd specs

fix: renderer specs

fix: build issues

lint: fix tsconfig.base lint

fix: drop indicator

fix: restore builder style

fix: restore builder style

fix: e2e specs

fix: convert to component use case

fix: build issue

fix: unit specs

fix: convert element to component use case

* revert: unwated changes after rebase

---------

Co-authored-by: Vladyslav Polishchuk <gm.vpolishchuk@gmail.com>

Author: assimhabeek

.husky/pre-commit

@@ -1 +1 @@
-# pnpm cli tasks lint --stage test
+pnpm cli tasks lint --stage test

apps/web-e2e/src/modules/convert-element-to-component/convert-element-to-component.fixture.ts

@@ -15,13 +15,7 @@ export class ConvertElementToComponentPage extends BuilderPage {
   async checkComponentHasCorrectElements() {
     await expect(this.getBuilderRenderContainer()).toHaveText(textContent)
 
-    await this.checkElementTreeStructure([
-      'Container Root',
-      'Container',
-      'Row',
-      'Column',
-      'Text',
-    ])
+    await this.checkElementTreeStructure(['Container', 'Row', 'Column', 'Text'])
   }
 
   async convertElementToComponent() {

libs/frontend/abstract/application/src/component/component.service.interface.ts

@@ -1,4 +1,7 @@
-import type { IComponentModel } from '@codelab/frontend/abstract/domain'
+import type {
+  IComponentModel,
+  IElementModel,
+} from '@codelab/frontend/abstract/domain'
 import type {
   ICreateComponentData,
   IRef,
@@ -27,6 +30,10 @@ export interface IComponentService
   // componentDevelopmentService: IComponentDevelopmentService
   // moved to builder
   // getSelectComponentOptions(): Promise<Array<DefaultOptionType>>
+  createWithoutRoot(
+    data: ICreateComponentData,
+    rootElement: IElementModel,
+  ): Promise<IComponentModel>
   importComponent(componentDataFile: File): Promise<Maybe<IComponentModel>>
   previewComponent(id: string): void
 }

libs/frontend/abstract/application/src/renderer/runtime-component/runtime-component.model.interface.ts

@@ -1,10 +1,11 @@
 import type { IComponentModel } from '@codelab/frontend/abstract/domain'
-import type { Maybe } from '@codelab/shared/abstract/types'
+import type { Maybe, Nullable } from '@codelab/shared/abstract/types'
 import type { Ref } from 'mobx-keystone'
 
 import type { IBaseRuntimeModel } from '../runtime.model.interface'
 import type { IRuntimeElementModel } from '../runtime-element'
 import type { IRuntimeComponentPropModel } from '../runtime-prop'
+import { ReactElement } from 'react'
 
 /**
  * Represents runtime model IComponentModel
@@ -26,6 +27,13 @@ export interface IRuntimeComponentModel extends IBaseRuntimeModel {
   component: Ref<IComponentModel>
   isChildMapperComponentInstance: boolean
   isTypedProp?: boolean
+  elements: Array<IRuntimeElementModel>
+  /**
+   * When clicking an element from component while editing a page or another component we should select element
+   * from main tree that is being edited
+   */
+  mainTreeElement: Maybe<IRuntimeElementModel>
+
   /**
    * Exposed for external use by other models and to preserve structure
    */

libs/frontend/abstract/application/src/renderer/runtime-element/runtime-element.model.interface.ts

@@ -25,7 +25,12 @@ export interface IRuntimeElementModel extends IBaseRuntimeModel {
    * The runtime model for IElementModel.closestContainerNode
    */
   closestContainerNode: Ref<IRuntimeComponentModel | IRuntimePageModel>
+
+  descendantElements: Array<IRuntimeElementModel>
+
   element: Ref<IElementModel>
+
+  mainTreeElement: IRuntimeElementModel
   parentElement: Maybe<IRuntimeElementModel>
   parentElementKey: Nullable<string>
   pathFromRoot: Array<IRuntimeElementModel>

libs/frontend/abstract/application/src/renderer/runtime-element/runtime.element.service.interface.ts

@@ -11,13 +11,13 @@ export interface IRuntimeElementService {
   currentStylePseudoClass: ElementStylePseudoClass
   elements: ObjectMap<IRuntimeElementModel>
   elementsList: Array<IRuntimeElementModel>
-  expandedCompositeKeys: Array<string>
   add(
     element: IElementModel,
     closestContainerNode: IRuntimeComponentModel | IRuntimePageModel,
     parentElement: Nullable<IRuntimeElementModel>,
     propKey?: string,
   ): IRuntimeElementModel
+  getExpandedCompositeKeys(): Array<string>
   maybeRuntimeElement(compositeKey: string): Maybe<IRuntimeElementModel>
   remove(runtimeElement: IRuntimeElementModel): void
   runtimeElement(compositeKey: string): IRuntimeElementModel

libs/frontend/abstract/application/src/renderer/runtime-page/runtime-page.model.interface.ts

@@ -1,5 +1,6 @@
 import type { IPageModel } from '@codelab/frontend/abstract/domain'
 import type { Ref } from 'mobx-keystone'
+import type { Maybe } from '@codelab/shared/abstract/types'
 
 import type { IBaseRuntimeModel } from '../runtime.model.interface'
 import type { IRuntimeElementModel } from '../runtime-element'
@@ -12,6 +13,12 @@ export interface IRuntimePageModel extends IBaseRuntimeModel {
    * Regular page in case the current model is a provider page
    */
   childPage?: Ref<IRuntimePageModel>
+  elements: Array<IRuntimeElementModel>
+  /**
+   * When clicking an element from provider page while editing a regular page we should select root element of regular page
+   * This is the root element of the regular page
+   */
+  mainTreeElement: Maybe<IRuntimeElementModel>
   /**
    * Page domain model
    */

libs/frontend/abstract/domain/src/component/component.domain.service.interface.ts

@@ -2,10 +2,7 @@ import type {
   RenderTypeSelectOption,
   SelectOption,
 } from '@codelab/frontend/abstract/types'
-import type {
-  IComponentDto,
-  ICreateComponentData,
-} from '@codelab/shared/abstract/core'
+import type { IComponentDto } from '@codelab/shared/abstract/core'
 import type { ObjectMap } from 'mobx-keystone'
 
 import type { IHydrateable } from '../shared'
@@ -16,7 +13,6 @@ export interface IComponentDomainService
   componentList: Array<IComponentModel>
   components: ObjectMap<IComponentModel>
   sortedComponentsList: Array<IComponentModel>
-  add(data: ICreateComponentData): IComponentModel
   component(id: string): IComponentModel
   findById(id: string): IComponentModel
   getRenderTypeOptions(

libs/frontend/abstract/domain/src/element/element.model.interface.ts

@@ -108,6 +108,7 @@ export interface IElementModel extends IModel<IElementDto, IElementModel> {
     primary: string
     secondary: string | undefined
   }
+  attachAsComponentRoot(component: IRef): void
   attachAsFirstChild(parentElement: IElementModel): void
   attachAsNextSibling(sibling: IElementModel): void
   attachAsPrevSibling(sibling: IElementModel): void
@@ -118,7 +119,6 @@ export interface IElementModel extends IModel<IElementDto, IElementModel> {
   setName(name: string): void
   setNextSibling(nextSibling: Ref<IElementModel>): void
   setOrderInParent(order: number | null): void
-  setParentComponent(component: Ref<IComponentModel>): void
   setParentElement(parent: Ref<IElementModel>): void
   setPrevSibling(prevSibling: Ref<IElementModel>): void
   setProps(props: IPropModel): void

libs/frontend/abstract/domain/src/shared/constant.ts

@@ -13,6 +13,8 @@ export const DATASET_ELEMENT_ID = 'elementId'
 
 export const DATA_ELEMENT_ID = 'data-element-id'
 
+export const DATA_RUNTIME_ELEMENT_KEY = 'data-runtime-element-key'
+
 export const BUILDER_CONTAINER_ID = 'Builder'
 
 export const BUILDER_NONE_CLASS_NAME = 'Builder-none'
@@ -23,6 +25,8 @@ export const DATA_GRID = 'DATA-GRID'
 
 export const ROOT_RENDER_CONTAINER_ID = 'render-root'
 
+export const BLUEPRINT_ID_PREFIX = 'blueprint-'
+
 export const LAST_WORD_AFTER_DOT_REGEX = /\.\w+$/
 
 export const WORD_BEFORE_DOT_REGEX = /\w*(\.)?/