Merge pull request #281 from deckgo/debounce

inline-editor: debounce to solve tools appearing on continuing selection

Author: peterpeterparker

CHANGELOG.md

@@ -1,3 +1,12 @@
+<a name="1.0.0-rc.11"></a>
+# [1.0.0-rc.11](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.10...v1.0.0-11) (2019-09-01)
+
+### Web Components
+* inline-editor: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
+
+### Others
+* utils: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/utils/CHANGELOG.md))
+
 <a name="1.0.0-rc.10"></a>
 # [1.0.0-rc.10](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.9...v1.0.0-10) (2019-08-30)
 

studio/package-lock.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@deckdeckgo/core": "^1.0.0-rc.1",
     "@deckdeckgo/highlight-code": "^1.0.0-rc.1",
-    "@deckdeckgo/inline-editor": "^1.0.0-rc.1",
+    "@deckdeckgo/inline-editor": "^1.0.0-rc.1-1",
     "@deckdeckgo/lazy-img": "^1.0.0-rc.1",
     "@deckdeckgo/qrcode": "^1.0.0-rc.1",
     "@deckdeckgo/remote": "^1.0.0-rc.1",
@@ -26,7 +26,7 @@
     "@deckdeckgo/slide-split": "^1.0.0-rc.1",
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",
     "@deckdeckgo/slide-youtube": "^1.0.0-rc.1",
-    "@deckdeckgo/utils": "^1.0.0-rc.1",
+    "@deckdeckgo/utils": "^1.0.0-rc.1-1",
     "@ionic/core": "^4.8.1",
     "firebase": "^6.3.5",
     "idb-keyval": "^3.2.0",

studio/package.json

@@ -1,3 +1,10 @@
+<a name="1.0.0-rc.1-1"></a>
+# 1.0.0-rc.1-1 (2019-09-01)
+
+### Fix
+
+* debounce the display of the toolbar (useful in case of dragged selection)
+
 <a name="1.0.0-rc.1"></a>
 # 1.0.0-rc.1 (2019-08-30)
 

