From 466f9aa2e3ed8a0e4f93ce04a1434f849943af9f Mon Sep 17 00:00:00 2001 From: kanno <812137533@qq.com> Date: Thu, 6 Feb 2025 10:31:12 +0800 Subject: [PATCH] fix: event --- src/etoile/native/dom.ts | 3 +-- src/etoile/native/magic-trackpad.ts | 4 ++-- src/primitives/decorator.ts | 8 ++++---- src/primitives/event.ts | 25 ++++++++++++------------- 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/src/etoile/native/dom.ts b/src/etoile/native/dom.ts index dd6d195..aa1be20 100644 --- a/src/etoile/native/dom.ts +++ b/src/etoile/native/dom.ts @@ -83,8 +83,7 @@ function createEffectStop(c: EffectScopeContext) { } } -// Fill frame -export function createEffectScope() { +export function createSmoothFrame() { const c: EffectScopeContext = { animationFrameID: null } diff --git a/src/etoile/native/magic-trackpad.ts b/src/etoile/native/magic-trackpad.ts index 6b19a8e..2bec599 100644 --- a/src/etoile/native/magic-trackpad.ts +++ b/src/etoile/native/magic-trackpad.ts @@ -1,7 +1,7 @@ // Note: I won't decide to support mobile devices. // So don't create any reporting issues about mobile devices. -import { createEffectScope } from './dom' +import { createSmoothFrame } from './dom' // gesturechange and gestureend is specific for Safari // So we only implement wheel event @@ -41,5 +41,5 @@ export function useMagicTrackPad(event: WheelEvent) { const isPanGesture = !event.ctrlKey // - createEffectScope() + createSmoothFrame() } diff --git a/src/primitives/decorator.ts b/src/primitives/decorator.ts index ba4cf3a..dddfc6c 100644 --- a/src/primitives/decorator.ts +++ b/src/primitives/decorator.ts @@ -71,8 +71,8 @@ function evaluateColorMappings(data: NativeModule[]): ColorMappings { return hash % 360 } - const lightScale = (depth: number) => 60 - depth * 5 - const baseSaturation = 70 + const lightScale = (depth: number) => 50 - depth * 5 + const baseSaturation = 80 const siblingHueShift = 30 const rc = 0.2126 @@ -114,8 +114,8 @@ function evaluateColorMappings(data: NativeModule[]): ColorMappings { const luminance = calculateLuminance(r, g, b) if (luminance < 0.6) { - hslColor.l += 0.15 - } else if (luminance > 0.65) { + hslColor.l += 0.2 + } else if (luminance > 0.8) { hslColor.l -= 0.1 } diff --git a/src/primitives/event.ts b/src/primitives/event.ts index c141fa4..2f1b40c 100644 --- a/src/primitives/event.ts +++ b/src/primitives/event.ts @@ -3,7 +3,7 @@ import { asserts, easing, traverse } from '../etoile' import { Display, Graph, S } from '../etoile/graph/display' -import { DOMEvent, DOM_EVENTS, createEffectScope } from '../etoile/native/dom' +import { DOMEvent, DOM_EVENTS, createSmoothFrame } from '../etoile/native/dom' import type { DOMEventMetadata, DOMEventType } from '../etoile/native/dom' import { Event as _Event } from '../etoile/native/event' import type { BindThisParameter } from '../etoile/native/event' @@ -91,8 +91,8 @@ const ANIMATION_DURATION = 300 const fill = { desc: { r: 255, g: 255, b: 255 }, mode: 'rgb' } -function runEffect(callback: (progress: number, cleanup: () => void) => void, opts: EffectOptions) { - const effect = createEffectScope() +function smoothFrame(callback: (progress: number, cleanup: () => void) => void, opts: EffectOptions) { + const frame = createSmoothFrame() const startTime = Date.now() const condtion = (process: number) => { @@ -102,17 +102,17 @@ function runEffect(callback: (progress: number, cleanup: () => void) => void, op return process >= 1 } - effect.run(() => { + frame.run(() => { const elapsed = Date.now() - startTime const progress = Math.min(elapsed / opts.duration, 1) if (condtion(progress)) { - effect.stop() + frame.stop() if (opts.onStop) { opts.onStop() } return true } - return callback(progress, effect.stop) + return callback(progress, frame.stop) }) } @@ -130,7 +130,7 @@ function drawHighlight(treemap: TreemapLayout, evt: TreemapEvent) { const { currentNode } = evt.state if (currentNode) { const [x, y, w, h] = currentNode.layout - runEffect((_, cleanup) => { + smoothFrame((_, cleanup) => { cleanup() highlight.reset() const mask = createRoundBlock(x, y, w, h, { fill, opacity: HIGH_LIGHT_OPACITY, radius: 4, padding: 2 }) @@ -223,7 +223,7 @@ export class TreemapEvent extends DOMEvent { } else { // for drag const { treemap } = ctx - runEffect((_, cleanup) => { + smoothFrame((_, cleanup) => { cleanup() const { offsetX: x, offsetY: y } = metadata.native const { dragX: lastX, dragY: lastY } = this.state @@ -304,13 +304,11 @@ export class TreemapEvent extends DOMEvent { const targetScaleRatio = this.matrix.a * delta const translateX = offsetX - (offsetX - this.matrix.e) * delta const translateY = offsetY - (offsetY - this.matrix.f) * delta - runEffect((progress, cleanup) => { - this.silent('mousedown') + smoothFrame((progress, cleanup) => { this.exposedEvent.silent('mousemove') this.silent('mousemove') this.silent('click') this.exposedEvent.silent('click') - cleanup() treemap.highlight.reset() treemap.highlight.setZIndexForHighlight() treemap.fontCache.flush(treemap, this.matrix) @@ -331,12 +329,13 @@ export class TreemapEvent extends DOMEvent { ) stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1) treemap.update() + cleanup() }, { duration: ANIMATION_DURATION, onStop: () => { this.state.forceDestroy = false this.state.isWheeling = false - this.active('mousedown') + // this.active('mousedown') this.active('mousemove') this.exposedEvent.active('mousemove') this.active('click') @@ -383,7 +382,7 @@ function createOnZoom(treemap: TreemapLayout, evt: TreemapEvent) { const targetScale = factor * evt.matrix.a const translateX = (boundingClientRect.width / 2) - (mx + mw / 2) * factor const translateY = (boundingClientRect.height / 2) - (my + mh / 2) * factor - runEffect((progress, cleanup) => { + smoothFrame((progress, cleanup) => { cleanup() evt.silent('mousemove') evt.exposedEvent.silent('mousemove')