feat(content): add panel closing

src/content/components/DictPanelPortal/index.tsx

@@ -175,21 +175,23 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
   handleDragStart = (e: React.MouseEvent<HTMLDivElement>) => {
     // prevent mousedown dragging
     e.preventDefault()
+    e.stopPropagation()
     // e is from iframe, so there is offset
     this.lastMouseX = e.clientX + this.state.x
     this.lastMouseY = e.clientY + this.state.y
     this.setState({ isDragging: true })
-    window.addEventListener('mousemove', this.handleWindowMouseMove)
-    window.addEventListener('mouseup', this.handleDragEnd)
+    window.addEventListener('mousemove', this.handleWindowMouseMove, { capture: true })
+    window.addEventListener('mouseup', this.handleDragEnd, { capture: true })
   }
 
   handleDragEnd = () => {
     this.setState({ isDragging: false })
-    window.removeEventListener('mousemove', this.handleWindowMouseMove)
-    window.removeEventListener('mouseup', this.handleDragEnd)
+    window.removeEventListener('mousemove', this.handleWindowMouseMove, { capture: true })
+    window.removeEventListener('mouseup', this.handleDragEnd, { capture: true })
   }
 
   handleWindowMouseMove = (e: MouseEvent) => {
+    e.stopPropagation()
     const { x, y } = this.state
     this.setState({
       x: x + e.clientX - this.lastMouseX,
@@ -200,6 +202,7 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
   }
 
   handleFrameMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
     const { x, y } = this.state
     this.setState({
       x: x + x + e.clientX - this.lastMouseX,
@@ -209,6 +212,12 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
     this.lastMouseY = e.clientY + y
   }
 
+  handleFrameKeyUp = ({ key }: React.KeyboardEvent<HTMLDivElement>) => {
+    if (key === 'Escape') {
+      this.props.closePanel()
+    }
+  }
+
   render () {
     const { selection, config, isPinned, isMouseOnBowl } = this.props
 
@@ -233,8 +242,9 @@ export default class DictPanelPortal extends React.Component<DictPanelPortalProp
 
     return ReactDOM.createPortal(
       <div
-        onMouseMove={isDragging ? this.handleFrameMouseMove : undefined}
-        onMouseUp={isDragging ? this.handleDragEnd : undefined}
+        onMouseMoveCapture={isDragging ? this.handleFrameMouseMove : undefined}
+        onMouseUpCapture={isDragging ? this.handleDragEnd : undefined}
+        onKeyUp={this.handleFrameKeyUp}
       >
         {shouldShow
           ? <DictPanel

src/content/components/MenuBar/index.tsx

@@ -43,6 +43,12 @@ export class MenuBar extends React.PureComponent<MenuBarProps & { t: Translation
     message.send(msg)
   }
 
+  closePanel = () => {
+    const { closePanel, isPinned, pinPanel } = this.props
+    closePanel()
+    if (isPinned) { pinPanel() }
+  }
+
   handleSearchBoxInput = (e: KeyboardEvent<HTMLInputElement>) => {
     this.text = e.currentTarget.value
   }
@@ -166,7 +172,7 @@ export class MenuBar extends React.PureComponent<MenuBarProps & { t: Translation
         <svg
           className='panel-MenuBar_IconClose'
           width='30' height='30' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.112 31.112'
-          onClick={closePanel}
+          onClick={this.closePanel}
         >
           <title>{t('tipClosePanel')}</title>
           <path d='M31.112 1.414L29.698 0 15.556 14.142 1.414 0 0 1.414l14.142 14.142L0 29.698l1.414 1.414L15.556 16.97l14.142 14.142 1.414-1.414L16.97 15.556'/>

src/content/containers/DictPanelContainer.tsx

@@ -2,6 +2,7 @@ import { connect } from 'react-redux'
 import DictPanelPortal, { DictPanelPortalProps, DictPanelPortalDispatchers } from '../components/DictPanelPortal'
 import { StoreState } from '../redux/modules'
 import { searchText } from '../redux/modules/dictionaries'
+import { sendEmptySelection } from '../redux/modules/selection'
 import { addToNotebook, removeFromNotebook, pinPanel, showPanel } from '../redux/modules/widget'
 
 export const mapStateToProps = ({
@@ -29,7 +30,7 @@ export const mapDispatchToProps: { [k in keyof DictPanelPortalDispatchers]: Func
   pinPanel,
 
   shareImg: () => {/** @todo */},
-  closePanel: () => {/** @todo */},
+  closePanel: sendEmptySelection,
 }
 
 export default connect(

src/content/redux/modules/selection.ts

@@ -41,7 +41,7 @@ export default function reducer (state = initState, action): SelectionState {
 type Action = { type: Actions, payload?: any }
 
 /** When new selection is made */
-export function newSelection (selection): Action {
+export function newSelection (selection: MsgSelection): Action {
   return { type: Actions.NEW_SELECTION, payload: selection }
 }
 
@@ -55,6 +55,20 @@ type Dispatcher = (
 
 export function listenSelection (): Dispatcher {
   return dispatch => {
-    message.self.addListener(MsgType.Selection, message => dispatch(newSelection(message)))
+    message.self.addListener<MsgSelection>(
+      MsgType.Selection,
+      message => dispatch(newSelection(message)),
+    )
   }
 }
+
+export function sendEmptySelection (): Dispatcher {
+  return dispatch => dispatch(newSelection({
+    type: MsgType.Selection,
+    selectionInfo: getDefaultSelectionInfo(),
+    mouseX: 0,
+    mouseY: 0,
+    dbClick: false,
+    ctrlKey: false,
+  }))
+}