<canvas appEditor></canvas>
<div class="toolbar toolbar-top">



  <div class="btn-group">
    <button class="btn btn-xs btn-default" (click)="location.back()" i18n>返回</button>

    <button class="btn btn-xs btn-default" (click)="onOpenUpload()" i18n>上传文件</button>

    <button *ngFor="let tool of tools" class="btn btn-default" [ngClass]="{'btn-primary': tool.active}" type="button"
      (click)="editorRef.editor.setToolByKey(tool.key)">
      <i class="pr-1" [ngClass]="tool.icon"></i>
      <span>{{tool.name || tool.key}} </span>
    </button>

    <button *ngIf="mapEditLayer" class="btn btn-default" [ngClass]="{ 'btn-primary': mapEditLayer?.showPage!= true }"
      type="button" (click)="mapEditLayer.toggleOriginal()">
      <i class="fas fa-eye-slash"></i>
      <span i18n>隐藏线稿</span>
    </button>


    <button *ngIf="mapEditLayer" class="btn btn-default" [disabled]="mapEditLayer.undoSize()==0" (click)="mapEditLayer.undo()">
      <i class="pr-1 fas fa-undo"></i>
      <ng-container i18n>回退</ng-container>{{mapEditLayer.undoSize()}}
    </button>

    <button *ngIf="mapEditLayer" class="btn btn-default" [disabled]="mapEditLayer.redoSize()==0" (click)="mapEditLayer.redo()">
      <i class="pr-1 fas fa-redo"></i>
      <ng-container i18n>重做</ng-container>{{mapEditLayer.redoSize()}}
    </button>

  </div>

</div>


<div class="toolbar toolbar-bottom ">
  <div style="pointer-events:none;">

    <div class="btn-group " *ngIf="editorRef">

      <button class="btn btn-xs btn-default" (click)="utils.toggleFullscreen()" i18n>
        <!-- {{utils.isFullscreen() ? '退出全屏' : '全屏'}} -->
        {utils.isFullscreen() ? 'true' : 'false', select, true {退出全屏} false {全屏}}
      </button>

      <button class="btn btn-default" type="button" (click)="editorRef.editor.bestFit()">
        <i class="ti-layout-slider pdd-right-5"></i>
        <span i18n>居中</span>
      </button>

      <label class="btn btn-default">{{editorRef.editor.getScale().x | percent}}</label>

      <button class="btn btn-default" type="button" (click)="editorRef.editor.reset100()">
        <i class="fal fa-expand-arrows pr-1"></i>
        <span>1:1</span>
      </button>

      <div class="btn-group">
        <button type="button" class="btn btn-xs btn-default  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Layer:{{layers[index]?.name}}
        </button>
        <div class="dropdown-menu">
          <a *ngFor="let layer of layers; let i=index" class="dropdown-item" (click)="switchLayer(i)" href="javascript:void(0)">
            Layer:{{layer.name}}
          </a>
        </div>
      </div>
 
      <button class="btn btn-default" type="button" (click)="addLayer()">
        <i class="fal fa-expand-arrows pr-1"></i>
        Add Layer
      </button>     

    </div>
  </div>
</div>





<!--区域列表-->
<div class="area-list" *ngIf="mapEditLayer">
  <div class="area-list-header">
    <div class="p-2">
      <ng-container i18n>总区块数</ng-container>：{{mapEditLayer?.sortedAreaList.length}}
    </div>
    <div>
      <button class="btn btn-default btn-xs" (click)="showAreaList=!showAreaList">
        <i *ngIf="showAreaList" class="fa fa-angle-up"></i>
        <i *ngIf="!showAreaList" class="fa fa-angle-down"></i>
      </button>
    </div>
  </div>
  <ng-container *ngIf="showAreaList">
    <div class="area-item" *ngFor="let area of mapEditLayer?.sortedAreaList" [style.background]="area.colorRgba"
      (click)="focusToArea(area)">
      {{area.count}}
    </div>
  </ng-container>
</div>


<div *ngIf="isUpload" class="upload-wraper ">
  <art-checker-upload (data)="onUpload($event)" (cancel)="isUpload=false"></art-checker-upload>
</div>