Просмотр исходного кода

feat: 再增加一些快捷键

ChenYangfan 6 лет назад
Родитель
Сommit
34770f9d5e

+ 1 - 1
src/components/Discussion/DiscussionArea.vue

@@ -5,7 +5,7 @@
       <c-button theme="green" :left="12" :icon="focus ? 'unfold_less' : 'edit'" text @click="handleFocusButtonClick">
         {{focus ? '隐藏编辑器' : '讨论|笔记'}}
       </c-button>
-      <c-button :no-bold="personal" text :theme="personal ? 'blue' : ''"
+      <c-button :no-bold="typeof personal === typeof true ? personal : JSON.parse(personal)" text :theme="personal ? 'blue' : ''"
                 :icon="personal ? 'check_box' : 'check_box_outline_blank'"
                 title="如果设置为私人笔记,则这条讨论仅自己可见"
                 @click="handleSetPersonal">笔记模式

+ 1 - 1
src/components/PDF/Pdf.vue

@@ -3,7 +3,7 @@
     <canvas class="pdf pdf-canvas" id="pdf-canvas" :class="classList"></canvas>
     <div v-if="loading" class="loading">加载中...</div>
     <fade-transition>
-      <div v-if="focus" class="focus-mask">禁用方向键中...<br>按 ESC 键退出</div>
+      <div v-if="focus" class="focus-mask">禁用快捷键中...<br>点击空白出退出</div>
     </fade-transition>
   </div>
 </template>

+ 19 - 1
src/components/PDF/PointerCanvas.vue

@@ -21,6 +21,7 @@ export default {
       height: document.documentElement.clientHeight,
       rects: [],
       drawingRect: {},
+      poped: [],
       // 为了突破30fps限制(应该与chrome优化机制有关),往数组中多放入冗余数字,以让动画更流畅
       overrate: 4
     }
@@ -101,7 +102,10 @@ export default {
     },
     handleMouseUp (e) {
       if (!this.noBox) {
-        this.drawingRect.begin && this.drawingRect.end && this.rects.push(this.drawingRect)
+        if (this.drawingRect.begin && this.drawingRect.end) {
+          this.rects.push(this.drawingRect)
+          this.poped = []
+        }
         this._canvas.removeEventListener('mousemove', this.handleBoxMouseMove)
         this.disablePointer = false
         this.renderer()
@@ -153,6 +157,20 @@ export default {
     },
     handleFocus () {
       this.$store.commit(USE_FOCUS)
+    },
+    cleanCanvas () {
+      this.rects = []
+      this.renderer()
+    },
+    undo () {
+      const rect = this.rects.pop()
+      rect && this.poped.push(rect)
+      rect && this.renderer()
+    },
+    redo () {
+      const rect = this.poped.pop()
+      rect && this.rects.push(rect)
+      rect && this.renderer()
     }
   }
 }

+ 28 - 1
src/views/reader/PdfReader.vue

@@ -2,10 +2,11 @@
   <div class="pdf-reader">
     <icon-button @click="$router.go(-1)" title="返回主页面">arrow_back</icon-button>
     <pdf-viewer></pdf-viewer>
-    <pointer-canvas :no-pointer="!pointer" :no-box="!box"></pointer-canvas>
+    <pointer-canvas ref="pointerCanvas" :no-pointer="!pointer" :no-box="!box"></pointer-canvas>
     <div class="pointer-actions">
       <c-button text icon="gesture" :theme="pointer ? 'red' : ''" @click="pointer = !pointer">指针</c-button>
       <c-button text icon="crop_square" :left="8" :theme="box ? 'blue' : ''" @click="box = !box">框选</c-button>
+      <c-button text icon="refresh" :left="8" theme="orange" @click="cleanCanvas">清除</c-button>
     </div>
     <discussion-area
       :class="showDiscussion ? 'show-discussion' : 'hide-discussion'"
@@ -89,15 +90,41 @@ export default {
         switch (e.key) {
           case 'ArrowDown':
           case 'ArrowRight':
+          case 's':
+          case 'd':
           case ' ':
             this.$store.commit(NEXT_PAGE)
             break
           case 'ArrowUp':
           case 'ArrowLeft':
+          case 'w':
+          case 'a':
             this.$store.commit(PREVIOUS_PAGE)
             break
+          case 'c':
+            this.cleanCanvas()
+            break
+          case 'q':
+          case 'z':
+            this.$refs.pointerCanvas.undo()
+            break
+          case 'e':
+          case 'y':
+            this.$refs.pointerCanvas.redo()
+            break
+          case '[':
+          case 'b':
+            this.box = !this.box
+            break
+          case 'p':
+          case 'v':
+            this.pointer = !this.pointer
+            break
         }
       }
+    },
+    cleanCanvas () {
+      this.$refs.pointerCanvas.cleanCanvas()
     }
   }
 }