jcanvas/dist/esm/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.

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