feat(composer): implement basic drag'n'drop in canvas component

Co-Authored-By: RyuuGan <[email protected]>

re orchestratora/rfcs#2

libs/composer/package.json

@@ -18,6 +18,7 @@
   "author": "Orchestrator <[email protected]>",
   "license": "MIT",
   "peerDependencies": {
+    "@angular/cdk": "^7.0.0",
     "@angular/common": "^7.0.0",
     "@angular/core": "^7.0.0",
     "@orchestrator/core": "^0.0.0",

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

@@ -1 +1 @@
-<p>composer-canvas works!</p>
+<orc-orchestrator [config]="initialConfig"></orc-orchestrator>

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

@@ -1,13 +1,14 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { OrchestratorConfigItem } from '@orchestrator/core';
+
+import { ComposerDroppableComponent } from '../composer-droppable';
 
 @Component({
   selector: 'orc-composer-canvas',
   templateUrl: './composer-canvas.component.html',
   styleUrls: ['./composer-canvas.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ComposerCanvasComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
+export class ComposerCanvasComponent {
+  initialConfig: OrchestratorConfigItem = ComposerDroppableComponent.getWrapperConfig();
 }

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

@@ -1,10 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { OrchestratorCoreModule } from '@orchestrator/core';
 
+import { ComposerDroppableModule } from '../composer-droppable';
 import { ComposerCanvasComponent } from './composer-canvas.component';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, OrchestratorCoreModule, ComposerDroppableModule],
   exports: [ComposerCanvasComponent],
   declarations: [ComposerCanvasComponent],
 })

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

@@ -1,3 +1,7 @@
+nz-list-item {
+  background: white;
+}
+
 nz-list-item-meta::ng-deep .ant-list-item-meta-title {
   word-break: break-all;
 }

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

@@ -1,7 +1,12 @@
 <h3>Component List</h3>
-<nz-list nzBordered [nzDataSource]="componentsInfo" [nzRenderItem]="item">
+<nz-list
+  nzBordered
+  [nzDataSource]="componentsInfo"
+  [nzRenderItem]="item"
+  cdkDropList
+>
   <ng-template #item let-item>
-    <nz-list-item>
+    <nz-list-item cdkDrag [cdkDragData]="item.componentType">
       <nz-list-item-meta
         [nzTitle]="item.componentType.name"
         nzDescription="<{{ item.selector }}>"

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

@@ -27,6 +27,7 @@ export class ComposerComponentsComponent implements OnInit {
   ngOnInit() {
     this.componentsInfo = this.componentLocator
       .getComponents()
-      .map(comp => this.cfr.resolveComponentFactory(comp));
+      .map(comp => this.cfr.resolveComponentFactory(comp))
+      .filter(({ selector }) => !selector.startsWith('orc-composer'));
   }
 }

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

@@ -1,11 +1,12 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NzListModule } from 'ng-zorro-antd/list';
 
 import { ComposerComponentsComponent } from './composer-components.component';
 
 @NgModule({
-  imports: [CommonModule, NzListModule],
+  imports: [CommonModule, DragDropModule, NzListModule],
   exports: [ComposerComponentsComponent],
   declarations: [ComposerComponentsComponent],
 })

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

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import {
+  Option,
+  OptionRequired,
+  OrchestratorConfigItem,
+  OrchestratorDynamicComponentType,
+} from '@orchestrator/core';
+
+@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 };
+
+  @Option()
+  handlers?: { [event: string]: string | Function };
+}

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

@@ -0,0 +1,10 @@
+.drop-list {
+  padding: 10px;
+  background: lightcyan;
+  border: 1px dashed lightblue;
+  text-align: center;
+}
+
+.drop-list.cdk-drop-list-dragging .drop-list-hint {
+  display: none;
+}

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

@@ -1 +1,9 @@
-<p>composer-droppable works!</p>
+<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>

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

