StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics
https://doi.org/10.1109/TVCG.2020.3030352
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.4 KiB
97 lines
2.4 KiB
4 years ago
|
import { Direction } from '../typings'
|
||
|
|
|
||
|
|
interface IPosObject {
|
||
|
|
x: number
|
||
|
|
y: number
|
||
|
|
}
|
||
|
|
|
||
|
|
export const getSize = (value: number | string): string => {
|
||
|
|
return typeof value === 'number' ? `${value}px` : value
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Get the distance of the element from the top/left of the page */
|
||
|
|
export const getOffset = (elem: HTMLDivElement): IPosObject => {
|
||
|
|
const doc = document.documentElement as HTMLElement
|
||
|
|
const body = document.body as HTMLElement
|
||
|
|
const rect = elem.getBoundingClientRect()
|
||
|
|
const offset: IPosObject = {
|
||
|
|
y: rect.top + (window.pageYOffset || doc.scrollTop) - (doc.clientTop || body.clientTop || 0),
|
||
|
|
x:
|
||
|
|
rect.left + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || body.clientLeft || 0),
|
||
|
|
}
|
||
|
|
return offset
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get the position of the mouse/finger in the element
|
||
|
|
* @param e Trigger event
|
||
|
|
* @param elem Container element
|
||
|
|
* @param isReverse From the right/bottom
|
||
|
|
*/
|
||
|
|
export const getPos = (
|
||
|
|
e: MouseEvent | TouchEvent,
|
||
|
|
elem: HTMLDivElement,
|
||
|
|
isReverse: boolean,
|
||
|
|
): IPosObject => {
|
||
|
|
const event = 'targetTouches' in e ? e.targetTouches[0] : e
|
||
|
|
const offset = getOffset(elem)
|
||
|
|
const posObj = {
|
||
|
|
x: event.pageX - offset.x,
|
||
|
|
y: event.pageY - offset.y,
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
x: isReverse ? elem.offsetWidth - posObj.x : posObj.x,
|
||
|
|
y: isReverse ? elem.offsetHeight - posObj.y : posObj.y,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const enum KEY_CODE {
|
||
|
|
PAGE_UP = 33,
|
||
|
|
PAGE_DOWN,
|
||
|
|
END,
|
||
|
|
HOME,
|
||
|
|
LEFT,
|
||
|
|
UP,
|
||
|
|
RIGHT,
|
||
|
|
DOWN,
|
||
|
|
}
|
||
|
|
export type HandleFunction = (index: number) => number
|
||
|
|
export const getKeyboardHandleFunc = (
|
||
|
|
e: KeyboardEvent,
|
||
|
|
params: {
|
||
|
|
direction: Direction
|
||
|
|
max: number
|
||
|
|
min: number
|
||
|
|
hook: (e: KeyboardEvent) => HandleFunction | boolean
|
||
|
|
},
|
||
|
|
): HandleFunction | null => {
|
||
|
|
if (params.hook) {
|
||
|
|
const result = params.hook(e)
|
||
|
|
if (typeof result === 'function') return result
|
||
|
|
if (!result) return null
|
||
|
|
}
|
||
|
|
switch (e.keyCode) {
|
||
|
|
case KEY_CODE.UP:
|
||
|
|
return i => (params.direction === 'ttb' ? i - 1 : i + 1)
|
||
|
|
case KEY_CODE.RIGHT:
|
||
|
|
return i => (params.direction === 'rtl' ? i - 1 : i + 1)
|
||
|
|
case KEY_CODE.DOWN:
|
||
|
|
return i => (params.direction === 'ttb' ? i + 1 : i - 1)
|
||
|
|
case KEY_CODE.LEFT:
|
||
|
|
return i => (params.direction === 'rtl' ? i + 1 : i - 1)
|
||
|
|
|
||
|
|
case KEY_CODE.END:
|
||
|
|
return () => params.max
|
||
|
|
case KEY_CODE.HOME:
|
||
|
|
return () => params.min
|
||
|
|
|
||
|
|
case KEY_CODE.PAGE_UP:
|
||
|
|
return i => i + 10
|
||
|
|
case KEY_CODE.PAGE_DOWN:
|
||
|
|
return i => i - 10
|
||
|
|
|
||
|
|
default:
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
}
|