Commit 95f61d6f authored by 李维's avatar 李维

改为原版热区组件

parent be906b8d
// export const defaultData = {
// "lineType": "1",
// "circleSize": "1",
// "helpTime": 10,
// "book_id": "1",
// "page_id": "1",
// "part_name": "1",
// "bgItem": {
// "url": "http://staging-teach.cdn.ireadabc.com/5c84b987ea2291c8d6013fffd39dda32.png",
// "rect": {
// "x": 493.97,
// "y": 0,
// "width": 363.05,
// "height": 511
// }
// },
// "hotZoneItemArr": [
// {
// "id": "1676548040151",
// "index": 0,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 549.5051029564432,
// "posY": 118.50042461950386,
// "rect": {
// "x": 34.04,
// "y": 97,
// "width": 43,
// "height": 43
// }
// },
// {
// "id": "1676548150769",
// "index": 1,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 579.5,
// "posY": 369.5,
// "rect": {
// "x": 59.03,
// "y": 343,
// "width": 53,
// "height": 53
// }
// },
// {
// "id": "1676548154001",
// "index": 2,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 804.5,
// "posY": 458.5,
// "rect": {
// "x": 265.03,
// "y": 413,
// "width": 91,
// "height": 91
// }
// },
// {
// "id": "1676548166436",
// "index": 3,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 808.5,
// "posY": 47.5,
// "rect": {
// "x": 266.03,
// "y": -1,
// "width": 97,
// "height": 97
// }
// },
// {
// "id": "1676548168636",
// "index": 4,
// "itemType": "rect",
// "fontScale": 1.05546875,
// "imgScale": 1,
// "imgSizeW": 0,
// "imgSizeH": 0,
// "mapScale": 1.05546875,
// "dragDot": {
// "x": 675.5,
// "y": 255.5
// },
// "gIdx": "3",
// "posX": 664.5,
// "posY": 458.5,
// "rect": {
// "x": 125.03,
// "y": 413,
// "width": 91,
// "height": 91
// }
// }
// ],
// "itemCombineGroup": [],
// "typeArr": []
// }
export const defaultData = {
"lineType": "1",
"circleSize": "1",
"helpTime": 10,
"book_id": "1",
"page_id": "1",
"part_name": "1",
"bgItem": {
"url": "http://staging-teach.cdn.ireadabc.com/5c84b987ea2291c8d6013fffd39dda32.png",
"rect": {
"x": 493.97,
"y": 0,
"width": 363.05,
"height": 511
}
bgItem: {
url: "http://staging-teach.cdn.ireadabc.com/b6c249637c2892d75121dbb76717508e.png",
rect: {
x: 316.90215716486904,
y: 0,
width: 236.19568567026195,
height: 333,
},
"hotZoneItemArr": [
{
"id": "1676548040151",
"index": 0,
"itemType": "rect",
"fontScale": 1.05546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 1.05546875,
"dragDot": {
"x": 675.5,
"y": 255.5
},
"gIdx": "3",
"posX": 549.5051029564432,
"posY": 118.50042461950386,
"rect": {
"x": 34.04,
"y": 97,
"width": 43,
"height": 43
}
},
{
"id": "1676548150769",
"index": 1,
"itemType": "rect",
"fontScale": 1.05546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 1.05546875,
"dragDot": {
"x": 675.5,
"y": 255.5
},
"gIdx": "3",
"posX": 579.5,
"posY": 369.5,
"rect": {
"x": 59.03,
"y": 343,
"width": 53,
"height": 53
}
},
hotZoneItemArr: [
{
"id": "1676548154001",
"index": 2,
"itemType": "rect",
"fontScale": 1.05546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 1.05546875,
"dragDot": {
"x": 675.5,
"y": 255.5
},
"gIdx": "3",
"posX": 804.5,
"posY": 458.5,
"rect": {
"x": 265.03,
"y": 413,
"width": 91,
"height": 91
}
},
{
"id": "1676548166436",
"index": 3,
"itemType": "rect",
"fontScale": 1.05546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 1.05546875,
"dragDot": {
"x": 675.5,
"y": 255.5
},
"gIdx": "3",
"posX": 808.5,
"posY": 47.5,
"rect": {
"x": 266.03,
"y": -1,
"width": 97,
"height": 97
}
index: 0,
itemType: "rect",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 0.6796875,
imgScale: 1,
mapScale: 0.6796875,
rect: { x: 11.6, y: 234, width: 93, height: 93 },
},
{
"id": "1676548168636",
"index": 4,
"itemType": "rect",
"fontScale": 1.05546875,
"imgScale": 1,
"imgSizeW": 0,
"imgSizeH": 0,
"mapScale": 1.05546875,
"dragDot": {
"x": 675.5,
"y": 255.5
index: 1,
itemType: "rect",
fontSize: 50,
fontName: "BRLNSR_1",
fontColor: "#8f3758",
fontScale: 0.6796875,
imgScale: 1,
mapScale: 0.6796875,
rect: { x: 162.1, y: 26.5, width: 68, height: 68 },
},
"gIdx": "3",
"posX": 664.5,
"posY": 458.5,
"rect": {
"x": 125.03,
"y": 413,
"width": 91,
"height": 91
}
}
],
"itemCombineGroup": [],
"typeArr": []
}
\ No newline at end of file
itemCombineGroup: [],
};
......@@ -2,7 +2,7 @@
<h5 style="margin-left: 2.5%;"> preview: </h5>
<div class="preview-box" [style.height]="isRotate ? '95vw' : '35vw'" #wrap>
<div class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
......@@ -32,144 +32,15 @@
<nz-divider style="margin-top: 10px;"></nz-divider>
<div style="margin-top: -20px; margin-bottom: 5px; width: 100%;">
<div *ngIf="customTypeGroupArr">
<nz-radio-group [ngModel]="it.gIdx" (ngModelChange)="customRadioChange($event, it)" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<div *ngFor="let group of customTypeGroupArr; let gIdx = index" style="display: flex; ">
<label nz-radio nzValue="{{gIdx}}">{{group.name}}</label>
</div>
</nz-radio-group>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
<div style="margin-top: -20px; margin-bottom: 5px">
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)">
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div> -->
</div>
<div *ngIf="customTypeGroupArr && customTypeGroupArr[it.gIdx]">
<div *ngIf="customTypeGroupArr[it.gIdx].pic">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].text" style="margin-top: 5px">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].anima" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].animaSmall" align="center" style="margin-top: 5px">
<button nz-button (click)="setAnimaSmallBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画(小)
</button>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx].audio" style="display: flex;align-items: center; margin-top: 5px">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.action" style="display: flex;align-items: center; margin-top: 5px">
<app-custom-action
style="margin: auto"
[item]="it ? it['actionData_' + it.gIdx] : {}"
[type]="customTypeGroupArr[it.gIdx].action.type"
[option]="customTypeGroupArr[it.gIdx].action.option"
(save)="onSaveCustomAction($event, it)">
></app-custom-action>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.isShowPos" style="display: flex; align-items: center; justify-content: center; margin-top: 5px;">
x: <input type="text" nz-input [(ngModel)]="it.posX" style="width: 80px; margin-right: 15px;" (blur)="saveItemPos(it)">
y: <input type="text" nz-input [(ngModel)]="it.posY" style="width: 80px" (blur)="saveItemPos(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.select" align="center" >
<nz-select [(ngModel)]="it.selectType" nzAllowClear nzPlaceHolder="Choose" style="width: 70%; margin-top: 5px;">
<nz-option *ngFor="let s of customTypeGroupArr[it.gIdx]?.select" [nzValue]="s.value" [nzLabel]="s.label">
</nz-option>
</nz-select>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.checkbox" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="margin-right: 20px;">{{customTypeGroupArr[it.gIdx].checkbox.title + ':'}}</span>
<div *ngFor="let cItem of it?.checkbox?.list">
<label style="" nz-checkbox [(ngModel)]="cItem.value" (ngModelChange)="checkboxChange(it.checkbox, it)">{{cItem.label}}</label>
</div>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.dropdown" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="margin-right: 20px;">{{customTypeGroupArr[it.gIdx].dropdown.title + ':'}}</span>
<a nz-dropdown [nzDropdownMenu]="menu">
{{it.dropDownItem ? it.dropDownItem.label : 'select type'}}
<i nz-icon nzType="down"></i>
</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable>
<li *ngFor="let cItem of customTypeGroupArr[it.gIdx].dropdown.list" (click)="dropdownClick(cItem, it)" nz-menu-item>
{{cItem.label}}
</li>
</ul>
</nz-dropdown-menu>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.label" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="width: 30%;">{{customTypeGroupArr[it.gIdx].label + ':'}}</span>
<input type="text" nz-input [(ngModel)]="it.labelText" (blur)="saveText(it)">
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.mathLabel" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<span style="width: 30%;">{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}</span>
<app-formula-input [(ngfModel)]="it.mathLabel" ></app-formula-input>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.multRect" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<app-mult-rect
[rectArr]="it.multRect || []"
(save)="onMultRectSave($event, it)"
>
</app-mult-rect>
</div>
<div *ngIf="customTypeGroupArr[it.gIdx]?.isCopy" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;">
<button nz-button (click)="copyItem(it)" >
<i nz-icon nzType="copy" nzTheme="outline"></i>
复制粘贴
</button>
</div>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
......@@ -181,26 +52,13 @@
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div *ngIf="isHasAudio"
style="width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;">
<div style="width: 100%; margin-top: 5px;">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
<div *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
</div> -->
</div>
</div>
......@@ -225,29 +83,12 @@
<div class="save-box">
<button style="margin-left: 200px" class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()" >
<i nz-icon nzType="save"></i>
Save
</button>
<div *ngIf="isCopyData" style="height: 40px; display: flex; justify-items: center;" >
<label style="margin-left: 40px" nz-checkbox [(ngModel)]="bgItem.isShowDebugLine">显示辅助框</label>
<button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyHotZoneData()"> 复制基础数据 </button>
<div style="margin-left: 10px; margin-top: -5px" >
<span>粘贴数据: </span>
<input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
<button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button>
</div>
</div>
</div>
......@@ -257,52 +98,3 @@
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
<!--龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" nzTitle="配置资源文件" (nzAfterClose)="closeAfterPanel()" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
</div>
<div class="anima-upload-btn" *ngIf="customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames">
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
......@@ -81,10 +81,6 @@
}
}
.anima-upload-btn {
padding: 10px;
}
h5 {
margin-top: 1rem;
}
......@@ -93,8 +89,8 @@ h5 {
@font-face
{
font-family: 'ahronbd-1';
src: url("/assets/font/ahronbd-1.ttf") ;
font-family: 'BRLNSR_1';
src: url("/assets/font/BRLNSR_1.TTF") ;
}
......@@ -109,3 +105,106 @@ h5 {
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// color: #aaa;
// .p-upload-icon {
// text-align: center;
// margin: auto;
// .anticon-upload {
// color: #888;
// font-size: 5rem;
// }
// .p-progress-bar {
// position: relative;
// width: 20rem;
// height: 1.5rem;
// border: 1px solid #ccc;
// border-radius: 1rem;
// .p-progress-bg {
// background-color: #1890ff;
// border-radius: 1rem;
// height: 100%;
// }
// .p-progress-value {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// text-shadow: 0 0 4px #000;
// color: white;
// text-align: center;
// font-size: 0.9rem;
// line-height: 1.5rem;
// }
// }
// }
// .p-preview {
// width: 100%;
// height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
import {
ApplicationRef,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
......@@ -13,12 +11,11 @@ import {
ViewChild
} from '@angular/core';
import {Subject} from 'rxjs';
import {debounceTime, retryWhen} from 'rxjs/operators';
import {DragItem, EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, HotZoneMultRect, Label, MySprite, removeItemFromArr, ShapeCircle, ShapeRect, ShapeRectNew} from './Unit';
import {debounceTime} from 'rxjs/operators';
import {EditorItem, HotZoneImg, HotZoneItem, HotZoneLabel, Label, MySprite, removeItemFromArr} from './Unit';
import TWEEN from '@tweenjs/tween.js';
import {getMinScale} from '../../play/Unit';
import {tar} from 'compressing';
import {NzMessageService} from 'ng-zorro-antd';
import {getMinScale} from "../../play/Unit";
import {tar} from "compressing";
@Component({
......@@ -28,14 +25,18 @@ import {NzMessageService} from 'ng-zorro-antd';
})
export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef;
@Input()
imgItemArr = null;
@Input()
hotZoneItemArr = null;
@Input()
hotZoneArr = null;
@Output()
save = new EventEmitter();
@ViewChild('canvas', {static: true}) canvas: ElementRef;
@ViewChild('wrap', {static: true}) wrap: ElementRef;
@Input()
isHasRect = true;
@Input()
......@@ -43,34 +44,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@Input()
isHasText = true;
@Input()
isHasAudio = true;
@Input()
isHasAnima = false;
@Input()
customTypeGroupArr; // [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean, animaNames:['name1', ..]}, ...]
@Input()
// hotZoneFontObj;
@Input()
isCopyData = false;
@Input()
isRotate = false;
hotZoneFontObj;
// hotZoneFontObj = {
// size: 50,
// name: 'ahronbd-1',
// color: '#8f3758'
// }
hotZoneFontObj = {
size: 50,
name: 'BRLNSR_1',
color: '#8f3758'
}
@Input()
defaultItemType = 'text';
@Input()
hotZoneImgSize = 0;
@Output()
save = new EventEmitter();
@Input()
hotZoneImgSize = 190;
saveDisabled = true;
......@@ -95,7 +78,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
canvasLeft;
canvasTop;
renderArr;
renderTopArr;
imgArr = [];
oldPos;
radioValue;
......@@ -104,45 +86,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSizeFlag = false;
changeTopSizeFlag = false;
changeRightSizeFlag = false;
animaPanelVisible = false;
uploadUrl;
uploadData;
skeJsonData = {};
texJsonData = {};
texPngData = {};
animaName = '';
curDragonBoneIndex;
curDragonBoneGIdx;
pasteData = '';
isSkeJsonLoading = false;
isTexJsonLoading = false;
isTexPngLoading = false;
isAnimaSmall = false;
savePropertyArr = [
'id',
'gIdx',
'selectType',
'labelText',
'posX',
'posY',
'mathLabel',
'checkbox',
'dropDownItem'
]
constructor(private nzMessageService: NzMessageService, private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
constructor() {
}
_bgItem = null;
......@@ -158,9 +103,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.init();
}
onResize(event) {
this.winResizeEventStream.next();
}
......@@ -168,14 +110,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
ngOnInit() {
this.initListener();
this.init();
// this.init();
this.update();
this.refresh();
}
ngOnDestroy() {
......@@ -191,20 +130,16 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess(e) {
console.log('e: ', e);
this.bgItem.url = e.url;
this.init();
// this.refreshBackground();
this.refreshBackground();
}
onItemImgUploadSuccess(e, item) {
item.pic_url = e.url;
this.loadHotZonePic(item, item.pic, e.url);
this.refresh();
this.loadHotZonePic(item.pic, e.url);
}
onItemAudioUploadSuccess(e, item) {
item.audio_url = e.url;
this.refresh();
}
......@@ -215,12 +150,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.renderArr.push(this.bg);
}
if (!this.bgItem.url) {
this.bgItem.url = 'http://teach.cdn.ireadabc.com/8ebb1858564340ea0936b83e3280ad7d.jpg';
}
const bg = this.bg;
// if (this.bgItem.url) {
if (this.bgItem.url) {
bg.load(this.bgItem.url).then(() => {
const rate1 = this.canvasWidth / bg.width;
......@@ -229,47 +160,27 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const rate = Math.min(rate1, rate2);
bg.setScaleXY(rate);
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
bg.removeChildren();
const bgBorder = new ShapeRectNew(this.ctx);
bgBorder.setSize(bg.width, bg.height, 0);
bgBorder.fillColor = '#ff0000';
bgBorder.fill = false;
bgBorder.stroke = true;
bgBorder.x = -bg.width / 2;
bgBorder.y = -bg.height / 2;
bgBorder.lineWidth = 0.5;
bg.addChild(bgBorder);
if (callBack) {
callBack();
}
this.refresh();
});
// }
}
}
addBtnClick(data=null) {
addBtnClick() {
// this.imgArr.push({});
// this.hotZoneArr.push({});
const item = this.getHotZoneItem(data);
const item = this.getHotZoneItem();
this.hotZoneArr.push(item);
if (this.customTypeGroupArr) {
this.refreshCustomItem(item);
} else {
this.refreshItem(item);
}
this.refreshHotZoneId();
......@@ -280,8 +191,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const item = this.hotZoneArr.splice(index, 1)[0];
removeItemFromArr(this.renderArr, item.pic);
removeItemFromArr(this.renderArr, item.textLabel);
removeItemFromArr(this.renderArr, item.drag);
removeItemFromArr(this.renderArr, item.centerDot);
this.refreshHotZoneId();
......@@ -290,7 +199,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onImgUploadSuccessByImg(e, img) {
img.pic_url = e.url;
this.refreshImage(img);
this.refresh();
}
refreshImage(img) {
......@@ -313,7 +221,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
this.refresh();
}
......@@ -330,6 +237,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
getHotZoneItem(saveData = null) {
const itemW = 200;
const itemH = 200;
const item = new HotZoneItem(this.ctx);
......@@ -337,18 +245,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.anchorX = 0.5;
item.anchorY = 0.5;
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
item.itemType = this.getDefaultItemType();
item.gIdx = '0';
item['id'] = this.createItemId() // new Date().getTime().toString();
item['data'] = saveData;
console.log('item.x: ', item.x);
item.itemType = this.defaultItemType;
if (saveData) {
......@@ -357,300 +257,41 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.scaleY = saveRect.height / item.height;
item.x = saveRect.x + saveRect.width / 2;
item.y = saveRect.y + saveRect.height / 2;
item.gIdx = saveData.gIdx;
item['id'] = saveData.id;
item['skeJsonData'] = saveData.skeJsonData;
item['texJsonData'] = saveData.texJsonData;
item['texPngData'] = saveData.texPngData;
item['actionData_' + item.gIdx] = saveData['actionData_' + item.gIdx];
this.savePropertyArr.forEach((key) => {
if (saveData[key]) {
item[key] = saveData[key];
}
})
}
console.log('item.x:~~ ', item.x);
item.showLineDash();
// const pic = new HotZoneImg(this.ctx);
this.setItemPic(item, saveData);
this.setItemLabel(item, saveData);
this.setItemAnima(item, saveData);
this.setItemDrag(item, saveData);
this.setItemCenterDot(item, saveData);
this.setItemMultRect(item, saveData);
return item;
}
setItemPic(item, saveData) {
console.log('in setItemPic ', saveData);
const pic = new EditorItem(this.ctx);
const pic = new HotZoneImg(this.ctx);
pic.visible = false;
item['pic'] = pic;
if (saveData) {
let picUrl = saveData.pic_url;
const actionData = saveData['actionData_' + item.gIdx];
if (actionData && actionData.type == 'pic') {
picUrl = actionData.pic_url;
}
console.log('saveData: ', saveData);
console.log('picUrl: ', picUrl);
if (picUrl) {
this.loadHotZonePic(item, pic, picUrl, saveData.imgScale);
}
if (saveData && saveData.pic_url) {
this.loadHotZonePic(pic, saveData.pic_url);
}
pic.x = item.x;
pic.y = item.y;
this.renderArr.push(pic);
}
setItemDrag(item, saveData) {
console.log('in setItemDrag ', saveData);
const dragItem = new DragItem(this.ctx);
dragItem.init();
dragItem.item = item;
item['drag'] = dragItem;
dragItem.visible = false;
dragItem.x = item.x;
dragItem.y = item.y;
this.renderArr.push(dragItem);
if (saveData) {
if (saveData.dragDot) {
dragItem.x = saveData.dragDot.x / saveData.mapScale * this.mapScale;
dragItem.y = saveData.dragDot.y / saveData.mapScale * this.mapScale;
}
}
}
setItemAnima(item, saveData) {
console.log('in setItemAnima ', saveData);
// const pic = new EditorItem(this.ctx);
// pic.visible = false;
// item['pic'] = pic;
// if (saveData) {
// let picUrl = saveData.pic_url;
// const actionData = saveData['actionData_' + item.gIdx];
// if (actionData && actionData.type == 'pic') {
// picUrl = actionData.pic_url;
// }
// console.log('saveData: ', saveData);
// console.log('picUrl: ', picUrl);
// if (picUrl) {
// this.loadHotZonePic(pic, picUrl, saveData.imgScale);
// }
// }
// pic.x = item.x;
// pic.y = item.y;
// this.renderArr.push(pic);
}
setItemCenterDot(item, saveData) {
console.log('in setItemDrag ', saveData);
const circle = new ShapeCircle(this.ctx);
circle.setRadius(6);
// circle.fillColor = '#9834ff'
item['centerDot'] = circle;
circle.visible = false;
circle.x = item.x;
circle.y = item.y;
this.renderArr.push(circle);
if (saveData) {
if (saveData.dragDot) {
circle.x = saveData.dragDot.x / saveData.mapScale * this.mapScale;
circle.y = saveData.dragDot.y / saveData.mapScale * this.mapScale;
}
}
}
setItemMultRect(item, saveData) {
console.log(" in setItemMultRect")
if (saveData && saveData.multRect) {
this.setItemMultRectByData(item, saveData.multRect);
console.log("multRect ~", saveData.multRect);
}
}
cleanMultRect(multRectArr) {
for (let i=0; i<multRectArr.length; i++) {
removeItemFromArr(this.renderTopArr, multRectArr[i]);
}
}
setItemMultRectByData(item, multRectDataArr) {
if (item.multRectArr) {
this.cleanMultRect(item.multRectArr);
}
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;
const arr = [];
for (let i=0; i<multRectDataArr.length; i++) {
const multRectData = multRectDataArr[i];
const multRectItem = new HotZoneMultRect(this.ctx);
multRectItem.showLineDash();
multRectItem.anchorX = 0.5;
multRectItem.anchorY = 0.5;
multRectItem.rectEdgeColor = multRectData.color;
multRectItem.showLabel("M-" + (i+1));
multRectItem.item = item;
multRectItem.visible = true;
if (!multRectData.rect) {
//无数据小矩形
multRectItem.setSize(multRectData.width, multRectData.height);
multRectItem.x = item.x + multRectItem.width * i * 0.3;
multRectItem.y = item.y + multRectItem.width * i * 0.3;
} else {
//有数据小矩形
console.log('multRectData.rect: ', multRectData.rect);
const saveRect = multRectData.rect;
saveRect.x *= rate;
saveRect.y *= rate;
saveRect.width *= rate;
saveRect.height *= rate;
saveRect.x += curBgRect.x;
saveRect.y += curBgRect.y;
multRectItem.setSize(saveRect.width, saveRect.height);
multRectItem.scaleX = saveRect.width / multRectItem.width;
multRectItem.scaleY = saveRect.height / multRectItem.height;
multRectItem.x = saveRect.x + saveRect.width / 2;
multRectItem.y = saveRect.y + saveRect.height / 2;
}
this.renderTopArr.push(multRectItem);
arr.push(multRectItem);
}
item.multRectArr = arr;
}
setItemLabel(item, saveData) {
const textLabel = new HotZoneLabel(this.ctx);
if (this.hotZoneFontObj) {
textLabel.fontSize = this.hotZoneFontObj.size;
textLabel.fontName = this.hotZoneFontObj.name;
textLabel.fontColor = this.hotZoneFontObj.color;
}
textLabel.textAlign = 'center';
// textLabel.setOutline();
// console.log('saveData:', saveData);
item['textLabel'] = textLabel;
textLabel.setScaleXY(this.mapScale);
if (saveData) {
if (saveData.text && this.hotZoneFontObj) {
textLabel.text = saveData.text
}
this.setActionFont(textLabel, saveData['actionData_' + item.gIdx]);
if (saveData && saveData.text) {
textLabel.text = saveData.text;
textLabel.refreshSize();
}
textLabel.x = item.x;
textLabel.y = item.y;
this.renderArr.push(textLabel);
}
setActionFont(textLabel, actionData) {
if (actionData && actionData.type == 'text') {
textLabel.text = actionData.text;
for (let i=0; i<actionData.changeOption.length; i++) {
const op = actionData.changeOption[i];
textLabel[op[0]] = op[1];
}
}
return item;
}
getDefaultItemType() {
if (this.customTypeGroupArr) {
const group = this.customTypeGroupArr[0];
if (group.rect) {
return 'rect';
}
if (group.pic) {
return 'pic';
}
if (group.text) {
return 'text';
}
} else {
return this.defaultItemType;
}
}
getPicItem(img, saveData = null) {
......@@ -686,11 +327,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.y = saveRect.y + saveRect.height / 2;
} else {
// item.showLineDash();
item.showLineDash();
}
item.showLineDash();
console.log('aaa');
});
return item;
}
......@@ -698,7 +337,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onAudioUploadSuccessByImg(e, img) {
img.audio_url = e.url;
this.refresh();
}
deleteItem(e, i) {
......@@ -707,145 +345,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId();
this.refresh();
}
// radioChange(e, item) {
// item.itemType = e;
// this.refreshItem(item);
// this.refresh();
// // console.log(' in radioChange e: ', e);
// }
customRadioChange(e, item) {
console.log('in customRadioChange', e);
item.gIdx = -1;
setTimeout(() => {
item.gIdx = e;
this.refreshCustomItem(item);
this.refresh();
}, 1);
// const curGroup = this.customTypeGroupArr[e];
}
refreshCustomItem(item) {
this.hideHotZoneItem(item);
const group = this.customTypeGroupArr[item.gIdx];
if (!group) {
return;
}
if (group.text) {
this.showItemLabel(item);
}
if (group.rect) {
this.showItemRect(item, !group.isFixed);
}
if (group.pic) {
this.showItemPic(item);
}
if (group.centerDot) {
console.log('item: ~~~~', item)
this.showItemCenterDot(item);
}
if (group.action) {
if (group.action.type == 'pic') {
this.showItemPic(item);
}
if (group.action.type == 'text') {
this.showItemLabel(item);
}
if (group.action.type == 'anima') {
this.showItemRect(item);
}
}
if (group.checkbox) {
if (!item.checkbox) {
item.checkbox = JSON.parse(JSON.stringify(group.checkbox)) ;
}
}
if (group.multRect) {
this.showItemMultRect();
}
item.drag.visible = group.drag;
item.setAnimaStyle(group.animaSmall)
}
showItemMultRect() {
}
showItemDrag(item) {
item.drag.visible = true;
// item.dragBody.visible = true;
// item.itemType = 'pic';
// this.showArrowTop(item)
}
showItemCenterDot(item) {
item.centerDot.visible = true;
}
showItemPic(item) {
item.pic.visible = true;
item.itemType = 'pic';
this.showArrowTop(item)
}
showItemLabel(item) {
item.textLabel.visible = true;
item.itemType = 'text';
this.showArrowTop(item)
}
showItemRect(item, isShowArrowTop = true) {
item.visible = true;
item.itemType = 'rect';
this.showArrowTop(item, isShowArrowTop)
}
radioChange(e, item) {
item.itemType = e;
showArrowTop(item, isShowArrowTop = false) {
if (isShowArrowTop) {
item.arrowTop.visible = true;
item.arrowRight.visible = true;
} else {
item.arrowTop.visible = false;
item.arrowRight.visible = false;
}
}
this.refreshItem(item);
hideHotZoneItem(item) {
item.visible = false;
item.pic.visible = false;
item.textLabel.visible = false;
item.centerDot.visible = false;
// console.log(' in radioChange e: ', e);
}
refreshItem(item) {
//弃用
switch (item.itemType) {
case 'rect':
this.setRectState(item);
......@@ -857,36 +368,33 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.setTextState(item);
break;
default:
this.setNoneState(item);
}
}
init() {
console.log('init');
this.initData();
this.initCtx();
this.initItem();
}
initItem() {
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
if (!this.bgItem) {
this.bgItem = {};
} else {
const oldId = this.initId;
this.refreshBackground(() => {
if (oldId != this.initId) {
return;
}
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
console.log(' in refreshBackground')
if (!this.hotZoneItemArr) {
this.hotZoneItemArr = [];
} else {
......@@ -896,7 +404,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
});
}
this.refresh();
}
initHotZoneArr() {
......@@ -920,7 +427,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr = [];
const arr = this.hotZoneItemArr.concat();
console.log('this.hotZoneItemArr: ', this.hotZoneItemArr);
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
......@@ -943,15 +449,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.pic_url = data.pic_url;
item.text = data.text;
item.itemType = data.itemType;
if (this.customTypeGroupArr) {
this.refreshCustomItem(item);
} else {
this.refreshItem(item);
}
console.log('1 item: ', item);
console.log('item: ', item);
this.hotZoneArr.push(item);
}
......@@ -962,22 +462,59 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
initId
initData() {
console.log(' in initData')
initImgArr() {
console.log('this.imgItemArr: ', this.imgItemArr);
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.imgArr = [];
const arr = this.imgItemArr.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);
}
this.refreshImageId();
}
initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW;
this.renderArr = [];
this.renderTopArr = [];
this.bg = null;
this.imgArr = [];
this.hotZoneArr = [];
this.initId = new Date().getTime();
}
initCtx() {
......@@ -991,44 +528,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.oldPos = {x: this.mx, y: this.my};
// 先检测拖拽点
for (let i = this.hotZoneArr.length - 1; i >= 0; i--) {
const item = this.hotZoneArr[i];
if (item && item.drag && item.drag.visible) {
if (this.checkClickTarget(item.drag)) {
this.clickedDragPoint(item.drag);
return;
}
}
}
// 检测多矩形
for (let i = this.hotZoneArr.length - 1; i >= 0; i--) {
const item = this.hotZoneArr[i];
if (item && item.multRectArr) {
for (let j=item.multRectArr.length - 1; j>=0; j--) {
if (this.checkClickTarget(item.multRectArr[j])) {
this.clickedMultRect(item.multRectArr[j]);
return;
}
}
}
}
for (let i = this.hotZoneArr.length - 1; i >= 0; i--) {
for (let i = 0; i < this.hotZoneArr.length; i++) {
const item = this.hotZoneArr[i];
console.log('mapDown item: ', item);
let callback;
let target;
switch (item.itemType) {
......@@ -1046,7 +548,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
break;
}
if (target && this.checkClickTarget(target)) {
if (this.checkClickTarget(target)) {
callback(target);
return;
}
......@@ -1076,18 +578,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const addY = this.my - this.oldPos.y;
this.curItem.x += addX;
this.curItem.y += addY;
this.curItem.posX = this.curItem.x;
this.curItem.posY = this.curItem.y;
}
this.oldPos = {x: this.mx, y: this.my};
// this.saveDisabled = false;
this.saveDisabled = true;
}
mapUp(event=null) {
mapUp(event) {
this.curItem = null;
this.changeSizeFlag = false;
this.changeTopSizeFlag = false;
......@@ -1186,13 +685,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeCurItem(item) {
console.log(' in changeCurItem', item)
this.hideAllLineDash();
this.curItem = item;
this.curItem.showLineDash();
}
hideAllLineDash() {
......@@ -1215,7 +711,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 清除画布内容
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;
......@@ -1224,20 +722,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// }
// }
for (let i = 0; i < this.renderArr.length; i++) {
this.renderArr[i].update(this);
}
this.updateArr(this.hotZoneArr);
this.updateArr(this.renderTopArr);
this.updatePos();
this.updatePos()
TWEEN.update();
......@@ -1347,9 +833,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
checkClickTarget(target) {
if (!target || !target.visible) {
return;
}
const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) {
return true;
......@@ -1368,21 +852,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick() {
const sendData = this.getSendData();
this.save.emit(sendData);
}
getSendData() {
const bgItem = this.bgItem;
if (this.bg) {
const rect = this.bg.getBoundingBox();
bgItem['rect'] = rect;
rect.x = Math.round(rect.x * 100) / 100;
rect.y = Math.round(rect.y * 100) / 100;
rect.width = Math.round(rect.width * 100) / 100;
rect.height = Math.round(rect.height * 100) / 100;
bgItem['rect'] = this.bg.getBoundingBox();
} else {
bgItem['rect'] = {
x: 0,
......@@ -1398,67 +870,19 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
for (let i = 0; i < hotZoneArr.length; i++) {
const hotZoneItem = {
id: hotZoneArr[i].id,
index: hotZoneArr[i].index,
pic_url: hotZoneArr[i].pic_url,
text: hotZoneArr[i].text,
audio_url: hotZoneArr[i].audio_url,
itemType: hotZoneArr[i].itemType,
fontSize: this.hotZoneFontObj.size,
fontName: this.hotZoneFontObj.name,
fontColor: this.hotZoneFontObj.color,
fontScale: hotZoneArr[i].textLabel ? hotZoneArr[i].textLabel.scaleX : 1,
imgScale: hotZoneArr[i].pic ? hotZoneArr[i].pic.scaleX : 1,
imgSizeW: hotZoneArr[i].pic ? hotZoneArr[i].pic.width : 0,
imgSizeH: hotZoneArr[i].pic ? hotZoneArr[i].pic.height : 0,
mapScale: this.mapScale,
skeJsonData: hotZoneArr[i].skeJsonData,
texJsonData: hotZoneArr[i].texJsonData,
texPngData: hotZoneArr[i].texPngData,
dragDot: hotZoneArr[i].drag.getPosition(),
gIdx: hotZoneArr[i].gIdx,
mapScale: this.mapScale
};
this.savePropertyArr.forEach((key) => {
if (hotZoneArr[i][key]) {
hotZoneItem[key] = hotZoneArr[i][key];
}
})
if (hotZoneArr[i].multRectArr) {
const tempArr = [];
hotZoneArr[i].multRectArr.forEach(element => {
const rectData = element.getBoundingBox();
rectData.x = Math.round((rectData.x - bgItem['rect'].x) * 100) / 100;
rectData.y = Math.round((rectData.y - bgItem['rect'].y) * 100) / 100;
rectData.width = Math.round((rectData.width) * 100) / 100;
rectData.height = Math.round((rectData.height) * 100) / 100;
const oneData = {rect: rectData, color: element.rectEdgeColor}
tempArr.push(oneData);
});
hotZoneItem['multRect'] = tempArr;
}
hotZoneItem['actionData_' + hotZoneItem.gIdx] = hotZoneArr[i]['actionData_' + hotZoneArr[i].gIdx]
if (this.hotZoneFontObj) {
hotZoneItem['fontSize'] = this.hotZoneFontObj.size;
hotZoneItem['fontName'] = this.hotZoneFontObj.name;
hotZoneItem['ontColor'] = this.hotZoneFontObj.color;
}
if (hotZoneArr[i].itemType == 'pic') {
hotZoneItem['rect'] = hotZoneArr[i].pic.getBoundingBox();
} else if (hotZoneArr[i].itemType == 'text') {
hotZoneArr[i].textLabel.refreshSize();
hotZoneItem['rect'] = hotZoneArr[i].textLabel.getLabelRect();
// hotZoneItem['rect'].width = hotZoneItem['rect'].width / hotZoneArr[i].textLabel.scaleX;
// hotZoneItem['rect'].height = hotZoneArr[i].textLabel.height * hotZoneArr[i].textLabel.scaleY;
} else {
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
}
// hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem['rect'].x = Math.round((hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
hotZoneItem['rect'].y = Math.round((hotZoneItem['rect'].y - bgItem['rect'].y) * 100) / 100;
hotZoneItem['rect'].width = Math.round((hotZoneItem['rect'].width) * 100) / 100;
......@@ -1470,361 +894,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console.log('hotZoneItemArr: ', hotZoneItemArr);
return {bgItem, hotZoneItemArr};
}
saveText(item) {
if (item.itemType == 'text') {
item.textLabel.text = item.text;
}
}
saveItemPos(item) {
console.log('item.posX: ', item.posX)
console.log('item.posY: ', item.posY)
item.x = Number(item.posX || 0)
item.y = Number(item.posY || 0)
this.changeCurItem(item);
this.curItem.x = Number(item.posX || 0);
this.curItem.y = Number(item.posY || 0);
this.mapUp();
}
onSaveCustomAction(e, item) {
const data = e;
item['actionData_' + item.gIdx] = data;
if (data.type == 'pic') {
let picUrl = data.pic_url;
if (picUrl) {
this.loadHotZonePic(item, item.pic, picUrl);
}
}
if (data.type == 'text') {
this.setActionFont(item.textLabel, data);
item.textLabel.refreshSize();
}
// if (data.type == 'anima') {
// this.setActionAnima(item.anima, data);
// }
// this.loadHotZonePic(item.pic, e.url);
this.refresh()
}
setActionAnima() {
}
setAnimaBtnClick(index) {
console.log('aaaa')
this.isAnimaSmall = false;
this.setCurDragonBone(index);
// this.curDragonBoneIndex = index;
// this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
// const {skeJsonData, texJsonData, texPngData} = this.hotZoneArr[index];
// this.skeJsonData = skeJsonData || {};
// this.texJsonData = texJsonData || {};
// this.texPngData = texPngData || {};
// this.animaPanelVisible = true;
// this.refresh();
}
setAnimaSmallBtnClick(index) {
console.log('bbb')
this.isAnimaSmall = true;
this.setCurDragonBone(index);
}
setCurDragonBone(index) {
this.curDragonBoneIndex = index;
this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
const {skeJsonData, texJsonData, texPngData} = this.hotZoneArr[index];
this.skeJsonData = skeJsonData || {};
this.texJsonData = texJsonData || {};
this.texPngData = texPngData || {};
this.animaPanelVisible = true;
this.refresh();
}
setItemSizeByAnima(jsonData, item) {
console.log('json: ', jsonData);
const request = new XMLHttpRequest();
//通过url获取文件,第二个选项是文件所在的具体地址
request.open('GET', jsonData.url, true);
request.send(null);
request.onreadystatechange = ()=> {
if (request.readyState === 4 && request.status === 200) {
var type = request.getResponseHeader('Content-Type');
if (type.indexOf("text") !== 1) {
//返回一个文件内容的对象
const data = JSON.parse(request.responseText);
console.log('request.responseText;', data)
const animaSize = data.armature[0].canvas;
item.width = animaSize.width;
item.height = animaSize.height;
// return request.responseText;
}
}
}
}
animaPanelCancel() {
this.animaPanelVisible = false;
this.refresh();
}
animaPanelOk() {
this.setItemDragonBoneData(this.hotZoneArr[this.curDragonBoneIndex]);
console.log('this.hotZoneArr: ', this.hotZoneArr);
this.animaPanelVisible = false;
if (this.isAnimaSmall) {
this.setItemSizeByAnima(this.skeJsonData, this.hotZoneArr[this.curDragonBoneIndex]);
}
this.refresh();
}
setItemDragonBoneData(item) {
item['skeJsonData'] = this.skeJsonData;
item['texJsonData'] = this.texJsonData;
item['texPngData'] = this.texPngData;
}
skeJsonHandleChange(e) {
console.log('e: ', e);
switch (e.type) {
case 'start':
this.isSkeJsonLoading = true;
break;
case 'success':
this.skeJsonData['url'] = e.file.response.url;
this.skeJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isSkeJsonLoading = false;
break;
case 'progress':
break;
}
}
texJsonHandleChange(e) {
console.log('e: ', e);
switch (e.type) {
case 'start':
this.isTexJsonLoading = true;
break;
case 'success':
this.texJsonData['url'] = e.file.response.url;
this.texJsonData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexJsonLoading = false;
break;
case 'progress':
break;
}
}
texPngHandleChange(e) {
console.log('e: ', e);
switch (e.type) {
case 'start':
this.isTexPngLoading = true;
break;
case 'success':
this.texPngData['url'] = e.file.response.url;
this.texPngData['name'] = e.file.name;
this.nzMessageService.success('上传成功');
this.isTexPngLoading = false;
break;
case 'progress':
break;
}
}
copyItem(it) {
const {hotZoneItemArr} = this.getSendData();
let itemData;
hotZoneItemArr.forEach((data) => {
if (data.id == it.id) {
itemData = JSON.parse( JSON.stringify(data) );
}
})
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);
const data = itemData
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;
const item = this.getHotZoneItem(data);
item.audio_url = data.audio_url;
item.pic_url = data.pic_url;
item.text = data.text;
item.itemType = data.itemType;
this.hotZoneArr.push(item);
if (this.customTypeGroupArr) {
this.refreshCustomItem(item);
} else {
this.refreshItem(item);
}
this.refreshHotZoneId();
item['id'] = this.createItemId();
}
createItemId() {
return new Date().getTime().toString();
}
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('导入失败');
}
this.save.emit({bgItem, hotZoneItemArr});
}
private updatePos() {
......@@ -1847,19 +917,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
break;
}
if (x != undefined && y != undefined) {
item.x = x;
item.y = y;
item.pic.x = x;
item.pic.y = y;
item.textLabel.x = x;
item.textLabel.y = y;
item.centerDot.x = x;
item.centerDot.y = y;
}
});
}
......@@ -1881,12 +944,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.textLabel.visible = true;
}
private setNoneState(item: any) {
item.visible = false;
item.pic.visible = false;
item.textLabel.visible = false;
}
private clickedHotZoneRect(item: any) {
if (this.checkClickTarget(item)) {
......@@ -1905,17 +962,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
private clickedHotZonePic(item: any) {
if (this.checkClickTarget(item)) {
if (item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
// this.changeItemTopSize(item);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
// this.changeItemRightSize(item);
} else {
this.changeCurItem(item);
}
this.curItem = item;
}
}
......@@ -1926,91 +972,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
private clickedMultRect(multRect: any) {
if (this.checkClickTarget(multRect)) {
if (multRect.lineDashFlag && this.checkClickTarget(multRect.arrow)) {
this.changeItemSize(multRect);
}
else if (multRect.lineDashFlag && this.checkClickTarget(multRect.arrowTop)) {
this.changeItemTopSize(multRect);
} else if (multRect.lineDashFlag && this.checkClickTarget(multRect.arrowRight)) {
this.changeItemRightSize(multRect);
} else {
this.changeCurItem(multRect);
}
return;
}
}
clickedDragPoint(item) {
this.curItem = item;
}
checkboxChange(checkbox, hzItem) {
console.log('checkbox: ', checkbox);
hzItem.checkbox = checkbox;
console.log('hzItem: ', hzItem);
}
dropdownClick(data, item) {
item.dropDownItem = data;
console.log("data: ", data);
console.log("item: ", item);
}
private loadHotZonePic(item, pic: HotZoneImg, url, scale = null) {
let baseLen;
if (this.hotZoneImgSize) {
baseLen = this.hotZoneImgSize * this.mapScale;
saveText(item) {
item.textLabel.text = item.text;
}
private loadHotZonePic(pic: HotZoneImg, url) {
const baseLen = this.hotZoneImgSize * this.mapScale;
pic.load(url).then(() => {
if (!scale) {
if (baseLen) {
scale = getMinScale(pic, baseLen);
} else {
scale = this.bg.scaleX;
}
pic.setScaleXY(scale);
} else {
const w = item.width * item.scaleX;
const h = item.height * item.scaleY;
pic.setScaleXY(getMinScale(pic, w, h));
}
const s = getMinScale(pic, baseLen);
pic.setScaleXY(s);
});
}
closeAfterPanel() {
this.refresh();
}
onMultRectSave(e, item) {
console.log(' in onMultRectSave: ', e);
item.multRect = e;
this.setItemMultRectByData(item, item.multRect);
}
/**
* 刷新 渲染页面
*/
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
......@@ -25,7 +25,6 @@
<app-custom-hot-zone
[bgItem]="item.bgItem"
[hotZoneItemArr]="item.hotZoneItemArr"
[customTypeGroupArr]="customTypeGroupArr"
(save)="saveHotZone(item, $event)"
>
</app-custom-hot-zone>
......
......@@ -26,64 +26,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
// 储存对象
item;
customTypeGroupArr = [
{
name: '连接点',
rect: true,
// isShowPos: true,
isCopy: true,
isShowPos: true,
centerDot: true,
// label: '答案',
},
{
name: '书写区',
rect: true,
isShowPos: true,
isCopy: true,
anima: true,
},
{
name: '画圈区',
rect: true,
isShowPos: true,
isCopy: true,
// anima: true,
},
{
name: '音频区',
rect: true,
audio: true,
isCopy: true,
},
{
name: '标记区',
rect: true,
isShowPos: true,
isCopy: true,
anima: true,
},
{
name: '涂色区',
anima: true,
// pic: true,
// isShowPos: true,
isCopy: true,
},
{
name: '书写图片',
pic: true,
// isShowPos: true,
isCopy: true,
},
{
name: '装饰图片',
pic: true,
// isShowPos: true,
isCopy: true,
},
];
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
}
......@@ -119,7 +61,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
const {bgItem, hotZoneItemArr} = e;
group.bgItem = bgItem;
group.hotZoneItemArr = hotZoneItemArr;
this.item.itemCombineGroup = [];
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