fontastic 0.1.7 → 0.2.0

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

@@ -1,191 +0,0 @@
-$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

@@ -1,35 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,46 +0,0 @@
-<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

@@ -1,239 +0,0 @@
-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

@@ -1,78 +0,0 @@
-<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

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