Markmap make mouse input toggle (#655)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

public/locales/en.json

@@ -7,6 +7,10 @@
         "highlightCode": {
             "copyCode": "Copy code to clipboard"
         },
+        "markmap": {
+            "locked": "Mouse input locked",
+            "unlocked": "Mouse input unlocked"
+        },
         "flowchart": {
             "invalidSyntax": "Invalid flowchart.js syntax!"
         },

src/components/common/lock-button/lock-button.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../fork-awesome/fork-awesome-icon'
+
+export interface LockButtonProps {
+  locked: boolean,
+  onLockedChanged: (newState: boolean) => void
+  title: string
+}
+
+export const LockButton: React.FC<LockButtonProps> = ({ locked, onLockedChanged, title }) => {
+  return (
+    <Button variant='dark' size='sm' onClick={() => onLockedChanged(!locked)} title={title}>
+      { locked
+        ? <ForkAwesomeIcon icon='lock'/>
+        : <ForkAwesomeIcon icon='unlock'/>
+      }
+    </Button>
+  )
+}

src/components/markdown-renderer/replace-components/markmap/markmap-frame.tsx

@@ -1,11 +1,37 @@
-import React, { useEffect, useRef } from 'react'
+import React, { Fragment, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { LockButton } from '../../../common/lock-button/lock-button'
 
 export interface MarkmapFrameProps {
   code: string
 }
 
+const blockHandler = (event: Event): void => {
+  event.stopPropagation()
+}
+
 export const MarkmapFrame: React.FC<MarkmapFrameProps> = ({ code }) => {
+  const { t } = useTranslation()
   const diagramContainer = useRef<HTMLDivElement>(null)
+  const [disablePanAndZoom, setDisablePanAndZoom] = useState(true)
+
+  useEffect(() => {
+    if (diagramContainer.current) {
+      if (disablePanAndZoom) {
+        diagramContainer.current.addEventListener('wheel', blockHandler, true)
+        diagramContainer.current.addEventListener('mousedown', blockHandler, true)
+        diagramContainer.current.addEventListener('click', blockHandler, true)
+        diagramContainer.current.addEventListener('dblclick', blockHandler, true)
+        diagramContainer.current.addEventListener('touchstart', blockHandler, true)
+      } else {
+        diagramContainer.current.removeEventListener('wheel', blockHandler, true)
+        diagramContainer.current.removeEventListener('mousedown', blockHandler, true)
+        diagramContainer.current.removeEventListener('click', blockHandler, true)
+        diagramContainer.current.removeEventListener('dblclick', blockHandler, true)
+        diagramContainer.current.removeEventListener('touchstart', blockHandler, true)
+      }
+    }
+  }, [diagramContainer, disablePanAndZoom])
 
   useEffect(() => {
     if (!diagramContainer.current) {
@@ -33,5 +59,12 @@ export const MarkmapFrame: React.FC<MarkmapFrameProps> = ({ code }) => {
       }).catch(() => { console.error('error while loading markmap') })
   }, [code])
 
-  return <div className={'text-center'} ref={diagramContainer}/>
+  return (
+    <Fragment>
+      <div className={'text-center'} ref={diagramContainer}/>
+      <div className={'text-right button-inside'}>
+        <LockButton locked={disablePanAndZoom} onLockedChanged={(newState => setDisablePanAndZoom(newState))} title={ disablePanAndZoom ? t('renderer.markmap.locked') : t('renderer.markmap.unlocked')}/>
+      </div>
+    </Fragment>
+  )
 }