Touch-enabled Drag/Rotate/Resize/Snap Library – subjx

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