fix: div handle not working for svg element (#216)

xieziyu · May 20, 2023 · 1c27ca1 · 1c27ca1
1 parent 294c2a0
commit 1c27ca1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/projects/angular2-draggable/src/lib/angular-resizable.directive.ts b/projects/angular2-draggable/src/lib/angular-resizable.directive.ts
@@ -78,6 +78,26 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
    * */
   @Input() rzHandles: ResizeHandleType = 'e,s,se';
 
+  /**
+   * Using exist handles for resizing instead of generate them.
+   * @example
+   * [rzHandleDoms] = {
+   *   e: handelE,
+   *   s: handelS,
+   *   se: handelSE
+   * };
+   * */
+  @Input() rzHandleDoms: {
+    se?: ElementRef;
+    sw?: ElementRef;
+    ne?: ElementRef;
+    nw?: ElementRef;
+    n?: ElementRef;
+    e?: ElementRef;
+    s?: ElementRef;
+    w?: ElementRef;
+  } = {};
+
   /**
    * Whether the element should be constrained to a specific aspect ratio.
    *  Multiple types supported:
@@ -274,13 +294,14 @@ export class AngularResizableDirective implements OnInit, OnChanges, OnDestroy,
   /** Use it to create a handle */
   private createHandleByType(type: string, css: string): ResizeHandle {
     const _el = this.el.nativeElement;
+    const _h = this.rzHandleDoms[type] ? this.rzHandleDoms[type].nativeElement : null;
 
     if (!type.match(/^(se|sw|ne|nw|n|e|s|w)$/)) {
       console.error('Invalid handle type:', type);
       return null;
     }
 
-    return new ResizeHandle(_el, this.renderer, type, css, this.onMouseDown.bind(this));
+    return new ResizeHandle(_el, this.renderer, type, css, this.onMouseDown.bind(this), _h);
   }
 
   private removeHandles() {

diff --git a/projects/angular2-draggable/src/lib/widgets/resize-handle.ts b/projects/angular2-draggable/src/lib/widgets/resize-handle.ts
@@ -9,10 +9,11 @@ export class ResizeHandle {
     protected renderer: Renderer2,
     public type: string,
     public css: string,
-    private onMouseDown: any
+    private onMouseDown: any,
+    private existHandle?: Element
   ) {
-    // generate handle div
-    let handle = renderer.createElement('div');
+    // generate handle div or using exist handle
+    let handle = this.existHandle || renderer.createElement('div');
     renderer.addClass(handle, 'ng-resizable-handle');
     renderer.addClass(handle, css);
 
@@ -22,7 +23,7 @@ export class ResizeHandle {
     }
 
     // append div to parent
-    if (this.parent) {
+    if (this.parent && !this.existHandle) {
       parent.appendChild(handle);
     }
 
@@ -41,7 +42,7 @@ export class ResizeHandle {
     this._handle.removeEventListener('mousedown', this._onResize);
     this._handle.removeEventListener('touchstart', this._onResize);
 
-    if (this.parent) {
+    if (this.parent && !this.existHandle) {
       this.parent.removeChild(this._handle);
     }
     this._handle = null;