panzoom-core

Library for pan and zoom with possibility to moving, resizing and selecting elements inside.

Demo

https://codesandbox.io/s/quiet-snow-qldnic
https://codesandbox.io/s/black-sound-vn77k9 (map with pin)
https://codesandbox.io/s/young-darkness-igcf67 (example from above)
https://codesandbox.io/s/gifted-pine-dhw9m6 (selecting elements)
https://codesandbox.io/s/festive-matsumoto-ccskw0 (Tic Tac Toe)
Library react-web-builder
Library react-grid-panzoom
Library @sasza/react-panzoom
Library react-drawing

Installation

npm install panzoom-core

Options

Name		Default	Description
boundary	{ top, right, bottom left, parent } | bool	false	top, right, bottom, left - numbers in px. can be used as expression like: { top: 'childHeight - containerHeight - 100px' }
disabledUserSelect	bool	false	prevent css select as text etc
disabled	bool	false	disabling pan and zoom
disabledElements	bool	false	disabling moving elements
disabledMove	bool	false	disabling move
disabledZoom	bool	false	disabling zoom
height	string/number	100%	height of child container
onContainerChange	func	null	event on move/zoom
onContainerClick	func	null	event on mousedown/touchdown
onContainerPositionChange	func	null	event on position change
onContainerZoomChange	func	null	event on zoom change
onElementsChange	func	null	callback invoked when elements change position
selecting	bool	false	switches to selecting mode, see selecting
width	string/number	100%	width of child container
zoomInitial	number	1	initial zoom value
zoomMax	number	5	maximum zoom
zoomMin	number	0.3	minimum zoom
zoomSpeed	number	1	zoom speed on wheel event

API

import initializePanZoom from 'panzoom-core'

const node = document.querySelector('[data-id="panzoom"]')
const panZoom = initializePanZoom(node, options)

<div>
  <div data-id="panzoom"> </div>
</div>

panzoom methods:

Function	Description
setOptions(options)	Setting options for panzoom
addElement(node: HTMLDivElement, elementOptions: ElementOptions) => ElementApi	Adding new element to moving
move(x:number, y:number)	Add x and y in px to current offset. Returns current position {x, y}
getElements()	Returns map of elements
getPosition()	Returns current position {x, y}
setPosition(x:number, y:number)	Set offset position of pan
getZoom():number	Returns current zoom
setZoom(zoom:number)	Sets zoom
zoomIn(zoom:number)	Add to current zoom, could be also negative number (it will work like zoomOut)
zoomOut(zoom:number)	Sub from current zoom
childNode	Returns passed node
reset()	Reset to (0, 0, 0)
destroy()	Unmounting panzoom element

Elements

import initializePanZoom from 'panzoom-core'

const node = document.querySelector('[data-id="panzoom"]')
const panZoom = initializePanZoom(node, options)

const elementA = panZoom.addElement(
  document.querySelector('[data-id="element-a"]'),
  { id: 'a' },
)
const elementB = panZoom.addElement(
  document.querySelector('[data-id="element-b"]'),
  { id: 'b', x: 100, y: 100 },
)

<div>
  <div data-id="panzoom">
    <div data-id="element-a">test</div>
    <div data-id="element-b">move me</div>
  </div>
</div>

Element properties

Name		Default	Description
id *	string/id	undefined	Unique ID of element
className	string	undefined	Class name for element
disabled	bool	false	Disabling element
draggableSelector	string	undefined	Selector for dragging element
family	string	undefined	Name of element's family, all of elements are connected during moving
followers	Array<string/id>	[]	Similar to family, but for specified ids of elements
onClick	func	null	Event on element's click
onMouseUp	func	null	Event on element's mouse up
x	number	0	x position of element
y	number	0	y position of element

* - is required

Selecting

import initializePanZoom from 'panzoom-core'

// ...
const panZoom = initializePanZoom(node, { selecting: true })

// to disable:
panZoom.setOptions({ selecting: false })

Installing for development

pnpm i

Testing

pnpm test

Examples

pnpm dev