import { Directive, ElementRef, Input, NgZone, OnDestroy, OnInit } from '@angular/core';

import Editor from './core/editor';


@Directive({
  selector: '[appEditor]'
})
export class EditorDirective implements OnInit, OnDestroy {
  @Input() opts: any;
  @Input() padding: any;

  private canvas: HTMLCanvasElement;
  public editor: Editor;

  constructor(el: ElementRef, private zone: NgZone) {
    //减少change detecion， 提升性能
    //this.zone.runOutsideAngular(() => {
    //  this.editor = new Editor(el.nativeElement as HTMLCanvasElement);
    //});
    // this.editor = new Editor(el.nativeElement as HTMLCanvasElement, null, this.padding);
    this.canvas = el.nativeElement as HTMLCanvasElement;
  }
  ngOnInit(): void {
    this.editor = new Editor(this.canvas, this.opts, this.padding);
  }

  ngOnDestroy(): void {
    this.editor.destroy();
    this.editor = null;
  }

}
