Support both selection and text select

src/index.ts

@@ -9,7 +9,8 @@ import type { ILineUpOptions, ITaggleOptions } from './config';
 
 export * from './builder';
 export * from './config';
-export { default as AEventDispatcher, IEventContext, IEventHandler, IEventListener } from './internal/AEventDispatcher';
+export { default as AEventDispatcher } from './internal/AEventDispatcher';
+export type { IEventContext, IEventHandler, IEventListener } from './internal/AEventDispatcher';
 export type { ISequence, IForEachAble } from './internal/interable';
 export type { ILookUpArray } from './internal/math';
 export * from './internal/mathInterfaces';

src/model/index.ts

@@ -12,13 +12,8 @@ export * from './IArrayColumn';
 
 export { toCategories } from './internalCategorical';
 
-export {
-  ScaleMappingFunction,
-  ScriptMappingFunction,
-  mappingFunctions,
-  IScriptMappingFunctionType,
-  IScriptMappingFunctionContext,
-} from './MappingFunction';
+export { ScaleMappingFunction, ScriptMappingFunction, mappingFunctions } from './MappingFunction';
+export type { IScriptMappingFunctionType, IScriptMappingFunctionContext } from './MappingFunction';
 export { DEFAULT_CATEGORICAL_COLOR_FUNCTION, ReplacementColorMappingFunction } from './CategoricalColorMappingFunction';
 export {
   CustomColorMappingFunction,

src/provider/index.ts

@@ -5,6 +5,7 @@ export * from './LocalDataProvider';
 export * from './RemoteDataProvider';
 export { deriveColors, deriveColumnDescriptions, exportRanking, exportTable } from './utils';
 export * from './interfaces';
-export { tasksAll, IRenderTaskExecutor } from './tasks';
+export { tasksAll } from './tasks';
+export type { IRenderTaskExecutor } from './tasks';
 export type { CompareLookup } from './sort';
 export type { ITopNGetter, IGroupMeta } from './internal';

src/ui/SelectionManager.ts

@@ -27,6 +27,7 @@ export declare function selectRange(from: number, to: number, additional: boolea
 export default class SelectionManager extends AEventDispatcher {
   static readonly EVENT_SELECT_RANGE = 'selectRange';
   private static readonly MIN_DISTANCE = 10;
+  private static readonly MAX_X_DISTANCE = 30;
 
   private readonly hr: HTMLHRElement;
 
@@ -51,21 +52,28 @@ export default class SelectionManager extends AEventDispatcher {
       this.body.removeEventListener('mouseup', mouseUp);
       this.body.removeEventListener('mouseleave', mouseUp);
 
-      if (!this.start) {
+      this.body.classList.remove(cssClass('selection-active'));
+      this.hr.classList.remove(cssClass('selection-active'));
+      const start = this.start;
+      this.start = null;
+
+      if (!start) {
         return;
       }
+
+      const valid = Math.abs(start.x - evt.clientX) < SelectionManager.MAX_X_DISTANCE;
+      if (!valid) {
+        return;
+      }
+
       const row = engineCssClass('tr');
-      const startNode = this.start.node.classList.contains(row)
-        ? this.start.node
-        : this.start.node.closest<HTMLElement>(`.${row}`);
+
+      const startNode = start.node.classList.contains(row) ? start.node : start.node.closest<HTMLElement>(`.${row}`);
+
       // somehow on firefox the mouseUp will be triggered on the original node
       // thus search the node explicitly
       const end = this.body.ownerDocument!.elementFromPoint(evt.clientX, evt.clientY) as HTMLElement;
       const endNode = end.classList.contains(row) ? end : end.closest<HTMLElement>(`.${row}`);
-      this.start = null;
-
-      this.body.classList.remove(cssClass('selection-active'));
-      this.hr.classList.remove(cssClass('selection-active'));
 
       this.select(evt.ctrlKey, startNode, endNode);
     };
@@ -74,9 +82,12 @@ export default class SelectionManager extends AEventDispatcher {
       'mousedown',
       (evt) => {
         const r = root.getBoundingClientRect();
+        const inSelectionColumn = (evt.target as HTMLElement).closest(`.${cssClass('renderer-selection')}`);
+        if (!inSelectionColumn) {
+          return;
+        }
         this.start = { x: evt.clientX, y: evt.clientY, xShift: r.left, yShift: r.top, node: evt.target as HTMLElement };
 
-        this.body.classList.add(cssClass('selection-active'));
         body.addEventListener('mousemove', mouseMove, {
           passive: true,
         });
@@ -122,10 +133,15 @@ export default class SelectionManager extends AEventDispatcher {
 
   private showHint(end: MouseEvent) {
     const start = this.start!;
+    const sx = start.x;
     const sy = start.y;
+    const ex = end.clientX;
     const ey = end.clientY;
 
-    const visible = Math.abs(sy - ey) > SelectionManager.MIN_DISTANCE;
+    const visible =
+      Math.abs(sy - ey) > SelectionManager.MIN_DISTANCE && Math.abs(sx - ex) < SelectionManager.MAX_X_DISTANCE;
+
+    this.body.classList.toggle(cssClass('selection-active'), visible);
     this.hr.classList.toggle(cssClass('selection-active'), visible);
     this.hr.style.transform = `translate(${start.x - start.xShift}px,${sy - start.yShift}px)scale(1,${Math.abs(
       ey - sy

src/ui/index.ts

@@ -7,7 +7,9 @@ export { default as LineUp } from './LineUp';
 export * from './LineUp';
 export { default as ALineUp } from './ALineUp';
 export * from './panel';
-export { default as SlopeGraph, ISlopeGraphOptions } from './SlopeGraph';
+export { default as SlopeGraph } from './SlopeGraph';
+export type { ISlopeGraphOptions } from './SlopeGraph';
 export * from './taggle';
 export { default as SelectionIndicator } from './SelectionIndicator';
-export { default as RenderColumn, IRenderers } from './RenderColumn';
+export { default as RenderColumn } from './RenderColumn';
+export type { IRenderers } from './RenderColumn';

src/ui/taggle/index.ts

@@ -1,4 +1,5 @@
 export * from './rules';
 export { default, default as Taggle } from './Taggle';
 export * from './Taggle';
-export { default as TaggleRenderer, ITaggleRendererOptions } from './TaggleRenderer';
+export { default as TaggleRenderer } from './TaggleRenderer';
+export type { ITaggleRendererOptions } from './TaggleRenderer';