`,\n ),\n );\n\n // Set body class\n document.body.classList.add(\"imp-fullscreen-mode\");\n\n // Init new 2Destate Map\n this.store.getEventController().removeEvents();\n ImageMapPro.init(\"#imp-fullscreen-image-map\", fullscreenConfig, {\n isFullscreen: true,\n closeFullscreenCallback: () => {\n this.store.getEventController().createEvents();\n },\n artboardId: this.store.getArtboard().id,\n });\n }\n closeFullscreen() {\n if (!this.store.getIsFullscreen()) return;\n\n // Disable events of the fullscreen map\n this.store.getEventController().removeEvents();\n // Delete menu and tooltip container\n this.store.getMenuController().removeMenu();\n this.store.getTooltipController().container.remove();\n\n // Delete fullscreen container\n document.body.classList.remove(\"imp-fullscreen-mode\");\n document.querySelector(\"#imp-fullscreen-container\")?.remove();\n\n // This callback was created in goFullscreen()\n this.closeFullscreenCallback();\n }\n}\n","import Menu from 'Client/UI/menu/menu'\nimport OpenButton from 'Client/UI/menu/openButton'\nimport CloseButton from 'Client/UI/menu/closeButton'\n\nexport default class NavigatorController {\n store = undefined\n menu = undefined\n openButton = undefined\n closeButton = undefined\n\n constructor(store) {\n this.store = store\n\n if (!this.store.state.object_list.enable_object_list) return\n this.store.subscribe(this.handleAction.bind(this))\n\n this.menu = new Menu(this.store)\n this.openButton = new OpenButton()\n this.closeButton = new CloseButton()\n\n this.menu.element.dataset.imageMapId = this.store.getID()\n this.menu.element.appendChild(this.closeButton.element)\n\n this.setMenuHeight()\n }\n insertMenu() {\n if (!this.store.state.object_list.enable_object_list) return\n\n // If the menu is detached, put it in the designated container and return\n if (this.store.state.object_list.menu_style === 'detached') {\n this.appendDetachedMenu()\n return\n }\n\n // Append menu to DOM\n if (this.store.getIsMenuMobile()) {\n this.appendMobileMenu()\n } else {\n this.appendRegularMenu()\n }\n }\n removeMenu() {\n if (!this.store.state.object_list.enable_object_list) return\n\n this.menu.element.remove()\n this.openButton.element.remove()\n }\n updateItems() {\n if (this.menu) this.menu.updateItems()\n }\n\n // Actions\n handleAction(action) {\n if (action.type == 'resize') {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.insertMenu()\n this.setMenuHeight()\n })\n })\n }\n if (action.type == 'updateSearch') {\n this.menu.search.redraw()\n this.menu.list.filterItems(action.payload.searchString)\n }\n if (action.type == 'clearSearch') {\n this.menu.search.clear()\n this.menu.search.redraw()\n this.menu.list.filterItems()\n }\n if (action.type == 'openMenu') {\n this.showMobileMenu()\n }\n if (action.type == 'closeMenu') {\n this.hideMobileMenu()\n }\n if (action.type == 'closeFullscreen') {\n if (this.store.getIsFullscreen()) this.removeMenu()\n }\n }\n appendDetachedMenu() {\n document.querySelector('[data-imp-detached-menu=\"' + this.store.state.general.name + '\"]')?.appendChild(this.menu.element)\n this.menu.element.classList.add('imp-loaded')\n this.menu.element.classList.add('imp-detached')\n }\n appendMobileMenu() {\n // Add menu\n document.querySelector('body').appendChild(this.menu.element)\n this.menu.element.classList.add('imp-mobile')\n\n // Add button\n this.store.getUIWrap().querySelector('.imp-ui-top-right').appendChild(this.openButton.element)\n }\n appendRegularMenu() {\n // Add menu\n this.store.getContainer().appendChild(this.menu.element)\n this.menu.element.classList.remove('imp-mobile')\n\n this.setListOverflow()\n\n // Remove button\n this.openButton.element.remove()\n }\n showMobileMenu() {\n if (!this.store.state.object_list.enable_object_list) return\n this.menu.element.classList.add('imp-active')\n }\n hideMobileMenu() {\n if (!this.store.state.object_list.enable_object_list) return\n this.menu.element.classList.remove('imp-active')\n }\n setListOverflow() {\n let searchHeight = 0\n if (this.store.state.object_list.enable_search) searchHeight = 71\n if (this.menu.list.height > this.getMenuHeight() - searchHeight) {\n this.menu.list.element.style.overflowY = 'scroll'\n } else {\n this.menu.list.element.style.overflowY = 'auto'\n }\n }\n setMenuHeight() {\n if (this.store.state.object_list.menu_style === 'default' || this.store.getIsMenuMobile()) {\n this.menu.element.style.height = this.getMenuHeight() + 'px'\n } else {\n this.menu.element.style.maxHeight = this.getMenuHeight() + 'px'\n }\n }\n getMenuHeight() {\n if (this.store.getIsFullscreen() || this.store.getIsMenuMobile()) {\n return window.innerHeight\n }\n if (this.store.state.object_list.menu_style === 'detached') {\n return 'auto'\n }\n return this.store.getCanvasWrapRect().height\n }\n}","import Navigator from \"Client/UI/navigator\";\n\nexport default class NavigatorController {\n store = undefined;\n navigator = undefined;\n\n // Pan functionality\n ix = 0;\n iy = 0;\n\n constructor(store) {\n this.store = store;\n\n // If zooming or navigator is not enabled, just return\n if (\n !this.store.state.zooming.enable_zooming ||\n !this.store.state.zooming.enable_navigator\n ) {\n this.navigator = {\n element: document.createElement(\"div\"),\n adjustSize: () => {},\n };\n return;\n }\n\n this.store.subscribe(this.handleAction.bind(this));\n this.createUI();\n }\n\n createUI() {\n if (\n !this.store.state.zooming.enable_zooming ||\n !this.store.state.zooming.enable_navigator\n )\n return;\n if (this.navigator) this.navigator.element.remove();\n\n this.navigator = new Navigator(this.store);\n }\n insertUI() {\n if (\n !this.store.state.zooming.enable_zooming ||\n !this.store.state.zooming.enable_navigator ||\n !this.store.getArtboard().zooming.enable_zooming ||\n !this.store.getArtboard().zooming.enable_navigator\n )\n return;\n\n if (\n this.store.state.object_list.enable_object_list &&\n this.store.state.object_list.menu_style === \"on-top\" &&\n this.store.state.object_list.menu_position === \"left\"\n ) {\n this.store\n .getUIWrap()\n .querySelector(\".imp-ui-bottom-right\")\n .appendChild(this.navigator.element);\n } else {\n this.store\n .getUIWrap()\n .querySelector(\".imp-ui-bottom-left\")\n .appendChild(this.navigator.element);\n }\n\n this.navigator.adjustSize();\n }\n handleAction(action) {\n if (action.type == \"resize\") {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.navigator.adjustSize();\n this.navigator.redraw();\n });\n });\n }\n if (action.type == \"panOnNavigator\") {\n this.pan({ x: action.payload.x, y: action.payload.y });\n }\n if (action.type == \"zoomUpdate\") {\n this.navigator.redraw();\n }\n }\n pan({ x, y }) {\n // x and y are mouse coords\n // Convert mouse coords on the navigator\n // to pixel coordinates on the canvas\n let panToX =\n ((x - this.store.getNavigatorRect().offset.left) / this.navigator.ratio) *\n this.store.getZoom();\n let panToY =\n ((y - this.store.getNavigatorRect().offset.top) / this.navigator.ratio) *\n this.store.getZoom();\n\n this.store.dispatch(\"panTo\", { x: panToX, y: panToY });\n }\n}\n","import {\n htmlToElement,\n hexToRgb,\n easeOutBounce,\n} from \"Editor/scripts/utilities\";\nimport * as consts from \"Client/consts\";\nimport * as editorConsts from \"Editor/scripts/consts\";\n\nimport Spot from \"Client/UI/objects/spot\";\nimport Text from \"Client/UI/objects/text\";\nimport Rect from \"Client/UI/objects/rect\";\nimport Oval from \"Client/UI/objects/oval\";\nimport Poly from \"Client/UI/objects/poly\";\nimport Group from \"Client/UI/objects/group\";\nimport SVGSingle from \"Client/UI/objects/svgSingle\";\nimport SVG from \"Client/UI/objects/svg\";\n\nexport default class ObjectController {\n constructor(store) {\n this.store = store;\n this.store.subscribe(this.handleAction.bind(this));\n\n this.objects = {};\n this.spots = [];\n this.container = document.createElement(\"div\");\n this.imageBackgroundsContainer = document.createElement(\"div\");\n this.stylesheet = document.createElement(\"style\");\n\n this.highlightedObjects = new Set();\n this.didStopGlowing = false;\n this.delayedOpenTimers = {};\n\n this.setupContainers();\n this.createObjects();\n this.insertObjects();\n }\n insertObjects() {\n this.emptyContainers();\n this.fillContainers();\n this.generateStylesheet();\n this.animateObjects(250);\n }\n handleAction(action) {\n if (\n action.type === \"zoomUpdate\" &&\n this.store.state.objectConfig.scale_spots\n ) {\n for (let spot of this.spots) {\n if (spot.options.type === editorConsts.OBJECT_SPOT) {\n spot.element.style.transform = `scale(${1 / this.store.getZoom()})`;\n }\n }\n }\n }\n\n createObjects() {\n this.objects = {};\n this.spots = [];\n this.highlightedObjects = new Set();\n const delayedObjects = [];\n\n const createObject = (object) => {\n const assignedProduct =\n object.assigned_product &&\n (object.assigned_product != \"assign-product\"\n ? object.assigned_product\n : undefined);\n const products = this.store.imageMap.products;\n const product = assignedProduct && products && ( Array.isArray(products) ? products : typeof products === \"object\" ? Object.values(products) : [] ).find(\n (p) => p.id === assignedProduct,\n );\n const template =\n object.template && this.store.imageMap.templates[object.template];\n\n if (template) {\n let templateStyles = template.styles;\n if (object.template_tooltip_detached) {\n const { tooltip_html, tooltip_content, ...rest } = templateStyles;\n templateStyles = rest;\n }\n object = {\n ...object,\n ...templateStyles,\n };\n }\n\n if (assignedProduct && !product) {\n delayedObjects.push(object);\n return;\n }\n\n if (delayedObjects.includes(object)) {\n delete delayedObjects[delayedObjects.indexOf(object)];\n }\n\n if (\n assignedProduct &&\n product &&\n [\"SOLD\", \"HIDDEN\"].includes(product.status.toUpperCase())\n ) {\n object = {\n ...object,\n default_style: {\n ...object.default_style,\n opacity: 0,\n },\n static: true,\n };\n }\n\n switch (object.type) {\n case editorConsts.OBJECT_SPOT:\n this.objects[object.id] = new Spot(object, this.store);\n this.spots.push(this.objects[object.id]);\n break;\n case editorConsts.OBJECT_TEXT:\n this.objects[object.id] = new Text(object, this.store);\n break;\n case editorConsts.OBJECT_RECT:\n this.objects[object.id] = new Rect(object, this.store);\n break;\n case editorConsts.OBJECT_OVAL:\n this.objects[object.id] = new Oval(object, this.store);\n break;\n case editorConsts.OBJECT_POLY:\n this.objects[object.id] = new Poly(object, this.store);\n break;\n case editorConsts.OBJECT_SVG:\n this.objects[object.id] = new SVG(object, this.store);\n break;\n case editorConsts.OBJECT_SVG_SINGLE:\n this.objects[object.id] = new SVGSingle(object, this.store);\n break;\n case editorConsts.OBJECT_GROUP:\n this.objects[object.id] = new Group(object, this.store);\n }\n };\n\n this.store.getObjects().forEach(createObject);\n setTimeout(() => delayedObjects.forEach(createObject), 500);\n }\n setupContainers() {\n this.container.classList.add(\"imp-objects\");\n\n this.imageBackgroundsContainer.classList.add(\"imp-image-backgrounds\");\n this.imageBackgroundsContainer.setAttribute(\n \"id\",\n \"imp-image-backgrounds-\" + this.store.getID(),\n );\n this.stylesheet.setAttribute(\"id\", `stylesheet-${this.store.getID()}`);\n\n if (this.store.state.objectConfig.glowing_objects) {\n this.container.classList.add(\"imp-glowing-objects\");\n }\n }\n fillContainers() {\n let keys = Object.keys(this.objects).reverse();\n\n for (let key of keys) {\n this.container.appendChild(this.objects[key].element);\n this.imageBackgroundsContainer.appendChild(\n this.objects[key].imageBackgroundElement,\n );\n }\n }\n emptyContainers() {\n while (this.container.firstChild) {\n this.container.removeChild(this.container.lastChild);\n }\n while (this.imageBackgroundsContainer.firstChild) {\n this.imageBackgroundsContainer.removeChild(\n this.imageBackgroundsContainer.lastChild,\n );\n }\n }\n generateStylesheet() {\n let text = \"\";\n\n for (let id in this.objects) {\n text += this.objects[id].styles;\n }\n\n if (this.store.state.objectConfig.glowing_objects) {\n let glowColor = hexToRgb(\n this.store.state.objectConfig.glowing_objects_color,\n ) || { r: 255, b: 255, g: 255 };\n text += `@keyframes ObjectGlowAnimation {`;\n text += ` 0% {`;\n text += ` filter: drop-shadow(0 0 20px rgba(${glowColor.r}, ${glowColor.g}, ${glowColor.b}, ${this.store.state.objectConfig.glow_opacity}));`;\n text += ` }`;\n text += ` 50% {`;\n text += ` filter: drop-shadow(0 0 20px rgba(${glowColor.r}, ${glowColor.g}, ${glowColor.b}, 0));`;\n text += ` }`;\n text += ` 100% {`;\n text += ` filter: drop-shadow(0 0 20px rgba(${glowColor.r}, ${glowColor.g}, ${glowColor.b}, ${this.store.state.objectConfig.glow_opacity}));`;\n text += ` }`;\n text += `}`;\n }\n\n if (this.store.state.objectConfig.pageload_animation === \"fall-down\") {\n text += `.imp-object.imp-object-pageload-animation {\n opacity: 0;\n transition-duration: 500ms;\n }`;\n }\n\n if (this.store.state.objectConfig.pageload_animation === \"fade\") {\n text += `.imp-object.imp-object-pageload-animation {\n opacity: 0;\n transition-duration: 500ms;\n }`;\n }\n\n if (this.store.state.objectConfig.pageload_animation === \"grow\") {\n text += `.imp-object.imp-object-pageload-animation {\n opacity: 0;\n transform: scale(0);\n transition-duration: 500ms;\n }`;\n }\n\n if (this.store.state.objectConfig.pageload_animation === \"flash\") {\n text += `.imp-object.imp-object-pageload-animation {\n transition-duration: 350ms;\n }`;\n }\n\n this.stylesheet.innerHTML = text;\n }\n\n async animateObjects(delay = 0) {\n // Enable pageload animation, in case it was previously disabled\n // This ensures the animations will run again when switching artboards\n await this.store.dispatch(\"enablePageloadAnimation\");\n\n // If pageload animation is set to 'none', return\n if (this.store.state.objectConfig.pageload_animation === \"none\") return;\n\n // Calculate the interval between animations\n let interval = 750 / this.store.getObjects().length;\n if (this.store.getObjects().length > 20) {\n interval = 1500 / this.store.getObjects().length;\n }\n\n Object.keys(this.objects).forEach((id) => {\n if (this.objects[id].options.static) return;\n this.objects[id].element.classList.add(\"imp-object-pageload-animation\");\n });\n\n setTimeout(() => {\n const objectsArray = Object.keys(this.objects).map(\n (key) => this.objects[key],\n );\n const sortedObjectsArray = objectsArray.sort((a, b) => {\n return a.options.x < b.options.x ? -1 : 1;\n });\n\n let disablePageloadAnimationDelay = 100;\n for (let i = 0; i < sortedObjectsArray.length; i++) {\n const id = sortedObjectsArray[i].options.id;\n disablePageloadAnimationDelay += interval;\n if (this.objects[id].options.static) continue;\n this.animateObject(this.objects[id], interval * i);\n }\n setTimeout(() => {\n this.store.dispatch(\"disablePageloadAnimation\");\n }, disablePageloadAnimationDelay);\n }, delay);\n }\n animateObject(object, delay) {\n if (\n object.options.type === editorConsts.OBJECT_GROUP &&\n !object.options.single_object\n )\n return;\n let currentTime = 0;\n\n function animateFallDown() {\n window.requestAnimationFrame(function () {\n currentTime += 0.01666;\n let y = easeOutBounce(undefined, currentTime, -200, 200, 2);\n object.element.style.transform = `translateY(${y}px)`;\n if (currentTime <= 2) {\n animateFallDown();\n }\n });\n }\n\n setTimeout(() => {\n if (this.store.state.objectConfig.pageload_animation === \"fade\") {\n object.element.style.opacity = object.options.default_style.opacity;\n setTimeout(() => {\n object.element.classList.remove(\"imp-object-pageload-animation\");\n object.element.setAttribute(\"style\", \"\");\n }, 500);\n }\n\n if (this.store.state.objectConfig.pageload_animation === \"grow\") {\n object.element.style.opacity = object.options.default_style.opacity;\n object.element.style.transform = \"scale(1)\";\n setTimeout(() => {\n object.element.classList.remove(\"imp-object-pageload-animation\");\n object.element.setAttribute(\"style\", \"\");\n }, 500);\n }\n\n if (this.store.state.objectConfig.pageload_animation === \"fall-down\") {\n object.element.style.opacity = object.options.default_style.opacity;\n object.element.style.transitionProperty = \"opacity\";\n setTimeout(() => {\n object.element.classList.remove(\"imp-object-pageload-animation\");\n object.element.setAttribute(\"style\", \"\");\n }, 2000);\n animateFallDown();\n }\n\n if (this.store.state.objectConfig.pageload_animation === \"flash\") {\n this.highlightObject(object.options.id);\n setTimeout(() => {\n this.unhighlightObject(object.options.id);\n setTimeout(() => {\n object.element.classList.remove(\"imp-object-pageload-animation\");\n }, 400);\n }, 350);\n }\n }, delay);\n }\n\n highlightObject(id) {\n return new Promise((resolve) => {\n if (\n this.store.state.objectConfig.glowing_objects &&\n this.store.state.objectConfig.stop_glowing_on_mouseover &&\n !this.didStopGlowing\n ) {\n this.didStopGlowing = true;\n this.container.classList.remove(\"imp-glowing-objects\");\n }\n\n // If the object isn't in the currently active artboard, return\n if (!this.objects[id]) return;\n\n // If the object is a group and NOT a single object, return\n if (\n this.objects[id].options.type === editorConsts.OBJECT_GROUP &&\n !this.objects[id].options.single_object\n )\n return;\n\n // Apply mouseover styles\n // Get IDs of the objects to highlight\n let ids = this.objects[id].getHighlightIds();\n\n // Highlight the objects\n // And add the ids to the set of highlighted objects\n ids.forEach((id) => {\n this.objects[id].highlight();\n this.highlightedObjects.add(id);\n });\n\n // Send API event\n ImageMapPro.trigger({\n type: consts.HOOK_OBJECT_HIGHLIGHT,\n payload: {\n map: this.store.state.general.name,\n object: this.objects[id].options.title,\n },\n });\n requestAnimationFrame(resolve);\n });\n }\n unhighlightObject(id) {\n return new Promise((resolve) => {\n // Apply default styles\n // Get IDs of the objects to highlight\n let ids = this.objects[id].getHighlightIds();\n\n // Highlight the objects\n // And add the ids to the set of highlighted objects\n ids.forEach((id) => {\n this.objects[id].unhighlight();\n this.highlightedObjects.delete(id);\n });\n\n ImageMapPro.trigger({\n type: consts.HOOK_OBJECT_UNHIGHLIGHT,\n payload: {\n map: this.store.state.general.name,\n object: this.objects[id].options.title,\n },\n });\n\n requestAnimationFrame(resolve);\n });\n }\n unhighlightAllObjects() {\n return new Promise((resolve) => {\n for (let id of this.highlightedObjects) {\n this.unhighlightObject(id);\n }\n\n requestAnimationFrame(resolve);\n });\n }\n getFocusObjectCoordsAndZoom(id) {\n id = this.store.getObject({ id }).parent || id;\n\n if (this.store.getMaxZoom() == 1) {\n return {\n zoom: 1,\n pan: { x: 0, y: 0 },\n };\n }\n\n // Calculate center of the target object\n let rect = this.objects[id].getRect();\n let centerX = rect.x + rect.width / 2;\n let centerY = rect.y + rect.height / 2;\n\n let zoom = rect.width > rect.height ? 50 / rect.width : 50 / rect.height;\n if (zoom < 1) zoom = 1;\n if (zoom > this.store.getMaxZoom()) zoom = this.store.getMaxZoom();\n\n // Convert from % to px\n centerX = (centerX / 100) * this.store.getCanvasWrapRect().width * zoom;\n centerY = (centerY / 100) * this.store.getCanvasWrapRect().height * zoom;\n\n // Zoom\n return {\n zoom: zoom,\n pan: { x: centerX, y: centerY },\n };\n }\n getProductForObject(id) {\n const assignedProduct = this.objects[id].options.assigned_product;\n const products = this.store.imageMap.products;\n const productList = Array.isArray(products)\n ? products\n : products && typeof products === \"object\"\n ? Object.values(products)\n : [];\n\n return assignedProduct\n ? productList.find((product) => product.id === assignedProduct)\n : undefined;\n }\n buildProductLink(id, product) {\n const object = this.objects[id].options;\n const template =\n object.template && this.store.imageMap.templates[object.template];\n const prefix = (\n object.actions.link_prefix ||\n template?.styles?.actions?.link_prefix ||\n \"\"\n )\n .trim()\n .replace(/\\/+$/, \"\");\n const slug = String(product?.slug || \"\")\n .trim()\n .replace(/^\\/+/, \"\");\n\n if (!prefix) return slug ? `/${slug}` : \"\";\n if (!slug) return prefix;\n return `${prefix}/${slug}`;\n }\n openLink(link, openInNew) {\n if (!document.querySelector(\"#imp-temp-link\")) {\n document.body.appendChild(\n htmlToElement('
'),\n );\n }\n\n const tempLink = document.querySelector(\"#imp-temp-link\");\n tempLink.setAttribute(\"href\", link);\n\n if (openInNew) {\n tempLink.setAttribute(\"target\", \"_blank\");\n } else {\n tempLink.removeAttribute(\"target\");\n }\n\n tempLink.click();\n }\n getActionDelay(id) {\n const delay = Number(this.objects[id].options.actions.delay || 0);\n if (!Number.isFinite(delay) || delay <= 0) return 0;\n return delay * 1000;\n }\n showTooltipBeforeDelayedOpen(id) {\n if (this.objects[id]) this.highlightObject(id);\n\n const tooltipController = this.store.getTooltipController();\n if (!tooltipController) return;\n\n tooltipController.hideAllTooltips().then(() => {\n tooltipController.showTooltip(id);\n });\n }\n scheduleDelayedOpen(id, link, openInNew, delay) {\n if (this.delayedOpenTimers[id]) {\n clearTimeout(this.delayedOpenTimers[id]);\n delete this.delayedOpenTimers[id];\n }\n\n this.showTooltipBeforeDelayedOpen(id);\n this.delayedOpenTimers[id] = setTimeout(() => {\n if (openInNew) window.open(link, \"_blank\");\n else window.location.href = link;\n delete this.delayedOpenTimers[id];\n }, delay);\n }\n performClickAction(id) {\n id = this.store.getObject({ id }).parent || id;\n\n if (!this.objects[id]) return;\n\n if (this.objects[id].options.actions.click === \"open-product-page\") {\n const assignedProduct = this.objects[id].options.assigned_product;\n const product = this.getProductForObject(id);\n\n if (!assignedProduct || !product) return;\n\n const link = this.buildProductLink(id, product);\n if (!link) return;\n\n const openInNew = this.objects[id].options.actions.open_link_in_new_window;\n const delay = this.getActionDelay(id);\n if (delay > 0) {\n this.scheduleDelayedOpen(id, link, openInNew, delay);\n } else {\n this.openLink(link, openInNew);\n }\n }\n\n if (this.objects[id].options.actions.click === \"follow-link\") {\n const targetLink = this.objects[id].options.actions.link;\n const openInNew = this.objects[id].options.actions.open_link_in_new_window;\n const delay = this.getActionDelay(id);\n\n if (delay > 0) {\n this.scheduleDelayedOpen(id, targetLink, openInNew, delay);\n } else {\n this.openLink(targetLink, openInNew);\n }\n }\n\n if (this.objects[id].options.actions.click === \"run-script\") {\n eval(this.objects[id].options.actions.script.replace(\"
\", \"\"));\n }\n\n if (this.objects[id].options.actions.click === \"change-artboard\") {\n this.store.dispatch(\"changeArtboard\", {\n artboardId: this.objects[id].options.actions.artboard,\n zoomOut: true,\n });\n }\n\n ImageMapPro.trigger({\n type: consts.HOOK_OBJECT_CLICK,\n payload: {\n map: this.store.state.general.name,\n object: this.objects[id].options.title,\n },\n });\n }\n}\n","import {\n getElementRect,\n hexToRgb,\n isMobile,\n isPointInsidePolygon,\n} from \"Editor/scripts/utilities\";\nimport * as consts from \"Client/consts\";\nimport * as editorConsts from \"Editor/scripts/consts\";\nimport { processFieldData, evaluateVisibility } from \"Client/scripts/utilities\";\nimport { resolveTooltipExpressions } from \"Client/scripts/expression\";\nimport { createTooltipStyleRegistry, optimizeInlineStyles } from \"Client/scripts/inlineStyleOptimizer\";\nimport Tooltip from \"Client/UI/tooltip/tooltip\";\nimport TooltipFullscreen from \"Client/UI/tooltip/tooltipFullscreen\";\n\n/*\n\nControls everything related to tooltips, like creating, showing, hiding, calculating properties, etc\n\n*/\n\nexport default class TooltipController {\n store = undefined;\n tooltipsAreFullscreen = false;\n\n // The tooltip container\n container = document.createElement(\"div\");\n\n // Current mouse coords\n // used to update tooltip position\n mouseCoords = { x: 0, y: 0 };\n\n // Array containing all Tooltip objects\n tooltips = [];\n\n // Array containing indices of opened tooltips\n openedTooltips = new Set();\n\n // Allows to temporarily disable sticky tooltips\n stickyTooltips = undefined;\n\n // Cache for quick calculations\n tooltipElements = {};\n\n // Timeouts for the tooltip in/out animation\n tooltipAnimationTimeouts = {};\n\n bodyOverflow = undefined;\n\n constructor(store) {\n this.store = store;\n this.artboard = this.store.getArtboard();\n\n if (!this.store.state.tooltips.enable_tooltips) return;\n\n this.store.subscribe(this.handleAction.bind(this));\n\n // This is needed to enable and reset sticky tooltips by the API and the event controller\n this.stickyTooltips =\n this.artboard.tooltips.sticky_tooltips ||\n this.store.state.tooltips.sticky_tooltips;\n if (isMobile()) {\n this.stickyTooltips = false;\n }\n\n // No sticky tooltips on mobile!\n if (isMobile()) {\n this.disableStickyTooltips();\n }\n\n // Fullscreen tooltips flag\n if (\n this.store.state.tooltips.fullscreen_tooltips === \"always\" ||\n (this.store.state.tooltips.fullscreen_tooltips === \"mobile-only\" &&\n isMobile())\n ) {\n this.tooltipsAreFullscreen = true;\n }\n\n this.setupContainer();\n this.createTooltips();\n }\n async handleAction(action) {\n if (action.type === \"updateTooltipPositions\") {\n this.updateAllTooltipPositions();\n }\n if (action.type === \"closeFullscreenTooltip\") {\n this.hideAllTooltips();\n }\n if (action.type === \"zoomUpdate\") {\n this.updateAllTooltipPositions();\n }\n }\n disableStickyTooltips() {\n this.stickyTooltips = false;\n }\n resetStickyTooltips() {\n if (isMobile()) return;\n this.stickyTooltips = this.store.state.tooltips.sticky_tooltips;\n }\n\n // Create various elements\n setupContainer() {\n // Remove tooltip containers from previous init, if it exists\n document\n .querySelectorAll(\n `.imp-tooltips-container[data-image-map-id=\"${this.store.getID()}\"]`,\n )\n ?.forEach((el) => el.remove());\n\n // Create new container\n this.container.classList.add(\"imp-tooltips-container\");\n this.container.dataset.imageMapId = this.store.getID();\n\n // If tooltips are fullscreen, add class to the container\n if (this.tooltipsAreFullscreen) {\n this.container.classList.add(\"is-fullscreen\");\n let color_bg = hexToRgb(\n this.store.state.tooltips.fullscreen_background,\n ) || { r: 0, b: 0, g: 0 };\n this.container.style.background = `rgba(${color_bg.r}, ${color_bg.g}, ${color_bg.b}, ${this.store.state.tooltips.fullscreen_background_opacity})`;\n }\n }\n createTooltips() {\n let html = \"\";\n const styleRegistry = createTooltipStyleRegistry(`imp-tooltip-style-${this.store.getID()}`);\n\n for (let obj of this.store.getObjects()) {\n if (obj.parent) obj = this.store.getObject({ id: obj.parent });\n\n if (!obj.tooltip.enable_tooltip) continue;\n\n // Text objects don't have tooltips\n if (obj.type === editorConsts.OBJECT_TEXT) continue;\n\n // Tag-based visibility: if the object is hidden by a conditional_visibility\n // rule (matched against the assigned product's tags by id), skip its tooltip.\n if (Array.isArray(obj.conditional_visibility) && obj.conditional_visibility.length) {\n const visProduct = this.store.imageMap?.products?.find(\n (p) => p.id === obj.assigned_product,\n );\n if (!evaluateVisibility(obj.conditional_visibility, visProduct).visible) {\n continue;\n }\n }\n\n const template =\n obj.template && this.store.imageMap?.templates[obj.template];\n // Detaching applies only to the tooltip content. The object still keeps\n // the template's visual styles, while its own HTML/content must win.\n const templateTooltip =\n template && !obj.template_tooltip_detached ? template : null;\n const styleScope = template ? `template-${obj.template}` : `object-${obj.id}`;\n\n // Create a Tooltip object\n let tooltip = undefined;\n if (this.tooltipsAreFullscreen) {\n tooltip = new TooltipFullscreen({\n style: this.getTooltipStyle(\n template && template?.styles?.tooltip_style\n ? template.styles.tooltip_style\n : obj.tooltip_style\n ),\n content:\n templateTooltip && templateTooltip?.styles?.tooltip_content\n ? templateTooltip.styles.tooltip_content\n : obj.tooltip_content,\n html:\n templateTooltip && templateTooltip?.styles?.tooltip_html\n ? templateTooltip.styles.tooltip_html\n : obj.tooltip_html,\n animation: this.store.state.tooltips.tooltip_animation,\n id: obj.id,\n styleRegistry,\n styleScope,\n });\n } else {\n tooltip = new Tooltip({\n style: this.getTooltipStyle(\n template && template.styles && template.styles.tooltip_style\n ? template.styles.tooltip_style\n : obj.tooltip_style\n ),\n content: templateTooltip\n ? templateTooltip.styles.tooltip_content\n : obj.tooltip_content,\n html:\n templateTooltip &&\n templateTooltip.styles &&\n templateTooltip.styles.tooltip_html\n ? templateTooltip.styles.tooltip_html\n : obj.tooltip_html,\n animation: this.store.state.tooltips.tooltip_animation,\n id: obj.id,\n title: obj.title,\n styleRegistry,\n styleScope,\n });\n }\n\n // Store the tooltip object for future reference\n this.tooltips[obj.id] = tooltip;\n\n // Get html\n let tooltipHtml = tooltip.html();\n const assignedProduct = obj.assigned_product;\n\n if (assignedProduct && assignedProduct != \"assign-product\") {\n const productData = this.store.imageMap.products?.find((p) => p.id === assignedProduct);\n\n if (!productData) continue;\n\n const tooltipCfg = template && template.styles && template.styles.tooltip;\n tooltipHtml = resolveTooltipExpressions(tooltipHtml, productData, { tooltipConfig: tooltipCfg });\n }\n\n try {\n tooltipHtml = tooltipHtml.replace(/{{\\s*/g, \"\");\n tooltipHtml = tooltipHtml.replace(/\\s*}}/g, \"\");\n tooltipHtml = tooltipHtml.replace(/>\\s*}\\s*/g, \">\");\n // Remove any leftover single '}' that appear before a tag or end of string\n tooltipHtml = tooltipHtml.replace(/}\\s*(?=<|$)/g, \"\");\n } catch (e) {}\n\n // Append sanitized HTML\n html += tooltipHtml;\n }\n\n // Add the tooltips to the container\n const optimized = optimizeInlineStyles(html, `imp-tooltip-style-${this.store.getID()}-raw`);\n this.injectOptimizedTooltipStyles([styleRegistry.css(), optimized.css].filter(Boolean).join('\\n'));\n this.container.innerHTML = optimized.html;\n\n // Sticky tooltips class\n if (this.stickyTooltips) {\n this.container.classList.add(\"imp-sticky-tooltips\");\n }\n\n // Clear cache\n this.tooltipElements = {};\n }\n getTooltipElement(id) {\n id = this.store.getObject({ id }).parent || id;\n\n // Cache\n if (!this.tooltipElements[id]) {\n this.tooltipElements[id] = this.container.querySelector(\n `[data-tooltip-id=\"${id}\"]`,\n );\n }\n\n return this.tooltipElements[id];\n }\n\n injectOptimizedTooltipStyles(css) {\n const id = `imp-tooltip-optimized-styles-${String(this.store.getID()).replace(/[^a-z0-9_-]/gi, \"-\")}`;\n let el = document.getElementById(id);\n\n if (!css) {\n if (el) el.remove();\n return;\n }\n\n if (!el) {\n el = document.createElement(\"style\");\n el.id = id;\n el.setAttribute(\"data-image-map-id\", this.store.getID());\n document.head.appendChild(el);\n }\n\n el.textContent = css;\n }\n\n getTooltipStyle(style = {}) {\n const mapStyle = this.store.state.tooltips || {};\n return {\n position: mapStyle.position || \"top\",\n width: mapStyle.width != null ? mapStyle.width : 225,\n auto_width: mapStyle.auto_width != null ? mapStyle.auto_width : true,\n offset_x: mapStyle.offset_x != null ? mapStyle.offset_x : 0,\n offset_y: mapStyle.offset_y != null ? mapStyle.offset_y : 0,\n padding: mapStyle.padding != null ? mapStyle.padding : 15,\n border_radius: mapStyle.border_radius != null ? mapStyle.border_radius : 10,\n background_color: mapStyle.background_color || \"#222222\",\n background_opacity: mapStyle.background_opacity != null ? mapStyle.background_opacity : 1,\n text_color: mapStyle.text_color || \"#ffffff\",\n enter_animation: mapStyle.tooltip_animation || \"none\",\n enter_duration: mapStyle.enter_duration != null ? mapStyle.enter_duration : 220,\n enter_distance: mapStyle.enter_distance != null ? mapStyle.enter_distance : 10,\n enter_blur: mapStyle.enter_blur != null ? mapStyle.enter_blur : 8,\n arrow_disabled: mapStyle.arrow_disabled === true,\n arrow_shape: mapStyle.arrow_shape || \"triangle\",\n arrow_size: mapStyle.arrow_size != null ? mapStyle.arrow_size : 8,\n arrow_width: mapStyle.arrow_width != null ? mapStyle.arrow_width : 16,\n arrow_gap: mapStyle.arrow_gap != null ? mapStyle.arrow_gap : 4,\n arrow_offset: mapStyle.arrow_offset != null ? mapStyle.arrow_offset : 0,\n arrow_color: mapStyle.arrow_color || mapStyle.background_color || \"#222222\",\n ...(style || {}),\n };\n }\n\n // Show/hide tooltips\n showTooltip(id) {\n if (window.startchanging) debugger;\n id = this.store.getObject({ id }).parent || id;\n\n // Check if tooltip element exists\n if (!this.getTooltipElement(id)) return;\n\n // Check if object exists\n return new Promise(async (resolve) => {\n let object = this.store.getObject({ id });\n\n // If the object doesn't have tooltip enabled, then return\n if (!object.tooltip.enable_tooltip) {\n resolve();\n return;\n }\n\n // i = the index of the tooltip\n if (object.type === editorConsts.OBJECT_TEXT) {\n resolve();\n return;\n }\n\n // If the tooltip is already visible, then return\n if (this.openedTooltips.has(id)) {\n resolve();\n return;\n }\n\n // Add tooltip to the list of opened tooltips\n this.openedTooltips.add(id);\n\n // Show fullscreen or normal tooltips\n if (\n (this.store.state.tooltips.fullscreen_tooltips === \"mobile-only\" &&\n isMobile()) ||\n this.store.state.tooltips.fullscreen_tooltips === \"always\"\n ) {\n // Fullscreen tooltips\n this.animateFullscreenTooltipIn(id);\n requestAnimationFrame(resolve);\n } else {\n // Normal tooltips\n let el = this.getTooltipElement(id);\n clearTimeout(this.tooltipAnimationTimeouts[id]);\n el.style.display = \"inline-block\";\n el.style.transitionProperty = \"none\";\n el.style.transform = \"none\";\n this.updateTooltipPosition(id);\n this.animateTooltipIn(id);\n requestAnimationFrame(resolve);\n }\n\n // Send event\n ImageMapPro.trigger({\n type: consts.HOOK_TOOLTIP_SHOW,\n payload: {\n map: this.store.state.general.name,\n object: this.store.getObject({ id }).title,\n },\n });\n });\n }\n hideTooltip(id) {\n id = this.store.getObject({ id }).parent || id;\n\n return new Promise((resolve) => {\n let object = this.store.getObject({ id });\n if (object.type === editorConsts.OBJECT_TEXT) {\n resolve();\n return;\n }\n\n // Remove from the list of opened tooltips\n if (!this.openedTooltips.has(id)) {\n resolve();\n return;\n } else {\n this.openedTooltips.delete(id);\n }\n\n // Hide mobile tooltip\n if (\n (this.store.state.tooltips.fullscreen_tooltips === \"mobile-only\" &&\n isMobile()) ||\n this.store.state.tooltips.fullscreen_tooltips === \"always\"\n ) {\n this.animateFullscreenTooltipOut(id);\n requestAnimationFrame(resolve);\n } else {\n // Hide normal tooltip\n this.animateTooltipOut(id);\n requestAnimationFrame(resolve);\n }\n\n // Send event\n ImageMapPro.trigger({\n type: consts.HOOK_TOOLTIP_HIDE,\n payload: {\n map: this.store.state.general.name,\n object: this.store.getObject({ id }).title,\n },\n });\n });\n }\n hideAllTooltips() {\n return new Promise((resolve) => {\n this.openedTooltips.forEach((id) => this.hideTooltip(id));\n requestAnimationFrame(resolve);\n });\n }\n updateTooltipPosition(id) {\n if (this.tooltipsAreFullscreen) return;\n id = this.store.getObject({ id }).parent || id;\n\n let tooltipEl = this.getTooltipElement(id);\n let wrapEl = tooltipEl.parentNode;\n let objectRect = this.getObjectVisibleRect(id);\n let position = this.tooltips[id].style.position;\n\n let distance = 20;\n let smartEdge = this.store.state.tooltips.smart_edge_tooltips !== false;\n\n // Measure the tooltip at a neutral (top-left) position first, so its\n // natural content width is not squeezed by proximity to the right edge\n // of the container. When auto_width is on, pin that measured width so the\n // bubble keeps its size after it gets shifted toward an edge - otherwise\n // the inline-block would re-wrap word-per-word once placed near the border.\n if (smartEdge) {\n wrapEl.style.left = \"0px\";\n wrapEl.style.top = \"0px\";\n if (this.tooltips[id].style.auto_width) {\n tooltipEl.style.width = \"\";\n tooltipEl.style.width = Math.ceil(tooltipEl.getBoundingClientRect().width) + \"px\";\n }\n }\n let tooltipRect = tooltipEl.getBoundingClientRect();\n let tw = tooltipRect.width;\n let th = tooltipRect.height;\n\n // Calculate and set the position\n let pos = { x: 0, y: 0 };\n if (position === \"left\") {\n pos.x = objectRect.x - distance - tw;\n pos.y = objectRect.y + objectRect.height / 2 - th / 2;\n }\n if (position === \"right\") {\n pos.x = objectRect.x + objectRect.width + distance;\n pos.y = objectRect.y + objectRect.height / 2 - th / 2;\n }\n if (position === \"top\") {\n pos.x = objectRect.x + objectRect.width / 2 - tw / 2;\n pos.y = objectRect.y - distance - th;\n }\n if (position === \"bottom\") {\n pos.x = objectRect.x + objectRect.width / 2 - tw / 2;\n pos.y = objectRect.y + objectRect.height + distance;\n }\n\n // Apply offset\n pos.x +=\n (this.tooltips[id].style.offset_x / 100) *\n this.store.getCanvasWrapRect().width;\n pos.y +=\n (this.tooltips[id].style.offset_y / 100) *\n this.store.getCanvasWrapRect().height;\n\n // The position the tooltip is aimed at (centered on the object, plus the\n // configured offset) before any edge clamping. Used to keep the arrow\n // pointing at the hovered region after a constrain shift.\n let aimedPos = { x: pos.x, y: pos.y };\n\n // Set\n tooltipEl.parentNode.style.left =\n pos.x +\n this.store.getCanvasWrapRect().offset.left -\n this.store.getTooltipsContainerRect().offset.left +\n \"px\";\n tooltipEl.parentNode.style.top =\n pos.y +\n this.store.getCanvasWrapRect().offset.top -\n this.store.getTooltipsContainerRect().offset.top +\n \"px\";\n\n // Constrain\n if (this.store.state.tooltips.constrain_tooltips) {\n tooltipRect = tooltipEl.getBoundingClientRect();\n\n if (tooltipRect.x < 0) pos.x -= tooltipRect.x;\n if (tooltipRect.y < 0) pos.y -= tooltipRect.y;\n if (tooltipRect.x + tooltipRect.width > window.innerWidth)\n pos.x += window.innerWidth - (tooltipRect.x + tooltipRect.width);\n if (tooltipRect.y + tooltipRect.height > window.innerHeight)\n pos.y += window.innerHeight - (tooltipRect.y + tooltipRect.height);\n\n tooltipEl.parentNode.style.left =\n pos.x +\n this.store.getCanvasWrapRect().offset.left -\n this.store.getTooltipsContainerRect().offset.left +\n \"px\";\n tooltipEl.parentNode.style.top =\n pos.y +\n this.store.getCanvasWrapRect().offset.top -\n this.store.getTooltipsContainerRect().offset.top +\n \"px\";\n }\n\n // Keep the arrow pointing at the hovered region. When the bubble was\n // shifted away from where it was aimed (edge clamping), counter-translate\n // the arrow by the same amount so it stays over the object center instead\n // of the middle of the moved bubble. Clamped so the arrow can't leave the\n // bubble. translateX/Y is used so the base arrow offset (set via class) is\n // preserved.\n this.updateArrowOffset(tooltipEl, position, pos.x - aimedPos.x, pos.y - aimedPos.y, tw, th, smartEdge);\n }\n updateArrowOffset(tooltipEl, position, shiftX, shiftY, tw, th, smartEdge) {\n let arrowEl = tooltipEl.querySelector(\".hs-arrow\");\n if (!arrowEl) return;\n\n if (!smartEdge) {\n arrowEl.style.transform = \"\";\n return;\n }\n\n let pad = 12;\n if (position === \"top\" || position === \"bottom\") {\n let limit = Math.max(0, tw / 2 - pad);\n let a = Math.max(-limit, Math.min(limit, -shiftX));\n arrowEl.style.transform = a ? `translateX(${a}px)` : \"\";\n } else {\n let limit = Math.max(0, th / 2 - pad);\n let a = Math.max(-limit, Math.min(limit, -shiftY));\n arrowEl.style.transform = a ? `translateY(${a}px)` : \"\";\n }\n }\n updateAllTooltipPositions() {\n for (let tooltipIndex of this.openedTooltips) {\n this.updateTooltipPosition(tooltipIndex);\n }\n }\n animateTooltipIn(id) {\n let el = this.getTooltipElement(id);\n let animation = this.getTooltipEnterAnimation(id);\n let duration = this.getTooltipEnterDuration(id);\n\n if (this.store.state.tooltips.sticky_tooltips) {\n el.style.opacity = 1;\n return;\n }\n\n if ([\"fade-up-blur\", \"soft-pop\", \"slide\", \"zoom-blur\"].includes(animation)) {\n let style = this.tooltips[id]?.style || {};\n let usesBlur = this.tooltipAnimationUsesBlur(animation);\n el.style.transitionProperty = \"none\";\n el.style.transitionDuration = duration + \"ms\";\n el.style.transitionTimingFunction = \"cubic-bezier(0.22, 1, 0.36, 1)\";\n el.style.opacity = 0;\n el.style.transform = this.getTooltipInitialTransform(animation, style.position, this.getTooltipEnterDistance(id));\n el.style.filter = usesBlur ? `blur(${this.getTooltipEnterBlur(id)}px)` : \"none\";\n clearTimeout(this.tooltipAnimationTimeouts[id]);\n this.tooltipAnimationTimeouts[id] = requestAnimationFrame(() => {\n el.style.transitionProperty = usesBlur ? \"opacity, transform, filter\" : \"opacity, transform\";\n el.style.transitionDuration = duration + \"ms\";\n el.style.opacity = 1;\n el.style.transform = this.getTooltipFinalTransform(animation);\n el.style.filter = usesBlur ? \"blur(0)\" : \"none\";\n });\n\n return;\n }\n\n if (animation === \"grow\") {\n el.style.transitionProperty = \"none\";\n el.style.transitionDuration = duration + \"ms\";\n el.style.transform = \"scale(0, 0)\";\n el.style.opacity = 1;\n clearTimeout(this.tooltipAnimationTimeouts[id]);\n this.tooltipAnimationTimeouts[id] = requestAnimationFrame(() => {\n el.style.transitionProperty = \"transform\";\n el.style.transitionDuration = duration + \"ms\";\n el.style.transform = \"scale(1, 1)\";\n });\n\n return;\n }\n\n if (animation === \"fade\") {\n el.style.transitionProperty = \"none\";\n el.style.transitionDuration = duration + \"ms\";\n el.style.opacity = 0;\n clearTimeout(this.tooltipAnimationTimeouts[id]);\n this.tooltipAnimationTimeouts[id] = requestAnimationFrame(() => {\n el.style.transitionProperty = \"opacity\";\n el.style.transitionDuration = duration + \"ms\";\n el.style.opacity = 1;\n });\n\n return;\n }\n\n el.style.opacity = 1;\n }\n animateTooltipOut(id) {\n let tooltip = this.getTooltipElement(id);\n let animation = this.getTooltipEnterAnimation(id);\n let duration = this.getTooltipEnterDuration(id);\n\n // Stop all videos\n tooltip.querySelectorAll(\"video\").forEach(function (element) {\n element.dispatchEvent(new Event(\"pause\"));\n });\n tooltip.querySelectorAll(\"iframe\").forEach(function (element) {\n element.setAttribute(\"src\", element.getAttribute(\"src\"));\n });\n\n if (this.store.state.tooltips.sticky_tooltips) {\n tooltip.style.opacity = 0;\n tooltip.style.display = \"none\";\n return;\n }\n\n if ([\"fade-up-blur\", \"soft-pop\", \"slide\", \"zoom-blur\"].includes(animation)) {\n let style = this.tooltips[id]?.style || {};\n let usesBlur = this.tooltipAnimationUsesBlur(animation);\n tooltip.style.transitionProperty = usesBlur ? \"opacity, transform, filter\" : \"opacity, transform\";\n tooltip.style.transitionDuration = duration + \"ms\";\n tooltip.style.transitionTimingFunction = \"cubic-bezier(0.22, 1, 0.36, 1)\";\n tooltip.style.opacity = 0;\n tooltip.style.transform = this.getTooltipInitialTransform(animation, style.position, this.getTooltipEnterDistance(id));\n tooltip.style.filter = usesBlur ? `blur(${this.getTooltipEnterBlur(id)}px)` : \"none\";\n clearTimeout(this.tooltipAnimationTimeouts[id]);\n this.tooltipAnimationTimeouts[id] = setTimeout(() => {\n tooltip.style.display = \"none\";\n tooltip.style.transform = this.getTooltipFinalTransform(animation);\n tooltip.style.filter = usesBlur ? \"blur(0)\" : \"none\";\n }, duration);\n\n return;\n }\n\n if (animation === \"grow\") {\n tooltip.style.transitionDuration = duration + \"ms\";\n tooltip.style.transform = \"scale(0, 0)\";\n clearTimeout(this.tooltipAnimationTimeouts[id]);\n this.tooltipAnimationTimeouts[id] = setTimeout(() => {\n tooltip.style.opacity = 0;\n tooltip.style.display = \"none\";\n }, duration);\n\n return;\n }\n\n if (animation === \"fade\") {\n tooltip.style.transitionDuration = duration + \"ms\";\n tooltip.style.opacity = 0;\n clearTimeout(this.tooltipAnimationTimeouts[id]);\n this.tooltipAnimationTimeouts[id] = setTimeout(() => {\n tooltip.style.display = \"none\";\n }, duration);\n return;\n }\n\n tooltip.style.opacity = 0;\n tooltip.style.display = \"none\";\n }\n\n getTooltipEnterAnimation(id) {\n let animation = this.tooltips[id]?.style?.enter_animation;\n if (animation) return animation;\n return this.store.state.tooltips.tooltip_animation || \"none\";\n }\n\n getTooltipEnterDuration(id) {\n let duration = parseFloat(this.tooltips[id]?.style?.enter_duration);\n if (!Number.isFinite(duration) || duration < 0) duration = 220;\n return duration;\n }\n\n getTooltipEnterDistance(id) {\n let distance = parseFloat(this.tooltips[id]?.style?.enter_distance);\n if (!Number.isFinite(distance) || distance < 0) distance = 10;\n return distance;\n }\n\n getTooltipEnterBlur(id) {\n let blur = parseFloat(this.tooltips[id]?.style?.enter_blur);\n if (!Number.isFinite(blur) || blur < 0) blur = 8;\n return blur;\n }\n\n getTooltipEnterTransform(position, distance) {\n if (position === \"bottom\") return `translate3d(0, ${-distance}px, 0)`;\n if (position === \"left\") return `translate3d(${distance}px, 0, 0)`;\n if (position === \"right\") return `translate3d(${-distance}px, 0, 0)`;\n return `translate3d(0, ${distance}px, 0)`;\n }\n\n getTooltipInitialTransform(animation, position, distance) {\n if (animation === \"soft-pop\") return `${this.getTooltipEnterTransform(position, distance)} scale(0.96)`;\n if (animation === \"zoom-blur\") return \"scale(0.96)\";\n return this.getTooltipEnterTransform(position, distance);\n }\n\n getTooltipFinalTransform(animation) {\n if (animation === \"soft-pop\" || animation === \"zoom-blur\") return \"translate3d(0, 0, 0) scale(1)\";\n return \"translate3d(0, 0, 0)\";\n }\n\n tooltipAnimationUsesBlur(animation) {\n return animation === \"fade-up-blur\" || animation === \"zoom-blur\";\n }\n animateFullscreenTooltipIn(id) {\n // Container\n this.container.style.display = \"block\";\n this.container.style.opacity = 1;\n\n // Tooltip\n let tooltip = this.getTooltipElement(id);\n tooltip.style.display = \"flex\";\n tooltip.style.opacity = 0;\n tooltip.style.transform = \"scale(0.33)\";\n requestAnimationFrame(() => {\n tooltip.style.opacity = 1;\n tooltip.style.transform = \"scale(1)\";\n });\n\n // Prevent scrolling of the body and store the original overflow attribute value\n this.bodyOverflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n }\n animateFullscreenTooltipOut(id) {\n // Container\n this.container.style.opacity = 0;\n clearTimeout(this.tooltipAnimationTimeouts[id + \"-container\"]);\n this.tooltipAnimationTimeouts[id + \"-container\"] = setTimeout(() => {\n this.container.style.display = \"none\";\n }, 350);\n\n // Tooltip\n let tooltip = this.getTooltipElement(id);\n tooltip.style.opacity = 0;\n tooltip.style.transform = \"scale(0.33)\";\n clearTimeout(this.tooltipAnimationTimeouts[id]);\n this.tooltipAnimationTimeouts[id] = setTimeout(() => {\n tooltip.style.display = \"none\";\n }, 350);\n\n // Stop all videos\n tooltip.querySelectorAll(\"video\").forEach(function (element) {\n element.dispatchEvent(new Event(\"pause\"));\n });\n tooltip.querySelectorAll(\"iframe\").forEach(function (element) {\n element.setAttribute(\"src\", element.getAttribute(\"src\"));\n });\n\n // Restore original body overflow\n document.body.style.overflow = this.bodyOverflow;\n }\n\n // Calcs\n isPointInsideVisibleTooltip({ x, y }) {\n // If a fullscreen tooltip is open, return true\n if (this.tooltipsAreFullscreen && this.openedTooltips.size > 0) {\n return true;\n }\n\n for (let id of this.openedTooltips) {\n let polys = this.createPolysForTooltip(id);\n if (this.stickyTooltips) {\n if (isPointInsidePolygon(x, y, polys.polyTooltipOnly)) {\n return true;\n }\n } else {\n if (\n isPointInsidePolygon(x, y, polys.poly) ||\n isPointInsidePolygon(x, y, polys.polyTooltipOnly)\n ) {\n return true;\n }\n }\n }\n\n return false;\n }\n createPolysForTooltip(id) {\n id = this.store.getObject({ id }).parent || id;\n\n // Used when calculating the poly size\n // need to use getBoundingClientRect() because element.offsetWidth is undefined?\n // window scroll must be added, because the mouse coordiates and the tooltip's rect includes scroll\n let objectRect = this.store\n .getObjectController()\n .objects[id].getBoundingClientRect();\n let objectCenterX = objectRect.x + window.scrollX + objectRect.width / 2;\n let objectCenterY = objectRect.y + window.scrollY + objectRect.height / 2;\n\n // Cache tooltip dimensions and coords\n let tooltipRect = getElementRect(this.getTooltipElement(id));\n let tx = tooltipRect.offset.left;\n let ty = tooltipRect.offset.top;\n let tw = tooltipRect.offsetWidth;\n let th = tooltipRect.offsetHeight;\n\n // Create a polygon, representing the tooltip area + buffer space\n // Poly without buffer is needed, in case the tooltip gets moved due to window constrain\n // and the object center ends up inside the tooltip\n let poly = [];\n let polyTooltipOnly = [];\n\n if (this.store.getObject({ id }).tooltip_style.position === \"top\") {\n poly = [\n [tx, ty],\n [tx + tw, ty],\n [tx + tw, ty + th],\n [tx + tw / 2, objectCenterY],\n [tx, ty + th],\n ];\n polyTooltipOnly = [\n [tx, ty],\n [tx + tw, ty],\n [tx + tw, ty + th],\n [tx, ty + th],\n ];\n }\n if (this.store.getObject({ id }).tooltip_style.position === \"bottom\") {\n poly = [\n [tx, ty],\n [tx + tw / 2, objectCenterY],\n [tx + tw, ty],\n [tx + tw, ty + th],\n [tx, ty + th],\n ];\n polyTooltipOnly = [\n [tx, ty],\n [tx + tw, ty],\n [tx + tw, ty + th],\n [tx, ty + th],\n ];\n }\n if (this.store.getObject({ id }).tooltip_style.position === \"left\") {\n poly = [\n [tx, ty],\n [tx + tw, ty],\n [objectCenterX, ty + th / 2],\n [tx + tw, ty + th],\n [tx, ty + th],\n ];\n polyTooltipOnly = [\n [tx, ty],\n [tx + tw, ty],\n [tx + tw, ty + th],\n [tx, ty + th],\n ];\n }\n if (this.store.getObject({ id }).tooltip_style.position === \"right\") {\n poly = [\n [tx, ty],\n [tx + tw, ty],\n [tx + tw, ty + th],\n [tx, ty + th],\n [objectCenterX, ty + th / 2],\n ];\n polyTooltipOnly = [\n [tx, ty],\n [tx + tw, ty],\n [tx + tw, ty + th],\n [tx, ty + th],\n ];\n }\n\n return { poly, polyTooltipOnly };\n }\n getObjectVisibleRect(id) {\n if (!this.store.getObjectController().objects[id]) return;\n\n let sx;\n let sy;\n let sw;\n let sh;\n\n let object = this.store.getObject({ id });\n let objectRect = this.store.getObjectController().objects[id].getRect();\n\n let windowWidth = window.innerWidth;\n let windowHeight = window.innerHeight;\n\n if (this.stickyTooltips) {\n // Sticky tooltips\n // Set width/height of the shape to 0\n // and X and Y to the mouse coordinates\n sx =\n this.store.getEventCoordinates().x -\n this.store.getCanvasWrapRect().offset.left;\n sy =\n this.store.getEventCoordinates().y -\n this.store.getCanvasWrapRect().offset.top;\n\n sw = 0;\n sh = 0;\n } else {\n sw = (objectRect.width / 100) * this.store.getCanvasWrapRect().width;\n sh = (objectRect.height / 100) * this.store.getCanvasWrapRect().height;\n\n sw = sw * this.store.getZoom();\n sh = sh * this.store.getZoom();\n\n sx = (objectRect.x / 100) * this.store.getCanvasWrapRect().width;\n sy = (objectRect.y / 100) * this.store.getCanvasWrapRect().height;\n\n sx = sx * this.store.getZoom() + this.store.getPan().x;\n sy = sy * this.store.getZoom() + this.store.getPan().y;\n }\n\n if (\n object.type === editorConsts.OBJECT_SPOT &&\n this.store.state.objectConfig.scale_spots\n ) {\n let scaledWidth = sw / this.store.getZoom();\n let scaledHeight = sh / this.store.getZoom();\n sx += sw / 2 - scaledWidth / 2;\n\n if (object.default_style.use_icon && object.default_style.icon_is_pin) {\n sy += sh - scaledHeight;\n } else {\n sy += sh / 2 - scaledHeight / 2;\n }\n\n sw = scaledWidth;\n sh = scaledHeight;\n }\n\n // Limit the rect of the object to the bounds of the wrap\n if (\n this.store.getIsFullscreen() &&\n this.store.state.tooltips.constrain_tooltips\n ) {\n // In fullscreen mode compensate for the scroll\n let canvasOffsetLeft =\n this.store.getCanvasWrapRect().offset.left - window.scrollX;\n let canvasOffsetTop =\n this.store.getCanvasWrapRect().offset.top - window.scrollY;\n\n if (sx + canvasOffsetLeft < 0) {\n sw = sw + sx + canvasOffsetLeft;\n sx = -canvasOffsetLeft;\n }\n if (sx + canvasOffsetLeft + sw > windowWidth) {\n sw += windowWidth - (sx + canvasOffsetLeft + sw);\n }\n if (sy + canvasOffsetTop < 0) {\n sh = sh + sy + canvasOffsetTop;\n sy = -canvasOffsetTop;\n }\n if (sy + canvasOffsetTop + sh > windowHeight) {\n sh += windowHeight - (sy + canvasOffsetTop + sh);\n }\n } else {\n if (sx < 0) {\n sw = sw + sx;\n sx = 0;\n }\n if (sx + sw > this.store.getCanvasWrapRect().width) {\n sw = this.store.getCanvasWrapRect().width - sx;\n }\n if (sy < 0) {\n sh = sh + sy;\n sy = 0;\n }\n if (sy + sh > this.store.getCanvasWrapRect().height) {\n sh = this.store.getCanvasWrapRect().height - sy;\n }\n }\n\n return {\n x: sx,\n y: sy,\n width: sw,\n height: sh,\n };\n }\n}\n","import { getElementRect, htmlToElement, lerp } from \"Editor/scripts/utilities\";\nimport ZoomButtons from \"Client/UI/zoomButtons\";\n\nexport default class ZoomController {\n store = undefined;\n mac = navigator.platform.toUpperCase().indexOf(\"MAC\") >= 0;\n\n // Elements\n buttons = undefined;\n scrollMessage = undefined;\n\n // Zooming functionality\n currentZoom = 1;\n targetZoom = 1;\n maxZoom = 4;\n zoomMultiplier = 1.45;\n\n // Panning functionality\n ix = 0;\n iy = 0;\n\n lastX = 0;\n lastY = 0;\n\n targetPanX = 0;\n targetPanY = 0;\n\n actualPanX = 0;\n actualPanY = 0;\n\n initialPanX = 0;\n initialPanY = 0;\n\n panDeltaX = 0;\n panDeltaY = 0;\n\n minPanX = 0;\n minPanY = 0;\n\n // Pinching functionality\n pinchInitial = [\n { x: 0, y: 0 },\n { x: 0, y: 0 },\n ];\n pinchInitialDistance = 0;\n pinchInitialZoom = 0;\n\n // Scroll message timeouts\n showTimeout = undefined;\n hideStartTimeout = undefined;\n hideEndTimeout = undefined;\n\n constructor(store) {\n this.store = store;\n this.setMaxZoom();\n\n this.store.subscribe(this.handleAction.bind(this));\n this.init();\n }\n\n init() {\n // if (\n // !this.store.state.zooming.enable_zooming &&\n // !this.store.getArtboard().zooming.enable_zooming\n // ) return;\n\n // this.store.subscribe(this.handleAction.bind(this));\n\n if (\n this.store.state.zooming.enable_zoom_buttons ||\n this.store.getArtboard().zooming.enable_zoom_buttons\n ) {\n this.createButtons();\n }\n\n if (\n this.store.state.zooming.hold_ctrl_to_zoom ||\n this.store.getArtboard().zooming.hold_ctrl_to_zoom\n ) {\n this.createScrollMessage();\n }\n }\n // Actions\n handleAction(action) {\n if (action.type == \"failedToZoom\") {\n this.displayScrollMessage();\n }\n if (action.type == \"panTo\") {\n this.setTargetPan({ x: action.payload.x, y: action.payload.y });\n }\n if (action.type == \"startPan\") {\n this.startPan({ x: action.payload.x, y: action.payload.y });\n }\n if (action.type == \"pan\") {\n this.pan({ x: action.payload.x, y: action.payload.y });\n }\n if (action.type == \"startPinch\") {\n this.startPinch(action.payload.event);\n }\n if (action.type == \"pinch\") {\n this.pinch(action.payload.event);\n }\n if (action.type == \"zoomAtRect\") {\n }\n if (action.type == \"resize\") {\n this.resetZoom(true);\n }\n }\n\n // UI\n createButtons() {\n this.buttons = new ZoomButtons({\n id: this.store.getID(),\n });\n }\n\n insertUI() {\n const isZoomingEnabled = this.store.state.zooming.enable_zooming || this.store.getArtboard().zooming.enable_zooming;\n const isZoomButtonsEnabled = this.store.state.zooming.enable_zoom_buttons || this.store.getArtboard().zooming.enable_zoom_buttons;\n\n if (\n !isZoomingEnabled ||\n !isZoomButtonsEnabled ||\n !this.buttons\n )\n return;\n\n if (\n this.store.state.object_list.enable_object_list &&\n this.store.state.object_list.menu_style === \"on-top\" &&\n this.store.state.object_list.menu_position === \"right\"\n ) {\n this.store\n .getUIWrap()\n .querySelector(\".imp-ui-bottom-left\")\n .appendChild(this.buttons.zoomInButton);\n this.store\n .getUIWrap()\n .querySelector(\".imp-ui-bottom-left\")\n .appendChild(this.buttons.zoomOutButton);\n } else {\n this.store\n .getUIWrap()\n .querySelector(\".imp-ui-bottom-right\")\n .appendChild(this.buttons.zoomInButton);\n this.store\n .getUIWrap()\n .querySelector(\".imp-ui-bottom-right\")\n .appendChild(this.buttons.zoomOutButton);\n }\n }\n createScrollMessage() {\n return;\n let keyName = \"CTRL\";\n if (this.mac) keyName = \"⌘\";\n\n let html = \"\";\n html += '
\";\n\n this.scrollMessage = htmlToElement(html);\n this.store.getUIWrap().appendChild(this.scrollMessage);\n }\n displayScrollMessage() {\n return;\n this.scrollMessage.style.display = \"block\";\n\n clearTimeout(this.showTimeout);\n clearTimeout(this.hideStartTimeout);\n clearTimeout(this.hideEndTimeout);\n\n this.showTimeout = setTimeout(() => {\n this.scrollMessage.classList.add(\"imp-visible\");\n this.hideStartTimeout = setTimeout(() => {\n this.scrollMessage.classList.remove(\"imp-visible\");\n this.hideEndTimeout = setTimeout(() => {\n this.scrollMessage.style.display = \"none\";\n }, 250);\n }, 1000);\n }, 10);\n }\n\n // High level functions\n // called by user actions\n resetZoom(animate) {\n this.targetZoom = 1;\n this.targetPanX = 0;\n this.targetPanY = 0;\n\n if (!animate) {\n this.currentZoom = 1;\n this.actualPanX = 0;\n this.actualPanY = 0;\n }\n\n this.redraw({ animate: animate });\n }\n zoomIn({ coords, animate = true, targetZoom }) {\n // Check if it's possible to zoom further\n if (this.targetZoom < this.maxZoom) {\n // Adjust zoom\n let endZoom = targetZoom || this.currentZoom * this.zoomMultiplier;\n\n // Focal point\n let zoomAtX = 0,\n zoomAtY = 0;\n\n // If an event exists, it means that the zoom was triggered from the mouse wheel\n if (coords) {\n // Focal point is at event point, relative to the zoomed wrap\n zoomAtX = coords.x;\n zoomAtY = coords.y;\n } else {\n // Assume that the event happened at the center of the non-zoomed wrap\n zoomAtX =\n this.store.getCanvasWrapRect().offset.left +\n this.store.getCanvasWrapRect().width / 2;\n zoomAtY =\n this.store.getCanvasWrapRect().offset.top +\n this.store.getCanvasWrapRect().height / 2;\n }\n\n this.setTargetZoom({\n zoom: endZoom,\n focalPointX: zoomAtX,\n focalPointY: zoomAtY,\n animate: animate,\n });\n }\n }\n zoomOut({ coords, animate }) {\n // Check if it's possible to zoom further\n if (this.targetZoom > 1) {\n // Adjust zoom\n let targetZoom = this.currentZoom / this.zoomMultiplier;\n\n // Focal point\n let zoomAtX = 0,\n zoomAtY = 0;\n\n // If an event exists, it means that the zoom was triggered from the mouse wheel\n if (coords) {\n // Focal point is at event point, relative to the zoomed wrap\n zoomAtX = coords.x;\n zoomAtY = coords.y;\n } else {\n // Assume that the event happened at the center of the non-zoomed wrap\n zoomAtX =\n this.store.getCanvasWrapRect().offset.left +\n this.store.getCanvasWrapRect().width / 2;\n zoomAtY =\n this.store.getCanvasWrapRect().offset.top +\n this.store.getCanvasWrapRect().height / 2;\n }\n\n this.setTargetZoom({\n zoom: targetZoom,\n focalPointX: zoomAtX,\n focalPointY: zoomAtY,\n animate: animate,\n });\n }\n }\n startPan({ x, y }) {\n // Initial event coordinates\n this.ix = x;\n this.iy = y;\n\n // Cache the current pan\n this.initialPanX = this.actualPanX;\n this.initialPanY = this.actualPanY;\n }\n pan({ x, y }) {\n this.panDeltaX = this.ix - x;\n this.panDeltaY = this.iy - y;\n\n this.targetPanX = this.initialPanX - this.panDeltaX;\n this.targetPanY = this.initialPanY - this.panDeltaY;\n\n this.redraw({ animate: false });\n }\n startPinch(event) {\n this.pinchInitial[0] = {\n x: event.touches[0].pageX,\n y: event.touches[0].pageY,\n };\n this.pinchInitial[1] = {\n x: event.touches[1].pageX,\n y: event.touches[1].pageY,\n };\n\n this.initialPanX = this.actualPanX;\n this.initialPanY = this.actualPanY;\n\n this.ix = (event.touches[0].pageX + event.touches[1].pageX) / 2;\n this.iy = (event.touches[0].pageY + event.touches[1].pageY) / 2;\n\n this.lastX = this.ix;\n this.lastY = this.iy;\n\n this.pinchInitialDistance = Math.sqrt(\n Math.pow(this.pinchInitial[1].x - this.pinchInitial[0].x, 2) +\n Math.pow(this.pinchInitial[1].y - this.pinchInitial[0].y, 2),\n );\n this.pinchInitialZoom = this.currentZoom;\n }\n pinch(event) {\n let eventX = (event.touches[0].pageX + event.touches[1].pageX) / 2;\n let eventY = (event.touches[0].pageY + event.touches[1].pageY) / 2;\n\n // Pan\n this.actualPanX += eventX - this.lastX;\n this.actualPanY += eventY - this.lastY;\n\n this.lastX = eventX;\n this.lastY = eventY;\n\n // Zoom\n let distance = Math.sqrt(\n Math.pow(event.touches[1].pageX - event.touches[0].pageX, 2) +\n Math.pow(event.touches[1].pageY - event.touches[0].pageY, 2),\n );\n let delta = distance / this.pinchInitialDistance;\n\n this.setTargetZoom({\n zoom: this.pinchInitialZoom * delta,\n focalPointX: eventX,\n focalPointY: eventY,\n });\n }\n\n // Low level functions\n // calculate actual scale and translate values\n // and apply them\n setTargetPan({ x, y, redraw = true }) {\n // x and y are coordinates in pixels on the 2Destate Map, AFTER the desired zoom is applied\n // from them we calculate the actual offset (panX, panY)\n let panX = -x + this.store.getCanvasWrapRect().width / 2;\n let panY = -y + this.store.getCanvasWrapRect().height / 2;\n\n this.targetPanX = panX;\n this.targetPanY = panY;\n\n if (redraw) this.redraw({ animate: true });\n }\n setTargetZoom({\n zoom,\n focalPointX,\n focalPointY,\n animate = true,\n redraw = true,\n }) {\n // focalPointX and focalPointY are coordinates, to which the zoom will move\n // but it will not hard pan to those coordinates\n\n // Stop interpolation at the actual pan\n this.targetPanX = this.actualPanX;\n this.targetPanY = this.actualPanY;\n\n // Limit the zoom level\n this.targetZoom = zoom;\n if (this.targetZoom > this.maxZoom) this.targetZoom = this.maxZoom;\n if (this.targetZoom < 1) this.targetZoom = 1;\n\n // Calculate base zoom offset\n let baseOffsetX =\n (this.store.getCanvasWrapRect().width * this.targetZoom -\n this.store.getCanvasWrapRect().width * this.currentZoom) /\n 2;\n let baseOffsetY =\n (this.store.getCanvasWrapRect().height * this.targetZoom -\n this.store.getCanvasWrapRect().height * this.currentZoom) /\n 2;\n\n // Focal point\n if (focalPointX && focalPointY) {\n let scaleWrapRect = getElementRect(this.store.getScaleWrap());\n let fx = focalPointX - scaleWrapRect.offset.left;\n let fy = focalPointY - scaleWrapRect.offset.top;\n\n // Calculate focal offset\n let focalOffsetX =\n baseOffsetX *\n (((this.store.getCanvasWrapRect().width * this.currentZoom) / 2 - fx) /\n ((this.store.getCanvasWrapRect().width * this.currentZoom) / 2));\n let focalOffsetY =\n baseOffsetY *\n (((this.store.getCanvasWrapRect().height * this.currentZoom) / 2 - fy) /\n ((this.store.getCanvasWrapRect().height * this.currentZoom) / 2));\n\n this.targetPanX -= baseOffsetX;\n this.targetPanY -= baseOffsetY;\n this.targetPanX += focalOffsetX;\n this.targetPanY += focalOffsetY;\n }\n\n if (redraw) this.redraw({ animate: animate });\n }\n redraw({ animate = false }) {\n this.limit();\n this.interpolate(animate);\n\n // Let everyone know that zoom updated\n this.store.dispatch(\"zoomUpdate\");\n\n // Draw\n this.store.getScaleWrap().style.transform = `scale(${this.currentZoom}, ${this.currentZoom})`;\n this.store.getTranslateWrap().style.transform = `translate(${this.actualPanX}px, ${this.actualPanY}px)`;\n\n // Repeat\n if (animate) {\n if (\n this.currentZoom != this.targetZoom ||\n this.actualPanX != this.targetPanX ||\n this.actualPanY != this.targetPanY\n ) {\n window.requestAnimationFrame(() => {\n this.redraw({ animate });\n });\n }\n }\n }\n setMaxZoom() {\n if (\n !this.store.getArtboard().zooming.enable_zooming &&\n !this.store.state.zooming.enable_zooming\n )\n this.maxZoom = 1;\n\n if (\n this.store.getImage() &&\n (this.store.state.zooming.limit_max_zoom_to_image_size ||\n this.store.getArtboard().zooming.limit_max_zoom_to_artboard_size)\n ) {\n this.maxZoom =\n this.store.getImage().naturalWidth /\n this.store.getCanvasWrapRect().width;\n } else {\n this.maxZoom = this.store.getArtboard().zooming.max_zoom;\n }\n if (this.maxZoom < 1) this.maxZoom = 1;\n }\n\n // Redraw methods\n limit() {\n // Limit zoom level, actual pan and target pan\n this.minPanX =\n this.store.getCanvasWrapRect().width -\n this.store.getCanvasWrapRect().width * this.targetZoom;\n this.minPanY =\n this.store.getCanvasWrapRect().height -\n this.store.getCanvasWrapRect().height * this.targetZoom;\n\n if (this.targetPanX > 0) this.targetPanX = 0;\n if (this.targetPanY > 0) this.targetPanY = 0;\n if (this.targetPanX < this.minPanX) this.targetPanX = this.minPanX;\n if (this.targetPanY < this.minPanY) this.targetPanY = this.minPanY;\n }\n interpolate(animate) {\n if (animate) {\n this.currentZoom = lerp(this.currentZoom, this.targetZoom, 0.1);\n this.actualPanX = lerp(this.actualPanX, this.targetPanX, 0.1);\n this.actualPanY = lerp(this.actualPanY, this.targetPanY, 0.1);\n\n // Complete the interpolation if threshold is reached\n if (Math.abs(this.currentZoom - this.targetZoom) < 0.001)\n this.currentZoom = this.targetZoom;\n if (Math.abs(this.actualPanX - this.targetPanX) < 1)\n this.actualPanX = this.targetPanX;\n if (Math.abs(this.actualPanY - this.targetPanY) < 1)\n this.actualPanY = this.targetPanY;\n } else {\n this.currentZoom = this.targetZoom;\n this.actualPanX = this.targetPanX;\n this.actualPanY = this.targetPanY;\n }\n }\n updateStore() {}\n}\n","window.ImageMapPro = {}\nwindow.ImageMapPro.instances = []","import {\n getElementRect,\n ready,\n uuidv4,\n loadImage,\n getCompressedData,\n storeCompressedData,\n isMobile,\n} from \"Editor/scripts/utilities\";\nimport * as consts from \"Client/consts\";\nimport EventController from \"Client/controllers/eventController\";\nimport FullscreenController from \"Client/controllers/fullscreenController\";\nimport NavigatorController from \"Client/controllers/navigatorController\";\nimport ObjectController from \"Client/controllers/objectController\";\nimport TooltipController from \"Client/controllers/tooltipController\";\nimport ZoomController from \"Client/controllers/zoomController\";\nimport CacheController from \"Client/controllers/cacheController\";\nimport ArtboardController from \"Client/controllers/artboardController\";\nimport MenuController from \"Client/controllers/menuController\";\nimport Store from \"Client/store/store\";\nimport * as Importer from \"Editor/scripts/import\";\n\nconst isEditorPreview = () =>\n typeof window !== \"undefined\" &&\n window.__2DESTATE_IMAGEMAPPRO_PREVIEW__ === true;\n\n// Unified maps: per-map runtime caches live much longer than the legacy\n// global caches — the delta endpoint keeps them fresh on every load.\nconst MAP_RUNTIME_CACHE_TTL = 7 * 24 * 3600000; // 7 days\n\nexport class ImageMap {\n constructor(selector, config, launchParams) {\n // Generic properties\n this.id = uuidv4();\n this.config = Importer.importSettings(config);\n this.launchParams = launchParams;\n this.isStaggingDomain = false;\n\n // Controllers\n this.tooltipController = undefined;\n this.fullscreenController = undefined;\n this.navigatorController = undefined;\n this.zoomController = undefined;\n this.eventController = undefined;\n this.cacheController = undefined;\n\n // Elements\n this.root = undefined;\n this.container = undefined;\n this.canvasWrap = undefined;\n this.scaleWrap = undefined;\n this.translateWrap = undefined;\n this.UIWrap = undefined;\n this.image = undefined;\n this.background = undefined;\n\n // DIGI2, products\n this.products = [];\n this.templates = {};\n\n // Init when the DOM is ready\n ready(() => {\n // Support for jQuery method of initializing the 2Destate Map\n if (Object.prototype.toString.call(selector) == \"[object String]\") {\n this.root = document.querySelector(selector);\n } else {\n this.root = selector;\n }\n\n this.init();\n });\n }\n async init() {\n this.setInitialSize();\n this.isStaggingDomain = window.location.origin.includes(\"webflow.io\");\n // Fetch products & templates\n // Configs published as a unified map carry a map_id and use the per-map\n // runtime endpoint; everything else (old per-floor/per-building configs,\n // editor preview, panel) keeps the legacy fetch paths.\n if (this.useMapRuntime()) {\n await this.initMapRuntimeData();\n } else {\n this.products = await this.fetchProducts();\n this.templates = await this.fetchTemplates();\n }\n\n this.store = new Store({ initialState: this.config, imageMap: this });\n this.store.dispatch(\"init\");\n\n if (this.eventController) this.eventController.removeEvents();\n // Init layers before anything\n this.artboardController = new ArtboardController(\n this.store,\n this.launchParams.layerID,\n );\n\n // Preload images\n // because many calculations depend on the image size\n if (!(await this.loadImages())) return false;\n\n // Build HTML and create refs\n this.root.innerHTML = this.html();\n this.impCanvasWrap = this.root.querySelector(\".imp-canvas-wrap\");\n this.root.dataset.imageMapId = this.store.getID();\n this.root.dataset.imageMapName = this.store.getName();\n this.containerEl = this.root.querySelector(\".imp-container\");\n this.canvasWrap = this.root.querySelector(\".imp-canvas\");\n this.scaleWrap = this.canvasWrap.querySelector(\".imp-scale\");\n this.translateWrap = this.canvasWrap.querySelector(\".imp-translate\");\n this.UIWrap = this.root.querySelector(\".imp-ui\");\n\n // Images have loaded and HTML is generated\n this.setBackground();\n\n // After creating the HTML and cached the DOM Nodes in the state,\n // adjust the size of the 2Destate Map\n await this.adjustSize();\n this.root.style.height = \"\";\n\n // Do it again, because the mobile menu depends on the size of the 2Destate Map\n // which in turn might depend on the size of the parent\n // which in turn might be 0 before the map exists\n await this.adjustSize();\n\n // Create controllers\n this.eventController = new EventController(this.store);\n this.cacheController = new CacheController(500);\n this.tooltipController = new TooltipController(this.store);\n this.zoomController = new ZoomController(this.store);\n this.fullscreenController = new FullscreenController(\n this.store,\n this.launchParams.isFullscreen,\n this.launchParams.closeFullscreenCallback,\n );\n this.navigatorController = new NavigatorController(this.store);\n this.objectController = new ObjectController(this.store);\n this.menuController = new MenuController(this.store);\n\n // Setup\n document.body.insertBefore(\n this.tooltipController.container,\n document.body.firstChild,\n );\n this.store.getScaleWrap().appendChild(this.objectController.container);\n this.store\n .getScaleWrap()\n .appendChild(this.objectController.imageBackgroundsContainer);\n this.root.appendChild(this.objectController.stylesheet);\n this.artboardController.insertUI();\n this.zoomController.insertUI();\n this.fullscreenController.insertUI();\n this.navigatorController.insertUI();\n this.menuController.insertMenu();\n this.eventController.buildUIModel();\n\n // Custom code\n this.loadCustomCode();\n\n this.store.subscribe(this.handleAction.bind(this));\n\n ImageMapPro.trigger({\n type: consts.HOOK_MAP_INIT,\n payload: {\n map: this.config.general.name,\n },\n });\n\n const loadedEvent = new CustomEvent(\"2destateLoaded\");\n\n document.dispatchEvent(loadedEvent);\n }\n async deinit() {\n try {\n this.eventController.removeEvents();\n this.root.innerHTML = \"\";\n } catch (e) {\n // console.log(e)\n }\n }\n async handleAction(action) {\n if (action.type == \"resize\") {\n this.adjustSize();\n }\n }\n html() {\n let theme =\n this.store.state.general.ui_theme === \"light\"\n ? \"imp-ui-light\"\n : \"imp-ui-dark\";\n let html = `\n
`;\n\n return html;\n }\n\n setInitialSize() {\n try {\n const artboard = this.config.artboards && this.config.artboards[0];\n if (!artboard) return;\n\n const general = this.config.general || {};\n const objectList = this.config.object_list || {};\n\n // Parent width\n const parent = this.root.parentNode;\n if (!parent) return;\n\n const parentWidth = parent.getBoundingClientRect().width;\n let menuWidth = 0;\n if (\n objectList.enable_object_list &&\n objectList.menu_style === \"default\" &&\n !isMobile()\n ) {\n menuWidth = 240;\n }\n\n // Container width\n let containerWidth;\n if (general.responsive) {\n containerWidth = parentWidth;\n } else {\n containerWidth = artboard.width;\n }\n\n // Artboard ratio\n const artboardRatio = artboard.width / artboard.height;\n\n // Canvas size\n const canvasWidth = containerWidth - menuWidth;\n const canvasHeight = canvasWidth / artboardRatio;\n\n // Set height on root\n this.root.style.height = canvasHeight + \"px\";\n } catch (e) {\n console.warn(\"Error setting initial size\", e);\n }\n }\n\n async loadImages() {\n // Load the main image\n if (\n this.store.getArtboard().image_url &&\n this.store.getArtboard().background_type === \"image\"\n ) {\n let result = await loadImage(this.store.getArtboard().image_url);\n if (!result) {\n console.log(\"Could not load main image!\");\n return false;\n }\n this.image = result.image;\n this.image.classList.add(\"imp-image\");\n }\n\n // Pre-load all object background images for mouseover\n for (let obj of this.store.getObjects()) {\n if (obj.default_style.background_type === \"image\")\n await loadImage(obj.mouseover_style.background_image_url);\n }\n\n return true;\n }\n async adjustSize() {\n // Wait until first draw\n // while (this.store.getImage() && getElementRect(this.canvasWrap).height === 0) {\n // await new Promise(r => setTimeout(r, 500))\n // }\n\n await new Promise((r) => setTimeout(r, 50));\n\n let parentWidth = this.root.parentNode.getBoundingClientRect().width;\n let containerWidth;\n let canvasWidth, canvasHeight;\n const fitContainer = this.store.getArtboard().fit_container;\n\n // Artboard ratio\n let artboardRatio =\n this.store.getArtboard().width / this.store.getArtboard().height;\n\n // Is there menu?\n let menuWidth = 0;\n if (\n this.store.state.object_list.enable_object_list &&\n this.store.state.object_list.menu_style === \"default\"\n ) {\n menuWidth = this.store.getIsMenuMobile() ? 0 : 240;\n if (this.store.state.object_list.menu_position == \"right\") {\n this.store.getContainer().style.paddingRight = menuWidth + \"px\";\n }\n if (this.store.state.object_list.menu_position == \"left\") {\n this.store.getContainer().style.paddingLeft = menuWidth + \"px\";\n }\n }\n\n // If fullscreen,\n // set the canvas size and return\n if (this.launchParams.isFullscreen) {\n this.store.getCanvasWrap().style.width =\n this.calculateFullscreenCanvasSize().width + \"px\";\n this.store.getCanvasWrap().style.height =\n this.calculateFullscreenCanvasSize().height + \"px\";\n return;\n }\n\n // Container width\n // if the map is responsive, the container width is the parent width\n // otherwise it's the width of the map\n if (this.store.state.general.responsive) {\n containerWidth = parentWidth;\n } else {\n containerWidth = this.store.getArtboard().width;\n }\n\n // Canvas size\n // width is the container width minus the menu width\n // height is the width divided by the artboard ratio\n canvasWidth = containerWidth - menuWidth;\n canvasHeight = canvasWidth / artboardRatio;\n\n // Set container and canvas sizes\n if (!fitContainer)\n this.store.getContainer().style.width = containerWidth + \"px\";\n this.store.getCanvasWrap().style.width = fitContainer\n ? \"auto\"\n : canvasWidth + \"px\";\n this.store.getCanvasWrap().style.height = fitContainer\n ? \"100%\"\n : canvasHeight + \"px\";\n\n if (fitContainer && this.impCanvasWrap) {\n if (this.store.getIsMenuMobile()) {\n this.store.getContainer().style.width = \"100%\";\n this.store.getContainer().style.height = \"auto\";\n this.impCanvasWrap.style.setProperty(\"height\", \"auto\", \"important\");\n this.impCanvasWrap.style.width = \"auto\";\n } else {\n this.store.getContainer().style.height = \"100%\";\n this.impCanvasWrap.style.aspectRatio = `${artboardRatio}/1`;\n this.impCanvasWrap.style.setProperty(\"height\", \"100%\");\n }\n }\n }\n async updateImage() {\n // Called when changing layer\n // Load the new image\n // and change the SRC of the current image\n if (\n this.store.getArtboard().image_url &&\n this.store.getArtboard().background_type === \"image\"\n ) {\n let result = await loadImage(this.store.getArtboard().image_url);\n if (this.image) this.image.remove();\n this.image = result.image;\n this.image.classList.add(\"imp-image\");\n this.scaleWrap.appendChild(this.image);\n }\n\n // Update the size after changing the image\n this.adjustSize();\n }\n async fetchProductsForPreview() {\n const products = JSON.parse(localStorage.getItem(\"products\")) || [];\n return Promise.resolve(products);\n }\n\n async fetchTemplatesForPreview() {\n return Promise.resolve(JSON.parse(localStorage.getItem(\"templates\")));\n }\n\n async fetchProducts() {\n try {\n if (\n isEditorPreview() ||\n window.location.href.match(/panel\\.2destate/g)\n ) {\n console.log('Fetching products for preview...');\n return await this.fetchProductsForPreview();\n }\n\n const productIds = this.config?.required_product_ids;\n let storedProducts = [];\n\n if (!productIds || productIds.length == 0) return;\n\n if (localStorage.getItem(\"compressedProducts\")) {\n storedProducts = (await getCompressedData(\"compressedProducts\")) || [];\n }\n\n const missingProductIds = productIds.filter(id =>\n !storedProducts.some(p => p.id === id && !p.unavailable)\n );\n let fetchedProducts = [];\n\n if(missingProductIds.length > 0) {\n const products = await fetch(`${consts.getApiUrl()}/projects/${this.config.project_id}/products`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n product_ids: missingProductIds,\n })\n });\n \n fetchedProducts = await products.json();\n }\n const allProducts = [...storedProducts, ...fetchedProducts, ...missingProductIds.map(id => ({ id, unavailable: true }))];\n\n if (fetchedProducts.length > 0) {\n await storeCompressedData('compressedProducts', allProducts);\n }\n\n return allProducts.filter(p => !p.unavailable) || [];\n } catch (err) {\n console.error(`Failed to fetch products data: ${err}`);\n }\n }\n\n async fetchTemplates() {\n const projectId = this.config?.project_id;\n\n if (!projectId || projectId === \"\") {\n return {};\n }\n\n try {\n if (\n isEditorPreview() ||\n window.location.href.match(/panel\\.2destate\\.com/g)\n )\n return await this.fetchTemplatesForPreview();\n\n const firstArtboard = this.config.artboards && this.config.artboards[0];\n const templateIds = new Set();\n\n const collectTemplates = (objects) => {\n if (!objects) return;\n for (const obj of objects) {\n if (obj.template) templateIds.add(obj.template);\n if (obj.children) collectTemplates(obj.children);\n }\n };\n\n if (firstArtboard) {\n collectTemplates(firstArtboard.children);\n }\n\n // Get stored templates from cache\n let storedTemplates = {};\n if (localStorage.getItem('compressedTemplates')) {\n storedTemplates = await getCompressedData('compressedTemplates') || {};\n }\n\n // Find missing template IDs\n const missingTemplateIds = [...templateIds].filter(id => !storedTemplates[id]);\n\n const initialTemplates = { ...storedTemplates };\n const promises = [];\n\n // Only fetch missing templates\n for (const id of missingTemplateIds) {\n promises.push(\n fetch(`${consts.getApiUrl()}/search-engine/templates/${projectId}/${id}`)\n .then((res) => res.json())\n .then((data) => {\n Object.assign(initialTemplates, data);\n })\n .catch((err) =>\n console.error(`Failed to fetch template ${id}:`, err),\n ),\n );\n }\n\n await Promise.all(promises);\n\n // Store templates in cache if we fetched new ones\n if (missingTemplateIds.length > 0) {\n await storeCompressedData('compressedTemplates', initialTemplates);\n }\n\n // Fetch all templates in background only when cache is missing or incomplete\n if (\n missingTemplateIds.length > 0 ||\n Object.keys(storedTemplates).length === 0\n ) {\n fetch(`${consts.getApiUrl()}/search-engine/templates/${projectId}`)\n .then((res) => res.json())\n .then(async (allTemplates) => {\n Object.assign(this.templates, allTemplates);\n await storeCompressedData('compressedTemplates', this.templates);\n })\n .catch((err) => console.error(`Failed to fetch all templates:`, err));\n }\n\n return initialTemplates;\n } catch (err) {\n console.error(`Failed to fetch templates data: ${err}`);\n return {};\n }\n }\n\n // ---------------------------------------------------------------------\n // Unified maps runtime (configs with a map_id)\n // Products + templates are cached per map and kept fresh through a single\n // anonymous delta endpoint instead of the legacy global caches.\n // ---------------------------------------------------------------------\n\n useMapRuntime() {\n return (\n !!this.config.map_id &&\n !isEditorPreview() &&\n !window.location.href.match(/panel\\.2destate/g)\n );\n }\n\n mapRuntimeCacheKeys() {\n const mapId = this.config.map_id;\n return {\n products: `imp.map.${mapId}.products`,\n templates: `imp.map.${mapId}.templates`,\n manifest: `imp.map.${mapId}.manifest`,\n };\n }\n\n async initMapRuntimeData() {\n try {\n const keys = this.mapRuntimeCacheKeys();\n\n const [cachedProducts, cachedTemplates, cachedManifest] =\n await Promise.all([\n getCompressedData(keys.products),\n getCompressedData(keys.templates),\n getCompressedData(keys.manifest),\n ]);\n\n const hasCache =\n Array.isArray(cachedProducts) &&\n cachedTemplates !== null &&\n cachedManifest !== null &&\n !!cachedManifest.hash;\n\n if (hasCache) {\n // Use the cache as an immediate fallback, but finish the lightweight\n // delta sync before controllers render. Tooltips are materialized once\n // by TooltipController during init; a background-only refresh updated\n // this.templates after that point and left the already-built tooltip\n // HTML stale until a second page load.\n this.products = cachedProducts;\n this.templates = cachedTemplates;\n\n await this.syncMapRuntimeData(\n keys,\n cachedProducts,\n cachedTemplates,\n cachedManifest,\n );\n } else {\n // No cache: block on the runtime call, same ordering guarantees\n // as the legacy fetch path.\n await this.syncMapRuntimeData(keys, [], {}, null);\n }\n } catch (err) {\n console.error(`Failed to init map runtime data: ${err}`);\n }\n }\n\n async syncMapRuntimeData(keys, products, templates, manifest) {\n const res = await fetch(\n `${consts.getApiUrl()}/search-engine/map/${this.config.map_id}/runtime`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n known_hash: manifest?.hash || null,\n known_products: manifest?.product_hashes || {},\n known_templates: manifest?.template_hashes || {},\n }),\n },\n );\n\n if (!res.ok) {\n throw new Error(`Map runtime request failed (${res.status})`);\n }\n\n const data = await res.json();\n\n if (data.unchanged) return;\n\n // Merge products: replace/add changed ones by id, drop removed\n const removedProductIds = new Set(data.removed_product_ids || []);\n const changedProducts = data.products || [];\n const changedProductIds = new Set(changedProducts.map((p) => p.id));\n const mergedProducts = [\n ...products.filter(\n (p) => !removedProductIds.has(p.id) && !changedProductIds.has(p.id),\n ),\n ...changedProducts,\n ];\n\n // Merge templates: replace/add changed ones, drop removed\n const mergedTemplates = { ...templates, ...(data.templates || {}) };\n for (const id of data.removed_template_ids || []) {\n delete mergedTemplates[id];\n }\n\n // Update the live structures so newly opened tooltips use fresh data\n this.products = mergedProducts;\n this.templates = mergedTemplates;\n\n // Persist caches + manifest\n await Promise.all([\n storeCompressedData(keys.products, mergedProducts, MAP_RUNTIME_CACHE_TTL),\n storeCompressedData(\n keys.templates,\n mergedTemplates,\n MAP_RUNTIME_CACHE_TTL,\n ),\n storeCompressedData(\n keys.manifest,\n {\n hash: data.hash,\n product_hashes: data.product_hashes || {},\n template_hashes: data.template_hashes || {},\n },\n MAP_RUNTIME_CACHE_TTL,\n ),\n ]);\n }\n\n setBackground() {\n if (this.background) this.background.remove();\n if (this.image) this.image.remove();\n\n // Image\n if (\n this.store.getArtboard().background_type === \"image\" &&\n this.store.getArtboard().image_url\n ) {\n this.scaleWrap.appendChild(this.image);\n }\n\n // Color\n if (this.store.getArtboard().background_type === \"color\") {\n if (!this.background) {\n this.background = document.createElement(\"div\");\n this.background.classList.add(\"imp-background\");\n }\n this.background.style.background =\n this.store.getArtboard().background_color;\n this.scaleWrap.appendChild(this.background);\n }\n }\n calculateFullscreenCanvasSize() {\n // Calculate new width/height\n let rootElementWidth = window.innerWidth;\n let rootElementHeight = window.innerHeight;\n let canvasWidth, canvasHeight;\n\n // If there is an object menu, reduce the measured width of the root element\n if (\n this.store.state.object_list.enable_object_list &&\n !this.store.getIsMenuMobile()\n ) {\n rootElementWidth = rootElementWidth - 240;\n }\n\n // Fit canvas to root element dimensions\n let screenRatio = rootElementWidth / rootElementHeight;\n let mapRatio =\n this.store.getArtboard().width / this.store.getArtboard().height;\n if (this.store.getArtboard().use_image_size && this.image) {\n mapRatio = this.image.naturalWidth / this.image.naturalHeight;\n }\n\n if (mapRatio < screenRatio) {\n canvasWidth = rootElementHeight * mapRatio;\n canvasHeight = rootElementHeight;\n } else {\n canvasWidth = rootElementWidth;\n canvasHeight = rootElementWidth / mapRatio;\n }\n\n return {\n width: canvasWidth,\n height: canvasHeight,\n };\n }\n loadCustomCode() {\n // Load custom JS\n if (this.store.state.custom_code.custom_js) {\n let script = document.createElement(\"script\");\n script.innerHTML = this.store.state.custom_code.custom_js;\n document.body.appendChild(script);\n }\n\n // Load custom CSS\n if (this.store.state.custom_code.custom_css) {\n let style = document.createElement(\"style\");\n style.innerHTML = this.store.state.custom_code.custom_css;\n document.body.appendChild(style);\n }\n }\n}\n","let queue = []\n\nexport function queueAction(action) {\n let l = queue.length\n\n queue.unshift(action)\n\n if (l === 0) {\n runAction()\n }\n}\n\nasync function runAction() {\n await queue[queue.length - 1].action()\n queue.pop()\n\n if (queue.length > 0) {\n batch()\n runAction()\n }\n}\n\nfunction batch() {\n if (queue.length > 2) {\n let batchedQueue = {}\n for (let action of queue) {\n batchedQueue[action.name] = action\n }\n\n queue = []\n for (let actionName in batchedQueue) {\n queue.push(batchedQueue[actionName])\n }\n }\n}","import * as utilities from \"Editor/scripts/utilities\";\n\nexport const artboardDefaults = {\n id: \"default-id\", // UUID generated in the editor\n type: \"artboard\",\n title: \"Artboard\", // from the editor\n background_type: \"color\", // none / color / image\n background_color: \"#ffffff\",\n image_url: \"\", // [optional] overrides config.image.url\n width: 848, // [optional] overrides config.general.width\n height: 480, // [optional] overrides config.general.height\n fit_container: false, // [optional] overrides config.general.fit_container\n use_image_size: false, // [optional] overrides config.general.use_image_size\n tooltips: {\n enable_tooltips: true,\n show_tooltips: \"mouseover\", // mouseover, click\n },\n zooming: {\n enable_zooming: false,\n max_zoom: 4,\n limit_max_zoom_to_image_size: false,\n enable_zoom_buttons: false,\n enable_navigator: false,\n },\n children: [],\n};\n\nexport const objectDefaults = {\n id: \"spot-0\",\n title: \"Object\",\n\n // spot, rect, oval, poly, text, svg, svg-single, group\n type: \"spot\",\n\n x: 0,\n y: 0,\n width: 44,\n height: 44,\n static: false,\n children: [],\n parent_id: \"\",\n single_object: false,\n assigned_product: \"assign-product\",\n // Tag-based show/hide rules for this object, matched by STABLE tag id.\n // Each entry: { tag_id, mode: \"has\" | \"not_has\", action: \"show\" | \"hide\" }.\n // Empty array = always visible (backward compatible).\n conditional_visibility: [],\n template: \"\",\n template_tooltip_detached: false,\n\n default_style: {\n opacity: 1,\n\n background_type: \"color\", // color / image\n background_color: \"#000000\",\n background_opacity: 0.4,\n conditional_background_color: [], // Conditional background colors\n\n // border\n border_radius: 4,\n border_width: 0,\n border_style: \"solid\",\n border_color: \"#ffffff\",\n border_opacity: 1,\n\n // background image\n background_image_url: \"\",\n background_image_opacity: 1,\n background_image_scale: 1, // 0-2\n background_image_offset_x: 0,\n background_image_offset_y: 0,\n\n // poly-specific\n stroke_color: \"#ffffff\",\n stroke_opacity: 0.75,\n stroke_width: 0,\n stroke_dasharray: \"0\",\n stroke_linecap: \"round\",\n\n // spot-specific\n use_icon: true,\n icon_size: 44,\n icon_type: \"library\", // or 'custom'\n icon_svg:\n '
',\n icon_fill: \"#000000\",\n icon_url: \"\",\n icon_is_pin: true,\n icon_shadow: false,\n\n parent_filters: [],\n\n // SVG-specific\n filters: [],\n },\n mouseover_style: {\n opacity: 1,\n\n background_type: \"color\", // color / image\n background_color: \"#000000\",\n background_opacity: 0.8,\n\n // background image\n background_image_url: \"\",\n background_image_opacity: 1,\n background_image_scale: 1,\n background_image_offset_x: 0,\n background_image_offset_y: 0,\n\n // border\n border_radius: 4,\n border_width: 0,\n border_style: \"solid\",\n border_color: \"#ffffff\",\n border_opacity: 1,\n\n // poly-specific\n stroke_color: \"#ffffff\",\n stroke_opacity: 0.75,\n stroke_width: 0,\n stroke_dasharray: \"0\",\n stroke_linecap: \"round\",\n\n // spot-specific\n icon_fill: \"#000000\",\n\n parent_filters: [],\n\n // SVG-specific\n filters: [],\n },\n tooltip: {\n enable_tooltip: true,\n url_prefix: \"\",\n },\n tooltip_style: {\n border_radius: 10,\n padding: 15,\n background_color: \"#222222\",\n background_opacity: 1,\n position: \"top\",\n width: 225,\n auto_width: true,\n offset_x: 0,\n offset_y: 0,\n arrow_disabled: false,\n text_color: \"#ffffff\",\n arrow_shape: \"triangle\",\n arrow_size: 8,\n arrow_width: 16,\n arrow_gap: 4,\n arrow_offset: 0,\n arrow_color: \"#222222\",\n enter_animation: \"fade-up-blur\",\n enter_duration: 220,\n enter_distance: 10,\n enter_blur: 8,\n },\n tooltip_content: [],\n tooltip_html: \"\",\n text: {\n text: \"Text\",\n font_family: \"sans-serif\",\n font_size: 16,\n font_weight: 400,\n text_color: \"#000000\",\n text_opacity: 1,\n },\n actions: {\n click: \"no-action\", // no-action, run-script, follow-link, change-artboard, open-product-page\n link: \"#\",\n open_link_in_new_window: true,\n script: \"\",\n artboard: \"\",\n link_prefix: \"\",\n delay: 0,\n },\n\n // Image background\n x_image_background: -1,\n y_image_background: -1,\n width_image_background: 44,\n height_image_background: 44,\n\n // Poly\n points: [],\n\n // SVG\n svg: {\n html: \"\",\n tagName: \"\",\n properties: [],\n viewBox: \"\",\n },\n};\n\nexport const tooltipContentDefaults = {\n paragraph: {\n type: \"Paragraph\",\n text: \"\",\n other: {\n id: \"\",\n classes: \"\",\n css: \"\",\n },\n style: {\n fontFamily: \"sans-serif\",\n fontSize: 14,\n lineHeight: 22,\n color: \"#ffffff\",\n textAlign: \"left\",\n },\n boxModel: {\n width: 300,\n height: 300,\n margin: {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n padding: {\n top: 10,\n bottom: 10,\n left: 10,\n right: 10,\n },\n },\n },\n heading: {\n type: \"Heading\",\n text: \"\",\n heading: \"h3\",\n other: {\n id: \"\",\n classes: \"\",\n css: \"\",\n },\n style: {\n fontFamily: \"sans-serif\",\n fontSize: 20.8,\n lineHeight: \"normal\",\n color: \"#ffffff\",\n textAlign: \"left\",\n },\n boxModel: {\n width: \"auto\",\n height: \"auto\",\n margin: {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n padding: {\n top: 10,\n bottom: 10,\n left: 10,\n right: 10,\n },\n },\n },\n button: {\n type: \"Button\",\n text: \"Button\",\n url: \"#\",\n script: \"\",\n newTab: false,\n other: {\n id: \"\",\n classes: \"\",\n css: \"\",\n },\n style: {\n backgroundColor: \"#2196f3\",\n borderRadius: 10,\n\n fontFamily: \"sans-serif\",\n fontWeight: 700,\n fontSize: 14,\n lineHeight: 44,\n color: \"#ffffff\",\n\n display: \"inline-block\",\n },\n boxModel: {\n width: \"auto\",\n height: 44,\n margin: {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n padding: {\n top: 10,\n bottom: 10,\n left: 10,\n right: 10,\n },\n },\n },\n image: {\n type: \"Image\",\n url: \"\",\n linkUrl: \"\",\n other: {\n id: \"\",\n classes: \"\",\n css: \"\",\n },\n boxModel: {\n width: \"auto\",\n height: \"auto\",\n margin: {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n padding: {\n top: 10,\n bottom: 10,\n left: 10,\n right: 10,\n },\n },\n },\n video: {\n type: \"Video\",\n src: {\n webm: \"http://webcraftplugins.com/uploads/example_video.webm\",\n mp4: \"http://webcraftplugins.com/uploads/example_video.mp4\",\n ogv: \"http://webcraftplugins.com/uploads/example_video.ogv\",\n },\n linkUrl: \"\",\n autoplay: false,\n loop: false,\n controls: true,\n other: {\n id: \"\",\n classes: \"\",\n css: \"\",\n },\n style: {},\n boxModel: {\n width: \"auto\",\n height: \"auto\",\n margin: {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n padding: {\n top: 10,\n bottom: 10,\n left: 10,\n right: 10,\n },\n },\n },\n youtube: {\n type: \"YouTube\",\n embedCode:\n '
VIDEO ',\n allowFullscreen: false,\n other: {\n id: \"\",\n classes: \"\",\n css: \"\",\n },\n style: {},\n boxModel: {\n width: \"auto\",\n height: \"auto\",\n margin: {\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n },\n padding: {\n top: 10,\n bottom: 10,\n left: 10,\n right: 10,\n },\n },\n },\n};\n\nexport const imageMapDefaults = {\n version: \"6.0.36\",\n id: 0,\n general: {\n name: \"Untitled\",\n shortcode: \"\",\n responsive: true,\n ui_theme: \"light\", // light, dark\n },\n fullscreen: {\n enable_fullscreen_mode: false,\n start_in_fullscreen_mode: false,\n },\n objectConfig: {\n pageload_animation: \"none\", // none, grow, fade, fall-down, flash\n glowing_objects: false,\n glowing_objects_color: \"#ffffff\",\n glow_opacity: 0.5,\n stop_glowing_on_mouseover: true,\n scale_spots: true,\n },\n tooltips: {\n enable_tooltips: true,\n show_tooltips: \"mouseover\", // mouseover, click\n sticky_tooltips: false,\n constrain_tooltips: true,\n smart_edge_tooltips: true,\n tooltip_animation: \"none\", // none, fade, grow\n position: \"top\",\n width: 225,\n auto_width: true,\n offset_x: 0,\n offset_y: 0,\n padding: 15,\n border_radius: 10,\n background_color: \"#222222\",\n background_opacity: 1,\n text_color: \"#ffffff\",\n enter_duration: 220,\n enter_distance: 10,\n enter_blur: 8,\n arrow_disabled: false,\n arrow_shape: \"triangle\",\n arrow_size: 8,\n arrow_width: 16,\n arrow_gap: 4,\n arrow_offset: 0,\n arrow_color: \"#222222\",\n fullscreen_tooltips: \"mobile-only\", // none, mobile-only, always\n fullscreen_background: \"#ffffff\",\n fullscreen_background_opacity: 0.75,\n },\n zooming: {\n enable_zooming: false,\n max_zoom: 4,\n limit_max_zoom_to_image_size: false,\n enable_zoom_buttons: false,\n enable_navigator: true,\n hold_ctrl_to_zoom: true,\n zoom_on_object_click: false,\n },\n object_list: {\n enable_object_list: false,\n menu_style: \"default\", // default, on-top, detached\n menu_position: \"left\", // left/right\n enable_search: true,\n group_by_artboard: false,\n flat_hierarchy: true,\n show_groups: true,\n show_only_objects_from_active_artboard: false,\n hide_static_objects: true,\n },\n custom_code: {\n custom_css: \"\",\n custom_js: \"\",\n preview_custom_css: false,\n },\n defaults: {\n objectDefaults: utilities.deepExtend({}, objectDefaults),\n },\n artboards: [],\n templates: {},\n floor_id: \"\",\n map_id: \"\",\n};\n","import { processFieldData } from 'Client/scripts/utilities'\n\nfunction isTruthy(v) {\n if (v == null) return false\n const s = String(v).trim().toLowerCase()\n return !(s === '' || s === 'none' || s === 'false' || s === 'null' || s === 'undefined')\n}\n\nfunction resolveAccess(access, productData, options) {\n if (!access) return ''\n const trimmed = access.trim()\n\n const dkMatch = trimmed.match(/^product\\.dynamic_keys\\.([a-z0-9_\\-]+)$/i)\n if (dkMatch) {\n const slug = dkMatch[1].toLowerCase()\n const dks = productData && productData.dynamic_keys\n if (dks && typeof dks === 'object' && !Array.isArray(dks)) {\n const key = Object.keys(dks).find((k) => String(k).toLowerCase() === slug)\n if (key) return String(dks[key] == null ? '' : dks[key])\n }\n return ''\n }\n\n const pMatch = trimmed.match(/^product\\.([a-z0-9_]+)$/i)\n if (pMatch) {\n if (!productData) return ''\n const field = pMatch[1].toLowerCase()\n const raw = productData[field] !== undefined ? productData[field] : productData[pMatch[1]]\n let value = raw == null ? '' : ''\n try {\n value = raw == null ? '' : processFieldData(field, raw)\n } catch {\n value = raw == null ? '' : String(raw)\n }\n if (typeof value === 'string') {\n const low = value.trim().toLowerCase()\n if (low === 'none') value = ''\n }\n if (field === 'slug' && options && options.tooltipConfig && options.tooltipConfig.url_prefix && value) {\n const p = String(options.tooltipConfig.url_prefix).replace(/\\/$/, '')\n value = `${p}/${String(value).replace(/^\\//, '')}`\n }\n return String(value == null ? '' : value)\n }\n\n return trimmed\n}\n\nfunction parseOperand(s, productData, options) {\n const t = String(s).trim()\n if (t.length >= 2) {\n const first = t[0]\n const last = t[t.length - 1]\n if ((first === '\"' && last === '\"') || (first === \"'\" && last === \"'\")) {\n return t.slice(1, -1)\n }\n }\n if (/^-?\\d+(\\.\\d+)?$/.test(t)) return parseFloat(t)\n if (/^product\\./i.test(t)) return resolveAccess(t, productData, options)\n return t\n}\n\n// Split a function's argument list on top-level commas, respecting quotes and\n// nested parens: \"product.tags, 'a', 'b'\" -> [\"product.tags\", \"'a'\", \"'b'\"].\nfunction splitTopLevelArgs(str) {\n const out = []\n let depth = 0\n let inQ = null\n let cur = ''\n for (let i = 0; i < str.length; i++) {\n const c = str[i]\n if (inQ) {\n cur += c\n if (c === '\\\\' && str[i + 1]) { cur += str[i + 1]; i++; continue }\n if (c === inQ) inQ = null\n continue\n }\n if (c === '\"' || c === \"'\") { inQ = c; cur += c; continue }\n if (c === '(') { depth++; cur += c; continue }\n if (c === ')') { depth--; cur += c; continue }\n if (c === ',' && depth === 0) { out.push(cur.trim()); cur = ''; continue }\n cur += c\n }\n if (cur.trim() !== '') out.push(cur.trim())\n return out\n}\n\nfunction evaluateCondition(condStr, productData, options) {\n const s = String(condStr).trim()\n if (!s) return false\n if (s.startsWith('!')) {\n return !isTruthy(resolveAccess(s.slice(1), productData, options))\n }\n\n // Membership over list fields (currently product.tags):\n // has(field, 'a', 'b') -> product has ANY of the given tags\n // hasall(field, 'a', 'b') -> product has ALL of them\n // Tags match by name or id, like the \"==\" tag shorthand below. Empty tag set\n // -> false (an unconfigured condition never shows its branch).\n const fnMatch = s.match(/^(hasall|has)\\s*\\(([\\s\\S]*)\\)$/i)\n if (fnMatch) {\n const wantAll = fnMatch[1].toLowerCase() === 'hasall'\n const parts = splitTopLevelArgs(fnMatch[2])\n const wanted = parts.slice(1).map((p) => unquote(p)).filter((v) => String(v).trim() !== '')\n if (parts.length < 2 || !wanted.length) return false\n const tagsArr = productData && Array.isArray(productData.tags) ? productData.tags : []\n const hasTag = (val) =>\n tagsArr.some(\n (t) => t && (String(t.name) === String(val) || String(t.id) === String(val)),\n )\n return wantAll ? wanted.every(hasTag) : wanted.some(hasTag)\n }\n\n // Comparison (longer operators first)\n const cmp = s.match(/^(.+?)\\s*(==|!=|>=|<=|>|<)\\s*(.+)$/)\n if (cmp) {\n const op = cmp[2]\n const right = parseOperand(cmp[3], productData, options)\n\n // product.tags is a LIST - \"==\" / \"!=\" mean has / hasn't the given tag\n // (matched by name, or id as a fallback), not equality of the joined names.\n if (/^product\\.tags$/i.test(cmp[1].trim()) && (op === '==' || op === '!=')) {\n const tagsArr =\n productData && Array.isArray(productData.tags) ? productData.tags : []\n const has = tagsArr.some(\n (t) =>\n t &&\n (String(t.name) === String(right) || String(t.id) === String(right)),\n )\n return op === '==' ? has : !has\n }\n\n const left = parseOperand(cmp[1], productData, options)\n const toNum = (v) => {\n if (typeof v === 'number') return v\n const cleaned = String(v == null ? '' : v).replace(/\\s/g, '').replace(/,/g, '.')\n const n = parseFloat(cleaned)\n return isNaN(n) ? NaN : n\n }\n switch (op) {\n case '==': return String(left) === String(right)\n case '!=': return String(left) !== String(right)\n case '>': { const a = toNum(left), b = toNum(right); return !isNaN(a) && !isNaN(b) && a > b }\n case '<': { const a = toNum(left), b = toNum(right); return !isNaN(a) && !isNaN(b) && a < b }\n case '>=': { const a = toNum(left), b = toNum(right); return !isNaN(a) && !isNaN(b) && a >= b }\n case '<=': { const a = toNum(left), b = toNum(right); return !isNaN(a) && !isNaN(b) && a <= b }\n }\n }\n return isTruthy(resolveAccess(s, productData, options))\n}\n\nfunction findTopLevelOp(expr, op) {\n let depth = 0\n let inQ = null\n let i = 0\n const opLen = op.length\n while (i < expr.length) {\n const c = expr[i]\n if (inQ) {\n if (c === '\\\\' && expr[i + 1]) { i += 2; continue }\n if (c === inQ) inQ = null\n i++\n continue\n }\n if (c === '\"' || c === \"'\") { inQ = c; i++; continue }\n if (c === '{' && expr[i + 1] === '{') { depth++; i += 2; continue }\n if (c === '}' && expr[i + 1] === '}') { depth--; i += 2; continue }\n if (depth === 0 && expr.substr(i, opLen) === op) {\n // Disambiguate multi-char operators from their prefix (e.g., '?' vs nothing, '|' vs '||')\n if (op === '?' || op === ':') return i\n // '&&', '||', '==', '!=', '>=', '<=', '>', '<' — these are whole at this position\n return i\n }\n i++\n }\n return -1\n}\n\nfunction unquote(s) {\n const t = String(s).trim()\n if (t.length >= 2) {\n const first = t[0]\n const last = t[t.length - 1]\n if ((first === '\"' && last === '\"') || (first === \"'\" && last === \"'\")) {\n return t.slice(1, -1)\n }\n }\n return t\n}\n\nfunction evaluateBlock(block, productData, options) {\n // Ternary ? :\n const qPos = findTopLevelOp(block, '?')\n if (qPos !== -1) {\n const rest = block.slice(qPos + 1)\n const cRel = findTopLevelOp(rest, ':')\n if (cRel !== -1) {\n const condition = block.slice(0, qPos).trim()\n const trueBranch = block.slice(qPos + 1, qPos + 1 + cRel).trim()\n const falseBranch = block.slice(qPos + 1 + cRel + 1).trim()\n const chosen = evaluateCondition(condition, productData, options) ? unquote(trueBranch) : unquote(falseBranch)\n return resolveContent(chosen, productData, options)\n }\n }\n\n // Conditional AND\n const andPos = findTopLevelOp(block, '&&')\n if (andPos !== -1) {\n const condition = block.slice(0, andPos).trim()\n const content = block.slice(andPos + 2).trim()\n return evaluateCondition(condition, productData, options)\n ? resolveContent(content, productData, options)\n : ''\n }\n\n // Fallback OR\n const orPos = findTopLevelOp(block, '||')\n if (orPos !== -1) {\n const left = block.slice(0, orPos).trim()\n const right = block.slice(orPos + 2).trim()\n const leftVal = resolveAccess(left, productData, options)\n return isTruthy(leftVal) ? leftVal : unquote(right)\n }\n\n // Simple access (possibly prefixed with !)\n const s = block.trim()\n if (s.startsWith('!')) {\n return isTruthy(resolveAccess(s.slice(1), productData, options)) ? '' : ''\n }\n return resolveAccess(s, productData, options)\n}\n\nexport function resolveContent(text, productData, options) {\n if (text == null) return ''\n const opts = options || {}\n let result = ''\n let i = 0\n const s = String(text)\n while (i < s.length) {\n if (s[i] === '{' && s[i + 1] === '{') {\n let depth = 1\n let j = i + 2\n while (j < s.length) {\n if (s[j] === '{' && s[j + 1] === '{') { depth++; j += 2; continue }\n if (s[j] === '}' && s[j + 1] === '}') { depth--; j += 2; if (depth === 0) break; continue }\n j++\n }\n if (depth !== 0) {\n result += s.slice(i)\n break\n }\n const inner = s.slice(i + 2, j - 2)\n if (productData) {\n const out = evaluateBlock(inner, productData, opts)\n result += out == null ? '' : String(out)\n } else if (typeof opts.onUnresolved === 'function') {\n result += opts.onUnresolved(inner.trim(), s.slice(i, j))\n } else {\n result += s.slice(i, j)\n }\n i = j\n } else {\n result += s[i]\n i++\n }\n }\n return result\n}\n\nexport function resolveTooltipExpressions(html, productData, options) {\n if (html == null) return ''\n const normalized = String(html).replace(/&&/g, '&&')\n return resolveContent(normalized, productData, options || {})\n}\n","function hashStyle(style) {\n let hash = 5381\n for (let i = 0; i < style.length; i += 1) {\n hash = ((hash << 5) + hash) ^ style.charCodeAt(i)\n }\n return (hash >>> 0).toString(36)\n}\n\nexport function normalizeInlineStyle(style) {\n if (!style) return ''\n if (typeof document === 'undefined') return String(style).replace(/\\s+/g, ' ').trim()\n const el = document.createElement('span')\n el.setAttribute('style', style)\n return el.style.cssText.trim()\n}\n\nfunction normalizeNamespace(namespace) {\n return String(namespace || 'imp-inline-style').replace(/[^a-z0-9_-]/gi, '-')\n}\n\nfunction normalizeClassPart(value) {\n return String(value || '')\n .trim()\n .replace(/[^a-z0-9_-]/gi, '-')\n .replace(/^-+|-+$/g, '')\n .toLowerCase()\n}\n\nexport function createTooltipStyleRegistry(namespace = 'imp-tooltip-style') {\n const safeNamespace = normalizeNamespace(namespace)\n const rules = new Map()\n const styleToClass = new Map()\n\n function add(style, preferredKey = '') {\n const normalizedStyle = normalizeInlineStyle(style)\n if (!normalizedStyle) return ''\n\n if (styleToClass.has(normalizedStyle)) return styleToClass.get(normalizedStyle)\n\n const safeKey = normalizeClassPart(preferredKey)\n const suffix = hashStyle(normalizedStyle)\n const className = safeKey\n ? `${safeNamespace}-${safeKey}-${suffix}`\n : `${safeNamespace}-${suffix}`\n\n styleToClass.set(normalizedStyle, className)\n rules.set(className, normalizedStyle)\n return className\n }\n\n function css() {\n return Array.from(rules.entries())\n .map(([className, style]) => `.${className}{${style}}`)\n .join('\\n')\n }\n\n return { add, css }\n}\n\nexport function optimizeInlineStyles(html, namespace = 'imp-inline-style') {\n if (!html || typeof document === 'undefined') return { html: html || '', css: '' }\n\n const template = document.createElement('template')\n template.innerHTML = html\n\n const registry = createTooltipStyleRegistry(namespace)\n\n template.content.querySelectorAll('[style]').forEach((el) => {\n const style = normalizeInlineStyle(el.getAttribute('style'))\n if (!style) {\n el.removeAttribute('style')\n return\n }\n\n const className = registry.add(style)\n el.classList.add(className)\n el.removeAttribute('style')\n })\n\n return {\n html: template.innerHTML,\n css: registry.css(),\n }\n}\n","import { tooltipContentDefaults } from 'Client/scripts/defaults'\n\nexport default function parseContent(content) {\n let parsedContent = content\n\n // Very old content type\n if (content.content_type == 'plain-text') {\n parsedContent = parseLegacyPlainTextFormat(content)\n }\n\n // Squares content type\n if (content.squares_settings) {\n parsedContent = parseLegacySquaresFormat(content)\n }\n\n return parsedContent\n}\n\nfunction parseLegacyPlainTextFormat(content) {\n return [{\n type: 'Paragraph',\n text: content.plain_text\n }]\n}\nfunction parseLegacySquaresFormat(content) {\n let elements = []\n\n // Squares content type\n // converts squares option type to the new type\n for (let container of content.squares_settings.containers) {\n if (container.settings?.elements) {\n for (let elementOptions of container.settings.elements) {\n if (elementOptions.settings.name == 'Paragraph' && elementOptions.options?.text) {\n elements.push(parseLegacySquaresParagraph(elementOptions))\n }\n if (elementOptions.settings.name == 'Heading') {\n elements.push(parseLegacySquaresHeading(elementOptions))\n }\n if (elementOptions.settings.name == 'Image') {\n elements.push(parseLegacySquaresImage(elementOptions))\n }\n if (elementOptions.settings.name == 'Button') {\n elements.push(parseLegacySquaresButton(elementOptions))\n }\n if (elementOptions.settings.name == 'YouTube') {\n elements.push(parseLegacySquaresYouTube(elementOptions))\n }\n if (elementOptions.settings.name == 'Video') {\n elements.push(parseLegacySquaresVideo(elementOptions))\n }\n }\n }\n }\n\n return elements\n}\nfunction parseLegacySquaresParagraph(elementOptions) {\n let newElement = {\n type: 'Paragraph',\n text: elementOptions.options?.text?.text || tooltipContentDefaults.paragraph.text,\n other: {\n id: elementOptions.options?.general?.id || tooltipContentDefaults.paragraph.other.id,\n classes: elementOptions.options?.general?.classes || tooltipContentDefaults.paragraph.other.classes,\n css: elementOptions.options?.general?.css || tooltipContentDefaults.paragraph.other.css,\n },\n style: {\n fontFamily: elementOptions.options?.font?.font_family || tooltipContentDefaults.paragraph.style.fontFamily,\n fontSize: elementOptions.options?.font?.font_size || tooltipContentDefaults.paragraph.style.fontSize,\n fontWeight: elementOptions.options?.font?.font_weight || tooltipContentDefaults.paragraph.style.fontWeight,\n fontStyle: elementOptions.options?.font?.font_style || tooltipContentDefaults.paragraph.style.fontStyle,\n lineHeight: elementOptions.options?.font?.line_height || tooltipContentDefaults.paragraph.style.lineHeight,\n color: elementOptions.options?.font?.text_color || tooltipContentDefaults.paragraph.style.color,\n textAlign: elementOptions.options?.font?.text_align || tooltipContentDefaults.paragraph.style.textAlign,\n textDecoration: elementOptions.options?.font?.text_decoration || tooltipContentDefaults.paragraph.style.textDecoration,\n textTransform: elementOptions.options?.font?.text_transform || tooltipContentDefaults.paragraph.style.textTransform,\n textShadow: elementOptions.options?.font?.text_shadow || tooltipContentDefaults.paragraph.style.textShadow\n },\n boxModel: {\n width: 'auto',\n height: 'auto',\n margin: {\n top: elementOptions.options?.layout?.box_model?.margin?.top || tooltipContentDefaults.paragraph.boxModel.margin.top,\n bottom: elementOptions.options?.layout?.box_model?.margin?.bottom || tooltipContentDefaults.paragraph.boxModel.margin.bottom,\n left: elementOptions.options?.layout?.box_model?.margin?.left || tooltipContentDefaults.paragraph.boxModel.margin.left,\n right: elementOptions.options?.layout?.box_model?.margin?.right || tooltipContentDefaults.paragraph.boxModel.margin.right\n },\n padding: {\n top: elementOptions.options?.layout?.box_model?.padding?.top || tooltipContentDefaults.paragraph.boxModel.padding.top,\n bottom: elementOptions.options?.layout?.box_model?.padding?.bottom || tooltipContentDefaults.paragraph.boxModel.padding.bottom,\n left: elementOptions.options?.layout?.box_model?.padding?.left || tooltipContentDefaults.paragraph.boxModel.padding.left,\n right: elementOptions.options?.layout?.box_model?.padding?.right || tooltipContentDefaults.paragraph.boxModel.padding.right\n },\n }\n }\n return newElement\n}\nfunction parseLegacySquaresHeading(elementOptions) {\n let newElement = {\n type: 'Heading',\n text: elementOptions.options?.heading?.text || tooltipContentDefaults.heading.text,\n heading: elementOptions.options?.heading?.heading || tooltipContentDefaults.heading.heading,\n other: {\n id: elementOptions.options?.general?.id || tooltipContentDefaults.heading.other.id,\n classes: elementOptions.options?.general?.classes || tooltipContentDefaults.heading.other.classes,\n css: elementOptions.options?.general?.css || tooltipContentDefaults.heading.other.css,\n },\n style: {\n fontFamily: elementOptions.options?.font?.font_family || tooltipContentDefaults.heading.style.fontFamily,\n fontSize: elementOptions.options?.font?.font_size || tooltipContentDefaults.heading.style.fontSize,\n fontWeight: elementOptions.options?.font?.font_weight || tooltipContentDefaults.heading.style.fontWeight,\n fontStyle: elementOptions.options?.font?.font_style || tooltipContentDefaults.heading.style.fontStyle,\n lineHeight: elementOptions.options?.font?.line_height || tooltipContentDefaults.heading.style.lineHeight,\n color: elementOptions.options?.font?.text_color || tooltipContentDefaults.heading.style.color,\n textAlign: elementOptions.options?.font?.text_align || tooltipContentDefaults.heading.style.textAlign,\n textDecoration: elementOptions.options?.font?.text_decoration || tooltipContentDefaults.heading.style.textDecoration,\n textTransform: elementOptions.options?.font?.text_transform || tooltipContentDefaults.heading.style.textTransform,\n textShadow: elementOptions.options?.font?.text_shadow || tooltipContentDefaults.heading.style.textShadow\n },\n boxModel: {\n width: 'auto',\n height: 'auto',\n margin: {\n top: elementOptions.options?.layout?.box_model?.margin?.top || tooltipContentDefaults.heading.boxModel.margin.top,\n bottom: elementOptions.options?.layout?.box_model?.margin?.bottom || tooltipContentDefaults.heading.boxModel.margin.bottom,\n left: elementOptions.options?.layout?.box_model?.margin?.left || tooltipContentDefaults.heading.boxModel.margin.left,\n right: elementOptions.options?.layout?.box_model?.margin?.right || tooltipContentDefaults.heading.boxModel.margin.right\n },\n padding: {\n top: elementOptions.options?.layout?.box_model?.padding?.top || tooltipContentDefaults.heading.boxModel.padding.top,\n bottom: elementOptions.options?.layout?.box_model?.padding?.bottom || tooltipContentDefaults.heading.boxModel.padding.bottom,\n left: elementOptions.options?.layout?.box_model?.padding?.left || tooltipContentDefaults.heading.boxModel.padding.left,\n right: elementOptions.options?.layout?.box_model?.padding?.right || tooltipContentDefaults.heading.boxModel.padding.right\n },\n }\n }\n\n return newElement\n}\nfunction parseLegacySquaresImage(elementOptions) {\n let newElement = {\n type: 'Image',\n url: elementOptions.options?.image?.url || tooltipContentDefaults.image.url,\n linkUrl: elementOptions.options?.image?.link_to || tooltipContentDefaults.image.linkUrl,\n other: {\n id: elementOptions.options?.general?.id || tooltipContentDefaults.image.other.id,\n classes: elementOptions.options?.general?.classes || tooltipContentDefaults.image.other.classes,\n css: elementOptions.options?.general?.css || tooltipContentDefaults.image.other.css,\n },\n boxModel: {\n width: tooltipContentDefaults.image.boxModel.width,\n height: tooltipContentDefaults.image.boxModel.height,\n margin: {\n top: elementOptions.options?.layout?.box_model?.margin?.top || tooltipContentDefaults.image.boxModel.margin.top,\n bottom: elementOptions.options?.layout?.box_model?.margin?.bottom || tooltipContentDefaults.image.boxModel.margin.bottom,\n left: elementOptions.options?.layout?.box_model?.margin?.left || tooltipContentDefaults.image.boxModel.margin.left,\n right: elementOptions.options?.layout?.box_model?.margin?.right || tooltipContentDefaults.image.boxModel.margin.right\n },\n padding: {\n top: elementOptions.options?.layout?.box_model?.padding?.top || tooltipContentDefaults.image.boxModel.padding.top,\n bottom: elementOptions.options?.layout?.box_model?.padding?.bottom || tooltipContentDefaults.image.boxModel.padding.bottom,\n left: elementOptions.options?.layout?.box_model?.padding?.left || tooltipContentDefaults.image.boxModel.padding.left,\n right: elementOptions.options?.layout?.box_model?.padding?.right || tooltipContentDefaults.image.boxModel.padding.right\n },\n }\n }\n\n return newElement\n}\nfunction parseLegacySquaresButton(elementOptions) {\n let newElement = {\n type: 'Button',\n text: elementOptions.options?.button?.text || tooltipContentDefaults.button.text,\n url: elementOptions.options?.button?.link_to || tooltipContentDefaults.button.url,\n newTab: elementOptions.options?.button?.new_tab || tooltipContentDefaults.button.newTab,\n other: {\n id: elementOptions.options?.general?.id || tooltipContentDefaults.button.other.id,\n classes: elementOptions.options?.general?.classes || tooltipContentDefaults.button.other.classes,\n css: elementOptions.options?.general?.css || tooltipContentDefaults.button.other.css,\n },\n style: {\n backgroundColor: elementOptions.options?.button?.bg_color || tooltipContentDefaults.button.style.backgroundColor,\n borderRadius: elementOptions.options?.button?.border_radius || tooltipContentDefaults.button.style.borderRadius,\n\n fontFamily: elementOptions.options?.font?.font_family || tooltipContentDefaults.button.style.fontFamily,\n fontSize: elementOptions.options?.font?.font_size || tooltipContentDefaults.button.style.fontSize,\n fontWeight: elementOptions.options?.font?.font_weight || tooltipContentDefaults.button.style.fontWeight,\n fontStyle: elementOptions.options?.font?.font_style || tooltipContentDefaults.button.style.fontStyle,\n lineHeight: elementOptions.options?.button?.height || tooltipContentDefaults.button.style.lineHeight,\n color: elementOptions.options?.button?.text_color || tooltipContentDefaults.button.style.color,\n textAlign: elementOptions.options?.font?.text_align || tooltipContentDefaults.button.style.textAlign,\n textDecoration: elementOptions.options?.font?.text_decoration || tooltipContentDefaults.button.style.textDecoration,\n textTransform: elementOptions.options?.font?.text_transform || tooltipContentDefaults.button.style.textTransform,\n textShadow: elementOptions.options?.font?.text_shadow || tooltipContentDefaults.button.style.textShadow\n },\n boxModel: {\n width: 'auto',\n height: 'auto',\n margin: {\n top: elementOptions.options?.layout?.box_model?.margin?.top || tooltipContentDefaults.button.boxModel.margin.top,\n bottom: elementOptions.options?.layout?.box_model?.margin?.bottom || tooltipContentDefaults.button.boxModel.margin.bottom,\n left: elementOptions.options?.layout?.box_model?.margin?.left || tooltipContentDefaults.button.boxModel.margin.left,\n right: elementOptions.options?.layout?.box_model?.margin?.right || tooltipContentDefaults.button.boxModel.margin.right\n },\n padding: {\n top: elementOptions.options?.layout?.box_model?.padding?.top || tooltipContentDefaults.button.boxModel.padding.top,\n bottom: elementOptions.options?.layout?.box_model?.padding?.bottom || tooltipContentDefaults.button.boxModel.padding.bottom,\n left: elementOptions.options?.layout?.box_model?.padding?.left || tooltipContentDefaults.button.boxModel.padding.left,\n right: elementOptions.options?.layout?.box_model?.padding?.right || tooltipContentDefaults.button.boxModel.padding.right\n },\n }\n }\n\n if (newElement.newTab === 1) newElement.newTab = true\n if (newElement.newTab === 0) newElement.newTab = false\n\n return newElement\n}\nfunction parseLegacySquaresVideo(elementOptions) {\n let newElement = {\n type: 'Video',\n linkUrl: elementOptions.options?.video?.link_to || tooltipContentDefaults.video.linkUrl,\n src: {\n mp4: elementOptions.options?.video?.mp4_url || tooltipContentDefaults.video.src.mp4,\n ogv: elementOptions.options?.video?.ogv_url || tooltipContentDefaults.video.src.ogv,\n webm: elementOptions.options?.video?.webm_url || tooltipContentDefaults.video.src.webm,\n },\n autoplay: elementOptions.options?.video?.autoplay || tooltipContentDefaults.video.autoplay,\n loop: elementOptions.options?.video?.loop || tooltipContentDefaults.video.loop,\n controls: elementOptions.options?.video?.controls || tooltipContentDefaults.video.controls,\n other: {\n id: elementOptions.options?.general?.id || tooltipContentDefaults.video.other.id,\n classes: elementOptions.options?.general?.classes || tooltipContentDefaults.video.other.classes,\n css: elementOptions.options?.general?.css || tooltipContentDefaults.video.other.css,\n },\n boxModel: {\n width: 'auto',\n height: 'auto',\n margin: {\n top: elementOptions.options?.layout?.box_model?.margin?.top || tooltipContentDefaults.video.boxModel.margin.top,\n bottom: elementOptions.options?.layout?.box_model?.margin?.bottom || tooltipContentDefaults.video.boxModel.margin.bottom,\n left: elementOptions.options?.layout?.box_model?.margin?.left || tooltipContentDefaults.video.boxModel.margin.left,\n right: elementOptions.options?.layout?.box_model?.margin?.right || tooltipContentDefaults.video.boxModel.margin.right\n },\n padding: {\n top: elementOptions.options?.layout?.box_model?.padding?.top || tooltipContentDefaults.video.boxModel.padding.top,\n bottom: elementOptions.options?.layout?.box_model?.padding?.bottom || tooltipContentDefaults.video.boxModel.padding.bottom,\n left: elementOptions.options?.layout?.box_model?.padding?.left || tooltipContentDefaults.video.boxModel.padding.left,\n right: elementOptions.options?.layout?.box_model?.padding?.right || tooltipContentDefaults.video.boxModel.padding.right\n },\n }\n }\n\n return newElement\n}\nfunction parseLegacySquaresYouTube(elementOptions) {\n let width = tooltipContentDefaults.youtube.boxModel.width\n\n if (elementOptions.options?.youtube?.iframe_auto_width === 0) {\n width = elementOptions.options?.youtube?.iframe_width || tooltipContentDefaults.youtube.boxModel.width\n }\n\n let newElement = {\n type: 'YouTube',\n embedCode: elementOptions.options?.youtube?.embed_code || tooltipContentDefaults.youtube.embedCode,\n allowFullscreen: elementOptions.options?.youtube?.allow_fullscreen || tooltipContentDefaults.youtube.allowFullscreen,\n other: {\n id: '',\n classes: '',\n css: '',\n },\n style: {},\n boxModel: {\n width: width,\n height: elementOptions.options?.youtube?.iframe_height || tooltipContentDefaults.youtube.boxModel.height,\n margin: {\n top: elementOptions.options?.layout?.box_model?.margin?.top || tooltipContentDefaults.youtube.boxModel.margin.top,\n bottom: elementOptions.options?.layout?.box_model?.margin?.bottom || tooltipContentDefaults.youtube.boxModel.margin.bottom,\n left: elementOptions.options?.layout?.box_model?.margin?.left || tooltipContentDefaults.youtube.boxModel.margin.left,\n right: elementOptions.options?.layout?.box_model?.margin?.right || tooltipContentDefaults.youtube.boxModel.margin.right\n },\n padding: {\n top: elementOptions.options?.layout?.box_model?.padding?.top || tooltipContentDefaults.youtube.boxModel.padding.top,\n bottom: elementOptions.options?.layout?.box_model?.padding?.bottom || tooltipContentDefaults.youtube.boxModel.padding.bottom,\n left: elementOptions.options?.layout?.box_model?.padding?.left || tooltipContentDefaults.youtube.boxModel.padding.left,\n right: elementOptions.options?.layout?.box_model?.padding?.right || tooltipContentDefaults.youtube.boxModel.padding.right\n },\n }\n }\n\n if (newElement.allowFullscreen === 1) newElement.allowFullscreen = true\n if (newElement.allowFullscreen === 0) newElement.allowFullscreen = false\n\n return newElement\n}\n","// Normalize a product's `tags` array to a clean list of { id, name, color }.\n// Tags carry STABLE ids; conditions key off the id, display uses the name.\nexport const getProductTags = (productData) => {\n const raw = productData && productData.tags;\n if (!Array.isArray(raw)) return [];\n return raw\n .filter((t) => t && typeof t === \"object\")\n .map((t) => ({\n id: t.id == null ? \"\" : String(t.id),\n name: t.name == null ? \"\" : String(t.name),\n color: t.color == null ? \"\" : String(t.color),\n }));\n};\n\n// Render a product's tags as a comma-joined list of NAMES.\n// e.g. [{name:\"Wykończone\"},{name:\"Premium\"}] -> \"Wykończone, Premium\"\nexport const formatProductTags = (productData) =>\n getProductTags(productData)\n .map((t) => t.name)\n .filter(Boolean)\n .join(\", \");\n\n// Does the product carry a tag with the given id?\nexport const productHasTag = (productData, tagId) => {\n if (!tagId) return false;\n const wanted = String(tagId);\n return getProductTags(productData).some((t) => t.id === wanted);\n};\n\n// Evaluate the object's `conditional_visibility` rules against the assigned\n// product's tags. Mirrors processStyles: pure, id-based, rename-safe.\n// Each rule: { tag_id, mode: \"has\" | \"not_has\", action: \"show\" | \"hide\" }.\n// Returns { visible: boolean } — `visible` stays true unless a matching\n// \"hide\" rule fires or a \"show\" rule's condition is NOT met (gating).\n// Objects without any rules always return { visible: true }.\nexport const evaluateVisibility = (rules, productData) => {\n if (!Array.isArray(rules) || rules.length === 0) return { visible: true };\n\n let visible = true;\n for (const rule of rules) {\n if (!rule || !rule.tag_id) continue;\n const has = productHasTag(productData, rule.tag_id);\n const matched = rule.mode === \"not_has\" ? !has : has;\n const action = rule.action === \"show\" ? \"show\" : \"hide\";\n\n if (action === \"hide\") {\n // Hide the object when the condition is met.\n if (matched) visible = false;\n } else {\n // \"show\": treat as a gate - object is only shown when the condition is met.\n if (!matched) visible = false;\n }\n }\n\n return { visible };\n};\n\nexport const processFieldData = (name, data) => {\n switch (name) {\n case \"area\":\n case \"price_gross_m2\":\n case \"price_gross\":\n case \"price\":\n case \"promo_price_gross\":\n case \"promo_price_gross_m2\":\n return data.toLocaleString(\"en-US\").replaceAll(\",\", \" \");\n case \"status\":\n // TODO: Remove in the future, implement backend translation\n if (data === \"available\") {\n return \"Dostępny\";\n } else if (data === \"sold\") {\n return \"Sprzedany\";\n } else if (data === \"reserved\") {\n return \"Zarezerwowany\";\n }\n return \"Niedostępny\";\n case \"tags\":\n // Tags array -> comma-joined list of names (display uses name, not id).\n if (Array.isArray(data)) {\n return data\n .map((t) => (t && typeof t === \"object\" ? t.name : t))\n .filter((n) => n != null && String(n).length > 0)\n .join(\", \");\n }\n return data == null ? \"\" : String(data);\n default:\n if (Array.isArray(data)) return data.join(\", \");\n return data == null ? \"\" : data.toString();\n }\n};\n\nexport const getAssignedProductData = (obj) => {\n const assignedProduct = obj.options.assigned_product;\n\n if (\n assignedProduct &&\n assignedProduct != \"assign-product\" &&\n obj.store?.imageMap\n ) {\n const products = obj.store.imageMap.products;\n const productData = Array.isArray(products) \n ? products.find((p) => p.id === assignedProduct)\n : products?.[assignedProduct];\n if (!productData) return;\n return productData;\n }\n\n return;\n};\n\nexport const processStyles = (obj, styles) => {\n let productData = getAssignedProductData(obj);\n\n if (\n productData &&\n obj.options.default_style.background_type === \"conditional\" &&\n obj.options.default_style.conditional_background_color\n ) {\n // Conditional background color\n obj.options.default_style.conditional_background_color\n .sort((a) => (a.variable === \"product.status\" ? 1 : -1))\n .forEach((data, index) => {\n const variableValue =\n productData[data.variable.replace(\"product.\", \"\")];\n const operator = data.operator;\n const value =\n typeof data.value === \"string\" ? data.value : parseInt(data.value);\n const color = data.color;\n\n // product.tags is an array [{id,name,color}] - compare by MEMBERSHIP\n // (stable id, or name as a fallback), not the raw == which would compare\n // an array to a string. Supports ==, != and the \"empty\" operator.\n if (data.variable === \"product.tags\") {\n const tags = Array.isArray(variableValue) ? variableValue : [];\n const has = tags.some(\n (t) =>\n t && (String(t.id) === String(data.value) || t.name === data.value)\n );\n if (\n (operator === \"==\" && has) ||\n (operator === \"!=\" && !has) ||\n ((operator === \"is empty\" || operator === \"is_empty\") &&\n tags.length === 0)\n ) {\n styles.background_color = color;\n }\n return;\n }\n\n switch (operator) {\n case \"==\":\n if (variableValue == value) {\n styles.background_color = color;\n }\n break;\n case \">\":\n if (variableValue > value) {\n styles.background_color = color;\n }\n break;\n case \"<\":\n if (variableValue < value) {\n styles.background_color = color;\n }\n break;\n case \">=\":\n if (variableValue >= value) {\n styles.background_color = color;\n }\n break;\n case \"<=\":\n if (variableValue <= value) {\n styles.background_color = color;\n }\n break;\n case \"!=\":\n if (variableValue !== value) {\n styles.background_color = color;\n }\n break;\n\n case \"is empty\":\n if (!variableValue) {\n styles.background_color = color;\n }\n break;\n }\n });\n }\n\n return styles;\n};\n","import * as consts from 'Client/consts'\n\nlet storedPageloadAnimation = ''\n\nexport default {\n init: ({ commit, state, store }) => {\n return new Promise(async (resolve) => {\n storedPageloadAnimation = store.state.objectConfig.pageload_animation\n })\n },\n beforeResize: ({ commit, state, store }) => {},\n resize: ({ commit, state, store }) => {},\n zoomIn: ({ commit, state, store }, { coords, animate = true, targetZoom }) => {\n return new Promise(async (resolve) => {\n await store.getZoomController().zoomIn({ coords, animate, targetZoom })\n resolve()\n })\n },\n zoomOut: ({ commit, state, store }, { coords, animate = true }) => {\n return new Promise(async (resolve) => {\n await store.getZoomController().zoomOut({ coords, animate })\n resolve()\n })\n },\n failedToZoom: ({ commit, state, store }) => {},\n goFullscreen: ({ commit, state, store }) => {\n return new Promise((resolve) => {\n store.getFullscreenController().goFullscreen()\n resolve()\n })\n },\n closeFullscreen: ({ commit, state, store }) => {\n return new Promise((resolve) => {\n store.getFullscreenController().closeFullscreen()\n resolve()\n })\n },\n panTo: ({ commit, state, store }, { x, y }) => {},\n startPan: ({ commit, state, store }, { x, y }) => {},\n pan: ({ commit, state, store }, { x, y }) => {},\n panOnNavigator: ({ commit, state, store }, { x, y }) => {},\n startPinch: ({ commit, state, store }, { event }) => {},\n pinch: ({ commit, state, store }, { event }) => {},\n zoomAtRect: ({ commit, state, store }, { zoom, pan: { x, y } }) => {},\n highlightObject: ({ commit, state, store }, { objectId, showTooltip = true, hideAllTooltips = true }) => {\n return new Promise(async (resolve) => {\n if (store.getArtboardIdForObject({ id: objectId }) !== store.getArtboard().id) return\n await store.getObjectController().highlightObject(objectId)\n if (hideAllTooltips) await store.getTooltipController().hideAllTooltips()\n if (showTooltip) await store.getTooltipController().showTooltip(objectId)\n resolve()\n })\n },\n unhighlightObject: ({ commit, state, store }, { objectId }) => {\n return new Promise(async (resolve) => {\n await store.getObjectController().unhighlightObject(objectId)\n await store.getTooltipController().hideTooltip(objectId)\n\n resolve()\n })\n },\n unhighlightAllObjects: ({ commit, state, store }) => {\n return new Promise(async (resolve) => {\n await store.getObjectController().unhighlightAllObjects()\n await store.getTooltipController().hideAllTooltips()\n resolve()\n })\n },\n focusObject: ({ commit, state, store }, { objectId, showTooltip = false }) => {\n return new Promise((resolve) => {\n if (state.zooming.enable_zooming) {\n let coordsAndZoom = store.getObjectController().getFocusObjectCoordsAndZoom(objectId)\n store.getZoomController().setTargetZoom({ zoom: coordsAndZoom.zoom, redraw: false })\n store.getZoomController().setTargetPan({ x: coordsAndZoom.pan.x, y: coordsAndZoom.pan.y })\n store.getMenuController().hideMobileMenu()\n\n requestAnimationFrame(async () => {\n if (showTooltip) {\n await store.getTooltipController().hideAllTooltips()\n await store.getTooltipController().showTooltip(objectId)\n }\n resolve()\n })\n } else {\n resolve()\n }\n })\n },\n clickObject: ({ commit, state, store }, { objectId }) => {\n return new Promise((resolve) => {\n store.getObjectController().performClickAction(objectId)\n resolve()\n })\n },\n updateTooltipPositions: ({ commit, state, store }) => {},\n closeFullscreenTooltip: ({ commit, state, store }) => {},\n zoomUpdate: ({ commit, state, store }) => {\n return new Promise((resolve) => {\n store.getZoomController().targetZoom\n ImageMapPro.trigger({\n type: consts.HOOK_ZOOM_PAN_UPDATE,\n payload: {\n map: state.general.name,\n zoom: store.getZoomController().currentZoom,\n pan: { x: store.getZoomController().actualPanX, y: store.getZoomController().actualPanY },\n },\n })\n })\n },\n changeArtboard: async ({ commit, state, store }, { artboardId, zoomOut = false }) => {\n return new Promise(async (resolve) => {\n if (store.getArtboard().id !== artboardId && await store.getTooltipController()) {\n await store.getTooltipController().hideAllTooltips()\n store.getArtboardController().changeArtboard(artboardId)\n await store.getImageMap().updateImage()\n await store.getImageMap().setBackground()\n store.getObjectController().createObjects()\n store.getObjectController().insertObjects()\n store.getNavigatorController().createUI()\n\n // Prevent bug\n await store.getTooltipController().openedTooltips.clear()\n // ---\n\n if (zoomOut) store.getZoomController().resetZoom(true)\n await store.getTooltipController().createTooltips()\n await store.getMenuController().updateItems()\n\n // Get the title of the artboard\n const artboardTitle = store.getArtboard().title || artboardId\n\n ImageMapPro.trigger({\n type: consts.HOOK_ARTBOARD_CHANGE,\n payload: {\n map: state.general.name,\n artboard: artboardTitle,\n },\n })\n\n resolve()\n } else {\n resolve()\n }\n })\n },\n updateSearch: ({ commit, state, store }, { searchString }) => {},\n clearSearch: ({ commit, state, store }) => {},\n openMenu: ({ commit, state, store }) => {},\n closeMenu: ({ commit, state, store }) => {},\n toggleGroup: ({ commit, state, store }, { groupId }) => {\n return new Promise(async (resolve) => {\n await store.getMenuController().menu.list.toggleGroup(groupId)\n resolve()\n })\n },\n toggleArtboard: ({ commit, state, store }, { artboardId }) => {\n return new Promise(async (resolve) => {\n await store.getMenuController().menu.list.toggleArtboard(artboardId)\n resolve()\n })\n },\n showTooltip: ({ commit, state, store }, { objectId }) => {\n return new Promise(async (resolve) => {\n await store.getTooltipController().showTooltip(objectId)\n resolve()\n })\n },\n hideTooltip: ({ commit, state, store }, { objectId }) => {\n return new Promise(async (resolve) => {\n await store.getTooltipController().hideTooltip(objectId)\n resolve()\n })\n },\n hideAllTooltips: ({ commit, state, store }) => {\n return new Promise(async (resolve) => {\n await store.getTooltipController().hideAllTooltips()\n resolve()\n })\n },\n flashObjects: ({ commit, state, store }, { objectIds }) => {\n return new Promise(async (resolve) => {\n store.state.objectConfig.pageload_animation = 'flash'\n let text = `.imp-object.imp-object-pageload-animation {\n transition-duration: 350ms;\n }`\n store.getObjectController().stylesheet.innerHTML += text\n store.getObjectController().animateObjects()\n resolve()\n })\n },\n disablePageloadAnimation: ({ commit, state, store }) => {\n return new Promise(async (resolve) => {\n if (!storedPageloadAnimation) storedPageloadAnimation = store.state.objectConfig.pageload_animation\n store.state.objectConfig.pageload_animation = 'none'\n resolve()\n })\n },\n enablePageloadAnimation: ({ commit, state, store }) => {\n return new Promise(async (resolve) => {\n if (storedPageloadAnimation) store.state.objectConfig.pageload_animation = storedPageloadAnimation\n resolve()\n })\n },\n}\n","import * as consts from \"Client/consts\";\nimport * as editorConsts from \"Editor/scripts/consts\";\nimport { getElementRect, isMobile } from \"Editor/scripts/utilities\";\n\nexport default {\n getImageMap: function () {\n return this.imageMap;\n },\n getID: function (state) {\n return state.id + \"\";\n },\n getName: function (state) {\n return state.general.name;\n },\n getObject: function (state, { id }) {\n let result;\n traverseObjects(state.artboards, (obj) => {\n if (obj.id === id) {\n result = obj;\n return true;\n }\n });\n return result;\n },\n getObjectByTitle: function (state, { title }) {\n let result;\n traverseObjects(state.artboards, (obj) => {\n if (obj.title === title) {\n result = obj;\n return true;\n }\n });\n return result;\n },\n getObjects: function () {\n let result = [];\n traverseObjects([this.getArtboard()], (obj) => {\n if (obj.type !== editorConsts.OBJECT_ARTBOARD) result.push(obj);\n });\n\n return result;\n },\n getArtboard: function (state) {\n return state.artboards.filter(\n (o) => o.id === this.getArtboardController().currentArtboardId,\n )[0];\n },\n getArtboards: function (state) {\n return state.artboards;\n },\n getArtboardByTitle: function (state, { title }) {\n return state.artboards.filter((o) => o.title === title)[0];\n },\n getArtboardIdForObject: function (state, { id }) {\n let artboardId;\n\n for (let artboard of state.artboards) {\n traverseObjects([artboard], (obj) => {\n if (obj.id === id) {\n artboardId = artboard.id;\n return true;\n }\n });\n }\n\n return artboardId;\n },\n getChildrenDeep: function (state, { id }) {\n let obj = this.getObject({ id });\n let result = [];\n traverseObjects(obj.children, (o) => {\n result.push(o);\n });\n return result;\n },\n getParent: function (state, { id }) {\n return this.getObject({ id: this.getObject({ id }).parent_id });\n },\n\n // Controllers\n getEventController: function () {\n return this.imageMap.eventController;\n },\n getZoomController: function () {\n return this.imageMap.zoomController;\n },\n getTooltipController: function () {\n return this.imageMap.tooltipController;\n },\n getArtboardController: function () {\n return this.imageMap.artboardController;\n },\n getObjectController: function () {\n return this.imageMap.objectController;\n },\n getNavigatorController: function () {\n return this.imageMap.navigatorController;\n },\n getMenuController: function () {\n return this.imageMap.menuController;\n },\n getFullscreenController: function () {\n return this.imageMap.fullscreenController;\n },\n\n // Flags & variables\n getIsFullscreen: function () {\n return this.imageMap.fullscreenController.isFullscreen;\n },\n getZoom: function () {\n return this.imageMap.zoomController.currentZoom;\n },\n getMaxZoom: function () {\n return this.imageMap.zoomController.maxZoom;\n },\n getPan: function () {\n return {\n x: this.imageMap.zoomController.actualPanX,\n y: this.imageMap.zoomController.actualPanY,\n };\n },\n getMinPan: function () {\n return {\n x: this.imageMap.zoomController.minPanX,\n y: this.imageMap.zoomController.minPanY,\n };\n },\n getEventCoordinates: function () {\n return {\n x: this.imageMap.eventController.eventCoordinates.x,\n y: this.imageMap.eventController.eventCoordinates.y,\n };\n },\n getIsMenuMobile: function () {\n let containerWidth =\n parseInt(this.getContainer().getBoundingClientRect().width) ||\n this.getArtboard().width;\n\n if (isMobile() || containerWidth / 3 < 240) {\n return true;\n } else {\n return false;\n }\n },\n getAreTooltipsFullscreen: function () {\n return this.imageMap.tooltipController.tooltipsAreFullscreen;\n },\n getCurrentArtboard: function () {\n return this.imageMap.artboardController.currentArtboardId;\n },\n getIsThereFullscreenTooltipOpen: function () {\n if (\n this.imageMap.tooltipController.tooltipsAreFullscreen &&\n this.imageMap.tooltipController.openedTooltips.length > 0\n )\n return true;\n return false;\n },\n\n // Elements\n getImage: function () {\n return this.imageMap.image;\n },\n getContainer: function () {\n return this.imageMap.containerEl;\n },\n getCanvasWrap: function () {\n return this.imageMap.canvasWrap;\n },\n getScaleWrap: function () {\n return this.imageMap.scaleWrap;\n },\n getTranslateWrap: function () {\n return this.imageMap.translateWrap;\n },\n getUIWrap: function () {\n return this.imageMap.UIWrap;\n },\n\n // Rects\n getCanvasWrapRect: function () {\n if (!this.imageMap.cacheController.getValue(consts.RECT_CANVAS_WRAP)) {\n this.imageMap.cacheController.setValue(\n consts.RECT_CANVAS_WRAP,\n getElementRect(this.imageMap.canvasWrap),\n );\n }\n return this.imageMap.cacheController.getValue(consts.RECT_CANVAS_WRAP);\n },\n getNavigatorRect: function () {\n if (!this.imageMap.cacheController.getValue(consts.RECT_NAVIGATOR)) {\n this.imageMap.cacheController.setValue(\n consts.RECT_NAVIGATOR,\n getElementRect(this.imageMap.navigatorController.navigator.element),\n );\n }\n return this.imageMap.cacheController.getValue(consts.RECT_NAVIGATOR);\n },\n getTooltipsContainerRect: function () {\n if (\n !this.imageMap.cacheController.getValue(consts.RECT_TOOLTIPS_CONTAINER)\n ) {\n this.imageMap.cacheController.setValue(\n consts.RECT_TOOLTIPS_CONTAINER,\n getElementRect(this.imageMap.tooltipController.container),\n );\n }\n return this.imageMap.cacheController.getValue(\n consts.RECT_TOOLTIPS_CONTAINER,\n );\n },\n getFullscreenButtonRect: function () {\n if (\n !this.imageMap.cacheController.getValue(consts.RECT_BUTTON_FULLSCREEN)\n ) {\n this.imageMap.cacheController.setValue(\n consts.RECT_BUTTON_FULLSCREEN,\n getElementRect(this.imageMap.fullscreenController.button.element),\n );\n }\n return this.imageMap.cacheController.getValue(\n consts.RECT_BUTTON_FULLSCREEN,\n );\n },\n getZoomInButtonRect: function () {\n if (!this.imageMap.cacheController.getValue(consts.RECT_BUTTON_ZOOM_IN)) {\n this.imageMap.cacheController.setValue(\n consts.RECT_BUTTON_ZOOM_IN,\n getElementRect(this.imageMap.zoomController.buttons.zoomInButton),\n );\n }\n return this.imageMap.cacheController.getValue(consts.RECT_BUTTON_ZOOM_IN);\n },\n getZoomOutButtonRect: function () {\n if (\n this.imageMap.zoomController.buttons &&\n !this.imageMap.cacheController.getValue(consts.RECT_BUTTON_ZOOM_OUT)\n ) {\n this.imageMap.cacheController.setValue(\n consts.RECT_BUTTON_ZOOM_OUT,\n getElementRect(this.imageMap.zoomController.buttons.zoomOutButton),\n );\n }\n return this.imageMap.cacheController.getValue(consts.RECT_BUTTON_ZOOM_OUT);\n },\n getArtboardSelectRect: function () {\n if (\n !this.imageMap.cacheController.getValue(consts.RECT_ARTBOARD_SELECT_MENU)\n ) {\n this.imageMap.cacheController.setValue(\n consts.RECT_ARTBOARD_SELECT_MENU,\n getElementRect(this.imageMap.artboardController.artboardMenu.element),\n );\n }\n return this.imageMap.cacheController.getValue(\n consts.RECT_ARTBOARD_SELECT_MENU,\n );\n },\n getTooltipCloseButtonRect: function () {\n return {\n offset: {\n left: window.innerWidth - 44,\n top: window.scrollY,\n },\n offsetWidth: 44,\n offsetHeight: 44,\n };\n },\n getOpenMenuButtonRect: function () {\n if (!this.imageMap.cacheController.getValue(consts.RECT_BUTTON_OPEN_MENU)) {\n this.imageMap.cacheController.setValue(\n consts.RECT_BUTTON_OPEN_MENU,\n getElementRect(this.imageMap.menuController.openButton.element),\n );\n }\n return this.imageMap.cacheController.getValue(consts.RECT_BUTTON_OPEN_MENU);\n },\n getCloseMenuButtonRect: function () {\n if (\n !this.imageMap.cacheController.getValue(consts.RECT_BUTTON_CLOSE_MENU)\n ) {\n this.imageMap.cacheController.setValue(\n consts.RECT_BUTTON_CLOSE_MENU,\n getElementRect(this.imageMap.menuController.closeButton.element),\n );\n }\n return this.imageMap.cacheController.getValue(\n consts.RECT_BUTTON_CLOSE_MENU,\n );\n },\n getMenuRect: function () {\n if (!this.imageMap.cacheController.getValue(consts.RECT_MENU)) {\n this.imageMap.cacheController.setValue(\n consts.RECT_MENU,\n getElementRect(this.imageMap.menuController.menu.element),\n );\n }\n return this.imageMap.cacheController.getValue(consts.RECT_MENU);\n },\n getOpenedFullscreenTooltipRect: function () {\n let openedTooltipId = this.imageMap.tooltipController.openedTooltips\n .values()\n .next().value;\n if (\n openedTooltipId &&\n !this.imageMap.cacheController.getValue(\n consts.RECT_OPENED_FULLSCREEN_TOOLTIP,\n )\n ) {\n let element =\n this.imageMap.tooltipController.getTooltipElement(openedTooltipId);\n let rect = getElementRect(element);\n this.imageMap.cacheController.setValue(\n consts.RECT_OPENED_FULLSCREEN_TOOLTIP,\n rect,\n );\n }\n\n return this.imageMap.cacheController.getValue(\n consts.RECT_OPENED_FULLSCREEN_TOOLTIP,\n );\n },\n};\n\nfunction traverseObjects(objects, callback) {\n for (let obj of objects) {\n if (obj.children) {\n traverseObjects(obj.children, callback);\n }\n if (callback(obj)) break;\n }\n}\n","export default {\n setExampleMutation: (state, payload) => {\n }\n}","import { deepExtend } from 'Editor/scripts/utilities'\nimport getters from 'Client/store/getters'\nimport actions from 'Client/store/actions'\nimport mutations from 'Client/store/mutations'\n\nexport default class Store {\n imageMap = undefined\n\n constructor({ initialState, imageMap }) {\n this.imageMap = imageMap\n\n // Set initial state\n this.setState(initialState)\n\n // Map getters as properties of the Store\n for (let getterName in getters) {\n this[getterName] = new Proxy(getters[getterName], this.getterProxyHandler)\n }\n\n this.subscribers = []\n this.mutationSubscribers = []\n }\n getterProxyHandler = {\n apply: function (target, thisArg, argumentsList) {\n target = target.bind(thisArg)\n return target(thisArg.state, ...argumentsList)\n }\n }\n setState(newState = {}) {\n this.state = deepExtend({}, newState)\n }\n commit(mutationName, payload) {\n mutations[mutationName](this.state, payload)\n\n for (let subscriber of this.mutationSubscribers) {\n subscriber({\n type: mutationName,\n payload\n })\n }\n }\n async dispatch(actionName, payload) {\n let result = actions[actionName]({ commit: this.commit.bind(this), state: this.state, store: this }, payload)\n\n // console.log('Action: ' + actionName)\n\n for (let subscriber of this.subscribers) {\n subscriber({\n type: actionName,\n payload\n })\n }\n\n return result\n }\n subscribe(subscriber) {\n this.subscribers.push(subscriber)\n }\n subscribeMutation(subscriber) {\n this.mutationSubscribers.push(subscriber)\n }\n}","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n",null,null,null,null,"__webpack_require__.nc = undefined;","import 'ClientAssets/index.css'\n\nimport 'Client/globals.js'\nimport 'Client/api/hooks.js'\nimport 'Client/api/hooksDeprecated.js'\nimport 'Client/api/functions.js'\nimport 'Client/api/functionsDeprecated.js'\nimport 'Client/api/events.js'\nimport 'Client/api/html.js'\nimport { ImageMap } from 'Client/imageMap'\n\nlet launchParamsDefaults = {\n artboardId: undefined,\n isFullscreen: false,\n}\n\nexport function init(selector, config, launchParams = launchParamsDefaults) {\n let imageMap = new ImageMap(selector, config, launchParams)\n window.ImageMapPro.instances[config.general?.name || 'Default'] = imageMap\n}\n\nwindow.ImageMapPro.init = init\n\n// [Deprecated] jQuery support\nif (typeof $ !== 'undefined') {\n $.fn['imageMapPro'] = function (config) {\n ImageMapPro.init(this[0], config)\n }\n}\n\n// Used for debugging on mobile\n\nlet debugConsole = undefined\nlet debugInterval = undefined\nlet debugTimeout = undefined\n\nwindow.debug = function (str) {\n if (!debugConsole) {\n debugConsole = document.createElement('div')\n debugConsole.setAttribute('id', 'debug')\n document.querySelector('body').appendChild(debugConsole)\n }\n\n debugConsole.innerHTML = str\n\n debugConsole.style.transitionProperty = 'none'\n debugConsole.style.opacity = 1\n\n clearInterval(debugInterval)\n clearTimeout(debugTimeout)\n debugTimeout = setTimeout(() => {\n debugInterval = setInterval(() => {\n debugConsole.style.opacity = debugConsole.style.opacity * 0.75\n if (debugConsole.style.opacity < 0.1) {\n debugConsole.style.opacity = 0\n clearInterval(debugInterval)\n }\n }, 50)\n }, 1000)\n}\n\nwindow.print = window.debug\n// window.print('test123')\n"]}