Commit 7d7c923c authored by 李维's avatar 李维

热区配置加高,增加滚动条,增加右键菜单,修复表格超出10个不显示的问题

parent 6d673c18
export const defaultData = {"header_image_url":"http://teach.cdn.ireadabc.com/4a169f047cbec600fcb603d589a83c50.jpg","footer_image_url":"http://teach.cdn.ireadabc.com/665e4c3e6a80563b4c33dd7bbcd18014.jpg","hotZoneConfigArr":[{"hotZoneType":"3","linkHotZoneIndex":-1,"audio_url":"","score":"8","unselectedStyle":"mask","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"e8bd0458-4d7f-4e30-a5d4-ab5355308f88","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":true,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":0},{"uuid":"53977fcc-5801-47a1-9997-de549c1885ed","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":1}],"linkResultShowHotZoneIndex":2},{"hotZoneType":"3","linkHotZoneIndex":-1,"audio_url":"","score":"8","unselectedStyle":"mask","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"60e76541-72bb-4cb7-a5c8-a99ee1be669b","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":true,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":3},{"uuid":"564ef5ec-4034-4a54-9c39-98c52d08d78d","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":4}],"linkResultShowHotZoneIndex":5},{"hotZoneType":"3","linkHotZoneIndex":-1,"audio_url":"","score":"8","unselectedStyle":"mask","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"8b302db4-c949-45ba-9b1e-1f54af93cb16","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":true,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":6},{"uuid":"35ee9c98-6a6e-404a-872e-afeb3de67e61","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":7}],"linkResultShowHotZoneIndex":8},{"hotZoneType":"3","linkHotZoneIndex":-1,"audio_url":"","score":"8","unselectedStyle":"mask","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"e857d604-070a-472e-9e2c-d340dd5193d8","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":9},{"uuid":"aacc4bac-bdbb-4017-a6ca-ec5b8249916f","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":true,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":10}],"linkResultShowHotZoneIndex":11},{"hotZoneType":"5","linkHotZoneIndex":12,"audio_url":"","score":"8","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"Monday","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":13,"audio_url":"","score":"8","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"Tuesday","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":14,"audio_url":"","score":"8","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"Thursday","contentList":[]},{"hotZoneType":"5","linkHotZoneIndex":15,"audio_url":"","score":"8","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"Friday","contentList":[]},{"hotZoneType":"10","linkHotZoneIndex":16,"audio_url":"","score":"6","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"c22752f5-4e15-4605-809d-b7123aafe4c0","text":"are","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"3"},{"uuid":"c37a67bb-b6a8-4d27-8e5b-bd48e5843d25","text":"How","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"1"},{"uuid":"fdd2ab23-12c2-40d1-807c-dc07cd585e80","text":"old","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"2"},{"uuid":"8639a52c-3f03-4b3a-904d-ab42d38ba0f0","text":"you?","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"4"}],"linkResultShowHotZoneIndex":17},{"hotZoneType":"5","linkHotZoneIndex":18,"audio_url":"","score":"6","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"I'm","contentList":[]},{"hotZoneType":"10","linkHotZoneIndex":19,"audio_url":"","score":"6","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"221a3b0d-bdd0-4b26-a133-3f0f08748c20","text":"are","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"2"},{"uuid":"08560d80-5d5e-4363-875b-f1a8d652d16b","text":"How","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"1"},{"uuid":"2a080e55-4704-44cd-a75a-908965dbb233","text":"you?","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"3"}],"linkResultShowHotZoneIndex":20},{"hotZoneType":"5","linkHotZoneIndex":21,"audio_url":"","score":"6","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"I'm fine","contentList":[]},{"hotZoneType":"10","linkHotZoneIndex":22,"audio_url":"","score":"6","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"16d5c6b4-bbc8-4ccd-924d-4fe273408f80","text":"seven?","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"3"},{"uuid":"e681c7af-cb65-46b3-a3cb-9132bb51a3b9","text":"you","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"2"},{"uuid":"5227c05e-f024-44d6-9074-a08929f2d0d8","text":"Are","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"sortIndex":"1"}],"linkResultShowHotZoneIndex":23},{"hotZoneType":"5","linkHotZoneIndex":24,"audio_url":"","score":"6","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"No","contentList":[]}],"bgItem":{"url":"http://teach.cdn.ireadabc.com/0fa6befc1d2acda96596bc7241624c1a.jpg","rect":{"x":91.6174496644295,"y":0,"width":1254.765100671141,"height":1558}},"hotZoneItemArr":[{"index":0,"itemType":"rect","itemName":"1-2-1five","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":372.38,"y":254.5,"width":46,"height":27}},{"index":1,"itemType":"rect","itemName":"1-2-2four","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":442.88,"y":254.5,"width":53,"height":27}},{"index":2,"itemType":"rect","itemName":"1-2正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":329.38,"y":116,"width":30,"height":30}},{"index":3,"itemType":"rect","itemName":"1-3-1seven","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":592.38,"y":254.5,"width":80,"height":27}},{"index":4,"itemType":"rect","itemName":"1-3-2six","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":694.38,"y":254.5,"width":40,"height":27}},{"index":5,"itemType":"rect","itemName":"1-3正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":540.38,"y":116,"width":30,"height":30}},{"index":6,"itemType":"rect","itemName":"1-4-1two","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":818.38,"y":254.5,"width":50,"height":27}},{"index":7,"itemType":"rect","itemName":"1-4-2three","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":892.38,"y":254.5,"width":68,"height":27}},{"index":8,"itemType":"rect","itemName":"1-4正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":764.38,"y":115,"width":30,"height":30}},{"index":9,"itemType":"rect","itemName":"1-5-1nine","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":1041.88,"y":254.5,"width":57,"height":27}},{"index":10,"itemType":"rect","itemName":"1-5-2ten","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":1119.38,"y":254.5,"width":48,"height":27}},{"index":11,"itemType":"rect","itemName":"1-5正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":991.38,"y":115,"width":30,"height":30}},{"index":12,"itemType":"rect","itemName":"2-2Monday","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":375.38,"y":564,"width":200,"height":30}},{"index":13,"itemType":"rect","itemName":"2-3Tuesday","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":398.38,"y":623,"width":200,"height":30}},{"index":14,"itemType":"rect","itemName":"2-5 Thursday","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":402.38,"y":732,"width":220,"height":30}},{"index":15,"itemType":"rect","itemName":"2-6Friday ","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":367.38,"y":787,"width":200,"height":30}},{"index":16,"itemType":"rect","itemName":"How old are you? ","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":557.38,"y":1165.5,"width":370,"height":35}},{"index":17,"itemType":"rect","itemName":"3-2正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":514.38,"y":1168,"width":30,"height":30}},{"index":18,"itemType":"rect","itemName":"3-2文字","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":557.38,"y":1221.5,"width":200,"height":35}},{"index":19,"itemType":"rect","itemName":"How are you? ","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":557.38,"y":1275.5,"width":300,"height":35}},{"index":20,"itemType":"rect","itemName":"3-3正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":515.38,"y":1278,"width":30,"height":30}},{"index":21,"itemType":"rect","itemName":"3-3文字","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":557.38,"y":1330.5,"width":200,"height":35}},{"index":22,"itemType":"rect","itemName":"Are you seven?","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":557.38,"y":1385.5,"width":260,"height":35}},{"index":23,"itemType":"rect","itemName":"3-4正确","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":517.38,"y":1388,"width":30,"height":30}},{"index":24,"itemType":"rect","itemName":"3-4文字","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.1234375,"imgScale":1,"mapScale":1.1234375,"rect":{"x":558.38,"y":1441.5,"width":260,"height":35}}],"scoreConfigArr":[{"linkHotZoneIndex":-1,"linkHotZoneIndexArr":[0,1,2,3,4,5,6,7]},{"linkHotZoneIndex":-1,"linkHotZoneIndexArr":[8,9,10,11,12,13]}]}
\ No newline at end of file
export const defaultData = {"header_image_url":"http://teach.cdn.ireadabc.com/41e1a65d249d66c8c189a933ef72ebb9.jpg","footer_image_url":"http://teach.cdn.ireadabc.com/665e4c3e6a80563b4c33dd7bbcd18014.jpg","hotZoneItemArr":[{"index":0,"itemType":"rect","itemName":"1","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.2109375,"imgScale":1,"mapScale":1.2109375,"rect":{"x":303,"y":352.86,"width":200,"height":200}},{"index":1,"itemType":"rect","itemName":"2","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.2109375,"imgScale":1,"mapScale":1.2109375,"rect":{"x":779,"y":-95.14,"width":200,"height":200}},{"index":2,"itemType":"rect","itemName":"3","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.2109375,"imgScale":1,"mapScale":1.2109375,"rect":{"x":1350,"y":1805.86,"width":200,"height":200}},{"index":3,"itemType":"rect","itemName":"4","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.2109375,"imgScale":1,"mapScale":1.2109375,"rect":{"x":320,"y":1941.86,"width":200,"height":200}},{"index":4,"itemType":"rect","itemName":"res","fontSize":50,"fontName":"BRLNSR_1","fontColor":"#8f3758","fontScale":1.2109375,"imgScale":1,"mapScale":1.2109375,"rect":{"x":902,"y":811.86,"width":200,"height":200}}],"bgItem":{"url":"http://staging-teach.cdn.ireadabc.com/9dcf6a720171a2f79649849d4117ca56.png","rect":{"x":0,"y":1497.142857142857,"width":1550,"height":2001.7142857142858}},"hotZoneConfigArr":[{"hotZoneType":"4","linkHotZoneIndex":-1,"audio_url":"","score":"0","unselectedStyle":"none","selectedStyle":"border","rightOrWrongStyleType":"symbol","inputText":"","contentList":[{"uuid":"09ce6639-dd9f-4ede-acd1-7528ee0300ce","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":0},{"uuid":"9b28cf6d-0d1d-45d6-8344-2bd933e92eb6","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":1},{"uuid":"a19a64f6-640f-4071-abd5-989831275c64","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":2},{"uuid":"a9c86db6-dc87-4ee9-8ddc-a8210707cc8c","text":"","optionShowText":"","image_url":"","hotZoneIndex":null,"score":0,"isCorrect":false,"isCheck":false,"linkedShowText":"","selectStartHotZoneIndex":null,"selectEndHotZoneIndex":null,"selectEndHotZoneShowIndex":null,"selectHotZoneIndex":3}],"linkResultShowHotZoneIndex":4}],"scoreConfigArr":[{"linkHotZoneIndex":-1,"linkHotZoneIndexArr":[0,1,2,8,7,6,5,4,3]}],"alignMode":"left"}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<div #hotZoneRef class="p-image-children-editor" style="position: relative; padding-top: 50px;">
<h5 style="margin-left: 2.5%;"> preview: </h5>
<div #previewBoxRef class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas>
<div #previewContainerRef style="height: 1200px; overflow: scroll;">
<div #previewBoxRef class="preview-box" #wrap>
<canvas id="canvas" #canvas (contextmenu)="handleContextmenuOnMenu($event)"></canvas>
<div class="content-menu" #RightContextMenuOnCanvasRef>
<div class="title">移动热区到这里</div>
<nz-select class="select" nzShowSearch nzAllowClear [(ngModel)]="rightMenuSlecetHotZoneIndex" style="width: 180px;">
<nz-option *ngFor="let it of hotZoneArr; let i = index" [nzValue]="it.index" [nzLabel]="it.itemName"></nz-option>
</nz-select>
<button nz-button nzSize="mini" nzType="primary" (click)="handleClickMoveHotZoneByRightMenu()">确定</button>
</div>
</div>
</div>
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1">
......@@ -100,10 +109,10 @@
<div class="tool-item">
<span class="item-name">y:</span>
<input class="edit" type="text" nz-input [(ngModel)]="currentSetting.y">
</div>
</div> -->
<div class="tool-item">
<button nz-button nzSize="mini" (click)="handleClickUpdateHotZoneParams()" nzType="primary">设置</button>
</div> -->
</div>
<div *ngIf="inLayoutMode" class="tool-items" style="margin-left: 10px;">
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="相同大小 (以第一个选择的热区为基准)" (click)="handleClickToSameSize()" class="icon-btn">
......@@ -149,7 +158,6 @@
</div>
</div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
......@@ -13,8 +13,8 @@
margin: auto;
width: 95%;
height: 100vw;
height: 5000px;
position: relative;
border: 2px dashed #ddd;
border-radius: 0.5rem;
background-color: #fafafa;
......@@ -152,6 +152,21 @@ h5 {
}
}
.content-menu {
padding: 10px;
background-color: #EEEEEE;
color: #000000;
text-align: left;
display: none;
position: absolute;
.title {
margin-bottom: 10px;
}
.select {
margin-right: 10px;
}
}
@media(max-width: 1260px) {
.hotzone-toolbox {
.tool-items {
......
......@@ -40,7 +40,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('hotZoneRef', {static: true}) hotZoneRef: ElementRef;
@ViewChild('toolBoxRef', {static: true}) toolBoxRef: ElementRef;
@ViewChild('previewBoxRef', {static: true}) previewBoxRef: ElementRef;
@ViewChild('previewContainerRef', {static: true}) previewContainerRef: ElementRef;
@ViewChild('RightContextMenuOnCanvasRef', {static: true}) RightContextMenuOnCanvasRef: ElementRef;
@Input()
isHasRect = true;
......@@ -96,6 +97,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 布局模式
inLayoutMode = false;
// 右键菜单选择热区索引
rightMenuSlecetHotZoneIndex = null;
// 当前微调的对象
currentSetting = {
index: -1,
......@@ -130,7 +134,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@HostListener('window:scroll')
onscroll(){
const scrollTop = document.documentElement.scrollTop; // 页面顶端滚出屏幕的距离
const offsetHeight = this.previewBoxRef.nativeElement.offsetHeight; // 预览框的高度
const offsetHeight = this.previewContainerRef.nativeElement.offsetHeight; // 预览框的高度
const offsetTop = this.hotZoneRef.nativeElement.offsetTop; // 热区距离页面顶端的距离
if(scrollTop <= offsetTop || (scrollTop - offsetTop) > offsetHeight) {
......@@ -142,20 +146,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
keyCtrlDown = false; // ctrl键是否被按下
@HostListener('window:keydown', ['$event'])
onKeyDown(e) {
console.log("onKeyDown", e.ctrlKey);
if(e.keyCode == 91 || e.ctrlKey) {
this.keyCtrlDown = true;
}
}
@HostListener('window:keyup', ['$event'])
onKeyUp(e) {
console.log("onKeyUp", e.ctrlKey);
if(e.keyCode == 91 || e.ctrlKey) {
this.keyCtrlDown = false;
}
// keyCtrlDown = false; // ctrl键是否被按下
// @HostListener('window:keydown', ['$event'])
// onKeyDown(e) {
// console.log("onKeyDown", e.keyCode);
// if(e.keyCode == 91 || e.ctrlKey) {
// this.keyCtrlDown = true;
// }
// }
// @HostListener('window:keyup', ['$event'])
// onKeyUp(e) {
// console.log("onKeyUp", e.keyCode);
// if(e.keyCode == 91 || e.ctrlKey) {
// this.keyCtrlDown = false;
// }
// }
rightClickOffsetX = -1;
rightClickOffsetY = -1;
handleContextmenuOnMenu(e) {
this.RightContextMenuOnCanvasRef.nativeElement.style.display = "block";
this.RightContextMenuOnCanvasRef.nativeElement.style.position = "absolute";
this.RightContextMenuOnCanvasRef.nativeElement.style.top = e.offsetY + "px";
this.RightContextMenuOnCanvasRef.nativeElement.style.left = e.offsetX + "px";
this.rightClickOffsetX = e.offsetX;
this.rightClickOffsetY = e.offsetY;
}
ngOnInit() {
......@@ -164,7 +179,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// this.init();
this.update();
document.oncontextmenu = function () {return false; };
}
ngOnDestroy() {
......@@ -178,22 +193,24 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess(e) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.bgItem.url = e.url;
this.refreshBackground();
}
onItemImgUploadSuccess(e, item) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
item.pic_url = e.url;
this.loadHotZonePic(item.pic, e.url);
}
onItemAudioUploadSuccess(e, item) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
item.audio_url = e.url;
}
refreshBackground(callBack = null) {
if (!this.bg) {
this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg);
......@@ -201,7 +218,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const bg = this.bg;
if (this.bgItem.url) {
bg.load(this.bgItem.url).then(() => {
const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height;
......@@ -209,7 +225,6 @@ 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;
......@@ -229,12 +244,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr.push(item);
this.refreshItem(item);
this.refreshHotZoneId();
this.setDataChange(); // 标记数据改变 离开页面是提示保存
}
addBtnClick() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
// this.imgArr.push({});
// this.hotZoneArr.push({});
const item = this.getHotZoneItem();
this.hotZoneArr.push(item);
......@@ -245,7 +261,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
deleteBtnClick(index) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
const item = this.hotZoneArr.splice(index, 1)[0];
removeItemFromArr(this.renderArr, item.pic);
removeItemFromArr(this.renderArr, item.textLabel);
......@@ -255,6 +271,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
onImgUploadSuccessByImg(e, img) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
img.pic_url = e.url;
this.refreshImage(img);
}
......@@ -294,8 +311,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
getHotZoneItem(saveData = null) {
const itemW = 200;
const itemH = 200;
const item = new HotZoneItem(this.ctx);
......@@ -351,11 +366,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
getPicItem(img, saveData = null) {
const item = new EditorItem(this.ctx);
item.load(img.pic_url).then(img => {
let maxW, maxH;
if (this.bg) {
maxW = this.bg.width * this.bg.scaleX;
......@@ -386,26 +398,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else {
item.showLineDash();
}
});
return item;
}
onAudioUploadSuccessByImg(e, img) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
img.audio_url = e.url;
}
deleteItem(e, i) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
// this.imgArr.splice(i , 1);
// this.refreshImageId();
this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId();
}
radioChange(e, item) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
item.itemType = e;
this.refreshItem(item);
}
......@@ -422,16 +433,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.setTextState(item);
break;
default:
}
}
init() {
this.initData();
this.initCtx();
this.initItem();
}
......@@ -447,7 +455,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
});
}
}
initHotZoneArr() {
......@@ -467,7 +474,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr = [];
const arr = this.hotZoneItemArr.concat();
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url};
......@@ -492,16 +498,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.refreshItem(item);
this.hotZoneArr.push(item);
}
this.refreshHotZoneId();
// this.refreshImageId();
}
initImgArr() {
let curBgRect;
if (this.bg) {
......@@ -541,7 +543,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW;
......@@ -560,7 +561,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
mapDown(event) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
// 如果是鼠标右键 不响应
if(event.button == 2) {
return
}
const altKey = event.altKey;
this.oldPos = {x: this.mx, y: this.my};
for (let i = 0; i < this.hotZoneArr.length; i++) {
const item = this.hotZoneArr[i];
......@@ -582,16 +588,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
if (this.checkClickTarget(target)) {
callback(target);
callback(target, altKey);
return;
}
}
// 点击时没有按下Command键 则清空选择的热区点
if(!this.keyCtrlDown) {
if(!altKey) {
this.resetAllItemColors();
}
this.hideContextMenuOnCanvas();
}
......@@ -599,7 +606,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (!this.curItem) {
return;
}
this.setDataChange(); // 标记数据改变 离开页面是提示保存
if (this.changeSizeFlag) {
this.changeSize();
......@@ -624,6 +631,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
mapUp(event) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.curItem = null;
this.changeSizeFlag = false;
this.changeTopSizeFlag = false;
......@@ -655,6 +663,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
setCurItemSize(size) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
const curItem = this.hotZoneArr[size.index]
if(size.width != null && !isNaN(size.width)) {
......@@ -680,13 +690,26 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
curItem.refreshLabelScale();
}
// 根据索引 设置热区的位置
setHotZonePosByIndex(index, posX, posY) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
const curItem = this.hotZoneArr[index];
if(posX != null && !isNaN(posX)) {
curItem.x = Number(posX);
}
if(posY != null && !isNaN(posY)) {
curItem.y = Number(posY);
}
curItem.refreshLabelScale();
}
changeTopSize() {
const rect = this.curItem.getBoundingBox();
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let lenH = ((rect.y + rect.height / 2) - this.my) * 2;
let minLen = 20;
let s;
// if (lenW < lenH) {
......@@ -902,6 +925,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick() {
this.resetDataChange(); // 已经保存 清除离开提示
const bgItem = this.bgItem;
if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox();
......@@ -992,7 +1016,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.textLabel.visible = true;
}
private clickedHotZoneRect(item: any) {
private clickedHotZoneRect(item: any, altKey = false) {
if (this.checkClickTarget(item)) {
if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item);
......@@ -1001,7 +1025,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
this.changeItemRightSize(item);
} else {
if(this.keyCtrlDown) {
if(altKey) {
const bd = item.getBoundingBox()
const rectParams = {
index: item.index,
......@@ -1067,6 +1091,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 顶部对齐所选元素
handleClickAlignTop() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let minY = -1;
this.curItems.forEach(item=>{
// 取所有元素中 y坐标最小值
......@@ -1085,6 +1110,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 底部对齐所选元素
handleClickAlignBottom() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let maxY = 100000;
this.curItems.forEach(item=>{
// 取所有元素中 y坐标最大值
......@@ -1102,6 +1128,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 左侧对齐所选元素
handleClickAlignLeft() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let minX = -1;
this.curItems.forEach(item=>{
// 取所有元素中 y坐标最小值
......@@ -1120,6 +1147,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 右侧对齐所选元素
handleClickAlignRight() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let maxX = 100000;
this.curItems.forEach(item=>{
// 取所有元素中 y坐标最大值
......@@ -1137,6 +1165,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 水平居中所选元素
handleClickHMiddle() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let baseY = 0;
if(this.curItems.length > 0) {
baseY = this.curItems[0].y + this.curItems[0].height / 2;
......@@ -1151,6 +1180,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 垂直居中所选元素
handleClickVMiddle() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let baseX = 0;
if(this.curItems.length > 0) {
baseX = this.curItems[0].x + this.curItems[0].width / 2;
......@@ -1165,6 +1195,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 水平间距相同
handleClickHSpaceBetween() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.curItems.sort((a, b) => {
return a.x - b.x
})
......@@ -1197,6 +1228,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 垂直间距相同
handleClickVSpaceBetween() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.curItems.sort((a, b) => {
return a.y - b.y
})
......@@ -1229,6 +1261,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 使所有选择的热区和第一个选择的热区具有相同大小
handleClickToSameSize() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let baseWidth = 0;
let baseHeight = 0;
if(this.curItems.length > 0) {
......@@ -1251,6 +1284,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 处理微调更新热区位置参数
handleClickUpdateHotZoneParams() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存ƒ√
this.setCurItemSize({
index: this.currentSetting.index,
itemName: this.currentSetting.itemName,
......@@ -1268,6 +1302,43 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
});
}
// 根据右键菜单选择热区索引 移动热区
handleClickMoveHotZoneByRightMenu() {
if(this.rightMenuSlecetHotZoneIndex != null) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.setHotZonePosByIndex(
this.rightMenuSlecetHotZoneIndex,
this.rightClickOffsetX,
this.rightClickOffsetY
);
this.hideContextMenuOnCanvas();
}
}
// 隐藏右键菜单
hideContextMenuOnCanvas() {
this.rightClickOffsetX = -1;
this.rightClickOffsetY = -1;
this.rightMenuSlecetHotZoneIndex = null;
this.RightContextMenuOnCanvasRef.nativeElement.style.display = "none";
}
// 数据改变
setDataChange() {
// console.log("数据改变")
window.onbeforeunload = function(event) {
event.returnValue = "";
};
}
// 数据改变
resetDataChange() {
// console.log("数据保存")
window.onbeforeunload = function(event) {
};
}
private clickedHotZonePic(item: any) {
if (this.checkClickTarget(item)) {
this.curItem = item;
......@@ -1284,6 +1355,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.textLabel.text = item.text;
}
private loadHotZonePic(pic: HotZoneImg, url) {
const baseLen = this.hotZoneImgSize * this.mapScale;
pic.load(url).then(() => {
......
......@@ -76,7 +76,7 @@
</div>
<!-- 文字选项 -->
<nz-table *ngIf="it.hotZoneType == TEXT_SELECT" #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<nz-table *ngIf="it.hotZoneType == TEXT_SELECT" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
......@@ -140,7 +140,7 @@
</nz-table>
<!-- 判断对错 -->
<nz-table *ngIf="it.hotZoneType == RIGHT_OR_WRONG" #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<nz-table *ngIf="it.hotZoneType == RIGHT_OR_WRONG" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
......@@ -190,7 +190,7 @@
</nz-table>
<!-- 图片选项 -->
<nz-table *ngIf="it.hotZoneType == IMAGE_SELECT" #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<nz-table *ngIf="it.hotZoneType == IMAGE_SELECT" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
......@@ -239,7 +239,7 @@
</nz-table>
<!-- 热区单选 -->
<nz-table *ngIf="it.hotZoneType == HOT_ZONE_RADIO" #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<nz-table *ngIf="it.hotZoneType == HOT_ZONE_RADIO" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
......@@ -283,7 +283,7 @@
</nz-table>
<!-- 热区多选 -->
<nz-table *ngIf="it.hotZoneType == HOT_ZONE_CHECKBOX" #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<nz-table *ngIf="it.hotZoneType == HOT_ZONE_CHECKBOX" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
......@@ -333,7 +333,7 @@
</nz-table>
<!-- 连线题 -->
<nz-table *ngIf="it.hotZoneType == CONNECTION" #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<nz-table *ngIf="it.hotZoneType == CONNECTION" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
......@@ -401,7 +401,7 @@
</nz-table>
<!-- 纵横字谜 -->
<nz-table *ngIf="it.hotZoneType == CROSSWORD_PUZZLE" #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<nz-table *ngIf="it.hotZoneType == CROSSWORD_PUZZLE" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
......@@ -446,7 +446,7 @@
</nz-table>
<!-- 单词排序 -->
<nz-table *ngIf="it.hotZoneType == SORT_WORDS" #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<nz-table *ngIf="it.hotZoneType == SORT_WORDS" #contentTable [nzData]="it.contentList" [nzFrontPagination]="false" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
......
......@@ -161,7 +161,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
...it.contentList,
this.getDefaultConfigContentItem()
];
const lastIndex = it.contentList.length - 1;
const lastItem = it.contentList[lastIndex];
this.startHotZoneConfigEdit(lastIndex, lastItem);
......
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