feat: select deck with additional click on editor (#1286)

Author: peterpeterparker

studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.scss

@@ -1,5 +1,13 @@
 app-actions-element {
+  display: block;
+
+  aside {
+    pointer-events: none;
+  }
+
   button {
+    pointer-events: all;
+
     &.hidden {
       display: none;
     }

studio/src/app/components/editor/actions/footer/app-actions-editor/app-actions-editor.tsx

@@ -161,6 +161,16 @@ export class AppActionsEditor {
     }
   }
 
+  private async selectDeckOnClick($event: MouseEvent | TouchEvent) {
+    const src: HTMLElement = $event.composedPath()[0] as HTMLElement;
+
+    if (!this.actionsElementRef.isEqualNode(src)) {
+      return;
+    }
+
+    await this.selectDeck();
+  }
+
   render() {
     return (
       <Host
@@ -215,6 +225,7 @@ export class AppActionsEditor {
   private renderEditActions() {
     return (
       <app-actions-element
+        onClick={($event: MouseEvent | TouchEvent) => this.selectDeckOnClick($event)}
         ref={(el) => (this.actionsElementRef = el as HTMLAppActionsElementElement)}
         class={editorStore.state.step === BreadcrumbsStep.DECK ? 'hidden' : undefined}
         slideCopy={this.slideCopy}

studio/src/app/pages/editor/app-editor/app-editor.tsx

@@ -118,6 +118,7 @@ export class AppEditor {
   private actionsEditorRef!: HTMLAppActionsEditorElement;
   private contentRef!: HTMLElement;
   private mainRef!: HTMLElement;
+  private breadCrumbsRef!: HTMLAppBreadcrumbsElement;
 
   private mainResizeObserver: ResizeObserver;
   private slideResizeObserver: ResizeObserver;
@@ -516,6 +517,16 @@ export class AppEditor {
     await this.actionsEditorRef.touch(element);
   }
 
+  private async selectDeck($event: MouseEvent | TouchEvent) {
+    const src: HTMLElement = $event.composedPath()[0] as HTMLElement;
+
+    if (!this.contentRef.isEqualNode(src) && !this.breadCrumbsRef.isEqualNode(src)) {
+      return;
+    }
+
+    await this.actionsEditorRef.selectDeck();
+  }
+
   @Listen('toggleFullScreen', {target: 'window'})
   async onToggleFullScreen() {
     if (!this.deckRef) {
@@ -737,7 +748,7 @@ export class AppEditor {
 
     return [
       <app-navigation publish={true} class={this.hideNavigation ? 'hidden' : undefined}></app-navigation>,
-      <ion-content class="ion-no-padding">
+      <ion-content class="ion-no-padding" onClick={($event: MouseEvent | TouchEvent) => this.selectDeck($event)}>
         <div class="grid">
           <div class="deck" ref={(el) => (this.contentRef = el as HTMLElement)}>
             <main
@@ -769,7 +780,10 @@ export class AppEditor {
             </main>
           </div>
 
-          <app-breadcrumbs slideNumber={this.activeIndex} onStepTo={($event: CustomEvent<HTMLElement>) => this.selectStep($event)}></app-breadcrumbs>
+          <app-breadcrumbs
+            ref={(el) => (this.breadCrumbsRef = el as HTMLAppBreadcrumbsElement)}
+            slideNumber={this.activeIndex}
+            onStepTo={($event: CustomEvent<HTMLElement>) => this.selectStep($event)}></app-breadcrumbs>
 
           <app-actions-editor
             ref={(el) => (this.actionsEditorRef = el as HTMLAppActionsEditorElement)}