dist/jcanvas-handles.js
function addPathHandle($canvas, parent, xProp, yProp) {

	var handle = $.extend({
		cursors: {
			mouseover: 'grab',
			mousedown: 'grabbing',
			mouseup: 'grab'
		}
	}, parent.handle, {
		// Define constant properties for handle
		layer: true,
		draggable: true,
		x: parent[xProp],
		y: parent[yProp],
		_parent: parent,
		_xProp: xProp,
		_yProp: yProp,
		fromCenter: true,
		// Adjust line path when dragging a handle
		dragstart: function (layer) {
			$(this).triggerLayerEvent(layer._parent, 'handlestart');
		},
		drag: function (layer) {
			var parent = layer._parent;
			parent[layer._xProp] = layer.x - parent.x;
			parent[layer._yProp] = layer.y - parent.y;
			updatePathGuides(parent);
			$(this).triggerLayerEvent(parent, 'handlemove');
		},
		dragstop: function (layer) {
			$(this).triggerLayerEvent(layer._parent, 'handlestop');
		},
		dragcancel: function (layer) {
			$(this).triggerLayerEvent(layer._parent, 'handlecancel');
		}
	});
	$canvas.draw(handle);
	// Add handle to parent layer's list of handles
	parent._handles.push($canvas.getLayer(-1));
}
function addPathHandle($canvas, parent, xProp, yProp) {

	var handle = $.extend({
		cursors: {
			mouseover: 'grab',
			mousedown: 'grabbing',
			mouseup: 'grab'
		}
	}, parent.handle, {
		// Define constant properties for handle
		layer: true,
		draggable: true,
		x: parent[xProp],
		y: parent[yProp],
		_parent: parent,
		_xProp: xProp,
		_yProp: yProp,
		fromCenter: true,
		// Adjust line path when dragging a handle
		dragstart: function (layer) {
			$(this).triggerLayerEvent(layer._parent, 'handlestart');
		},
		drag: function (layer) {
			var parent = layer._parent;
			parent[layer._xProp] = layer.x - parent.x;
			parent[layer._yProp] = layer.y - parent.y;
			updatePathGuides(parent);
			$(this).triggerLayerEvent(parent, 'handlemove');
		},
		dragstop: function (layer) {
			$(this).triggerLayerEvent(layer._parent, 'handlestop');
		},
		dragcancel: function (layer) {
			$(this).triggerLayerEvent(layer._parent, 'handlecancel');
		}
	});
	$canvas.draw(handle);
	// Add handle to parent layer's list of handles
	parent._handles.push($canvas.getLayer(-1));
}
function addPathHandle ( $canvas , parent , xProp , yProp ) { var handle = $ . extend ( { cursors : { mouseover : 'grab' , mousedown : 'grabbing' , mouseup : 'grab' } } , parent . handle , { // Define constant properties for handle layer : true , draggable : true , x : parent [ xProp ] , y : parent [ yProp ] , _parent : parent , _xProp : xProp , _yProp : yProp , fromCenter : true , // Adjust line path when dragging a handle dragstart : function ( layer ) { $ ( this ) . triggerLayerEvent ( layer . _parent , 'handlestart' ) ; } , drag : function ( layer ) { var parent = layer . _parent ; parent [ layer . _xProp ] = layer . x - parent . x ; parent [ layer . _yProp ] = layer . y - parent . y ; updatePathGuides ( parent ) ; $ ( this ) . triggerLayerEvent ( parent , 'handlemove' ) ; } , dragstop : function ( layer ) { $ ( this ) . triggerLayerEvent ( layer . _parent , 'handlestop' ) ; } , dragcancel : function ( layer ) { $ ( this ) . triggerLayerEvent ( layer . _parent , 'handlecancel' ) ; } } ) ; $canvas . draw ( handle ) ; // Add handle to parent layer's list of handles parent . _handles . push ( $canvas . getLayer ( - 1 ) ) ; }
Add a single handle to line path
Add a single handle to line path