fix Sketch navigator scroll (#9)

kpicaza · Oct 22, 2023 · 6d23b99 · 6d23b99
1 parent daf38d0
commit 6d23b99
Show file tree

Hide file tree

Showing 10 changed files with 322 additions and 109 deletions.
diff --git a/README.md b/README.md
@@ -138,7 +138,7 @@ yarn dev
 Open another console
 
 ```bash
- php artisan native:serve
+php artisan native:serve
 ```
 
 Run tests

diff --git a/infection.log b/infection.log
@@ -106,7 +106,7 @@ Escaped mutants:
          }
 
 
-8) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:45    [M] IncrementInteger
+8) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:45    [M] DecrementInteger
 
 --- Original
 +++ New
@@ -115,13 +115,13 @@ Escaped mutants:
           * }|null $sketchBookSerialized
           */
 -        $sketchBookSerialized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
-+        $sketchBookSerialized = json_decode($content, true, 513, JSON_THROW_ON_ERROR);
++        $sketchBookSerialized = json_decode($content, true, 511, JSON_THROW_ON_ERROR);
          return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookSerialized['sketches'] ?? []), $sketchBookSerialized['background'] ?? '#ffffff');
      }
  }
 
 
-9) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:45    [M] DecrementInteger
+9) /home/kpicaza/server/open.sketch/dev/src/SketchBook/Infrastructure/Persistence/FileSystemSketchBookRepository.php:45    [M] IncrementInteger
 
 --- Original
 +++ New
@@ -130,7 +130,7 @@ Escaped mutants:
           * }|null $sketchBookSerialized
           */
 -        $sketchBookSerialized = json_decode($content, true, 512, JSON_THROW_ON_ERROR);
-+        $sketchBookSerialized = json_decode($content, true, 511, JSON_THROW_ON_ERROR);
++        $sketchBookSerialized = json_decode($content, true, 513, JSON_THROW_ON_ERROR);
          return new SketchBook($sketchBookReference->id, $sketchBookReference->storage_path, Sketch::fromNormalizedSketches($sketchBookSerialized['sketches'] ?? []), $sketchBookSerialized['background'] ?? '#ffffff');
      }
  }
@@ -224,7 +224,7 @@ Escaped mutants:
          Window::open($command->openingWindowName)->title(sprintf('%s: %s', __('sketch_book'), $command->fileName()))->route($command->routeName, ['id' => $command->sketchBookId]);
 
 
-16) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] Identical
+16) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] Ternary
 
 --- Original
 +++ New
@@ -233,7 +233,7 @@ Escaped mutants:
          Window::open('welcome');
          /** @phpstan-ignore-next-line */
 -        Window::close(Window::current()->id === 'welcome' ? 'sketch-book' : Window::current()->id);
-+        Window::close(Window::current()->id !== 'welcome' ? 'sketch-book' : Window::current()->id);
++        Window::close(Window::current()->id === 'welcome' ? Window::current()->id : 'sketch-book');
          Window::open($command->openingWindowName)->title(sprintf('%s: %s', __('sketch_book'), $command->fileName()))->route($command->routeName, ['id' => $command->sketchBookId]);
          $window->maximize($command->openingWindowName);
          Window::close('welcome');
@@ -259,7 +259,7 @@ Escaped mutants:
  }
 
 
-18) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] Ternary
+18) /home/kpicaza/server/open.sketch/dev/src/Window/Infrastructure/Electron/LaravelWindowProvider.php:19    [M] Identical
 
 --- Original
 +++ New
@@ -268,7 +268,7 @@ Escaped mutants:
          Window::open('welcome');
          /** @phpstan-ignore-next-line */
 -        Window::close(Window::current()->id === 'welcome' ? 'sketch-book' : Window::current()->id);
-+        Window::close(Window::current()->id === 'welcome' ? Window::current()->id : 'sketch-book');
++        Window::close(Window::current()->id !== 'welcome' ? 'sketch-book' : Window::current()->id);
          Window::open($command->openingWindowName)->title(sprintf('%s: %s', __('sketch_book'), $command->fileName()))->route($command->routeName, ['id' => $command->sketchBookId]);
          $window->maximize($command->openingWindowName);
          Window::close('welcome');

