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]}]} 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 \ 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;"> <div #hotZoneRef class="p-image-children-editor" style="position: relative; padding-top: 50px;">
<h5 style="margin-left: 2.5%;"> preview: </h5> <h5 style="margin-left: 2.5%;"> preview: </h5>
<div #previewContainerRef style="height: 1200px; overflow: scroll;">
<div #previewBoxRef class="preview-box" #wrap> <div #previewBoxRef class="preview-box" #wrap>
<canvas id="canvas" #canvas></canvas> <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>
<div nz-row nzType="flex" nzAlign="middle"> <div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="5" nzOffset="1"> <div nz-col nzSpan="5" nzOffset="1">
...@@ -100,10 +109,10 @@ ...@@ -100,10 +109,10 @@
<div class="tool-item"> <div class="tool-item">
<span class="item-name">y:</span> <span class="item-name">y:</span>
<input class="edit" type="text" nz-input [(ngModel)]="currentSetting.y"> <input class="edit" type="text" nz-input [(ngModel)]="currentSetting.y">
</div> </div> -->
<div class="tool-item"> <div class="tool-item">
<button nz-button nzSize="mini" (click)="handleClickUpdateHotZoneParams()" nzType="primary">设置</button> <button nz-button nzSize="mini" (click)="handleClickUpdateHotZoneParams()" nzType="primary">设置</button>
</div> --> </div>
<div *ngIf="inLayoutMode" class="tool-items" style="margin-left: 10px;"> <div *ngIf="inLayoutMode" class="tool-items" style="margin-left: 10px;">
<div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="相同大小 (以第一个选择的热区为基准)" (click)="handleClickToSameSize()" class="icon-btn"> <div nz-tooltip nzTooltipPlacement="bottom" nzTooltipTitle="相同大小 (以第一个选择的热区为基准)" (click)="handleClickToSameSize()" class="icon-btn">
...@@ -149,7 +158,6 @@ ...@@ -149,7 +158,6 @@
</div> </div>
</div> </div>
<label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label> <label style="opacity: 0; position: absolute; top: 0px; font-family: 'BRLNSR_1'">1</label>
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
margin: auto; margin: auto;
width: 95%; width: 95%;
height: 100vw; height: 5000px;
position: relative;
border: 2px dashed #ddd; border: 2px dashed #ddd;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: #fafafa; background-color: #fafafa;
...@@ -152,6 +152,21 @@ h5 { ...@@ -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) { @media(max-width: 1260px) {
.hotzone-toolbox { .hotzone-toolbox {
.tool-items { .tool-items {
......
...@@ -40,7 +40,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -40,7 +40,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('hotZoneRef', {static: true}) hotZoneRef: ElementRef; @ViewChild('hotZoneRef', {static: true}) hotZoneRef: ElementRef;
@ViewChild('toolBoxRef', {static: true}) toolBoxRef: ElementRef; @ViewChild('toolBoxRef', {static: true}) toolBoxRef: ElementRef;
@ViewChild('previewBoxRef', {static: true}) previewBoxRef: ElementRef; @ViewChild('previewBoxRef', {static: true}) previewBoxRef: ElementRef;
@ViewChild('previewContainerRef', {static: true}) previewContainerRef: ElementRef;
@ViewChild('RightContextMenuOnCanvasRef', {static: true}) RightContextMenuOnCanvasRef: ElementRef;
@Input() @Input()
isHasRect = true; isHasRect = true;
...@@ -96,6 +97,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -96,6 +97,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 布局模式 // 布局模式
inLayoutMode = false; inLayoutMode = false;
// 右键菜单选择热区索引
rightMenuSlecetHotZoneIndex = null;
// 当前微调的对象 // 当前微调的对象
currentSetting = { currentSetting = {
index: -1, index: -1,
...@@ -130,7 +134,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -130,7 +134,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@HostListener('window:scroll') @HostListener('window:scroll')
onscroll(){ onscroll(){
const scrollTop = document.documentElement.scrollTop; // 页面顶端滚出屏幕的距离 const scrollTop = document.documentElement.scrollTop; // 页面顶端滚出屏幕的距离
const offsetHeight = this.previewBoxRef.nativeElement.offsetHeight; // 预览框的高度 const offsetHeight = this.previewContainerRef.nativeElement.offsetHeight; // 预览框的高度
const offsetTop = this.hotZoneRef.nativeElement.offsetTop; // 热区距离页面顶端的距离 const offsetTop = this.hotZoneRef.nativeElement.offsetTop; // 热区距离页面顶端的距离
if(scrollTop <= offsetTop || (scrollTop - offsetTop) > offsetHeight) { if(scrollTop <= offsetTop || (scrollTop - offsetTop) > offsetHeight) {
...@@ -142,20 +146,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -142,20 +146,31 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
} }
keyCtrlDown = false; // ctrl键是否被按下 // keyCtrlDown = false; // ctrl键是否被按下
@HostListener('window:keydown', ['$event']) // @HostListener('window:keydown', ['$event'])
onKeyDown(e) { // onKeyDown(e) {
console.log("onKeyDown", e.ctrlKey); // console.log("onKeyDown", e.keyCode);
if(e.keyCode == 91 || e.ctrlKey) { // if(e.keyCode == 91 || e.ctrlKey) {
this.keyCtrlDown = true; // this.keyCtrlDown = true;
} // }
} // }
@HostListener('window:keyup', ['$event']) // @HostListener('window:keyup', ['$event'])
onKeyUp(e) { // onKeyUp(e) {
console.log("onKeyUp", e.ctrlKey); // console.log("onKeyUp", e.keyCode);
if(e.keyCode == 91 || e.ctrlKey) { // if(e.keyCode == 91 || e.ctrlKey) {
this.keyCtrlDown = false; // 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() { ngOnInit() {
...@@ -164,7 +179,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -164,7 +179,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// this.init(); // this.init();
this.update(); this.update();
document.oncontextmenu = function () {return false; };
} }
ngOnDestroy() { ngOnDestroy() {
...@@ -178,22 +193,24 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -178,22 +193,24 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess(e) { onBackgroundUploadSuccess(e) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.bgItem.url = e.url; this.bgItem.url = e.url;
this.refreshBackground(); this.refreshBackground();
} }
onItemImgUploadSuccess(e, item) { onItemImgUploadSuccess(e, item) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
item.pic_url = e.url; item.pic_url = e.url;
this.loadHotZonePic(item.pic, e.url); this.loadHotZonePic(item.pic, e.url);
} }
onItemAudioUploadSuccess(e, item) { onItemAudioUploadSuccess(e, item) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
item.audio_url = e.url; item.audio_url = e.url;
} }
refreshBackground(callBack = null) { refreshBackground(callBack = null) {
if (!this.bg) { if (!this.bg) {
this.bg = new MySprite(this.ctx); this.bg = new MySprite(this.ctx);
this.renderArr.push(this.bg); this.renderArr.push(this.bg);
...@@ -201,7 +218,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -201,7 +218,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const bg = this.bg; const bg = this.bg;
if (this.bgItem.url) { if (this.bgItem.url) {
bg.load(this.bgItem.url).then(() => { bg.load(this.bgItem.url).then(() => {
const rate1 = this.canvasWidth / bg.width; const rate1 = this.canvasWidth / bg.width;
const rate2 = this.canvasHeight / bg.height; const rate2 = this.canvasHeight / bg.height;
...@@ -209,7 +225,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -209,7 +225,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const rate = Math.min(rate1, rate2); const rate = Math.min(rate1, rate2);
bg.setScaleXY(rate); bg.setScaleXY(rate);
bg.x = this.canvasWidth / 2; bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2; bg.y = this.canvasHeight / 2;
...@@ -229,12 +244,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -229,12 +244,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
this.refreshItem(item); this.refreshItem(item);
this.refreshHotZoneId(); this.refreshHotZoneId();
this.setDataChange(); // 标记数据改变 离开页面是提示保存
} }
addBtnClick() { addBtnClick() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
// this.imgArr.push({}); // this.imgArr.push({});
// this.hotZoneArr.push({}); // this.hotZoneArr.push({});
const item = this.getHotZoneItem(); const item = this.getHotZoneItem();
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
...@@ -245,7 +261,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -245,7 +261,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
deleteBtnClick(index) { deleteBtnClick(index) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
const item = this.hotZoneArr.splice(index, 1)[0]; const item = this.hotZoneArr.splice(index, 1)[0];
removeItemFromArr(this.renderArr, item.pic); removeItemFromArr(this.renderArr, item.pic);
removeItemFromArr(this.renderArr, item.textLabel); removeItemFromArr(this.renderArr, item.textLabel);
...@@ -255,6 +271,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -255,6 +271,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
onImgUploadSuccessByImg(e, img) { onImgUploadSuccessByImg(e, img) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
img.pic_url = e.url; img.pic_url = e.url;
this.refreshImage(img); this.refreshImage(img);
} }
...@@ -294,8 +311,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -294,8 +311,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
getHotZoneItem(saveData = null) { getHotZoneItem(saveData = null) {
const itemW = 200; const itemW = 200;
const itemH = 200; const itemH = 200;
const item = new HotZoneItem(this.ctx); const item = new HotZoneItem(this.ctx);
...@@ -351,11 +366,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -351,11 +366,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
getPicItem(img, saveData = null) { getPicItem(img, saveData = null) {
const item = new EditorItem(this.ctx); const item = new EditorItem(this.ctx);
item.load(img.pic_url).then(img => { item.load(img.pic_url).then(img => {
let maxW, maxH; let maxW, maxH;
if (this.bg) { if (this.bg) {
maxW = this.bg.width * this.bg.scaleX; maxW = this.bg.width * this.bg.scaleX;
...@@ -386,26 +398,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -386,26 +398,25 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else { } else {
item.showLineDash(); item.showLineDash();
} }
}); });
return item; return item;
} }
onAudioUploadSuccessByImg(e, img) { onAudioUploadSuccessByImg(e, img) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
img.audio_url = e.url; img.audio_url = e.url;
} }
deleteItem(e, i) { deleteItem(e, i) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
// this.imgArr.splice(i , 1); // this.imgArr.splice(i , 1);
// this.refreshImageId(); // this.refreshImageId();
this.hotZoneArr.splice(i, 1); this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId(); this.refreshHotZoneId();
} }
radioChange(e, item) { radioChange(e, item) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
item.itemType = e; item.itemType = e;
this.refreshItem(item); this.refreshItem(item);
} }
...@@ -422,16 +433,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -422,16 +433,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.setTextState(item); this.setTextState(item);
break; break;
default: default:
} }
} }
init() { init() {
this.initData(); this.initData();
this.initCtx(); this.initCtx();
this.initItem(); this.initItem();
} }
...@@ -447,7 +455,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -447,7 +455,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
}); });
} }
} }
initHotZoneArr() { initHotZoneArr() {
...@@ -467,7 +474,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -467,7 +474,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr = []; this.hotZoneArr = [];
const arr = this.hotZoneItemArr.concat(); const arr = this.hotZoneItemArr.concat();
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i])); const data = JSON.parse(JSON.stringify(arr[i]));
// const img = {pic_url: data.pic_url}; // const img = {pic_url: data.pic_url};
...@@ -492,16 +498,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -492,16 +498,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.refreshItem(item); this.refreshItem(item);
this.hotZoneArr.push(item); this.hotZoneArr.push(item);
} }
this.refreshHotZoneId(); this.refreshHotZoneId();
// this.refreshImageId(); // this.refreshImageId();
} }
initImgArr() { initImgArr() {
let curBgRect; let curBgRect;
if (this.bg) { if (this.bg) {
...@@ -541,7 +543,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -541,7 +543,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initData() { initData() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.mapScale = this.canvasWidth / this.canvasBaseW; this.mapScale = this.canvasWidth / this.canvasBaseW;
...@@ -560,7 +561,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -560,7 +561,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
mapDown(event) { mapDown(event) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
// 如果是鼠标右键 不响应
if(event.button == 2) {
return
}
const altKey = event.altKey;
this.oldPos = {x: this.mx, y: this.my}; this.oldPos = {x: this.mx, y: this.my};
for (let i = 0; i < this.hotZoneArr.length; i++) { for (let i = 0; i < this.hotZoneArr.length; i++) {
const item = this.hotZoneArr[i]; const item = this.hotZoneArr[i];
...@@ -582,16 +588,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -582,16 +588,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
if (this.checkClickTarget(target)) { if (this.checkClickTarget(target)) {
callback(target); callback(target, altKey);
return; return;
} }
} }
// 点击时没有按下Command键 则清空选择的热区点 // 点击时没有按下Command键 则清空选择的热区点
if(!this.keyCtrlDown) { if(!altKey) {
this.resetAllItemColors(); this.resetAllItemColors();
} }
this.hideContextMenuOnCanvas();
} }
...@@ -599,7 +606,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -599,7 +606,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
if (!this.curItem) { if (!this.curItem) {
return; return;
} }
this.setDataChange(); // 标记数据改变 离开页面是提示保存
if (this.changeSizeFlag) { if (this.changeSizeFlag) {
this.changeSize(); this.changeSize();
...@@ -624,6 +631,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -624,6 +631,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
mapUp(event) { mapUp(event) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.curItem = null; this.curItem = null;
this.changeSizeFlag = false; this.changeSizeFlag = false;
this.changeTopSizeFlag = false; this.changeTopSizeFlag = false;
...@@ -655,6 +663,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -655,6 +663,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
setCurItemSize(size) { setCurItemSize(size) {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
const curItem = this.hotZoneArr[size.index] const curItem = this.hotZoneArr[size.index]
if(size.width != null && !isNaN(size.width)) { if(size.width != null && !isNaN(size.width)) {
...@@ -680,13 +690,26 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -680,13 +690,26 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
curItem.refreshLabelScale(); 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() { changeTopSize() {
const rect = this.curItem.getBoundingBox(); const rect = this.curItem.getBoundingBox();
// let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2; // let lenW = ( this.mx - (rect.x + rect.width / 2) ) * 2;
let lenH = ((rect.y + rect.height / 2) - this.my) * 2; let lenH = ((rect.y + rect.height / 2) - this.my) * 2;
let minLen = 20; let minLen = 20;
let s; let s;
// if (lenW < lenH) { // if (lenW < lenH) {
...@@ -902,6 +925,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -902,6 +925,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick() { saveClick() {
this.resetDataChange(); // 已经保存 清除离开提示
const bgItem = this.bgItem; const bgItem = this.bgItem;
if (this.bg) { if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox(); bgItem['rect'] = this.bg.getBoundingBox();
...@@ -992,7 +1016,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -992,7 +1016,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.textLabel.visible = true; item.textLabel.visible = true;
} }
private clickedHotZoneRect(item: any) { private clickedHotZoneRect(item: any, altKey = false) {
if (this.checkClickTarget(item)) { if (this.checkClickTarget(item)) {
if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrow)) { if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrow)) {
this.changeItemSize(item); this.changeItemSize(item);
...@@ -1001,7 +1025,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1001,7 +1025,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} else if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrowRight)) { } else if (!this.inLayoutMode && item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
this.changeItemRightSize(item); this.changeItemRightSize(item);
} else { } else {
if(this.keyCtrlDown) { if(altKey) {
const bd = item.getBoundingBox() const bd = item.getBoundingBox()
const rectParams = { const rectParams = {
index: item.index, index: item.index,
...@@ -1067,6 +1091,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1067,6 +1091,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 顶部对齐所选元素 // 顶部对齐所选元素
handleClickAlignTop() { handleClickAlignTop() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let minY = -1; let minY = -1;
this.curItems.forEach(item=>{ this.curItems.forEach(item=>{
// 取所有元素中 y坐标最小值 // 取所有元素中 y坐标最小值
...@@ -1085,6 +1110,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1085,6 +1110,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 底部对齐所选元素 // 底部对齐所选元素
handleClickAlignBottom() { handleClickAlignBottom() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let maxY = 100000; let maxY = 100000;
this.curItems.forEach(item=>{ this.curItems.forEach(item=>{
// 取所有元素中 y坐标最大值 // 取所有元素中 y坐标最大值
...@@ -1102,6 +1128,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1102,6 +1128,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 左侧对齐所选元素 // 左侧对齐所选元素
handleClickAlignLeft() { handleClickAlignLeft() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let minX = -1; let minX = -1;
this.curItems.forEach(item=>{ this.curItems.forEach(item=>{
// 取所有元素中 y坐标最小值 // 取所有元素中 y坐标最小值
...@@ -1120,6 +1147,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1120,6 +1147,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 右侧对齐所选元素 // 右侧对齐所选元素
handleClickAlignRight() { handleClickAlignRight() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let maxX = 100000; let maxX = 100000;
this.curItems.forEach(item=>{ this.curItems.forEach(item=>{
// 取所有元素中 y坐标最大值 // 取所有元素中 y坐标最大值
...@@ -1137,6 +1165,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1137,6 +1165,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 水平居中所选元素 // 水平居中所选元素
handleClickHMiddle() { handleClickHMiddle() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let baseY = 0; let baseY = 0;
if(this.curItems.length > 0) { if(this.curItems.length > 0) {
baseY = this.curItems[0].y + this.curItems[0].height / 2; baseY = this.curItems[0].y + this.curItems[0].height / 2;
...@@ -1151,6 +1180,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1151,6 +1180,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 垂直居中所选元素 // 垂直居中所选元素
handleClickVMiddle() { handleClickVMiddle() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let baseX = 0; let baseX = 0;
if(this.curItems.length > 0) { if(this.curItems.length > 0) {
baseX = this.curItems[0].x + this.curItems[0].width / 2; baseX = this.curItems[0].x + this.curItems[0].width / 2;
...@@ -1165,6 +1195,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1165,6 +1195,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 水平间距相同 // 水平间距相同
handleClickHSpaceBetween() { handleClickHSpaceBetween() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.curItems.sort((a, b) => { this.curItems.sort((a, b) => {
return a.x - b.x return a.x - b.x
}) })
...@@ -1197,6 +1228,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1197,6 +1228,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 垂直间距相同 // 垂直间距相同
handleClickVSpaceBetween() { handleClickVSpaceBetween() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
this.curItems.sort((a, b) => { this.curItems.sort((a, b) => {
return a.y - b.y return a.y - b.y
}) })
...@@ -1229,6 +1261,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1229,6 +1261,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 使所有选择的热区和第一个选择的热区具有相同大小 // 使所有选择的热区和第一个选择的热区具有相同大小
handleClickToSameSize() { handleClickToSameSize() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存
let baseWidth = 0; let baseWidth = 0;
let baseHeight = 0; let baseHeight = 0;
if(this.curItems.length > 0) { if(this.curItems.length > 0) {
...@@ -1251,6 +1284,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1251,6 +1284,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// 处理微调更新热区位置参数 // 处理微调更新热区位置参数
handleClickUpdateHotZoneParams() { handleClickUpdateHotZoneParams() {
this.setDataChange(); // 标记数据改变 离开页面是提示保存ƒ√
this.setCurItemSize({ this.setCurItemSize({
index: this.currentSetting.index, index: this.currentSetting.index,
itemName: this.currentSetting.itemName, itemName: this.currentSetting.itemName,
...@@ -1268,6 +1302,43 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -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) { private clickedHotZonePic(item: any) {
if (this.checkClickTarget(item)) { if (this.checkClickTarget(item)) {
this.curItem = item; this.curItem = item;
...@@ -1284,6 +1355,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -1284,6 +1355,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.textLabel.text = item.text; item.textLabel.text = item.text;
} }
private loadHotZonePic(pic: HotZoneImg, url) { private loadHotZonePic(pic: HotZoneImg, url) {
const baseLen = this.hotZoneImgSize * this.mapScale; const baseLen = this.hotZoneImgSize * this.mapScale;
pic.load(url).then(() => { pic.load(url).then(() => {
......
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
</div> </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> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
</nz-table> </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> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
...@@ -190,7 +190,7 @@ ...@@ -190,7 +190,7 @@
</nz-table> </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> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
...@@ -239,7 +239,7 @@ ...@@ -239,7 +239,7 @@
</nz-table> </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> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
...@@ -283,7 +283,7 @@ ...@@ -283,7 +283,7 @@
</nz-table> </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> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
...@@ -333,7 +333,7 @@ ...@@ -333,7 +333,7 @@
</nz-table> </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> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
...@@ -401,7 +401,7 @@ ...@@ -401,7 +401,7 @@
</nz-table> </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> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
...@@ -446,7 +446,7 @@ ...@@ -446,7 +446,7 @@
</nz-table> </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> <thead>
<tr> <tr>
<th nzWidth="100px" nzAlign="center">序号</th> <th nzWidth="100px" nzAlign="center">序号</th>
......
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