// Define the type for the element being added interface Element { id: string; type: string; name: string; opacity: number; visible: boolean; selectable: boolean; removable: boolean; alwaysOnTop: boolean; showInExport: boolean; x: number; y: number; width: number; height: number; rotation: number; animations?: any[]; blurEnabled?: boolean; blurRadius?: number; brightnessEnabled?: boolean; brightness?: number; sepiaEnabled?: boolean; grayscaleEnabled?: boolean; shadowEnabled?: boolean; shadowBlur?: number; shadowOffsetX?: number; shadowOffsetY?: number; shadowColor?: string; shadowOpacity?: number; draggable?: boolean; resizable?: boolean; contentEditable: boolean; styleEditable: boolean; subType?: string; fill?: string; dash?: any[]; custom?: any; strokeWidth?: number; stroke?: string; cornerRadius?: number; text?: string; placeholder?: string; fontSize?: number; fontFamily?: string; fontStyle?: string; fontWeight?: string; textDecoration?: string; align?: string; verticalAlign?: string; lineHeight?: number; letterSpacing?: number; backgroundEnabled?: boolean; backgroundColor?: string; backgroundOpacity?: number; backgroundCornerRadius?: number; backgroundPadding?: number; src?: string; cropX?: number; cropY?: number; cropWidth?: number; cropHeight?: number; flipX?: boolean; flipY?: boolean; clipSrc?: string; borderSize?: number; keepRatio?: boolean; } // Define the type for the page interface Page { addElement: (element: Element) => void; } // Define the type for the store interface Store { width: number; height: number; pages: Page[]; history: { clear: () => void; }; } export const addRestrictedAreaToSnapPackMailer = (store: Store, barcodeSrc: string): void => { const page = store.pages[0]; const pageTwo = store.pages[1]; const elements: Element[] = [ { id: "left-p1", type: "figure", name: "left-p1", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 2.930e-14, y: -1.42e-14, width: 23.83, height: 1062.31, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(255,255,255,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 0 }, { id: "right-p1", type: "figure", name: "right-p1", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 792.166, y: 11.809, width: 23.83, height: 1062.31, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(255,255,255,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 0 }, { id: "top-p1", type: "figure", name: "top-p1", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 938.95, y: -0.1065, width: 23.833, height: 1062.31, rotation: 90, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(255,255,255,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 0 }, { id: "bottom-p1", type: "figure", name: "bottom-p1", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 920.867, y: 1031.583, width: 23.83, height: 1062.31, rotation: 90, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(255,255,255,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 0 }, { id: "mailing-address-window-box-1", type: "figure", name: "mailing-address-window-box-1", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 60, y: 375, width: 360, height: 185, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(233,233,233,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 16, custom: { replaceBg: true, preFill: "rgba(233,233,233,1)", postFill: "white" }, }, { id: "mailing-address-window-text-1", type: "text", name: "mailing-address", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: false, x: 35, y: 455, width: 408, height: 31, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, text: "Mailing Address Window", placeholder: "", fontSize: 25, fontFamily: "Roboto", fontStyle: "italic", fontWeight: "normal", textDecoration: "", fill: "black", align: "center", verticalAlign: "top", strokeWidth: 0, stroke: "black", lineHeight: 1.2, letterSpacing: 0, backgroundEnabled: false, backgroundColor: "#7ED321", backgroundOpacity: 1, backgroundCornerRadius: 0.5, backgroundPadding: 0.5 }, { id: "recipient-address-area", type: "figure", name: "recipient-address-area", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, custom: { replaceBg: true, preFill: 'rgba(193,193,193,1)' }, x: 96.48, y: 893.82, width: 286.86, height: 97.13, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: true, resizable: true, contentEditable: true, styleEditable: true, subType: "rect", fill: "rgba(193,193,193,1)", dash: [], strokeWidth: 1, stroke: "#0c0c0c", cornerRadius: 16 }, { id: 'recipient-address-box', type: 'figure', name: 'recipient-address-box', opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 107, y: 917, width: 255, height: 63, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'black', shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: 'rect', fill: 'white', dash: [], strokeWidth: 0, stroke: '#0c0c0c', cornerRadius: 0, }, { id: 'recipient-address', type: 'text', name: 'recipient-address-text', opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 112, y: 920.08, width: 250, height: 63, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'black', shadowOpacity: 1, draggable: false, resizable: false, contentEditable: true, styleEditable: true, text: 'RECIPIENT ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION', placeholder: '', fontSize: 12, fontFamily: 'Roboto', fontStyle: 'normal', fontWeight: 'normal', textDecoration: '', fill: 'black', align: 'start', verticalAlign: 'top', strokeWidth: 0, stroke: 'black', lineHeight: 1.2, letterSpacing: 0, backgroundEnabled: false, backgroundColor: '#FFFFFF', backgroundOpacity: 1, backgroundCornerRadius: 0.5, backgroundPadding: 0.5, }, ]; const elementsForSecondPage: Element[] = [ { id: "left-p2", type: "figure", name: "left-p2", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 1, y: -6.3, width: 21.83, height: 1062.31, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(255,255,255,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 0 }, { id: "right-p2", type: "figure", name: "right-p2", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 792.16, y: -1.421e-14, width: 23.83, height: 1062.31, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(255,255,255,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 0 }, { id: "top-p2", type: "figure", name: "top-p2", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 913.84, y: -0.1065, width: 23.83, height: 1062.31, rotation: 90, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(255,255,255,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 0 }, { id: "bottom-p2", type: "figure", name: "bottom-p2", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 895.68, y: 1030, width: 25.99, height: 1062.31, rotation: 90, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(255,255,255,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 0 }, { id: "return-address-box", type: "figure", name: "return-address-box", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, custom: { replaceBg: true, preFill: 'rgba(242,242,242,1)' }, x: 720, y: 690, width: 284.86, height: 76.09, rotation: 180, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(242,242,242,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 12 }, { id: 'return-address', type: 'text', name: 'return-address', opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 710, y: 680, width: 250, height: 63, rotation: 180, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'black', shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, text: 'YOUR RETURN ADDRESS \nWILL AUTOMATICALLY \nBE PRINTED IN THIS \nPOSITION', placeholder: '', fontSize: 10, fontFamily: 'Roboto', fontStyle: 'normal', fontWeight: 'normal', textDecoration: '', fill: 'black', align: 'start', verticalAlign: 'top', strokeWidth: 0, stroke: 'black', lineHeight: 1.2, letterSpacing: 0, backgroundEnabled: false, backgroundColor: '#FFFFFF', backgroundOpacity: 1, backgroundCornerRadius: 0.5, backgroundPadding: 0.5, }, { id: "postage-indicia-box", type: "figure", name: "postage-indicia-box", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, custom: { replaceBg: true, preFill: 'rgba(243,243,243,1)' }, x: 192, y: 685, width: 137, height: 74.8, rotation: 180, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(243,243,243,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 12 }, { id: 'indicia', type: 'text', name: 'indicia', opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 175, y: 668, width: 111, height: 40, rotation: 180, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'black', shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, text: `POSTAGE\nINDICIA`, placeholder: '', fontSize: 18, fontFamily: 'Roboto', fontStyle: 'normal', fontWeight: 'normal', textDecoration: '', fill: 'black', align: 'center', verticalAlign: 'top', strokeWidth: 0, stroke: 'black', lineHeight: 1.2, letterSpacing: 0, backgroundEnabled: false, backgroundColor: '#7ED321', backgroundOpacity: 1, backgroundCornerRadius: 0.5, backgroundPadding: 0.5, }, { id: "mailing-address-window-box-2", type: "figure", name: "mailing-address-window-box-2", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 400, y: 365, width: 360, height: 185, rotation: 0, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(240,240,240,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 16, custom: { replaceBg: true, preFill: "rgba(233,233,233,1)", postFill: "white" }, }, { id: "mailing-address-window-text-2", type: "text", name: "mailing-address", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: false, x: 780, y: 475, width: 408, height: 31, rotation: 180, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, text: "Mailing Address Window", placeholder: "", fontSize: 25, fontFamily: "Roboto", fontStyle: "italic", fontWeight: "normal", textDecoration: "", fill: "black", align: "center", verticalAlign: "top", strokeWidth: 0, stroke: "black", lineHeight: 1.2, letterSpacing: 0, backgroundEnabled: false, backgroundColor: "#7ED321", backgroundOpacity: 1, backgroundCornerRadius: 0.5, backgroundPadding: 0.5 }, { id: "barcode-box", type: "figure", name: "barcode-box", opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, custom: { replaceBg: true, preFill: 'rgba(244,244,244,1)' }, x: 375, y: 435, width: 319, height: 65, rotation: 180, animations: [], blurEnabled: false, blurRadius: 10, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowBlur: 5, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: "black", shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, subType: "rect", fill: "rgba(244,244,244,1)", dash: [], strokeWidth: 0, stroke: "#0c0c0c", cornerRadius: 12 }, { id: 'barcode', type: 'image', name: '', opacity: 1, visible: true, selectable: false, removable: false, alwaysOnTop: true, showInExport: true, x: 375, y: 410, width: 315, height: 15, rotation: 180, animations: [], blurEnabled: false, brightnessEnabled: false, brightness: 0, sepiaEnabled: false, grayscaleEnabled: false, shadowEnabled: false, shadowOffsetX: 0, shadowOffsetY: 0, shadowOpacity: 1, draggable: false, resizable: false, contentEditable: false, styleEditable: false, src: barcodeSrc, cropX: 0, cropY: 0, cropWidth: 1, cropHeight: 1, cornerRadius: 0, flipX: false, flipY: false, clipSrc: '', borderSize: 0, keepRatio: false, }, ]; elements.forEach(element => page.addElement(element)); elementsForSecondPage.forEach(element => pageTwo.addElement(element)); store.history.clear(); };