\r\n {s.si && s.si.H2_1 !== '' && s.si.H2_1_Content !== '' && (\r\n
${s.si.H2_1}${s.si.H2_1_Content}`,\r\n }}\r\n />\r\n )}\r\n {s.si && s.si.H2_2 !== '' && s.si.H2_2_Content !== '' && (\r\n
${s.si.H2_2}${s.si.H2_2_Content}`,\r\n }}\r\n />\r\n )}\r\n {s.si && s.si.H2_3 !== '' && s.si.H2_3_Content !== '' && (\r\n
${s.si.H2_3}${s.si.H2_3_Content}`,\r\n }}\r\n />\r\n )}\r\n {s.si && s.si.H2_4 !== '' && s.si.H2_4_Content !== '' && (\r\n
${s.si.H2_4}${s.si.H2_4_Content}`,\r\n }}\r\n />\r\n )}\r\n
\r\n
\r\n )}\r\n
\r\n )}\r\n\r\n
\r\n \r\n
If you customize this product it may not qualify for fast shipping.
\r\n
\r\n \r\n \r\n \r\n Indicates the frame material that qualifies for Fast Shipping. If no\r\n icon, the product will ship with standard methods.\r\n
\r\n
\r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\nexport default ProductComponent;\r\n","import {toJS} from 'mobx';\r\nimport * as Util from '../../util';\r\nimport {DocumentSizeTierData} from '../data';\r\nimport {PCS_CSS, ProductStateShare} from '../i';\r\nimport s from '../s';\r\n\r\ndeclare var __oversized: number[];\r\n\r\nexport module r {\r\n export enum EngravedPlateStatusEnum {\r\n None = 0,\r\n Required_Gold = 1,\r\n Required_Silver = 2,\r\n Optional_Gold = 3,\r\n Optional_Silver = 4,\r\n Optional_Both = 5,\r\n Required_Black = 6,\r\n Optional_Black = 7,\r\n }\r\n export enum DYF_FrameStylesEnum {\r\n None = 0,\r\n Single_Document = 1,\r\n Double_Document = 2,\r\n Tassel = 3,\r\n Varsity = 4,\r\n Sports_Oval = 5,\r\n Portrait_Oval = 6,\r\n Campus_Scene = 7,\r\n Cameo = 8,\r\n Spirit = 9,\r\n Photo_Frame = 10,\r\n Century = 11,\r\n SpiritB = 12,\r\n }\r\n\r\n export const DocStackingSizeTiers: DocStackingSizeTiersClass[] = [\r\n {\r\n DocSizeTierID: 1,\r\n CameoRail: 2.875,\r\n DocDistance: 0.0,\r\n DocHeight: 5.0,\r\n DocWidth: 7.0,\r\n DocOverlap: 0.375,\r\n OvalRailSide: 2.25,\r\n OvalRailOvalTop: 1.75,\r\n OvalRailDocTop: 1.75,\r\n SpiritRailTopAndSides: 2.75,\r\n SpiritRailBottom: 3.25,\r\n StandardRail: 1.625,\r\n TasselRailHeight: 3.625,\r\n TasselRailWidth: 2.5,\r\n TasselGap: 1.625,\r\n TasselHeight: 9.75,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 2,\r\n CameoRail: 2.875,\r\n DocDistance: 0.0,\r\n DocHeight: 6.0,\r\n DocWidth: 8.0,\r\n DocOverlap: 0.1875,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 2.25,\r\n OvalRailDocTop: 2.625,\r\n SpiritRailTopAndSides: 2.75,\r\n SpiritRailBottom: 3.25,\r\n StandardRail: 2.625,\r\n TasselRailHeight: 3.625,\r\n TasselRailWidth: 2.5,\r\n TasselGap: 1.625,\r\n TasselHeight: 9.75,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 3,\r\n CameoRail: 2.875,\r\n DocDistance: 0.0,\r\n DocHeight: 7.0,\r\n DocWidth: 9.0,\r\n DocOverlap: 0.1875,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 2.25,\r\n OvalRailDocTop: 2.625,\r\n SpiritRailTopAndSides: 2.75,\r\n SpiritRailBottom: 3.25,\r\n StandardRail: 2.625,\r\n TasselRailHeight: 3.125,\r\n TasselRailWidth: 2.625,\r\n TasselGap: 1.375,\r\n TasselHeight: 9.75,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 4,\r\n CameoRail: 3.125,\r\n DocDistance: 0.0,\r\n DocHeight: 8.0,\r\n DocWidth: 10.0,\r\n DocOverlap: 0.1875,\r\n OvalRailSide: 2.75,\r\n OvalRailOvalTop: 3.25,\r\n OvalRailDocTop: 2.625,\r\n SpiritRailTopAndSides: 2.75,\r\n SpiritRailBottom: 3.25,\r\n StandardRail: 2.625,\r\n TasselRailHeight: 2.875,\r\n TasselRailWidth: 2.625,\r\n TasselGap: 1.375,\r\n TasselHeight: 10.25,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 5,\r\n CameoRail: 3.1875,\r\n DocDistance: 0.0,\r\n DocHeight: 8.5,\r\n DocWidth: 11.0,\r\n DocOverlap: 0.1875,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 3.75,\r\n OvalRailDocTop: 2.9375,\r\n SpiritRailTopAndSides: 2.75,\r\n SpiritRailBottom: 3.25,\r\n StandardRail: 2.6875,\r\n TasselRailHeight: 2.6875,\r\n TasselRailWidth: 2.625,\r\n TasselGap: 1.5,\r\n TasselHeight: 10.25,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 6,\r\n CameoRail: 3.1875,\r\n DocDistance: 0.0,\r\n DocHeight: 10.0,\r\n DocWidth: 12.0,\r\n DocOverlap: 0.1875,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 3.75,\r\n OvalRailDocTop: 2.9375,\r\n SpiritRailTopAndSides: 2.75,\r\n SpiritRailBottom: 3.25,\r\n StandardRail: 2.6875,\r\n TasselRailHeight: 2.6875,\r\n TasselRailWidth: 2.625,\r\n TasselGap: 1.5,\r\n TasselHeight: 10.25,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 7,\r\n CameoRail: 3.3125,\r\n DocDistance: 0.0,\r\n DocHeight: 11.0,\r\n DocWidth: 14.0,\r\n DocOverlap: 0.3125,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 3.75,\r\n OvalRailDocTop: 2.9375,\r\n SpiritRailTopAndSides: 3.0,\r\n SpiritRailBottom: 3.5,\r\n StandardRail: 3.063,\r\n TasselRailHeight: 3.063,\r\n TasselRailWidth: 2.6875,\r\n TasselGap: 1.625,\r\n TasselHeight: 10.5,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 8,\r\n CameoRail: 3.3125,\r\n DocDistance: 0.0,\r\n DocHeight: 12.0,\r\n DocWidth: 16.0,\r\n DocOverlap: 0.3125,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 3.75,\r\n OvalRailDocTop: 2.9375,\r\n SpiritRailTopAndSides: 3.0,\r\n SpiritRailBottom: 3.5,\r\n StandardRail: 3.063,\r\n TasselRailHeight: 3.063,\r\n TasselRailWidth: 2.75,\r\n TasselGap: 1.5,\r\n TasselHeight: 11.5,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 9,\r\n CameoRail: 3.3125,\r\n DocDistance: 0.0,\r\n DocHeight: 13.0,\r\n DocWidth: 17.0,\r\n DocOverlap: 0.3125,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 3.75,\r\n OvalRailDocTop: 2.9375,\r\n SpiritRailTopAndSides: 3.0,\r\n SpiritRailBottom: 3.5,\r\n StandardRail: 3.063,\r\n TasselRailHeight: 3.063,\r\n TasselRailWidth: 3.0,\r\n TasselGap: 1.5,\r\n TasselHeight: 11.5,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 10,\r\n CameoRail: 3.3125,\r\n DocDistance: 0.0,\r\n DocHeight: 14.0,\r\n DocWidth: 17.0,\r\n DocOverlap: 0.3125,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 3.75,\r\n OvalRailDocTop: 2.9375,\r\n SpiritRailTopAndSides: 3.0,\r\n SpiritRailBottom: 3.5,\r\n StandardRail: 3.313,\r\n TasselRailHeight: 3.313,\r\n TasselRailWidth: 3.25,\r\n TasselGap: 1.5,\r\n TasselHeight: 11.5,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 11,\r\n CameoRail: 3.3125,\r\n DocDistance: 0.0,\r\n DocHeight: 14.0,\r\n DocWidth: 18.0,\r\n DocOverlap: 0.3125,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 3.75,\r\n OvalRailDocTop: 2.9375,\r\n SpiritRailTopAndSides: 3.0,\r\n SpiritRailBottom: 3.5,\r\n StandardRail: 3.313,\r\n TasselRailHeight: 3.313,\r\n TasselRailWidth: 3.25,\r\n TasselGap: 1.5,\r\n TasselHeight: 11.5,\r\n TasselWidth: 1.625,\r\n },\r\n {\r\n DocSizeTierID: 12,\r\n CameoRail: 3.3125,\r\n DocDistance: 0.0,\r\n DocHeight: 16.0,\r\n DocWidth: 20.0,\r\n DocOverlap: 0.3125,\r\n OvalRailSide: 2.5,\r\n OvalRailOvalTop: 3.75,\r\n OvalRailDocTop: 2.9375,\r\n SpiritRailTopAndSides: 3.0,\r\n SpiritRailBottom: 3.5,\r\n StandardRail: 3.313,\r\n TasselRailHeight: 3.313,\r\n TasselRailWidth: 3.25,\r\n TasselGap: 1.5,\r\n TasselHeight: 11.5,\r\n TasselWidth: 1.625,\r\n },\r\n ];\r\n\r\n export class DocStackingSizeTiersClass {\r\n public DocSizeTierID: number = 0;\r\n public CameoRail: number;\r\n public DocDistance: number = 0;\r\n public DocHeight: number = 0;\r\n public DocWidth: number = 0;\r\n public DocOverlap: number;\r\n public OvalRailSide: number;\r\n public OvalRailOvalTop: number;\r\n public OvalRailDocTop: number;\r\n public SpiritRailTopAndSides: number;\r\n public SpiritRailBottom: number;\r\n public StandardRail: number;\r\n public TasselRailHeight: number = 0;\r\n public TasselRailWidth: number = 0;\r\n public TasselGap: number = 0;\r\n public TasselHeight: number = 0;\r\n public TasselWidth: number = 0;\r\n }\r\n\r\n export class DefaultPCS {\r\n public static DefaultBevel: number = 0.0393701;\r\n public static DefaultDocument: number = 1541; // Cornell\r\n public static DefaultDocWidth: number = 11;\r\n public static DefaultDocHeight: number = 8.5;\r\n public static DefaultInnerAccent: number = 385; // Gold\r\n public static DefaultInnerAccentWidth: number = 0.1875;\r\n public static DefaultInsignia: number = 2638; //Cornell Gold\r\n public static DefaultInsigniaSize: string = `220`;\r\n public static DefaultInsigniaWidthMax: number = 1.625;\r\n public static DefaultEPWidth: number = 3; // ****----____ EP-code-change ____----****'\r\n public static DefaultEPHeight: number = 1; // ****----____ EP-code-change ____----****'\r\n public static DefaultLinoID: number = 1564; // Cornell Gold industrial\r\n public static DefaultLinoWidthMax: number = 13;\r\n public static DefaultLinoHeightMax: number = 1.837;\r\n public static DefaultMaxFrameWidth: number = 550;\r\n public static DefaultMaxFrameHeight: number = 50000;\r\n public static DefaultMoulding: number = 158; // Gallery\r\n public static DefaultMouldingWidthMax: number = 2.375;\r\n public static DefaultPrimarymat: number = 337; // Black\r\n public static DefaultProductType: number = 3;\r\n }\r\n\r\n export class ProductCustomizationState {\r\n public css: PCS_CSS;\r\n public isHorizontal: boolean = true;\r\n public state_FlatImageMode: boolean = false;\r\n public MaxFrameWidthPx: number = 0;\r\n public MaxFrameHeightPx: number = 50000;\r\n public UseCommonDPI: boolean = false;\r\n public UseMaxMouldingForSizing: boolean = false;\r\n public Padding: number = 0;\r\n public debug: string;\r\n public FrameDisplay_width: number = 0;\r\n public FrameDisplay_height: number = 0;\r\n public BevelWidth: number = 0.0393701;\r\n public Base_DocumentName: string;\r\n public Base_ExtraEntityName: string;\r\n public Base_ExtraID: number = 0;\r\n public Base_ExtraHeight: number = 0;\r\n public Base_InsigniaID: number = 0;\r\n public Base_InsigniaName: string;\r\n public Base_InsigniaWidthInches: number = 0;\r\n public Base_LinoAdjustmentInches: number = 0;\r\n public Base_LinoID: number = 0;\r\n public Base_LinoName: string;\r\n public lino_dyf_color: string;\r\n public Document_Height: number = 0;\r\n public Document_Width: number = 0;\r\n public DocumentID: number = 0;\r\n public Document2_Height: number = 0;\r\n public Document2_Width: number = 0;\r\n public DYF_FrameStyleID: number = 0;\r\n public EngravedPlateID: number = 0;\r\n public EP_1: string;\r\n public EP_2: string;\r\n public EP_3: string;\r\n public EngravedPlateName: string;\r\n public HasEngravedPlate: boolean = false;\r\n public ItemID: string;\r\n public MatCombo_IsWoodFillet: boolean = false;\r\n public MouldingExtWidth: number = 0;\r\n public MouldingName: string;\r\n public MouldingWidthMax: number = 2.125;\r\n public PrimaryMatColor: string;\r\n public PrimaryMatName: string;\r\n public PrimaryMatID: number = 0;\r\n public ProductTypeID: number = 0;\r\n public SecondaryMatColor: string;\r\n public SecondaryMatID: number = 0;\r\n public SecondaryMatName: string;\r\n public InnerAccentWidth: number = 0.1875;\r\n public VL_BG_Color: string;\r\n public MouldingID: number = 0;\r\n public IsCAF: boolean = false;\r\n public SelectedCategoryMapID: number = -1;\r\n public o1: string;\r\n public o2: string;\r\n public o3: string;\r\n public o4: string;\r\n }\r\n\r\n export const getGlassPrice = (\r\n pcs: ProductCustomizationState,\r\n DocSizeTierID: number,\r\n GlassID: number,\r\n ): number => {\r\n const photo_frames = [10, 50, 56, 57, 58, 59, 60];\r\n const isPhotoFrame = photo_frames.includes(pcs.ProductTypeID);\r\n let Glass_DocSizeTierID = -0;\r\n\r\n if (isPhotoFrame) {\r\n if (DocSizeTierID === 1) {\r\n Glass_DocSizeTierID = 1;\r\n } else if (DocSizeTierID === 14) {\r\n Glass_DocSizeTierID = 14;\r\n } else if (DocSizeTierID === 2 || DocSizeTierID === 13) {\r\n Glass_DocSizeTierID = 2;\r\n } else if (DocSizeTierID >= 3 && DocSizeTierID <= 5) {\r\n Glass_DocSizeTierID = 5;\r\n } else {\r\n Glass_DocSizeTierID = 8;\r\n }\r\n } else {\r\n if (DocSizeTierID < 3 || DocSizeTierID === 13) {\r\n Glass_DocSizeTierID = 2;\r\n } else if (DocSizeTierID === 14) {\r\n Glass_DocSizeTierID = 14;\r\n } else if (DocSizeTierID >= 3 && DocSizeTierID <= 5) {\r\n Glass_DocSizeTierID = 5;\r\n } else {\r\n Glass_DocSizeTierID = 8;\r\n }\r\n }\r\n\r\n const isOversized: boolean = __oversized.includes(pcs.ProductTypeID);\r\n // console.log('isOversized', isOversized);\r\n\r\n if (isOversized) {\r\n if (Glass_DocSizeTierID === 14) {\r\n Glass_DocSizeTierID = 2;\r\n } else if (Glass_DocSizeTierID === 2) {\r\n Glass_DocSizeTierID = 5;\r\n } else if (Glass_DocSizeTierID === 5) {\r\n Glass_DocSizeTierID = 8;\r\n }\r\n }\r\n\r\n // console.log('Glass_DocSizeTierID', Glass_DocSizeTierID);\r\n\r\n let price: number = 0;\r\n if (!s.isRetail) {\r\n price = s.glass_prices.filter(\r\n x => x.GlassID === GlassID && x.DocumentSizeTierID === Glass_DocSizeTierID,\r\n )[0].Price_Wholesale;\r\n } else {\r\n price = s.glass_prices.filter(\r\n x => x.GlassID === GlassID && x.DocumentSizeTierID === Glass_DocSizeTierID,\r\n )[0].Price;\r\n }\r\n\r\n if (isOversized && GlassID !== 1) {\r\n price += 10;\r\n }\r\n\r\n return price;\r\n };\r\n\r\n export const share = async (): Promise
=> {\r\n const ps: ProductStateShare = {\r\n m0: s.pcs.moulding_id,\r\n m1: s.pcs.mat1_id,\r\n m2: s.pcs.mat2_id,\r\n i: s.pcs.insignia_id,\r\n g: s.pcs.glass_id,\r\n l: s.pcs.lino_id,\r\n e: s.pcs.ep_id,\r\n e1: s.pcs.ep1,\r\n e2: s.pcs.ep2,\r\n e3: s.pcs.ep3,\r\n o: s.pcs.is_horizontal,\r\n w1: s.pcs.docWidth,\r\n w2: s.pcs.docWidth2,\r\n h1: s.pcs.docHeight,\r\n h2: s.pcs.docHeight2,\r\n lc: s.pcs.lino_dyf_color,\r\n };\r\n\r\n const shareData = {\r\n title: `${s.si.InstName} ${s.ui.product_title}`,\r\n text: `Shared with you: ${s.si.InstName} ${s.ui.product_title} via diaplomaframe.com`,\r\n url: `${window.location.href}?k=${btoa(JSON.stringify(toJS(ps)))}`,\r\n };\r\n\r\n try {\r\n window.dataLayer.push({\r\n event: 'share',\r\n event_params: {\r\n item_id: s.prod.ItemID,\r\n method: 'product-page',\r\n content_type: 'product',\r\n },\r\n });\r\n } catch (err) {\r\n console.error(err);\r\n }\r\n\r\n // console.log(JSON.stringify(toJS(ps)).length);\r\n // console.log(encodeURIComponent(JSON.stringify(toJS(ps))).length);\r\n // console.log(shareData.url.length);\r\n try {\r\n await navigator.share(shareData);\r\n } catch (err) {\r\n console.error(err);\r\n }\r\n };\r\n\r\n export const FramePartDomain: string = `https://i.diplomaframe.com/images/entities/`;\r\n export const renderStandardPrimaryMat = (\r\n PMatWidthPX: number,\r\n PMatHeightPX: number,\r\n MaxMouldingWidthPx: number,\r\n MouldingWidthPx: number,\r\n pcs: ProductCustomizationState,\r\n ): void => {\r\n pcs.css.pmat_BackgroundImage = pmat_path(PMatWidthPX, pcs.PrimaryMatName).toLowerCase();\r\n pcs.css.pmat_width = `${PMatWidthPX.toString()}px`;\r\n pcs.css.pmat_height = `${PMatHeightPX.toString()}px`;\r\n pcs.css.pmat_backgroundSize = `${PMatWidthPX.toString()}px ${PMatHeightPX.toString()}px`;\r\n pcs.css.pmat_top = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.pmat_left = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.body_width = `${(PMatWidthPX + MouldingWidthPx * 2).toString()}px`;\r\n };\r\n export const pmat_path = (n: number, v: string): string => {\r\n let x = 'original';\r\n if (n >= 0 && n <= 320) {\r\n x = '160';\r\n } else if (n >= 321 && n <= 640) {\r\n x = '320';\r\n } else if (n >= 641 && n <= 1280) {\r\n x = '640';\r\n }\r\n return `${FramePartDomain}primarymat/v2/${v}_${x}.jpg`.toLowerCase();\r\n };\r\n\r\n export const renderStandardMoulding = (\r\n MouldingWidthPx: number,\r\n PMatWidthPx: number,\r\n PMatHeightPx: number,\r\n pcs: ProductCustomizationState,\r\n ): void => {\r\n pcs.css.m_topleft_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_topleftcorner.jpg`.toLowerCase();\r\n pcs.css.m_topleft_left = `-${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_topleft_top = `-${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_topleft_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_topright_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_toprightcorner.jpg`.toLowerCase();\r\n pcs.css.m_topright_left = `${PMatWidthPx.toString()}px`;\r\n pcs.css.m_topright_top = `-${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_topright_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_bottomleft_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_bottomleftcorner.jpg`.toLowerCase();\r\n pcs.css.m_bottomleft_left = `-${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_bottomleft_top = `${PMatHeightPx.toString()}px`;\r\n pcs.css.m_bottomleft_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_bottomright_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_bottomrightcorner.jpg`.toLowerCase();\r\n pcs.css.m_bottomright_left = `${PMatWidthPx.toString()}px`;\r\n pcs.css.m_bottomright_top = `${PMatHeightPx.toString()}px`;\r\n pcs.css.m_bottomright_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_left_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_leftside.jpg`.toLowerCase();\r\n pcs.css.m_left_left = `-${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_left_top = `0px`;\r\n pcs.css.m_left_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_left_height = `${PMatHeightPx.toString()}px`;\r\n pcs.css.m_right_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_rightside.jpg`.toLowerCase();\r\n pcs.css.m_right_left = `${PMatWidthPx.toString()}px`;\r\n pcs.css.m_right_top = `0px`;\r\n pcs.css.m_right_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_right_height = `${PMatHeightPx.toString()}px`;\r\n pcs.css.m_top_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_topside.jpg`.toLowerCase();\r\n pcs.css.m_top_left = `0px`;\r\n pcs.css.m_top_top = `-${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_top_width = `${PMatWidthPx.toString()}px`;\r\n pcs.css.m_top_height = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_bottom_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_bottomside.jpg`.toLowerCase();\r\n pcs.css.m_bottom_left = `0px`;\r\n pcs.css.m_bottom_top = `${PMatHeightPx.toString()}px`;\r\n pcs.css.m_bottom_width = `${PMatWidthPx.toString()}px`;\r\n pcs.css.m_bottom_height = `${MouldingWidthPx.toString()}px`;\r\n };\r\n\r\n export const doc_path = (\r\n n: number,\r\n DocHeightPx: number,\r\n docName: string | null,\r\n Base_ExtraEntityName: string | null,\r\n DYF_FrameStyleID: number,\r\n override: string | null,\r\n ): string => {\r\n if (override && override.length > 2 && s.ui.image_uploaded) {\r\n return override;\r\n }\r\n\r\n if (DYF_FrameStyleID === 10) {\r\n let x = n >= DocHeightPx ? `original` : `original_cropped`;\r\n if (n >= 0 && n <= 75) {\r\n x = '150';\r\n } else if (n >= 76 && n <= 175) {\r\n x = '350';\r\n }\r\n return `${FramePartDomain}photoframe_photo/v2/${Base_ExtraEntityName}${n >= DocHeightPx ? `_h_` : `_v_`}${x}.png`.toLowerCase();\r\n } else {\r\n let x = 'original';\r\n if (n >= 0 && n <= 75) {\r\n x = '150';\r\n } else if (n >= 76 && n <= 175) {\r\n x = '350';\r\n }\r\n x = '350';\r\n return `${FramePartDomain}document/v2/${docName}${n >= DocHeightPx ? `_h_` : `_v_`}${x}.png`.toLowerCase();\r\n }\r\n };\r\n export const vl_path = (n: number, VLHeightPx: number, VLName: string | null): string => {\r\n let x = 'original';\r\n if (n >= 0 && n <= 75) {\r\n x = '150';\r\n } else if (n >= 76 && n <= 175) {\r\n x = '350';\r\n }\r\n return `${FramePartDomain}varsity_letter/v2/${VLName}${n >= VLHeightPx ? `_h_` : `_v_`}${x}.png`.toLowerCase();\r\n };\r\n\r\n export const oval_path = (\r\n n: number,\r\n OvalName: string | null,\r\n DYF_FrameStyleID: number,\r\n ): string => {\r\n let x = 'original';\r\n if (n >= 0 && n <= 50) {\r\n x = '100';\r\n } else if (n >= 51 && n <= 100) {\r\n x = '200';\r\n }\r\n return `${FramePartDomain}${DYF_FrameStyleID == 5 ? `sports` : `portrait`}_oval/v2/${OvalName}_${x}.png`.toLowerCase();\r\n };\r\n\r\n export const campus_path = (Base_ExtraEntityName: string | null): string => {\r\n return `${FramePartDomain}campus_photo/v2/${Base_ExtraEntityName}_original.png`.toLowerCase();\r\n };\r\n\r\n export const cameo_path = (n: number, v: string | null): string => {\r\n let x = '300';\r\n if (n >= 0 && n <= 37) {\r\n x = '75';\r\n } else if (n >= 38 && n <= 75) {\r\n x = '150';\r\n }\r\n return `${FramePartDomain}cameo_photo/v2/${v}_${x}.png`.toLowerCase();\r\n };\r\n\r\n export const renderCollapsedPMatBevel = (pcs: ProductCustomizationState): void => {\r\n pcs.css.doc1_pmat_bevel_backgroundColor = `white`;\r\n pcs.css.doc1_pmat_bevel_left = `0px`;\r\n pcs.css.doc1_pmat_bevel_top = `0px`;\r\n pcs.css.doc1_pmat_bevel_width = ``;\r\n pcs.css.doc1_pmat_bevel_height = ``;\r\n };\r\n\r\n export const renderCollapsedSMat = (pcs: ProductCustomizationState): void => {\r\n pcs.css.doc1_smat_backgroundColor = `none`;\r\n pcs.css.doc1_smat_left = `0px`;\r\n pcs.css.doc1_smat_top = `0px`;\r\n pcs.css.doc1_smat_width = ``;\r\n pcs.css.doc1_smat_height = ``;\r\n pcs.css.doc1_smat_bevel_backgroundColor = `none`;\r\n pcs.css.doc1_smat_bevel_left = `0px`;\r\n pcs.css.doc1_smat_bevel_top = `0px`;\r\n pcs.css.doc1_smat_bevel_width = ``;\r\n pcs.css.doc1_smat_bevel_height = ``;\r\n };\r\n export const RenderStandardSMat = (\r\n BevelWidthPx: number,\r\n SMatWidthPx: number,\r\n DocWidthPx: number,\r\n DocHeightPx: number,\r\n pcs: ProductCustomizationState,\r\n ): void => {\r\n pcs.css.doc1_smat_backgroundColor = `#${pcs.SecondaryMatColor}`;\r\n pcs.css.doc1_smat_left = `${BevelWidthPx.toString()}px`;\r\n pcs.css.doc1_smat_top = `${BevelWidthPx.toString()}px`;\r\n pcs.css.doc1_smat_width = `${(DocWidthPx + SMatWidthPx * 2 + BevelWidthPx * 2).toString()}px`;\r\n pcs.css.doc1_smat_height = `${(DocHeightPx + SMatWidthPx * 2 + BevelWidthPx * 2).toString()}px`;\r\n pcs.css.doc1_smat_bevel_backgroundColor = `white`;\r\n pcs.css.doc1_smat_bevel_left = `${SMatWidthPx.toString()}px`;\r\n pcs.css.doc1_smat_bevel_top = `${SMatWidthPx.toString()}px`;\r\n pcs.css.doc1_smat_bevel_width = `${(DocWidthPx + BevelWidthPx * 2).toString()}px`;\r\n pcs.css.doc1_smat_bevel_height = `${(DocHeightPx + BevelWidthPx * 2).toString()}px`;\r\n };\r\n\r\n export const renderStandardFillet = (\r\n RailSidePx: number,\r\n RailTopPx: number,\r\n WoodFilletWidthPx: number,\r\n DocWidthPx: number,\r\n DocHeightPx: number,\r\n pcs: ProductCustomizationState,\r\n ): void => {\r\n pcs.css.f_container_left = `${(RailSidePx - WoodFilletWidthPx).toString()}px`;\r\n pcs.css.f_container_top = `${(RailTopPx - WoodFilletWidthPx).toString()}px`;\r\n pcs.css.f_container_width = `${(DocWidthPx - WoodFilletWidthPx * 2).toString()}px`;\r\n pcs.css.f_container_height = `${(DocHeightPx - WoodFilletWidthPx * 2).toString()}px`;\r\n pcs.css.f_topleft_src =\r\n `${FramePartDomain}woodfillet/v2/${pcs.SecondaryMatName}_original_topleftcorner.png`.toLowerCase();\r\n pcs.css.f_topleft_left = `0px`;\r\n pcs.css.f_topleft_top = `0px`;\r\n pcs.css.f_topleft_width = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_topright_src =\r\n `${FramePartDomain}woodfillet/v2/${pcs.SecondaryMatName}_original_toprightcorner.png`.toLowerCase();\r\n pcs.css.f_topright_left = `${(DocWidthPx + WoodFilletWidthPx).toString()}px`;\r\n pcs.css.f_topright_top = `0px`;\r\n pcs.css.f_topright_width = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_bottomleft_src =\r\n `${FramePartDomain}woodfillet/v2/${pcs.SecondaryMatName}_original_bottomleftcorner.png`.toLowerCase();\r\n pcs.css.f_bottomleft_left = `0px`;\r\n pcs.css.f_bottomleft_top = `${(DocHeightPx + WoodFilletWidthPx).toString()}px`;\r\n pcs.css.f_bottomleft_width = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_bottomright_src =\r\n `${FramePartDomain}woodfillet/v2/${pcs.SecondaryMatName}_original_bottomrightcorner.png`.toLowerCase();\r\n pcs.css.f_bottomright_left = `${(DocWidthPx + WoodFilletWidthPx).toString()}px`;\r\n pcs.css.f_bottomright_top = `${(DocHeightPx + WoodFilletWidthPx).toString()}px`;\r\n pcs.css.f_bottomright_width = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_left_src =\r\n `${FramePartDomain}woodfillet/v2/${pcs.SecondaryMatName}_original_leftside.png`.toLowerCase();\r\n pcs.css.f_left_left = `0px`;\r\n pcs.css.f_left_top = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_left_width = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_left_height = `${DocHeightPx.toString()}px`;\r\n pcs.css.f_right_src =\r\n `${FramePartDomain}woodfillet/v2/${pcs.SecondaryMatName}_original_rightside.png`.toLowerCase();\r\n pcs.css.f_right_left = `${(DocWidthPx + WoodFilletWidthPx).toString()}px`;\r\n pcs.css.f_right_top = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_right_width = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_right_height = `${DocHeightPx.toString()}px`;\r\n pcs.css.f_top_src =\r\n `${FramePartDomain}woodfillet/v2/${pcs.SecondaryMatName}_original_topside.png`.toLowerCase();\r\n pcs.css.f_top_left = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_top_top = `0px`;\r\n pcs.css.f_top_width = `${DocWidthPx.toString()}px`;\r\n pcs.css.f_top_height = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_bottom_src =\r\n `${FramePartDomain}woodfillet/v2/${pcs.SecondaryMatName}_original_bottomside.png`.toLowerCase();\r\n pcs.css.f_bottom_left = `${WoodFilletWidthPx.toString()}px`;\r\n pcs.css.f_bottom_top = `${(DocHeightPx + WoodFilletWidthPx).toString()}px`;\r\n pcs.css.f_bottom_width = `${DocWidthPx.toString()}px`;\r\n pcs.css.f_bottom_height = `${WoodFilletWidthPx.toString()}px`;\r\n };\r\n\r\n export const renderStandardInsignia = (\r\n FilletCount: number,\r\n WoodFilletWidthPx: number,\r\n PMatWidthPx: number,\r\n MaxInsigniaWidthPx: number,\r\n RailTopPx: number,\r\n BevelWidthPx: number,\r\n SMatCount: number,\r\n SMatWidthPx: number,\r\n pcs: ProductCustomizationState,\r\n ): number => {\r\n pcs.css.insignia_bot_visible = false;\r\n pcs.css.insignia_visible = pcs.Base_InsigniaID > 0;\r\n let left: number = -1;\r\n if (pcs.Base_InsigniaID > 0) {\r\n pcs.css.insignia_src = insignia_path(MaxInsigniaWidthPx, pcs.Base_InsigniaName);\r\n left = (\r\n ((\r\n Math.floor(\r\n (PMatWidthPx) / 2 - (MaxInsigniaWidthPx) / 2,\r\n )\r\n ))\r\n );\r\n pcs.css.insignia_left = `${left}px`;\r\n pcs.css.insignia_top = `${((Math.floor(((RailTopPx) - (BevelWidthPx) - (SMatCount) * ((SMatWidthPx) + (BevelWidthPx)) - (FilletCount) * ((WoodFilletWidthPx) - (BevelWidthPx))) / 2 - (MaxInsigniaWidthPx) / 2))).toString()}px`;\r\n pcs.css.insignia_width = `${MaxInsigniaWidthPx.toString()}px`;\r\n pcs.css.insignia_height = `${MaxInsigniaWidthPx.toString()}px`;\r\n pcs.css.insignia_bot = ``;\r\n }\r\n return left;\r\n };\r\n export const renderBottomInsignia = (\r\n FilletCount: number,\r\n WoodFilletWidthPx: number,\r\n PMatWidthPx: number,\r\n MaxInsigniaWidthPx: number,\r\n RailTopPx: number,\r\n BevelWidthPx: number,\r\n SMatCount: number,\r\n SMatWidthPx: number,\r\n DocHeight: number,\r\n pcs: ProductCustomizationState,\r\n ): number => {\r\n pcs.css.insignia_visible = false;\r\n pcs.css.insignia_bot_visible = pcs.Base_InsigniaID > 0;\r\n let left: number = -1;\r\n if (pcs.Base_InsigniaID > 0) {\r\n pcs.css.insignia_src = insignia_path(MaxInsigniaWidthPx, pcs.Base_InsigniaName);\r\n left = (\r\n ((\r\n Math.floor(\r\n (PMatWidthPx) / 2 - (MaxInsigniaWidthPx) / 2,\r\n )\r\n ))\r\n );\r\n pcs.css.insignia_left = `${((Math.floor((PMatWidthPx) / 2 - (MaxInsigniaWidthPx) / 2))).toString()}px`;\r\n pcs.css.insignia_bot = `${((Math.floor(((RailTopPx) - (BevelWidthPx) - (SMatCount) * ((SMatWidthPx) + (BevelWidthPx)) - (FilletCount) * ((WoodFilletWidthPx) - (BevelWidthPx))) / 2 - (MaxInsigniaWidthPx) / 2))).toString()}px`;\r\n pcs.css.insignia_top = ``;\r\n pcs.css.insignia_width = `${MaxInsigniaWidthPx.toString()}px`;\r\n pcs.css.insignia_height = `${MaxInsigniaWidthPx.toString()}px`;\r\n }\r\n return left;\r\n };\r\n export const renderBottomRightInsignia = (pcs: ProductCustomizationState): void => {\r\n pcs.css.insignia_br_visible = pcs.Base_InsigniaID > 0;\r\n if (pcs.Base_InsigniaID > 0) {\r\n let mod: number = 0.3;\r\n pcs.css.insignia_br_src =\r\n `${FramePartDomain}insignia/v2/med_full/${pcs.Base_InsigniaName}.png`.toLowerCase();\r\n pcs.css.insignia_br_right = `-${((pcs.FrameDisplay_width * mod * 0.4))}px`;\r\n pcs.css.insignia_br_bot = `-${((pcs.FrameDisplay_width * mod * 0.6))}px`;\r\n pcs.css.insignia_br_width = `${pcs.FrameDisplay_width * mod}px`;\r\n pcs.css.insignia_br_height = `${pcs.FrameDisplay_width * mod}px`;\r\n }\r\n };\r\n\r\n export const insignia_path_noBevel = (n: number, InsigniaName: string | null): string => {\r\n let x = 'med_full';\r\n if (n >= 0 && n < 220) {\r\n x = 'med_220';\r\n }\r\n return `${FramePartDomain}insignia/v2/${x}/${InsigniaName}.png`.toLowerCase();\r\n };\r\n\r\n export const insignia_path = (n: number, InsigniaName: string | null): string => {\r\n let x = 'original';\r\n if (n >= 0 && n < 25) {\r\n x = '50';\r\n } else if (n >= 26 && n < 45) {\r\n x = '90';\r\n } else if (n >= 46 && n < 110) {\r\n x = '220';\r\n } else if (n >= 111 && n < 320) {\r\n x = '640';\r\n }\r\n return `${FramePartDomain}insignia/v2/${InsigniaName}_${x}.png`.toLowerCase();\r\n };\r\n\r\n export const renderStandardLino = (\r\n FilletCount: number,\r\n WoodFilletWidthPx: number,\r\n BevelWidthPx: number,\r\n SMatCount: number,\r\n SMatWidthPx: number,\r\n RailSidePx: number,\r\n DocWidthPx: number,\r\n DocHeightPx: number,\r\n LinoWidthMaxPx: number,\r\n LinoHeightMaxPx: number,\r\n pcs: ProductCustomizationState,\r\n ): number => {\r\n pcs.css.lino_visible = pcs.Base_LinoID > 0;\r\n let linoLeft: number = -1;\r\n if (pcs.Base_LinoID > 0) {\r\n pcs.css.lino_src = lino_path(LinoWidthMaxPx, pcs);\r\n linoLeft = (\r\n ((\r\n Math.floor(\r\n (RailSidePx) +\r\n (DocWidthPx) / 2 -\r\n (LinoWidthMaxPx) / 2,\r\n )\r\n ))\r\n );\r\n pcs.css.lino_left = `${linoLeft}px`;\r\n pcs.css.lino_top = `${((RailSidePx + DocHeightPx + BevelWidthPx + SMatCount * (SMatWidthPx + BevelWidthPx) + FilletCount * WoodFilletWidthPx + Math.floor(((RailSidePx) - (BevelWidthPx) - (SMatCount) * ((SMatWidthPx) + (BevelWidthPx)) - (FilletCount) * (WoodFilletWidthPx)) / 2 - (LinoHeightMaxPx) / 2)))}px`;\r\n pcs.css.lino_width = `${LinoWidthMaxPx.toString()}px`;\r\n pcs.css.lino_height = `${LinoHeightMaxPx.toString()}px`;\r\n }\r\n return linoLeft;\r\n };\r\n\r\n export const lino_path = (n: number, pcs: ProductCustomizationState): string => {\r\n if (pcs.IsCAF || s.pcs.lino_is_dyf) {\r\n return `${FramePartDomain}linotype_caf/v2/${pcs.Base_LinoName.replace(/ /g, '_')}_${pcs.lino_dyf_color}.png`.toLowerCase();\r\n }\r\n let x = 'original';\r\n if (n >= 0 && n < 75) {\r\n x = '150';\r\n } else if (n >= 76 && n < 175) {\r\n x = '350';\r\n }\r\n return `${FramePartDomain}linotype_product/v2/${pcs.Base_LinoName}_${x}.png`.toLowerCase();\r\n };\r\n\r\n export const renderEngravedPlate = (\r\n Left: number,\r\n Top: number,\r\n EPWidthPx: number,\r\n EPHeightPx: number,\r\n BevelWidthPx: number,\r\n PMatWidthPx: number,\r\n pcs: ProductCustomizationState,\r\n ): void => {\r\n pcs.css.ep_bevel_backgroundColor = `white`;\r\n pcs.css.ep_bevel_left = `${Left.toString()}px`;\r\n pcs.css.ep_bevel_top = `${Top.toString()}px`;\r\n pcs.css.ep_bevel_width = `${(EPWidthPx + BevelWidthPx * 4).toString()}px`;\r\n pcs.css.ep_bevel_height = `${(EPHeightPx + BevelWidthPx * 4).toString()}px`;\r\n pcs.css.ep_pmat_backgroundImage =\r\n `url('${pmat_path(PMatWidthPx, pcs.PrimaryMatName)}')`.toLowerCase();\r\n pcs.css.ep_pmat_left = `${BevelWidthPx}px`;\r\n pcs.css.ep_pmat_top = `${BevelWidthPx}px`;\r\n pcs.css.ep_pmat_width = `${(EPWidthPx + BevelWidthPx * 2).toString()}px`;\r\n pcs.css.ep_pmat_height = `${(EPHeightPx + BevelWidthPx * 2).toString()}px`;\r\n pcs.css.ep_backgroundImage =\r\n `url('${FramePartDomain}engravedplate/${pcs.EngravedPlateName}_original_engravedplate.png')`.toLowerCase();\r\n pcs.css.ep_backgroundSize = `cover`;\r\n if (pcs.EngravedPlateID === 1099) {\r\n pcs.css.ep_color = `black`;\r\n } else if (pcs.EngravedPlateID === 39) {\r\n pcs.css.ep_color = `silver`;\r\n } else {\r\n pcs.css.ep_color = `gold`;\r\n }\r\n pcs.css.ep_left = `${BevelWidthPx.toString()}px`;\r\n pcs.css.ep_top = `${BevelWidthPx.toString()}px`;\r\n pcs.css.ep_width = `${EPWidthPx.toString()}px`;\r\n pcs.css.ep_height = `${EPHeightPx.toString()}px`;\r\n let EPLineCount: number = getEPLineCount(pcs);\r\n let LineHeight: number = (Math.floor((EPHeightPx) / 3));\r\n let EPTextTop: number = (\r\n ((\r\n Math.floor(\r\n ((EPHeightPx) -\r\n (EPLineCount) * (LineHeight)) /\r\n 2,\r\n )\r\n ))\r\n );\r\n pcs.css.ep_lines_top = `${EPTextTop.toString()}px`;\r\n pcs.css.ep_lines_left = `0px`;\r\n pcs.css.ep_lines_lineHeight = `${LineHeight.toString()}px`;\r\n pcs.css.ep_lines_fontSize = `${(LineHeight - 1).toString()}px`;\r\n pcs.css.ep_lines_width = `${EPWidthPx.toString()}px`;\r\n pcs.css.ep_lines_height = `${EPHeightPx.toString()}px`;\r\n if (pcs.css.lino_visible) {\r\n pcs.css.ep_visible = false;\r\n }\r\n };\r\n\r\n export const tassel_path = (n: number, TasselName: string | null): string => {\r\n let x = 'original';\r\n if (n >= 0 && n < 175) {\r\n x = '59';\r\n }\r\n return `https://i.diplomaframe.com/images/entities/tassel/v2/${TasselName}_${x}.png`.toLowerCase();\r\n };\r\n\r\n export const getEPLineCount = (pcs: ProductCustomizationState): number => {\r\n let lines = 0;\r\n if (pcs.EP_1 && !Util.isNullOrWhiteSpace(pcs.EP_1) && pcs.EP_1.length > 0) {\r\n lines += 1;\r\n }\r\n if (pcs.EP_2 && !Util.isNullOrWhiteSpace(pcs.EP_2) && pcs.EP_2.length > 0) {\r\n lines += 2;\r\n }\r\n if (pcs.EP_3 && !Util.isNullOrWhiteSpace(pcs.EP_3) && pcs.EP_3.length > 0) {\r\n lines += 3;\r\n }\r\n return lines;\r\n };\r\n\r\n export const ItemID_EndsWithNumber = (str: string): boolean => {\r\n if (Util.isNullOrWhiteSpace(str)) {\r\n return false;\r\n }\r\n var c = str.slice(-1);\r\n if (c >= '0' && c <= '9') {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n };\r\n\r\n export const Get_DocumentSizeTierID = (\r\n Width: number,\r\n Height: number,\r\n ProductTypeID: number,\r\n ): number => {\r\n if (Width > Height) {\r\n let Temp = Height;\r\n Height = Width;\r\n Width = Temp;\r\n }\r\n\r\n let id: number = 12;\r\n var arr = DocumentSizeTierData.filter(f => f.Width >= Width && f.Height >= Height);\r\n\r\n // console.log(Width, Height);\r\n // console.log(arr);\r\n\r\n if (arr.length === 1) {\r\n return arr[0].DocumentSizeTierID;\r\n } else if (arr.length > 1) {\r\n var x = arr[0];\r\n for (let i = 1; i < arr.length; i++) {\r\n var f = arr[i];\r\n if (\r\n f.Width >= Width &&\r\n f.Height >= Height &&\r\n f.Width < x.Width &&\r\n f.Height <= x.Height\r\n ) {\r\n x = f;\r\n }\r\n }\r\n id = x.DocumentSizeTierID;\r\n } else {\r\n id = 12;\r\n }\r\n\r\n return id;\r\n };\r\n\r\n export const getDocSizeTier = (pcs: ProductCustomizationState) => {\r\n let WidthLimit: number = 14;\r\n let HeightLimit: number = 14;\r\n let xDocument_Width = pcs.Document_Width;\r\n let xDocument_Height = pcs.Document_Height;\r\n\r\n if (xDocument_Width > WidthLimit) {\r\n let ratio: number = WidthLimit / xDocument_Width;\r\n xDocument_Width = WidthLimit;\r\n xDocument_Height = xDocument_Height * ratio;\r\n }\r\n if (xDocument_Height > HeightLimit) {\r\n let ratio: number = HeightLimit / xDocument_Height;\r\n xDocument_Height = HeightLimit;\r\n xDocument_Width = xDocument_Width * ratio;\r\n }\r\n\r\n // We normalized the width/height as that framestyle is driven by height. Height needs to be the smaller.\r\n let tempWidth: number = xDocument_Width;\r\n let tempHeight: number = xDocument_Height;\r\n if (tempHeight > tempWidth) {\r\n let dTemp: number = xDocument_Height;\r\n tempHeight = xDocument_Width;\r\n tempWidth = dTemp;\r\n }\r\n\r\n var arr = DocStackingSizeTiers.filter(\r\n f => f.DocWidth >= tempWidth && f.DocHeight >= tempHeight,\r\n );\r\n\r\n if (arr == null || arr.length < 1) {\r\n return DocStackingSizeTiers[DocStackingSizeTiers.length - 1];\r\n } else if (arr.length === 1) {\r\n return arr[0];\r\n } else {\r\n var x = arr[0];\r\n for (let i = 1; i < arr.length; i++) {\r\n var f = arr[i];\r\n if (\r\n f.DocWidth >= tempWidth &&\r\n f.DocHeight >= tempHeight &&\r\n f.DocWidth < x.DocWidth &&\r\n f.DocHeight <= x.DocHeight\r\n ) {\r\n x = f;\r\n }\r\n }\r\n return x;\r\n }\r\n };\r\n\r\n export const getDocSizeTier2 = (pcs: ProductCustomizationState) => {\r\n let WidthLimit: number = 14;\r\n let HeightLimit: number = 14;\r\n let xDocument2_Width = pcs.Document2_Width;\r\n let xDocument2_Height = pcs.Document2_Height;\r\n\r\n if (xDocument2_Width > WidthLimit) {\r\n let ratio: number = WidthLimit / xDocument2_Width;\r\n xDocument2_Width = WidthLimit;\r\n xDocument2_Height = xDocument2_Height * ratio;\r\n }\r\n if (xDocument2_Height > HeightLimit) {\r\n let ratio: number = HeightLimit / xDocument2_Height;\r\n xDocument2_Height = HeightLimit;\r\n xDocument2_Width = xDocument2_Width * ratio;\r\n }\r\n\r\n // We normalized the width/height as that framestyle is driven by height. Height needs to be the smaller.\r\n let tempWidth: number = xDocument2_Width;\r\n let tempHeight: number = xDocument2_Height;\r\n if (tempHeight > tempWidth) {\r\n let dTemp: number = xDocument2_Height;\r\n tempHeight = xDocument2_Width;\r\n tempWidth = dTemp;\r\n }\r\n\r\n var arr = DocStackingSizeTiers.filter(\r\n f => f.DocWidth >= tempWidth && f.DocHeight >= tempHeight,\r\n );\r\n\r\n if (arr == null || arr.length < 1) {\r\n return DocStackingSizeTiers[DocStackingSizeTiers.length - 1];\r\n } else if (arr.length === 1) {\r\n return arr[0];\r\n } else {\r\n var x = arr[0];\r\n for (let i = 1; i < arr.length; i++) {\r\n var f = arr[i];\r\n if (\r\n f.DocWidth >= tempWidth &&\r\n f.DocHeight >= tempHeight &&\r\n f.DocWidth < x.DocWidth &&\r\n f.DocHeight <= x.DocHeight\r\n ) {\r\n x = f;\r\n }\r\n }\r\n return x;\r\n }\r\n };\r\n\r\n export const linoWidthAdjust = (n: number, pcs: ProductCustomizationState): number => {\r\n if (pcs.IsCAF || pcs.MaxFrameWidthPx <= 300) {\r\n return n;\r\n }\r\n if (n > 300) {\r\n if (pcs.Document_Width >= 9 && pcs.Document_Width <= 9.9999) {\r\n return n * 0.9;\r\n } else if (pcs.Document_Width >= 10 && pcs.Document_Width <= 13.9999) {\r\n if (Util.isNullOrWhiteSpace(pcs.ItemID) && !ItemID_EndsWithNumber(pcs.ItemID)) {\r\n return n * 0.83;\r\n } else {\r\n return n * 0.9;\r\n }\r\n } else if (pcs.Document_Width >= 14 && pcs.Document_Width <= 16) {\r\n return n * 0.9;\r\n } else if (pcs.Document_Width >= 16.0001 && pcs.Document_Width <= 50) {\r\n if (Util.isNullOrWhiteSpace(pcs.ItemID) && !ItemID_EndsWithNumber(pcs.ItemID)) {\r\n return n * 0.9;\r\n } else {\r\n return n;\r\n }\r\n } else {\r\n return n * 0.9;\r\n }\r\n }\r\n return n;\r\n };\r\n\r\n export const render = (\r\n pcs: r.ProductCustomizationState,\r\n _renderType: Util.RenderType = Util.RenderType.Normal,\r\n ): PCS_CSS => {\r\n pcs.state_FlatImageMode = true;\r\n if (window.innerWidth > 1200) {\r\n pcs.MaxFrameWidthPx = DefaultPCS.DefaultMaxFrameWidth;\r\n } else if (window.innerWidth > 880) {\r\n pcs.MaxFrameWidthPx = 800;\r\n } else if (window.innerWidth > 440) {\r\n pcs.MaxFrameWidthPx = window.innerWidth * 0.9;\r\n } else if (window.innerWidth > 200) {\r\n pcs.MaxFrameWidthPx = window.innerWidth * 0.85;\r\n } else {\r\n pcs.MaxFrameWidthPx = window.innerWidth * 0.75;\r\n }\r\n pcs.MaxFrameHeightPx = DefaultPCS.DefaultMaxFrameHeight;\r\n\r\n if (_renderType === Util.RenderType.Zoom) {\r\n pcs.MaxFrameWidthPx = window.innerWidth * 0.8;\r\n pcs.MaxFrameHeightPx = window.innerHeight * 0.8;\r\n }\r\n\r\n pcs.css.insignia_bot_visible = false;\r\n pcs.Document_Width = s.pcs.docWidth;\r\n pcs.Document_Height = s.pcs.docHeight;\r\n pcs.Document2_Width = s.pcs.docWidth2;\r\n pcs.Document2_Height = s.pcs.docHeight2;\r\n pcs.isHorizontal = s.pcs.docWidth > s.pcs.docHeight;\r\n\r\n const moulding = s.prod.mouldings.filter(m => m.id === s.pcs.moulding_id)[0];\r\n if (moulding) {\r\n pcs.MouldingID = moulding.id;\r\n pcs.MouldingName = moulding.name;\r\n pcs.MouldingExtWidth = moulding.extWidth;\r\n }\r\n\r\n if (!pcs.IsCAF) {\r\n const mat = s.prod.mats.filter(m => m.id === s.pcs.matcombo_id)[0];\r\n if (mat) {\r\n pcs.MatCombo_IsWoodFillet = mat.mat2_id === 36 || mat.mat2_id === 38;\r\n pcs.PrimaryMatID = mat.mat1_id;\r\n pcs.PrimaryMatName = mat.pmat_name;\r\n pcs.PrimaryMatColor = mat.pmat_color;\r\n pcs.SecondaryMatID = mat.mat2_id;\r\n if (pcs.SecondaryMatID > 0) {\r\n pcs.SecondaryMatName = mat.smat_name;\r\n pcs.SecondaryMatColor = mat.smat_color;\r\n }\r\n }\r\n } else {\r\n const mat1 = s.prod.caf_mat1.filter(m => m.id === s.pcs.mat1_id)[0];\r\n const mat2 = s.prod.caf_mat2.filter(m => m.id === s.pcs.mat2_id)[0];\r\n if (mat1) {\r\n pcs.PrimaryMatID = mat1.id;\r\n pcs.PrimaryMatName = mat1.name;\r\n pcs.PrimaryMatColor = mat1.mat_color;\r\n } else {\r\n pcs.PrimaryMatID = -1;\r\n pcs.PrimaryMatName = '';\r\n pcs.PrimaryMatColor = '';\r\n }\r\n if (mat2) {\r\n pcs.MatCombo_IsWoodFillet = mat2.id === 36 || mat2.id === 38;\r\n pcs.SecondaryMatID = mat2.id;\r\n pcs.SecondaryMatName = mat2.name;\r\n pcs.SecondaryMatColor = mat2.mat_color;\r\n } else {\r\n pcs.SecondaryMatID = -1;\r\n pcs.SecondaryMatName = '';\r\n pcs.SecondaryMatColor = '';\r\n }\r\n }\r\n\r\n if (!s.pcs.ep_id || s.pcs.ep_id <= 0 || s.prod.EngravedPlateStatusID === 0) {\r\n pcs.HasEngravedPlate = false;\r\n } else {\r\n pcs.HasEngravedPlate = true;\r\n pcs.EngravedPlateID = s.pcs.ep_id;\r\n if (s.pcs.ep_id === 37) {\r\n pcs.EngravedPlateName = 'EP_Gold';\r\n } else if (s.pcs.ep_id === 39) {\r\n pcs.EngravedPlateName = 'EP_Silver';\r\n } else {\r\n pcs.EngravedPlateName = 'EP_Black';\r\n }\r\n pcs.EP_1 = s.pcs.ep1;\r\n pcs.EP_2 = s.pcs.ep2;\r\n pcs.EP_3 = s.pcs.ep3;\r\n }\r\n\r\n pcs.Base_LinoID = s.pcs.lino_id;\r\n pcs.Base_LinoName = s.pcs.lino_base_name;\r\n pcs.lino_dyf_color = s.pcs.lino_dyf_color;\r\n pcs.Base_InsigniaID = s.pcs.insignia_id;\r\n pcs.Base_InsigniaName = s.pcs.insignia_base_name;\r\n\r\n if (\r\n s.prod.allowUpload1 &&\r\n s.ui.image_uploaded &&\r\n s.pcs.image_upload_hash3 &&\r\n s.pcs.image_upload_hash3.length > 2 &&\r\n s.pcs.override_d1_img &&\r\n s.pcs.override_d1_img.length > 5\r\n ) {\r\n pcs.o3 = s.pcs.override_d1_img;\r\n }\r\n\r\n pcs.UseCommonDPI =\r\n (pcs.MaxFrameWidthPx == 220 && pcs.MaxFrameHeightPx == 250) ||\r\n pcs.MaxFrameWidthPx == 308;\r\n pcs.UseMaxMouldingForSizing = false;\r\n\r\n pcs.Base_ExtraID = s.prod.ExtraEntityID;\r\n pcs.Base_ExtraEntityName = s.prod.ExtraEntityName;\r\n\r\n if (s.prod.CustomizationMethod === 1) {\r\n render_old_style(pcs, _renderType);\r\n pcs.css.frame_display_width = pcs.FrameDisplay_width;\r\n pcs.css.frame_display_height = pcs.FrameDisplay_height;\r\n return {...pcs.css};\r\n } else if (s.prod.CustomizationMethod < 1) {\r\n pcs.css.frame_display_width = pcs.FrameDisplay_width;\r\n pcs.css.frame_display_height = pcs.FrameDisplay_height;\r\n return {...pcs.css};\r\n }\r\n\r\n if (\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Single_Document ||\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Photo_Frame ||\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Spirit ||\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.SpiritB ||\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Cameo\r\n ) {\r\n renderSingleDocFrame(pcs);\r\n } else if (s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Tassel) {\r\n renderTasselFrame(pcs);\r\n } else if (\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Double_Document ||\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Campus_Scene\r\n ) {\r\n renderDoubleDoc(pcs);\r\n } else if (s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Varsity) {\r\n renderVarsity(pcs);\r\n } else if (\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Sports_Oval ||\r\n s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Portrait_Oval\r\n ) {\r\n renderOvalFrame(pcs);\r\n } else if (s.prod.DYF_FrameStyleID === DYF_FrameStylesEnum.Century) {\r\n renderCentury(pcs);\r\n }\r\n\r\n pcs.css.frame_display_width = pcs.FrameDisplay_width;\r\n pcs.css.frame_display_height = pcs.FrameDisplay_height;\r\n\r\n return {...pcs.css};\r\n };\r\n\r\n export const render_old_style = (\r\n pcs: r.ProductCustomizationState,\r\n _renderType: Util.RenderType,\r\n ) => {\r\n let MouldingWidthPx: number =\r\n s.prod.MouldingThickness === 1 ? 21 : s.prod.MouldingThickness === 2 ? 63 : 42;\r\n\r\n const largept = [2, 6, 8, 44, 45, 46, 47, 59, 64, 9, 19, 9, 60];\r\n\r\n // if(largept.includes[s.prod.ProductTypeID] && !s.prod.OrientationHorizontal){\r\n // MouldingWidthPx = 16;\r\n // } else if(largept.includes[s.prod.ProductTypeID]){\r\n // MouldingWidthPx = 16;\r\n // } else\r\n\r\n if (\r\n s.prod.MouldingExtWidth <= 1.375 ||\r\n s.prod.MouldingID == 146 ||\r\n !s.prod.OrientationHorizontal\r\n ) {\r\n MouldingWidthPx = 22;\r\n } else if (s.prod.MouldingExtWidth < 2) {\r\n MouldingWidthPx = 32;\r\n } else {\r\n MouldingWidthPx = 50;\r\n }\r\n pcs.css.moulding_width = MouldingWidthPx;\r\n pcs.css.moulding_half = MouldingWidthPx / 2;\r\n\r\n pcs.css.m_topleft_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_topleftcorner.jpg`.toLowerCase();\r\n pcs.css.m_topleft_left = `0`;\r\n pcs.css.m_topleft_top = `0`;\r\n pcs.css.m_topleft_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_topright_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_toprightcorner.jpg`.toLowerCase();\r\n pcs.css.m_topright_left = ``;\r\n pcs.css.m_topright_top = `0`;\r\n pcs.css.m_topright_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_bottomleft_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_bottomleftcorner.jpg`.toLowerCase();\r\n pcs.css.m_bottomleft_left = `0`;\r\n pcs.css.m_bottomleft_top = `inherit`;\r\n pcs.css.m_bottomleft_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_bottomright_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_bottomrightcorner.jpg`.toLowerCase();\r\n pcs.css.m_bottomright_left = `inherit`;\r\n pcs.css.m_bottomright_top = `inherit`;\r\n pcs.css.m_bottomright_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_left_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_leftside.jpg`.toLowerCase();\r\n pcs.css.m_left_left = `0`;\r\n pcs.css.m_left_top = `0`;\r\n pcs.css.m_left_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_left_height = `100%`;\r\n pcs.css.m_right_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_rightside.jpg`.toLowerCase();\r\n pcs.css.m_right_left = `inherit`;\r\n pcs.css.m_right_top = `0`;\r\n pcs.css.m_right_width = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_right_height = `100%`;\r\n pcs.css.m_top_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_topside.jpg`.toLowerCase();\r\n pcs.css.m_top_left = `0px`;\r\n pcs.css.m_top_top = `0`;\r\n // pcs.css.m_top_width = `${PMatWidthPx.toString()}px`;\r\n pcs.css.m_top_height = `${MouldingWidthPx.toString()}px`;\r\n pcs.css.m_bottom_src =\r\n `${FramePartDomain}moulding/v2/${pcs.MouldingName}_original_bottomside.jpg`.toLowerCase();\r\n pcs.css.m_bottom_left = `0px`;\r\n pcs.css.m_bottom_top = `inherit`;\r\n // pcs.css.m_bottom_width = `${PMatWidthPx.toString()}px`;\r\n pcs.css.m_bottom_height = `${MouldingWidthPx.toString()}px`;\r\n\r\n return true;\r\n };\r\n\r\n const renderSingleDocFrame = (pcs: r.ProductCustomizationState): void => {\r\n let CurrentDocWidth: number = 0;\r\n let CurrentDocHeight: number = 0;\r\n let DocSizeTier = r.getDocSizeTier(pcs);\r\n let WidthLimit: number = 14;\r\n let HeightLimit: number = 14;\r\n\r\n if (pcs.Document_Width > WidthLimit) {\r\n let ratio: number = WidthLimit / pcs.Document_Width;\r\n pcs.Document_Width = WidthLimit;\r\n pcs.Document_Height = pcs.Document_Height * ratio;\r\n }\r\n if (pcs.Document_Height > HeightLimit) {\r\n let ratio: number = HeightLimit / pcs.Document_Height;\r\n pcs.Document_Height = HeightLimit;\r\n pcs.Document_Width = pcs.Document_Width * ratio;\r\n }\r\n CurrentDocWidth = pcs.Document_Width;\r\n CurrentDocHeight = pcs.Document_Height;\r\n\r\n let filletCount: number = pcs.MatCombo_IsWoodFillet ? 1 : 0;\r\n let SMatCount: number = !pcs.MatCombo_IsWoodFillet && pcs.SecondaryMatID > 0 ? 1 : 0;\r\n let SMatWidthPixelAdder: number = 1;\r\n\r\n // rail Setup\r\n // - Rail includes: Inner Mat and all mat bevels.\r\n // - The primary mat is actually the inner mat on single document frames\r\n // - The document \"underlaps\" the inner mat. See DocSizeTier.DocOverLap\r\n // - The mats are overlapped by the moulding by 0.25\r\n // - From this point forward, rail will be defined as all visible portions of mats including bevels (we are subtracting out the 0.25 of moulding overlap)\r\n let MouldingOverlap: number = 0.25;\r\n let RailTop: number = (DocSizeTier.StandardRail) - MouldingOverlap;\r\n let RailSide: number = (DocSizeTier.StandardRail) - MouldingOverlap;\r\n if (pcs.DYF_FrameStyleID == (r.DYF_FrameStylesEnum.Cameo)) {\r\n RailTop = (DocSizeTier.CameoRail) - MouldingOverlap;\r\n RailSide = (DocSizeTier.CameoRail) - MouldingOverlap;\r\n }\r\n // else if (pcs.DYF_FrameStyleID == (r.DYF_FrameStylesEnum.Photo_Frame) && pcs.Document_Width <= 10) {\r\n // RailTop = 1.625 - MouldingOverlap;\r\n // RailSide = 1.625 - MouldingOverlap;\r\n // }\r\n // Dim RailSize = CDec(DocSizeTier.CameoRail) - MouldingOverlap\r\n // insignia Adjustments\r\n let InsigniaWidth =\r\n pcs.Base_InsigniaWidthInches > 0\r\n ? pcs.Base_InsigniaWidthInches\r\n : r.DefaultPCS.DefaultInsigniaWidthMax;\r\n // if (ProductID == 35808) { var sql = $\"INSERT INTO BackendLogV2 VALUES (0, 18006, 138, GETUTCDATE(), 1, {ProductID}, 999, 999, 999, '34.192.96.123', '1: {InsigniaWidth}');\"; data.fn.ExecuteSQL(sql); }\r\n if (\r\n pcs.DYF_FrameStyleID == (r.DYF_FrameStylesEnum.Spirit) ||\r\n pcs.DYF_FrameStyleID == (r.DYF_FrameStylesEnum.SpiritB)\r\n ) {\r\n if (pcs.Base_InsigniaWidthInches > 1.9) {\r\n } else if (CurrentDocWidth < 10 && CurrentDocHeight < 10) {\r\n InsigniaWidth = Math.min(r.DefaultPCS.DefaultInsigniaWidthMax, RailTop - 0.5);\r\n // if (ProductID == 35808) { var sql = $\"INSERT INTO BackendLogV2 VALUES (0, 18006, 138, GETUTCDATE(), 1, {ProductID}, 999, 999, 999, '34.192.96.123', '2a: {InsigniaWidth}');\"; data.fn.ExecuteSQL(sql); }\r\n } else if (CurrentDocWidth < 10 || CurrentDocHeight < 10) {\r\n InsigniaWidth = Math.min(r.DefaultPCS.DefaultInsigniaWidthMax, RailTop - 0.4);\r\n // if (ProductID == 35808) { var sql = $\"INSERT INTO BackendLogV2 VALUES (0, 18006, 138, GETUTCDATE(), 1, {ProductID}, 999, 999, 999, '34.192.96.123', '2b: {DefaultPCS.DefaultInsigniaWidthMax}:{RailTop}');\"; data.fn.ExecuteSQL(sql); }\r\n }\r\n } else {\r\n InsigniaWidth =\r\n CurrentDocWidth < 10 && CurrentDocHeight < 10\r\n ? Math.min(r.DefaultPCS.DefaultInsigniaWidthMax, RailTop - 0.5)\r\n : InsigniaWidth;\r\n // if (ProductID == 35808) { var sql = $\"INSERT INTO BackendLogV2 VALUES (0, 18006, 138, GETUTCDATE(), 1, {ProductID}, 999, 999, 999, '34.192.96.123', '2c: {InsigniaWidth}');\"; data.fn.ExecuteSQL(sql); }\r\n }\r\n InsigniaWidth =\r\n DocSizeTier.DocSizeTierID >= 7 && pcs.Base_InsigniaWidthInches < 1 ? 2 : InsigniaWidth;\r\n // if (ProductID == 35808) { var sql = $\"INSERT INTO BackendLogV2 VALUES (0, 18006, 138, GETUTCDATE(), 1, {ProductID}, 999, 999, 999, '34.192.96.123', '3: {InsigniaWidth}');\"; data.fn.ExecuteSQL(sql); }\r\n // lino\r\n let LinoWidthMax: number =\r\n Math.min(r.DefaultPCS.DefaultLinoWidthMax, CurrentDocWidth + 1) +\r\n pcs.Base_LinoAdjustmentInches;\r\n LinoWidthMax = r.linoWidthAdjust(LinoWidthMax, pcs);\r\n let LinoHeightMax: number = r.DefaultPCS.DefaultLinoHeightMax * (LinoWidthMax / 11.5);\r\n // ****----____ EP-code-change ____----****\r\n let EPWidth: number = r.DefaultPCS.DefaultEPWidth;\r\n let EPHeight: number = r.DefaultPCS.DefaultEPHeight;\r\n if (CurrentDocHeight <= 7) {\r\n EPWidth = 3;\r\n EPHeight = 0.5;\r\n }\r\n // ****----____ EP-code-change ____----****\r\n let TotalWidth: number =\r\n RailSide * 2 +\r\n CurrentDocWidth +\r\n (pcs.UseMaxMouldingForSizing ? pcs.MouldingWidthMax * 2 : pcs.MouldingExtWidth * 2);\r\n let DPI: number = (Math.floor((pcs.MaxFrameWidthPx + 4) / TotalWidth)); // add 4. Yes, it's cheating, but we always round down and actually have a bit more room to work with.\r\n\r\n let done: boolean = false;\r\n let BevelWidthPx: number = -1;\r\n let DocWidthPx: number = -1;\r\n let DocHeightPx: number = -1;\r\n // ****----____ EP-code-change ____----****\r\n let EPWidthPx: number = -1;\r\n let EPHeightPx: number = -1;\r\n // ****----____ EP-code-change ____----****\r\n let MaxInsigniaWidthPx: number = -1;\r\n let LinoWidthMaxPx: number = -1;\r\n let LinoHeightMaxPx: number = -1;\r\n let MouldingWidthPx: number = -1;\r\n let MaxMouldingWidthPx: number = -1;\r\n let SMatWidthPx: number = -1;\r\n let RailSidePx: number = -1;\r\n let RailTopPx: number = -1;\r\n if (pcs.MaxFrameWidthPx <= 250 && SMatWidthPx > 2) {\r\n SMatWidthPx = 2;\r\n }\r\n let TotalUsedWidthPx: number = -1;\r\n let TotalUsedWidthPx_NoMargin: number = -1;\r\n let MaxSingleDocRailWidthPx: number = -1;\r\n let MaxPossibleSingleDocWidthPx: number = -1;\r\n let MaxPossibleSingleDocHeightPx: number = -1;\r\n let PMatWidthPx: number = -1;\r\n let TotalUsedHeightPx: number = -1;\r\n let TotalUsedHeightPx_NoMargin: number = 1;\r\n let PMatHeightPx: number = -1;\r\n let WoodFilletWidthPx: number = -1;\r\n\r\n while (!done) {\r\n BevelWidthPx = Math.max(1, (Math.round(pcs.BevelWidth * 2 * DPI))); // double bevel width. It was too small.\r\n DocWidthPx = (\r\n (Math.round((CurrentDocWidth - (DocSizeTier.DocOverlap)) * DPI))\r\n );\r\n DocHeightPx = (\r\n (Math.round((CurrentDocHeight - (DocSizeTier.DocOverlap)) * DPI))\r\n );\r\n // ****----____ EP-code-change ____----****\r\n EPWidthPx = ((EPWidth * DPI));\r\n EPHeightPx = ((EPHeight * DPI));\r\n // ****----____ EP-code-change ____----****\r\n MaxInsigniaWidthPx = (Math.round(InsigniaWidth * DPI));\r\n LinoWidthMaxPx = (Math.round(LinoWidthMax * DPI));\r\n LinoHeightMaxPx = (Math.round(LinoHeightMax * DPI));\r\n MouldingWidthPx = (Math.round(pcs.MouldingExtWidth * DPI));\r\n MaxMouldingWidthPx = (Math.round(pcs.MouldingWidthMax * DPI));\r\n pcs.Padding = MaxMouldingWidthPx - MouldingWidthPx;\r\n SMatWidthPx =\r\n Math.max(\r\n 1,\r\n (Math.floor((pcs.InnerAccentWidth - pcs.BevelWidth) * DPI)),\r\n ) + SMatWidthPixelAdder; // innerAccentWidth includes bevel. We take bevel out here as we convert to pixels. Adding +1 pixel here. We might have to loop back and adjust DPI down\r\n RailSidePx =\r\n (Math.round(RailSide * DPI)) +\r\n SMatWidthPixelAdder * SMatCount +\r\n filletCount * (BevelWidthPx * 2 + SMatWidthPx); // we add the smat pixel adder because this adder is not accounted for in the core rail size specs. Also, if it is a wood fillet, we must add the wood fillet to the rail size since the fillet is additive\r\n RailTopPx =\r\n (Math.round(RailTop * DPI)) +\r\n SMatWidthPixelAdder * SMatCount +\r\n filletCount * (BevelWidthPx * 2 + SMatWidthPx);\r\n if (pcs.MaxFrameWidthPx <= 250 && SMatWidthPx > 2) {\r\n SMatWidthPx = 2;\r\n } // Cap SMat at 2px for images at or below 250px// Cap SMat at 2px for images at or below 250px\r\n TotalUsedWidthPx = RailSidePx * 2 + DocWidthPx + MaxMouldingWidthPx * 2;\r\n TotalUsedWidthPx_NoMargin = RailSidePx * 2 + DocWidthPx + MouldingWidthPx * 2;\r\n // calculate the maximum possible width of a single doc frame with this document size. This is used to establish a common DPI across all single docs when UseCommonDPI is set to true\r\n MaxSingleDocRailWidthPx = Math.max(\r\n (\r\n ((\r\n Math.round(((DocSizeTier.CameoRail) - MouldingOverlap) * DPI)\r\n ))\r\n ) + SMatWidthPixelAdder,\r\n (\r\n ((\r\n Math.round(\r\n ((DocSizeTier.StandardRail) - MouldingOverlap) * DPI,\r\n )\r\n ))\r\n ) +\r\n SMatWidthPixelAdder +\r\n (BevelWidthPx * 2 + SMatWidthPx),\r\n ); // we use the larger cameo rail for this calculation. Also, compare against standard rail + fillet. Take the largest\r\n MaxPossibleSingleDocWidthPx =\r\n MaxSingleDocRailWidthPx * 2 + DocWidthPx + MaxMouldingWidthPx * 2;\r\n MaxPossibleSingleDocHeightPx =\r\n MaxSingleDocRailWidthPx * 2 + DocHeightPx + MaxMouldingWidthPx * 2;\r\n PMatWidthPx = TotalUsedWidthPx - MaxMouldingWidthPx * 2; // refers to the outer width, not the width of an individual side\r\n TotalUsedHeightPx = RailTopPx * 2 + DocHeightPx + MaxMouldingWidthPx * 2;\r\n TotalUsedHeightPx_NoMargin = RailTopPx * 2 + DocHeightPx + MouldingWidthPx * 2;\r\n PMatHeightPx = TotalUsedHeightPx - MaxMouldingWidthPx * 2; // refers to the outer width, not the width of an individual side\r\n WoodFilletWidthPx = BevelWidthPx * 2 + SMatWidthPx;\r\n\r\n if (DocHeightPx > DocWidthPx && pcs.UseCommonDPI) {\r\n if (MaxPossibleSingleDocHeightPx > pcs.MaxFrameWidthPx) {\r\n DPI -= 1;\r\n done = false;\r\n } else {\r\n done = true;\r\n }\r\n } else {\r\n if (\r\n (pcs.UseCommonDPI ? MaxPossibleSingleDocWidthPx : TotalUsedWidthPx_NoMargin) >\r\n pcs.MaxFrameWidthPx ||\r\n (pcs.UseCommonDPI ? TotalUsedHeightPx : TotalUsedHeightPx_NoMargin) >\r\n pcs.MaxFrameHeightPx\r\n ) {\r\n DPI -= 1;\r\n done = false;\r\n } else {\r\n done = true;\r\n }\r\n }\r\n }\r\n\r\n // check width, look back with new dpi if necessary\r\n pcs.FrameDisplay_width = TotalUsedWidthPx;\r\n pcs.FrameDisplay_height = TotalUsedHeightPx;\r\n // primary mat\r\n r.renderStandardPrimaryMat(\r\n PMatWidthPx,\r\n PMatHeightPx,\r\n MaxMouldingWidthPx,\r\n MouldingWidthPx,\r\n pcs,\r\n );\r\n r.renderStandardMoulding(MouldingWidthPx, PMatWidthPx, PMatHeightPx, pcs);\r\n // secondary mat\r\n pcs.css.fillet_visible = filletCount > 0;\r\n if (SMatCount > 0) {\r\n // if there is an inner accent, then the outer mat \"pulls back\" to make room for the inner mat\r\n pcs.css.doc1_pmat_bevel_backgroundColor = `white`;\r\n pcs.css.doc1_pmat_bevel_left = `${(RailSidePx - SMatWidthPx - BevelWidthPx * 2).toString()}px`;\r\n pcs.css.doc1_pmat_bevel_top = `${(RailTopPx - SMatWidthPx - BevelWidthPx * 2).toString()}px`;\r\n pcs.css.doc1_pmat_bevel_width = `${DocWidthPx + 2 * (BevelWidthPx * 2 + SMatWidthPx)}px`;\r\n pcs.css.doc1_pmat_bevel_height = `${DocHeightPx + 2 * (BevelWidthPx * 2 + SMatWidthPx)}px`;\r\n // console.log(BevelWidthPx, SMatWidthPx, DocWidthPx, DocHeightPx);\r\n r.RenderStandardSMat(BevelWidthPx, SMatWidthPx, DocWidthPx, DocHeightPx, pcs);\r\n pcs.css.doc1_src = r.doc_path(\r\n DocWidthPx,\r\n DocHeightPx,\r\n pcs.Base_DocumentName,\r\n pcs.Base_ExtraEntityName,\r\n pcs.DYF_FrameStyleID,\r\n pcs.o3,\r\n );\r\n pcs.css.doc1_left = `${BevelWidthPx.toString()}px`;\r\n pcs.css.doc1_top = `${BevelWidthPx.toString()}px`;\r\n pcs.css.doc1_width = `${DocWidthPx.toString()}px`;\r\n pcs.css.doc1_height = `${DocHeightPx.toString()}px`;\r\n } else if (filletCount > 0) {\r\n // turn off inner mat pieces\r\n pcs.css.doc1_pmat_bevel_backgroundColor = `white`;\r\n pcs.css.doc1_pmat_bevel_left = `0px`;\r\n pcs.css.doc1_pmat_bevel_top = `0px`;\r\n pcs.css.doc1_pmat_bevel_width = ``;\r\n pcs.css.doc1_pmat_bevel_height = ``;\r\n r.renderCollapsedSMat(pcs);\r\n r.renderStandardFillet(\r\n RailSidePx,\r\n RailTopPx,\r\n WoodFilletWidthPx,\r\n DocWidthPx,\r\n DocHeightPx,\r\n pcs,\r\n );\r\n pcs.css.doc1_src = r.doc_path(\r\n DocWidthPx,\r\n DocHeightPx,\r\n pcs.Base_DocumentName,\r\n pcs.Base_ExtraEntityName,\r\n pcs.DYF_FrameStyleID,\r\n pcs.o3,\r\n );\r\n pcs.css.doc1_left = `${RailSidePx.toString()}px`;\r\n pcs.css.doc1_top = `${RailTopPx.toString()}px`;\r\n pcs.css.doc1_width = `${DocWidthPx.toString()}px`;\r\n pcs.css.doc1_height = `${DocHeightPx.toString()}px`;\r\n } else {\r\n pcs.css.doc1_pmat_bevel_backgroundColor = `white`;\r\n pcs.css.doc1_pmat_bevel_left = `${(RailSidePx - BevelWidthPx).toString()}px`;\r\n pcs.css.doc1_pmat_bevel_top = `${(RailTopPx - BevelWidthPx).toString()}px`;\r\n pcs.css.doc1_pmat_bevel_width = `${(DocWidthPx + BevelWidthPx * 2).toString()}px`;\r\n pcs.css.doc1_pmat_bevel_height = `${(DocHeightPx + BevelWidthPx * 2).toString()}px`;\r\n r.renderCollapsedSMat(pcs);\r\n pcs.css.doc1_src = r.doc_path(\r\n DocWidthPx,\r\n DocHeightPx,\r\n pcs.Base_DocumentName,\r\n pcs.Base_ExtraEntityName,\r\n pcs.DYF_FrameStyleID,\r\n pcs.o3,\r\n );\r\n pcs.css.doc1_left = `${BevelWidthPx.toString()}px`;\r\n pcs.css.doc1_top = `${BevelWidthPx.toString()}px`;\r\n pcs.css.doc1_width = `${DocWidthPx.toString()}px`;\r\n pcs.css.doc1_height = `${DocHeightPx.toString()}px`;\r\n }\r\n // insignia\r\n let insLeft: number = r.renderStandardInsignia(\r\n filletCount,\r\n WoodFilletWidthPx,\r\n PMatWidthPx,\r\n MaxInsigniaWidthPx,\r\n RailTopPx,\r\n BevelWidthPx,\r\n SMatCount,\r\n SMatWidthPx,\r\n pcs,\r\n );\r\n // lino\r\n let linoLeft: number = -1;\r\n if (filletCount > 0) {\r\n pcs.css.lino_visible = pcs.Base_LinoID > 0;\r\n if (pcs.Base_LinoID != 0) {\r\n pcs.css.lino_src = r.lino_path(LinoWidthMaxPx, pcs);\r\n pcs.css.lino_left = `${(Math.floor((RailSidePx) + (DocWidthPx) / 2 - (LinoWidthMaxPx) / 2))}px`;\r\n pcs.css.lino_top = `${((RailSidePx + DocHeightPx + filletCount * WoodFilletWidthPx + Math.floor(((RailSidePx) - (filletCount) * (WoodFilletWidthPx)) / 2 - (LinoHeightMaxPx) / 2)))}px`;\r\n pcs.css.lino_width = `${LinoWidthMaxPx.toString()}px`;\r\n pcs.css.lino_height = `${LinoHeightMaxPx.toString()}px`;\r\n }\r\n } else {\r\n linoLeft = r.renderStandardLino(\r\n filletCount,\r\n WoodFilletWidthPx,\r\n BevelWidthPx,\r\n SMatCount,\r\n SMatWidthPx,\r\n RailSidePx,\r\n DocWidthPx,\r\n DocHeightPx,\r\n LinoWidthMaxPx,\r\n LinoHeightMaxPx,\r\n pcs,\r\n );\r\n }\r\n // ep\r\n pcs.css.ep_visible = pcs.HasEngravedPlate;\r\n if (pcs.HasEngravedPlate) {\r\n let EPTopPx: number =\r\n (\r\n (RailSidePx +\r\n DocHeightPx +\r\n BevelWidthPx +\r\n SMatCount * (SMatWidthPx + BevelWidthPx) +\r\n filletCount * WoodFilletWidthPx)\r\n ) +\r\n (\r\n ((\r\n Math.floor(\r\n ((RailSidePx) -\r\n (BevelWidthPx) -\r\n (SMatCount) *\r\n ((SMatWidthPx) + (BevelWidthPx)) -\r\n (filletCount) * (WoodFilletWidthPx)) /\r\n 2 -\r\n (EPHeightPx) / 2,\r\n )\r\n ))\r\n ) -\r\n BevelWidthPx * 2;\r\n let EPLeftPx: number =\r\n (\r\n ((\r\n Math.floor(\r\n (RailSidePx) +\r\n (DocWidthPx) / 2 -\r\n (EPWidthPx) / 2,\r\n )\r\n ))\r\n ) -\r\n BevelWidthPx * 2;\r\n r.renderEngravedPlate(\r\n EPLeftPx,\r\n EPTopPx,\r\n EPWidthPx,\r\n EPHeightPx,\r\n BevelWidthPx,\r\n PMatWidthPx,\r\n pcs,\r\n );\r\n }\r\n if (pcs.DYF_FrameStyleID == (r.DYF_FrameStylesEnum.Cameo)) {\r\n pcs.css.insignia_visible = false;\r\n pcs.css.cameo_visible = true;\r\n let CameoWidth: number = 4.75;\r\n let CameoHeight: number = 1.9;\r\n let CameoWidthPx: number = (Math.floor(CameoWidth * DPI)); // Cameo expands out to cover the missing inner accent space if no inner accent\r\n let CameoHeightPx: number = (Math.floor(CameoHeight * DPI));\r\n pcs.css.cameo_pmat_bevel_backgroundColor = `white`;\r\n pcs.css.cameo_pmat_bevel_left = `${(