fabric-texture/modes/skew.esm.js

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

import{fabric as t}from"fabric";import{B as e,d as o,T as r,S as n}from"./base.class-G1Hpx_TY.js";import{c as s}from"./calc-intersection-_ACVCUgT.js";import{c as a,a as c}from"./calc-fabric-relative-coord--qdng7YE.js";var i;!function(t){t.TOP_LEFT="tl",t.TOP_RIGHT="tr",t.BOTTOM_LEFT="bl",t.BOTTOM_RIGHT="br"}(i||(i={}));class f extends e{constructor(t=r,e=n,s={}){super(t,e),this.name="Skew",this.options={enableDragResize:!0},this._styleSetters={texture:()=>{},path:()=>{},dragIcon:t=>t},this._objectControlMap=new Map,this.options=o(s,this.options)}static createDragIcon(e){const o=new t.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"}),r=new t.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.Group([r,o],{originX:"center",originY:"center",hasControls:!1,hasBorders:!1})}static execute(t){const e=[];return t.areaBoundCurves.forEach(((o,r)=>{const n=[];o.forEach(((e,o)=>{const a=[],{vertical:c,horizontal:i}=t.mesh[r][o];for(let t=0;t<i.length;t++)for(let e=0;e<c.length;e++){const o=c[e],r=i[t];a.push(s(o.points[0],o.points[3],r.points[0],r.points[3]))}n.push(a)})),e.push(n)})),e}get controlObjects(){return Array.from(this._objectControlMap.keys())}execute(t){return f.execute(t)}dirtyRender(e){var o;const r=e.canvas;if(!r)return;const n=null===(o=e.texture)||void 0===o?void 0:o.areaBoundCurves;if(!n)return;const s=(o,r,s)=>{var a;const c=n[o][r][s],[i]=null!==(a=Array.from(this._objectControlMap.entries()).find((t=>t[1].curve===c)))&&void 0!==a?a:[];if(!i)return;const f=e.curvePathMap.get(c),u=c.points.map((e=>t.util.transformPoint(new t.Point(e.x,e.y),f.calcOwnMatrix()))),l=u[3].y-u[0].y,x=u[3].x-u[0].x,h=Math.atan2(l,x)*(180/Math.PI);i.set({angle:h});const p=f.getCenterPoint();i.set({left:p.x,top:p.y}).setCoords()};n.forEach(((t,e)=>{t.forEach(((t,o)=>{const n=t;Object.entries(n).forEach((([t])=>{const a=n[t],c=this._styleSetters.dragIcon(f.createDragIcon(this.themeColor)),u={top:[i.TOP_LEFT,i.TOP_RIGHT],bottom:[i.BOTTOM_LEFT,i.BOTTOM_RIGHT],right:[i.TOP_RIGHT,i.BOTTOM_RIGHT],left:[i.TOP_LEFT,i.BOTTOM_LEFT]}[t];this._objectControlMap.set(c,{curve:a,rowIndex:e,colIndex:o,vertexTypes:u}),s(e,o,t),r.add(c)}))}))}));const{enableDragResize:u}=this.options,l=[[u,()=>{const t=t=>{if(1!==t.e.buttons)return;if(t.target&&t.target.selectable)return;let o=!1;r.selection=!1;const n=c(r,t.pointer),s=t=>{const s=c(r,t.pointer);if(!o&&(Math.abs(s.x-n.x)<50||Math.abs(s.y-n.y)<50))return;const f=a({left:n.x,top:n.y},e.curvePathMap.get(e.texture.areaBoundCurves[0][0].top)),u=a({left:s.x,top:s.y},e.curvePathMap.get(e.texture.areaBoundCurves[0][0].bottom));e.texture.setVertexCoord(0,0,i.TOP_LEFT,f),e.texture.setVertexCoord(0,0,i.TOP_RIGHT,{x:u.x,y:f.y}),e.texture.setVertexCoord(0,0,i.BOTTOM_LEFT,{x:f.x,y:u.y}),e.texture.setVertexCoord(0,0,i.BOTTOM_RIGHT,u),e.render(!0,{withoutRecord:!0}),o=!0},f=t=>{o&&e.record(),r.selection=!0,r.off("mouse:move",s),r.off("mouse:up",f)};r.on("mouse:move",s),r.on("mouse:up",f)};return r.on("mouse:down:before",t),()=>{r.off("mouse:down:before",t)}}],[!0,()=>{const o=o=>{if(!o.target)return;const n=this._objectControlMap.get(o.target);if(!n)return;const c=o.target,{curve:i,rowIndex:f,colIndex:u,vertexTypes:l}=n,x=e.curvePathMap.get(i),h=i.points.map((e=>t.util.transformPoint(new t.Point(e.x-x.pathOffset.x,e.y-x.pathOffset.y),x.calcOwnMatrix()))),p=(h[3].x+h[0].x)/2,d=(h[3].y+h[0].y)/2;let y={x:c.left,y:c.top};if(h[3].x===h[0].x)y.x=h[0].x;else if(h[3].y===h[0].y)y.y=h[0].y;else{const t=(h[3].y-h[0].y)/(h[3].x-h[0].x),e=h[3].y-t*h[3].x,o={x:c.left,y:c.top},r={x:o.x,y:t*o.x+e},n={x:t?(o.y-e)/t:o.x,y:o.y};y=Math.abs(o.y-r.y)<Math.abs(o.x-n.x)?r:n}const T=y;e.texture.setVertexCoord(f,u,l[0],a({left:h[0].x+(T.x-p),top:h[0].y+(T.y-d)},x)),e.texture.setVertexCoord(f,u,l[1],a({left:h[3].x+(T.x-p),top:h[3].y+(T.y-d)},x));Object.entries(e.texture.areaBoundCurves[0][0]).forEach((t=>{s(f,u,t[0])})),e.requestRender(!1,(()=>{this.controlObjects.forEach((t=>{r.bringToFront(t)}))}),{withoutRecord:!0})},n=t=>{const o=t.target;o&&"drag"===t.action&&this.controlObjects.includes(o)&&e.record()};return r.on("object:moving",o),r.on("object:modified",n),()=>{r.off("object:moving",o),r.off("object:modified",n)}}]].map((([t,e])=>t&&e()));return()=>{l.forEach((t=>{"function"==typeof t&&t()})),r.remove(...this._objectControlMap.keys()),this._objectControlMap.clear()}}}export{i as VertexType,f as default};
//# sourceMappingURL=skew.esm.js.map