Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
D
dg28_drag
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
dg28_drag
Commits
a50b292e
Commit
a50b292e
authored
Dec 14, 2023
by
Tt
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
表单上传
parent
7b571c77
Changes
20
Hide whitespace changes
Inline
Side-by-side
Showing
20 changed files
with
4885 additions
and
1467 deletions
+4885
-1467
angular.json
form/angular.json
+1
-1
package-lock.json
form/package-lock.json
+110
-110
app.module.ts
form/src/app/app.module.ts
+18
-16
audio-recorder.component.html
...c/app/common/audio-recorder/audio-recorder.component.html
+10
-11
audio-recorder.component.scss
...c/app/common/audio-recorder/audio-recorder.component.scss
+3
-12
audio-recorder.component.ts
...src/app/common/audio-recorder/audio-recorder.component.ts
+18
-50
custom-action.component.html
...src/app/common/custom-action/custom-action.component.html
+157
-0
custom-action.component.scss
...src/app/common/custom-action/custom-action.component.scss
+110
-0
custom-action.component.ts
form/src/app/common/custom-action/custom-action.component.ts
+220
-0
Unit.ts
form/src/app/common/custom-hot-zone/Unit.ts
+184
-791
Units.ts
form/src/app/common/custom-hot-zone/Units.ts
+2502
-0
custom-hot-zone.component.html
...app/common/custom-hot-zone/custom-hot-zone.component.html
+165
-21
custom-hot-zone.component.scss
...app/common/custom-hot-zone/custom-hot-zone.component.scss
+6
-105
custom-hot-zone.component.ts
...c/app/common/custom-hot-zone/custom-hot-zone.component.ts
+776
-121
upload-image-with-preview.component.ts
...image-with-preview/upload-image-with-preview.component.ts
+17
-0
upload-video.component.ts
form/src/app/common/upload-video/upload-video.component.ts
+21
-39
ComponentBase.ts
form/src/app/form/ComponentBase.ts
+7
-5
form.component.html
form/src/app/form/form.component.html
+126
-141
form.component.ts
form/src/app/form/form.component.ts
+222
-44
mataFormCreator.ts
form/src/app/form/mataFormCreator.ts
+212
-0
No files found.
form/angular.json
View file @
a50b292e
...
@@ -130,6 +130,6 @@
...
@@ -130,6 +130,6 @@
},
},
"defaultProject"
:
"ng-template-generator"
,
"defaultProject"
:
"ng-template-generator"
,
"cli"
:
{
"cli"
:
{
"analytics"
:
"5f501d82-8f25-4817-a608-9ac70d1f1f70"
"analytics"
:
false
}
}
}
}
\ No newline at end of file
form/package-lock.json
View file @
a50b292e
...
@@ -1780,7 +1780,7 @@
...
@@ -1780,7 +1780,7 @@
},
},
"abbrev"
:
{
"abbrev"
:
{
"version"
:
"1.1.1"
,
"version"
:
"1.1.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/abbrev/-/abbrev-1.1.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/abbrev/-/abbrev-1.1.1.tgz"
,
"integrity"
:
"sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
"integrity"
:
"sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
},
},
"accepts"
:
{
"accepts"
:
{
...
@@ -1907,8 +1907,8 @@
...
@@ -1907,8 +1907,8 @@
},
},
"amdefine"
:
{
"amdefine"
:
{
"version"
:
"1.0.1"
,
"version"
:
"1.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/amdefine/-/amdefine-1.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/amdefine/-/amdefine-1.0.1.tgz"
,
"integrity"
:
"sha
512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg=
="
"integrity"
:
"sha
1-SlKCrBZHKek2Gbz9OtFR+BfOkfU
="
},
},
"ansi-colors"
:
{
"ansi-colors"
:
{
"version"
:
"3.2.4"
,
"version"
:
"3.2.4"
,
...
@@ -1981,7 +1981,7 @@
...
@@ -1981,7 +1981,7 @@
},
},
"are-we-there-yet"
:
{
"are-we-there-yet"
:
{
"version"
:
"1.1.7"
,
"version"
:
"1.1.7"
,
"resolved"
:
"https://registry.npm
mirror.com
/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz"
,
"integrity"
:
"sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g=="
,
"integrity"
:
"sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g=="
,
"requires"
:
{
"requires"
:
{
"delegates"
:
"^1.0.0"
,
"delegates"
:
"^1.0.0"
,
...
@@ -2033,8 +2033,8 @@
...
@@ -2033,8 +2033,8 @@
},
},
"array-find-index"
:
{
"array-find-index"
:
{
"version"
:
"1.0.2"
,
"version"
:
"1.0.2"
,
"resolved"
:
"https://registry.npm
mirror.com
/array-find-index/-/array-find-index-1.0.2.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/array-find-index/-/array-find-index-1.0.2.tgz"
,
"integrity"
:
"sha
512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw=
="
"integrity"
:
"sha
1-3wEKoSh+Fku9pvlyOwqWoexBh6E
="
},
},
"array-flatten"
:
{
"array-flatten"
:
{
"version"
:
"2.1.2"
,
"version"
:
"2.1.2"
,
...
@@ -2174,8 +2174,8 @@
...
@@ -2174,8 +2174,8 @@
},
},
"async-foreach"
:
{
"async-foreach"
:
{
"version"
:
"0.1.3"
,
"version"
:
"0.1.3"
,
"resolved"
:
"https://registry.npm
mirror.com
/async-foreach/-/async-foreach-0.1.3.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/async-foreach/-/async-foreach-0.1.3.tgz"
,
"integrity"
:
"sha
512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA=
="
"integrity"
:
"sha
1-NhIfhFwFeBct5Bmpfb6x0W7DRUI
="
},
},
"async-limiter"
:
{
"async-limiter"
:
{
"version"
:
"1.0.1"
,
"version"
:
"1.0.1"
,
...
@@ -2408,8 +2408,8 @@
...
@@ -2408,8 +2408,8 @@
},
},
"block-stream"
:
{
"block-stream"
:
{
"version"
:
"0.0.9"
,
"version"
:
"0.0.9"
,
"resolved"
:
"https://registry.npm
mirror.com
/block-stream/-/block-stream-0.0.9.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/block-stream/-/block-stream-0.0.9.tgz"
,
"integrity"
:
"sha
512-OorbnJVPII4DuUKbjARAe8u8EfqOmkEEaSFIyoQ7OjTHn6kafxWl0wLgoZ2rXaYd7MyLcDaU4TmhfxtwgcccMQ=
="
,
"integrity"
:
"sha
1-E+v+d4oDIFz+A3UUgeu0szAMEmo
="
,
"requires"
:
{
"requires"
:
{
"inherits"
:
"~2.0.0"
"inherits"
:
"~2.0.0"
}
}
...
@@ -2838,8 +2838,8 @@
...
@@ -2838,8 +2838,8 @@
},
},
"camelcase-keys"
:
{
"camelcase-keys"
:
{
"version"
:
"2.1.0"
,
"version"
:
"2.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/camelcase-keys/-/camelcase-keys-2.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/camelcase-keys/-/camelcase-keys-2.1.0.tgz"
,
"integrity"
:
"sha
512-bA/Z/DERHKqoEOrp+qeGKw1QlvEQkGZSc0XaY6VnTxZr+Kv1G5zFwttpjv8qxZ/sBPT4nthwZaAcsAZTJlSKXQ=
="
,
"integrity"
:
"sha
1-MIvur/3ygRkFHvodkyITyRuPkuc
="
,
"requires"
:
{
"requires"
:
{
"camelcase"
:
"^2.0.0"
,
"camelcase"
:
"^2.0.0"
,
"map-obj"
:
"^1.0.0"
"map-obj"
:
"^1.0.0"
...
@@ -2847,8 +2847,8 @@
...
@@ -2847,8 +2847,8 @@
"dependencies"
:
{
"dependencies"
:
{
"camelcase"
:
{
"camelcase"
:
{
"version"
:
"2.1.1"
,
"version"
:
"2.1.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/camelcase/-/camelcase-2.1.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/camelcase/-/camelcase-2.1.1.tgz"
,
"integrity"
:
"sha
512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw=
="
"integrity"
:
"sha
1-fB0W1nmhu+WcoCys7PsBHiAfWh8
="
}
}
}
}
},
},
...
@@ -3302,8 +3302,8 @@
...
@@ -3302,8 +3302,8 @@
},
},
"console-control-strings"
:
{
"console-control-strings"
:
{
"version"
:
"1.1.0"
,
"version"
:
"1.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/console-control-strings/-/console-control-strings-1.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/console-control-strings/-/console-control-strings-1.1.0.tgz"
,
"integrity"
:
"sha
512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ=
="
"integrity"
:
"sha
1-PXz0Rk22RG6mRL9LOVB/mFEAjo4
="
},
},
"constants-browserify"
:
{
"constants-browserify"
:
{
"version"
:
"1.0.0"
,
"version"
:
"1.0.0"
,
...
@@ -3800,8 +3800,8 @@
...
@@ -3800,8 +3800,8 @@
},
},
"currently-unhandled"
:
{
"currently-unhandled"
:
{
"version"
:
"0.4.1"
,
"version"
:
"0.4.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/currently-unhandled/-/currently-unhandled-0.4.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/currently-unhandled/-/currently-unhandled-0.4.1.tgz"
,
"integrity"
:
"sha
512-/fITjgjGU50vjQ4FH6eUoYu+iUoUKIXws2hL15JJpIR+BbTxaXQsMuuyjtNh2WqsSBS5nsaZHFsFecyw5CCAng=
="
,
"integrity"
:
"sha
1-mI3zP+qxke95mmE2nddsF635V+o
="
,
"requires"
:
{
"requires"
:
{
"array-find-index"
:
"^1.0.1"
"array-find-index"
:
"^1.0.1"
}
}
...
@@ -4059,8 +4059,8 @@
...
@@ -4059,8 +4059,8 @@
},
},
"delegates"
:
{
"delegates"
:
{
"version"
:
"1.0.0"
,
"version"
:
"1.0.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/delegates/-/delegates-1.0.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/delegates/-/delegates-1.0.0.tgz"
,
"integrity"
:
"sha
512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ=
="
"integrity"
:
"sha
1-hMbhWbgZBP3KWaDvRM2HDTElD5o
="
},
},
"depd"
:
{
"depd"
:
{
"version"
:
"1.1.2"
,
"version"
:
"1.1.2"
,
...
@@ -5207,7 +5207,7 @@
...
@@ -5207,7 +5207,7 @@
},
},
"fstream"
:
{
"fstream"
:
{
"version"
:
"1.0.12"
,
"version"
:
"1.0.12"
,
"resolved"
:
"https://registry.npm
mirror.com
/fstream/-/fstream-1.0.12.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/fstream/-/fstream-1.0.12.tgz"
,
"integrity"
:
"sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg=="
,
"integrity"
:
"sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg=="
,
"requires"
:
{
"requires"
:
{
"graceful-fs"
:
"^4.1.2"
,
"graceful-fs"
:
"^4.1.2"
,
...
@@ -5256,8 +5256,8 @@
...
@@ -5256,8 +5256,8 @@
},
},
"gauge"
:
{
"gauge"
:
{
"version"
:
"2.7.4"
,
"version"
:
"2.7.4"
,
"resolved"
:
"https://registry.npm
mirror.com
/gauge/-/gauge-2.7.4.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/gauge/-/gauge-2.7.4.tgz"
,
"integrity"
:
"sha
512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg=
="
,
"integrity"
:
"sha
1-LANAXHU4w51+s3sxcCLjJfsBi/c
="
,
"requires"
:
{
"requires"
:
{
"aproba"
:
"^1.0.3"
,
"aproba"
:
"^1.0.3"
,
"console-control-strings"
:
"^1.0.0"
,
"console-control-strings"
:
"^1.0.0"
,
...
@@ -5271,16 +5271,16 @@
...
@@ -5271,16 +5271,16 @@
"dependencies"
:
{
"dependencies"
:
{
"is-fullwidth-code-point"
:
{
"is-fullwidth-code-point"
:
{
"version"
:
"1.0.0"
,
"version"
:
"1.0.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz"
,
"integrity"
:
"sha
512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw=
="
,
"integrity"
:
"sha
1-754xOG8DGn8NZDr4L95QxFfvAMs
="
,
"requires"
:
{
"requires"
:
{
"number-is-nan"
:
"^1.0.0"
"number-is-nan"
:
"^1.0.0"
}
}
},
},
"string-width"
:
{
"string-width"
:
{
"version"
:
"1.0.2"
,
"version"
:
"1.0.2"
,
"resolved"
:
"https://registry.npm
mirror.com
/string-width/-/string-width-1.0.2.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/string-width/-/string-width-1.0.2.tgz"
,
"integrity"
:
"sha
512-0XsVpQLnVCXHJfyEs8tC0zpTVIr5PKKsQtkT29IwupnPTjtPmQ3xT/4yCREF9hYkV/3M3kzcUTSAZT6a6h81tw=
="
,
"integrity"
:
"sha
1-EYvfW4zcUaKn5w0hHgfisLmxB9M
="
,
"requires"
:
{
"requires"
:
{
"code-point-at"
:
"^1.0.0"
,
"code-point-at"
:
"^1.0.0"
,
"is-fullwidth-code-point"
:
"^1.0.0"
,
"is-fullwidth-code-point"
:
"^1.0.0"
,
...
@@ -5291,7 +5291,7 @@
...
@@ -5291,7 +5291,7 @@
},
},
"gaze"
:
{
"gaze"
:
{
"version"
:
"1.1.3"
,
"version"
:
"1.1.3"
,
"resolved"
:
"https://registry.npm
mirror.com
/gaze/-/gaze-1.1.3.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/gaze/-/gaze-1.1.3.tgz"
,
"integrity"
:
"sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g=="
,
"integrity"
:
"sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g=="
,
"requires"
:
{
"requires"
:
{
"globule"
:
"^1.0.0"
"globule"
:
"^1.0.0"
...
@@ -5316,8 +5316,8 @@
...
@@ -5316,8 +5316,8 @@
},
},
"get-stdin"
:
{
"get-stdin"
:
{
"version"
:
"4.0.1"
,
"version"
:
"4.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/get-stdin/-/get-stdin-4.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/get-stdin/-/get-stdin-4.0.1.tgz"
,
"integrity"
:
"sha
512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw=
="
"integrity"
:
"sha
1-uWjGsKBDhDJJAui/Gl3zJXmkUP4
="
},
},
"get-stream"
:
{
"get-stream"
:
{
"version"
:
"4.1.0"
,
"version"
:
"4.1.0"
,
...
@@ -5419,7 +5419,7 @@
...
@@ -5419,7 +5419,7 @@
},
},
"globule"
:
{
"globule"
:
{
"version"
:
"1.3.3"
,
"version"
:
"1.3.3"
,
"resolved"
:
"https://registry.npm
mirror.com
/globule/-/globule-1.3.3.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/globule/-/globule-1.3.3.tgz"
,
"integrity"
:
"sha512-mb1aYtDbIjTu4ShMB85m3UzjX9BVKe9WCzsnfMSZk+K5GpIbBOexgg4PPCt5eHDEG5/ZQAUX2Kct02zfiPLsKg=="
,
"integrity"
:
"sha512-mb1aYtDbIjTu4ShMB85m3UzjX9BVKe9WCzsnfMSZk+K5GpIbBOexgg4PPCt5eHDEG5/ZQAUX2Kct02zfiPLsKg=="
,
"requires"
:
{
"requires"
:
{
"glob"
:
"~7.1.1"
,
"glob"
:
"~7.1.1"
,
...
@@ -5524,8 +5524,8 @@
...
@@ -5524,8 +5524,8 @@
},
},
"has-unicode"
:
{
"has-unicode"
:
{
"version"
:
"2.0.1"
,
"version"
:
"2.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/has-unicode/-/has-unicode-2.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/has-unicode/-/has-unicode-2.0.1.tgz"
,
"integrity"
:
"sha
512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ=
="
"integrity"
:
"sha
1-4Ob+aijPUROIVeCG0Wkedx3iqLk
="
},
},
"has-value"
:
{
"has-value"
:
{
"version"
:
"1.0.0"
,
"version"
:
"1.0.0"
,
...
@@ -5918,7 +5918,7 @@
...
@@ -5918,7 +5918,7 @@
},
},
"in-publish"
:
{
"in-publish"
:
{
"version"
:
"2.0.1"
,
"version"
:
"2.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/in-publish/-/in-publish-2.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/in-publish/-/in-publish-2.0.1.tgz"
,
"integrity"
:
"sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ=="
"integrity"
:
"sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ=="
},
},
"indent-string"
:
{
"indent-string"
:
{
...
@@ -6228,7 +6228,7 @@
...
@@ -6228,7 +6228,7 @@
},
},
"is-finite"
:
{
"is-finite"
:
{
"version"
:
"1.1.0"
,
"version"
:
"1.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/is-finite/-/is-finite-1.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/is-finite/-/is-finite-1.1.0.tgz"
,
"integrity"
:
"sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w=="
"integrity"
:
"sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w=="
},
},
"is-fullwidth-code-point"
:
{
"is-fullwidth-code-point"
:
{
...
@@ -6358,8 +6358,8 @@
...
@@ -6358,8 +6358,8 @@
},
},
"is-utf8"
:
{
"is-utf8"
:
{
"version"
:
"0.2.1"
,
"version"
:
"0.2.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/is-utf8/-/is-utf8-0.2.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/is-utf8/-/is-utf8-0.2.1.tgz"
,
"integrity"
:
"sha
512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q=
="
"integrity"
:
"sha
1-Sw2hRCEE0bM2NA6AeX6GXPOffXI
="
},
},
"is-windows"
:
{
"is-windows"
:
{
"version"
:
"1.0.2"
,
"version"
:
"1.0.2"
,
...
@@ -6918,8 +6918,8 @@
...
@@ -6918,8 +6918,8 @@
},
},
"load-json-file"
:
{
"load-json-file"
:
{
"version"
:
"1.1.0"
,
"version"
:
"1.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/load-json-file/-/load-json-file-1.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/load-json-file/-/load-json-file-1.1.0.tgz"
,
"integrity"
:
"sha
512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A=
="
,
"integrity"
:
"sha
1-lWkFcI1YtLq0wiYbBPWfMcmTdMA
="
,
"requires"
:
{
"requires"
:
{
"graceful-fs"
:
"^4.1.2"
,
"graceful-fs"
:
"^4.1.2"
,
"parse-json"
:
"^2.2.0"
,
"parse-json"
:
"^2.2.0"
,
...
@@ -6930,21 +6930,21 @@
...
@@ -6930,21 +6930,21 @@
"dependencies"
:
{
"dependencies"
:
{
"parse-json"
:
{
"parse-json"
:
{
"version"
:
"2.2.0"
,
"version"
:
"2.2.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/parse-json/-/parse-json-2.2.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/parse-json/-/parse-json-2.2.0.tgz"
,
"integrity"
:
"sha
512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ=
="
,
"integrity"
:
"sha
1-9ID0BDTvgHQfhGkJn43qGPVaTck
="
,
"requires"
:
{
"requires"
:
{
"error-ex"
:
"^1.2.0"
"error-ex"
:
"^1.2.0"
}
}
},
},
"pify"
:
{
"pify"
:
{
"version"
:
"2.3.0"
,
"version"
:
"2.3.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/pify/-/pify-2.3.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/pify/-/pify-2.3.0.tgz"
,
"integrity"
:
"sha
512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=
="
"integrity"
:
"sha
1-7RQaasBDqEnqWISY59yosVMw6Qw
="
},
},
"strip-bom"
:
{
"strip-bom"
:
{
"version"
:
"2.0.0"
,
"version"
:
"2.0.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/strip-bom/-/strip-bom-2.0.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/strip-bom/-/strip-bom-2.0.0.tgz"
,
"integrity"
:
"sha
512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g=
="
,
"integrity"
:
"sha
1-YhmoVhZSBJHzV4i9vxRHqZx+aw4
="
,
"requires"
:
{
"requires"
:
{
"is-utf8"
:
"^0.2.0"
"is-utf8"
:
"^0.2.0"
}
}
...
@@ -7050,8 +7050,8 @@
...
@@ -7050,8 +7050,8 @@
},
},
"loud-rejection"
:
{
"loud-rejection"
:
{
"version"
:
"1.6.0"
,
"version"
:
"1.6.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/loud-rejection/-/loud-rejection-1.6.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/loud-rejection/-/loud-rejection-1.6.0.tgz"
,
"integrity"
:
"sha
512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ=
="
,
"integrity"
:
"sha
1-W0b4AUft7leIcPCG0Eghz5mOVR8
="
,
"requires"
:
{
"requires"
:
{
"currently-unhandled"
:
"^0.4.1"
,
"currently-unhandled"
:
"^0.4.1"
,
"signal-exit"
:
"^3.0.0"
"signal-exit"
:
"^3.0.0"
...
@@ -7185,8 +7185,8 @@
...
@@ -7185,8 +7185,8 @@
},
},
"map-obj"
:
{
"map-obj"
:
{
"version"
:
"1.0.1"
,
"version"
:
"1.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/map-obj/-/map-obj-1.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/map-obj/-/map-obj-1.0.1.tgz"
,
"integrity"
:
"sha
512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg=
="
"integrity"
:
"sha
1-2TPOuSBdgr3PSIb2dCvcK03qFG0
="
},
},
"map-visit"
:
{
"map-visit"
:
{
"version"
:
"1.0.0"
,
"version"
:
"1.0.0"
,
...
@@ -7243,8 +7243,8 @@
...
@@ -7243,8 +7243,8 @@
},
},
"meow"
:
{
"meow"
:
{
"version"
:
"3.7.0"
,
"version"
:
"3.7.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/meow/-/meow-3.7.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/meow/-/meow-3.7.0.tgz"
,
"integrity"
:
"sha
512-TNdwZs0skRlpPpCUK25StC4VH+tP5GgeY1HQOOGP+lQ2xtdkN2VtT/5tiX9k3IWpkBPV9b3LsAWXn4GGi/PrSA=
="
,
"integrity"
:
"sha
1-cstmi0JSKCkKu/qFaJJYcwioAfs
="
,
"requires"
:
{
"requires"
:
{
"camelcase-keys"
:
"^2.0.0"
,
"camelcase-keys"
:
"^2.0.0"
,
"decamelize"
:
"^1.1.2"
,
"decamelize"
:
"^1.1.2"
,
...
@@ -7776,7 +7776,7 @@
...
@@ -7776,7 +7776,7 @@
},
},
"node-gyp"
:
{
"node-gyp"
:
{
"version"
:
"3.8.0"
,
"version"
:
"3.8.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/node-gyp/-/node-gyp-3.8.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/node-gyp/-/node-gyp-3.8.0.tgz"
,
"integrity"
:
"sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA=="
,
"integrity"
:
"sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA=="
,
"requires"
:
{
"requires"
:
{
"fstream"
:
"^1.0.0"
,
"fstream"
:
"^1.0.0"
,
...
@@ -7795,12 +7795,12 @@
...
@@ -7795,12 +7795,12 @@
"dependencies"
:
{
"dependencies"
:
{
"semver"
:
{
"semver"
:
{
"version"
:
"5.3.0"
,
"version"
:
"5.3.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/semver/-/semver-5.3.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/semver/-/semver-5.3.0.tgz"
,
"integrity"
:
"sha
512-mfmm3/H9+67MCVix1h+IXTpDwL6710LyHuk7+cWC9T1mE0qz4iHhh6r4hU2wrIT9iTsAAC2XQRvfblL028cpLw=
="
"integrity"
:
"sha
1-myzl094C0XxgEq0yaqa00M9U+U8
="
},
},
"tar"
:
{
"tar"
:
{
"version"
:
"2.2.2"
,
"version"
:
"2.2.2"
,
"resolved"
:
"https://registry.npm
mirror.com
/tar/-/tar-2.2.2.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/tar/-/tar-2.2.2.tgz"
,
"integrity"
:
"sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA=="
,
"integrity"
:
"sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA=="
,
"requires"
:
{
"requires"
:
{
"block-stream"
:
"*"
,
"block-stream"
:
"*"
,
...
@@ -7857,7 +7857,7 @@
...
@@ -7857,7 +7857,7 @@
},
},
"node-sass"
:
{
"node-sass"
:
{
"version"
:
"4.14.1"
,
"version"
:
"4.14.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/node-sass/-/node-sass-4.14.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/node-sass/-/node-sass-4.14.1.tgz"
,
"integrity"
:
"sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g=="
,
"integrity"
:
"sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g=="
,
"requires"
:
{
"requires"
:
{
"async-foreach"
:
"^0.1.3"
,
"async-foreach"
:
"^0.1.3"
,
...
@@ -7881,13 +7881,13 @@
...
@@ -7881,13 +7881,13 @@
"dependencies"
:
{
"dependencies"
:
{
"ansi-styles"
:
{
"ansi-styles"
:
{
"version"
:
"2.2.1"
,
"version"
:
"2.2.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/ansi-styles/-/ansi-styles-2.2.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/ansi-styles/-/ansi-styles-2.2.1.tgz"
,
"integrity"
:
"sha
512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=
="
"integrity"
:
"sha
1-tDLdM1i2NM914eRmQ2gkBTPB3b4
="
},
},
"chalk"
:
{
"chalk"
:
{
"version"
:
"1.1.3"
,
"version"
:
"1.1.3"
,
"resolved"
:
"https://registry.npm
mirror.com
/chalk/-/chalk-1.1.3.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/chalk/-/chalk-1.1.3.tgz"
,
"integrity"
:
"sha
512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A=
="
,
"integrity"
:
"sha
1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg
="
,
"requires"
:
{
"requires"
:
{
"ansi-styles"
:
"^2.2.1"
,
"ansi-styles"
:
"^2.2.1"
,
"escape-string-regexp"
:
"^1.0.2"
,
"escape-string-regexp"
:
"^1.0.2"
,
...
@@ -7898,8 +7898,8 @@
...
@@ -7898,8 +7898,8 @@
},
},
"cross-spawn"
:
{
"cross-spawn"
:
{
"version"
:
"3.0.1"
,
"version"
:
"3.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/cross-spawn/-/cross-spawn-3.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/cross-spawn/-/cross-spawn-3.0.1.tgz"
,
"integrity"
:
"sha
512-eZ+m1WNhSZutOa/uRblAc9Ut5MQfukFrFMtPSm3bZCA888NmMd5AWXWdgRZ80zd+pTk1P2JrGjg9pUPTvl2PWQ=
="
,
"integrity"
:
"sha
1-ElYDfsufDF9549bvE14wdwGEuYI
="
,
"requires"
:
{
"requires"
:
{
"lru-cache"
:
"^4.0.1"
,
"lru-cache"
:
"^4.0.1"
,
"which"
:
"^1.2.9"
"which"
:
"^1.2.9"
...
@@ -7907,7 +7907,7 @@
...
@@ -7907,7 +7907,7 @@
},
},
"lru-cache"
:
{
"lru-cache"
:
{
"version"
:
"4.1.5"
,
"version"
:
"4.1.5"
,
"resolved"
:
"https://registry.npm
mirror.com
/lru-cache/-/lru-cache-4.1.5.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/lru-cache/-/lru-cache-4.1.5.tgz"
,
"integrity"
:
"sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g=="
,
"integrity"
:
"sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g=="
,
"requires"
:
{
"requires"
:
{
"pseudomap"
:
"^1.0.2"
,
"pseudomap"
:
"^1.0.2"
,
...
@@ -7916,20 +7916,20 @@
...
@@ -7916,20 +7916,20 @@
},
},
"supports-color"
:
{
"supports-color"
:
{
"version"
:
"2.0.0"
,
"version"
:
"2.0.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/supports-color/-/supports-color-2.0.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/supports-color/-/supports-color-2.0.0.tgz"
,
"integrity"
:
"sha
512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=
="
"integrity"
:
"sha
1-U10EXOa2Nj+kARcIRimZXp3zJMc
="
},
},
"yallist"
:
{
"yallist"
:
{
"version"
:
"2.1.2"
,
"version"
:
"2.1.2"
,
"resolved"
:
"https://registry.npm
mirror.com
/yallist/-/yallist-2.1.2.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/yallist/-/yallist-2.1.2.tgz"
,
"integrity"
:
"sha
512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=
="
"integrity"
:
"sha
1-HBH5IY8HYImkfdUS+TxmmaaoHVI
="
}
}
}
}
},
},
"nopt"
:
{
"nopt"
:
{
"version"
:
"3.0.6"
,
"version"
:
"3.0.6"
,
"resolved"
:
"https://registry.npm
mirror.com
/nopt/-/nopt-3.0.6.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/nopt/-/nopt-3.0.6.tgz"
,
"integrity"
:
"sha
512-4GUt3kSEYmk4ITxzB/b9vaIDfUVWN/Ml1Fwl11IlnIG2iaJ9O6WXZ9SrYM9NLI8OCBieN2Y8SWC2oJV0RQ7qYg=
="
,
"integrity"
:
"sha
1-xkZdvwirzU2zWTF/eaxopkayj/k
="
,
"requires"
:
{
"requires"
:
{
"abbrev"
:
"1"
"abbrev"
:
"1"
}
}
...
@@ -8061,7 +8061,7 @@
...
@@ -8061,7 +8061,7 @@
},
},
"npmlog"
:
{
"npmlog"
:
{
"version"
:
"4.1.2"
,
"version"
:
"4.1.2"
,
"resolved"
:
"https://registry.npm
mirror.com
/npmlog/-/npmlog-4.1.2.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/npmlog/-/npmlog-4.1.2.tgz"
,
"integrity"
:
"sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg=="
,
"integrity"
:
"sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg=="
,
"requires"
:
{
"requires"
:
{
"are-we-there-yet"
:
"~1.1.2"
,
"are-we-there-yet"
:
"~1.1.2"
,
...
@@ -9878,8 +9878,8 @@
...
@@ -9878,8 +9878,8 @@
},
},
"read-pkg"
:
{
"read-pkg"
:
{
"version"
:
"1.1.0"
,
"version"
:
"1.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/read-pkg/-/read-pkg-1.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/read-pkg/-/read-pkg-1.1.0.tgz"
,
"integrity"
:
"sha
512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ=
="
,
"integrity"
:
"sha
1-9f+qXs0pyzHAR0vKfXVra7KePyg
="
,
"requires"
:
{
"requires"
:
{
"load-json-file"
:
"^1.0.0"
,
"load-json-file"
:
"^1.0.0"
,
"normalize-package-data"
:
"^2.3.2"
,
"normalize-package-data"
:
"^2.3.2"
,
...
@@ -9888,8 +9888,8 @@
...
@@ -9888,8 +9888,8 @@
"dependencies"
:
{
"dependencies"
:
{
"path-type"
:
{
"path-type"
:
{
"version"
:
"1.1.0"
,
"version"
:
"1.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/path-type/-/path-type-1.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/path-type/-/path-type-1.1.0.tgz"
,
"integrity"
:
"sha
512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg=
="
,
"integrity"
:
"sha
1-WcRPfuSR2nBNpBXaWkBwuk+P5EE
="
,
"requires"
:
{
"requires"
:
{
"graceful-fs"
:
"^4.1.2"
,
"graceful-fs"
:
"^4.1.2"
,
"pify"
:
"^2.0.0"
,
"pify"
:
"^2.0.0"
,
...
@@ -9898,15 +9898,15 @@
...
@@ -9898,15 +9898,15 @@
},
},
"pify"
:
{
"pify"
:
{
"version"
:
"2.3.0"
,
"version"
:
"2.3.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/pify/-/pify-2.3.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/pify/-/pify-2.3.0.tgz"
,
"integrity"
:
"sha
512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=
="
"integrity"
:
"sha
1-7RQaasBDqEnqWISY59yosVMw6Qw
="
}
}
}
}
},
},
"read-pkg-up"
:
{
"read-pkg-up"
:
{
"version"
:
"1.0.1"
,
"version"
:
"1.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/read-pkg-up/-/read-pkg-up-1.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/read-pkg-up/-/read-pkg-up-1.0.1.tgz"
,
"integrity"
:
"sha
512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A=
="
,
"integrity"
:
"sha
1-nWPBMnbAZZGNV/ACpX9AobZD+wI
="
,
"requires"
:
{
"requires"
:
{
"find-up"
:
"^1.0.0"
,
"find-up"
:
"^1.0.0"
,
"read-pkg"
:
"^1.0.0"
"read-pkg"
:
"^1.0.0"
...
@@ -9914,8 +9914,8 @@
...
@@ -9914,8 +9914,8 @@
"dependencies"
:
{
"dependencies"
:
{
"find-up"
:
{
"find-up"
:
{
"version"
:
"1.1.2"
,
"version"
:
"1.1.2"
,
"resolved"
:
"https://registry.npm
mirror.com
/find-up/-/find-up-1.1.2.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/find-up/-/find-up-1.1.2.tgz"
,
"integrity"
:
"sha
512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA=
="
,
"integrity"
:
"sha
1-ay6YIrGizgpgq2TWEOzK1TyyTQ8
="
,
"requires"
:
{
"requires"
:
{
"path-exists"
:
"^2.0.0"
,
"path-exists"
:
"^2.0.0"
,
"pinkie-promise"
:
"^2.0.0"
"pinkie-promise"
:
"^2.0.0"
...
@@ -9923,8 +9923,8 @@
...
@@ -9923,8 +9923,8 @@
},
},
"path-exists"
:
{
"path-exists"
:
{
"version"
:
"2.1.0"
,
"version"
:
"2.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/path-exists/-/path-exists-2.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/path-exists/-/path-exists-2.1.0.tgz"
,
"integrity"
:
"sha
512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ=
="
,
"integrity"
:
"sha
1-D+tsZPD8UY2adU3V77YscCJ2H0s
="
,
"requires"
:
{
"requires"
:
{
"pinkie-promise"
:
"^2.0.0"
"pinkie-promise"
:
"^2.0.0"
}
}
...
@@ -9968,8 +9968,8 @@
...
@@ -9968,8 +9968,8 @@
},
},
"redent"
:
{
"redent"
:
{
"version"
:
"1.0.0"
,
"version"
:
"1.0.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/redent/-/redent-1.0.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/redent/-/redent-1.0.0.tgz"
,
"integrity"
:
"sha
512-qtW5hKzGQZqKoh6JNSD+4lfitfPKGz42e6QwiRmPM5mmKtR0N41AbJRYu0xJi7nhOJ4WDgRkKvAk6tw4WIwR4g=
="
,
"integrity"
:
"sha
1-z5Fqsf1fHxbfsggi3W7H9zDCr94
="
,
"requires"
:
{
"requires"
:
{
"indent-string"
:
"^2.1.0"
,
"indent-string"
:
"^2.1.0"
,
"strip-indent"
:
"^1.0.1"
"strip-indent"
:
"^1.0.1"
...
@@ -9977,8 +9977,8 @@
...
@@ -9977,8 +9977,8 @@
"dependencies"
:
{
"dependencies"
:
{
"indent-string"
:
{
"indent-string"
:
{
"version"
:
"2.1.0"
,
"version"
:
"2.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/indent-string/-/indent-string-2.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/indent-string/-/indent-string-2.1.0.tgz"
,
"integrity"
:
"sha
512-aqwDFWSgSgfRaEwao5lg5KEcVd/2a+D1rvoG7NdilmYz0NwRk6StWpWdz/Hpk34MKPpx7s8XxUqimfcQK6gGlg=
="
,
"integrity"
:
"sha
1-ji1INIdCEhtKghi3oTfppSBJ3IA
="
,
"requires"
:
{
"requires"
:
{
"repeating"
:
"^2.0.0"
"repeating"
:
"^2.0.0"
}
}
...
@@ -10119,8 +10119,8 @@
...
@@ -10119,8 +10119,8 @@
},
},
"repeating"
:
{
"repeating"
:
{
"version"
:
"2.0.1"
,
"version"
:
"2.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/repeating/-/repeating-2.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/repeating/-/repeating-2.0.1.tgz"
,
"integrity"
:
"sha
512-ZqtSMuVybkISo2OWvqvm7iHSWngvdaW3IpsT9/uP8v4gMi591LY6h35wdOfvQdWCKFWZWm2Y1Opp4kV7vQKT6A=
="
,
"integrity"
:
"sha
1-UhTFOpJtNVJwdSf7q0FdvAjQbdo
="
,
"requires"
:
{
"requires"
:
{
"is-finite"
:
"^1.0.0"
"is-finite"
:
"^1.0.0"
}
}
...
@@ -10327,7 +10327,7 @@
...
@@ -10327,7 +10327,7 @@
},
},
"sass-graph"
:
{
"sass-graph"
:
{
"version"
:
"2.2.5"
,
"version"
:
"2.2.5"
,
"resolved"
:
"https://registry.npm
mirror.com
/sass-graph/-/sass-graph-2.2.5.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/sass-graph/-/sass-graph-2.2.5.tgz"
,
"integrity"
:
"sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag=="
,
"integrity"
:
"sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag=="
,
"requires"
:
{
"requires"
:
{
"glob"
:
"^7.0.0"
,
"glob"
:
"^7.0.0"
,
...
@@ -10338,12 +10338,12 @@
...
@@ -10338,12 +10338,12 @@
"dependencies"
:
{
"dependencies"
:
{
"ansi-regex"
:
{
"ansi-regex"
:
{
"version"
:
"4.1.1"
,
"version"
:
"4.1.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/ansi-regex/-/ansi-regex-4.1.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/ansi-regex/-/ansi-regex-4.1.1.tgz"
,
"integrity"
:
"sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="
"integrity"
:
"sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g=="
},
},
"cliui"
:
{
"cliui"
:
{
"version"
:
"5.0.0"
,
"version"
:
"5.0.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/cliui/-/cliui-5.0.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/cliui/-/cliui-5.0.0.tgz"
,
"integrity"
:
"sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA=="
,
"integrity"
:
"sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA=="
,
"requires"
:
{
"requires"
:
{
"string-width"
:
"^3.1.0"
,
"string-width"
:
"^3.1.0"
,
...
@@ -10353,22 +10353,22 @@
...
@@ -10353,22 +10353,22 @@
},
},
"emoji-regex"
:
{
"emoji-regex"
:
{
"version"
:
"7.0.3"
,
"version"
:
"7.0.3"
,
"resolved"
:
"https://registry.npm
mirror.com
/emoji-regex/-/emoji-regex-7.0.3.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/emoji-regex/-/emoji-regex-7.0.3.tgz"
,
"integrity"
:
"sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
"integrity"
:
"sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
},
},
"get-caller-file"
:
{
"get-caller-file"
:
{
"version"
:
"2.0.5"
,
"version"
:
"2.0.5"
,
"resolved"
:
"https://registry.npm
mirror.com
/get-caller-file/-/get-caller-file-2.0.5.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/get-caller-file/-/get-caller-file-2.0.5.tgz"
,
"integrity"
:
"sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
"integrity"
:
"sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
},
},
"require-main-filename"
:
{
"require-main-filename"
:
{
"version"
:
"2.0.0"
,
"version"
:
"2.0.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/require-main-filename/-/require-main-filename-2.0.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/require-main-filename/-/require-main-filename-2.0.0.tgz"
,
"integrity"
:
"sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
"integrity"
:
"sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
},
},
"string-width"
:
{
"string-width"
:
{
"version"
:
"3.1.0"
,
"version"
:
"3.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/string-width/-/string-width-3.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/string-width/-/string-width-3.1.0.tgz"
,
"integrity"
:
"sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w=="
,
"integrity"
:
"sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w=="
,
"requires"
:
{
"requires"
:
{
"emoji-regex"
:
"^7.0.1"
,
"emoji-regex"
:
"^7.0.1"
,
...
@@ -10378,7 +10378,7 @@
...
@@ -10378,7 +10378,7 @@
},
},
"strip-ansi"
:
{
"strip-ansi"
:
{
"version"
:
"5.2.0"
,
"version"
:
"5.2.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/strip-ansi/-/strip-ansi-5.2.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/strip-ansi/-/strip-ansi-5.2.0.tgz"
,
"integrity"
:
"sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA=="
,
"integrity"
:
"sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA=="
,
"requires"
:
{
"requires"
:
{
"ansi-regex"
:
"^4.1.0"
"ansi-regex"
:
"^4.1.0"
...
@@ -10386,7 +10386,7 @@
...
@@ -10386,7 +10386,7 @@
},
},
"wrap-ansi"
:
{
"wrap-ansi"
:
{
"version"
:
"5.1.0"
,
"version"
:
"5.1.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/wrap-ansi/-/wrap-ansi-5.1.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/wrap-ansi/-/wrap-ansi-5.1.0.tgz"
,
"integrity"
:
"sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q=="
,
"integrity"
:
"sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q=="
,
"requires"
:
{
"requires"
:
{
"ansi-styles"
:
"^3.2.0"
,
"ansi-styles"
:
"^3.2.0"
,
...
@@ -10396,7 +10396,7 @@
...
@@ -10396,7 +10396,7 @@
},
},
"yargs"
:
{
"yargs"
:
{
"version"
:
"13.3.2"
,
"version"
:
"13.3.2"
,
"resolved"
:
"https://registry.npm
mirror.com
/yargs/-/yargs-13.3.2.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/yargs/-/yargs-13.3.2.tgz"
,
"integrity"
:
"sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw=="
,
"integrity"
:
"sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw=="
,
"requires"
:
{
"requires"
:
{
"cliui"
:
"^5.0.0"
,
"cliui"
:
"^5.0.0"
,
...
@@ -10413,7 +10413,7 @@
...
@@ -10413,7 +10413,7 @@
},
},
"yargs-parser"
:
{
"yargs-parser"
:
{
"version"
:
"13.1.2"
,
"version"
:
"13.1.2"
,
"resolved"
:
"https://registry.npm
mirror.com
/yargs-parser/-/yargs-parser-13.1.2.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/yargs-parser/-/yargs-parser-13.1.2.tgz"
,
"integrity"
:
"sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg=="
,
"integrity"
:
"sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg=="
,
"requires"
:
{
"requires"
:
{
"camelcase"
:
"^5.0.0"
,
"camelcase"
:
"^5.0.0"
,
...
@@ -10520,8 +10520,8 @@
...
@@ -10520,8 +10520,8 @@
},
},
"scss-tokenizer"
:
{
"scss-tokenizer"
:
{
"version"
:
"0.2.3"
,
"version"
:
"0.2.3"
,
"resolved"
:
"https://registry.npm
mirror.com
/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz"
,
"integrity"
:
"sha
512-dYE8LhncfBUar6POCxMTm0Ln+erjeczqEvCJib5/7XNkdw1FkUGgwMPY360FY0FgPWQxHWCx29Jl3oejyGLM9Q=
="
,
"integrity"
:
"sha
1-jrBtualyMzOCTT9VMGQRSYR85dE
="
,
"requires"
:
{
"requires"
:
{
"js-base64"
:
"^2.1.8"
,
"js-base64"
:
"^2.1.8"
,
"source-map"
:
"^0.4.2"
"source-map"
:
"^0.4.2"
...
@@ -10529,8 +10529,8 @@
...
@@ -10529,8 +10529,8 @@
"dependencies"
:
{
"dependencies"
:
{
"source-map"
:
{
"source-map"
:
{
"version"
:
"0.4.4"
,
"version"
:
"0.4.4"
,
"resolved"
:
"https://registry.npm
mirror.com
/source-map/-/source-map-0.4.4.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/source-map/-/source-map-0.4.4.tgz"
,
"integrity"
:
"sha
512-Y8nIfcb1s/7DcobUz1yOO1GSp7gyL+D9zLHDehT7iRESqGSxjJ448Sg7rvfgsRJCnKLdSl11uGf0s9X80cH0/A=
="
,
"integrity"
:
"sha
1-66T12pwNyZneaAMti092FzZSA2s
="
,
"requires"
:
{
"requires"
:
{
"amdefine"
:
">=0.0.4"
"amdefine"
:
">=0.0.4"
}
}
...
@@ -11362,7 +11362,7 @@
...
@@ -11362,7 +11362,7 @@
},
},
"stdout-stream"
:
{
"stdout-stream"
:
{
"version"
:
"1.4.1"
,
"version"
:
"1.4.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/stdout-stream/-/stdout-stream-1.4.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/stdout-stream/-/stdout-stream-1.4.1.tgz"
,
"integrity"
:
"sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA=="
,
"integrity"
:
"sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA=="
,
"requires"
:
{
"requires"
:
{
"readable-stream"
:
"^2.0.1"
"readable-stream"
:
"^2.0.1"
...
@@ -11531,8 +11531,8 @@
...
@@ -11531,8 +11531,8 @@
},
},
"strip-indent"
:
{
"strip-indent"
:
{
"version"
:
"1.0.1"
,
"version"
:
"1.0.1"
,
"resolved"
:
"https://registry.npm
mirror.com
/strip-indent/-/strip-indent-1.0.1.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/strip-indent/-/strip-indent-1.0.1.tgz"
,
"integrity"
:
"sha
512-I5iQq6aFMM62fBEAIB/hXzwJD6EEZ0xEGCX2t7oXqaKPIRgt4WruAQ285BISgdkP+HLGWyeGmNJcpIwFeRYRUA=
="
,
"integrity"
:
"sha
1-DHlipq3vp7vUrDZkYKY4VSrhoKI
="
,
"requires"
:
{
"requires"
:
{
"get-stdin"
:
"^4.0.1"
"get-stdin"
:
"^4.0.1"
}
}
...
@@ -12080,12 +12080,12 @@
...
@@ -12080,12 +12080,12 @@
},
},
"trim-newlines"
:
{
"trim-newlines"
:
{
"version"
:
"1.0.0"
,
"version"
:
"1.0.0"
,
"resolved"
:
"https://registry.npm
mirror.com
/trim-newlines/-/trim-newlines-1.0.0.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/trim-newlines/-/trim-newlines-1.0.0.tgz"
,
"integrity"
:
"sha
512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw=
="
"integrity"
:
"sha
1-WIeWa7WCpFA6QetST301ARgVphM
="
},
},
"true-case-path"
:
{
"true-case-path"
:
{
"version"
:
"1.0.3"
,
"version"
:
"1.0.3"
,
"resolved"
:
"https://registry.npm
mirror.com
/true-case-path/-/true-case-path-1.0.3.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/true-case-path/-/true-case-path-1.0.3.tgz"
,
"integrity"
:
"sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew=="
,
"integrity"
:
"sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew=="
,
"requires"
:
{
"requires"
:
{
"glob"
:
"^7.1.2"
"glob"
:
"^7.1.2"
...
@@ -13220,7 +13220,7 @@
...
@@ -13220,7 +13220,7 @@
},
},
"wide-align"
:
{
"wide-align"
:
{
"version"
:
"1.1.5"
,
"version"
:
"1.1.5"
,
"resolved"
:
"https://registry.npm
mirror.com
/wide-align/-/wide-align-1.1.5.tgz"
,
"resolved"
:
"https://registry.npm
js.org
/wide-align/-/wide-align-1.1.5.tgz"
,
"integrity"
:
"sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg=="
,
"integrity"
:
"sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg=="
,
"requires"
:
{
"requires"
:
{
"string-width"
:
"^1.0.2 || 2 || 3 || 4"
"string-width"
:
"^1.0.2 || 2 || 3 || 4"
...
...
form/src/app/app.module.ts
View file @
a50b292e
import
{
BrowserModule
}
from
'
@angular/platform-browser
'
;
import
{
BrowserModule
}
from
'
@angular/platform-browser
'
;
import
{
NgModule
,
ErrorHandler
}
from
'
@angular/core
'
;
import
{
NgModule
,
ErrorHandler
}
from
'
@angular/core
'
;
import
{
MyErrorHandler
}
from
'
./MyError
'
;
import
{
MyErrorHandler
}
from
'
./MyError
'
;
import
{
AppComponent
}
from
'
./app.component
'
;
import
{
AppComponent
}
from
'
./app.component
'
;
import
{
NgZorroAntdModule
,
NZ_I18N
,
zh_CN
}
from
'
ng-zorro-antd
'
;
import
{
NgZorroAntdModule
,
NZ_I18N
,
zh_CN
}
from
'
ng-zorro-antd
'
;
...
@@ -10,21 +10,22 @@ import { HttpClientModule } from '@angular/common/http';
...
@@ -10,21 +10,22 @@ import { HttpClientModule } from '@angular/common/http';
import
{
BrowserAnimationsModule
}
from
'
@angular/platform-browser/animations
'
;
import
{
BrowserAnimationsModule
}
from
'
@angular/platform-browser/animations
'
;
import
{
registerLocaleData
}
from
'
@angular/common
'
;
import
{
registerLocaleData
}
from
'
@angular/common
'
;
import
zh
from
'
@angular/common/locales/zh
'
;
import
zh
from
'
@angular/common/locales/zh
'
;
import
{
FormComponent
}
from
'
./form/form.component
'
;
import
{
FormComponent
}
from
'
./form/form.component
'
;
import
{
PlayComponent
}
from
'
./play/play.component
'
;
import
{
PlayComponent
}
from
'
./play/play.component
'
;
import
{
LessonTitleConfigComponent
}
from
'
./common/lesson-title-config/lesson-title-config.component
'
;
import
{
LessonTitleConfigComponent
}
from
'
./common/lesson-title-config/lesson-title-config.component
'
;
import
{
BackgroundImagePipe
}
from
'
./pipes/background-image.pipe
'
;
import
{
BackgroundImagePipe
}
from
'
./pipes/background-image.pipe
'
;
import
{
UploadImageWithPreviewComponent
}
from
'
./common/upload-image-with-preview/upload-image-with-preview.component
'
;
import
{
UploadImageWithPreviewComponent
}
from
'
./common/upload-image-with-preview/upload-image-with-preview.component
'
;
import
{
PlayerContentWrapperComponent
}
from
'
./common/player-content-wrapper/player-content-wrapper.component
'
;
import
{
PlayerContentWrapperComponent
}
from
'
./common/player-content-wrapper/player-content-wrapper.component
'
;
import
{
CustomHotZoneComponent
}
from
'
./common/custom-hot-zone/custom-hot-zone.component
'
;
import
{
CustomHotZoneComponent
}
from
'
./common/custom-hot-zone/custom-hot-zone.component
'
;
import
{
UploadVideoComponent
}
from
'
./common/upload-video/upload-video.component
'
;
import
{
UploadVideoComponent
}
from
'
./common/upload-video/upload-video.component
'
;
import
{
TimePipe
}
from
'
./pipes/time.pipe
'
;
import
{
TimePipe
}
from
'
./pipes/time.pipe
'
;
import
{
ResourcePipe
}
from
'
./pipes/resource.pipe
'
;
import
{
ResourcePipe
}
from
'
./pipes/resource.pipe
'
;
import
{
AudioRecorderComponent
}
from
'
./common/audio-recorder/audio-recorder.component
'
;
import
{
AudioRecorderComponent
}
from
'
./common/audio-recorder/audio-recorder.component
'
;
import
{
FontAwesomeModule
,
FaIconLibrary
}
from
'
@fortawesome/angular-fontawesome
'
;
import
{
FontAwesomeModule
,
FaIconLibrary
}
from
'
@fortawesome/angular-fontawesome
'
;
import
{
fas
}
from
'
@fortawesome/free-solid-svg-icons
'
;
import
{
fas
}
from
'
@fortawesome/free-solid-svg-icons
'
;
import
{
far
}
from
'
@fortawesome/free-regular-svg-icons
'
;
import
{
far
}
from
'
@fortawesome/free-regular-svg-icons
'
;
import
{
UploadDragonBoneComponent
}
from
'
./common/upload-dragon-bone/upload-dragon-bone.component
'
;
import
{
UploadDragonBoneComponent
}
from
'
./common/upload-dragon-bone/upload-dragon-bone.component
'
;
import
{
CustomActionComponent
}
from
'
./common/custom-action/custom-action.component
'
;
registerLocaleData
(
zh
);
registerLocaleData
(
zh
);
...
@@ -40,6 +41,7 @@ registerLocaleData(zh);
...
@@ -40,6 +41,7 @@ registerLocaleData(zh);
ResourcePipe
,
ResourcePipe
,
TimePipe
,
TimePipe
,
UploadVideoComponent
,
UploadVideoComponent
,
CustomActionComponent
,
CustomHotZoneComponent
,
CustomHotZoneComponent
,
UploadDragonBoneComponent
,
UploadDragonBoneComponent
,
PlayerContentWrapperComponent
PlayerContentWrapperComponent
...
@@ -54,15 +56,15 @@ registerLocaleData(zh);
...
@@ -54,15 +56,15 @@ registerLocaleData(zh);
FontAwesomeModule
FontAwesomeModule
],
],
providers
:
[
providers
:
[
{
provide
:
ErrorHandler
,
useClass
:
MyErrorHandler
},
{
provide
:
ErrorHandler
,
useClass
:
MyErrorHandler
},
{
provide
:
NZ_I18N
,
useValue
:
zh_CN
}
{
provide
:
NZ_I18N
,
useValue
:
zh_CN
}
],
],
bootstrap
:
[
AppComponent
]
bootstrap
:
[
AppComponent
]
})
})
export
class
AppModule
{
export
class
AppModule
{
constructor
(
library
:
FaIconLibrary
)
{
constructor
(
library
:
FaIconLibrary
)
{
const
fa
:
any
=
fas
;
let
fs
:
any
=
fas
;
const
fr
:
any
=
far
;
let
fr
:
any
=
far
;
library
.
addIconPacks
(
f
a
,
fr
);
library
.
addIconPacks
(
f
s
,
fr
);
}
}
}
}
form/src/app/common/audio-recorder/audio-recorder.component.html
View file @
a50b292e
...
@@ -35,7 +35,8 @@
...
@@ -35,7 +35,8 @@
<ng-template
#
truthyTemplate
>
<ng-template
#
truthyTemplate
>
<div
class=
"btn-delete"
(
click
)="
onBtnDeleteAudio
()"
>
<div
class=
"btn-delete"
(
click
)="
onBtnDeleteAudio
()"
>
<fa-icon
icon=
"close"
></fa-icon>
<!-- <fa-icon icon="close"></fa-icon> -->
<i
nz-icon
nzType=
"close"
nzTheme=
"outline"
></i>
</div>
</div>
</ng-template>
</ng-template>
...
@@ -45,19 +46,17 @@
...
@@ -45,19 +46,17 @@
<fa-icon
icon=
"cog"
></fa-icon>
<fa-icon
icon=
"cog"
></fa-icon>
</div>
</div>
</ng-template>
</ng-template>
</div>
</div>
<div
class=
"p-progress ml-2"
(
click
)="
onBtnPlay
()"
*
ngIf=
"audioUrl || audioBlob"
<div
class=
"p-progress ml-2"
(
click
)="
onBtnPlay
()"
*
ngIf=
"audioUrl || audioBlob"
>
style=
"background-color: #70B603; width: 35px; height: 35px; border-radius: 35px; margin-left: 10px;margin-top:-1px"
>
<nz-progress
[
nzPercent
]="
percent
"
[
nzWidth
]="
30
"
[
nzFormat
]="
progressText
"
<nz-progress
[
nzPercent
]="
percent
"
[
nzWidth
]="
35
"
[
nzFormat
]="
progressText
"
nzType=
"circle"
></nz-progress>
nzType=
"circle"
>
<div
class=
"p-btn-play"
[
style
.
left
]="
isPlaying
?'
8px
'
:
''"
>
</nz-progress>
<div
class=
"p-btn-play"
style=
"color: white;margin-left: 2px;margin-top: 1px;"
[
style
.
left
]="
isPlaying
?'
8px
'
:
''"
>
<fa-icon
[
icon
]="
playIcon
"
></fa-icon>
<fa-icon
[
icon
]="
playIcon
"
></fa-icon>
</div>
</div>
</div>
</div>
<div
class=
"audio-name"
>
{{_audioName}}
</div>
</div>
</div>
form/src/app/common/audio-recorder/audio-recorder.component.scss
View file @
a50b292e
...
@@ -90,26 +90,17 @@
...
@@ -90,26 +90,17 @@
}
}
.p-progress
{
.p-progress
{
margin-top
:
3
.5
px
;
margin-top
:
2
px
;
position
:
relative
;
position
:
relative
;
background-color
:
#27b43f
;
border-radius
:
15px
;
line-height
:
26px
;
line-height
:
26px
;
.p-btn-play
{
.p-btn-play
{
position
:
absolute
;
position
:
absolute
;
left
:
1
1
px
;
left
:
1
0
px
;
top
:
3px
;
top
:
3px
;
color
:
#
ffffff
;
color
:
#
555
;
}
}
}
}
.audio-name
{
margin-top
:
3
.5px
;
position
:
relative
;
margin-left
:
7px
;;
line-height
:
26px
;
}
:host
::ng-deep
nz-upload
{
:host
::ng-deep
nz-upload
{
line-height
:
33px
;
line-height
:
33px
;
}
}
...
...
form/src/app/common/audio-recorder/audio-recorder.component.ts
View file @
a50b292e
...
@@ -26,26 +26,17 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -26,26 +26,17 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
uploadData
;
uploadData
;
@
Input
()
@
Input
()
needRemove
=
fals
e
;
needRemove
=
tru
e
;
@
Input
()
@
Input
()
audioItem
:
any
=
null
;
audioItem
:
any
=
null
;
@
Input
()
_audioName
:
any
=
null
;
@
Input
()
@
Input
()
set
audioUrl
(
url
)
{
set
audioUrl
(
url
)
{
this
.
_audioUrl
=
url
;
this
.
_audioUrl
=
url
;
if
(
url
)
{
if
(
url
)
{
this
.
httpHeadCall
(
this
.
_audioUrl
,
flag
=>
{
this
.
audio
.
src
=
this
.
_audioUrl
;
if
(
flag
)
{
this
.
audio
.
load
();
this
.
audio
.
src
=
this
.
_audioUrl
;
}
else
{
this
.
audio
.
src
=
this
.
_audioUrl
.
replace
(
"
_l.
"
,
"
.
"
);
}
this
.
audio
.
load
();
});
}
}
this
.
init
();
this
.
init
();
}
}
...
@@ -57,7 +48,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -57,7 +48,6 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
@
Output
()
audioUploaded
=
new
EventEmitter
();
@
Output
()
audioUploaded
=
new
EventEmitter
();
@
Output
()
audioUploadFailure
=
new
EventEmitter
();
@
Output
()
audioUploadFailure
=
new
EventEmitter
();
@
Output
()
audioRemoved
=
new
EventEmitter
();
@
Output
()
audioRemoved
=
new
EventEmitter
();
@
Output
()
audioName
=
new
EventEmitter
();
percent
=
0
;
percent
=
0
;
progress
=
0
;
progress
=
0
;
recorder
:
any
;
recorder
:
any
;
...
@@ -72,43 +62,25 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -72,43 +62,25 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
this
.
uploadUrl
=
url
;
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
this
.
uploadData
=
data
;
};
};
this
.
setUploadUrl
();
}
}
httpHeadCall
(
requsetUrl
:
string
,
callback
)
{
let
xhr
=
new
XMLHttpRequest
();
setUploadUrl
()
{
console
.
log
(
"
Status: Send Post Request to
"
+
requsetUrl
);
try
{
if
(
!
this
.
uploadUrl
)
{
xhr
.
onreadystatechange
=
()
=>
{
try
{
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
console
.
log
(
'
xhr.readyState:
'
,
xhr
.
readyState
);
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
if
(
xhr
.
readyState
==
4
)
{
if
((
xhr
.
status
>=
200
&&
xhr
.
status
<
400
))
{
setTimeout
(()
=>
{
callback
(
true
);
this
.
setUploadUrl
();
}
else
{
},
500
);
callback
(
false
);
}
}
}
catch
(
e
)
{
console
.
log
(
e
)
}
};
xhr
.
open
(
"
HEAD
"
,
requsetUrl
,
true
);
xhr
.
send
();
xhr
.
timeout
=
15000
;
xhr
.
onerror
=
(
e
)
=>
{
console
.
log
(
"
汪汪汪 posterror
"
,
e
);
callback
(
false
);
};
xhr
.
ontimeout
=
(
e
)
=>
{
console
.
log
(
"
汪汪汪 ontimeout
"
,
e
);
callback
(
false
);
};
}
catch
(
e
)
{
console
.
log
(
"
Send Get Request error:
"
,
e
)
}
}
}
}
init
()
{
init
()
{
this
.
playIcon
=
'
play
'
;
this
.
playIcon
=
'
play
'
;
this
.
isPlaying
=
false
;
this
.
isPlaying
=
false
;
...
@@ -202,6 +174,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -202,6 +174,7 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
onBtnDeleteAudio
()
{
onBtnDeleteAudio
()
{
this
.
audioUrl
=
null
;
this
.
audioUrl
=
null
;
this
.
audioUploaded
.
emit
({});
this
.
audioRemoved
.
emit
();
this
.
audioRemoved
.
emit
();
}
}
...
@@ -213,13 +186,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -213,13 +186,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
break
;
break
;
case
'
success
'
:
case
'
success
'
:
this
.
isUploading
=
false
;
this
.
isUploading
=
false
;
let
url
=
info
.
file
.
response
.
url
;
url
=
url
.
substring
(
0
,
url
.
lastIndexOf
(
"
.
"
))
+
"
_l.mp3
"
;
info
.
file
.
response
.
url
=
url
;
info
.
file
.
response
.
audioName
=
info
.
file
.
name
;
this
.
uploadSuccess
(
info
.
file
.
response
);
this
.
uploadSuccess
(
info
.
file
.
response
);
this
.
audioUploaded
.
emit
(
info
.
file
.
response
);
this
.
audioUploaded
.
emit
(
info
.
file
.
response
);
this
.
audioName
.
emit
(
info
.
file
.
name
);
break
;
break
;
case
'
progress
'
:
case
'
progress
'
:
this
.
progress
=
parseInt
(
info
.
event
.
percent
,
10
);
this
.
progress
=
parseInt
(
info
.
event
.
percent
,
10
);
...
...
form/src/app/common/custom-action/custom-action.component.html
0 → 100644
View file @
a50b292e
<div
class=
"position-relative"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
()"
style=
" border-radius: 0.5rem; border: 1px solid #ddd;"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
{{btnName}}
</button>
<!--配置龙骨面板-->
<nz-modal
[(
nzVisible
)]="
panelVisible
"
(
nzAfterClose
)="
closePanel
()"
[
nzTitle
]="
btnName
"
(
nzOnCancel
)="
panelCancel
()"
(
nzOnOk
)="
panelOk
()"
nzOkText=
"保存"
>
<div>
<h4>
基础内容:
</h4>
<div
style=
"margin-bottom: 10px; width: 80%; margin: auto;"
>
<!-- <nz-radio-group [ngModel]="item.type" (ngModelChange)="radioChange($event)">
<label nz-radio nzValue="pic">图片</label>
<label nz-radio nzValue="text">文本</label>
</nz-radio-group> -->
<div
*
ngIf=
"item.type == 'pic'"
>
<app-upload-image-with-preview
[
picUrl
]="
item
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
item
)"
>
</app-upload-image-with-preview>
</div>
<div
*
ngIf=
"item.type == 'text'"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
saveText
(
item
)"
>
</div>
<div
*
ngIf=
"item.type == 'anima'"
style=
"margin-left: 100px;"
>
<app-upload-dragon-bone
[
skeJsonData
]=
item
.
skeJsonData
[
texJsonData
]=
item
.
texJsonData
[
texPngData
]=
item
.
texPngData
(
save
)="
saveAnima
($
event
)"
>
</app-upload-dragon-bone>
</div>
</div>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<h4>
状态设置:
</h4>
<div
style=
"display: flex; justify-content: space-around;"
>
<div
style=
"width: 30%; display: flex; align-items: center; flex-direction: column;"
>
<h5>
开始状态
</h5>
<div
*
ngFor=
"let op of item.changeOption; let i = index"
style=
"margin-bottom: 5px; "
>
<div
style=
"display: flex; align-items: center; justify-content: center;"
>
<span>
{{op[0]}}:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
op
[
1
]"
(
blur
)="
saveText
(
op
)"
style=
"margin-left: 5px;"
>
</div>
</div>
</div>
<div
style=
"width: 30%; display: flex; align-items: center; flex-direction: column; "
>
<h5>
切换时间
</h5>
<div
style=
"display: flex; width: 100%; align-items: center; justify-content: center;"
>
<span>
time:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
changeTime
"
(
blur
)="
saveText
(
item
.
changeTime
)"
style=
"width: 80px; margin-left: 5px;"
>
</div>
</div>
<div
style=
"width: 30%; display: flex; align-items: center; flex-direction: column;"
>
<h5>
结束状态
</h5>
<div
*
ngFor=
"let op of item.changeOption; let i = index"
style=
"margin-bottom: 5px; "
>
<div
style=
"display: flex; align-items: center; justify-content: center;"
>
<span>
{{op[0]}}:
</span>
<input
[
disabled
]="
op
[
2
]
==
null
"
type=
"text"
nz-input
[(
ngModel
)]="
op
[
2
]"
(
blur
)="
saveText
(
op
)"
style=
"margin-left: 5px;"
>
</div>
</div>
</div>
</div>
<div
style=
"display: flex; align-items: center; justify-content: center; margin-top: 10px;"
>
<button
style=
"margin-left: 20px; margin-top: -5px"
nz-button
(
click
)="
copyChangeData
()"
>
复制数据
</button>
<div
style=
"margin-left: 20px; margin-top: -5px"
>
<span>
粘贴数据:
</span>
<input
style=
"width: 100px;"
type=
"text"
nz-input
[(
ngModel
)]="
pasteData
"
>
<button
style=
"margin-left: 5px;"
nz-button
[
disabled
]="
pasteData=
=''"
nzType=
"primary"
(
click
)="
importData
()"
>
导入
</button>
</div>
</div>
<div
*
ngIf=
"hasAudio"
>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<h4>
音频设置
</h4>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
item
?.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
item
)"
></app-audio-recorder>
</div>
</div>
<!--
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="skeJsonData && skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texJsonData && texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
</div>
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false"
nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
<span *ngIf="texPngData && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
</div>
<div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0">
提示:需包含动画: {{animaNames.toString()}}.
</div> -->
</nz-modal>
</div>
form/src/app/common/custom-action/custom-action.component.scss
0 → 100644
View file @
a50b292e
@import
'../../style/common_mixin.css'
;
.p-image-uploader
{
position
:
relative
;
display
:
block
;
width
:
100%
;
height
:
0
;
padding-bottom
:
56
.25%
;
.p-box
{
position
:
absolute
;
left
:
0
;
top
:
0
;
right
:
0
;
bottom
:
0
;
border
:
2px
dashed
#ddd
;
border-radius
:
0
.5rem
;
background-color
:
#fafafa
;
text-align
:
center
;
color
:
#aaa
;
.p-upload-icon
{
text-align
:
center
;
margin
:
auto
;
.anticon-upload
{
color
:
#888
;
font-size
:
5rem
;
}
.p-progress-bar
{
position
:
relative
;
width
:
20rem
;
height
:
1
.5rem
;
border
:
1px
solid
#ccc
;
border-radius
:
1rem
;
.p-progress-bg
{
background-color
:
#1890ff
;
border-radius
:
1rem
;
height
:
100%
;
}
.p-progress-value
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
text-shadow
:
0
0
4px
#000
;
color
:
white
;
text-align
:
center
;
font-size
:
0
.9rem
;
line-height
:
1
.5rem
;
}
}
}
.p-preview
{
width
:
100%
;
height
:
100%
;
background-size
:
contain
;
background-repeat
:
no-repeat
;
background-position
:
50%
50%
;
//background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
}
}
.d-flex
{
display
:
flex
;
}
}
.p-btn-delete
{
position
:
absolute
;
right
:
-0
.5rem
;
top
:
-0
.5rem
;
width
:
2rem
;
height
:
2rem
;
border
:
0
.2rem
solid
white
;
border-radius
:
50%
;
font-size
:
1
.2rem
;
background-color
:
#fb781a
;
color
:
white
;
text-align
:
center
;
}
.p-upload-progress-bg
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
&
.i-text
{
position
:
absolute
;
text-align
:
center
;
color
:
white
;
text-shadow
:
0
0
2px
rgba
(
0
,
0
,
0
,
.85
);
}
&
.i-bg
{
position
:
absolute
;
left
:
0
;
top
:
0
;
height
:
100%
;
background-color
:
#27b43f
;
border-radius
:
0
.5rem
;
}
}
.anima-upload-btn
{
padding
:
10px
;
}
:host
::ng-deep
.ant-upload
{
display
:
block
;
}
form/src/app/common/custom-action/custom-action.component.ts
0 → 100644
View file @
a50b292e
import
{
ApplicationRef
,
Component
,
EventEmitter
,
Input
,
OnChanges
,
OnDestroy
,
Output
}
from
'
@angular/core
'
;
import
{
NzMessageService
,
UploadXHRArgs
,
UploadFile
}
from
'
ng-zorro-antd
'
;
@
Component
({
selector
:
'
app-custom-action
'
,
templateUrl
:
'
./custom-action.component.html
'
,
styleUrls
:
[
'
./custom-action.component.scss
'
]
})
export
class
CustomActionComponent
implements
OnDestroy
,
OnChanges
{
uploading
=
false
;
progress
=
0
;
@
Input
()
btnName
=
'
配置变化状态
'
;
@
Input
()
option
=
[]
@
Input
()
item
;
@
Input
()
hasAudio
=
false
;
@
Input
()
type
=
'
text
'
@
Output
()
save
=
new
EventEmitter
();
@
Output
()
refreshEmitter
=
new
EventEmitter
();
uploadUrl
;
uploadData
;
panelVisible
=
false
;
pasteData
=
''
;
constructor
(
private
appRef
:
ApplicationRef
,
private
nzMessageService
:
NzMessageService
)
{
window
[
'
air
'
].
getUploadCallback
=
(
url
,
data
)
=>
{
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
};
const
tmpId
=
setInterval
(()
=>
{
console
.
log
(
'
in setInterval
'
)
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
if
(
this
.
uploadUrl
)
{
clearInterval
(
tmpId
);
}
},
500
)
}
ngOnInit
()
{
this
.
initItem
();
}
ngOnChanges
()
{
}
initItem
()
{
console
.
log
(
'
```this.item:
'
,
this
.
item
);
if
(
!
this
.
item
)
{
this
.
item
=
{
type
:
this
.
type
,
skeJsonData
:
{},
texJsonData
:
{},
texPngData
:
{},
changeStart
:
[
],
changeEnd
:
[
],
changeTime
:
0.3
};
if
(
this
.
option
)
{
this
.
item
.
changeOption
=
JSON
.
parse
(
JSON
.
stringify
(
this
.
option
));
}
}
console
.
log
(
'
initItem
'
,
this
.
item
);
}
setAnimaBtnClick
()
{
this
.
panelVisible
=
true
;
this
.
refresh
();
}
panelCancel
()
{
this
.
panelVisible
=
false
;
this
.
refresh
();
}
panelOk
()
{
// this.sendItemDragonBoneData();
this
.
panelVisible
=
false
;
this
.
refresh
();
this
.
save
.
emit
(
this
.
item
);
}
saveText
(
t
)
{
}
radioChange
(
e
)
{
this
.
item
.
type
=
e
;
console
.
log
(
'
e:
'
,
e
);
}
onItemImgUploadSuccess
(
e
,
item
)
{
item
.
pic_url
=
e
.
url
;
this
.
refresh
();
}
onItemAudioUploadSuccess
(
e
,
item
)
{
item
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
saveAnima
(
e
)
{
console
.
log
(
"
~ e:
"
,
e
);
}
copyChangeData
()
{
console
.
log
(
'
this.item:
'
,
this
.
item
);
const
jsonData
=
{
changeOption
:
this
.
item
.
changeOption
,
changeTime
:
this
.
item
.
changeTime
// bgItem,
// hotZoneItemArr,
// isHasRect: this.isHasRect,
// isHasPic: this.isHasPic,
// isHasText: this.isHasText,
// isHasAudio: this.isHasAudio,
// isHasAnima: this.isHasAnima,
// hotZoneFontObj: this.hotZoneFontObj,
// defaultItemType: this.defaultItemType,
// hotZoneImgSize: this.hotZoneImgSize,
};
const
oInput
=
document
.
createElement
(
'
input
'
);
oInput
.
value
=
JSON
.
stringify
(
jsonData
);
document
.
body
.
appendChild
(
oInput
);
oInput
.
select
();
// 选择对象
document
.
execCommand
(
'
Copy
'
);
// 执行浏览器复制命令
document
.
body
.
removeChild
(
oInput
);
this
.
nzMessageService
.
success
(
'
复制成功
'
);
}
importData
()
{
if
(
!
this
.
pasteData
)
{
return
;
}
try
{
const
data
=
JSON
.
parse
(
this
.
pasteData
);
console
.
log
(
'
data:
'
,
data
);
const
{
changeOption
,
changeTime
}
=
data
;
this
.
item
.
changeOption
=
changeOption
;
this
.
item
.
changeTime
=
changeTime
;
this
.
pasteData
=
''
;
}
catch
(
e
)
{
console
.
log
(
'
err:
'
,
e
);
this
.
nzMessageService
.
error
(
'
导入失败
'
);
}
}
/**
* 刷新 渲染页面
*/
refresh
()
{
// this.refreshEmitter.emit();
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
},
1
);
}
closePanel
()
{
console
.
log
(
'
in closePanel
'
);
this
.
refresh
();
}
ngOnDestroy
()
{
}
}
form/src/app/common/custom-hot-zone/Unit.ts
View file @
a50b292e
...
@@ -329,6 +329,7 @@ export class MySprite extends Sprite {
...
@@ -329,6 +329,7 @@ export class MySprite extends Sprite {
this
.
scaleX
=
this
.
scaleY
=
value
;
this
.
scaleX
=
this
.
scaleY
=
value
;
}
}
getBoundingBox
()
{
getBoundingBox
()
{
const
getParentData
=
(
item
)
=>
{
const
getParentData
=
(
item
)
=>
{
...
@@ -1956,6 +1957,10 @@ export class HotZoneItem extends MySprite {
...
@@ -1956,6 +1957,10 @@ export class HotZoneItem extends MySprite {
audio_url
;
audio_url
;
pic_url
;
pic_url
;
text
;
text
;
gIdx
;
isAnimaStyle
=
false
;
private
_itemType
;
private
_itemType
;
private
shapeRect
:
ShapeRect
;
private
shapeRect
:
ShapeRect
;
...
@@ -2056,7 +2061,10 @@ export class HotZoneItem extends MySprite {
...
@@ -2056,7 +2061,10 @@ export class HotZoneItem extends MySprite {
this
.
hideLabel
();
this
.
hideLabel
();
}
}
setAnimaStyle
(
isAnimaStyle
)
{
this
.
isAnimaStyle
=
isAnimaStyle
;
console
.
log
(
'
in setAnimaStyle
'
)
}
drawArrow
()
{
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
if
(
!
this
.
arrow
)
{
return
;
}
...
@@ -2068,13 +2076,16 @@ export class HotZoneItem extends MySprite {
...
@@ -2068,13 +2076,16 @@ export class HotZoneItem extends MySprite {
this
.
arrow
.
update
();
this
.
arrow
.
update
();
this
.
arrowTop
.
x
=
rect
.
x
+
rect
.
width
/
2
;
if
(
!
this
.
isAnimaStyle
)
{
this
.
arrowTop
.
y
=
rect
.
y
;
this
.
arrowTop
.
x
=
rect
.
x
+
rect
.
width
/
2
;
this
.
arrowTop
.
update
();
this
.
arrowTop
.
y
=
rect
.
y
;
this
.
arrowTop
.
update
();
this
.
arrowRight
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrowRight
.
y
=
rect
.
y
+
rect
.
height
/
2
;
this
.
arrowRight
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrowRight
.
update
();
this
.
arrowRight
.
y
=
rect
.
y
+
rect
.
height
/
2
;
this
.
arrowRight
.
update
();
}
}
}
drawFrame
()
{
drawFrame
()
{
...
@@ -2197,10 +2208,155 @@ export class HotZoneLabel extends Label {
...
@@ -2197,10 +2208,155 @@ export class HotZoneLabel extends Label {
this
.
drawFrame
();
this
.
drawFrame
();
}
}
getLabelRect
()
{
const
rect
=
this
.
getBoundingBox
();
const
width
=
rect
.
width
/
this
.
scaleX
;
const
height
=
this
.
height
*
this
.
scaleY
;
const
x
=
this
.
x
-
width
/
2
;
const
y
=
this
.
y
-
height
/
2
;
return
{
width
,
height
,
x
,
y
};
}
}
}
export
class
HotZoneAction
extends
MySprite
{
}
export
class
DragItem
extends
MySprite
{
lineDashFlag
=
true
;
item
;
init
()
{
this
.
anchorX
=
0.5
;
this
.
anchorY
=
0.5
;
this
.
initCenterCircle
();
}
setSize
(
w
,
h
)
{
this
.
anchorX
=
0.5
;
this
.
anchorY
=
0.5
;
this
.
width
=
w
;
this
.
height
=
h
;
// const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2;
// rect.y = -h / 2;
// rect.setSize(w, h);
// rect.fillColor = '#000000';
// rect.alpha = 0.1;
// this.addChild(rect);
}
initCenterCircle
()
{
const
circle
=
new
ShapeCircle
(
this
.
ctx
);
circle
.
setRadius
(
10
);
circle
.
fillColor
=
'
#ffa568
'
this
.
addChild
(
circle
);
this
.
width
=
circle
.
width
;
this
.
height
=
circle
.
height
;
}
getPosition
()
{
return
{
x
:
this
.
x
,
y
:
this
.
y
};
}
drawLine
()
{
if
(
!
this
.
item
)
{
return
;
}
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
//+ w / 2;
const
y
=
rect
.
y
//+ h / 2;
this
.
ctx
.
setLineDash
([
4
,
4
]);
this
.
ctx
.
lineWidth
=
1
;
this
.
ctx
.
strokeStyle
=
'
#ffa568
'
;
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
this
.
item
.
x
,
this
.
item
.
y
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
//+ w / 2;
const
y
=
rect
.
y
//+ h / 2;
this
.
ctx
.
setLineDash
([
4
,
4
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#ffa568
'
;
// this.ctx.fillStyle = '#ffffff';
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
if
(
this
.
lineDashFlag
)
{
this
.
drawLine
();
// this.drawFrame();
// this.drawArrow();
}
}
}
export
class
EditorItem
extends
MySprite
{
export
class
EditorItem
extends
MySprite
{
...
@@ -2208,6 +2364,8 @@ export class EditorItem extends MySprite {
...
@@ -2208,6 +2364,8 @@ export class EditorItem extends MySprite {
arrow
:
MySprite
;
arrow
:
MySprite
;
label
:
Label
;
label
:
Label
;
text
;
text
;
arrowTop
;
arrowRight
;
showLabel
(
text
=
null
)
{
showLabel
(
text
=
null
)
{
...
@@ -2246,6 +2404,13 @@ export class EditorItem extends MySprite {
...
@@ -2246,6 +2404,13 @@ export class EditorItem extends MySprite {
this
.
arrow
.
load
(
'
assets/common/arrow.png
'
,
1
,
0
);
this
.
arrow
.
load
(
'
assets/common/arrow.png
'
,
1
,
0
);
this
.
arrow
.
setScaleXY
(
0.06
);
this
.
arrow
.
setScaleXY
(
0.06
);
// this.arrowTop = new MySprite(this.ctx);
// this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
// this.arrowTop.setScaleXY(0.06);
//
// this.arrowRight = new MySprite(this.ctx);
// this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
// this.arrowRight.setScaleXY(0.06);
}
}
this
.
showLabel
();
this
.
showLabel
();
...
@@ -2262,16 +2427,25 @@ export class EditorItem extends MySprite {
...
@@ -2262,16 +2427,25 @@ export class EditorItem extends MySprite {
this
.
hideLabel
();
this
.
hideLabel
();
}
}
refreshLabelScale
()
{}
drawArrow
()
{
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
if
(
!
this
.
arrow
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
const
rect
=
this
.
getBoundingBox
();
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
update
();
this
.
arrow
.
update
();
// this.arrowTop.x = rect.x + rect.width / 2;
// this.arrowTop.y = rect.y;
// this.arrowTop.update();
//
// this.arrowRight.x = rect.x + rect.width;
// this.arrowRight.y = rect.y + rect.height / 2;
// this.arrowRight.update();
}
}
drawFrame
()
{
drawFrame
()
{
...
@@ -2325,784 +2499,3 @@ export class EditorItem extends MySprite {
...
@@ -2325,784 +2499,3 @@ export class EditorItem extends MySprite {
}
}
//
//
// import TWEEN from '@tweenjs/tween.js';
//
//
// class Sprite {
// x = 0;
// y = 0;
// color = '';
// radius = 0;
// alive = false;
// margin = 0;
// angle = 0;
// ctx;
//
// constructor(ctx) {
// this.ctx = ctx;
// }
// update($event) {
// this.draw();
// }
// draw() {
//
// }
//
// }
//
//
//
//
//
// export class MySprite extends Sprite {
//
// width = 0;
// height = 0;
// _anchorX = 0;
// _anchorY = 0;
// _offX = 0;
// _offY = 0;
// scaleX = 1;
// scaleY = 1;
// alpha = 1;
// rotation = 0;
// visible = true;
//
// children = [this];
//
// img;
// _z = 0;
//
//
// init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
//
// if (imgObj) {
//
// this.img = imgObj;
//
// this.width = this.img.width;
// this.height = this.img.height;
// }
//
// this.anchorX = anchorX;
// this.anchorY = anchorY;
// }
//
//
//
// update($event = null) {
// if (this.visible) {
// this.draw();
// }
// }
// draw() {
//
// this.ctx.save();
//
// this.drawInit();
//
// this.updateChildren();
//
// this.ctx.restore();
// }
//
// drawInit() {
//
// this.ctx.translate(this.x, this.y);
//
// this.ctx.rotate(this.rotation * Math.PI / 180);
//
// this.ctx.scale(this.scaleX, this.scaleY);
//
// this.ctx.globalAlpha = this.alpha;
//
// }
//
// drawSelf() {
// if (this.img) {
// this.ctx.drawImage(this.img, this._offX, this._offY);
// }
// }
//
// updateChildren() {
//
// if (this.children.length <= 0) { return; }
//
// for (let i = 0; i < this.children.length; i++) {
//
// if (this.children[i] === this) {
//
// this.drawSelf();
// } else {
//
// this.children[i].update();
// }
// }
// }
//
//
// load(url, anchorX = 0.5, anchorY = 0.5) {
//
// return new Promise((resolve, reject) => {
// const img = new Image();
// img.onload = () => resolve(img);
// img.onerror = reject;
// img.src = url;
// }).then(img => {
//
// this.init(img, anchorX, anchorY);
// return img;
// });
// }
//
// addChild(child, z = 1) {
// if (this.children.indexOf(child) === -1) {
// this.children.push(child);
// child._z = z;
// child.parent = this;
// }
//
// this.children.sort((a, b) => {
// return a._z - b._z;
// });
//
// }
// removeChild(child) {
// const index = this.children.indexOf(child);
// if (index !== -1) {
// this.children.splice(index, 1);
// }
// }
//
// set anchorX(value) {
// this._anchorX = value;
// this.refreshAnchorOff();
// }
// get anchorX() {
// return this._anchorX;
// }
// set anchorY(value) {
// this._anchorY = value;
// this.refreshAnchorOff();
// }
// get anchorY() {
// return this._anchorY;
// }
// refreshAnchorOff() {
// this._offX = -this.width * this.anchorX;
// this._offY = -this.height * this.anchorY;
// }
//
// setScaleXY(value) {
// this.scaleX = this.scaleY = value;
// }
//
// getBoundingBox() {
//
// const x = this.x + this._offX * this.scaleX;
// const y = this.y + this._offY * this.scaleY;
// const width = this.width * this.scaleX;
// const height = this.height * this.scaleY;
//
// return {x, y, width, height};
// }
//
// }
//
//
//
//
//
// export class Item extends MySprite {
//
// baseX;
//
// move(targetY, callBack) {
//
// const self = this;
//
// const tween = new TWEEN.Tween(this)
// .to({ y: targetY }, 2500)
// .easing(TWEEN.Easing.Quintic.Out)
// .onComplete(function() {
//
// self.hide(callBack);
// // if (callBack) {
// // callBack();
// // }
// })
// .start();
//
// }
//
// show(callBack = null) {
//
// const tween = new TWEEN.Tween(this)
// .to({ alpha: 1 }, 800)
// // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
// if (callBack) {
// callBack();
// }
// })
// .start(); // Start the tween immediately.
//
// }
//
// hide(callBack = null) {
//
// const tween = new TWEEN.Tween(this)
// .to({ alpha: 0 }, 800)
// // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
// if (callBack) {
// callBack();
// }
// })
// .start(); // Start the tween immediately.
// }
//
//
// shake(id) {
//
//
// if (!this.baseX) {
// this.baseX = this.x;
// }
//
// const baseX = this.baseX;
// const baseTime = 50;
// const sequence = [
// {target: {x: baseX + 40 * id}, time: baseTime - 25},
// {target: {x: baseX - 20 * id}, time: baseTime},
// {target: {x: baseX + 10 * id}, time: baseTime},
// {target: {x: baseX - 5 * id}, time: baseTime},
// {target: {x: baseX + 2 * id}, time: baseTime},
// {target: {x: baseX - 1 * id}, time: baseTime},
// {target: {x: baseX}, time: baseTime},
//
// ];
//
//
// const self = this;
//
// function runSequence() {
//
// if (self['shakeTween']) {
// self['shakeTween'].stop();
// }
//
// const tween = new TWEEN.Tween(self);
//
// if (sequence.length > 0) {
// // console.log('sequence.length: ', sequence.length);
// const action = sequence.shift();
// tween.to(action['target'], action['time']);
// tween.onComplete( () => {
// runSequence();
// });
// tween.start();
//
// self['shakeTween'] = tween;
// }
// }
//
// runSequence();
//
// }
//
//
//
// drop(targetY, callBack = null) {
//
// const self = this;
//
// const time = Math.abs(targetY - this.y) * 2.4;
//
// this.alpha = 1;
//
// const tween = new TWEEN.Tween(this)
// .to({ y: targetY }, time)
// .easing(TWEEN.Easing.Cubic.In)
// .onComplete(function() {
//
// // self.hideItem(callBack);
// if (callBack) {
// callBack();
// }
// })
// .start();
//
//
// }
//
//
// }
//
//
// export class EndSpr extends MySprite {
//
// show(s) {
//
// this.scaleX = this.scaleY = 0;
// this.alpha = 0;
//
// const tween = new TWEEN.Tween(this)
// .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
// .easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
// .onComplete(function() {
//
// })
// .start(); // Start the tween immediately.
//
// }
// }
//
//
//
// export class ShapeRect extends MySprite {
//
// fillColor = '#FF0000';
//
// setSize(w, h) {
// this.width = w;
// this.height = h;
//
// console.log('w:', w);
// console.log('h:', h);
// }
//
// drawShape() {
//
// this.ctx.fillStyle = this.fillColor;
// this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
//
// }
//
//
// drawSelf() {
// super.drawSelf();
// this.drawShape();
// }
// }
//
//
// export class HotZoneItem extends MySprite {
//
//
// lineDashFlag = false;
// arrow: MySprite;
// label: Label;
// title;
//
// arrowTop;
// arrowRight;
//
// audio_url;
// pic_url;
// text;
// private _itemType;
// private shapeRect: ShapeRect;
//
// get itemType() {
// return this._itemType;
// }
// set itemType(value) {
// this._itemType = value;
// }
//
// setSize(w, h) {
// this.width = w;
// this.height = h;
//
//
// const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2;
// rect.y = -h / 2;
// rect.setSize(w, h);
// rect.fillColor = '#ffffff';
// rect.alpha = 0.2;
// this.addChild(rect);
// }
//
// showLabel(text = null) {
//
//
// if (!this.label) {
// this.label = new Label(this.ctx);
// this.label.anchorY = 0;
// this.label.fontSize = '40px';
// this.label.textAlign = 'center';
// this.addChild(this.label);
// // this.label.scaleX = 1 / this.scaleX;
// // this.label.scaleY = 1 / this.scaleY;
//
// this.refreshLabelScale();
//
// }
//
// if (text) {
// this.label.text = text;
// } else if (this.title) {
// this.label.text = this.title;
// }
// this.label.visible = true;
//
// }
//
// hideLabel() {
// if (!this.label) { return; }
//
// this.label.visible = false;
// }
//
// refreshLabelScale() {
// if (this.scaleX == this.scaleY) {
// this.label.setScaleXY(1);
// }
//
// if (this.scaleX > this.scaleY) {
// this.label.scaleX = this.scaleY / this.scaleX;
// } else {
// this.label.scaleY = this.scaleX / this.scaleY;
// }
// }
//
// showLineDash() {
// this.lineDashFlag = true;
//
// if (this.arrow) {
// this.arrow.visible = true;
// } else {
// this.arrow = new MySprite(this.ctx);
// this.arrow.load('assets/common/arrow.png', 1, 0);
// this.arrow.setScaleXY(0.06);
//
// this.arrowTop = new MySprite(this.ctx);
// this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
// this.arrowTop.setScaleXY(0.06);
//
// this.arrowRight = new MySprite(this.ctx);
// this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
// this.arrowRight.setScaleXY(0.06);
// }
//
// this.showLabel();
// }
//
// hideLineDash() {
//
// this.lineDashFlag = false;
//
// if (this.arrow) {
// this.arrow.visible = false;
// }
//
// this.hideLabel();
// }
//
//
//
// drawArrow() {
// if (!this.arrow) { return; }
//
// const rect = this.getBoundingBox();
// this.arrow.x = rect.x + rect.width;
// this.arrow.y = rect.y;
//
// this.arrow.update();
//
//
// this.arrowTop.x = rect.x + rect.width / 2;
// this.arrowTop.y = rect.y;
// this.arrowTop.update();
//
// this.arrowRight.x = rect.x + rect.width;
// this.arrowRight.y = rect.y + rect.height / 2;
// this.arrowRight.update();
// }
//
// drawFrame() {
//
//
// this.ctx.save();
//
//
// const rect = this.getBoundingBox();
//
// const w = rect.width;
// const h = rect.height;
// const x = rect.x + w / 2;
// const y = rect.y + h / 2;
//
// this.ctx.setLineDash([5, 5]);
// this.ctx.lineWidth = 2;
// this.ctx.strokeStyle = '#1bfff7';
// // this.ctx.fillStyle = '#ffffff';
//
// this.ctx.beginPath();
//
// this.ctx.moveTo( x - w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y - h / 2);
//
// // this.ctx.fill();
// this.ctx.stroke();
//
//
//
//
// this.ctx.restore();
//
// }
//
// draw() {
// super.draw();
//
// if (this.lineDashFlag) {
// this.drawFrame();
// this.drawArrow();
// }
// }
// }
//
//
// export class EditorItem extends MySprite {
//
// lineDashFlag = false;
// arrow: MySprite;
// label:Label;
// text;
//
// showLabel(text = null) {
//
//
// if (!this.label) {
// this.label = new Label(this.ctx);
// this.label.anchorY = 0;
// this.label.fontSize = '50px';
// this.label.textAlign = 'center';
// this.addChild(this.label);
// this.label.setScaleXY(1 / this.scaleX);
// }
//
// if (text) {
// this.label.text = text;
// } else if (this.text) {
// this.label.text = this.text;
// }
// this.label.visible = true;
//
// }
//
// hideLabel() {
// if (!this.label) { return; }
//
// this.label.visible = false;
// }
//
// showLineDash() {
// this.lineDashFlag = true;
//
// if (this.arrow) {
// this.arrow.visible = true;
// } else {
// this.arrow = new MySprite(this.ctx);
// this.arrow.load('assets/common/arrow.png', 1, 0);
// this.arrow.setScaleXY(0.06);
//
// }
//
// this.showLabel();
// }
//
// hideLineDash() {
//
// this.lineDashFlag = false;
//
// if (this.arrow) {
// this.arrow.visible = false;
// }
//
// this.hideLabel();
// }
//
//
//
// drawArrow() {
// if (!this.arrow) { return; }
//
// const rect = this.getBoundingBox();
// this.arrow.x = rect.x + rect.width;
// this.arrow.y = rect.y;
//
// this.arrow.update();
// }
//
// drawFrame() {
//
//
// this.ctx.save();
//
//
// const rect = this.getBoundingBox();
//
// const w = rect.width;
// const h = rect.height;
// const x = rect.x + w / 2;
// const y = rect.y + h / 2;
//
// this.ctx.setLineDash([5, 5]);
// this.ctx.lineWidth = 2;
// this.ctx.strokeStyle = '#1bfff7';
// // this.ctx.fillStyle = '#ffffff';
//
// this.ctx.beginPath();
//
// this.ctx.moveTo( x - w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y - h / 2);
//
// this.ctx.lineTo(x + w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y + h / 2);
//
// this.ctx.lineTo(x - w / 2, y - h / 2);
//
// // this.ctx.fill();
// this.ctx.stroke();
//
//
//
//
// this.ctx.restore();
//
// }
//
// draw() {
// super.draw();
//
// if (this.lineDashFlag) {
// this.drawFrame();
// this.drawArrow();
// }
// }
// }
//
//
//
// export class Label extends MySprite {
//
// text:String;
// fontSize:String = '40px';
// fontName:String = 'Verdana';
// textAlign:String = 'left';
//
//
// constructor(ctx) {
// super(ctx);
// this.init();
// }
//
// drawText() {
//
// // console.log('in drawText', this.text);
//
// if (!this.text) { return; }
//
// this.ctx.font = `${this.fontSize} ${this.fontName}`;
// this.ctx.textAlign = this.textAlign;
// this.ctx.textBaseline = 'middle';
// this.ctx.fontWeight = 900;
//
// this.ctx.lineWidth = 5;
// this.ctx.strokeStyle = '#ffffff';
// this.ctx.strokeText(this.text, 0, 0);
//
// this.ctx.fillStyle = '#000000';
// this.ctx.fillText(this.text, 0, 0);
//
//
// }
//
//
// drawSelf() {
// super.drawSelf();
// this.drawText();
// }
//
// }
//
//
//
// export function getPosByAngle(angle, len) {
//
// const radian = angle * Math.PI / 180;
// const x = Math.sin(radian) * len;
// const y = Math.cos(radian) * len;
//
// return {x, y};
//
// }
//
// export function getAngleByPos(px, py, mx, my) {
//
// // const _x = p2x - p1x;
// // const _y = p2y - p1y;
// // const tan = _y / _x;
// //
// // const radina = Math.atan(tan); // 用反三角函数求弧度
// // const angle = Math.floor(180 / (Math.PI / radina)); //
// //
// // console.log('r: ' , angle);
// // return angle;
// //
//
//
//
// const x = Math.abs(px - mx);
// const y = Math.abs(py - my);
// // const x = Math.abs(mx - px);
// // const y = Math.abs(my - py);
// const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
// const cos = y / z;
// const radina = Math.acos(cos); // 用反三角函数求弧度
// let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
//
// if(mx > px && my > py) {// 鼠标在第四象限
// angle = 180 - angle;
// }
//
// if(mx === px && my > py) {// 鼠标在y轴负方向上
// angle = 180;
// }
//
// if(mx > px && my === py) {// 鼠标在x轴正方向上
// angle = 90;
// }
//
// if(mx < px && my > py) {// 鼠标在第三象限
// angle = 180 + angle;
// }
//
// if(mx < px && my === py) {// 鼠标在x轴负方向
// angle = 270;
// }
//
// if(mx < px && my < py) {// 鼠标在第二象限
// angle = 360 - angle;
// }
//
// // console.log('angle: ', angle);
// return angle;
//
// }
form/src/app/common/custom-hot-zone/Units.ts
0 → 100644
View file @
a50b292e
import
TWEEN
from
'
@tweenjs/tween.js
'
;
interface
AirWindow
extends
Window
{
air
:
any
;
curCtx
:
any
;
}
declare
let
window
:
AirWindow
;
class
Sprite
{
x
=
0
;
y
=
0
;
color
=
''
;
radius
=
0
;
alive
=
false
;
margin
=
0
;
angle
=
0
;
ctx
;
constructor
(
ctx
=
null
)
{
if
(
!
ctx
)
{
this
.
ctx
=
window
.
curCtx
;
}
else
{
this
.
ctx
=
ctx
;
}
}
update
(
$event
)
{
this
.
draw
();
}
draw
()
{
}
}
export
class
MySprite
extends
Sprite
{
_width
=
0
;
_height
=
0
;
_anchorX
=
0
;
_anchorY
=
0
;
_offX
=
0
;
_offY
=
0
;
scaleX
=
1
;
scaleY
=
1
;
_alpha
=
1
;
rotation
=
0
;
visible
=
true
;
skewX
=
0
;
skewY
=
0
;
_shadowFlag
=
false
;
_shadowColor
;
_shadowOffsetX
=
0
;
_shadowOffsetY
=
0
;
_shadowBlur
=
5
;
_radius
=
0
;
children
=
[
this
];
childDepandVisible
=
true
;
childDepandAlpha
=
false
;
img
;
_z
=
0
;
_showRect
;
_bitmapFlag
=
false
;
_offCanvas
;
_offCtx
;
init
(
imgObj
=
null
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
{
if
(
imgObj
)
{
this
.
img
=
imgObj
;
this
.
width
=
this
.
img
.
width
;
this
.
height
=
this
.
img
.
height
;
}
this
.
anchorX
=
anchorX
;
this
.
anchorY
=
anchorY
;
}
setShowRect
(
rect
)
{
this
.
_showRect
=
rect
;
}
setShadow
(
offX
,
offY
,
blur
,
color
=
'
rgba(0, 0, 0, 0.3)
'
)
{
this
.
_shadowFlag
=
true
;
this
.
_shadowColor
=
color
;
this
.
_shadowOffsetX
=
offX
;
this
.
_shadowOffsetY
=
offY
;
this
.
_shadowBlur
=
blur
;
}
setRadius
(
r
)
{
this
.
_radius
=
r
;
}
update
(
$event
=
null
)
{
if
(
!
this
.
visible
&&
this
.
childDepandVisible
)
{
return
;
}
this
.
draw
();
}
draw
()
{
this
.
ctx
.
save
();
this
.
drawInit
();
this
.
updateChildren
();
this
.
ctx
.
restore
();
}
drawInit
()
{
this
.
ctx
.
translate
(
this
.
x
,
this
.
y
);
this
.
ctx
.
rotate
(
this
.
rotation
*
Math
.
PI
/
180
);
this
.
ctx
.
scale
(
this
.
scaleX
,
this
.
scaleY
);
this
.
ctx
.
globalAlpha
=
this
.
alpha
;
this
.
ctx
.
transform
(
1
,
this
.
skewX
,
this
.
skewY
,
1
,
0
,
0
);
//
// if (this._radius) {
//
// const r = this._radius;
// const w = this.width;
// const h = this.height;
//
// this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
// this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
// this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
// this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
// this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
//
// this.ctx.clip();
// }
}
drawSelf
()
{
if
(
this
.
_shadowFlag
)
{
this
.
ctx
.
shadowOffsetX
=
this
.
_shadowOffsetX
;
this
.
ctx
.
shadowOffsetY
=
this
.
_shadowOffsetY
;
this
.
ctx
.
shadowBlur
=
this
.
_shadowBlur
;
this
.
ctx
.
shadowColor
=
this
.
_shadowColor
;
}
else
{
this
.
ctx
.
shadowOffsetX
=
0
;
this
.
ctx
.
shadowOffsetY
=
0
;
this
.
ctx
.
shadowBlur
=
null
;
this
.
ctx
.
shadowColor
=
null
;
}
if
(
this
.
img
)
{
if
(
this
.
_showRect
)
{
const
rect
=
this
.
_showRect
;
this
.
ctx
.
drawImage
(
this
.
img
,
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
,
this
.
_offX
,
this
.
_offY
+
rect
.
y
,
this
.
width
,
rect
.
height
);
}
else
{
this
.
ctx
.
drawImage
(
this
.
img
,
this
.
_offX
,
this
.
_offY
);
}
}
}
updateChildren
()
{
if
(
this
.
children
.
length
<=
0
)
{
return
;
}
for
(
const
child
of
this
.
children
)
{
if
(
child
===
this
)
{
if
(
this
.
visible
)
{
this
.
drawSelf
();
}
}
else
{
child
.
update
();
}
}
}
load
(
url
,
anchorX
=
0.5
,
anchorY
=
0.5
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
const
img
=
new
Image
();
img
.
onload
=
()
=>
resolve
(
img
);
img
.
onerror
=
reject
;
img
.
src
=
url
;
}).
then
(
img
=>
{
this
.
init
(
img
,
anchorX
,
anchorY
);
return
img
;
});
}
addChild
(
child
,
z
=
1
)
{
if
(
this
.
children
.
indexOf
(
child
)
===
-
1
)
{
this
.
children
.
push
(
child
);
child
.
_z
=
z
;
child
.
parent
=
this
;
}
this
.
children
.
sort
((
a
,
b
)
=>
{
return
a
.
_z
-
b
.
_z
;
});
if
(
this
.
childDepandAlpha
)
{
child
.
alpha
=
this
.
alpha
;
}
}
removeChild
(
child
)
{
const
index
=
this
.
children
.
indexOf
(
child
);
if
(
index
!==
-
1
)
{
this
.
children
.
splice
(
index
,
1
);
}
}
removeChildren
()
{
for
(
let
i
=
0
;
i
<
this
.
children
.
length
;
i
++
)
{
if
(
this
.
children
[
i
])
{
if
(
this
.
children
[
i
]
!==
this
)
{
this
.
children
.
splice
(
i
,
1
);
i
--
;
}
}
}
}
_changeChildAlpha
(
alpha
)
{
for
(
const
child
of
this
.
children
)
{
if
(
child
!==
this
)
{
child
.
alpha
=
alpha
;
}
}
}
set
btimapFlag
(
v
)
{
this
.
_bitmapFlag
=
v
;
}
get
btimapFlag
()
{
return
this
.
_bitmapFlag
;
}
set
alpha
(
v
)
{
this
.
_alpha
=
v
;
if
(
this
.
childDepandAlpha
)
{
this
.
_changeChildAlpha
(
v
);
}
}
get
alpha
()
{
return
this
.
_alpha
;
}
set
width
(
v
)
{
this
.
_width
=
v
;
this
.
refreshAnchorOff
();
}
get
width
()
{
return
this
.
_width
;
}
set
height
(
v
)
{
this
.
_height
=
v
;
this
.
refreshAnchorOff
();
}
get
height
()
{
return
this
.
_height
;
}
set
anchorX
(
value
)
{
this
.
_anchorX
=
value
;
this
.
refreshAnchorOff
();
}
get
anchorX
()
{
return
this
.
_anchorX
;
}
set
anchorY
(
value
)
{
this
.
_anchorY
=
value
;
this
.
refreshAnchorOff
();
}
get
anchorY
()
{
return
this
.
_anchorY
;
}
refreshAnchorOff
()
{
this
.
_offX
=
-
this
.
_width
*
this
.
anchorX
;
this
.
_offY
=
-
this
.
_height
*
this
.
anchorY
;
}
setScaleXY
(
value
)
{
this
.
scaleX
=
this
.
scaleY
=
value
;
}
getBoundingBox
()
{
const
getParentData
=
(
item
)
=>
{
let
px
=
item
.
x
;
let
py
=
item
.
y
;
let
sx
=
item
.
scaleX
;
let
sy
=
item
.
scaleY
;
const
parent
=
item
.
parent
;
if
(
parent
)
{
const
obj
=
getParentData
(
parent
);
const
_x
=
obj
.
px
;
const
_y
=
obj
.
py
;
const
_sx
=
obj
.
sx
;
const
_sy
=
obj
.
sy
;
px
=
_x
+
item
.
x
*
_sx
;
py
=
_y
+
item
.
y
*
_sy
;
sx
*=
_sx
;
sy
*=
_sy
;
}
return
{
px
,
py
,
sx
,
sy
};
};
const
data
=
getParentData
(
this
);
const
x
=
data
.
px
+
this
.
_offX
*
Math
.
abs
(
data
.
sx
);
const
y
=
data
.
py
+
this
.
_offY
*
Math
.
abs
(
data
.
sy
);
const
width
=
this
.
width
*
Math
.
abs
(
data
.
sx
);
const
height
=
this
.
height
*
Math
.
abs
(
data
.
sy
);
return
{
x
,
y
,
width
,
height
};
}
}
export
class
RoundSprite
extends
MySprite
{
_newCtx
;
init
(
imgObj
=
null
,
anchorX
:
number
=
0.5
,
anchorY
:
number
=
0.5
)
{
if
(
imgObj
)
{
this
.
img
=
imgObj
;
this
.
width
=
this
.
img
.
width
;
this
.
height
=
this
.
img
.
height
;
}
this
.
anchorX
=
anchorX
;
this
.
anchorY
=
anchorY
;
const
canvas
=
window
[
'
curCanvas
'
];
const
w
=
canvas
.
nativeElement
.
width
;
const
h
=
canvas
.
nativeElement
.
height
;
this
.
_offCanvas
=
document
.
createElement
(
'
canvas
'
);
this
.
_offCanvas
.
width
=
w
;
this
.
_offCanvas
.
height
=
h
;
this
.
_offCtx
=
this
.
_offCanvas
.
getContext
(
'
2d
'
);
// this._newCtx = this.ctx;
// this.ctx = this._offCtx;
}
drawSelf
()
{
//
// if (this._shadowFlag) {
//
// this.ctx.shadowOffsetX = this._shadowOffsetX;
// this.ctx.shadowOffsetY = this._shadowOffsetY;
// this.ctx.shadowBlur = this._shadowBlur;
// this.ctx.shadowColor = this._shadowColor;
// } else {
// this.ctx.shadowOffsetX = 0;
// this.ctx.shadowOffsetY = 0;
// this.ctx.shadowBlur = null;
// this.ctx.shadowColor = null;
// }
if
(
this
.
_radius
)
{
const
r
=
this
.
_radius
;
const
w
=
this
.
width
;
const
h
=
this
.
height
;
const
x
=
-
this
.
_offX
;
const
y
=
-
this
.
_offY
;
this
.
_offCtx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
// 创建水平线
this
.
_offCtx
.
arcTo
(
x
-
w
/
2
,
y
-
h
/
2
,
x
-
w
/
2
+
r
,
y
-
h
/
2
,
r
);
this
.
_offCtx
.
arcTo
(
x
+
w
/
2
,
y
-
h
/
2
,
x
+
w
/
2
,
y
-
h
/
2
+
r
,
r
);
this
.
_offCtx
.
arcTo
(
x
+
w
/
2
,
y
+
h
/
2
,
x
+
w
/
2
-
r
,
y
+
h
/
2
,
r
);
this
.
_offCtx
.
arcTo
(
x
-
w
/
2
,
y
+
h
/
2
,
x
-
w
/
2
,
y
+
h
/
2
-
r
,
r
);
this
.
_offCtx
.
clip
();
}
if
(
this
.
img
)
{
this
.
_offCtx
.
drawImage
(
this
.
img
,
0
,
0
);
this
.
ctx
.
drawImage
(
this
.
_offCanvas
,
this
.
_offX
,
this
.
_offX
);
}
}
}
export
class
ColorSpr
extends
MySprite
{
r
=
0
;
g
=
0
;
b
=
0
;
createGSCanvas
()
{
if
(
!
this
.
img
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
if
(
rect
.
width
<=
1
||
rect
.
height
<=
1
)
{
return
;
}
const
c
=
this
.
ctx
.
getImageData
(
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
);
for
(
let
i
=
0
;
i
<
c
.
height
;
i
++
)
{
for
(
let
j
=
0
;
j
<
c
.
width
;
j
++
)
{
const
x
=
(
i
*
4
)
*
c
.
width
+
(
j
*
4
);
const
r
=
c
.
data
[
x
];
const
g
=
c
.
data
[
x
+
1
];
const
b
=
c
.
data
[
x
+
2
];
c
.
data
[
x
]
=
this
.
r
;
c
.
data
[
x
+
1
]
=
this
.
g
;
c
.
data
[
x
+
2
]
=
this
.
b
;
// c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
// // c.data[x + 3] = 255;
}
}
this
.
ctx
.
putImageData
(
c
,
rect
.
x
,
rect
.
y
,
0
,
0
,
rect
.
width
,
rect
.
height
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
createGSCanvas
();
}
}
export
class
GrayscaleSpr
extends
MySprite
{
grayScale
=
120
;
createGSCanvas
()
{
if
(
!
this
.
img
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
const
c
=
this
.
ctx
.
getImageData
(
rect
.
x
,
rect
.
y
,
rect
.
width
,
rect
.
height
);
for
(
let
i
=
0
;
i
<
c
.
height
;
i
++
)
{
for
(
let
j
=
0
;
j
<
c
.
width
;
j
++
)
{
const
x
=
(
i
*
4
)
*
c
.
width
+
(
j
*
4
);
const
r
=
c
.
data
[
x
];
const
g
=
c
.
data
[
x
+
1
];
const
b
=
c
.
data
[
x
+
2
];
// const a = c.data[x + 3];
c
.
data
[
x
]
=
c
.
data
[
x
+
1
]
=
c
.
data
[
x
+
2
]
=
this
.
grayScale
;
// (r + g + b) / 3;
// c.data[x + 3] = 255;
}
}
this
.
ctx
.
putImageData
(
c
,
rect
.
x
,
rect
.
y
,
0
,
0
,
rect
.
width
,
rect
.
height
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
createGSCanvas
();
}
}
export
class
BitMapLabel
extends
MySprite
{
labelArr
;
baseUrl
;
setText
(
data
,
text
)
{
this
.
labelArr
=
[];
const
labelArr
=
[];
const
tmpArr
=
text
.
split
(
''
);
let
totalW
=
0
;
let
h
=
0
;
for
(
const
tmp
of
tmpArr
)
{
const
label
=
new
MySprite
(
this
.
ctx
);
label
.
init
(
data
[
tmp
],
0
);
this
.
addChild
(
label
);
labelArr
.
push
(
label
);
totalW
+=
label
.
width
;
h
=
label
.
height
;
}
this
.
width
=
totalW
;
this
.
height
=
h
;
let
offX
=
-
totalW
/
2
;
for
(
const
label
of
labelArr
)
{
label
.
x
=
offX
;
offX
+=
label
.
width
;
}
this
.
labelArr
=
labelArr
;
}
}
export
class
Label
extends
MySprite
{
private
_text
:
string
;
// fontSize:String = '40px';
fontName
=
'
Verdana
'
;
textAlign
=
'
left
'
;
fontSize
=
40
;
fontColor
=
'
#000000
'
;
fontWeight
=
900
;
_maxWidth
;
outline
=
0
;
outlineColor
=
'
#ffffff
'
;
// _shadowFlag = false;
// _shadowColor;
// _shadowOffsetX;
// _shadowOffsetY;
// _shadowBlur;
_outlineFlag
=
false
;
_outLineWidth
;
_outLineColor
;
constructor
(
ctx
=
null
)
{
super
(
ctx
);
this
.
init
();
}
get
text
():
string
{
return
this
.
_text
;
}
set
text
(
value
:
string
)
{
this
.
_text
=
value
;
this
.
refreshSize
();
}
refreshSize
()
{
this
.
ctx
.
save
();
this
.
ctx
.
font
=
`
${
this
.
fontSize
*
this
.
scaleX
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
this
.
_width
=
this
.
ctx
.
measureText
(
this
.
text
).
width
;
this
.
_height
=
this
.
fontSize
;
this
.
refreshAnchorOff
();
this
.
ctx
.
restore
();
}
setMaxSize
(
w
)
{
this
.
_maxWidth
=
w
;
this
.
refreshSize
();
if
(
this
.
width
>=
w
)
{
this
.
scaleX
*=
w
/
this
.
width
;
this
.
scaleY
*=
w
/
this
.
width
;
}
}
show
(
callBack
=
null
)
{
this
.
visible
=
true
;
if
(
this
.
alpha
>=
1
)
{
return
;
}
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
to
({
alpha
:
1
},
800
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
})
.
start
();
// Start the tween immediately.
}
setOutline
(
width
=
5
,
color
=
'
#ffffff
'
)
{
this
.
_outlineFlag
=
true
;
this
.
_outLineWidth
=
width
;
this
.
_outLineColor
=
color
;
}
drawText
()
{
if
(
!
this
.
text
)
{
return
;
}
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
if
(
this
.
_outlineFlag
)
{
this
.
ctx
.
lineWidth
=
this
.
_outLineWidth
;
this
.
ctx
.
strokeStyle
=
this
.
_outLineColor
;
this
.
ctx
.
strokeText
(
this
.
text
,
0
,
0
);
}
this
.
ctx
.
fillStyle
=
this
.
fontColor
;
if
(
this
.
outline
>
0
)
{
this
.
ctx
.
lineWidth
=
this
.
outline
;
this
.
ctx
.
strokeStyle
=
this
.
outlineColor
;
this
.
ctx
.
strokeText
(
this
.
text
,
0
,
0
);
}
this
.
ctx
.
fillText
(
this
.
text
,
0
,
0
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawText
();
}
}
export
class
RichTextOld
extends
Label
{
textArr
=
[];
fontSize
=
40
;
setText
(
text
:
string
,
words
)
{
let
newText
=
text
;
for
(
const
word
of
words
)
{
const
re
=
new
RegExp
(
word
,
'
g
'
);
newText
=
newText
.
replace
(
re
,
`#
${
word
}
#`
);
// newText = newText.replace(word, `#${word}#`);
}
this
.
textArr
=
newText
.
split
(
'
#
'
);
this
.
text
=
newText
;
// this.setSize();
}
refreshSize
()
{
this
.
ctx
.
save
();
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
let
curX
=
0
;
for
(
const
text
of
this
.
textArr
)
{
const
w
=
this
.
ctx
.
measureText
(
text
).
width
;
curX
+=
w
;
}
this
.
width
=
curX
;
this
.
height
=
this
.
fontSize
;
this
.
refreshAnchorOff
();
this
.
ctx
.
restore
();
}
show
(
callBack
=
null
)
{
// console.log(' in show ');
this
.
visible
=
true
;
// this.alpha = 0;
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
to
({
alpha
:
1
},
800
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
})
.
start
();
// Start the tween immediately.
}
drawText
()
{
// console.log('in drawText', this.text);
if
(
!
this
.
text
)
{
return
;
}
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
900
;
this
.
ctx
.
lineWidth
=
5
;
this
.
ctx
.
strokeStyle
=
'
#ffffff
'
;
// this.ctx.strokeText(this.text, 0, 0);
this
.
ctx
.
fillStyle
=
'
#000000
'
;
// this.ctx.fillText(this.text, 0, 0);
let
curX
=
0
;
for
(
let
i
=
0
;
i
<
this
.
textArr
.
length
;
i
++
)
{
const
w
=
this
.
ctx
.
measureText
(
this
.
textArr
[
i
]).
width
;
if
((
i
+
1
)
%
2
===
0
)
{
this
.
ctx
.
fillStyle
=
'
#c8171e
'
;
}
else
{
this
.
ctx
.
fillStyle
=
'
#000000
'
;
}
this
.
ctx
.
fillText
(
this
.
textArr
[
i
],
curX
,
0
);
curX
+=
w
;
}
}
}
export
class
RichText
extends
Label
{
disH
=
30
;
constructor
(
ctx
?:
any
)
{
super
(
ctx
);
// this.dataArr = dataArr;
}
drawText
()
{
if
(
!
this
.
text
)
{
return
;
}
this
.
ctx
.
font
=
`
${
this
.
fontSize
}
px
${
this
.
fontName
}
`
;
this
.
ctx
.
textAlign
=
this
.
textAlign
;
this
.
ctx
.
textBaseline
=
'
middle
'
;
this
.
ctx
.
fontWeight
=
this
.
fontWeight
;
this
.
ctx
.
fillStyle
=
this
.
fontColor
;
const
selfW
=
this
.
width
*
this
.
scaleX
;
const
chr
=
this
.
text
.
split
(
'
'
);
let
temp
=
''
;
const
row
=
[];
const
w
=
selfW
-
80
;
const
disH
=
(
this
.
fontSize
+
this
.
disH
)
*
this
.
scaleY
;
for
(
const
c
of
chr
)
{
if
(
this
.
ctx
.
measureText
(
temp
).
width
<
w
&&
this
.
ctx
.
measureText
(
temp
+
(
c
)).
width
<=
w
)
{
temp
+=
'
'
+
c
;
}
else
{
row
.
push
(
temp
);
temp
=
'
'
+
c
;
}
}
row
.
push
(
temp
);
const
x
=
0
;
const
y
=
-
row
.
length
*
disH
/
2
;
// for (let b = 0 ; b < row.length; b++) {
// this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
// }
if
(
this
.
_outlineFlag
)
{
this
.
ctx
.
lineWidth
=
this
.
_outLineWidth
;
this
.
ctx
.
strokeStyle
=
this
.
_outLineColor
;
for
(
let
b
=
0
;
b
<
row
.
length
;
b
++
)
{
this
.
ctx
.
strokeText
(
row
[
b
],
x
,
y
+
(
b
+
1
)
*
disH
);
// 每行字体y坐标间隔20
}
// this.ctx.strokeText(this.text, 0, 0);
}
// this.ctx.fillStyle = '#ff7600';
for
(
let
b
=
0
;
b
<
row
.
length
;
b
++
)
{
this
.
ctx
.
fillText
(
row
[
b
],
x
,
y
+
(
b
+
1
)
*
disH
);
// 每行字体y坐标间隔20
}
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawText
();
}
}
export
class
LineRect
extends
MySprite
{
lineColor
=
'
#ffffff
'
;
lineWidth
=
10
;
setSize
(
w
,
h
)
{
this
.
width
=
w
;
this
.
height
=
h
;
}
drawLine
()
{
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
this
.
_offX
,
this
.
_offY
);
this
.
ctx
.
lineTo
(
this
.
_offX
+
this
.
width
,
this
.
_offY
);
this
.
ctx
.
lineTo
(
this
.
_offX
+
this
.
width
,
this
.
_offY
+
this
.
height
);
this
.
ctx
.
lineTo
(
this
.
_offX
,
this
.
_offY
+
this
.
height
);
this
.
ctx
.
closePath
();
this
.
ctx
.
lineWidth
=
this
.
lineWidth
;
// this.ctx.fillStyle = "rgb(2,33,42)"; //指定填充颜色
// this.ctx.fill(); //对多边形进行填充
this
.
ctx
.
strokeStyle
=
this
.
lineColor
;
// "#ffffff";
this
.
ctx
.
stroke
();
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawLine
();
}
}
export
class
ShapeRect
extends
MySprite
{
fillColor
=
'
#FF0000
'
;
setSize
(
w
,
h
)
{
this
.
width
=
w
;
this
.
height
=
h
;
// console.log('w:', w);
// console.log('h:', h);
}
drawShape
()
{
this
.
ctx
.
fillStyle
=
this
.
fillColor
;
this
.
ctx
.
fillRect
(
this
.
_offX
,
this
.
_offY
,
this
.
width
,
this
.
height
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawShape
();
}
}
export
class
Line
extends
MySprite
{
lineWidth
=
5
;
lineColor
=
'
#000000
'
;
_pointArr
=
[];
roundFlag
=
true
;
_pointS
=
1
;
imgObj
;
bitMap
;
_offCtx
;
_offCanvas
;
lastPointIndex
=
0
;
init
()
{
const
canvas
=
window
[
'
curCanvas
'
];
const
w
=
canvas
.
nativeElement
.
width
;
const
h
=
canvas
.
nativeElement
.
height
;
console
.
log
(
'
w:
'
,
w
);
console
.
log
(
'
h:
'
,
h
);
this
.
_offCanvas
=
document
.
createElement
(
'
canvas
'
);
this
.
_offCanvas
.
width
=
w
;
this
.
_offCanvas
.
height
=
h
;
// this._offCanvas = _offCanvas;
// this._offCtx = this._offCanvas.getContext('2d');
// this._offCanvas = new OffscreenCanvas(w, h);
this
.
_offCtx
=
this
.
_offCanvas
.
getContext
(
'
2d
'
);
}
addPoint
(
x
,
y
)
{
this
.
_pointArr
.
push
([
x
,
y
]);
if
(
this
.
_pointArr
.
length
<
2
)
{
return
;
}
//
// const lastP = this._pointArr[this._pointArr.length - 1];
//
//
// const context = this._offCtx;
// context.moveTo (lastP[0], lastP[1]); // 设置起点状态
// context.lineTo (x, y); // 设置末端状态
//
// context.lineWidth = this.lineWidth; //设置线宽状态
// context.strokeStyle = this.lineColor;
// context.stroke();
//
//
// this.bitMap = this._offCanvas.transferToImageBitmap();
// const tmpLine = new MySprite(this._offCtx);
// tmpLine.init(this.imgObj);
// tmpLine.anchorY = 1;
// tmpLine.anchorX = 0.5;
// tmpLine.x = lastP[0];
// tmpLine.y = lastP[1];
//
// const disH = getPosDistance(lastP[0], lastP[1], x, y);
// tmpLine.scaleX = this.lineWidth / tmpLine.width;
// tmpLine.scaleY = disH / tmpLine.height * 1.1;
//
// const angle = getAngleByPos(lastP[0], lastP[1], x, y);
// tmpLine.rotation = angle;
//
// this.addChild(tmpLine);
}
setPointArr
(
arr
,
imgObj
)
{
this
.
removeChildren
();
if
(
arr
.
length
<
2
)
{
return
;
}
let
p1
=
arr
[
0
];
let
p2
;
for
(
let
i
=
1
;
i
<
arr
.
length
;
i
++
)
{
p2
=
arr
[
i
];
const
tmpLine
=
new
MySprite
();
tmpLine
.
init
(
imgObj
);
tmpLine
.
anchorY
=
1
;
tmpLine
.
anchorX
=
0.5
;
tmpLine
.
x
=
p1
[
0
];
tmpLine
.
y
=
p1
[
1
];
const
disH
=
getPosDistance
(
p1
[
0
],
p1
[
1
],
p2
[
0
],
p2
[
1
]);
tmpLine
.
scaleX
=
this
.
lineWidth
/
tmpLine
.
width
;
tmpLine
.
scaleY
=
disH
/
tmpLine
.
height
*
1.1
;
const
angle
=
getAngleByPos
(
p1
[
0
],
p1
[
1
],
p2
[
0
],
p2
[
1
]);
tmpLine
.
rotation
=
angle
;
this
.
addChild
(
tmpLine
);
p1
=
p2
;
}
}
drawLine
()
{
if
(
this
.
_pointArr
.
length
<
2
)
{
return
;
}
const
curMaxPointIndex
=
this
.
_pointArr
.
length
-
1
;
if
(
curMaxPointIndex
>
this
.
lastPointIndex
)
{
const
arr
=
this
.
_pointArr
;
const
context
=
this
.
_offCtx
;
context
.
moveTo
(
arr
[
this
.
lastPointIndex
][
0
]
*
this
.
_pointS
,
arr
[
this
.
lastPointIndex
][
1
]
*
this
.
_pointS
);
// 设置起点状态
for
(
let
i
=
this
.
lastPointIndex
+
1
;
i
<
arr
.
length
;
i
++
)
{
context
.
lineTo
(
arr
[
i
][
0
]
*
this
.
_pointS
,
arr
[
i
][
1
]
*
this
.
_pointS
);
// 设置末端状态
}
if
(
this
.
roundFlag
)
{
context
.
lineCap
=
"
round
"
;
}
context
.
lineWidth
=
this
.
lineWidth
;
//设置线宽状态
context
.
strokeStyle
=
this
.
lineColor
;
context
.
stroke
();
this
.
lastPointIndex
=
curMaxPointIndex
;
// this.bitMap = this._offCanvas.transferToImageBitmap();
}
// this.ctx.drawImage(this.bitMap, this._offX, this._offY);
this
.
ctx
.
drawImage
(
this
.
_offCanvas
,
this
.
_offX
,
this
.
_offY
);
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawLine
();
// if (this.img) {
// this.ctx.drawImage(this._offCanvas, 0, 0, this.width, this.height);
// }
// if (this.bitMap) {
// this.bitMap = this._offCanvas.transferToImageBitmap();
// this.ctx.drawImage(this.bitMap, 0, 0, this.width, this.height);
// }
}
}
export
class
ShapeCircle
extends
MySprite
{
fillColor
=
'
#FF0000
'
;
radius
=
0
;
setRadius
(
r
)
{
this
.
anchorX
=
this
.
anchorY
=
0.5
;
this
.
radius
=
r
;
this
.
width
=
r
*
2
;
this
.
height
=
r
*
2
;
}
drawShape
()
{
this
.
ctx
.
beginPath
();
this
.
ctx
.
fillStyle
=
this
.
fillColor
;
this
.
ctx
.
arc
(
0
,
0
,
this
.
radius
,
0
,
angleToRadian
(
360
));
this
.
ctx
.
fill
();
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawShape
();
}
}
export
class
ShapeRectNew
extends
MySprite
{
radius
=
0
;
fillColor
=
'
#ffffff
'
;
strokeColor
=
'
#000000
'
;
fill
=
true
;
stroke
=
false
;
lineWidth
=
1
;
setSize
(
w
,
h
,
r
)
{
this
.
width
=
w
;
this
.
height
=
h
;
this
.
radius
=
r
;
}
setOutLine
(
color
,
lineWidth
)
{
this
.
stroke
=
true
;
this
.
strokeColor
=
color
;
this
.
lineWidth
=
lineWidth
;
}
drawShape
()
{
const
ctx
=
this
.
ctx
;
const
width
=
this
.
width
;
const
height
=
this
.
height
;
const
radius
=
this
.
radius
;
ctx
.
save
();
ctx
.
beginPath
(
0
);
// 从右下角顺时针绘制,弧度从0到1/2PI
ctx
.
arc
(
width
-
radius
,
height
-
radius
,
radius
,
0
,
Math
.
PI
/
2
);
// 矩形下边线
ctx
.
lineTo
(
radius
,
height
);
// 左下角圆弧,弧度从1/2PI到PI
ctx
.
arc
(
radius
,
height
-
radius
,
radius
,
Math
.
PI
/
2
,
Math
.
PI
);
// 矩形左边线
ctx
.
lineTo
(
0
,
radius
);
// 左上角圆弧,弧度从PI到3/2PI
ctx
.
arc
(
radius
,
radius
,
radius
,
Math
.
PI
,
Math
.
PI
*
3
/
2
);
// 上边线
ctx
.
lineTo
(
width
-
radius
,
0
);
// 右上角圆弧
ctx
.
arc
(
width
-
radius
,
radius
,
radius
,
Math
.
PI
*
3
/
2
,
Math
.
PI
*
2
);
// 右边线
ctx
.
lineTo
(
width
,
height
-
radius
);
ctx
.
closePath
();
if
(
this
.
fill
)
{
ctx
.
fillStyle
=
this
.
fillColor
;
ctx
.
fill
();
}
if
(
this
.
stroke
)
{
ctx
.
lineWidth
=
this
.
lineWidth
;
ctx
.
strokeStyle
=
this
.
strokeColor
;
ctx
.
stroke
();
}
ctx
.
restore
();
}
drawSelf
()
{
super
.
drawSelf
();
this
.
drawShape
();
}
}
export
class
MyAnimation
extends
MySprite
{
frameArr
=
[];
frameIndex
=
0
;
playFlag
=
false
;
lastDateTime
;
curDelay
=
0
;
loop
=
false
;
playEndFunc
;
delayPerUnit
=
1
;
restartFlag
=
false
;
reverseFlag
=
false
;
addFrameByImg
(
img
)
{
const
spr
=
new
MySprite
(
this
.
ctx
);
spr
.
init
(
img
);
this
.
_refreshSize
(
img
);
spr
.
visible
=
false
;
this
.
addChild
(
spr
);
this
.
frameArr
.
push
(
spr
);
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
}
addFrameByUrl
(
url
)
{
const
spr
=
new
MySprite
(
this
.
ctx
);
spr
.
load
(
url
).
then
(
img
=>
{
this
.
_refreshSize
(
img
);
});
spr
.
visible
=
false
;
this
.
addChild
(
spr
);
this
.
frameArr
.
push
(
spr
);
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
}
_refreshSize
(
img
:
any
)
{
if
(
this
.
width
<
img
.
width
)
{
this
.
width
=
img
.
width
;
}
if
(
this
.
height
<
img
.
height
)
{
this
.
height
=
img
.
height
;
}
}
play
()
{
this
.
playFlag
=
true
;
this
.
lastDateTime
=
new
Date
().
getTime
();
}
stop
()
{
this
.
playFlag
=
false
;
}
replay
()
{
this
.
restartFlag
=
true
;
this
.
play
();
}
reverse
()
{
this
.
reverseFlag
=
!
this
.
reverseFlag
;
this
.
frameArr
.
reverse
();
this
.
frameIndex
=
0
;
}
showAllFrame
()
{
for
(
const
frame
of
this
.
frameArr
)
{
frame
.
alpha
=
1
;
}
}
hideAllFrame
()
{
for
(
const
frame
of
this
.
frameArr
)
{
frame
.
alpha
=
0
;
}
}
playEnd
()
{
this
.
playFlag
=
false
;
this
.
curDelay
=
0
;
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
if
(
this
.
playEndFunc
)
{
this
.
playEndFunc
();
this
.
playEndFunc
=
null
;
}
}
updateFrame
()
{
if
(
this
.
frameArr
[
this
.
frameIndex
])
{
this
.
frameArr
[
this
.
frameIndex
].
visible
=
false
;
}
this
.
frameIndex
++
;
if
(
this
.
frameIndex
>=
this
.
frameArr
.
length
)
{
if
(
this
.
loop
)
{
this
.
frameIndex
=
0
;
}
else
if
(
this
.
restartFlag
)
{
this
.
restartFlag
=
false
;
this
.
frameIndex
=
0
;
}
else
{
this
.
frameIndex
--
;
this
.
playEnd
();
return
;
}
}
this
.
frameArr
[
this
.
frameIndex
].
visible
=
true
;
}
_updateDelay
(
delay
)
{
this
.
curDelay
+=
delay
;
if
(
this
.
curDelay
<
this
.
delayPerUnit
)
{
return
;
}
this
.
curDelay
-=
this
.
delayPerUnit
;
this
.
updateFrame
();
}
_updateLastDate
()
{
if
(
!
this
.
playFlag
)
{
return
;
}
let
delay
=
0
;
if
(
this
.
lastDateTime
)
{
delay
=
(
new
Date
().
getTime
()
-
this
.
lastDateTime
)
/
1000
;
}
this
.
lastDateTime
=
new
Date
().
getTime
();
this
.
_updateDelay
(
delay
);
}
update
(
$event
:
any
=
null
)
{
super
.
update
(
$event
);
this
.
_updateLastDate
();
}
}
// --------=========== util func =============-------------
export
function
tweenChange
(
item
,
obj
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
,
update
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
(
obj
,
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
if
(
update
)
{
tween
.
onUpdate
((
a
,
b
)
=>
{
update
(
a
,
b
);
});
}
tween
.
start
();
return
tween
;
}
export
function
rotateItem
(
item
,
rotation
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
rotation
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
scaleItem
(
item
,
scale
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
scaleX
:
scale
,
scaleY
:
scale
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
return
tween
;
}
export
function
moveItem
(
item
,
x
,
y
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
x
,
y
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
return
tween
;
}
export
function
endShow
(
item
,
s
=
1
)
{
item
.
scaleX
=
item
.
scaleY
=
0
;
item
.
alpha
=
0
;
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
1
,
scaleX
:
s
,
scaleY
:
s
},
800
)
.
easing
(
TWEEN
.
Easing
.
Elastic
.
Out
)
// Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
})
.
start
();
}
export
function
hideItem
(
item
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
if
(
item
.
alpha
===
0
)
{
return
;
}
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
0
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
});
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
showItem
(
item
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
if
(
item
.
alpha
===
1
)
{
if
(
callBack
)
{
callBack
();
}
return
;
}
item
.
visible
=
true
;
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
1
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
});
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
alphaItem
(
item
,
alpha
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
});
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
showStar
(
item
,
time
=
0.8
,
callBack
=
null
,
easing
=
null
)
{
const
tween
=
new
TWEEN
.
Tween
(
item
)
.
to
({
alpha
:
1
,
scale
:
1
},
time
*
1000
)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.
onComplete
(()
=>
{
if
(
callBack
)
{
callBack
();
}
});
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
start
();
}
export
function
randomSortByArr
(
arr
)
{
if
(
!
arr
)
{
return
;
}
const
newArr
=
[];
const
tmpArr
=
arr
.
concat
();
while
(
tmpArr
.
length
>
0
)
{
const
randomIndex
=
Math
.
floor
(
tmpArr
.
length
*
Math
.
random
());
newArr
.
push
(
tmpArr
[
randomIndex
]);
tmpArr
.
splice
(
randomIndex
,
1
);
}
return
newArr
;
}
export
function
radianToAngle
(
radian
)
{
return
radian
*
180
/
Math
.
PI
;
// 角度 = 弧度 * 180 / Math.PI;
}
export
function
angleToRadian
(
angle
)
{
return
angle
*
Math
.
PI
/
180
;
// 弧度= 角度 * Math.PI / 180;
}
export
function
getPosByAngle
(
angle
,
len
)
{
const
radian
=
angle
*
Math
.
PI
/
180
;
const
x
=
Math
.
sin
(
radian
)
*
len
;
const
y
=
Math
.
cos
(
radian
)
*
len
;
return
{
x
,
y
};
}
export
function
getAngleByPos
(
px
,
py
,
mx
,
my
)
{
const
x
=
Math
.
abs
(
px
-
mx
);
const
y
=
Math
.
abs
(
py
-
my
);
const
z
=
Math
.
sqrt
(
Math
.
pow
(
x
,
2
)
+
Math
.
pow
(
y
,
2
));
const
cos
=
y
/
z
;
const
radina
=
Math
.
acos
(
cos
);
// 用反三角函数求弧度
let
angle
=
Math
.
floor
(
180
/
(
Math
.
PI
/
radina
)
*
100
)
/
100
;
// 将弧度转换成角度
if
(
mx
>
px
&&
my
>
py
)
{
// 鼠标在第四象限
angle
=
180
-
angle
;
}
if
(
mx
===
px
&&
my
>
py
)
{
// 鼠标在y轴负方向上
angle
=
180
;
}
if
(
mx
>
px
&&
my
===
py
)
{
// 鼠标在x轴正方向上
angle
=
90
;
}
if
(
mx
<
px
&&
my
>
py
)
{
// 鼠标在第三象限
angle
=
180
+
angle
;
}
if
(
mx
<
px
&&
my
===
py
)
{
// 鼠标在x轴负方向
angle
=
270
;
}
if
(
mx
<
px
&&
my
<
py
)
{
// 鼠标在第二象限
angle
=
360
-
angle
;
}
// console.log('angle: ', angle);
return
angle
;
}
export
function
removeItemFromArr
(
arr
,
item
)
{
const
index
=
arr
.
indexOf
(
item
);
if
(
index
!==
-
1
)
{
arr
.
splice
(
index
,
1
);
}
}
export
function
circleMove
(
item
,
x0
,
y0
,
time
=
2
,
addR
=
360
,
xPer
=
1
,
yPer
=
1
,
callBack
=
null
,
easing
=
null
)
{
const
r
=
getPosDistance
(
item
.
x
,
item
.
y
,
x0
,
y0
);
let
a
=
getAngleByPos
(
item
.
x
,
item
.
y
,
x0
,
y0
);
a
+=
90
;
const
obj
=
{
r
,
a
};
item
.
_circleAngle
=
a
;
const
targetA
=
a
+
addR
;
const
tween
=
new
TWEEN
.
Tween
(
item
).
to
({
_circleAngle
:
targetA
},
time
*
1000
);
if
(
callBack
)
{
tween
.
onComplete
(()
=>
{
callBack
();
});
}
if
(
easing
)
{
tween
.
easing
(
easing
);
}
tween
.
onUpdate
((
item
,
progress
)
=>
{
// console.log(item._circleAngle);
const
r
=
obj
.
r
;
const
a
=
item
.
_circleAngle
;
const
x
=
x0
+
r
*
xPer
*
Math
.
cos
(
a
*
Math
.
PI
/
180
);
const
y
=
y0
+
r
*
yPer
*
Math
.
sin
(
a
*
Math
.
PI
/
180
);
item
.
x
=
x
;
item
.
y
=
y
;
// obj.a ++;
});
tween
.
start
();
}
export
function
getPosDistance
(
sx
,
sy
,
ex
,
ey
)
{
const
_x
=
ex
-
sx
;
const
_y
=
ey
-
sy
;
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
));
return
len
;
}
export
function
delayCall
(
callback
,
second
)
{
const
tween
=
new
TWEEN
.
Tween
(
this
)
.
delay
(
second
*
1000
)
.
onComplete
(()
=>
{
if
(
callback
)
{
callback
();
}
})
.
start
();
}
export
function
formatTime
(
fmt
,
date
)
{
// "yyyy-MM-dd HH:mm:ss";
const
o
=
{
'
M+
'
:
date
.
getMonth
()
+
1
,
// 月份
'
d+
'
:
date
.
getDate
(),
// 日
'
h+
'
:
date
.
getHours
(),
// 小时
'
m+
'
:
date
.
getMinutes
(),
// 分
'
s+
'
:
date
.
getSeconds
(),
// 秒
'
q+
'
:
Math
.
floor
((
date
.
getMonth
()
+
3
)
/
3
),
// 季度
S
:
date
.
getMilliseconds
()
// 毫秒
};
if
(
/
(
y+
)
/
.
test
(
fmt
))
{
fmt
=
fmt
.
replace
(
RegExp
.
$1
,
(
date
.
getFullYear
()
+
''
).
substr
(
4
-
RegExp
.
$1
.
length
));
}
for
(
const
k
in
o
)
{
if
(
new
RegExp
(
'
(
'
+
k
+
'
)
'
).
test
(
fmt
))
{
fmt
=
fmt
.
replace
(
RegExp
.
$1
,
(
RegExp
.
$1
.
length
===
1
)
?
(
o
[
k
])
:
((
'
00
'
+
o
[
k
]).
substr
((
''
+
o
[
k
]).
length
)));
}
}
return
fmt
;
}
export
function
getMinScale
(
item
,
maxLen
)
{
const
sx
=
maxLen
/
item
.
width
;
const
sy
=
maxLen
/
item
.
height
;
const
minS
=
Math
.
min
(
sx
,
sy
);
return
minS
;
}
export
function
jelly
(
item
,
time
=
0.7
)
{
if
(
item
.
jellyTween
)
{
TWEEN
.
remove
(
item
.
jellyTween
);
}
const
t
=
time
/
9
;
const
baseSX
=
item
.
scaleX
;
const
baseSY
=
item
.
scaleY
;
let
index
=
0
;
const
run
=
()
=>
{
if
(
index
>=
arr
.
length
)
{
item
.
jellyTween
=
null
;
return
;
}
const
data
=
arr
[
index
];
const
t
=
tweenChange
(
item
,
{
scaleX
:
data
[
0
],
scaleY
:
data
[
1
]
},
data
[
2
],
()
=>
{
index
++
;
run
();
},
TWEEN
.
Easing
.
Sinusoidal
.
InOut
);
item
.
jellyTween
=
t
;
};
const
arr
=
[
[
baseSX
*
1.1
,
baseSY
*
0.9
,
t
],
[
baseSX
*
0.98
,
baseSY
*
1.02
,
t
*
2
],
[
baseSX
*
1.02
,
baseSY
*
0.98
,
t
*
2
],
[
baseSX
*
0.99
,
baseSY
*
1.01
,
t
*
2
],
[
baseSX
*
1.0
,
baseSY
*
1.0
,
t
*
2
],
];
run
();
}
export
function
showPopParticle
(
img
,
pos
,
parent
,
num
=
20
,
minLen
=
40
,
maxLen
=
80
,
showTime
=
0.4
)
{
for
(
let
i
=
0
;
i
<
num
;
i
++
)
{
const
particle
=
new
MySprite
();
particle
.
init
(
img
);
particle
.
x
=
pos
.
x
;
particle
.
y
=
pos
.
y
;
parent
.
addChild
(
particle
);
const
randomR
=
360
*
Math
.
random
();
particle
.
rotation
=
randomR
;
const
randomS
=
0.3
+
Math
.
random
()
*
0.7
;
particle
.
setScaleXY
(
randomS
*
0.3
);
const
randomX
=
Math
.
random
()
*
20
-
10
;
particle
.
x
+=
randomX
;
const
randomY
=
Math
.
random
()
*
20
-
10
;
particle
.
y
+=
randomY
;
const
randomL
=
minLen
+
Math
.
random
()
*
(
maxLen
-
minLen
);
const
randomA
=
360
*
Math
.
random
();
const
randomT
=
getPosByAngle
(
randomA
,
randomL
);
moveItem
(
particle
,
particle
.
x
+
randomT
.
x
,
particle
.
y
+
randomT
.
y
,
showTime
,
()
=>
{
},
TWEEN
.
Easing
.
Exponential
.
Out
);
// scaleItem(particle, 0, 0.6, () => {
//
// });
scaleItem
(
particle
,
randomS
,
0.6
,
()
=>
{
},
TWEEN
.
Easing
.
Exponential
.
Out
);
setTimeout
(()
=>
{
hideItem
(
particle
,
0.4
,
()
=>
{
},
TWEEN
.
Easing
.
Cubic
.
In
);
},
showTime
*
0.5
*
1000
);
}
}
export
function
shake
(
item
,
time
=
0.5
,
callback
=
null
,
rate
=
1
)
{
if
(
item
.
shakeTween
)
{
return
;
}
item
.
shakeTween
=
true
;
const
offX
=
15
*
item
.
scaleX
*
rate
;
const
offY
=
15
*
item
.
scaleX
*
rate
;
const
baseX
=
item
.
x
;
const
baseY
=
item
.
y
;
const
easing
=
TWEEN
.
Easing
.
Sinusoidal
.
InOut
;
const
move4
=
()
=>
{
moveItem
(
item
,
baseX
,
baseY
,
time
/
4
,
()
=>
{
item
.
shakeTween
=
false
;
if
(
callback
)
{
callback
();
}
},
easing
);
};
const
move3
=
()
=>
{
moveItem
(
item
,
baseX
+
offX
/
4
,
baseY
+
offY
/
4
,
time
/
4
,
()
=>
{
move4
();
},
easing
);
};
const
move2
=
()
=>
{
moveItem
(
item
,
baseX
-
offX
/
4
*
3
,
baseY
-
offY
/
4
*
3
,
time
/
4
,
()
=>
{
move3
();
},
easing
);
};
const
move1
=
()
=>
{
moveItem
(
item
,
baseX
+
offX
,
baseY
+
offY
,
time
/
7.5
,
()
=>
{
move2
();
},
easing
);
};
move1
();
}
// --------------- custom class --------------------
export
class
HotZoneItem
extends
MySprite
{
lineDashFlag
=
false
;
arrow
:
MySprite
;
label
:
Label
;
title
;
arrowTop
;
arrowRight
;
audio_url
;
pic_url
;
text
;
gIdx
;
isAnimaStyle
=
false
;
private
_itemType
;
private
shapeRect
:
ShapeRect
;
get
itemType
()
{
return
this
.
_itemType
;
}
set
itemType
(
value
)
{
this
.
_itemType
=
value
;
}
setSize
(
w
,
h
)
{
this
.
width
=
w
;
this
.
height
=
h
;
const
rect
=
new
ShapeRect
(
this
.
ctx
);
rect
.
x
=
-
w
/
2
;
rect
.
y
=
-
h
/
2
;
rect
.
setSize
(
w
,
h
);
rect
.
fillColor
=
'
#ffffff
'
;
rect
.
alpha
=
0.2
;
this
.
addChild
(
rect
);
}
showLabel
(
text
=
null
)
{
if
(
!
this
.
label
)
{
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
.
anchorY
=
0
;
this
.
label
.
fontSize
=
40
;
this
.
label
.
textAlign
=
'
center
'
;
this
.
addChild
(
this
.
label
);
// this.label.scaleX = 1 / this.scaleX;
// this.label.scaleY = 1 / this.scaleY;
this
.
refreshLabelScale
();
}
if
(
text
)
{
this
.
label
.
text
=
text
;
}
else
if
(
this
.
title
)
{
this
.
label
.
text
=
this
.
title
;
}
this
.
label
.
visible
=
true
;
}
hideLabel
()
{
if
(
!
this
.
label
)
{
return
;
}
this
.
label
.
visible
=
false
;
}
refreshLabelScale
()
{
if
(
this
.
scaleX
==
this
.
scaleY
)
{
this
.
label
.
setScaleXY
(
1
);
}
if
(
this
.
scaleX
>
this
.
scaleY
)
{
this
.
label
.
scaleX
=
this
.
scaleY
/
this
.
scaleX
;
}
else
{
this
.
label
.
scaleY
=
this
.
scaleX
/
this
.
scaleY
;
}
}
showLineDash
()
{
this
.
lineDashFlag
=
true
;
if
(
this
.
arrow
)
{
this
.
arrow
.
visible
=
true
;
}
else
{
this
.
arrow
=
new
MySprite
(
this
.
ctx
);
this
.
arrow
.
load
(
'
assets/common/arrow.png
'
,
1
,
0
);
this
.
arrow
.
setScaleXY
(
0.06
);
this
.
arrowTop
=
new
MySprite
(
this
.
ctx
);
this
.
arrowTop
.
load
(
'
assets/common/arrow_top.png
'
,
0.5
,
0
);
this
.
arrowTop
.
setScaleXY
(
0.06
);
this
.
arrowRight
=
new
MySprite
(
this
.
ctx
);
this
.
arrowRight
.
load
(
'
assets/common/arrow_right.png
'
,
1
,
0.5
);
this
.
arrowRight
.
setScaleXY
(
0.06
);
}
this
.
showLabel
();
}
hideLineDash
()
{
this
.
lineDashFlag
=
false
;
if
(
this
.
arrow
)
{
this
.
arrow
.
visible
=
false
;
}
this
.
hideLabel
();
}
setAnimaStyle
(
isAnimaStyle
)
{
this
.
isAnimaStyle
=
isAnimaStyle
;
console
.
log
(
'
in setAnimaStyle
'
)
}
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
update
();
if
(
!
this
.
isAnimaStyle
)
{
this
.
arrowTop
.
x
=
rect
.
x
+
rect
.
width
/
2
;
this
.
arrowTop
.
y
=
rect
.
y
;
this
.
arrowTop
.
update
();
this
.
arrowRight
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrowRight
.
y
=
rect
.
y
+
rect
.
height
/
2
;
this
.
arrowRight
.
update
();
}
}
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
+
w
/
2
;
const
y
=
rect
.
y
+
h
/
2
;
this
.
ctx
.
setLineDash
([
5
,
5
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#1bfff7
'
;
// this.ctx.fillStyle = '#ffffff';
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
if
(
this
.
lineDashFlag
)
{
this
.
drawFrame
();
this
.
drawArrow
();
}
}
}
export
class
HotZoneImg
extends
MySprite
{
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
+
w
/
2
;
const
y
=
rect
.
y
+
h
/
2
;
this
.
ctx
.
setLineDash
([
5
,
5
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#1bfff7
'
;
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
this
.
drawFrame
();
}
}
export
class
HotZoneLabel
extends
Label
{
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
/
this
.
scaleX
;
const
h
=
this
.
height
*
this
.
scaleY
;
const
x
=
this
.
x
;
const
y
=
this
.
y
;
this
.
ctx
.
setLineDash
([
5
,
5
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#1bfff7
'
;
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
this
.
drawFrame
();
}
getLabelRect
()
{
const
rect
=
this
.
getBoundingBox
();
const
width
=
rect
.
width
/
this
.
scaleX
;
const
height
=
this
.
height
*
this
.
scaleY
;
const
x
=
this
.
x
-
width
/
2
;
const
y
=
this
.
y
-
height
/
2
;
return
{
width
,
height
,
x
,
y
};
}
}
export
class
HotZoneAction
extends
MySprite
{
}
export
class
DragItem
extends
MySprite
{
lineDashFlag
=
true
;
item
;
init
()
{
this
.
anchorX
=
0.5
;
this
.
anchorY
=
0.5
;
this
.
initCenterCircle
();
}
setSize
(
w
,
h
)
{
this
.
anchorX
=
0.5
;
this
.
anchorY
=
0.5
;
this
.
width
=
w
;
this
.
height
=
h
;
// const rect = new ShapeRect(this.ctx);
// rect.x = -w / 2;
// rect.y = -h / 2;
// rect.setSize(w, h);
// rect.fillColor = '#000000';
// rect.alpha = 0.1;
// this.addChild(rect);
}
initCenterCircle
()
{
const
circle
=
new
ShapeCircle
(
this
.
ctx
);
circle
.
setRadius
(
10
);
circle
.
fillColor
=
'
#ffa568
'
this
.
addChild
(
circle
);
this
.
width
=
circle
.
width
;
this
.
height
=
circle
.
height
;
}
getPosition
()
{
return
{
x
:
this
.
x
,
y
:
this
.
y
};
}
drawLine
()
{
if
(
!
this
.
item
)
{
return
;
}
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
//+ w / 2;
const
y
=
rect
.
y
//+ h / 2;
this
.
ctx
.
setLineDash
([
4
,
4
]);
this
.
ctx
.
lineWidth
=
1
;
this
.
ctx
.
strokeStyle
=
'
#ffa568
'
;
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
this
.
item
.
x
,
this
.
item
.
y
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
//+ w / 2;
const
y
=
rect
.
y
//+ h / 2;
this
.
ctx
.
setLineDash
([
4
,
4
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#ffa568
'
;
// this.ctx.fillStyle = '#ffffff';
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
if
(
this
.
lineDashFlag
)
{
this
.
drawLine
();
// this.drawFrame();
// this.drawArrow();
}
}
}
export
class
EditorItem
extends
MySprite
{
lineDashFlag
=
false
;
arrow
:
MySprite
;
label
:
Label
;
text
;
arrowTop
;
arrowRight
;
showLabel
(
text
=
null
)
{
if
(
!
this
.
label
)
{
this
.
label
=
new
Label
(
this
.
ctx
);
this
.
label
.
anchorY
=
0
;
this
.
label
.
fontSize
=
50
;
this
.
label
.
textAlign
=
'
center
'
;
this
.
addChild
(
this
.
label
);
this
.
label
.
setScaleXY
(
1
/
this
.
scaleX
);
}
if
(
text
)
{
this
.
label
.
text
=
text
;
}
else
if
(
this
.
text
)
{
this
.
label
.
text
=
this
.
text
;
}
this
.
label
.
visible
=
true
;
}
hideLabel
()
{
if
(
!
this
.
label
)
{
return
;
}
this
.
label
.
visible
=
false
;
}
showLineDash
()
{
this
.
lineDashFlag
=
true
;
if
(
this
.
arrow
)
{
this
.
arrow
.
visible
=
true
;
}
else
{
this
.
arrow
=
new
MySprite
(
this
.
ctx
);
this
.
arrow
.
load
(
'
assets/common/arrow.png
'
,
1
,
0
);
this
.
arrow
.
setScaleXY
(
0.06
);
// this.arrowTop = new MySprite(this.ctx);
// this.arrowTop.load('assets/common/arrow_top.png', 0.5, 0);
// this.arrowTop.setScaleXY(0.06);
//
// this.arrowRight = new MySprite(this.ctx);
// this.arrowRight.load('assets/common/arrow_right.png', 1, 0.5);
// this.arrowRight.setScaleXY(0.06);
}
this
.
showLabel
();
}
hideLineDash
()
{
this
.
lineDashFlag
=
false
;
if
(
this
.
arrow
)
{
this
.
arrow
.
visible
=
false
;
}
this
.
hideLabel
();
}
refreshLabelScale
()
{
}
drawArrow
()
{
if
(
!
this
.
arrow
)
{
return
;
}
const
rect
=
this
.
getBoundingBox
();
this
.
arrow
.
x
=
rect
.
x
+
rect
.
width
;
this
.
arrow
.
y
=
rect
.
y
;
this
.
arrow
.
update
();
// this.arrowTop.x = rect.x + rect.width / 2;
// this.arrowTop.y = rect.y;
// this.arrowTop.update();
//
// this.arrowRight.x = rect.x + rect.width;
// this.arrowRight.y = rect.y + rect.height / 2;
// this.arrowRight.update();
}
drawFrame
()
{
this
.
ctx
.
save
();
const
rect
=
this
.
getBoundingBox
();
const
w
=
rect
.
width
;
const
h
=
rect
.
height
;
const
x
=
rect
.
x
+
w
/
2
;
const
y
=
rect
.
y
+
h
/
2
;
this
.
ctx
.
setLineDash
([
5
,
5
]);
this
.
ctx
.
lineWidth
=
2
;
this
.
ctx
.
strokeStyle
=
'
#1bfff7
'
;
// this.ctx.fillStyle = '#ffffff';
this
.
ctx
.
beginPath
();
this
.
ctx
.
moveTo
(
x
-
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
-
h
/
2
);
this
.
ctx
.
lineTo
(
x
+
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
+
h
/
2
);
this
.
ctx
.
lineTo
(
x
-
w
/
2
,
y
-
h
/
2
);
// this.ctx.fill();
this
.
ctx
.
stroke
();
this
.
ctx
.
restore
();
}
draw
()
{
super
.
draw
();
if
(
this
.
lineDashFlag
)
{
this
.
drawFrame
();
this
.
drawArrow
();
}
}
}
form/src/app/common/custom-hot-zone/custom-hot-zone.component.html
View file @
a50b292e
...
@@ -32,33 +32,111 @@
...
@@ -32,33 +32,111 @@
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<nz-divider
style=
"margin-top: 10px;"
></nz-divider>
<div
style=
"margin-top: -20px; margin-bottom: 5px; width: 100%;"
>
<div
style=
"margin-top: -20px; margin-bottom: 5px"
>
<div
*
ngIf=
"customTypeGroupArr"
>
<nz-radio-group
[
ngModel
]="
it
.
itemType
"
(
ngModelChange
)="
radioChange
($
event
,
it
)"
>
<nz-radio-group
[
ngModel
]="
it
.
gIdx
"
(
ngModelChange
)="
customRadioChange
($
event
,
it
)"
style=
"display: flex; align-items: center; justify-content: center; flex-wrap: wrap;"
>
<label
*
ngIf=
"isHasRect"
nz-radio
nzValue=
"rect"
>
矩形
</label>
<div
*
ngFor=
"let group of customTypeGroupArr; let gIdx = index"
style=
"display: flex; "
>
<label
*
ngIf=
"isHasPic"
nz-radio
nzValue=
"pic"
>
图片
</label>
<label
nz-radio
nzValue=
"{{gIdx}}"
>
{{group.name}}
</label>
<label
*
ngIf=
"isHasText"
nz-radio
nzValue=
"text"
>
文本
</label>
</div>
</nz-radio-group>
</nz-radio-group>
</div>
<div
*
ngIf=
"it.itemType == 'pic'"
>
</div>
<app-upload-image-with-preview
[
picUrl
]="
it
?.
pic_url
"
<!-- <div *ngIf="!customTypeGroupArr">
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
<nz-radio-group [ngModel]="it.itemType" (ngModelChange)="radioChange($event, it)" style="display: flex; align-items: center; justify-content: center">
</app-upload-image-with-preview>
</div>
<label *ngIf="isHasRect" nz-radio nzValue="rect">矩形</label>
<label *ngIf="isHasPic" nz-radio nzValue="pic">图片</label>
<label *ngIf="isHasText" nz-radio nzValue="text">文本</label>
</nz-radio-group>
</div> -->
<div
*
ngIf=
"it.itemType == 'text'"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
</div>
<div
style=
"width: 100%; margin-top: 5px;"
>
<div
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[it.gIdx]"
>
<app-audio-recorder
[
audioUrl
]="
it
.
audio_url
"
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].pic"
>
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
<app-upload-image-with-preview
></app-audio-recorder>
[
picUrl
]="
it
?.
pic_url
"
(
imageUploaded
)="
onItemImgUploadSuccess
($
event
,
it
)"
>
</app-upload-image-with-preview>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].text"
style=
"margin-top: 5px"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
it
.
text
"
(
blur
)="
saveText
(
it
)"
>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].anima"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].animaSmall"
align=
"center"
style=
"margin-top: 5px"
>
<button
nz-button
(
click
)="
setAnimaSmallBtnClick
(
i
)"
>
<i
nz-icon
nzType=
"tool"
nzTheme=
"outline"
></i>
配置龙骨动画(小)
</button>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx].audio"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-audio-recorder
style=
"margin: auto"
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onItemAudioUploadSuccess
($
event
,
it
)"
></app-audio-recorder>
</div>
<div
*
ngIf=
"customTypeGroupArr[it.gIdx]?.action"
style=
"display: flex;align-items: center; margin-top: 5px"
>
<app-custom-action
style=
"margin: auto"
[
item
]="
it
?
it
['
actionData_
'
+
it
.
gIdx
]
:
{}"
[
type
]="
customTypeGroupArr
[
it
.
gIdx
].
action
.
type
"
[
option
]="
customTypeGroupArr
[
it
.
gIdx
].
action
.
option
"
(
save
)="
onSaveCustomAction
($
event
,
it
)"
>
>
</app-custom-action>
</div>
</div>
</div>
<!-- <div *ngIf="!customTypeGroupArr">
<div *ngIf="it.itemType == 'pic'">
<app-upload-image-with-preview
[picUrl]="it?.pic_url"
(imageUploaded)="onItemImgUploadSuccess($event, it)">
</app-upload-image-with-preview>
</div>
<div *ngIf="it.itemType == 'text'">
<input type="text" nz-input [(ngModel)]="it.text" (blur)="saveText(it)">
</div>
<div *ngIf="isHasAudio"
style="width: 100%; margin-top: 5px; display: flex; align-items: center; justify-items: center;">
<app-audio-recorder
style="margin: auto"
[audioUrl]="it.audio_url"
(audioUploaded)="onItemAudioUploadSuccess($event, it)"
></app-audio-recorder>
</div>
<div *ngIf="it.itemType == 'rect' && isHasAnima" align="center" style="margin-bottom: 5px">
<button nz-button (click)="setAnimaBtnClick(i)" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
配置龙骨动画
</button>
</div>
</div> -->
</div>
</div>
</div>
</div>
...
@@ -83,12 +161,29 @@
...
@@ -83,12 +161,29 @@
<div
class=
"save-box"
>
<div
class=
"save-box"
>
<button
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
<button
style=
"margin-left: 200px"
class=
"save-btn"
nz-button
nzType=
"primary"
[
nzSize
]="'
large
'"
nzShape=
"round"
(
click
)="
saveClick
()"
>
(
click
)="
saveClick
()"
>
<i
nz-icon
nzType=
"save"
></i>
<i
nz-icon
nzType=
"save"
></i>
Save
Save
</button>
</button>
<div
*
ngIf=
"isCopyData"
style=
"height: 40px; display: flex; justify-items: center;"
>
<label
style=
"margin-left: 40px"
nz-checkbox
[(
ngModel
)]="
bgItem
.
isShowDebugLine
"
>
显示辅助框
</label>
<button
style=
"margin-left: 20px; margin-top: -5px"
nz-button
(
click
)="
copyHotZoneData
()"
>
复制基础数据
</button>
<div
style=
"margin-left: 10px; margin-top: -5px"
>
<span>
粘贴数据:
</span>
<input
style=
"width: 100px;"
type=
"text"
nz-input
[(
ngModel
)]="
pasteData
"
>
<button
style=
"margin-left: 5px;"
nz-button
[
disabled
]="
pasteData=
=''"
nzType=
"primary"
(
click
)="
importData
()"
>
导入
</button>
</div>
</div>
</div>
</div>
...
@@ -98,3 +193,52 @@
...
@@ -98,3 +193,52 @@
<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>
<!--龙骨面板-->
<nz-modal
[(
nzVisible
)]="
animaPanelVisible
"
nzTitle=
"配置资源文件"
(
nzAfterClose
)="
closeAfterPanel
()"
(
nzOnCancel
)="
animaPanelCancel
()"
(
nzOnOk
)="
animaPanelOk
()"
nzOkText=
"保存"
>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 ske_json 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept=
"application/json"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
skeJsonHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isSkeJsonLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"skeJsonData['name']"
style=
"margin-left: 10px"
><u>
{{skeJsonData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 tex_json 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept=
"application/json"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
texJsonHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isTexJsonLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"texJsonData['name']"
style=
"margin-left: 10px"
><u>
{{texJsonData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
>
<span
style=
"margin-right: 10px"
>
上传 tex_png 文件:
</span>
<nz-upload
[
nzShowUploadList
]="
false
"
nzAccept =
"image/*"
[
nzAction
]="
uploadUrl
"
[
nzData
]="
uploadData
"
(
nzChange
)="
texPngHandleChange
($
event
)"
>
<button
nz-button
><i
nz-icon
nzType=
"upload"
></i><span>
Upload
</span></button>
</nz-upload>
<i
*
ngIf=
"isTexPngLoading"
style=
"margin-left: 10px;"
nz-icon
[
nzType
]="'
loading
'"
></i>
<span
*
ngIf=
"texPngData['name']"
style=
"margin-left: 10px"
><u>
{{texPngData['name']}}
</u></span>
</div>
<div
class=
"anima-upload-btn"
*
ngIf=
"customTypeGroupArr && customTypeGroupArr[curDragonBoneGIdx] && customTypeGroupArr[curDragonBoneGIdx].animaNames"
>
提示:需包含以下动画: {{customTypeGroupArr[curDragonBoneGIdx].animaNames.toString()}}
</div>
</nz-modal>
form/src/app/common/custom-hot-zone/custom-hot-zone.component.scss
View file @
a50b292e
...
@@ -81,6 +81,10 @@
...
@@ -81,6 +81,10 @@
}
}
}
}
.anima-upload-btn
{
padding
:
10px
;
}
h5
{
h5
{
margin-top
:
1rem
;
margin-top
:
1rem
;
}
}
...
@@ -89,8 +93,8 @@ h5 {
...
@@ -89,8 +93,8 @@ h5 {
@font-face
@font-face
{
{
font-family
:
'BRLNSR_
1'
;
font-family
:
'ahronbd-
1'
;
src
:
url("/assets/font/BRLNSR_1.TTF
")
;
src
:
url("/assets/font/ahronbd-1.ttf
")
;
}
}
...
@@ -105,106 +109,3 @@ h5 {
...
@@ -105,106 +109,3 @@ h5 {
//@import '../../../style/common_mixin';
//
//.p-image-uploader {
// position: relative;
// display: block;
// width: 100%;
// height: 0;
// padding-bottom: 56.25%;
// .p-box {
// position: absolute;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// border: 2px dashed #ddd;
// border-radius: 0.5rem;
// background-color: #fafafa;
// text-align: center;
// color: #aaa;
// .p-upload-icon {
// text-align: center;
// margin: auto;
// .anticon-upload {
// color: #888;
// font-size: 5rem;
// }
// .p-progress-bar {
// position: relative;
// width: 20rem;
// height: 1.5rem;
// border: 1px solid #ccc;
// border-radius: 1rem;
// .p-progress-bg {
// background-color: #1890ff;
// border-radius: 1rem;
// height: 100%;
// }
// .p-progress-value {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// text-shadow: 0 0 4px #000;
// color: white;
// text-align: center;
// font-size: 0.9rem;
// line-height: 1.5rem;
// }
// }
// }
// .p-preview {
// width: 100%;
// height: 100%;
// //background-image: url("https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png");
// @include k-img-bg();
// }
// }
//}
//
//.p-btn-delete {
// position: absolute;
// right: -0.5rem;
// top: -0.5rem;
// width: 2rem;
// height: 2rem;
// border: 0.2rem solid white;
// border-radius: 50%;
// font-size: 1.2rem;
// background-color: #fb781a;
// color: white;
// text-align: center;
//}
//
//.p-upload-progress-bg {
// position: absolute;
// width: 100%;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// & .i-text {
// position: absolute;
// text-align: center;
// color: white;
// text-shadow: 0 0 2px rgba(0, 0, 0, .85);
// }
// & .i-bg {
// position: absolute;
// left: 0;
// top: 0;
// height: 100%;
// background-color: #27b43f;
// border-radius: 0.5rem;
// }
//}
//
//
//:host ::ng-deep .ant-upload {
// display: block;
//}
form/src/app/common/custom-hot-zone/custom-hot-zone.component.ts
View file @
a50b292e
import
{
import
{
ApplicationRef
,
ChangeDetectorRef
,
Component
,
Component
,
ElementRef
,
ElementRef
,
EventEmitter
,
EventEmitter
,
...
@@ -12,10 +14,11 @@ import {
...
@@ -12,10 +14,11 @@ import {
}
from
'
@angular/core
'
;
}
from
'
@angular/core
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
{
EditorItem
,
HotZoneImg
,
HotZoneItem
,
HotZoneLabel
,
Label
,
MySprite
,
removeItemFromArr
}
from
'
./Unit
'
;
import
{
DragItem
,
EditorItem
,
HotZoneImg
,
HotZoneItem
,
HotZoneLabel
,
Label
,
MySprite
,
removeItemFromArr
,
ShapeRect
,
ShapeRectNew
}
from
'
./Unit
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
import
{
getMinScale
}
from
"
../../play/Unit
"
;
import
{
getMinScale
}
from
'
../../play/Unit
'
;
import
{
tar
}
from
"
compressing
"
;
import
{
tar
}
from
'
compressing
'
;
import
{
NzMessageService
}
from
'
ng-zorro-antd
'
;
@
Component
({
@
Component
({
...
@@ -25,18 +28,14 @@ import {tar} from "compressing";
...
@@ -25,18 +28,14 @@ import {tar} from "compressing";
})
})
export
class
CustomHotZoneComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
export
class
CustomHotZoneComponent
implements
OnInit
,
OnDestroy
,
OnChanges
{
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
Input
()
imgItemArr
=
null
;
@
Input
()
@
Input
()
hotZoneItemArr
=
null
;
hotZoneItemArr
=
null
;
@
Input
()
@
Input
()
hotZoneArr
=
null
;
hotZoneArr
=
null
;
@
Output
()
save
=
new
EventEmitter
();
@
ViewChild
(
'
canvas
'
,
{
static
:
true
})
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
,
{
static
:
true
})
wrap
:
ElementRef
;
@
Input
()
@
Input
()
isHasRect
=
true
;
isHasRect
=
true
;
@
Input
()
@
Input
()
...
@@ -44,16 +43,30 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -44,16 +43,30 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@
Input
()
@
Input
()
isHasText
=
true
;
isHasText
=
true
;
@
Input
()
@
Input
()
isHasAudio
=
true
;
@
Input
()
isHasAnima
=
false
;
@
Input
()
customTypeGroupArr
;
// [{name:string, rect:boolean, pic:boolean, text:boolean, audio:boolean, anima:boolean, animaNames:['name1', ..]}, ...]
@
Input
()
// hotZoneFontObj;
@
Input
()
isCopyData
=
false
;
hotZoneFontObj
=
{
hotZoneFontObj
=
{
size
:
50
,
size
:
50
,
name
:
'
BRLNSR_
1
'
,
name
:
'
ahronbd-
1
'
,
color
:
'
#8f3758
'
color
:
'
#8f3758
'
}
}
@
Input
()
@
Input
()
defaultItemType
=
'
text
'
;
defaultItemType
=
'
text
'
;
@
Input
()
@
Input
()
hotZoneImgSize
=
190
;
hotZoneImgSize
=
0
;
@
Output
()
save
=
new
EventEmitter
();
saveDisabled
=
true
;
saveDisabled
=
true
;
...
@@ -86,8 +99,33 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -86,8 +99,33 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeSizeFlag
=
false
;
changeSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeTopSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
changeRightSizeFlag
=
false
;
animaPanelVisible
=
false
;
uploadUrl
;
uploadData
;
skeJsonData
=
{};
texJsonData
=
{};
texPngData
=
{};
animaName
=
''
;
curDragonBoneIndex
;
curDragonBoneGIdx
;
pasteData
=
''
;
isSkeJsonLoading
=
false
;
isTexJsonLoading
=
false
;
isTexPngLoading
=
false
;
constructor
()
{
isAnimaSmall
=
false
;
constructor
(
private
nzMessageService
:
NzMessageService
,
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
window
[
'
air
'
].
getUploadCallback
=
(
url
,
data
)
=>
{
this
.
uploadUrl
=
url
;
this
.
uploadData
=
data
;
};
}
}
_bgItem
=
null
;
_bgItem
=
null
;
...
@@ -110,11 +148,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -110,11 +148,14 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
ngOnInit
()
{
ngOnInit
()
{
this
.
initListener
();
this
.
initListener
();
// this.init();
// this.init();
this
.
update
();
this
.
update
();
this
.
refresh
();
}
}
ngOnDestroy
()
{
ngOnDestroy
()
{
...
@@ -136,10 +177,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -136,10 +177,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onItemImgUploadSuccess
(
e
,
item
)
{
onItemImgUploadSuccess
(
e
,
item
)
{
item
.
pic_url
=
e
.
url
;
item
.
pic_url
=
e
.
url
;
this
.
loadHotZonePic
(
item
.
pic
,
e
.
url
);
this
.
loadHotZonePic
(
item
.
pic
,
e
.
url
);
this
.
refresh
();
}
}
onItemAudioUploadSuccess
(
e
,
item
)
{
onItemAudioUploadSuccess
(
e
,
item
)
{
item
.
audio_url
=
e
.
url
;
item
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
}
...
@@ -150,25 +193,32 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -150,25 +193,32 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
renderArr
.
push
(
this
.
bg
);
this
.
renderArr
.
push
(
this
.
bg
);
}
}
if
(
!
this
.
bgItem
.
url
)
{
this
.
bgItem
.
url
=
'
http://teach.cdn.ireadabc.com/8ebb1858564340ea0936b83e3280ad7d.jpg
'
;
}
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
;
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
;
if
(
callBack
)
{
if
(
callBack
)
{
callBack
();
callBack
();
}
}
});
}
this
.
refresh
();
});
// }
}
}
...
@@ -180,7 +230,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -180,7 +230,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
const
item
=
this
.
getHotZoneItem
();
const
item
=
this
.
getHotZoneItem
();
this
.
hotZoneArr
.
push
(
item
);
this
.
hotZoneArr
.
push
(
item
);
this
.
refreshItem
(
item
);
if
(
this
.
customTypeGroupArr
)
{
this
.
refreshCustomItem
(
item
);
}
else
{
this
.
refreshItem
(
item
);
}
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
...
@@ -191,6 +246,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -191,6 +246,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
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
);
removeItemFromArr
(
this
.
renderArr
,
item
.
drag
);
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
...
@@ -199,6 +255,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -199,6 +255,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onImgUploadSuccessByImg
(
e
,
img
)
{
onImgUploadSuccessByImg
(
e
,
img
)
{
img
.
pic_url
=
e
.
url
;
img
.
pic_url
=
e
.
url
;
this
.
refreshImage
(
img
);
this
.
refreshImage
(
img
);
this
.
refresh
();
}
}
refreshImage
(
img
)
{
refreshImage
(
img
)
{
...
@@ -221,6 +278,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -221,6 +278,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
}
}
this
.
refresh
();
}
}
...
@@ -245,10 +303,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -245,10 +303,18 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
anchorX
=
0.5
;
item
.
anchorX
=
0.5
;
item
.
anchorY
=
0.5
;
item
.
anchorY
=
0.5
;
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
x
=
this
.
canvasWidth
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
item
.
y
=
this
.
canvasHeight
/
2
;
item
.
itemType
=
this
.
defaultItemType
;
item
.
itemType
=
this
.
getDefaultItemType
();
item
.
gIdx
=
'
0
'
;
item
[
'
id
'
]
=
new
Date
().
getTime
().
toString
();
item
[
'
data
'
]
=
saveData
;
console
.
log
(
'
item.x:
'
,
item
.
x
);
if
(
saveData
)
{
if
(
saveData
)
{
...
@@ -257,41 +323,193 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -257,41 +323,193 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
scaleY
=
saveRect
.
height
/
item
.
height
;
item
.
scaleY
=
saveRect
.
height
/
item
.
height
;
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
x
=
saveRect
.
x
+
saveRect
.
width
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
item
.
gIdx
=
saveData
.
gIdx
;
item
[
'
id
'
]
=
saveData
.
id
;
item
[
'
skeJsonData
'
]
=
saveData
.
skeJsonData
;
item
[
'
texJsonData
'
]
=
saveData
.
texJsonData
;
item
[
'
texPngData
'
]
=
saveData
.
texPngData
;
item
[
'
actionData_
'
+
item
.
gIdx
]
=
saveData
[
'
actionData_
'
+
item
.
gIdx
];
}
}
console
.
log
(
'
item.x:~~
'
,
item
.
x
);
item
.
showLineDash
();
item
.
showLineDash
();
const
pic
=
new
HotZoneImg
(
this
.
ctx
);
// const pic = new HotZoneImg(this.ctx);
this
.
setItemPic
(
item
,
saveData
);
this
.
setItemLabel
(
item
,
saveData
);
this
.
setItemAnima
(
item
,
saveData
);
this
.
setItemDrag
(
item
,
saveData
);
return
item
;
}
setItemPic
(
item
,
saveData
)
{
console
.
log
(
'
in setItemPic
'
,
saveData
);
const
pic
=
new
EditorItem
(
this
.
ctx
);
pic
.
visible
=
false
;
pic
.
visible
=
false
;
item
[
'
pic
'
]
=
pic
;
item
[
'
pic
'
]
=
pic
;
if
(
saveData
&&
saveData
.
pic_url
)
{
if
(
saveData
)
{
this
.
loadHotZonePic
(
pic
,
saveData
.
pic_url
);
let
picUrl
=
saveData
.
pic_url
;
const
actionData
=
saveData
[
'
actionData_
'
+
item
.
gIdx
];
if
(
actionData
&&
actionData
.
type
==
'
pic
'
)
{
picUrl
=
actionData
.
pic_url
;
}
console
.
log
(
'
saveData:
'
,
saveData
);
console
.
log
(
'
picUrl:
'
,
picUrl
);
if
(
picUrl
)
{
this
.
loadHotZonePic
(
pic
,
picUrl
,
saveData
.
imgScale
);
}
}
}
pic
.
x
=
item
.
x
;
pic
.
x
=
item
.
x
;
pic
.
y
=
item
.
y
;
pic
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
pic
);
this
.
renderArr
.
push
(
pic
);
}
setItemDrag
(
item
,
saveData
)
{
console
.
log
(
'
in setItemDrag
'
,
saveData
);
const
dragItem
=
new
DragItem
(
this
.
ctx
);
dragItem
.
init
();
dragItem
.
item
=
item
;
item
[
'
drag
'
]
=
dragItem
;
dragItem
.
visible
=
false
;
dragItem
.
x
=
item
.
x
;
dragItem
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
dragItem
);
if
(
saveData
)
{
if
(
saveData
.
dragDot
)
{
dragItem
.
x
=
saveData
.
dragDot
.
x
/
saveData
.
mapScale
*
this
.
mapScale
;
dragItem
.
y
=
saveData
.
dragDot
.
y
/
saveData
.
mapScale
*
this
.
mapScale
;
}
}
// console.log('item.itemType: ', item.itemType);
// let w = item.width;
// let h = item.height;
// if (saveData) {
// switch (saveData.itemType) {
// case 'rect':
// w = saveData.rect.width;
// h = saveData.rect.height;
// break;
// case 'pic':
// w = saveData.imgSizeW * saveData.imgScale;
// h = saveData.imgSizeH * saveData.imgScale;;
// break;
// case 'text':
// w = saveData.rect.width;
// h = saveData.rect.height;
// break;
// }
// }
// dragItem.setSize(w, h);
}
setItemAnima
(
item
,
saveData
)
{
console
.
log
(
'
in setItemAnima
'
,
saveData
);
// const pic = new EditorItem(this.ctx);
// pic.visible = false;
// item['pic'] = pic;
// if (saveData) {
// let picUrl = saveData.pic_url;
// const actionData = saveData['actionData_' + item.gIdx];
// if (actionData && actionData.type == 'pic') {
// picUrl = actionData.pic_url;
// }
// console.log('saveData: ', saveData);
// console.log('picUrl: ', picUrl);
// if (picUrl) {
// this.loadHotZonePic(pic, picUrl, saveData.imgScale);
// }
// }
// pic.x = item.x;
// pic.y = item.y;
// this.renderArr.push(pic);
}
setItemLabel
(
item
,
saveData
)
{
const
textLabel
=
new
HotZoneLabel
(
this
.
ctx
);
const
textLabel
=
new
HotZoneLabel
(
this
.
ctx
);
textLabel
.
fontSize
=
this
.
hotZoneFontObj
.
size
;
if
(
this
.
hotZoneFontObj
)
{
textLabel
.
fontName
=
this
.
hotZoneFontObj
.
name
;
textLabel
.
fontSize
=
this
.
hotZoneFontObj
.
size
;
textLabel
.
fontColor
=
this
.
hotZoneFontObj
.
color
;
textLabel
.
fontName
=
this
.
hotZoneFontObj
.
name
;
textLabel
.
fontColor
=
this
.
hotZoneFontObj
.
color
;
}
textLabel
.
textAlign
=
'
center
'
;
textLabel
.
textAlign
=
'
center
'
;
// textLabel.setOutline();
// textLabel.setOutline();
// console.log('saveData:', saveData);
item
[
'
textLabel
'
]
=
textLabel
;
item
[
'
textLabel
'
]
=
textLabel
;
textLabel
.
setScaleXY
(
this
.
mapScale
);
textLabel
.
setScaleXY
(
this
.
mapScale
);
if
(
saveData
&&
saveData
.
text
)
{
if
(
saveData
)
{
textLabel
.
text
=
saveData
.
text
;
if
(
saveData
.
text
&&
this
.
hotZoneFontObj
)
{
textLabel
.
text
=
saveData
.
text
}
this
.
setActionFont
(
textLabel
,
saveData
[
'
actionData_
'
+
item
.
gIdx
]);
textLabel
.
refreshSize
();
textLabel
.
refreshSize
();
}
}
textLabel
.
x
=
item
.
x
;
textLabel
.
x
=
item
.
x
;
textLabel
.
y
=
item
.
y
;
textLabel
.
y
=
item
.
y
;
this
.
renderArr
.
push
(
textLabel
);
this
.
renderArr
.
push
(
textLabel
);
}
return
item
;
setActionFont
(
textLabel
,
actionData
)
{
if
(
actionData
&&
actionData
.
type
==
'
text
'
)
{
textLabel
.
text
=
actionData
.
text
;
for
(
let
i
=
0
;
i
<
actionData
.
changeOption
.
length
;
i
++
)
{
const
op
=
actionData
.
changeOption
[
i
];
textLabel
[
op
[
0
]]
=
op
[
1
];
}
}
}
}
getDefaultItemType
()
{
if
(
this
.
customTypeGroupArr
)
{
const
group
=
this
.
customTypeGroupArr
[
0
];
if
(
group
.
rect
)
{
return
'
rect
'
;
}
if
(
group
.
pic
)
{
return
'
pic
'
;
}
if
(
group
.
text
)
{
return
'
text
'
;
}
}
else
{
return
this
.
defaultItemType
;
}
}
getPicItem
(
img
,
saveData
=
null
)
{
getPicItem
(
img
,
saveData
=
null
)
{
...
@@ -327,9 +545,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -327,9 +545,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
item
.
y
=
saveRect
.
y
+
saveRect
.
height
/
2
;
}
else
{
}
else
{
item
.
showLineDash
();
//
item.showLineDash();
}
}
item
.
showLineDash
();
console
.
log
(
'
aaa
'
);
});
});
return
item
;
return
item
;
}
}
...
@@ -337,6 +557,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -337,6 +557,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onAudioUploadSuccessByImg
(
e
,
img
)
{
onAudioUploadSuccessByImg
(
e
,
img
)
{
img
.
audio_url
=
e
.
url
;
img
.
audio_url
=
e
.
url
;
this
.
refresh
();
}
}
deleteItem
(
e
,
i
)
{
deleteItem
(
e
,
i
)
{
...
@@ -345,15 +566,111 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -345,15 +566,111 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
hotZoneArr
.
splice
(
i
,
1
);
this
.
refreshHotZoneId
();
this
.
refreshHotZoneId
();
this
.
refresh
();
}
}
// radioChange(e, item) {
// item.itemType = e;
// this.refreshItem(item);
// this.refresh();
// // console.log(' in radioChange e: ', e);
// }
customRadioChange
(
e
,
item
)
{
console
.
log
(
'
in customRadioChange
'
,
e
);
item
.
gIdx
=
-
1
;
setTimeout
(()
=>
{
item
.
gIdx
=
e
;
this
.
refreshCustomItem
(
item
);
this
.
refresh
();
},
1
);
// const curGroup = this.customTypeGroupArr[e];
}
refreshCustomItem
(
item
)
{
this
.
hideHotZoneItem
(
item
);
const
group
=
this
.
customTypeGroupArr
[
item
.
gIdx
];
if
(
!
group
)
{
return
;
}
if
(
group
.
text
)
{
this
.
showItemLabel
(
item
);
}
if
(
group
.
rect
)
{
this
.
showItemRect
(
item
,
true
);
}
if
(
group
.
pic
&&
!
group
.
anima
)
{
this
.
showItemPic
(
item
);
}
if
(
group
.
action
)
{
if
(
group
.
action
.
type
==
'
pic
'
)
{
this
.
showItemPic
(
item
);
}
if
(
group
.
action
.
type
==
'
text
'
)
{
this
.
showItemLabel
(
item
);
}
if
(
group
.
action
.
type
==
'
anima
'
)
{
this
.
showItemRect
(
item
);
}
}
radioChange
(
e
,
item
)
{
item
.
drag
.
visible
=
group
.
drag
;
item
.
itemType
=
e
;
this
.
refreshItem
(
item
);
item
.
setAnimaStyle
(
group
.
animaSmall
)
// console.log(' in radioChange e: ', e);
}
showItemDrag
(
item
)
{
item
.
drag
.
visible
=
true
;
// item.dragBody.visible = true;
// item.itemType = 'pic';
// this.showArrowTop(item)
}
showItemPic
(
item
)
{
item
.
pic
.
visible
=
true
;
item
.
itemType
=
'
pic
'
;
this
.
showArrowTop
(
item
)
}
showItemLabel
(
item
)
{
item
.
textLabel
.
visible
=
true
;
item
.
itemType
=
'
text
'
;
this
.
showArrowTop
(
item
)
}
showItemRect
(
item
,
isShowArrowTop
=
true
)
{
item
.
visible
=
true
;
item
.
itemType
=
'
rect
'
;
this
.
showArrowTop
(
item
,
isShowArrowTop
)
}
showArrowTop
(
item
,
isShowArrowTop
=
false
)
{
if
(
isShowArrowTop
)
{
item
.
arrowTop
.
visible
=
true
;
item
.
arrowRight
.
visible
=
true
;
}
else
{
item
.
arrowTop
.
visible
=
false
;
item
.
arrowRight
.
visible
=
false
;
}
}
hideHotZoneItem
(
item
)
{
item
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
item
.
textLabel
.
visible
=
false
;
}
}
refreshItem
(
item
)
{
refreshItem
(
item
)
{
...
@@ -368,32 +685,29 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -368,32 +685,29 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
setTextState
(
item
);
this
.
setTextState
(
item
);
break
;
break
;
default
:
default
:
this
.
setNoneState
(
item
);
}
}
}
}
init
()
{
init
()
{
console
.
log
(
'
init
'
);
this
.
initData
();
this
.
initData
();
this
.
initCtx
();
this
.
initCtx
();
this
.
initItem
();
this
.
initItem
();
}
}
initItem
()
{
initItem
()
{
this
.
changeDetectorRef
.
markForCheck
();
this
.
changeDetectorRef
.
detectChanges
();
if
(
!
this
.
bgItem
)
{
if
(
!
this
.
bgItem
)
{
this
.
bgItem
=
{};
this
.
bgItem
=
{};
}
else
{
}
else
{
this
.
refreshBackground
(()
=>
{
this
.
refreshBackground
(()
=>
{
// if (!this.imgItemArr) {
// this.imgItemArr = [];
// } else {
// this.initImgArr();
// }
// console.log('aaaaa');
if
(
!
this
.
hotZoneItemArr
)
{
if
(
!
this
.
hotZoneItemArr
)
{
this
.
hotZoneItemArr
=
[];
this
.
hotZoneItemArr
=
[];
...
@@ -404,6 +718,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -404,6 +718,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
});
});
}
}
this
.
refresh
();
}
}
initHotZoneArr
()
{
initHotZoneArr
()
{
...
@@ -427,6 +742,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -427,6 +742,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
hotZoneArr
=
[];
this
.
hotZoneArr
=
[];
const
arr
=
this
.
hotZoneItemArr
.
concat
();
const
arr
=
this
.
hotZoneItemArr
.
concat
();
console
.
log
(
'
this.hotZoneItemArr:
'
,
this
.
hotZoneItemArr
);
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
]));
...
@@ -449,9 +765,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -449,9 +765,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
pic_url
=
data
.
pic_url
;
item
.
pic_url
=
data
.
pic_url
;
item
.
text
=
data
.
text
;
item
.
text
=
data
.
text
;
item
.
itemType
=
data
.
itemType
;
item
.
itemType
=
data
.
itemType
;
this
.
refreshItem
(
item
);
console
.
log
(
'
item:
'
,
item
);
if
(
this
.
customTypeGroupArr
)
{
this
.
refreshCustomItem
(
item
);
}
else
{
this
.
refreshItem
(
item
);
}
console
.
log
(
'
1 item:
'
,
item
);
this
.
hotZoneArr
.
push
(
item
);
this
.
hotZoneArr
.
push
(
item
);
}
}
...
@@ -463,48 +785,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -463,48 +785,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
initImgArr
()
{
console
.
log
(
'
this.imgItemArr:
'
,
this
.
imgItemArr
);
let
curBgRect
;
if
(
this
.
bg
)
{
curBgRect
=
this
.
bg
.
getBoundingBox
();
}
else
{
curBgRect
=
{
x
:
0
,
y
:
0
,
width
:
this
.
canvasWidth
,
height
:
this
.
canvasHeight
};
}
let
oldBgRect
=
this
.
bgItem
.
rect
;
if
(
!
oldBgRect
)
{
oldBgRect
=
curBgRect
;
}
const
rate
=
curBgRect
.
width
/
oldBgRect
.
width
;
console
.
log
(
'
rate:
'
,
rate
);
this
.
imgArr
=
[];
const
arr
=
this
.
imgItemArr
.
concat
();
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
const
img
=
{
pic_url
:
data
.
pic_url
};
data
.
rect
.
x
*=
rate
;
data
.
rect
.
y
*=
rate
;
data
.
rect
.
width
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
x
+=
curBgRect
.
x
;
data
.
rect
.
y
+=
curBgRect
.
y
;
img
[
'
picItem
'
]
=
this
.
getPicItem
(
img
,
data
);
img
[
'
audio_url
'
]
=
arr
[
i
].
audio_url
;
this
.
imgArr
.
push
(
img
);
}
this
.
refreshImageId
();
}
initData
()
{
initData
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
...
@@ -528,9 +808,28 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -528,9 +808,28 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
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
=
this
.
hotZoneArr
.
length
-
1
;
i
>=
0
;
i
--
)
{
const
item
=
this
.
hotZoneArr
[
i
];
if
(
item
&&
item
.
drag
&&
item
.
drag
.
visible
)
{
if
(
this
.
checkClickTarget
(
item
.
drag
))
{
this
.
clickedDragPoint
(
item
.
drag
);
return
;
}
}
}
for
(
let
i
=
this
.
hotZoneArr
.
length
-
1
;
i
>=
0
;
i
--
)
{
const
item
=
this
.
hotZoneArr
[
i
];
const
item
=
this
.
hotZoneArr
[
i
];
console
.
log
(
'
mapDown item:
'
,
item
);
let
callback
;
let
callback
;
let
target
;
let
target
;
switch
(
item
.
itemType
)
{
switch
(
item
.
itemType
)
{
...
@@ -548,7 +847,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -548,7 +847,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
break
;
break
;
}
}
if
(
this
.
checkClickTarget
(
target
))
{
if
(
t
arget
&&
t
his
.
checkClickTarget
(
target
))
{
callback
(
target
);
callback
(
target
);
return
;
return
;
}
}
...
@@ -582,7 +881,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -582,7 +881,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
this
.
oldPos
=
{
x
:
this
.
mx
,
y
:
this
.
my
};
this
.
saveDisabled
=
tru
e
;
// this.saveDisabled = fals
e;
}
}
...
@@ -723,7 +1022,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -723,7 +1022,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// }
// }
this
.
updateArr
(
this
.
hotZoneArr
);
this
.
updateArr
(
this
.
hotZoneArr
);
this
.
updatePos
()
this
.
updatePos
()
;
TWEEN
.
update
();
TWEEN
.
update
();
...
@@ -833,7 +1132,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -833,7 +1132,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
checkClickTarget
(
target
)
{
checkClickTarget
(
target
)
{
if
(
!
target
||
!
target
.
visible
)
{
return
;
}
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
;
...
@@ -852,9 +1153,21 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -852,9 +1153,21 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick
()
{
saveClick
()
{
const
sendData
=
this
.
getSendData
();
this
.
save
.
emit
(
sendData
);
}
getSendData
()
{
const
bgItem
=
this
.
bgItem
;
const
bgItem
=
this
.
bgItem
;
if
(
this
.
bg
)
{
if
(
this
.
bg
)
{
bgItem
[
'
rect
'
]
=
this
.
bg
.
getBoundingBox
();
const
rect
=
this
.
bg
.
getBoundingBox
();
bgItem
[
'
rect
'
]
=
rect
;
rect
.
x
=
Math
.
round
(
rect
.
x
*
100
)
/
100
;
rect
.
y
=
Math
.
round
(
rect
.
y
*
100
)
/
100
;
rect
.
width
=
Math
.
round
(
rect
.
width
*
100
)
/
100
;
rect
.
height
=
Math
.
round
(
rect
.
height
*
100
)
/
100
;
}
else
{
}
else
{
bgItem
[
'
rect
'
]
=
{
bgItem
[
'
rect
'
]
=
{
x
:
0
,
x
:
0
,
...
@@ -870,19 +1183,46 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -870,19 +1183,46 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
hotZoneArr
.
length
;
i
++
)
{
const
hotZoneItem
=
{
const
hotZoneItem
=
{
id
:
hotZoneArr
[
i
].
id
,
index
:
hotZoneArr
[
i
].
index
,
index
:
hotZoneArr
[
i
].
index
,
pic_url
:
hotZoneArr
[
i
].
pic_url
,
pic_url
:
hotZoneArr
[
i
].
pic_url
,
text
:
hotZoneArr
[
i
].
text
,
text
:
hotZoneArr
[
i
].
text
,
audio_url
:
hotZoneArr
[
i
].
audio_url
,
audio_url
:
hotZoneArr
[
i
].
audio_url
,
itemType
:
hotZoneArr
[
i
].
itemType
,
itemType
:
hotZoneArr
[
i
].
itemType
,
fontSize
:
this
.
hotZoneFontObj
.
size
,
fontName
:
this
.
hotZoneFontObj
.
name
,
fontColor
:
this
.
hotZoneFontObj
.
color
,
fontScale
:
hotZoneArr
[
i
].
textLabel
?
hotZoneArr
[
i
].
textLabel
.
scaleX
:
1
,
fontScale
:
hotZoneArr
[
i
].
textLabel
?
hotZoneArr
[
i
].
textLabel
.
scaleX
:
1
,
imgScale
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
scaleX
:
1
,
imgScale
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
scaleX
:
1
,
mapScale
:
this
.
mapScale
imgSizeW
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
width
:
0
,
imgSizeH
:
hotZoneArr
[
i
].
pic
?
hotZoneArr
[
i
].
pic
.
height
:
0
,
mapScale
:
this
.
mapScale
,
skeJsonData
:
hotZoneArr
[
i
].
skeJsonData
,
texJsonData
:
hotZoneArr
[
i
].
texJsonData
,
texPngData
:
hotZoneArr
[
i
].
texPngData
,
dragDot
:
hotZoneArr
[
i
].
drag
.
getPosition
(),
gIdx
:
hotZoneArr
[
i
].
gIdx
};
};
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
getBoundingBox
();
hotZoneItem
[
'
actionData_
'
+
hotZoneItem
.
gIdx
]
=
hotZoneArr
[
i
][
'
actionData_
'
+
hotZoneArr
[
i
].
gIdx
]
if
(
this
.
hotZoneFontObj
)
{
hotZoneItem
[
'
fontSize
'
]
=
this
.
hotZoneFontObj
.
size
;
hotZoneItem
[
'
fontName
'
]
=
this
.
hotZoneFontObj
.
name
;
hotZoneItem
[
'
ontColor
'
]
=
this
.
hotZoneFontObj
.
color
;
}
if
(
hotZoneArr
[
i
].
itemType
==
'
pic
'
)
{
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
pic
.
getBoundingBox
();
}
else
if
(
hotZoneArr
[
i
].
itemType
==
'
text
'
)
{
hotZoneArr
[
i
].
textLabel
.
refreshSize
();
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
textLabel
.
getLabelRect
();
// hotZoneItem['rect'].width = hotZoneItem['rect'].width / hotZoneArr[i].textLabel.scaleX;
// hotZoneItem['rect'].height = hotZoneArr[i].textLabel.height * hotZoneArr[i].textLabel.scaleY;
}
else
{
hotZoneItem
[
'
rect
'
]
=
hotZoneArr
[
i
].
getBoundingBox
();
}
// hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem
[
'
rect
'
].
x
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
x
-
bgItem
[
'
rect
'
].
x
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
x
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
x
-
bgItem
[
'
rect
'
].
x
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
y
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
y
-
bgItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
y
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
y
-
bgItem
[
'
rect
'
].
y
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
hotZoneItem
[
'
rect
'
].
width
=
Math
.
round
((
hotZoneItem
[
'
rect
'
].
width
)
*
100
)
/
100
;
...
@@ -894,7 +1234,275 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -894,7 +1234,275 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console
.
log
(
'
hotZoneItemArr:
'
,
hotZoneItemArr
);
console
.
log
(
'
hotZoneItemArr:
'
,
hotZoneItemArr
);
this
.
save
.
emit
({
bgItem
,
hotZoneItemArr
});
return
{
bgItem
,
hotZoneItemArr
};
}
saveText
(
item
)
{
if
(
item
.
itemType
==
'
text
'
)
{
item
.
textLabel
.
text
=
item
.
text
;
}
}
onSaveCustomAction
(
e
,
item
)
{
const
data
=
e
;
item
[
'
actionData_
'
+
item
.
gIdx
]
=
data
;
if
(
data
.
type
==
'
pic
'
)
{
let
picUrl
=
data
.
pic_url
;
if
(
picUrl
)
{
this
.
loadHotZonePic
(
item
.
pic
,
picUrl
);
}
}
if
(
data
.
type
==
'
text
'
)
{
this
.
setActionFont
(
item
.
textLabel
,
data
);
item
.
textLabel
.
refreshSize
();
}
// if (data.type == 'anima') {
// this.setActionAnima(item.anima, data);
// }
// this.loadHotZonePic(item.pic, e.url);
this
.
refresh
()
}
setActionAnima
()
{
}
setAnimaBtnClick
(
index
)
{
console
.
log
(
'
aaaa
'
)
this
.
isAnimaSmall
=
false
;
this
.
setCurDragonBone
(
index
);
// this.curDragonBoneIndex = index;
// this.curDragonBoneGIdx = Number(this.hotZoneArr[index].gIdx);
// const {skeJsonData, texJsonData, texPngData} = this.hotZoneArr[index];
// this.skeJsonData = skeJsonData || {};
// this.texJsonData = texJsonData || {};
// this.texPngData = texPngData || {};
// this.animaPanelVisible = true;
// this.refresh();
}
setAnimaSmallBtnClick
(
index
)
{
console
.
log
(
'
bbb
'
)
this
.
isAnimaSmall
=
true
;
this
.
setCurDragonBone
(
index
);
}
setCurDragonBone
(
index
)
{
this
.
curDragonBoneIndex
=
index
;
this
.
curDragonBoneGIdx
=
Number
(
this
.
hotZoneArr
[
index
].
gIdx
);
const
{
skeJsonData
,
texJsonData
,
texPngData
}
=
this
.
hotZoneArr
[
index
];
this
.
skeJsonData
=
skeJsonData
||
{};
this
.
texJsonData
=
texJsonData
||
{};
this
.
texPngData
=
texPngData
||
{};
this
.
animaPanelVisible
=
true
;
this
.
refresh
();
}
setItemSizeByAnima
(
jsonData
,
item
)
{
console
.
log
(
'
json:
'
,
jsonData
);
const
request
=
new
XMLHttpRequest
();
//通过url获取文件,第二个选项是文件所在的具体地址
request
.
open
(
'
GET
'
,
jsonData
.
url
,
true
);
request
.
send
(
null
);
request
.
onreadystatechange
=
()
=>
{
if
(
request
.
readyState
===
4
&&
request
.
status
===
200
)
{
var
type
=
request
.
getResponseHeader
(
'
Content-Type
'
);
if
(
type
.
indexOf
(
"
text
"
)
!==
1
)
{
//返回一个文件内容的对象
const
data
=
JSON
.
parse
(
request
.
responseText
);
console
.
log
(
'
request.responseText;
'
,
data
)
const
animaSize
=
data
.
armature
[
0
].
canvas
;
item
.
width
=
animaSize
.
width
;
item
.
height
=
animaSize
.
height
;
// return request.responseText;
}
}
}
}
animaPanelCancel
()
{
this
.
animaPanelVisible
=
false
;
this
.
refresh
();
}
animaPanelOk
()
{
this
.
setItemDragonBoneData
(
this
.
hotZoneArr
[
this
.
curDragonBoneIndex
]);
console
.
log
(
'
this.hotZoneArr:
'
,
this
.
hotZoneArr
);
this
.
animaPanelVisible
=
false
;
if
(
this
.
isAnimaSmall
)
{
this
.
setItemSizeByAnima
(
this
.
skeJsonData
,
this
.
hotZoneArr
[
this
.
curDragonBoneIndex
]);
}
this
.
refresh
();
}
setItemDragonBoneData
(
item
)
{
item
[
'
skeJsonData
'
]
=
this
.
skeJsonData
;
item
[
'
texJsonData
'
]
=
this
.
texJsonData
;
item
[
'
texPngData
'
]
=
this
.
texPngData
;
}
skeJsonHandleChange
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
switch
(
e
.
type
)
{
case
'
start
'
:
this
.
isSkeJsonLoading
=
true
;
break
;
case
'
success
'
:
this
.
skeJsonData
[
'
url
'
]
=
e
.
file
.
response
.
url
;
this
.
skeJsonData
[
'
name
'
]
=
e
.
file
.
name
;
this
.
nzMessageService
.
success
(
'
上传成功
'
);
this
.
isSkeJsonLoading
=
false
;
break
;
case
'
progress
'
:
break
;
}
}
texJsonHandleChange
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
switch
(
e
.
type
)
{
case
'
start
'
:
this
.
isTexJsonLoading
=
true
;
break
;
case
'
success
'
:
this
.
texJsonData
[
'
url
'
]
=
e
.
file
.
response
.
url
;
this
.
texJsonData
[
'
name
'
]
=
e
.
file
.
name
;
this
.
nzMessageService
.
success
(
'
上传成功
'
);
this
.
isTexJsonLoading
=
false
;
break
;
case
'
progress
'
:
break
;
}
}
texPngHandleChange
(
e
)
{
console
.
log
(
'
e:
'
,
e
);
switch
(
e
.
type
)
{
case
'
start
'
:
this
.
isTexPngLoading
=
true
;
break
;
case
'
success
'
:
this
.
texPngData
[
'
url
'
]
=
e
.
file
.
response
.
url
;
this
.
texPngData
[
'
name
'
]
=
e
.
file
.
name
;
this
.
nzMessageService
.
success
(
'
上传成功
'
);
this
.
isTexPngLoading
=
false
;
break
;
case
'
progress
'
:
break
;
}
}
copyHotZoneData
()
{
const
{
bgItem
,
hotZoneItemArr
}
=
this
.
getSendData
();
// const hotZoneItemArrNew = [];
// const tmpArr = JSON.parse(JSON.stringify(hotZoneItemArr));
// tmpArr.forEach((item) => {
// if (item.gIdx === '0') {
// hotZoneItemArr.push(item);
// }
// })
const
jsonData
=
{
bgItem
,
hotZoneItemArr
,
isHasRect
:
this
.
isHasRect
,
isHasPic
:
this
.
isHasPic
,
isHasText
:
this
.
isHasText
,
isHasAudio
:
this
.
isHasAudio
,
isHasAnima
:
this
.
isHasAnima
,
hotZoneFontObj
:
this
.
hotZoneFontObj
,
defaultItemType
:
this
.
defaultItemType
,
hotZoneImgSize
:
this
.
hotZoneImgSize
,
};
const
oInput
=
document
.
createElement
(
'
input
'
);
oInput
.
value
=
JSON
.
stringify
(
jsonData
);
document
.
body
.
appendChild
(
oInput
);
oInput
.
select
();
// 选择对象
document
.
execCommand
(
'
Copy
'
);
// 执行浏览器复制命令
document
.
body
.
removeChild
(
oInput
);
this
.
nzMessageService
.
success
(
'
复制成功
'
);
// alert('复制成功');
}
importData
()
{
if
(
!
this
.
pasteData
)
{
return
;
}
try
{
const
data
=
JSON
.
parse
(
this
.
pasteData
);
console
.
log
(
'
data:
'
,
data
);
const
{
bgItem
,
hotZoneItemArr
,
isHasRect
,
isHasPic
,
isHasText
,
isHasAudio
,
isHasAnima
,
hotZoneFontObj
,
defaultItemType
,
hotZoneImgSize
,
}
=
data
;
this
.
hotZoneItemArr
=
hotZoneItemArr
;
this
.
isHasRect
=
isHasRect
;
this
.
isHasPic
=
isHasPic
;
this
.
isHasText
=
isHasText
;
this
.
isHasAudio
=
isHasAudio
;
this
.
isHasAnima
=
isHasAnima
;
this
.
hotZoneFontObj
=
hotZoneFontObj
;
this
.
defaultItemType
=
defaultItemType
;
this
.
hotZoneImgSize
=
hotZoneImgSize
;
this
.
bgItem
=
bgItem
;
this
.
pasteData
=
''
;
}
catch
(
e
)
{
console
.
log
(
'
err:
'
,
e
);
this
.
nzMessageService
.
error
(
'
导入失败
'
);
}
}
}
private
updatePos
()
{
private
updatePos
()
{
...
@@ -917,12 +1525,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -917,12 +1525,15 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
break
;
break
;
}
}
item
.
x
=
x
;
if
(
x
!=
undefined
&&
y
!=
undefined
)
{
item
.
y
=
y
;
item
.
x
=
x
;
item
.
pic
.
x
=
x
;
item
.
y
=
y
;
item
.
pic
.
y
=
y
;
item
.
pic
.
x
=
x
;
item
.
textLabel
.
x
=
x
;
item
.
pic
.
y
=
y
;
item
.
textLabel
.
y
=
y
;
item
.
textLabel
.
x
=
x
;
item
.
textLabel
.
y
=
y
;
}
});
});
}
}
...
@@ -944,6 +1555,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -944,6 +1555,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item
.
textLabel
.
visible
=
true
;
item
.
textLabel
.
visible
=
true
;
}
}
private
setNoneState
(
item
:
any
)
{
item
.
visible
=
false
;
item
.
pic
.
visible
=
false
;
item
.
textLabel
.
visible
=
false
;
}
private
clickedHotZoneRect
(
item
:
any
)
{
private
clickedHotZoneRect
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
if
(
this
.
checkClickTarget
(
item
))
{
...
@@ -962,6 +1579,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -962,6 +1579,17 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
private
clickedHotZonePic
(
item
:
any
)
{
private
clickedHotZonePic
(
item
:
any
)
{
if
(
this
.
checkClickTarget
(
item
))
{
if
(
this
.
checkClickTarget
(
item
))
{
if
(
item
.
lineDashFlag
&&
this
.
checkClickTarget
(
item
.
arrow
))
{
this
.
changeItemSize
(
item
);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowTop)) {
// this.changeItemTopSize(item);
// } else if (item.lineDashFlag && this.checkClickTarget(item.arrowRight)) {
// this.changeItemRightSize(item);
}
else
{
this
.
changeCurItem
(
item
);
}
this
.
curItem
=
item
;
this
.
curItem
=
item
;
}
}
}
}
...
@@ -972,15 +1600,42 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
...
@@ -972,15 +1600,42 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
}
}
}
saveTex
t
(
item
)
{
clickedDragPoin
t
(
item
)
{
item
.
textLabel
.
text
=
item
.
text
;
this
.
curItem
=
item
;
}
}
private
loadHotZonePic
(
pic
:
HotZoneImg
,
url
)
{
private
loadHotZonePic
(
pic
:
HotZoneImg
,
url
,
scale
=
null
)
{
const
baseLen
=
this
.
hotZoneImgSize
*
this
.
mapScale
;
let
baseLen
;
if
(
this
.
hotZoneImgSize
)
{
baseLen
=
this
.
hotZoneImgSize
*
this
.
mapScale
;
}
pic
.
load
(
url
).
then
(()
=>
{
pic
.
load
(
url
).
then
(()
=>
{
const
s
=
getMinScale
(
pic
,
baseLen
);
if
(
!
scale
)
{
pic
.
setScaleXY
(
s
);
if
(
baseLen
)
{
scale
=
getMinScale
(
pic
,
baseLen
);
}
else
{
scale
=
this
.
bg
.
scaleX
;
}
}
pic
.
setScaleXY
(
scale
);
});
});
}
}
closeAfterPanel
()
{
this
.
refresh
();
}
/**
* 刷新 渲染页面
*/
refresh
()
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
},
1
);
}
}
}
form/src/app/common/upload-image-with-preview/upload-image-with-preview.component.ts
View file @
a50b292e
...
@@ -42,7 +42,24 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
...
@@ -42,7 +42,24 @@ export class UploadImageWithPreviewComponent implements OnDestroy, OnChanges {
this
.
uploadData
=
data
;
this
.
uploadData
=
data
;
};
};
this
.
setUploadUrl
();
}
}
setUploadUrl
()
{
if
(
!
this
.
uploadUrl
)
{
this
.
uploadUrl
=
(
<
any
>
window
).
courseware
.
uploadUrl
();
this
.
uploadData
=
(
<
any
>
window
).
courseware
.
uploadData
();
setTimeout
(()
=>
{
this
.
setUploadUrl
();
},
500
);
}
}
ngOnChanges
()
{
ngOnChanges
()
{
if
(
!
this
.
picItem
)
{
if
(
!
this
.
picItem
)
{
return
;
return
;
...
...
form/src/app/common/upload-video/upload-video.component.ts
View file @
a50b292e
...
@@ -80,62 +80,43 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
...
@@ -80,62 +80,43 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
URL
.
revokeObjectURL
(
this
.
videoUrl
);
URL
.
revokeObjectURL
(
this
.
videoUrl
);
}
}
httpHeadCall
(
requsetUrl
:
string
,
callback
)
{
let
xhr
=
new
XMLHttpRequest
();
console
.
log
(
"
Status: Send Post Request to
"
+
requsetUrl
);
try
{
xhr
.
onreadystatechange
=
()
=>
{
try
{
console
.
log
(
'
xhr.readyState:
'
,
xhr
.
readyState
);
if
(
xhr
.
readyState
==
4
)
{
if
((
xhr
.
status
>=
200
&&
xhr
.
status
<
400
))
{
callback
(
true
);
}
else
{
callback
(
false
);
}
}
}
catch
(
e
)
{
console
.
log
(
e
)
}
};
xhr
.
open
(
"
HEAD
"
,
requsetUrl
,
true
);
xhr
.
send
();
xhr
.
timeout
=
15000
;
xhr
.
onerror
=
(
e
)
=>
{
callback
(
false
);
};
xhr
.
ontimeout
=
(
e
)
=>
{
callback
(
false
);
};
}
catch
(
e
)
{
console
.
log
(
"
Send Get Request error:
"
,
e
)
}
}
safeVideoUrl
(
url
)
{
safeVideoUrl
(
url
)
{
cons
t
_url
=
url
.
replace
(
"
_l.
"
,
"
.
"
);
cons
ole
.
log
(
url
);
return
this
.
sanitization
.
bypassSecurityTrustResourceUrl
(
_
url
);
// `${url}`;
return
this
.
sanitization
.
bypassSecurityTrustResourceUrl
(
url
);
// `${url}`;
}
}
videoLoadedMetaData
()
{
videoLoadedMetaData
()
{
}
}
handleChange
(
info
:
UploadChangeParam
):
void
{
handleChange
(
info
:
UploadChangeParam
/* { type: string, file: UploadFile, event: any }*/
):
void
{
console
.
log
(
'
info:
'
,
info
);
switch
(
info
.
type
)
{
switch
(
info
.
type
)
{
case
'
start
'
:
case
'
start
'
:
// this.beforeUpload(info.file);
if
(
!
this
.
checkSelectFile
(
info
.
file
))
{
if
(
!
this
.
checkSelectFile
(
info
.
file
))
{
return
;
return
;
}
}
this
.
uploading
=
true
;
this
.
uploading
=
true
;
this
.
progress
=
0
;
this
.
progress
=
0
;
break
;
break
;
case
'
success
'
:
case
'
success
'
:
let
url
=
info
.
file
.
response
.
url
;
url
=
url
.
substring
(
0
,
url
.
lastIndexOf
(
"
.
"
))
+
"
_l.mp4
"
;
info
.
file
.
response
.
url
=
url
;
this
.
uploadSuccess
(
info
.
file
);
this
.
uploadSuccess
(
info
.
file
);
// this.beforeUpload(info.file);
// this.uploadSuccess(info.file);
break
;
break
;
case
'
progress
'
:
case
'
progress
'
:
this
.
progress
=
info
.
event
.
percent
;
this
.
progress
=
info
.
event
.
percent
;
...
@@ -144,6 +125,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
...
@@ -144,6 +125,7 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
}
}
}
}
checkSelectFile
(
file
)
{
checkSelectFile
(
file
)
{
if
(
!
file
.
lastModified
)
{
if
(
!
file
.
lastModified
)
{
return
false
;
return
false
;
...
...
form/src/app/form/ComponentBase.ts
View file @
a50b292e
import
{
ApplicationRef
,
ChangeDetectorRef
,
ElementRef
,
ViewChild
}
from
"
@angular/core
"
;
import
{
ApplicationRef
,
ChangeDetectorRef
,
ElementRef
,
ViewChild
}
from
"
@angular/core
"
;
import
{
MetaFormCreator
}
from
"
./mataFormCreator
"
;
export
class
ComponentBase
{
export
class
ComponentBase
{
// 储存数据用
// 储存数据用
...
@@ -8,7 +9,7 @@ export class ComponentBase {
...
@@ -8,7 +9,7 @@ export class ComponentBase {
ngOnChanges
()
{
}
ngOnChanges
()
{
}
ngOnDestroy
()
{
}
ngOnDestroy
()
{
}
constructor
(
p
rivate
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
)
{
}
constructor
(
p
ublic
appRef
:
ApplicationRef
,
public
changeDetectorRef
:
ChangeDetectorRef
)
{
}
ngOnInit
()
{
ngOnInit
()
{
// 获取存储的数据
// 获取存储的数据
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
...
@@ -65,11 +66,12 @@ export class ComponentBase {
...
@@ -65,11 +66,12 @@ export class ComponentBase {
* 储存音频数据
* 储存音频数据
* @param e
* @param e
*/
*/
onAudioUploadSuccess
(
e
,
key
,
it
=
this
.
item
,
audioName
)
{
onAudioUploadSuccess
(
e
,
key
,
it
=
this
.
item
)
{
let
url
=
e
.
url
;
let
url
=
e
.
url
;
it
[
key
]
=
url
;
let
sp
=
url
.
split
(
"
.mp3
"
);
it
[
audioName
]
=
e
.
audioName
||
""
;
let
u
=
sp
[
0
]
+
"
_l.mp3
"
;
console
.
log
(
JSON
.
stringify
(
e
));
it
[
key
]
=
u
;
it
[
"
audioName
"
]
=
e
.
name
||
""
;
this
.
save
();
this
.
save
();
}
}
...
...
form/src/app/form/form.component.html
View file @
a50b292e
...
@@ -12,10 +12,18 @@
...
@@ -12,10 +12,18 @@
}
}
.option-title
{
.option-title
{
font-size
:
36px
;
color
:
#000
;
color
:
#000
;
font-size
:
18px
;
margin-right
:
15px
;
min-width
:
70px
;
margin-bottom
:
3px
;
/* margin-right: 10px; */
}
.option-title-line
{
font-size
:
36px
;
color
:
#ccc
;
border-bottom
:
black
3px
solid
;
margin-right
:
15px
;
white-space
:
pre
;
}
}
.option-content
{
.option-content
{
...
@@ -44,7 +52,7 @@
...
@@ -44,7 +52,7 @@
.word-type-title
{
.word-type-title
{
color
:
#169BD5
;
color
:
#169BD5
;
font-size
:
18px
;
font-size
:
18px
}
}
.word-type-option-title
{
.word-type-option-title
{
...
@@ -73,156 +81,133 @@
...
@@ -73,156 +81,133 @@
}
}
</style>
</style>
<div
class=
"model-content"
>
<div
class=
"model-content"
>
<div
style=
"padding: 10px;background-color: #fff;"
>
<!-- 标题区 -->
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1000px;"
>
<span
style=
"font-size: 20px;"
>
标题文字:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
title
"
(
blur
)="
save
()"
>
<span
style=
"font-size: 20px;"
>
开始音频:
</span>
<div
style=
"padding: 10px;background-color: #fff;"
>
<div
style=
"display:flex ;"
>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<span
style=
"margin-right: 20px;font-size: 18px;font-weight: bold;"
>
提示开关
</span>
<nz-radio-group
[
ngModel
]="
item
.
tipSwitch
"
(
ngModelChange
)="
customRadioChange
($
event
,
item
,'
tipSwitch
')"
style=
"font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;"
>
<label
nz-radio
nzValue=
"1"
>
开
</label>
<label
nz-radio
nzValue=
"0"
>
关
</label>
</nz-radio-group>
<div
*
ngIf=
"item.tipSwitch == 1"
>
<span
style=
"font-size: 20px;"
>
提示动画:
</span>
<app-upload-dragon-bone
style=
"width: 100%"
(
save
)="
onDragonBoneSave
($
event
,
item
)"
[
skeJsonData
]="
item
.
imgAni
.
ske
"
[
texJsonData
]="
item
.
imgAni
.
tex
"
[
texPngData
]="
item
.
imgAni
.
png
"
>
</app-upload-dragon-bone>
<div>
<div>
<app-audio-recorder
[
audioUrl
]="
item
.
npcAudio
"
<span
style=
"font-size: 20px;"
>
提示背景:
</span>
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
npcAudio
',
item
,'
npcAudioName
')"
>
<div
style=
"width:300px"
>
</app-audio-recorder>
<app-upload-image-with-preview
[
picUrl
]="
item
.
tipBg
"
</div>
(
imageUploaded
)="
onImageUploadSuccess
($
event
,'
tipBg
',
item
)"
></app-upload-image-with-preview>
<div
style=
"margin: 5px"
>
</div>
<span>
{{ item.npcAudioName}}
</span>
</div>
</div>
</div>
<span
style=
"font-size: 20px;"
>
结束按钮文字:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
npcAudioText
"
(
blur
)="
save
()"
>
<span
style=
"font-size: 20px;"
>
结束音频:
</span>
<div
style=
"display:flex ;"
>
<div>
<div>
<app-audio-recorder
[
audioUrl
]="
item
.
npcAudioEnd
"
<span
style=
"font-size: 20px;"
>
提示内容:
</span>
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
npcAudioEnd
',
item
,'
npcAudioEndName
')"
>
<input
*
ngIf=
"item.tipType == 'scroll'"
type=
"text"
nz-input
[(
ngModel
)]="
item
.
title
"
(
blur
)="
save
()"
>
</app-audio-recorder>
<div
*
ngIf=
"item.tipType == 'page'"
>
</div>
<div
*
ngFor=
"let page of item.tipPage; let m = index"
style=
"margin-bottom: 5px; "
>
<div
style=
"margin: 5px"
>
<div
style=
"display: flex;"
>
<span>
{{ item.npcAudioEndName}}
</span>
<div
style=
"font-size: 20px;line-height:32px"
>
页{{m+1}}
</div>
</div>
<input
style=
"width:700px;margin-left: 10px;"
type=
"text"
nz-input
[(
ngModel
)]="
page
.
title
"
</div>
(
blur
)="
save
()"
>
</div>
<div
style=
"margin-left: 20px;"
>
<!-- 题目区 -->
<app-audio-recorder
[
audioUrl
]="
page
.
audio
"
<div
style=
" margin: 20px;width: 1000px;"
>
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio
',
page
)"
>
<div
*
ngFor=
"let question of item.questions; let i = index"
>
<div
style=
"display: flex;margin-top: 20px;"
>
<div
class=
"border-solid"
style=
"min-width: 1000px;"
>
<div
class=
"word-type-title"
>
题目{{i+1}}
</div>
<div
class=
"option-audio"
>
<div
class=
"word-input-title"
>
题目音频:
</div>
<div
style=
"display: flex"
>
<div>
<app-audio-recorder
[
audioUrl
]="
question
.
audio
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio
',
question
,'
audioName
')"
>
</app-audio-recorder>
</app-audio-recorder>
</div>
</div>
<div
style=
"margin: 5px"
>
<button
class=
"btn-red"
style=
"width: 100px; height: 32px;margin-left: 20px;"
nz-button
nzType=
"default"
<span>
nzDanger
(
click
)="
removePage
(
m
)"
>
删除
</button>
{{ question.audioName}}
</span>
</div>
</div>
</div>
</div>
</div>
<button
class=
"btn-blue"
style=
"width: 150px; height: 32px;"
nz-button
nzType=
"default"
nzDanger
<div
*
ngFor=
"let option of question.options; let m = index"
>
(
click
)="
addPage
()"
>
+增加提示内容
</button>
<div
style=
"display: flex;margin-top: 20px;"
>
<div
class=
"border-dashed"
style=
"min-width: 700px;"
>
<div
style=
"margin-top: 20px;"
>
<div
class=
"word-type-option-title"
>
选项类型:
</div>
<div
style=
"margin-top: 5px;"
>
<nz-radio-group
[(
ngModel
)]="
option
.
type
"
(
ngModelChange
)="
save
()"
>
<label
nz-radio
nzValue=
"img"
>
<span
[
style
]="{
color:option
.
type=
='img'
?
'#
169BD5
'
:
'#
000
'}"
>
图片
</span>
</label>
<label
nz-radio
nzValue=
"text"
>
<span
[
style
]="{
color:option
.
type=
='text'
?
'#
169BD5
'
:
'#
000
'}"
>
文字
</span>
</label>
<label
nz-radio
nzValue=
"img_text"
>
<span
[
style
]="{
color:option
.
type=
='img_text'
?
'#
169BD5
'
:
'#
000
'}"
>
文字+图片
</span>
</label>
</nz-radio-group>
</div>
</div>
<div
style=
"margin-top: 20px;"
>
<div
class=
"word-type-option-title"
>
是否正确:
</div>
<div
style=
"margin-top: 5px;"
>
<nz-radio-group
[(
ngModel
)]="
option
.
isRight
"
(
ngModelChange
)="
save
()"
>
<label
nz-radio
nzValue=
"1"
>
<span
[
style
]="{
color:option
.
isRight=
='1'
?
'#
169BD5
'
:
'#
000
'}"
>
正确
</span>
</label>
<label
nz-radio
nzValue=
"0"
>
<span
[
style
]="{
color:option
.
isRight=
='0'
?
'#
169BD5
'
:
'#
000
'}"
>
错误
</span>
</label>
</nz-radio-group>
</div>
</div>
<div
style=
"margin-top: 25px;"
>
<div
class=
"option-img"
>
<div
*
ngIf=
"option.type=='img' || option.type =='img_text'"
style=
"width: 200px;"
>
<span
style=
"font-size: 20px;"
>
图片:
</span>
<app-upload-image-with-preview
[
picUrl
]="
option
.
image
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
image
',
option
)"
>
</app-upload-image-with-preview>
</div>
</div>
<div
class=
"option-text"
>
<div
*
ngIf=
"option.type=='text' || option.type =='img_text'"
style=
"width: 200px"
>
<span
style=
"font-size: 20px;"
>
文本
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
option
.
text
"
(
blur
)="
save
()"
>
</div>
</div>
<!-- <div class="option-audio">
<span style="font-size: 20px;">选项音频:</span>
<app-audio-recorder [audioUrl]="option.audio"
(audioUploaded)="onAssetUploadSuccess($event, 'questions', i, 'options', j, 'audio')">
</app-audio-recorder>
</div> -->
</div>
</div>
<div
style=
"margin-left: 10px;"
>
<button
class=
"btn-red"
nz-button
nzType=
"default"
nzDanger
(
click
)="
removeOption
(
i
,
m
)"
>
删除选项
</button>
</div>
</div>
</div>
<button
*
ngIf=
"question.options.length < 4"
class=
"btn-blue"
style=
"margin-top: 10px;"
nz-button
nzType=
"default"
nzDanger
(
click
)="
addOption
(
i
)"
>
增加选项
</button>
</div>
</div>
</div>
</div>
<!-- <span style="font-size: 20px;">提示音频: </span>
<div style="display:flex ;">
<div>
<app-audio-recorder [audioUrl]="item.audio" (audioUploaded)="onAudioUploadSuccess($event, 'audio')">
</app-audio-recorder>
</div>
<div style="margin: 5px">
<span>{{ item.audioName}}</span>
</div>
</div> -->
</div>
</div>
<div
style=
"margin-top: 20px;"
>
<button
class=
"btn-blue"
style=
"width: 1000px; height: 50px;"
nz-button
nzType=
"default"
nzDanger
(
click
)="
addQuestion
()"
>
+增加题目
</button>
<div>
<span
style=
"font-size: 20px;"
>
游戏背景:
</span>
<div
style=
"width:300px"
>
<app-upload-image-with-preview
[
picUrl
]="
item
.
image
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,'
image
',
item
)"
></app-upload-image-with-preview>
</div>
</div>
<div
style=
"display: flex; align-items: center; "
>
<h2>
题目分值:
</h2>
</div>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
questionScore
"
(
blur
)="
save
()"
>
<span
style=
"font-size: 20px;"
>
结束动画:
</span>
<app-upload-dragon-bone
style=
"width: 100%"
(
save
)="
onDragonBoneSave
($
event
,
item
)"
[
skeJsonData
]="
item
.
endImgAni
.
ske
"
[
texJsonData
]="
item
.
endImgAni
.
tex
"
[
texPngData
]="
item
.
endImgAni
.
png
"
>
</app-upload-dragon-bone>
<span
style=
"font-size: 20px;"
>
结束动画文本:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
endImgTitle
"
(
blur
)="
save
()"
>
<div
style=
"display: flex; align-items: center; "
>
<h2>
跳转页面:
</h2>
</div>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
jumpIdx
"
(
blur
)="
save
()"
>
</div>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<span
style=
"font-size: 20px;"
>
锦囊:
</span>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
tips
"
(
blur
)="
save
()"
>
</div>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<h2>
正文(空格分隔选词,回车换行):
</h2>
<textarea
rows=
"4"
nz-input
[(
ngModel
)]="
item
.
contentMain
"
(
blur
)="
changeMain
()"
></textarea>
</div>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<h2>
点击文本设置空格:
</h2>
<span
*
ngFor=
"let cont of item.contentArr; let i = index"
style=
"margin-bottom: 5px; "
>
<span
*
ngIf=
"cont.block"
class=
"option-title-line"
(
click
)="
onBlock
(
cont
,
false
)"
[
innerHtml
]="
cont
.
text
"
></span>
<span
*
ngIf=
"!cont.block"
class=
"option-title"
(
click
)="
onBlock
(
cont
,
true
)"
[
innerHtml
]="
cont
.
text
"
></span>
</span>
</div>
<div
class=
"border-dashed"
style=
"margin: 20px;width: 1300px;"
>
<h2>
空格是否校验对错:
</h2>
<div
*
ngFor=
"let cont of item.contentArr; let i = index"
style=
"margin-bottom: 5px; "
>
<div
*
ngIf=
"cont.block"
class=
"border-solid"
style=
"display: flex;"
>
<span
style=
"margin-right: 20px;font-size: 18px;font-weight: bold;"
>
{{cont.text}}
</span>
<nz-radio-group
[
ngModel
]="
cont
.
check
"
(
ngModelChange
)="
customRadioChange
($
event
,
cont
,'
check
')"
style=
"font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;"
>
<label
nz-radio
nzValue=
"1"
>
检查对错
</label>
<label
nz-radio
nzValue=
"0"
>
无对错
</label>
</nz-radio-group>
</div>
</div>
</div>
</div>
</div>
<nz-modal
[(
nzVisible
)]="
isVisible
"
[
nzTitle
]="
null
"
[
nzContent
]="
modalContent
"
[
nzFooter
]="
modalFooter
"
<nz-modal
[(
nzVisible
)]="
isVisible
"
[
nzTitle
]="
null
"
[
nzContent
]="
modalContent
"
[
nzFooter
]="
modalFooter
"
(
nzOnCancel
)="
handleCancel
()"
>
(
nzOnCancel
)="
handleCancel
()"
>
<ng-template
#
modalContent
>
<ng-template
#
modalContent
>
<p>
{{deleteTitle}}
</p>
<p>
{{deleteTitle}}
</p>
</ng-template>
</ng-template>
<ng-template
#
modalFooter
>
<ng-template
#
modalFooter
>
<button
nz-button
nzType=
"default"
(
click
)="
handleCancel
()"
>
取消
</button>
<button
nz-button
nzType=
"default"
(
click
)="
handleCancel
()"
>
取消
</button>
<button
nz-button
nzType=
"primary"
(
click
)="
handleOk
()"
>
确定
</button>
<button
nz-button
nzType=
"primary"
(
click
)="
handleOk
()"
>
确定
</button>
</ng-template>
</ng-template>
</nz-modal>
</nz-modal>
</div>
</div>
\ No newline at end of file
\ No newline at end of file
form/src/app/form/form.component.ts
View file @
a50b292e
import
{
Component
,
EventEmitter
,
Input
,
OnDestroy
,
OnChanges
,
OnInit
,
Output
,
ApplicationRef
,
ChangeDetectorRef
}
from
'
@angular/core
'
;
import
{
Component
,
OnDestroy
,
OnChanges
,
OnInit
,
ApplicationRef
,
ChangeDetectorRef
,
ViewChild
,
ElementRef
}
from
'
@angular/core
'
;
import
{
JsonPipe
}
from
'
@angular/common
'
;
import
{
ComponentBase
}
from
'
./ComponentBase
'
;
import
{
ComponentBase
}
from
'
./ComponentBase
'
;
import
{
MetaFormCreator
}
from
'
./mataFormCreator
'
;
import
{
NzMessageService
}
from
'
ng-zorro-antd
'
;
let
replaceAll
=
function
(
str
,
s1
,
s2
)
{
return
str
.
replace
(
new
RegExp
(
s1
,
"
gm
"
),
s2
);
}
@
Component
({
@
Component
({
selector
:
'
app-form
'
,
selector
:
'
app-form
'
,
templateUrl
:
'
./form.component.html
'
,
templateUrl
:
'
./form.component.html
'
,
styleUrls
:
[
'
./form.component.css
'
]
styleUrls
:
[
'
./form.component.css
'
]
})
})
export
class
FormComponent
extends
ComponentBase
implements
OnInit
,
OnChanges
,
OnDestroy
{
export
class
FormComponent
extends
ComponentBase
implements
OnInit
,
OnChanges
,
OnDestroy
{
// 储存数据用
// 储存数据用
saveKey
=
"
dg10_ty
"
;
saveKey
=
"
wood_input
"
;
// 储存对象
item
:
any
=
{
// 1.猫动画可替换。
title
:
'
听音选择
'
,
// 2.文本内容可替换。//字体随内容缩小。
// 3.语音替换。
// 4.背景可替换
// 5.3~10选项内容。
// 6.配置对应的坐标。
customTypeGroupArr
=
[
// {
// name: '发音动画',
// rect: true,
// animaSmall: true,
// audio: true,
// },
// {
// name: '发音图片',
// pic: true,
// audio: true,
// },
// {
// name: '发音区块',
// rect: true,
// audio: true,
// },
// {
// name: '变化文本',
// action: {
// type: 'text',
// option: [
// ['fontColor', '#000000'],
// ['fontSize', '100'],
// ['opacity', '0', '100']
// ]
// },
// },
// {
// name: '变化图片',
// action: {
// type: 'pic',
// option: [
// // ['scale', '1'],
// ['opacity', '0', '100']
// ]
// },
// },
// {
// name: '变化动画',
// action: {
// type: 'anima',
// option: [
// // ['scale', '1'],
// ['opacity', '0', '100']
// ]
// },
// },
{
name
:
'
选项图片
'
,
drag
:
true
,
pic
:
true
,
// audio: true,
},
// {
// name: '选项文本',
// drag: true,
// audio: true,
// action: {
// type: 'text',
// option: [
// ['fontColor', '#000000'],
// ['fontSize', '100'],
// ]
// },
// },
// {
// name: '拖拽结束区',
// rect: true,
// }
]
item
=
{
imgAni
:
{
ske
:
{},
tex
:
{},
png
:
{}
},
tipSwitch
:
1
,
//提示功能开关
tipType
:
"
page
"
,
tipBg
:
''
,
tipPage
:
[{
title
:
''
,
audio
:
''
}],
title
:
""
,
audio
:
""
,
audioName
:
""
,
image
:
''
,
jumpIdx
:
''
,
endImgAni
:
{
ske
:
{},
tex
:
{},
png
:
{}
},
endImgTitle
:
""
,
points
:
""
,
tips
:
''
,
questionScore
:
0
,
//分数
questions
:
[],
questions
:
[],
npcAudioText
:
""
,
questionText
:
""
,
npcAudio
:
""
,
npcAudioName
:
""
,
contentMain
:
""
,
npcAudioEnd
:
""
,
contentArr
:
[],
npcAudioEndName
:
""
,
};
};
constructor
(
public
nzMessageService
:
NzMessageService
,
public
appRef
:
ApplicationRef
,
public
changeDetectorRef
:
ChangeDetectorRef
)
{
super
(
appRef
,
changeDetectorRef
);
}
isVisible
=
false
;
isVisible
=
false
;
deleteTitle
=
"
是否删除题目
"
;
deleteTitle
=
"
是否删除题目
"
;
deleteCallback
=
function
()
{
};
deleteCallback
=
function
()
{
};
...
@@ -38,57 +154,119 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
...
@@ -38,57 +154,119 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this
.
deleteCallback
&&
this
.
deleteCallback
();
this
.
deleteCallback
&&
this
.
deleteCallback
();
this
.
handleCancel
();
this
.
handleCancel
();
}
}
init
():
void
{
console
.
log
(
new
MetaFormCreator
().
create
());
addQuestion
()
{
if
(
this
.
item
.
questions
.
length
==
0
)
{
this
.
item
.
questions
.
push
({
this
.
addquestion
();
audio
:
''
,
}
time
:
null
,
}
duration
:
""
,
audioName
:
""
,
removeoption
(
i
,
j
)
{
options
:
[]
this
.
openDelete
(
"
确定删除选项?
"
,
()
=>
{
this
.
item
.
questions
[
i
].
options
.
splice
(
j
,
1
);
this
.
save
();
})
}
copyoption
(
i
,
j
)
{
let
data
=
this
.
item
.
questions
[
i
].
options
[
j
];
this
.
item
.
questions
[
i
].
options
.
push
(
JSON
.
parse
(
JSON
.
stringify
(
data
)));
this
.
save
();
}
addoption
(
i
)
{
this
.
item
.
questions
[
i
].
options
.
push
({
type
:
"
img
"
,
image
:
""
,
audio
:
""
,
text
:
""
,
time
:
""
,
right
:
false
});
});
this
.
addOption
(
this
.
item
.
questions
.
length
-
1
)
this
.
addOption
(
this
.
item
.
questions
.
length
-
1
)
this
.
save
();
this
.
save
();
}
}
removeQuestion
(
idx
)
{
removePage
(
idx
)
{
this
.
item
.
tipPage
.
splice
(
idx
,
1
);
this
.
save
();
}
addPage
()
{
this
.
item
.
tipPage
.
push
({
title
:
""
,
audio
:
""
})
this
.
save
();
}
removequestion
(
idx
)
{
this
.
openDelete
(
"
确定删除题目?
"
,
()
=>
{
this
.
openDelete
(
"
确定删除题目?
"
,
()
=>
{
this
.
item
.
questions
.
splice
(
idx
,
1
);
this
.
item
.
questions
.
splice
(
idx
,
1
);
this
.
save
();
this
.
save
();
})
})
}
}
copyQuestion
(
idx
)
{
let
data
=
this
.
item
.
questions
[
idx
]
addquestion
()
{
this
.
item
.
questions
.
push
(
JSON
.
parse
(
JSON
.
stringify
(
data
)));
this
.
item
.
questions
.
push
({
options
:
[],
type
:
"
img
"
});
while
(
this
.
item
.
questions
[
0
].
options
.
length
<
3
)
{
this
.
addoption
(
0
);
}
this
.
save
();
this
.
save
();
}
}
deleteBgAudio
()
{
ngChange
(
i
,
j
)
{
this
.
item
.
bgAudio
=
""
;
this
.
item
.
audioBgName
=
""
;
this
.
save
();
this
.
save
();
}
}
addOption
(
idx
)
{
if
(
this
.
item
.
questions
[
idx
].
options
.
length
>
4
)
return
;
saveHotZone
(
group
,
e
)
{
this
.
item
.
questions
[
idx
].
options
.
push
({
console
.
log
(
'
e:
'
,
e
);
type
:
'
img
'
,
const
{
bgItem
,
hotZoneItemArr
}
=
e
;
audio
:
''
,
image
:
''
,
group
.
bgItem
=
bgItem
;
isRight
:
"
0
"
,
group
.
hotZoneItemArr
=
hotZoneItemArr
;
});
this
.
nzMessageService
.
success
(
'
保存成功
'
);
this
.
save
();
this
.
save
();
}
}
removeOption
(
idx
,
n
)
{
changeMain
()
{
this
.
openDelete
(
"
确定删除选项?
"
,
()
=>
{
//输出的数据可以识别到\n的换行符
this
.
item
.
questions
[
idx
].
options
.
splice
(
n
,
1
);
let
arr
=
this
.
item
.
contentMain
.
split
(
"
"
);
if
(
this
.
item
.
questions
[
idx
].
options
.
length
<
2
)
{
let
oldArr
=
this
.
item
.
contentArr
.
concat
();
this
.
addOption
(
idx
)
let
contetArr
=
arr
.
map
(
ar
=>
{
let
obj
=
{
text
:
replaceAll
(
`
${
ar
}
`
,
"
\n
"
,
"
<br/>
"
),
block
:
false
,
check
:
1
,
}
}
this
.
save
();
for
(
let
i
=
0
;
i
<
oldArr
.
length
;
i
++
)
{
if
(
obj
.
text
==
oldArr
[
i
].
text
)
{
obj
.
block
=
oldArr
[
i
].
block
;
obj
.
check
=
oldArr
[
i
].
check
;
oldArr
.
splice
(
i
,
1
);
break
;
}
}
return
obj
;
})
})
this
.
item
.
contentArr
=
contetArr
;
console
.
log
(
contetArr
)
this
.
save
();
}
}
ngChange
()
{
onBlock
(
item
,
vis
)
{
item
.
block
=
vis
;
this
.
save
();
this
.
save
();
}
}
customRadioChange
(
e
,
item
,
key
)
{
item
[
key
]
=
e
;
this
.
save
();
}
onDragonBoneSave
(
e
,
item
)
{
console
.
log
(
e
);
this
.
save
();
}
}
}
\ No newline at end of file
form/src/app/form/mataFormCreator.ts
0 → 100644
View file @
a50b292e
export
class
MetaFormCreator
{
constructor
()
{
}
create
()
{
const
data
=
{
onlineFlg
:
false
,
// 联机flg true联机版 false单机版
title
:
"
标题文本
"
,
// 标题文本
questionText
:
"
题目说明题目说明题目说明题目说明题目说明题目说明题目说明题目说明题目说明题目说明
"
,
// 题目说明
questionTextAudio
:
"
http://staging-teach.cdn.ireadabc.com/b1019dcdb1f089ba9a65b71a1f52f67a.mp3
"
,
// 题目说明的语音
questions
:
[
// 题目,数组
{
questionAudio
:
"
http://staging-teach.cdn.ireadabc.com/727a5af2f7ed99edb4a49d1126ecc9ca.mp3
"
,
// 题目音频
duration
:
120
,
// 游戏倒计时(秒)
options
:
[
// 选项
{
type
:
"
img
"
,
// 选项类型 img图片 txt文本
image
:
"
http://staging-teach.cdn.ireadabc.com/03531e7ca2278b291da7d27bc1d60868.png
"
,
// 图片地址
audio
:
"
http://staging-teach.cdn.ireadabc.com/727a5af2f7ed99edb4a49d1126ecc9ca.mp3
"
,
// 选项音频
text
:
""
,
// 选项类型为图片时,此选项没啥用
right
:
true
// 这个选项是否是正确的
},
{
type
:
"
text
"
,
// 选项类型 img图片 txt文本
image
:
""
,
// 选项类型为文本时,此选项没啥用
text
:
"
asasdf
"
,
// 选项文本
audio
:
"
http://staging-teach.cdn.ireadabc.com/727a5af2f7ed99edb4a49d1126ecc9ca.mp3
"
,
right
:
true
},
{
image
:
"
http://staging-teach.cdn.ireadabc.com/35bfd1d1342e1f2ea3db408afd072343.jpg
"
,
audio
:
""
,
type
:
"
img
"
,
text
:
""
,
right
:
false
},
{
image
:
""
,
audio
:
""
,
type
:
"
text
"
,
text
:
"
oliolioliooo
"
,
right
:
false
}
]
},
{
questionAudio
:
"
http://staging-teach.cdn.ireadabc.com/727a5af2f7ed99edb4a49d1126ecc9ca.mp3
"
,
duration
:
120
,
// 游戏倒计时(秒)
options
:
[
{
image
:
"
http://staging-teach.cdn.ireadabc.com/03531e7ca2278b291da7d27bc1d60868.png
"
,
audio
:
"
http://staging-teach.cdn.ireadabc.com/727a5af2f7ed99edb4a49d1126ecc9ca.mp3
"
,
type
:
"
img
"
,
text
:
""
,
right
:
true
},
{
image
:
""
,
audio
:
"
http://staging-teach.cdn.ireadabc.com/727a5af2f7ed99edb4a49d1126ecc9ca.mp3
"
,
type
:
"
text
"
,
text
:
"
olio
"
,
right
:
true
},
{
image
:
"
http://staging-teach.cdn.ireadabc.com/35bfd1d1342e1f2ea3db408afd072343.jpg
"
,
audio
:
""
,
type
:
"
img
"
,
text
:
""
,
right
:
false
},
{
image
:
""
,
audio
:
""
,
type
:
"
text
"
,
text
:
"
oliolioliooo
"
,
right
:
false
}
]
}
]
};
return
this
.
createHtml
(
data
,
'
item
'
,
[]);
}
createHtml
(
data
:
any
,
itemKey
:
string
,
idxList
=
[])
{
let
result
=
''
;
for
(
const
key
in
data
)
{
if
(
typeof
data
[
key
]
==
'
boolean
'
)
{
result
+=
this
.
createBooleanHtml
(
itemKey
,
key
);
}
if
(
typeof
data
[
key
]
==
'
number
'
)
{
result
+=
this
.
createNumberHtml
(
itemKey
,
key
);
}
if
(
typeof
data
[
key
]
===
'
string
'
)
{
if
(
key
.
includes
(
'
img
'
)
||
key
.
includes
(
'
image
'
))
{
result
+=
this
.
createImageHtml
(
itemKey
,
key
);
}
else
if
(
key
.
includes
(
'
Audio
'
)
||
key
.
includes
(
'
audio
'
))
{
result
+=
this
.
createAudioHtml
(
itemKey
,
key
);
}
else
{
result
+=
this
.
createTextHtml
(
itemKey
,
key
);
}
}
if
(
typeof
data
[
key
]
==
'
object
'
)
{
if
(
data
[
key
]
instanceof
Array
)
{
result
+=
this
.
createArrayHtml
(
itemKey
,
key
,
data
[
key
],
idxList
);
}
}
}
return
result
;
}
createArrayHtml
(
itemName
:
string
,
key
:
string
,
data
:
any
,
idxList
)
{
let
itemKey
=
key
;
if
(
key
[
key
.
length
-
1
]
==
'
s
'
)
{
itemKey
=
key
.
substring
(
0
,
key
.
length
-
1
);
}
const
idxStrList
=
[
'
i
'
,
'
j
'
,
'
k
'
,
'
l
'
];
let
idxStr
=
''
;
for
(
let
i
=
0
;
i
<
idxStrList
.
length
;
i
++
)
{
const
str
=
idxStrList
[
i
];
if
(
!
idxList
.
includes
(
str
))
{
idxStr
=
str
;
break
;
}
}
const
subresult
=
this
.
createHtml
(
data
[
0
],
`
${
itemName
}
.
${
key
}
[
${
idxStr
}
]`
,
[...
idxList
,
idxStr
]);
return
`
<div class="border" style="width: 800px;">
<div *ngFor="let
${
itemKey
}
of
${
itemName
}
.
${
key
}
; let
${
idxStr
}
= index">
<div class="border" style="width: 700px;">
${
subresult
}
<button style="width: 650px; height: 30px; color: red;" (click)="remove
${
itemKey
}
(
${
idxStr
}
)">删除</button>
</div>
</div>
<div class="border" style="width: 700px;">
<button style="width: 650px; height: 100px;" (click)="add
${
itemKey
}
()">增加</button>
</div>
</div>`
}
createNumberHtml
(
itemName
:
string
,
key
:
string
)
{
let
dot
=
'
.
'
;
if
(
itemName
==
''
)
{
dot
=
''
;
}
return
`
<span>数字: </span>
<input type="number" nz-input [(ngModel)]="
${
itemName
}${
dot
}${
key
}
" (blur)="save()">`
}
createTextHtml
(
itemName
:
string
,
key
:
string
)
{
let
dot
=
'
.
'
;
if
(
itemName
==
''
)
{
dot
=
''
;
}
return
`
<span>文本: </span>
<input type="text" nz-input [(ngModel)]="
${
itemName
}${
dot
}${
key
}
" (blur)="save()">`
}
createAudioHtml
(
itemName
:
string
,
key
:
string
)
{
let
dot
=
'
.
'
;
if
(
itemName
==
''
)
{
dot
=
''
;
}
let
keyList
=
''
;
itemName
.
split
(
'
.
'
).
forEach
(
key
=>
{
keyList
+=
`'
${
key
}
',`
;
});
return
`
<span>音频: </span>
<app-audio-recorder
[audioUrl]="
${
itemName
}${
dot
}${
key
}
"
(audioUploaded)="onAssetUploadSuccess($event,
${
keyList
}
'
${
key
}
')"
></app-audio-recorder>`
}
createImageHtml
(
itemName
:
string
,
key
:
string
)
{
let
dot
=
'
.
'
;
if
(
itemName
==
''
)
{
dot
=
''
;
}
let
keyList
=
''
;
itemName
.
split
(
'
.
'
).
forEach
(
key
=>
{
keyList
+=
`'
${
key
}
',`
;
});
return
`<span>图片: </span>
<app-upload-image-with-preview
[picUrl]="
${
itemName
}${
dot
}${
key
}
"
(imageUploaded)="onAssetUploadSuccess($event,
${
keyList
}
'
${
key
}
')">
</app-upload-image-with-preview>`
;
}
createBooleanHtml
(
itemName
:
string
,
key
:
string
)
{
let
dot
=
'
.
'
;
if
(
itemName
==
''
)
{
dot
=
''
;
}
return
`
<span style="font-size: 20px;">答案:</span>
<div *ngIf="
${
itemName
}${
dot
}${
key
}
==true">
<button class="button-right">正确</button>
<button class="button-disable" (click)="
${
itemName
}${
dot
}${
key
}
= false;save();">错误</button>
</div>
<div *ngIf="
${
itemName
}${
dot
}${
key
}
==false">
<button class="button-disable" (click)="
${
itemName
}${
dot
}${
key
}
= true;save();">正确</button>
<button class="button-wrong">错误</button>
</div>
<br>`
}
}
\ No newline at end of file
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