[pull] develop from xlayers:develop

.circleci/config.yml

@@ -0,0 +1,33 @@
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:10.12
+
+      # Specify service dependencies here if necessary
+      # CircleCI maintains a library of pre-built images
+      # documented at https://circleci.com/docs/2.0/circleci-images/
+      # - image: circleci/mongo:3.4.4
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      # run tests!
+      - run: yarn test

package.json

@@ -34,8 +34,6 @@
     "@ngxs/store": "^3.3.0",
     "@stackblitz/sdk": "^1.2.0",
     "@types/file-saver": "^2.0.0",
-    "angular-draggable-droppable": "^4.0.2",
-    "angular-resizable-element": "^3.2.2",
     "big-integer": "^1.6.36",
     "buffer": "^5.2.1",
     "core-js": "^2.5.7",

src/app/core/core.module.ts

@@ -19,9 +19,8 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatTreeModule } from '@angular/material/tree';
-import { ResizableModule } from 'angular-resizable-element';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ColorSketchModule } from 'ngx-color/sketch';
-import { DragAndDropModule } from 'angular-draggable-droppable';
 
 const MatModules = [
   MatSliderModule,
@@ -41,15 +40,11 @@ const MatModules = [
   MatButtonToggleModule,
   MatMenuModule,
   MatTooltipModule,
-  MatSelectModule
+  MatSelectModule,
+  DragDropModule
 ];
 
-const ExtraModules = [
-  DragAndDropModule,
-  ResizableModule,
-  FormsModule,
-  ColorSketchModule
-];
+const ExtraModules = [FormsModule, ColorSketchModule];
 
 @NgModule({
   imports: [...MatModules, ...ExtraModules],

src/app/editor/code-editor/editor-container/codegen/codegen.service.spec.ts

@@ -1,14 +1,22 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { CodeGenService } from './codegen.service';
+import { NgxsModule } from '@ngxs/store';
+import { UiState } from 'src/app/core/state';
+import { CodeGenState } from 'src/app/core/state/page.state';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 describe('CodeGenService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      providers: [CodeGenService]
+      providers: [CodeGenService],
+      imports: [NgxsModule.forRoot([UiState, CodeGenState]), MatSnackBarModule]
     });
   });
 
-  it('should be created', inject([CodeGenService], (service: CodeGenService) => {
-    expect(service).toBeTruthy();
-  }));
+  it('should be created', inject(
+    [CodeGenService],
+    (service: CodeGenService) => {
+      expect(service).toBeTruthy();
+    }
+  ));
 });

src/app/editor/code-editor/editor-container/editor-container.component.spec.ts

@@ -1,29 +1,54 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EditorContainerComponent } from './editor-container.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { NgxsModule, Store } from '@ngxs/store';
+import { UiState } from 'src/app/core/state';
+import { CodeGenState, CodeGenSettings } from 'src/app/core/state/page.state';
+import { EditorContainerComponent } from './editor-container.component';
+import { CodeGenService } from './codegen/codegen.service';
+
+const codeGenService = {
+  generate() { return []; }
+};
 
 describe('EditorContainerComponent', () => {
   let component: EditorContainerComponent;
   let fixture: ComponentFixture<EditorContainerComponent>;
+  let store: Store;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       schemas: [NO_ERRORS_SCHEMA],
-      imports: [MatMenuModule],
-      declarations: [ EditorContainerComponent ]
-    })
-    .compileComponents();
+      imports: [
+        NgxsModule.forRoot([UiState, CodeGenState]),
+        MatMenuModule,
+        MatSnackBarModule
+      ],
+      providers: [
+        {
+          provide: CodeGenService,
+          useValue: codeGenService
+        }
+      ],
+      declarations: [EditorContainerComponent]
+    }).compileComponents();
+
+    store = TestBed.get(Store);
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EditorContainerComponent);
     component = fixture.componentInstance;
+    component.files = [];
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    store.selectOnce(state => state.codegen).subscribe((codegen: CodeGenSettings) => {
+      expect(codegen.content).toBe([]);
+      expect(codegen.kind).toBe(1 /* CodeGenService.Kind.Angular */ );
+    });
   });
 });

