import { INodeUi , XYPosition } from '@/Interface' ; import mixins from 'vue-typed-mixins' ; import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers' ; import { nodeIndex } from '@/components/mixins/nodeIndex' ; import { getMousePosition , getRelativePosition } from '@/views/canvasHelpers' ; export const mouseSelect = mixins ( deviceSupportHelpers , nodeIndex ) . extend ( { data ( ) { return { selectActive : false , selectBox : document . createElement ( 'span' ) , } ; } , mounted ( ) { this . createSelectBox ( ) ; } , methods : { createSelectBox ( ) { this . selectBox . id = 'select-box' ; this . selectBox . style . margin = '0px auto' ; this . selectBox . style . border = '2px dotted #FF0000' ; this . selectBox . style . position = 'absolute' ; this . selectBox . style . zIndex = '100' ; this . selectBox . style . visibility = 'hidden' ; this . selectBox . addEventListener ( 'mouseup' , this . mouseUpMouseSelect ) ; const nodeViewEl = this . $el . querySelector ( '#node-view' ) as HTMLDivElement ; nodeViewEl . appendChild ( this . selectBox ) ; } , isCtrlKeyPressed ( e ) { if ( this . isTouchDevice === true ) { return true ; } if ( this . isMacOs ) { return e . metaKey ; } return e . ctrlKey ; } , getMousePositionWithinNodeView ( event ) { const [ x , y ] = getMousePosition ( event ) ; return getRelativePosition ( x , y , this . nodeViewScale , this . $store . getters . getNodeViewOffsetPosition ) ; } , showSelectBox ( event ) { const [ x , y ] = this . getMousePositionWithinNodeView ( event ) ; this . selectBox = Object . assign ( this . selectBox , { x , y } ) ; this . selectBox . style . left = this . selectBox . x + 'px' ; this . selectBox . style . top = this . selectBox . y + 'px' ; this . selectBox . style . visibility = 'visible' ; this . selectActive = true ; } , updateSelectBox ( event ) { const selectionBox = this . getSelectionBox ( event ) ; this . selectBox . style . left = selectionBox . x + 'px' ; this . selectBox . style . top = selectionBox . y + 'px' ; this . selectBox . style . width = selectionBox . width + 'px' ; this . selectBox . style . height = selectionBox . height + 'px' ; } , hideSelectBox ( ) { this . selectBox . style . visibility = 'hidden' ; this . selectBox . x = 0 ; this . selectBox . y = 0 ; this . selectBox . style . left = '0px' ; this . selectBox . style . top = '0px' ; this . selectBox . style . width = '0px' ; this . selectBox . style . height = '0px' ; this . selectActive = false ; } , getSelectionBox ( event ) { const [ x , y ] = this . getMousePositionWithinNodeView ( event ) ; return { x : Math . min ( x , this . selectBox . x ) , y : Math . min ( y , this . selectBox . y ) , width : Math . abs ( x - this . selectBox . x ) , height : Math . abs ( y - this . selectBox . y ) , } ; } , getNodesInSelection ( event ) { const returnNodes = [ ] ; const selectionBox = this . getSelectionBox ( event ) ; this . $store . getters . allNodes . forEach ( ( node ) => { if ( node . position [ 0 ] < selectionBox . x || node . position [ 0 ] > ( selectionBox . x + selectionBox . width ) ) { return ; } if ( node . position [ 1 ] < selectionBox . y || node . position [ 1 ] > ( selectionBox . y + selectionBox . height ) ) { return ; } returnNodes . push ( node ) ; } ) ; return returnNodes ; } , mouseDownMouseSelect ( e ) { if ( this . isCtrlKeyPressed ( e ) === true ) { return ; } if ( this . $store . getters . isActionActive ( 'dragActive' ) ) { return ; } this . showSelectBox ( e ) ; this . $el . addEventListener ( 'mousemove' , this . mouseMoveSelect ) ; } , mouseUpMouseSelect ( e ) { if ( this . selectActive === false ) { if ( this . isTouchDevice === true ) { if ( e . target && e . target . id . includes ( 'node-view' ) ) { this . deselectAllNodes ( ) ; } } return ; } this . $el . removeEventListener ( 'mousemove' , this . mouseMoveSelect ) ; this . deselectAllNodes ( ) ; const selectedNodes = this . getNodesInSelection ( e ) ; selectedNodes . forEach ( ( node ) => { this . nodeSelected ( node ) ; } ) ; if ( selectedNodes . length === 1 ) { this . $store . commit ( 'setLastSelectedNode' , selectedNodes [ 0 ] . name ) ; } this . hideSelectBox ( ) ; } , mouseMoveSelect ( e ) { if ( e . buttons === 0 ) { this . mouseUpMouseSelect ( e ) ; return ; } this . updateSelectBox ( e ) ; } , nodeDeselected ( node ) { this . $store . commit ( 'removeNodeFromSelection' , node ) ; const nodeElement = `node-${ this . getNodeIndex ( node . name ) }` ; this . instance . removeFromDragSelection ( nodeElement ) ; } , nodeSelected ( node ) { this . $store . commit ( 'addSelectedNode' , node ) ; const nodeElement = `node-${ this . getNodeIndex ( node . name ) }` ; this . instance . addToDragSelection ( nodeElement ) ; } , deselectAllNodes ( ) { this . instance . clearDragSelection ( ) ; this . $store . commit ( 'resetSelectedNodes' ) ; this . $store . commit ( 'setLastSelectedNode' , null ) ; this . $store . commit ( 'setLastSelectedNodeOutputIndex' , null ) ; this . $store . commit ( 'setActiveNode' , null ) ; this . lastSelectedConnection = null ; this . newNodeInsertPosition = null ; } , } , } ) ;