webcomponents/inline-editor/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/inline-editor",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.1-1",
   "description": "A WYSIWYG HTML Inline Editor Web Component",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -22,7 +22,7 @@
     "test.watch": "stencil test --spec --e2e --watchAll"
   },
   "dependencies": {
-    "@deckdeckgo/utils": "^1.0.0-rc.1"
+    "@deckdeckgo/utils": "^1.0.0-rc.1-1"
   },
   "devDependencies": {
     "@stencil/core": "^1.3.1",

webcomponents/inline-editor/package-lock.json

@@ -1,6 +1,9 @@
 div.deckgo-tools {
   position: absolute;
   visibility: hidden;
+  opacity: 0;
+
+  animation: 0s ease 0s 1 normal none running none;
 
   pointer-events: none;
 
@@ -135,9 +138,8 @@ div.deckgo-tools {
   }
 
   &.deckgo-tools-activated {
-    transition: top 75ms ease-out, left 75ms ease-out;
-    animation: pop-upwards 180ms forwards linear;
     visibility: visible;
+    opacity: 1;
   }
 
   &.deckgo-tools-mobile {

webcomponents/inline-editor/package.json

@@ -1,6 +1,6 @@
 import {Component, Element, EventEmitter, Listen, Prop, State, Watch, Event, Method, h} from '@stencil/core';
 
-import {isMobile, isIOS, unifyEvent} from '@deckdeckgo/utils';
+import {isMobile, isIOS, unifyEvent, debounce} from '@deckdeckgo/utils';
 
 import {DeckdeckgoInlineEditorUtils} from '../../types/inline-editor/deckdeckgo-inline-editor-utils';
 
@@ -79,6 +79,11 @@ export class DeckdeckgoInlineEditor {
   @State()
   private toolsActivated: boolean = false;
 
+  @State()
+  private displayToolsActivated: boolean = false;
+
+  private debounceDisplayToolsActivated: Function;
+
   private selection: Selection = null;
 
   private anchorLink: AnchorLink = null;
@@ -121,6 +126,16 @@ export class DeckdeckgoInlineEditor {
   @Prop()
   list: boolean = true;
 
+  constructor() {
+    this.resetDisplayToolsActivated();
+  }
+
+  private resetDisplayToolsActivated() {
+    this.debounceDisplayToolsActivated = debounce(() => {
+      this.displayToolsActivated = true;
+    });
+  }
+
   async componentWillLoad() {
     await this.attachListener();
   }
@@ -153,8 +168,8 @@ export class DeckdeckgoInlineEditor {
     return new Promise<void>((resolve) => {
       const listenerElement: HTMLElement | Document = this.attachTo ? this.attachTo : document;
       if (listenerElement) {
-        listenerElement.addEventListener('mousedown', this.mousedown, {passive: true});
-        listenerElement.addEventListener('touchstart', this.touchstart, {passive: true});
+        listenerElement.addEventListener('mousedown', this.startSelection, {passive: true});
+        listenerElement.addEventListener('touchstart', this.startSelection, {passive: true});
       }
 
       resolve();
@@ -164,34 +179,28 @@ export class DeckdeckgoInlineEditor {
   private detachListener(listenerElement: HTMLElement | Document): Promise<void> {
     return new Promise<void>((resolve) => {
       if (listenerElement) {
-        listenerElement.removeEventListener('mousedown', this.mousedown);
-        listenerElement.removeEventListener('touchstart', this.touchstart);
+        listenerElement.removeEventListener('mousedown', this.startSelection);
+        listenerElement.removeEventListener('touchstart', this.startSelection);
       }
 
       resolve();
     });
   }
 
-  private mousedown = async ($event: MouseEvent) => {
-    if (this.toolsActivated) {
-      await this.resetImageToolbarActions($event);
-
-      return;
+  private startSelection = async ($event: MouseEvent | TouchEvent) => {
+    if (this.toolbarActions !== ToolbarActions.IMAGE) {
+      this.anchorEvent = $event;
     }
 
-    this.anchorEvent = $event;
-
-    await this.displayImageActions($event);
-  };
-
-  private touchstart = async ($event: TouchEvent) => {
     if (this.toolsActivated) {
       await this.resetImageToolbarActions($event);
 
       return;
     }
 
-    this.anchorEvent = $event;
+    if (this.toolbarActions === ToolbarActions.IMAGE) {
+      this.anchorEvent = $event;
+    }
 
     await this.displayImageActions($event);
   };
@@ -411,7 +420,7 @@ export class DeckdeckgoInlineEditor {
         return;
       }
 
-      if(this.iOSTimerScroll > 0) {
+      if (this.iOSTimerScroll > 0) {
         clearTimeout(this.iOSTimerScroll);
       }
 
@@ -610,6 +619,8 @@ export class DeckdeckgoInlineEditor {
 
       await this.setToolsActivated(false);
 
+      this.resetDisplayToolsActivated();
+
       this.selection = null;
 
       this.toolbarActions = ToolbarActions.SELECTION;
@@ -858,6 +869,12 @@ export class DeckdeckgoInlineEditor {
     return new Promise<void>(async (resolve) => {
       this.toolsActivated = activated;
 
+      if (activated) {
+        this.debounceDisplayToolsActivated();
+      } else {
+        this.displayToolsActivated = false;
+      }
+
       if (this.isSticky()) {
         this.stickyToolbarActivated.emit(this.toolsActivated);
       }
@@ -1020,7 +1037,7 @@ export class DeckdeckgoInlineEditor {
   }
 
   render() {
-    let classNames: string = this.toolsActivated ? (this.mobile ? 'deckgo-tools deckgo-tools-activated deckgo-tools-mobile' : 'deckgo-tools deckgo-tools-activated') : (this.mobile ? 'deckgo-tools deckgo-tools-mobile' : 'deckgo-tools');
+    let classNames: string = this.displayToolsActivated ? (this.mobile ? 'deckgo-tools deckgo-tools-activated deckgo-tools-mobile' : 'deckgo-tools deckgo-tools-activated') : (this.mobile ? 'deckgo-tools deckgo-tools-mobile' : 'deckgo-tools');
 
     if (this.isSticky()) {
       classNames += ' deckgo-tools-sticky';

webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.scss

@@ -1,3 +1,8 @@
+<a name="1.0.0-rc.1-1"></a>
+# 1.0.0-rc.1-1 (2019-09-01)
+
+* improvate `debounce` typing
+
 <a name="1.0.0-rc.1"></a>
 # 1.0.0-rc.1 (2019-08-30)