Commit 6f55fbcd authored by 李维's avatar 李维

dev commit

parent c32632dd
......@@ -375,44 +375,34 @@ export class HotZoneItem extends MySprite {
this.width = w;
this.height = h;
const rect = new ShapeRect(this.ctx);
rect.x = -w / 2;
rect.y = -h / 2;
rect.setSize(w, h);
rect.fillColor = '#ffffff';
rect.fillColor = '#FFFFFF';
rect.alpha = 0.2;
this.addChild(rect);
}
showLabel(text = null) {
if (!this.label) {
this.label = new Label(this.ctx);
this.label.anchorY = 0;
this.label.fontSize = '40px';
this.label.textAlign = 'center';
this.addChild(this.label);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY;
this.refreshLabelScale();
}
if (text) {
this.label.text = text;
} else if (this.text) {
this.label.text = this.text;
}
this.label.visible = true;
}
hideLabel() {
if (!this.label) { return; }
this.label.visible = false;
}
......@@ -446,18 +436,14 @@ export class HotZoneItem extends MySprite {
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
this.arrowRight.setScaleXY(0.06);
}
this.showLabel();
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
this.arrow.visible = false;
}
this.hideLabel();
}
......@@ -465,14 +451,11 @@ export class HotZoneItem extends MySprite {
drawArrow() {
if (!this.arrow) { return; }
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y;
this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y;
this.arrowTop.update();
......@@ -483,48 +466,212 @@ export class HotZoneItem extends MySprite {
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x + w / 2;
const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
// this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
// this.ctx.fill();
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
}
}
}
export class HotZoneImageItem extends MySprite {
lineDashFlag = false;
arrow: MySprite;
label: Label;
image: MySprite;
imageSrc: String;
labelBox: MySprite;
scale
text;
arrowTop;
arrowRight;
init(imageSrc = null){
this.showImage(imageSrc,(img)=>{
console.log("Init")
this.setSize(img.width*this.image.scaleX, img.height*this.image.scaleY)
this.lineDashFlag = true;
this.showLineDash()
this.showLabel();
this.drawArrow()
})
}
setSize(w, h) {
this.width = w;
this.height = h;
}
showLabel(text = null) {
if (!this.label) {
this.labelBox = new MySprite(this.ctx);
this.labelBox.load('assets/default/bg_50_50.png').then(()=>{
this.labelBox.x = this.labelBox.width/2;
this.labelBox.y = this.labelBox.height/2;
});
this.label = new Label(this.ctx);
// this.label.anchorY = 0;
this.label.fontSize = '30px';
this.label.textAlign = 'center';
this.label.color = "#FFFFFF"
this.labelBox.addChild(this.label);
this.addChild(this.labelBox);
this.refreshLabelScale();
}
if (text) {
this.label.text = text;
} else if (this.text) {
this.label.text = this.text;
}
this.label.visible = true;
}
hideLabel() {
if (!this.label) { return; }
this.label.visible = false;
}
showImage(imageSrc = null, callback) {
this.loadImage(imageSrc).then((img)=>{
if(this.image){
this.removeChild(this.image)
}
this.image = new MySprite(this.ctx);
this.image.init(img)
let scale = Math.min(200/this.image.width, 200/this.image.height)
this.image.x = this.image.width*scale/2
this.image.y = this.image.height*scale/2
this.image.alpha = 0.7;
this.image.setScaleXY(scale);
this.addChild(this.image,-1);
this.imageSrc = img.src;
callback && callback(this.image)
})
}
loadImage(imageSrc = null){
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = imageSrc;
})
}
hideImage() {
if (!this.image) { return; }
this.image.visible = false;
}
refreshLabelScale() {
// console.log(this.labelBox.width)
this.labelBox.scaleX = 75 / (this.labelBox.width*this.image.scaleX)
// console.log(this.labelBox.width)
// if (this.scaleX == this.scaleY) {
// this.labelBox.setScaleXY(1);
// }
// if (this.scaleX > this.scaleY) {
// this.labelBox.scaleX = this.scaleY / this.scaleX;
// } else {
// this.labelBox.scaleY = this.scaleX / this.scaleY;
// }
}
showLineDash() {
if (this.arrow) {
this.arrow.visible = true;
} else {
this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0);
this.arrow.setScaleXY(0.06);
this.arrowTop = new MySprite(this.ctx);
this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
this.arrowTop.setScaleXY(0.06);
this.arrowRight = new MySprite(this.ctx);
this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
this.arrowRight.setScaleXY(0.06);
}
}
hideLineDash() {
this.lineDashFlag = false;
if (this.arrow) {
this.arrow.visible = false;
}
this.hideLabel();
}
drawArrow() {
if (!this.arrow) { return; }
const rect = this.getBoundingBox();
this.arrow.x = rect.x + rect.width;
this.arrow.y = rect.y;
this.arrow.update();
this.arrowTop.x = rect.x + rect.width / 2;
this.arrowTop.y = rect.y;
this.arrowTop.update();
this.arrowRight.x = rect.x + rect.width;
this.arrowRight.y = rect.y + rect.height / 2;
this.arrowRight.update();
}
drawFrame() {
this.ctx.save();
const rect = this.getBoundingBox();
const w = rect.width;
const h = rect.height;
const x = rect.x + w / 2;
const y = rect.y + h / 2;
this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7';
this.ctx.beginPath();
this.ctx.moveTo( x - w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y - h / 2);
this.ctx.lineTo(x + w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y + h / 2);
this.ctx.lineTo(x - w / 2, y - h / 2);
this.ctx.stroke();
this.ctx.restore();
}
draw() {
super.draw();
if (this.lineDashFlag) {
this.drawFrame();
this.drawArrow();
......@@ -569,14 +716,12 @@ export class EditorItem extends MySprite {
showLineDash() {
this.lineDashFlag = true;
if (this.arrow) {
this.arrow.visible = true;
} else {
this.arrow = new MySprite(this.ctx);
this.arrow.load('assets/common/arrow.png', 1, 0);
this.arrow.setScaleXY(0.06);
}
this.showLabel();
......
......@@ -37,12 +37,12 @@
</div>
<!--<div class="img-box-upload">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">-->
<!--</app-upload-image-with-preview>-->
<!--</div>-->
<div class="img-box-upload">
<app-upload-image-with-preview
[picUrl]="it.pic_url"
(imageUploaded)="onImgUploadSuccessByImg($event, it, i)">
</app-upload-image-with-preview>
</div>
<!--<app-audio-recorder-->
......
import {Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild} from '@angular/core';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneItem, Label, MySprite} from './Unit';
import {EditorItem, HotZoneImageItem, Label, MySprite} from './Unit';
import TWEEN from '@tweenjs/tween.js';
......@@ -134,18 +134,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const bg = this.bg;
if (this.bgItem.url) {
bg.load(this.bgItem.url).then(() => {
const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height;
const rate = Math.min(rate1, rate2);
bg.setScaleXY(rate);
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
if (callBack) {
callBack();
}
......@@ -156,39 +151,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
addBtnClick() {
// this.imgArr.push({});
// this.hotZoneArr.push({});
const item = this.getHotZoneItem();
this.hotZoneArr.push(item);
this.refreshHotZoneId();
console.log('hotZoneArr:', this.hotZoneArr);
}
onImgUploadSuccessByImg(e, img) {
onImgUploadSuccessByImg(e, img, index) {
// console.log()
this.hotZoneArr[index].init(e.url)
img.pic_url = e.url;
this.refreshImage (img);
}
refreshImage(img) {
this.hideAllLineDash();
img.picItem = this.getPicItem(img);
this.refreshImageId();
}
refreshHotZoneId() {
for (let i = 0; i < this.hotZoneArr.length; i++) {
this.hotZoneArr[i].index = i;
if (this.hotZoneArr[i]) {
this.hotZoneArr[i].text = 'item-' + (i + 1);
this.hotZoneArr[i].text = (i + 1);
}
}
......@@ -207,41 +194,35 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
getHotZoneItem( saveData = null) {
const itemW = 200;
const itemH = 200;
const item = new HotZoneItem(this.ctx);
item.setSize(itemW, itemH);
const item = new HotZoneImageItem(this.ctx);
if(saveData){
item.init(saveData.rect.src);
}else{
item.init("assets/default/bg_200_200.png");
}
item.anchorX = 0.5;
item.anchorY = 0.5;
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
item.x = this.canvasWidth / 2 - 100;
item.y = this.canvasHeight / 2 - 100;
if (saveData) {
const saveRect = saveData.rect;
item.scaleX = saveRect.width / item.width;
item.scaleY = saveRect.height / item.height;
item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2;
}
item.showLineDash();
return item;
}
getPicItem(img, saveData = null) {
const item = new EditorItem(this.ctx);
item.load(img.pic_url).then( img => {
let maxW, maxH;
if (this.bg) {
maxW = this.bg.width * this.bg.scaleX;
......@@ -250,10 +231,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
maxW = this.canvasWidth;
maxH = this.canvasHeight;
}
let scaleX = maxW / 3 / item.width;
let scaleY = maxH / 3 / item.height;
if (item.height * scaleX < this.canvasHeight) {
item.setScaleXY(scaleX);
} else {
......@@ -261,14 +240,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
if (saveData) {
const saveRect = saveData.rect;
item.setScaleXY(saveRect.width / item.width);
item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2;
} else {
item.showLineDash();
}
......@@ -283,24 +259,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
deleteItem(e, i) {
// this.imgArr.splice(i , 1);
// this.refreshImageId();
this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId();
}
init() {
this.initData();
this.initCtx();
this.initItem();
}
......@@ -309,73 +276,43 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.bgItem = {};
} else {
this.refreshBackground(() => {
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
if (!this.hotZoneItemArr) {
this.hotZoneItemArr = [];
} else {
this.initHotZoneArr();
}
});
}
}
initHotZoneArr() {
// console.log('this.hotZoneArr: ', this.hotZoneArr);
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
} else {
curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight};
}
let oldBgRect = this.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate);
this.hotZoneArr = [];
const arr = this.hotZoneItemArr.concat();
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url};
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
// img['picItem'] = this.getPicItem(img, data);
// img['audio_url'] = arr[i].audio_url;
// this.imgArr.push(img);
const item = this.getHotZoneItem( data);
console.log('item: ', item);
const item = this.getHotZoneItem(data);
console.log("初始化存储数据", data)
this.hotZoneArr.push(item);
}
this.refreshHotZoneId();
// this.refreshImageId();
}
......@@ -424,13 +361,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = [];
this.bg = null;
this.imgArr = [];
this.hotZoneArr = [];
}
......@@ -443,17 +378,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
mapDown(event) {
this.oldPos = {x: this.mx, y: this.my};
const arr = this.hotZoneArr;
for (let i = arr.length - 1; i >= 0 ; i--) {
const item = arr[i];
if (item) {
if (this.checkClickTarget(item)) {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item);
} else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
......@@ -467,9 +397,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
}
// this.hideAllLineDash();
}
mapMove(event) {
......@@ -507,76 +434,48 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSize() {
const rect = this.curItem.getBoundingBox();
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let distance = this.my - rect.y;
let lenW = this.mx - rect.x;
let lenH = rect.height - distance
let minLen = 20;
let s;
if (lenW < lenH) {
if (lenW < minLen) {
lenW = minLen;
}
s = lenW / this.curItem.width;
} else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
let sx,sy;
if (lenW < minLen) {
lenW = minLen;
}
// console.log('s: ', s);
this.curItem.setScaleXY(s);
this.curItem.refreshLabelScale();
sx = lenW / this.curItem.width;
if (lenH < minLen) {
lenH = minLen;
}
sy = lenH / this.curItem.height;
this.curItem.y = this.curItem.y + distance
this.curItem.scaleX = sx;
this.curItem.scaleY = sy;
}
changeTopSize() {
const rect = this.curItem.getBoundingBox();
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let lenH = rect.y - this.my + rect.height;
this.curItem.y = this.my
let minLen = 20;
let s;
// if (lenW < lenH) {
// if (lenW < minLen) {
// lenW = minLen;
// }
// s = lenW / this.curItem.width;
//
// } else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
// }
// console.log('s: ', s);
this.curItem.scaleY = s;
this.curItem.refreshLabelScale();
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
this.curItem.setScaleXY(s);
}
changeRightSize() {
const rect = this.curItem.getBoundingBox();
let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
// let lenH = ( (rect.y + rect.height / 2) - this.my ) * 2;
let lenW = this.mx - rect.x;
let minLen = 20;
let s;
if (lenW < minLen) {
lenW = minLen;
}
s = lenW / this.curItem.width;
this.curItem.scaleX = s;
this.curItem.refreshLabelScale();
this.curItem.setScaleXY(s);
}
changeItemSize(item) {
......@@ -613,27 +512,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
update() {
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
for (let i = 0; i < this.renderArr.length; i++) {
this.renderArr[i].update(this);
}
// for (let i = 0; i < this.imgArr.length; i++) {
// const picItem = this.imgArr[i].picItem;
// if (picItem) {
// picItem.update(this);
// }
// }
this.updateArr(this.hotZoneArr);
TWEEN.update();
}
......@@ -645,8 +530,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
......@@ -654,15 +537,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
initListener() {
// this.winResizeEventStream
// .pipe(debounceTime(500))
// .subscribe(data => {
// this.renderAfterResize();
// });
if (this.IsPC()) {
this.canvas.nativeElement.addEventListener('mousedown', (event) => {
setMxMyByMouse(event);
this.mapDown(event);
......@@ -710,18 +585,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (event.touches.length <= 0) {
return;
}
if (this.canvasLeft == null) {
setParentOffset();
}
this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop;
};
const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left;
this.canvasTop = rect.top;
......@@ -761,6 +632,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick() {
const bgItem = this.bgItem;
if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox();
......@@ -768,26 +640,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
bgItem['rect'] = {x: 0, y: 0, width: Math.round(this.canvasWidth * 100) / 100, height: Math.round(this.canvasHeight * 100) / 100};
}
// const imgItemArr = [];
// const imgArr = this.imgArr;
// for (let i = 0; i < imgArr.length; i++) {
//
// const imgItem = {
// id: imgArr[i].id,
// pic_url: imgArr[i].pic_url,
// audio_url: imgArr[i].audio_url,
// };
// if (imgArr[i].picItem) {
// imgItem['rect'] = imgArr[i].picItem.getBoundingBox();
// imgItem['rect'].x -= bgItem['rect'].x;
// imgItem['rect'].y -= bgItem['rect'].y;
// }
// imgItemArr.push(imgItem);
// }
const hotZoneItemArr = [];
const hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) {
......@@ -800,12 +652,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
hotZoneItem['rect'].y = Math.round( (hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100;
hotZoneItem['rect'].width = Math.round( (hotZoneItem['rect'].width) * 100) / 100;
hotZoneItem['rect'].height = Math.round( (hotZoneItem['rect'].height) * 100) / 100;
hotZoneItem['rect'].src = hotZoneArr[i].imageSrc
hotZoneItemArr.push(hotZoneItem);
}
console.log('hotZoneItemArr: ', hotZoneItemArr);
this.save.emit({bgItem, hotZoneItemArr});
}
}
<div class="model-content">
<div class="card-config">
<div *ngFor="let item of dataArray; let i = index" class="card-item" style="padding: 0.5vw;" >
<div class="card-item-content border">
<div class="card-item">
<div class="border">
<div class="card-item-content">
<div class="title" >
第-<strong>{{ i + 1 }}</strong>-题
<div class="title">选区设置</div>
<div class="section">
<app-custom-hot-zone
[bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
(save)="saveData($event)"
></app-custom-hot-zone>
</div>
<div class="section" >
<div class="section-title" >
问题
</div>
<div class="section-content">
<div style="flex:1">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.question.text" (blur)="saveItem()" style="width: 250px;" />
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.question.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item.question)" ></app-audio-recorder>
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
时间
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.time" (blur)="saveItem()" style="width: 80px;" /><span style="margin-left: 10px;"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-item">
<div class="border">
<div class="card-item-content">
<div class="title">题目设置</div>
<div class="section">
<div></div>
<app-audio-recorder></app-audio-recorder>
<!-- <div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
<div style="display: flex; ">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.question.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.question)"></app-upload-image-with-preview>
</div>
</div>
</div>
</div>
</div>
<div class="section" >
<div class="section-title" >
正确选项
</div>
<div class="section-content">
<div style="flex:10">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.choice.correct.text" (blur)="saveItem()" />
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.choice.correct.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item.choice.correct)"></app-upload-image-with-preview>
</div>
</div>
<div style="display: flex; ">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="item.choice.correct.isText" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="true">文字</label>
<label nz-radio [nzValue]="false">图片</label>
</nz-radio-group>
</div>
</div>
</div>
<div style="flex:20">
音频
</div>
</div>
<div style="flex:5">
<app-audio-recorder></app-audio-recorder>
</div>
</div> -->
</div>
<div class="section" >
<div class="section-title" >
错误选项
<div *ngIf="item.choice.incorrect.length<3" style="text-align: center; float: right;">
<button nz-button nzType="primary" (click)="addChoice(i)" >
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加
</button>
</div>
</div>
<div class="section-content">
<div *ngFor="let choiceItem of item.choice.incorrect; let choiceIndex = index" style="width:220px; height:230px; border:1px solid #CCC; padding:5px; border-radius: 5px; margin: 0 10px;">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="choiceItem.text" (blur)="saveItem()" />
</div>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="choiceItem.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, choiceItem)"></app-upload-image-with-preview>
</div>
</div>
<div style="display: flex; ">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="choiceItem.isText" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="true">文字</label>
<label nz-radio [nzValue]="false">图片</label>
</nz-radio-group>
</div>
</div>
<div class="section">
<div *ngIf="choiceIndex>0" style="text-align: center;">
<button style="margin-top: 10px;" nz-button nzType="danger" (click)="deleteChoice(i, choiceIndex)" >
<span>删除此选项</span>
</button>
</div>
</div>
</div>
</div>
<div class="section" >
<div style="text-align: right; padding-right: 20px;">
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem(i)" >
<span>删除本题</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-item" style="padding: 0.5vw;" >
<button nz-button nzType="primary" class="add-btn" (click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片组
</button>
</div>
</div>
</div>
</div>
@import "../style/common_mixin";
.model-content {
margin: 10px;
.card-config {
width: 100%;
height: 100%;
margin-left: 10px;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
flex-direction:column;
.card-item{
flex:1;
margin-bottom: 40px;
.border {
border-radius: 20px;
border-style: dashed;
padding:20px;
width: 800px;
width: 100%;
}
.card-item-content{
.title {
......
......@@ -8,9 +8,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
dataArray = [];
_item: any;
KEY = 'DataKey_MultipleChoice';
_item: any;
dataArray: Array<Object> = [];
hotZoneItemArr: Array<Object> = [];
bgItem: Object;
KEY = 'DataKey_PicturePuzzle';
set item(item) {
this._item = item;
......@@ -30,6 +33,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item.contentObj = {};
const getData = (<any> window).courseware.getData;
getData((data) => {
console.log("读取数据", data)
if (data) {
this.item = data;
} else {
......@@ -40,7 +44,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
this.init();
this.refresh();
this.saveItem();
// this.saveItem();
}, this.KEY);
}
ngOnChanges() {
......@@ -50,6 +54,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() {
}
saveData(e){
console.log("HotZone保存", e)
this.bgItem = e.bgItem;
this.hotZoneItemArr.length = 0;
e.hotZoneItemArr.forEach(item => {
console.log(item)
this.hotZoneItemArr.push(item)
});
this.save();
}
init() {
if (this.item.contentObj.dataArray) {
......@@ -58,24 +72,27 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.dataArray = this.getDefaultPicArr();
this.item.contentObj.dataArray = this.dataArray;
}
if (this.item.contentObj.hotZoneItemArr) {
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 = {}
this.item.contentObj.bgItem = this.bgItem;
}
}
cardItemData(){
return {
time: 3,
question:{
text:"",
image_url:"",
audio_url:""
},
choice:{
correct:{ isText: true, text: "", image_url: "" },
incorrect:[
{ isText: true, text: "", image_url: "" },
{ isText: true, text: "", image_url: "" },
{ isText: true, text: "", image_url: "" },
]
}
audio_url: "",
image_url: "",
hotZoneIndex: -1
};
}
......@@ -88,23 +105,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return arr;
}
initData() {
}
deleteItem(index) {
if (index !== -1) {
this.dataArray.splice(index, 1);
}
this.save();
}
deleteChoice(questionIndex, choiceIndex){
if (questionIndex !== -1 && choiceIndex !== -1) {
this.dataArray[questionIndex].choice.incorrect.splice(choiceIndex, 1);
}
this.save();
}
addChoice(questionIndex) {
let item = this.cardChoiceData();
this.dataArray[questionIndex].choice.incorrect.push(item);
......@@ -120,10 +125,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.audio_url = e.url;
this.save();
}
onTitleAudioUploadSuccess(e) {
this.item.contentObj.titleAudio_url = e.url;
this.save();
}
addItem() {
let item = this.cardItemData();
this.dataArray.push(item);
......@@ -132,7 +139,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
}
......@@ -140,7 +146,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.saveItem();
}
saveItem() {
this.save();
}
......@@ -148,7 +153,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
console.log(this.item)
console.log("保存", this.item)
}
refresh() {
......@@ -156,6 +161,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.appRef.tick();
}, 1);
}
}
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