Selection Area

Simple JavaScript seletion area to any DOM container element.

Installation

Install with npm

npm install selection-area

Install with yarn

yarn add selection-area

From Source Code

Clone or download zipped source code into node_modules project folder.

git clone https://github.com/lucasmenendez/selection-area.git <project>/node_modules/selection-area

Including SelectionArea

Import dist version:

<script src="/node_modules/webproletarian/dist/selection-area.js"></script>

Or import with ES6 import:

import { SelectionArea } from 'selection-area';

Demo

Checkout the demo here.

Documentation

Table of Contents

• Area
  • Parameters
  • instance
    • Parameters
  • resize
    • Parameters
  • move
    • Parameters
  • destroy
  • isOver
    • Parameters
• SelectionArea
  • Parameters
  • Examples
  • onSelect
    • Parameters
  • checkConfig
    • Parameters
  • listenMouse
  • initArea
    • Parameters
  • updateArea
    • Parameters
  • removeArea
    • Parameters
  • checkIntersections

Area

Area class includes all required functions to emulate the area behaviour. Constructor initializes main params of area Element and stores area DOM Element ID

Parameters

• id string Area Element DOM ID
• x number Initial area position on x axis, default 0 (optional, default 0)
• y number Initial area position on y axis, default 0 (optional, default 0)

instance

Instance function creates DOM Element for selection area, assings the ID provided and sets default style to it. The function receives container Element, append created area to it and stores both of them into the current instance.

Parameters

• parent Element Container Element to append selection area

resize

Recalculates current area dimensions and call uptdate to reset current DOM Element.

Parameters

• x number Current cursor position on x axis
• y number Current cursor position on y axis

move

Recalculates current area DOM Element position based en current cursor position.

Parameters

• posx number Current cursor position on x axis
• posy number Current cursor position on y axis

destroy

Deletes current DOM Element from parent container.

isOver

Calculates if target Element dimensions and current selection area DOM Element dimensions intersects in any side.

Parameters

• target Element Target DOM Element to check if area is over it

Returns any Boolean with intersection result

SelectionArea

SelectionArea class listen mouse movements to create and adapt a selection area checking if intersects with any target child element and returns the content of defined property of that childs.

Parameters

• config Object Config object
  • config.container Element DOM Element to make selectable
  • config.targetSelector string DOM selector of selectables childs
  • config.areaId string? DOM ID for selection area to define styles
  • config.property string? Property to get from selected childs
  • config.callback function? Function to call when selection ends

Examples

import { SelectionArea } from 'selection-area';

let container = document.querySelector('.parent');
let targetSelector = '.child';
let callback = selection => {
     if (selection.length == 0) console.warn("empty selection");
     else console.log(selection);
}

let selectable = new Selectable({ container, targetSelector, callback });

onSelect

Function stores user callback to invoke it when selection ends.

Parameters

• callback function Function defined as callback by user

checkConfig

Function that checks if all required configuration are provided as param, extract whole configurayions inside it and stores into current instance.

Parameters

• config Onject Configuration object definition

listenMouse

Sets custom listeners to mouse down, move and up events.

initArea

initArea funtion clears current selection, creates new area with ID provided and instances it into current container.

Parameters

• e MouseEvent 'mousedown' event metadata

updateArea

updateArea captures current mouse position and updates current selection area with that position, resizing area and moving it.

Parameters

• e MouseEvent 'mousemove' event metadata.

removeArea

removeArea extract selected items, destroy current selection area and invokes callback passing values of selected items.

Parameters

• e MouseEvent 'mouseup' event metadata.

checkIntersections

checkIntersecionts iterates over all posible targets and checks if current selection area intersects with each of them. Stores all included values of user defined child property.