Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
P
pptist
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
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
viitto
pptist
Commits
fa948abc
Commit
fa948abc
authored
Jan 04, 2024
by
zhengke
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
广告尺寸调整
parent
9d001782
Hide whitespace changes
Inline
Side-by-side
Showing
26 changed files
with
123 additions
and
82 deletions
+123
-82
canvas.ts
src/configs/canvas.ts
+18
-2
useAlignElementToCanvas.ts
src/hooks/useAlignElementToCanvas.ts
+2
-2
useCreateElement.ts
src/hooks/useCreateElement.ts
+14
-14
useExport.ts
src/hooks/useExport.ts
+2
-2
useImport.ts
src/hooks/useImport.ts
+1
-1
slides.ts
src/types/slides.ts
+0
-1
GridLines.vue
src/views/Editor/Canvas/GridLines.vue
+2
-2
useDragElement.ts
src/views/Editor/Canvas/hooks/useDragElement.ts
+2
-2
useScaleElement.ts
src/views/Editor/Canvas/hooks/useScaleElement.ts
+2
-2
useViewportSize.ts
src/views/Editor/Canvas/hooks/useViewportSize.ts
+4
-4
index.vue
src/views/Editor/Canvas/index.vue
+11
-1
UploadPicture.vue
src/views/Editor/CanvasTool/UploadPicture.vue
+3
-3
index.vue
src/views/Editor/EditorHeader/index.vue
+1
-3
ExportImage.vue
src/views/Editor/ExportDialog/ExportImage.vue
+1
-1
ExportPDF.vue
src/views/Editor/ExportDialog/ExportPDF.vue
+4
-4
index.vue
src/views/Editor/Thumbnails/index.vue
+33
-15
ElementTemplateData.vue
src/views/Editor/Toolbar/ElementTemplateData.vue
+1
-1
ElementDataMapping.vue
src/views/Editor/Toolbar/common/ElementDataMapping.vue
+3
-3
index.vue
src/views/Editor/index.vue
+1
-1
SlideToolbar.vue
src/views/Mobile/MobileEditor/SlideToolbar.vue
+4
-4
index.vue
src/views/Mobile/MobileEditor/index.vue
+4
-4
ScreenSlide.vue
src/views/Screen/ScreenSlide.vue
+2
-2
ScreenSlideList.vue
src/views/Screen/ScreenSlideList.vue
+1
-1
index.vue
src/views/components/ThumbnailSlide/index.vue
+3
-3
ScreenAudioElement.vue
...ws/components/element/AudioElement/ScreenAudioElement.vue
+2
-2
index.vue
src/views/components/element/AudioElement/index.vue
+2
-2
No files found.
src/configs/canvas.ts
View file @
fa948abc
export
const
VIEWPORT_SIZE
=
1754
// export const VIEWPORT_SIZE.Value = 1754 //竖版
export
const
VIEWPORT_VER_SIZE
=
1240
// export const VIEWPORT_VER_SIZE.Value = 1240 //横版
\ No newline at end of file
class
VIEWPORT_SIZE_Manager
{
private
_value
=
0
constructor
(
val
:
number
)
{
this
.
_value
=
val
;
}
get
Value
(){
return
this
.
_value
}
set
Value
(
val
:
number
){
this
.
_value
=
val
}
}
export
const
VIEWPORT_SIZE
=
new
VIEWPORT_SIZE_Manager
(
1754
)
export
const
VIEWPORT_VER_SIZE
=
new
VIEWPORT_SIZE_Manager
(
1240
)
\ No newline at end of file
src/hooks/useAlignElementToCanvas.ts
View file @
fa948abc
...
@@ -18,8 +18,8 @@ export default () => {
...
@@ -18,8 +18,8 @@ export default () => {
* @param command 对齐方向
* @param command 对齐方向
*/
*/
const
alignElementToCanvas
=
(
command
:
ElementAlignCommands
)
=>
{
const
alignElementToCanvas
=
(
command
:
ElementAlignCommands
)
=>
{
const
viewportWidth
=
VIEWPORT_SIZE
const
viewportWidth
=
VIEWPORT_SIZE
.
Value
const
viewportHeight
=
VIEWPORT_SIZE
*
viewportRatio
.
value
const
viewportHeight
=
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
const
{
minX
,
maxX
,
minY
,
maxY
}
=
getElementListRange
(
activeElementList
.
value
)
const
{
minX
,
maxX
,
minY
,
maxY
}
=
getElementListRange
(
activeElementList
.
value
)
const
newElementList
:
PPTElement
[]
=
JSON
.
parse
(
JSON
.
stringify
(
currentSlide
.
value
.
elements
))
const
newElementList
:
PPTElement
[]
=
JSON
.
parse
(
JSON
.
stringify
(
currentSlide
.
value
.
elements
))
...
...
src/hooks/useCreateElement.ts
View file @
fa948abc
...
@@ -55,12 +55,12 @@ export default () => {
...
@@ -55,12 +55,12 @@ export default () => {
getImageSize
(
src
).
then
(({
width
,
height
})
=>
{
getImageSize
(
src
).
then
(({
width
,
height
})
=>
{
const
scale
=
height
/
width
const
scale
=
height
/
width
if
(
scale
<
viewportRatio
.
value
&&
width
>
VIEWPORT_SIZE
)
{
if
(
scale
<
viewportRatio
.
value
&&
width
>
VIEWPORT_SIZE
.
Value
)
{
width
=
VIEWPORT_SIZE
width
=
VIEWPORT_SIZE
.
Value
height
=
width
*
scale
height
=
width
*
scale
}
}
else
if
(
height
>
VIEWPORT_SIZE
*
viewportRatio
.
value
)
{
else
if
(
height
>
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
)
{
height
=
VIEWPORT_SIZE
*
viewportRatio
.
value
height
=
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
width
=
height
/
scale
width
=
height
/
scale
}
}
...
@@ -70,8 +70,8 @@ export default () => {
...
@@ -70,8 +70,8 @@ export default () => {
src
,
src
,
width
,
width
,
height
,
height
,
left
:
(
VIEWPORT_SIZE
-
width
)
/
2
,
left
:
(
VIEWPORT_SIZE
.
Value
-
width
)
/
2
,
top
:
(
VIEWPORT_SIZE
*
viewportRatio
.
value
-
height
)
/
2
,
top
:
(
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
-
height
)
/
2
,
fixedRatio
:
true
,
fixedRatio
:
true
,
rotate
:
0
,
rotate
:
0
,
})
})
...
@@ -154,8 +154,8 @@ export default () => {
...
@@ -154,8 +154,8 @@ export default () => {
colWidths
,
colWidths
,
rotate
:
0
,
rotate
:
0
,
data
,
data
,
left
:
(
VIEWPORT_SIZE
-
width
)
/
2
,
left
:
(
VIEWPORT_SIZE
.
Value
-
width
)
/
2
,
top
:
(
VIEWPORT_SIZE
*
viewportRatio
.
value
-
height
)
/
2
,
top
:
(
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
-
height
)
/
2
,
outline
:
{
outline
:
{
width
:
2
,
width
:
2
,
style
:
'solid'
,
style
:
'solid'
,
...
@@ -280,8 +280,8 @@ export default () => {
...
@@ -280,8 +280,8 @@ export default () => {
width
:
data
.
w
,
width
:
data
.
w
,
height
:
data
.
h
,
height
:
data
.
h
,
rotate
:
0
,
rotate
:
0
,
left
:
(
VIEWPORT_SIZE
-
data
.
w
)
/
2
,
left
:
(
VIEWPORT_SIZE
.
Value
-
data
.
w
)
/
2
,
top
:
(
VIEWPORT_SIZE
*
viewportRatio
.
value
-
data
.
h
)
/
2
,
top
:
(
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
-
data
.
h
)
/
2
,
path
:
data
.
path
,
path
:
data
.
path
,
latex
:
data
.
latex
,
latex
:
data
.
latex
,
color
:
theme
.
value
.
fontColor
,
color
:
theme
.
value
.
fontColor
,
...
@@ -302,8 +302,8 @@ export default () => {
...
@@ -302,8 +302,8 @@ export default () => {
width
:
500
,
width
:
500
,
height
:
300
,
height
:
300
,
rotate
:
0
,
rotate
:
0
,
left
:
(
VIEWPORT_SIZE
-
500
)
/
2
,
left
:
(
VIEWPORT_SIZE
.
Value
-
500
)
/
2
,
top
:
(
VIEWPORT_SIZE
*
viewportRatio
.
value
-
300
)
/
2
,
top
:
(
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
-
300
)
/
2
,
src
,
src
,
autoplay
:
false
,
autoplay
:
false
,
})
})
...
@@ -320,8 +320,8 @@ export default () => {
...
@@ -320,8 +320,8 @@ export default () => {
width
:
50
,
width
:
50
,
height
:
50
,
height
:
50
,
rotate
:
0
,
rotate
:
0
,
left
:
(
VIEWPORT_SIZE
-
50
)
/
2
,
left
:
(
VIEWPORT_SIZE
.
Value
-
50
)
/
2
,
top
:
(
VIEWPORT_SIZE
*
viewportRatio
.
value
-
50
)
/
2
,
top
:
(
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
-
50
)
/
2
,
loop
:
false
,
loop
:
false
,
autoplay
:
false
,
autoplay
:
false
,
fixedRatio
:
true
,
fixedRatio
:
true
,
...
...
src/hooks/useExport.ts
View file @
fa948abc
...
@@ -40,7 +40,7 @@ export default () => {
...
@@ -40,7 +40,7 @@ export default () => {
setTimeout
(()
=>
{
setTimeout
(()
=>
{
const
config
:
ExportImageConfig
=
{
const
config
:
ExportImageConfig
=
{
quality
,
quality
,
width
:
(
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
),
width
:
(
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
),
}
}
if
(
ignoreWebfont
)
config
.
fontEmbedCSS
=
''
if
(
ignoreWebfont
)
config
.
fontEmbedCSS
=
''
...
@@ -67,7 +67,7 @@ export default () => {
...
@@ -67,7 +67,7 @@ export default () => {
setTimeout
(()
=>
{
setTimeout
(()
=>
{
const
config
:
ExportImageConfig
=
{
const
config
:
ExportImageConfig
=
{
quality
,
quality
,
width
:
(
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
),
width
:
(
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
),
}
}
if
(
ignoreWebfont
)
config
.
fontEmbedCSS
=
''
if
(
ignoreWebfont
)
config
.
fontEmbedCSS
=
''
...
...
src/hooks/useImport.ts
View file @
fa948abc
...
@@ -88,7 +88,7 @@ export default () => {
...
@@ -88,7 +88,7 @@ export default () => {
const
json
=
await
parse
(
e
.
target
!
.
result
as
ArrayBuffer
)
const
json
=
await
parse
(
e
.
target
!
.
result
as
ArrayBuffer
)
const
width
=
json
.
size
.
width
const
width
=
json
.
size
.
width
const
scale
=
VIEWPORT_SIZE
/
width
const
scale
=
VIEWPORT_SIZE
.
Value
/
width
const
slides
:
Slide
[]
=
[]
const
slides
:
Slide
[]
=
[]
for
(
const
item
of
json
.
slides
)
{
for
(
const
item
of
json
.
slides
)
{
...
...
src/types/slides.ts
View file @
fa948abc
...
@@ -704,7 +704,6 @@ export interface Slide {
...
@@ -704,7 +704,6 @@ export interface Slide {
turningMode
?:
TurningMode
turningMode
?:
TurningMode
pageType
:
number
,
pageType
:
number
,
isTripItems
?:
boolean
,
isTripItems
?:
boolean
,
templateType
?:
number
,
width
?:
number
,
width
?:
number
,
height
?:
number
,
height
?:
number
,
}
}
...
...
src/views/Editor/Canvas/GridLines.vue
View file @
fa948abc
...
@@ -35,8 +35,8 @@ const gridColor = computed(() => {
...
@@ -35,8 +35,8 @@ const gridColor = computed(() => {
// 网格路径
// 网格路径
const
path
=
computed
(()
=>
{
const
path
=
computed
(()
=>
{
const
maxX
=
VIEWPORT_SIZE
const
maxX
=
VIEWPORT_SIZE
.
Value
const
maxY
=
VIEWPORT_SIZE
*
viewportRatio
.
value
const
maxY
=
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
let
p
=
''
let
p
=
''
for
(
let
i
=
0
;
i
<=
Math
.
floor
(
maxY
/
gridLineSize
.
value
);
i
++
)
{
for
(
let
i
=
0
;
i
<=
Math
.
floor
(
maxY
/
gridLineSize
.
value
);
i
++
)
{
...
...
src/views/Editor/Canvas/hooks/useDragElement.ts
View file @
fa948abc
...
@@ -26,8 +26,8 @@ export default (
...
@@ -26,8 +26,8 @@ export default (
if
(
!
activeElementIdList
.
value
.
includes
(
element
.
id
))
return
if
(
!
activeElementIdList
.
value
.
includes
(
element
.
id
))
return
let
isMouseDown
=
true
let
isMouseDown
=
true
const
edgeWidth
=
VIEWPORT_SIZE
const
edgeWidth
=
VIEWPORT_SIZE
.
Value
const
edgeHeight
=
VIEWPORT_SIZE
*
viewportRatio
.
value
const
edgeHeight
=
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
const
sorptionRange
=
5
const
sorptionRange
=
5
...
...
src/views/Editor/Canvas/hooks/useScaleElement.ts
View file @
fa948abc
...
@@ -155,8 +155,8 @@ export default (
...
@@ -155,8 +155,8 @@ export default (
// 包括页面内除目标元素外的其他元素在画布中的各个可吸附对齐位置:上下左右四边
// 包括页面内除目标元素外的其他元素在画布中的各个可吸附对齐位置:上下左右四边
// 其中线条和被旋转过的元素不参与吸附对齐
// 其中线条和被旋转过的元素不参与吸附对齐
else
{
else
{
const
edgeWidth
=
VIEWPORT_SIZE
const
edgeWidth
=
VIEWPORT_SIZE
.
Value
const
edgeHeight
=
VIEWPORT_SIZE
*
viewportRatio
.
value
const
edgeHeight
=
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
const
isActiveGroupElement
=
element
.
id
===
activeGroupElementId
.
value
const
isActiveGroupElement
=
element
.
id
===
activeGroupElementId
.
value
for
(
const
el
of
elementList
.
value
)
{
for
(
const
el
of
elementList
.
value
)
{
...
...
src/views/Editor/Canvas/hooks/useViewportSize.ts
View file @
fa948abc
...
@@ -16,7 +16,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
...
@@ -16,7 +16,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
if
(
!
canvasRef
.
value
)
return
if
(
!
canvasRef
.
value
)
return
const
canvasWidth
=
canvasRef
.
value
.
clientWidth
const
canvasWidth
=
canvasRef
.
value
.
clientWidth
const
canvasHeight
=
canvasRef
.
value
.
clientHeight
const
canvasHeight
=
canvasRef
.
value
.
clientHeight
const
USED_VIEWPORT_SIZE
=
viewportRatio
.
value
<=
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
const
USED_VIEWPORT_SIZE
=
viewportRatio
.
value
<=
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
if
(
canvasHeight
/
canvasWidth
>
viewportRatio
.
value
)
{
if
(
canvasHeight
/
canvasWidth
>
viewportRatio
.
value
)
{
const
viewportActualWidth
=
canvasWidth
*
(
canvasPercentage
.
value
/
100
)
const
viewportActualWidth
=
canvasWidth
*
(
canvasPercentage
.
value
/
100
)
mainStore
.
setCanvasScale
(
viewportActualWidth
/
USED_VIEWPORT_SIZE
)
mainStore
.
setCanvasScale
(
viewportActualWidth
/
USED_VIEWPORT_SIZE
)
...
@@ -33,7 +33,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
...
@@ -33,7 +33,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
// 更新画布可视区域的位置
// 更新画布可视区域的位置
const
setViewportPosition
=
(
newValue
:
number
,
oldValue
:
number
)
=>
{
const
setViewportPosition
=
(
newValue
:
number
,
oldValue
:
number
)
=>
{
if
(
!
canvasRef
.
value
)
return
if
(
!
canvasRef
.
value
)
return
const
USED_VIEWPORT_SIZE
=
viewportRatio
.
value
<=
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
const
USED_VIEWPORT_SIZE
=
viewportRatio
.
value
<=
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
const
canvasWidth
=
canvasRef
.
value
.
clientWidth
const
canvasWidth
=
canvasRef
.
value
.
clientWidth
const
canvasHeight
=
canvasRef
.
value
.
clientHeight
const
canvasHeight
=
canvasRef
.
value
.
clientHeight
...
@@ -69,8 +69,8 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
...
@@ -69,8 +69,8 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
// 画布可视区域位置和大小的样式
// 画布可视区域位置和大小的样式
const
viewportStyles
=
computed
(()
=>
({
const
viewportStyles
=
computed
(()
=>
({
width
:
viewportRatio
.
value
<=
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
,
width
:
viewportRatio
.
value
<=
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
,
height
:
(
viewportRatio
.
value
<=
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
)
*
viewportRatio
.
value
,
height
:
(
viewportRatio
.
value
<=
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
)
*
viewportRatio
.
value
,
left
:
viewportLeft
.
value
,
left
:
viewportLeft
.
value
,
top
:
viewportTop
.
value
,
top
:
viewportTop
.
value
,
}))
}))
...
...
src/views/Editor/Canvas/index.vue
View file @
fa948abc
...
@@ -187,6 +187,16 @@ watch(handleElementId, () => {
...
@@ -187,6 +187,16 @@ watch(handleElementId, () => {
const
elementList
=
ref
<
PPTElement
[]
>
([])
const
elementList
=
ref
<
PPTElement
[]
>
([])
const
setLocalElementList
=
()
=>
{
const
setLocalElementList
=
()
=>
{
elementList
.
value
=
currentSlide
.
value
&&
currentSlide
.
value
.
elements
?
JSON
.
parse
(
JSON
.
stringify
(
currentSlide
.
value
.
elements
))
:
[]
elementList
.
value
=
currentSlide
.
value
&&
currentSlide
.
value
.
elements
?
JSON
.
parse
(
JSON
.
stringify
(
currentSlide
.
value
.
elements
))
:
[]
// if(currentSlide.value.width){
// console.log(currentSlide.value.width,'=====')
// VIEWPORT_SIZE.Value = currentSlide.value.height
// VIEWPORT_VER_SIZE.Value = currentSlide.value.width
// if(viewportRatio.value
<
1
)
VIEWPORT_SIZE
.
Value
=
currentSlide
.
value
.
height
// else VIEWPORT_VER_SIZE.Value = currentSlide.value.width
// }else {
// VIEWPORT_SIZE.Value = 1754
// VIEWPORT_VER_SIZE.Value = 1240
// }
}
}
watchEffect
(
setLocalElementList
)
watchEffect
(
setLocalElementList
)
...
@@ -243,7 +253,7 @@ const handleDblClick = (e: MouseEvent) => {
...
@@ -243,7 +253,7 @@ const handleDblClick = (e: MouseEvent) => {
const
viewportRect
=
viewportRef
.
value
.
getBoundingClientRect
()
const
viewportRect
=
viewportRef
.
value
.
getBoundingClientRect
()
const
left
=
(
e
.
pageX
-
viewportRect
.
x
)
/
canvasScale
.
value
const
left
=
(
e
.
pageX
-
viewportRect
.
x
)
/
canvasScale
.
value
const
top
=
(
e
.
pageY
-
viewportRect
.
y
)
/
canvasScale
.
value
const
top
=
(
e
.
pageY
-
viewportRect
.
y
)
/
canvasScale
.
value
const
width
=
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
const
width
=
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
if
(
left
<
width
&&
left
>=
0
){
if
(
left
<
width
&&
left
>=
0
){
createTextElement
({
createTextElement
({
left
,
left
,
...
...
src/views/Editor/CanvasTool/UploadPicture.vue
View file @
fa948abc
...
@@ -220,10 +220,10 @@ const setImgs = async () => {
...
@@ -220,10 +220,10 @@ const setImgs = async () => {
if
(
imgType
.
value
==
2
){
if
(
imgType
.
value
==
2
){
let
width
=
propsDatas
.
value
.
width
let
width
=
propsDatas
.
value
.
width
let
height
=
propsDatas
.
value
.
height
let
height
=
propsDatas
.
value
.
height
let
maxWidth
=
VIEWPORT_SIZE
,
maxHeight
=
VIEWPORT_VER_SIZE
,
viewportRatio
=
slidesStore
.
viewportRatio
let
maxWidth
=
VIEWPORT_SIZE
,
maxHeight
=
VIEWPORT_VER_SIZE
.
Value
,
viewportRatio
=
slidesStore
.
viewportRatio
if
(
viewportRatio
<
1
){
if
(
viewportRatio
<
1
){
maxWidth
=
VIEWPORT_VER_SIZE
maxWidth
=
VIEWPORT_VER_SIZE
.
Value
maxHeight
=
VIEWPORT_SIZE
maxHeight
=
VIEWPORT_SIZE
.
Value
}
}
if
(
activeName
.
value
==
'1'
||
activeName
.
value
==
'3'
||
activeName
.
value
==
'4'
){
if
(
activeName
.
value
==
'1'
||
activeName
.
value
==
'3'
||
activeName
.
value
==
'4'
){
...
...
src/views/Editor/EditorHeader/index.vue
View file @
fa948abc
...
@@ -469,9 +469,7 @@ const setTemplate = async (type) =>{
...
@@ -469,9 +469,7 @@ const setTemplate = async (type) =>{
x
.
pageType
=
0
x
.
pageType
=
0
x
.
width
=
queryObj
.
value
.
Width
x
.
width
=
queryObj
.
value
.
Width
x
.
height
=
queryObj
.
value
.
Height
x
.
height
=
queryObj
.
value
.
Height
}
else
x
.
TemplateType
=
1
}
delete
x
.
TemplateType
delete
x
.
templateType
x
.
elements
.
forEach
(
y
=>
{
x
.
elements
.
forEach
(
y
=>
{
delete
y
.
TemplateList
delete
y
.
TemplateList
})
})
...
...
src/views/Editor/ExportDialog/ExportImage.vue
View file @
fa948abc
...
@@ -7,7 +7,7 @@
...
@@ -7,7 +7,7 @@
v-for=
"slide in renderSlides"
v-for=
"slide in renderSlides"
:key=
"slide.id"
:key=
"slide.id"
:slide=
"slide"
:slide=
"slide"
:size=
"viewportRatio
<1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
"
:size=
"viewportRatio
<1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
"
/>
/>
</div>
</div>
</div>
</div>
...
...
src/views/Editor/ExportDialog/ExportPDF.vue
View file @
fa948abc
...
@@ -5,7 +5,7 @@
...
@@ -5,7 +5,7 @@
<ThumbnailSlide
<ThumbnailSlide
class=
"thumbnail"
class=
"thumbnail"
:slide=
"currentSlide"
:slide=
"currentSlide"
:size=
"viewportRatio
<1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
"
:size=
"viewportRatio
<1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
"
v-if=
"rangeType === 'current'"
v-if=
"rangeType === 'current'"
/>
/>
<template
v-else
>
<template
v-else
>
...
@@ -15,7 +15,7 @@
...
@@ -15,7 +15,7 @@
v-for="(slide, index) in newSlides"
v-for="(slide, index) in newSlides"
:key="slide.id"
:key="slide.id"
:slide="slide"
:slide="slide"
:size="viewportRatio
<1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
"
:size="viewportRatio
<1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
"
/>
/>
</
template
>
</
template
>
</div>
</div>
...
@@ -89,7 +89,7 @@ const padding = ref(false)
...
@@ -89,7 +89,7 @@ const padding = ref(false)
const
expPDF
=
()
=>
{
const
expPDF
=
()
=>
{
if
(
!
pdfThumbnailsRef
.
value
)
return
if
(
!
pdfThumbnailsRef
.
value
)
return
const
width
=
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
const
width
=
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
const
pageSize
=
{
const
pageSize
=
{
width
:
width
,
width
:
width
,
height
:
rangeType
.
value
===
'all'
?
width
*
viewportRatio
.
value
*
count
.
value
:
width
*
viewportRatio
.
value
,
height
:
rangeType
.
value
===
'all'
?
width
*
viewportRatio
.
value
*
count
.
value
:
width
*
viewportRatio
.
value
,
...
@@ -99,7 +99,7 @@ const expPDF = () => {
...
@@ -99,7 +99,7 @@ const expPDF = () => {
}
}
const
formatSliders
=
()
=>
{
const
formatSliders
=
()
=>
{
const
width
=
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
const
width
=
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
slides
.
value
.
forEach
((
x
)
=>
{
slides
.
value
.
forEach
((
x
)
=>
{
let
item
=
JSON
.
parse
(
JSON
.
stringify
(
x
))
let
item
=
JSON
.
parse
(
JSON
.
stringify
(
x
))
item
.
elements
=
item
.
elements
.
filter
(
y
=>
y
.
left
<
width
&&
(
y
.
left
+
y
.
width
)
>=
0
)
item
.
elements
=
item
.
elements
.
filter
(
y
=>
y
.
left
<
width
&&
(
y
.
left
+
y
.
width
)
>=
0
)
...
...
src/views/Editor/Thumbnails/index.vue
View file @
fa948abc
...
@@ -62,6 +62,7 @@ import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey'
...
@@ -62,6 +62,7 @@ import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey'
import
ConfigService
from
'@/services/ConfigService'
import
ConfigService
from
'@/services/ConfigService'
import
{
getHtmlPlainText
}
from
'@/utils/common'
import
{
getHtmlPlainText
}
from
'@/utils/common'
import
useEditor
from
'@/utils/Editor/index'
import
useEditor
from
'@/utils/Editor/index'
import
{
VIEWPORT_SIZE
,
VIEWPORT_VER_SIZE
}
from
'@/configs/canvas'
import
ThumbnailSlide
from
'@/views/components/ThumbnailSlide/index.vue'
import
ThumbnailSlide
from
'@/views/components/ThumbnailSlide/index.vue'
import
LayoutPool
from
'./LayoutPool.vue'
import
LayoutPool
from
'./LayoutPool.vue'
...
@@ -69,7 +70,6 @@ import Popover from '@/components/Popover.vue'
...
@@ -69,7 +70,6 @@ import Popover from '@/components/Popover.vue'
import
Draggable
from
'vuedraggable'
import
Draggable
from
'vuedraggable'
import
{
ElLoading
,
ElMessageBox
}
from
'element-plus'
import
{
ElLoading
,
ElMessageBox
}
from
'element-plus'
import
FileService
from
'@/services/FileService'
import
FileService
from
'@/services/FileService'
import
{
VIEWPORT_SIZE
,
VIEWPORT_VER_SIZE
}
from
'@/configs/canvas'
import
{
Slide
}
from
'@/types/slides'
import
{
Slide
}
from
'@/types/slides'
const
mainStore
=
useMainStore
()
const
mainStore
=
useMainStore
()
...
@@ -77,7 +77,7 @@ const slidesStore = useSlidesStore()
...
@@ -77,7 +77,7 @@ const slidesStore = useSlidesStore()
const
layoutsStore
=
useSlidesStore
()
const
layoutsStore
=
useSlidesStore
()
const
keyboardStore
=
useKeyboardStore
()
const
keyboardStore
=
useKeyboardStore
()
const
{
selectedSlidesIndex
:
_selectedSlidesIndex
,
thumbnailsFocus
}
=
storeToRefs
(
mainStore
)
const
{
selectedSlidesIndex
:
_selectedSlidesIndex
,
thumbnailsFocus
}
=
storeToRefs
(
mainStore
)
const
{
slides
,
currentSlide
,
slideIndex
,
layoutSlides
}
=
storeToRefs
(
slidesStore
)
const
{
slides
,
currentSlide
,
slideIndex
,
layoutSlides
,
viewportRatio
}
=
storeToRefs
(
slidesStore
)
const
{
ctrlKeyState
,
shiftKeyState
}
=
storeToRefs
(
keyboardStore
)
const
{
ctrlKeyState
,
shiftKeyState
}
=
storeToRefs
(
keyboardStore
)
const
{
SalesEditor
,
SalesBack
,
SalesTripId
}
=
storeToRefs
(
useSellTemplateStore
())
const
{
SalesEditor
,
SalesBack
,
SalesTripId
}
=
storeToRefs
(
useSellTemplateStore
())
...
@@ -199,10 +199,10 @@ const GetTripFiledData = async () =>{
...
@@ -199,10 +199,10 @@ const GetTripFiledData = async () =>{
})
})
isHideOverflowText
=
true
isHideOverflowText
=
true
}
catch
(
error
)
{}
}
catch
(
error
)
{}
let
maxWidth
=
VIEWPORT_SIZE
,
maxHeight
=
VIEWPORT_VER_SIZE
,
viewportRatio
=
slidesStore
.
viewportRatio
let
maxWidth
=
VIEWPORT_SIZE
,
maxHeight
=
VIEWPORT_VER_SIZE
.
Value
,
viewportRatios
=
slidesStore
.
viewportRatio
if
(
viewportRatio
<
1
){
if
(
viewportRatio
<
1
){
maxWidth
=
VIEWPORT_VER_SIZE
maxWidth
=
VIEWPORT_VER_SIZE
.
Value
maxHeight
=
VIEWPORT_SIZE
maxHeight
=
VIEWPORT_SIZE
.
Value
}
}
const
travel
=
dataRes
.
data
.
data
const
travel
=
dataRes
.
data
.
data
const
cursors
=
[]
as
Array
<
any
>
const
cursors
=
[]
as
Array
<
any
>
...
@@ -389,14 +389,14 @@ const GetTripTemplate = async () =>{
...
@@ -389,14 +389,14 @@ const GetTripTemplate = async () =>{
let
dataRes
=
await
ConfigService
.
GetTripTemplateSlide
(
queryMsg
);
let
dataRes
=
await
ConfigService
.
GetTripTemplateSlide
(
queryMsg
);
if
(
dataRes
.
data
.
resultCode
==
1
)
{
if
(
dataRes
.
data
.
resultCode
==
1
)
{
if
(
SalesBack
.
value
==
0
||
(
SalesBack
.
value
==
1
&&
searchData
.
value
.
TempId
)){
if
(
SalesBack
.
value
==
0
||
(
SalesBack
.
value
==
1
&&
searchData
.
value
.
TempId
)){
let
viewportRatio
=
1.414
let
viewportRatio
s
=
1.414
if
(
dataRes
.
data
.
data
.
TempType
==
1
)
viewportRatio
=
0.7069
if
(
dataRes
.
data
.
data
.
TempType
==
1
)
viewportRatio
s
=
0.7069
if
(
dataRes
.
data
.
data
.
TemplateType
==
2
&&
dataRes
.
data
.
data
.
Width
&&
dataRes
.
data
.
data
.
Height
)
{
if
(
dataRes
.
data
.
data
.
TemplateType
==
2
&&
dataRes
.
data
.
data
.
Width
&&
dataRes
.
data
.
data
.
Height
)
{
viewportRatio
=
dataRes
.
data
.
data
.
Height
/
dataRes
.
data
.
data
.
Width
viewportRatio
s
=
dataRes
.
data
.
data
.
Height
/
dataRes
.
data
.
data
.
Width
queryObj
.
value
.
Width
=
dataRes
.
data
.
data
.
Width
queryObj
.
value
.
Width
=
dataRes
.
data
.
data
.
Width
queryObj
.
value
.
Height
=
dataRes
.
data
.
data
.
Height
queryObj
.
value
.
Height
=
dataRes
.
data
.
data
.
Height
}
}
slidesStore
.
setViewportRatio
(
viewportRatio
)
slidesStore
.
setViewportRatio
(
viewportRatio
s
)
let
SlidesData
=
JSON
.
parse
(
dataRes
.
data
.
data
.
TempData
)
let
SlidesData
=
JSON
.
parse
(
dataRes
.
data
.
data
.
TempData
)
let
newSlides
=
[]
let
newSlides
=
[]
...
@@ -441,7 +441,15 @@ const GetTripTemplate = async () =>{
...
@@ -441,7 +441,15 @@ const GetTripTemplate = async () =>{
queryObj
.
value
.
TempType
=
dataRes
.
data
.
data
.
TempType
queryObj
.
value
.
TempType
=
dataRes
.
data
.
data
.
TempType
queryObj
.
value
.
TemplateType
=
dataRes
.
data
.
data
.
TemplateType
queryObj
.
value
.
TemplateType
=
dataRes
.
data
.
data
.
TemplateType
if
(
queryObj
.
value
.
Width
){
VIEWPORT_SIZE
.
Value
=
queryObj
.
value
.
Height
VIEWPORT_VER_SIZE
.
Value
=
queryObj
.
value
.
Width
// if(viewportRatio.value
<
1
)
VIEWPORT_SIZE
.
Value
=
queryObj
.
value
.
Height
// else VIEWPORT_VER_SIZE.Value = queryObj.value.Width
}
else
{
VIEWPORT_SIZE
.
Value
=
1754
VIEWPORT_VER_SIZE
.
Value
=
1240
}
if
(
ConfigId
.
value
==
0
)
return
if
(
ConfigId
.
value
==
0
)
return
if
(
TempId
.
value
&&!
searchData
.
value
.
TempId
)
await
GetTripConfig
()
if
(
TempId
.
value
&&!
searchData
.
value
.
TempId
)
await
GetTripConfig
()
...
@@ -470,14 +478,24 @@ const sellGetTripTemplate = async () =>{
...
@@ -470,14 +478,24 @@ const sellGetTripTemplate = async () =>{
else
if
(
TempId
.
value
)
queryObj
.
value
.
TempId
=
TempId
.
value
else
if
(
TempId
.
value
)
queryObj
.
value
.
TempId
=
TempId
.
value
let
dataObj
=
dataRes
.
data
.
data
let
dataObj
=
dataRes
.
data
.
data
let
viewportRatio
=
1.414
let
viewportRatio
s
=
1.414
if
(
dataRes
.
data
.
data
.
TempType
==
1
)
viewportRatio
=
0.7069
if
(
dataRes
.
data
.
data
.
TempType
==
1
)
viewportRatio
s
=
0.7069
if
(
dataRes
.
data
.
data
.
TemplateType
==
2
&&
dataRes
.
data
.
data
.
Width
&&
dataRes
.
data
.
data
.
Height
)
{
if
(
dataRes
.
data
.
data
.
TemplateType
==
2
&&
dataRes
.
data
.
data
.
Width
&&
dataRes
.
data
.
data
.
Height
)
{
viewportRatio
=
dataRes
.
data
.
data
.
Height
/
dataRes
.
data
.
data
.
Width
viewportRatios
=
dataRes
.
data
.
data
.
Height
/
dataRes
.
data
.
data
.
Width
queryObj
.
value
.
Width
=
dataRes
.
data
.
data
.
Width
queryObj
.
value
.
Height
=
dataRes
.
data
.
data
.
Height
}
}
queryObj
.
value
.
TemplateType
=
dataRes
.
data
.
data
.
TemplateType
queryObj
.
value
.
TemplateType
=
dataRes
.
data
.
data
.
TemplateType
slidesStore
.
setViewportRatio
(
viewportRatio
)
slidesStore
.
setViewportRatio
(
viewportRatios
)
if
(
queryObj
.
value
.
Width
){
VIEWPORT_SIZE
.
Value
=
queryObj
.
value
.
Height
VIEWPORT_VER_SIZE
.
Value
=
queryObj
.
value
.
Width
}
else
{
VIEWPORT_SIZE
.
Value
=
1754
VIEWPORT_VER_SIZE
.
Value
=
1240
}
if
(
SalesBack
.
value
==
0
)
slidesStore
.
setTitle
(
dataRes
.
data
.
data
.
Title
)
if
(
SalesBack
.
value
==
0
)
slidesStore
.
setTitle
(
dataRes
.
data
.
data
.
Title
)
if
(
SalesBack
.
value
==
0
&&
searchData
.
value
.
sellId
){
if
(
SalesBack
.
value
==
0
&&
searchData
.
value
.
sellId
){
console
.
log
(
JSON
.
parse
(
dataObj
.
TempData
))
console
.
log
(
JSON
.
parse
(
dataObj
.
TempData
))
...
...
src/views/Editor/Toolbar/ElementTemplateData.vue
View file @
fa948abc
...
@@ -188,7 +188,7 @@
...
@@ -188,7 +188,7 @@
class=
"thumbnail"
class=
"thumbnail"
:key=
"slides[slideIndex].id"
:key=
"slides[slideIndex].id"
:slide=
"slides[slideIndex]"
:slide=
"slides[slideIndex]"
:size=
"viewportRatio<1 ? VIEWPORT_SIZE
: VIEWPORT_VER_SIZE
"
:size=
"viewportRatio<1 ? VIEWPORT_SIZE
.Value : VIEWPORT_VER_SIZE.Value
"
/>
/>
</div>
</div>
</div>
</div>
...
...
src/views/Editor/Toolbar/common/ElementDataMapping.vue
View file @
fa948abc
...
@@ -63,10 +63,10 @@ const updateUnionElement = ref<boolean>(true)
...
@@ -63,10 +63,10 @@ const updateUnionElement = ref<boolean>(true)
const
loading
=
ref
<
boolean
>
(
false
)
const
loading
=
ref
<
boolean
>
(
false
)
const
loadingObj
=
ref
<
any
>
(
''
)
const
loadingObj
=
ref
<
any
>
(
''
)
const
query
=
ref
<
string
>
(
''
)
const
query
=
ref
<
string
>
(
''
)
let
maxWidth
=
VIEWPORT_SIZE
,
maxHeight
=
VIEWPORT_VER_SIZE
,
viewportRatio
=
slidesStore
.
viewportRatio
let
maxWidth
=
VIEWPORT_SIZE
,
maxHeight
=
VIEWPORT_VER_SIZE
.
Value
,
viewportRatio
=
slidesStore
.
viewportRatio
if
(
viewportRatio
<
1
){
if
(
viewportRatio
<
1
){
maxWidth
=
VIEWPORT_VER_SIZE
maxWidth
=
VIEWPORT_VER_SIZE
.
Value
maxHeight
=
VIEWPORT_SIZE
maxHeight
=
VIEWPORT_SIZE
.
Value
}
}
if
(
handleElement
.
value
?.
dataMapping
){
if
(
handleElement
.
value
?.
dataMapping
){
...
...
src/views/Editor/index.vue
View file @
fa948abc
...
@@ -40,7 +40,7 @@
...
@@ -40,7 +40,7 @@
class=
"thumbnail"
class=
"thumbnail"
:key=
"slide.id"
:key=
"slide.id"
:slide=
"slide"
:slide=
"slide"
:size=
"param.w?param.w:(viewportRatio
<1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
)"
:size=
"param.w?param.w:(viewportRatio
<1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
)"
/>
/>
</div>
</div>
</div>
</div>
...
...
src/views/Mobile/MobileEditor/SlideToolbar.vue
View file @
fa948abc
...
@@ -55,8 +55,8 @@ const insertTextElement = () => {
...
@@ -55,8 +55,8 @@ const insertTextElement = () => {
const
height
=
56
const
height
=
56
createTextElement
({
createTextElement
({
left
:
(
VIEWPORT_SIZE
-
width
)
/
2
,
left
:
(
VIEWPORT_SIZE
.
Value
-
width
)
/
2
,
top
:
(
VIEWPORT_SIZE
*
viewportRatio
.
value
-
height
)
/
2
,
top
:
(
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
-
height
)
/
2
,
width
,
width
,
height
,
height
,
},
{
content
:
'<p>新添加文本</p>'
})
},
{
content
:
'<p>新添加文本</p>'
})
...
@@ -81,8 +81,8 @@ const insertShapeElement = (type: 'square' | 'round') => {
...
@@ -81,8 +81,8 @@ const insertShapeElement = (type: 'square' | 'round') => {
const
size
=
200
const
size
=
200
createShapeElement
({
createShapeElement
({
left
:
(
VIEWPORT_SIZE
-
size
)
/
2
,
left
:
(
VIEWPORT_SIZE
.
Value
-
size
)
/
2
,
top
:
(
VIEWPORT_SIZE
*
viewportRatio
.
value
-
size
)
/
2
,
top
:
(
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
-
size
)
/
2
,
width
:
size
,
width
:
size
,
height
:
size
,
height
:
size
,
},
shape
[
type
])
},
shape
[
type
])
...
...
src/views/Mobile/MobileEditor/index.vue
View file @
fa948abc
...
@@ -83,8 +83,8 @@ const canvasScale = computed(() => {
...
@@ -83,8 +83,8 @@ const canvasScale = computed(() => {
const
contentheight
=
contentRef
.
value
.
clientHeight
const
contentheight
=
contentRef
.
value
.
clientHeight
const
contentRatio
=
contentheight
/
contentWidth
const
contentRatio
=
contentheight
/
contentWidth
if
(
contentRatio
>=
viewportRatio
.
value
)
return
(
contentWidth
-
20
)
/
VIEWPORT_SIZE
if
(
contentRatio
>=
viewportRatio
.
value
)
return
(
contentWidth
-
20
)
/
VIEWPORT_SIZE
.
Value
return
(
contentheight
-
20
)
/
viewportRatio
.
value
/
VIEWPORT_SIZE
return
(
contentheight
-
20
)
/
viewportRatio
.
value
/
VIEWPORT_SIZE
.
Value
})
})
onMounted
(()
=>
{
onMounted
(()
=>
{
...
@@ -93,8 +93,8 @@ onMounted(() => {
...
@@ -93,8 +93,8 @@ onMounted(() => {
})
})
const
viewportStyles
=
computed
(()
=>
({
const
viewportStyles
=
computed
(()
=>
({
width
:
VIEWPORT_SIZE
*
canvasScale
.
value
+
'px'
,
width
:
VIEWPORT_SIZE
.
Value
*
canvasScale
.
value
+
'px'
,
height
:
VIEWPORT_SIZE
*
viewportRatio
.
value
*
canvasScale
.
value
+
'px'
,
height
:
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
*
canvasScale
.
value
+
'px'
,
}))
}))
const
elementList
=
ref
<
PPTElement
[]
>
([])
const
elementList
=
ref
<
PPTElement
[]
>
([])
...
...
src/views/Screen/ScreenSlide.vue
View file @
fa948abc
...
@@ -3,8 +3,8 @@
...
@@ -3,8 +3,8 @@
class=
"screen-slide"
class=
"screen-slide"
style=
"overflow: hidden;"
style=
"overflow: hidden;"
:style=
"
{
:style=
"
{
width: (viewportRatio
<1
?
VIEWPORT_SIZE
:VIEWPORT_VER_SIZE
)+
'
px
',
width: (viewportRatio
<1
?
VIEWPORT_SIZE
.
Value:VIEWPORT_VER_SIZE
.
Value
)+
'
px
',
height:
(
viewportRatio
<1
?
VIEWPORT_SIZE
:VIEWPORT_VER_SIZE
)
*
viewportRatio
+
'
px
',
height:
(
viewportRatio
<1
?
VIEWPORT_SIZE
.
Value:VIEWPORT_VER_SIZE
.
Value
)
*
viewportRatio
+
'
px
',
transform:
`
scale
($
{scale})`,
transform:
`
scale
($
{scale})`,
}"
}"
>
>
...
...
src/views/Screen/ScreenSlideList.vue
View file @
fa948abc
...
@@ -68,7 +68,7 @@ const slidesWithTurningMode = computed(() => {
...
@@ -68,7 +68,7 @@ const slidesWithTurningMode = computed(() => {
}
}
})
})
})
})
const
scale
=
computed
(()
=>
props
.
slideWidth
/
(
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
))
const
scale
=
computed
(()
=>
props
.
slideWidth
/
(
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
))
provide
(
injectKeySlideScale
,
scale
)
provide
(
injectKeySlideScale
,
scale
)
</
script
>
</
script
>
...
...
src/views/components/ThumbnailSlide/index.vue
View file @
fa948abc
...
@@ -9,8 +9,8 @@
...
@@ -9,8 +9,8 @@
class=
"elements"
class=
"elements"
style=
"overflow: hidden;"
style=
"overflow: hidden;"
:style=
"
{
:style=
"
{
width: (viewportRatio
<1
?
VIEWPORT_SIZE
:VIEWPORT_VER_SIZE
)+
'
px
',
width: (viewportRatio
<1
?
VIEWPORT_SIZE
.
Value:VIEWPORT_VER_SIZE
.
Value
)+
'
px
',
height:
(
viewportRatio
<1
?
VIEWPORT_SIZE
:VIEWPORT_VER_SIZE
)
*
viewportRatio
+
'
px
',
height:
(
viewportRatio
<1
?
VIEWPORT_SIZE
.
Value:VIEWPORT_VER_SIZE
.
Value
)
*
viewportRatio
+
'
px
',
transform:
`
scale
($
{scale})`,
transform:
`
scale
($
{scale})`,
}"
}"
v-if="visible"
v-if="visible"
...
@@ -51,7 +51,7 @@ const { viewportRatio } = storeToRefs(useSlidesStore())
...
@@ -51,7 +51,7 @@ const { viewportRatio } = storeToRefs(useSlidesStore())
const
background
=
computed
(()
=>
props
.
slide
.
background
)
const
background
=
computed
(()
=>
props
.
slide
.
background
)
const
{
backgroundStyle
}
=
useSlideBackgroundStyle
(
background
)
const
{
backgroundStyle
}
=
useSlideBackgroundStyle
(
background
)
const
scale
=
computed
(()
=>
props
.
size
/
(
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
:
VIEWPORT_VER_SIZE
))
const
scale
=
computed
(()
=>
props
.
size
/
(
viewportRatio
.
value
<
1
?
VIEWPORT_SIZE
.
Value
:
VIEWPORT_VER_SIZE
.
Value
))
provide
(
injectKeySlideScale
,
scale
)
provide
(
injectKeySlideScale
,
scale
)
</
script
>
</
script
>
...
...
src/views/components/element/AudioElement/ScreenAudioElement.vue
View file @
fa948abc
...
@@ -60,8 +60,8 @@ const audioIconSize = computed(() => {
...
@@ -60,8 +60,8 @@ const audioIconSize = computed(() => {
return
Math
.
min
(
props
.
elementInfo
.
width
,
props
.
elementInfo
.
height
)
+
'px'
return
Math
.
min
(
props
.
elementInfo
.
width
,
props
.
elementInfo
.
height
)
+
'px'
})
})
const
audioPlayerPosition
=
computed
(()
=>
{
const
audioPlayerPosition
=
computed
(()
=>
{
const
canvasWidth
=
VIEWPORT_SIZE
const
canvasWidth
=
VIEWPORT_SIZE
.
Value
const
canvasHeight
=
VIEWPORT_SIZE
*
viewportRatio
.
value
const
canvasHeight
=
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
const
audioWidth
=
280
/
scale
.
value
const
audioWidth
=
280
/
scale
.
value
const
audioHeight
=
50
/
scale
.
value
const
audioHeight
=
50
/
scale
.
value
...
...
src/views/components/element/AudioElement/index.vue
View file @
fa948abc
...
@@ -62,8 +62,8 @@ const audioIconSize = computed(() => {
...
@@ -62,8 +62,8 @@ const audioIconSize = computed(() => {
return
Math
.
min
(
props
.
elementInfo
.
width
,
props
.
elementInfo
.
height
)
+
'px'
return
Math
.
min
(
props
.
elementInfo
.
width
,
props
.
elementInfo
.
height
)
+
'px'
})
})
const
audioPlayerPosition
=
computed
(()
=>
{
const
audioPlayerPosition
=
computed
(()
=>
{
const
canvasWidth
=
VIEWPORT_SIZE
const
canvasWidth
=
VIEWPORT_SIZE
.
Value
const
canvasHeight
=
VIEWPORT_SIZE
*
viewportRatio
.
value
const
canvasHeight
=
VIEWPORT_SIZE
.
Value
*
viewportRatio
.
value
const
audioWidth
=
280
/
canvasScale
.
value
const
audioWidth
=
280
/
canvasScale
.
value
const
audioHeight
=
50
/
canvasScale
.
value
const
audioHeight
=
50
/
canvasScale
.
value
...
...
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