chore(release): release 16.1.0 (#326)

Co-authored-by: huaweidevcloud <[email protected]>

devui/back-top/back-top.component.html

@@ -1,23 +1,34 @@
-<div (click)="goTop()" class="devui-backtop" [ngStyle]="{ display: isVisible ? 'block' : 'none', bottom: bottom, right: right }">
-  <ng-template [ngTemplateOutlet]="customTemplate ? customTemplate : default"></ng-template>
-  <ng-template #default>
-    <div class="devui-backtop-content">
-      <svg
-        width="16px"
-        height="16px"
-        viewBox="0 0 16 16"
-        version="1.1"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-      >
-        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-          <path
-            d="M8.71335931,15.2865297 C8.61179683,16.2090609 7.32293758,16.1267953 7.27304695,15.2865297 C7.27175008,14.6475142 7.27175008,5.26479636 7.27175008,5.26479636 L2.83675052,9.54548344 C2.14185995,10.1440615 1.3143288,9.18731159 1.83135998,8.55773353 C3.79557855,6.65310872 7.3202657,3.24515592 7.40179694,3.16632781 C7.72696878,2.81306222 8.23887498,2.79476534 8.58495308,3.16632781 C9.23193739,3.7919215 14.0334057,8.42146792 14.1791557,8.58804603 C14.66614,9.19338972 13.8787807,10.0892021 13.2066089,9.58451469 C13.0329683,9.43717095 8.71468744,5.26462448 8.71468744,5.26462448 L8.71335931,15.2865297 Z M1.81868811,-8.54871729e-14 L14.1075619,-8.54871729e-14 L14.1075619,1.39509361 L1.81868811,1.39509361 L1.81868811,-8.54871729e-14 Z"
-            fill="#FFFFFF"
-            fill-rule="nonzero"
-          ></path>
-        </g>
-      </svg>
-    </div>
-  </ng-template>
+<div
+  class="devui-backtop"
+  [ngStyle]="{
+    display: isVisible ? 'block' : 'none',
+    bottom: bottom,
+    right: right,
+    cursor: moveCursor && draggable ? 'move' : 'pointer'
+  }"
+  (click)="goTop()"
+>
+  <div class="devui-backtop-drag-handle" (mousedown)="mousedownEvent($event)" (mouseleave)="mouseleaveEvent()" (click)="clickEvent($event)">
+    <ng-template [ngTemplateOutlet]="customTemplate ? customTemplate : default"></ng-template>
+    <ng-template #default>
+      <div class="devui-backtop-content">
+        <svg
+          width="16px"
+          height="16px"
+          viewBox="0 0 16 16"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <path
+              d="M8.71335931,15.2865297 C8.61179683,16.2090609 7.32293758,16.1267953 7.27304695,15.2865297 C7.27175008,14.6475142 7.27175008,5.26479636 7.27175008,5.26479636 L2.83675052,9.54548344 C2.14185995,10.1440615 1.3143288,9.18731159 1.83135998,8.55773353 C3.79557855,6.65310872 7.3202657,3.24515592 7.40179694,3.16632781 C7.72696878,2.81306222 8.23887498,2.79476534 8.58495308,3.16632781 C9.23193739,3.7919215 14.0334057,8.42146792 14.1791557,8.58804603 C14.66614,9.19338972 13.8787807,10.0892021 13.2066089,9.58451469 C13.0329683,9.43717095 8.71468744,5.26462448 8.71468744,5.26462448 L8.71335931,15.2865297 Z M1.81868811,-8.54871729e-14 L14.1075619,-8.54871729e-14 L14.1075619,1.39509361 L1.81868811,1.39509361 L1.81868811,-8.54871729e-14 Z"
+              fill="#FFFFFF"
+              fill-rule="nonzero"
+            ></path>
+          </g>
+        </svg>
+      </div>
+    </ng-template>
+  </div>
 </div>

devui/back-top/back-top.component.scss

@@ -4,9 +4,12 @@
   width: 40px;
   height: 40px;
   position: fixed;
-  cursor: pointer;
   z-index: 1;
 
