Release v2.0.0

Add a transparent div when dragging and resizing.

Author: Xie, Ziyu

README.md

@@ -25,6 +25,9 @@ angular2-draggable has angular directives that make the DOM element draggable an
     + provided since v2.0, requires Angular 6
 
 # Latest Update
++ 2018.08.03: 2.0.0
+  + Fix [issue #84](https://github.com/xieziyu/angular2-draggable/issues/84): iFrames, and context unrelated elements block all events, and are unusable
+
 + 2018.07.02: 2.0.0-beta.2
   + ngResizable: Provide `[rzAspectRatio]`, whether the element should be constrained to a specific aspect ratio. [demo](https://xieziyu.github.io/angular2-draggable/#/resizable/aspect-ratio)
   + ngResizable: Provide `[rzContainment]`, constrains resizing to within the bounds of the specified element or region. [demo](https://xieziyu.github.io/angular2-draggable/#/resizable/containment)

angular.json

@@ -44,7 +44,8 @@
               "node_modules/prismjs/components/prism-typescript.min.js",
               "node_modules/prismjs/components/prism-javascript.min.js",
               "node_modules/prismjs/components/prism-bash.min.js",
-              "node_modules/prismjs/components/prism-diff.min.js"
+              "node_modules/prismjs/components/prism-diff.min.js",
+              "node_modules/prismjs/components/prism-sass.min.js"
             ]
           },
           "configurations": {

projects/angular2-draggable/package.json

@@ -1,8 +1,8 @@
 {
   "name": "angular2-draggable",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0",
   "peerDependencies": {
-    "@angular/common": "^6.0.0-rc.0 || ^6.0.0",
-    "@angular/core": "^6.0.0-rc.0 || ^6.0.0"
+    "@angular/common": "^6.0.0-rc.0 || >=6.0.0",
+    "@angular/core": "^6.0.0-rc.0 || >=6.0.0"
   }
 }

projects/angular2-draggable/src/lib/angular-draggable.directive.ts

@@ -1,26 +1,32 @@
 import {
   Directive, ElementRef, Renderer2,
   Input, Output, OnInit, HostListener,
-  EventEmitter, OnChanges, SimpleChanges
+  EventEmitter, OnChanges, SimpleChanges, OnDestroy
 } from '@angular/core';
 
 import { IPosition, Position } from './models/position';
+import { HelperBlock } from './widgets/helper-block';
 
 @Directive({
   selector: '[ngDraggable]',
   exportAs: 'ngDraggable'
 })
-export class AngularDraggableDirective implements OnInit, OnChanges {
+export class AngularDraggableDirective implements OnInit, OnDestroy, OnChanges {
   private allowDrag = true;
   private moving = false;
   private orignal: Position = null;
   private oldTrans = new Position(0, 0);
   private tempTrans = new Position(0, 0);
   private oldZIndex = '';
-  private oldPosition = '';
   private _zIndex = '';
   private needTransform = false;
 
+  /**
+   * Bugfix: iFrames, and context unrelated elements block all events, and are unusable
+   * https://github.com/xieziyu/angular2-draggable/issues/84
+   */
+  private _helperBlock: HelperBlock = null;
+
   @Output() started = new EventEmitter<any>();
   @Output() stopped = new EventEmitter<any>();
   @Output() edge = new EventEmitter<any>();
@@ -86,7 +92,9 @@ export class AngularDraggableDirective implements OnInit, OnChanges {
     }
   }
 
-  constructor(private el: ElementRef, private renderer: Renderer2) { }
+  constructor(private el: ElementRef, private renderer: Renderer2) {
+    this._helperBlock = new HelperBlock(el.nativeElement, renderer);
+  }
 
   ngOnInit() {
     if (this.allowDrag) {
@@ -97,6 +105,16 @@ export class AngularDraggableDirective implements OnInit, OnChanges {
     this.resetPosition();
   }
 
+  ngOnDestroy() {
+    this.bounds = null;
+    this.handle = null;
+    this.orignal = null;
+    this.oldTrans = null;
+    this.tempTrans = null;
+    this._helperBlock.dispose();
+    this._helperBlock = null;
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (changes['position'] && !changes['position'].isFirstChange()) {
       let p = changes['position'].currentValue;
@@ -181,6 +199,9 @@ export class AngularDraggableDirective implements OnInit, OnChanges {
     if (!this.moving) {
       this.started.emit(this.el.nativeElement);
       this.moving = true;
+
+      // Add a transparent helper div:
+      this._helperBlock.add();
     }
   }
 
@@ -233,6 +254,9 @@ export class AngularDraggableDirective implements OnInit, OnChanges {
     if (this.moving) {
       this.stopped.emit(this.el.nativeElement);
 
+      // Remove the helper div:
+      this._helperBlock.remove();
+
       if (this.needTransform) {
         if (Position.isIPosition(this.position)) {
           this.oldTrans.set(this.position);

projects/angular2-draggable/src/lib/angular-resizable.directive.ts

@@ -5,6 +5,7 @@ import {
   OnDestroy, AfterViewInit
 } from '@angular/core';
 
+import { HelperBlock } from './widgets/helper-block';
 import { ResizeHandle } from './widgets/resize-handle';
 import { ResizeHandleType } from './models/resize-handle-type';
 import { Position } from './models/position';
@@ -38,6 +39,12 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
 
   private _bounding: any = null;
 
+  /**
+   * Bugfix: iFrames, and context unrelated elements block all events, and are unusable
+   * https://github.com/xieziyu/angular2-draggable/issues/84
+   */
+  private _helperBlock: HelperBlock = null;
+
   /** Disables the resizable if set to false. */
   @Input() set ngResizable(v: any) {
     if (v !== undefined && v !== null && v !== '') {
@@ -82,7 +89,9 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
   /** emitted when stop resizing */
   @Output() rzStop = new EventEmitter<IResizeEvent>();
 
-  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) { }
+  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) {
+    this._helperBlock = new HelperBlock(el.nativeElement, renderer);
+  }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes['rzHandles'] && !changes['rzHandles'].isFirstChange()) {
@@ -105,6 +114,8 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
   ngOnDestroy() {
     this.removeHandles();
     this._containment = null;
+    this._helperBlock.dispose();
+    this._helperBlock = null;
   }
 
   ngAfterViewInit() {
@@ -295,11 +306,15 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
   }
 
   private startResize(handle: ResizeHandle) {
+    // Add a transparent helper div:
+    this._helperBlock.add();
     this._handleResizing = handle;
     this.rzStart.emit(this.getResizingEvent());
   }
 
   private stopResize() {
+    // Remove the helper div:
+    this._helperBlock.remove();
     this.rzStop.emit(this.getResizingEvent());
     this._handleResizing = null;
   }

projects/angular2-draggable/src/lib/widgets/helper-block.ts

@@ -0,0 +1,43 @@
+import { Renderer2 } from '@angular/core';
+
+export class HelperBlock {
+  protected _helper: Element;
+
+  constructor(
+    protected parent: Element,
+    protected renderer: Renderer2
+  ) {
+    // generate helper div
+    let helper = renderer.createElement('div');
+    renderer.setStyle(helper, 'position', 'absolute');
+    renderer.setStyle(helper, 'width', '100%');
+    renderer.setStyle(helper, 'height', '100%');
+    renderer.setStyle(helper, 'background-color', 'transparent');
+    renderer.setStyle(helper, 'top', '0');
+    renderer.setStyle(helper, 'left', '0');
+
+    // done
+    this._helper = helper;
+  }
+
+  add() {
+    // append div to parent
+    if (this.parent) {
+      this.parent.appendChild(this._helper);
+    }
+  }
+
+  remove() {
+    if (this.parent) {
+      this.parent.removeChild(this._helper);
+    }
+  }
+
+  dispose() {
+    this._helper = null;
+  }
+
+  get el() {
+    return this._helper;
+  }
+}

src/app/_nav.ts

@@ -48,7 +48,7 @@ export const navigation = [
         name: 'Snap To Grid',
         url: '/draggable/advance/snap-grid',
         icon: 'fa fa-th-large',
-      },
+      }
     ]
   },
   {
@@ -69,21 +69,29 @@ export const navigation = [
       {
         name: 'Aspect Ratio',
         url: '/resizable/aspect-ratio',
-        icon: 'fa fa-square-o',
-        badge: {
-          variant: 'success',
-          text: 'new'
-        }
+        icon: 'fa fa-square-o'
       },
       {
         name: 'Containment',
         url: '/resizable/containment',
-        icon: 'fa fa-window-close',
+        icon: 'fa fa-window-close'
+      },
+    ]
+  },
+  {
+    name: 'Advanced Demo',
+    icon: 'fa fa-bookmark',
+    url: '/draggable',
+    children: [
+      {
+        name: 'iframe',
+        url: '/draggable/advance/iframe',
+        icon: 'fa fa-window-maximize',
         badge: {
           variant: 'success',
           text: 'new'
         }
-      },
+      }
     ]
   }
 ];

src/app/views/adv-demo/adv-demo-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { SwapDemoComponent } from './swap-demo/swap-demo.component';
 import { SnapGridDemoComponent } from './snap-grid-demo/snap-grid-demo.component';
+import { IframeDemoComponent } from './iframe-demo/iframe-demo.component';
 
 
 const routes: Routes = [
@@ -18,6 +19,13 @@ const routes: Routes = [
     data: {
       title: 'Snap to Grid'
     }
+  },
+  {
+    path: 'iframe',
+    component: IframeDemoComponent,
+    data: {
+      title: 'iframe'
+    }
   }
 ];
 

src/app/views/adv-demo/adv-demo.module.ts

@@ -5,6 +5,7 @@ import { SharedModule } from '../shared/shared.module';
 import { AdvDemoRoutingModule } from './adv-demo-routing.module';
 import { SwapDemoComponent } from './swap-demo/swap-demo.component';
 import { SnapGridDemoComponent } from './snap-grid-demo/snap-grid-demo.component';
+import { IframeDemoComponent } from './iframe-demo/iframe-demo.component';
 
 @NgModule({
   imports: [
@@ -14,7 +15,8 @@ import { SnapGridDemoComponent } from './snap-grid-demo/snap-grid-demo.component
   ],
   declarations: [
     SwapDemoComponent,
-    SnapGridDemoComponent
+    SnapGridDemoComponent,
+    IframeDemoComponent
   ]
 })
 export class AdvDemoModule { }

src/app/views/adv-demo/iframe-demo/iframe-demo.component.html

@@ -0,0 +1,33 @@
+<div class="iframe-drag-bounds" #dragBounds>
+  <div class="iframe-resize-container"
+      ngResizable
+      rzHandles="n,s,e,w,se,sw"
+      ngDraggable
+      [handle]="dragHandle"
+      [bounds]="dragBounds"
+      [inBounds]="true"
+      [preventDefaultEvent]="true">
+    <div #dragHandle class="iframe-drag-handle">
+      <h6> Draggable & Resizable </h6>
+    </div>
+    <iframe src="assets/demo.pdf" scrolling="no" width="100%" class="iframe-content"></iframe>
+  </div>
+</div>
+
+
+<!-- Documents -->
+<div class="row mt-4">
+  <div class="col">
+    <tabset>
+      <tab heading="html">
+        <markdown [data]="demo_html | language: 'html'"></markdown>
+      </tab>
+      <tab heading="component">
+        <markdown [data]="demo_ts | language: 'typescript'"></markdown>
+      </tab>
+      <tab heading="component">
+        <markdown [data]="demo_scss | language: 'sass'"></markdown>
+      </tab>
+    </tabset>
+  </div>
+</div>