fontastic 0.1.3

package/src/app/shared/components/glyph-list/glyph-list.component.ts

@@ -0,0 +1,165 @@
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ModalService, PresentationService } from '@app/core/services';
+
+@Component({
+  selector: 'app-glyph-list',
+  templateUrl: './glyph-list.component.html',
+  styleUrls: ['./glyph-list.component.scss']
+})
+export class GlyphListComponent implements OnInit, OnChanges {
+
+  @Input() fontObject: opentype.Font;
+  @Input() fontColor: string;
+
+  //fontColor: string;
+  fontScale: number;
+  fontSize: number;
+  fontBaseline: number;
+
+  cellCount = 200;
+  cellWidth = 30;
+  cellHeight = 30;
+  cellMarginTop = 1;
+  cellMarginBottom = 1;
+  cellMarginLeftRight = 1;
+
+  glyphName = '';
+
+  page = 0;
+  numPages = 0;
+  numGlyphs = 0;
+  paginatorOptions: any[] = [];
+
+  cellSizeOptions: any[] = [30, 40, 50, 60, 80, 100, 120, 140, 160, 180, 200, 250, 300, 400, 500, 600, 700, 800];
+  cellCountOptions: any[] = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];
+
+  constructor(
+    private presentationService: PresentationService,
+    private modalService: ModalService,
+  ) { }
+
+  ngOnInit() {
+    const root = document.documentElement as HTMLElement;
+    this.fontColor = root.style.getPropertyValue('--font-color');
+  }
+
+  ngOnChanges() {
+    if (this.fontObject?.tables) {
+      this.initialize();
+    }
+  }
+
+  initialize() {
+    const w = this.cellWidth - this.cellMarginLeftRight * 2;
+    const h = this.cellHeight - this.cellMarginTop - this.cellMarginBottom;
+    const head = this.fontObject.tables.head;
+    const maxHeight = head.yMax - head.yMin;
+
+    this.fontScale = Math.min(w / (head.xMax - head.xMin), h / maxHeight);
+    this.fontSize = this.fontScale * this.fontObject.unitsPerEm;
+    this.fontBaseline = this.cellMarginTop + h * head.yMax / maxHeight;
+
+    this.paginate().then(() => this.initGlyphList(0));
+  }
+
+  async paginate() {
+    const numGlyphs: number = this.fontObject.numGlyphs;
+    const numPages: number = Math.ceil(numGlyphs / this.cellCount);
+
+    const data = [];
+    for (let i = 0; i < numPages; i++) {
+      const lastIndex = Math.min(numGlyphs - 1, (i + 1) * this.cellCount - 1);
+      const text = i * this.cellCount + '-' + lastIndex;
+      data.push({
+        key: i,
+        value: text
+      });
+    }
+
+    this.paginatorOptions = data;
+    this.numGlyphs = numGlyphs - 1;
+    this.numPages = numPages;
+
+    return data;
+  }
+
+  initGlyphList(page: number = 0) {
+    const firstGlyph = page * this.cellCount;
+    for (let i = 0; i < this.cellCount; i++) {
+      const el = document.getElementById('g' + i) as HTMLCanvasElement;
+      if (el) {
+        this.renderGlyphItem(el, firstGlyph + i);
+      }
+    }
+  }
+
+  renderGlyphItem(canvas: HTMLCanvasElement, glyphIndex: any) {
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+    ctx.clearRect(0, 0, this.cellWidth, this.cellHeight);
+
+    if (glyphIndex >= this.fontObject.numGlyphs) {
+      return;
+    }
+
+    const glyph = this.fontObject.glyphs.get(glyphIndex);
+    const glyphWidth = glyph.advanceWidth * this.fontScale;
+    const xmin = (this.cellWidth - glyphWidth) / 2;
+    const xmax = (this.cellWidth + glyphWidth) / 2;
+
+    const path = glyph.getPath(xmin, this.fontBaseline, this.fontSize);
+    path.fill = this.fontColor;
+    path.draw(ctx);
+  }
+
+  createRange(range: number) {
+    const items = [];
+    for (let i = 0; i < range + 1; i++) {
+      items.push(i);
+    }
+    return items;
+  }
+
+  onCellHover(event: any) {
+    const firstGlyphIndex = Number(this.page * this.cellCount);
+    const cellIndex = Number(event.target.id.substr(1));
+    const glyphIndex = firstGlyphIndex + cellIndex;
+    this.glyphName = (glyphIndex <= this.numGlyphs) ? this.fontObject.glyphs.get(glyphIndex).name : '';
+  }
+
+  onCellSelect(event: any) {
+    const firstGlyphIndex = this.page * this.cellCount;
+    const cellIndex = parseInt(event.target.id.substr(1), 10);
+    const glyphIndex = firstGlyphIndex + cellIndex;
+    if (glyphIndex < this.fontObject.numGlyphs) {
+      this.presentationService.setGlyphIndex(glyphIndex);
+      this.modalService.open('glyph-view');
+    }
+  }
+
+  onChangePage(event: Event) {
+    const target = event.target as HTMLInputElement;
+    this.page = Number(target.value);
+    this.initGlyphList(this.page);
+  }
+
+  onChangeSize(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const size = Number(target.value);
+    this.cellHeight = size;
+    this.cellWidth = size;
+    setTimeout(() => this.initialize(), 1e3 / 3);
+  }
+
+  onChangeCount(event: Event) {
+    const target = event.target as HTMLInputElement;
+    const count = Number(target.value);
+    if (count < this.numGlyphs) {
+      this.cellCount = count;
+      setTimeout(() => this.initialize(), 1e3 / 3);
+    }
+  }
+
+  onComponentSwitch() {
+    this.presentationService.setInspectComponent('typescale');
+  }
+}

