Taptap.js NPM | npm.io

Tappy.js

A simple, fast, and easy to use library for making elements more interactive

Currently supported:

draggable elements
element linking
element transformations
events

Installation

npm

npm i @dvnkboi/tappy.js

yarn

yarn add @dvnkboi/tappy.js

Draggable

const element = document.querySelector('#element');
const options = {
  ease:true
}
const draggable = new Draggable(element, options);

usage

option	value
maxX	(number) maximum value the x coordinate can go to default=Infinity
maxY	(number) maximum value the y coordinate can go todefault=Infinity
ease	(boolean) wether to smoothly folow the mouse/touch or set it directlydefault=true
easeTime	(number) amount of easing higher = slower moving elementdefault=0.05
holdTime	(number) ammount of time to lock the element before allowing it to follow the mouse/touchdefault=10ms
maxIterations	(number) maximum number of iterations the update cycle should run before stoppingdefault=10

Event
initialized	runs after all initalization functions have completed
hold	runs when element is held for less than the holdTime specified in options (element is held but unable to move)
down	runs when element is held and is ready to move ( held more than holdtime )
dragging	runs once when element has started to move
moving	runs continuously while element is moving
up	runs when element has been released

classes
original-elmnt	applied to the original element on initialization
mirror-elmnt	applied to the mirror element on initialization
transformer-elmnt	applied to the transformer element on initialization
mirror-hold	applied to the mirror element following the hold event
mirror-down	applied to the mirror element following the down event
mirror-dragging	applied to the mirror element following the dragging event
mirror-up	applied to the mirror element following the up event

Properties

isTouch: boolean - is the event a touch or mouse event
posError: number - the difference between the current position and the target position
interactionPos: {x:number, y:number} - the position of the touch/mouse event
interactionPos: {x:number, y:number} - the transform offset applied to the element
interactionPos: BoundingBox - the boundaries of the element (x,y,width,height...)
transformerOffset: {x:number, y:number} - the offset of the transformer element relative to the mirror element
relativeOffset: {x:number, y:number} - the offset of the transformer element relative to the element
initialOffset: {x:number, y:number} - the initial offset of the element when it was first initialized
nonCorrectedPos: {x:number, y:number} - the position of the element before any corrections

Methods

on(event, callback) - adds an event listener to the element
off(event, callback) - removes an event listener from the element
once(event, callback) - adds an event listener to the element that will only run once
destroy() - removes all event listeners and removes the element from the DOM
attach(Draggable) - creates a link between two draggable elements example: draggable1.attach(draggable2)

Explination

while it is possible to use the Draggable element directly without the use of a transformer element, I opted to use it as a way to make the element more interactive. Because transformations are done on the mirror element, we can't use transform to scale, rotate or rotate the mirror element, so the transformer element could be used instead as follows.

.mirror-hold .transformer-elmnt {
  transform: scale(1.05);
}

.mirror-down .transformer-elmnt {
  transform: scale(0.9);
}

.mirror-dragging .transformer-elmnt {
  transform: scale(0.75);
}

.mirror-up .transformer-elmnt {
  transform: scale(1);
}

Link

Usage

const element1 = document.querySelector('#element1');
const element2 = document.querySelector('#element2');
const options = {
  ease: true
}
const draggable1 = new Draggable(element1, options);
const draggable2 = new Draggable(element2, options);
draggable1.attach(draggable2);

option	value
fill	(string) fill of the link default='none'
stroke	(string) stroke color of the link default='#000'
strokeWidth	(number) stroke width of the linkdefault=1
innerOffsetStart	(number) the amount the link will be offset inside the element, a negative value will mean the link end connected to the start will be farther away from the element default=40
innerOffsetEnd	(number) the amount the link will be offset inside the element, a negative value will mean the link end connected to the end will be farther away from the elementdefault=40

Methods

destroy - destroys the link and removes it from the DOM
attachStart(Draggable) - attack the start of the link to a draggable element
attachStart(Draggable) - attack the end of the link to a draggable element

drag drop link touch mouse tappy tappy.js events

events

@infinitebrahmanuniverse/nolb-tap @everything-registry/sub-chunk-2878

0.0.1-a

2 years ago

0.0.1

2 years ago