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

  <div class="btn-group  shadow-sm">

    <button class="btn  " (click)="goback()">
      <i class="fal fa-arrow-alt-circle-left"></i>
      <ng-container i18n>退出</ng-container>
    </button>


    <div class="btn-group " *ngIf="isNumberEdit">
      <button type="button" class="btn    dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="false"
        aria-expanded="false">
        <i class="fal fa-upload pr-1"></i>
        <ng-container i18n>更新</ng-container>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" (click)="openModal(update_raw, modalTitle('update_raw'))" href="javascript:void(0)">
          <i class="fal fa-draw-polygon "></i>
          <span i18n>更新线稿</span>
        </a>
        <a class="dropdown-item" (click)="openModal(update_special, modalTitle('update_special'))" href="javascript:void(0)">
          <i class="fal fa-image "></i>
          <span i18n>更新彩绘</span>
        </a>
        <a class="dropdown-item" (click)="openModal(update_rawColored, modalTitle('update_rawColored'))" href="javascript:void(0)">
          <i class="fal fa-image "></i>
          <span i18n>更新上色底稿</span>
        </a>
      </div>
    </div>

    <div class="btn-group " *ngIf="isNumberEdit">
      <button type="button" class="btn    dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        <i class="fal fa-toolbox pr-1"></i>
        <ng-container i18n>工具</ng-container>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" (click)="openModal(color_merge_modal, modalTitle('color_merge_modal'), 880)" href="javascript:void(0)">
          <i class="fal fa-palette "></i>
          <span i18n>颜色合并</span>
        </a>
      </div>
    </div>

    <div *ngIf="isNumberEdit || isMapEdit" class="btn-group ">
      <button type="button" class="btn    dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        <i class="fal fa-tv pr-1"></i>
        <ng-container i18n>显示</ng-container>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" placement="right" ngbTooltip="v" [ngClass]="{ 'active': currentLayer?.showSvg}"
          (click)="currentLayer.showSvg = !currentLayer.showSvg " href="javascript:void(0)">
          <i class="fal fa-bezier-curve "></i>
          <span i18n>SVG线稿</span>
        </a>
        <a class="dropdown-item" placement="right" ngbTooltip="p"
          [ngClass]="{ 'active': currentLayer?.smoothing === false}"
          (click)="currentLayer.smoothing = !currentLayer.smoothing" href="javascript:void(0)">
          <i class="fal fa-braille "></i>
          <span i18n>显示像素</span>
        </a>
      </div>
    </div>

    <div *ngIf="isNumberEdit" class="btn-group ">
      <button type="button" class="btn    dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        <i class="fal fa-sort"></i>
        <ng-container i18n>排序/上色</ng-container>
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" placement="right"
          (click)="numberEditLayer?.resetOrder(); editorRef.editor.setToolByKey('number-edit-select'); updateTools()"
          href="javascript:void(0)">
          <i class="fal fa-sort-amount-down "></i>
          <span i18n>重新排序</span>
        </a>
        <a *ngIf="isNumberEdit && numberEditLayer?.canAuto" class="dropdown-item" placement="right"
          (click)="numberEditLayer?.autoOrder(); editorRef.editor.setToolByKey('number-edit-select'); updateTools()"
          href="javascript:void(0)">
          <i class="fal fa-sort-alpha-down "></i>
          <span i18n>自动排序</span>
        </a>
        <a class="dropdown-item" placement="right"
          (click)="numberEditLayer?.eraseAll(); editorRef.editor.setToolByKey('number-edit-bucket'); updateTools()"
          href="javascript:void(0)">
          <i class="fal fa-sync pr-1 "></i>
          <span i18n>重新上色</span>
        </a>
        <a class="dropdown-item" placement="right" ngbTooltip="h"
          (click)="numberEditLayer && numberEditLayer.showUnorderMask = false; editorRef.editor.setToolByKey('pan'); updateTools(); numberEditLayer?.invalidate()"
          href="javascript:void(0)">
          <i class="fal fa-eye "></i>
          <span i18n>当前上色</span>
        </a>
      </div>
    </div>


    <button *ngIf="isOrderEdit" class="btn " type="button" (click)="orderEditLayer?.reset()">
      <i class="fal fa-sync pr-1"></i>
      <span i18n>重新开始</span>
    </button>

    <button *ngIf="isOrderEdit && orderEditLayer?.canAuto" class="btn " type="button"
      (click)="orderEditLayer?.autoOrder()">
      <i class="fal fa-sort-alpha-down"></i>
      <span i18n>自动排序</span>
    </button>

    <ng-container *ngFor="let tool of tools">
      <ng-container *ngIf="tool.key != 'map-edit-brush'">
        <button class="btn " placement="bottom" ngbTooltip="{{tool.tooltip || tool.shortcut}}"
          [ngClass]="{'btn-primary': tool.active, '' : !tool.active}" type="button"
          (mousedown)="editorRef.editor.setToolByKey(tool.key); updateTools();">
          <i class="pr-1" [ngClass]="tool.icon"></i>
          <span>{{tool.name || tool.key}} </span>
        </button>
      </ng-container>
      <!-- map的笔刷工具特殊处理下，需要支持1-5线宽选择  -->
      <ng-container *ngIf="tool.key == 'map-edit-brush'">
        <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
          [ngClass]="{'btn-primary': tool.active, '' : !tool.active}" >
          <i (click)="editorRef.editor.setToolByKey(tool.key); updateTools();" class="pr-1" [ngClass]="tool.icon"></i>
          <span (click)="editorRef.editor.setToolByKey(tool.key); updateTools();">{{tool.name || tool.key}} </span>
        </button>
        <div class="dropdown-menu">
          <a *ngFor="let i of [1, 2, 3, 4, 5]" class="dropdown-item" placement="right" [ngClass]="{ 'active': currentLayer.getToolByKey('map-edit-brush').getProp('lineWidth') == i}"
            (click)="currentLayer.getToolByKey('map-edit-brush').setProp('lineWidth', i); editorRef.editor.setToolByKey(tool.key); updateTools();" href="javascript:void(0)">
            <span i18n>{{i}}</span>
          </a>
        </div>
      </ng-container>
    </ng-container>

    <!-- <button *ngFor="let tool of tools" class="btn " placement="bottom" ngbTooltip="{{tool.tooltip || tool.shortcut}}"
      [ngClass]="{'btn-primary': tool.active, '' : !tool.active}" type="button"
      (mousedown)="editorRef.editor.setToolByKey(tool.key); updateTools();">
        <i class="pr-1" [ngClass]="tool.icon"></i>
        <span>{{tool.name || tool.key}} </span>
    </button> -->

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

    <button *ngIf="isCheckEdit" class="btn btn-default" 
      [ngClass]="{ 'btn-primary': checkEditLayer?.showMark == true }" type="button" 
      (click)="checkEditLayer?.toggleMark()">
      <i class="fas fa-check"></i>
      <span i18n>标记</span>
    </button>

    <!-- <button *ngIf="isCheckEdit" class="btn btn-default" 
      [ngClass]="{ 'btn-primary': checkEditLayer?.lineMark == true }" type="button" 
      (click)="checkEditLayer?.toggleLineMark()">
      <i class="fas fa-check"></i>
      <span i18n>线条闭合检测</span>
    </button> -->
    
    <button *ngIf="isCheckEdit" class="btn btn-default" 
      [ngClass]="{ 'btn-primary': checkEditLayer?.showMap == true }" type="button" 
      (click)="checkEditLayer?.toggleMap()">
      <i class="fas fa-table"></i>
      <span i18n>显示map</span>
    </button>

    <button *ngIf="isCheckEdit" placement="bottom" ngbTooltip="q" class="btn " 
      [ngClass]="{ 'btn-primary': checkEditLayer?.showPage!= true }" type="button" 
      (click)="checkEditLayer?.togglePage()">
      <i class="fas fa-eye-slash"></i>
      <span i18n>隐藏线稿</span>
    </button>

    <button *ngIf="isCheckEdit && checkEditLayer?.floodImgs.length > 0" placement="bottom" class="btn " 
      [ngClass]="{ 'btn-primary': checkEditLayer?.showFloodIdx < 100 }" type="button" 
      (click)="checkEditLayer?.toggleParse()">
      <i class="far fa-analytics"></i>
      <span i18n>分析模式</span>
    </button>

    <div *ngIf="isCheckEdit && checkEditLayer?.showFloodIdx < 100" class="btn-group ">
      <button type="button" class="btn  dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false" i18n>
        分析过程
      </button>
      <div class="dropdown-menu">
        <ng-container *ngFor="let img of checkEditLayer?.floodImgs; let i=index">
          <a class="dropdown-item" placement="right" 
          [ngStyle]="{'background-color' : checkEditLayer?.showFloodIdx == i ? 'orange' : ''}"
          (click)="checkEditLayer.showFloodIdx = i"
          href="javascript:void(0)">
          <span i18n>第{{i+1}}步</span>
        </a>
        </ng-container>
      </div>
    </div>

    <button *ngIf="!isCheckEdit && !isMarkEdit" class="btn" (click)="showImageColorPicker = true" i18n>提色器</button>

    <button class="btn " placement="bottom" ngbTooltip="Ctrl/Cmd + z" [disabled]="currentLayer?.undoSize()==0"
      (click)="currentLayer?.undo()">
      <i class="pr-1 fal fa-undo"></i>
      <ng-container i18n>回退</ng-container>{{currentLayer?.undoSize()}}
    </button>

    <button class="btn " placement="bottom" ngbTooltip="Ctrl/Cmd + r" [disabled]="currentLayer?.redoSize()==0"
      (click)="currentLayer?.redo()">
      <i class="pr-1 fal fa-redo"></i>
      <ng-container i18n>重做</ng-container>{{currentLayer?.redoSize()}}
    </button>

    <button placement="bottom" ngbTooltip="Ctrl/Cmd + s" class="btn " [disabled]="!hasUpdates || isSaving"
      (click)="onSave()">
      <i *ngIf="!isSaving" class="pr-1 fal fa-save"></i>
      <i *ngIf="isSaving" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></i>
      <ng-container i18n>保存</ng-container>
    </button>



  </div>

