1.1.13 • Published 6 days ago
use-mouse-matrix-transform v1.1.13
useMouseMatrixTransform
Easily create draggable, zoomable layouts (maps, svg explorers, canvas dragging, etc.)
Allows you to easily create map-like interactions with a canvas element, this library gives you flexibility in what context you use the transformations because it just outputs/changes a transform matrix, not the actual elements contained inside of the element. This makes it flexible for a variety of use cases with custom renderers.
Installation
npm add --save use-mouse-matrix-transform
Props
Name | Type | Required | Default | Description |
---|---|---|---|---|
canvasElm | HTMLElement | true | The element that mouse events will be bound on. | |
transform | Matrix | false | ||
onSetTransform | Matrix | false |
useMouseMatrixTransform
returns an object with the following properties:
- ref: Put this ref on the container element that you want to drag/zoom on
- transform A transformation matrix that transforms screen x,y coordinates into the target transform space
- applyTransformToPoint Take any
[x,y]
or{ x, y }
object and apply the transformation, returns a transformed point
Example
import useMouseMatrixTransform from "use-mouse-matrix-transform"
import { useEffect, useRef, useState } from "react"
import SomeLayoutObject from "./SomeLayoutObject"
export default ({ layout }: { layout: Layout }) => {
const { ref, applyTransformToPoint } = useMouseMatrixTransform()
return (
<div>
<div
ref={ref}
style={{
position: "relative",
backgroundColor: "#eee",
height: 600,
overflow: "hidden",
}}
>
{layout.objects
.map((obj) => applyTransformToPoint(obj))
.map((obj, i) => (
<SomeLayoutObject obj={obj} />
))}
</div>
</div>
)
}
1.1.13
6 days ago
1.1.12
1 month ago
1.1.9
6 months ago
1.1.8
6 months ago
1.1.7
6 months ago
1.1.6
6 months ago
1.1.1
10 months ago
1.0.2
12 months ago
1.1.0
10 months ago
1.1.5
10 months ago
1.1.4
10 months ago
1.1.3
10 months ago
1.0.4
11 months ago
1.1.2
10 months ago
1.0.3
11 months ago
1.0.1
12 months ago
1.0.0
12 months ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.1
1 year ago