selecto - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

declaration/consts.d.ts

 export declare const PROPERTIES: readonly ["selectableTargets", "continueSelect", "hitRate"];
-export declare const EVENTS: readonly ["dragStart", "selectStart", "select", "selectEnd"];
+export declare const EVENTS: readonly ["dragStart", "selectStart", "select", "selectEnd", "keydown", "keyup"];
 export declare const METHODS: readonly ["click", "setSelectedTargets"];

declaration/index.d.ts

 import Selecto from "./Selecto";
 export default Selecto;
+export * from "./consts";
 export * from "./types";

declaration/Selecto.d.ts

 import Component from "@egjs/component";
-import { SelectoOptions, SelectoProperties } from "./types";
-export default class Selecto extends Component {
+import { SelectoOptions, SelectoProperties, SelectoEvents } from "./types";
+declare class Selecto extends Component {
     options: SelectoOptions;
@@ -11,6 +11,11 @@ private target;
     private differ;
+    private keycon;
     constructor(options?: Partial<SelectoOptions>);
     setSelectedTargets(selectedTargets: Array<HTMLElement | SVGElement>): void;
+    setKeyContainer(keyContainer: HTMLElement | Document | Window): void;
+    setToggleContinueSelect(toggleContinueSelect: string[] | string): void;
     destroy(): void;
     click(e: MouseEvent | TouchEvent, clickedTarget?: Element): void;
+    private setKeyController;
+    private setKeyEvent;
     private initElement;
@@ -25,4 +30,16 @@ private hitTest;
     private onDragEnd;
+    private onKeyDown;
+    private onKeyUp;
 }
-export default interface Selecto extends Component, SelectoProperties {
+interface Selecto extends Component, SelectoProperties {
+    on<T extends keyof SelectoEvents>(eventName: T, handlerToAttach: (event: SelectoEvents[T]) => any): this;
+    on(eventName: string, handlerToAttach: (event: {
+        [key: string]: any;
+    }) => any): this;
+    on(events: {
+        [key: string]: (event: {
+            [key: string]: any;
+        }) => any;
+    }): this;
 }
+export default Selecto;

declaration/types.d.ts

 import { IObject } from "@daybrush/utils";
 import { PROPERTIES, METHODS } from "./consts";
 import Selecto from "./Selecto";
+import { OnDragStart as OnParentDragStart } from "@daybrush/drag";
 export interface SelectoOptions {
@@ -12,2 +13,4 @@ target: HTMLElement | null;
     continueSelect: boolean;
+    toggleContinueSelect: string[] | string | null;
+    keyContainer: Document | HTMLElement | Window | null;
     hitRate: number;
@@ -45,2 +48,19 @@ }
 }
+export interface OnKeyEvent {
+    datas: IObject<any>;
+    clientX: number;
+    clientY: number;
+    inputEvent: any;
+}
+export interface OnDragStart extends OnParentDragStart {
+    stop(): void;
+}
+export interface SelectoEvents {
+    dragStart: OnDragStart;
+    selectStart: OnSelect;
+    select: OnSelect;
+    selectEnd: OnSelectEnd;
+    keydown: OnKeyEvent;
+    keyup: OnKeyEvent;
+}
 export declare type SelectoProperties = {
@@ -47,0 +67,0 @@ [P in typeof PROPERTIES[number]]: SelectoOptions[P];

declaration/utils.d.ts

@@ -9,1 +9,2 @@ import { Hypertext } from "./types";
 export declare function h(tag: string, attrs: IObject<any>, ...children: Hypertext[]): Hypertext;
+export declare function diffValue<T>(prev: T, cur: T, func: (prev: T, cur: T) => void): void;

dist/selecto.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/selecto.git
-version: 0.0.6
+version: 0.0.7
 */
@@ -18,2 +18,3 @@ 'use strict';
 var ChildrenDiffer = require('@egjs/children-differ');
+var KeyController = require('keycon');
 
@@ -163,6 +164,29 @@ /*! *****************************************************************************
 }
+function diffValue(prev, cur, func) {
+  if (prev !== cur) {
+    func(prev, cur);
+  }
+}
 
+/**
+ * @memberof Selecto
+ */
 var PROPERTIES = ["selectableTargets", "continueSelect", "hitRate"];
+/**
+ * @memberof Selecto
+ */
 
+var EVENTS = ["dragStart", "selectStart", "select", "selectEnd", "keydown", "keyup"];
+/**
+ * @memberof Selecto
+ */
+
+var METHODS = ["click", "setSelectedTargets"];
+
 var injector = styled("\n:host {\n    position: absolute;\n    display: none;\n    border: 1px solid #4af;\n    background: rgba(68, 170, 255, 0.5);\n    z-index: 100;\n}\n");
+/**
+ * Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
+ * @sort 1
+ * @extends eg.Component
+ */
 
@@ -173,3 +197,7 @@ var Selecto =
   __extends(Selecto, _super);
+  /**
+   *
+   */
 
+
   function Selecto(options) {
@@ -233,2 +261,31 @@ if (options === void 0) {
       var isTrusted = type === "mousedown" || type === "touchstart";
+      /**
+       * When the drag starts, the dragStart event is called.
+       * Call the stop () function if you have a specific element or don't want to raise a select
+       * @memberof Selecto
+       * @event dragStart
+       * @param {OnDragStart} - Parameters for the dragStart event
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   selectByClick: true,
+       *   selectFromInside: false,
+       * });
+       *
+       * selecto.on("dragStart", e => {
+       *   if (e.inputEvent.target.tagName === "SPAN") {
+       *     e.stop();
+       *   }
+       * }).on("select", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
+
       var result = isTrusted ? _this.trigger("dragStart", e) : true;
@@ -295,2 +352,66 @@
 
+    _this.onKeyDown = function () {
+      _this.continueSelect = true;
+      /**
+       * When you keydown the key you specified in toggleContinueSelect, the keydown event is called.
+       * @memberof Selecto
+       * @event keydown
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   toggleContinueSelect: "shift";
+       *   keyContainer: window,
+       * });
+       *
+       * selecto.on("keydown", () => {
+       *   document.querySelector(".button").classList.add("selected");
+       * }).on("keyup", () => {
+       *   document.querySelector(".button").classList.remove("selected");
+       * }).on("select", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
+
+      _this.trigger("keydown", {});
+    };
+
+    _this.onKeyUp = function () {
+      _this.continueSelect = false;
+      /**
+       * When you keyup the key you specified in toggleContinueSelect, the keyup event is called.
+       * @memberof Selecto
+       * @event keyup
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   toggleContinueSelect: "shift";
+       *   keyContainer: window,
+       * });
+       *
+       * selecto.on("keydown", () => {
+       *   document.querySelector(".button").classList.add("selected");
+       * }).on("keyup", () => {
+       *   document.querySelector(".button").classList.remove("selected");
+       * }).on("select", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
+
+      _this.trigger("keyup", {});
+    };
+
     _this.target = options.target;
@@ -306,3 +427,5 @@ _this.container = options.container;
       hitRate: 100,
-      continueSelect: false
+      continueSelect: false,
+      toggleContinueSelect: null,
+      keyContainer: null
     }, options);
@@ -312,5 +435,11 @@
 
+    _this.setKeyController();
+
     return _this;
   }
+  /**
+   * You can set the currently selected targets.
+   */
 
+
   var __proto = Selecto.prototype;
@@ -323,5 +452,34 @@
 
+  __proto.setKeyContainer = function (keyContainer) {
+    var _this = this;
+
+    var options = this.options;
+    diffValue(options.keyContainer, keyContainer, function () {
+      options.keyContainer = keyContainer;
+
+      _this.setKeyController();
+    });
+  };
+
+  __proto.setToggleContinueSelect = function (toggleContinueSelect) {
+    var _this = this;
+
+    var options = this.options;
+    diffValue(options.toggleContinueSelect, toggleContinueSelect, function () {
+      options.toggleContinueSelect = toggleContinueSelect;
+
+      _this.setKeyEvent();
+    });
+  };
+  /**
+   * Destroy elements, properties, and events.
+   */
+
+
   __proto.destroy = function () {
+    this.off();
+    this.keycon && this.keycon.destroy();
     this.dragger.unset();
     this.injectResult.destroy();
+    this.keycon = null;
     this.dragger = null;
@@ -333,3 +491,7 @@ this.injectResult = null;
   };
+  /**
+   *
+   */
 
+
   __proto.click = function (e, clickedTarget) {
@@ -352,2 +514,34 @@ var _a = getClient(e),
 
+  __proto.setKeyController = function () {
+    var _a = this.options,
+        keyContainer = _a.keyContainer,
+        toggleContinueSelect = _a.toggleContinueSelect;
+
+    if (this.keycon) {
+      this.keycon.destroy();
+      this.keycon = null;
+    }
+
+    if (toggleContinueSelect) {
+      this.keycon = new KeyController(keyContainer || window);
+    }
+
+    this.setKeyEvent();
+  };
+
+  __proto.setKeyEvent = function () {
+    var toggleContinueSelect = this.options.toggleContinueSelect;
+
+    if (!this.keycon) {
+      this.setKeyController();
+      return;
+    } else {
+      this.keycon.off();
+    }
+
+    if (toggleContinueSelect) {
+      this.keycon.keydown(toggleContinueSelect, this.onKeyDown).keyup(toggleContinueSelect, this.onKeyUp);
+    }
+  };
+
   __proto.initElement = function () {
@@ -443,2 +637,32 @@ this.target = createElement(h("div", {
     if (isStart) {
+      /**
+       * When the select(drag) starts, the selectStart event is called.
+       * @memberof Selecto
+       * @event selectStart
+       * @param {Selecto.OnSelect} - Parameters for the selectStart event
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   selectByClick: true,
+       *   selectFromInside: false,
+       * });
+       *
+       * selecto.on("selectStart", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * }).on("selectEnd", e => {
+       *   e.afterAdded.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.afterRemoved.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
       this.trigger("selectStart", {
@@ -457,2 +681,25 @@ selected: selectedTargets,
     if (added.length || removed.length) {
+      /**
+       * When the select in real time, the select event is called.
+       * @memberof Selecto
+       * @event select
+       * @param {Selecto.OnSelect} - Parameters for the select event
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   selectByClick: true,
+       *   selectFromInside: false,
+       * });
+       *
+       * selecto.on("select", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
       this.trigger("select", {
@@ -486,2 +733,33 @@ selected: selectedTargets,
     var isDragStart = type === "mousedown" || type === "touchstart";
+    /**
+     * When the select(dragEnd or click) ends, the selectEnd event is called.
+     * @memberof Selecto
+     * @event selectEnd
+     * @param {Selecto.OnSelectEnd} - Parameters for the selectEnd event
+     * @example
+     * import Selecto from "selecto";
+     *
+     * const selecto = new Selecto({
+     *   container: document.body,
+     *   selectByClick: true,
+     *   selectFromInside: false,
+     * });
+     *
+     * selecto.on("selectStart", e => {
+     *   e.added.forEach(el => {
+     *     el.classList.add("selected");
+     *   });
+     *   e.removed.forEach(el => {
+     *     el.classList.remove("selected");
+     *   });
+     * }).on("selectEnd", e => {
+     *   e.afterAdded.forEach(el => {
+     *     el.classList.add("selected");
+     *   });
+     *   e.afterRemoved.forEach(el => {
+     *     el.classList.remove("selected");
+     *   });
+     * });
+     */
+
     this.trigger("selectEnd", {
@@ -507,12 +785,22 @@ selected: selectedTargets,
   Selecto = __decorate([frameworkUtils.Properties(PROPERTIES, function (prototype, property) {
-    Object.defineProperty(prototype, property, {
+    var attributes = {
+      enumerable: true,
+      configurable: true,
       get: function () {
         return this.options[property];
-      },
-      set: function (value) {
+      }
+    };
+    var setter = utils.camelize("set " + property);
+
+    if (prototype[setter]) {
+      attributes.set = function (value) {
+        this[setter](value);
+      };
+    } else {
+      attributes.set = function (value) {
         this.options[property] = value;
-      },
-      enumerable: true,
-      configurable: true
-    });
+      };
+    }
+
+    Object.defineProperty(prototype, property, attributes);
   })], Selecto);
@@ -522,3 +810,6 @@ return Selecto;
 
+exports.EVENTS = EVENTS;
+exports.METHODS = METHODS;
+exports.PROPERTIES = PROPERTIES;
 exports.default = Selecto;
 //# sourceMappingURL=selecto.cjs.js.map

dist/selecto.esm.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/selecto.git
-version: 0.0.6
+version: 0.0.7
 */
@@ -14,4 +14,5 @@ import Component from '@egjs/component';
 import { Properties } from 'framework-utils';
-import { hasClass, addClass, isObject } from '@daybrush/utils';
+import { hasClass, addClass, isObject, camelize } from '@daybrush/utils';
 import ChildrenDiffer, { diff } from '@egjs/children-differ';
+import KeyController from 'keycon';
 
@@ -161,6 +162,29 @@ /*! *****************************************************************************
 }
+function diffValue(prev, cur, func) {
+  if (prev !== cur) {
+    func(prev, cur);
+  }
+}
 
+/**
+ * @memberof Selecto
+ */
 var PROPERTIES = ["selectableTargets", "continueSelect", "hitRate"];
+/**
+ * @memberof Selecto
+ */
 
+var EVENTS = ["dragStart", "selectStart", "select", "selectEnd", "keydown", "keyup"];
+/**
+ * @memberof Selecto
+ */
+
+var METHODS = ["click", "setSelectedTargets"];
+
 var injector = styled("\n:host {\n    position: absolute;\n    display: none;\n    border: 1px solid #4af;\n    background: rgba(68, 170, 255, 0.5);\n    z-index: 100;\n}\n");
+/**
+ * Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
+ * @sort 1
+ * @extends eg.Component
+ */
 
@@ -171,3 +195,7 @@ var Selecto =
   __extends(Selecto, _super);
+  /**
+   *
+   */
 
+
   function Selecto(options) {
@@ -231,2 +259,31 @@ if (options === void 0) {
       var isTrusted = type === "mousedown" || type === "touchstart";
+      /**
+       * When the drag starts, the dragStart event is called.
+       * Call the stop () function if you have a specific element or don't want to raise a select
+       * @memberof Selecto
+       * @event dragStart
+       * @param {OnDragStart} - Parameters for the dragStart event
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   selectByClick: true,
+       *   selectFromInside: false,
+       * });
+       *
+       * selecto.on("dragStart", e => {
+       *   if (e.inputEvent.target.tagName === "SPAN") {
+       *     e.stop();
+       *   }
+       * }).on("select", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
+
       var result = isTrusted ? _this.trigger("dragStart", e) : true;
@@ -293,2 +350,66 @@
 
+    _this.onKeyDown = function () {
+      _this.continueSelect = true;
+      /**
+       * When you keydown the key you specified in toggleContinueSelect, the keydown event is called.
+       * @memberof Selecto
+       * @event keydown
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   toggleContinueSelect: "shift";
+       *   keyContainer: window,
+       * });
+       *
+       * selecto.on("keydown", () => {
+       *   document.querySelector(".button").classList.add("selected");
+       * }).on("keyup", () => {
+       *   document.querySelector(".button").classList.remove("selected");
+       * }).on("select", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
+
+      _this.trigger("keydown", {});
+    };
+
+    _this.onKeyUp = function () {
+      _this.continueSelect = false;
+      /**
+       * When you keyup the key you specified in toggleContinueSelect, the keyup event is called.
+       * @memberof Selecto
+       * @event keyup
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   toggleContinueSelect: "shift";
+       *   keyContainer: window,
+       * });
+       *
+       * selecto.on("keydown", () => {
+       *   document.querySelector(".button").classList.add("selected");
+       * }).on("keyup", () => {
+       *   document.querySelector(".button").classList.remove("selected");
+       * }).on("select", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
+
+      _this.trigger("keyup", {});
+    };
+
     _this.target = options.target;
@@ -304,3 +425,5 @@ _this.container = options.container;
       hitRate: 100,
-      continueSelect: false
+      continueSelect: false,
+      toggleContinueSelect: null,
+      keyContainer: null
     }, options);
@@ -310,5 +433,11 @@
 
+    _this.setKeyController();
+
     return _this;
   }
+  /**
+   * You can set the currently selected targets.
+   */
 
+
   var __proto = Selecto.prototype;
@@ -321,5 +450,34 @@
 
+  __proto.setKeyContainer = function (keyContainer) {
+    var _this = this;
+
+    var options = this.options;
+    diffValue(options.keyContainer, keyContainer, function () {
+      options.keyContainer = keyContainer;
+
+      _this.setKeyController();
+    });
+  };
+
+  __proto.setToggleContinueSelect = function (toggleContinueSelect) {
+    var _this = this;
+
+    var options = this.options;
+    diffValue(options.toggleContinueSelect, toggleContinueSelect, function () {
+      options.toggleContinueSelect = toggleContinueSelect;
+
+      _this.setKeyEvent();
+    });
+  };
+  /**
+   * Destroy elements, properties, and events.
+   */
+
+
   __proto.destroy = function () {
+    this.off();
+    this.keycon && this.keycon.destroy();
     this.dragger.unset();
     this.injectResult.destroy();
+    this.keycon = null;
     this.dragger = null;
@@ -331,3 +489,7 @@ this.injectResult = null;
   };
+  /**
+   *
+   */
 
+
   __proto.click = function (e, clickedTarget) {
@@ -350,2 +512,34 @@ var _a = getClient(e),
 
+  __proto.setKeyController = function () {
+    var _a = this.options,
+        keyContainer = _a.keyContainer,
+        toggleContinueSelect = _a.toggleContinueSelect;
+
+    if (this.keycon) {
+      this.keycon.destroy();
+      this.keycon = null;
+    }
+
+    if (toggleContinueSelect) {
+      this.keycon = new KeyController(keyContainer || window);
+    }
+
+    this.setKeyEvent();
+  };
+
+  __proto.setKeyEvent = function () {
+    var toggleContinueSelect = this.options.toggleContinueSelect;
+
+    if (!this.keycon) {
+      this.setKeyController();
+      return;
+    } else {
+      this.keycon.off();
+    }
+
+    if (toggleContinueSelect) {
+      this.keycon.keydown(toggleContinueSelect, this.onKeyDown).keyup(toggleContinueSelect, this.onKeyUp);
+    }
+  };
+
   __proto.initElement = function () {
@@ -441,2 +635,32 @@ this.target = createElement(h("div", {
     if (isStart) {
+      /**
+       * When the select(drag) starts, the selectStart event is called.
+       * @memberof Selecto
+       * @event selectStart
+       * @param {Selecto.OnSelect} - Parameters for the selectStart event
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   selectByClick: true,
+       *   selectFromInside: false,
+       * });
+       *
+       * selecto.on("selectStart", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * }).on("selectEnd", e => {
+       *   e.afterAdded.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.afterRemoved.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
       this.trigger("selectStart", {
@@ -455,2 +679,25 @@ selected: selectedTargets,
     if (added.length || removed.length) {
+      /**
+       * When the select in real time, the select event is called.
+       * @memberof Selecto
+       * @event select
+       * @param {Selecto.OnSelect} - Parameters for the select event
+       * @example
+       * import Selecto from "selecto";
+       *
+       * const selecto = new Selecto({
+       *   container: document.body,
+       *   selectByClick: true,
+       *   selectFromInside: false,
+       * });
+       *
+       * selecto.on("select", e => {
+       *   e.added.forEach(el => {
+       *     el.classList.add("selected");
+       *   });
+       *   e.removed.forEach(el => {
+       *     el.classList.remove("selected");
+       *   });
+       * });
+       */
       this.trigger("select", {
@@ -484,2 +731,33 @@ selected: selectedTargets,
     var isDragStart = type === "mousedown" || type === "touchstart";
+    /**
+     * When the select(dragEnd or click) ends, the selectEnd event is called.
+     * @memberof Selecto
+     * @event selectEnd
+     * @param {Selecto.OnSelectEnd} - Parameters for the selectEnd event
+     * @example
+     * import Selecto from "selecto";
+     *
+     * const selecto = new Selecto({
+     *   container: document.body,
+     *   selectByClick: true,
+     *   selectFromInside: false,
+     * });
+     *
+     * selecto.on("selectStart", e => {
+     *   e.added.forEach(el => {
+     *     el.classList.add("selected");
+     *   });
+     *   e.removed.forEach(el => {
+     *     el.classList.remove("selected");
+     *   });
+     * }).on("selectEnd", e => {
+     *   e.afterAdded.forEach(el => {
+     *     el.classList.add("selected");
+     *   });
+     *   e.afterRemoved.forEach(el => {
+     *     el.classList.remove("selected");
+     *   });
+     * });
+     */
+
     this.trigger("selectEnd", {
@@ -505,12 +783,22 @@ selected: selectedTargets,
   Selecto = __decorate([Properties(PROPERTIES, function (prototype, property) {
-    Object.defineProperty(prototype, property, {
+    var attributes = {
+      enumerable: true,
+      configurable: true,
       get: function () {
         return this.options[property];
-      },
-      set: function (value) {
+      }
+    };
+    var setter = camelize("set " + property);
+
+    if (prototype[setter]) {
+      attributes.set = function (value) {
+        this[setter](value);
+      };
+    } else {
+      attributes.set = function (value) {
         this.options[property] = value;
-      },
-      enumerable: true,
-      configurable: true
-    });
+      };
+    }
+
+    Object.defineProperty(prototype, property, attributes);
   })], Selecto);
@@ -521,2 +809,3 @@ return Selecto;
 export default Selecto;
+export { EVENTS, METHODS, PROPERTIES };
 //# sourceMappingURL=selecto.esm.js.map

dist/selecto.js

@@ -7,9 +7,9 @@ /*
 repository: git+https://github.com/daybrush/selecto.git
-version: 0.0.6
+version: 0.0.7
 */
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@daybrush/drag'), require('css-styled'), require('framework-utils'), require('@daybrush/utils'), require('@egjs/children-differ')) :
-    typeof define === 'function' && define.amd ? define(['@egjs/component', '@daybrush/drag', 'css-styled', 'framework-utils', '@daybrush/utils', '@egjs/children-differ'], factory) :
-    (global = global || self, global.Selecto = factory(global.Component, global.Dragger, global.styled, global.frameworkUtils, global.utils, global.ChildrenDiffer));
-}(this, (function (Component, Dragger, styled, frameworkUtils, utils, ChildrenDiffer) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@egjs/component'), require('@daybrush/drag'), require('css-styled'), require('framework-utils'), require('@daybrush/utils'), require('@egjs/children-differ'), require('keycon')) :
+    typeof define === 'function' && define.amd ? define(['@egjs/component', '@daybrush/drag', 'css-styled', 'framework-utils', '@daybrush/utils', '@egjs/children-differ', 'keycon'], factory) :
+    (global = global || self, global.Selecto = factory(global.Component, global.Dragger, global.styled, global.frameworkUtils, global.utils, global.ChildrenDiffer, global.KeyController));
+}(this, (function (Component, Dragger, styled, frameworkUtils, utils, ChildrenDiffer, KeyController) { 'use strict';
 
@@ -159,6 +159,19 @@ /*! *****************************************************************************
     }
+    function diffValue(prev, cur, func) {
+      if (prev !== cur) {
+        func(prev, cur);
+      }
+    }
 
+    /**
+     * @memberof Selecto
+     */
     var PROPERTIES = ["selectableTargets", "continueSelect", "hitRate"];
 
     var injector = styled("\n:host {\n    position: absolute;\n    display: none;\n    border: 1px solid #4af;\n    background: rgba(68, 170, 255, 0.5);\n    z-index: 100;\n}\n");
+    /**
+     * Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.
+     * @sort 1
+     * @extends eg.Component
+     */
 
@@ -169,3 +182,7 @@ var Selecto =
       __extends(Selecto, _super);
+      /**
+       *
+       */
 
+
       function Selecto(options) {
@@ -229,2 +246,31 @@ if (options === void 0) {
           var isTrusted = type === "mousedown" || type === "touchstart";
+          /**
+           * When the drag starts, the dragStart event is called.
+           * Call the stop () function if you have a specific element or don't want to raise a select
+           * @memberof Selecto
+           * @event dragStart
+           * @param {OnDragStart} - Parameters for the dragStart event
+           * @example
+           * import Selecto from "selecto";
+           *
+           * const selecto = new Selecto({
+           *   container: document.body,
+           *   selectByClick: true,
+           *   selectFromInside: false,
+           * });
+           *
+           * selecto.on("dragStart", e => {
+           *   if (e.inputEvent.target.tagName === "SPAN") {
+           *     e.stop();
+           *   }
+           * }).on("select", e => {
+           *   e.added.forEach(el => {
+           *     el.classList.add("selected");
+           *   });
+           *   e.removed.forEach(el => {
+           *     el.classList.remove("selected");
+           *   });
+           * });
+           */
+
           var result = isTrusted ? _this.trigger("dragStart", e) : true;
@@ -291,2 +337,66 @@
 
+        _this.onKeyDown = function () {
+          _this.continueSelect = true;
+          /**
+           * When you keydown the key you specified in toggleContinueSelect, the keydown event is called.
+           * @memberof Selecto
+           * @event keydown
+           * @example
+           * import Selecto from "selecto";
+           *
+           * const selecto = new Selecto({
+           *   container: document.body,
+           *   toggleContinueSelect: "shift";
+           *   keyContainer: window,
+           * });
+           *
+           * selecto.on("keydown", () => {
+           *   document.querySelector(".button").classList.add("selected");
+           * }).on("keyup", () => {
+           *   document.querySelector(".button").classList.remove("selected");
+           * }).on("select", e => {
+           *   e.added.forEach(el => {
+           *     el.classList.add("selected");
+           *   });
+           *   e.removed.forEach(el => {
+           *     el.classList.remove("selected");
+           *   });
+           * });
+           */
+
+          _this.trigger("keydown", {});
+        };
+
+        _this.onKeyUp = function () {
+          _this.continueSelect = false;
+          /**
+           * When you keyup the key you specified in toggleContinueSelect, the keyup event is called.
+           * @memberof Selecto
+           * @event keyup
+           * @example
+           * import Selecto from "selecto";
+           *
+           * const selecto = new Selecto({
+           *   container: document.body,
+           *   toggleContinueSelect: "shift";
+           *   keyContainer: window,
+           * });
+           *
+           * selecto.on("keydown", () => {
+           *   document.querySelector(".button").classList.add("selected");
+           * }).on("keyup", () => {
+           *   document.querySelector(".button").classList.remove("selected");
+           * }).on("select", e => {
+           *   e.added.forEach(el => {
+           *     el.classList.add("selected");
+           *   });
+           *   e.removed.forEach(el => {
+           *     el.classList.remove("selected");
+           *   });
+           * });
+           */
+
+          _this.trigger("keyup", {});
+        };
+
         _this.target = options.target;
@@ -302,3 +412,5 @@ _this.container = options.container;
           hitRate: 100,
-          continueSelect: false
+          continueSelect: false,
+          toggleContinueSelect: null,
+          keyContainer: null
         }, options);
@@ -308,5 +420,11 @@
 
+        _this.setKeyController();
+
         return _this;
       }
+      /**
+       * You can set the currently selected targets.
+       */
 
+
       var __proto = Selecto.prototype;
@@ -319,5 +437,34 @@
 
+      __proto.setKeyContainer = function (keyContainer) {
+        var _this = this;
+
+        var options = this.options;
+        diffValue(options.keyContainer, keyContainer, function () {
+          options.keyContainer = keyContainer;
+
+          _this.setKeyController();
+        });
+      };
+
+      __proto.setToggleContinueSelect = function (toggleContinueSelect) {
+        var _this = this;
+
+        var options = this.options;
+        diffValue(options.toggleContinueSelect, toggleContinueSelect, function () {
+          options.toggleContinueSelect = toggleContinueSelect;
+
+          _this.setKeyEvent();
+        });
+      };
+      /**
+       * Destroy elements, properties, and events.
+       */
+
+
       __proto.destroy = function () {
+        this.off();
+        this.keycon && this.keycon.destroy();
         this.dragger.unset();
         this.injectResult.destroy();
+        this.keycon = null;
         this.dragger = null;
@@ -329,3 +476,7 @@ this.injectResult = null;
       };
+      /**
+       *
+       */
 
+
       __proto.click = function (e, clickedTarget) {
@@ -348,2 +499,34 @@ var _a = getClient(e),
 
+      __proto.setKeyController = function () {
+        var _a = this.options,
+            keyContainer = _a.keyContainer,
+            toggleContinueSelect = _a.toggleContinueSelect;
+
+        if (this.keycon) {
+          this.keycon.destroy();
+          this.keycon = null;
+        }
+
+        if (toggleContinueSelect) {
+          this.keycon = new KeyController(keyContainer || window);
+        }
+
+        this.setKeyEvent();
+      };
+
+      __proto.setKeyEvent = function () {
+        var toggleContinueSelect = this.options.toggleContinueSelect;
+
+        if (!this.keycon) {
+          this.setKeyController();
+          return;
+        } else {
+          this.keycon.off();
+        }
+
+        if (toggleContinueSelect) {
+          this.keycon.keydown(toggleContinueSelect, this.onKeyDown).keyup(toggleContinueSelect, this.onKeyUp);
+        }
+      };
+
       __proto.initElement = function () {
@@ -439,2 +622,32 @@ this.target = createElement(h("div", {
         if (isStart) {
+          /**
+           * When the select(drag) starts, the selectStart event is called.
+           * @memberof Selecto
+           * @event selectStart
+           * @param {Selecto.OnSelect} - Parameters for the selectStart event
+           * @example
+           * import Selecto from "selecto";
+           *
+           * const selecto = new Selecto({
+           *   container: document.body,
+           *   selectByClick: true,
+           *   selectFromInside: false,
+           * });
+           *
+           * selecto.on("selectStart", e => {
+           *   e.added.forEach(el => {
+           *     el.classList.add("selected");
+           *   });
+           *   e.removed.forEach(el => {
+           *     el.classList.remove("selected");
+           *   });
+           * }).on("selectEnd", e => {
+           *   e.afterAdded.forEach(el => {
+           *     el.classList.add("selected");
+           *   });
+           *   e.afterRemoved.forEach(el => {
+           *     el.classList.remove("selected");
+           *   });
+           * });
+           */
           this.trigger("selectStart", {
@@ -453,2 +666,25 @@ selected: selectedTargets,
         if (added.length || removed.length) {
+          /**
+           * When the select in real time, the select event is called.
+           * @memberof Selecto
+           * @event select
+           * @param {Selecto.OnSelect} - Parameters for the select event
+           * @example
+           * import Selecto from "selecto";
+           *
+           * const selecto = new Selecto({
+           *   container: document.body,
+           *   selectByClick: true,
+           *   selectFromInside: false,
+           * });
+           *
+           * selecto.on("select", e => {
+           *   e.added.forEach(el => {
+           *     el.classList.add("selected");
+           *   });
+           *   e.removed.forEach(el => {
+           *     el.classList.remove("selected");
+           *   });
+           * });
+           */
           this.trigger("select", {
@@ -482,2 +718,33 @@ selected: selectedTargets,
         var isDragStart = type === "mousedown" || type === "touchstart";
+        /**
+         * When the select(dragEnd or click) ends, the selectEnd event is called.
+         * @memberof Selecto
+         * @event selectEnd
+         * @param {Selecto.OnSelectEnd} - Parameters for the selectEnd event
+         * @example
+         * import Selecto from "selecto";
+         *
+         * const selecto = new Selecto({
+         *   container: document.body,
+         *   selectByClick: true,
+         *   selectFromInside: false,
+         * });
+         *
+         * selecto.on("selectStart", e => {
+         *   e.added.forEach(el => {
+         *     el.classList.add("selected");
+         *   });
+         *   e.removed.forEach(el => {
+         *     el.classList.remove("selected");
+         *   });
+         * }).on("selectEnd", e => {
+         *   e.afterAdded.forEach(el => {
+         *     el.classList.add("selected");
+         *   });
+         *   e.afterRemoved.forEach(el => {
+         *     el.classList.remove("selected");
+         *   });
+         * });
+         */
+
         this.trigger("selectEnd", {
@@ -503,12 +770,22 @@ selected: selectedTargets,
       Selecto = __decorate([frameworkUtils.Properties(PROPERTIES, function (prototype, property) {
-        Object.defineProperty(prototype, property, {
+        var attributes = {
+          enumerable: true,
+          configurable: true,
           get: function () {
             return this.options[property];
-          },
-          set: function (value) {
+          }
+        };
+        var setter = utils.camelize("set " + property);
+
+        if (prototype[setter]) {
+          attributes.set = function (value) {
+            this[setter](value);
+          };
+        } else {
+          attributes.set = function (value) {
             this.options[property] = value;
-          },
-          enumerable: true,
-          configurable: true
-        });
+          };
+        }
+
+        Object.defineProperty(prototype, property, attributes);
       })], Selecto);
@@ -518,2 +795,11 @@ return Selecto;
 
+    var modules = ({
+        __proto__: null,
+        'default': Selecto
+    });
+
+    for (var name in modules) {
+      Selecto[name] = modules[name];
+    }
+
     return Selecto;
@@ -520,0 +806,0 @@

dist/selecto.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/daybrush/selecto.git
-version: 0.0.6
+version: 0.0.7
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@egjs/component"),require("@daybrush/drag"),require("css-styled"),require("framework-utils"),require("@daybrush/utils"),require("@egjs/children-differ")):"function"==typeof define&&define.amd?define(["@egjs/component","@daybrush/drag","css-styled","framework-utils","@daybrush/utils","@egjs/children-differ"],e):(t=t||self).Selecto=e(t.Component,t.Dragger,t.styled,t.frameworkUtils,t.utils,t.ChildrenDiffer)}(this,function(t,a,e,o,g,m){"use strict";var c=function(t,e){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])})(t,e)};var l=function(){return(l=Object.assign||function(t){for(var e,r=1,n=arguments.length;r<n;r++)for(var i in e=arguments[r])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function u(t,e){for(var r=[],n=2;n<arguments.length;n++)r[n-2]=arguments[n];var i=e||{},s=i.className,a=i.style;return{tag:t,className:void 0===s?"":s,style:void 0===a?{}:a,attributes:function(t,e){var r={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(r[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i<n.length;i++)e.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(t,n[i])&&(r[n[i]]=t[n[i]])}return r}(i,["className","style"]),children:r}}var d=["selectableTargets","continueSelect","hitRate"],f=e("\n:host {\n    position: absolute;\n    display: none;\n    border: 1px solid #4af;\n    background: rgba(68, 170, 255, 0.5);\n    z-index: 100;\n}\n");return function(e){function t(){this.constructor=r}var r,n;function i(t){void 0===t&&(t={});var h=e.call(this)||this;return h.selectedTargets=[],h.differ=new m,h.onDragStart=function(t,e){var r=t.datas,n=t.clientX,i=t.clientY,s=t.inputEvent,a=h.options,o=a.continueSelect,c=a.selectFromInside,l=h.getSelectableTargets(),u=l.map(function(t){var e=t.getBoundingClientRect(),r=e.left,n=e.top;return{left:r,top:n,right:r+e.width,bottom:n+e.height}});r.selectableTargets=l,r.selectableRects=u,r.startSelectedTargets=h.selectedTargets;var d=e||document.elementFromPoint(n,i),f=h.hitTest({left:n,top:i,right:n,bottom:i},n,i,l,u).filter(function(t){return t===d||t.contains(d)}),g=0<f.length;o?f=h.getSelectedTargets(f):h.selectedTargets=[];var p=s.type;return!(("mousedown"===p||"touchstart"===p)&&!h.trigger("dragStart",t))&&(h.select(f,s,!0),r.startX=n,r.startY=i,r.selectedTargets=f,h.target.style.cssText+="left:"+n+"px;top:"+i+"px",!(!c&&g)||(h.onDragEnd(t),!1))},h.onDrag=function(t){var e=t.distX,r=t.distY,n=t.datas,i=t.inputEvent,s=n.startX,a=n.startY,o=Math.min(0,e),c=Math.min(0,r),l=Math.abs(e),u=Math.abs(r);h.target.style.cssText+="display: block;transform: translate("+o+"px, "+c+"px);width:"+l+"px;height:"+u+"px;";var d=s+o,f=a+c,g=h.hitTest({left:d,top:f,right:d+l,bottom:f+u},n.startX,n.startY,n.selectableTargets,n.selectableRects),p=h.getSelectedTargets(g);h.select(p,i),n.selectedTargets=p},h.onDragEnd=function(t){var e=t.datas,r=t.inputEvent;h.target.style.cssText+="display: none;",h.selecteEnd(e.startSelectedTargets,e.selectedTargets,r),h.selectedTargets=e.selectedTargets},h.target=t.target,h.container=t.container,h.options=l({target:null,container:null,dragContainer:null,selectableTargets:[],selectByClick:!0,selectFromInside:!0,hitRate:100,continueSelect:!1},t),h.initElement(),h}c(r=i,n=e),r.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t);var s=i.prototype;return s.setSelectedTargets=function(t){this.selectedTargets=t,this.differ=new m(t)},s.destroy=function(){this.dragger.unset(),this.injectResult.destroy(),this.dragger=null,this.injectResult=null,this.target=null,this.container=null,this.options=null},s.click=function(t,e){var r=function(t){if("touches"in t){var e=t.touches[0];return{clientX:e.clientX,clientY:e.clientY}}return{clientX:t.clientX,clientY:t.clientY}}(t),n={datas:{},clientX:r.clientX,clientY:r.clientY,inputEvent:t};this.onDragStart(n,e)&&this.onDragEnd(n)},s.initElement=function(){this.target=function r(t,e,n){var i=t.tag,s=t.children,a=t.attributes,o=t.className,c=t.style,l=e||document.createElement(i);for(var u in a)l.setAttribute(u,a[u]);var d=l.children;if(s.forEach(function(t,e){r(t,d[e],l)}),o&&o.split(" ").forEach(function(t){g.hasClass(l,t)||g.addClass(l,t)}),c){var f=l.style;for(var u in c)f[u]=c[u]}return!e&&n&&n.appendChild(l),l}(u("div",{className:"selecto-selection "+f.className}),this.target,this.container);var t=this.target;this.dragger=new a(this.options.dragContainer||this.target.parentElement,{container:window,dragstart:this.onDragStart,drag:this.onDrag,dragend:this.onDragEnd}),this.injectResult=f.inject(t)},s.hitTest=function(t,g,p,h,e){var r=this.options,m=r.hitRate,v=r.selectByClick,y=t.left,b=t.top,T=t.right,E=t.bottom,j=[];return e.forEach(function(t,e){var r=t.left,n=t.top,i=t.right,s=t.bottom,a=r<=g&&g<=i&&n<=p&&p<=s,o=(i-r)*(s-n),c=Math.max(r,y),l=Math.min(i,T),u=Math.max(n,b),d=Math.min(s,E);if(v&&a)j.push(h[e]);else if(!(l<c||d<u)){var f=Math.round((l-c)*(d-u)/o*100);m<=f&&j.push(h[e])}}),j},s.getSelectableTargets=function(){var e=[];return this.options.selectableTargets.forEach(function(t){g.isObject(t)?e.push(t):[].slice.call(document.querySelectorAll(t)).forEach(function(t){e.push(t)})}),e},s.getSelectedTargets=function(t){var e=m.diff(this.selectedTargets,t),r=e.list,n=e.prevList,i=e.added,s=e.removed;return i.map(function(t){return r[t]}).concat(s.map(function(t){return n[t]}))},s.select=function(t,e,r){var n=this.differ.update(t),i=n.added,s=n.removed,a=n.prevList,o=n.list;r&&this.trigger("selectStart",{selected:t,added:i.map(function(t){return o[t]}),removed:s.map(function(t){return a[t]}),inputEvent:e}),(i.length||s.length)&&this.trigger("select",{selected:t,added:i.map(function(t){return o[t]}),removed:s.map(function(t){return a[t]}),inputEvent:e})},s.selecteEnd=function(t,e,r){var n=m.diff(t,e),i=n.added,s=n.removed,a=n.prevList,o=n.list,c=m.diff(this.selectedTargets,e),l=c.added,u=c.removed,d=c.prevList,f=c.list,g=r.type,p="mousedown"===g||"touchstart"===g;this.trigger("selectEnd",{selected:e,added:i.map(function(t){return o[t]}),removed:s.map(function(t){return a[t]}),afterAdded:l.map(function(t){return f[t]}),afterRemoved:u.map(function(t){return d[t]}),isDragStart:p,inputEvent:r})},i=function(t,e,r,n){var i,s=arguments.length,a=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,r,n);else for(var o=t.length-1;0<=o;o--)(i=t[o])&&(a=(s<3?i(a):3<s?i(e,r,a):i(e,r))||a);return 3<s&&a&&Object.defineProperty(e,r,a),a}([o.Properties(d,function(t,e){Object.defineProperty(t,e,{get:function(){return this.options[e]},set:function(t){this.options[e]=t},enumerable:!0,configurable:!0})})],i)}(t)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("@egjs/component"),require("@daybrush/drag"),require("css-styled"),require("framework-utils"),require("@daybrush/utils"),require("@egjs/children-differ"),require("keycon")):"function"==typeof define&&define.amd?define(["@egjs/component","@daybrush/drag","css-styled","framework-utils","@daybrush/utils","@egjs/children-differ","keycon"],e):(t=t||self).Selecto=e(t.Component,t.Dragger,t.styled,t.frameworkUtils,t.utils,t.ChildrenDiffer,t.KeyController)}(this,function(t,s,e,a,h,y,c){"use strict";var l=function(t,e){return(l=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var u=function(){return(u=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)};function d(t,e){for(var n=[],r=2;r<arguments.length;r++)n[r-2]=arguments[r];var i=e||{},o=i.className,s=i.style;return{tag:t,className:void 0===o?"":o,style:void 0===s?{}:s,attributes:function(t,e){var n={};for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(r=Object.getOwnPropertySymbols(t);i<r.length;i++)e.indexOf(r[i])<0&&Object.prototype.propertyIsEnumerable.call(t,r[i])&&(n[r[i]]=t[r[i]])}return n}(i,["className","style"]),children:n}}function f(t,e,n){t!==e&&n(t,e)}var g=["selectableTargets","continueSelect","hitRate"],p=e("\n:host {\n    position: absolute;\n    display: none;\n    border: 1px solid #4af;\n    background: rgba(68, 170, 255, 0.5);\n    z-index: 100;\n}\n"),n=function(e){function t(){this.constructor=n}var n,r;function i(t){void 0===t&&(t={});var p=e.call(this)||this;return p.selectedTargets=[],p.differ=new y,p.onDragStart=function(t,e){var n=t.datas,r=t.clientX,i=t.clientY,o=t.inputEvent,s=p.options,a=s.continueSelect,c=s.selectFromInside,l=p.getSelectableTargets(),u=l.map(function(t){var e=t.getBoundingClientRect(),n=e.left,r=e.top;return{left:n,top:r,right:n+e.width,bottom:r+e.height}});n.selectableTargets=l,n.selectableRects=u,n.startSelectedTargets=p.selectedTargets;var d=e||document.elementFromPoint(r,i),f=p.hitTest({left:r,top:i,right:r,bottom:i},r,i,l,u).filter(function(t){return t===d||t.contains(d)}),h=0<f.length;a?f=p.getSelectedTargets(f):p.selectedTargets=[];var g=o.type;return!(("mousedown"===g||"touchstart"===g)&&!p.trigger("dragStart",t))&&(p.select(f,o,!0),n.startX=r,n.startY=i,n.selectedTargets=f,p.target.style.cssText+="left:"+r+"px;top:"+i+"px",!(!c&&h)||(p.onDragEnd(t),!1))},p.onDrag=function(t){var e=t.distX,n=t.distY,r=t.datas,i=t.inputEvent,o=r.startX,s=r.startY,a=Math.min(0,e),c=Math.min(0,n),l=Math.abs(e),u=Math.abs(n);p.target.style.cssText+="display: block;transform: translate("+a+"px, "+c+"px);width:"+l+"px;height:"+u+"px;";var d=o+a,f=s+c,h=p.hitTest({left:d,top:f,right:d+l,bottom:f+u},r.startX,r.startY,r.selectableTargets,r.selectableRects),g=p.getSelectedTargets(h);p.select(g,i),r.selectedTargets=g},p.onDragEnd=function(t){var e=t.datas,n=t.inputEvent;p.target.style.cssText+="display: none;",p.selecteEnd(e.startSelectedTargets,e.selectedTargets,n),p.selectedTargets=e.selectedTargets},p.onKeyDown=function(){p.continueSelect=!0,p.trigger("keydown",{})},p.onKeyUp=function(){p.continueSelect=!1,p.trigger("keyup",{})},p.target=t.target,p.container=t.container,p.options=u({target:null,container:null,dragContainer:null,selectableTargets:[],selectByClick:!0,selectFromInside:!0,hitRate:100,continueSelect:!1,toggleContinueSelect:null,keyContainer:null},t),p.initElement(),p.setKeyController(),p}l(n=i,r=e),n.prototype=null===r?Object.create(r):(t.prototype=r.prototype,new t);var o=i.prototype;return o.setSelectedTargets=function(t){this.selectedTargets=t,this.differ=new y(t)},o.setKeyContainer=function(t){var e=this,n=this.options;f(n.keyContainer,t,function(){n.keyContainer=t,e.setKeyController()})},o.setToggleContinueSelect=function(t){var e=this,n=this.options;f(n.toggleContinueSelect,t,function(){n.toggleContinueSelect=t,e.setKeyEvent()})},o.destroy=function(){this.off(),this.keycon&&this.keycon.destroy(),this.dragger.unset(),this.injectResult.destroy(),this.keycon=null,this.dragger=null,this.injectResult=null,this.target=null,this.container=null,this.options=null},o.click=function(t,e){var n=function(t){if("touches"in t){var e=t.touches[0];return{clientX:e.clientX,clientY:e.clientY}}return{clientX:t.clientX,clientY:t.clientY}}(t),r={datas:{},clientX:n.clientX,clientY:n.clientY,inputEvent:t};this.onDragStart(r,e)&&this.onDragEnd(r)},o.setKeyController=function(){var t=this.options,e=t.keyContainer,n=t.toggleContinueSelect;this.keycon&&(this.keycon.destroy(),this.keycon=null),n&&(this.keycon=new c(e||window)),this.setKeyEvent()},o.setKeyEvent=function(){var t=this.options.toggleContinueSelect;this.keycon?(this.keycon.off(),t&&this.keycon.keydown(t,this.onKeyDown).keyup(t,this.onKeyUp)):this.setKeyController()},o.initElement=function(){this.target=function n(t,e,r){var i=t.tag,o=t.children,s=t.attributes,a=t.className,c=t.style,l=e||document.createElement(i);for(var u in s)l.setAttribute(u,s[u]);var d=l.children;if(o.forEach(function(t,e){n(t,d[e],l)}),a&&a.split(" ").forEach(function(t){h.hasClass(l,t)||h.addClass(l,t)}),c){var f=l.style;for(var u in c)f[u]=c[u]}return!e&&r&&r.appendChild(l),l}(d("div",{className:"selecto-selection "+p.className}),this.target,this.container);var t=this.target;this.dragger=new s(this.options.dragContainer||this.target.parentElement,{container:window,dragstart:this.onDragStart,drag:this.onDrag,dragend:this.onDragEnd}),this.injectResult=p.inject(t)},o.hitTest=function(t,h,g,p,e){var n=this.options,y=n.hitRate,v=n.selectByClick,m=t.left,b=t.top,T=t.right,S=t.bottom,k=[];return e.forEach(function(t,e){var n=t.left,r=t.top,i=t.right,o=t.bottom,s=n<=h&&h<=i&&r<=g&&g<=o,a=(i-n)*(o-r),c=Math.max(n,m),l=Math.min(i,T),u=Math.max(r,b),d=Math.min(o,S);if(v&&s)k.push(p[e]);else if(!(l<c||d<u)){var f=Math.round((l-c)*(d-u)/a*100);y<=f&&k.push(p[e])}}),k},o.getSelectableTargets=function(){var e=[];return this.options.selectableTargets.forEach(function(t){h.isObject(t)?e.push(t):[].slice.call(document.querySelectorAll(t)).forEach(function(t){e.push(t)})}),e},o.getSelectedTargets=function(t){var e=y.diff(this.selectedTargets,t),n=e.list,r=e.prevList,i=e.added,o=e.removed;return i.map(function(t){return n[t]}).concat(o.map(function(t){return r[t]}))},o.select=function(t,e,n){var r=this.differ.update(t),i=r.added,o=r.removed,s=r.prevList,a=r.list;n&&this.trigger("selectStart",{selected:t,added:i.map(function(t){return a[t]}),removed:o.map(function(t){return s[t]}),inputEvent:e}),(i.length||o.length)&&this.trigger("select",{selected:t,added:i.map(function(t){return a[t]}),removed:o.map(function(t){return s[t]}),inputEvent:e})},o.selecteEnd=function(t,e,n){var r=y.diff(t,e),i=r.added,o=r.removed,s=r.prevList,a=r.list,c=y.diff(this.selectedTargets,e),l=c.added,u=c.removed,d=c.prevList,f=c.list,h=n.type,g="mousedown"===h||"touchstart"===h;this.trigger("selectEnd",{selected:e,added:i.map(function(t){return a[t]}),removed:o.map(function(t){return s[t]}),afterAdded:l.map(function(t){return f[t]}),afterRemoved:u.map(function(t){return d[t]}),isDragStart:g,inputEvent:n})},i=function(t,e,n,r){var i,o=arguments.length,s=o<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,r);else for(var a=t.length-1;0<=a;a--)(i=t[a])&&(s=(o<3?i(s):3<o?i(e,n,s):i(e,n))||s);return 3<o&&s&&Object.defineProperty(e,n,s),s}([a.Properties(g,function(t,e){var n={enumerable:!0,configurable:!0,get:function(){return this.options[e]}},r=h.camelize("set "+e);t[r]?n.set=function(t){this[r](t)}:n.set=function(t){this.options[e]=t},Object.defineProperty(t,e,n)})],i)}(t),r={__proto__:null,default:n};for(var i in r)n[i]=r[i];return n});
 //# sourceMappingURL=selecto.min.js.map

dist/selecto.pkgd.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/daybrush/selecto.git
-version: 0.0.6
+version: 0.0.7
 */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Selecto=e()}(this,function(){"use strict";var c=function(t,e){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var l=function(){return(l=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function a(t){return void 0===t}var t=function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var i=!1,r=[e],s=0;e.stop=function(){i=!0},e.currentTarget=this;for(var o=arguments.length,a=new Array(2<o?o-2:0),c=2;c<o;c++)a[c-2]=arguments[c];for(1<=a.length&&(r=r.concat(a)),s=0;n[s];s++)n[s].apply(this,r);return!i},e.once=function(r,s){if("object"==typeof r&&a(s)){var t,e=r;for(t in e)this.once(t,e[t]);return this}if("string"==typeof r&&"function"==typeof s){var o=this;this.on(r,function t(){for(var e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];s.apply(o,n),o.off(r,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&a(e)){var n,i=t;for(n in i)this.on(n,i[n]);return this}if("string"==typeof t&&"function"==typeof e){var r=this._eventHandler[t];a(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(e)}return this},e.off=function(t,e){if(a(t))return this._eventHandler={},this;if(a(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,i=t;for(n in i)this.off(n,i[n]);return this}var r,s,o=this._eventHandler[t];if(o)for(r=0;void 0!==(s=o[r]);r++)if(s===e){o=o.splice(r,1);break}return this},t}();return t.VERSION="2.1.2",t}();function h(t,e,n,i){t.addEventListener(e,n,i)}function n(t,e,n){t.removeEventListener(e,n)}var u=function(){return(u=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function f(t,e,n,i){var r=y(t),s=y(e),o=y(i);return p(b(i[0],E(r,o)),b(i[0],E(s,o)),n[0])}function d(t){return t.touches?m(t.touches):[r(t)]}function p(t,e,n){var i=t.clientX,r=t.clientY;return{clientX:i,clientY:r,deltaX:i-e.clientX,deltaY:r-e.clientY,distX:i-n.clientX,distY:r-n.clientY}}function v(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function g(t,n,i){return t.map(function(t,e){return p(t,n[e],i[e])})}function m(t){for(var e=Math.min(t.length,2),n=[],i=0;i<e;++i)n.push(r(t[i]));return n}function r(t){return{clientX:t.clientX,clientY:t.clientY}}function y(t){return{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function b(t,e){return{clientX:t.clientX+e.clientX,clientY:t.clientY+e.clientY}}function E(t,e){return{clientX:t.clientX-e.clientX,clientY:t.clientY-e.clientY}}var C=function(){function t(t,e){var o=this;void 0===e&&(e={}),this.el=t,this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.movement=0,this.startPinchClients=[],this.startDistance=0,this.customDist=[0,0],this.onDragStart=function(t){if(o.flag||!1!==t.cancelable){if((e=t).touches&&2<=e.touches.length){if(!o.flag&&t.touches.length!==t.changedTouches.length)return;o.pinchFlag||o.onPinchStart(t)}var e;if(!o.flag){var n=o.startClients[0]?o.startClients:d(t);o.customDist=[0,0],o.flag=!0,o.isDrag=!1,o.startClients=n,o.prevClients=n,o.datas={};var i=p(n[o.movement=0],o.prevClients[0],o.startClients[0]),r=o.options,s=r.dragstart;(r.preventRightClick&&3===t.which||!1===(s&&s(u({datas:o.datas,inputEvent:t},i))))&&(o.startClients=[],o.prevClients=[],o.flag=!1),o.flag&&t.preventDefault()}}},this.onDrag=function(t,e){if(o.flag){var n=d(t);o.pinchFlag&&o.onPinch(t,n);var i=o.move([0,0],t,n);if(i&&(i.deltaX||i.deltaY)){var r=o.options.drag;r&&r(u({},i,{isScroll:!!e,inputEvent:t}))}}},this.onDragEnd=function(t){if(o.flag){o.pinchFlag&&o.onPinchEnd(t),o.flag=!1;var e=o.options.dragend,n=o.prevClients,i=o.startClients,r=o.pinchFlag?f(n,n,i,o.startPinchClients):p(n[0],n[0],i[0]);o.startClients=[],o.prevClients=[],e&&e(u({datas:o.datas,isDrag:o.isDrag,inputEvent:t},r))}},this.options=u({container:t,preventRightClick:!0,pinchThreshold:0,events:["touch","mouse"]},e);var n=this.options,i=n.container,r=n.events;if(this.isTouch=-1<r.indexOf("touch"),this.isMouse=-1<r.indexOf("mouse"),this.customDist=[0,0],this.isMouse&&(h(t,"mousedown",this.onDragStart),h(i,"mousemove",this.onDrag),h(i,"mouseup",this.onDragEnd)),this.isTouch){var s={passive:!1};h(t,"touchstart",this.onDragStart,s),h(i,"touchmove",this.onDrag,s),h(i,"touchend",this.onDragEnd,s)}}var e=t.prototype;return e.isDragging=function(){return this.isDrag},e.isPinching=function(){return this.isPinch},e.scrollBy=function(e,n,t,i){void 0===i&&(i=!0),this.flag&&(this.startClients.forEach(function(t){t.clientX-=e,t.clientY-=n}),this.prevClients.forEach(function(t){t.clientX-=e,t.clientY-=n}),i&&this.onDrag(t,!0))},e.move=function(t,e,n){var i=t[0],r=t[1];void 0===n&&(n=this.prevClients);var s=this.customDist,o=this.prevClients,a=this.startClients,c=this.pinchFlag?f(n,o,a,this.startPinchClients):p(n[0],o[0],a[0]);s[0]+=i,s[1]+=r,c.deltaX+=i,c.deltaY+=r;var l=c.deltaX,h=c.deltaY;return c.distX+=s[0],c.distY+=s[1],this.movement+=Math.sqrt(l*l+h*h),this.prevClients=n,this.isDrag=!0,u({datas:this.datas},c,{isScroll:!1,inputEvent:e})},e.onPinchStart=function(t){var e,n,i=this.options,r=i.pinchstart,s=i.pinchThreshold;if(!(this.isDrag&&this.movement>s)){var o=m(t.changedTouches);if(this.pinchFlag=!0,(e=this.startClients).push.apply(e,o),(n=this.prevClients).push.apply(n,o),this.startDistance=v(this.prevClients),this.startPinchClients=this.prevClients.slice(),r){var a=this.prevClients,c=y(a),l=p(c,c,c);r(u({datas:this.datas,touches:g(a,a,a)},l,{inputEvent:t}))}}},e.onPinch=function(t,e){if(this.flag&&this.pinchFlag){this.isPinch=!0;var n=this.options.pinch;if(n){var i=this.prevClients,r=this.startClients,s=p(y(e),y(i),y(r)),o=v(e);n(u({datas:this.datas,touches:g(e,i,r),scale:o/this.startDistance,distance:o},s,{inputEvent:t}))}}},e.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var e=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.options.pinchend;if(n){var i=this.prevClients,r=this.startClients,s=p(y(i),y(i),y(r));n(u({datas:this.datas,isPinch:e,touches:g(i,i,r)},s,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},e.unset=function(){var t=this.el,e=this.options.container;this.isMouse&&(n(t,"mousedown",this.onDragStart),n(e,"mousemove",this.onDrag),n(e,"mouseup",this.onDragEnd)),this.isTouch&&(n(t,"touchstart",this.onDragStart),n(e,"touchmove",this.onDrag),n(e,"touchend",this.onDragEnd))},t}();var e=function(t){for(var e=5381,n=t.length;n;)e=33*e^t.charCodeAt(--n);return e>>>0};function s(i,t,e){var n=document.createElement("style");return n.setAttribute("type","text/css"),n.innerHTML=t.replace(/([^}{]*){/gm,function(t,e){return((n=e.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g))?n.map(function(t){return t.trim()}):[]).map(function(t){return-1<t.indexOf(":global")?t.replace(/\:global/g,""):-1<t.indexOf(":host")?""+t.replace(/\:host/g,"."+i):"."+i+" "+t}).join(", ")+"{";var n}),(e||document.head||document.body).appendChild(n),n}var D=function(){function t(){this.keys=[],this.values=[]}var e=t.prototype;return e.get=function(t){return this.values[this.keys.indexOf(t)]},e.set=function(t,e){var n=this.keys,i=this.values,r=n.indexOf(t),s=-1===r?n.length:r;n[s]=t,i[s]=e},t}(),O=function(){function t(){this.object={}}var e=t.prototype;return e.get=function(t){return this.object[t]},e.set=function(t,e){this.object[t]=e},t}(),T="function"==typeof Map,o=function(){function t(){}var e=t.prototype;return e.connect=function(t,e){this.prev=t,this.next=e,t&&(t.next=this),e&&(e.prev=this)},e.disconnect=function(){var t=this.prev,e=this.next;t&&(t.next=e),e&&(e.prev=t)},e.getIndex=function(){for(var t=this,e=-1;t;)t=t.prev,++e;return e},t}();var Y=function(){function t(t,e,n,i,r,s,o,a){this.prevList=t,this.list=e,this.added=n,this.removed=i,this.changed=r,this.maintained=s,this.changedBeforeAdded=o,this.fixed=a}var e=t.prototype;return Object.defineProperty(e,"ordered",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(e,"pureChanged",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),e.caculateOrdered=function(){var t,n,a,c,e=(t=this.changedBeforeAdded,n=this.fixed,a=[],c=[],t.forEach(function(t){var e=t[0],n=t[1],i=new o;a[e]=i,c[n]=i}),a.forEach(function(t,e){t.connect(a[e-1])}),t.filter(function(t,e){return!n[e]}).map(function(t,e){var n=t[0],i=t[1];if(n===i)return[0,0];var r=a[n],s=c[i-1],o=r.getIndex();return r.disconnect(),s?r.connect(s,s.next):r.connect(void 0,a[0]),[o,r.getIndex()]})),l=this.changed,h=[];this.cacheOrdered=e.filter(function(t,e){var n=t[0],i=t[1],r=l[e],s=r[0],o=r[1];if(n!==i)return h.push([s,o]),!0}),this.cachePureChanged=h},t}();function i(t,e,n){var i=T?Map:n?O:D,r=n||function(t){return t},s=[],o=[],a=[],c=t.map(r),l=e.map(r),h=new i,u=new i,f=[],d=[],p={},v=[],g=0,m=0;return c.forEach(function(t,e){h.set(t,e)}),l.forEach(function(t,e){u.set(t,e)}),c.forEach(function(t,e){var n=u.get(t);void 0===n?(++m,o.push(e)):p[n]=m}),l.forEach(function(t,e){var n=h.get(t);void 0===n?(s.push(e),++g):(a.push([n,e]),m=p[e]||0,f.push([n-m,e-g]),d.push(e===n),n!==e&&v.push([n,e]))}),o.reverse(),new Y(t,e,s,o,v,a,f,d)}var P=function(t,e){return(P=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var X,x="function"==typeof Map?void 0:(X=0,function(t){return t.__DIFF_KEY__||(t.__DIFF_KEY__=++X)}),_=function(e){function t(){this.constructor=n}var n,i;function r(t){return void 0===t&&(t=[]),e.call(this,t,x)||this}return P(n=r,i=e),n.prototype=null===i?Object.create(i):(t.prototype=i.prototype,new t),r}(function(){function t(t,e){void 0===t&&(t=[]),this.findKeyCallback=e,this.list=[].slice.call(t)}return t.prototype.update=function(t){var e=[].slice.call(t),n=i(this.list,e,this.findKeyCallback);return this.list=e,n},t}());function S(t,e){return i(t,e,x)}function j(t,e,n){var i=t.tag,r=t.children,s=t.attributes,o=t.className,a=t.style,c=e||document.createElement(i);for(var l in s)c.setAttribute(l,s[l]);var h=c.children;if(r.forEach(function(t,e){j(t,h[e],c)}),o&&o.split(" ").forEach(function(t){var e,n,i,r;r=t,((i=c).classList?i.classList.contains(r):i.className.match(new RegExp("(\\s|^)"+r+"(\\s|$)")))||(n=t,(e=c).classList?e.classList.add(n):e.className+=" "+n)}),a){var u=c.style;for(var l in a)u[l]=a[l]}return!e&&n&&n.appendChild(c),c}function w(t,e){for(var n=[],i=2;i<arguments.length;i++)n[i-2]=arguments[i];var r=e||{},s=r.className,o=r.style;return{tag:t,className:void 0===s?"":s,style:void 0===o?{}:o,attributes:function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}(r,["className","style"]),children:n}}var M,R,F,k,N=["selectableTargets","continueSelect","hitRate"],L=(F="rCS"+e(M="\n:host {\n    position: absolute;\n    display: none;\n    border: 1px solid #4af;\n    background: rgba(68, 170, 255, 0.5);\n    z-index: 100;\n}\n").toString(36),k=0,{className:F,inject:function(t){var e,n=function(t){if(t.getRootNode){var e=t.getRootNode();if(11===e.nodeType)return e}}(t),i=0===k;return(n||i)&&(e=s(F,M)),i&&(R=e),n||++k,{destroy:function(){n?(t.removeChild(e),e=null):(0<k&&--k,0===k&&R&&(R.parentNode.removeChild(R),R=null))}}}});return function(e){function t(){this.constructor=n}var n,i;function r(t){void 0===t&&(t={});var v=e.call(this)||this;return v.selectedTargets=[],v.differ=new _,v.onDragStart=function(t,e){var n=t.datas,i=t.clientX,r=t.clientY,s=t.inputEvent,o=v.options,a=o.continueSelect,c=o.selectFromInside,l=v.getSelectableTargets(),h=l.map(function(t){var e=t.getBoundingClientRect(),n=e.left,i=e.top;return{left:n,top:i,right:n+e.width,bottom:i+e.height}});n.selectableTargets=l,n.selectableRects=h,n.startSelectedTargets=v.selectedTargets;var u=e||document.elementFromPoint(i,r),f=v.hitTest({left:i,top:r,right:i,bottom:r},i,r,l,h).filter(function(t){return t===u||t.contains(u)}),d=0<f.length;a?f=v.getSelectedTargets(f):v.selectedTargets=[];var p=s.type;return!(("mousedown"===p||"touchstart"===p)&&!v.trigger("dragStart",t))&&(v.select(f,s,!0),n.startX=i,n.startY=r,n.selectedTargets=f,v.target.style.cssText+="left:"+i+"px;top:"+r+"px",!(!c&&d)||(v.onDragEnd(t),!1))},v.onDrag=function(t){var e=t.distX,n=t.distY,i=t.datas,r=t.inputEvent,s=i.startX,o=i.startY,a=Math.min(0,e),c=Math.min(0,n),l=Math.abs(e),h=Math.abs(n);v.target.style.cssText+="display: block;transform: translate("+a+"px, "+c+"px);width:"+l+"px;height:"+h+"px;";var u=s+a,f=o+c,d=v.hitTest({left:u,top:f,right:u+l,bottom:f+h},i.startX,i.startY,i.selectableTargets,i.selectableRects),p=v.getSelectedTargets(d);v.select(p,r),i.selectedTargets=p},v.onDragEnd=function(t){var e=t.datas,n=t.inputEvent;v.target.style.cssText+="display: none;",v.selecteEnd(e.startSelectedTargets,e.selectedTargets,n),v.selectedTargets=e.selectedTargets},v.target=t.target,v.container=t.container,v.options=l({target:null,container:null,dragContainer:null,selectableTargets:[],selectByClick:!0,selectFromInside:!0,hitRate:100,continueSelect:!1},t),v.initElement(),v}c(n=r,i=e),n.prototype=null===i?Object.create(i):(t.prototype=i.prototype,new t);var s,o,a=r.prototype;return a.setSelectedTargets=function(t){this.selectedTargets=t,this.differ=new _(t)},a.destroy=function(){this.dragger.unset(),this.injectResult.destroy(),this.dragger=null,this.injectResult=null,this.target=null,this.container=null,this.options=null},a.click=function(t,e){var n=function(t){if("touches"in t){var e=t.touches[0];return{clientX:e.clientX,clientY:e.clientY}}return{clientX:t.clientX,clientY:t.clientY}}(t),i={datas:{},clientX:n.clientX,clientY:n.clientY,inputEvent:t};this.onDragStart(i,e)&&this.onDragEnd(i)},a.initElement=function(){this.target=j(w("div",{className:"selecto-selection "+L.className}),this.target,this.container);var t=this.target;this.dragger=new C(this.options.dragContainer||this.target.parentElement,{container:window,dragstart:this.onDragStart,drag:this.onDrag,dragend:this.onDragEnd}),this.injectResult=L.inject(t)},a.hitTest=function(t,d,p,v,e){var n=this.options,g=n.hitRate,m=n.selectByClick,y=t.left,b=t.top,E=t.right,C=t.bottom,D=[];return e.forEach(function(t,e){var n=t.left,i=t.top,r=t.right,s=t.bottom,o=n<=d&&d<=r&&i<=p&&p<=s,a=(r-n)*(s-i),c=Math.max(n,y),l=Math.min(r,E),h=Math.max(i,b),u=Math.min(s,C);if(m&&o)D.push(v[e]);else if(!(l<c||u<h)){var f=Math.round((l-c)*(u-h)/a*100);g<=f&&D.push(v[e])}}),D},a.getSelectableTargets=function(){var n=[];return this.options.selectableTargets.forEach(function(t){var e;(e=t)&&"object"==typeof e?n.push(t):[].slice.call(document.querySelectorAll(t)).forEach(function(t){n.push(t)})}),n},a.getSelectedTargets=function(t){var e=S(this.selectedTargets,t),n=e.list,i=e.prevList,r=e.added,s=e.removed;return r.map(function(t){return n[t]}).concat(s.map(function(t){return i[t]}))},a.select=function(t,e,n){var i=this.differ.update(t),r=i.added,s=i.removed,o=i.prevList,a=i.list;n&&this.trigger("selectStart",{selected:t,added:r.map(function(t){return a[t]}),removed:s.map(function(t){return o[t]}),inputEvent:e}),(r.length||s.length)&&this.trigger("select",{selected:t,added:r.map(function(t){return a[t]}),removed:s.map(function(t){return o[t]}),inputEvent:e})},a.selecteEnd=function(t,e,n){var i=S(t,e),r=i.added,s=i.removed,o=i.prevList,a=i.list,c=S(this.selectedTargets,e),l=c.added,h=c.removed,u=c.prevList,f=c.list,d=n.type,p="mousedown"===d||"touchstart"===d;this.trigger("selectEnd",{selected:e,added:r.map(function(t){return a[t]}),removed:s.map(function(t){return o[t]}),afterAdded:l.map(function(t){return f[t]}),afterRemoved:h.map(function(t){return u[t]}),isDragStart:p,inputEvent:n})},r=function(t,e,n,i){var r,s=arguments.length,o=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;0<=a;a--)(r=t[a])&&(o=(s<3?r(o):3<s?r(e,n,o):r(e,n))||o);return 3<s&&o&&Object.defineProperty(e,n,o),o}([(s=N,o=function(t,e){Object.defineProperty(t,e,{get:function(){return this.options[e]},set:function(t){this.options[e]=t},enumerable:!0,configurable:!0})},function(t){var e=t.prototype;s.forEach(function(t){o(e,t)})})],r)}(t)});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Selecto=e()}(this,function(){"use strict";var c=function(t,e){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var u=function(){return(u=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function a(t){return void 0===t}var t=function(){var t=function(){function t(){this._eventHandler={},this.options={}}var e=t.prototype;return e.trigger=function(t,e){void 0===e&&(e={});var n=this._eventHandler[t]||[];if(!(0<n.length))return!0;n=n.concat(),e.eventType=t;var i=!1,r=[e],o=0;e.stop=function(){i=!0},e.currentTarget=this;for(var s=arguments.length,a=new Array(2<s?s-2:0),c=2;c<s;c++)a[c-2]=arguments[c];for(1<=a.length&&(r=r.concat(a)),o=0;n[o];o++)n[o].apply(this,r);return!i},e.once=function(r,o){if("object"==typeof r&&a(o)){var t,e=r;for(t in e)this.once(t,e[t]);return this}if("string"==typeof r&&"function"==typeof o){var s=this;this.on(r,function t(){for(var e=arguments.length,n=new Array(e),i=0;i<e;i++)n[i]=arguments[i];o.apply(s,n),s.off(r,t)})}return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&a(e)){var n,i=t;for(n in i)this.on(n,i[n]);return this}if("string"==typeof t&&"function"==typeof e){var r=this._eventHandler[t];a(r)&&(this._eventHandler[t]=[],r=this._eventHandler[t]),r.push(e)}return this},e.off=function(t,e){if(a(t))return this._eventHandler={},this;if(a(e)){if("string"==typeof t)return this._eventHandler[t]=void 0,this;var n,i=t;for(n in i)this.off(n,i[n]);return this}var r,o,s=this._eventHandler[t];if(s)for(r=0;void 0!==(o=s[r]);r++)if(o===e){s=s.splice(r,1);break}return this},t}();return t.VERSION="2.1.2",t}();function l(t,e,n,i){t.addEventListener(e,n,i)}function n(t,e,n){t.removeEventListener(e,n)}var h=function(){return(h=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)};function f(t,e,n,i){var r=m(t),o=m(e),s=m(i);return p(b(i[0],C(r,s)),b(i[0],C(o,s)),n[0])}function d(t){return t.touches?y(t.touches):[r(t)]}function p(t,e,n){var i=t.clientX,r=t.clientY;return{clientX:i,clientY:r,deltaX:i-e.clientX,deltaY:r-e.clientY,distX:i-n.clientX,distY:r-n.clientY}}function v(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function g(t,n,i){return t.map(function(t,e){return p(t,n[e],i[e])})}function y(t){for(var e=Math.min(t.length,2),n=[],i=0;i<e;++i)n.push(r(t[i]));return n}function r(t){return{clientX:t.clientX,clientY:t.clientY}}function m(t){return{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function b(t,e){return{clientX:t.clientX+e.clientX,clientY:t.clientY+e.clientY}}function C(t,e){return{clientX:t.clientX-e.clientX,clientY:t.clientY-e.clientY}}var E=function(){function t(t,e){var s=this;void 0===e&&(e={}),this.el=t,this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.movement=0,this.startPinchClients=[],this.startDistance=0,this.customDist=[0,0],this.onDragStart=function(t){if(s.flag||!1!==t.cancelable){if((e=t).touches&&2<=e.touches.length){if(!s.flag&&t.touches.length!==t.changedTouches.length)return;s.pinchFlag||s.onPinchStart(t)}var e;if(!s.flag){var n=s.startClients[0]?s.startClients:d(t);s.customDist=[0,0],s.flag=!0,s.isDrag=!1,s.startClients=n,s.prevClients=n,s.datas={};var i=p(n[s.movement=0],s.prevClients[0],s.startClients[0]),r=s.options,o=r.dragstart;(r.preventRightClick&&3===t.which||!1===(o&&o(h({datas:s.datas,inputEvent:t},i))))&&(s.startClients=[],s.prevClients=[],s.flag=!1),s.flag&&t.preventDefault()}}},this.onDrag=function(t,e){if(s.flag){var n=d(t);s.pinchFlag&&s.onPinch(t,n);var i=s.move([0,0],t,n);if(i&&(i.deltaX||i.deltaY)){var r=s.options.drag;r&&r(h({},i,{isScroll:!!e,inputEvent:t}))}}},this.onDragEnd=function(t){if(s.flag){s.pinchFlag&&s.onPinchEnd(t),s.flag=!1;var e=s.options.dragend,n=s.prevClients,i=s.startClients,r=s.pinchFlag?f(n,n,i,s.startPinchClients):p(n[0],n[0],i[0]);s.startClients=[],s.prevClients=[],e&&e(h({datas:s.datas,isDrag:s.isDrag,inputEvent:t},r))}},this.options=h({container:t,preventRightClick:!0,pinchThreshold:0,events:["touch","mouse"]},e);var n=this.options,i=n.container,r=n.events;if(this.isTouch=-1<r.indexOf("touch"),this.isMouse=-1<r.indexOf("mouse"),this.customDist=[0,0],this.isMouse&&(l(t,"mousedown",this.onDragStart),l(i,"mousemove",this.onDrag),l(i,"mouseup",this.onDragEnd)),this.isTouch){var o={passive:!1};l(t,"touchstart",this.onDragStart,o),l(i,"touchmove",this.onDrag,o),l(i,"touchend",this.onDragEnd,o)}}var e=t.prototype;return e.isDragging=function(){return this.isDrag},e.isPinching=function(){return this.isPinch},e.scrollBy=function(e,n,t,i){void 0===i&&(i=!0),this.flag&&(this.startClients.forEach(function(t){t.clientX-=e,t.clientY-=n}),this.prevClients.forEach(function(t){t.clientX-=e,t.clientY-=n}),i&&this.onDrag(t,!0))},e.move=function(t,e,n){var i=t[0],r=t[1];void 0===n&&(n=this.prevClients);var o=this.customDist,s=this.prevClients,a=this.startClients,c=this.pinchFlag?f(n,s,a,this.startPinchClients):p(n[0],s[0],a[0]);o[0]+=i,o[1]+=r,c.deltaX+=i,c.deltaY+=r;var u=c.deltaX,l=c.deltaY;return c.distX+=o[0],c.distY+=o[1],this.movement+=Math.sqrt(u*u+l*l),this.prevClients=n,this.isDrag=!0,h({datas:this.datas},c,{isScroll:!1,inputEvent:e})},e.onPinchStart=function(t){var e,n,i=this.options,r=i.pinchstart,o=i.pinchThreshold;if(!(this.isDrag&&this.movement>o)){var s=y(t.changedTouches);if(this.pinchFlag=!0,(e=this.startClients).push.apply(e,s),(n=this.prevClients).push.apply(n,s),this.startDistance=v(this.prevClients),this.startPinchClients=this.prevClients.slice(),r){var a=this.prevClients,c=m(a),u=p(c,c,c);r(h({datas:this.datas,touches:g(a,a,a)},u,{inputEvent:t}))}}},e.onPinch=function(t,e){if(this.flag&&this.pinchFlag){this.isPinch=!0;var n=this.options.pinch;if(n){var i=this.prevClients,r=this.startClients,o=p(m(e),m(i),m(r)),s=v(e);n(h({datas:this.datas,touches:g(e,i,r),scale:s/this.startDistance,distance:s},o,{inputEvent:t}))}}},e.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var e=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.options.pinchend;if(n){var i=this.prevClients,r=this.startClients,o=p(m(i),m(i),m(r));n(h({datas:this.datas,isPinch:e,touches:g(i,i,r)},o,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},e.unset=function(){var t=this.el,e=this.options.container;this.isMouse&&(n(t,"mousedown",this.onDragStart),n(e,"mousemove",this.onDrag),n(e,"mouseup",this.onDragEnd)),this.isTouch&&(n(t,"touchstart",this.onDragStart),n(e,"touchmove",this.onDrag),n(e,"touchend",this.onDragEnd))},t}();var e=function(t){for(var e=5381,n=t.length;n;)e=33*e^t.charCodeAt(--n);return e>>>0};function o(i,t,e){var n=document.createElement("style");return n.setAttribute("type","text/css"),n.innerHTML=t.replace(/([^}{]*){/gm,function(t,e){return((n=e.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g))?n.map(function(t){return t.trim()}):[]).map(function(t){return-1<t.indexOf(":global")?t.replace(/\:global/g,""):-1<t.indexOf(":host")?""+t.replace(/\:host/g,"."+i):"."+i+" "+t}).join(", ")+"{";var n}),(e||document.head||document.body).appendChild(n),n}var w=function(){function t(){this.keys=[],this.values=[]}var e=t.prototype;return e.get=function(t){return this.values[this.keys.indexOf(t)]},e.set=function(t,e){var n=this.keys,i=this.values,r=n.indexOf(t),o=-1===r?n.length:r;n[o]=t,i[o]=e},t}(),k=function(){function t(){this.object={}}var e=t.prototype;return e.get=function(t){return this.object[t]},e.set=function(t,e){this.object[t]=e},t}(),O="function"==typeof Map,s=function(){function t(){}var e=t.prototype;return e.connect=function(t,e){this.prev=t,this.next=e,t&&(t.next=this),e&&(e.prev=this)},e.disconnect=function(){var t=this.prev,e=this.next;t&&(t.next=e),e&&(e.prev=t)},e.getIndex=function(){for(var t=this,e=-1;t;)t=t.prev,++e;return e},t}();var _=function(){function t(t,e,n,i,r,o,s,a){this.prevList=t,this.list=e,this.added=n,this.removed=i,this.changed=r,this.maintained=o,this.changedBeforeAdded=s,this.fixed=a}var e=t.prototype;return Object.defineProperty(e,"ordered",{get:function(){return this.cacheOrdered||this.caculateOrdered(),this.cacheOrdered},enumerable:!0,configurable:!0}),Object.defineProperty(e,"pureChanged",{get:function(){return this.cachePureChanged||this.caculateOrdered(),this.cachePureChanged},enumerable:!0,configurable:!0}),e.caculateOrdered=function(){var t,n,a,c,e=(t=this.changedBeforeAdded,n=this.fixed,a=[],c=[],t.forEach(function(t){var e=t[0],n=t[1],i=new s;a[e]=i,c[n]=i}),a.forEach(function(t,e){t.connect(a[e-1])}),t.filter(function(t,e){return!n[e]}).map(function(t,e){var n=t[0],i=t[1];if(n===i)return[0,0];var r=a[n],o=c[i-1],s=r.getIndex();return r.disconnect(),o?r.connect(o,o.next):r.connect(void 0,a[0]),[s,r.getIndex()]})),u=this.changed,l=[];this.cacheOrdered=e.filter(function(t,e){var n=t[0],i=t[1],r=u[e],o=r[0],s=r[1];if(n!==i)return l.push([o,s]),!0}),this.cachePureChanged=l},t}();function i(t,e,n){var i=O?Map:n?k:w,r=n||function(t){return t},o=[],s=[],a=[],c=t.map(r),u=e.map(r),l=new i,h=new i,f=[],d=[],p={},v=[],g=0,y=0;return c.forEach(function(t,e){l.set(t,e)}),u.forEach(function(t,e){h.set(t,e)}),c.forEach(function(t,e){var n=h.get(t);void 0===n?(++y,s.push(e)):p[n]=y}),u.forEach(function(t,e){var n=l.get(t);void 0===n?(o.push(e),++g):(a.push([n,e]),y=p[e]||0,f.push([n-y,e-g]),d.push(e===n),n!==e&&v.push([n,e]))}),s.reverse(),new _(t,e,o,s,v,a,f,d)}var D=function(t,e){return(D=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var K,T="function"==typeof Map?void 0:(K=0,function(t){return t.__DIFF_KEY__||(t.__DIFF_KEY__=++K)}),S=function(e){function t(){this.constructor=n}var n,i;function r(t){return void 0===t&&(t=[]),e.call(this,t,T)||this}return D(n=r,i=e),n.prototype=null===i?Object.create(i):(t.prototype=i.prototype,new t),r}(function(){function t(t,e){void 0===t&&(t=[]),this.findKeyCallback=e,this.list=[].slice.call(t)}return t.prototype.update=function(t){var e=[].slice.call(t),n=i(this.list,e,this.findKeyCallback);return this.list=e,n},t}());function x(t,e){return i(t,e,T)}var j=function(t,e){return(j=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var P,Y=(function(t,e){function n(t){if(t&&"object"==typeof t){var e=t.which||t.keyCode||t.charCode;e&&(t=e)}if("number"==typeof t)return s[t];var n,i=String(t);return(n=r[i.toLowerCase()])?n:(n=o[i.toLowerCase()])||(1===i.length?i.charCodeAt(0):void 0)}n.isEventKey=function(t,e){if(t&&"object"==typeof t){var n=t.which||t.keyCode||t.charCode;if(null==n)return!1;if("string"==typeof e){var i;if(i=r[e.toLowerCase()])return i===n;if(i=o[e.toLowerCase()])return i===n}else if("number"==typeof e)return e===n;return!1}};var r=(e=t.exports=n).code=e.codes={backspace:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,"pause/break":19,"caps lock":20,esc:27,space:32,"page up":33,"page down":34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,delete:46,command:91,"left command":91,"right command":93,"numpad *":106,"numpad +":107,"numpad -":109,"numpad .":110,"numpad /":111,"num lock":144,"scroll lock":145,"my computer":182,"my calculator":183,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,"\\":220,"]":221,"'":222},o=e.aliases={windows:91,"⇧":16,"⌥":18,"⌃":17,"⌘":91,ctl:17,control:17,option:18,pause:19,break:19,caps:20,return:13,escape:27,spc:32,spacebar:32,pgup:33,pgdn:34,ins:45,del:46,cmd:91};for(i=97;i<123;i++)r[String.fromCharCode(i)]=i-32;for(var i=48;i<58;i++)r[i-48]=i;for(i=1;i<13;i++)r["f"+i]=i+111;for(i=0;i<10;i++)r["numpad "+i]=i+96;var s=e.names=e.title={};for(i in r)s[r[i]]=i;for(var a in o)r[a]=o[a]}(P={exports:{}},P.exports),P.exports),X=(Y.code,Y.codes,Y.aliases,Y.names);Y.title;function M(t){return Array.isArray(t)}function R(t){return"string"==typeof t}function F(t,e,n,i){t.addEventListener(e,n,i)}function L(t,e,n){t.removeEventListener(e,n)}var A,N={"+":"plus","left command":"meta","right command":"meta"},H={shift:1,ctrl:2,alt:3,meta:4};function I(t){var e=X[t]||"";for(var n in N)e=e.replace(n,N[n]);return e.replace(/\s/g,"")}function B(t){var e=t.slice();return e.sort(function(t,e){return(H[t]||5)-(H[e]||5)}),e}var q=function(n){function t(){this.constructor=e}var e,i;function r(t){void 0===t&&(t=window);var e=n.call(this)||this;return e.container=t,e.ctrlKey=!1,e.altKey=!1,e.shiftKey=!1,e.metaKey=!1,e.clear=function(){return e.ctrlKey=!1,e.altKey=!1,e.shiftKey=!1,e.metaKey=!1,e},e.keydownEvent=function(t){e.triggerEvent("keydown",t)},e.keyupEvent=function(t){e.triggerEvent("keyup",t)},F(t,"blur",e.clear),F(t,"keydown",e.keydownEvent),F(t,"keyup",e.keyupEvent),e}j(e=r,i=n),e.prototype=null===i?Object.create(i):(t.prototype=i.prototype,new t);var o=r.prototype;return Object.defineProperty(r,"global",{get:function(){return A=A||new r},enumerable:!0,configurable:!0}),r.setGlobal=function(){return this.global},o.destroy=function(){var t=this.container;this.clear(),this.off(),L(t,"blur",this.clear),L(t,"keydown",this.keydownEvent),L(t,"keyup",this.keyupEvent)},o.keydown=function(t,e){return this.addEvent("keydown",t,e)},o.offKeydown=function(t,e){return this.removeEvent("keydown",t,e)},o.offKeyup=function(t,e){return this.removeEvent("keyup",t,e)},o.keyup=function(t,e){return this.addEvent("keyup",t,e)},o.addEvent=function(t,e,n){return M(e)?this.on(t+"."+B(e).join("."),n):R(e)?this.on(t+"."+e,n):this.on(t,e),this},o.removeEvent=function(t,e,n){return M(e)?this.off(t+"."+B(e).join("."),n):R(e)?this.off(t+"."+e,n):this.off(t,e),this},o.triggerEvent=function(t,e){this.ctrlKey=e.ctrlKey,this.shiftKey=e.shiftKey,this.altKey=e.altKey,this.metaKey=e.metaKey;var n=I(e.keyCode),i={key:n,isToggle:"ctrl"===n||"shift"===n||"meta"===n||"alt"===n,inputEvent:e,keyCode:e.keyCode,ctrlKey:e.ctrlKey,altKey:e.altKey,shiftKey:e.shiftKey,metaKey:e.metaKey};this.trigger(t,i),this.trigger(t+"."+n,i);var r=function(t,e){void 0===e&&(e=I(t.keyCode));var n=[t.shiftKey&&"shift",t.ctrlKey&&"ctrl",t.altKey&&"alt",t.metaKey&&"meta"];return-1===n.indexOf(e)&&n.push(e),n.filter(Boolean)}(e,n);1<r.length&&this.trigger(t+"."+r.join("."),i)},r}(t);function U(t,e,n){var i=t.tag,r=t.children,o=t.attributes,s=t.className,a=t.style,c=e||document.createElement(i);for(var u in o)c.setAttribute(u,o[u]);var l=c.children;if(r.forEach(function(t,e){U(t,l[e],c)}),s&&s.split(" ").forEach(function(t){var e,n,i,r;r=t,((i=c).classList?i.classList.contains(r):i.className.match(new RegExp("(\\s|^)"+r+"(\\s|$)")))||(n=t,(e=c).classList?e.classList.add(n):e.className+=" "+n)}),a){var h=c.style;for(var u in a)h[u]=a[u]}return!e&&n&&n.appendChild(c),c}function z(t,e){for(var n=[],i=2;i<arguments.length;i++)n[i-2]=arguments[i];var r=e||{},o=r.className,s=r.style;return{tag:t,className:void 0===o?"":o,style:void 0===s?{}:s,attributes:function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]])}return n}(r,["className","style"]),children:n}}function G(t,e,n){t!==e&&n(t,e)}var V,$,J,Q,W=["selectableTargets","continueSelect","hitRate"],Z=(J="rCS"+e(V="\n:host {\n    position: absolute;\n    display: none;\n    border: 1px solid #4af;\n    background: rgba(68, 170, 255, 0.5);\n    z-index: 100;\n}\n").toString(36),Q=0,{className:J,inject:function(t){var e,n=function(t){if(t.getRootNode){var e=t.getRootNode();if(11===e.nodeType)return e}}(t),i=0===Q;return(n||i)&&(e=o(J,V)),i&&($=e),n||++Q,{destroy:function(){n?(t.removeChild(e),e=null):(0<Q&&--Q,0===Q&&$&&($.parentNode.removeChild($),$=null))}}}}),tt=function(e){function t(){this.constructor=n}var n,i;function r(t){void 0===t&&(t={});var v=e.call(this)||this;return v.selectedTargets=[],v.differ=new S,v.onDragStart=function(t,e){var n=t.datas,i=t.clientX,r=t.clientY,o=t.inputEvent,s=v.options,a=s.continueSelect,c=s.selectFromInside,u=v.getSelectableTargets(),l=u.map(function(t){var e=t.getBoundingClientRect(),n=e.left,i=e.top;return{left:n,top:i,right:n+e.width,bottom:i+e.height}});n.selectableTargets=u,n.selectableRects=l,n.startSelectedTargets=v.selectedTargets;var h=e||document.elementFromPoint(i,r),f=v.hitTest({left:i,top:r,right:i,bottom:r},i,r,u,l).filter(function(t){return t===h||t.contains(h)}),d=0<f.length;a?f=v.getSelectedTargets(f):v.selectedTargets=[];var p=o.type;return!(("mousedown"===p||"touchstart"===p)&&!v.trigger("dragStart",t))&&(v.select(f,o,!0),n.startX=i,n.startY=r,n.selectedTargets=f,v.target.style.cssText+="left:"+i+"px;top:"+r+"px",!(!c&&d)||(v.onDragEnd(t),!1))},v.onDrag=function(t){var e=t.distX,n=t.distY,i=t.datas,r=t.inputEvent,o=i.startX,s=i.startY,a=Math.min(0,e),c=Math.min(0,n),u=Math.abs(e),l=Math.abs(n);v.target.style.cssText+="display: block;transform: translate("+a+"px, "+c+"px);width:"+u+"px;height:"+l+"px;";var h=o+a,f=s+c,d=v.hitTest({left:h,top:f,right:h+u,bottom:f+l},i.startX,i.startY,i.selectableTargets,i.selectableRects),p=v.getSelectedTargets(d);v.select(p,r),i.selectedTargets=p},v.onDragEnd=function(t){var e=t.datas,n=t.inputEvent;v.target.style.cssText+="display: none;",v.selecteEnd(e.startSelectedTargets,e.selectedTargets,n),v.selectedTargets=e.selectedTargets},v.onKeyDown=function(){v.continueSelect=!0,v.trigger("keydown",{})},v.onKeyUp=function(){v.continueSelect=!1,v.trigger("keyup",{})},v.target=t.target,v.container=t.container,v.options=u({target:null,container:null,dragContainer:null,selectableTargets:[],selectByClick:!0,selectFromInside:!0,hitRate:100,continueSelect:!1,toggleContinueSelect:null,keyContainer:null},t),v.initElement(),v.setKeyController(),v}c(n=r,i=e),n.prototype=null===i?Object.create(i):(t.prototype=i.prototype,new t);var o,s,a=r.prototype;return a.setSelectedTargets=function(t){this.selectedTargets=t,this.differ=new S(t)},a.setKeyContainer=function(t){var e=this,n=this.options;G(n.keyContainer,t,function(){n.keyContainer=t,e.setKeyController()})},a.setToggleContinueSelect=function(t){var e=this,n=this.options;G(n.toggleContinueSelect,t,function(){n.toggleContinueSelect=t,e.setKeyEvent()})},a.destroy=function(){this.off(),this.keycon&&this.keycon.destroy(),this.dragger.unset(),this.injectResult.destroy(),this.keycon=null,this.dragger=null,this.injectResult=null,this.target=null,this.container=null,this.options=null},a.click=function(t,e){var n=function(t){if("touches"in t){var e=t.touches[0];return{clientX:e.clientX,clientY:e.clientY}}return{clientX:t.clientX,clientY:t.clientY}}(t),i={datas:{},clientX:n.clientX,clientY:n.clientY,inputEvent:t};this.onDragStart(i,e)&&this.onDragEnd(i)},a.setKeyController=function(){var t=this.options,e=t.keyContainer,n=t.toggleContinueSelect;this.keycon&&(this.keycon.destroy(),this.keycon=null),n&&(this.keycon=new q(e||window)),this.setKeyEvent()},a.setKeyEvent=function(){var t=this.options.toggleContinueSelect;this.keycon?(this.keycon.off(),t&&this.keycon.keydown(t,this.onKeyDown).keyup(t,this.onKeyUp)):this.setKeyController()},a.initElement=function(){this.target=U(z("div",{className:"selecto-selection "+Z.className}),this.target,this.container);var t=this.target;this.dragger=new E(this.options.dragContainer||this.target.parentElement,{container:window,dragstart:this.onDragStart,drag:this.onDrag,dragend:this.onDragEnd}),this.injectResult=Z.inject(t)},a.hitTest=function(t,d,p,v,e){var n=this.options,g=n.hitRate,y=n.selectByClick,m=t.left,b=t.top,C=t.right,E=t.bottom,w=[];return e.forEach(function(t,e){var n=t.left,i=t.top,r=t.right,o=t.bottom,s=n<=d&&d<=r&&i<=p&&p<=o,a=(r-n)*(o-i),c=Math.max(n,m),u=Math.min(r,C),l=Math.max(i,b),h=Math.min(o,E);if(y&&s)w.push(v[e]);else if(!(u<c||h<l)){var f=Math.round((u-c)*(h-l)/a*100);g<=f&&w.push(v[e])}}),w},a.getSelectableTargets=function(){var n=[];return this.options.selectableTargets.forEach(function(t){var e;(e=t)&&"object"==typeof e?n.push(t):[].slice.call(document.querySelectorAll(t)).forEach(function(t){n.push(t)})}),n},a.getSelectedTargets=function(t){var e=x(this.selectedTargets,t),n=e.list,i=e.prevList,r=e.added,o=e.removed;return r.map(function(t){return n[t]}).concat(o.map(function(t){return i[t]}))},a.select=function(t,e,n){var i=this.differ.update(t),r=i.added,o=i.removed,s=i.prevList,a=i.list;n&&this.trigger("selectStart",{selected:t,added:r.map(function(t){return a[t]}),removed:o.map(function(t){return s[t]}),inputEvent:e}),(r.length||o.length)&&this.trigger("select",{selected:t,added:r.map(function(t){return a[t]}),removed:o.map(function(t){return s[t]}),inputEvent:e})},a.selecteEnd=function(t,e,n){var i=x(t,e),r=i.added,o=i.removed,s=i.prevList,a=i.list,c=x(this.selectedTargets,e),u=c.added,l=c.removed,h=c.prevList,f=c.list,d=n.type,p="mousedown"===d||"touchstart"===d;this.trigger("selectEnd",{selected:e,added:r.map(function(t){return a[t]}),removed:o.map(function(t){return s[t]}),afterAdded:u.map(function(t){return f[t]}),afterRemoved:l.map(function(t){return h[t]}),isDragStart:p,inputEvent:n})},r=function(t,e,n,i){var r,o=arguments.length,s=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,i);else for(var a=t.length-1;0<=a;a--)(r=t[a])&&(s=(o<3?r(s):3<o?r(e,n,s):r(e,n))||s);return 3<o&&s&&Object.defineProperty(e,n,s),s}([(o=W,s=function(t,e){var n={enumerable:!0,configurable:!0,get:function(){return this.options[e]}},i=("set "+e).replace(/[\s-_]([a-z])/g,function(t,e){return e.toUpperCase()});t[i]?n.set=function(t){this[i](t)}:n.set=function(t){this.options[e]=t},Object.defineProperty(t,e,n)},function(t){var e=t.prototype;o.forEach(function(t){s(e,t)})})],r)}(t),et={__proto__:null,default:tt};for(var nt in et)tt[nt]=et[nt];return tt});
 //# sourceMappingURL=selecto.pkgd.min.js.map

jsdoc.json

@@ -10,3 +10,3 @@
     "source": {
-		"include": ["./src", "README.md"],
+		"include": ["./src", "README.md", "node_modules/@egjs/component/src/Component.js"],
         "includePattern": "(.+\\.js(doc|x)?|.+\\.ts(doc|x)?)$",
@@ -25,3 +25,4 @@ "excludePattern": "(^|\\/|\\\\)_"
     "linkMap": {
-        "IObject": "http://daybrush.com/utils/release/latest/doc/global.html#ObjectInterface"
+        "IObject": "http://daybrush.com/utils/release/latest/doc/global.html#ObjectInterface",
+        "OnDragStart": "https://daybrush.com/drag/release/latest/doc/Dragger.html#.OnDragStart"
     },
@@ -28,0 +29,0 @@ "docdash": {

package.json

 {
   "name": "selecto",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.",
@@ -19,7 +19,7 @@ "main": "./dist/selecto.cjs.js",
   "keywords": [
-      "select",
-      "selecto",
-      "selection",
-      "selectable",
-      "moveable"
+    "select",
+    "selecto",
+    "selection",
+    "selectable",
+    "moveable"
   ],
@@ -42,3 +42,4 @@ "repository": {
     "css-styled": "^0.1.6",
-    "framework-utils": "^0.2.1"
+    "framework-utils": "^0.2.1",
+    "keycon": "^0.7.1"
   },
@@ -45,0 +46,0 @@ "devDependencies": {

README.md

@@ -43,2 +43,6 @@
     continueSelect: false;
+    // Determines which key to continue selecting the next target via keydown and keyup.
+    toggleContinueSelect: "shift",
+    // The container for keydown and keyup events
+    keyContainer: window,
     // The rate at which the target overlaps the drag area to be selected. (default: 100)
@@ -45,0 +49,0 @@ hitRate: number;

src/consts.ts

@@ -0,1 +1,4 @@
+/**
+ * @memberof Selecto
+ */
 export const PROPERTIES = [
@@ -7,2 +10,5 @@ "selectableTargets",
 
+/**
+ * @memberof Selecto
+ */
 export const EVENTS = [
@@ -13,4 +19,9 @@ "dragStart",
     "selectEnd",
+    "keydown",
+    "keyup",
 ] as const;
 
+/**
+ * @memberof Selecto
+ */
 export const METHODS = [
@@ -17,0 +28,0 @@ "click",

src/index.ts

 import Selecto from "./Selecto";
 
 export default Selecto;
+export * from "./consts";
 export * from "./types";

src/index.umd.ts

@@ -1,3 +0,7 @@
-import Selecto from "./Selecto";
+import Selecto, * as modules from "./Selecto";
 
+for (const name in modules) {
+    (Selecto as any)[name] = modules[name];
+}
+
 export default Selecto;

src/types.ts

 import { IObject } from "@daybrush/utils";
 import { PROPERTIES, METHODS } from "./consts";
 import Selecto from "./Selecto";
+import { OnDragStart as OnParentDragStart } from "@daybrush/drag";
 
+/**
+ * @memberof Selecto
+ * @typedef
+ * @property - Selection Element to apply for framework (private)
+ * @property - The container to add a selection element for vanilla
+ * @property - The area to drag selection element (default: container)
+ * @property - Targets to select. You can register a queryselector or an Element. (default: [])
+ * @property - Whether to select by click (default: true)
+ * @property - Whether to select from the target inside (default: true)
+ * @property - After the select, whether to select the next target with the selected target (deselected if the target is selected again). (default: false)
+ * @property - Determines which key to continue selecting the next target via keydown and keyup.
+ * @property - The container for keydown and keyup events
+ * @property - The rate at which the target overlaps the drag area to be selected. (default: 100)
+ */
 export interface SelectoOptions {
@@ -13,2 +28,4 @@ target: HTMLElement | null;
     continueSelect: boolean;
+    toggleContinueSelect: string[] | string | null;
+    keyContainer: Document | HTMLElement | Window | null;
     hitRate: number;
@@ -32,2 +49,10 @@ }
 
+/**
+ * @memberof Selecto
+ * @typedef
+ * @property - Selection Element to apply for framework (private)
+ * @property - added
+ * @property - removed
+ * @property - inputEvent
+ */
 export interface OnSelect {
@@ -39,3 +64,10 @@ selected: Array<HTMLElement | SVGElement>;
 }
-
+/**
+ * @memberof Selecto
+ * @extends Selecto.OnSelect
+ * @typedef
+ * @property - afterAdded
+ * @property - afterRemoved
+ * @property - isDragStart
+ */
 export interface OnSelectEnd extends OnSelect {
@@ -53,3 +85,21 @@ afterAdded: Array<HTMLElement | SVGElement>;
 }
+export interface OnKeyEvent {
+    datas: IObject<any>;
+    clientX: number;
+    clientY: number;
+    inputEvent: any;
+}
+
+export interface OnDragStart extends OnParentDragStart {
+    stop(): void;
+}
+export interface SelectoEvents {
+    dragStart: OnDragStart;
+    selectStart: OnSelect;
+    select: OnSelect;
+    selectEnd: OnSelectEnd;
+    keydown: OnKeyEvent;
+    keyup: OnKeyEvent;
+}
 export type SelectoProperties = { [P in typeof PROPERTIES[number]]: SelectoOptions[P] };
 export type SelectoMethods = { [P in typeof METHODS[number]]: Selecto[P] };

src/utils.ts

@@ -71,1 +71,7 @@ import { Hypertext } from "./types";
 }
+
+export function diffValue<T>(prev: T, cur: T, func: (prev: T, cur: T) => void) {
+    if (prev !== cur) {
+        func(prev, cur);
+    }
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

439765

increased by43.73%

Lines of code

5703

increased by49.96%

Number of lines in readme file

99

increased by4.21%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedkeycon@^0.7.1

• + Addedkeycode@2.2.1(transitive)

• + Addedkeycon@0.7.1(transitive)