$ show kakajun/vue3-sketch-ruler
This is a monorepo providing a feature-rich sketch-ruler component library for Vue 3, targeting design tools, low-code platforms, and big-screen visualization. It includes a framework-agnostic core package (`@sketch-ruler/core`) with 2D transform engine, plugin system, snap engine, canvas manager, and minimap engine—all zero DOM dependencies. Separate packages handle canvas rendering (`@sketch-ruler/canvas`) with optimized label caching, offscreen caching, and input management (mouse, keyboard, wheel), and a selection engine (`@sketch-ruler/selecto`). The main Vue package (`vue3-sketch-ruler` / `@sketch-ruler/sketch-ruler`) provides Vue components (SketchRuler, Minimap, RulerLine) plus composables for canvas transform, ruler scale, and snap detection. The architecture is cleanly layered, well-tested with Vitest, and shipped via npm. The demo site showcases multiple use cases (editors, whiteboards, org charts, big-screen displays). The code demonstrates mature engineering with reusable patterns, though the large monorepo and external demo dependencies introduce some maintenance surface.
The LLM identified 4 files worth highlighting for reuse:
Implements a 2D affine transform engine with multiple animation modes (ease-out, damped, exponential, direct). Fully self-contained with no DOM dependencies, making it trivially reusable in any JavaScript/TypeScript project requiring coordinate transformations, zoom, pan, and animated transitions.
A plugin manager providing typed lifecycle hooks (beforeZoom, afterPan, onLineCreate, etc.) with priority ordering and error isolation. Demonstrates a clean observer pattern that can be extracted to add plugin support to any application without tight coupling to the host codebase.
Handles snapping to multiple targets: ruler ticks, guide lines, grid points, equidistant positions, and custom rules. Uses mathematical projections and tolerances to compute snap distances. Reusable as a standalone geometry utility for any canvas or SVG-based tool requiring precision alignment.
Unifies mouse, keyboard, and wheel input into a single manager with pluggable zoom/pan interceptors. Abstracts browser event differences (e.g., wheel normalization) and provides a clean API for any canvas application. The companion mouse-adapter.ts, keyboard-adapter.ts, and wheel-normalizer.ts are similarly reusable.