Security News
Bun 1.2 Released with 90% Node.js Compatibility and Built-in S3 Object Support
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
@wavma/enhance
Advanced tools
enhance.js is a library to provide zooming and panning features to any dom element. Influenced by vectors tools like Figma, Sketch, and Autocad, enhance works well with a trackpad (pinch-to-zoom) or a mouse (scrollwheel).
The name "enhance" comes from the canonical Blade Runner scene.
npm i @wavma/enhance
yarn add @wavma/enhance
import Enhance from "wavma-enhance";
// enhance needs a parent element to scale within
const parent = document.querySelector(".parent");
// the element is the actual dom object you want to zoom or pan
const element = document.querySelector(".element");
const enhance = Enhance(parent, { element });
Enhance(parent, {
element: element, // DOM element to focus on
scale: "contain", // "contain", "cover", or 0.5, 1, 2.5 (float)
max: 50, // Maximum zoom scale
min: 0.1, // Minimum zoom scale
position: "50 50", // "0 0", "100 100"
offsetX: 0, // default X offset on load and reset
offsetY: 0, // default Y offset on load and reset
keyboard: true, // enable keyboard shortcuts
trackpad: true, // enable trackpad pinch-to-zoom and pan
pan: false, // enable panning by holding down spacebar and dragging on canvas
window: false, // enable zoom window selection
});
enhance.element
Use this method to allow users to upload new images (often svg) or click on different dom elements to reset the zoom.
// Retrieves the current element
const element = enhance.element();
// Sets a new element and by default resets the zoom
// Pass a second argument "false" to keep current zoom
enhance.element(newElement);
enhance.scale
Use this method to create an input for users to manual type in their scale (often easier to think in percentage 0-100%) or a dropdown (ala Google Docs, Photoshop, etc).
// Retrieves the current scale
const scale = enhance.scale();
// Sets a new scale
enhance.scale(1);
enhance.disable
Use this method to
// Removes all the event listeners
enhance.disable();
// Restarts the event listeners
enhance.enable();
FAQs
![Image of Enhance](enhance.png)
We found that @wavma/enhance demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.
Security News
Biden's executive order pushes for AI-driven cybersecurity, software supply chain transparency, and stronger protections for federal and open source systems.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.