frontbacked-svg 5.0.0

package/src/time.ts

@@ -0,0 +1,147 @@
+import { Timestamp } from "firebase/firestore";
+
+interface Format {[x: string]: string}
+
+export const timestampToDate = (timestamp: Timestamp | Date | null | undefined): Date => {
+    try {
+        return (timestamp as Timestamp).toDate()
+
+    } catch(e) {
+        return timestamp as Date
+    }
+}
+export const dateToTimestamp = (date: Date | Timestamp | null | undefined): Timestamp => {
+    try {
+      return Timestamp.fromDate(date as Date);
+  
+    } catch (e) {
+      return date as Timestamp;
+    }
+};
+export function joinTimeSegments(date: Date, formats: (Format | number | string)[], separator: string) {
+    function format(m: Format | number | string) {
+        //console.log("joinTimeSegments:2", typeof m, m)
+        if(typeof m === "string" || typeof m === "number") return m
+        let f = new Intl.DateTimeFormat('en', m);
+        return f.format(date);
+    }
+    return formats.map(format).join(separator);
+}
+ 
+/**
+ * 
+ * @param {The number of seconds to parse into time segments} seconds 
+ * @param {The number of seconds to parse into time segments} seconds
+ * @returns A string that represents the time segments in days, months, weeks, days, hours, minutes, and seconds
+ */
+export const secondsToTimeSegments = (
+    seconds: number, 
+    onSegmentsFrame?: (timeFrame: string, timeFrameUnit: "Y" | "M" | "D" | "H" | "Min" | "S", timeFrameIndex: number) => string
+) => {
+    const d = new Date(seconds * 1000).toISOString()
+    let segments
+    //If seconds is less than an hour returns the format MM:SS
+    if(seconds < 3600) {
+        segments = d.substring(14, 19)
+
+    } //If seconds is less than a day(but greater or equal to an hour) returns the format HH:MM:SS
+    else if(seconds < 86400) {
+        segments = d.substring(11, 19)
+
+    } 
+    //If seconds is less than a month(using 31 days in January)(but greater or equal to a day) 
+    // returns the format DD:HH:MM:SS 
+    else if(seconds < 2678400) {
+        segments = d.replace('T', ':').substring(8, 19)
+        var days = `${parseInt(segments.substring(0, 2)) - 1}`
+        if(days.length == 1) days = `0${days}`
+        segments = `${days}:${segments.substring(3)}`
+
+
+    } 
+    //If seconds is less than a year(but greater or equal to a month) 
+    // returns the format MM:DD:HH:mm:SS 
+    else if(seconds < 31536000) {
+        segments = d.replace('-', ':').replace('T', ':').substring(5, 19)
+        //get the months
+        var months = `${parseInt(segments.substring(0, 2)) - 1}`
+        if(months.length == 1) months = `0${months}`
+
+        //get the days
+        var days = `${parseInt(segments.substring(3, 5)) - 1}`
+        if(days.length == 1) days = `0${days}`
+
+
+        segments = `${months}:${days}:${segments.substring(6)}`
+
+    } //If seconds is greater or equal to a year
+    // returns the format YY:MM:DD:HH:mm:SS 
+    else {
+        segments = d.replace('-', ':').replace('T', ':').substring(0, 19)
+        //get the year
+        var years = `${parseInt(segments.substring(0, 4)) - 1970}`
+        if(years.length == 1) years = `0${years}`
+
+        //get the months
+        var months = `${parseInt(segments.substring(5, 7)) - 1}`
+        if(months.length == 1) months = `0${months}`
+
+        //get the days
+        var days = `${parseInt(segments.substring(8, 10)) - 1}`
+        if(days.length == 1) days = `0${days}`
+
+
+        segments = `${years}:${months}:${days}:${segments.substring(11)}`
+    }
+    if(onSegmentsFrame) {
+        const timeFrameUnits: ("Y" | "M" | "D" | "H" | "Min" | "S")[] = ["Y", "M", "D", "H", "Min", "S"]
+        const frames = segments.split(":")
+        var unitIndex = timeFrameUnits.length - frames.length 
+        var segs = ""
+        for (const frame of frames) {
+            segs += onSegmentsFrame(frame, timeFrameUnits[unitIndex], unitIndex)
+            unitIndex++
+        }
+        segments = segs
+    }
+    return segments
+}
+
+export const parsePaymentWindow = (seconds: number): {time: string, time_unit: string} => {
+    let tm: string | null = null
+    let timeUnit: string = ""
+    const timeParser = (time: string, unit: string) => {
+        if(parseInt(time) > 0 && !tm) {
+            tm = `${parseInt(time)}`
+            timeUnit = unit
+        } 
+        return `${parseInt(time)} ${unit} `
+    }
+    secondsToTimeSegments(seconds, timeParser)
+    return {
+        time: `${tm || ""}`,
+        time_unit: timeUnit
+    }
+}
+
+export const timestampToGmt = (localTimestamp: number): number => {
+    // Create a Date object with the local timestamp
+    const localDate = new Date(localTimestamp);
+    
+    // Get the UTC (GMT) equivalent of the timestamp
+    const gmtTimestamp = localDate.getTime() + ((new Date()).getTimezoneOffset() * 60000); // 60000 = 60 * 1000 to convert minutes to milliseconds
+  
+    return gmtTimestamp;
+};
+
+export const gmtTimestampToLocal = (gmtTimestamp: number): number => {
+    // Create a Date object with the GMT timestamp
+    const gmtDate = new Date(gmtTimestamp);
+    
+    // Get the local equivalent of the GMT timestamp by adding the timezone offset
+    const localTimestamp = gmtDate.getTime() - ((new Date()).getTimezoneOffset() * 60000);
+  
+    return localTimestamp;
+};
+  
+  

