refactor(selection): show panel on instant capture

woden234 · Jun 17, 2018 · daabaf6 · daabaf6
1 parent ef37346
commit daabaf6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 54 deletions.
diff --git a/src/content/redux/modules/widget.ts b/src/content/redux/modules/widget.ts
@@ -555,7 +555,7 @@ function listenNewSelection (
     const isActive = state.config.active && !state.widget.isTempDisabled
 
     const { direct, ctrl, double, icon } = state.config.mode
-    const { selectionInfo, dbClick, ctrlKey, mouseX, mouseY } = message
+    const { selectionInfo, dbClick, ctrlKey, instant, mouseX, mouseY } = message
     const {
       isPinned,
       shouldPanelShow: lastShouldPanelShow,
@@ -569,7 +569,8 @@ function listenNewSelection (
         lastShouldPanelShow ||
         direct ||
         (double && dbClick) ||
-        (ctrl && ctrlKey)
+        (ctrl && ctrlKey) ||
+        instant
       )) ||
       isSaladictOptionsPage ||
       isSaladictPopupPage
@@ -583,6 +584,7 @@ function listenNewSelection (
       !direct &&
       !(double && dbClick) &&
       !(ctrl && ctrlKey) &&
+      !instant &&
       !isSaladictOptionsPage &&
       !isSaladictPopupPage
     )

diff --git a/src/selection/index.ts b/src/selection/index.ts
@@ -4,6 +4,7 @@ import { isContainChinese, isContainEnglish } from '@/_helpers/lang-check'
 import { createAppConfigStream } from '@/_helpers/config-manager'
 import * as selection from '@/_helpers/selection'
 import { MsgType, PostMsgType, PostMsgSelection, MsgSelection, MsgIsPinned } from '@/typings/message'
+import { Mutable } from '@/typings/helpers'
 
 // import { Observable, fromEvent, timer, merge, of, asyncScheduler } from 'rxjs'
 // import { map, mapTo, scan, filter, take, switchMap, buffer, debounceTime, observeOn, share, distinctUntilChanged } from 'rxjs/operators'
@@ -40,16 +41,11 @@ window.addEventListener('message', ({ data, source }: { data: PostMsgSelection,
     .find(({ contentWindow }) => contentWindow === source)
   if (!iframe) { return }
 
-  const { selectionInfo, mouseX, mouseY, ctrlKey, dbClick } = data
   const { left, top } = iframe.getBoundingClientRect()
-
-  sendMessage(
-    mouseX + left,
-    mouseY + top,
-    dbClick,
-    ctrlKey,
-    selectionInfo
-  )
+  const msg: Mutable<typeof data> = data
+  msg.mouseX = msg.mouseX + left
+  msg.mouseY = msg.mouseY + top
+  sendMessage(msg)
 })
 
 let config = appConfigFactory()
@@ -163,12 +159,12 @@ validMouseup$$.subscribe(event => {
     }
     lastContext = context
 
-    sendMessage(
-      event.clientX,
-      event.clientY,
-      clickPeriodCount >= 2,
-      Boolean(event['metaKey'] || event['ctrlKey']),
-      {
+    sendMessage({
+      mouseX: event.clientX,
+      mouseY: event.clientY,
+      dbClick: clickPeriodCount >= 2,
+      ctrlKey: Boolean(event['metaKey'] || event['ctrlKey']),
+      selectionInfo: {
         text: selection.getSelectionText(),
         context,
         title: window.pageTitle || document.title,
@@ -177,7 +173,7 @@ validMouseup$$.subscribe(event => {
         trans: '',
         note: ''
       },
-    )
+    })
   } else {
     lastContext = ''
     sendEmptyMessage()
@@ -231,12 +227,11 @@ combineLatest(
   distinctUntilChanged((oldVal, newVal) => oldVal[1] === newVal[1] && oldVal[2] === newVal[2]),
 ).subscribe(([event, text, context]) => {
   if (text) {
-    sendMessage(
-      event.clientX,
-      event.clientY,
-      true,
-      true,
-      {
+    sendMessage({
+      mouseX: event.clientX,
+      mouseY: event.clientY,
+      instant: true,
+      selectionInfo: {
         text,
         context,
         title: window.pageTitle || document.title,
@@ -245,7 +240,7 @@ combineLatest(
         trans: '',
         note: ''
       },
-    )
+    })
   }
 })
 
@@ -254,37 +249,30 @@ combineLatest(
 \*-----------------------------------------------*/
 
 function sendMessage (
-  clientX: number,
-  clientY: number,
-  dbClick: boolean,
-  isCtrlPressed: boolean,
-  selectionInfo: selection.SelectionInfo
+  msg: {
+    selectionInfo: selection.SelectionInfo
+    mouseX: number
+    mouseY: number
+    dbClick?: boolean
+    ctrlKey?: boolean
+    instant?: boolean
+  }
 ) {
   if (window.parent === window) {
     // top
-    const msg: MsgSelection = {
-      type: MsgType.Selection,
-      selectionInfo,
-      mouseX: clientX,
-      mouseY: clientY,
-      dbClick,
-      ctrlKey: isCtrlPressed,
-    }
-
     if (process.env.NODE_ENV === 'development') {
       console.log('New selection', msg)
     }
 
-    message.self.send(msg)
+    message.self.send<MsgSelection>({
+      ...msg,
+      type: MsgType.Selection,
+    })
   } else {
     // post to upper frames/window
     window.parent.postMessage({
+      ...msg,
       type: PostMsgType.Selection,
-      selectionInfo,
-      mouseX: clientX,
-      mouseY: clientY,
-      dbClick,
-      ctrlKey: isCtrlPressed,
     } as PostMsgSelection, '*')
   }
 }

diff --git a/src/typings/message.ts b/src/typings/message.ts
@@ -1,6 +1,7 @@
 import { SelectionInfo } from '@/_helpers/selection'
-import { DictID, AppConfig } from '@/app-config'
+import { DictID } from '@/app-config'
 import { Word, Area as DBArea } from '@/background/database'
+import { Omit } from '@/typings/helpers'
 
 export const enum MsgType {
   /** Nothing */
@@ -66,19 +67,15 @@ export interface MsgSelection {
   readonly selectionInfo: SelectionInfo
   readonly mouseX: number
   readonly mouseY: number
-  readonly dbClick: boolean
-  readonly ctrlKey: boolean
+  readonly dbClick?: boolean
+  readonly ctrlKey?: boolean
+  readonly instant?: boolean
   /** force panel to skip reconciling position */
   readonly force?: boolean
 }
 
-export interface PostMsgSelection {
+export interface PostMsgSelection extends Omit<MsgSelection, 'type'> {
   readonly type: PostMsgType.Selection
-  readonly selectionInfo: SelectionInfo
-  readonly mouseX: number
-  readonly mouseY: number
-  readonly dbClick: boolean
-  readonly ctrlKey: boolean
 }
 
 interface MsgOpenUrlWithPlaceholder {