Commit 179003e3 authored by 李维's avatar 李维

auto save

parent a43a8344
...@@ -2,10 +2,18 @@ ...@@ -2,10 +2,18 @@
<div style="float: left; width: 25%;border-right: 2px solid #ddd; border-bottom: 2px solid #ddd;"> <div style="float: left; width: 25%;border-right: 2px solid #ddd; border-bottom: 2px solid #ddd;">
<h5 style="margin-left: 2.5%;">预览:</h5> <h5 style="margin-left: 2.5%;">预览:</h5>
<div style="width: 100%;background-color: #FF0;">
<div class="preview-box" #wrap style="width: 200px; height: 300px;"> <div class="preview-box" #wrap style="margin-bottom: 20px">
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
</div> </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> <h5 style="border-top: 2px solid #ddd;">背景图:</h5>
<div style="width: 200px;margin: auto;"> <div style="width: 200px;margin: auto;">
...@@ -78,16 +86,6 @@ ...@@ -78,16 +86,6 @@
<nz-divider></nz-divider> <nz-divider></nz-divider>
<div class="save-box"> <div class="save-box">
<button
class="save-btn"
nz-button
nzType="primary"
[nzSize]="'large'"
nzShape="round"
(click)="saveClick()"
>
<i nz-icon type="save"></i>
Save
</button>
</div> </div>
</div> </div>
...@@ -84,7 +84,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -84,7 +84,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSizeFlag = false; changeSizeFlag = false;
changeTopSizeFlag = false; changeTopSizeFlag = false;
changeRightSizeFlag = false; changeRightSizeFlag = false;
hotZoneChanged = false;
constructor() { constructor() {
...@@ -106,7 +106,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -106,7 +106,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
window.cancelAnimationFrame(this.animationId); window.cancelAnimationFrame(this.animationId);
} }
ngOnChanges() { ngOnChanges() {
} }
...@@ -114,6 +113,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -114,6 +113,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess(e) { onBackgroundUploadSuccess(e) {
this.bgItem.url = e.url; this.bgItem.url = e.url;
this.refreshBackground(); this.refreshBackground();
this.autoSave()
} }
refreshBackground(callBack = null) { refreshBackground(callBack = null) {
...@@ -144,7 +144,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -144,7 +144,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = this.getHotZoneItem(); const item = this.getHotZoneItem();
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
this.refreshHotZoneId(); this.refreshHotZoneId();
// console.log('hotZoneArr:', this.hotZoneArr); this.autoSave()
} }
handleMoveItemUp(event,index){ handleMoveItemUp(event,index){
...@@ -153,6 +153,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -153,6 +153,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}else{ }else{
this.hotZoneArr.push(this.hotZoneArr.shift()); this.hotZoneArr.push(this.hotZoneArr.shift());
} }
this.autoSave()
} }
handleMoveItemDown(event,index){ handleMoveItemDown(event,index){
...@@ -161,6 +162,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -161,6 +162,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}else{ }else{
this.hotZoneArr.unshift( this.hotZoneArr.splice(index,1)[0]); this.hotZoneArr.unshift( this.hotZoneArr.splice(index,1)[0]);
} }
this.autoSave()
} }
onImgUploadSuccessByImg(e, item) { onImgUploadSuccessByImg(e, item) {
...@@ -168,7 +170,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -168,7 +170,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.setScaleXY(Math.min(100 / w, 150 / h)) item.setScaleXY(Math.min(100 / w, 150 / h))
}) })
item.pic_url = e.url; item.pic_url = e.url;
this.refreshImage (item); item.image_url = e.url;
this.refreshImage(item);
this.autoSave()
} }
onAudioUploadSuccess(e, item, isCardAudio) { onAudioUploadSuccess(e, item, isCardAudio) {
...@@ -177,6 +181,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -177,6 +181,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}else{ }else{
item.audio_url = e.url; item.audio_url = e.url;
} }
this.autoSave()
} }
refreshImage(img) { refreshImage(img) {
...@@ -185,7 +190,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -185,7 +190,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.refreshImageId(); this.refreshImageId();
} }
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;
...@@ -270,11 +274,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -270,11 +274,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onAudioUploadSuccessByImg(e, img) { onAudioUploadSuccessByImg(e, img) {
img.audio_url = e.url; img.audio_url = e.url;
this.autoSave()
} }
deleteItem(e, i) { deleteItem(e, i) {
this.hotZoneArr.splice(i, 1); this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId(); this.refreshHotZoneId();
this.autoSave()
} }
init() { init() {
...@@ -403,8 +409,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -403,8 +409,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else { } else {
this.changeCurItem(item); this.changeCurItem(item);
} }
this.hotZoneChanged = true;
return; return;
} }
} }
} }
} }
...@@ -621,7 +629,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -621,7 +629,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
checkClickTarget(target) { checkClickTarget(target) {
const rect = target.getBoundingBox(); const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) { if (this.checkPointInRect(this.mx, this.my, rect)) {
return true; return true;
...@@ -638,9 +645,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -638,9 +645,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
return false; return false;
} }
autoSave() {
saveClick() { console.log("Auto save")
const bgItem = this.bgItem; const bgItem = this.bgItem;
if (this.bg) { if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox(); bgItem['rect'] = this.bg.getBoundingBox();
...@@ -651,7 +657,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -651,7 +657,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const hotZoneItemArr = []; const hotZoneItemArr = [];
const hotZoneArr = this.hotZoneArr; const hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) { for (let i = 0; i < hotZoneArr.length; i++) {
const hotZoneItem = { const hotZoneItem = {
index: hotZoneArr[i].index, index: hotZoneArr[i].index,
}; };
...@@ -667,5 +672,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -667,5 +672,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
hotZoneItemArr.push(hotZoneItem); hotZoneItemArr.push(hotZoneItem);
} }
this.save.emit({bgItem, hotZoneItemArr}); this.save.emit({bgItem, hotZoneItemArr});
this.hotZoneChanged = false;
}
saveClick() {
console.log("Saved")
this.autoSave()
} }
} }
...@@ -45,9 +45,6 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges { ...@@ -45,9 +45,6 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
handleChange(info: { type: string, file: UploadFile, event: any }): void { handleChange(info: { type: string, file: UploadFile, event: any }): void {
console.log('info:' , info);
switch (info.type) { switch (info.type) {
case 'start': case 'start':
// this.isUploading = true; // this.isUploading = true;
......
...@@ -54,11 +54,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -54,11 +54,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
saveData(e){ saveData(e){
console.log("HotZone保存", e)
this.bgItem = e.bgItem; this.bgItem = e.bgItem;
this.hotZoneItemArr.length = 0; this.hotZoneItemArr.length = 0;
e.hotZoneItemArr.forEach(item => { e.hotZoneItemArr.forEach(item => {
console.log(item)
this.hotZoneItemArr.push(item) this.hotZoneItemArr.push(item)
}); });
this.save(); this.save();
......
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