formula-input.component.ts 3.3 KB
Newer Older
limingzhe's avatar
limingzhe committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
import {
  AfterViewInit,
  Component,
  ElementRef, EventEmitter,
  Input,
  OnChanges,
  OnDestroy,
  OnInit, Output,
  ViewChild
} from '@angular/core';
import {fromEvent, Observable, Subscription} from 'rxjs';

declare global {
  interface Window {
    FBOARD: any;
    FormulaBoard: any;
    __initfp__: any;
    __tmp_fp_input_model__: any;
    __FormulaBoard_js_installed__: any;
  }
}




@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';
  private esc: Subscription;




  constructor() {
    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();
      });

    }

  }
  ngOnInit() {

  }
  ngOnChanges() {

  }
  ngOnDestroy(): void {

  }
  valueChanged(evt) {
    console.log('valueChanged', this.ngfModel, evt);
    this.ngfModelChange.emit(evt);
  }
  showFormulaPad(e) {
    // console.log('showFormulaPad', e);
    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);
    fb.style.position = 'fixed';
    // @ts-ignore
    const padWidth = $('#' + this.FB_id).outerWidth() * .8;
    // @ts-ignore
    const padHeight = $('#' + this.FB_id).outerHeight() * .8;
    // @ts-ignore
    const ww = $(window).innerWidth();
    // @ts-ignore
    const hh = $(window).innerHeight();
    const left = (ww - padWidth) / 2;
    const top = (hh - padHeight) / 2;

    console.log('left', left);
    fb.style.left = left + 'px';
    fb.style.top = top + 'px';
    fb.style.visibility = 'visible';
  }
  updateValue(val) {
    this.ngfModel = val;
    this.ngfModelChange.emit(val);
  }
  ngAfterViewInit() {}
  FormulaBoardInit() {
    // if (window.__initfp__) {
    //   return;
    // }
    // window.__initfp__ = true;
    window.FBOARD = new window.FormulaBoard({
      // container: this.wrapperEl.nativeElement,
      id: this.FB_id,
      path: 'assets/formula-board/',
      options: {
        width: 1920,
        mode: 'pc',
        bottom: false,
      }});
    document.addEventListener('documentMessage', (e) => {
      // @ts-ignore
      const {type} = e.detail;
      if (type === 'common.setFormula') {
        // @ts-ignore
        const {formula} = e.detail.data.body;
        console.log(formula);
        window.FBOARD.clear();
        // @ts-ignore
        window.__tmp_fp_input_model__.updateValue(formula);
        window.FBOARD.editor.style.visibility = 'hidden';
        this.ngfBlur.emit();
      }
      if (type === 'common.closeModal') {
        window.FBOARD.editor.style.visibility = 'hidden';
      }
    });
  }
}