</div>





<div class="toolbar toolbar-bottom ">
  <div style="pointer-events:none;">
    <div *ngIf="isNumberEdit && colorChangeAreas" style="pointer-events: auto;" class="text-center">
      <!--color picker-->
      <!--

      <span class="color-box rounded-0" [style.background]="numberEditLayer?.config.color" [cpSaveClickOutside]="true"
        [colorPicker]="numberEditLayer?.config.color" [cpOKButtonClass]="'btn btn-info '" cpPosition="top"
        [cpOutputFormat]="'rgba'" (colorPickerChange)="onSelectColor($event)">
      </span>
      -->

      <!--color picker for change areas color-->
      <span *ngIf="colorChangeAreas" class="color-box rounded-0" [style.background]="numberEditLayer?.color"
        [cpSaveClickOutside]="true" [colorPicker]="numberEditLayer?.color" [cpOKButtonClass]="'btn btn-info '"
        cpPosition="top" [cpToggle]="colorChangeCpToggle" [cpOutputFormat]="'rgba'"
        (colorPickerChange)="onChangeColor($event);" (cpToggleChange)="onColorChangeCpToggleChange($event)">
      </span>
    </div>

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

      <button placement="top" ngbTooltip="f" class="btn  " (click)="utils.toggleFullscreen()">
        <i *ngIf="!utils.isFullscreen()" class="fal fa-expand-arrows-alt"></i>
        <i *ngIf="utils.isFullscreen()" class="fal fa-compress-arrows-alt"></i>
        <!-- {{utils.isFullscreen() ? '退出全屏' : '全屏'}} -->
        <ng-container i18n>{utils.isFullscreen() ? 'true' : 'false', select, true {退出全屏} false {全屏}}</ng-container>
      </button>

      <button placement="top" ngbTooltip="d" class="btn " type="button" (click)="editorRef?.editor?.bestFit()">
        <i class="ti-layout-slider pdd-right-5"></i>
        <span i18n>居中</span>
      </button>
      <label class="btn  scale">{{editorRef?.editor?.getScale().x | percent}}</label>

      <button placement="top" ngbTooltip="r" class="btn " 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" placement="top" i18n-ngbTooltip ngbTooltip="快捷键: 1-填色;  2-修改map;  3-原始上色图; 4-check" class="btn    dropdown-toggle"
          data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fal fa-bring-forward pr-1"></i>
          <ng-container i18n>切换编辑</ng-container>:
          <!-- {{isNumberEdit ? '上色' : '' }} -->{isNumberEdit ? 'true' : 'false', select, true {上色} false {} }
          <!-- {{isMapEdit ? '修改Map' : '' }} -->{isMapEdit ? 'true' : 'false', select, true {修改Map} false {} }
          <!-- {{isOrderEdit ? '填色顺序' : '' }} -->
          <!-- {{isRawColoredLayer ? '原始上色图' : '' }} -->{isRawColoredLayer ? 'true' : 'false', select, true {原始上色图} false {} }
          {{isCheckEdit ? 'check' : '' }}
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" [ngClass]="{'active' : isNumberEdit}"
            (click)="!isNumberEdit &&  switchLayer(editTypes.number)" href="javascript:void(0)">
            <i class="fal fa-palette "></i>
            <span i18n>上色</span>
          </a>
          <a class="dropdown-item" [ngClass]="{'active' : isMapEdit}" (click)="!isMapEdit && switchLayer(editTypes.map)"
            href="javascript:void(0)">
            <i class="fal fa-highlighter "></i>
            <span i18n>修改Map</span>
          </a>
          <!-- <a class="dropdown-item" [ngClass]="{'active' : isOrderEdit}"
            (click)="!isOrderEdit && switchLayer(editTypes.order)" href="javascript:void(0)">
            <i class="far fa-sort-alpha-down "></i>
            <span>编辑填色顺序</span>
          </a> -->
          <a class="dropdown-item" [ngClass]="{'active' : isRawColoredLayer}"
            (click)="!isRawColoredLayer && switchLayer(editTypes.rawColored)" href="javascript:void(0)">
            <i class="fab fa-old-republic"></i>
            <span i18n>原始上色图</span>
          </a>
          <a class="dropdown-item" [ngClass]="{'active' : isCheckEdit}"
            (click)="!isCheckEdit && switchLayer(editTypes.check)" href="javascript:void(0)">
            <i class="far fa-check"></i>
            <span>check</span>
          </a>
        </div>
      </div>

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