package/src/app/shared/components/glyph-view/glyph-view.component.html

@@ -0,0 +1,23 @@
+<app-modal id="glyph-view" title="Glyph Viewer" size="sm" shadow="shadow-md" [showHeader]="false" [showFooter]="false">
+
+  <div class="controls flex justify-between items-center border-bottom">
+    <div class="controls__item flex justify-start items-center">
+      <div>
+        <h2 class="glyph-info">Glyph name: {{this.glyph?.name}}</h2>
+      </div>
+    </div>
+    <div class="controls__item flex justify-end items-center">
+      <i class="material-icons" (click)="modalService.close();">close</i>
+    </div>
+  </div>
+
+  <div class="hover-scrollbox-y">
+    <div class="glyph-display">
+      <div class="glyph-display-wrapper">
+        <canvas id="glyph-bg" width="400" height="400"></canvas>
+        <canvas id="glyph-fg" width="400" height="400"></canvas>
+      </div>
+    </div>
+  </div>
+
+</app-modal>

package/src/app/shared/components/glyph-view/glyph-view.component.ts

@@ -0,0 +1,228 @@
+import { Component, OnInit } from '@angular/core';
+import { FontService, ModalService, PresentationService } from '@app/core/services';
+import { Glyph, Metrics, Path, RenderOptions } from 'opentype.js';
+
+@Component({
+  selector: 'app-glyph',
+  templateUrl: './glyph-view.component.html',
+  styleUrls: ['./glyph-view.component.scss']
+})
+export class GlyphViewComponent implements OnInit {
+
+  fontObject: opentype.Font;
+
+  glyphIndex: number;
+
+  fillColor: string;
+  strokeColor: string;
+
+  fontScale: number;
+  fontSize: number;
+  fontBaseline: number;
+
+  glyph: Glyph;
+  metrics: Metrics;
+  path: Path;
+
+  glyphMargin = 5;
+  glyphScale: number;
+  glyphSize: number;
+  glyphBaseline: number;
+  glyphMarkSize = 10;
+
+  arrowLength = 10;
+  arrowAperture = 4;
+
+  height = 400;
+  width = 400;
+
+  pixelRatio = window.devicePixelRatio || 1;
+
+  constructor(
+    private fontService: FontService,
+    public modalService: ModalService,
+    private presentationService: PresentationService
+  ) {
+    const root = document.documentElement as HTMLElement;
+    this.fillColor = root.style.getPropertyValue('--fill-color');
+    this.strokeColor = root.style.getPropertyValue('--stroke-color');
+  }
+
+  ngOnInit() {
+    this.presentationService.watchGlyphIndex$.subscribe((result: number) => {
+      setTimeout(() => {
+        this.initialize(result);
+      }, 1e3/3);
+    });
+    this.fontService.watchFontObject$.subscribe((result: opentype.Font) => this.fontObject = result);
+  }
+
+  onComponentSwitch() {
+    this.presentationService.setInspectComponent('glyph-list');
+  }
+
+  getElement(id: string): HTMLCanvasElement {
+    return document.getElementById(id) as HTMLCanvasElement;
+  }
+
+  getContext(element: HTMLCanvasElement): CanvasRenderingContext2D {
+    return element.getContext('2d') as CanvasRenderingContext2D;
+  }
+
+  getGlyphById(glyphIndex: number): Glyph {
+    return this.fontObject.glyphs.get(glyphIndex);
+  }
+
+  getPath(x?: number, y?: number, fontSize?: number, options?: RenderOptions, font?: opentype.Font): Path {
+    return this.glyph.getPath(x, y, fontSize, options, font);
+  }
+
+  getMetrics(): Metrics {
+    return this.glyph.getMetrics();
+  }
+
+  initialize(glyphIndex: number) {
+    this.glyphIndex = glyphIndex;
+
+    if (!this.glyphIndex || !this.fontObject) {
+      return;
+    }
+
+    const element = this.getElement('glyph-bg');
+    if (!element) {
+      return;
+    }
+
+    const ctx = this.getContext(element);
+    ctx.clearRect(0, 0, this.width, this.height);
+
+    this.glyph = this.getGlyphById(this.glyphIndex);
+    this.metrics = this.glyph.getMetrics();
+
+    const glyphW = this.width - this.glyphMargin * 2;
+    const glyphH = this.height - this.glyphMargin * 2;
+
+    const head = this.fontObject.tables.head;
+    const maxHeight = head.yMax - head.yMin;
+
+    this.glyphScale = Math.min(glyphW / (head.xMax - head.xMin), glyphH / maxHeight);
+    this.glyphSize = this.glyphScale * this.fontObject.unitsPerEm;
+    this.glyphBaseline = this.glyphMargin + glyphH * head.yMax / maxHeight;
+
+    ctx.fillStyle = this.strokeColor;
+
+    this.drawLine(ctx, 'Baseline', 0);
+    this.drawLine(ctx, 'yMax', this.fontObject.tables.head.yMax);
+    this.drawLine(ctx, 'yMin', this.fontObject.tables.head.yMin);
+    this.drawLine(ctx, 'Ascender', this.fontObject.tables.hhea.ascender + 100);
+    this.drawLine(ctx, 'Descender', this.fontObject.tables.hhea.descender + 100);
+    this.drawLine(ctx, 'Typo Ascender', this.fontObject.tables.os2.sTypoAscender + 150);
+    this.drawLine(ctx, 'Typo Descender', this.fontObject.tables.os2.sTypoDescender + 150);
+
+    this.displayGlyph();
+  }
+
+  drawLine(ctx: CanvasRenderingContext2D, text: string, yunits: number): void {
+    const ypx = this.glyphBaseline - yunits * this.glyphScale;
+    ctx.fillText(text, 2, ypx + 3);
+    ctx.fillRect(80, ypx, this.width, 1);
+  }
+
+  displayGlyph(): void {
+    const ctx = this.getContext(this.getElement('glyph-fg'));
+    ctx.clearRect(0, 0, this.width, this.height);
+
+    const glyphWidth = this.glyph.advanceWidth * this.glyphScale;
+
+    const xmin = (this.width - glyphWidth) / 2;
+    const xmax = (this.width + glyphWidth) / 2;
+
+    ctx.fillRect(xmin - this.glyphMarkSize + 1, this.glyphBaseline, this.glyphMarkSize, 1);
+    ctx.fillRect(xmin, this.glyphBaseline, 1, this.glyphMarkSize);
+    ctx.fillRect(xmax, this.glyphBaseline, this.glyphMarkSize, 1);
+    ctx.fillRect(xmax, this.glyphBaseline, 1, this.glyphMarkSize);
+
+    ctx.fillText('0', xmin, this.glyphBaseline + this.glyphMarkSize + 10);
+    ctx.fillText(`${this.glyph.advanceWidth}`, xmax, this.glyphBaseline + this.glyphMarkSize + 10);
+
+    ctx.fillStyle = this.strokeColor;
+    ctx.textAlign = 'center';
+
+    const path = this.getPath(xmin, this.glyphBaseline, this.glyphSize);
+
+    path.fill = this.fillColor; // Glyph fill color
+    path.stroke = this.strokeColor; // Glyph stroke color
+    path.strokeWidth = 1.5;
+
+    this.drawPathWithArrows(ctx, path);
+
+    this.glyph.drawPoints(ctx, xmin, this.glyphBaseline, this.glyphSize);
+  }
+
+  drawArrow(ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number): void {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const segmentLength = Math.sqrt(dx * dx + dy * dy);
+    const unitx = dx / segmentLength;
+    const unity = dy / segmentLength;
+    const basex = x2 - this.arrowLength * unitx;
+    const basey = y2 - this.arrowLength * unity;
+    const normalx = this.arrowAperture * unity;
+    const normaly = -this.arrowAperture * unitx;
+    ctx.beginPath();
+    ctx.moveTo(x2, y2);
+    ctx.lineTo(basex + normalx, basey + normaly);
+    ctx.lineTo(basex - normalx, basey - normaly);
+    ctx.lineTo(x2, y2);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  drawPathWithArrows(ctx: CanvasRenderingContext2D, path: any): void {
+    let x1: any;
+    let y1: any;
+    let x2: any;
+    let y2: any;
+
+    ctx.beginPath();
+
+    const arrows = [];
+    for (const cmd of path.commands) {
+      if (cmd.type === 'M') {
+        if (x1 !== undefined) {
+          arrows.push([ctx, x1, y1, x2, y2]);
+        }
+        ctx.moveTo(cmd.x, cmd.y);
+      } else if (cmd.type === 'L') {
+        ctx.lineTo(cmd.x, cmd.y);
+        x1 = x2;
+        y1 = y2;
+      } else if (cmd.type === 'C') {
+        ctx.bezierCurveTo(cmd.x1, cmd.y1, cmd.x2, cmd.y2, cmd.x, cmd.y);
+        x1 = cmd.x2;
+        y1 = cmd.y2;
+      } else if (cmd.type === 'Q') {
+        ctx.quadraticCurveTo(cmd.x1, cmd.y1, cmd.x, cmd.y);
+        x1 = cmd.x1;
+        y1 = cmd.y1;
+      } else if (cmd.type === 'Z') {
+        arrows.push([ctx, x1, y1, x2, y2]);
+        ctx.closePath();
+      }
+      x2 = cmd.x;
+      y2 = cmd.y;
+    }
+    if (path.fill) {
+      ctx.fillStyle = path.fill;
+      ctx.fill();
+    }
+    if (path.stroke) {
+      ctx.strokeStyle = path.stroke;
+      ctx.lineWidth = path.strokeWidth;
+      ctx.stroke();
+    }
+    ctx.fillStyle = this.strokeColor;
+
+    arrows.forEach((arrow) => this.drawArrow(arrow[0], arrow[1], arrow[2], arrow[3], arrow[4]));
+  }
+}

package/src/app/shared/components/index.ts

@@ -0,0 +1,16 @@
+export * from './alert/alert.component';
+export * from './breadcrumbs/breadcrumbs.component';
+export * from './button/button.component';
+export * from './glyph-list/glyph-list.component';
+export * from './glyph-view/glyph-view.component';
+export * from './loading/loading.component';
+export * from './modal/modal.component';
+export * from './tables/tables.component';
+export * from './page-not-found/page-not-found.component';
+export * from './paginator/paginator.component';
+export * from './pairing/pairing.component';
+export * from './search/search.component';
+export * from './settings/settings.component';
+export * from './store/store.component';
+export * from './spinner/spinner.component';
+export * from './typescale/typescale.component';

package/src/app/shared/components/loading/loading.component.html

@@ -0,0 +1 @@
+<div class="app-loading"></div>

package/src/app/shared/components/loading/loading.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { PresentationService } from '@app/core/services';
+
+@Component({
+  selector: 'app-loading',
+  templateUrl: './loading.component.html',
+  styleUrls: ['./loading.component.scss']
+})
+export class LoadingComponent implements OnInit {
+
+  isActivated = false;
+
+  constructor(
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit() {
+    this.presentationService._loadingScreen.subscribe((status: boolean) => {
+      if (status) {
+        this.isActivated = status;
+      } else {
+        setTimeout(() => this.isActivated = status, 1e3 / 3);
+      }
+    });
+  }
+}

package/src/app/shared/components/modal/modal.component.html

@@ -0,0 +1,31 @@
+<div id="{{id}}" class="modal" role="dialog" aria-labelledby="modal-title" aria-modal="true" *ngIf="enabled">
+
+  <!-- Modal dialog -->
+  <div class="modal__dialog" [class]="size">
+
+    <!-- Modal content -->
+    <div class="modal__content" [ngClass]="addContentStyles()">
+
+      <!-- Modal header -->
+      <div class="modal__header border-bottom" *ngIf="showHeader">
+        <h4 class="modal__header-title" id="modal-title">{{title}}</h4>
+        <button type="button" (click)="close()"><span class="material-icons">close</span></button>
+      </div>
+
+      <!-- Modal body -->
+      <div class="modal__body">
+        <ng-content></ng-content>
+      </div>
+
+      <!-- Modal footer -->
+      <div class="modal__footer border-top" *ngIf="showFooter">
+        <button type="button" class="btn btn-default" (click)="close()">Close</button>
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
+
+<div class="modal-bg" *ngIf="enabled"></div>

package/src/app/shared/components/modal/modal.component.ts

@@ -0,0 +1,51 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { ModalService } from '@app/core/services';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent implements OnInit, OnDestroy {
+  @Input() id?: string;
+  @Input() title = 'Modal';
+  @Input() size = 'sm';
+  @Input() rounded = 'rounded-none';
+  @Input() shadow = 'shadow-none';
+
+  @Input() showHeader = true;
+  @Input() showFooter = true;
+
+  enabled = false;
+
+  private element: any;
+
+  constructor(
+    private modalService: ModalService,
+    private el: ElementRef
+  ) {
+    this.element = el.nativeElement;
+  }
+
+  ngOnInit() {
+    this.modalService.add(this);
+    document.body.appendChild(this.element);
+  }
+
+  ngOnDestroy() {
+    this.modalService.remove(this);
+    this.element.remove();
+  }
+
+  addContentStyles() {
+    return [this.rounded, this.shadow];
+  }
+
+  open() {
+    this.enabled = true;
+  }
+
+  close() {
+    this.enabled = false;
+  }
+}

package/src/app/shared/components/page-not-found/page-not-found.component.html

@@ -0,0 +1,3 @@
+<p>
+  page-not-found works!
+</p>

package/src/app/shared/components/page-not-found/page-not-found.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.scss']
+})
+export class PageNotFoundComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/app/shared/components/paginator/paginator.component.html

