designertool 0.0.1-dev

package/dist/composable/googleMap.d.ts

@@ -0,0 +1,2084 @@
+import { MapItem, QrCodeItem } from '../types/items';
+export declare const useMap: () => {
+    itemStore: import('./pinia/dist/pinia.esm-browser.js').Store<"items", {
+        items: import("../types/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: import("../types/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: import("../types/items").ItemState): void;
+        pushItemsToState(elList: NodeListOf<Element>): void;
+        getElementPosition(el: Element): import("../types/items").Position;
+        getElementBorder(el: Element): import("../types/items").Border;
+        getElementStyle(el: Element): {
+            [key: string]: string;
+        };
+        setFocusedItem(item: number | import("../types/items").Item): void;
+        updatePosition(direction: string, amount: number): void;
+        setItemOrder(value: string): void;
+        updateItemOrder(newIndex: number): void;
+        addNewItem(item: Partial<import("../types/items").Item>): void;
+        editItem(id: number, item: Partial<import("../types/items").Item>): void;
+        createAdditionalStyles(item: import("../types/items").Item, editing?: boolean): void;
+        setItemPosition(position: import("../types/items").Position): {
+            x: number;
+            y: number;
+            w: number;
+            h: number;
+            r: number;
+        };
+        duplicateSelectedItem(): void;
+        deleteSelectedItem(): boolean;
+    }>;
+    focusedItem: import("vue").ComputedRef<MapItem | QrCodeItem>;
+    address: import("vue").Ref<string>;
+    fromAddress: import("vue").Ref<string>;
+    isEditMode: import("vue").ComputedRef<boolean>;
+    isFromAddressError: import("vue").Ref<boolean>;
+    isToAddressError: import("vue").Ref<boolean>;
+    addMap: (type: 'GoogleMap' | 'StreetView') => void;
+    addQrCode: () => void;
+    saveDirections: (value: boolean) => Promise<void>;
+    onPlaceChanged: (place: any, direction?: boolean) => void;
+    checkAddress: (value: string, direction?: boolean) => Promise<void>;
+    updateValue: (type: 'GoogleMap' | 'StreetView' | 'QrCode') => void;
+};