Skip to content

Commit

Permalink
fix: drag and wheel highlight
Browse files Browse the repository at this point in the history
  • Loading branch information
nonzzz committed Jan 21, 2025
1 parent 903f5f5 commit 697fb11
Show file tree
Hide file tree
Showing 7 changed files with 18 additions and 22 deletions.
5 changes: 2 additions & 3 deletions dev/main.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { c2m, createTreemap, presetDecorator, sortChildrenByKey } from '../src'

import './live-reload'
Expand All @@ -11,7 +10,7 @@ const treemap = createTreemap()
treemap.use('decorator', presetDecorator)

function loadData() {
return fetch('data.json').then((res) => res.json()).then((data: any[]) => data)
return fetch('data.json').then((res) => res.json()).then((data: Any[]) => data)
}

async function main() {
Expand All @@ -30,7 +29,7 @@ treemap.init(root)

main().catch(console.error)
treemap.on('click', function(metadata) {
// this.zoom(metadata.module)
this.zoom(metadata.module)
})

new ResizeObserver(() => treemap.resize()).observe(root)
Expand Down
2 changes: 2 additions & 0 deletions global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Any = any
9 changes: 3 additions & 6 deletions src/etoile/graph/display.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,7 @@ export interface InstructionWithFunctionCall extends CanvasDrawImage {
type Mod<
T extends InstructionAssignMappings & InstructionWithFunctionCall = InstructionAssignMappings & InstructionWithFunctionCall,
K extends keyof T = keyof T
> // eslint-disable-next-line @typescript-eslint/no-explicit-any
= T[K] extends (...args: any) => any ? [K, Parameters<T[K]>] : never
> = T[K] extends (...args: Any) => Any ? [K, Parameters<T[K]>] : never

interface Instruction extends InstructionAssignMappings, InstructionWithFunctionCall {
mods: Array<{ mod: Mod, type: number }>
Expand Down Expand Up @@ -149,8 +148,7 @@ function createInstruction() {
stroke() {
this.mods.push({ mod: ['stroke', []], type: CALL_MAPPINGS_MODE })
},
// eslint-disable-next-line @typescript-eslint/no-explicit-any
drawImage(this: Instruction, ...args: any[]) {
drawImage(this: Instruction, ...args: Any[]) {
// @ts-expect-error safe
this.mods.push({ mod: ['drawImage', args], type: CALL_MAPPINGS_MODE })
}
Expand Down Expand Up @@ -187,8 +185,7 @@ export abstract class S extends Display {
export abstract class Graph extends S {
instruction: ReturnType<typeof createInstruction>
__options__: Partial<LocOptions>
// eslint-disable-next-line @typescript-eslint/no-explicit-any
__widget__: any
__widget__: Any
abstract style: GraphStyleSheet
constructor(options: Partial<GraphOptions> = {}) {
super(options)
Expand Down
7 changes: 3 additions & 4 deletions src/etoile/native/dom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ export interface DOMLoc {
x: number
y: number
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export interface DOMEventMetadata<T extends keyof HTMLElementEventMap = any> {

export interface DOMEventMetadata<T extends keyof HTMLElementEventMap = Any> {
native: HTMLElementEventMap[T]
loc: DOMLoc
}
Expand Down Expand Up @@ -97,8 +97,7 @@ export function createEffectScope() {

// Some thoughts DOMEvent was designed this way intentionally. I don't have any idea of splitting the general libray yet.
// The follow captureBoxXy matrix a and d be 1 is because of the scaled canvas (without zoomed) is with a new layout.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function bindDOMEvent(el: HTMLElement, evt: DOMEventType | (string & {}), dom: DOMEvent<any>) {
export function bindDOMEvent(el: HTMLElement, evt: DOMEventType | (string & {}), dom: DOMEvent<Any>) {
const handler = (e: unknown) => {
const { x, y } = captureBoxXY(el, e, 1, 1, dom.matrix.e, dom.matrix.f)
// @ts-expect-error safe
Expand Down
3 changes: 1 addition & 2 deletions src/etoile/native/event.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
type EventCallback<P = any[]> = P extends any[] ? (...args: P) => any : never
type EventCallback<P = Any[]> = P extends Any[] ? (...args: P) => Any : never

export type DefaultEventDefinition = Record<string, EventCallback>

Expand Down
7 changes: 4 additions & 3 deletions src/primitives/event.ts
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,8 @@ export class TreemapEvent extends DOMEvent {
this.state.dragX = metadata.native.offsetX
this.state.dragY = metadata.native.offsetY
this.state.forceDestroy = false
if (!ctx.treemap.renderCache.state) {
// ensure that the wheel event is done.
if (!ctx.treemap.renderCache.state && !this.state.isWheeling && !this.state.forceDestroy) {
ctx.treemap.renderCache.flush(ctx.treemap, this.matrix)
}
}
Expand Down Expand Up @@ -286,14 +287,14 @@ export class TreemapEvent extends DOMEvent {
}

this.state.forceDestroy = true
treemap.highlight.reset()
treemap.highlight.setZIndexForHighlight()
const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1
const delta = wheelDelta > 0 ? factor : 1 / factor
const targetScaleRatio = this.matrix.a * delta
const translateX = offsetX - (offsetX - this.matrix.e) * delta
const translateY = offsetY - (offsetY - this.matrix.f) * delta
runEffect((progress) => {
treemap.highlight.reset()
treemap.highlight.setZIndexForHighlight()
treemap.fontCache.flush(treemap, this.matrix)
this.state.isWheeling = true
const easedProgress = easing.quadraticOut(progress)
Expand Down
7 changes: 3 additions & 4 deletions src/primitives/struct.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
/* eslint-disable @typescript-eslint/no-unsafe-argument */
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-explicit-any */
import { perferNumeric } from '../shared'
import type { LayoutModule } from './squarify'

type AnyObject = Record<keyof any, any>
type AnyObject = Record<keyof Any, Any>

export function sortChildrenByKey<T extends AnyObject, K extends keyof T = 'weight'>(data: T[], ...keys: K[]) {
return data.sort((a, b) => {
Expand All @@ -24,7 +23,7 @@ export function sortChildrenByKey<T extends AnyObject, K extends keyof T = 'weig
})
}

export function c2m<T extends AnyObject & { groups: any[] }, K extends keyof T>(
export function c2m<T extends AnyObject & { groups: Any[] }, K extends keyof T>(
data: T,
key: K,
modifier?: (data: T) => T
Expand All @@ -33,7 +32,7 @@ export function c2m<T extends AnyObject & { groups: any[] }, K extends keyof T>(
data.groups = sortChildrenByKey(data.groups.map((d) => c2m(d as T, key as string, modifier)), 'weight')
}
const obj = { ...data, weight: data[key] }
if (modifier) { return modifier(obj) as any }
if (modifier) { return modifier(obj) as Any }
return obj
}

Expand Down

0 comments on commit 697fb11

Please sign in to comment.