Commit 0eb69da6 authored by limingzhe's avatar limingzhe

refactor: 数据重构 添加动画

parent f7658cb6
...@@ -152,8 +152,8 @@ ...@@ -152,8 +152,8 @@
<label style="margin-left: 40px" nz-checkbox [(ngModel)]="bgItem.isShowDebugLine">显示辅助框</label> <label style="margin-left: 40px" nz-checkbox [(ngModel)]="bgItem.isShowDebugLine">显示辅助框</label>
<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyHotZoneData()"> 复制数据 </button> <button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyHotZoneData()"> 复制基础数据 </button>
<div style="margin-left: 20px; margin-top: -5px" > <div style="margin-left: 10px; margin-top: -5px" >
<span>粘贴数据: </span> <span>粘贴数据: </span>
<input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" > <input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
......
...@@ -14,9 +14,9 @@ import {Subject} from 'rxjs'; ...@@ -14,9 +14,9 @@ import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators'; import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr} from './Unit'; import {EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr} from './Unit';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import {getMinScale} from "../../play/Unit"; import {getMinScale} from '../../play/Unit';
import {tar} from "compressing"; import {tar} from 'compressing';
import {NzMessageService} from "ng-zorro-antd"; import {NzMessageService} from 'ng-zorro-antd';
@Component({ @Component({
...@@ -47,11 +47,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -47,11 +47,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@Input() @Input()
customTypeGroupArr; // [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean}, ...] customTypeGroupArr; // [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean}, ...]
@Input() @Input()
hotZoneFontObj = { hotZoneFontObj;
size: 50, // hotZoneFontObj = {
name: 'BRLNSR_1', // size: 50,
color: '#8f3758' // name: 'BRLNSR_1',
} // color: '#8f3758'
// }
@Input() @Input()
defaultItemType = 'text'; defaultItemType = 'text';
@Input() @Input()
...@@ -109,10 +110,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -109,10 +110,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
isTexPngLoading = false; isTexPngLoading = false;
constructor(private nzMessageService: NzMessageService) { constructor(private nzMessageService: NzMessageService) {
this.uploadUrl = (<any>window).courseware.uploadUrl(); this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any>window).courseware.uploadData(); this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => { window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url; this.uploadUrl = url;
...@@ -141,7 +141,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -141,7 +141,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
ngOnInit() { ngOnInit() {
this.initListener(); this.initListener();
// this.init(); // this.init();
...@@ -434,19 +433,27 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -434,19 +433,27 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
refreshCustomItem(item) { refreshCustomItem(item) {
this.hideHotZoneItem(item); this.hideHotZoneItem(item);
const group = this.customTypeGroupArr[item.gIdx]; const group = this.customTypeGroupArr[item.gIdx];
if (!group) {
return;
}
if (group.text) { if (group.text) {
item.textLabel.visible = true; item.textLabel.visible = true;
item.itemType = 'text'; item.itemType = 'text';
} }
if (group.pic) {
item.pic.visible = true;
item.itemType = 'pic';
}
if (group.rect) { if (group.rect) {
item.visible = true; item.visible = true;
item.itemType = 'rect'; item.itemType = 'rect';
} }
if (group.pic && !group.anima) {
item.pic.visible = true;
item.itemType = 'pic';
}
} }
hideHotZoneItem(item) { hideHotZoneItem(item) {
...@@ -781,7 +788,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -781,7 +788,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// } // }
this.updateArr(this.hotZoneArr); this.updateArr(this.hotZoneArr);
this.updatePos() this.updatePos();
TWEEN.update(); TWEEN.update();
...@@ -1073,7 +1080,85 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1073,7 +1080,85 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
copyHotZoneData() {
const {bgItem, hotZoneItemArr} = this.getSendData();
// const hotZoneItemArrNew = [];
// const tmpArr = JSON.parse(JSON.stringify(hotZoneItemArr));
// tmpArr.forEach((item) => {
// if (item.gIdx === '0') {
// hotZoneItemArr.push(item);
// }
// })
const jsonData = {
bgItem,
hotZoneItemArr,
isHasRect: this.isHasRect,
isHasPic: this.isHasPic,
isHasText: this.isHasText,
isHasAudio: this.isHasAudio,
isHasAnima: this.isHasAnima,
hotZoneFontObj: this.hotZoneFontObj,
defaultItemType: this.defaultItemType,
hotZoneImgSize: this.hotZoneImgSize,
};
const oInput = document.createElement('input');
oInput.value = JSON.stringify(jsonData);
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand('Copy'); // 执行浏览器复制命令
document.body.removeChild(oInput);
this.nzMessageService.success('复制成功');
// alert('复制成功');
}
importData() {
if (!this.pasteData) {
return;
}
try {
const data = JSON.parse(this.pasteData);
console.log('data:', data);
const {
bgItem,
hotZoneItemArr,
isHasRect,
isHasPic,
isHasText,
isHasAudio,
isHasAnima,
hotZoneFontObj,
defaultItemType,
hotZoneImgSize,
} = data;
this.hotZoneItemArr = hotZoneItemArr;
this.isHasRect = isHasRect;
this.isHasPic = isHasPic;
this.isHasText = isHasText;
this.isHasAudio = isHasAudio;
this.isHasAnima = isHasAnima;
this.hotZoneFontObj = hotZoneFontObj;
this.defaultItemType = defaultItemType;
this.hotZoneImgSize = hotZoneImgSize;
this.bgItem = bgItem;
this.pasteData = '';
} catch (e) {
console.log('err: ', e);
this.nzMessageService.error('导入失败');
}
}
private updatePos() { private updatePos() {
this.hotZoneArr.forEach((item) => { this.hotZoneArr.forEach((item) => {
...@@ -1143,10 +1228,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1143,10 +1228,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) { if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item); this.changeItemSize(item);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) { // } else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
// this.changeItemTopSize(item); // this.changeItemTopSize(item);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) { // } else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
// this.changeItemRightSize(item); // this.changeItemRightSize(item);
} else { } else {
this.changeCurItem(item); this.changeCurItem(item);
} }
...@@ -1172,78 +1257,4 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1172,78 +1257,4 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}); });
} }
copyHotZoneData() {
const {bgItem, hotZoneItemArr} = this.getSendData();
const jsonData = {
bgItem,
hotZoneItemArr,
isHasRect: this.isHasRect,
isHasPic: this.isHasPic,
isHasText: this.isHasText,
isHasAudio: this.isHasAudio,
isHasAnima: this.isHasAnima,
hotZoneFontObj: this.hotZoneFontObj,
defaultItemType: this.defaultItemType,
hotZoneImgSize: this.hotZoneImgSize,
};
const oInput = document.createElement('input');
oInput.value = JSON.stringify(jsonData);
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
document.body.removeChild(oInput);
this.nzMessageService.success('复制成功');
// alert('复制成功');
}
importData() {
if (!this.pasteData) {
return;
}
try {
const data = JSON.parse(this.pasteData);
console.log('data:', data);
const {
bgItem,
hotZoneItemArr,
isHasRect,
isHasPic,
isHasText,
isHasAudio,
isHasAnima,
hotZoneFontObj,
defaultItemType,
hotZoneImgSize,
} = data;
this.hotZoneItemArr = hotZoneItemArr;
this.isHasRect = isHasRect;
this.isHasPic = isHasPic;
this.isHasText = isHasText;
this.isHasAudio = isHasAudio;
this.isHasAnima = isHasAnima;
this.hotZoneFontObj = hotZoneFontObj;
this.defaultItemType = defaultItemType;
this.hotZoneImgSize = hotZoneImgSize;
this.bgItem = bgItem;
this.pasteData = '';
} catch (e) {
console.log('err: ', e);
this.nzMessageService.error('导入失败');
}
}
} }
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