refactor(composer): use RenderComponent API in droppable component

re orchestratora/rfcs#2

Author: gund

libs/composer/src/lib/composer-canvas/composer-canvas.component.html

@@ -1 +1 @@
-<orc-orchestrator [config]="initialConfig"></orc-orchestrator>
+<orc-render-item [item]="initialConfig"></orc-render-item>

libs/composer/src/lib/composer-canvas/composer-canvas.component.ts

@@ -10,5 +10,5 @@ import { ComposerDroppableComponent } from '../composer-droppable';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ComposerCanvasComponent {
-  initialConfig: OrchestratorConfigItem = ComposerDroppableComponent.getWrapperConfig();
+  initialConfig = ComposerDroppableComponent.wrapperConfig;
 }

libs/composer/src/lib/composer-components/composer-components.component.ts

@@ -4,6 +4,7 @@ import {
   ComponentFactory,
   ComponentFactoryResolver,
   OnInit,
+  Type,
 } from '@angular/core';
 import {
   ComponentLocatorService,
@@ -17,6 +18,8 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ComposerComponentsComponent implements OnInit {
+  static BLACKLIST_COMPONENTS: Type<any>[] = [];
+
   componentsInfo: ComponentFactory<OrchestratorDynamicComponent>[] = [];
 
   constructor(

libs/composer/src/lib/composer-droppable/composer-droppable-config.ts

@@ -1,29 +1,11 @@
 import { Injectable } from '@angular/core';
-import {
-  Option,
-  OptionRequired,
-  OrchestratorConfigItem,
-  OrchestratorDynamicComponentType,
-} from '@orchestrator/core';
+import { Option, OrchestratorConfigItem } from '@orchestrator/core';
 
+/**
+ * @internal
+ */
 @Injectable({ providedIn: 'root' })
-export class ComposerDroppableConfig<C = any>
-  implements OrchestratorConfigItem<C> {
-  @OptionRequired()
-  component: string | OrchestratorDynamicComponentType<C>;
-
-  @Option()
-  config?: C;
-
-  @Option()
-  id?: string;
-
-  @Option()
-  classes?: string | string[] | { [name: string]: boolean };
-
-  @Option()
-  attributes?: { [attr: string]: string };
-
+export class ComposerDroppableConfig<C = any> {
   @Option()
-  handlers?: { [event: string]: string | Function };
+  item?: OrchestratorConfigItem<C>;
 }

libs/composer/src/lib/composer-droppable/composer-droppable.component.css

@@ -1,3 +1,8 @@
+.rendered-item {
+  position: relative;
+  display: inline-block;
+}
+
 .drop-list {
   padding: 10px;
   background: lightcyan;

libs/composer/src/lib/composer-droppable/composer-droppable.component.html

@@ -1,9 +1,18 @@
-<orc-orchestrator *ngIf="config.component" [config]="config"></orc-orchestrator>
-<div
-  *ngIf="!config.component"
-  class="drop-list"
-  cdkDropList
-  (cdkDropListDropped)="drop($event)"
->
-  <span class="drop-list-hint">Drop component here!</span>
+<div class="rendered-item" *ngIf="config?.item?.component; else dropTpl">
+  <orc-render-item [item]="config.item"></orc-render-item>
 </div>
+<ng-template #dropTpl>
+  <div
+    class="drop-list"
+    cdkDropList
+    (cdkDropListDropped)="drop($event, configInput.value)"
+  >
+    <span class="drop-list-hint">Drop component here!</span>
+  </div>
+  <nz-divider nzText="Set component configuration" nzDashed></nz-divider>
+  <textarea
+    #configInput
+    nz-input
+    [nzAutosize]="{ minRows: 2, maxRows: 6 }"
+  ></textarea>
+</ng-template>

libs/composer/src/lib/composer-droppable/composer-droppable.component.ts

@@ -4,13 +4,18 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnChanges,
+  Optional,
   Output,
+  SimpleChanges,
+  SkipSelf,
 } from '@angular/core';
 import {
   DynamicComponent,
   OrchestratorConfigItem,
   OrchestratorDynamicComponent,
   OrchestratorDynamicComponentType,
+  RenderComponent,
 } from '@orchestrator/core';
 
 import { ComposerDroppableConfig } from './composer-droppable-config';
@@ -26,51 +31,83 @@ import { ComposerDroppableConfig } from './composer-droppable-config';
 })
 @DynamicComponent({ config: ComposerDroppableConfig })
 export class ComposerDroppableComponent
-  implements OrchestratorDynamicComponent {
+  implements OrchestratorDynamicComponent<ComposerDroppableConfig>, OnChanges {
+
+  constructor(
+    private renderComponent: RenderComponent,
+    @SkipSelf() @Optional() private parentDroppable: ComposerDroppableComponent,
+  ) {}
+  static wrapperConfig = Object.freeze<OrchestratorConfigItem>({
+    component: ComposerDroppableComponent,
+  });
+
   @Input() config: ComposerDroppableConfig;
 
-  @Output() componentDrop = new EventEmitter<OrchestratorConfigItem>();
-  static getWrapperConfig() {
-    return {
-      component: ComposerDroppableComponent,
-      handlers: {
-        componentDrop(
-          updateConfig,
-          getInjector,
-          injectFlags,
-          getComponent,
-          $config: OrchestratorConfigItem,
-        ) {
-          updateConfig($config);
-          const getParentDroppableInjector = getInjector().get(
-            'getInjector',
-            injectFlags.SkipSelf,
-          );
-          const parentUpdateConfig = getParentDroppableInjector().get(
-            'updateConfig',
-          );
-          const parentGetConfig = getParentDroppableInjector().get('getConfig');
-          const parentConfigItems = parentGetConfig().items || [];
-          parentUpdateConfig({
-            items: [
-              ...parentConfigItems,
-              getComponent().constructor.getWrapperConfig(),
-            ],
-          });
-        },
-      },
-    };
-  }
+  @Input() items: OrchestratorConfigItem[];
+
+  @Output() componentDropped = new EventEmitter<
+    OrchestratorDynamicComponentType
+  >();
+
+  private droppedConfig: OrchestratorConfigItem;
 
-  static wrapComponent(comp) {
+  static wrapComponent<C>(
+    comp: OrchestratorDynamicComponentType<C>,
+    config?: C,
+  ): OrchestratorConfigItem<C> {
     return {
       component: comp,
-      items: [ComposerDroppableComponent.getWrapperConfig()],
+      config,
+      items: [ComposerDroppableComponent.wrapperConfig],
     };
   }
 
-  drop(e: CdkDragDrop<any>) {
+  ngOnChanges(changes: SimpleChanges) {
+    if ('config' in changes && this.droppedConfig) {
+      this.config = {
+        ...this.config,
+        item: this.droppedConfig,
+      };
+    }
+
+    if ('items' in changes) {
+      this.config = {
+        ...this.config,
+        item: {
+          ...this.config.item,
+          items: this.items,
+        },
+      };
+    }
+  }
+
+  drop(e: CdkDragDrop<any>, conf?: string) {
     const compType = e.item.data as OrchestratorDynamicComponentType;
-    this.componentDrop.emit(ComposerDroppableComponent.wrapComponent(compType));
+    const config = ComposerDroppableComponent.wrapComponent(
+      compType,
+      JSON.parse(conf || 'null'),
+    );
+
+    this.droppedConfig = config;
+
+    if (this.parentDroppable) {
+      this.parentDroppable.addItem(config);
+    } else {
+      this.config = { item: config };
+    }
+
+    this.componentDropped.emit(compType);
+  }
+
+  addItem(item: OrchestratorConfigItem) {
+    this.renderComponent.removeItem(ComposerDroppableComponent.wrapperConfig);
+
+    this.renderComponent.addItem(
+      ComposerDroppableComponent.wrapComponent(ComposerDroppableComponent, {
+        item,
+      }),
+    );
+
+    this.renderComponent.addItem(ComposerDroppableComponent.wrapperConfig);
   }
 }

libs/composer/src/lib/composer-droppable/composer-droppable.module.ts

@@ -2,6 +2,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { OrchestratorCoreModule } from '@orchestrator/core';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzInputModule } from 'ng-zorro-antd/input';
 
 import { ComposerDroppableComponent } from './composer-droppable.component';
 
@@ -12,6 +14,8 @@ import { ComposerDroppableComponent } from './composer-droppable.component';
   imports: [
     CommonModule,
     DragDropModule,
+    NzInputModule,
+    NzDividerModule,
     OrchestratorCoreModule.withComponents([ComposerDroppableComponent]),
   ],
   exports: [ComposerDroppableComponent],