$ show likaia/js-screen-shot
This repository is a TypeScript-based web library designed for browser screenshot capture and annotation. It functions as a plugin that initializes a DOM overlay, captures screen content via multiple strategies (WebRTC, html2canvas, DOM rendering), and provides a rich annotation interface for drawing shapes, text, and cropping. The architecture is monolithic, bundling into UMD, ESM, and CommonJS formats via Rollup, and utilizes MobX for reactive state management across canvas elements and UI components. The system relies on a core entry point in `src/main.ts` which exports the `ScreenShot` class. Data flows from the source manager selecting a capture strategy, rendering to an HTML5 Canvas, and then managing user interactions through a centralized store system. External dependencies include `html2canvas` for DOM capture, `nanoid` for ID generation, and `mobx` for state. The codebase includes comprehensive unit testing via Jest and E2E testing via Playwright, indicating a focus on reliability. While the library is well-structured with clear separation of concerns between application logic, canvas features, and shared utilities, it is tightly coupled to the browser environment and specific canvas element types. The presence of a `TEST_IMPROVEMENT_PLAN.md` suggests ongoing refinement of test coverage, but the core architecture remains stable and functional for its intended domain of web-based screenshot tools.
The LLM identified 3 files worth highlighting for reuse:
Implements a strategy pattern to abstract different screen capture methods (WebRTC, DOM, Image). This component allows the library to switch between capture mechanisms based on configuration without changing the core flow, making it a reusable architectural pattern for multi-source data ingestion.
Contains complex geometric logic for detecting mouse proximity to various canvas elements (rectangles, circles, arrows). This algorithmic component is isolated from UI state and could be extracted for use in other canvas-based interaction libraries requiring precise hit-testing.
Centralized MobX store managing canvas element state, history (undo/redo), and active element selection. It demonstrates a clean separation of data logic from view logic, providing a reusable pattern for managing complex canvas state in reactive web applications.