package/src/toolsFunc.ts

@@ -0,0 +1,79 @@
+import { Doc } from "./types.ts"
+
+export const getResponsiveX = (value: number, ticketWidth: number, baseTemplateWidth: number, fractionDigits?: number) => {
+    if(value == 0) return 0
+    value = (value * ticketWidth) / baseTemplateWidth
+    if(fractionDigits) {
+        //console.log("scaleSvg.getResponsiveX: ", value, ticketWidth, baseTemplateWidth, value.toFixed(fractionDigits))
+        return parseFloat(value.toFixed(fractionDigits))
+    }
+    return Math.ceil(value)
+}
+/*
+scaleSvg.getResponsiveX:  248.0178020590345 512 2047.853 248.018
+toolsFunc.ts:17 scaleSvg.getResponsiveY:  198.01421293422914 341.3332499940181 1365.235 198.014
+toolsFunc.ts:7 scaleSvg.getResponsiveX:  867.3122533697486 512 2047.853 867.312
+toolsFunc.ts:17 scaleSvg.getResponsiveY:  511.0366808555106 341.3332499940181 1365.235 511.037
+toolsFunc.ts:7 scaleSvg.getResponsiveX:  128.50922405074974 512 2047.853 128.509
+toolsFunc.ts:17 scaleSvg.getResponsiveY:  158.76139547125698 341.3332499940181 1365.235 158.761
+toolsFunc.ts:7 scaleSvg.getResponsiveX:  96.75694495649834 512 2047.853 96.757
+toolsFunc.ts:17 scaleSvg.getResponsiveY:  426.28059728896557 341.3332499940181 1365.235 426.281*/
+
+export const getResponsiveY = (value: number, ticketHeight: number, baseTemplateHeight: number, fractionDigits?: number) => {
+    if(value == 0) return 0
+    value = (value * ticketHeight) / baseTemplateHeight
+    if(fractionDigits) {
+        //console.log("scaleSvg.getResponsiveY: ", value, ticketHeight, baseTemplateHeight, value.toFixed(fractionDigits))
+        return parseFloat(value.toFixed(fractionDigits))
+    }
+    return Math.ceil(value)
+}
+
+export const translate = (x: number, y: number, ticketWidth: number, baseTemplateWidth: number, ticketHeight: number, baseTemplateHeight: number) => {
+    return `translate(${getResponsiveX(x, ticketWidth, baseTemplateWidth, 3)} ${getResponsiveY(y, ticketHeight, baseTemplateHeight, 3)}) `
+}
+
+export const scale = (x: number, y: number, ticketWidth: number, baseTemplateWidth: number, ticketHeight: number, baseTemplateHeight: number) => {
+    return `scale(${getResponsiveX(x, ticketWidth, baseTemplateWidth, 3)} ${getResponsiveY(y, ticketHeight, baseTemplateHeight, 3)}) `
+}
+
+export const pxToVw = (value: number, parentWidth: number, fractionDigits?: number) => {
+    if (value === 0) return 0;
+    const vwValue = (value * 100) / parentWidth;
+    if (fractionDigits) {
+        return parseFloat(vwValue.toFixed(fractionDigits));
+    }
+    return Math.ceil(vwValue);
+};
+
+function convertToArrayOfObjects(inputObject: Doc) {
+    const resultArray: Doc[] = [];
+
+    // Get the keys and sort them numerically
+    const sortedKeys = Object.keys(inputObject).sort((a, b) => parseInt(`${a}`) - parseInt(`${b}`));
+
+    // Iterate over the sorted keys and push the corresponding values to the array
+    sortedKeys.forEach(key => {
+        resultArray.push(inputObject[key]);
+    });
+
+    return resultArray;
+}
+export const arrayAsObjectToArray = (arrayAsObject?: {[x: number]: Doc} | Doc[] | null) => {
+    if(!arrayAsObject) return []
+    if(Array.isArray(arrayAsObject)) {
+        return arrayAsObject
+
+    } else if(typeof arrayAsObject == "object") {
+        return convertToArrayOfObjects(arrayAsObject)
+
+    } else {
+        return []
+    }
+}
+
+export const parseContactLink = (contactLink: string, message?: string) => {
+   if(!message) return contactLink
+   var msg = `${message.replace(/\n/g, "%0A")}`.replace(/[ ]/g, "%20")
+   return contactLink.split("?")[0] + `?text=${msg}`
+}