+  .devui-backtop-drag-handle {
+    cursor: unset !important;
+  }
+
   &-content {
     width: 40px;
     height: 40px;

devui/back-top/back-top.component.ts

@@ -1,7 +1,20 @@
 import { DOCUMENT } from '@angular/common';
 import {
-  ChangeDetectionStrategy, ChangeDetectorRef, Component,
-  ElementRef, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, TemplateRef
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Inject,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  Output,
+  SimpleChanges,
+  TemplateRef
 } from '@angular/core';
 import { fromEvent, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -12,30 +25,35 @@ import { debounceTime } from 'rxjs/operators';
   styleUrls: ['./back-top.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
-})
-export class BackTopComponent implements OnInit, OnChanges, OnDestroy {
+  })
+export class BackTopComponent implements OnChanges, OnInit, OnDestroy, AfterViewInit {
   @Input() customTemplate: TemplateRef<any>;
   @Input() visibleHeight = 300;
   @Input() bottom = '50px';
   @Input() right = '30px';
   @Input() scrollTarget: HTMLElement;
-  @Output() backTopEvent =  new EventEmitter<boolean>();
+  @Input() draggable = false;
+  @Output() backTopEvent = new EventEmitter<boolean>();
+  @Output() dragEvent = new EventEmitter<boolean>();
 
   currScrollTop = 0;
+  duration = 0;
+  cursorTimer: any;
+  dragBoundary: any;
+  moveCursor = false;
   isVisible = false;
-  SCROLL_REFRESH_INTERVAL = 100;
   target: HTMLElement | Window;
   subs: Subscription = new Subscription();
   document: Document;
+
+  SCROLL_REFRESH_INTERVAL = 100;
+  MOUSEDOWN_DELAY = 180;
+  RESIZE_DELAY = 300;
+
   constructor(private cdr: ChangeDetectorRef, private el: ElementRef, @Inject(DOCUMENT) private doc: any) {
     this.document = this.doc;
   }
 
-  ngOnInit() {
-    this.addScrollEvent();
-    this.showButton();
-  }
-
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['scrollTarget']) {
       if (this.subs) {
@@ -46,6 +64,42 @@ export class BackTopComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  ngOnInit(): void {
+    this.addScrollEvent();
+    this.showButton();
+  }
+
+  ngAfterViewInit(): void {
+    if (this.draggable) {
+      // 窗口大小改变时，如缩放比例或组件超出显示范围重置到默认位置
+      this.subs.add(
+        fromEvent(window, 'resize')
+          .pipe(debounceTime(this.RESIZE_DELAY))
+          .subscribe(() => {
+            const dom = this.dragBoundary?.dom || this.el.nativeElement.querySelector('div.devui-backtop');
+            if (dom) {
+              // 不显示时无法获取getBoundingClientRect,使用style获取
+              const style = getComputedStyle(dom);
+              const left = parseInt(style.left, 10) || 0;
+              const top = parseInt(style.top, 10) || 0;
+              if (window.devicePixelRatio !== 1 || left > window.innerWidth || top > window.innerHeight) {
+                this.onMouseUp();
+                this.duration = 0;
+                dom.style.left = 'unset';
+                dom.style.top = 'unset';
+              }
+            }
+          })
+      );
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.subs) {
+      this.subs.unsubscribe();
+    }
+  }
+
   addScrollEvent() {
     this.subs.add(
       fromEvent(this.getScrollTarget(), 'scroll')
@@ -67,9 +121,11 @@ export class BackTopComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   showButton() {
-    this.currScrollTop = this.target === window ?
-      (window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop) : this.scrollTarget.scrollTop;
-    if (this.isVisible !== (this.currScrollTop >= this.visibleHeight)) {
+    this.currScrollTop =
+      this.target === window
+        ? window.pageYOffset || this.document.documentElement.scrollTop || this.document.body.scrollTop
+        : this.scrollTarget.scrollTop;
+    if (this.isVisible !== this.currScrollTop >= this.visibleHeight) {
       this.isVisible = !this.isVisible;
     }
   }
@@ -85,9 +141,95 @@ export class BackTopComponent implements OnInit, OnChanges, OnDestroy {
     this.backTopEvent.emit(true);
   }
 
-  ngOnDestroy() {
-    if (this.subs) {
-      this.subs.unsubscribe();
+  setDragBoundary() {
+    const dom = this.el.nativeElement.querySelector('div.devui-backtop');
+    let boxRect;
+    let minLeft;
+    let minTop;
+    let maxLeft;
+    let maxTop;
+    if (dom) {
+      const { width, height } = dom.getBoundingClientRect();
+      if (this.scrollTarget) {
+        boxRect = this.scrollTarget.getBoundingClientRect();
+        minLeft = -1 * boxRect.x;
+        minTop = -1 * boxRect.y;
+        maxLeft = window.innerWidth - boxRect.x - width;
+        maxTop = window.innerHeight - boxRect.y - height;
+      } else {
+        boxRect = { x: 0, y: 0 };
+        minLeft = 0;
+        minTop = 0;
+        maxLeft = window.innerWidth - width;
+        maxTop = window.innerHeight - height;
+      }
+      this.dragBoundary = { dom, boxRect, minLeft, minTop, maxLeft, maxTop };
+    }
+  }
+
+  // mousedown mouseup click 按顺序触发且前一个结束触发下一个
+  mousedownEvent(event: MouseEvent) {
+    if (this.draggable) {
+      event.preventDefault();
+      this.cursorTimer = setTimeout(() => {
+        this.setDragBoundary();
+        this.duration = new Date().getTime();
+        this.moveCursor = true;
+        this.cdr.markForCheck();
+        this.dragEvent.emit(true);
+      }, this.MOUSEDOWN_DELAY);
+    }
+  }
+
+  mouseleaveEvent() {
+    if (this.draggable && this.cursorTimer) {
+      clearTimeout(this.cursorTimer);
+    }
+  }
+
+  clickEvent(event: MouseEvent) {
+    if (this.draggable && this.duration > this.MOUSEDOWN_DELAY) {
+      event.stopPropagation();
+      this.duration = 0;
+    }
+  }
+
+  @HostListener('document:mouseup', [])
+  onMouseUp() {
+    if (this.draggable) {
+      if (this.cursorTimer) {
+        clearTimeout(this.cursorTimer);
+      }
+      if (this.moveCursor) {
+        this.moveCursor = false;
+        this.cdr.markForCheck();
+        this.dragEvent.emit(false);
+      }
+      this.duration = this.duration && new Date().getTime() - this.duration;
+    }
+  }
+
+  @HostListener('document:mousemove', ['$event'])
+  onMouseMove(event: MouseEvent) {
+    if (this.draggable && this.moveCursor && this.dragBoundary) {
+      // 先判断再执行阻止默认事件，否则可能影响鼠标拖选功能
+      event.preventDefault();
+      const posX = event.movementX;
+      const posY = event.movementY;
+      const rect = this.dragBoundary.dom.getBoundingClientRect();
+      const left = rect.x - this.dragBoundary.boxRect.x + posX;
+      const top = rect.y - this.dragBoundary.boxRect.y + posY;
+      const isLeft = left < this.dragBoundary.minLeft;
+      const isRight = left > this.dragBoundary.maxLeft;
+      const isTop = top < this.dragBoundary.minTop;
+      const isBottom = top > this.dragBoundary.maxTop;
+      this.dragBoundary.dom.style.left = `${isRight ? this.dragBoundary.maxLeft : isLeft ? this.dragBoundary.minLeft : left}px`;
+      this.dragBoundary.dom.style.top = `${isBottom ? this.dragBoundary.maxTop : isTop ? this.dragBoundary.minTop : top}px`;
+      // 如到达边界释放拖拽动作，避免鼠标偏移较大距离后返回主视窗仍可拖拽
+      if ([isLeft, isRight, isTop, isBottom].includes(true)) {
+        this.onMouseUp();
+        this.duration = 0;
+      }
     }
   }
 }

devui/back-top/demo/customize/customize.component.html

@@ -1,9 +1,16 @@
 <div class="devui-backtop-custom">
   <span class="icon-chevron-up"></span>
 </div>
-<d-back-top (backTopEvent)="backTop($event)" [customTemplate]="customTemplate" [bottom]="'100px'" [visibleHeight]="200">
+<d-back-top
+  [customTemplate]="customTemplate"
+  [bottom]="'100px'"
+  [visibleHeight]="200"
+  [draggable]="true"
+  (dragEvent)="toggleTooltip($event)"
+  (backTopEvent)="backTop($event)"
+>
   <ng-template #customTemplate>
-    <div class="devui-backtop-custom" dTooltip [content]="'BackTop'" [position]="'left'">
+    <div #tooltipItem class="devui-backtop-custom" dTooltip [content]="content" [position]="'left'">
       <span class="icon-chevron-up"></span>
     </div>
   </ng-template>

devui/back-top/demo/customize/customize.component.ts

@@ -1,13 +1,25 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { TooltipDirective } from 'ng-devui/tooltip';
 
 @Component({
   selector: 'd-back-top-customize',
   templateUrl: './customize.component.html',
-  styleUrls: ['./customize.component.scss']
-})
-
+  styleUrls: ['./customize.component.scss'],
+  })
 export class CustomizeComponent {
-  constructor() {}
+  @ViewChild('tooltipItem', { read: TooltipDirective }) tooltipItem: TooltipDirective;
+  content = 'Back to the top';
+
+  toggleTooltip(toggle) {
+    if (this.tooltipItem) {
+      if (toggle) {
+        this.tooltipItem.content = '';
+        this.tooltipItem.hide();
+      } else {
+        this.tooltipItem.content = this.content;
+      }
+    }
+  }
 
   backTop(event) {
     console.log(event);

devui/back-top/demo/scroll-container/scroll-container.component.html

@@ -4,5 +4,11 @@
       {{ index + 1 + '. ' + item }}
     </li>
   </ul>
-  <d-back-top [scrollTarget]="scrollElement" [right]="'30px'" [bottom]="'10px'" (backTopEvent)="backTop($event)"></d-back-top>
+  <d-back-top
+    [draggable]="true"
+    [scrollTarget]="scrollElement"
+    [right]="'60px'"
+    [bottom]="'30px'"
+    (backTopEvent)="backTop($event)"
+  ></d-back-top>
 </div>