@@ -1,4 +1,19 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import {
+  DynamicComponent,
+  OrchestratorConfigItem,
+  OrchestratorDynamicComponent,
+  OrchestratorDynamicComponentType,
+} from '@orchestrator/core';
+
+import { ComposerDroppableConfig } from './composer-droppable-config';
 
 /**
  * @internal
@@ -9,8 +24,54 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
   styleUrls: ['./composer-droppable.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ComposerDroppableComponent implements OnInit {
-  constructor() {}
+@DynamicComponent({ config: ComposerDroppableConfig })
+export class ComposerDroppableComponent
+  implements OrchestratorDynamicComponent {
+
+  @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(),
+            ],
+          });
+        },
+      },
+    };
+  }
+
+  static wrapComponent(comp) {
+    return {
+      component: comp,
+      items: [ComposerDroppableComponent.getWrapperConfig()],
+    };
+  }
 
-  ngOnInit() {}
+  drop(e: CdkDragDrop<any>) {
+    const compType = e.item.data as OrchestratorDynamicComponentType;
+    this.componentDrop.emit(ComposerDroppableComponent.wrapComponent(compType));
+  }
 }

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

@@ -1,13 +1,19 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { OrchestratorCoreModule } from '@orchestrator/core';
 
 import { ComposerDroppableComponent } from './composer-droppable.component';
 
 /**
  * @internal
  */
 @NgModule({
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    DragDropModule,
+    OrchestratorCoreModule.withComponents([ComposerDroppableComponent]),
+  ],
   exports: [ComposerDroppableComponent],
   declarations: [ComposerDroppableComponent],
 })

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

@@ -0,0 +1,10 @@
+nz-sider {
+  height: 100vh;
+  position: fixed;
+  left: 0;
+}
+
+nz-content {
+  margin: 24px 16px 0;
+  overflow: initial;
+}

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

@@ -1,12 +1,9 @@
-<nz-layout>
-  <nz-sider
-    nzTheme="light"
-    style="overflow: auto; height: 100vh; position: fixed; left: 0"
-  >
+<nz-layout cdkDropListGroup>
+  <nz-sider [nzWidth]="sideWidth" nzTheme="light">
     <orc-composer-components></orc-composer-components>
   </nz-sider>
-  <nz-layout style="margin-left: 200px">
-    <nz-content style="margin:24px 16px 0; overflow: initial">
+  <nz-layout [style.margin-left.px]="sideWidth">
+    <nz-content>
       <orc-composer-canvas></orc-composer-canvas>
       <orc-composer-preview></orc-composer-preview>
       <orc-composer-config></orc-composer-config>

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

@@ -1,13 +1,11 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'orc-composer',
   templateUrl: './composer.component.html',
   styleUrls: ['./composer.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ComposerComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit() {}
+export class ComposerComponent {
+  sideWidth = 250;
 }

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

@@ -1,12 +1,14 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 import {
   ComponentRegistry,
+  ErrorStrategy,
   OrchestratorCoreModule,
   OrchestratorDynamicComponentType,
+  SuppressErrorStrategy,
 } from '@orchestrator/core';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
-import { NzMenuModule } from 'ng-zorro-antd/menu';
 
 import { ComposerCanvasModule } from './composer-canvas';
 import { ComposerComponentsModule } from './composer-components';
@@ -21,6 +23,7 @@ import { ComposerComponent } from './composer.component';
 @NgModule({
   imports: [
     CommonModule,
+    DragDropModule,
     NzLayoutModule,
     OrchestratorCoreModule,
     ComposerCanvasModule,
@@ -42,11 +45,13 @@ import { ComposerComponent } from './composer.component';
     ComposerComponent,
   ],
   declarations: [ComposerComponent],
+  providers: [],
 })
 export class ComposerModule {
   static forRoot(): ModuleWithProviders<ComposerModule> {
     return {
       ngModule: ComposerModule,
+      providers: [{ provide: ErrorStrategy, useClass: SuppressErrorStrategy }],
     };
   }