feat: add selectionContainer options, mouseSelectionButton options is…

… WIP

src/dev.ts

@@ -26,6 +26,7 @@ const options: Options = {
   direction: MindElixir.SIDE,
   // direction: MindElixir.RIGHT,
   locale: 'en',
+  mouseSelectionButton: 2,
   draggable: true,
   editable: true,
   contextMenu: true,
@@ -66,6 +67,7 @@ mind.init(example)
 
 const m2 = new MindElixir({
   el: '#map2',
+  selectionContainer: 'body', // use body to make selection usable when transform is not 0
 })
 m2.init(data)
 

src/index.ts

@@ -31,6 +31,7 @@ function MindElixir(
     toolBar,
     keypress,
     mouseSelectionButton,
+    selectionContainer,
     before,
     newTopicName,
     allowUndo,
@@ -81,6 +82,8 @@ function MindElixir(
   this.bus = Bus.create()
 
   this.container = $d.createElement('div') // map container
+  this.selectionContainer = selectionContainer || this.container
+
   this.container.className = 'map-container'
 
   const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

src/plugin/selection.ts

@@ -1,13 +1,16 @@
+import type { Trigger } from '@viselect/vanilla'
 import SelectionArea from '@viselect/vanilla'
 import type { MindElixirInstance, Topic } from '..'
 import dragMoveHelper from '../utils/dragMoveHelper'
 
 export default function (mei: MindElixirInstance) {
+  const triggers: Trigger[] = mei.mouseSelectionButton === 2 ? [{ button: 0, modifiers: ['ctrl'] }, 2] : [0]
   const selection = new SelectionArea({
     selectables: ['.map-container me-tpc'],
     boundaries: [mei.container],
-    container: 'body',
+    container: mei.selectionContainer,
     behaviour: {
+      triggers,
       // Scroll configuration.
       scrolling: {
         // On scrollable areas the number on px per frame is devided by this amount.
@@ -24,7 +27,6 @@ export default function (mei: MindElixirInstance) {
     },
   })
     .on('beforestart', ({ event }) => {
-      if ((event as MouseEvent).button !== mei.mouseSelectionButton) return false
       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

src/types/index.ts

@@ -105,6 +105,7 @@ export interface MindElixirInstance extends MindElixirMethods {
   redo: () => void
 
   selection: SelectionArea
+  selectionContainer?: string | HTMLElement
 }
 type PathString = string
 /**
@@ -132,6 +133,7 @@ export type Options = {
   mobileMenu?: boolean
   theme?: Theme
   nodeMenu?: boolean
+  selectionContainer?: string | HTMLElement
 }
 
 export type Uid = string