<!--number edit color list-->
<div *ngIf="isNumberEdit" class="number-edit-colors">
    <div class="ms-2">
      <ng-container i18n>颜色数</ng-container>: {{numberEditLayer?.colorSum.length}} &nbsp;&nbsp; <ng-container i18n>已排序</ng-container>: {{numberEditLayer?.ordered.length}}
    </div>
  <div class="number-edit-colors-inner noselect" *ngIf="numberEditLayer?.colorSum">

    <!--color-list-->
    <div ngSortable (onEnd)="numberEditLayer?.moveOrderedItem($event.oldIndex, $event.newIndex)">
      <art-color-box *ngFor="let item of numberEditLayer?.ordered; let i=index" [orderDirection]=0 [data]="item"
        [colorInt]="numberEditLayer?.colorInt" [text]="numberEditLayer?.showUnorderMask? '' + (i+1) : null" 
        (onDblClick)="onBlinkByColor($event.cssColor, i)"
        (onClick)="onSelectColor($event.cssColor)" (onTrash)="numberEditLayer?.eraseByColor($event.cssColor)"
        (onLongPress)="onStartChangeColor($event.areas)" (onOrder)="numberEditLayer?.upOrDownColor($event.color)">
      </art-color-box>
    </div>

    <div>
      <ng-container i18n>未排序</ng-container>: {{numberEditLayer?.unordered.length}}
    </div>

    <!--color-list-->
    <art-color-box *ngFor="let item of numberEditLayer?.unordered;" [orderDirection]=1 [data]="item"
      [colorInt]="numberEditLayer?.colorInt" (onDblClick)="onBlinkByColor($event.cssColor, -1)"
      (onClick)="onSelectColor($event.cssColor)" (onTrash)="numberEditLayer?.eraseByColor($event.cssColor)"
      (onLongPress)="onStartChangeColor($event.areas)" (onOrder)="numberEditLayer?.upOrDownColor($event.color)">
    </art-color-box>

  </div>

</div>


<!--order edit color list-->
<!-- <div *ngIf="isOrderEdit" class="number-edit-colors" style="width:200px;">
  <div class="number-edit-colors-inner noselect" *ngIf="orderEditLayer?.ordered">
    <div>
      已排序: {{orderEditLayer?.ordered.length}}
    </div>
    <div ngSortable (onEnd)="orderEditLayer?.moveOrderedItem($event.oldIndex, $event.newIndex)">
      <art-color-box *ngFor="let item of orderEditLayer?.ordered; let i=index" [orderDirection]=0 [data]="item"
        [colorInt]="orderEditLayer?.colorInt" [text]="'' + (i+1) " (onTrash)="orderEditLayer?.removeOrderedItem($event)"
        (onDblClick)="onBlinkByColor($event.cssColor)" (onClick)="onSelectColor($event.cssColor)">
      </art-color-box>
    </div>
    <div>
      未排序: {{orderEditLayer?.unordered.length}}
    </div>
    <art-color-box *ngFor="let item of orderEditLayer?.unordered" [data]="item" [orderDirection]=1
      (onDblClick)="onBlinkByColor($event.cssColor)">
    </art-color-box>
  </div>
</div> -->

<div *ngIf="isCheckEdit" class="number-edit-colors">
  <div class="p-1" [ngSwitch]="checkEditLayer.result">
    <ng-container i18n>检查结果</ng-container>：
    <span *ngSwitchCase="0" class="text-info">
      <strong i18n>检测中...</strong>
    </span>
    <span *ngSwitchCase="1" class="text-success">
      <strong i18n>合格</strong>
    </span>
    <span *ngSwitchCase="2" class="text-danger">
      <strong i18n>不合格</strong>
    </span>
  </div>
  <div class="p-1">
    <ng-container i18n>分辨率</ng-container>: {{checkEditLayer.page.width}}x{{checkEditLayer.page.height}}
  </div>
  <div class="p-1">
    <ng-container i18n>总区块</ng-container>: {{checkEditLayer?.sortedAreaList.length}}
  </div>
  <div class="p-1 ">
    <ng-container i18n>小区块</ng-container>: <strong>{{checkEditLayer?.smallAreas.length}}</strong> (<ng-container i18n>最多允许</ng-container>:{{N}})
  </div>
  <div class="p-1" [ngClass]="{'text-danger': checkEditLayer.noCenterAreas.length > 0}">
    <ng-container i18n>无效小区块</ng-container>: {{checkEditLayer.noCenterAreas.length}}
  </div>
  <div class="p-1" [ngClass]="{'text-warning': (checkEditLayer.smallAreas.length - checkEditLayer.noCenterAreas.length) > 0}">
    <ng-container i18n>有效小区块</ng-container>: {{checkEditLayer.smallAreas.length - checkEditLayer.noCenterAreas.length}}
  </div>
  <div class="p-1">
    <ng-container i18n>小区块标准</ng-container>：R <= {{R}}
  </div>
  <div class="p-1 text-primary">
    <ng-container i18n>疑似未闭合线条:</ng-container> {{checkEditLayer.noCloseLines.length}}
  </div>
