ローテートボタンがダブルクリックを拾う不具合修正。

NanasuNANA · Jun 3, 2024 · 8ac094f · 8ac094f
1 parent a07fb5f
commit 8ac094f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/src/app/component/ui-panel/ui-panel.component.html b/src/app/component/ui-panel/ui-panel.component.html
@@ -1,13 +1,13 @@
 <div [@flyInOut]="'in'" [ngClass]="{'pointer-events-none': isPointerDragging, 'is-full-screen': isFullScreen, 'is-minimized': isMinimized && !isFullScreen, 'i-am-gm': isGMMode}" class="draggable-panel"
   [style.left.px]="left" [style.top.px]="top" [style.width.px]="width" [style.height.px]="height"
   [resizable.disable]="isMinimized || isFullScreen" [resizable.align]="!isAbleRotateButton ? 'normal' : isHorizontal ? 'horizontal' : 'vertical'" [draggable.disable]="isFullScreen" [draggable.stack]="'.draggable-panel'" [resizable.stack]="'.draggable-panel'" appDraggable appResizable #draggablePanel>
-  <div class="title" #titleBar (dblclick)="isFullScreen ? toggleFullScreen() : toggleMinimize()">
-    <button *ngIf="isAbleRotateButton" style="padding: 0px; height: 14px; margin-top: 3px; margin-left: 1px" (click)="toggleRotate()"><i class="material-icons" style="font-size: 14px;">pivot_table_chart</i></button>
+  <div class="title" #titleBar (dblclick)="isFullScreen ? toggleFullScreen($event) : toggleMinimize($event)">
+    <button *ngIf="isAbleRotateButton" style="padding: 0px; height: 14px; margin-top: 3px; margin-left: 1px" (dblclick)="notOperaion($event)" (click)="toggleRotate($event)"><i class="material-icons" style="font-size: 14px;">pivot_table_chart</i></button>
     <div [ngClass]="{'rotateble': isAbleRotateButton}">{{panelService.title}}</div>
     <div class="title-button">
-      <button *ngIf="isAbleMinimizeButton" (click)="toggleMinimize()"><i class="material-icons" [style.font-size.px]="isMinimized ? 12 : 14">{{ isMinimized ? 'crop_din' : 'minimize' }}</i></button>
-      <button *ngIf="isAbleFullScreenButton" (click)="toggleFullScreen()"><i class="material-icons" [style.font-size.px]="isFullScreen && !isMinimized ? 12 : 14">{{ !isFullScreen ? 'fullscreen' : !isMinimized ? 'crop_din' : 'minimize' }}</i></button>
-      <button *ngIf="isAbleCloseButton" (click)="close()"><i class="material-icons" style="font-size: 14px">close</i></button>
+      <button *ngIf="isAbleMinimizeButton" (dblclick)="notOperaion($event)" (click)="toggleMinimize($event)"><i class="material-icons" [style.font-size.px]="isMinimized ? 12 : 14">{{ isMinimized ? 'crop_din' : 'minimize' }}</i></button>
+      <button *ngIf="isAbleFullScreenButton" (dblclick)="notOperaion($event)" (click)="toggleFullScreen($event)"><i class="material-icons" [style.font-size.px]="isFullScreen && !isMinimized ? 12 : 14">{{ !isFullScreen ? 'fullscreen' : !isMinimized ? 'crop_din' : 'minimize' }}</i></button>
+      <button *ngIf="isAbleCloseButton" (dblclick)="notOperaion($event)" (click)="close($event)"><i class="material-icons" style="font-size: 14px">close</i></button>
     </div>
   </div>
   <div class="scrollable-panel" [ngClass]="{'overlay': isAbleRotateButton, 'horizontal': isHorizontal}" [style.display]="isMinimized && !isFullScreen ? 'none' : null" #scrollablePanel>

diff --git a/src/app/component/ui-panel/ui-panel.component.ts b/src/app/component/ui-panel/ui-panel.component.ts
@@ -83,7 +83,12 @@ export class UIPanelComponent implements OnInit {
     this.panelService.scrollablePanel = this.scrollablePanel.nativeElement;
   }
 
-  toggleMinimize() {
+  toggleMinimize(e: Event = null) {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
     const panel = this.draggablePanel.nativeElement;
     const cntent = this.scrollablePanel.nativeElement;
     panel.style.transition = 'width 0.1s ease-in-out, height 0.1s ease-in-out';
@@ -119,7 +124,12 @@ export class UIPanelComponent implements OnInit {
     */
   }
 
-  toggleFullScreen() {
+  toggleFullScreen(e: Event = null) {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
     const panel = this.draggablePanel.nativeElement;
     const cntent = this.scrollablePanel.nativeElement;
     panel.style.transition = 'width 0.1s ease-in-out, height 0.1s ease-in-out';
@@ -176,7 +186,12 @@ export class UIPanelComponent implements OnInit {
     */
   }
 
-  toggleRotate() {
+  toggleRotate(e: Event = null) {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+
     //if (this.isMinimized) return;
     const panel = this.draggablePanel.nativeElement;
     const cntent = this.scrollablePanel.nativeElement;
@@ -185,7 +200,7 @@ export class UIPanelComponent implements OnInit {
     setTimeout(() => {
       panel.style.transition = null;
       cntent.style.overflowY = null;
-    }, 100);
+    }, 500);
 
     const saveWidth = panel.offsetWidth;
     const saveHeight = panel.offsetHeight;
@@ -209,9 +224,23 @@ export class UIPanelComponent implements OnInit {
     this.isMinimized = false;
     this.isFullScreen = false;
     this.rotateEvent.emit(this.isHorizontal);
+
+    return false;
   }
 
-  close() {
+  close(e: Event = null) {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
     if (this.panelService) this.panelService.close();
   }
+
+  notOperaion(e: Event = null) {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    return false;
+  }
 }