fontastic 0.1.3

package/src/app/pages/main/main.component.scss

@@ -0,0 +1,191 @@
+$toolbarHeight: 38px;
+
+.panel.preview.inspect.grid.toolbar {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr $toolbarHeight 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 0px;
+  margin: 0px;
+}
+
+.panel.preview.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 0 0 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.preview.inspect {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr 0 0;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.preview.inspect.toolbar {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr $toolbarHeight 0;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.preview.inspect.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1fr 0 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.inspect.grid.toolbar {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0 1fr $toolbarHeight 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.inspect.toolbar {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0 1fr $toolbarHeight 0;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.toolbar.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0 0 $toolbarHeight 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.inspect.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0 1fr 0 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.preview.toolbar {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 0 $toolbarHeight 0;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.preview.toolbar.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 0 $toolbarHeight 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.preview {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 0 0 0;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.inspect {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0 1fr 0 0;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  .border-top {
+    border-top: none !important;
+  }
+}
+
+.panel.toolbar {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0 0 $toolbarHeight 0;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+.panel.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0 0 0 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+}
+
+app-preview {
+  visibility: hidden;
+}
+
+app-inspect {
+  visibility: hidden;
+}
+
+app-grid {
+  visibility: hidden;
+}
+
+app-toolbar {
+  visibility: hidden;
+}
+
+.panel.grid {
+  app-grid {
+    visibility: visible;
+  }
+}
+
+.panel.toolbar {
+  app-toolbar {
+    visibility: visible;
+  }
+}
+
+.panel.preview {
+  app-preview {
+    visibility: visible;
+  }
+}
+
+.panel.inspect {
+  app-inspect {
+    visibility: visible;
+  }
+}
+
+app-preview,
+app-inspect,
+app-toolbar,
+app-grid {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+// app-preview {
+//   grid-area: 1 / 1 / 2 / 2;
+// }
+// app-toolbar {
+//   grid-area: 2 / 1 / 3 / 2;
+// }
+// app-grid {
+//   grid-area: 3 / 1 / 4 / 2;
+// }

package/src/app/pages/main/main.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { PresentationService } from '@app/core/services';
+
+@Component({
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss']
+})
+export class MainComponent implements OnInit {
+
+  gridEnabled = true;
+  toolbarEnabled = true;
+  previewEnabled = true;
+  inspectEnabled = true;
+
+  constructor(
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit() {
+    this.presentationService._gridEnabled.subscribe((result) => {
+      this.gridEnabled = result;
+    });
+    this.presentationService._toolbarEnabled.subscribe((result) => {
+      this.toolbarEnabled = result;
+    });
+    this.presentationService._previewEnabled.subscribe((result) => {
+      this.previewEnabled = result;
+    });
+    this.presentationService._inspectEnabled.subscribe((result) => {
+      this.inspectEnabled = result;
+    });
+  }
+
+}

package/src/app/pages/main/main.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { MainRoutingModule } from './main-routing.module';
+import { SharedModule } from '../../shared/shared.module';
+import { MainComponent } from './main.component';
+import { GridComponent } from './grid/grid.component';
+import { PreviewComponent } from './preview/preview.component';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { InspectComponent } from './inspect/inspect.component';
+
+@NgModule({
+  declarations: [
+    MainComponent, 
+    GridComponent, 
+    PreviewComponent, 
+    ToolbarComponent, 
+    InspectComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    FormsModule,
+    MainRoutingModule
+  ]
+})
+export class MainModule { }

package/src/app/pages/main/preview/preview.component.html

@@ -0,0 +1,46 @@
+<div class="component">
+  <div class="component__panel">
+    <app-breadcrumbs></app-breadcrumbs>
+    <app-alert></app-alert>
+    <div class="hover-scrollbox-y overflow-x-hidden" #scrollElement [class.loading]="isLoading">
+      <ng-container *ngFor="let item of resultSet; let i = index;">
+        <div class="previews flex flex-col w-full" [style.background-color]="backgroundColor" [attr.id]="item.id">
+          <div [className]="i === 0 ? 'previews__info flex justify-between items-center w-full py-1 -mt-[1px] border-bottom border-top' : 'previews__info flex justify-between items-center w-full py-1 -mt-[1px] border-bottom border-top'">
+            <div class="flex justify-start items-center whitespace-nowrap w-full px-3">
+              <h2 class="text-base font-medium cursor-pointer mr-1" title="{{item.file_path}}" (click)="openFileLocation($event, item)">{{item.font_family }}</h2>
+              <h2 class="text-base font-medium cursor-pointer mr-1" title="{{item.file_size}}" (click)="openFileViewer($event, item)">({{item.file_size_pretty }})</h2>
+              <h2 class="text-base font-medium uppercase mr-1" title="{{item.file_type}}">{{ item.file_type }}</h2>
+              <ng-container *ngIf="displayNews && item.news">
+                <h2 class="text-base font-medium cursor-pointer mr-1" [attr.title]="item.news.description" [innerHtml]="item.news.source.name" (click)="openNewsArticle($event, item)"></h2>
+              </ng-container>
+              <ng-container *ngIf="displayNews && item.news && item.news.publishedAt">
+                <h2 class="text-base font-medium mr-1" [attr.title]="item.news.publishedAt | date: 'short':'UTC'">&mdash; &nbsp;{{item.news.publishedAt | date: 'short':'UTC'}}</h2>
+              </ng-container>
+              <ng-container *ngIf="displayNews && item.news && item.news.author">
+                <h2 class="text-base font-medium mr-1" [attr.title]="item.news.author">&mdash; &nbsp;<i [innerHtml]="item.news.author"></i></h2>
+              </ng-container>
+            </div>
+            <div class="flex justify-end items-center w-full px-1.5">
+              <i class="material-icons mr-1" title="File location" (click)="openFileLocation($event, item)">folder_open</i>
+              <ng-container *ngIf="item.installable;">
+                <i class="material-icons mr-1" title="File open" (click)="openFileViewer($event, item)">view_list</i>
+              </ng-container>
+              <ng-container *ngIf="item.favorite; else elseBordered">
+                <i class="material-icons material-icons-sized mr-1" [class.favorite]="item.favorite" title="Favorite" (click)="onFavoriteClick($event, item)">favorite</i>
+              </ng-container>
+              <ng-template #elseBordered>
+                <i class="material-icons material-icons-sized mr-1" [class.favorite]="item.favorite" title="Favorite" (click)="onFavoriteClick($event, item)">favorite_border</i>
+              </ng-template>
+              <ng-container *ngIf="item.sample_text">
+                <i class="material-icons" [attr.title]="item.sample_text" (click)="onSampleClick($event, item)">g_translate</i>
+              </ng-container>
+            </div>
+          </div>
+          <div class="previews__typography" (click)="onRowClick(item.id)">
+            <canvas attr.id="canvas_{{item.id}}" height="150px" width="1920px"></canvas>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</div>

package/src/app/pages/main/preview/preview.component.ts

@@ -0,0 +1,239 @@
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
+import { delay } from 'rxjs/operators';
+import { UtilsService, MessageService, DatabaseService, PresentationService, NewsService, FontService } from '@app/core/services';
+import { Store } from '@main/database/entity/Store.schema';
+import { NewsArticlesType, NewsType } from '@main/types';
+
+type StoreWithNews<T> = Partial<T> & { news: NewsArticlesType };
+
+@Component({
+  selector: 'app-preview',
+  templateUrl: './preview.component.html',
+  styleUrls: ['./preview.component.scss']
+})
+export class PreviewComponent implements OnInit, OnDestroy {
+
+  @ViewChild('scrollElement', { static: true }) scrollElement: ElementRef;
+
+  resultSet = [];
+
+  isLoading = true;
+
+  fontColor = '#000000';
+  fontSize = 3.5;
+  wordSpacing = 0;
+  letterSpacing = 0;
+  displayText: string;
+  latestNews: any[] = [];
+  displayNews = false;
+  backgroundColor = '#000000';
+
+  constructor(
+    private utils: UtilsService,
+    private messageService: MessageService,
+    private databaseService: DatabaseService,
+    private presentationService: PresentationService,
+    private newsService: NewsService,
+    private fontService: FontService
+  ) { }
+
+  ngOnInit(): void {
+    const scrollElement: Element = this.scrollElement.nativeElement;
+
+    this.databaseService.watchStoreResult$.subscribe((result: Store) => {
+      if (result) {
+        this.utils.createFontStyles([result], (styleString: string) => {
+          this.utils.appendStyles(styleString);
+        });
+      }
+    });
+
+    this.databaseService.watchStoreResult$.pipe(delay(1e3 / 5)).subscribe((result: Store) => {
+      if (result?.id) {
+        const el = document.getElementById(`${result.id}`);
+        if (el) {
+          this.utils.scrollTo(scrollElement, el.offsetTop);
+        }
+      }
+    });
+
+    this.databaseService.watchStoreResultSet$.subscribe((results: Store[]) => {
+      if (this.latestNews.length) {
+        const items: StoreWithNews<Store>[] = [];
+        for (let i = 0, total = results.length; i < total; i++) {
+          const item = results[i];
+          const news: NewsArticlesType = this.latestNews[Math.floor(Math.random() * this.latestNews.length)];
+          items.push(Object.assign(item, { news }));
+        }
+        this.resultSet = items;
+      } else {
+        this.resultSet = results;
+      }
+
+      this.renderFontList();
+      this.isLoading = false;
+      scrollElement.scrollTop = 0;
+    });
+
+    this.presentationService.watchFontColor$.subscribe((value: string) => {
+      this.fontColor = value;
+      this.renderFontList();
+    });
+
+    this.presentationService.watchFontSize$.subscribe((value: number) => {
+      this.fontSize = value;
+      this.renderFontList();
+    });
+
+    this.presentationService.watchBackgroundColor$.subscribe((value: string) => this.backgroundColor = value);
+
+    this.presentationService.watchDisplayText$.subscribe((value: string) => {
+      this.displayText = value;
+      this.renderFontList();
+    });
+
+    this.newsService.watchLatestNews$.subscribe((value: NewsType) => {
+      if (value?.articles?.length) {
+        this.latestNews = value.articles;
+        this.presentationService.quickText.push({
+          title: 'Latest News',
+          text: 'News headlines from sources across the web.'
+        });
+      }
+    });
+
+    this.presentationService._displayNews.subscribe((value: boolean) => this.displayNews = value);
+    this.presentationService.watchWordSpacing$.subscribe((value: number) => this.wordSpacing = value);
+    this.presentationService.watchLetterSpacing$.subscribe((value: number) => this.letterSpacing = value);
+  }
+
+  ngOnDestroy() {
+    this.resultSet = [];
+  }
+
+  renderFontList() {
+    this.resultSet.forEach((item: StoreWithNews<Store>) => {
+      const resource = this.fontService.withTransferProtocol(item.file_path, 'file');
+      this.fontService.load(resource).then((font: opentype.Font) => {
+        const canvas = document.getElementById(`canvas_${item.id}`) as HTMLCanvasElement;
+
+        if (!canvas) {
+          return;
+        }
+
+        const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+        this.fontService.clearCanvas(context);
+
+        const fontSize = this.getFontSize();
+
+        const displayText = this.getDisplayText(item);
+
+        // @TODO Center text based on font size using baseline.
+        const path = font.getPath(displayText, 20, 90, fontSize);
+        // const metrics = context.measureText(displayTest);
+        // const top = font.ascender / font.unitsPerEm * 150;
+
+        path.fill = this.fontColor;
+
+        context.textBaseline = 'middle';
+        context.fillStyle = this.backgroundColor;
+
+        path.draw(context);
+      }).catch((err) => {
+        console.warn('load-font-error', err);
+      });
+    });
+  }
+
+  onRowClick(id: number): void {
+    this.databaseService.setStoreId(id);
+  }
+
+  getFontSize(): number {
+    return this.fontSize;
+  }
+
+  getWordSpacing(): string {
+    return this.wordSpacing + 'em';
+  }
+
+  getLetterSpacing(): string {
+    return this.letterSpacing + 'em';
+  }
+
+  getDisplayText(item: StoreWithNews<Store>): string {
+    if (this.presentationService.getDisplayNews()) {
+      return (item.news) ? item.news.title : this.displayText;
+    } else {
+      return this.displayText;
+    }
+  }
+
+  onSampleClick(_event: Event, item: Store): void {
+    if (item.sample_text) {
+      const resource = this.fontService.withTransferProtocol(item.file_path, 'file');
+      this.fontService.load(resource).then((font: opentype.Font) => {
+        const canvas = document.getElementById(`canvas_${item.id}`) as HTMLCanvasElement;
+
+        if (!canvas) {
+          return;
+        }
+
+        const context = canvas.getContext('2d') as CanvasRenderingContext2D;
+
+        this.fontService.clearCanvas(context);
+
+        const fontSize = this.getFontSize();
+
+        const path = font.getPath(item.sample_text, 20, 90, fontSize);
+
+        path.fill = this.fontColor;
+
+        context.textBaseline = 'middle';
+        context.fillStyle = this.backgroundColor;
+
+        path.draw(context);
+      }).catch((err) => {
+        console.warn('load-font-error', err);
+      });
+    }
+  }
+
+  onFavoriteClick(event: Event, item: Store): void {
+    const target = event.target as HTMLInputElement;
+    const status = target.classList.contains('favorite') ? true : false;
+
+    if (status) {
+      target.classList.remove('favorite');
+      target.innerHTML = 'favorite_bordered';
+    } else {
+      target.classList.add('favorite');
+      target.innerHTML = 'favorite';
+    }
+
+    this.messageService.storeUpdate(item.id, { favorite: !status }).then((_result: Store) => {
+      // update nav stats
+      this.databaseService.fetchSystemStats();
+      this.databaseService.fetchCollections();
+    });
+  }
+
+  openFileViewer(_event: Event, item: Store) {
+    if (item?.file_path) {
+      this.messageService.openPath(item.file_path);
+    }
+  }
+
+  openFileLocation(_event: Event, item: Store) {
+    if (item?.file_path) {
+      this.messageService.showItemInFolder(item.file_path);
+    }
+  }
+
+  openNewsArticle(_event: Event, item: StoreWithNews<Store>) {
+    if (item?.news.url) {
+      this.messageService.openExternal(item.news.url);
+    }
+  }
+}

package/src/app/pages/main/toolbar/toolbar.component.html

@@ -0,0 +1,78 @@
+<div class="component">
+  <div class="component__panel">
+    <div class="controls flex justify-between items-center border-top">
+      <div class="controls__item flex justify-start items-center">
+
+        <app-paginator></app-paginator>
+
+        <div class="input-preview preview-text">
+          <input type="text" [value]="displayText" (keyup.enter)="handleDisplayInput($event)" (input)="handleDisplayInput($event)" />
+          <button (click)="handleDisplayButton($event)"><span class="material-icons">menu</span></button>
+        </div>
+
+        <div class="input-preview quick-text !mr-5">
+          <button (click)="handleQuickText($event)" title="Switch Text"><span class="material-icons">view_list</span></button>
+        </div>
+
+        <div class="input-preview preview-color">
+          <label for="font_color">Font</label>
+          <input type="color" class="input" id="font_color" list="font_color" [value]="fontColor" (change)="onFontColor($event)" />
+          <datalist id="font_color">
+            <option>#00a0be</option>
+            <option>#3f144f</option>
+            <option>#ff0000</option>
+            <option>#cc0000</option>
+            <option>#990000</option>
+            <option>#660000</option>
+            <option>#330000</option>
+          </datalist>
+        </div>
+
+        <div class="input-preview preview-color">
+          <label for="background_color">Background</label>
+          <input type="color" class="input" id="background_color" list="background_color" [value]="backgroundColor" (change)="onBackgroundColor($event)" />
+          <datalist id="background_color">
+            <option>#00a0be</option>
+            <option>#3f144f</option>
+            <option>#ff0000</option>
+            <option>#cc0000</option>
+            <option>#990000</option>
+            <option>#660000</option>
+            <option>#330000</option>
+          </datalist>
+        </div>
+
+        <div class="input-preview preview-size" [attr.title]="fontSize + 'px'">
+          <ng-container *ngIf="buttonType === 0; else elseif1">
+            <span [attr.title]="fontSize + 'px'">{{fontSize}}px</span>
+          </ng-container>
+        </div>
+
+        <div class="input-preview preview-range" [attr.title]="fontSize + 'px'">
+          <ng-container *ngIf="buttonType === 0; else elseif1">
+            <input type="range" class="input" id="font_size" min="24" max="72" step="1" [value]="fontSize" (change)="onFontSize($event)" />
+          </ng-container>
+          <ng-template #elseif1>
+            <ng-container *ngIf="buttonType === 1; else elseif2">
+              <input type="range" class="input" id="word_spacing" min="-1" max="1" step="0.1" value="0" (change)="onWordSpacing($event)" />
+            </ng-container>
+          </ng-template>
+          <ng-template #elseif2>
+            <ng-container *ngIf="buttonType === 2">
+              <input type="range" class="input" id="letter_spacing" min="-1" max="1" step="0.1" value="0" (change)="onLetterSpacing($event)" />
+            </ng-container>
+          </ng-template>
+        </div>
+
+        <!-- <div class="input-preview preview-casing">
+          <button (click)="handleSpacingButton($event);" [attr.data-type]="buttonType"><span class="material-icons">format_size</span></button>
+        </div> -->
+
+        <div class="input-preview preview-reset">
+          <button (click)="handleResetButton($event);" [attr.data-type]="buttonType" title="Reset Preview"><span class="material-icons">cached</span></button>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>

package/src/app/pages/main/toolbar/toolbar.component.scss

@@ -0,0 +1,3 @@
+:host {
+  margin-top: -1px;
+}