diff --git a/resources/js/src/components/drawing-tools/BrushOptions.ts b/resources/js/src/components/drawing-tools/BrushOptions.ts
@@ -205,7 +205,7 @@ export class BrushOptions extends LitElement {
     return html`
       <div class="brushes">
         ${this.renderColorPicker()}
-        <input type="range" min="2" max="100" @input=${this.changeLineWidth} .value=${this.lineWidth} />
+        <input class="brush-width-slider" type="range" min="2" max="100" @input=${this.changeLineWidth} .value=${this.lineWidth} />
         <brush-pen
           class="brush pen selected"
           data-value="pen"

diff --git a/resources/js/src/components/sketch-book/PaintingBoard.ts b/resources/js/src/components/sketch-book/PaintingBoard.ts
@@ -8,7 +8,7 @@ import {SketchBook} from "../../domain/model/SketchBook.js";
 import {Sketch} from "../../domain/model/Sketch.js";
 
 @customElement('painting-board')
-export class SketchPreview extends LitElement {
+export class PaintingBoard extends LitElement {
   static styles = css`
 
     .horizontal-scroll-wrapper {

diff --git a/resources/js/src/components/sketch-book/SketchNavigator.ts b/resources/js/src/components/sketch-book/SketchNavigator.ts
@@ -8,7 +8,7 @@ import {Sketch} from "../../domain/model/Sketch.js";
 import {SketchBook} from "../../domain/model/SketchBook.js";
 
 @customElement('sketch-nav')
-export class SketchPreview extends LitElement {
+export class SketchNavigator extends LitElement {
   static styles = css`
     .horizontal-scroll-wrapper {
       display: flex;
@@ -18,11 +18,14 @@ export class SketchPreview extends LitElement {
       flex-wrap: nowrap;
       -webkit-overflow-scrolling: touch;
     }
-
     .app-footer {
       position: fixed;
+      bottom: 0;
+      width: 100%;
+      height: 125px;
+      background: #1a202c;
+      z-index: 20;
     }
-
     .arrow-button {
       cursor: pointer;
       color: #FFFFFF;
@@ -36,75 +39,116 @@ export class SketchPreview extends LitElement {
       font-weight: 700;
       opacity: 0.5;
     }
-
     .arrow-button:hover {
       background-color: #4a5568;
     }
-
     .left-previews {
       position: fixed;
       left: 10px;
       bottom: 50px;
     }
-
     .right-previews {
       position: fixed;
       right: 10px;
       bottom: 50px;
     }
-
   `;
 
-  @query(".app-footer") sketchFooter: HTMLDivElement;
+  @query(".horizontal-scroll-wrapper") scrollWrapper: HTMLDivElement;
 
   @consume({context: sketchBookContext, subscribe: true})
   @property({attribute: false})
   declare sketchBook: SketchBook;
 
   @property() declare canvasColor: string;
 
-  @property({attribute: false}) declare previewScrollPosition: number;
+  @property() declare showLeftArrow: boolean;
+
+  @property() declare showRightArrow: boolean;
+
+  @property() declare previewScrollPosition: number;
 
   constructor() {
     super();
     this.canvasColor = '';
-    this. previewScrollPosition = 0;
+    this.previewScrollPosition = 0;
+    this.showLeftArrow = false;
+    this.showRightArrow = false;
   }
 
-  protected async movePreviewsToLeft(event: MouseEvent) {
-    const button = event.target as HTMLButtonElement
-    const previewMenu = button.parentElement.querySelector('.horizontal-scroll-wrapper');
-    this.previewScrollPosition = previewMenu.scrollLeft - 200;
-    await previewMenu.scroll({
+  protected async firstUpdated() {
+    this.resetArrows();
+    this.scrollWrapper.addEventListener('scrollend', () => {
+      this.resetArrows();
+    });
+  }
+
+  protected async updated(_changedProperties) {
+    super.updated(_changedProperties);
+    this.resetArrows();
+  }
+
+  private async resetArrows() {
+    setTimeout(() => {
+      this.showLeftArrow = this.previewScrollPosition > 0;
+      this.showRightArrow = window.innerWidth < (this.scrollWrapper.scrollWidth)
+        && window.innerWidth !== this.scrollWrapper.scrollWidth - this.scrollWrapper.scrollLeft;
+    });
+  }
+
+  private async movePreviewsToLeft() {
+    this.previewScrollPosition = this.scrollWrapper.scrollLeft - 400;
+    await this.scrollWrapper.scroll({
       top: 0,
       left: this.previewScrollPosition,
       behavior: "smooth",
     })
   }
 
-  protected async movePreviewsToRight(event: MouseEvent) {
-    const button = event.target as HTMLButtonElement
-    const previewMenu = button.parentElement.querySelector('.horizontal-scroll-wrapper');
-    this.previewScrollPosition = previewMenu.scrollLeft + 200;
-    await previewMenu.scroll({
+  private async movePreviewsToRight() {
+    this.previewScrollPosition = this.scrollWrapper.scrollLeft + 400;
+    await this.scrollWrapper.scroll({
       top: 0,
       left: this.previewScrollPosition,
       behavior: "smooth",
     })
   }
 
-  protected renderPreviewArrows() {
+  private async goToSelectedSketch(event: CustomEvent) {
+    this.dispatchEvent(new CustomEvent(
+      'sketchselected',
+      {
+        detail: event.detail
+      }
+    ))
+  }
+
+  private async deleteSketch(event: CustomEvent) {
+    this.dispatchEvent(new CustomEvent(
+      'sketchdeleted',
+      {
+        detail: event.detail
+      }
+    ))
+  }
+
+  private async downloadSketch(event: CustomEvent) {
+    this.dispatchEvent(new CustomEvent(
+      'sketchdownloaded',
+      {
+        detail: event.detail
+      }
+    ))
+  }
+
+  private renderPreviewArrows() {
     if (this.sketchBook.sketches.length === 1) {
       return html``;
     }
 
-    const previewMenu = this.sketchFooter?.querySelector('.horizontal-scroll-wrapper');
-    if (!previewMenu || previewMenu.scrollWidth <= previewMenu.clientWidth) {
-      return html``;
-    }
 
-    let result;
-    if (this.previewScrollPosition > 0) {
+    let result ;
+    if (this.showLeftArrow) {
       result = html`
         <button
           @click=${this.movePreviewsToLeft}
@@ -115,7 +159,7 @@ export class SketchPreview extends LitElement {
       `
     }
 
-    if ((this.previewScrollPosition + previewMenu.clientWidth) < previewMenu.scrollWidth) {
+    if (this.showRightArrow) {
       result = html`
         ${result}
         <button
@@ -130,49 +174,20 @@ export class SketchPreview extends LitElement {
     return result;
   }
 
-  protected async goToSelectedSketch(event: CustomEvent) {
-    this.dispatchEvent(new CustomEvent(
-      'sketchselected',
-      {
-        detail: event.detail
-      }
-    ))
-  }
-
-  protected async deleteSketch(event: CustomEvent) {
-    this.dispatchEvent(new CustomEvent(
-      'sketchdeleted',
-      {
-        detail: event.detail
-      }
-    ))
-  }
-
-  protected async downloadSketch(event: CustomEvent) {
-    this.dispatchEvent(new CustomEvent(
-      'sketchdownloaded',
-      {
-        detail: event.detail
-      }
-    ))
-  }
-
   protected render() {
     return html`
       <div class="app-footer">
         <div class="horizontal-scroll-wrapper">
           ${this.sketchBook.sketches.map((sketch: Sketch) => html`
-              <div class="sketches">
-                <sketch-preview
-                  .sketchId=${sketch.id}
-                  .image=${sketch.image}
-                  .background=${this.sketchBook.background}
-                  @sketchselected=${this.goToSelectedSketch}
-                  @sketchdeleted=${this.deleteSketch}
-                  @sketchdownloaded=${this.downloadSketch}
-                ></sketch-preview>
-              </div>
-            `)}
+            <sketch-preview
+              .sketchId=${sketch.id}
+              .image=${sketch.image}
+              .background=${this.sketchBook.background}
+              @sketchselected=${this.goToSelectedSketch}
+              @sketchdeleted=${this.deleteSketch}
+              @sketchdownloaded=${this.downloadSketch}
+            ></sketch-preview>
+          `)}
         </div>
         ${this.renderPreviewArrows()}
       </div>