Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
tragopan
Advanced tools
Readme
Minimal dependency-free pan/zoom library
<div id="viewport">
<div id="content">
<!-- your pan/zoomable content here -->
</div>
</div>
<script>
const tragopan = new Tragopan({
viewport: document.querySelector('#viewport'),
content: document.querySelector('#content')
});
</script>
Tragopan uses native browser scrolling as its implementation for panning (left/right/up/down), and transform/scale for zooming (in/out). In our testing, we found that native scrolling was far more efficient than using transform for panning. As an extra bonus, if your DOM is structured so that your viewport
element can be your document body, some browsers appear to do even more optimization for that special case.
Instantiate a pan/zoomable tragopan instance, given a viewport and a nested content element. Options include:
viewport
: reference to a top-level element which will contain content to be panned and zoomedcontent
: a child element of the viewportscaleIncrement
: percentage by which zooming in or out one click should change the scale (default 0.04
)scrollZoom
: enable bare scrolling to zoom, rather than ctrl/option-scroll to zoom (default false
)spacePan
: enable panning via holding down the space bar (default false
)minScale
: minimum zoom scale factor (default 0.5
)maxScale
: maximum zoom scale factor (default 4
)Configure a tragopan instance with any options accepted by the constructor above.
Pan to the given x and y coordinates in content space.
Zoom to the given scale, keeping the given focal point in-place on the screen. Focal point should be an object with x and y coordinates in content space. If focal point is ommitted, the center point of the viewport is used instead.
Zoom in by the given scaleIncrement
if provided, or else zoom in by the configured/default scaleIncrement
.
Zoom out by the given scaleIncrement
if provided, or else zoom out by the configured/default scaleIncrement
.
Pan to the center of the content
Pan to the center of the content
Register an event handler to be called when some panning or zooming event occurs. See below for more info.
Fired when a pan may be starting as a result of the user mousing-down on the viewport. A pan may or may not follow, with a click being a possible alternative conclusion.
Fired when the content moves relative to the viewport, whether from a click-drag, from a call to zoom()
, or from a native scroll mouse event.
Fired when a pan via click-drag ends with a mouse-up.
Fired when the scale changes, either from a call to zoom()
, or from a native
ctrl/option-scroll mouse event.
Fired when any event above occurs.
FAQs
Minimal dependency-free pan/zoom library
The npm package tragopan receives a total of 3 weekly downloads. As such, tragopan popularity was classified as not popular.
We found that tragopan 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.