Usage

Library provides dragging/resizing/rotating/snapping SVG/HTML Elements.

Demo

Installation

Run npm install to install with npm.

Including via a <script> tag:

<script src="../dist/js/subjx.js"></script>

Get started

• Getting an element:

Main function subjx returns Subjx instance which based on elements finded by passed parameters:

import subjx from 'subjx';
import 'subjx/dist/style/subjx.css';

// possible parameters
const xElem = subjx( 'selector' ) |
                subjx( element ) |
                subjx( elementArray );

• Choosing an action:

1. Transformation(move, resize, rotate):

// enabling tool by `drag` method with the optional parameters
// by default just call `.drag()`
const xDraggables = xElem.drag();

// method always returns array of new Draggable instances
// for disabling use `disable` method for each object
xDraggables.forEach(item => {
    item.disable();
});

Possible parameters:

subjx('.draggable').drag({
    // transformation coordinate system
    container: 'selector' | element,
    // constrain movement along an axis
    axis: 'x' | 'y'
    // snapping to grid (default: 10)
    snap: {
        x: 20(px),
        y: 20(px),
        angle: 45(deg)
    },
    // mimic behavior with other '.draggable' elements
    each: {
        move: true,
        resize: true, 
        rotate: true
    },
    // keep aspect ratio when resizing
    proportions: true,
    // ----- experimental options ------
    // show/manipulate rotation point(not tested with HTML elements)
    rotationPoint: true,
    // restrict moving
    // spreads to dragging one element 
    restrict: 'selector'
});

Subscribing new draggable element to previously activated(useful with each option)

const observable = subjx.createObservable();
subjx('.draggable').drag({...}, observable)

const createDraggableAndSubscribe = e => {
    subjx(e.target).drag({...}, observable);
};

Allowed SVG elements: path, rect, ellipse, line, polyline, polygon, circle, g

Notice: In most cases, it is recommended to use 'proportions' options

Avaliable methods:

subjx('.draggable').drag({
    onInit(el) {
        // fires on tool activation
    },
    onMove(dx, dy) {
        // fires on moving
    },
    onResize(dx, dy, handle) {
        // fires on resizing
    },
    onRotate(rad) {
        // fires on rotation
    },
    onDrop(e, el) {
        // fires on drop
    },
    onDestroy(el) {
        // fires on tool deactivation
    }
});

2. Tool for creating a clone:

const xCloneable = xElem.clone({
    // dropping area
    stack: 'selector',
    // set clone parent
    appendTo: 'selector',
    // set clone additional style
    style: {
        border: '1px dashed green',
        background: 'transparent'
    }
});

Avaliable methods:

subjx('.cloneable').clone({
    onInit(el) {
        // fires on tool activation
    },
    onMove(dx, dy) {
        // fires on moving
    },
    onDrop(e) {
        // fires on drop
    },
    onDestroy() {
        // fires on tool deactivation
    }
});

Disabling

xCloneable.forEach(item => {
    item.disable();
});

Licence

MIT (c) Karen Sarksyan