fontastic 0.1.3 → 0.2.0

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

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

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

@@ -1,228 +0,0 @@
-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/loading/loading.component.html

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

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

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

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

@@ -1,51 +0,0 @@
-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/paginator/paginator.component.html

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

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

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

@@ -1,133 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { DatabaseService } from '@app/core/services';
-import { QueryOptions } from '@main/types';
-
-@Component({
-  selector: 'app-paginator',
-  templateUrl: './paginator.component.html',
-  styleUrls: ['./paginator.component.scss']
-})
-export class PaginatorComponent implements OnInit {
-
-  resultSetCount = 0;
-  resultSetTotal = 0;
-
-  page = 1;
-  pages = 1;
-  limit = 100;
-  offset = 0;
-
-  deactivatePrev = false;
-  deactivateNext = false;
-
-  limitOptions: any[] = [
-    { value: 100, title: '100' },
-    { value: 150, title: '150' },
-    { value: 200, title: '200' },
-    { value: 250, title: '250' },
-    { value: 300, title: '300' }
-  ];
-
-  constructor(
-    private databaseService: DatabaseService
-  ) { }
-
-  ngOnInit(): void {
-    this.databaseService.watchActivePage$.subscribe((result) => this.page = result);
-
-    this.databaseService.watchResultSetCount$.subscribe((result) => this.resultSetCount = result);
-    
-    this.databaseService.watchResultSetTotal$.subscribe((result) => {
-      this.resultSetTotal = result;
-      const pages = Math.ceil(this.resultSetTotal / this.limit);
-      this.pages = (pages) ? pages : 1; 
-      this.checkButtonStatus();
-    });
-  }
-
-  getQueryOptions(): QueryOptions {
-    return this.databaseService.getQueryOptions();
-  }
-
-  handlePageInput(event: any): void {
-    const el = event.srcElement;
-    const target = event.target;
-    const page = target.value;
-
-    if (page < 1) {
-      this.page = 1;
-    } else if (page > this.pages) {
-      this.page = this.pages;
-    } else {
-      this.page = page;
-    }
-
-    this.calculateOffset();
-
-    this.checkButtonStatus();
-
-    this.paginate();
-
-    if (event.keyCode === 13) {
-      el.blur();
-    }
-  }
-
-  onButtonClick(direction: string) {
-    if (direction === 'next') {
-      this.page++;
-    } else {
-      this.page--;
-    }
-
-    this.calculateOffset();
-    this.checkButtonStatus();
-    this.paginate();
-  }
-
-  onSelectChange(event: Event): void {
-    const target = event.target as HTMLInputElement;
-    this.limit = Number(target.value);
-    this.databaseService.resetPage(1);
-    this.calculateOffset();
-    this.checkButtonStatus();
-    this.paginate();
-  }
-
-  paginate(): void {
-    const options: QueryOptions = {
-      ...this.getQueryOptions(),
-      skip: this.offset,
-      take: this.limit
-    };
-
-    this.databaseService.execute(options);
-  }
-
-  checkButtonStatus(): void {
-    if (this.resultSetTotal > this.limit) {
-      if (this.page === 1) {
-        this.setButtonStatus(true, false);
-      } else if (this.page > 1 && this.page < this.pages) {
-        this.setButtonStatus(false, false);
-      } else {
-        this.setButtonStatus(false, true);
-      }
-    } else {
-      this.setButtonStatus(true, true);
-    }
-  }
-
-  setButtonStatus(prev: boolean, next: boolean): void {
-    this.deactivatePrev = prev;
-    this.deactivateNext = next;
-  }
-
-  calculateOffset(): void {
-    if (this.page === 1) {
-      this.offset = 0;
-    } else {
-      this.offset = (this.page - 1) * this.limit;
-    }
-  }
-}