</div>

<div *ngIf="isMarkEdit" class="number-edit-colors">

  <div class="number-edit-colors-inner noselect mt-1" *ngIf="markEditLayer?.marks">
    <div class="mb-1"><strong>标注: {{markEditLayer.marks.length}}个</strong></div>
    <ng-container *ngFor="let mark of markEditLayer.marks; let i=index">
      <div class="d-flex flex-row align-items-start mb-2" [ngClass]="{'border border-danger': markEditLayer.curMarkIdx == i}">
        <span class="me-1">{{i+1}}.</span>
        <textarea nz-input nzAutosize placeholder="请输入标注" [ngModel]="markEditLayer.getMarkNote(i)" 
          (ngModelChange)="markEditLayer.setMarkNote(i, $event)" (focus)="onMarkItemFocus(i)" (blur)="onMarkItemBlur()">
        </textarea>
      </div>
    </ng-container>
  </div>

</div>


<div class="toolbar-right">
  <ng-container *ngIf="isNumberEdit || isMapEdit">
    <div *ngIf="numberEditLayer" class="right-color-picker">
      <span [style.background]="numberEditLayer?.color" [cpToggle]="true" [cpDialogDisplay]="'inline'"
        [cpUseRootViewContainer]="true" [cpAlphaChannel]="'disabled'" [(colorPicker)]="numberEditLayer.color"></span>
    </div>

    <!--区域列表 fillarea-list-->
    <div class="area-list shadow-sm" *ngIf="isMapEdit || isNumberEdit">
      <div class="area-list-header">
        <div class="p-2" *ngIf="isMapEdit">
          <ng-container i18n>总区块数</ng-container>：{{mapEditLayer?.sortedAreaList.length}}
        </div>
        <div class="p-2" *ngIf="isNumberEdit">
          <ng-container i18n>未填色区块</ng-container>：{{numberEditLayer?.uncoloredAreas.length}} / {{numberEditLayer?.progress?.total}}
        </div>
        <div>
          <button class="btn  " (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 && isNumberEdit">
        <div class="area-item" *ngFor="let area of numberEditLayer?.uncoloredAreas" [style.background]="area.colorRgba"
          (click)="focusToArea(area)">
          {{area.count}}
        </div>
      </ng-container>
      <ng-container *ngIf="showAreaList && isMapEdit">
        <div class="area-item" *ngFor="let area of mapEditLayer?.sortedAreaList" [style.background]="area.colorRgba"
          (click)="focusToArea(area)">
          {{area.count}}
        </div>
      </ng-container>
    </div>
  </ng-container>

  <ng-container *ngIf="isCheckEdit">
    <div class="area-list shadow-sm">
      <div class="area-list-header">
        <div class="p-2">
          <ng-container i18n>小区块数</ng-container>：{{checkEditLayer?.smallAreas.length}}
        </div>
        <div>
          <button class="btn  " (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 checkEditLayer?.smallAreas" [style.background]="area.colorRgba"
          (click)="focusToArea(area)">
          {{area.count}}
        </div>
      </ng-container>
    </div>
  </ng-container>
</div>

<div class="loading" *ngIf="isLoading">
  <nz-spin nzSimple nzSize="large"></nz-spin>
  <div class="text-center">
    <ng-container i18n>加载中...</ng-container> {{loadingProgress?.loaded | dataSize}}
  </div>
</div>


<!--image-color-picker-->
<art-color-picker *ngIf="showImageColorPicker" [ngClass]="{'d-none': !isNumberEdit}"
  [image]="dataInput?.rawColored || dataInput?.special" (onClose)="showImageColorPicker=false;"
  (onPickColor)="numberEditLayer.color=$event"></art-color-picker>

<!--art-meta edit-->
<ng-template #meta let-modal="modalRef">
  <art-meta [showMainCategory]="true" (onSuccess)="modal.close(); onMetaSuccess($event)" (onCancel)="modal.close()">
  </art-meta>
</ng-template>


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

<!--update-modal-->
<ng-template #update_raw let-modal="modalRef">
  <art-play-update [domain]="domains.raw" [dataInput]="dataInput"
    (data)="onUpdateConfirmed($event); modal.close('confirmed');" (cancel)="modal.close('canceled')">
  </art-play-update>
</ng-template>

<ng-template #update_rawColored let-modal="modalRef">
  <art-play-update [domain]="domains.rawColored" [dataInput]="dataInput"
    (data)="onUpdateConfirmed($event); modal.close('confirmed');" (cancel)="modal.close('canceled')">
  </art-play-update>
</ng-template>

<ng-template #update_special let-modal="modalRef">
  <art-play-update [domain]="domains.special" [dataInput]="dataInput"
    (data)="onUpdateConfirmed($event); modal.close('confirmed');" (cancel)="modal.close('canceled')">
  </art-play-update>
</ng-template>




<!--color-merge-modal-->
<ng-template #color_merge_modal let-modal="modalRef">
  <art-color-merge [colorMap]="numberEditLayer?.colorMap" (cancel)="modal.close('xx')"
    (update)="this.numberEditLayer.updateColorMap($event); modal.close('success')"></art-color-merge>
</ng-template>