feat(primitives): media-editor components, category reorg, perf + type cleanup
Reorganize components into category folders (forms/canvas/overlays/etc.); add the media-editor headless family (timeline, curve-editor, waveform, crop, color picker, etc.); apply perf fixes (O(1) collection lookups, plain-object drag state, gesture-leak teardown, shallowRef color state, rect caching) and replace source `any` with proper types.
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
import type { Ref, WatchSource } from 'vue';
|
||||
import { onScopeDispose, shallowRef, watch } from 'vue';
|
||||
import type { Viewport } from '../types';
|
||||
|
||||
/**
|
||||
* True while the viewport is actively panning/zooming, flipped back to `false`
|
||||
* `idleDelay` ms after the last change. Driven purely by viewport mutations, so
|
||||
* it covers every path — wheel, pinch, drag-pan, double-click and the imperative
|
||||
* `zoomIn`/`zoomTo`/`fitView` API — without each call site having to opt in.
|
||||
*
|
||||
* Used to gate `will-change: transform` on `FlowViewport`. Keeping that hint on
|
||||
* permanently pins the compositor's raster scale: the layer is rasterised once
|
||||
* and the `scale(zoom)` is applied by GPU-upscaling that cached texture, so at
|
||||
* high zoom every node and edge stays blurry even after the gesture ends.
|
||||
* Toggling the hint on only while interacting lets the browser re-rasterise the
|
||||
* layer crisply once motion settles — the same pattern `FlowNode` already uses
|
||||
* for its drag transform.
|
||||
*/
|
||||
export function useInteractionState(
|
||||
source: WatchSource<Viewport>,
|
||||
idleDelay = 200,
|
||||
): Readonly<Ref<boolean>> {
|
||||
const interacting = shallowRef(false);
|
||||
let timer: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
watch(source, () => {
|
||||
interacting.value = true;
|
||||
if (timer !== undefined) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
interacting.value = false;
|
||||
timer = undefined;
|
||||
}, idleDelay);
|
||||
});
|
||||
|
||||
onScopeDispose(() => {
|
||||
if (timer !== undefined) clearTimeout(timer);
|
||||
});
|
||||
|
||||
return interacting;
|
||||
}
|
||||
Reference in New Issue
Block a user