Commit 5ef6151d authored by limingzhe's avatar limingzhe

fix: debug

parent df33b9cf
...@@ -29,6 +29,8 @@ import { CustomActionComponent } from './common/custom-action/custom-action.comp ...@@ -29,6 +29,8 @@ import { CustomActionComponent } from './common/custom-action/custom-action.comp
import { UploadDragonBoneComponent } from './common/upload-dragon-bone/upload-dragon-bone.component'; import { UploadDragonBoneComponent } from './common/upload-dragon-bone/upload-dragon-bone.component';
import { SubTemplateComponent } from './common/sub-template/sub-template.component'; import { SubTemplateComponent } from './common/sub-template/sub-template.component';
import {FormulaInputComponent} from './common/formula-input/formula-input.component'; import {FormulaInputComponent} from './common/formula-input/formula-input.component';
import { MultRectComponent } from './common/mult-rect/mult-rect.component';
registerLocaleData(zh); registerLocaleData(zh);
...@@ -51,6 +53,7 @@ registerLocaleData(zh); ...@@ -51,6 +53,7 @@ registerLocaleData(zh);
CustomActionComponent, CustomActionComponent,
UploadDragonBoneComponent, UploadDragonBoneComponent,
FormulaInputComponent, FormulaInputComponent,
MultRectComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
...@@ -1961,6 +1961,9 @@ export class HotZoneItem extends MySprite { ...@@ -1961,6 +1961,9 @@ export class HotZoneItem extends MySprite {
isAnimaStyle = false; isAnimaStyle = false;
rectFillColor = '#ffffff';
rectEdgeColor = '#1bfff7';
private _itemType; private _itemType;
private shapeRect: ShapeRect; private shapeRect: ShapeRect;
...@@ -1980,7 +1983,7 @@ export class HotZoneItem extends MySprite { ...@@ -1980,7 +1983,7 @@ export class HotZoneItem extends MySprite {
rect.x = -w / 2; rect.x = -w / 2;
rect.y = -h / 2; rect.y = -h / 2;
rect.setSize(w, h); rect.setSize(w, h);
rect.fillColor = '#ffffff'; rect.fillColor = this.rectFillColor;
rect.alpha = 0.2; rect.alpha = 0.2;
this.addChild(rect); this.addChild(rect);
} }
...@@ -2103,7 +2106,7 @@ export class HotZoneItem extends MySprite { ...@@ -2103,7 +2106,7 @@ export class HotZoneItem extends MySprite {
this.ctx.setLineDash([5, 5]); this.ctx.setLineDash([5, 5]);
this.ctx.lineWidth = 2; this.ctx.lineWidth = 2;
this.ctx.strokeStyle = '#1bfff7'; this.ctx.strokeStyle = this.rectEdgeColor;
// this.ctx.fillStyle = '#ffffff'; // this.ctx.fillStyle = '#ffffff';
this.ctx.beginPath(); this.ctx.beginPath();
......
...@@ -129,7 +129,15 @@ ...@@ -129,7 +129,15 @@
<div *ngIf="customTypeGroupArr[it.gIdx]?.mathLabel" align="center" style="margin-top: 5px; display: flex; align-items: center; justify-content: center;"> <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> <span style="width: 30%;">{{customTypeGroupArr[it.gIdx].mathLabel + ':'}}</span>
<app-formula-input [(ngfModel)]="it.mathLabel" ></app-formula-input> <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>
......
...@@ -130,6 +130,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -130,6 +130,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
'posY', 'posY',
'mathLabel', 'mathLabel',
'checkbox', 'checkbox',
'multRect'
] ]
...@@ -391,6 +392,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -391,6 +392,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.setItemCenterDot(item, saveData); this.setItemCenterDot(item, saveData);
this.setItemMultRect(item, saveData);
return item; return item;
} }
...@@ -495,6 +498,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -495,6 +498,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
setItemMultRect(item, saveData) {
if (saveData && saveData.itemMultRect) {
}
}
setItemLabel(item, saveData) { setItemLabel(item, saveData) {
...@@ -680,6 +689,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -680,6 +689,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
if (group.multRect) {
this.showItemMultRect();
}
item.drag.visible = group.drag; item.drag.visible = group.drag;
...@@ -687,6 +700,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -687,6 +700,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.setAnimaStyle(group.animaSmall) item.setAnimaStyle(group.animaSmall)
}
showItemMultRect() {
} }
showItemDrag(item) { showItemDrag(item) {
...@@ -736,6 +753,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -736,6 +753,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
refreshItem(item) { refreshItem(item) {
//弃用
switch (item.itemType) { switch (item.itemType) {
case 'rect': case 'rect':
this.setRectState(item); this.setRectState(item);
...@@ -1537,6 +1557,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1537,6 +1557,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
copyItem(it) { copyItem(it) {
const {hotZoneItemArr} = this.getSendData(); const {hotZoneItemArr} = this.getSendData();
...@@ -1813,6 +1834,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1813,6 +1834,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
closeAfterPanel() { closeAfterPanel() {
this.refresh(); this.refresh();
} }
onMultRectSave(e, item) {
console.log(' in onMultRectSave: ', e);
item.multRect = e;
}
/** /**
* 刷新 渲染页面 * 刷新 渲染页面
*/ */
......
<div >
<button nz-button (click)="setRectBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;">
<i nz-icon nzType="tool" nzTheme="outline"></i>
{{btnName}}
</button>
<!--配置龙骨面板-->
<nz-modal [(nzVisible)]="panelVisible" (nzAfterClose)="panelCancel()" nzTitle="配置多矩形集合"
(nzOnCancel)="panelCancel()" (nzOnOk)="panelOk()" nzOkText="保存">
<div *ngFor="let r of rectArr; let i = index" style="margin-top:5px; width:100%; height:40px; border-radius: 0.5rem; border: solid 2px #ccc;
display: flex; align-items:center; justify-content:space-between">
<div>
<span style="margin-left: 10px; font-weight: 600; font-size: 16px " >
{{'rect-' + (i+1)}}
</span>
</div>
<div>
<nz-radio-group [ngModel]="r.color" (ngModelChange)="radioChange($event, r)" style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
<div *ngFor="let colorData of colorArr; let j = index" style="display: flex; ">
<label nz-radio nzValue="{{colorData.color}}">{{colorData.name}}</label>
</div>
</nz-radio-group>
</div>
<div>
<button nz-button (click)="deleteRect(r)" nzType="danger" style=" margin-right: 5px;">
X
</button>
</div>
</div>
<button nz-button (click)="addRect()" nzType="dashed" style="margin-top: 20px; ">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加矩形
</button>
<!-- <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 && 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 && 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 && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
</div>
<div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0">
提示:需包含动画: {{animaNames.toString()}}.
</div> -->
</nz-modal>
</div>
<div style="justify-content:space-between">
</div>
\ No newline at end of file
import {ApplicationRef, Component, EventEmitter, Input, OnChanges, OnDestroy, Output} from '@angular/core';
import { NzMessageService, UploadXHRArgs, UploadFile } from 'ng-zorro-antd';
@Component({
selector: 'app-mult-rect',
templateUrl: './mult-rect.component.html',
styleUrls: ['./mult-rect.component.scss']
})
export class MultRectComponent implements OnDestroy, OnChanges {
uploading = false;
progress = 0;
@Input()
btnName = '配置多矩形集合';
@Input()
animaNames = [];
@Input()
rectArr = [];
@Output()
save = new EventEmitter();
@Output()
refreshEmitter = new EventEmitter();
uploadUrl;
uploadData;
panelVisible = false;
colorArr = [
{name: 'red', color: '#ff0000'},
{name: 'green', color: '#00ff00'},
{name: 'blue', color: '#0000ff'},
{name: 'yellow', color: '#ffff00'},
]
constructor(private appRef: ApplicationRef, private nzMessageService: NzMessageService) {
// this.uploadUrl = (<any> window).courseware.uploadUrl();
// this.uploadData = (<any> window).courseware.uploadData();
// window['air'].getUploadCallback = (url, data) => {
// this.uploadUrl = url;
// this.uploadData = data;
// };
}
ngOnChanges() {
}
radioChange(e, item) {
console.log('e: ', e);
item.color = e;
}
addRect() {
this.rectArr.push(
{
color: this.colorArr[0].color,
width: 20,
height: 20,
x: 20,
y: 20,
}
)
}
deleteRect(item) {
const index = this.rectArr.indexOf(item);
if (index != -1) {
this.rectArr.splice(index, 1);
}
}
/**
* 刷新 渲染页面
*/
refresh() {
// this.refreshEmitter.emit();
setTimeout(() => {
this.appRef.tick();
}, 1);
}
setRectBtnClick() {
this.panelVisible = true;
}
panelOk() {
this.save.emit(this.rectArr)
this.panelVisible = false;
}
panelCancel() {
this.panelVisible = false;
this.refresh();
}
ngOnDestroy() {
}
}
...@@ -22,7 +22,7 @@ import { removeItemFromArr } from '../play/Unit'; ...@@ -22,7 +22,7 @@ import { removeItemFromArr } from '../play/Unit';
export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit { export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
// 储存数据用 // 储存数据用
saveKey = "cc_mz_write_02_link"; saveKey = "cc_mz_write_02";
// 储存对象 // 储存对象
item; item;
// 公式键盘 // 公式键盘
...@@ -152,6 +152,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -152,6 +152,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
name: '画圈区域', name: '画圈区域',
rect: true, rect: true,
isCopy: true, isCopy: true,
multRect : true
}, },
{ {
......
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