jcanvas/dist/umd/jcanvas-handles.min.js

jCanvas brings jQuery's powerful syntax and capability to the HTML5 canvas. Quickly create canvas-based apps that can utilize layers, animations, events, and much more. jCanvas works on all modern browsers and platforms, including iOS and Android.

(function(h,l){typeof exports=="object"&&typeof module<"u"?l(require("jquery")):typeof define=="function"&&define.amd?define(["jquery"],l):(h=typeof globalThis<"u"?globalThis:h||self,l(h.$))})(this,function(h){"use strict";h.extend(h.jCanvas.defaults,{handle:null,guide:null,aspectRatio:null,resizeFromCenter:!0,constrainProportions:!1,handlePlacement:"corners",minWidth:0,minHeight:0});function l(t){const e=t._method;return e===h.fn.drawRect||e===h.fn.drawEllipse||e===h.fn.drawImage}function p(t){const e=t._method;return e===h.fn.drawLine||e===h.fn.drawQuadratic||e===h.fn.drawBezier}function w(t,e,n,d){const a=h.extend({cursors:{mouseover:"grab",mousedown:"grabbing",mouseup:"grab"}},e.handle,{layer:!0,draggable:!0,x:e[n],y:e[d],_parent:e,_xProp:n,_yProp:d,fromCenter:!0,dragstart:function(i){h(this).triggerLayerEvent(i._parent,"handlestart")},drag:function(i){const s=i._parent;s[i._xProp]=i.x-s.x,s[i._yProp]=i.y-s.y,y(s),h(this).triggerLayerEvent(s,"handlemove")},dragstop:function(i){h(this).triggerLayerEvent(i._parent,"handlestop")},dragcancel:function(i){h(this).triggerLayerEvent(i._parent,"handlecancel")}});t.draw(a),e._handles.push(t.getLayer(-1))}function c(t,e,n,d){let a;n===-1&&d===-1||n===1&&d===1?a="nwse-resize":n===0&&(d===-1||d===1)?a="ns-resize":(n===-1||n===1)&&d===0?a="ew-resize":(n===1&&d===-1||n===-1&&d===1)&&(a="nesw-resize");const i=e.width||0,s=e.height||0,g=h.extend({cursors:{mouseover:a}},e.handle,{layer:!0,draggable:!0,x:e.x+(n*i/2+(e.fromCenter?0:i/2)),y:e.y+(d*s/2+(e.fromCenter?0:s/2)),_parent:e,_px:n,_py:d,fromCenter:!0,dragstart:function(r){h(this).triggerLayerEvent(r._parent,"handlestart")},drag:function(r){const o=r._parent;o.width+r.dx*r._px<o.minWidth&&(o.width=o.minWidth,r.dx=0),o.height+r.dy*r._py<o.minHeight&&(o.height=o.minHeight,r.dy=0),o.resizeFromCenter?(o.width+=r.dx*r._px*2,o.height+=r.dy*r._py*2,o.constrainProportions&&(r._py===0?o.height=o.width/o.aspectRatio:o.width=o.height*o.aspectRatio)):(o.constrainProportions&&(r._py===0?o.height=o.width/o.aspectRatio:(o.width=o.height*o.aspectRatio,r.dx=r.dy*o.aspectRatio*r._py*r._px)),o.fromCenter?(o.width+=r.dx*r._px,o.height+=r.dy*r._py):(o.width+=r.dx*r._px,r._px!==0&&(o.x+=r.dx*(1-r._px&&(1-r._px)/Math.abs(1-r._px))),o.height+=r.dy*r._py,r._py!==0&&(o.y+=r.dy*(1-r._py&&(1-r._py)/Math.abs(1-r._py)))),o.fromCenter&&(r._px!==0&&(o.x+=r.dx/2),r._py!==0&&(o.y+=r.dy/2))),f(o),h(this).triggerLayerEvent(o,"handlemove")},dragstop:function(r){const o=r._parent;h(this).triggerLayerEvent(o,"handlestop")},dragcancel:function(r){const o=r._parent;h(this).triggerLayerEvent(o,"handlecancel")}});t.draw(g),e._handles.push(t.getLayer(-1))}function v(t,e){const n=e.handlePlacement,d=e.width||0,a=e.height||0;e.aspectRatio===null&&e.height!==0&&(e.aspectRatio=d/a),(n==="corners"||n==="both")&&(c(t,e,-1,-1),c(t,e,1,-1),c(t,e,1,1),c(t,e,-1,1)),(n==="sides"||n==="both")&&(c(t,e,0,-1),c(t,e,1,0),c(t,e,0,1),c(t,e,-1,0)),e.guide&&L(t,e)}function u(t){const e=t._guide;e&&(e.x=t.x,e.y=t.y,e.width=t.width,e.height=t.height,e.fromCenter=t.fromCenter)}function L(t,e){const n=h.extend({},e.guide,{layer:!0,draggable:!1,type:"rectangle",handle:null});t.addLayer(n);const d=t.getLayer(-1);e._guide=d,t.moveLayer(d,-e._handles.length-1),u(e)}function P(t,e){for(const n in e)if(Object.prototype.hasOwnProperty.call(e,n)&&n.match(/c?x(\d+)/gi)!==null){const d=n,a=n.replace("x","y");w(t,e,d,a)}e.guide&&b(t,e)}function y(t){let e=t._handles;const n=t._guides;if(t._method===h.fn.drawQuadratic){if(e){const d=t._guide;if(d)for(let a=0;a<e.length;a+=1){const i=t._handles[a];d["x"+(a+1)]=i.x,d["y"+(a+1)]=i.y}}}else if(t._method===h.fn.drawBezier&&n)for(let d=0;d<n.length;d+=1){const a=n[d];if(e=a._handles,a&&e)for(let i=0;i<e.length;i+=1){const s=e[i];a["x"+(i+1)]=s.x,a["y"+(i+1)]=s.y}}}function b(t,e){const n=e._handles,d=h.extend({},e.guide,{layer:!0,draggable:!1,type:"line"});if(e._method===h.fn.drawQuadratic)t.addLayer(d),e._guide=t.getLayer(-1),t.moveLayer(e._guide,-n.length-1);else if(e._method===h.fn.drawBezier){e._guides=[];for(let a=0;a<n.length;a+=1){const i=n[a],s=n[a+1],g=n[a-1];let r=null;if(s!==void 0?i._xProp.indexOf("x")===0&&s._xProp.indexOf("cx")===0&&(r=s):g!==void 0&&g._xProp.indexOf("cx")===0&&i._xProp.indexOf("x")===0&&(r=g),r!==null){t.addLayer(d);const o=t.getLayer(-1);o&&(o._handles=[i,r],e._guides.push(o),t.moveLayer(o,-n.length-1))}}}y(e)}function f(t){const e=t.width||0,n=t.height||0;if(t._handles)for(let d=0;d<t._handles.length;d+=1){const a=t._handles[d];a.x=t.x+(e/2*a._px+(t.fromCenter?0:e/2)),a.y=t.y+(n/2*a._py+(t.fromCenter?0:n/2))}u(t)}function _(t){const e=t._handles;if(e)for(let n=0;n<e.length;n+=1){const d=e[n];d.x=t[d._xProp]+t.x,d.y=t[d._yProp]+t.y}y(t)}function x(t){const e=h(t.canvas);t._handles===void 0&&(t._handles=[]),l(t)?v(e,t):p(t)&&P(e,t)}function m(t){const e=h(t.canvas);if(t._handles){for(let n=0;n<t._handles.length;n+=1){const d=t._handles[n];e.removeLayer(d)}t._handles.length=0}}function C(t){for(const e in t)if(Object.prototype.hasOwnProperty.call(t,e)&&e.match(/^(x|y)\d+$/))return!0;return!1}h.extend(h.jCanvas.eventHooks,{add:function(t){t.handle&&x(t)},remove:function(t){if(t._handles){const e=h(this);for(let n=0;n<t._handles.length;n+=1){const d=t._handles[n];e.removeLayer(d)}t._handles.length=0}},change:function(t,e){e.handle||C(e)?(m(t),x(t)):e.handle===null&&m(t),l(t)?(e.width!==void 0||e.height!==void 0||e.x!==void 0||e.y!==void 0)&&f(t):p(t)&&_(t)},animate:function(t,e){l(t)?(e.prop==="width"||e.prop==="height"||e.prop==="x"||e.prop==="y")&&f(t):p(t)&&e.prop.match(/^c?(x|y)(\d+)/gi)!==null&&_(t)},drag:function(t){l(t)?f(t):p(t)&&_(t)}})});
//# sourceMappingURL=jcanvas-handles.min.js.map