@grapesjs/studio-sdk-plugins 1.0.20 → 1.0.21-rc.1

package/dist/canvasAbsoluteMode/index.cjs.js

@@ -1 +1 @@
-"use strict";const W="app.grapesjs.com",Y="app-stage.grapesjs.com",B=[W,Y,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],V="license:check:start",k="license:check:end",H=()=>typeof window<"u",X=({isDev:e,isStage:d})=>`${e?"":`https://${d?Y:W}`}/api`,j=()=>{const e=H()&&window.location.hostname;return!!e&&(B.includes(e)||B.some(d=>e.endsWith(d)))};async function q({path:e,baseApiUrl:d,method:u="GET",headers:i={},params:n,body:s}){const a=`${d||X({isDev:!1,isStage:!1})}${e}`,m={method:u,headers:{"Content-Type":"application/json",...i}};s&&(m.body=JSON.stringify(s));const r=n?new URLSearchParams(n).toString():"",t=r?`?${r}`:"",o=await fetch(`${a}${t}`,m);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var L=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(L||{});const $={[L.free]:0,[L.startup]:10,[L.business]:20,[L.enterprise]:30};function F(e){const d=e;return d.init=u=>i=>e(i,u),d}const J=e=>F(e);async function z({editor:e,plan:d,pluginName:u,licenseKey:i,cleanup:n}){let s="",h=!1;const a=j(),m=t=>{console.warn("Cleanup plugin:",u,"Reason:",t),n()},r=(t={})=>{var x;const{error:o,sdkLicense:f}=t,c=(x=t.plan)==null?void 0:x.category;if(!(f||t.license)||o)m(o||"Invalid license");else if(c){const p=$[d],g=$[c];p>g&&m({pluginRequiredPlan:d,licensePlan:c})}};e.on(V,t=>{s=t==null?void 0:t.baseApiUrl,h=!0}),e.on(k,t=>{r(t)}),setTimeout(async()=>{if(!h){if(a)return;if(i){const t=await Q({licenseKey:i,pluginName:u,baseApiUrl:s});t&&r(t)}else m("The `licenseKey` option not provided")}},2e3)}async function Q(e){const{licenseKey:d,pluginName:u,baseApiUrl:i}=e;try{return(await q({baseApiUrl:i,path:`/sdk/${d||"na"}`,method:"POST",params:{d:window.location.hostname,pn:u}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const Z="canvasAbsoluteMode",ee=L.startup;function R({guideMatched:e,canvasView:d}){const u=e.guide.x===void 0?"y":"x";let i=0,n=0,s=0,h=0;const{guide:a,matched:m}=e,r=d.getElBoxRect(a.componentView.el),t=d.getElBoxRect(m.componentView.el),o=r.y,f=r.y+r.height,c=r.x,_=r.x+r.width,x=t.y,p=t.y+t.height,g=t.x,y=t.x+t.width,E=Math.max(0,o-p),l=Math.max(0,x-f),S=Math.max(0,c-y),O=Math.max(0,g-_),T=E>l,b=S>O,D=a.type;return u==="x"&&(D==="l"?(i=c,T?(n=p,s=E):(n=f,s=l)):D==="r"?(i=_,T?(n=p,s=E):(n=f,s=l)):D==="x"&&(i=c-(c-_)/2,T?(n=p,s=E):(n=f,s=l))),u==="y"&&(D==="t"?(n=o,b?(i=y,h=S):(i=_,h=O)):D==="b"?(n=f,b?(i=y,h=S):(i=_,h=O)):D==="y"&&(n=o-(o-f)/2,b?(i=y,h=S):(i=_,h=O))),{axis:u,x:i,y:n,width:h,height:s}}function te({guideMatched:e,component:d,canvasView:u}){const i=e.guide.x===void 0?"x":"y",{guide:n,matched:s}=e,h=n.type,a=s.type,m=u.getElementPos(n.componentView.el).rect,r=u.getElementPos(s.componentView.el).rect;if(i==="x"){const t=m.height,o=r.top,f=r.top+r.height;let c=0;h==="t"?a==="t"?c=o-t:a==="b"?c=f-t:a==="y"&&(c=o-t-(o-f)/2):h==="b"?a==="t"?c=o-t*2:a==="b"?c=f-t*2:a==="y"&&(c=o-t*2-(o-f)/2):h==="y"&&(a==="t"?c=o-t*1.5:a==="b"?c=f-t*1.5:a==="y"&&(c=o-t*1.5-(o-f)/2)),d.addStyle({top:`${c-5}px`},{partial:!0})}if(i==="y"){const t=m.width,o=r.left,f=r.left+r.width;let c=0;h==="l"?a==="l"?c=o:a==="r"?c=f:a==="x"&&(c=o-(o-f)/2):h==="r"?a==="l"?c=o-t:a==="r"?c=f-t:a==="x"&&(c=o-t-(o-f)/2):h==="x"&&(a==="l"?c=o-t/2:a==="r"&&(c=f-t/2)),d.addStyle({left:`${c}px`},{partial:!0})}}function K({snapping:e,editor:d,props:u}){var A,P;const{command:i,guidesMatched:n}=u,s=u.component,h=s.getEl(),a=d.Canvas.getCanvasView(),{x:m,y:r}=e??{x:10,y:10},t=i.opts.event,o=t.clientX,f=t.clientY;if(!s.__lastSnappedPosition){const w=a.getElBoxRect(h),v=o-w.x,C=f-w.y;s.__lastSnappedPosition={left:w.x,top:w.y},s.__dragOffset={x:v,y:C}}const c=((A=s.__dragOffset)==null?void 0:A.x)||0,_=((P=s.__dragOffset)==null?void 0:P.y)||0,x=s.__lastSnappedPosition,p=o-x.left-c,g=f-x.top-_;let y=x.left,E=x.top;const l=n==null?void 0:n[0],S=(l==null?void 0:l.guide.type)==="l",O=(l==null?void 0:l.guide.type)==="x",T=(l==null?void 0:l.guide.type)==="r",b=(l==null?void 0:l.guide.type)==="t",D=(l==null?void 0:l.guide.type)==="b",M=(l==null?void 0:l.guide.type)==="y";if(l){const{x:w,y:v}=R({guideMatched:l,canvasView:a}),C=h.offsetWidth,N=h.offsetHeight;S?y=w:T?y=w-C:O?y=w-C/2:b?E=v:D?E=v-N:M&&(E=v-N/2),s.__lastSnappedGuideMatched=l}else Math.abs(p)>=m&&(y=Math.round((x.left+p)/m)*m,s.__lastSnappedGuideMatched=null),Math.abs(g)>=r&&(E=Math.round((x.top+g)/r)*r,s.__lastSnappedGuideMatched=null);return s.addStyle({left:`${y}px`,top:`${E}px`},{partial:!0}),s.__lastSnappedPosition={left:y,top:E},{x:y,y:E,guideMatched:s.__lastSnappedGuideMatched}}function ne({snapping:e,props:d,editor:u}){const{x:i,y:n}=K({snapping:e,props:d,editor:u}),s=d.component;s.addStyle({left:`${i}px`,top:`${n}px`}),delete s.__lastSnappedPosition,delete s.__lastSnappedGuideMatched}const se="core:component-drag",oe="studio:setDragAbsolute",ie="dmode:start",U="dmode:move",I="dmode:end",G="dragAbsolute",ce="select",ae="hover",le="spacing",de=function(e,d={}){const u=e.Commands.getConfig().defaultOptions??{};u[se]={run:p=>({...p,skipGuidesRender:!0})};const{snapping:i,locking:n}=d,s=!!(i!=null&&i.x||i!=null&&i.y),h=!!(n!=null&&n.x||n!=null&&n.y),{Canvas:a}=e;let m=null;const r=p=>{const{component:g,guidesMatched:y,command:E}=p,l=g.view,S=e.Canvas.getCanvasView(),O=g.getEl();let T=y.map(M=>M.matched.componentEl),b=y.map(M=>R({guideMatched:M,canvasView:S}));if(s){const{guideMatched:M}=K({snapping:i,props:p,editor:e});M?(T=[M.matched.componentEl],b=[R({guideMatched:M,canvasView:S})]):(T=[],b=[])}if(h)if(E.opts.event.shiftKey)if(!m)m=y[0];else{const A=m,P=A.guide.x===void 0?"x":"y";(P==="x"&&(n==null?void 0:n.x)||P==="y"&&(n==null?void 0:n.y))&&(te({guideMatched:A,component:g,canvasView:S}),T=[A.matched.componentEl],b=[R({guideMatched:A,canvasView:S})])}else m=null;const D={id:G,type:G,component:g,componentView:l,originComponent:O,matchedComponents:T,originMatchedDistances:b};a.addSpot(D)},t=({enabled:p})=>{e.runCommand(oe,{enabled:p})},o=({type:p})=>{a.removeSpots({type:p})},f=()=>{o({type:ce}),o({type:ae}),o({type:le})},c=p=>{t({enabled:!0}),r(p),f()},_=p=>{r(p),f()},x=p=>{o({type:G}),s&&ne({snapping:i,props:p,editor:e}),t({enabled:!1})};e.on(ie,p=>{c(p),e.on(U,_);const g=()=>{x(p),e.off(U,_),e.off(I,g)};e.on(I,g)}),z({editor:e,licenseKey:d.licenseKey,plan:ee,pluginName:Z,cleanup:()=>t({enabled:!1})})},fe=J(de);module.exports=fe;
+"use strict";const V="app.grapesjs.com",k="app-stage.grapesjs.com",I=[V,k,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],X="license:check:start",j="license:check:end",F=()=>typeof window<"u",q=({isDev:e,isStage:a})=>`${e?"":`https://${a?k:V}`}/api`,J=()=>{const e=F()&&window.location.hostname;return!!e&&(I.includes(e)||I.some(a=>e.endsWith(a)))};function z(e){return typeof e=="function"}async function Q({path:e,baseApiUrl:a,method:u="GET",headers:l={},params:d,body:n}){const s=`${a||q({isDev:!1,isStage:!1})}${e}`,m={method:u,headers:{"Content-Type":"application/json",...l}};n&&(m.body=JSON.stringify(n));const h=d?new URLSearchParams(d).toString():"",t=h?`?${h}`:"",o=await fetch(`${s}${t}`,m);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var P=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(P||{});const W={[P.free]:0,[P.startup]:10,[P.business]:20,[P.enterprise]:30};function Z(e){const a=e;return a.init=u=>l=>e(l,u),a}const ee=e=>Z(e);async function te({editor:e,plan:a,pluginName:u,licenseKey:l,cleanup:d}){let n="",c=!1;const s=J(),m=t=>{console.warn("Cleanup plugin:",u,"Reason:",t),d()},h=(t={})=>{var E;const{error:o,sdkLicense:f}=t,i=(E=t.plan)==null?void 0:E.category;if(!(f||t.license)||o)m(o||"Invalid license");else if(i){const b=W[a],v=W[i];b>v&&m({pluginRequiredPlan:a,licensePlan:i})}};e.on(X,t=>{n=t==null?void 0:t.baseApiUrl,c=!0}),e.on(j,t=>{h(t)}),setTimeout(async()=>{if(!c){if(s)return;if(l){const t=await ne({licenseKey:l,pluginName:u,baseApiUrl:n});t&&h(t)}else m("The `licenseKey` option not provided")}},2e3)}async function ne(e){const{licenseKey:a,pluginName:u,baseApiUrl:l}=e;try{return(await Q({baseApiUrl:l,path:`/sdk/${a||"na"}`,method:"POST",params:{d:window.location.hostname,pn:u}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const se="canvasAbsoluteMode",oe=P.startup,ce=(e,a,u)=>{const l=u.enableAbsolute??(m=>m.hasAbsolute),n=(Array.isArray(a)?a:a?[a]:[...e.getSelectedAll()])[0];if(!n)return;const c=n.getEl();return{result:z(l)?l({component:n,hasAbsolute:!!c&&getComputedStyle(c).position==="absolute"}):!1,component:n,dmode:n.get("dmode")}};function B({guideMatched:e,canvasView:a}){var L;const u=e.guide.x===void 0?"y":"x";let l=0,d=0,n=0,c=0;const{guide:s,matched:m}=e,h=a.getElBoxRect(s.componentView.el),t=a.getElBoxRect(((L=m.componentView)==null?void 0:L.el)||m.componentEl),o=h.y,f=h.y+h.height,i=h.x,x=h.x+h.width,E=t.y,b=t.y+t.height,v=t.x,_=t.x+t.width,S=Math.max(0,o-b),p=Math.max(0,E-f),w=Math.max(0,i-_),A=Math.max(0,v-x),r=S>p,g=w>A,y=s.type;return u==="x"&&(y==="l"?(l=i,r?(d=b,n=S):(d=f,n=p)):y==="r"?(l=x,r?(d=b,n=S):(d=f,n=p)):y==="x"&&(l=i-(i-x)/2,r?(d=b,n=S):(d=f,n=p))),u==="y"&&(y==="t"?(d=o,g?(l=_,c=w):(l=x,c=A)):y==="b"?(d=f,g?(l=_,c=w):(l=x,c=A)):y==="y"&&(d=o-(o-f)/2,g?(l=_,c=w):(l=x,c=A))),{axis:u,x:l,y:d,width:c,height:n}}function ie({guideMatched:e,component:a,canvasView:u}){const l=e.guide.x===void 0?"x":"y",{guide:d,matched:n}=e,c=d.type,s=n.type,m=u.getElementPos(d.componentView.el).rect,h=u.getElementPos(n.componentView.el).rect;if(l==="x"){const t=m.height,o=h.top,f=h.top+h.height;let i=0;c==="t"?s==="t"?i=o-t:s==="b"?i=f-t:s==="y"&&(i=o-t-(o-f)/2):c==="b"?s==="t"?i=o-t*2:s==="b"?i=f-t*2:s==="y"&&(i=o-t*2-(o-f)/2):c==="y"&&(s==="t"?i=o-t*1.5:s==="b"?i=f-t*1.5:s==="y"&&(i=o-t*1.5-(o-f)/2)),a.addStyle({top:`${i-5}px`},{partial:!0})}if(l==="y"){const t=m.width,o=h.left,f=h.left+h.width;let i=0;c==="l"?s==="l"?i=o:s==="r"?i=f:s==="x"&&(i=o-(o-f)/2):c==="r"?s==="l"?i=o-t:s==="r"?i=f-t:s==="x"&&(i=o-t-(o-f)/2):c==="x"&&(s==="l"?i=o-t/2:s==="r"&&(i=f-t/2)),a.addStyle({left:`${i}px`},{partial:!0})}}function H({snapping:e,editor:a,props:u}){var R,O;const{command:l,guidesMatched:d}=u,n=u.component,c=n.getEl(),s=a.Canvas.getCanvasView(),{x:m,y:h}=e??{x:10,y:10},t=l.opts.event,o=t.clientX,f=t.clientY;if(!n.__lastSnappedPosition){const T=s.getElBoxRect(c),M=o-T.x,D=f-T.y;n.__lastSnappedPosition={left:T.x,top:T.y},n.__dragOffset={x:M,y:D}}const i=((R=n.__dragOffset)==null?void 0:R.x)||0,x=((O=n.__dragOffset)==null?void 0:O.y)||0,E=n.__lastSnappedPosition,b=o-E.left-i,v=f-E.top-x;let _=E.left,S=E.top;const p=d==null?void 0:d[0],w=(p==null?void 0:p.guide.type)==="l",A=(p==null?void 0:p.guide.type)==="x",r=(p==null?void 0:p.guide.type)==="r",g=(p==null?void 0:p.guide.type)==="t",y=(p==null?void 0:p.guide.type)==="b",L=(p==null?void 0:p.guide.type)==="y";if(p){const{x:T,y:M}=B({guideMatched:p,canvasView:s}),D=c.offsetWidth,G=c.offsetHeight;w?_=T:r?_=T-D:A?_=T-D/2:g?S=M:y?S=M-G:L&&(S=M-G/2),n.__lastSnappedGuideMatched=p}else Math.abs(b)>=m&&(_=Math.round((E.left+b)/m)*m,n.__lastSnappedGuideMatched=null),Math.abs(v)>=h&&(S=Math.round((E.top+v)/h)*h,n.__lastSnappedGuideMatched=null);return n.addStyle({left:`${_}px`,top:`${S}px`},{partial:!0}),n.__lastSnappedPosition={left:_,top:S},{x:_,y:S,guideMatched:n.__lastSnappedGuideMatched}}function ae({snapping:e,props:a,editor:u}){const{x:l,y:d}=H({snapping:e,props:a,editor:u}),n=a.component;n.addStyle({left:`${l}px`,top:`${d}px`}),delete n.__lastSnappedPosition,delete n.__lastSnappedGuideMatched}const le="core:component-drag",de="studio:setDragAbsolute",fe="dmode:start",Y="dmode:move",K="dmode:end",$="dragAbsolute",re="select",pe="hover",ue="spacing",he=function(e,a={}){const{Commands:u}=e,l=u.events,d=u.getConfig().defaultOptions??{},n=`${l.runBeforeCommand}tlb-move`;d[le]={run:r=>({...r,skipGuidesRender:!0})};const{snapping:c,locking:s,globalAbsolute:m=!0}=a;m&&e.setDragMode("absolute");const h=!!(c!=null&&c.x||c!=null&&c.y),t=!!(s!=null&&s.x||s!=null&&s.y),{Canvas:o}=e;let f=null;const i=r=>{const{component:g,guidesMatched:y,command:L}=r,R=g.view,O=e.Canvas.getCanvasView(),T=g.getEl();let M=y.map(C=>C.matched.componentEl),D=y.map(C=>B({guideMatched:C,canvasView:O}));if(h){const{guideMatched:C}=H({snapping:c,props:r,editor:e});C?(M=[C.matched.componentEl],D=[B({guideMatched:C,canvasView:O})]):(M=[],D=[])}if(t)if(L.opts.event.shiftKey)if(!f)f=y[0];else{const N=f,U=N.guide.x===void 0?"x":"y";(U==="x"&&(s==null?void 0:s.x)||U==="y"&&(s==null?void 0:s.y))&&(ie({guideMatched:N,component:g,canvasView:O}),M=[N.matched.componentEl],D=[B({guideMatched:N,canvasView:O})])}else f=null;const G={id:$,type:$,component:g,componentView:R,originComponent:T,matchedComponents:M,originMatchedDistances:D};o.addSpot(G)},x=({enabled:r})=>{e.runCommand(de,{enabled:r})},E=({type:r})=>{o.removeSpots({type:r})},b=()=>{E({type:re}),E({type:pe}),E({type:ue})},v=r=>{x({enabled:!0}),i(r),b()},_=r=>{i(r),b()},S=r=>{E({type:$}),h&&ae({snapping:c,props:r,editor:e}),x({enabled:!1})},A=[[fe,r=>{v(r),e.on(Y,_);const g=()=>{S(r),e.off(Y,_),e.off(K,g)};e.on(K,g)}],[n,r=>{if(m)return;const g=r.options.target,y=ce(e,g,a);y!=null&&y.result&&!y.dmode&&y.component.set({dmode:"absolute"})}]];A.forEach(([r,g])=>e.on(r,g)),te({editor:e,licenseKey:a.licenseKey,plan:oe,pluginName:se,cleanup:()=>{x({enabled:!1}),A.forEach(([r,g])=>e.off(r,g))}})},me=ee(he);module.exports=me;

