Update all pointers

If the layout of your web or app changes, absolutely positioned pointers might keep the original first calculated position and not follow target elements to their new position. Make sure to call this function afterward to recalculate pointers positions over targets.

Pointers are stored in a Set with no guaranteed order. If you need to update pointers in a specific order, store its references and update manually via its update method.

import { update } from 'pointitout' 

update() // Update all created pointers, recalculating its position.

Why is there no automatic update?

Since the factors that could cause target position changes cannot be known, the simplest automatic update could involve continuous queries or repeated invocations of excessive and ineffective updates. It is better that this library does not assume such responsibility hiding such cost.

Having said that, there is indeed an automatic update when resizing.

Automatic update on window resize

Window resizing is a well-known frequent scenario. When this happens, the update function is called.

But if you need more control or are updating the pointers another way, or for some other reason you need to disable this behavior, set the updateOnResize option to false.

Update a specific pointer

import { create } from 'pointitout' 

const pointer = create('rect', { target: '#target-element-id' })

// ...
// Later, after some change in the target's position
pointer.update() // Update the pointer

Clear all pointers

To clear all pointers simply call the clear function. This function is an easy way to call the destroy() method on every created pointer.

import { clear } from 'pointitout' 

clear() // Destroy all pointers. That's all.

Destroy a specific pointer

import { create } from 'pointitout' 

const pointer = create('rect', { target: '#target-element-id' })

pointer.destroy() // Destroy the pointer

Pointer 'destroy' event

You can register a listener to be called when pointer is destroyed.

import { create } from 'pointitout' 

const pointer = create('rect', { target: '#target-element-id' })

pointer.on('destroy', p => {
    console.log('A pointer was destroyed. 🪦 R.I.P')
    console.log('Pointer object: ', p)
})

pointer.destroy() // Destroy the pointer
// The function containing the console.logs will be called.