package/src/types.ts

@@ -0,0 +1,177 @@
+export interface Doc {[x: string]: any}
+export interface FileMap {[x: string]: string}
+export interface FileImage {
+    id: string;
+    image: File;
+}
+
+export interface FilterArgs {
+    [x: string]: any
+}
+
+export interface Filters {
+    [x: string]: {
+        id: string,
+        filter: (base64ImageString: string, args?: FilterArgs | null) => Promise<string>;
+        isAutomatic?: boolean,
+        render?: any//React.FC<{ filterArgs?: FilterArgs | null; setFilterArgs: (newFilterArgs: FilterArgs) => void, filterImage?: string | null, onShowSvgArgsInput?: () => void }> | null;
+    };
+}
+
+export interface Declaration {
+    property: string,
+    value: string
+}
+
+export interface CssDeclarations {
+    declarations: Declaration[],
+    shouldReplace?: boolean
+}
+
+export interface CssAction {
+    [identifier: string]: CssDeclarations
+}
+
+export interface CssActions {
+    if_selector?: CssAction | null,
+    if_property?: CssAction | null,
+    if_property_and_value?: CssAction | null
+}
+
+export interface Mask { filter_id: string, args?: FilterArgs | null }
+export interface Filter { [filterId: string]: Mask | null }
+
+export interface TextSelectSettings {
+    [x: string]: {name: string, value: string}
+}
+
+//Example
+/**
+ * {
+        Profile_Picture.upload: {
+            Blur: {...}
+            ImageTranform: {...}
+        },
+        Signature.sign: {
+            Blur: {...}
+            ImageTranform: {...}
+        }
+ *  }
+ */
+export interface MaskMap {
+    [fieldId: string]: Filter | null
+}
+
+export interface MapWithName {
+    [x: string]: { 
+        name: string, 
+        [x: string]: any 
+    }
+}
+
+export interface FieldsData {
+    is_freemium: boolean
+    template_id: string
+    [x: string]: any
+}
+
+export interface Fields extends MapWithName {
+    [x: string]: Field
+}
+/*
+export interface Field extends InputBoxProps {
+    id: string
+    name: string
+    info?: string | null
+    helperText?: string | null
+    placeholder?: string | null
+    type: string
+    isEditable?: boolean
+    index?: number | string | null
+    options?: { [x: string]: Field }
+    message?: string | null, 
+    hoverMessage?: string | null, 
+    ruleMessage?: string | null, 
+    useImageText?: string | null
+}*/
+export interface Field {
+    id: string
+    name: string
+    type: string
+    isEditable?: boolean
+    index?: number | string | null
+    options?: { [x: string]: Field }
+    selections?: { 
+        [x: string]: {
+            name: string,
+            value: string
+        } 
+    }
+    useImageText?: string | null
+    optional?: boolean | null,
+    [x: string]: any
+}
+
+export interface Template {
+    id: string,
+    name: string,
+    logo: string,
+    is_default: boolean,
+    data_url: string,
+    split_on_download?: boolean,
+    split_on_download_hr?: boolean,
+    [x: string]: any
+}
+
+export interface TemplateData {
+    svg: string,
+    fields: Fields,
+    images: FileMap,
+    masks?: MaskMap | null,
+    cssActions?: CssActions | null
+}
+
+export interface Templates extends MapWithName {
+    [x: string]: Template
+}
+
+export interface TemplatesResults {
+    templatesLoading: boolean, templatesError?: string | null,
+    selectedTemplateLoading: boolean, selectedTemplateError?: string | null,
+    parsingTemplate: boolean,
+    templates: Templates,
+    selectedTemplate?: Template | null,
+    selectedTemplateData?: TemplateData | null,
+    workingTemplate?: Template | null,
+    workingTemplateData?: TemplateData | null, 
+    setAsDefaulTemplate: ( is_default: boolean ) => void,
+    setWorkingTemplate: (template: Template | null | undefined) => void, 
+    setWorkingTemplateData: (template: TemplateData | null | undefined) => void,
+    selectTemplate: (selectedTemplateId: string) => void,
+    parseTemplateSvg: (svg: string, isNew: boolean) => Promise<{template: Template, templateData: TemplateData} | null>,
+    saveTemplate: (onSetProgressStatus?: (message: string, pct?: number | null) => void) => Promise<string | null>,
+    deleteTemplate: (id: string) => void,
+    getDefaultTemplateId: (templates: Templates) => string,
+    currentTemplateId?: string | null
+}
+
+export interface Font {
+    name: string,
+    id: string,
+    file?: File | null,
+    ext?: string | null,
+    url?: string | null,
+    dataUrl?: string | null,
+    readError?: string | null,
+    writeError?: string | null
+}
+
+export interface FontsMap {
+    [x: string]: Font
+}
+
+export interface ImageUploadMaskInfo {
+    imageId: string,
+    filterId: string,
+    mask: Mask
+}