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

Co-Authored-By: RyuuGan <stdammit@gmail.com>

re orchestratora/rfcs#2

Author: gund

libs/composer/package.json

@@ -18,6 +18,7 @@
   "author": "Orchestrator <orchestratora@gmail.com>",
   "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;
+}