src/app/editor/editor.component.html

@@ -50,14 +50,10 @@
 <mat-drawer-container autosize [class.transparent-bg]="colors?.background === 'transparent'">
 
   <mat-drawer
-    mwlResizable
     class="sidebar"
-    [enableGhostResize]="true"
-    [resizeEdges]="{right: true}"
     mode="side"
     opened="false"
     disableClose="true"
-    (resizeEnd)="onResizeTreeViewerEnd($event)"
     [style.width.px]="settingTreeViewerWidth"
     #settingNavRef>
 
@@ -116,15 +112,11 @@
   </mat-drawer>
 
   <mat-drawer
-    mwlResizable
     class="sidebar settings"
-    [enableGhostResize]="true"
-    [resizeEdges]="{left: true}"
     mode="side"
     opened="false"
     position="end"
     hasBackdrop="false"
-    (resizeEnd)="onResizeSettingMenuEnd($event)"
     [style.width.px]="settingMenuWidth"
     #currentLayerNavRef>
 

src/app/editor/editor.component.ts

@@ -3,7 +3,17 @@ import { MatExpansionPanel } from '@angular/material/expansion';
 import { MatDrawerContainer } from '@angular/material/sidenav';
 import { Store } from '@ngxs/store';
 import * as FileSaver from 'file-saver';
-import { CurrentLayer, CurrentPage, ResetUiSettings, Toggle3D, ToggleCodeEditor, ToggleWireframe, UiState, ZoomIn, ZoomOut } from 'src/app/core/state';
+import {
+  CurrentLayer,
+  CurrentPage,
+  ResetUiSettings,
+  Toggle3D,
+  ToggleCodeEditor,
+  ToggleWireframe,
+  UiState,
+  ZoomIn,
+  ZoomOut
+} from 'src/app/core/state';
 import { environment } from '../../environments/environment';
 import { CodeGenState, CodeGenSettings } from '../core/state/page.state';
 import { XlayersNgxEditorModel } from './code-editor/editor-container/codegen/codegen.service';
@@ -107,9 +117,11 @@ export class EditorComponent implements OnInit {
         this.currentLayerNavRef.close();
       }
     });
-    this.store.select(UiState.isSettingsEnabled).subscribe(isEnbaledSettings => {
-      this.enabled = isEnbaledSettings;
-    });
+    this.store
+      .select(UiState.isSettingsEnabled)
+      .subscribe(isEnbaledSettings => {
+        this.enabled = isEnbaledSettings;
+      });
 
     this.store.select(CodeGenState.codegen).subscribe(codegen => {
       this.codegen = codegen;
@@ -138,7 +150,7 @@ export class EditorComponent implements OnInit {
     return page && page.name;
   }
 
-  changeBackgroundColor(event) {
+  changeBackgroundColor(event: any) {
     const c = event.color.rgb;
     if (c.a === 0) {
       this.colors.background = 'transparent';
@@ -150,6 +162,7 @@ export class EditorComponent implements OnInit {
   ZoomIn() {
     this.store.dispatch(new ZoomIn());
   }
+
   ZoomOut() {
     this.store.dispatch(new ZoomOut());
   }
@@ -159,14 +172,6 @@ export class EditorComponent implements OnInit {
     this.store.dispatch(new Toggle3D(this.is3dView));
   }
 
-  onResizeSettingMenuEnd(event) {
-    this.settingMenuWidth = event.rectangle.width;
-  }
-
-  onResizeTreeViewerEnd(event) {
-    this.settingTreeViewerWidth = event.rectangle.width;
-  }
-
   async share() {
     await this.exporter.export(this.codegen);
   }
@@ -176,7 +181,7 @@ export class EditorComponent implements OnInit {
     this.codegen.content.forEach(file => {
       zip.file(file.uri, file.value);
     });
-    const content = await zip.generateAsync({type: 'blob'});
+    const content = await zip.generateAsync({ type: 'blob' });
     FileSaver.saveAs(content, 'xLayers.zip');
   }