formula-input.component.ts 2.52 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 19 20 21

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

liujiaxin's avatar
liujiaxin committed
22 23 24



liujiaxin's avatar
liujiaxin committed
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
@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
43 44 45 46
  private esc: Subscription;



liujiaxin's avatar
liujiaxin committed
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

  constructor() {

  }
  ngOnInit() {

  }
  ngOnChanges() {

  }
  ngOnDestroy(): void {

  }
  valueChanged(evt) {
    console.log('valueChanged', evt);
    this.ngfModelChange.emit(evt);
  }
  showFormulaPad(e) {
liujiaxin's avatar
liujiaxin committed
65
    // console.log('showFormulaPad', e);
liujiaxin's avatar
liujiaxin committed
66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88
    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 = 'absolute';
    fb.style.left = rect.left + rect.width + 'px';
    fb.style.top = rect.top + 'px';
    fb.style.visibility = 'visible';
  }
  updateValue(val) {
    this.ngfModel = val;
  }

  ngAfterViewInit() {
    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: {
liujiaxin's avatar
liujiaxin committed
89 90
        width: 1920,
        mode: 'pc',
liujiaxin's avatar
liujiaxin committed
91 92 93 94
        bottom: false,
      }});
    document.addEventListener('documentMessage', (e) => {
      // @ts-ignore
liujiaxin's avatar
liujiaxin committed
95 96
      const {type} = e.detail;
      if (type === 'common.setFormula') {
liujiaxin's avatar
liujiaxin committed
97 98 99 100 101 102
        // @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
103 104 105 106 107
        window.FBOARD.editor.style.visibility = 'hidden';
        this.ngfBlur.emit();
      }
      if (type === 'common.closeModal') {
        window.FBOARD.editor.style.visibility = 'hidden';
liujiaxin's avatar
liujiaxin committed
108 109 110 111 112
      }
    });
  }
}