@@ -0,0 +1,21 @@
+<div class="paginator">
+  <div class="paginator-block">
+    
+    <div class="paginator-panel">
+      <a href="#" class="prev" title="Prev" [class.page-disabled]="deactivatePrev" (click)="onButtonClick('prev')"><i class="material-icons">arrow_left</i></a>
+      <input type="text" class="form-control form-control-reset" maxlength="5" value="{{page}}" (keyup.enter)="handlePageInput($event)" (change)="handlePageInput($event)">
+      <a href="#" class="next" title="Next" [class.page-disabled]="deactivateNext" (click)="onButtonClick('next')"><i class="material-icons">arrow_right</i></a>
+    </div>
+
+    <span class="paginator-counts" [attr.title]="resultSetCount"> Page {{page}} of {{pages}} - {{ resultSetTotal }} total.</span>
+
+    <div class="paginator-results">
+      <label>
+        <select class="form-control form-control-reset" [(ngModel)]="limit" (change)="onSelectChange($event)">
+          <option *ngFor="let item of limitOptions" [value]="item.value">{{item.title}}</option>
+        </select>
+      </label>
+    </div>
+
+  </div>
+</div>

package/src/app/shared/components/paginator/paginator.component.scss

@@ -0,0 +1,3 @@
+:host {
+  flex-grow: 1;
+}