Merge pull request #233 from phyng/master

SSShooter · web-flow · commit b6cd99e8f2c0 · 2023-11-03T17:01:02.000+08:00
fix: context menu and selection position
diff --git a/index.html b/index.html
@@ -28,8 +28,11 @@
 
 <body>
   <div id="map"></div>
-  <div id="map2"></div>
+  <!-- test transform compatibility -->
+  <div style="transform: translateX(30px) translateY(20px);">
+    <div id="map2"></div>
+  </div>
   <script type="module" src="/src/dev.ts"></script>
 </body>
 
-</html>
+</html>
diff --git a/readme.md b/readme.md
@@ -351,7 +351,7 @@ Be aware that Mind Elixir will not observe the change of `prefers-color-scheme`.
 
 ```
 pnpm i
-npm start
+pnpm dev
 ```
 
 Test generated files with `dev.dist.ts`:
diff --git a/src/plugin/contextMenu.ts b/src/plugin/contextMenu.ts
@@ -2,6 +2,7 @@ import i18n from '../i18n'
 import type { Topic } from '../types/dom'
 import type { MindElixirInstance } from '../types/index'
 import { encodeHTML, isTopic } from '../utils/index'
+import dragMoveHelper from '../utils/dragMoveHelper'
 import './contextMenu.less'
 
 export default function (mind: MindElixirInstance, option: any) {
@@ -91,21 +92,36 @@ export default function (mind: MindElixirInstance, option: any) {
       }
       if (!mind.currentNodes) mind.selectNode(target)
       menuContainer.hidden = false
+
+      if (dragMoveHelper.mousedown) {
+        dragMoveHelper.mousedown = false
+      }
+
+      menuUl.style.top = ''
+      menuUl.style.bottom = ''
+      menuUl.style.left = ''
+      menuUl.style.right = ''
+      const rect = menuUl.getBoundingClientRect()
       const height = menuUl.offsetHeight
       const width = menuUl.offsetWidth
-      if (height + e.clientY > window.innerHeight) {
+
+      const relativeY = e.clientY - rect.top
+      const relativeX = e.clientX - rect.left
+
+      if (height + relativeY > window.innerHeight) {
         menuUl.style.top = ''
         menuUl.style.bottom = '0px'
       } else {
         menuUl.style.bottom = ''
-        menuUl.style.top = e.clientY + 15 + 'px'
+        menuUl.style.top = relativeY + 15 + 'px'
       }
-      if (width + e.clientX > window.innerWidth) {
+
+      if (width + relativeX > window.innerWidth) {
         menuUl.style.left = ''
         menuUl.style.right = '0px'
       } else {
         menuUl.style.right = ''
-        menuUl.style.left = e.clientX + 10 + 'px'
+        menuUl.style.left = relativeX + 10 + 'px'
       }
     }
   }
diff --git a/src/plugin/selection.ts b/src/plugin/selection.ts
@@ -6,7 +6,7 @@ export default function (mei: MindElixirInstance) {
   const selection = new SelectionArea({
     selectables: ['.map-container me-tpc'],
     boundaries: [mei.container],
-    container: mei.container,
+    container: 'body',
     behaviour: {
       // Scroll configuration.
       scrolling: {
@@ -28,6 +28,12 @@ export default function (mei: MindElixirInstance) {
       if (((event as MouseEvent).target as Topic).tagName === 'ME-TPC') return false
       if (((event as MouseEvent).target as HTMLElement).id === 'input-box') return false
       if (((event as MouseEvent).target as HTMLElement).className === 'circle') return false
+      const selectionAreaElement = selection.getSelectionArea()
+      selectionAreaElement.style.background = '#4f90f22d'
+      selectionAreaElement.style.border = '1px solid #4f90f2'
+      if (selectionAreaElement.parentElement) {
+        selectionAreaElement.parentElement.style.zIndex = '9999'
+      }
       return true
     })
     .on('start', ({ event }) => {
