formula-input.component.ts 3.3 KB
Newer Older
liujiaxin's avatar
liujiaxin committed
1 2 3 4 5 6 7 8 9 10
import {
  AfterViewInit,
  Component,
  ElementRef, EventEmitter,
  Input,
  OnChanges,
  OnDestroy,
  OnInit, Output,
  ViewChild
} from '@angular/core';
liujiaxin's avatar
liujiaxin committed
11
import {fromEvent, Observable, Subscription} from 'rxjs';
liujiaxin's avatar
liujiaxin committed
12 13 14 15 16 17 18

declare global {
  interface Window {
    FBOARD: any;
    FormulaBoard: any;
    __initfp__: any;
    __tmp_fp_input_model__: any;
liujiaxin's avatar
liujiaxin committed
19
    __FormulaBoard_js_installed__: any;
liujiaxin's avatar
liujiaxin committed
20 21 22
  }
}

liujiaxin's avatar
liujiaxin committed
23 24 25



liujiaxin's avatar
liujiaxin committed
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
@Component({
  selector: 'app-formula-input',
  templateUrl: './formula-input.component.html',
  styleUrls: ['./formula-input.component.scss']
})

export class FormulaInputComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {

  @ViewChild('inputEl', {static: true }) inputEl: ElementRef;
  // @ViewChild('wrapperEl', {static: true }) wrapperEl: ElementRef;
  private fboard: any;

  // [(ngModel)]="item.title" (blur)="save()"
  @Input() ngfModel: any;
  @Output() ngfModelChange = new EventEmitter();
  @Output() ngfBlur = new EventEmitter();

  FB_id = 'FormulaBoard';
liujiaxin's avatar
liujiaxin committed
44 45 46 47
  private esc: Subscription;



liujiaxin's avatar
liujiaxin committed
48 49

  constructor() {
liujiaxin's avatar
liujiaxin committed
50 51 52 53 54 55 56 57 58 59
    if (!window.__FormulaBoard_js_installed__) {
      window.__FormulaBoard_js_installed__ = true;
      const s = document.createElement('script');
      s.src = 'assets/formula-board/formula-board.js';
      document.head.append(s);
      s.addEventListener('load', () => {
        this.FormulaBoardInit();
      });

    }
liujiaxin's avatar
liujiaxin committed
60 61 62 63 64 65 66 67 68 69 70 71

  }
  ngOnInit() {

  }
  ngOnChanges() {

  }
  ngOnDestroy(): void {

  }
  valueChanged(evt) {
liujiaxin's avatar
liujiaxin committed
72
    console.log('valueChanged', this.ngfModel, evt);
liujiaxin's avatar
liujiaxin committed
73 74 75
    this.ngfModelChange.emit(evt);
  }
  showFormulaPad(e) {
liujiaxin's avatar
liujiaxin committed
76
    // console.log('showFormulaPad', e);
liujiaxin's avatar
liujiaxin committed
77 78 79 80
    window.FBOARD.set(e.target.value);
    window.__tmp_fp_input_model__ = this;
    const rect = this.inputEl.nativeElement.getBoundingClientRect();
    const fb = document.getElementById(this.FB_id);
liujiaxin's avatar
liujiaxin committed
81
    fb.style.position = 'fixed';
liujiaxin's avatar
liujiaxin committed
82 83 84
    // @ts-ignore
    const padWidth = $('#' + this.FB_id).outerWidth() * .8;
    // @ts-ignore
liujiaxin's avatar
liujiaxin committed
85 86
    const padHeight = $('#' + this.FB_id).outerHeight() * .8;
    // @ts-ignore
liujiaxin's avatar
liujiaxin committed
87
    const ww = $(window).innerWidth();
liujiaxin's avatar
liujiaxin committed
88 89 90 91 92
    // @ts-ignore
    const hh = $(window).innerHeight();
    const left = (ww - padWidth) / 2;
    const top = (hh - padHeight) / 2;

liujiaxin's avatar
liujiaxin committed
93 94 95
    console.log('left', left);
    fb.style.left = left + 'px';
    fb.style.top = top + 'px';
liujiaxin's avatar
liujiaxin committed
96 97 98 99
    fb.style.visibility = 'visible';
  }
  updateValue(val) {
    this.ngfModel = val;
liujiaxin's avatar
liujiaxin committed
100
    this.ngfModelChange.emit(val);
liujiaxin's avatar
liujiaxin committed
101
  }
liujiaxin's avatar
liujiaxin committed
102 103 104 105 106 107
  ngAfterViewInit() {}
  FormulaBoardInit() {
    // if (window.__initfp__) {
    //   return;
    // }
    // window.__initfp__ = true;
liujiaxin's avatar
liujiaxin committed
108 109 110 111 112
    window.FBOARD = new window.FormulaBoard({
      // container: this.wrapperEl.nativeElement,
      id: this.FB_id,
      path: 'assets/formula-board/',
      options: {
liujiaxin's avatar
liujiaxin committed
113 114
        width: 1920,
        mode: 'pc',
liujiaxin's avatar
liujiaxin committed
115 116 117 118
        bottom: false,
      }});
    document.addEventListener('documentMessage', (e) => {
      // @ts-ignore
liujiaxin's avatar
liujiaxin committed
119 120
      const {type} = e.detail;
      if (type === 'common.setFormula') {
liujiaxin's avatar
liujiaxin committed
121 122 123 124 125 126
        // @ts-ignore
        const {formula} = e.detail.data.body;
        console.log(formula);
        window.FBOARD.clear();
        // @ts-ignore
        window.__tmp_fp_input_model__.updateValue(formula);
liujiaxin's avatar
liujiaxin committed
127 128 129 130 131
        window.FBOARD.editor.style.visibility = 'hidden';
        this.ngfBlur.emit();
      }
      if (type === 'common.closeModal') {
        window.FBOARD.editor.style.visibility = 'hidden';
liujiaxin's avatar
liujiaxin committed
132 133 134 135 136
      }
    });
  }
}