fabric-texture/modes/skew.js

This JavaScript library enables fast and efficient image distortion transformations using Canvas 2D.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("fabric"),r=require("./base.class-7YPThjJT.js"),o=require("./calc-intersection-NLuQXGEN.js"),s=require("./calc-fabric-relative-coord-57kWtQps.js");exports.VertexType=void 0,(e=exports.VertexType||(exports.VertexType={})).TOP_LEFT="tl",e.TOP_RIGHT="tr",e.BOTTOM_LEFT="bl",e.BOTTOM_RIGHT="br";class n extends r.BaseMode{constructor(e=r.THEME_COLOR,t=r.SUB_THEME_COLOR,o={}){super(e,t),this.name="Skew",this.options={enableDragResize:!0},this._styleSetters={texture:()=>{},path:()=>{},dragIcon:e=>e},this._objectControlMap=new Map,this.options=r.defaults(o,this.options)}static createDragIcon(e){const r=new t.fabric.Path("M 0 0.75 h 8.5 v 3.5 L 16 0 L 8.5 -4.25 v 3.5 h -17 v -3.5 L -16 0 L -8.5 4.25 v -3.5 Z",{left:0,top:0,scaleX:.8,scaleY:.8,fill:"#ffffff",originX:"center",originY:"center"}),o=new t.fabric.Rect({left:0,top:0,width:46,height:18,rx:10,ry:10,fill:e,stroke:"#ffffff",strokeWidth:2,scaleX:.8,scaleY:.8,originX:"center",originY:"center"});return new t.fabric.Group([o,r],{originX:"center",originY:"center",hasControls:!1,hasBorders:!1})}static execute(e){const t=[];return e.areaBoundCurves.forEach(((r,s)=>{const n=[];r.forEach(((t,r)=>{const c=[],{vertical:a,horizontal:i}=e.mesh[s][r];for(let e=0;e<i.length;e++)for(let t=0;t<a.length;t++){const r=a[t],s=i[e];c.push(o.calcIntersection(r.points[0],r.points[3],s.points[0],s.points[3]))}n.push(c)})),t.push(n)})),t}get controlObjects(){return Array.from(this._objectControlMap.keys())}execute(e){return n.execute(e)}dirtyRender(e){var r;const o=e.canvas;if(!o)return;const c=null===(r=e.texture)||void 0===r?void 0:r.areaBoundCurves;if(!c)return;const a=(r,o,s)=>{var n;const a=c[r][o][s],[i]=null!==(n=Array.from(this._objectControlMap.entries()).find((e=>e[1].curve===a)))&&void 0!==n?n:[];if(!i)return;const x=e.curvePathMap.get(a),p=a.points.map((e=>t.fabric.util.transformPoint(new t.fabric.Point(e.x,e.y),x.calcOwnMatrix()))),l=p[3].y-p[0].y,f=p[3].x-p[0].x,u=Math.atan2(l,f)*(180/Math.PI);i.set({angle:u});const y=x.getCenterPoint();i.set({left:y.x,top:y.y}).setCoords()};c.forEach(((e,t)=>{e.forEach(((e,r)=>{const s=e;Object.entries(s).forEach((([e])=>{const c=s[e],i=this._styleSetters.dragIcon(n.createDragIcon(this.themeColor)),x={top:[exports.VertexType.TOP_LEFT,exports.VertexType.TOP_RIGHT],bottom:[exports.VertexType.BOTTOM_LEFT,exports.VertexType.BOTTOM_RIGHT],right:[exports.VertexType.TOP_RIGHT,exports.VertexType.BOTTOM_RIGHT],left:[exports.VertexType.TOP_LEFT,exports.VertexType.BOTTOM_LEFT]}[e];this._objectControlMap.set(i,{curve:c,rowIndex:t,colIndex:r,vertexTypes:x}),a(t,r,e),o.add(i)}))}))}));const{enableDragResize:i}=this.options,x=[[i,()=>{const t=t=>{if(1!==t.e.buttons)return;if(t.target&&t.target.selectable)return;let r=!1;o.selection=!1;const n=s.calcFabricCanvasCoord(o,t.pointer),c=t=>{const c=s.calcFabricCanvasCoord(o,t.pointer);if(!r&&(Math.abs(c.x-n.x)<50||Math.abs(c.y-n.y)<50))return;const a=s.calcFabricRelativeCoord({left:n.x,top:n.y},e.curvePathMap.get(e.texture.areaBoundCurves[0][0].top)),i=s.calcFabricRelativeCoord({left:c.x,top:c.y},e.curvePathMap.get(e.texture.areaBoundCurves[0][0].bottom));e.texture.setVertexCoord(0,0,exports.VertexType.TOP_LEFT,a),e.texture.setVertexCoord(0,0,exports.VertexType.TOP_RIGHT,{x:i.x,y:a.y}),e.texture.setVertexCoord(0,0,exports.VertexType.BOTTOM_LEFT,{x:a.x,y:i.y}),e.texture.setVertexCoord(0,0,exports.VertexType.BOTTOM_RIGHT,i),e.render(!0,{withoutRecord:!0}),r=!0},a=t=>{r&&e.record(),o.selection=!0,o.off("mouse:move",c),o.off("mouse:up",a)};o.on("mouse:move",c),o.on("mouse:up",a)};return o.on("mouse:down:before",t),()=>{o.off("mouse:down:before",t)}}],[!0,()=>{const r=r=>{if(!r.target)return;const n=this._objectControlMap.get(r.target);if(!n)return;const c=r.target,{curve:i,rowIndex:x,colIndex:p,vertexTypes:l}=n,f=e.curvePathMap.get(i),u=i.points.map((e=>t.fabric.util.transformPoint(new t.fabric.Point(e.x-f.pathOffset.x,e.y-f.pathOffset.y),f.calcOwnMatrix()))),y=(u[3].x+u[0].x)/2,T=(u[3].y+u[0].y)/2;let h={x:c.left,y:c.top};if(u[3].x===u[0].x)h.x=u[0].x;else if(u[3].y===u[0].y)h.y=u[0].y;else{const e=(u[3].y-u[0].y)/(u[3].x-u[0].x),t=u[3].y-e*u[3].x,r={x:c.left,y:c.top},o={x:r.x,y:e*r.x+t},s={x:e?(r.y-t)/e:r.x,y:r.y};h=Math.abs(r.y-o.y)<Math.abs(r.x-s.x)?o:s}const d=h;e.texture.setVertexCoord(x,p,l[0],s.calcFabricRelativeCoord({left:u[0].x+(d.x-y),top:u[0].y+(d.y-T)},f)),e.texture.setVertexCoord(x,p,l[1],s.calcFabricRelativeCoord({left:u[3].x+(d.x-y),top:u[3].y+(d.y-T)},f));Object.entries(e.texture.areaBoundCurves[0][0]).forEach((e=>{a(x,p,e[0])})),e.requestRender(!1,(()=>{this.controlObjects.forEach((e=>{o.bringToFront(e)}))}),{withoutRecord:!0})},n=t=>{const r=t.target;r&&"drag"===t.action&&this.controlObjects.includes(r)&&e.record()};return o.on("object:moving",r),o.on("object:modified",n),()=>{o.off("object:moving",r),o.off("object:modified",n)}}]].map((([e,t])=>e&&t()));return()=>{x.forEach((e=>{"function"==typeof e&&e()})),o.remove(...this._objectControlMap.keys()),this._objectControlMap.clear()}}}exports.default=n;
//# sourceMappingURL=skew.js.map