@chasi/ui
Advanced tools
Comparing version 0.1.48 to 0.1.49
@@ -13,5 +13,5 @@ type Coord = { | ||
}; | ||
export default function (node: HTMLElement, params?: PannableParams): { | ||
destroy?: () => void; | ||
export default function (node: HTMLElement | SVGElement, params?: PannableParams): { | ||
destroy(): void; | ||
}; | ||
export {}; |
@@ -0,4 +1,15 @@ | ||
import { throttle } from '../CGraph'; | ||
export default function (node, params) { | ||
let x; | ||
let y; | ||
const trotMove = throttle((event) => { | ||
if (!params || !params.onMove) | ||
return; | ||
const e = event instanceof MouseEvent ? event : event.touches[0]; | ||
const dx = e.clientX - x; | ||
const dy = e.clientY - y; | ||
x = e.clientX; | ||
y = e.clientY; | ||
params.onMove(event, { x, y, dx, dy }); | ||
}, 50); | ||
function handleMousedown(event) { | ||
@@ -12,17 +23,7 @@ event.stopPropagation(); | ||
} | ||
window.addEventListener('mousemove', handleMousemove); | ||
window.addEventListener('mousemove', trotMove); | ||
window.addEventListener('mouseup', handleMouseup); | ||
window.addEventListener('touchmove', handleMousemove); | ||
window.addEventListener('touchmove', trotMove); | ||
window.addEventListener('touchend', handleMouseup); | ||
} | ||
function handleMousemove(event) { | ||
const e = event instanceof MouseEvent ? event : event.touches[0]; | ||
const dx = e.clientX - x; | ||
const dy = e.clientY - y; | ||
x = e.clientX; | ||
y = e.clientY; | ||
if (params && params.onMove) { | ||
params.onMove(event, { x, y, dx, dy }); | ||
} | ||
} | ||
function handleMouseup(event) { | ||
@@ -35,12 +36,16 @@ const e = event instanceof MouseEvent ? event : event.changedTouches[0]; | ||
} | ||
window.removeEventListener('mousemove', handleMousemove); | ||
window.removeEventListener('mousemove', trotMove); | ||
window.removeEventListener('mouseup', handleMouseup); | ||
window.removeEventListener('touchmove', handleMousemove); | ||
window.removeEventListener('touchmove', trotMove); | ||
window.removeEventListener('touchend', handleMouseup); | ||
} | ||
// @ts-ignore | ||
node.addEventListener('mousedown', handleMousedown); | ||
// @ts-ignore | ||
node.addEventListener('touchstart', handleMousedown); | ||
return { | ||
destroy() { | ||
// @ts-ignore | ||
node.removeEventListener('mousedown', handleMousedown); | ||
// @ts-ignore | ||
node.removeEventListener('touchstart', handleMousedown); | ||
@@ -47,0 +52,0 @@ } |
type ZoomableParams = { | ||
onZoom?: (delta: number, center: { | ||
onZoom: (delta: number, center: { | ||
x: number; | ||
@@ -7,5 +7,5 @@ y: number; | ||
}; | ||
export default function (node: HTMLElement, params: ZoomableParams): { | ||
destroy?: () => void; | ||
export default function (node: HTMLElement | SVGElement, params?: ZoomableParams): { | ||
destroy(): void; | ||
}; | ||
export {}; |
@@ -0,9 +1,20 @@ | ||
import { throttle } from '../CGraph'; | ||
export default function (node, params) { | ||
let dist; | ||
function scroll(e) { | ||
e.preventDefault(); | ||
if (params.onZoom) { | ||
const trotZoom = throttle((e) => { | ||
if (!params || !params.onZoom) | ||
return; | ||
if (e instanceof WheelEvent) { | ||
e.preventDefault(); | ||
params.onZoom(e.deltaY, { x: e.clientX, y: e.clientY }, false); | ||
} | ||
} | ||
else { | ||
const currentDist = Math.hypot(e.touches[0].pageX - e.touches[1].pageX, e.touches[0].pageY - e.touches[1].pageY); | ||
const delta = dist - currentDist; | ||
dist = currentDist; | ||
const centerX = (e.touches[0].pageX + e.touches[1].pageX) / 2; | ||
const centerY = (e.touches[0].pageY + e.touches[1].pageY) / 2; | ||
params.onZoom(delta, { x: centerX, y: centerY }, true); | ||
} | ||
}, 50); | ||
function touchStart(e) { | ||
@@ -13,25 +24,19 @@ e.preventDefault(); | ||
dist = Math.hypot(e.touches[0].pageX - e.touches[1].pageX, e.touches[0].pageY - e.touches[1].pageY); | ||
window.addEventListener('touchmove', handleTouchmove); | ||
window.addEventListener('touchmove', trotZoom); | ||
window.addEventListener('touchend', handleTouchend); | ||
} | ||
} | ||
function handleTouchmove(e) { | ||
const currentDist = Math.hypot(e.touches[0].pageX - e.touches[1].pageX, e.touches[0].pageY - e.touches[1].pageY); | ||
const delta = dist - currentDist; | ||
dist = currentDist; | ||
if (params.onZoom) { | ||
const centerX = (e.touches[0].pageX + e.touches[1].pageX) / 2; | ||
const centerY = (e.touches[0].pageY + e.touches[1].pageY) / 2; | ||
params.onZoom(delta, { x: centerX, y: centerY }, true); | ||
} | ||
} | ||
function handleTouchend() { | ||
window.removeEventListener('touchmove', handleTouchmove); | ||
window.removeEventListener('touchmove', trotZoom); | ||
window.removeEventListener('touchend', handleTouchend); | ||
} | ||
node.addEventListener('wheel', scroll); | ||
// @ts-ignore | ||
node.addEventListener('wheel', trotZoom); | ||
// @ts-ignore | ||
node.addEventListener('touchstart', touchStart); | ||
return { | ||
destroy() { | ||
node.removeEventListener('wheel', scroll); | ||
// @ts-ignore | ||
node.removeEventListener('wheel', trotZoom); | ||
// @ts-ignore | ||
node.removeEventListener('touchstart', touchStart); | ||
@@ -38,0 +43,0 @@ } |
@@ -7,4 +7,2 @@ import { SvelteComponentTyped } from "svelte"; | ||
handlerSelector?: string | undefined; | ||
ignoreHandler?: string | undefined; | ||
uid?: (T extends Record<string, any> ? keyof T : undefined) | undefined; | ||
class?: string | undefined; | ||
@@ -18,6 +16,3 @@ }; | ||
slots(): { | ||
default: { | ||
item: T; | ||
index: any; | ||
}; | ||
default: {}; | ||
}; | ||
@@ -24,0 +19,0 @@ } |
@@ -23,3 +23,6 @@ import { SvelteComponentTyped } from "svelte"; | ||
slots: { | ||
default: {}; | ||
default: { | ||
width: number; | ||
height: number; | ||
}; | ||
}; | ||
@@ -26,0 +29,0 @@ }; |
@@ -5,4 +5,5 @@ export { default as CGraph } from './CGraph.svelte'; | ||
export { default as CRect } from './CRect.svelte'; | ||
export { default as CObject } from './CObject.svelte'; | ||
export { default as CAxisX } from './CAxis-x.svelte'; | ||
export { default as CAxisY } from './CAxis-y.svelte'; | ||
export * from './utils'; |
@@ -5,4 +5,5 @@ export { default as CGraph } from './CGraph.svelte'; | ||
export { default as CRect } from './CRect.svelte'; | ||
export { default as CObject } from './CObject.svelte'; | ||
export { default as CAxisX } from './CAxis-x.svelte'; | ||
export { default as CAxisY } from './CAxis-y.svelte'; | ||
export * from './utils'; |
@@ -11,1 +11,4 @@ export declare function distance(p1: [number, number], p2: [number, number]): number; | ||
export declare function ticks(min: number, max: number, count: number): number[]; | ||
type ThrottledFunction<T extends (...args: any) => any> = (...args: Parameters<T>) => ReturnType<T>; | ||
export declare function throttle<T extends (...args: any) => any>(func: T, limit: number): ThrottledFunction<T>; | ||
export {}; |
@@ -69,1 +69,16 @@ import d3Ticks from './ticks'; | ||
} | ||
export function throttle(func, limit) { | ||
let inThrottle; | ||
let lastResult; | ||
return function () { | ||
const args = arguments; | ||
const context = this; | ||
if (!inThrottle) { | ||
inThrottle = true; | ||
setTimeout(() => (inThrottle = false), limit); | ||
// @ts-ignore | ||
lastResult = func.apply(context, args); | ||
} | ||
return lastResult; | ||
}; | ||
} |
{ | ||
"name": "@chasi/ui", | ||
"version": "0.1.48", | ||
"version": "0.1.49", | ||
"type": "module", | ||
@@ -5,0 +5,0 @@ "main": "./dist/index.js", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
176028
82
2074