Multitouch capable 2d scene implementing pan, zoom and object selection.
Synthesizing touch events from mouse events.
var Scene2d = require('scene-2d')
// create a scene
customElements.define('scene-2d', Scene2d)
var scene = document.createElement('scene-2d')
scene.addEventListener('select', () => console.log('scene selection state changed', scene.selections))
scene.addEventListener('scale', () => console.log('scene zoomed', scene.scale))
scene.addEventListener('move', () => console.log('scene panned', scene.origin))
// add scene to display
var reference = document.querySelector('#reference')
reference.appendChild(scene)
// define an object to use in the scene
customElements.define('object-2d', class extends HTMLElement {
constructor () {
super()
this.origin = [0,0,0]
this.movable = true
this.selectable = true
this.addEventListener('origin', () => {
this.style.transform = `translate3d(${this.origin[0]}px,${this.origin[1]}px,${this.origin[2]}px)`
})
this.addEventListener('select', () => {
this.classList[this.selected ? 'add' : 'remove']('selected')
})
this.addEventListener('move', () => {
console.log('object moved', this.origin)
})
}
connectedCallback () {
this.classList.add('object-2d')
this.innerHTML = `<div id=handle></div>`
var handle = this.querySelector('#handle')
handle.object = this
}
})
// create and add some objects to the scene
scene.objects.appendChild(document.createElement('object-2d'))
scene.objects.appendChild(document.createElement('object-2d'))
scene.objects.appendChild(document.createElement('object-2d'))
You can run this example by doing:
$ npm run example
This is the API for the scene itself, see the object API below for individual objects.
Array of pixel offsets (e.g. [x,y,z]
) representing the current pan position.
Current zoom scale.
Array of all currently selected objects.
Container element for all objects in the scene.
Writes the scene's current origin
and scale
to the display.
Dispatched when a pan operation ends.
Dispatched when a zoom operation ends.
Dispatched when the scene's selection state has changed.
Any elements you append to scene.objects
may implement these properties or listen for these events.
Pointer to another object to consider as the target. Useful for implementing grip or handle interfaces.
Boolean indicating whether the object is selectable.
Boolean representing the object's selection state.
Boolean indicating whether the object is movable.
Array of pixel offsets (e.g. [x,y,z]
) representing the object's current position. Required if object.movable
is set to true true
.
Dispatched during a drag operation.
Dispatched when a drag operation ends.
Dispatched when the object's selection state has changed.
- 1.0
- First release
MIT