Commit c1ee4838 authored by Chen Jiping's avatar Chen Jiping

fix:调整序号配置及显示

parent 178c75fb
...@@ -31,11 +31,11 @@ ...@@ -31,11 +31,11 @@
<nz-divider style="margin-top: 10px;"></nz-divider> <nz-divider style="margin-top: 10px;"></nz-divider>
<!--
<div style="margin-top: -20px; margin-bottom: 5px"> <div style="margin-top: -20px; margin-bottom: 5px">
<input type="text" nz-input [(ngModel)]="it.text" (ngModelChange)="changeText(it)"> <input type="text" nz-input [(ngModel)]="it.text" (ngModelChange)="changeText(it)">
</div> </div>
-->
</div> </div>
</div> </div>
......
...@@ -229,6 +229,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -229,6 +229,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
refreshHotZoneId() { refreshHotZoneId() {
for (let i = 0; i < this.hotZoneArr.length; i++) { for (let i = 0; i < this.hotZoneArr.length; i++) {
this.hotZoneArr[i].index = i; this.hotZoneArr[i].index = i;
this.hotZoneArr[i].text = i + 1;
if (this.hotZoneArr[i]) { if (this.hotZoneArr[i]) {
this.hotZoneArr[i].title = this.hotZoneArr[i].text; this.hotZoneArr[i].title = this.hotZoneArr[i].text;
......
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<br> <br>
<div nz-row> <div nz-row>
<div nz-col [nzSpan]="24"> <div nz-col [nzSpan]="24">
<nz-card [nzExtra]="actionAdd" [nzActions]="[actionSetting]" nzTitle="句子"> <nz-card nzTitle="句子">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="titleVal">标题</nz-form-label> <nz-form-label [nzSpan]="3" nzFor="titleVal">标题</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
</nz-form-item> </nz-form-item>
<div *ngFor="let data of item.sentenceArr; let i=index" style="padding: 0.5vw;" nz-col [nzXs]='24' [nzSm]='20' <div *ngFor="let data of item.sentenceArr; let i=index" style="padding: 0.5vw;" nz-col [nzXs]='24' [nzSm]='20'
[nzMd]='20' [nzLg]='20'> [nzMd]='20' [nzLg]='20'>
<nz-card nzTitle="句子-{{i+1}}" [nzHoverable]="true" [nzExtra]="actionDelSentence"> <nz-card nzTitle="句子-{{i+1}}" [nzHoverable]="true">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="3">所属序号</nz-form-label> <nz-form-label [nzSpan]="3">所属序号</nz-form-label>
<nz-form-control [nzSpan]="3"> <nz-form-control [nzSpan]="3">
...@@ -74,6 +74,7 @@ ...@@ -74,6 +74,7 @@
</div> </div>
</nz-form-control> </nz-form-control>
<!--
<nz-form-control [nzSpan]="12"> <nz-form-control [nzSpan]="12">
<button nz-button nzType="dashed" (click)="setIndexBtnClick(data)" style="margin-right: 10px"> <button nz-button nzType="dashed" (click)="setIndexBtnClick(data)" style="margin-right: 10px">
<i nz-icon nzType="tool" nzTheme="outline"></i> <i nz-icon nzType="tool" nzTheme="outline"></i>
...@@ -83,6 +84,7 @@ ...@@ -83,6 +84,7 @@
<i nz-icon nzType="delete" nzTheme="outline"></i>重置 <i nz-icon nzType="delete" nzTheme="outline"></i>重置
</button> </button>
</nz-form-control> </nz-form-control>
-->
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="3">音频</nz-form-label> <nz-form-label [nzSpan]="3">音频</nz-form-label>
...@@ -108,11 +110,13 @@ ...@@ -108,11 +110,13 @@
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</nz-card> </nz-card>
<!--
<ng-template #actionDelSentence> <ng-template #actionDelSentence>
<button nz-button nzType="danger" (click)="delSentence(item,i)"> <button nz-button nzType="danger" (click)="delSentence(item,i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除 <i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button> </button>
</ng-template> </ng-template>
-->
</div> </div>
</nz-card> </nz-card>
<ng-template #actionAdd> <ng-template #actionAdd>
......
...@@ -111,9 +111,44 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -111,9 +111,44 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.hotZoneItemArr = hotZoneItemArr; item.hotZoneItemArr = hotZoneItemArr;
let sentenceArr = item.sentenceArr;
let tempArr = [];
for(let i = 0; i < hotZoneItemArr.length; ++ i){
let hotZoneItem = hotZoneItemArr[i];
let sentence = this.find(hotZoneItem.key, sentenceArr);
tempArr.push(sentence);
}
item.sentenceArr = [...tempArr];
this.save(); this.save();
} }
private find(key, sentenceArr){
let sentence;
for(let i = 0; i < sentenceArr.length; ++ i){
if(key === sentenceArr[i].renderTo){
sentence = sentenceArr[i];
break;
}
}
if(!sentence){
sentence = getDefaultSentence();
sentence.renderTo = key;
}
return sentence;
}
addSentence(item) { addSentence(item) {
let sentence = getDefaultSentence(); let sentence = getDefaultSentence();
......
...@@ -49,7 +49,7 @@ export class Index { ...@@ -49,7 +49,7 @@ export class Index {
index.setScaleXY(this.scaleX); index.setScaleXY(this.scaleX);
index.refreshSize(); index.refreshSize();
index.x = 0; index.x = 0;
index.y = 0; index.y = (this.bg.height - index.getBoundingBox().height) / 2;
this.bg.addChild(index); this.bg.addChild(index);
} }
} }
\ No newline at end of file
...@@ -1137,9 +1137,9 @@ export class RichText extends Label { ...@@ -1137,9 +1137,9 @@ export class RichText extends Label {
if (c.match(re)) { if (c.match(re)) {
row.push(tempArr); row.push(tempArr);
temp = ' ' + tempStr; temp = '' + tempStr;
tempArr = []; tempArr = [];
tempArr.push(getBlank()); //tempArr.push(getBlank());
tempArr.push(this.textArr[i]); tempArr.push(this.textArr[i]);
tempStr = ""; tempStr = "";
...@@ -1166,9 +1166,9 @@ export class RichText extends Label { ...@@ -1166,9 +1166,9 @@ export class RichText extends Label {
} else { } else {
row.push(tempArr); row.push(tempArr);
temp = ' ' + tempStr; temp = '' + tempStr;
tempArr = []; tempArr = [];
tempArr.push(getBlank()); //tempArr.push(getBlank());
tempArr.push(this.textArr[i]); tempArr.push(this.textArr[i]);
} }
......
...@@ -87,6 +87,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -87,6 +87,8 @@ export class PlayComponent implements OnInit, OnDestroy {
posArr = []; posArr = [];
indexLabelArr = [];
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
...@@ -535,6 +537,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -535,6 +537,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.curRowIndex = 0; this.curRowIndex = 0;
this.posArr = []; this.posArr = [];
this.indexLabelArr = [];
} }
...@@ -631,6 +635,21 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -631,6 +635,21 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
} }
private getIndex(index){
const indexLabel = new Label();
indexLabel.textAlign = 'right';
indexLabel.text = index + ".";
indexLabel.fontColor = "#000000";
indexLabel.fontSize = 36;
indexLabel.fontName = "GOTHICB";
indexLabel.setScaleXY(this.mapScale);
indexLabel.refreshSize();
return indexLabel;
}
startY = 0; startY = 0;
initY = 0; initY = 0;
initSentence() { initSentence() {
...@@ -659,11 +678,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -659,11 +678,6 @@ export class PlayComponent implements OnInit, OnDestroy {
const getTextArr = (index, sentence) => { const getTextArr = (index, sentence) => {
let textArr = []; let textArr = [];
let text = new Text();
text.val = index + ". ";
text.fontColor = "#000000";
textArr.push(text);
for (let i = 0; i < sentence.letterArr.length; ++i) { for (let i = 0; i < sentence.letterArr.length; ++i) {
let text = new Text(); let text = new Text();
text.val = sentence.letterArr[i].val; text.val = sentence.letterArr[i].val;
...@@ -678,9 +692,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -678,9 +692,9 @@ export class PlayComponent implements OnInit, OnDestroy {
let viewHight = 560 * this.mapScale; let viewHight = 560 * this.mapScale;
const bg = new ShapeRect(); const bg = new ShapeRect();
bg.setSize(700 * this.mapScale, viewHight); bg.setSize(680 * this.mapScale, viewHight);
this.renderArr.push(bg); this.renderArr.push(bg);
bg.x = 36 * this.mapScale; bg.x = 70 * this.mapScale;
bg.y = startY; bg.y = startY;
bg.alpha = 0; bg.alpha = 0;
this.sentenceBg = bg; this.sentenceBg = bg;
...@@ -715,6 +729,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -715,6 +729,14 @@ export class PlayComponent implements OnInit, OnDestroy {
this.sentenceArr.push(text); this.sentenceArr.push(text);
const indexLabel = this.getIndex(i + 1);
indexLabel.x = -10 * this.mapScale;
indexLabel.y = y + indexLabel.getBoundingBox().height - 20 * this.mapScale / 2;
indexLabel.alpha = 0;
indexLabel.visible = false;
this.sentenceBg.addChild(indexLabel);
this.indexLabelArr.push(indexLabel);
y += text.getBoundingBox().height + dH; y += text.getBoundingBox().height + dH;
totalHeight += text.getBoundingBox().height + dH; totalHeight += text.getBoundingBox().height + dH;
...@@ -778,6 +800,25 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -778,6 +800,25 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
clicked = false;
for(let i = 0; i < this.sentenceArr.length; ++ i){
let sentenceSpr = this.sentenceArr[i];
if (this.checkClickTarget(sentenceSpr) && sentenceSpr.visible && sentenceSpr.alpha == 1) {
clicked = true;
this.curAudio = this.playAudio(sentenceSpr.data.audioUrl, true);
break;
}
}
if (clicked) {
return;
}
if (this.scrollbar.shown && this.checkClickTarget(this.scrollbar.scrollbar)) { if (this.scrollbar.shown && this.checkClickTarget(this.scrollbar.scrollbar)) {
this.scrollbar.touchScrollbar(this.my); this.scrollbar.touchScrollbar(this.my);
return; return;
...@@ -859,21 +900,24 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -859,21 +900,24 @@ export class PlayComponent implements OnInit, OnDestroy {
let spr; let spr;
let index = -1;
for(let i = 0; i < this.sentenceArr.length; ++ i){ for(let i = 0; i < this.sentenceArr.length; ++ i){
let sentenceSpr = this.sentenceArr[i]; let sentenceSpr = this.sentenceArr[i];
if(sentenceSpr.data.renderTo == sentence.renderTo){ if(sentenceSpr.data.renderTo == sentence.renderTo){
spr = sentenceSpr; spr = sentenceSpr;
index = i;
break; break;
} }
} }
this.showSentence(spr); this.showSentence(spr, index);
} }
private showSentence(sentence){ private showSentence(sentence, index){
if(!sentence){ if(!sentence){
return; return;
} }
...@@ -885,6 +929,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -885,6 +929,8 @@ export class PlayComponent implements OnInit, OnDestroy {
let offsetY = Math.floor(y - h / 2); let offsetY = Math.floor(y - h / 2);
sentence.alpha = 1; sentence.alpha = 1;
this.indexLabelArr[index].alpha = 1;
let dH = 24 * this.mapScale; let dH = 24 * this.mapScale;
...@@ -926,9 +972,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -926,9 +972,11 @@ export class PlayComponent implements OnInit, OnDestroy {
if(offsetY < Math.floor(this.initY) || (offsetY + h) > Math.floor(this.initY + this.sentenceBg.height)){ if(offsetY < Math.floor(this.initY) || (offsetY + h) > Math.floor(this.initY + this.sentenceBg.height)){
sentence.visible = false; sentence.visible = false;
this.indexLabelArr[i].visible = false;
} }
else{ else{
sentence.visible = true; sentence.visible = true;
this.indexLabelArr[i].visible = true;
} }
} }
......
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