package/dist/canvasAbsoluteMode/index.es.js

@@ -1,6 +1,6 @@
-const W = "app.grapesjs.com", Y = "app-stage.grapesjs.com", B = [
-  W,
-  Y,
+const V = "app.grapesjs.com", k = "app-stage.grapesjs.com", I = [
+  V,
+  k,
   "localhost",
   "127.0.0.1",
   ".local-credentialless.webcontainer.io",
@@ -9,214 +9,238 @@ const W = "app.grapesjs.com", Y = "app-stage.grapesjs.com", B = [
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], V = "license:check:start", k = "license:check:end", H = () => typeof window < "u", X = ({ isDev: e, isStage: d }) => `${e ? "" : `https://${d ? Y : W}`}/api`, j = () => {
-  const e = H() && window.location.hostname;
-  return !!e && (B.includes(e) || B.some((d) => e.endsWith(d)));
+], X = "license:check:start", j = "license:check:end", F = () => typeof window < "u", q = ({ isDev: e, isStage: a }) => `${e ? "" : `https://${a ? k : V}`}/api`, J = () => {
+  const e = F() && window.location.hostname;
+  return !!e && (I.includes(e) || I.some((a) => e.endsWith(a)));
 };
-async function q({
+function z(e) {
+  return typeof e == "function";
+}
+async function Q({
   path: e,
-  baseApiUrl: d,
+  baseApiUrl: a,
   method: u = "GET",
-  headers: i = {},
-  params: n,
-  body: s
+  headers: l = {},
+  params: d,
+  body: n
 }) {
-  const a = `${d || X({ isDev: !1, isStage: !1 })}${e}`, m = {
+  const o = `${a || q({ isDev: !1, isStage: !1 })}${e}`, m = {
     method: u,
     headers: {
       "Content-Type": "application/json",
-      ...i
+      ...l
     }
   };
-  s && (m.body = JSON.stringify(s));
-  const r = n ? new URLSearchParams(n).toString() : "", t = r ? `?${r}` : "", o = await fetch(`${a}${t}`, m);
-  if (!o.ok)
-    throw new Error(`HTTP error! status: ${o.status}`);
-  return o.json();
+  n && (m.body = JSON.stringify(n));
+  const h = d ? new URLSearchParams(d).toString() : "", t = h ? `?${h}` : "", s = await fetch(`${o}${t}`, m);
+  if (!s.ok)
+    throw new Error(`HTTP error! status: ${s.status}`);
+  return s.json();
 }
-var L = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(L || {});
-const $ = {
-  [L.free]: 0,
-  [L.startup]: 10,
-  [L.business]: 20,
-  [L.enterprise]: 30
+var P = /* @__PURE__ */ ((e) => (e.free = "free", e.startup = "startup", e.business = "business", e.enterprise = "enterprise", e))(P || {});
+const W = {
+  [P.free]: 0,
+  [P.startup]: 10,
+  [P.business]: 20,
+  [P.enterprise]: 30
 };
-function F(e) {
-  const d = e;
-  return d.init = (u) => (i) => e(i, u), d;
+function Z(e) {
+  const a = e;
+  return a.init = (u) => (l) => e(l, u), a;
 }
-const J = (e) => /* @__PURE__ */ F(e);
-async function z({
+const ee = (e) => /* @__PURE__ */ Z(e);
+async function te({
   editor: e,
-  plan: d,
+  plan: a,
   pluginName: u,
-  licenseKey: i,
-  cleanup: n
+  licenseKey: l,
+  cleanup: d
 }) {
-  let s = "", h = !1;
-  const a = j(), m = (t) => {
-    console.warn("Cleanup plugin:", u, "Reason:", t), n();
-  }, r = (t = {}) => {
-    var x;
-    const { error: o, sdkLicense: f } = t, c = (x = t.plan) == null ? void 0 : x.category;
-    if (!(f || t.license) || o)
-      m(o || "Invalid license");
-    else if (c) {
-      const p = $[d], g = $[c];
-      p > g && m({ pluginRequiredPlan: d, licensePlan: c });
+  let n = "", c = !1;
+  const o = J(), m = (t) => {
+    console.warn("Cleanup plugin:", u, "Reason:", t), d();
+  }, h = (t = {}) => {
+    var E;
+    const { error: s, sdkLicense: f } = t, i = (E = t.plan) == null ? void 0 : E.category;
+    if (!(f || t.license) || s)
+      m(s || "Invalid license");
+    else if (i) {
+      const b = W[a], v = W[i];
+      b > v && m({ pluginRequiredPlan: a, licensePlan: i });
     }
   };
-  e.on(V, (t) => {
-    s = t == null ? void 0 : t.baseApiUrl, h = !0;
-  }), e.on(k, (t) => {
-    r(t);
+  e.on(X, (t) => {
+    n = t == null ? void 0 : t.baseApiUrl, c = !0;
+  }), e.on(j, (t) => {
+    h(t);
   }), setTimeout(async () => {
-    if (!h) {
-      if (a) return;
-      if (i) {
-        const t = await Q({ licenseKey: i, pluginName: u, baseApiUrl: s });
-        t && r(t);
+    if (!c) {
+      if (o) return;
+      if (l) {
+        const t = await ne({ licenseKey: l, pluginName: u, baseApiUrl: n });
+        t && h(t);
       } else
         m("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function Q(e) {
-  const { licenseKey: d, pluginName: u, baseApiUrl: i } = e;
+async function ne(e) {
+  const { licenseKey: a, pluginName: u, baseApiUrl: l } = e;
   try {
-    return (await q({
-      baseApiUrl: i,
-      path: `/sdk/${d || "na"}`,
+    return (await Q({
+      baseApiUrl: l,
+      path: `/sdk/${a || "na"}`,
       method: "POST",
       params: {
         d: window.location.hostname,
         pn: u
       }
     })).result || {};
-  } catch (n) {
-    return console.error("Error during SDK license check:", n), !1;
+  } catch (d) {
+    return console.error("Error during SDK license check:", d), !1;
   }
 }
-const Z = "canvasAbsoluteMode", ee = L.startup;
-function R({
+const oe = "canvasAbsoluteMode", se = P.startup, ce = (e, a, u) => {
+  const l = u.enableAbsolute ?? ((m) => m.hasAbsolute), n = (Array.isArray(a) ? a : a ? [a] : [...e.getSelectedAll()])[0];
+  if (!n) return;
+  const c = n.getEl();
+  return {
+    result: z(l) ? l({ component: n, hasAbsolute: !!c && getComputedStyle(c).position === "absolute" }) : !1,
+    component: n,
+    dmode: n.get("dmode")
+  };
+};
+function B({
   guideMatched: e,
-  canvasView: d
+  canvasView: a
 }) {
+  var L;
   const u = e.guide.x === void 0 ? "y" : "x";
-  let i = 0, n = 0, s = 0, h = 0;
-  const { guide: a, matched: m } = e, r = d.getElBoxRect(a.componentView.el), t = d.getElBoxRect(m.componentView.el), o = r.y, f = r.y + r.height, c = r.x, _ = r.x + r.width, x = t.y, p = t.y + t.height, g = t.x, y = t.x + t.width, E = Math.max(0, o - p), l = Math.max(0, x - f), S = Math.max(0, c - y), O = Math.max(0, g - _), T = E > l, b = S > O, D = a.type;
-  return u === "x" && (D === "l" ? (i = c, T ? (n = p, s = E) : (n = f, s = l)) : D === "r" ? (i = _, T ? (n = p, s = E) : (n = f, s = l)) : D === "x" && (i = c - (c - _) / 2, T ? (n = p, s = E) : (n = f, s = l))), u === "y" && (D === "t" ? (n = o, b ? (i = y, h = S) : (i = _, h = O)) : D === "b" ? (n = f, b ? (i = y, h = S) : (i = _, h = O)) : D === "y" && (n = o - (o - f) / 2, b ? (i = y, h = S) : (i = _, h = O))), { axis: u, x: i, y: n, width: h, height: s };
+  let l = 0, d = 0, n = 0, c = 0;
+  const { guide: o, matched: m } = e, h = a.getElBoxRect(o.componentView.el), t = a.getElBoxRect(((L = m.componentView) == null ? void 0 : L.el) || m.componentEl), s = h.y, f = h.y + h.height, i = h.x, x = h.x + h.width, E = t.y, b = t.y + t.height, v = t.x, _ = t.x + t.width, S = Math.max(0, s - b), p = Math.max(0, E - f), w = Math.max(0, i - _), A = Math.max(0, v - x), r = S > p, g = w > A, y = o.type;
+  return u === "x" && (y === "l" ? (l = i, r ? (d = b, n = S) : (d = f, n = p)) : y === "r" ? (l = x, r ? (d = b, n = S) : (d = f, n = p)) : y === "x" && (l = i - (i - x) / 2, r ? (d = b, n = S) : (d = f, n = p))), u === "y" && (y === "t" ? (d = s, g ? (l = _, c = w) : (l = x, c = A)) : y === "b" ? (d = f, g ? (l = _, c = w) : (l = x, c = A)) : y === "y" && (d = s - (s - f) / 2, g ? (l = _, c = w) : (l = x, c = A))), { axis: u, x: l, y: d, width: c, height: n };
 }
-function te({
+function ie({
   guideMatched: e,
-  component: d,
+  component: a,
   canvasView: u
 }) {
-  const i = e.guide.x === void 0 ? "x" : "y", { guide: n, matched: s } = e, h = n.type, a = s.type, m = u.getElementPos(n.componentView.el).rect, r = u.getElementPos(s.componentView.el).rect;
-  if (i === "x") {
-    const t = m.height, o = r.top, f = r.top + r.height;
-    let c = 0;
-    h === "t" ? a === "t" ? c = o - t : a === "b" ? c = f - t : a === "y" && (c = o - t - (o - f) / 2) : h === "b" ? a === "t" ? c = o - t * 2 : a === "b" ? c = f - t * 2 : a === "y" && (c = o - t * 2 - (o - f) / 2) : h === "y" && (a === "t" ? c = o - t * 1.5 : a === "b" ? c = f - t * 1.5 : a === "y" && (c = o - t * 1.5 - (o - f) / 2)), d.addStyle({ top: `${c - 5}px` }, { partial: !0 });
+  const l = e.guide.x === void 0 ? "x" : "y", { guide: d, matched: n } = e, c = d.type, o = n.type, m = u.getElementPos(d.componentView.el).rect, h = u.getElementPos(n.componentView.el).rect;
+  if (l === "x") {
+    const t = m.height, s = h.top, f = h.top + h.height;
+    let i = 0;
+    c === "t" ? o === "t" ? i = s - t : o === "b" ? i = f - t : o === "y" && (i = s - t - (s - f) / 2) : c === "b" ? o === "t" ? i = s - t * 2 : o === "b" ? i = f - t * 2 : o === "y" && (i = s - t * 2 - (s - f) / 2) : c === "y" && (o === "t" ? i = s - t * 1.5 : o === "b" ? i = f - t * 1.5 : o === "y" && (i = s - t * 1.5 - (s - f) / 2)), a.addStyle({ top: `${i - 5}px` }, { partial: !0 });
   }
-  if (i === "y") {
-    const t = m.width, o = r.left, f = r.left + r.width;
-    let c = 0;
-    h === "l" ? a === "l" ? c = o : a === "r" ? c = f : a === "x" && (c = o - (o - f) / 2) : h === "r" ? a === "l" ? c = o - t : a === "r" ? c = f - t : a === "x" && (c = o - t - (o - f) / 2) : h === "x" && (a === "l" ? c = o - t / 2 : a === "r" && (c = f - t / 2)), d.addStyle({ left: `${c}px` }, { partial: !0 });
+  if (l === "y") {
+    const t = m.width, s = h.left, f = h.left + h.width;
+    let i = 0;
+    c === "l" ? o === "l" ? i = s : o === "r" ? i = f : o === "x" && (i = s - (s - f) / 2) : c === "r" ? o === "l" ? i = s - t : o === "r" ? i = f - t : o === "x" && (i = s - t - (s - f) / 2) : c === "x" && (o === "l" ? i = s - t / 2 : o === "r" && (i = f - t / 2)), a.addStyle({ left: `${i}px` }, { partial: !0 });
   }
 }
-function K({
+function H({
   snapping: e,
-  editor: d,
+  editor: a,
   props: u
 }) {
-  var A, P;
-  const { command: i, guidesMatched: n } = u, s = u.component, h = s.getEl(), a = d.Canvas.getCanvasView(), { x: m, y: r } = e ?? { x: 10, y: 10 }, t = i.opts.event, o = t.clientX, f = t.clientY;
-  if (!s.__lastSnappedPosition) {
-    const w = a.getElBoxRect(h), v = o - w.x, C = f - w.y;
-    s.__lastSnappedPosition = { left: w.x, top: w.y }, s.__dragOffset = { x: v, y: C };
+  var R, O;
+  const { command: l, guidesMatched: d } = u, n = u.component, c = n.getEl(), o = a.Canvas.getCanvasView(), { x: m, y: h } = e ?? { x: 10, y: 10 }, t = l.opts.event, s = t.clientX, f = t.clientY;
+  if (!n.__lastSnappedPosition) {
+    const T = o.getElBoxRect(c), M = s - T.x, D = f - T.y;
+    n.__lastSnappedPosition = { left: T.x, top: T.y }, n.__dragOffset = { x: M, y: D };
   }
-  const c = ((A = s.__dragOffset) == null ? void 0 : A.x) || 0, _ = ((P = s.__dragOffset) == null ? void 0 : P.y) || 0, x = s.__lastSnappedPosition, p = o - x.left - c, g = f - x.top - _;
-  let y = x.left, E = x.top;
-  const l = n == null ? void 0 : n[0], S = (l == null ? void 0 : l.guide.type) === "l", O = (l == null ? void 0 : l.guide.type) === "x", T = (l == null ? void 0 : l.guide.type) === "r", b = (l == null ? void 0 : l.guide.type) === "t", D = (l == null ? void 0 : l.guide.type) === "b", M = (l == null ? void 0 : l.guide.type) === "y";
-  if (l) {
-    const { x: w, y: v } = R({ guideMatched: l, canvasView: a }), C = h.offsetWidth, N = h.offsetHeight;
-    S ? y = w : T ? y = w - C : O ? y = w - C / 2 : b ? E = v : D ? E = v - N : M && (E = v - N / 2), s.__lastSnappedGuideMatched = l;
+  const i = ((R = n.__dragOffset) == null ? void 0 : R.x) || 0, x = ((O = n.__dragOffset) == null ? void 0 : O.y) || 0, E = n.__lastSnappedPosition, b = s - E.left - i, v = f - E.top - x;
+  let _ = E.left, S = E.top;
+  const p = d == null ? void 0 : d[0], w = (p == null ? void 0 : p.guide.type) === "l", A = (p == null ? void 0 : p.guide.type) === "x", r = (p == null ? void 0 : p.guide.type) === "r", g = (p == null ? void 0 : p.guide.type) === "t", y = (p == null ? void 0 : p.guide.type) === "b", L = (p == null ? void 0 : p.guide.type) === "y";
+  if (p) {
+    const { x: T, y: M } = B({ guideMatched: p, canvasView: o }), D = c.offsetWidth, G = c.offsetHeight;
+    w ? _ = T : r ? _ = T - D : A ? _ = T - D / 2 : g ? S = M : y ? S = M - G : L && (S = M - G / 2), n.__lastSnappedGuideMatched = p;
   } else
-    Math.abs(p) >= m && (y = Math.round((x.left + p) / m) * m, s.__lastSnappedGuideMatched = null), Math.abs(g) >= r && (E = Math.round((x.top + g) / r) * r, s.__lastSnappedGuideMatched = null);
-  return s.addStyle({ left: `${y}px`, top: `${E}px` }, { partial: !0 }), s.__lastSnappedPosition = { left: y, top: E }, { x: y, y: E, guideMatched: s.__lastSnappedGuideMatched };
+    Math.abs(b) >= m && (_ = Math.round((E.left + b) / m) * m, n.__lastSnappedGuideMatched = null), Math.abs(v) >= h && (S = Math.round((E.top + v) / h) * h, n.__lastSnappedGuideMatched = null);
+  return n.addStyle({ left: `${_}px`, top: `${S}px` }, { partial: !0 }), n.__lastSnappedPosition = { left: _, top: S }, { x: _, y: S, guideMatched: n.__lastSnappedGuideMatched };
 }
-function ne({
+function ae({
   snapping: e,
-  props: d,
+  props: a,
   editor: u
 }) {
-  const { x: i, y: n } = K({ snapping: e, props: d, editor: u }), s = d.component;
-  s.addStyle({ left: `${i}px`, top: `${n}px` }), delete s.__lastSnappedPosition, delete s.__lastSnappedGuideMatched;
+  const { x: l, y: d } = H({ snapping: e, props: a, editor: u }), n = a.component;
+  n.addStyle({ left: `${l}px`, top: `${d}px` }), delete n.__lastSnappedPosition, delete n.__lastSnappedGuideMatched;
 }
-const se = "core:component-drag", oe = "studio:setDragAbsolute", ie = "dmode:start", U = "dmode:move", I = "dmode:end", G = "dragAbsolute", ce = "select", ae = "hover", le = "spacing", de = function(e, d = {}) {
-  const u = e.Commands.getConfig().defaultOptions ?? {};
-  u[se] = {
-    run: (p) => ({
-      ...p,
+const le = "core:component-drag", de = "studio:setDragAbsolute", fe = "dmode:start", Y = "dmode:move", K = "dmode:end", $ = "dragAbsolute", re = "select", pe = "hover", ue = "spacing", he = function(e, a = {}) {
+  const { Commands: u } = e, l = u.events, d = u.getConfig().defaultOptions ?? {}, n = `${l.runBeforeCommand}tlb-move`;
+  d[le] = {
+    run: (r) => ({
+      ...r,
       skipGuidesRender: !0
     })
   };
-  const { snapping: i, locking: n } = d, s = !!(i != null && i.x || i != null && i.y), h = !!(n != null && n.x || n != null && n.y), { Canvas: a } = e;
-  let m = null;
-  const r = (p) => {
-    const { component: g, guidesMatched: y, command: E } = p, l = g.view, S = e.Canvas.getCanvasView(), O = g.getEl();
-    let T = y.map((M) => M.matched.componentEl), b = y.map((M) => R({ guideMatched: M, canvasView: S }));
-    if (s) {
-      const { guideMatched: M } = K({ snapping: i, props: p, editor: e });
-      M ? (T = [M.matched.componentEl], b = [R({ guideMatched: M, canvasView: S })]) : (T = [], b = []);
+  const { snapping: c, locking: o, globalAbsolute: m = !0 } = a;
+  m && e.setDragMode("absolute");
+  const h = !!(c != null && c.x || c != null && c.y), t = !!(o != null && o.x || o != null && o.y), { Canvas: s } = e;
+  let f = null;
+  const i = (r) => {
+    const { component: g, guidesMatched: y, command: L } = r, R = g.view, O = e.Canvas.getCanvasView(), T = g.getEl();
+    let M = y.map((C) => C.matched.componentEl), D = y.map((C) => B({ guideMatched: C, canvasView: O }));
+    if (h) {
+      const { guideMatched: C } = H({ snapping: c, props: r, editor: e });
+      C ? (M = [C.matched.componentEl], D = [B({ guideMatched: C, canvasView: O })]) : (M = [], D = []);
     }
-    if (h)
-      if (E.opts.event.shiftKey)
-        if (!m)
-          m = y[0];
+    if (t)
+      if (L.opts.event.shiftKey)
+        if (!f)
+          f = y[0];
         else {
-          const A = m, P = A.guide.x === void 0 ? "x" : "y";
-          (P === "x" && (n == null ? void 0 : n.x) || P === "y" && (n == null ? void 0 : n.y)) && (te({ guideMatched: A, component: g, canvasView: S }), T = [A.matched.componentEl], b = [R({ guideMatched: A, canvasView: S })]);
+          const N = f, U = N.guide.x === void 0 ? "x" : "y";
+          (U === "x" && (o == null ? void 0 : o.x) || U === "y" && (o == null ? void 0 : o.y)) && (ie({ guideMatched: N, component: g, canvasView: O }), M = [N.matched.componentEl], D = [B({ guideMatched: N, canvasView: O })]);
         }
       else
-        m = null;
-    const D = {
-      id: G,
-      type: G,
+        f = null;
+    const G = {
+      id: $,
+      type: $,
       component: g,
-      componentView: l,
-      originComponent: O,
-      matchedComponents: T,
-      originMatchedDistances: b
+      componentView: R,
+      originComponent: T,
+      matchedComponents: M,
+      originMatchedDistances: D
     };
-    a.addSpot(D);
-  }, t = ({ enabled: p }) => {
-    e.runCommand(oe, { enabled: p });
-  }, o = ({ type: p }) => {
-    a.removeSpots({ type: p });
-  }, f = () => {
-    o({ type: ce }), o({ type: ae }), o({ type: le });
-  }, c = (p) => {
-    t({ enabled: !0 }), r(p), f();
-  }, _ = (p) => {
-    r(p), f();
-  }, x = (p) => {
-    o({ type: G }), s && ne({ snapping: i, props: p, editor: e }), t({ enabled: !1 });
-  };
-  e.on(ie, (p) => {
-    c(p), e.on(U, _);
-    const g = () => {
-      x(p), e.off(U, _), e.off(I, g);
-    };
-    e.on(I, g);
-  }), z({
+    s.addSpot(G);
+  }, x = ({ enabled: r }) => {
+    e.runCommand(de, { enabled: r });
+  }, E = ({ type: r }) => {
+    s.removeSpots({ type: r });
+  }, b = () => {
+    E({ type: re }), E({ type: pe }), E({ type: ue });
+  }, v = (r) => {
+    x({ enabled: !0 }), i(r), b();
+  }, _ = (r) => {
+    i(r), b();
+  }, S = (r) => {
+    E({ type: $ }), h && ae({ snapping: c, props: r, editor: e }), x({ enabled: !1 });
+  }, A = [
+    [fe, (r) => {
+      v(r), e.on(Y, _);
+      const g = () => {
+        S(r), e.off(Y, _), e.off(K, g);
+      };
+      e.on(K, g);
+    }],
+    [n, (r) => {
+      if (m) return;
+      const g = r.options.target, y = ce(e, g, a);
+      y != null && y.result && !y.dmode && y.component.set({ dmode: "absolute" });
+    }]
+  ];
+  A.forEach(([r, g]) => e.on(r, g)), te({
     editor: e,
-    licenseKey: d.licenseKey,
-    plan: ee,
-    pluginName: Z,
-    cleanup: () => t({ enabled: !1 })
+    licenseKey: a.licenseKey,
+    plan: se,
+    pluginName: oe,
+    cleanup: () => {
+      x({ enabled: !1 }), A.forEach(([r, g]) => e.off(r, g));
+    }
   });
-}, fe = J(de);
+}, ge = ee(he);
 export {
-  fe as default
+  ge as default
 };

package/dist/canvasAbsoluteMode/index.umd.js

@@ -1 +1 @@
-(function(P,v){typeof exports=="object"&&typeof module<"u"?module.exports=v():typeof define=="function"&&define.amd?define(v):(P=typeof globalThis<"u"?globalThis:P||self,P.StudioSdkPlugins_canvasAbsoluteMode=v())})(this,function(){"use strict";const P="app.grapesjs.com",v="app-stage.grapesjs.com",$=[P,v,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],K="license:check:start",V="license:check:end",H=()=>typeof window<"u",X=({isDev:e,isStage:d})=>`${e?"":`https://${d?v:P}`}/api`,j=()=>{const e=H()&&window.location.hostname;return!!e&&($.includes(e)||$.some(d=>e.endsWith(d)))};async function q({path:e,baseApiUrl:d,method:h="GET",headers:i={},params:n,body:s}){const a=`${d||X({isDev:!1,isStage:!1})}${e}`,m={method:h,headers:{"Content-Type":"application/json",...i}};s&&(m.body=JSON.stringify(s));const r=n?new URLSearchParams(n).toString():"",t=r?`?${r}`:"",o=await fetch(`${a}${t}`,m);if(!o.ok)throw new Error(`HTTP error! status: ${o.status}`);return o.json()}var L=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(L||{});const U={[L.free]:0,[L.startup]:10,[L.business]:20,[L.enterprise]:30};function F(e){const d=e;return d.init=h=>i=>e(i,h),d}const J=e=>F(e);async function z({editor:e,plan:d,pluginName:h,licenseKey:i,cleanup:n}){let s="",u=!1;const a=j(),m=t=>{console.warn("Cleanup plugin:",h,"Reason:",t),n()},r=(t={})=>{var _;const{error:o,sdkLicense:f}=t,c=(_=t.plan)==null?void 0:_.category;if(!(f||t.license)||o)m(o||"Invalid license");else if(c){const p=U[d],g=U[c];p>g&&m({pluginRequiredPlan:d,licensePlan:c})}};e.on(K,t=>{s=t==null?void 0:t.baseApiUrl,u=!0}),e.on(V,t=>{r(t)}),setTimeout(async()=>{if(!u){if(a)return;if(i){const t=await Q({licenseKey:i,pluginName:h,baseApiUrl:s});t&&r(t)}else m("The `licenseKey` option not provided")}},2e3)}async function Q(e){const{licenseKey:d,pluginName:h,baseApiUrl:i}=e;try{return(await q({baseApiUrl:i,path:`/sdk/${d||"na"}`,method:"POST",params:{d:window.location.hostname,pn:h}})).result||{}}catch(n){return console.error("Error during SDK license check:",n),!1}}const Z="canvasAbsoluteMode",ee=L.startup;function G({guideMatched:e,canvasView:d}){const h=e.guide.x===void 0?"y":"x";let i=0,n=0,s=0,u=0;const{guide:a,matched:m}=e,r=d.getElBoxRect(a.componentView.el),t=d.getElBoxRect(m.componentView.el),o=r.y,f=r.y+r.height,c=r.x,x=r.x+r.width,_=t.y,p=t.y+t.height,g=t.x,y=t.x+t.width,E=Math.max(0,o-p),l=Math.max(0,_-f),S=Math.max(0,c-y),O=Math.max(0,g-x),T=E>l,b=S>O,M=a.type;return h==="x"&&(M==="l"?(i=c,T?(n=p,s=E):(n=f,s=l)):M==="r"?(i=x,T?(n=p,s=E):(n=f,s=l)):M==="x"&&(i=c-(c-x)/2,T?(n=p,s=E):(n=f,s=l))),h==="y"&&(M==="t"?(n=o,b?(i=y,u=S):(i=x,u=O)):M==="b"?(n=f,b?(i=y,u=S):(i=x,u=O)):M==="y"&&(n=o-(o-f)/2,b?(i=y,u=S):(i=x,u=O))),{axis:h,x:i,y:n,width:u,height:s}}function te({guideMatched:e,component:d,canvasView:h}){const i=e.guide.x===void 0?"x":"y",{guide:n,matched:s}=e,u=n.type,a=s.type,m=h.getElementPos(n.componentView.el).rect,r=h.getElementPos(s.componentView.el).rect;if(i==="x"){const t=m.height,o=r.top,f=r.top+r.height;let c=0;u==="t"?a==="t"?c=o-t:a==="b"?c=f-t:a==="y"&&(c=o-t-(o-f)/2):u==="b"?a==="t"?c=o-t*2:a==="b"?c=f-t*2:a==="y"&&(c=o-t*2-(o-f)/2):u==="y"&&(a==="t"?c=o-t*1.5:a==="b"?c=f-t*1.5:a==="y"&&(c=o-t*1.5-(o-f)/2)),d.addStyle({top:`${c-5}px`},{partial:!0})}if(i==="y"){const t=m.width,o=r.left,f=r.left+r.width;let c=0;u==="l"?a==="l"?c=o:a==="r"?c=f:a==="x"&&(c=o-(o-f)/2):u==="r"?a==="l"?c=o-t:a==="r"?c=f-t:a==="x"&&(c=o-t-(o-f)/2):u==="x"&&(a==="l"?c=o-t/2:a==="r"&&(c=f-t/2)),d.addStyle({left:`${c}px`},{partial:!0})}}function I({snapping:e,editor:d,props:h}){var A,C;const{command:i,guidesMatched:n}=h,s=h.component,u=s.getEl(),a=d.Canvas.getCanvasView(),{x:m,y:r}=e??{x:10,y:10},t=i.opts.event,o=t.clientX,f=t.clientY;if(!s.__lastSnappedPosition){const w=a.getElBoxRect(u),R=o-w.x,N=f-w.y;s.__lastSnappedPosition={left:w.x,top:w.y},s.__dragOffset={x:R,y:N}}const c=((A=s.__dragOffset)==null?void 0:A.x)||0,x=((C=s.__dragOffset)==null?void 0:C.y)||0,_=s.__lastSnappedPosition,p=o-_.left-c,g=f-_.top-x;let y=_.left,E=_.top;const l=n==null?void 0:n[0],S=(l==null?void 0:l.guide.type)==="l",O=(l==null?void 0:l.guide.type)==="x",T=(l==null?void 0:l.guide.type)==="r",b=(l==null?void 0:l.guide.type)==="t",M=(l==null?void 0:l.guide.type)==="b",D=(l==null?void 0:l.guide.type)==="y";if(l){const{x:w,y:R}=G({guideMatched:l,canvasView:a}),N=u.offsetWidth,k=u.offsetHeight;S?y=w:T?y=w-N:O?y=w-N/2:b?E=R:M?E=R-k:D&&(E=R-k/2),s.__lastSnappedGuideMatched=l}else Math.abs(p)>=m&&(y=Math.round((_.left+p)/m)*m,s.__lastSnappedGuideMatched=null),Math.abs(g)>=r&&(E=Math.round((_.top+g)/r)*r,s.__lastSnappedGuideMatched=null);return s.addStyle({left:`${y}px`,top:`${E}px`},{partial:!0}),s.__lastSnappedPosition={left:y,top:E},{x:y,y:E,guideMatched:s.__lastSnappedGuideMatched}}function ne({snapping:e,props:d,editor:h}){const{x:i,y:n}=I({snapping:e,props:d,editor:h}),s=d.component;s.addStyle({left:`${i}px`,top:`${n}px`}),delete s.__lastSnappedPosition,delete s.__lastSnappedGuideMatched}const se="core:component-drag",oe="studio:setDragAbsolute",ie="dmode:start",W="dmode:move",Y="dmode:end",B="dragAbsolute",ce="select",ae="hover",le="spacing";return J(function(e,d={}){const h=e.Commands.getConfig().defaultOptions??{};h[se]={run:p=>({...p,skipGuidesRender:!0})};const{snapping:i,locking:n}=d,s=!!(i!=null&&i.x||i!=null&&i.y),u=!!(n!=null&&n.x||n!=null&&n.y),{Canvas:a}=e;let m=null;const r=p=>{const{component:g,guidesMatched:y,command:E}=p,l=g.view,S=e.Canvas.getCanvasView(),O=g.getEl();let T=y.map(D=>D.matched.componentEl),b=y.map(D=>G({guideMatched:D,canvasView:S}));if(s){const{guideMatched:D}=I({snapping:i,props:p,editor:e});D?(T=[D.matched.componentEl],b=[G({guideMatched:D,canvasView:S})]):(T=[],b=[])}if(u)if(E.opts.event.shiftKey)if(!m)m=y[0];else{const A=m,C=A.guide.x===void 0?"x":"y";(C==="x"&&(n==null?void 0:n.x)||C==="y"&&(n==null?void 0:n.y))&&(te({guideMatched:A,component:g,canvasView:S}),T=[A.matched.componentEl],b=[G({guideMatched:A,canvasView:S})])}else m=null;const M={id:B,type:B,component:g,componentView:l,originComponent:O,matchedComponents:T,originMatchedDistances:b};a.addSpot(M)},t=({enabled:p})=>{e.runCommand(oe,{enabled:p})},o=({type:p})=>{a.removeSpots({type:p})},f=()=>{o({type:ce}),o({type:ae}),o({type:le})},c=p=>{t({enabled:!0}),r(p),f()},x=p=>{r(p),f()},_=p=>{o({type:B}),s&&ne({snapping:i,props:p,editor:e}),t({enabled:!1})};e.on(ie,p=>{c(p),e.on(W,x);const g=()=>{_(p),e.off(W,x),e.off(Y,g)};e.on(Y,g)}),z({editor:e,licenseKey:d.licenseKey,plan:ee,pluginName:Z,cleanup:()=>t({enabled:!1})})})});
+(function(P,L){typeof exports=="object"&&typeof module<"u"?module.exports=L():typeof define=="function"&&define.amd?define(L):(P=typeof globalThis<"u"?globalThis:P||self,P.StudioSdkPlugins_canvasAbsoluteMode=L())})(this,function(){"use strict";const P="app.grapesjs.com",L="app-stage.grapesjs.com",W=[P,L,"localhost","127.0.0.1",".local-credentialless.webcontainer.io",".local.webcontainer.io","-sandpack.codesandbox.io"],X="license:check:start",j="license:check:end",F=()=>typeof window<"u",q=({isDev:e,isStage:l})=>`${e?"":`https://${l?L:P}`}/api`,J=()=>{const e=F()&&window.location.hostname;return!!e&&(W.includes(e)||W.some(l=>e.endsWith(l)))};function z(e){return typeof e=="function"}async function Q({path:e,baseApiUrl:l,method:u="GET",headers:a={},params:d,body:n}){const o=`${l||q({isDev:!1,isStage:!1})}${e}`,m={method:u,headers:{"Content-Type":"application/json",...a}};n&&(m.body=JSON.stringify(n));const h=d?new URLSearchParams(d).toString():"",t=h?`?${h}`:"",s=await fetch(`${o}${t}`,m);if(!s.ok)throw new Error(`HTTP error! status: ${s.status}`);return s.json()}var R=(e=>(e.free="free",e.startup="startup",e.business="business",e.enterprise="enterprise",e))(R||{});const Y={[R.free]:0,[R.startup]:10,[R.business]:20,[R.enterprise]:30};function Z(e){const l=e;return l.init=u=>a=>e(a,u),l}const ee=e=>Z(e);async function te({editor:e,plan:l,pluginName:u,licenseKey:a,cleanup:d}){let n="",i=!1;const o=J(),m=t=>{console.warn("Cleanup plugin:",u,"Reason:",t),d()},h=(t={})=>{var E;const{error:s,sdkLicense:f}=t,c=(E=t.plan)==null?void 0:E.category;if(!(f||t.license)||s)m(s||"Invalid license");else if(c){const b=Y[l],v=Y[c];b>v&&m({pluginRequiredPlan:l,licensePlan:c})}};e.on(X,t=>{n=t==null?void 0:t.baseApiUrl,i=!0}),e.on(j,t=>{h(t)}),setTimeout(async()=>{if(!i){if(o)return;if(a){const t=await ne({licenseKey:a,pluginName:u,baseApiUrl:n});t&&h(t)}else m("The `licenseKey` option not provided")}},2e3)}async function ne(e){const{licenseKey:l,pluginName:u,baseApiUrl:a}=e;try{return(await Q({baseApiUrl:a,path:`/sdk/${l||"na"}`,method:"POST",params:{d:window.location.hostname,pn:u}})).result||{}}catch(d){return console.error("Error during SDK license check:",d),!1}}const oe="canvasAbsoluteMode",se=R.startup,ie=(e,l,u)=>{const a=u.enableAbsolute??(m=>m.hasAbsolute),n=(Array.isArray(l)?l:l?[l]:[...e.getSelectedAll()])[0];if(!n)return;const i=n.getEl();return{result:z(a)?a({component:n,hasAbsolute:!!i&&getComputedStyle(i).position==="absolute"}):!1,component:n,dmode:n.get("dmode")}};function N({guideMatched:e,canvasView:l}){var G;const u=e.guide.x===void 0?"y":"x";let a=0,d=0,n=0,i=0;const{guide:o,matched:m}=e,h=l.getElBoxRect(o.componentView.el),t=l.getElBoxRect(((G=m.componentView)==null?void 0:G.el)||m.componentEl),s=h.y,f=h.y+h.height,c=h.x,S=h.x+h.width,E=t.y,b=t.y+t.height,v=t.x,x=t.x+t.width,_=Math.max(0,s-b),p=Math.max(0,E-f),w=Math.max(0,c-x),A=Math.max(0,v-S),r=_>p,g=w>A,y=o.type;return u==="x"&&(y==="l"?(a=c,r?(d=b,n=_):(d=f,n=p)):y==="r"?(a=S,r?(d=b,n=_):(d=f,n=p)):y==="x"&&(a=c-(c-S)/2,r?(d=b,n=_):(d=f,n=p))),u==="y"&&(y==="t"?(d=s,g?(a=x,i=w):(a=S,i=A)):y==="b"?(d=f,g?(a=x,i=w):(a=S,i=A)):y==="y"&&(d=s-(s-f)/2,g?(a=x,i=w):(a=S,i=A))),{axis:u,x:a,y:d,width:i,height:n}}function ce({guideMatched:e,component:l,canvasView:u}){const a=e.guide.x===void 0?"x":"y",{guide:d,matched:n}=e,i=d.type,o=n.type,m=u.getElementPos(d.componentView.el).rect,h=u.getElementPos(n.componentView.el).rect;if(a==="x"){const t=m.height,s=h.top,f=h.top+h.height;let c=0;i==="t"?o==="t"?c=s-t:o==="b"?c=f-t:o==="y"&&(c=s-t-(s-f)/2):i==="b"?o==="t"?c=s-t*2:o==="b"?c=f-t*2:o==="y"&&(c=s-t*2-(s-f)/2):i==="y"&&(o==="t"?c=s-t*1.5:o==="b"?c=f-t*1.5:o==="y"&&(c=s-t*1.5-(s-f)/2)),l.addStyle({top:`${c-5}px`},{partial:!0})}if(a==="y"){const t=m.width,s=h.left,f=h.left+h.width;let c=0;i==="l"?o==="l"?c=s:o==="r"?c=f:o==="x"&&(c=s-(s-f)/2):i==="r"?o==="l"?c=s-t:o==="r"?c=f-t:o==="x"&&(c=s-t-(s-f)/2):i==="x"&&(o==="l"?c=s-t/2:o==="r"&&(c=f-t/2)),l.addStyle({left:`${c}px`},{partial:!0})}}function k({snapping:e,editor:l,props:u}){var B,O;const{command:a,guidesMatched:d}=u,n=u.component,i=n.getEl(),o=l.Canvas.getCanvasView(),{x:m,y:h}=e??{x:10,y:10},t=a.opts.event,s=t.clientX,f=t.clientY;if(!n.__lastSnappedPosition){const T=o.getElBoxRect(i),M=s-T.x,D=f-T.y;n.__lastSnappedPosition={left:T.x,top:T.y},n.__dragOffset={x:M,y:D}}const c=((B=n.__dragOffset)==null?void 0:B.x)||0,S=((O=n.__dragOffset)==null?void 0:O.y)||0,E=n.__lastSnappedPosition,b=s-E.left-c,v=f-E.top-S;let x=E.left,_=E.top;const p=d==null?void 0:d[0],w=(p==null?void 0:p.guide.type)==="l",A=(p==null?void 0:p.guide.type)==="x",r=(p==null?void 0:p.guide.type)==="r",g=(p==null?void 0:p.guide.type)==="t",y=(p==null?void 0:p.guide.type)==="b",G=(p==null?void 0:p.guide.type)==="y";if(p){const{x:T,y:M}=N({guideMatched:p,canvasView:o}),D=i.offsetWidth,$=i.offsetHeight;w?x=T:r?x=T-D:A?x=T-D/2:g?_=M:y?_=M-$:G&&(_=M-$/2),n.__lastSnappedGuideMatched=p}else Math.abs(b)>=m&&(x=Math.round((E.left+b)/m)*m,n.__lastSnappedGuideMatched=null),Math.abs(v)>=h&&(_=Math.round((E.top+v)/h)*h,n.__lastSnappedGuideMatched=null);return n.addStyle({left:`${x}px`,top:`${_}px`},{partial:!0}),n.__lastSnappedPosition={left:x,top:_},{x,y:_,guideMatched:n.__lastSnappedGuideMatched}}function le({snapping:e,props:l,editor:u}){const{x:a,y:d}=k({snapping:e,props:l,editor:u}),n=l.component;n.addStyle({left:`${a}px`,top:`${d}px`}),delete n.__lastSnappedPosition,delete n.__lastSnappedGuideMatched}const ae="core:component-drag",de="studio:setDragAbsolute",fe="dmode:start",K="dmode:move",V="dmode:end",I="dragAbsolute",re="select",pe="hover",ue="spacing";return ee(function(e,l={}){const{Commands:u}=e,a=u.events,d=u.getConfig().defaultOptions??{},n=`${a.runBeforeCommand}tlb-move`;d[ae]={run:r=>({...r,skipGuidesRender:!0})};const{snapping:i,locking:o,globalAbsolute:m=!0}=l;m&&e.setDragMode("absolute");const h=!!(i!=null&&i.x||i!=null&&i.y),t=!!(o!=null&&o.x||o!=null&&o.y),{Canvas:s}=e;let f=null;const c=r=>{const{component:g,guidesMatched:y,command:G}=r,B=g.view,O=e.Canvas.getCanvasView(),T=g.getEl();let M=y.map(C=>C.matched.componentEl),D=y.map(C=>N({guideMatched:C,canvasView:O}));if(h){const{guideMatched:C}=k({snapping:i,props:r,editor:e});C?(M=[C.matched.componentEl],D=[N({guideMatched:C,canvasView:O})]):(M=[],D=[])}if(t)if(G.opts.event.shiftKey)if(!f)f=y[0];else{const U=f,H=U.guide.x===void 0?"x":"y";(H==="x"&&(o==null?void 0:o.x)||H==="y"&&(o==null?void 0:o.y))&&(ce({guideMatched:U,component:g,canvasView:O}),M=[U.matched.componentEl],D=[N({guideMatched:U,canvasView:O})])}else f=null;const $={id:I,type:I,component:g,componentView:B,originComponent:T,matchedComponents:M,originMatchedDistances:D};s.addSpot($)},S=({enabled:r})=>{e.runCommand(de,{enabled:r})},E=({type:r})=>{s.removeSpots({type:r})},b=()=>{E({type:re}),E({type:pe}),E({type:ue})},v=r=>{S({enabled:!0}),c(r),b()},x=r=>{c(r),b()},_=r=>{E({type:I}),h&&le({snapping:i,props:r,editor:e}),S({enabled:!1})},A=[[fe,r=>{v(r),e.on(K,x);const g=()=>{_(r),e.off(K,x),e.off(V,g)};e.on(V,g)}],[n,r=>{if(m)return;const g=r.options.target,y=ie(e,g,l);y!=null&&y.result&&!y.dmode&&y.component.set({dmode:"absolute"})}]];A.forEach(([r,g])=>e.on(r,g)),te({editor:e,licenseKey:l.licenseKey,plan:se,pluginName:oe,cleanup:()=>{S({enabled:!1}),A.forEach(([r,g])=>e.off(r,g))}})})});

package/dist/canvasAbsoluteMode/types.d.ts

@@ -1,3 +1,9 @@
+import { Component } from 'grapesjs';
 import { CanvasAbsoluteModeOptions as CanvasAbsoluteModeOptionsSchema } from './typesSchema';
-export interface CanvasAbsoluteModeOptions extends CanvasAbsoluteModeOptionsSchema {
+export interface CanvasAbsoluteModeOptions extends Omit<CanvasAbsoluteModeOptionsSchema, 'enableAbsolute'> {
+    enableAbsolute?: EnableAbsoluteFn;
 }
+export type EnableAbsoluteFn = (props: {
+    component: Component;
+    hasAbsolute: boolean;
+}) => boolean;

package/dist/canvasAbsoluteMode/typesSchema.d.ts

@@ -1,16 +1,35 @@
 import { SDKPluginOptions } from '../utils';
 export interface CanvasAbsoluteModeOptions extends SDKPluginOptions {
     /**
-     * Snapping distance for the grid in pixels.
+     * Enable absolute mode globally. This will activate absolute drag mode for all components.
+     * @default true
+     */
+    globalAbsolute?: boolean;
+    /**
+     * Custom function to determine whether an element should use absolute positioning mode.
+     * This allows to define your own logic for enabling absolute mode, such as checking if
+     * the element has `position: absolute` or matches a specific condition.
+     *
+     * This check is skipped if the `globalAbsolute` option is set to `true`.
+     * @examples
+     * enableAbsolute: ({ component }) => getComputedStyle(component.getEl()).position === 'absolute'
+     */
+    enableAbsolute?: '__fn__';
+    /**
+     * Enables grid-based snapping for absolute positioning.
+     * Defines the snapping intervals in pixels along the x and y axes. When set, dragged elements
+     * will align to the closest grid point.
      * @example
-     * { x: 100, y: 50 }
+     * { x: 100, y: 50 } // will snap elements every 100px horizontally and 50px vertically.
      */
     snapping?: {
         x: number;
         y: number;
     };
     /**
-     * Locking the grid on the X and Y axis.
+     * Enables axis locking during element dragging.
+     * When enabled, holding the Shift key while snapping to a nearby component locks movement to the matched axis (horizontal or vertical),
+     * allowing for precise alignment based on distance indicators.
      * @example
      * { x: true, y: false }
      */

package/dist/canvasAbsoluteMode/utils.d.ts

@@ -2,6 +2,11 @@ import { ComponentDragEventProps, Canvas, Component, Editor } from 'grapesjs';
 import { CanvasAbsoluteModeOptions } from './types';
 export type GuideMatched = ComponentDragEventProps['guidesMatched'][number];
 type CanvasView = ReturnType<Canvas['module']['getCanvasView']>;
+export declare const isAbsolute: (editor: Editor, target: Component | Component[], opts: CanvasAbsoluteModeOptions) => {
+    result: boolean;
+    component: Component;
+    dmode: import('grapesjs').DragMode | undefined;
+} | undefined;
 /**
  * This function calculates the distances between the origin and matched components.
  * - It returns the coordinates and dimensions of the bounding box for the matched components.