custom-hot-zone-2.component.html 14.6 KB
<div class="p-image-children-editor">

  <div style=" margin: 0 auto; width: 800px;">
    <h5 style="margin-left: 2.5%;">预览:</h5>
    <div id="canvas-container" style="margin:5px;">
      <div class="preview-box" #wrap style="margin-bottom: 20px">
        <canvas id="canvas" #canvas></canvas>
      </div>
    </div>

    

    <div style="width: 100%;">
      <!-- <div class="bg-box">
        <app-upload-image-with-preview [picUrl]="bgItem.url" (imageUploaded)="onBackgroundUploadSuccess($event)">
        </app-upload-image-with-preview>
      </div> -->

      <div style="display: flex; margin-bottom: 28px;">
        <div style="flex: 1;" >
          旋转:
        </div>
        <div style="flex: 5;" >
          <nz-select [(ngModel)]="currentSelected" nzAllowClear style="min-width: 200px;" >
            <nz-option-group nzLabel="左侧">
              <nz-option *ngFor="let it of hotZoneArr_left; let i = index" [nzValue]="it" [nzLabel]="(i+1) + ' - ' + it.text"></nz-option>
            </nz-option-group>
            <nz-option-group nzLabel="左侧">
              <nz-option *ngFor="let it of hotZoneArr_right; let i = index" [nzValue]="it" [nzLabel]="(i+1) + ' - ' + it.text"></nz-option>
            </nz-option-group>
          </nz-select>
        </div>
      </div>

      <div *ngIf="currentSelected" style="display: flex; margin-bottom: 28px;">
        <div style="flex: 5; display: flex;" >
          <div style="flex:2; margin-right: 5px;">
            <nz-input-group nzAddOnBefore="X:">
              <nz-input-number [(ngModel)]="currentSelected.x" (ngModelChange)="autoSave()" ></nz-input-number>
            </nz-input-group>
          </div>
          <div style="flex:2; margin-right: 5px;">
            <nz-input-group nzAddOnBefore="Y:">
              <nz-input-number [(ngModel)]="currentSelected.y" (ngModelChange)="autoSave()" ></nz-input-number>
            </nz-input-group>
          </div>
          <div style="flex:2; margin-right: 10px;">
            <nz-input-group nzAddOnBefore="Rotation:" >
              <nz-input-number [nzMin]="-180" [nzMax]="180" [(ngModel)]="currentSelected.rotation" (ngModelChange)="autoSave()" ></nz-input-number>
            </nz-input-group>
          </div>
          <div style="flex:4;">
            <nz-slider [nzMin]="-180" [nzMax]="180" [(ngModel)]="currentSelected.rotation" (nzOnAfterChange)="autoSave()" ></nz-slider>
          </div>
        </div>
      </div>
      <div style="text-align: center;">
        <button nz-button nzType="primary" [nzSize]="'small'" nzShape="round" (click)="saveClick()"
          [disabled]="!hotZoneChanged">
          <i nz-icon type="save"></i>
          Save
        </button>
      </div>
    </div>
  </div>
  
  <div >
    <div nzAlign="middle">
      <div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
        <div style="float: left; width: 100px;">
          <h3>题号</h3>
          <input type="text" nz-input placeholder="" [(ngModel)]="bgItem.title.NO" (blur)="autoSave()" />
        </div>
        <div style="float: left; width: 300px; margin-left: 50px;">
          <h3>课件标题</h3>
          <input type="text" nz-input placeholder="" [(ngModel)]="bgItem.title.mainText" (blur)="autoSave()" />
        </div>
        <div style="float: left; width: 300px; margin-left: 50px;">
          <h3>标题发音</h3>
          <app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.title.mainTitleAudio" (audioUploaded)="onUploadSuccessByItem($event, bgItem.title,'mainTitleAudio', 'audio')" > </app-audio-recorder>
        </div>
        <div style="float: left; width: 300px;">
          <h3>白板标题</h3>
          <input type="text" nz-input placeholder="" [(ngModel)]="bgItem.title.boardTitle" (blur)="autoSave()" />
        </div>
        <div style="float: left; width: 300px; margin-left: 50px;">
          <h3>白板标题发音</h3>
          <app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.title.boardTitleAudio" (audioUploaded)="onUploadSuccessByItem($event, bgItem.title,'boardTitleAudio', 'audio')" > </app-audio-recorder>
        </div>
        <div style="float: left; width: 300px; margin-left: 50px;">
          <h3>题目长音频</h3>
          <app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.title.mainAudio" (audioUploaded)="onUploadSuccessByItem($event, bgItem.title,'mainAudio', 'audio')" > </app-audio-recorder>
        </div>
      </div>
    </div>

    <div style=" float: left; width: 50%; border-right: 1px solid #DDD;" >
      <div nzAlign="middle">
        <div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
          <div style="float: left; display: flex;">
            <div style="flex:1">
              <h3>左侧词组</h3>
            </div>
            <div style="flex:1" style="margin-left: 10px;">
              <app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.title.leftAudio" (audioUploaded)="onUploadSuccessByItem($event, bgItem.title, 'leftAudio', 'audio')" > </app-audio-recorder>
            </div>
            <div style="flex:1" style="margin-left: 10px;">
              <input type="text" nz-input placeholder="" [(ngModel)]="bgItem.title.leftText" (blur)="autoSave()" />
            </div>
          </div>
        </div>
      </div>
      <div class="img-box clearfix" *ngFor="let it of hotZoneArr_left; let i = index" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
        <div>
          <h2> 词组-{{ i + 1 }}</h2>
        </div>
        <div style="position: relative; display: flex; ">
          <div style="flex: 6; display: flex; flex-direction: column;">
            <div style="flex: 1; display: flex; margin-bottom: 28px;" >
              <div style="flex: 1;" >
                文字:
              </div>
              <div style="flex: 5;" >
                <input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="autoSave()" />
              </div>
            </div>
            <div style="flex: 1; display: flex; margin-bottom: 28px;">
              <div style="flex: 1;" >
                音频:
              </div>
              <div style="flex: 5;" >
                <app-audio-recorder [audioUrl]="it.audio_url" (audioUploaded)="onUploadSuccessByItem($event, it, 'audio_url', 'audio')" ></app-audio-recorder>
              </div>
            </div>
          </div>
          <div style="flex:1; margin-left: 10px;">
            图片
          </div>
          <div style="flex:5">
            <div style="width:200px">
              <app-upload-image-with-preview [picUrl]="it.image_url" (imageUploaded)="onUploadSuccessByItem($event, it, 'image_url', 'image')"></app-upload-image-with-preview>
            </div>
          </div>
        </div>
        
        <div style="flex: 1; display: flex; margin-bottom: 28px;">
          <div style="flex: 4 ; display: flex;" >
            <div style="flex:2; margin-right: 5px;">
              <nz-input-group nzAddOnBefore="X:">
                <nz-input-number [(ngModel)]="it.x" (ngModelChange)="autoSave()" ></nz-input-number>
              </nz-input-group>
            </div>
            <div style="flex:2; margin-right: 5px;">
              <nz-input-group nzAddOnBefore="Y:">
                <nz-input-number [(ngModel)]="it.y" (ngModelChange)="autoSave()" ></nz-input-number>
              </nz-input-group>
            </div>
            <div style="flex:2; margin-right: 10px;">
              <nz-input-group nzAddOnBefore="Rotation:" >
                <nz-input-number [nzMin]="-180" [nzMax]="180" [(ngModel)]="it.rotation" (ngModelChange)="autoSave()" ></nz-input-number>
              </nz-input-group>
            </div>
            <div style="flex:1;">
              <button style="flex:1; margin-bottom: 5px;" nz-button (click)="copyPositionData(it)">
                <i nz-icon nzType="copy" nzTheme="outline"></i>
                复制
              </button>
            </div>
            <div style="flex:1;">
              <button style="flex:1; margin-bottom: 5px;" (click)="showPasteModal(it)" nz-button>
                <i nz-icon nzType="form" nzTheme="outline"></i>
                黏贴
              </button>
            </div>
          </div>
          <div style="flex: 1 ; display: flex;" ></div>
        </div>

        <div style="float: right; display: flex; margin-top: 5px; margin-right: 40px; ">
          <!-- <button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp($event, i)"
            [disabled]="i==0">
            <i nz-icon nzType="up" nzTheme="outline"></i>
            上移
          </button>
          <button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown($event, i)"
            [disabled]="i==hotZoneArr.length-1">
            <i nz-icon nzType="down" nzTheme="outline"></i>
            下移
          </button> -->
          <button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteItem(hotZoneArr_left, i)">
            <i nz-icon nzType="delete" nzTheme="outline"></i>
            删除
          </button>
        </div>
      </div>
      <div *ngIf="hotZoneArr_left.length<4">
        <button nz-button nzType="dashed" (click)="addBtnClick(hotZoneArr_left)" class="add-btn" style="margin:0 auto" >
          <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
          新建词组
        </button>
      </div>
    </div>

    <div style=" float: left; width: 50%; border-left: 1px solid #DDD;" >
      <div nzAlign="middle">
        <div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
          <div style="float: left; display: flex;">
            <div style="flex:1">
              <h3>右侧词组</h3>
            </div>
            <div style="flex:1" style="margin-left: 10px;">
              <app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.title.rightAudio" (audioUploaded)="onUploadSuccessByItem($event, bgItem.title, 'rightAudio', 'audio')" > </app-audio-recorder>
            </div>
            <div style="flex:1" style="margin-left: 10px;">
              <input type="text" nz-input placeholder="" [(ngModel)]="bgItem.title.rightText" (blur)="autoSave()" />
            </div>
          </div>
        </div>
      </div>
      <div class="img-box clearfix" *ngFor="let it of hotZoneArr_right; let i = index" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
        <div>
          <h2> 词组-{{ i + 1 }}</h2>
        </div>
        <div style="position: relative; display: flex; ">
          <div style="flex: 6; display: flex; flex-direction: column;">
            <div style="flex: 1; display: flex; margin-bottom: 28px;" >
              <div style="flex: 1;" >
                文字:
              </div>
              <div style="flex: 5;" >
                <input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="autoSave()" />
              </div>
            </div>
            <div style="flex: 1; display: flex; margin-bottom: 28px;">
              <div style="flex: 1;" >
                音频:
              </div>
              <div style="flex: 5;" >
                <app-audio-recorder [audioUrl]="it.audio_url" (audioUploaded)="onUploadSuccessByItem($event, it, 'audio_url', 'audio')" ></app-audio-recorder>
              </div>
            </div>
          </div>

          <div style="flex:1; margin-left: 10px;">
            图片
          </div>
          <div style="flex:5">
            <div style="width:200px">
              <app-upload-image-with-preview [picUrl]="it.image_url" (imageUploaded)="onUploadSuccessByItem($event, it, 'image_url', 'image')"></app-upload-image-with-preview>
            </div>
          </div>
        </div>
        

        <div style="flex: 1; display: flex; margin-bottom: 28px;">
          <div style="flex: 4 ; display: flex;" >
            <div style="flex:2; margin-right: 5px;">
              <nz-input-group nzAddOnBefore="X:">
                <nz-input-number [(ngModel)]="it.x" (ngModelChange)="autoSave()" ></nz-input-number>
              </nz-input-group>
            </div>
            <div style="flex:2; margin-right: 5px;">
              <nz-input-group nzAddOnBefore="Y:">
                <nz-input-number [(ngModel)]="it.y" (ngModelChange)="autoSave()" ></nz-input-number>
              </nz-input-group>
            </div>
            <div style="flex:2; margin-right: 10px;">
              <nz-input-group nzAddOnBefore="Rotation:" >
                <nz-input-number [nzMin]="-180" [nzMax]="180" [(ngModel)]="it.rotation" (ngModelChange)="autoSave()" ></nz-input-number>
              </nz-input-group>
            </div>
            <div style="flex:1;">
              <button style="flex:1; margin-bottom: 5px;" nz-button (click)="copyPositionData(it)">
                <i nz-icon nzType="copy" nzTheme="outline"></i>
                复制
              </button>
            </div>
            <div style="flex:1;">
              <button style="flex:1; margin-bottom: 5px;" (click)="showPasteModal(it)" nz-button >
                <i nz-icon nzType="form" nzTheme="outline"></i>
                黏贴
              </button>
            </div>
          </div>
          <div style="flex: 1 ; display: flex;" ></div>
        </div>

        <div style="float: right; display: flex; margin-top: 5px; margin-right: 40px; ">
          <!-- <button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp($event, i)"
            [disabled]="i==0">
            <i nz-icon nzType="up" nzTheme="outline"></i>
            上移
          </button>
          <button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown($event, i)"
            [disabled]="i==hotZoneArr.length-1">
            <i nz-icon nzType="down" nzTheme="outline"></i>
            下移
          </button> -->
          <button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteItem(hotZoneArr_right, i)">
            <i nz-icon nzType="delete" nzTheme="outline"></i>
            删除
          </button>
        </div>
      </div>
      <div *ngIf="hotZoneArr_right.length<4">
        <button nz-button nzType="dashed" (click)="addBtnClick(hotZoneArr_right)" class="add-btn" style="margin:0 auto">
          <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
          新建词组
        </button>
      </div>
    </div>

  </div>
  <nz-divider></nz-divider>
  <div class="save-box">
  </div>

  <nz-modal [(nzVisible)]="showModalWindow" nzTitle="坐标粘贴" (nzOnCancel)="handlePasteCancle()" (nzOnOk)="handlePasteOk()" ng-paste="alert('d')">
    <textarea #pasteDataContainer rows="4" nz-input [(ngModel)]="pasteData"></textarea>
  </nz-modal>
</div>