@spiffcommerce/core 16.0.0-beta.10 → 16.0.0-beta.12

package/dist/index.js

@@ -7654,7 +7654,9 @@ class Yn extends Ve {
       i = this.getDynamicTextureResolution().width, o = this.getDynamicTextureResolution().height;
     const c = Fe(A.layoutState.layout, e, {
       renderingConfiguration: { purpose: Me.ThreeD }
-    }), r = ye(c), B = await Pe.from(this.ctx, r, {
+    }), r = ye(c);
+    console.log("SVG", r);
+    const B = await Pe.from(this.ctx, r, {
       anonymousCrossOrigin: !0,
       ignoreDimensions: !this.nonPOTSupport,
       ignoreAnimation: !0,
@@ -7666,7 +7668,7 @@ class Yn extends Ve {
       DOMParser: Se(),
       fetch: xe
     });
-    B.resize(i, o), await B.render(), this.onRender();
+    B.resize(i, o), await B.render(), console.log("cvg", B), this.onRender();
   }
 }
 const Sn = (g, A) => {

package/dist/index.umd.cjs

@@ -1947,7 +1947,7 @@ IfnI8vaNAAAAAElFTkSuQmCC" transform="matrix(0.13 0.0141 -0.0141 0.1301 104.926 1
             />
         </svg>
         `,h={"spiff-fill-shape":{browserValue:i.color||"#000000"}},Q=r.generate();return new r.CreateElementCommand({colors:h,id:Q,svg:B,type:r.LayoutElementType.Illustration,y:c.top,x:c.left,rotation:c.rotation,width:c.width,height:c.height,layer:c.layer,layerIndex:c.layerIndex,immutable:c.immutable},d)},s=t.data.regions;try{return s.map(o)}catch(c){return console.error(c),[]}},Ia=async(l,e,A)=>{const t=[],n=(()=>{var g,c;return e.type===r.StepType.ProductOverlay?A||((g=e.data.asset)==null?void 0:g.fileLink)||"":((c=e.data.asset)==null?void 0:c.fileLink)||""})(),o=(()=>n.endsWith(".jpeg")||n.endsWith(".jpg")||n.endsWith(".png")?r.LayoutElementType.Image:(n.endsWith(".svg"),r.LayoutElementType.Illustration))(),s=e.data.regions;if(o==="image")try{s.forEach(g=>{const c=l.find(B=>B.panelId===g.panelId);if(!c)throw new k(g);const d={id:r.generate(),src:n,type:o,y:g.top,x:g.left,width:g.width,height:g.height,layer:g.layer,layerIndex:g.layerIndex,productOverlay:e.type===r.StepType.ProductOverlay?!0:void 0,scaleX:1,scaleY:1,rotation:g.rotation,excludeFromExport:e.data.excludeFromPrint,preserveAspectRatio:"none"};t.push(new r.CreateElementCommand(d,c))})}catch(g){console.error(g)}else{console.log(`fetching ${n}`);const g=await r.fetchAsString(n),c=d=>{const B=/<svg.*?<\/svg>/s,w=d.match(B)||[],h=(w==null?void 0:w.length)>0?w[0]:"",C=r.domParser().parseFromString(h,"image/svg+xml").firstElementChild;if(!C)throw new X("Failed to read SVG.");return r.sanitizeSvgTree(C),r.xmlSerializer().serializeToString(C)};s.forEach(d=>{const B=l.find(h=>h.panelId===d.panelId);if(!B)throw new k(d);const w={id:r.generate(),src:n,asset_key:n,svg:c(g),colors:{},type:o,y:d.top,x:d.left,width:d.width,height:d.height,layer:d.layer,layerIndex:d.layerIndex,scaleX:1,scaleY:1,rotation:d.rotation,productOverlay:e.type===r.StepType.ProductOverlay?!0:void 0,excludeFromExport:e.data.excludeFromPrint};t.push(new r.CreateElementCommand(w,B))})}return t},Da=async(l,e,A,t)=>{const a=[],n=A.data,i=30,o=E=>E.vertical?"center":E.textAlign||"center",s=()=>{var D;const E=t.option;if(!E)return;const C=((D=E.variants)==null?void 0:D.find(I=>I.id===n.fontVariantId))||r.getDefaultVariant(E);if(!C||!C.asset)return;e[t.stepName]={selectedVariants:[C]};const m=C.asset.fileLink;if(m)return m},c=await(async()=>{const E=s();if(!E)return;console.log(`fetching ${E}`);const C=await r.fetchAsArrayBuffer(E),m=await r.arrayBufferToDataUrl(C),D=r.loadFontFromDataUrl(m);return await r.loadFontFaceSet(D,E),{assetUrl:E,name:D.names.fullName.en}})(),d=t.data.replaceableText?t.data.replaceableText.replace("{{}}",n.text):n.text,B=r.applyTextTransformations(d,{vertical:t.data.vertical,uppercase:t.data.uppercase}),w=async E=>{const C=E.colorOption;if(!C)return;const m=J.getDefaultVariant(C);return m==null?void 0:m.color},h=n.color||await w(t.data),Q=t.data.regions;for(const E of Q){const C=l.find(D=>D.panelId===E.panelId);if(!C)continue;const m={stepName:A.name,id:r.generate(),align:o(t.data),curved:t.data.curved,fill:n.color||h||"#000000",fontData:c,fontSize:t.data.size||i,height:E.height,layer:E.layer,layerIndex:E.layerIndex,paths:t.data.paths,rotation:E.rotation,text:B,type:r.LayoutElementType.Textbox,vertical:t.data.vertical,verticalAlign:t.data.verticalAlign||"middle",width:E.width,x:E.left,y:E.top};if(c){const[D,I]=r.determineCorrectFontSizeAndLines(t.data.size||i,c,E,[r.applyTextTransformations(B,{vertical:t.data.vertical,uppercase:t.data.uppercase})],{size:t.data.size,minSize:t.data.minSize,maxSize:t.data.maxSize});a.push(new r.CreateElementCommand({...m,fontSize:D,text:m.curved?m.text:(I||[]).join(`
-`)},C))}else a.push(new r.CreateElementCommand(m,C))}return a},fa=(l,e)=>l.conditions?l.conditions.every(A=>{const t=e[A.targetStepName];if(t&&t.selectedVariants){const a=t.selectedVariants;return A.requiredVariantSelections.some(n=>a.find(i=>i.id===n)!==void 0)}return!1}):!0,jA=async(l,e,A,t)=>{const a=[],n={};for(const i of l){const o=e.steps.find(s=>s.stepName===i.name);if(o)switch(o.type){case r.StepType.DigitalContent:a.push(...await Ea(A,i,o));break;case r.StepType.Frame:case r.StepType.Photo:a.push(...await ha(A,n,i,o));break;case r.StepType.Illustration:a.push(...await Ca(A,n,i,o));break;case r.StepType.Module:a.push(...await Qa(A,i,o));break;case r.StepType.Picture:a.push(...await ma(A,n,i,o));break;case r.StepType.Shape:a.push(...await ua(A,n,i,o));break;case r.StepType.Text:a.push(...await Da(A,n,i,o));break}}for(const i of e.steps)i.type!==r.StepType.SilentIllustration&&i.type!==r.StepType.ProductOverlay||fa(i,n)&&a.push(...await Ia(A,i,t));return a};class fe{constructor(e){this.handleCompleteRender=null;const A=new Map;e.forEach(t=>A.set(t.id,new Fa(t.id,t.name,this))),this.layouts=A}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}}let pe;const pa=()=>(pe!==void 0||(pe=!!r.createCanvas(500,500).getContext("webgl2")),pe);class Fa{constructor(e,A,t){this.hasSetStaticContext=!1,this.interactiveDirty=!1,this.staticCtxDirty=!1,this.lastRequestedRenderArguments=void 0,this.lastCompletedStaticRender=void 0,this.lastModificationID=void 0,this.renderQueue=new xe(2),this.id=e,this.name=A,this.service=t}getID(){return this.id}getName(){return this.name}getStaticContext(){return this.textureCtx}setStaticContext(e){if(this.textureCtx=e,this.lastRequestedRenderArguments){const{workflow:A,layouts:t,variationRecord:a,productOverlayImageUrl:n}=this.lastRequestedRenderArguments;this.render(A,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,A,t,a){const n=_(A);this.lastRequestedRenderArguments={workflow:e,layouts:n,variationRecord:t,productOverlayImageUrl:a};const i=this.getStaticContext();if(!i){this.markLastCompletedStaticRender(),this.setStaticContextDirty(!1);return}this.renderQueue.enqueue(new Ma(this.getID(),i,pa(),()=>{this.markLastCompletedStaticRender(),this.setStaticContextDirty(!0)},e,n,t,a))}}class Ma extends Re{constructor(e,A,t,a,n,i,o,s){super(),this.layoutId=e,this.ctx=A,this.nonPOTSupport=t,this.onRender=a,this.workflow=n,this.layouts=i,this.variationRecord=o,this.productOverlayImageUrl=s}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,A=4096){const t=A/e.width,a=A/e.height,n=Math.min(t,a);return n>1?e:{width:e.width*n,height:e.height*n}}async execute(){const e=this.layouts.find(B=>B.layoutState.layout.id===this.layoutId);if(!e)return;const A=e.layoutState.elements||[];if(this.variationRecord){const B=this.variationRecord.values.map(Q=>({stepName:Q.stepName,stepAspectType:Q.aspect,value:Q.value})),w=await VA(KA(B,this.workflow),this.workflow,this.layouts.map(Q=>Q.layoutState.layout),this.productOverlayImageUrl),h=w==null?void 0:w.layouts[e.layoutState.layout.id];((h==null?void 0:h.elements)||[]).forEach(Q=>{const E=A.find(C=>C.stepName===Q.stepName);E&&E.type===r.LayoutElementType.Textbox?(E.text=Q.text,E.fontSize=Q.fontSize):A.push(Q)}),r.sortElementsByLayersWithIndex(A)}const t=e.layoutState.layout.width,a=e.layoutState.layout.height,n=this.getDynamicTextureResolution().width,i=this.getDynamicTextureResolution().height;let o,s;if(this.nonPOTSupport){const B=n/i;t/a<B?(o=n,s=a*(n/t)):(o=t*(i/a),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 g=r.getSvgElement(e.layoutState.layout,A,{renderingConfiguration:{purpose:r.LayoutRenderingPurpose.ThreeD}}),c=r.renderPapyrusComponentAsString(g),d=await Xe.Pith.from(this.ctx,c,{anonymousCrossOrigin:!0,ignoreDimensions:!this.nonPOTSupport,ignoreAnimation:!0,ignoreClear:!0,ignoreMouse:!0,enableRedraw:!1,createCanvas:r.createCanvas,createImage:r.loadImage,DOMParser:r.getDomParser(),fetch:r.fetch});d.resize(o,s),await d.render(),this.onRender()}}const KA=(l,e)=>{const A=[];return l.forEach(t=>{const a=e.steps.find(n=>n.stepName===t.stepName);(a==null?void 0:a.type)===r.StepType.Text&&t.stepAspectType==="Text"&&A.push({name:a.stepName,data:{text:t.value}})}),A},VA=async(l,e,A,t)=>{let a={serializableWorkflow:{steps:[]},layouts:{}};a=new r.GroupCommand(A.map(s=>new r.CreateLayoutCommand(s))).apply(a);const i=await jA(l,e,A,t);return new r.GroupCommand(i).apply(a)},Sa=y.gql`
+`)},C))}else a.push(new r.CreateElementCommand(m,C))}return a},fa=(l,e)=>l.conditions?l.conditions.every(A=>{const t=e[A.targetStepName];if(t&&t.selectedVariants){const a=t.selectedVariants;return A.requiredVariantSelections.some(n=>a.find(i=>i.id===n)!==void 0)}return!1}):!0,jA=async(l,e,A,t)=>{const a=[],n={};for(const i of l){const o=e.steps.find(s=>s.stepName===i.name);if(o)switch(o.type){case r.StepType.DigitalContent:a.push(...await Ea(A,i,o));break;case r.StepType.Frame:case r.StepType.Photo:a.push(...await ha(A,n,i,o));break;case r.StepType.Illustration:a.push(...await Ca(A,n,i,o));break;case r.StepType.Module:a.push(...await Qa(A,i,o));break;case r.StepType.Picture:a.push(...await ma(A,n,i,o));break;case r.StepType.Shape:a.push(...await ua(A,n,i,o));break;case r.StepType.Text:a.push(...await Da(A,n,i,o));break}}for(const i of e.steps)i.type!==r.StepType.SilentIllustration&&i.type!==r.StepType.ProductOverlay||fa(i,n)&&a.push(...await Ia(A,i,t));return a};class fe{constructor(e){this.handleCompleteRender=null;const A=new Map;e.forEach(t=>A.set(t.id,new Fa(t.id,t.name,this))),this.layouts=A}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}}let pe;const pa=()=>(pe!==void 0||(pe=!!r.createCanvas(500,500).getContext("webgl2")),pe);class Fa{constructor(e,A,t){this.hasSetStaticContext=!1,this.interactiveDirty=!1,this.staticCtxDirty=!1,this.lastRequestedRenderArguments=void 0,this.lastCompletedStaticRender=void 0,this.lastModificationID=void 0,this.renderQueue=new xe(2),this.id=e,this.name=A,this.service=t}getID(){return this.id}getName(){return this.name}getStaticContext(){return this.textureCtx}setStaticContext(e){if(this.textureCtx=e,this.lastRequestedRenderArguments){const{workflow:A,layouts:t,variationRecord:a,productOverlayImageUrl:n}=this.lastRequestedRenderArguments;this.render(A,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,A,t,a){const n=_(A);this.lastRequestedRenderArguments={workflow:e,layouts:n,variationRecord:t,productOverlayImageUrl:a};const i=this.getStaticContext();if(!i){this.markLastCompletedStaticRender(),this.setStaticContextDirty(!1);return}this.renderQueue.enqueue(new Ma(this.getID(),i,pa(),()=>{this.markLastCompletedStaticRender(),this.setStaticContextDirty(!0)},e,n,t,a))}}class Ma extends Re{constructor(e,A,t,a,n,i,o,s){super(),this.layoutId=e,this.ctx=A,this.nonPOTSupport=t,this.onRender=a,this.workflow=n,this.layouts=i,this.variationRecord=o,this.productOverlayImageUrl=s}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,A=4096){const t=A/e.width,a=A/e.height,n=Math.min(t,a);return n>1?e:{width:e.width*n,height:e.height*n}}async execute(){const e=this.layouts.find(B=>B.layoutState.layout.id===this.layoutId);if(!e)return;const A=e.layoutState.elements||[];if(this.variationRecord){const B=this.variationRecord.values.map(Q=>({stepName:Q.stepName,stepAspectType:Q.aspect,value:Q.value})),w=await VA(KA(B,this.workflow),this.workflow,this.layouts.map(Q=>Q.layoutState.layout),this.productOverlayImageUrl),h=w==null?void 0:w.layouts[e.layoutState.layout.id];((h==null?void 0:h.elements)||[]).forEach(Q=>{const E=A.find(C=>C.stepName===Q.stepName);E&&E.type===r.LayoutElementType.Textbox?(E.text=Q.text,E.fontSize=Q.fontSize):A.push(Q)}),r.sortElementsByLayersWithIndex(A)}const t=e.layoutState.layout.width,a=e.layoutState.layout.height,n=this.getDynamicTextureResolution().width,i=this.getDynamicTextureResolution().height;let o,s;if(this.nonPOTSupport){const B=n/i;t/a<B?(o=n,s=a*(n/t)):(o=t*(i/a),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 g=r.getSvgElement(e.layoutState.layout,A,{renderingConfiguration:{purpose:r.LayoutRenderingPurpose.ThreeD}}),c=r.renderPapyrusComponentAsString(g);console.log("SVG",c);const d=await Xe.Pith.from(this.ctx,c,{anonymousCrossOrigin:!0,ignoreDimensions:!this.nonPOTSupport,ignoreAnimation:!0,ignoreClear:!0,ignoreMouse:!0,enableRedraw:!1,createCanvas:r.createCanvas,createImage:r.loadImage,DOMParser:r.getDomParser(),fetch:r.fetch});d.resize(o,s),await d.render(),console.log("cvg",d),this.onRender()}}const KA=(l,e)=>{const A=[];return l.forEach(t=>{const a=e.steps.find(n=>n.stepName===t.stepName);(a==null?void 0:a.type)===r.StepType.Text&&t.stepAspectType==="Text"&&A.push({name:a.stepName,data:{text:t.value}})}),A},VA=async(l,e,A,t)=>{let a={serializableWorkflow:{steps:[]},layouts:{}};a=new r.GroupCommand(A.map(s=>new r.CreateLayoutCommand(s))).apply(a);const i=await jA(l,e,A,t);return new r.GroupCommand(i).apply(a)},Sa=y.gql`
     fragment ProductCollectionProductFields on Product {
         id
         basePrice

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spiffcommerce/core",
-    "version": "16.0.0-beta.10",
+    "version": "16.0.0-beta.12",
     "description": "Core client API for interacting with the Spiff Commerce backend.",
     "source": "src/index.ts",
     "main": "dist/index.umd.cjs",
@@ -52,7 +52,7 @@
     },
     "dependencies": {
         "@apollo/client": "^3.8.3",
-        "@spiffcommerce/papyrus": "5.1.1-rc.1",
+        "@spiffcommerce/papyrus": "5.1.1-rc.2",
         "graphql": "^16.8.0",
         "lodash.clonedeep": "^4.5.0",
         "lodash.debounce": "^4.0.8",