fabric-warpvas/modes/warp.esm.js

This JavaScript library helps you efficiently build image warping tools on Fabric.js

import{B as t,T as e,S as o,d as s,I as r}from"./base.class-_EIOxPF8.js";import{b as n,t as i,m as l,d as a,n as c,e as h,g as u,h as d,o as f,j as p,l as v,k as b,i as y,p as x,q as C,c as g,r as m,f as O,u as _,a as j,s as T}from"./register-limit-move-event-_gHDOT2-.js";const w=["left","top","width","height","visible"],M=["rx","ry"];class E extends n{static getDefaults(){return i(i({},super.getDefaults()),E.ownDefaults)}constructor(t){super(),Object.assign(this,E.ownDefaults),this.setOptions(t),this._initRxRy()}_initRxRy(){const{rx:t,ry:e}=this;t&&!e?this.ry=t:e&&!t&&(this.rx=e)}_render(t){const{width:e,height:o}=this,s=-e/2,r=-o/2,n=this.rx?Math.min(this.rx,e/2):0,i=this.ry?Math.min(this.ry,o/2):0,a=0!==n||0!==i;t.beginPath(),t.moveTo(s+n,r),t.lineTo(s+e-n,r),a&&t.bezierCurveTo(s+e-l*n,r,s+e,r+l*i,s+e,r+i),t.lineTo(s+e,r+o-i),a&&t.bezierCurveTo(s+e,r+o-l*i,s+e-l*n,r+o,s+e-n,r+o),t.lineTo(s+n,r+o),a&&t.bezierCurveTo(s+l*n,r+o,s,r+o-l*i,s,r+o-i),t.lineTo(s,r+i),a&&t.bezierCurveTo(s,r+l*i,s+l*n,r,s+n,r),t.closePath(),this._renderPaintInOrder(t)}toObject(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return super.toObject([...M,...t])}_toSVG(){const{width:t,height:e,rx:o,ry:s}=this;return["<rect ","COMMON_PARTS",'x="'.concat(-t/2,'" y="').concat(-e/2,'" rx="').concat(o,'" ry="').concat(s,'" width="').concat(t,'" height="').concat(e,'" />\n')]}static async fromElement(t,e,o){const s=a(t,this.ATTRIBUTE_NAMES,o),{left:r=0,top:n=0,width:l=0,height:h=0,visible:u=!0}=s,d=c(s,w);return new this(i(i(i({},e),d),{},{left:r,top:n,width:l,height:h,visible:Boolean(u&&l&&h)}))}}h(E,"type","Rect"),h(E,"cacheProperties",[...d,...M]),h(E,"ownDefaults",{rx:0,ry:0}),h(E,"ATTRIBUTE_NAMES",[...f,"x","y","rx","ry","width","height"]),u.setClass(E),u.setSVGClass(E);const R=["x1","y1","x2","y2"],k=["x1","y1","x2","y2"],P=["x1","x2","y1","y2"];class A extends n{constructor(){let[t,e,o,s]=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0,0,0],r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(),Object.assign(this,A.ownDefaults),this.setOptions(r),this.x1=t,this.x2=o,this.y1=e,this.y2=s,this._setWidthHeight();const{left:n,top:i}=r;"number"==typeof n&&this.set(p,n),"number"==typeof i&&this.set(v,i)}_setWidthHeight(){const{x1:t,y1:e,x2:o,y2:s}=this;this.width=Math.abs(o-t),this.height=Math.abs(s-e);const{left:r,top:n,width:i,height:l}=b([{x:t,y:e},{x:o,y:s}]),a=new y(r+i/2,n+l/2);this.setPositionByOrigin(a,x,x)}_set(t,e){return super._set(t,e),P.includes(t)&&this._setWidthHeight(),this}_render(t){t.beginPath();const e=this.calcLinePoints();t.moveTo(e.x1,e.y1),t.lineTo(e.x2,e.y2),t.lineWidth=this.strokeWidth;const o=t.strokeStyle;var s;C(this.stroke)?t.strokeStyle=this.stroke.toLive(t):t.strokeStyle=null!==(s=this.stroke)&&void 0!==s?s:t.fillStyle,this.stroke&&this._renderStroke(t),t.strokeStyle=o}_findCenterFromElement(){return new y((this.x1+this.x2)/2,(this.y1+this.y2)/2)}toObject(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[];return i(i({},super.toObject(t)),this.calcLinePoints())}_getNonTransformedDimensions(){const t=super._getNonTransformedDimensions();return"butt"===this.strokeLineCap&&(0===this.width&&(t.y-=this.strokeWidth),0===this.height&&(t.x-=this.strokeWidth)),t}calcLinePoints(){const{x1:t,x2:e,y1:o,y2:s,width:r,height:n}=this,i=t<=e?-1:1,l=o<=s?-1:1;return{x1:i*r/2,x2:i*-r/2,y1:l*n/2,y2:l*-n/2}}_toSVG(){const{x1:t,x2:e,y1:o,y2:s}=this.calcLinePoints();return["<line ","COMMON_PARTS",'x1="'.concat(t,'" y1="').concat(o,'" x2="').concat(e,'" y2="').concat(s,'" />\n')]}static async fromElement(t,e,o){const s=a(t,this.ATTRIBUTE_NAMES,o),{x1:r=0,y1:n=0,x2:i=0,y2:l=0}=s;return new this([r,n,i,l],c(s,R))}static fromObject(t){let{x1:e,y1:o,x2:s,y2:r}=t,n=c(t,k);return this._fromObject(i(i({},n),{},{points:[e,o,s,r]}),{extraParam:"points"})}}h(A,"type","Line"),h(A,"cacheProperties",[...d,...P]),h(A,"ATTRIBUTE_NAMES",f.concat(P)),u.setClass(A),u.setSVGClass(A);const{calcMatrix:I}=r;var S;!function(t){t.TOP_LEFT="tl",t.TOP_RIGHT="tr",t.BOTTOM_LEFT="bl",t.BOTTOM_RIGHT="br"}(S||(S={}));class B extends t{constructor(t={}){super(t),this.name="warp",this.options={themeColor:e,subThemeColor:o,enableConstraintKey:"None",enableGridSplit:!0},this._positionControlMap=new Map([]),this._insertControlObject=null,this.options=s(t,this.options)}static execute(t){if(!t.regionCurves)return[];const e=[];return t.regionBoundaryCurves.forEach(((o,s)=>{const r=[];o.forEach(((e,o)=>{const n=[],{vertical:i,horizontal:l}=t.regionCurves[s][o];for(let t=0;t<l.length;t++)for(let e=0;e<i.length;e++){const o=i[e].get(t/(l.length-1)),s=l[t].get(e/(i.length-1));n.push({x:(o.x+s.x)/2,y:(o.y+s.y)/2})}r.push(n)})),e.push(r)})),e}get controlObjects(){return Array.from(this._positionControlMap.values()).map((t=>t.majorControl))}get subControlObjects(){return Array.from(this._positionControlMap.values()).map((t=>t.subControls.map((t=>t.object)))).flat(1)}get insertControlObject(){return this._insertControlObject}get lineObjects(){return Array.from(this._positionControlMap.values()).map((t=>t.subControls.map((t=>t.line)))).flat(1)}execute(t){return B.execute(t)}dirtyRender(t){var e,o,s,r;const n=t.canvas;if(!n)return;const i=null===(e=t.warpvas)||void 0===e?void 0:e.regionBoundaryCurves;if(!i)return;const l=[],a=new Map;this._insertControlObject=null!==(r=null===(s=(o=this._styleSetters).insertControl)||void 0===s?void 0:s.call(o,this._createDefaultInsertControl(this.options.themeColor)))&&void 0!==r?r:this._createDefaultInsertControl(this.options.themeColor);const c=()=>{var t,e;n.renderOnAddRemove=!1,this._positionControlMap.forEach((t=>{t.subControls.forEach((t=>{var e;return null===(e=t.line.canvas)||void 0===e?void 0:e.bringObjectToFront(t.line)}))})),this._positionControlMap.forEach((t=>{t.subControls.forEach((t=>{var e;return null===(e=t.object.canvas)||void 0===e?void 0:e.bringObjectToFront(t.object)}))})),this._positionControlMap.forEach((t=>{var e;null===(e=t.majorControl.canvas)||void 0===e||e.bringObjectToFront(t.majorControl)})),null===(e=null===(t=this._insertControlObject)||void 0===t?void 0:t.canvas)||void 0===e||e.bringObjectToFront(this._insertControlObject),n.renderOnAddRemove=!0,n.requestRenderAll()};i.forEach(((e,o)=>{e.forEach(((e,s)=>{const r=e;Object.entries(r).forEach((([e])=>{const i=r[e],c=t.curvePathMap.get(i),h=i.points.map((t=>new y(t.x-c.pathOffset.x,t.y-c.pathOffset.y).transform(c.calcOwnMatrix())));h.forEach(((t,r)=>{var c,u,d,f,p,v,b,y;if(0===r||3===r)return;const x=[0,0,3,3][r],C=h[x],g={top:[S.TOP_LEFT,S.TOP_RIGHT],bottom:[S.BOTTOM_LEFT,S.BOTTOM_RIGHT],right:[S.TOP_RIGHT,S.BOTTOM_RIGHT],left:[S.TOP_LEFT,S.BOTTOM_LEFT]}[e][Math.sign(x)],m=o+(g.startsWith("b")?1:0),O=s+(g.endsWith("r")?1:0),_=`${m}-${O}`;let j=this._positionControlMap.get(_);if(!j){const t=null!==(d=null===(u=(c=this._styleSetters).control)||void 0===u?void 0:u.call(c,this._createDefaultControl(this.options.themeColor)))&&void 0!==d?d:this._createDefaultControl(this.options.themeColor);t.set({left:C.x,top:C.y}),n.add(t),l.push(t),j={majorControl:t,curve:i,rowIndex:o,colIndex:s,splitDotRowIndex:m,splitDotColIndex:O,vertexIndex:x,vertexType:g,subControls:[]}}if(!j.subControls.find((t=>t.attach[0]===i&&t.attach[1]===x))){const e=null!==(v=null===(p=(f=this._styleSetters).curveControl)||void 0===p?void 0:p.call(f,this._createDefaultCurveControl()))&&void 0!==v?v:this._createDefaultCurveControl();e.set({left:t.x,top:t.y});const o=new A([t.x,t.y,C.x,C.y],{stroke:"rgba(200, 200, 200, 0.8)",strokeWidth:1,strokeUniform:!0,visible:!1,evented:!1,selectable:!1,originX:"center",originY:"center"});null===(y=(b=this._styleSetters).line)||void 0===y||y.call(b,o),n.add(o,e),l.push(o,e),j.subControls.push({attach:[i,x],object:e,line:o,index:r})}this._positionControlMap.set(_,j),a.set(j.majorControl,_)}))}))}))})),c(),this._positionControlMap.forEach((e=>{const{majorControl:o,subControls:s}=e;s.forEach((({attach:[e],object:s,line:r,index:n})=>{s.on("moving",(()=>{const i=t.curvePathMap.get(e),l=g(s,i),a=e.points[n],h=l.x-a.x,u=l.y-a.y;s.set({angle:90+180*Math.atan2(s.top-o.top,s.left-o.left)/Math.PI}).setCoords(),e.points[n].x+=h,e.points[n].y+=u,r.set({x1:s.left,y1:s.top,x2:o.left,y2:o.top}),t.requestRender(!1,c,{skipHistoryRecording:!0})}))})),o.on("selected",(()=>{n.getActiveObject()===o&&s.forEach((({object:t,line:e})=>{var s;t.set("visible",!0),e.set("visible",!0),null===(s=o.canvas)||void 0===s||s.requestRenderAll()}))})),o.on("deselected",(()=>{s.forEach((({object:t,line:e})=>{var s;t.set("visible",!1),e.set("visible",!1),null===(s=o.canvas)||void 0===s||s.requestRenderAll()}))})),s.forEach((({object:t})=>{t.on("selected",(()=>{s.forEach((({object:t,line:e})=>{var o;t.set("visible",!0),e.set("visible",!0),null===(o=t.canvas)||void 0===o||o.requestRenderAll()}))})),t.on("deselected",(()=>{s.forEach((({object:t,line:e})=>{var o;t.set("visible",!1),e.set("visible",!1),null===(o=t.canvas)||void 0===o||o.requestRenderAll()}))}))}))}));const{enableConstraintKey:h,enableGridSplit:u}=this.options,d=[["NONE"!==h.toUpperCase(),m(n,h)],[!0,()=>{const e=()=>{const e=n.getActiveObjects(),o=new Set;for(const t of e){const e=a.get(t);if(!e)continue;this._positionControlMap.get(e)&&o.add(t)}Array.from(this._positionControlMap.values()).forEach((e=>{if(!o.has(e.majorControl))return;const{curve:s,majorControl:r,rowIndex:n,colIndex:i,vertexType:l,vertexIndex:a,subControls:c}=e,h=t.curvePathMap.get(s),u=_(r.calcTransformMatrix(!1)),d={left:u.translateX,top:u.translateY},f=g(d,h),p=s.points[a],v=new y(p.x-h.pathOffset.x,p.y-h.pathOffset.y).transform(h.calcOwnMatrix()),b=f.x-p.x,x=f.y-p.y,C=d.left-v.x,m=d.top-v.y;t.warpvas.updateVertexCoord(n,i,l,f,!1),c.forEach((({attach:t,object:e,line:o,index:s})=>{t[0].points[s].x+=b,t[0].points[s].y+=x,e.set({left:e.left+C,top:e.top+m}).setCoords(),o.set({x1:e.left,y1:e.top,x2:d.left,y2:d.top})}))})),o.size&&(t.requestRender(!1,c,{skipHistoryRecording:!0}),o.clear())},o=e=>{const o=e.target;o&&"drag"===e.transform.action&&("activeSelection"===o.type&&o.getObjects().some(this.controlObjects.includes.bind(this.controlObjects))||this.controlObjects.includes(o)||this.subControlObjects.includes(o))&&t.record()};return n.on("object:moving",e),n.on("object:modified",o),()=>{n.off("object:moving",e),n.off("object:modified",o)}}],[!0,()=>{const t=()=>{var t;const e=n.getActiveObjects(),o=new Set;for(const t of e){const e=a.get(t);if(!e)continue;this._positionControlMap.get(e)&&o.add(t)}Array.from(a.keys()).forEach((t=>{t.set({opacity:1}),this._styleSetters.control||t.set({opacity:1,fill:o.has(t)?this.options.subThemeColor:this.options.themeColor})})),o.size&&(null===(t=n.getActiveObject())||void 0===t||t.set({perPixelTargetFind:!0,hasControls:!1,hasBorders:!1}),o.clear()),n.requestRenderAll()};return n.on("selection:created",t),n.on("selection:updated",t),n.on("selection:cleared",t),()=>{n.off("selection:created",t),n.off("selection:updated",t),n.off("selection:cleared",t)}}],[u,()=>{let e=null,o=null,s=null;const r=r=>{if(1!==r.e.buttons)return;const i=performance.now(),a=r.target===this._insertControlObject,h=r.target===t.warpvasObject;if(r.viewportPoint&&this._insertControlObject&&(a?n.selection=!1:(e=null,o=null,s=null,n.remove(this._insertControlObject)),h)){const i=j(n,r.viewportPoint),l=g({left:i.x,top:i.y},t.paths[0]);if(s=t.warpvas.getHitInfo(l),s){const{before:t,after:r,clickPart:n}=s,a=I([[r[0],r[1],r[3]],[r[2],r[1],r[3]]][n],[[t[0],t[1],t[3]],[t[2],t[1],t[3]]][n]);e=i,o=l.transform(T(a))}}const u=e=>{var o;if(!e.viewportPoint)return;if(n.selection)return;if(!this._insertControlObject)return;if(!a)return;const s=t.warpvas;if(!s)return;const r=j(n,e.viewportPoint),i={x:r.x-this._insertControlObject.left,y:r.y-this._insertControlObject.top},h=new WeakSet([]);s.forEachRegionBoundCoords(((e,o,s,r)=>{if(h.has(r))return r.points;h.add(r);const n=t.curvePathMap.get(r),l=new y(i.x,i.y).transform(T(n.calcOwnMatrix()),!0);return r.points.map((t=>(t.x+=l.x,t.y+=l.y,t)))})),[this._insertControlObject,t.warpvasObject,...null!==(o=t.paths)&&void 0!==o?o:[],...l].forEach((t=>{t.set({left:t.left+i.x,top:t.top+i.y}).setCoords()})),t.requestRender(!1,c,{skipHistoryRecording:!0})},d=r=>{var l;performance.now()-i<200&&r.viewportPoint&&this._insertControlObject&&(a?(n.remove(this._insertControlObject),null===(l=t.warpvas)||void 0===l||l.splitRegionByPoint(s.rowIndex,s.colIndex,o),t.render(!0)):e&&(this._insertControlObject.set({left:e.x,top:e.y}).setCoords(),n.add(this._insertControlObject),n.requestRenderAll())),a&&t.record(),n.selection=!0,n.off("mouse:up",d),n.off("mouse:move",u)};n.on("mouse:move",u),n.on("mouse:up",d)};return n.on("mouse:down",r),()=>{n.off("mouse:down",r)}}],[u,()=>{const e=e=>{var o;const s=[];for(const t of e){const e=a.get(t);if(!e)continue;const o=this._positionControlMap.get(e);o&&s.push(o)}s&&(null===(o=t.warpvas)||void 0===o||o.removeRegion(...s.map((t=>({row:t.splitDotRowIndex,column:t.splitDotColIndex})))),t.render(!0))},o=t=>{if(["Delete","Backspace"].includes(t.key)){const t=n.getActiveObjects();if(!t)return;e(t)}};return window.addEventListener("keydown",o),()=>{window.removeEventListener("keydown",o)}}]],f=d.map((([t,e])=>t&&e()));return()=>{f.forEach((t=>{"function"==typeof t&&t()})),this._insertControlObject&&n.remove(this._insertControlObject),n.remove(...l),this._positionControlMap.clear(),a.clear()}}_createDefaultControl(t){return new O({radius:4,fill:t,stroke:"#ffffff",paintFirst:"fill",strokeWidth:1,originX:"center",originY:"center",hasControls:!1,hasBorders:!1})}_createDefaultCurveControl(){return new E({width:6,height:6,fill:"rgba(255, 255, 255, 1)",stroke:"rgba(200, 200, 200, 0.8)",strokeWidth:1,strokeUniform:!0,visible:!1,hasControls:!1,hasBorders:!1,originX:"center",originY:"center"})}_createDefaultInsertControl(t){return new O({radius:4,fill:"rgba(255, 255, 255, 0.2)",stroke:t,strokeWidth:1,originX:"center",originY:"center",selectable:!1,hasControls:!1,hasBorders:!1})}}export{S as VertexType,B as default};
//# sourceMappingURL=warp.esm.js.map