fabric-v6-guideline/dist/index.cjs.js

- Help you easily append guidelines to your canvas for the selected objects. It help you easily aligning to your object with the others. And Auto snap when the object moved to the center line of the canvas

"use strict";var w=Object.defineProperty;var m=(d,t,s)=>t in d?w(d,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):d[t]=s;var L=(d,t,s)=>m(d,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("fabric"),g=180,E={lineColor:"#ff4444",lineWidth:1,canvasCenterLine:!0,opacity:1,strokeDashArray:[5,5],threshold:20,autoSnap:!1,autoSnapThreshold:10,snapLineColor:"#1111ff"};class S{constructor(t,s){L(this,"canvas");L(this,"strokeOption");this.canvas=t,this.strokeOption={...E,...s}}init(){this.canvas.on("selection:updated",()=>this.clearGuideLine()),this.canvas.on("object:moving",({target:t})=>{var s;(s=this.strokeOption)!=null&&s.autoSnap&&this.snap(t),this.handleObjectMoving(t)}),this.canvas.on("object:scaling",({target:t})=>this.handleObjectMoving(t)),this.canvas.on("mouse:up",()=>this.clearGuideLine())}handleAroundObjectLine(t){var c;const s=(c=this.strokeOption)==null?void 0:c.threshold,n=t.left,e=t.top,o=t.left+t.width*t.scaleX,r=t.top+t.height*t.scaleY,l=this.canvas.getObjects().filter(i=>!/line/i.test(i.type)),h=(i,a)=>Math.abs(i-a)<=s;l.forEach(i=>{const a=i.top+i.height*i.scaleY,p=i.top<t.top,f=i.left<t.left,v=p?a:i.top,u=p?i.top+i.height:i.top-i.height;a<e&&h(e,a)&&this.createAroundLine(o,a,i.left+i.width*i.scaleX,a),n>i.left&&h(n,i.left)?this.createAroundLine(i.left,v,i.left,u):h(i.left,o)&&this.createAroundLine(i.left,v,i.left,u),h(e,i.top)?f?this.createAroundLine(o,i.top,i.left,i.top):this.createAroundLine(n,i.top,i.left,i.top):h(i.top,r)&&(f?this.createAroundLine(o,i.top,i.left,i.top):this.createAroundLine(n,i.top,i.left,i.top))})}handleObjectMoving(t){var r,l;const s=t.left,n=t.top,e=s+t.width*t.scaleX,o=n+t.height*t.scaleY;this.clearGuideLine(),this.handleAroundObjectLine(t),Math.abs(s)<this.canvas.width&&(this.createVerticalLine(s),this.createVerticalLine(e),t.scaleX>.4&&this.createVerticalLine((s+e)/2),(r=this.strokeOption)!=null&&r.canvasCenterLine&&Math.abs(this.canvas.width/2-s)<g&&this.createVerticalLine(this.canvas.width/2)),Math.abs(n)<this.canvas.height&&(this.createHorizontalLine(n),this.createHorizontalLine(o),t.scaleY>.4&&this.createHorizontalLine((n+o)/2),(l=this.strokeOption)!=null&&l.canvasCenterLine&&Math.abs(this.canvas.height/2-n)<g&&this.createHorizontalLine(this.canvas.height/2))}createVerticalLine(t){var n,e,o;const s=new k.Line([t,0,t,(n=this.canvas)==null?void 0:n.height],{id:"vertical-",...this.strokeOption,stroke:(e=this.strokeOption)==null?void 0:e.lineColor,strokeWidth:(o=this.strokeOption)==null?void 0:o.lineWidth});this.canvas.add(s),this.canvas.renderAll()}snap(t){var A;const s=t.width,n=t.height,e=t.left,o=t.top,r=e+s*t.scaleX,l=o+n*t.scaleY,h=this.canvas.height/2,c=this.canvas.width/2,i=((A=this.strokeOption)==null?void 0:A.autoSnapThreshold)||10,a=(T,C)=>Math.abs(T-C)<=i;(a(h,o)||a(o,h))&&(t.set({top:h}),t.setCoords(),this.canvas.requestRenderAll());const p=a(h,o),f=a(l,h);p?(t.set({top:h}),t.setCoords(),this.canvas.requestRenderAll()):f&&(t.set({top:h-t.height*t.scaleY}),t.setCoords(),this.canvas.requestRenderAll());const v=a(r,c);a(e,c)?(t.set({left:c}),t.setCoords(),this.canvas.requestRenderAll()):v&&(t.set({left:c-t.width*t.scaleX}),t.setCoords(),this.canvas.requestRenderAll())}createHorizontalLine(t){var n,e;if(!this.canvas)return;const s=new k.Line([0,t,this.canvas.width,t],{id:"horizontal-",...this.strokeOption,stroke:(n=this.strokeOption)==null?void 0:n.lineColor,strokeWidth:(e=this.strokeOption)==null?void 0:e.lineWidth});this.canvas.add(s),this.canvas.renderAll()}createAroundLine(t,s,n,e){var r,l;const o=new k.Line([t,s,n,e],{id:"around",...this.strokeOption,stroke:(r=this.strokeOption)==null?void 0:r.snapLineColor,strokeWidth:(l=this.strokeOption)==null?void 0:l.lineWidth});this.canvas.add(o),this.canvas.renderAll()}clearGuideLine(){this.canvas.getObjects("line").filter(s=>{const n=s.id;return(n==null?void 0:n.includes("vertical-"))||(n==null?void 0:n.includes("horizontal-"))||(n==null?void 0:n.includes("around"))}).forEach(s=>this.canvas.remove(s)),this.canvas.renderAll()}}exports.GuideLine=S;