Author: | nichollascarter |
---|---|
Views Total: | 1,208 views |
Official Page: | Go to website |
Last Update: | July 5, 2022 |
License: | MIT |
Preview:

Description:
subjx is a JavaScript library that enables touch-friendly rotate, resize, and drag’n’drop functionalities on HTML elements and/or SVG objects.
How to use it:
1. Install and import.
# NPM $ npm i subjx
import subjx from 'subjx'; import 'subjx/dist/style/subjx.css';
2. Or Download & unzip the package and load the necessary JavaScript and CSS files from the dist
folder.
<link rel="stylesheet" href="./dist/style/subjx.css" /> <script src="./dist/js/subjx.js"></script>
3. Enable the draggable, resizable, rotatable, and scalable actions on an element (selector or an array of elements) you specify.
const myInstance = Subjx('.myElement').drag({ // parent container container: '#container', // "controls" append to this element controlsContainer: '.selector' // 'x' | 'y' | 'xy' axis: 'x', // snap to grid snap: { x: 10, y: 10, angle: 10 }, // mimic behavior with other '.draggable' elements each: { move: false, resize: false, rotate: false }, // enable/disable actions draggable: true, resizable: true, rotatable: true, scalable: false, // preserve aspect ratio when resizing proportions: true, // restrict element dragging/resizing/rotation restrict: '.selector', // 'n' | 's' | 'w' | 'e' rotatorAnchor: 'e', // rotate offset rotatorOffset: 50, });
4. It also provides a function to clone the element.
const myInstance = Subjx('.myElement').clone({ // dropping area stack: 'selector', // set clone parent appendTo: 'selector', // additional CSS styles style: { border: '1px dashed green', background: 'transparent' }, });
5. Event handlers for the drag function.
const myInstance = Subjx('.myElement').drag({ onInit(el) { // fires on tool activation }, onMove(clientX, clientY, dx, dy, transform) { // fires on moving }, onResize(clientX, clientY, dx, dy, transform, width, height) { // fires on resizing }, onRotate(clientX, clientY, delta, transform) { // fires on rotation }, onDrop(clientX, clientY) { // fires on drop }, onDestroy(el) { // fires on tool deactivation } });
6. More API methods.
// returns root DOM element of 'controls' myInstance.controls; // provides access to useful options myInstance.storage; // enables draggable myInstance.enable(options); // disables draggable, and removes controls & handles myInstance.disable(); // adds event listener myInstance.on(eventName, cb); // removes event listener myInstance.off(eventName, cb); // event names const EVENTS = [ 'dragStart', 'drag', 'dragEnd', 'resizeStart', 'resize', 'resizeEnd', 'rotateStart', 'rotate', 'rotateEnd' ]; // execute dragging myInstance.exeDrag({ dx, // drag along the x axis dy // drag along the y axis }); // execute resizing myInstance.exeResize({ dx, // resize along the x axis dy, // resize along the y axis revX, // reverse resizing along the x axis revY, // reverse resizing along the y axis doW, // allow width resizing doH // allow height resizing }); // execute rotating myInstance.exeRotate({ delta // radians }); // align element inside container: ['t', 'l', 'r', 'b', 'v', 'h'] myInstance.applyAlignment('tr'); // Call this method when applying scale or viewBox values changing // useful when element's container was transformed from outside myInstance.fitControlsToSize(); // Returns rotation point handle to default position myInstance.resetCenterPoint();
Changelog:
v1.1.0 (07/05/2022)
- Bug Fixes
- src: add setCenterPoint method
- added transform origin support
v1.0.0 (12/15/2021)
- Bug Fixes
- prepare prerelease version for supporting groupable feature
- Change API
v1.0.0rc3 (12/13/2021)
- Bugfix
v1.0.0rc1 (11/02/2021)
- prepare prerelease version for supporting groupable feature
- Changed API
04/19/2021
- v0.3.9: update
04/05/2021
- v0.3.8: feat: added alignment feature
03/19/2021
- v0.3.7: fixed translate issue
03/02/2021
- v0.3.5/6
02/26/2021
- v0.3.4: fix: polygon points parsing issue
02/26/2021
- v0.3.3: fix resizable/rotatable options init issues
02/24/2021
- v0.3.2: fix logic with storing deltas
02/18/2021
- v0.3.1: fix: elementsArray issue
02/07/2020
- v0.2.6: Fix: fix regex for parsing transform matrix
01/29/2020
- v0.2.5: Added new API methods
01/21/2020
- v0.2.4: bugfix
12/29/2019
- v0.2.2
10/26/2019
- fix: Added “passive” option to touch events
09/08/2019
- v0.1.7: fix: tc/bc handles wrong behavior
I got an error shows “Subjx is not defined”, and found there is no class named as Subjx in subjx.js, please help!