designertool 0.0.1-dev

package/dist/stores/item-store.d.ts

@@ -0,0 +1,2070 @@
+import { Item, Position, ItemState, Border } from '../types/items';
+export declare const useItems: import('./pinia/dist/pinia.esm-browser.js').StoreDefinition<"items", {
+    items: Item[];
+    focusedItemId: number | undefined;
+    preventDelete: boolean;
+    textEditable: boolean;
+    historyStore: import('./pinia/dist/pinia.esm-browser.js').Store<"history", {
+        previous: import("../types/items").GlobalState[];
+        next: import("../types/items").GlobalState[];
+        isLoading: boolean;
+        htmlGenerator: {
+            body: HTMLBodyElement;
+            html: HTMLHtmlElement;
+            style: HTMLStyleElement;
+            setHtml: (htmlString: string) => void;
+            addClassAttribute: (name: string, value: Object) => void;
+            editAttribute: (className: string, attributes: Object) => void;
+            deleteAttributeFromId: (className: string, attributes: string[]) => void;
+            deleteClassAttribute: (className: string) => void;
+            initHtml: (htmlTitle: string) => void;
+            getHtmlText: () => string;
+            getStyleByKey: (key: string) => import("vue").StyleValue;
+            convertCssStringToObject: (cssString: string) => {
+                [key: string]: string;
+            };
+            downloadHtml: () => void;
+        };
+        loading: boolean;
+    }, {}, {
+        saveStepToHistory(): void;
+        savePreviousStep(): void;
+        saveHistory(): Promise<unknown>;
+        storeHtmlState(html: string): void;
+        undo(): void;
+        redo(): void;
+        clearHtmlContent(canvas: HTMLElement): void;
+        clearHtmlAttributes(canvas: Element): void;
+        clearDataAttributes(htmlString: string): string;
+    }>;
+    htmlGenerator: {
+        body: HTMLBodyElement;
+        html: HTMLHtmlElement;
+        style: HTMLStyleElement;
+        setHtml: (htmlString: string) => void;
+        addClassAttribute: (name: string, value: Object) => void;
+        editAttribute: (className: string, attributes: Object) => void;
+        deleteAttributeFromId: (className: string, attributes: string[]) => void;
+        deleteClassAttribute: (className: string) => void;
+        initHtml: (htmlTitle: string) => void;
+        getHtmlText: () => string;
+        getStyleByKey: (key: string) => import("vue").StyleValue;
+        convertCssStringToObject: (cssString: string) => {
+            [key: string]: string;
+        };
+        downloadHtml: () => void;
+    };
+}, {
+    getFocusedItem: (state: {
+        items: ({
+            type: "Color";
+            id: number;
+            value: string;
+            position: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                r: number;
+            };
+            border?: {
+                radius: number;
+                color: string;
+                weight: number;
+            } | undefined;
+            keepRatio?: boolean | undefined;
+        } | {
+            type: "Text";
+            id: number;
+            value: string;
+            position: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                r: number;
+            };
+            border?: {
+                radius: number;
+                color: string;
+                weight: number;
+            } | undefined;
+            keepRatio?: boolean | undefined;
+        } | {
+            type: "Image";
+            id: number;
+            value: string;
+            position: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                r: number;
+            };
+            border?: {
+                radius: number;
+                color: string;
+                weight: number;
+            } | undefined;
+            keepRatio?: boolean | undefined;
+        } | {
+            type: "Shape";
+            id: number;
+            value: string;
+            position: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                r: number;
+            };
+            border?: {
+                radius: number;
+                color: string;
+                weight: number;
+            } | undefined;
+            keepRatio?: boolean | undefined;
+        } | {
+            type: "GoogleMap";
+            location?: {
+                lat?: number | undefined;
+                lng?: number | undefined;
+                address: string;
+            } | undefined;
+            fromLocation?: {
+                lat?: number | undefined;
+                lng?: number | undefined;
+                address: string;
+            } | undefined;
+            showDirections?: boolean | undefined;
+            id: number;
+            value: string;
+            position: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                r: number;
+            };
+            border?: {
+                radius: number;
+                color: string;
+                weight: number;
+            } | undefined;
+            keepRatio?: boolean | undefined;
+        } | {
+            type: "StreetView";
+            location?: {
+                lat?: number | undefined;
+                lng?: number | undefined;
+                address: string;
+            } | undefined;
+            id: number;
+            value: string;
+            position: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                r: number;
+            };
+            border?: {
+                radius: number;
+                color: string;
+                weight: number;
+            } | undefined;
+            keepRatio?: boolean | undefined;
+        } | {
+            type: "QrCode";
+            location?: {
+                lat?: number | undefined;
+                lng?: number | undefined;
+                address: string;
+            } | undefined;
+            belongsTo?: number | undefined;
+            belongsToType?: "GoogleMap" | "StreetView" | undefined;
+            id: number;
+            value: string;
+            position: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                r: number;
+            };
+            border?: {
+                radius: number;
+                color: string;
+                weight: number;
+            } | undefined;
+            keepRatio?: boolean | undefined;
+        } | {
+            type: "Conversion";
+            stringValue?: string | undefined;
+            id: number;
+            value: string;
+            position: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+                r: number;
+            };
+            border?: {
+                radius: number;
+                color: string;
+                weight: number;
+            } | undefined;
+            keepRatio?: boolean | undefined;
+        })[];
+        focusedItemId: number | undefined;
+        preventDelete: boolean;
+        textEditable: boolean;
+        historyStore: {
+            $state: {
+                previous: {
+                    focusedItemId: number | undefined;
+                    items: ({
+                        type: "Color";
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "Text";
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "Image";
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "Shape";
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "GoogleMap";
+                        location?: {
+                            lat?: number | undefined;
+                            lng?: number | undefined;
+                            address: string;
+                        } | undefined;
+                        fromLocation?: {
+                            lat?: number | undefined;
+                            lng?: number | undefined;
+                            address: string;
+                        } | undefined;
+                        showDirections?: boolean | undefined;
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "StreetView";
+                        location?: {
+                            lat?: number | undefined;
+                            lng?: number | undefined;
+                            address: string;
+                        } | undefined;
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "QrCode";
+                        location?: {
+                            lat?: number | undefined;
+                            lng?: number | undefined;
+                            address: string;
+                        } | undefined;
+                        belongsTo?: number | undefined;
+                        belongsToType?: "GoogleMap" | "StreetView" | undefined;
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "Conversion";
+                        stringValue?: string | undefined;
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    })[];
+                    size: {
+                        w: number;
+                        h: number;
+                    };
+                    backgroundColor: string | null;
+                    backgroundImage: string | null;
+                    backgroundSize: string;
+                    backgroundPosition: string;
+                    isBorderEnabled: boolean;
+                    borderColor: string | null;
+                    borderWidth: number | null;
+                    canvasOffset?: {
+                        x: number;
+                        y: number;
+                    } | undefined;
+                }[];
+                next: {
+                    focusedItemId: number | undefined;
+                    items: ({
+                        type: "Color";
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "Text";
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "Image";
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "Shape";
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "GoogleMap";
+                        location?: {
+                            lat?: number | undefined;
+                            lng?: number | undefined;
+                            address: string;
+                        } | undefined;
+                        fromLocation?: {
+                            lat?: number | undefined;
+                            lng?: number | undefined;
+                            address: string;
+                        } | undefined;
+                        showDirections?: boolean | undefined;
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "StreetView";
+                        location?: {
+                            lat?: number | undefined;
+                            lng?: number | undefined;
+                            address: string;
+                        } | undefined;
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "QrCode";
+                        location?: {
+                            lat?: number | undefined;
+                            lng?: number | undefined;
+                            address: string;
+                        } | undefined;
+                        belongsTo?: number | undefined;
+                        belongsToType?: "GoogleMap" | "StreetView" | undefined;
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    } | {
+                        type: "Conversion";
+                        stringValue?: string | undefined;
+                        id: number;
+                        value: string;
+                        position: {
+                            x: number;
+                            y: number;
+                            w: number;
+                            h: number;
+                            r: number;
+                        };
+                        border?: {
+                            radius: number;
+                            color: string;
+                            weight: number;
+                        } | undefined;
+                        keepRatio?: boolean | undefined;
+                    })[];
+                    size: {
+                        w: number;
+                        h: number;
+                    };
+                    backgroundColor: string | null;
+                    backgroundImage: string | null;
+                    backgroundSize: string;
+                    backgroundPosition: string;
+                    isBorderEnabled: boolean;
+                    borderColor: string | null;
+                    borderWidth: number | null;
+                    canvasOffset?: {
+                        x: number;
+                        y: number;
+                    } | undefined;
+                }[];
+                isLoading: boolean;
+                htmlGenerator: {
+                    body: HTMLBodyElement;
+                    html: HTMLHtmlElement;
+                    style: HTMLStyleElement;
+                    setHtml: (htmlString: string) => void;
+                    addClassAttribute: (name: string, value: Object) => void;
+                    editAttribute: (className: string, attributes: Object) => void;
+                    deleteAttributeFromId: (className: string, attributes: string[]) => void;
+                    deleteClassAttribute: (className: string) => void;
+                    initHtml: (htmlTitle: string) => void;
+                    getHtmlText: () => string;
+                    getStyleByKey: (key: string) => import("vue").StyleValue;
+                    convertCssStringToObject: (cssString: string) => {
+                        [key: string]: string;
+                    };
+                    downloadHtml: () => void;
+                };
+                loading: boolean;
+            };
+            $patch: {
+                (partialState: import('./pinia/dist/pinia.esm-browser.js')._DeepPartial<{
+                    previous: {
+                        focusedItemId: number | undefined;
+                        items: ({
+                            type: "Color";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Text";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Image";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Shape";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "GoogleMap";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            fromLocation?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            showDirections?: boolean | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "StreetView";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "QrCode";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            belongsTo?: number | undefined;
+                            belongsToType?: "GoogleMap" | "StreetView" | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Conversion";
+                            stringValue?: string | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        })[];
+                        size: {
+                            w: number;
+                            h: number;
+                        };
+                        backgroundColor: string | null;
+                        backgroundImage: string | null;
+                        backgroundSize: string;
+                        backgroundPosition: string;
+                        isBorderEnabled: boolean;
+                        borderColor: string | null;
+                        borderWidth: number | null;
+                        canvasOffset?: {
+                            x: number;
+                            y: number;
+                        } | undefined;
+                    }[];
+                    next: {
+                        focusedItemId: number | undefined;
+                        items: ({
+                            type: "Color";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Text";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Image";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Shape";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "GoogleMap";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            fromLocation?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            showDirections?: boolean | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "StreetView";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "QrCode";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            belongsTo?: number | undefined;
+                            belongsToType?: "GoogleMap" | "StreetView" | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Conversion";
+                            stringValue?: string | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        })[];
+                        size: {
+                            w: number;
+                            h: number;
+                        };
+                        backgroundColor: string | null;
+                        backgroundImage: string | null;
+                        backgroundSize: string;
+                        backgroundPosition: string;
+                        isBorderEnabled: boolean;
+                        borderColor: string | null;
+                        borderWidth: number | null;
+                        canvasOffset?: {
+                            x: number;
+                            y: number;
+                        } | undefined;
+                    }[];
+                    isLoading: boolean;
+                    htmlGenerator: {
+                        body: HTMLBodyElement;
+                        html: HTMLHtmlElement;
+                        style: HTMLStyleElement;
+                        setHtml: (htmlString: string) => void;
+                        addClassAttribute: (name: string, value: Object) => void;
+                        editAttribute: (className: string, attributes: Object) => void;
+                        deleteAttributeFromId: (className: string, attributes: string[]) => void;
+                        deleteClassAttribute: (className: string) => void;
+                        initHtml: (htmlTitle: string) => void;
+                        getHtmlText: () => string;
+                        getStyleByKey: (key: string) => import("vue").StyleValue;
+                        convertCssStringToObject: (cssString: string) => {
+                            [key: string]: string;
+                        };
+                        downloadHtml: () => void;
+                    };
+                    loading: boolean;
+                }>): void;
+                <F extends (state: {
+                    previous: {
+                        focusedItemId: number | undefined;
+                        items: ({
+                            type: "Color";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Text";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Image";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Shape";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "GoogleMap";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            fromLocation?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            showDirections?: boolean | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "StreetView";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "QrCode";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            belongsTo?: number | undefined;
+                            belongsToType?: "GoogleMap" | "StreetView" | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Conversion";
+                            stringValue?: string | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        })[];
+                        size: {
+                            w: number;
+                            h: number;
+                        };
+                        backgroundColor: string | null;
+                        backgroundImage: string | null;
+                        backgroundSize: string;
+                        backgroundPosition: string;
+                        isBorderEnabled: boolean;
+                        borderColor: string | null;
+                        borderWidth: number | null;
+                        canvasOffset?: {
+                            x: number;
+                            y: number;
+                        } | undefined;
+                    }[];
+                    next: {
+                        focusedItemId: number | undefined;
+                        items: ({
+                            type: "Color";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Text";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Image";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Shape";
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "GoogleMap";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            fromLocation?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            showDirections?: boolean | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "StreetView";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "QrCode";
+                            location?: {
+                                lat?: number | undefined;
+                                lng?: number | undefined;
+                                address: string;
+                            } | undefined;
+                            belongsTo?: number | undefined;
+                            belongsToType?: "GoogleMap" | "StreetView" | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        } | {
+                            type: "Conversion";
+                            stringValue?: string | undefined;
+                            id: number;
+                            value: string;
+                            position: {
+                                x: number;
+                                y: number;
+                                w: number;
+                                h: number;
+                                r: number;
+                            };
+                            border?: {
+                                radius: number;
+                                color: string;
+                                weight: number;
+                            } | undefined;
+                            keepRatio?: boolean | undefined;
+                        })[];
+                        size: {
+                            w: number;
+                            h: number;
+                        };
+                        backgroundColor: string | null;
+                        backgroundImage: string | null;
+                        backgroundSize: string;
+                        backgroundPosition: string;
+                        isBorderEnabled: boolean;
+                        borderColor: string | null;
+                        borderWidth: number | null;
+                        canvasOffset?: {
+                            x: number;
+                            y: number;
+                        } | undefined;
+                    }[];
+                    isLoading: boolean;
+                    htmlGenerator: {
+                        body: HTMLBodyElement;
+                        html: HTMLHtmlElement;
+                        style: HTMLStyleElement;
+                        setHtml: (htmlString: string) => void;
+                        addClassAttribute: (name: string, value: Object) => void;
+                        editAttribute: (className: string, attributes: Object) => void;
+                        deleteAttributeFromId: (className: string, attributes: string[]) => void;
+                        deleteClassAttribute: (className: string) => void;
+                        initHtml: (htmlTitle: string) => void;
+                        getHtmlText: () => string;
+                        getStyleByKey: (key: string) => import("vue").StyleValue;
+                        convertCssStringToObject: (cssString: string) => {
+                            [key: string]: string;
+                        };
+                        downloadHtml: () => void;
+                    };
+                    loading: boolean;
+                }) => any>(stateMutator: ReturnType<F> extends Promise<any> ? never : F): void;
+            };
+            $reset: () => void;
+            $subscribe: (callback: import('./pinia/dist/pinia.esm-browser.js').SubscriptionCallback<{
+                previous: import("../types/items").GlobalState[];
+                next: import("../types/items").GlobalState[];
+                isLoading: boolean;
+                htmlGenerator: {
+                    body: HTMLBodyElement;
+                    html: HTMLHtmlElement;
+                    style: HTMLStyleElement;
+                    setHtml: (htmlString: string) => void;
+                    addClassAttribute: (name: string, value: Object) => void;
+                    editAttribute: (className: string, attributes: Object) => void;
+                    deleteAttributeFromId: (className: string, attributes: string[]) => void;
+                    deleteClassAttribute: (className: string) => void;
+                    initHtml: (htmlTitle: string) => void;
+                    getHtmlText: () => string;
+                    getStyleByKey: (key: string) => import("vue").StyleValue;
+                    convertCssStringToObject: (cssString: string) => {
+                        [key: string]: string;
+                    };
+                    downloadHtml: () => void;
+                };
+                loading: boolean;
+            }>, options?: ({
+                detached?: boolean | undefined;
+            } & import("vue").WatchOptions<boolean>) | undefined) => () => void;
+            $onAction: (callback: import('./pinia/dist/pinia.esm-browser.js').StoreOnActionListener<"history", {
+                previous: import("../types/items").GlobalState[];
+                next: import("../types/items").GlobalState[];
+                isLoading: boolean;
+                htmlGenerator: {
+                    body: HTMLBodyElement;
+                    html: HTMLHtmlElement;
+                    style: HTMLStyleElement;
+                    setHtml: (htmlString: string) => void;
+                    addClassAttribute: (name: string, value: Object) => void;
+                    editAttribute: (className: string, attributes: Object) => void;
+                    deleteAttributeFromId: (className: string, attributes: string[]) => void;
+                    deleteClassAttribute: (className: string) => void;
+                    initHtml: (htmlTitle: string) => void;
+                    getHtmlText: () => string;
+                    getStyleByKey: (key: string) => import("vue").StyleValue;
+                    convertCssStringToObject: (cssString: string) => {
+                        [key: string]: string;
+                    };
+                    downloadHtml: () => void;
+                };
+                loading: boolean;
+            }, {}, {
+                saveStepToHistory(): void;
+                savePreviousStep(): void;
+                saveHistory(): Promise<unknown>;
+                storeHtmlState(html: string): void;
+                undo(): void;
+                redo(): void;
+                clearHtmlContent(canvas: HTMLElement): void;
+                clearHtmlAttributes(canvas: Element): void;
+                clearDataAttributes(htmlString: string): string;
+            }>, detached?: boolean | undefined) => () => void;
+            $dispose: () => void;
+            $id: "history";
+            _customProperties: Set<string>;
+            previous: {
+                focusedItemId: number | undefined;
+                items: ({
+                    type: "Color";
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "Text";
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "Image";
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "Shape";
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "GoogleMap";
+                    location?: {
+                        lat?: number | undefined;
+                        lng?: number | undefined;
+                        address: string;
+                    } | undefined;
+                    fromLocation?: {
+                        lat?: number | undefined;
+                        lng?: number | undefined;
+                        address: string;
+                    } | undefined;
+                    showDirections?: boolean | undefined;
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "StreetView";
+                    location?: {
+                        lat?: number | undefined;
+                        lng?: number | undefined;
+                        address: string;
+                    } | undefined;
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "QrCode";
+                    location?: {
+                        lat?: number | undefined;
+                        lng?: number | undefined;
+                        address: string;
+                    } | undefined;
+                    belongsTo?: number | undefined;
+                    belongsToType?: "GoogleMap" | "StreetView" | undefined;
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "Conversion";
+                    stringValue?: string | undefined;
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                })[];
+                size: {
+                    w: number;
+                    h: number;
+                };
+                backgroundColor: string | null;
+                backgroundImage: string | null;
+                backgroundSize: string;
+                backgroundPosition: string;
+                isBorderEnabled: boolean;
+                borderColor: string | null;
+                borderWidth: number | null;
+                canvasOffset?: {
+                    x: number;
+                    y: number;
+                } | undefined;
+            }[];
+            next: {
+                focusedItemId: number | undefined;
+                items: ({
+                    type: "Color";
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "Text";
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "Image";
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "Shape";
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "GoogleMap";
+                    location?: {
+                        lat?: number | undefined;
+                        lng?: number | undefined;
+                        address: string;
+                    } | undefined;
+                    fromLocation?: {
+                        lat?: number | undefined;
+                        lng?: number | undefined;
+                        address: string;
+                    } | undefined;
+                    showDirections?: boolean | undefined;
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "StreetView";
+                    location?: {
+                        lat?: number | undefined;
+                        lng?: number | undefined;
+                        address: string;
+                    } | undefined;
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "QrCode";
+                    location?: {
+                        lat?: number | undefined;
+                        lng?: number | undefined;
+                        address: string;
+                    } | undefined;
+                    belongsTo?: number | undefined;
+                    belongsToType?: "GoogleMap" | "StreetView" | undefined;
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                } | {
+                    type: "Conversion";
+                    stringValue?: string | undefined;
+                    id: number;
+                    value: string;
+                    position: {
+                        x: number;
+                        y: number;
+                        w: number;
+                        h: number;
+                        r: number;
+                    };
+                    border?: {
+                        radius: number;
+                        color: string;
+                        weight: number;
+                    } | undefined;
+                    keepRatio?: boolean | undefined;
+                })[];
+                size: {
+                    w: number;
+                    h: number;
+                };
+                backgroundColor: string | null;
+                backgroundImage: string | null;
+                backgroundSize: string;
+                backgroundPosition: string;
+                isBorderEnabled: boolean;
+                borderColor: string | null;
+                borderWidth: number | null;
+                canvasOffset?: {
+                    x: number;
+                    y: number;
+                } | undefined;
+            }[];
+            isLoading: boolean;
+            htmlGenerator: {
+                body: HTMLBodyElement;
+                html: HTMLHtmlElement;
+                style: HTMLStyleElement;
+                setHtml: (htmlString: string) => void;
+                addClassAttribute: (name: string, value: Object) => void;
+                editAttribute: (className: string, attributes: Object) => void;
+                deleteAttributeFromId: (className: string, attributes: string[]) => void;
+                deleteClassAttribute: (className: string) => void;
+                initHtml: (htmlTitle: string) => void;
+                getHtmlText: () => string;
+                getStyleByKey: (key: string) => import("vue").StyleValue;
+                convertCssStringToObject: (cssString: string) => {
+                    [key: string]: string;
+                };
+                downloadHtml: () => void;
+            };
+            loading: boolean;
+            saveStepToHistory: () => void;
+            savePreviousStep: () => void;
+            saveHistory: () => Promise<unknown>;
+            storeHtmlState: (html: string) => void;
+            undo: () => void;
+            redo: () => void;
+            clearHtmlContent: (canvas: HTMLElement) => void;
+            clearHtmlAttributes: (canvas: Element) => void;
+            clearDataAttributes: (htmlString: string) => string;
+        };
+        htmlGenerator: {
+            body: HTMLBodyElement;
+            html: HTMLHtmlElement;
+            style: HTMLStyleElement;
+            setHtml: (htmlString: string) => void;
+            addClassAttribute: (name: string, value: Object) => void;
+            editAttribute: (className: string, attributes: Object) => void;
+            deleteAttributeFromId: (className: string, attributes: string[]) => void;
+            deleteClassAttribute: (className: string) => void;
+            initHtml: (htmlTitle: string) => void;
+            getHtmlText: () => string;
+            getStyleByKey: (key: string) => import("vue").StyleValue;
+            convertCssStringToObject: (cssString: string) => {
+                [key: string]: string;
+            };
+            downloadHtml: () => void;
+        };
+    } & import('./pinia/dist/pinia.esm-browser.js').PiniaCustomStateProperties<{
+        items: Item[];
+        focusedItemId: number | undefined;
+        preventDelete: boolean;
+        textEditable: boolean;
+        historyStore: import('./pinia/dist/pinia.esm-browser.js').Store<"history", {
+            previous: import("../types/items").GlobalState[];
+            next: import("../types/items").GlobalState[];
+            isLoading: boolean;
+            htmlGenerator: {
+                body: HTMLBodyElement;
+                html: HTMLHtmlElement;
+                style: HTMLStyleElement;
+                setHtml: (htmlString: string) => void;
+                addClassAttribute: (name: string, value: Object) => void;
+                editAttribute: (className: string, attributes: Object) => void;
+                deleteAttributeFromId: (className: string, attributes: string[]) => void;
+                deleteClassAttribute: (className: string) => void;
+                initHtml: (htmlTitle: string) => void;
+                getHtmlText: () => string;
+                getStyleByKey: (key: string) => import("vue").StyleValue;
+                convertCssStringToObject: (cssString: string) => {
+                    [key: string]: string;
+                };
+                downloadHtml: () => void;
+            };
+            loading: boolean;
+        }, {}, {
+            saveStepToHistory(): void;
+            savePreviousStep(): void;
+            saveHistory(): Promise<unknown>;
+            storeHtmlState(html: string): void;
+            undo(): void;
+            redo(): void;
+            clearHtmlContent(canvas: HTMLElement): void;
+            clearHtmlAttributes(canvas: Element): void;
+            clearDataAttributes(htmlString: string): string;
+        }>;
+        htmlGenerator: {
+            body: HTMLBodyElement;
+            html: HTMLHtmlElement;
+            style: HTMLStyleElement;
+            setHtml: (htmlString: string) => void;
+            addClassAttribute: (name: string, value: Object) => void;
+            editAttribute: (className: string, attributes: Object) => void;
+            deleteAttributeFromId: (className: string, attributes: string[]) => void;
+            deleteClassAttribute: (className: string) => void;
+            initHtml: (htmlTitle: string) => void;
+            getHtmlText: () => string;
+            getStyleByKey: (key: string) => import("vue").StyleValue;
+            convertCssStringToObject: (cssString: string) => {
+                [key: string]: string;
+            };
+            downloadHtml: () => void;
+        };
+    }>) => {
+        type: "Color";
+        id: number;
+        value: string;
+        position: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        border?: {
+            radius: number;
+            color: string;
+            weight: number;
+        } | undefined;
+        keepRatio?: boolean | undefined;
+    } | {
+        type: "Text";
+        id: number;
+        value: string;
+        position: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        border?: {
+            radius: number;
+            color: string;
+            weight: number;
+        } | undefined;
+        keepRatio?: boolean | undefined;
+    } | {
+        type: "Image";
+        id: number;
+        value: string;
+        position: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        border?: {
+            radius: number;
+            color: string;
+            weight: number;
+        } | undefined;
+        keepRatio?: boolean | undefined;
+    } | {
+        type: "Shape";
+        id: number;
+        value: string;
+        position: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        border?: {
+            radius: number;
+            color: string;
+            weight: number;
+        } | undefined;
+        keepRatio?: boolean | undefined;
+    } | {
+        type: "GoogleMap";
+        location?: {
+            lat?: number | undefined;
+            lng?: number | undefined;
+            address: string;
+        } | undefined;
+        fromLocation?: {
+            lat?: number | undefined;
+            lng?: number | undefined;
+            address: string;
+        } | undefined;
+        showDirections?: boolean | undefined;
+        id: number;
+        value: string;
+        position: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        border?: {
+            radius: number;
+            color: string;
+            weight: number;
+        } | undefined;
+        keepRatio?: boolean | undefined;
+    } | {
+        type: "StreetView";
+        location?: {
+            lat?: number | undefined;
+            lng?: number | undefined;
+            address: string;
+        } | undefined;
+        id: number;
+        value: string;
+        position: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        border?: {
+            radius: number;
+            color: string;
+            weight: number;
+        } | undefined;
+        keepRatio?: boolean | undefined;
+    } | {
+        type: "QrCode";
+        location?: {
+            lat?: number | undefined;
+            lng?: number | undefined;
+            address: string;
+        } | undefined;
+        belongsTo?: number | undefined;
+        belongsToType?: "GoogleMap" | "StreetView" | undefined;
+        id: number;
+        value: string;
+        position: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        border?: {
+            radius: number;
+            color: string;
+            weight: number;
+        } | undefined;
+        keepRatio?: boolean | undefined;
+    } | {
+        type: "Conversion";
+        stringValue?: string | undefined;
+        id: number;
+        value: string;
+        position: {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        border?: {
+            radius: number;
+            color: string;
+            weight: number;
+        } | undefined;
+        keepRatio?: boolean | undefined;
+    } | undefined;
+    getFocusedItemType(): string;
+}, {
+    setItemState(state: ItemState): void;
+    pushItemsToState(elList: NodeListOf<Element>): void;
+    getElementPosition(el: Element): Position;
+    getElementBorder(el: Element): Border;
+    getElementStyle(el: Element): {
+        [key: string]: string;
+    };
+    setFocusedItem(item: Item | number): void;
+    updatePosition(direction: string, amount: number): void;
+    setItemOrder(value: string): void;
+    updateItemOrder(newIndex: number): void;
+    addNewItem(item: Partial<Item>): void;
+    editItem(id: number, item: Partial<Item>): void;
+    createAdditionalStyles(item: Item, editing?: boolean): void;
+    setItemPosition(position: Position): {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        r: number;
+    };
+    duplicateSelectedItem(): void;
+    deleteSelectedItem(): boolean;
+}>;