|
@@ -52,11 +52,10 @@
|
|
}"
|
|
}"
|
|
ref="imgBoxEl"
|
|
ref="imgBoxEl"
|
|
>
|
|
>
|
|
- <div class="img-box">
|
|
|
|
- <img v-if="item.img" :src="item.img" @click="selectPage(index)" :style="`transform: rotate(${rotationToAngle(item.rotation)}deg);`" />
|
|
|
|
|
|
+ <div class="img-box" @click="selectPage(index)">
|
|
|
|
+ <img v-if="item.img" :src="item.img" :style="`transform: rotate(${rotationToAngle(item.rotation)}deg);`" />
|
|
<div v-else-if="item.type === 'blank'"
|
|
<div v-else-if="item.type === 'blank'"
|
|
:class="{ 'blank-page': item.type === 'blank' }"
|
|
:class="{ 'blank-page': item.type === 'blank' }"
|
|
- @click="selectPage(index)"
|
|
|
|
:style="{ 'transform': 'rotate(' + rotationToAngle(item.rotation) + 'deg)', 'width': blankPageScaleSize(item.size).width + 'px', 'height': blankPageScaleSize(item.size).height + 'px' }">
|
|
:style="{ 'transform': 'rotate(' + rotationToAngle(item.rotation) + 'deg)', 'width': blankPageScaleSize(item.size).width + 'px', 'height': blankPageScaleSize(item.size).height + 'px' }">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -76,6 +75,7 @@ import { ref, onMounted, reactive, onUnmounted, computed } from 'vue'
|
|
import { useViewerStore } from '@/stores/modules/viewer'
|
|
import { useViewerStore } from '@/stores/modules/viewer'
|
|
import { useDocumentStore } from '@/stores/modules/document'
|
|
import { useDocumentStore } from '@/stores/modules/document'
|
|
import core from '@/core'
|
|
import core from '@/core'
|
|
|
|
+import { isMobileDevice } from '@/helpers/device'
|
|
|
|
|
|
const { Sortable } = defineProps(['Sortable'])
|
|
const { Sortable } = defineProps(['Sortable'])
|
|
|
|
|
|
@@ -98,7 +98,6 @@ const docEditorContainer = ref(null)
|
|
|
|
|
|
const ratio = window.devicePixelRatio || 1
|
|
const ratio = window.devicePixelRatio || 1
|
|
const isMobileWidth = window.innerWidth < 768
|
|
const isMobileWidth = window.innerWidth < 768
|
|
-const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
|
|
|
let timer = null
|
|
let timer = null
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
@@ -109,7 +108,7 @@ onMounted(() => {
|
|
dragClass: "sortable-drag",
|
|
dragClass: "sortable-drag",
|
|
sort: false,
|
|
sort: false,
|
|
forceFallback: true,
|
|
forceFallback: true,
|
|
- fallbackTolerance: 20,
|
|
|
|
|
|
+ fallbackTolerance: isMobileDevice ? 0 : 20,
|
|
onStart: dragStart,
|
|
onStart: dragStart,
|
|
onEnd: dragEnd,
|
|
onEnd: dragEnd,
|
|
delay: isMobileDevice ? 200 : 0
|
|
delay: isMobileDevice ? 200 : 0
|
|
@@ -311,7 +310,7 @@ const replacePage = () => {
|
|
const startIndex = selectedPageList[0]
|
|
const startIndex = selectedPageList[0]
|
|
|
|
|
|
let url = URL.createObjectURL(file)
|
|
let url = URL.createObjectURL(file)
|
|
- const pass = await core.checkPassword(url)
|
|
|
|
|
|
+ const pass = await core.checkPassword(url, true)
|
|
if (pass === false) return
|
|
if (pass === false) return
|
|
|
|
|
|
handleInsertPage({
|
|
handleInsertPage({
|
|
@@ -581,6 +580,7 @@ const handleAutoScroll = (clientY) => {
|
|
|
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
.document-editor-container {
|
|
.document-editor-container {
|
|
|
|
+ margin-top: 44px;
|
|
width: 100%;
|
|
width: 100%;
|
|
background-color: var(--c-doc-editor-bg);
|
|
background-color: var(--c-doc-editor-bg);
|
|
overflow: auto;
|
|
overflow: auto;
|
|
@@ -590,6 +590,7 @@ const handleAutoScroll = (clientY) => {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
+ margin-top: -44px;
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 44px;
|
|
height: 44px;
|
|
z-index: 71;
|
|
z-index: 71;
|
|
@@ -616,7 +617,6 @@ const handleAutoScroll = (clientY) => {
|
|
}
|
|
}
|
|
|
|
|
|
.page-container {
|
|
.page-container {
|
|
- margin-top: 44px;
|
|
|
|
padding-bottom: 30px;
|
|
padding-bottom: 30px;
|
|
display: flex;
|
|
display: flex;
|
|
flex-flow: wrap;
|
|
flex-flow: wrap;
|
|
@@ -640,6 +640,10 @@ const handleAutoScroll = (clientY) => {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: calc(100% - 24px);
|
|
height: calc(100% - 24px);
|
|
|
|
|
|
|
|
+ img {
|
|
|
|
+ pointer-events: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
img,
|
|
img,
|
|
.blank-page {
|
|
.blank-page {
|
|
max-width: 100%;
|
|
max-width: 100%;
|