Commit 5c94e0b4 authored by 李维's avatar 李维

dev commit

parent 5c63c1e3
<nz-form-item>
<nz-form-label [nzSpan]="2" >左上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >中上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >右上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightTop')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftMiddle')"></app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="2" >右中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightMiddle')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >中下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightBottom')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
\ No newline at end of file
<div class="content-border">
<nz-form-item>
<nz-form-label [nzSpan]="2" >左上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >中上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >右上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightTop')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftMiddle')"></app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="2" >右中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightMiddle')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >中下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightBottom')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
\ No newline at end of file
.content-border {
width: 100%;
height: 100%;
border-radius: 0.5rem;
min-width: 1200px;
border: 2px solid #ddd;
}
\ No newline at end of file
<div class="p-image-children-editor">
<div style="border-right: 2px solid #ddd;" class="clearfix">
<div style="float: left; width: 20%; border-right: 2px solid #ddd;" class="clearfix">
<!-- 全局音频素材 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<div style="float: left;">
......@@ -10,223 +11,216 @@
</div>
</div>
<div nzAlign="middle">
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<div style="position: relative; margin-bottom: 5px;">
<h3>题号</h3>
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.NO" (blur)="autoSave()" />
</div>
<div style="position: relative; margin-bottom: 5px;">
<h3>课件标题</h3>
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.mainText" (blur)="autoSave()" />
</div>
<div style="position: relative; margin-bottom: 5px;">
<h3>标题发音</h3>
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.mainTextAudio" (audioUploaded)="onAudioUploadSuccess($event, bgItem,'mainTextAudio')" > </app-audio-recorder>
</div>
</div>
</div>
<div nzAlign="middle">
<!-- 标题以及题号 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<div style="position: relative; margin-bottom: 5px;">
<h3>左侧单词</h3>
<div style="display: flex; ">
<div style="flex: 1">
音频
<nz-form-item>
<nz-form-control [nzSpan]="8" style="padding: 0 5px; border-right: 1px dashed #ccc;">
<div style="position: relative; margin-bottom: 5px;">
<h3 style="text-align: left;">题号</h3>
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.NO" (blur)="autoSave()" />
</div>
<div style="flex: 4">
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.wordLeft_audio_url" (audioUploaded)="onAudioUploadSuccess($event, bgItem, 'wordLeft_audio_url')" > </app-audio-recorder>
<div style="position: relative; margin-bottom: 5px;">
<h3 style="text-align: left;">课件标题</h3>
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.mainText" (blur)="autoSave()" />
</div>
</div>
</div>
<div style="position: relative;">
<div style="display: flex; ">
<div style="flex: 1">
文字
</div>
<div style="flex: 4">
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.wordLeft_text" (blur)="autoSave()" />
<div style="position: relative; margin-bottom: 5px;">
<h3 style="text-align: left;">标题发音</h3>
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.mainTextAudio" (audioUploaded)="onAudioUploadSuccess($event, bgItem,'mainTextAudio')" > </app-audio-recorder>
</div>
</div>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="6" style="padding: 0 5px; border-right: 1px dashed #ccc;">
<div style="position: relative; margin-bottom: 5px;">
<h3 style="text-align: left;">左侧单词</h3>
<div style="display: flex; ">
<div style="flex: 1">
音频
</div>
<div style="flex: 4">
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.wordLeft_audio_url" (audioUploaded)="onAudioUploadSuccess($event, bgItem, 'wordLeft_audio_url')" > </app-audio-recorder>
</div>
</div>
</div>
<div style="position: relative;">
<div style="display: flex; ">
<div style="flex: 1">
文字
</div>
<div style="flex: 4">
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.wordLeft_text" (blur)="autoSave()" />
</div>
</div>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8" style="padding: 0 5px;" >
<div style="position: relative; margin-bottom: 5px;">
<h3 style="text-align: left;">右侧单词</h3>
<div style="display: flex; ">
<div style="flex: 1">
音频
</div>
<div style="flex: 4">
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.wordRight_audio_url" (audioUploaded)="onAudioUploadSuccess($event, bgItem, 'wordRight_audio_url')" > </app-audio-recorder>
</div>
</div>
</div>
<div style="position: relative;">
<div style="display: flex; ">
<div style="flex: 1">
文字
</div>
<div style="flex: 4">
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.wordRight_text" (blur)="autoSave()" />
</div>
</div>
</div>
</nz-form-control>
</nz-form-item>
</div>
</div>
<!-- 选区 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<div style="position: relative; margin-bottom: 5px;">
<h3>右侧单词</h3>
<div style="display: flex; ">
<div style="flex: 1">
音频
</div>
<div style="flex: 4">
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.wordRight_audio_url" (audioUploaded)="onAudioUploadSuccess($event, bgItem, 'wordRight_audio_url')" > </app-audio-recorder>
<h3>选区</h3>
<div>
<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>
<div style="position: relative;">
<div style="display: flex; ">
<div style="flex: 1">
文字
</div>
<div style="flex: 4">
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.wordRight_text" (blur)="autoSave()" />
<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>
<h5 style="border-top: 2px solid #ddd;">背景图:</h5>
<div style="width: 200px;margin: auto;">
<div class="bg-box">
<app-upload-image-with-preview [picUrl]="bgItem.url" (imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div>
</div>
</div>
</div>
<div nzAlign="middle" class="clearfix">
<div class="img-box clearfix" *ngFor="let it of hotZoneArr; let i = index" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<!-- 选区设置 -->
<div nzAlign="middle" style="border-bottom: 2px solid #DDD;">
<div *ngFor="let it of hotZoneArr; let i = index" class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<div style="position: relative; margin-bottom: 5px;">
<h3>选区-{{ i + 1 }}</h3>
<div style="display: flex; ">
<div style="flex: 1">
音频
</div>
<div style="flex: 4">
<app-audio-recorder id="index_audio_1" [audioUrl]="it.audio_url" (audioUploaded)="onAudioUploadSuccess($event, it, null)" > </app-audio-recorder>
</div>
</div>
</div>
<div style="position: relative; margin-bottom: 5px;">
<div style="display: flex; ">
<div style="flex: 1">
文字
</div>
<div style="flex: 4">
<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="autoSave()" />
</div>
</div>
</div>
<div style="position: relative;">
<button style="float: right; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteItem($event, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</div>
<div style="float: right; display: flex; padding-left: 10px;">
<!-- <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($event, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button> -->
<nz-form-item>
<nz-form-control [nzSpan]="8" style="padding: 0 5px;">
<div style="float: left; margin-right: 10px;">
音频
</div>
<div style="float: left;">
<app-audio-recorder id="index_audio_1" [audioUrl]="it.audio_url" (audioUploaded)="onAudioUploadSuccess($event, it, null)" > </app-audio-recorder>
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8" style="padding: 0 5px;">
<div style="float: left; margin-right: 10px;">
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="autoSave()" />
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8" style="padding: 0 5px;">
<button style="float: right; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteItem($event, i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</nz-form-control>
</nz-form-item>
</div>
</div>
<div nz-col nzSpan="5" nzOffset="1">
<div class="bg-box">
<button nz-button nzType="dashed" (click)="addBtnClick()" class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
Add hot zone
</button>
</div>
<div>
<button nz-button nzType="dashed" (click)="addBtnClick()" class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加选区
</button>
</div>
</div>
</div>
<div style="float: left; width: 80%; border-bottom: 2px solid #ddd;">
<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="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>
<h5 style="border-top: 2px solid #ddd;">背景图:</h5>
<div style="width: 200px;margin: auto;">
<div class="bg-box">
<app-upload-image-with-preview [picUrl]="bgItem.url" (imageUploaded)="onBackgroundUploadSuccess($event)">
</app-upload-image-with-preview>
</div>
</div>
<div style="border-bottom: 2px solid #DDD;"></div>
<h3>题目配置</h3>
<div nzAlign="middle" *ngFor="let item of bgItem.questions; let QI = index">
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px; ">
<div>
<div style="float: left; margin-right: 10px;">
<div>No.</div>
<div style="height: 32px; padding: 5px 10px;">
{{QI+1}}
</div>
</div>
<div style="float: left; margin-right: 10px;">
<div>组合数</div>
<div style="float: left;">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</div>
</div>
<div style="float: left; margin-left: 10px;">
<div>组合</div>
<div>
<nz-select *ngFor="let part of item.combin; let i = index" [(ngModel)]="item.combin[i]" style="float: left; margin-right: 5px;" (ngModelChange)="handlePartChange($event, item, i)">
<nz-option nzValue="-1" [nzLabel]="'L-' + bgItem.wordLeft_text"></nz-option>
<nz-option nzValue="-2" [nzLabel]="'R-' + bgItem.wordRight_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneArr; let j = index;" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.text"></nz-option>
</nz-select>
</div>
</div>
<div style="float: left; margin-left: 10px;">
<div>预览</div>
<div style="background-color: #ccc; height: 32px; padding: 5px 10px;">
{{getQuestionWord(item.combin)}}
</div>
</div>
<div style="float: left; margin-left: 20px;">
<div>发音</div>
<div>
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, item, null)" > </app-audio-recorder>
</div>
</div>
<div style="float: right;">
<div>题序/删除</div>
<!-- 题目配置 -->
<div nzAlign="middle">
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<h3>题目配置</h3>
<div nzAlign="middle" *ngFor="let item of bgItem.questions; let QI = index">
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px; ">
<div>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp($event, QI)"
[disabled]="QI==0">
<i nz-icon nzType="up" nzTheme="outline"></i>
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown($event, QI)"
[disabled]="QI==bgItem.questions.length-1">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteQuestionItem($event, QI)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
<div style="float: left; margin-right: 10px;">
<div>No.</div>
<div style="height: 32px; padding: 5px 10px;">
{{QI+1}}
</div>
</div>
<div style="float: left; margin-right: 10px;">
<div>组合数</div>
<div style="float: left;">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</div>
</div>
<div style="float: left; margin-left: 10px;">
<div>组合</div>
<div>
<nz-select *ngFor="let part of item.combin; let i = index" [(ngModel)]="item.combin[i]" style="float: left; margin-right: 5px;" (ngModelChange)="handlePartChange($event, item, i)">
<nz-option [nzValue]="-1" [nzLabel]="'L-' + bgItem.wordLeft_text"></nz-option>
<nz-option [nzValue]="-2" [nzLabel]="'R-' + bgItem.wordRight_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneArr; let j = index;" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.text"></nz-option>
</nz-select>
</div>
</div>
<div style="float: left; margin-left: 10px;">
<div>预览</div>
<div style="background-color: #ccc; height: 32px; padding: 5px 10px;">
{{getQuestionWord(item.combin)}}
</div>
</div>
<div style="float: left; margin-left: 20px;">
<div>发音</div>
<div>
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, item, null)" > </app-audio-recorder>
</div>
</div>
<div style="float: right;">
<div>题序/删除</div>
<div>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemUp($event, QI)"
[disabled]="QI==0">
<i nz-icon nzType="up" nzTheme="outline"></i>
上移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="dashed" (click)="handleMoveItemDown($event, QI)"
[disabled]="QI==bgItem.questions.length-1">
<i nz-icon nzType="down" nzTheme="outline"></i>
下移
</button>
<button style="flex:1; margin-bottom: 5px;" nz-button nzType="danger" (click)="deleteQuestionItem($event, QI)">
<i nz-icon nzType="delete" nzTheme="outline"></i>
删除
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="padding-left: 10px; padding-bottom: 10px;">
<button nz-button nzType="dashed" (click)="addQustion()" [disabled]="bgItem.questions.length==8">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加题目
</button>
<div style="padding-left: 10px; padding-bottom: 10px;">
<button nz-button nzType="dashed" (click)="addQustion()" [disabled]="bgItem.questions.length==8">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加题目
</button>
</div>
</div>
</div>
<nz-divider></nz-divider>
</div>
\ No newline at end of file
......@@ -346,6 +346,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
number: 2,
combin: [0,0]
})
this.autoSave()
}
handleCombinLength(item) {
......@@ -561,8 +562,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
handlePartChange(e, item, index) {
item.combin[index] = e
console.log(item.combin, index)
item.combin[index] = Number(e)
this.autoSave()
}
hideAllLineDash() {
......
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import { defaultData } from '../../assets/default/formData/defaultData.js'
@Component({
selector: 'app-form',
......@@ -40,10 +41,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {};
}
if ( !this.item.contentObj ) {
this.item.contentObj = {
"version": "1.0",
"dataKey": "DataKey_YM4-11",
};
this.item.contentObj = {};
}
this.init();
this.refresh();
......@@ -67,39 +65,19 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
init() {
if (this.item.contentObj.dataArray) {
this.dataArray = this.item.contentObj.dataArray;
if(typeof(this.item.contentObj.hotZoneItemArr) == undefined || typeof(this.item.contentObj.bgItem) == undefined || typeof(this.item.contentObj.bgImages) == undefined || this.item.contentObj.version != defaultData.version) {
console.log("Init defalue data")
this.item.contentObj = defaultData
this.hotZoneItemArr = defaultData.hotZoneItemArr
this.bgItem = defaultData.bgItem
this.bgImages = defaultData.bgImages
} else {
this.dataArray = this.getDefaultPicArr();
this.item.contentObj.dataArray = this.dataArray;
}
if (this.item.contentObj.hotZoneItemArr) {
console.log("Data loaded")
this.hotZoneItemArr = this.item.contentObj.hotZoneItemArr;
} else {
this.hotZoneItemArr = this.getDefaultPicArr();
this.item.contentObj.hotZoneItemArr = this.hotZoneItemArr;
}
if (this.item.contentObj.bgItem) {
this.bgItem = this.item.contentObj.bgItem;
} else {
this.bgItem = {
url: 'assets/play/hotZooCard/defalut_bg.png'
}
this.item.contentObj.bgItem = this.bgItem;
}
if (this.item.contentObj.bgImages) {
this.bgImages = this.item.contentObj.bgImages;
} else {
this.bgImages = {
leftTop: '', middleTop: '', rightTop: '', leftMiddle: '', rightMiddle: '', leftBottom: '', middleBottom: '', rightBottom: '',
}
this.item.contentObj.bgImages = this.bgImages;
}
}
cardItemData(){
......
......@@ -42,8 +42,7 @@ import { Subject } from "rxjs";
import { debounceTime, map, takeWhile, retry } from "rxjs/operators";
import * as _ from "lodash";
import TWEEN from "@tweenjs/tween.js";
import defauleFormData from '../../assets/default/formData/defaultData.js'
import { element } from 'protractor';
import { demoData as defaultData } from '../../assets/default/formData/defaultData.js'
const zIndexMap = {
mainBackground: 0,
......@@ -341,11 +340,11 @@ export class PlayComponent implements OnInit, OnDestroy {
}
})
element.originX = element.ref.x - 960 * this.g_mapScale / 2
element.originY = element.ref.y - 155 * this.g_mapScale / 2
let contentImageWidth = 0
let element_t = this.g_cartoon.createCartoonElementImageFunc("window-image-container", this.g_formData.bgItem.url, (w, h)=>{
let s = Math.min( 960 / w, 155 / h)
contentImageWidth = (w * s) / 2
return {
sx: s,
sy: s
......@@ -357,6 +356,9 @@ export class PlayComponent implements OnInit, OnDestroy {
}
})
element.originX = element.ref.x - contentImageWidth * element.ref.scaleX
element.originY = element.ref.y - 155 * this.g_mapScale / 2
element.ref.addChild(element_t.ref)
this.render(element.ref)
......@@ -379,21 +381,19 @@ export class PlayComponent implements OnInit, OnDestroy {
element.initY = element.ref.y
element.margin = 0
element.hotZooIndex = index;
element.ref.alpha = 0;
let elementDrag = null
elementDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-"+index, " " + item.media.text + " ", "MMTextBook-Bold", "#000", 48 * this.g_mapScale, -500, -500)
this.render(element.ref)
this.render(elementDrag.ref)
this.subscribeMapDragEvent(element.id, ()=>{
element.ref.alpha = 0.5;
item.media.audio_url && this.g_cartoon.playAudio(item.media.audio_url)
console.log(item.media.audio_url)
}, ()=>{
elementDrag.ref.x = this.g_clickX,
elementDrag.ref.y = this.g_clickY
}, ()=>{
element.ref.alpha = 1;
elementDrag.ref.x = elementDrag.initX,
elementDrag.ref.y = elementDrag.initY
this.m_elementDraged = element.id;
......@@ -876,9 +876,9 @@ export class PlayComponent implements OnInit, OnDestroy {
// 初始化默认数据
// ----------------------------------
initDefaultData() {
if ( Object.keys(this.g_formData).length===0 || this.g_formData.version != defauleFormData.version ) {
this.g_formData = defauleFormData;
console.log("Use default data.")
if ( Object.keys(this.g_formData).length===0 || this.g_formData.version != defaultData.version ) {
this.g_formData = defaultData;
console.log("Use default data.", this.g_formData)
}
}
......
export default {
export const defaultData = {
"version": "1.0",
"dataKey": "DataKey_YM4-11",
"dataArray": [
......@@ -8,7 +8,7 @@ export default {
],
"bgItem": {
"url": "demo",
"url": "",
"questions": [
],
......@@ -29,4 +29,203 @@ export default {
"bgImages": {
"leftTop": '', "middleTop": '', "rightTop": '', "leftMiddle": '', "rightMiddle": '', "leftBottom": '', "middleBottom": '', "rightBottom": '',
}
}
export const demoData = {
version: "1.0",
dataKey: "DataKey_YM4-11",
dataArray: [],
hotZoneItemArr: [
{
index: 0,
rect: {
x: 8.769469387755102,
y: 20.163265306122447,
width: 72.12244897959184,
height: 39.5029387755102,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_1.png",
text: "p",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 1,
rect: {
x: 14.19804081632653,
y: 96.89069387755102,
width: 54.285714285714285,
height: 31.020408163265305,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_2.png",
text: "t",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 2,
rect: {
x: 138.27967346938775,
y: 57.339673469387755,
width: 54.285714285714285,
height: 31.020408163265305,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_3.png",
text: "d",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 3,
rect: {
x: 246.8511020408163,
y: 20.115183673469385,
width: 54.285714285714285,
height: 31.020408163265305,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_4.png",
text: "w",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 4,
rect: {
x: 235.99395918367347,
y: 96.11518367346939,
width: 54.285714285714285,
height: 31.020408163265305,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_5.png",
text: "st",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 5,
rect: {
x: 360.85110204081633,
y: 59.714285714285715,
width: 89.95918367346938,
height: 32.52334693877551,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_6.png",
text: "eam",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 6,
rect: {
x: 496.565387755102,
y: 20.115183673469385,
width: 54.285714285714285,
height: 31.020408163265305,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_7.png",
text: "o",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 7,
rect: {
x: 487.2592653061224,
y: 101.59183673469387,
width: 77.55102040816327,
height: 30.196816326530612,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_8.png",
text: "one",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 8,
rect: {
x: 735.4225306122448,
y: 21.714285714285715,
width: 79.87755102040816,
height: 32.52334693877551,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_9.png",
text: "m",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
{
index: 9,
rect: {
x: 723.0143673469388,
y: 93.83673469387755,
width: 94.61224489795919,
height: 41.05395918367347,
},
media: {
image_url: "assets/play/hotZooCard/bg_70_40_10.png",
text: "eet",
type: "text",
audio_url: "",
},
scale: 0.7755102040816326,
},
],
bgItem: {
url: "assets/play/demo.png",
questions: [],
NO: "C",
mainText: "Listen, circle and write.",
mainTextAudio: "",
wordLeft_text: "ear",
wordLeft_audio_url: "",
wordRight_text: "pl",
wordRight_audio_url: "",
questions: [
{number: 2, combin: [0, -1]},
{number: 2, combin: [0, -1]}
],
rect: {
x: 43.691666666666606,
y: 0,
width: 1088.6166666666668,
height: 189.875,
},
},
bgImages: {
leftTop: "",
middleTop: "",
rightTop: "",
leftMiddle: "",
rightMiddle: "",
leftBottom: "",
middleBottom: "",
rightBottom: "",
},
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment