1.0.0 • Published 4 years ago
subjxx v1.0.0
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
returnsSubjx
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
1.0.0
4 years ago