Commit 0cb0e9f7 authored by 李维's avatar 李维

dev commit

parent 240de8dc
<div class="model-content">
<div class="card-config">
<div class="card-item" style="padding: 0.5vw;" >
<div class="card-item-content border" style=" width: 1000px;">
<div class="card-item-content">
<div class="title" >
人物设置
设置
</div>
<div class="section" >
<div class="section-content">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
性别:
<div style="flex:2">
背景音乐
</div>
<div style="flex:9">
<nz-radio-group [(ngModel)]="item.contentObj.sex" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="'male'">男孩</label>
<label nz-radio [nzValue]="'female'">女孩</label>
</nz-radio-group>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.contentObj.bgMusic" (audioUploaded)="onTitleAudioUploadSuccess($event)" ></app-audio-recorder>
</div>
<div style="flex:2">
卡片容器:
</div>
<div style="flex:2">
<div>
<nz-select [(ngModel)]="item.contentObj.cardContainerSetting.type" (ngModelChange)="saveItem()">
<nz-option *ngFor="let p of containerType" [nzValue]="p" [nzLabel]="containerTypeMap[p]"></nz-option>
</nz-select>
</div>
</div>
<div style="flex:7">
<div *ngIf="contentObj.cardContainerSetting.type=='D'">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.contentObj.cardContainerSetting.image_url" (imageUploaded)="onImageUploadSuccess_Container($event)"></app-upload-image-with-preview>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngFor="let item of contentObj.dataArray; let i = index" class="card-item" style="padding: 0.5vw;" >
<div class="card-item-content border" style=" width: 500px;">
<div class="card-item-content">
<div class="title" >
音频设置
卡片 -<strong>{{ i + 1 }}</strong>-
</div>
<div class="section">
<div *ngFor="let it of item.contentObj.audio; let i = index" style="display: flex; margin-bottom: 10px;">
<div style="flex:1;">
{{this.roleMapping[i]}}:
<div class="section" >
<div class="section-content">
<div style="flex:1">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:2">
音频
</div>
<div style="flex:7">
<app-audio-recorder [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, item)" ></app-audio-recorder>
</div>
</div>
</div>
<div style="flex:1" >
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:2">
显示选项
</div>
<div style="flex:7">
<nz-radio-group [(ngModel)]="item.type" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="'Text'">文字</label>
<label nz-radio [nzValue]="'Image'">图片</label>
</nz-radio-group>
</div>
</div>
</div>
<div *ngIf="item.type=='Text'" style="flex:1">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:2">
文字
</div>
<div style="flex:7">
<input type="text" nz-input placeholder="" [(ngModel)]="item.text" (blur)="saveItem()" />
</div>
</div>
</div>
<div *ngIf="item.type=='Image'" style="flex:1">
<div style="display: flex;">
<div style="flex:2">
图片
</div>
<div style="flex:7">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, item)"></app-upload-image-with-preview>
</div>
</div>
</div>
<div style="flex:9">
<app-audio-recorder [audioUrl]="it.url" (audioUploaded)="onAudioUploadSuccessByItem($event, it)" ></app-audio-recorder>
</div>
</div>
</div>
<div class="section" style="height: 40px;" >
<div style="float:left; text-align: left; padding-left: 20px;">
<button style="flex:1;" nz-button nzType="default" (click)="handleMoveItemUp(i)" [disabled]="i==0">
<i nz-icon nzType="up" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
<span style="float: right;">上移</span>
</button>
<button style="flex:1; margin-left: 10px; vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemDown(i)" [disabled]="i==contentObj.dataArray.length-1">
<i nz-icon nzType="down" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
<span style="float: right;">下移</span>
</button>
</div>
<div style="float:right; 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>
<div class="card-item" style="padding: 0.5vw; width: 500px;" >
<button nz-button nzType="primary" class="add-btn" (click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片
</button>
</div>
</div>
......@@ -5,7 +5,8 @@
.card-config {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
.card-item{
margin-bottom: 40px;
......
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
const defaultData = [
{audio_url:"", displayType:"image", text:"This is demoA.", image_url:""},
{audio_url:"", displayType:"text", text:"This is demoB.", image_url:""},
{audio_url:"", displayType:"image", text:"This is demoC.", image_url:""},
{audio_url:"", displayType:"text", text:"This is demoD.", image_url:""}
]
const defauleFormData = {
sex:"male",
audio: [
{url: ""},
{url: ""},
{url: ""},
{url: ""},
{url: ""},
{url: ""},
]
const defaultData = {
bgMusic:"",
dataArray:[],
cardContainerSetting: {
type: "A",
image_url: ""
}
}
@Component({
......@@ -29,25 +19,25 @@ const defauleFormData = {
export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any;
dataArray: Array<Object> = [];
contentObj
hotZoneItemArr: Array<Object> = [];
bgItem: Object;
containerTypeMap = {
"A" : "盘子",
"B" : "盒子",
"C" : "桌布",
"D" : "自定义"
}
containerType = ['A','B','C','D']
KEY = 'DataKey_East_L215';
roleMapping = [
"建筑工",
"消防员",
"警察",
"教师",
"农民伯伯",
"医生"
]
set item(item) {
this._item = item;
}
get item() {
return this._item;
}
@Output()
update = new EventEmitter();
constructor(private appRef: ApplicationRef) {
......@@ -65,15 +55,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} else {
this.item = {};
}
console.log(this.item)
if ( !this.item.contentObj ) {
this.item.contentObj = defauleFormData;
}
if(!this.item.contentObj.sex){
this.item.contentObj = defauleFormData;
}
if(!this.item.contentObj.audio || this.item.contentObj.audio.length === 0){
this.item.contentObj = defauleFormData;
this.item.contentObj = {};
}
this.init();
this.refresh();
......@@ -88,12 +71,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
init() {
// if (this.item.contentObj.dataArray) {
// this.dataArray = this.item.contentObj.dataArray;
// } else {
// this.dataArray = this.getDefaultPicArr();
// this.item.contentObj.dataArray = this.dataArray;
// }
if (Object.keys(this.item.contentObj).length != 0) {
this.contentObj = this.item.contentObj;
} else {
this.contentObj = this.getDefaultPicArr();
this.item.contentObj = this.contentObj;
}
console.log(this.contentObj)
}
cardItemData(){
......@@ -146,20 +130,25 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.image_url = e.url
this.save();
}
onImageUploadSuccess_Container(e) {
this.item.contentObj.cardContainerSetting.image_url = e.url
this.save();
}
onAudioUploadSuccessByItem(e, it) {
it.url = e.url;
onAudioUploadSuccessByItem(e, item) {
item.audio_url = e.url;
this.save();
}
onTitleAudioUploadSuccess(e) {
this.item.contentObj.titleAudio_url = e.url;
this.item.contentObj.bgMusic = e.url;
this.save();
}
addItem() {
let item = this.cardItemData();
this.dataArray.push(item);
this.contentObj.dataArray.push(item);
this.saveItem();
}
......@@ -173,6 +162,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
saveItem() {
console.log(this.item.contentObj.bgMusic)
this.save();
}
......
......@@ -37,24 +37,36 @@ import { debounceTime, map, takeWhile } from "rxjs/operators";
import * as _ from "lodash";
import TWEEN from "@tweenjs/tween.js";
// const defauleFormData = {
// bgMusic:"FC-Sonw",
// dataArray:[
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"},
// {type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
// {type:"Text", text:"Apple", audio_url:"apple-demo"}
// ],
// cardContainerSetting: {
// type: "A",
// image_url: "dish"
// }
// }
const defauleFormData = {
bgMusic:"FC-Sonw",
dataArray:[
{type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
{type:"Text", text:"Apple", audio_url:"apple-demo"},
{type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
{type:"Text", text:"Apple", audio_url:"apple-demo"},
{type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
{type:"Text", text:"Apple", audio_url:"apple-demo"},
{type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
{type:"Text", text:"Apple", audio_url:"apple-demo"},
{type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
{type:"Text", text:"Apple", audio_url:"apple-demo"},
{type:"Image", image_url:"bee-demo", audio_url:"bee-demo"},
{type:"Text", text:"Apple", audio_url:"apple-demo"}
],
cardContainerSetting: {
type: "D",
type: "A",
image_url: "dish"
}
}
......@@ -165,12 +177,24 @@ export class PlayComponent implements OnInit, OnDestroy {
// 映射预加载图片[网路]资源 返回包含图片路径的数组
mapToImageArray(contentObj){
let array = []
if(contentObj.cardContainerSetting.type == "D"){
array.push(contentObj.cardContainerSetting.image_url?contentObj.cardContainerSetting.image_url:"")
}
contentObj.dataArray.forEach(item => {
if(item.type=="Image"){
array.push(item.image_url?item.image_url:"")
}
});
return array
}
// 映射预加载音频[网路]资源 返回包含音频路径的数组
mapToAduioArray(contentObj){
let array = []
array.push(contentObj.bgMusic?contentObj.bgMusic:"")
contentObj.dataArray.forEach(item => {
array.push(item.audio_url?item.audio_url:"")
});
return array
}
......@@ -334,32 +358,34 @@ export class PlayComponent implements OnInit, OnDestroy {
case "A":
pos.image = "dish";
pos.x = this.g_canvasWidth/2;
pos.y = 481*this.g_mapScale;
pos.y = 660*this.g_mapScale;
pos.sx = 658*this.g_mapScale;
pos.sy = 228*this.g_mapScale;
break;
case "B":
pos.image = "box";
pos.x = this.g_canvasWidth/2;
pos.y = 440*this.g_mapScale;
pos.y = 720*this.g_mapScale;
pos.sx = 771*this.g_mapScale*0.8;
pos.sy = 282*this.g_mapScale*0.8;
break;
case "C":
pos.image = "tablecloth";
pos.x = this.g_canvasWidth/2;
pos.y = 490*this.g_mapScale;
pos.y = 718*this.g_mapScale;
pos.sx = 918*this.g_mapScale;
pos.sy = 228*this.g_mapScale;
break;
default:
pos.image = this.g_formData.cardContainerSetting.image_url?this.g_formData.cardContainerSetting.image_url:"dish";
pos.image = this.g_formData.cardContainerSetting.image_url;
pos.x = this.g_canvasWidth/2;
pos.y = 481*this.g_mapScale;
pos.y = 820*this.g_mapScale;
pos.sx = 658*this.g_mapScale;
pos.sy = 228*this.g_mapScale;
break;
}
console.log(this.g_cartoon.images.get(this.g_formData.cardContainerSetting.image_url))
let element = this.g_cartoon.createCartoonElementImageFunc('card-container', pos.image, (w,h)=>{
return {
sx: pos.sx/w,
......@@ -368,9 +394,10 @@ export class PlayComponent implements OnInit, OnDestroy {
}, (w,h)=>{
return {
x: pos.x,
y: this.g_cartoon.getOrigin().y+ (h/2)*this.g_mapScale + pos.y
y: this.g_cartoon.getOrigin().y - (h/2)*this.g_mapScale + pos.y
}
})
console.log(element)
this.render(element.ref)
}
......@@ -1049,9 +1076,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// ----------------------------------
initDefaultData() {
if ( Object.keys(this.g_formData).length===0 ) {
// console.log("Init default form data")
this.g_formData = defauleFormData;
}else if( !this.g_data.contentObj.dataArray || !this.g_data.contentObj.bgMusic){
console.log("Init default form data")
this.g_formData = defauleFormData;
}
}
......
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