zydx-plus 1.35.544 → 1.35.546
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/editor2/src/editor.vue +12 -3
- package/src/components/flip/img/dingwei.svg +1 -0
- package/src/components/flip/img/fangdajing.png +0 -0
- package/src/components/flip/img/guanbi.svg +1 -0
- package/src/components/flip/img/qubiezhen.svg +1 -0
- package/src/components/flip/img/sanjiao.png +0 -0
- package/src/components/flip/img/shanchu.svg +1 -0
- package/src/components/flip/src/flip.vue +280 -39
- package/src/index.js +1 -1
package/package.json
CHANGED
|
@@ -773,9 +773,18 @@ export default {
|
|
|
773
773
|
} else {
|
|
774
774
|
this.uploadFile(file, (v === 'uploadAtt') ? this.uploadAttachment : this.uploadImage).then(r => {
|
|
775
775
|
if (v === 'uploadAtt') {
|
|
776
|
-
r.data.annex
|
|
777
|
-
|
|
778
|
-
|
|
776
|
+
if (r.data.annex) {
|
|
777
|
+
r.data.annex.active = true
|
|
778
|
+
this.uploadAttData.push(r.data.annex)
|
|
779
|
+
this.$emit('enclosureSuccess', r.data.annex, html2json(this.editor.getHTML()).child)
|
|
780
|
+
} else {
|
|
781
|
+
file.active = true
|
|
782
|
+
this.uploadAttData.push(file)
|
|
783
|
+
this.$emit('updateData', {
|
|
784
|
+
html: html2json(this.editor.getHTML()).child,
|
|
785
|
+
enclosure: this.uploadAttData
|
|
786
|
+
})
|
|
787
|
+
}
|
|
779
788
|
} else {
|
|
780
789
|
this.imgHtml(r.data)
|
|
781
790
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750386274453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14208" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M783.530667 740.864L512 1012.394667l-271.530667-271.530667a384 384 0 1 1 543.061334 0zM512 640a170.666667 170.666667 0 1 0 0-341.333333 170.666667 170.666667 0 0 0 0 341.333333z m0-85.333333a85.333333 85.333333 0 1 1 0-170.666667 85.333333 85.333333 0 0 1 0 170.666667z" fill="#4B0C77" p-id="14209"></path></svg>
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750386430720" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14817" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M896.85645653 772.26033067L896.92194773 772.26033067 896.92194773 771.86628907Z" fill="#ffffff" p-id="14818"></path><path d="M955.56967253 511.99781653c0-244.60347307-199.00494827-443.56257813-443.56148586-443.56257813-244.61766293 0-443.576768 198.95910507-443.576768 443.56257813 0 244.58709973 198.95910507 443.56366933 443.576768 443.56366934C756.563632 955.56148587 955.56967253 756.58491733 955.56967253 511.99781653M512.00818667 891.916752c-209.46723093 0-379.91784427-170.48226667-379.91784427-379.91893547 0-209.46613973 170.45061227-379.90147093 379.91784427-379.90147093 209.43448533 0 379.88728107 170.4353312 379.88728106 379.90147093C891.89546773 721.43448533 721.442672 891.916752 512.00818667 891.916752" fill="#ffffff" p-id="14819"></path><path d="M693.73754347 650.9098592L556.58394987 513.3491264 693.61201813 377.84482987c12.4390368-12.28185707 12.5329088-32.35503147 0.24995947-44.79516054-12.28185707-12.45541013-32.38668587-12.55037333-44.82790613-0.2368608L511.88156907 468.475376 376.77131413 332.93942507c-12.37572907-12.37682027-32.41943147-12.4390368-44.82681493-0.0633088-12.37682027 12.3931936-12.37682027 32.4347136-0.0633088 44.81262506l134.9530752 135.3471168L330.81367787 647.57852053c-12.44012907 12.31351147-12.5656544 32.32556053-0.25105067 44.767872 6.21951893 6.28282667 14.32519573 9.4220576 22.49199787 9.4220576 8.042368 0 16.14586133-3.07701333 22.30425493-9.14044373l136.20833173-134.73258773L648.84632853 695.6755488c6.18895573 6.18677333 14.32410347 9.29871573 22.46034347 9.29871573 8.1056768 0 16.17642453-3.1119424 22.36647147-9.23649813C706.05105493 683.39369173 706.08052693 663.34889707 693.73754347 650.9098592" fill="#ffffff" p-id="14820"></path></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750386362780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14614" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M902.8 192.9c-36.8-39-86.9-60.8-139.1-60.7h-0.2c-52-0.1-102 21.6-138.7 60.4l-0.1 0.1-362.3 381.2c-33.7 35.6-43.7 89-25.4 135.4 18.3 46.4 61.4 76.6 109.2 76.5 30.2 0 60.3-12 83.2-36.2l362.3-381.2c15.4-16.2 15.4-42.4 0-58.6-15.4-16.2-40.3-16.2-55.7 0L373.8 691c-7.4 7.7-17.4 12-27.8 12-10.4 0-20.4-4.4-27.7-12.2-7.5-7.6-11.7-18.1-11.8-29.1 0-11 4.1-21.5 11.5-29.2l362.3-381.2c22-23.3 52-36.3 83.2-36.2h0.1c31.3-0.1 61.4 13.1 83.5 36.4 22.3 23.4 34.6 54.7 34.6 87.8 0.1 32.9-12.3 64.5-34.4 87.7l-97.8 102.9-0.6 0.6-271.1 285.4c-76.9 80.8-201.5 80.9-278.5 0.1-37-38.8-57.7-91.5-57.5-146.4 0-55.4 20.5-107.5 57.7-146.6l369.4-388.7c15.4-16.2 15.4-42.4 0-58.6-15.4-16.2-40.3-16.2-55.7 0L143.8 464.4c-51.9 54.3-81 128.2-80.8 205.2 0 77.5 28.6 150.4 80.6 205 51.6 54.4 121.7 84.9 194.8 84.7 73.2 0.1 143.4-30.4 195.1-84.9l383.1-403.1c3.8-4.1 6.8-9 8.7-14.3 22.8-34.4 35.2-75 35.2-117.8 0.1-54.9-20.7-107.6-57.7-146.3" p-id="14615" fill="#ffffff"></path></svg>
|
|
Binary file
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750386795145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30056" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M358.925672 596.814688v30.450522c0 17.248849 13.985526 31.233352 31.233352 31.233352 17.248849 0 31.233352-13.985526 31.233352-31.233352v-30.450522c0-17.248849-13.985526-31.233352-31.233352-31.233352-17.248849 0-31.233352 13.985526-31.233352 31.233352zM602.506317 596.814688v30.450522c0 17.248849 13.985526 31.233352 31.233352 31.233352s31.233352-13.985526 31.233351-31.233352v-30.450522c0-17.248849-13.984503-31.233352-31.233351-31.233352s-31.233352 13.985526-31.233352 31.233352zM437.047937 699.686636c-14.650675 9.104355-19.155269 28.360931-10.04989 43.01263 11.015891 17.73185 41.238216 47.740304 84.651982 47.740304 43.195801 0 73.79368-29.780257 85.059258-47.379077 9.216919-14.391778 5.03262-33.338293-9.237385-42.742477-14.270005-9.393951-33.576723-5.409197-43.159985 8.739035-0.12689 0.188288-13.049201 18.915815-32.661888 18.915815-19.028379 0-30.93864-17.274432-31.772634-18.530028-9.175987-14.412244-28.259624-18.788925-42.829458-9.756202zM907.576407 160.082952H699.352015v-26.882254c0-40.145325-32.692586-72.807213-72.878844-72.807213h-229.046626c-40.186258 0-72.878844 32.661887-72.878844 72.807213v26.882254H116.323309c-17.248849 0-31.233352 13.984503-31.233352 31.233352s13.984503 31.233352 31.233352 31.233351h791.253098c17.248849 0 31.233352-13.984503 31.233352-31.233351s-13.985526-31.233352-31.233352-31.233352z m-270.692119 0H387.014404v-26.882254c0-5.607718 4.768607-10.340509 10.411117-10.340509h229.046627c5.64251 0 10.411117 4.732791 10.411117 10.340509v26.882254z" fill="#ffffff" p-id="30057"></path><path d="M824.286446 259.279185c-17.248849 0-31.233352 13.984503-31.233352 31.233352v530.07261c0 40.089044-32.692586 72.705905-72.878844 72.705906H303.725466c-40.186258 0-72.878844-32.616862-72.878844-72.705906v-530.07261c0-17.248849-13.984503-31.233352-31.233352-31.233352s-31.233352 13.984503-31.233352 31.233352v530.07261c0 74.535577 60.71378 135.172609 135.345548 135.172609h416.448784c74.632791 0 135.345548-60.637032 135.345548-135.172609v-530.07261c0-17.248849-13.984503-31.233352-31.233352-31.233352z" fill="#ffffff" p-id="30058"></path><path d="M355.781052 259.279185c-17.248849 0-31.233352 13.984503-31.233351 31.233352v167.494758c0 17.248849 13.985526 31.233352 31.233351 31.233352 17.248849 0 31.233352-13.985526 31.233352-31.233352v-167.494758c0-17.248849-13.984503-31.233352-31.233352-31.233352zM699.352015 458.007295v-167.494758c0-17.248849-13.984503-31.233352-31.233351-31.233352s-31.233352 13.984503-31.233352 31.233352v167.494758c0 17.248849 13.985526 31.233352 31.233352 31.233352s31.233352-13.984503 31.233351-31.233352zM511.949858 489.240647c17.248849 0 31.233352-13.985526 31.233352-31.233352v-167.494758c0-17.248849-13.985526-31.233352-31.233352-31.233352s-31.233352 13.984503-31.233352 31.233352v167.494758c-0.001023 17.248849 13.984503 31.233352 31.233352 31.233352z" fill="#ffffff" p-id="30059"></path></svg>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="docView" @mouseleave="mouseUpTest" @mouseup="mouseUpTest">
|
|
2
|
+
<div class="docView" @click="extendRightDel" @mouseleave="mouseUpTest" @mouseup="mouseUpTest">
|
|
3
3
|
<div class="full-screen" v-if="false">
|
|
4
4
|
<div class="full-screen-img" @click.stop="fullScreen">
|
|
5
5
|
<!-- <div class="full-screen-title" style="" v-if="showText">全屏查看</div>-->
|
|
@@ -19,18 +19,39 @@
|
|
|
19
19
|
</div>
|
|
20
20
|
</div>
|
|
21
21
|
<div>
|
|
22
|
-
<div class="book" ref="book">
|
|
22
|
+
<div class="book" ref="book" @click.right="rightMenu($event)">
|
|
23
23
|
<div class="pages">
|
|
24
24
|
<div class="wrap-box" ref="wrap-box" v-show="doublePage">
|
|
25
25
|
<div class="wrap wrap-block" :ref="`wrap-${item.id}`" v-for="(item,index) in pageInfoArr" :key="index">
|
|
26
26
|
<div class="wrap-can" v-show="!loading" ref="wrapCanBox">
|
|
27
|
+
<div class="extend-right" v-if="rightMenuShow" :style="extendStyle">
|
|
28
|
+
<div class="extend-right-cont">
|
|
29
|
+
<img src="../img/qubiezhen.svg" alt="">
|
|
30
|
+
<p @click.stop="extendRight(null)">链接扩展</p>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
27
33
|
<div class="textLayer" ref="textLayer">
|
|
28
34
|
<span :dir="item2.dir" :style="styleText(item2,item.styles, item.id)" v-for="(item2) in item.items">{{ item2.str }}</span>
|
|
29
35
|
</div>
|
|
30
36
|
<div class="annotationLayer" ref="annotationLayer">
|
|
31
|
-
<
|
|
32
|
-
<
|
|
33
|
-
|
|
37
|
+
<template v-for="(item,index) in annotations">
|
|
38
|
+
<div :style="styleAnnotation(item)" class="magnifier" v-if="item.type === 'tag'">
|
|
39
|
+
<div class="magnifier-head">
|
|
40
|
+
<div class="magnifier-title">拓展阅读</div>
|
|
41
|
+
<div class="magnifier-icon">
|
|
42
|
+
<img @click.stop="annotationTap(item,'add')" src="../img/qubiezhen.svg" alt="" />
|
|
43
|
+
<img @click.stop="annEmpty(item.list)" src="../img/shanchu.svg" alt="" />
|
|
44
|
+
<img @click.stop="extendRightDel" src="../img/guanbi.svg" alt="" />
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="magnifier-cont">
|
|
48
|
+
<div class="magnifier-list-item" @click="annotationTap(item2)" v-for="(item2,index2) in item.list">{{ index2+1 }}.{{ item2?.title }}</div>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
<section v-else tabindex="1000" @click="annotationTap(item,item.id)" :style="styleAnnotation(item)">
|
|
52
|
+
<a :href="item.url" target="_blank"></a>
|
|
53
|
+
</section>
|
|
54
|
+
</template>
|
|
34
55
|
</div>
|
|
35
56
|
<canvas @click.stop="turnText" class="wrap-can-one" :class="{isPointer: isPointer}" @mousedown.stop="mouseDown"
|
|
36
57
|
@mousemove.stop="mouseMove" :id="item.id"></canvas>
|
|
@@ -55,13 +76,37 @@
|
|
|
55
76
|
</div>
|
|
56
77
|
<div class="wrap" ref="wrap" v-show="!doublePage">
|
|
57
78
|
<div class="wrap-can" v-show="!loading" ref="wrapCan">
|
|
79
|
+
<div class="extend-right" v-if="rightMenuShow" :style="extendStyle">
|
|
80
|
+
<div class="extend-right-cont">
|
|
81
|
+
<img src="../img/qubiezhen.svg" alt="">
|
|
82
|
+
<p @click.stop="extendRight(null)">链接扩展</p>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
58
85
|
<div class="textLayer" ref="textLayer">
|
|
59
86
|
<span :dir="item.dir" :style="styleText(item,styles)" v-for="(item,index) in items">{{ item.str }}</span>
|
|
60
87
|
</div>
|
|
61
88
|
<div class="annotationLayer" ref="annotationLayer">
|
|
62
|
-
<
|
|
63
|
-
<
|
|
64
|
-
|
|
89
|
+
<template v-for="(item,index) in annotations">
|
|
90
|
+
<div :style="styleAnnotation(item)" class="magnifier" v-if="item.type === 'tag'">
|
|
91
|
+
<img @click.stop="magnifierTap($event,item)" src="../img/dingwei.svg" alt="" />
|
|
92
|
+
<div class="magnifier-list" v-if="item.show" :style="item.style">
|
|
93
|
+
<div class="magnifier-head">
|
|
94
|
+
<div class="magnifier-title">拓展阅读</div>
|
|
95
|
+
<div class="magnifier-icon">
|
|
96
|
+
<img @click.stop="annotationTap(item,'add')" src="../img/qubiezhen.svg" alt="" />
|
|
97
|
+
<img @click.stop="annEmpty(item.list)" src="../img/shanchu.svg" alt="" />
|
|
98
|
+
<img @click.stop="extendRightDel" src="../img/guanbi.svg" alt="" />
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="magnifier-cont">
|
|
102
|
+
<div class="magnifier-list-item" @click="annotationTap(item2)" v-for="(item2,index2) in item.list">{{ index2+1 }}.{{ item2?.title }}</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<section v-else tabindex="1000" @click="annotationTap(item)" :style="styleAnnotation(item)">
|
|
107
|
+
<a :href="item.url" target="_blank"></a>
|
|
108
|
+
</section>
|
|
109
|
+
</template>
|
|
65
110
|
</div>
|
|
66
111
|
<canvas @click.stop="turnText" class="wrap-can-one" :class="{isPointer: isPointer}" @mousedown.stop="mouseDown"
|
|
67
112
|
@mousemove.stop="mouseMove" :id="`${id}`"></canvas>
|
|
@@ -121,7 +166,7 @@ import * as PdfJs from 'pdfjs-dist'
|
|
|
121
166
|
import "pdfjs-dist/build/pdf.worker.mjs";
|
|
122
167
|
import Range from "../../tagging/src/range";
|
|
123
168
|
|
|
124
|
-
let pdfs =
|
|
169
|
+
let pdfs = {};
|
|
125
170
|
|
|
126
171
|
export default {
|
|
127
172
|
name: "zydx-flip",
|
|
@@ -195,7 +240,13 @@ export default {
|
|
|
195
240
|
viewWidth: 0,
|
|
196
241
|
viewHeight: 0,
|
|
197
242
|
annotations: [],
|
|
198
|
-
annotationsInit: []
|
|
243
|
+
annotationsInit: [],
|
|
244
|
+
extendStyle: {
|
|
245
|
+
left: '0px',
|
|
246
|
+
top: '0px'
|
|
247
|
+
},
|
|
248
|
+
rightMenuShow: false,
|
|
249
|
+
annData: {}
|
|
199
250
|
}
|
|
200
251
|
},
|
|
201
252
|
props: {
|
|
@@ -247,15 +298,32 @@ export default {
|
|
|
247
298
|
annotationsData: {
|
|
248
299
|
type: Array,
|
|
249
300
|
default: () => []
|
|
301
|
+
},
|
|
302
|
+
rightClick: {
|
|
303
|
+
type: Boolean,
|
|
304
|
+
default: true
|
|
250
305
|
}
|
|
251
306
|
},
|
|
252
307
|
watch: {
|
|
253
308
|
annotationsData: {
|
|
254
309
|
handler: function (val) {
|
|
255
310
|
if(typeof val === Object) {
|
|
256
|
-
this.annotations.push(
|
|
311
|
+
this.annotations.push({
|
|
312
|
+
...val,
|
|
313
|
+
show: false,
|
|
314
|
+
style: {},
|
|
315
|
+
type: "tag"
|
|
316
|
+
})
|
|
257
317
|
}else {
|
|
258
|
-
|
|
318
|
+
const arr = val.map(x => {
|
|
319
|
+
return {
|
|
320
|
+
...x,
|
|
321
|
+
show: false,
|
|
322
|
+
style: {},
|
|
323
|
+
type: "tag"
|
|
324
|
+
}
|
|
325
|
+
})
|
|
326
|
+
this.annotations = arr.concat(this.annotationsInit)
|
|
259
327
|
}
|
|
260
328
|
},
|
|
261
329
|
deep: true,
|
|
@@ -333,7 +401,7 @@ export default {
|
|
|
333
401
|
immediate: true
|
|
334
402
|
}
|
|
335
403
|
},
|
|
336
|
-
emits: ['flip','annotationTap'],
|
|
404
|
+
emits: ['flip','annotationTap', 'annotationsSend', 'empty'],
|
|
337
405
|
mounted() {
|
|
338
406
|
if (!this.doublePage) {
|
|
339
407
|
this.id = 'canvas-wrap' + this.generateUniqueKey()
|
|
@@ -351,13 +419,89 @@ export default {
|
|
|
351
419
|
this.cancelResizeObserver()
|
|
352
420
|
},
|
|
353
421
|
methods: {
|
|
354
|
-
|
|
422
|
+
annEmpty(v) {
|
|
423
|
+
this.$emit('empty',v)
|
|
424
|
+
},
|
|
425
|
+
magnifierTap(e,v) {
|
|
426
|
+
if(!v.show) this.extendRightDel()
|
|
427
|
+
v.show = !v.show
|
|
428
|
+
setTimeout(() => {
|
|
429
|
+
const x = (v.rect[0] * this.scales / this.viewport?.width) * 100
|
|
430
|
+
const y = ((this.viewport?.height - (v.rect[1] * this.scales)) / this.viewport?.height) * 100
|
|
431
|
+
if(x > 50) {
|
|
432
|
+
v.style.left = `-205px`
|
|
433
|
+
}else {
|
|
434
|
+
v.style.right = `-205px`
|
|
435
|
+
}
|
|
436
|
+
if(y > 40) {
|
|
437
|
+
v.style.bottom = '0px'
|
|
438
|
+
}else {
|
|
439
|
+
v.style.top = '0px'
|
|
440
|
+
}
|
|
441
|
+
},20)
|
|
442
|
+
},
|
|
443
|
+
extendRightDel() {
|
|
444
|
+
this.rightMenuShow = false
|
|
445
|
+
this.annotations.map(x => {
|
|
446
|
+
x.show = false
|
|
447
|
+
return x
|
|
448
|
+
})
|
|
449
|
+
},
|
|
450
|
+
annotationTap(v, n ) {
|
|
355
451
|
if(v.url) return
|
|
356
|
-
|
|
452
|
+
if(n === 'add') {
|
|
453
|
+
this.$emit('annotationsSend', {
|
|
454
|
+
id: v.id,
|
|
455
|
+
page: v.page,
|
|
456
|
+
borderColor: v.borderColor,
|
|
457
|
+
borderStyle: v.borderStyle,
|
|
458
|
+
rect: v.rect,
|
|
459
|
+
})
|
|
460
|
+
}else {
|
|
461
|
+
this.$emit('annotationTap',v)
|
|
462
|
+
}
|
|
463
|
+
},
|
|
464
|
+
// 扩展点击
|
|
465
|
+
extendRight(i) {
|
|
466
|
+
this.extendRightDel()
|
|
467
|
+
this.$emit('annotationsSend', {
|
|
468
|
+
...this.annData,
|
|
469
|
+
id: new Date().getTime(),
|
|
470
|
+
page: i? i + 1 : this.pageIndex,
|
|
471
|
+
})
|
|
472
|
+
},
|
|
473
|
+
// 右键菜单
|
|
474
|
+
rightMenu(e) {
|
|
475
|
+
e.preventDefault()
|
|
476
|
+
if(!this.rightClick) return;
|
|
477
|
+
if(this.doublePage) return;
|
|
478
|
+
if(e.target.nodeName === 'SPAN') {
|
|
479
|
+
const wid = this.$refs.wrap.offsetWidth - 10
|
|
480
|
+
const hei = this.$refs.wrap.offsetHeight - 10
|
|
481
|
+
const endOffset = this.getRange().endOffset
|
|
482
|
+
const style = e.target.attributes.style.value
|
|
483
|
+
const size = style.match(/font-size:\s*([^;]+)/)[1].trim().replace(/px/g, "")
|
|
484
|
+
const topMatch = style.match(/top:\s*([^;]+)/)[1].trim().replace(/%/g, "");
|
|
485
|
+
const x1 = (this.viewport.width * (e.target.offsetLeft + (endOffset * Number(size)))/wid) - 3
|
|
486
|
+
const y1 = this.viewport.height * (1 - (Number(topMatch/100))) - 3
|
|
487
|
+
const x2 = x1 + 15
|
|
488
|
+
const y2 = y1 + 15
|
|
489
|
+
const left = e.target.offsetLeft + e.offsetX
|
|
490
|
+
this.rightMenuShow = true
|
|
491
|
+
this.extendStyle = {
|
|
492
|
+
left: left + 'px',
|
|
493
|
+
top: Number(topMatch) - ((size/hei)*240) + '%'
|
|
494
|
+
}
|
|
495
|
+
this.annData = {
|
|
496
|
+
rect: [x1/this.scales,y1/this.scales,x2/this.scales,y2/this.scales],
|
|
497
|
+
type: 'tag',
|
|
498
|
+
borderStyle: {width: 0},
|
|
499
|
+
borderColor: [0,0,0]
|
|
500
|
+
}
|
|
501
|
+
}
|
|
357
502
|
},
|
|
358
503
|
// 添加标注
|
|
359
504
|
flipText(next) {
|
|
360
|
-
if(this.doublePage) return;
|
|
361
505
|
let timestamp = 'flip' + Math.random().toString(36).substr(2)
|
|
362
506
|
this.replaceSelectedStrByEle(timestamp)
|
|
363
507
|
const elements = document.querySelectorAll(`.${timestamp}`)[0];
|
|
@@ -427,6 +571,7 @@ export default {
|
|
|
427
571
|
return range
|
|
428
572
|
},
|
|
429
573
|
styleAnnotation(v) {
|
|
574
|
+
if(!v) return {}
|
|
430
575
|
const x1 = (v.rect[0] * this.scales / this.viewport?.width) * 100
|
|
431
576
|
const y1 = ((this.viewport?.height - (v.rect[1] * this.scales)) / this.viewport?.height) * 100
|
|
432
577
|
const x2 = (((v.rect[2] - v.rect[0]) * this.scales) / this.viewport?.width) * 100
|
|
@@ -440,6 +585,7 @@ export default {
|
|
|
440
585
|
}
|
|
441
586
|
},
|
|
442
587
|
styleText(v,n, id) {
|
|
588
|
+
if(!v) return {}
|
|
443
589
|
const textLayer = id? this.$refs[`wrap-${id}`][0] : this.$refs.textLayer;
|
|
444
590
|
const actualWidth = textLayer.clientWidth
|
|
445
591
|
const pageScale = actualWidth / this.viewWidth
|
|
@@ -545,7 +691,6 @@ export default {
|
|
|
545
691
|
} else {
|
|
546
692
|
this.points.pop()
|
|
547
693
|
}
|
|
548
|
-
this.$emit('drawEnd', this.points,'backward')
|
|
549
694
|
this.clearRect()
|
|
550
695
|
},
|
|
551
696
|
// 鼠标
|
|
@@ -858,8 +1003,6 @@ export default {
|
|
|
858
1003
|
i--
|
|
859
1004
|
}
|
|
860
1005
|
}
|
|
861
|
-
console.log('delChart')
|
|
862
|
-
this.$emit('drawEnd', this.points,'del')
|
|
863
1006
|
this.clearRect()
|
|
864
1007
|
},
|
|
865
1008
|
// 绘制
|
|
@@ -909,7 +1052,7 @@ export default {
|
|
|
909
1052
|
turnText() {
|
|
910
1053
|
if (this.textStart) return
|
|
911
1054
|
if (this.state === 'text') {
|
|
912
|
-
const text = this.$refs.textInput.innerText
|
|
1055
|
+
const text = this.$refs.textInput.innerText
|
|
913
1056
|
this.contenteditable = false
|
|
914
1057
|
this.state = null
|
|
915
1058
|
if (text === '') {
|
|
@@ -995,7 +1138,6 @@ export default {
|
|
|
995
1138
|
color: obj.color,
|
|
996
1139
|
size: obj.size,
|
|
997
1140
|
})
|
|
998
|
-
this.$emit('drawEnd', this.points)
|
|
999
1141
|
},
|
|
1000
1142
|
// 画箭头
|
|
1001
1143
|
arrow(obj, type) {
|
|
@@ -1041,7 +1183,6 @@ export default {
|
|
|
1041
1183
|
color: obj.color,
|
|
1042
1184
|
border: obj.border,
|
|
1043
1185
|
})
|
|
1044
|
-
this.$emit('drawEnd', this.points)
|
|
1045
1186
|
}
|
|
1046
1187
|
},
|
|
1047
1188
|
// 画直线
|
|
@@ -1073,7 +1214,6 @@ export default {
|
|
|
1073
1214
|
color: obj.color,
|
|
1074
1215
|
border: obj.border,
|
|
1075
1216
|
})
|
|
1076
|
-
this.$emit('drawEnd', this.points)
|
|
1077
1217
|
}
|
|
1078
1218
|
},
|
|
1079
1219
|
// 画圆
|
|
@@ -1105,7 +1245,6 @@ export default {
|
|
|
1105
1245
|
color: obj.color,
|
|
1106
1246
|
border: obj.border,
|
|
1107
1247
|
})
|
|
1108
|
-
this.$emit('drawEnd', this.points)
|
|
1109
1248
|
}
|
|
1110
1249
|
},
|
|
1111
1250
|
// 画矩形
|
|
@@ -1136,7 +1275,6 @@ export default {
|
|
|
1136
1275
|
color: obj.color,
|
|
1137
1276
|
border: obj.border,
|
|
1138
1277
|
})
|
|
1139
|
-
this.$emit('drawEnd', this.points)
|
|
1140
1278
|
}
|
|
1141
1279
|
},
|
|
1142
1280
|
// 画线
|
|
@@ -1157,9 +1295,6 @@ export default {
|
|
|
1157
1295
|
this.ctx.stroke()
|
|
1158
1296
|
this.ctx.closePath()
|
|
1159
1297
|
this.points.push(obj)
|
|
1160
|
-
if(obj.start === 'end'){
|
|
1161
|
-
this.$emit('drawEnd', this.points)
|
|
1162
|
-
}
|
|
1163
1298
|
},
|
|
1164
1299
|
clearRect(v) {
|
|
1165
1300
|
const width = this.canvasStyle.widthCanvas
|
|
@@ -1268,31 +1403,24 @@ export default {
|
|
|
1268
1403
|
for (let i = 0; i < this.points.length; i++) {
|
|
1269
1404
|
if (this.points[i].index === this.pageIndex) {
|
|
1270
1405
|
if (this.points[i].type === 'line') {
|
|
1271
|
-
console.log('type1',this.points[i].type)
|
|
1272
1406
|
this.lineProcessing(this.points[i], this.points[i + 1], {x: 0, y: 0})
|
|
1273
1407
|
}
|
|
1274
1408
|
if (this.points[i].type === 'rectangle') {
|
|
1275
|
-
console.log('type2',this.points[i].type)
|
|
1276
1409
|
this.rectangleProcessing(this.points[i], {x: 0, y: 0})
|
|
1277
1410
|
}
|
|
1278
1411
|
if (this.points[i].type === 'circular') {
|
|
1279
|
-
console.log('type3',this.points[i].type)
|
|
1280
1412
|
this.circularProcessing(this.points[i], {x: 0, y: 0})
|
|
1281
1413
|
}
|
|
1282
1414
|
if (this.points[i].type === 'straight') {
|
|
1283
|
-
console.log('type4',this.points[i].type)
|
|
1284
1415
|
this.straightProcessing(this.points[i], {x: 0, y: 0})
|
|
1285
1416
|
}
|
|
1286
1417
|
if (this.points[i].type === 'arrow') {
|
|
1287
|
-
console.log('type5',this.points[i].type)
|
|
1288
1418
|
this.arrowProcessing(this.points[i], {x: 0, y: 0})
|
|
1289
1419
|
}
|
|
1290
1420
|
if (this.points[i].type === 'text') {
|
|
1291
|
-
console.log('type6',this.points[i].type)
|
|
1292
1421
|
this.textProcessing(this.points[i], {x: 0, y: 0})
|
|
1293
1422
|
}
|
|
1294
1423
|
if (this.points[i].type === 'sign') {
|
|
1295
|
-
console.log('type7',this.points[i].type)
|
|
1296
1424
|
this.signProcessing(this.points[i], {x: 0, y: 0})
|
|
1297
1425
|
}
|
|
1298
1426
|
}
|
|
@@ -1348,7 +1476,7 @@ export default {
|
|
|
1348
1476
|
cMapPacked: true
|
|
1349
1477
|
})
|
|
1350
1478
|
loadingTask.promise.then((pdf) => {
|
|
1351
|
-
pdfs = pdf
|
|
1479
|
+
pdfs[that.id] = pdf
|
|
1352
1480
|
that.pdfPages = pdf.numPages // 获取pdf文件的总页数
|
|
1353
1481
|
that.$nextTick(() => {
|
|
1354
1482
|
if (that.doublePage) {
|
|
@@ -1373,7 +1501,7 @@ export default {
|
|
|
1373
1501
|
let that = this
|
|
1374
1502
|
that.mouse()
|
|
1375
1503
|
that.$nextTick(() => {
|
|
1376
|
-
pdfs.getPage(that.pageIndex).then(function (page) {
|
|
1504
|
+
pdfs[that.id].getPage(that.pageIndex).then(function (page) {
|
|
1377
1505
|
that.doc = page
|
|
1378
1506
|
that.viewWidth = page.view[2] - page.view[0]
|
|
1379
1507
|
that.viewHeight = page.view[3] - page.view[1]
|
|
@@ -1422,7 +1550,15 @@ export default {
|
|
|
1422
1550
|
})
|
|
1423
1551
|
page.getAnnotations().then((res) => {
|
|
1424
1552
|
that.annotationsInit = res
|
|
1425
|
-
|
|
1553
|
+
const arr = that.annotationsData.map(x => {
|
|
1554
|
+
return {
|
|
1555
|
+
...x,
|
|
1556
|
+
show: false,
|
|
1557
|
+
style: {},
|
|
1558
|
+
type: "tag"
|
|
1559
|
+
}
|
|
1560
|
+
})
|
|
1561
|
+
that.annotations = res.concat(arr)
|
|
1426
1562
|
})
|
|
1427
1563
|
that.loading = false
|
|
1428
1564
|
if (that.oneIndex === 'right') {
|
|
@@ -1450,7 +1586,7 @@ export default {
|
|
|
1450
1586
|
that.mouse()
|
|
1451
1587
|
that.$nextTick(() => {
|
|
1452
1588
|
that.pageInfoArr.forEach((item, index) => {
|
|
1453
|
-
pdfs.getPage(index + 1).then(function (page) {
|
|
1589
|
+
pdfs[that.id].getPage(index + 1).then(function (page) {
|
|
1454
1590
|
that.doc = page
|
|
1455
1591
|
that.viewWidth = page.view[2] - page.view[0]
|
|
1456
1592
|
that.viewHeight = page.view[3] - page.view[1]
|
|
@@ -1535,6 +1671,111 @@ export default {
|
|
|
1535
1671
|
@import '../icon.css';
|
|
1536
1672
|
@import '../annotationLayer.css';
|
|
1537
1673
|
@import '../textLayer.css';
|
|
1674
|
+
.magnifier{
|
|
1675
|
+
position: absolute;
|
|
1676
|
+
text-align: initial;
|
|
1677
|
+
pointer-events: auto;
|
|
1678
|
+
box-sizing: border-box;
|
|
1679
|
+
transform-origin: 0 0;
|
|
1680
|
+
cursor: pointer;
|
|
1681
|
+
}
|
|
1682
|
+
.magnifier>img{
|
|
1683
|
+
width: 100%;
|
|
1684
|
+
height: 100%;
|
|
1685
|
+
display: block;
|
|
1686
|
+
}
|
|
1687
|
+
.magnifier-list{
|
|
1688
|
+
position: absolute;
|
|
1689
|
+
width: 200px;
|
|
1690
|
+
background-color: #fff;
|
|
1691
|
+
border-radius: 6px;
|
|
1692
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
|
|
1693
|
+
font-size: 14px;
|
|
1694
|
+
z-index: 1;
|
|
1695
|
+
animation: linkDown .4s linear forwards;
|
|
1696
|
+
opacity: 0;
|
|
1697
|
+
overflow: hidden;
|
|
1698
|
+
}
|
|
1699
|
+
.magnifier-head{
|
|
1700
|
+
height: 30px;
|
|
1701
|
+
width: 100%;
|
|
1702
|
+
background: #4B0C77;
|
|
1703
|
+
line-height: 30px;
|
|
1704
|
+
display: flex;
|
|
1705
|
+
justify-content: space-between;
|
|
1706
|
+
padding: 0 5px;
|
|
1707
|
+
box-sizing: border-box;
|
|
1708
|
+
}
|
|
1709
|
+
.magnifier-icon>img{
|
|
1710
|
+
width: 16px !important;
|
|
1711
|
+
height: 16px !important;
|
|
1712
|
+
margin-left: 10px;
|
|
1713
|
+
position: relative;
|
|
1714
|
+
top: 2px;
|
|
1715
|
+
}
|
|
1716
|
+
.magnifier-title{
|
|
1717
|
+
font-size: 14px;
|
|
1718
|
+
color: #fff;
|
|
1719
|
+
}
|
|
1720
|
+
.magnifier-cont{
|
|
1721
|
+
padding: 5px;
|
|
1722
|
+
}
|
|
1723
|
+
.magnifier-list-item{
|
|
1724
|
+
border-bottom: 1px dashed #ccc;
|
|
1725
|
+
font-size: 12px;
|
|
1726
|
+
line-height: 24px;
|
|
1727
|
+
}
|
|
1728
|
+
.magnifier-list-item:last-child{
|
|
1729
|
+
border-bottom: 0;
|
|
1730
|
+
}
|
|
1731
|
+
.magnifier-list-item:hover{
|
|
1732
|
+
color: #4B0C77 !important;
|
|
1733
|
+
background: #eeeeee;
|
|
1734
|
+
}
|
|
1735
|
+
@keyframes linkDown {
|
|
1736
|
+
0% {
|
|
1737
|
+
opacity: 0;
|
|
1738
|
+
}
|
|
1739
|
+
100% {
|
|
1740
|
+
opacity: 1;
|
|
1741
|
+
}
|
|
1742
|
+
}
|
|
1743
|
+
.extend-right{
|
|
1744
|
+
position: absolute;
|
|
1745
|
+
z-index: 5;
|
|
1746
|
+
border-radius: 20px;
|
|
1747
|
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
|
|
1748
|
+
padding: 10px;
|
|
1749
|
+
background-color: #4B0C77;
|
|
1750
|
+
cursor: pointer;
|
|
1751
|
+
transform: scaleX(-1);
|
|
1752
|
+
}
|
|
1753
|
+
.extend-right-cont{
|
|
1754
|
+
display: flex;
|
|
1755
|
+
transform: scaleX(-1);
|
|
1756
|
+
}
|
|
1757
|
+
.extend-right:after {
|
|
1758
|
+
content: '';
|
|
1759
|
+
position: absolute;
|
|
1760
|
+
top: 54%;
|
|
1761
|
+
right: 0;
|
|
1762
|
+
width: 30px;
|
|
1763
|
+
height: 30px;
|
|
1764
|
+
background: url("../img/sanjiao.png") no-repeat 0 0;
|
|
1765
|
+
background-size: 100% 100%;
|
|
1766
|
+
transform: rotate(-85deg) scaleY(-1);
|
|
1767
|
+
}
|
|
1768
|
+
.extend-right-cont>img{
|
|
1769
|
+
width: 14px !important;
|
|
1770
|
+
height: 14px !important;
|
|
1771
|
+
position: relative;
|
|
1772
|
+
top: 2px;
|
|
1773
|
+
}
|
|
1774
|
+
.extend-right-cont>p{
|
|
1775
|
+
font-size: 12px;
|
|
1776
|
+
color: #fff;
|
|
1777
|
+
padding-left: 5px;
|
|
1778
|
+
}
|
|
1538
1779
|
.isPointer{
|
|
1539
1780
|
pointer-events: none;
|
|
1540
1781
|
}
|