Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
PicturePuzzle
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
PicturePuzzle
Commits
179003e3
Commit
179003e3
authored
Mar 13, 2020
by
李维
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
auto save
parent
a43a8344
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
34 additions
and
30 deletions
+34
-30
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+13
-15
custom-hot-zone.component.ts
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
+21
-10
upload-image-with-preview.component.ts
...image-with-preview/upload-image-with-preview.component.ts
+0
-3
form.component.ts
src/app/form/form.component.ts
+0
-2
No files found.
src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
179003e3
...
@@ -2,10 +2,18 @@
...
@@ -2,10 +2,18 @@
<div
style=
"float: left; width: 25%;border-right: 2px solid #ddd; border-bottom: 2px solid #ddd;"
>
<div
style=
"float: left; width: 25%;border-right: 2px solid #ddd; border-bottom: 2px solid #ddd;"
>
<h5
style=
"margin-left: 2.5%;"
>
预览:
</h5>
<h5
style=
"margin-left: 2.5%;"
>
预览:
</h5>
<div
style=
"width: 100%;background-color: #FF0;"
>
<div
class=
"preview-box"
#
wrap
style=
"width: 200px; height: 300px;
"
>
<div
class=
"preview-box"
#
wrap
style=
"margin-bottom: 20px
"
>
<canvas
id=
"canvas"
#
canvas
></canvas>
<canvas
id=
"canvas"
#
canvas
></canvas>
</div>
</div>
</div>
<div
style=
"text-align: center"
>
<button
nz-button
nzType=
"primary"
[
nzSize
]="'
small
'"
nzShape=
"round"
(
click
)="
saveClick
()"
[
disabled
]="!
hotZoneChanged
"
>
<i
nz-icon
type=
"save"
></i>
Save
</button>
</div>
<h5
style=
"border-top: 2px solid #ddd;"
>
背景图:
</h5>
<h5
style=
"border-top: 2px solid #ddd;"
>
背景图:
</h5>
<div
style=
"width: 200px;margin: auto;"
>
<div
style=
"width: 200px;margin: auto;"
>
...
@@ -78,16 +86,6 @@
...
@@ -78,16 +86,6 @@
<nz-divider></nz-divider>
<nz-divider></nz-divider>
<div
class=
"save-box"
>
<div
class=
"save-box"
>
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
<i
nz-icon
type=
"save"
></i>
Save
</button>
</div>
</div>
</div>
</div>
src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
179003e3
...
@@ -84,7 +84,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -84,7 +84,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSizeFlag
=
false
;
changeSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
hotZoneChanged
=
false
;
constructor
()
{
constructor
()
{
...
@@ -106,7 +106,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -106,7 +106,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
window
.
cancelAnimationFrame
(
this
.
animationId
);
window
.
cancelAnimationFrame
(
this
.
animationId
);
}
}
ngOnChanges
()
{
ngOnChanges
()
{
}
}
...
@@ -114,6 +113,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -114,6 +113,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onBackgroundUploadSuccess
(
e
)
{
onBackgroundUploadSuccess
(
e
)
{
this
.
bgItem
.
url
=
e
.
url
;
this
.
bgItem
.
url
=
e
.
url
;
this
.
refreshBackground
();
this
.
refreshBackground
();
this
.
autoSave
()
}
}
refreshBackground
(
callBack
=
null
)
{
refreshBackground
(
callBack
=
null
)
{
...
@@ -144,7 +144,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -144,7 +144,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
item
=
this
.
getHotZoneItem
();
const
item
=
this
.
getHotZoneItem
();
this
.
hotZoneArr
.
push
(
item
);
this
.
hotZoneArr
.
push
(
item
);
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
// console.log('hotZoneArr:', this.hotZoneArr);
this
.
autoSave
()
}
}
handleMoveItemUp
(
event
,
index
){
handleMoveItemUp
(
event
,
index
){
...
@@ -153,6 +153,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -153,6 +153,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
else
{
}
else
{
this
.
hotZoneArr
.
push
(
this
.
hotZoneArr
.
shift
());
this
.
hotZoneArr
.
push
(
this
.
hotZoneArr
.
shift
());
}
}
this
.
autoSave
()
}
}
handleMoveItemDown
(
event
,
index
){
handleMoveItemDown
(
event
,
index
){
...
@@ -161,6 +162,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -161,6 +162,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
else
{
}
else
{
this
.
hotZoneArr
.
unshift
(
this
.
hotZoneArr
.
splice
(
index
,
1
)[
0
]);
this
.
hotZoneArr
.
unshift
(
this
.
hotZoneArr
.
splice
(
index
,
1
)[
0
]);
}
}
this
.
autoSave
()
}
}
onImgUploadSuccessByImg
(
e
,
item
)
{
onImgUploadSuccessByImg
(
e
,
item
)
{
...
@@ -168,7 +170,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -168,7 +170,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
setScaleXY
(
Math
.
min
(
100
/
w
,
150
/
h
))
item
.
setScaleXY
(
Math
.
min
(
100
/
w
,
150
/
h
))
})
})
item
.
pic_url
=
e
.
url
;
item
.
pic_url
=
e
.
url
;
this
.
refreshImage
(
item
);
item
.
image_url
=
e
.
url
;
this
.
refreshImage
(
item
);
this
.
autoSave
()
}
}
onAudioUploadSuccess
(
e
,
item
,
isCardAudio
)
{
onAudioUploadSuccess
(
e
,
item
,
isCardAudio
)
{
...
@@ -177,6 +181,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -177,6 +181,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
else
{
}
else
{
item
.
audio_url
=
e
.
url
;
item
.
audio_url
=
e
.
url
;
}
}
this
.
autoSave
()
}
}
refreshImage
(
img
)
{
refreshImage
(
img
)
{
...
@@ -185,7 +190,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -185,7 +190,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
refreshImageId
();
this
.
refreshImageId
();
}
}
refreshHotZoneId
()
{
refreshHotZoneId
()
{
for
(
let
i
=
0
;
i
<
this
.
hotZoneArr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
this
.
hotZoneArr
.
length
;
i
++
)
{
this
.
hotZoneArr
[
i
].
index
=
i
;
this
.
hotZoneArr
[
i
].
index
=
i
;
...
@@ -270,11 +274,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -270,11 +274,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onAudioUploadSuccessByImg
(
e
,
img
)
{
onAudioUploadSuccessByImg
(
e
,
img
)
{
img
.
audio_url
=
e
.
url
;
img
.
audio_url
=
e
.
url
;
this
.
autoSave
()
}
}
deleteItem
(
e
,
i
)
{
deleteItem
(
e
,
i
)
{
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
this
.
autoSave
()
}
}
init
()
{
init
()
{
...
@@ -403,8 +409,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -403,8 +409,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
else
{
}
else
{
this
.
changeCurItem
(
item
);
this
.
changeCurItem
(
item
);
}
}
this
.
hotZoneChanged
=
true
;
return
;
return
;
}
}
}
}
}
}
}
}
...
@@ -621,7 +629,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -621,7 +629,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
checkClickTarget
(
target
)
{
checkClickTarget
(
target
)
{
const
rect
=
target
.
getBoundingBox
();
const
rect
=
target
.
getBoundingBox
();
if
(
this
.
checkPointInRect
(
this
.
mx
,
this
.
my
,
rect
))
{
if
(
this
.
checkPointInRect
(
this
.
mx
,
this
.
my
,
rect
))
{
return
true
;
return
true
;
...
@@ -638,9 +645,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -638,9 +645,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
return
false
;
return
false
;
}
}
autoSave
()
{
saveClick
()
{
console
.
log
(
"
Auto save
"
)
const
bgItem
=
this
.
bgItem
;
const
bgItem
=
this
.
bgItem
;
if
(
this
.
bg
)
{
if
(
this
.
bg
)
{
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
...
@@ -651,7 +657,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -651,7 +657,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
hotZoneItemArr
=
[];
const
hotZoneItemArr
=
[];
const
hotZoneArr
=
this
.
hotZoneArr
;
const
hotZoneArr
=
this
.
hotZoneArr
;
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
const
hotZoneItem
=
{
const
hotZoneItem
=
{
index
:
hotZoneArr
[
i
].
index
,
index
:
hotZoneArr
[
i
].
index
,
};
};
...
@@ -667,5 +672,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -667,5 +672,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
hotZoneItemArr
.
push
(
hotZoneItem
);
hotZoneItemArr
.
push
(
hotZoneItem
);
}
}
this
.
save
.
emit
({
bgItem
,
hotZoneItemArr
});
this
.
save
.
emit
({
bgItem
,
hotZoneItemArr
});
this
.
hotZoneChanged
=
false
;
}
saveClick
()
{
console
.
log
(
"
Saved
"
)
this
.
autoSave
()
}
}
}
}
src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts
View file @
179003e3
...
@@ -45,9 +45,6 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
...
@@ -45,9 +45,6 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
handleChange
(
info
:
{
type
:
string
,
file
:
UploadFile
,
event
:
any
}):
void
{
handleChange
(
info
:
{
type
:
string
,
file
:
UploadFile
,
event
:
any
}):
void
{
console
.
log
(
'
info:
'
,
info
);
switch
(
info
.
type
)
{
switch
(
info
.
type
)
{
case
'
start
'
:
case
'
start
'
:
// this.isUploading = true;
// this.isUploading = true;
...
...
src/app/form/form.component.ts
View file @
179003e3
...
@@ -54,11 +54,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -54,11 +54,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
saveData
(
e
){
saveData
(
e
){
console
.
log
(
"
HotZone保存
"
,
e
)
this
.
bgItem
=
e
.
bgItem
;
this
.
bgItem
=
e
.
bgItem
;
this
.
hotZoneItemArr
.
length
=
0
;
this
.
hotZoneItemArr
.
length
=
0
;
e
.
hotZoneItemArr
.
forEach
(
item
=>
{
e
.
hotZoneItemArr
.
forEach
(
item
=>
{
console
.
log
(
item
)
this
.
hotZoneItemArr
.
push
(
item
)
this
.
hotZoneItemArr
.
push
(
item
)
});
});
this
.
save
();
this
.
save
();
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment