diff --git a/src/dev.ts b/src/dev.ts index 8e1e6af9..d52a90f4 100644 --- a/src/dev.ts +++ b/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) diff --git a/src/index.ts b/src/index.ts index a0bf99c2..934fd43d 100644 --- a/src/index.ts +++ b/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)') diff --git a/src/plugin/selection.ts b/src/plugin/selection.ts index 8b8bc79b..a2306aeb 100644 --- a/src/plugin/selection.ts +++ b/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 diff --git a/src/types/index.ts b/src/types/index.ts index 617b18b2..5abdfa6e 100644 --- a/src/types/index.ts +++ b/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