@spiffcommerce/core 21.13.1 → 21.14.0-alpha.0

package/dist/index.d.ts

@@ -306,6 +306,7 @@ declare class LayoutPreviewBridge implements RenderableContext {
     hasSetStaticContext: boolean;
     private readonly id;
     private readonly name;
+    private readonly panelSize;
     private service;
     private interactiveDirty;
     private textureCtx?;
@@ -314,9 +315,16 @@ declare class LayoutPreviewBridge implements RenderableContext {
     private lastCompletedStaticRender;
     private lastModificationID;
     private renderQueue;
-    constructor(id: string, name: string, service: LayoutPreviewService);
+    constructor(id: string, name: string, service: LayoutPreviewService, panelSize: {
+        width: number;
+        height: number;
+    });
     getID(): string;
     getName(): string;
+    getPanelSize(): {
+        width: number;
+        height: number;
+    };
     getStaticContext(): CanvasRenderingContext2D | undefined;
     /**
      * Register canvas to be rendered to.

package/dist/index.js

@@ -7645,7 +7645,12 @@ class De {
   constructor(e) {
     this.handleCompleteRender = null;
     const t = /* @__PURE__ */ new Map();
-    e.forEach((A) => t.set(A.id, new Gn(A.id, A.name, this))), this.layouts = t;
+    e.forEach(
+      (A) => t.set(
+        A.id,
+        new Gn(A.id, A.name, this, { width: A.width, height: A.height })
+      )
+    ), this.layouts = t;
   }
   setCompleteRenderCallback(e) {
     this.handleCompleteRender = e, e(Array.from(this.layouts.values()));
@@ -7662,8 +7667,8 @@ const Un = () => new Promise((c, e) => {
   c(!!A);
 }), vn = Un();
 class Gn {
-  constructor(e, t, A) {
-    this.hasSetStaticContext = !1, this.interactiveDirty = !1, this.staticCtxDirty = !1, this.lastRequestedRenderArguments = void 0, this.lastCompletedStaticRender = void 0, this.lastModificationID = void 0, this.renderQueue = new AA(2), this.id = e, this.name = t, this.service = A;
+  constructor(e, t, A, a) {
+    this.hasSetStaticContext = !1, this.interactiveDirty = !1, this.staticCtxDirty = !1, this.lastRequestedRenderArguments = void 0, this.lastCompletedStaticRender = void 0, this.lastModificationID = void 0, this.renderQueue = new AA(2), this.id = e, this.name = t, this.service = A, this.panelSize = a;
   }
   getID() {
     return this.id;
@@ -7671,6 +7676,9 @@ class Gn {
   getName() {
     return this.name;
   }
+  getPanelSize() {
+    return this.panelSize;
+  }
   getStaticContext() {
     return this.textureCtx;
   }

package/dist/index.umd.cjs

@@ -2037,7 +2037,7 @@ IfnI8vaNAAAAAElFTkSuQmCC" transform="matrix(0.13 0.0141 -0.0141 0.1301 104.926 1
             />
         </svg>
         `,h={"spiff-fill-shape":{browserValue:i.color||"#000000"}},u=l.generate();return new l.CreateElementCommand({colors:h,id:u,svg:d,type:l.LayoutElementType.Illustration,y:g.top,x:g.left,rotation:g.rotation,width:g.width,height:g.height,layer:g.layer,layerIndex:g.layerIndex,immutable:g.immutable},B)},s=A.data.regions;try{return s.map(o)}catch(g){return console.error(g),[]}},Gn=async(c,e,t)=>{const A=[],a=(()=>{var r,g;return e.type===l.StepType.ProductOverlay?t||((r=e.data.asset)==null?void 0:r.fileLink)||"":((g=e.data.asset)==null?void 0:g.fileLink)||""})(),o=(()=>a.endsWith(".jpeg")||a.endsWith(".jpg")||a.endsWith(".png")?l.LayoutElementType.Image:(a.endsWith(".svg"),l.LayoutElementType.Illustration))(),s=e.data.regions;if(o==="image")try{s.forEach(r=>{const g=c.find(d=>d.panelId===r.panelId);if(!g)throw new J(r);const B={id:l.generate(),src:a,type:o,y:r.top,x:r.left,width:r.width,height:r.height,layer:r.layer,layerIndex:r.layerIndex,productOverlay:e.type===l.StepType.ProductOverlay?!0:void 0,scaleX:1,scaleY:1,rotation:r.rotation,excludeFromExport:e.data.excludeFromPrint,preserveAspectRatio:"none"};A.push(new l.CreateElementCommand(B,g))})}catch(r){console.error(r)}else{const r=await l.fetchAsString(a,!0),g=B=>{const d=/<svg.*?<\/svg>/s,w=B.match(d)||[],h=(w==null?void 0:w.length)>0?w[0]:"",Q=l.domParser().parseFromString(h,"image/svg+xml").firstElementChild;if(!Q)throw new $("Failed to read SVG.");return l.sanitizeSvgTree(Q),l.xmlSerializer().serializeToString(Q)};s.forEach(B=>{const d=c.find(h=>h.panelId===B.panelId);if(!d)throw new J(B);const w={id:l.generate(),src:a,asset_key:a,svg:g(r),colors:{},type:o,y:B.top,x:B.left,width:B.width,height:B.height,layer:B.layer,layerIndex:B.layerIndex,scaleX:1,scaleY:1,rotation:B.rotation,productOverlay:e.type===l.StepType.ProductOverlay?!0:void 0,excludeFromExport:e.data.excludeFromPrint};A.push(new l.CreateElementCommand(w,d))})}return A},kn=async(c,e,t,A)=>{const n=[],a=t.data,i=30,o=E=>E.vertical?"center":E.textAlign||"center",s=()=>{var D;const E=A.option;if(!E)return;const Q=((D=E.variants)==null?void 0:D.find(I=>I.id===a.fontVariantId))||l.getDefaultVariant(E);if(!Q||!Q.asset)return;e[A.stepName]={selectedVariants:[Q]};const m=Q.asset.fileLink;if(m)return m},g=await(async()=>{const E=s();if(!E)return;const Q=await l.loadFont(E);return{assetUrl:E,name:Q.names.fullName.en}})(),B=(A.data.replaceableText?A.data.replaceableText.replace("{{}}",a.text):a.text)||"",d=l.applyTextTransformations(B,{vertical:A.data.vertical,uppercase:A.data.uppercase}),w=async E=>{const Q=E.colorOption;if(!Q)return;const m=L.getDefaultVariant(Q);return m==null?void 0:m.color},h=a.color||await w(A.data),u=A.data.regions;for(const E of u){const Q=c.find(D=>D.panelId===E.panelId);if(!Q)continue;const m={stepName:t.name,id:l.generate(),align:o(A.data),curved:A.data.curved,fill:a.color||h||"#000000",fontData:g,fontSize:A.data.size||i,height:E.height,layer:E.layer,layerIndex:E.layerIndex,paths:A.data.paths,rotation:E.rotation,text:d,type:l.LayoutElementType.Textbox,vertical:A.data.vertical,verticalAlign:A.data.verticalAlign||"middle",width:E.width,x:E.left,y:E.top};if(g){const[D,I]=l.determineCorrectFontSizeAndLines(A.data.size||i,g,E,[l.applyTextTransformations(d,{vertical:A.data.vertical,uppercase:A.data.uppercase})],{size:A.data.size,minSize:A.data.minSize,maxSize:A.data.maxSize});n.push(new l.CreateElementCommand({...m,fontSize:D,text:m.curved?m.text:(I||[]).join(`
-`)},Q))}else n.push(new l.CreateElementCommand(m,Q))}return n},bn=(c,e)=>c.conditions?c.conditions.every(t=>{const A=e[t.targetStepName];if(A&&A.selectedVariants){const n=A.selectedVariants;return t.requiredVariantSelections.some(a=>n.find(i=>i.id===a)!==void 0)}return!1}):!0,eA=async(c,e,t,A)=>{const n=[],a={};for(const i of c){const o=e.steps.find(s=>s.stepName===i.name);if(o)switch(o.type){case l.StepType.DigitalContent:n.push(...await xn(t,i,o));break;case l.StepType.Frame:case l.StepType.Photo:n.push(...await Nn(t,a,i,o));break;case l.StepType.Illustration:n.push(...await Hn(t,a,i,o));break;case l.StepType.Module:n.push(...await Rn(t,i,o));break;case l.StepType.Picture:n.push(...await Un(t,a,i,o));break;case l.StepType.Shape:n.push(...await vn(t,a,i,o));break;case l.StepType.Text:n.push(...await kn(t,a,i,o));break}}for(const i of e.steps)i.type!==l.StepType.SilentIllustration&&i.type!==l.StepType.ProductOverlay||bn(i,a)&&n.push(...await Gn(t,i,A));return n};class Pe{constructor(e){this.handleCompleteRender=null;const t=new Map;e.forEach(A=>t.set(A.id,new Tn(A.id,A.name,this))),this.layouts=t}setCompleteRenderCallback(e){this.handleCompleteRender=e,e(Array.from(this.layouts.values()))}onCompleteRender(){this.handleCompleteRender&&this.handleCompleteRender(Array.from(this.layouts.values()))}getAll(){return this.layouts}}const Jn=(()=>new Promise((c,e)=>{const A=l.createCanvas().getContext("webgl2");c(!!A)}))();class Tn{constructor(e,t,A){this.hasSetStaticContext=!1,this.interactiveDirty=!1,this.staticCtxDirty=!1,this.lastRequestedRenderArguments=void 0,this.lastCompletedStaticRender=void 0,this.lastModificationID=void 0,this.renderQueue=new ke(2),this.id=e,this.name=t,this.service=A}getID(){return this.id}getName(){return this.name}getStaticContext(){return this.textureCtx}setStaticContext(e){if(this.textureCtx=e,this.lastRequestedRenderArguments){const{workflow:t,layouts:A,productOverlayImageUrl:n}=this.lastRequestedRenderArguments;this.render(t,A,n)}}getStaticContextDirty(){return this.staticCtxDirty}setStaticContextDirty(e){this.staticCtxDirty=e}getInteractiveCanvasDirty(){return this.interactiveDirty}setInteractiveCanvasDirty(e){this.interactiveDirty=e}markLastCompletedStaticRender(){this.lastCompletedStaticRender=Date.now(),this.service.onCompleteRender()}getLastCompletedStaticRender(){return this.lastCompletedStaticRender}getLastModificationID(){return this.lastModificationID}async render(e,t,A){const n=se(t);this.lastRequestedRenderArguments={workflow:e,layouts:n,productOverlayImageUrl:A};const a=this.getStaticContext();if(!a){this.markLastCompletedStaticRender(),this.setStaticContextDirty(!1);return}this.renderQueue.enqueue(new On(this.getID(),a,await Jn,()=>{this.markLastCompletedStaticRender(),this.setStaticContextDirty(!0)},e,n,A))}}class On extends Ge{constructor(e,t,A,n,a,i,o){super(),this.layoutId=e,this.ctx=t,this.nonPOTSupport=A,this.onRender=n,this.workflow=a,this.layouts=i,this.productOverlayImageUrl=o}getDynamicTextureResolution(){return this.getIsMobile()||!this.offscreenRenderingSupported()?{width:1024,height:1024}:{width:2048,height:2048}}getIsMobile(){return window.innerWidth<=480}offscreenRenderingSupported(){return navigator.userAgent.includes("SamsungBrowser")?!1:!!window.Worker&&!!window.OffscreenCanvas}resizeFit(e,t=4096){const A=t/e.width,n=t/e.height,a=Math.min(A,n);return a>1?e:{width:e.width*a,height:e.height*a}}async execute(){const e=this.layouts.find(d=>d.layoutState.layout.id===this.layoutId);if(!e)return;const t=e.layoutState.elements||[],A=e.layoutState.layout.width,n=e.layoutState.layout.height,a=this.getDynamicTextureResolution().width,i=this.getDynamicTextureResolution().height;let o,s;if(this.nonPOTSupport){const d=a/i;A/n<d?(o=a,s=n*(a/A)):(o=A*(i/n),s=i);const h=this.resizeFit({width:o,height:s});o=h.width,s=h.height}else o=this.getDynamicTextureResolution().width,s=this.getDynamicTextureResolution().height;const r=l.getSvgElement(e.layoutState.layout,t,{renderingConfiguration:{purpose:l.LayoutRenderingPurpose.ThreeD}}),g=l.renderPapyrusComponentAsString(r),B=await it.Pith.from(this.ctx,g,{anonymousCrossOrigin:!0,ignoreDimensions:!this.nonPOTSupport,ignoreAnimation:!0,ignoreClear:!0,ignoreMouse:!0,enableRedraw:!1,createCanvas:l.createCanvas,createImage:l.loadImage,DOMParser:l.getDomParser(),fetch:l.fetch});B.resize(o,s),await B.render(),this.onRender()}}const Ln=(c,e)=>{const t=[];return c.forEach(A=>{const n=e.steps.find(a=>a.stepName===A.stepName);(n==null?void 0:n.type)===l.StepType.Text&&A.stepAspectType==="Text"&&t.push({name:n.stepName,data:{text:A.value}})}),t},zn=async(c,e,t,A)=>{let n={serializableWorkflow:{steps:[]},layouts:{}};n=new l.GroupCommand(t.map(s=>new l.CreateLayoutCommand(s))).apply(n);const i=await eA(c,e,t,A);return new l.GroupCommand(i).apply(n)},jn=M.gql`
+`)},Q))}else n.push(new l.CreateElementCommand(m,Q))}return n},bn=(c,e)=>c.conditions?c.conditions.every(t=>{const A=e[t.targetStepName];if(A&&A.selectedVariants){const n=A.selectedVariants;return t.requiredVariantSelections.some(a=>n.find(i=>i.id===a)!==void 0)}return!1}):!0,eA=async(c,e,t,A)=>{const n=[],a={};for(const i of c){const o=e.steps.find(s=>s.stepName===i.name);if(o)switch(o.type){case l.StepType.DigitalContent:n.push(...await xn(t,i,o));break;case l.StepType.Frame:case l.StepType.Photo:n.push(...await Nn(t,a,i,o));break;case l.StepType.Illustration:n.push(...await Hn(t,a,i,o));break;case l.StepType.Module:n.push(...await Rn(t,i,o));break;case l.StepType.Picture:n.push(...await Un(t,a,i,o));break;case l.StepType.Shape:n.push(...await vn(t,a,i,o));break;case l.StepType.Text:n.push(...await kn(t,a,i,o));break}}for(const i of e.steps)i.type!==l.StepType.SilentIllustration&&i.type!==l.StepType.ProductOverlay||bn(i,a)&&n.push(...await Gn(t,i,A));return n};class Pe{constructor(e){this.handleCompleteRender=null;const t=new Map;e.forEach(A=>t.set(A.id,new Tn(A.id,A.name,this,{width:A.width,height:A.height}))),this.layouts=t}setCompleteRenderCallback(e){this.handleCompleteRender=e,e(Array.from(this.layouts.values()))}onCompleteRender(){this.handleCompleteRender&&this.handleCompleteRender(Array.from(this.layouts.values()))}getAll(){return this.layouts}}const Jn=(()=>new Promise((c,e)=>{const A=l.createCanvas().getContext("webgl2");c(!!A)}))();class Tn{constructor(e,t,A,n){this.hasSetStaticContext=!1,this.interactiveDirty=!1,this.staticCtxDirty=!1,this.lastRequestedRenderArguments=void 0,this.lastCompletedStaticRender=void 0,this.lastModificationID=void 0,this.renderQueue=new ke(2),this.id=e,this.name=t,this.service=A,this.panelSize=n}getID(){return this.id}getName(){return this.name}getPanelSize(){return this.panelSize}getStaticContext(){return this.textureCtx}setStaticContext(e){if(this.textureCtx=e,this.lastRequestedRenderArguments){const{workflow:t,layouts:A,productOverlayImageUrl:n}=this.lastRequestedRenderArguments;this.render(t,A,n)}}getStaticContextDirty(){return this.staticCtxDirty}setStaticContextDirty(e){this.staticCtxDirty=e}getInteractiveCanvasDirty(){return this.interactiveDirty}setInteractiveCanvasDirty(e){this.interactiveDirty=e}markLastCompletedStaticRender(){this.lastCompletedStaticRender=Date.now(),this.service.onCompleteRender()}getLastCompletedStaticRender(){return this.lastCompletedStaticRender}getLastModificationID(){return this.lastModificationID}async render(e,t,A){const n=se(t);this.lastRequestedRenderArguments={workflow:e,layouts:n,productOverlayImageUrl:A};const a=this.getStaticContext();if(!a){this.markLastCompletedStaticRender(),this.setStaticContextDirty(!1);return}this.renderQueue.enqueue(new On(this.getID(),a,await Jn,()=>{this.markLastCompletedStaticRender(),this.setStaticContextDirty(!0)},e,n,A))}}class On extends Ge{constructor(e,t,A,n,a,i,o){super(),this.layoutId=e,this.ctx=t,this.nonPOTSupport=A,this.onRender=n,this.workflow=a,this.layouts=i,this.productOverlayImageUrl=o}getDynamicTextureResolution(){return this.getIsMobile()||!this.offscreenRenderingSupported()?{width:1024,height:1024}:{width:2048,height:2048}}getIsMobile(){return window.innerWidth<=480}offscreenRenderingSupported(){return navigator.userAgent.includes("SamsungBrowser")?!1:!!window.Worker&&!!window.OffscreenCanvas}resizeFit(e,t=4096){const A=t/e.width,n=t/e.height,a=Math.min(A,n);return a>1?e:{width:e.width*a,height:e.height*a}}async execute(){const e=this.layouts.find(d=>d.layoutState.layout.id===this.layoutId);if(!e)return;const t=e.layoutState.elements||[],A=e.layoutState.layout.width,n=e.layoutState.layout.height,a=this.getDynamicTextureResolution().width,i=this.getDynamicTextureResolution().height;let o,s;if(this.nonPOTSupport){const d=a/i;A/n<d?(o=a,s=n*(a/A)):(o=A*(i/n),s=i);const h=this.resizeFit({width:o,height:s});o=h.width,s=h.height}else o=this.getDynamicTextureResolution().width,s=this.getDynamicTextureResolution().height;const r=l.getSvgElement(e.layoutState.layout,t,{renderingConfiguration:{purpose:l.LayoutRenderingPurpose.ThreeD}}),g=l.renderPapyrusComponentAsString(r),B=await it.Pith.from(this.ctx,g,{anonymousCrossOrigin:!0,ignoreDimensions:!this.nonPOTSupport,ignoreAnimation:!0,ignoreClear:!0,ignoreMouse:!0,enableRedraw:!1,createCanvas:l.createCanvas,createImage:l.loadImage,DOMParser:l.getDomParser(),fetch:l.fetch});B.resize(o,s),await B.render(),this.onRender()}}const Ln=(c,e)=>{const t=[];return c.forEach(A=>{const n=e.steps.find(a=>a.stepName===A.stepName);(n==null?void 0:n.type)===l.StepType.Text&&A.stepAspectType==="Text"&&t.push({name:n.stepName,data:{text:A.value}})}),t},zn=async(c,e,t,A)=>{let n={serializableWorkflow:{steps:[]},layouts:{}};n=new l.GroupCommand(t.map(s=>new l.CreateLayoutCommand(s))).apply(n);const i=await eA(c,e,t,A);return new l.GroupCommand(i).apply(n)},jn=M.gql`
     ${te}
     fragment ProductFields on Product {
         id

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spiffcommerce/core",
-    "version": "21.13.1",
+    "version": "21.14.0-alpha.0",
     "description": "Core client API for interacting with the Spiff Commerce backend.",
     "source": "src/index.ts",
     "main": "dist/index.umd.cjs",