Vous pouvez appliquer vos changements maintenant ou fermer sans sauvegarder.
' +\r\n 'Votre projet peut \u00EAtre transmis \u00E0 notre \u00E9quipe si vous souhaitez \u00EAtre accompagn\u00E9 pour le finaliser.
' +\n 'Une ou plusieurs personnalisations sont 100% hors cadre. Elles ne seront pas prises en compte dans le prix, les BAT et le panier.
' +\r\n 'Aucune variante disponible.
'\n : isSplitMode\n ? 'Aucune variante disponible pour cette r\\u00e9partition.
'\n : 'Aucune taille disponible.
';\n if (available.length) {\r\n listHtml = available\r\n .map(\r\n function (item) {\r\n const qty = this.getSizeQuantityByVariantId(item.id);\r\n const maxQty = this.getMaxSizeQuantityByVariantId(item.id);\r\n const remaining = this.getRemainingStockByVariantId(item.id);\r\n const hasFiniteStock = Number.isFinite(remaining);\r\n const showLowStock = hasFiniteStock && remaining < 11;\r\n const showAvailableStock = hasFiniteStock && remaining >= 11;\r\n const disableMinus = qty <= 0;\r\n const disablePlus = Number.isFinite(maxQty) ? qty >= maxQty : false;\r\n if (this.config.hasFixedQuantity) {\r\n return (\r\n 'Aucun element.
';\r\n });\r\n return;\r\n }\r\n\r\n const objects = this.canvasEngine.getDesignObjects();\r\n const selectedUid = this.selectedDesignObject ? this.ensureDesignObjectUid(this.selectedDesignObject) : '';\r\n const views = this.getTechniqueAvailableViews();\r\n const chunks = [];\r\n\r\n for (let viewIndex = 0; viewIndex < views.length; viewIndex += 1) {\r\n const view = views[viewIndex];\r\n const viewLabel = 'Vue : ' + this.getViewLabel(view);\r\n const zones = this.getAvailableZonesForView(view);\r\n const keepSelectedObjectAsOccupiedForAdds = this.shouldKeepAddButtonsConstrainedForSelectedObject(view);\r\n const addAllowedZoneIds = this.getConstraintFilteredZones(\n zones,\n view,\n null,\n {\n ignoreCurrentSelection:\n Number(this.customizationRules && this.customizationRules.maxActiveZones) > 0\n ? false\n : !keepSelectedObjectAsOccupiedForAdds\n }\n ).reduce(function (accumulator, zone) {\r\n if (zone && zone.id) accumulator[String(zone.id)] = true;\r\n return accumulator;\r\n }, {});\r\n const zoneBlocks = zones\r\n .map(\r\n function (zone, zoneIndex) {\r\n const zoneId = String(zone.id || '');\r\n const canAddInZone = !!addAllowedZoneIds[zoneId];\n const zoneLabel = this.escapeHtml(zone.label || ('Zone ' + String(zoneIndex + 1)));\r\n const zonePlacementIcon = this.getZonePlacementIconMarkup(zone, view);\r\n const zoneViewLabel = this.escapeHtml(this.getViewDisplay(view).zoneLabel);\n const zoneObjects = objects.filter(function (object) {\r\n return (object.view || 'front') === view && String(object.zoneId || '') === zoneId;\r\n });\r\n const selectedZoneObject = zoneObjects.find(\r\n function (object) {\r\n return selectedUid && this.ensureDesignObjectUid(object) === selectedUid;\r\n }.bind(this)\r\n );\r\n const zoneHasSelection = !!selectedZoneObject;\r\n const selectedZoneKind = selectedZoneObject ? this.getSelectedObjectKind(selectedZoneObject) : '';\r\n\r\n const rows = zoneObjects\r\n .map(\r\n function (object, rowIndex) {\r\n const uid = this.ensureDesignObjectUid(object);\r\n const kind = this.getSelectedObjectKind(object);\r\n const badge = this.getContentKindIconMarkup(kind);\r\n const label = this.escapeHtml(this.getImpressionObjectLabel(object, rowIndex));\r\n return (\r\n '' + label + '
' +\r\n 'Zone vide
') +\r\n 'Aucune zone disponible.
') +\r\n 'Choisissez un seul emplacement de personnalisation. Vous pourrez d\u00E9placer votre contenu vers un autre emplacement.
'\n : '';\n const monoNotice = this.usesSharedMarkingColor()\n ? 'Le texte, les images et les QR Codes utilisent une couleur de marquage commune. Pour un meilleur r\u00E9sultat, utilisez un logo simple avec un fond transparent.
'\n : '';\n const html = ruleNotice + monoNotice + chunks.join('');\n listNodes.forEach(function (node) {\r\n node.innerHTML = html;\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.getContentKindIconMarkup = function (kind) {\r\n const normalizedKind = String(kind || 'image').toLowerCase();\r\n if (normalizedKind === 'text') {\r\n return '';\r\n }\r\n if (normalizedKind === 'qr') {\r\n return (\r\n ''\r\n );\r\n }\r\n return (\r\n ''\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.setPendingImpressionMove = function (uid) {\r\n if (!this.modal) return;\r\n const nextUid = String(uid || '');\r\n this.draggingImpressionUid = nextUid;\r\n this.modal.querySelectorAll('[data-impression-drag].is-dragging').forEach(function (node) {\r\n node.classList.remove('is-dragging');\r\n });\r\n if (!nextUid) {\r\n this.clearImpressionDropTargets();\r\n return;\r\n }\r\n this.modal.querySelectorAll('[data-impression-drag][data-object-uid=\"' + nextUid + '\"]').forEach(function (node) {\r\n node.classList.add('is-dragging');\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.clearPendingImpressionMove = function () {\r\n this.setPendingImpressionMove('');\r\n };\r\n\r\n PersonalizerModalApp.prototype.clearImpressionLongPressTimer = function () {\r\n if (this.impressionLongPressTimer) {\r\n window.clearTimeout(this.impressionLongPressTimer);\r\n this.impressionLongPressTimer = 0;\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.releaseImpressionPointerCapture = function () {\r\n const touchState = this.impressionTouchState;\r\n if (!touchState || !touchState.captureNode || !touchState.captureNode.releasePointerCapture) return;\r\n if (!Number.isFinite(touchState.pointerId)) return;\r\n try {\r\n touchState.captureNode.releasePointerCapture(touchState.pointerId);\r\n } catch (_error) {\r\n // Ignore capture release failures on unsupported browsers.\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.resetImpressionTouchState = function () {\r\n this.clearImpressionLongPressTimer();\r\n this.releaseImpressionPointerCapture();\r\n this.impressionTouchState = null;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getImpressionDropTargetFromPoint = function (clientX, clientY) {\r\n if (!Number.isFinite(clientX) || !Number.isFinite(clientY) || typeof document === 'undefined') return null;\r\n const hit = document.elementFromPoint(clientX, clientY);\r\n if (!hit || !hit.closest) return null;\r\n const dropZone = hit.closest('[data-impression-drop-zone]');\r\n if (!dropZone) return null;\r\n const zoneId = String(dropZone.dataset.impressionZoneId || '');\r\n const view = String(dropZone.dataset.impressionView || 'front');\r\n return {\r\n node: dropZone,\r\n zoneId: zoneId,\r\n view: view\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.updateImpressionTouchDropTarget = function (clientX, clientY) {\r\n const touchState = this.impressionTouchState;\r\n if (!touchState || !touchState.isDragging) return null;\r\n\r\n const objectUid = this.draggingImpressionUid || touchState.objectUid;\r\n const object = objectUid ? this.getDesignObjectByUid(objectUid) : null;\r\n const target = this.getImpressionDropTargetFromPoint(clientX, clientY);\r\n\r\n this.clearImpressionDropTargets();\r\n if (!object || !target || !target.zoneId || !this.isZoneAllowedForObject(target.zoneId, target.view, object)) {\r\n return null;\r\n }\r\n\r\n target.node.classList.add('is-drop-target');\r\n return target;\r\n };\r\n\r\n PersonalizerModalApp.prototype.beginImpressionTouchDrag = function (impressionsList, rowNode, event, options) {\r\n if (!impressionsList || !rowNode || !event) return;\r\n const settings = options || {};\r\n const objectUid = String(rowNode.dataset.objectUid || '');\r\n if (!objectUid) return;\r\n\r\n this.clearImpressionLongPressTimer();\r\n this.impressionTouchState = {\r\n pointerId: event.pointerId,\r\n objectUid: objectUid,\r\n startX: Number(event.clientX) || 0,\r\n startY: Number(event.clientY) || 0,\r\n isDragging: false,\r\n captureNode: impressionsList\r\n };\r\n\r\n if (settings.immediateStart) {\r\n this.impressionTouchState.isDragging = true;\r\n this.suppressNextImpressionClick = true;\r\n this.setPendingImpressionMove(objectUid);\r\n if (impressionsList.setPointerCapture && Number.isFinite(event.pointerId)) {\r\n try {\r\n impressionsList.setPointerCapture(event.pointerId);\r\n } catch (_error) {\r\n // Ignore pointer capture failures on unsupported browsers.\r\n }\r\n }\r\n this.updateImpressionTouchDropTarget(event.clientX, event.clientY);\r\n return;\r\n }\r\n\r\n this.impressionLongPressTimer = window.setTimeout(\r\n function () {\r\n if (!this.impressionTouchState || this.impressionTouchState.objectUid !== objectUid) return;\r\n this.impressionTouchState.isDragging = true;\r\n this.suppressNextImpressionClick = true;\r\n this.setPendingImpressionMove(objectUid);\r\n if (impressionsList.setPointerCapture && Number.isFinite(event.pointerId)) {\r\n try {\r\n impressionsList.setPointerCapture(event.pointerId);\r\n } catch (_error) {\r\n // Ignore pointer capture failures on unsupported browsers.\r\n }\r\n }\r\n this.updateImpressionTouchDropTarget(event.clientX, event.clientY);\r\n }.bind(this),\r\n 220\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.finishImpressionTouchDrag = function (event) {\r\n const touchState = this.impressionTouchState;\r\n if (!touchState) return false;\r\n\r\n const wasDragging = !!touchState.isDragging;\r\n const clientX = event && Number.isFinite(event.clientX) ? Number(event.clientX) : touchState.startX;\r\n const clientY = event && Number.isFinite(event.clientY) ? Number(event.clientY) : touchState.startY;\r\n\r\n this.clearImpressionLongPressTimer();\r\n\r\n if (wasDragging) {\r\n const target = this.updateImpressionTouchDropTarget(clientX, clientY);\r\n if (target && target.zoneId) {\r\n this.moveImpressionObjectToZone(touchState.objectUid, target.zoneId, target.view);\r\n } else {\r\n this.clearPendingImpressionMove();\r\n }\r\n this.clearImpressionDropTargets();\r\n this.releaseImpressionPointerCapture();\r\n this.impressionTouchState = null;\r\n return true;\r\n }\r\n\r\n this.releaseImpressionPointerCapture();\r\n this.impressionTouchState = null;\r\n return false;\r\n };\r\n\r\n PersonalizerModalApp.prototype.clearImpressionDropTargets = function () {\r\n if (!this.modal) return;\r\n this.modal.querySelectorAll('[data-impressions-list] .is-drop-target, [data-impressions-list-sidebar] .is-drop-target').forEach(function (node) {\r\n node.classList.remove('is-drop-target');\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.moveImpressionObjectToZone = function (uid, zoneId, view) {\r\n const object = this.getDesignObjectByUid(uid);\r\n if (!object || !this.canvasEngine || typeof this.canvasEngine.reassignObjectToPlacement !== 'function') return;\r\n const targetZone = this.getZoneById(zoneId);\r\n if (!targetZone) return;\r\n\r\n const targetView = normalizeViewId(view || targetZone.view || object.view);\r\n if (!this.isZoneAllowedForObject(targetZone.id, targetView, object)) {\r\n this.clearImpressionDropTargets();\r\n this.clearPendingImpressionMove();\r\n return;\r\n }\r\n const moved = this.canvasEngine.reassignObjectToPlacement(object, targetZone, targetView);\n if (!moved) return;\n\n this.clearPendingImpressionMove();\n this.syncSelectedObjectZoneContext(object).then(function () {\n this.renderImpressionsSummary();\n this.renderImpressionsUi();\n this.renderPanelPlacementControls();\n }.bind(this));\n };\r\n\r\n PersonalizerModalApp.prototype.selectZoneFromImpressionsPanel = function (zoneId, view) {\n const zone = this.getZoneById(zoneId);\r\n if (!zone) return;\r\n const targetView = normalizeViewId(view || zone.view);\n this.zoneOverlayRequested = true;\n this.isApplyingPlacement = true;\r\n try {\r\n if (this.canvasEngine && typeof this.canvasEngine.clearSelection === 'function') {\r\n this.canvasEngine.clearSelection();\r\n }\r\n this.selectedDesignObject = null;\r\n this.selectedDesignKind = '';\r\n this.setActiveView(this.getNavigationViewForPhysicalView(targetView));\r\n this.selectedZone = zone;\r\n this.applyActiveZoneToCanvas();\r\n if (this.canvasEngine && typeof this.canvasEngine.focusOnZone === 'function') {\r\n this.canvasEngine.focusOnZone(zone);\r\n }\r\n if (this.activeControlsPanel !== 'default') {\r\n this.setControlsPanel('default');\r\n }\r\n this.syncTextPanelInputFromSelection();\r\n this.syncQrPanelInputFromSelection();\r\n this.syncDimensionsToolUi();\r\n this.renderImpressionsUi();\r\n } finally {\r\n this.isApplyingPlacement = false;\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.selectObjectFromImpressionsPanel = function (uid, options) {\n const settings = options || {};\r\n const object = this.getDesignObjectByUid(uid);\r\n if (!object || !this.canvasEngine || typeof this.canvasEngine.selectDesignObject !== 'function') return;\r\n this.syncSelectedObjectZoneContext(object).then(function () {\n const kind = this.getSelectedObjectKind(object);\n if (settings.keepImpressionsPanel) {\n if (!settings.skipImpressionsRerender) this.renderImpressionsUi();\n this.syncDimensionsToolUi();\n return;\n }\n\n if (kind === 'text') {\n this.setControlsPanel('text');\n this.syncTextPanelInputFromSelection();\n } else if (kind === 'qr') {\n this.setControlsPanel('qr');\n this.syncQrPanelInputFromSelection();\n } else if (kind === 'image') {\n this.setControlsPanel('image');\n }\n }.bind(this));\n };\n\n PersonalizerModalApp.prototype.syncSelectedObjectZoneContext = function (object) {\n if (!object || !this.canvasEngine) return Promise.resolve(false);\n const objectView = normalizeViewId(object.view);\n const objectZone = object.zoneId ? this.getZoneById(object.zoneId) : null;\n this.selectedDesignObject = object;\n this.selectedDesignKind = this.getSelectedObjectKind(object);\n this.zoneOverlayRequested = true;\n if (objectZone) this.selectedZone = objectZone;\n\n return Promise.resolve(this.setActiveView(this.getNavigationViewForPhysicalView(objectView))).then(function () {\n if (objectZone) this.selectedZone = objectZone;\n this.applyActiveZoneToCanvas();\n return this.canvasEngine.selectDesignObject(object);\n }.bind(this));\n };\n\r\n PersonalizerModalApp.prototype.deleteObjectFromImpressionsPanel = function (uid) {\r\n const object = this.getDesignObjectByUid(uid);\r\n if (!object || !this.canvasEngine || typeof this.canvasEngine.deleteDesignObject !== 'function') return;\r\n const deleted = this.canvasEngine.deleteDesignObject(object);\r\n if (!deleted) return;\r\n this.selectedDesignObject = null;\n this.selectedDesignKind = '';\n this.renderImpressionsSummary();\n this.renderImpressionsUi();\n this.renderSizesUi();\n };\r\n\r\n PersonalizerModalApp.prototype.toNumericValue = function (value, fallback) {\r\n if (typeof value === 'number' && Number.isFinite(value)) return value;\r\n if (value && typeof value === 'object') {\r\n const candidateKeys = ['amount', 'price', 'value'];\r\n for (let index = 0; index < candidateKeys.length; index += 1) {\r\n const nestedValue = value[candidateKeys[index]];\r\n if (nestedValue === undefined || nestedValue === null || nestedValue === value) continue;\r\n const parsedNested = this.toNumericValue(nestedValue, NaN);\r\n if (Number.isFinite(parsedNested)) return parsedNested;\r\n }\r\n }\r\n if (typeof value === 'string') {\r\n const normalized = value\r\n .replace(/\\s/g, '')\r\n .replace(/[^0-9,.-]/g, '')\r\n .replace(',', '.');\r\n const parsed = Number(normalized);\r\n if (Number.isFinite(parsed)) return parsed;\r\n }\r\n return fallback;\r\n };\r\n\r\n PersonalizerModalApp.prototype.normalizePricingRules = function (value) {\r\n if (value == null) return null;\r\n if (Array.isArray(value)) return value;\r\n if (typeof value === 'string') {\r\n const trimmed = value.trim();\r\n if (!trimmed) return null;\r\n try {\r\n return JSON.parse(trimmed);\r\n } catch (error) {\r\n return null;\r\n }\r\n }\r\n if (typeof value === 'object') {\r\n const normalized = Object.assign({}, value);\r\n if (typeof normalized.quantity_discounts === 'string') {\r\n normalized.quantity_discounts = this.normalizePricingRules(normalized.quantity_discounts);\r\n }\r\n if (typeof normalized.tiers === 'string') {\r\n normalized.tiers = this.normalizePricingRules(normalized.tiers);\r\n }\r\n return normalized;\r\n }\r\n return null;\r\n };\r\n\r\n PersonalizerModalApp.prototype.parsePricingTiers = function () {\r\n const rules = this.normalizePricingRules(this.pricingRules);\r\n if (!rules) return [];\r\n const list = Array.isArray(rules)\r\n ? rules\r\n : Array.isArray(rules.quantity_discounts)\r\n ? rules.quantity_discounts\r\n : Array.isArray(rules.tiers)\r\n ? rules.tiers\r\n : [];\r\n\r\n return list\r\n .map(\r\n function (tier) {\r\n const min = this.toNumericValue(tier.min ?? tier.minQty ?? tier.min_qty ?? tier.quantity_min, 1);\r\n const max = this.toNumericValue(tier.max ?? tier.max_qty ?? tier.quantity_max, Number.POSITIVE_INFINITY);\r\n let multiplier = 1;\r\n if (tier.multiplier !== undefined) multiplier = this.toNumericValue(tier.multiplier, 1);\r\n else if (tier.coefficient !== undefined) multiplier = this.toNumericValue(tier.coefficient, 1);\r\n else if (tier.coef !== undefined) multiplier = this.toNumericValue(tier.coef, 1);\r\n else if (tier.discount_percent !== undefined || tier.discountPercent !== undefined) {\r\n const percent = this.toNumericValue(tier.discount_percent ?? tier.discountPercent, 0);\r\n multiplier = Math.max(0, 1 - percent / 100);\r\n }\r\n return { min: min, max: max, multiplier: multiplier };\r\n }.bind(this)\r\n )\r\n .filter(function (tier) {\r\n return Number.isFinite(tier.min) && tier.min > 0 && Number.isFinite(tier.multiplier);\r\n })\r\n .sort(function (a, b) {\r\n return a.min - b.min;\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.getLowestProductUnitPrice = function () {\r\n const stockById = {};\r\n (Array.isArray(this.config && this.config.variantsStock) ? this.config.variantsStock : []).forEach(function (variant) {\r\n stockById[String(variant && variant.id ? variant.id : '')] = variant && variant.available !== false;\r\n });\r\n\r\n const variants = Array.isArray(this.config && this.config.variantPricing) ? this.config.variantPricing : [];\r\n let lowestBasePrice = Number.POSITIVE_INFINITY;\r\n let lowestNativePrice = Number.POSITIVE_INFINITY;\r\n\r\n variants.forEach(function (variant) {\r\n const variantId = String(variant && variant.id ? variant.id : '');\r\n if (stockById[variantId] === false) return;\r\n const basePrice = Math.max(0, Math.round(Number(variant && variant.price) || 0));\r\n if (basePrice > 0) {\r\n lowestBasePrice = Math.min(lowestBasePrice, basePrice);\r\n lowestNativePrice = Math.min(lowestNativePrice, basePrice);\r\n }\r\n const priceBreaks = Array.isArray(variant && variant.quantity_price_breaks)\r\n ? variant.quantity_price_breaks\r\n : [];\r\n priceBreaks.forEach(function (priceBreak) {\r\n const breakPrice = Math.max(0, Math.round(Number(priceBreak && priceBreak.price) || 0));\r\n if (breakPrice > 0) lowestNativePrice = Math.min(lowestNativePrice, breakPrice);\r\n });\r\n });\r\n\r\n if (!Number.isFinite(lowestBasePrice)) {\r\n lowestBasePrice = Math.max(0, Math.round(Number(this.config && this.config.basePriceCents) || 0));\r\n }\r\n if (!Number.isFinite(lowestNativePrice)) lowestNativePrice = lowestBasePrice;\r\n\r\n let lowestDiscountMultiplier = 1;\r\n this.parsePricingTiers().forEach(function (tier) {\r\n const multiplier = Number(tier && tier.multiplier);\r\n if (Number.isFinite(multiplier) && multiplier >= 0) {\r\n lowestDiscountMultiplier = Math.min(lowestDiscountMultiplier, multiplier);\r\n }\r\n });\r\n const lowestDiscountedPrice = Math.max(0, Math.round(lowestBasePrice * lowestDiscountMultiplier));\r\n return Math.min(lowestNativePrice, lowestDiscountedPrice);\r\n };\r\n\r\n PersonalizerModalApp.prototype.getNextPricingTier = function (currentQuantity) {\r\n const qty = Math.max(0, Math.floor(Number(currentQuantity) || 0));\r\n const tiers = this.parsePricingTiers();\r\n for (let index = 0; index < tiers.length; index += 1) {\r\n if (tiers[index].min > qty) return tiers[index];\r\n }\r\n return null;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getCurrentPricingTier = function (currentQuantity) {\r\n const qty = Math.max(0, Math.floor(Number(currentQuantity) || 0));\r\n const tiers = this.parsePricingTiers();\r\n let currentTier = null;\r\n for (let index = 0; index < tiers.length; index += 1) {\r\n const tier = tiers[index];\r\n if (tier.min > qty) break;\r\n if (Number.isFinite(tier.max) && qty > tier.max) continue;\r\n currentTier = tier;\r\n }\r\n return currentTier;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getVariantPricingEntry = function (variantId) {\r\n const wantedId = String(variantId || '');\r\n if (!wantedId) return null;\r\n const variants = Array.isArray(this.config.variantPricing) ? this.config.variantPricing : [];\r\n return (\r\n variants.find(function (variant) {\r\n return String(variant && variant.id ? variant.id : '') === wantedId;\r\n }) || null\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.getFallbackVariantPricingEntryWithBreaks = function () {\r\n const availableIds = new Set(\r\n this.getAvailableSizeVariants().map(function (variant) {\r\n return String(variant && variant.id ? variant.id : '');\r\n })\r\n );\r\n const variants = Array.isArray(this.config.variantPricing) ? this.config.variantPricing : [];\r\n return (\r\n variants.find(function (variant) {\r\n const key = String(variant && variant.id ? variant.id : '');\r\n const breaks = Array.isArray(variant && variant.quantity_price_breaks) ? variant.quantity_price_breaks : [];\r\n return availableIds.has(key) && breaks.length > 0;\r\n }) || null\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.getVariantPriceBreaks = function (variantId) {\r\n const variant = this.getVariantPricingEntry(variantId) || this.getFallbackVariantPricingEntryWithBreaks();\r\n const breaks = Array.isArray(variant && variant.quantity_price_breaks) ? variant.quantity_price_breaks : [];\r\n return breaks\r\n .map(\r\n function (priceBreak) {\r\n return {\r\n min: Math.max(1, Math.floor(this.toNumericValue(priceBreak.minimum_quantity, 1))),\r\n price: Math.max(0, Math.round(this.toNumericValue(priceBreak.price, 0)))\r\n };\r\n }.bind(this)\r\n )\r\n .filter(function (priceBreak) {\r\n return priceBreak.min > 0 && priceBreak.price >= 0;\r\n })\r\n .sort(function (left, right) {\r\n return left.min - right.min;\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.getPricingTierDiscountPercent = function (tier) {\n if (!tier) return 0;\n if (tier.discount_percent !== undefined || tier.discountPercent !== undefined) {\n const explicitPercent = this.toNumericValue(tier.discount_percent ?? tier.discountPercent, 0);\n return Math.max(0, Math.round(explicitPercent * 10000) / 10000);\n }\n const multiplier =\r\n tier.multiplier !== undefined ? Number(tier.multiplier)\r\n : tier.coefficient !== undefined ? Number(tier.coefficient)\r\n : tier.coef !== undefined ? Number(tier.coef)\r\n : 1;\r\n if (!Number.isFinite(multiplier)) return 0;\n return Math.max(0, Math.round((1 - multiplier) * 1000000) / 10000);\n };\n\n PersonalizerModalApp.prototype.formatDiscountPercent = function (value) {\n const percent = Math.max(0, Math.round((Number(value) || 0) * 100) / 100);\n return percent.toLocaleString('fr-FR', { maximumFractionDigits: 2 });\n };\n\r\n PersonalizerModalApp.prototype.getVariantUnitPriceForQuantity = function (variantId, quantity) {\r\n const variant = this.getVariantPricingEntry(variantId);\r\n const fallbackBasePrice =\r\n this.currentVariant && Number(this.currentVariant.price)\r\n ? Number(this.currentVariant.price)\r\n : Number(this.config.basePriceCents || 0);\r\n const baseUnitPrice = Math.max(0, Math.round(this.toNumericValue(variant && variant.price, fallbackBasePrice)));\r\n const qty = Math.max(1, Math.floor(Number(quantity) || 0));\r\n const breaks = this.getVariantPriceBreaks(variantId);\r\n let finalUnitPrice = baseUnitPrice;\r\n let activeTierMin = null;\r\n let nextTierMin = null;\r\n let nextTierPriceCents = null;\r\n\r\n for (let index = 0; index < breaks.length; index += 1) {\r\n const priceBreak = breaks[index];\r\n if (qty >= priceBreak.min) {\r\n finalUnitPrice = priceBreak.price;\r\n activeTierMin = priceBreak.min;\r\n continue;\r\n }\r\n nextTierMin = priceBreak.min;\r\n nextTierPriceCents = priceBreak.price;\r\n break;\r\n }\r\n\r\n return {\r\n baseUnitPriceCents: baseUnitPrice,\r\n finalUnitPriceCents: finalUnitPrice,\r\n savingsUnitCents: Math.max(0, baseUnitPrice - finalUnitPrice),\r\n activeTierMin: activeTierMin,\r\n nextTierMin: nextTierMin,\r\n nextTierPriceCents: nextTierPriceCents\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.getReferenceProductPricingVariantId = function () {\r\n const selectedVariantIds = Object.keys(this.sizeQuantities || {}).filter(\r\n function (variantId) {\r\n return Math.max(0, Number(this.sizeQuantities[variantId]) || 0) > 0;\r\n }.bind(this)\r\n );\r\n if (selectedVariantIds.length) {\r\n const selectedWithBreaks = selectedVariantIds.find(\r\n function (variantId) {\r\n return this.getVariantPriceBreaks(variantId).length > 0;\r\n }.bind(this)\r\n );\r\n return String(selectedWithBreaks || selectedVariantIds[0]);\r\n }\r\n if (this.currentVariant && this.currentVariant.id && this.getVariantPriceBreaks(this.currentVariant.id).length > 0) {\r\n return String(this.currentVariant.id);\r\n }\r\n if (this.currentVariant && this.currentVariant.id) return String(this.currentVariant.id);\r\n const available = this.getAvailableSizeVariants();\r\n if (available.length) {\r\n const availableWithBreaks = available.find(\r\n function (variant) {\r\n return this.getVariantPriceBreaks(variant && variant.id).length > 0;\r\n }.bind(this)\r\n );\r\n return String((availableWithBreaks || available[0]).id || '');\r\n }\r\n const fallbackVariant = this.getFallbackVariantPricingEntryWithBreaks();\r\n return fallbackVariant && fallbackVariant.id ? String(fallbackVariant.id) : '';\r\n };\r\n\r\n PersonalizerModalApp.prototype.getProductPricingSummary = function () {\n const selectedQty = this.getPreviewSelectedSizeQuantity();\r\n const selectedVariants = this.getAvailableSizeVariants()\r\n .map(\r\n function (variant) {\r\n const qty = this.getSizeQuantityByVariantId(variant.id);\r\n if (!qty) return null;\r\n return {\r\n id: String(variant.id),\r\n quantity: Math.max(0, Math.floor(Number(qty) || 0))\r\n };\r\n }.bind(this)\r\n )\r\n .filter(Boolean);\r\n\r\n let totalBaseCents = 0;\n let totalFinalCents = 0;\n\r\n if (selectedVariants.length) {\n selectedVariants.forEach(\n function (variantEntry) {\n const unitPricing = this.getVariantUnitPriceForQuantity(variantEntry.id, variantEntry.quantity);\n totalBaseCents += unitPricing.finalUnitPriceCents * variantEntry.quantity;\n }.bind(this)\n );\n } else {\n const fallbackPricing = this.getVariantUnitPriceForQuantity(this.getReferenceProductPricingVariantId(), 1);\n totalBaseCents = fallbackPricing.finalUnitPriceCents;\n }\n\r\n const currentTier = this.getCurrentPricingTier(selectedQty);\r\n const nextTier = this.getNextPricingTier(selectedQty);\r\n const currentDiscountPercent = currentTier ? this.getPricingTierDiscountPercent(currentTier) : 0;\r\n const nextDiscountPercent = nextTier ? this.getPricingTierDiscountPercent(nextTier) : null;\r\n const nextTierMin = nextTier && Number.isFinite(nextTier.min) ? nextTier.min : null;\r\n if (selectedVariants.length) {\n totalFinalCents = selectedVariants.reduce(\n function (sum, variantEntry) {\n const unitPricing = this.getVariantUnitPriceForQuantity(variantEntry.id, variantEntry.quantity);\n const lineSubtotalCents = unitPricing.finalUnitPriceCents * variantEntry.quantity;\n const lineDiscountCents = Math.min(\n lineSubtotalCents,\n Math.max(0, Math.round(lineSubtotalCents * currentDiscountPercent / 100))\n );\n return sum + lineSubtotalCents - lineDiscountCents;\n }.bind(this),\n 0\n );\n } else {\n const fallbackDiscountCents = Math.min(\n totalBaseCents,\n Math.max(0, Math.round(totalBaseCents * currentDiscountPercent / 100))\n );\n totalFinalCents = totalBaseCents - fallbackDiscountCents;\n }\n totalFinalCents = Math.max(0, Math.round(totalFinalCents || 0));\n const totalDiscountCents = Math.max(0, Math.round(totalBaseCents || 0) - totalFinalCents);\r\n\r\n return {\r\n totalBaseCents: Math.max(0, Math.round(totalBaseCents || 0)),\r\n totalFinalCents: totalFinalCents,\r\n totalDiscountCents: totalDiscountCents,\r\n activeTierMin: currentTier && Number.isFinite(currentTier.min) ? currentTier.min : null,\r\n nextTierMin: nextTierMin,\r\n currentDiscountPercent: currentDiscountPercent,\r\n nextDiscountPercent: nextDiscountPercent,\r\n nextTierMissingQty:\r\n nextTierMin && selectedQty > 0\r\n ? Math.max(0, nextTierMin - selectedQty)\r\n : 0\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.getDisplayPricingSummary = function () {\r\n const selectedQty = this.getPreviewSelectedSizeQuantity();\r\n const productPricing = this.getProductPricingSummary();\r\n const feePricing = this.getPendingFeePricingSummary();\r\n return {\r\n selectedQty: selectedQty,\r\n productBaseCents: productPricing.totalBaseCents,\r\n productFinalCents: productPricing.totalFinalCents,\r\n productDiscountCents: productPricing.totalDiscountCents,\r\n productActiveTierMin: productPricing.activeTierMin,\r\n productNextTierMin: productPricing.nextTierMin,\r\n productCurrentDiscountPercent: productPricing.currentDiscountPercent,\r\n productNextDiscountPercent: productPricing.nextDiscountPercent,\r\n productNextTierMissingQty: productPricing.nextTierMissingQty,\r\n feeBaseCents: feePricing.totalBaseCents,\r\n feeFinalCents: feePricing.totalFinalCents,\r\n feeDiscountCents: feePricing.totalDiscountCents,\r\n feeActiveTierMin: null,\r\n feeNextTierMin: null,\r\n feeCurrentDiscountPercent: feePricing.currentDiscountPercent,\r\n feeNextDiscountPercent: null,\r\n feeNextTierMissingQty: 0,\r\n totalBaseCents: Math.max(0, productPricing.totalBaseCents + feePricing.totalBaseCents),\r\n totalFinalCents: Math.max(0, productPricing.totalFinalCents + feePricing.totalFinalCents),\r\n totalSavingsCents: Math.max(0, productPricing.totalDiscountCents + feePricing.totalDiscountCents),\r\n productDiscountLabel: '',\r\n feeDiscountLabel: ''\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.getProductDiscountLabel = function (summary) {\r\n if (summary && summary.productDiscountLabel) return String(summary.productDiscountLabel);\r\n return 'Remise palier';\r\n };\r\n\r\n PersonalizerModalApp.prototype.getFeeDiscountLabel = function (summary) {\r\n if (summary && summary.feeDiscountLabel) return String(summary.feeDiscountLabel);\r\n return 'Remise frais palier';\r\n };\r\n\r\n PersonalizerModalApp.prototype.getTechniqueFilteredZones = function () {\r\n return window.PersonalizerMetafields.getAvailableZones(this.zones, this.selectedTechnique);\r\n };\r\n\r\n PersonalizerModalApp.prototype.getTechniqueById = function (techniqueId) {\r\n const wantedId = String(techniqueId || '');\r\n if (!wantedId) return null;\r\n return (\r\n this.techniques.find(function (technique) {\r\n return String(technique && technique.id || '') === wantedId;\r\n }) || null\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.getZoneTechniqueTransitionKey = function (zone) {\r\n if (!zone) return '';\r\n const zoneId = String(zone.id || '').toLowerCase();\r\n const label = String(zone.label || '').toLowerCase();\r\n if (label === 'coeur' || zoneId.indexOf('coeur') >= 0 && zoneId.indexOf('anti-coeur') < 0) return 'coeur';\r\n if (label === 'anti-coeur' || zoneId.indexOf('anti-coeur') >= 0) return 'anti-coeur';\r\n if (label.indexOf('avant a3') >= 0 || zoneId.indexOf('front-a3') >= 0) return 'front-a3';\r\n if (label.indexOf('avant a4') >= 0 || zoneId.indexOf('front-a4') >= 0) return 'front-a4';\r\n if (label.indexOf('dos a3') >= 0 || zoneId.indexOf('back-a3') >= 0) return 'back-a3';\r\n if (label.indexOf('dos a4') >= 0 || zoneId.indexOf('back-a4') >= 0) return 'back-a4';\r\n if (label === 'dos' || zoneId.indexOf('back-dos') >= 0 || zoneId === 'dos') return 'dos';\r\n if (label === 'col' || zoneId.indexOf('back-col') >= 0 || zoneId === 'col') return 'col';\r\n return zoneId;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getTechniqueTransitionTargetKey = function (sourceZone, targetTechniqueId) {\r\n const sourceKey = this.getZoneTechniqueTransitionKey(sourceZone);\r\n const targetId = String(targetTechniqueId || '').toLowerCase();\r\n const isTargetBroderie = targetId.indexOf('brod') >= 0;\r\n const isTargetFlocage = targetId.indexOf('floc') >= 0;\r\n\r\n if (isTargetBroderie) {\r\n if (sourceKey === 'front-a3' || sourceKey === 'front-a4') return 'coeur';\r\n if (sourceKey === 'back-a3' || sourceKey === 'back-a4') return 'dos';\r\n return sourceKey;\r\n }\r\n\r\n if (isTargetFlocage) {\r\n if (sourceKey === 'dos' || sourceKey === 'back-a3' || sourceKey === 'back-a4' || sourceKey === 'col') return 'back-a4';\r\n return sourceKey;\r\n }\r\n\r\n return sourceKey;\r\n };\r\n\r\n PersonalizerModalApp.prototype.findTechniqueZoneByTransitionKey = function (targetTechnique, transitionKey, sourceZone) {\r\n const targetZones = window.PersonalizerMetafields.getAvailableZones(this.zones, targetTechnique);\r\n if (!targetZones.length) return null;\r\n\r\n const direct = targetZones.find(\r\n function (zone) {\r\n return this.getZoneTechniqueTransitionKey(zone) === transitionKey;\r\n }.bind(this)\r\n );\r\n if (direct) return direct;\r\n\r\n const sourceView = sourceZone && sourceZone.view ? String(sourceZone.view) : '';\r\n const sameViewZones = sourceView\r\n ? targetZones.filter(function (zone) { return String(zone && zone.view || '') === sourceView; })\r\n : [];\r\n if (sameViewZones.length) {\r\n return sameViewZones.find(Boolean) || null;\r\n }\r\n\r\n return targetZones[0] || null;\r\n };\r\n\r\n PersonalizerModalApp.prototype.reassignDesignObjectsForTechnique = function (targetTechniqueId) {\r\n if (!this.canvasEngine || typeof this.canvasEngine.getDesignObjects !== 'function') return;\r\n if (typeof this.canvasEngine.reassignObjectToPlacement !== 'function') return;\r\n\r\n const targetTechnique = this.getTechniqueById(targetTechniqueId);\r\n if (!targetTechnique) return;\r\n\r\n const objects = this.canvasEngine.getDesignObjects();\r\n objects.forEach(\r\n function (object) {\r\n const sourceZone = this.getZoneById(object && object.zoneId ? object.zoneId : '');\r\n const transitionKey = this.getTechniqueTransitionTargetKey(sourceZone, targetTechniqueId);\r\n const targetZone = this.findTechniqueZoneByTransitionKey(targetTechnique, transitionKey, sourceZone);\r\n if (!targetZone) return;\r\n this.canvasEngine.reassignObjectToPlacement(object, targetZone, targetZone.view, {\r\n forceFitWidthRatio: 0.8\r\n });\r\n }.bind(this)\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.enforceSelectedTechniqueOnObjects = function () {\r\n if (!this.canvasEngine || typeof this.canvasEngine.getDesignObjects !== 'function') return;\r\n if (typeof this.canvasEngine.deleteDesignObject !== 'function') return;\r\n\r\n const allowedZoneIds = new Set(\r\n this.getTechniqueFilteredZones().map(function (zone) {\r\n return zone.id;\r\n })\r\n );\r\n\r\n const objects = this.canvasEngine.getDesignObjects();\r\n objects.forEach(\r\n function (object) {\r\n const zoneId = object && object.zoneId ? object.zoneId : '';\r\n if (!zoneId) return;\r\n if (allowedZoneIds.has(zoneId)) return;\r\n this.canvasEngine.deleteDesignObject(object);\r\n }.bind(this)\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.applyTechniqueById = function (targetId) {\r\n this.selectedTechnique =\r\n this.techniques.find(function (technique) {\r\n return technique.id === targetId;\r\n }) || null;\r\n\r\n this.reassignDesignObjectsForTechnique(targetId);\r\n this.enforceSelectedTechniqueOnObjects();\r\n this.renderTechniques();\r\n this.renderPositionPresets();\r\n this.applyActiveZoneToCanvas();\n this.syncBackgroundWithVariant();\n this.updatePrice();\n if (this.usesSharedMarkingColor()) this.applySharedMarkingColor(this.sharedMarkingColor);\n };\n\r\n PersonalizerModalApp.prototype.clearAllDesignObjects = function () {\r\n if (!this.canvasEngine || typeof this.canvasEngine.getDesignObjects !== 'function') return;\r\n if (typeof this.canvasEngine.deleteDesignObject !== 'function') return;\r\n\r\n const objects = this.canvasEngine.getDesignObjects();\r\n objects.forEach(\r\n function (object) {\r\n this.canvasEngine.deleteDesignObject(object);\r\n }.bind(this)\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.openTechniqueChangeConfirmation = function (onConfirm) {\r\n this.pendingTechniqueChange = typeof onConfirm === 'function' ? onConfirm : null;\r\n if (!this.techniqueConfirmModal) {\r\n if (this.pendingTechniqueChange) this.pendingTechniqueChange();\r\n this.pendingTechniqueChange = null;\r\n return;\r\n }\r\n if (this.modal) this.modal.querySelector('.personalizer-modal__content')?.classList.add('is-technique-confirm-open');\r\n this.techniqueConfirmModal.classList.remove('is-hidden');\r\n };\r\n\r\n PersonalizerModalApp.prototype.resolveTechniqueChangeConfirmation = function (confirmed) {\r\n if (this.modal) this.modal.querySelector('.personalizer-modal__content')?.classList.remove('is-technique-confirm-open');\r\n if (this.techniqueConfirmModal) {\r\n this.techniqueConfirmModal.classList.add('is-hidden');\r\n }\r\n const callback = this.pendingTechniqueChange;\r\n this.pendingTechniqueChange = null;\r\n if (confirmed && typeof callback === 'function') callback();\r\n };\r\n\r\n PersonalizerModalApp.prototype.openCartSuccessModal = function () {\r\n if (!this.cartSuccessModal) return;\r\n if (this.modal) this.modal.querySelector('.personalizer-modal__content')?.classList.add('is-technique-confirm-open');\r\n this.cartSuccessModal.classList.remove('is-hidden');\r\n };\r\n\r\n PersonalizerModalApp.prototype.resolveCartSuccessModal = function (action) {\r\n if (this.modal) this.modal.querySelector('.personalizer-modal__content')?.classList.remove('is-technique-confirm-open');\r\n if (this.cartSuccessModal) this.cartSuccessModal.classList.add('is-hidden');\r\n if (action === 'go-cart') {\r\n this.redirectToCart();\r\n return;\r\n }\r\n if (action === 'continue-shopping') {\r\n this.close({ force: true });\r\n let continueUrl = String(this.config.continueShoppingUrl || '/collections/all');\r\n try {\r\n const referrerUrl = document.referrer ? new URL(document.referrer) : null;\r\n if (referrerUrl && referrerUrl.origin === window.location.origin && referrerUrl.pathname.indexOf('/collections/') !== -1) {\r\n continueUrl = referrerUrl.pathname + referrerUrl.search;\r\n }\r\n } catch (error) {\r\n // Keep the Liquid collection fallback when the referrer cannot be parsed.\r\n }\r\n window.location.href = continueUrl;\r\n return;\r\n }\r\n this.setControlsPanel('default');\r\n };\r\n\r\n PersonalizerModalApp.prototype.getUsedDesignObjectsForView = function (view) {\r\n if (!this.canvasEngine || typeof this.canvasEngine.getDesignObjects !== 'function') return [];\r\n return this.getPhysicalViewIdsForView(view || this.activeView || 'front').reduce(function (items, viewId) {\r\n return items.concat(this.canvasEngine.getDesignObjects({ view: viewId }));\r\n }.bind(this), []);\r\n };\r\n\r\n PersonalizerModalApp.prototype.getZoneById = function (zoneId) {\r\n if (!zoneId) return null;\r\n return (\r\n this.zones.find(function (zone) {\r\n return zone.id === zoneId;\r\n }) || null\r\n );\r\n };\r\n\r\n // Explicit mutual-exclusion families for A3/A4 pairs (same behavior as existing\r\n // coeur/anti-coeur vs avant A3/A4 constraints, but scoped to sibling A3/A4 zones).\r\n PersonalizerModalApp.prototype.getZoneSiblingExclusionFamilyKey = function (zone) {\r\n if (!zone) return '';\r\n const id = String(zone.id || '').toLowerCase();\r\n if (id === 'flocage-front-a3' || id === 'flocage-front-a4') return 'front-a3a4';\r\n if (id === 'flocage-back-a3' || id === 'flocage-back-a4') return 'back-a3a4';\r\n return '';\r\n };\r\n\r\n // Shared zone compatibility filter used by placement UI.\r\n // It excludes zones that are mutually exclusive with already occupied zones on the same view.\r\n PersonalizerModalApp.prototype.getConstraintFilteredZones = function (zones, view, ignoredObject, options) {\n const zoneList = Array.isArray(zones) ? zones : [];\r\n if (!zoneList.length) return zoneList;\r\n const settings = options || {};\r\n const ignoreCurrentSelection = settings.ignoreCurrentSelection !== false;\r\n\r\n const activeCanvasObject =\r\n this.canvasEngine && typeof this.canvasEngine.getActiveDesignObject === 'function'\r\n ? this.canvasEngine.getActiveDesignObject()\r\n : null;\r\n const panelSelectedObject =\n this.selectedDesignObject && this.selectedDesignObject.canvas ? this.selectedDesignObject : null;\n\n const maxActiveZones = Number(this.customizationRules && this.customizationRules.maxActiveZones) || 0;\n if (maxActiveZones > 0 && this.canvasEngine && typeof this.canvasEngine.getDesignObjects === 'function') {\n const globallyOccupiedZoneIds = Array.from(new Set(\n this.canvasEngine.getDesignObjects()\n .filter(function (object) {\n if (!object || !object.zoneId) return false;\n if (ignoredObject && object === ignoredObject) return false;\n if (ignoreCurrentSelection && activeCanvasObject && object === activeCanvasObject) return false;\n if (ignoreCurrentSelection && panelSelectedObject && object === panelSelectedObject) return false;\n return true;\n })\n .map(function (object) { return String(object.zoneId); })\n ));\n if (globallyOccupiedZoneIds.length >= maxActiveZones) {\n const allowedZoneIds = globallyOccupiedZoneIds.slice(0, maxActiveZones);\n return zoneList.filter(function (zone) {\n return allowedZoneIds.indexOf(String(zone && zone.id || '')) >= 0;\n });\n }\n }\n\n const usedObjects = this.getUsedDesignObjectsForView(view || this.activeView);\n // Apply exclusivity as soon as one zone is occupied.\r\n if (usedObjects.length <= 0) return zoneList;\r\n const occupiedZones = usedObjects\r\n .filter(function (object) {\r\n const zoneId = object && object.zoneId ? object.zoneId : '';\r\n if (!zoneId) return false;\r\n if (ignoredObject && object === ignoredObject) return false;\r\n if (ignoreCurrentSelection && activeCanvasObject && object === activeCanvasObject) return false;\r\n if (ignoreCurrentSelection && panelSelectedObject && object === panelSelectedObject) return false;\r\n return true;\r\n })\r\n .map(\r\n function (object) {\r\n return this.getZoneById(object.zoneId);\r\n }.bind(this)\r\n )\r\n .filter(Boolean);\r\n\r\n if (!occupiedZones.length) return zoneList;\r\n\r\n return zoneList.filter(function (candidateZone) {\r\n return !occupiedZones.some(function (occupiedZone) {\r\n const candidateGroup = String(candidateZone.constraintGroup || '');\r\n const occupiedGroup = String(occupiedZone.constraintGroup || '');\r\n const candidateExclusiveWith = Array.isArray(candidateZone.exclusiveWith) ? candidateZone.exclusiveWith : [];\r\n const occupiedExclusiveWith = Array.isArray(occupiedZone.exclusiveWith) ? occupiedZone.exclusiveWith : [];\r\n\r\n if (candidateGroup && occupiedExclusiveWith.indexOf(candidateGroup) >= 0) return true;\r\n if (occupiedGroup && candidateExclusiveWith.indexOf(occupiedGroup) >= 0) return true;\r\n\r\n // A3/A4 sibling exclusivity: block only the sibling zone, not the same zone.\r\n const candidateSiblingFamily = this.getZoneSiblingExclusionFamilyKey(candidateZone);\r\n const occupiedSiblingFamily = this.getZoneSiblingExclusionFamilyKey(occupiedZone);\r\n if (\r\n candidateSiblingFamily &&\r\n occupiedSiblingFamily &&\r\n candidateSiblingFamily === occupiedSiblingFamily &&\r\n String(candidateZone.id || '') !== String(occupiedZone.id || '')\r\n ) {\r\n return true;\r\n }\r\n return false;\r\n }.bind(this));\r\n }.bind(this));\r\n };\r\n\r\n // Returns true if a zone is currently allowed for the provided object/view,\r\n // taking exclusivity rules into account.\r\n PersonalizerModalApp.prototype.isZoneAllowedForObject = function (zoneId, view, object) {\r\n const targetZoneId = String(zoneId || '');\r\n if (!targetZoneId) return false;\r\n const normalizedView = normalizeViewId(view);\r\n const zones = this.getAvailableZonesForView(normalizedView);\r\n if (!zones.length) return false;\r\n const allowed = this.getConstraintFilteredZones(zones, normalizedView, object);\r\n const isAllowedByConstraints = allowed.some(function (zone) {\r\n return String(zone && zone.id || '') === targetZoneId;\r\n });\r\n if (!isAllowedByConstraints) return false;\r\n return !this.isFamilySplitMoveBlocked(object, targetZoneId, normalizedView);\r\n };\r\n\r\n // Prevent splitting an exclusive family across sibling zones when another object\r\n // of the same family already exists (ex: moving one item from Dos A4 to Dos A3\r\n // while another item remains in Dos A4).\r\n PersonalizerModalApp.prototype.isFamilySplitMoveBlocked = function (object, targetZoneId, view) {\r\n if (!object || !object.zoneId) return false;\r\n const targetZone = this.getZoneById(targetZoneId);\r\n const sourceZone = this.getZoneById(object.zoneId);\r\n if (!targetZone || !sourceZone) return false;\r\n if (String(targetZone.id || '') === String(sourceZone.id || '')) return false;\r\n\r\n const normalizedView = normalizeViewId(view || object.view);\r\n const sourceView = normalizeViewId(object.view);\r\n if (normalizedView !== sourceView) return false;\r\n\r\n const sourceSiblingFamily = this.getZoneSiblingExclusionFamilyKey(sourceZone);\r\n const targetSiblingFamily = this.getZoneSiblingExclusionFamilyKey(targetZone);\r\n if (!sourceSiblingFamily || !targetSiblingFamily || sourceSiblingFamily !== targetSiblingFamily) return false;\r\n\r\n const siblingsInFamily = this.getUsedDesignObjectsForView(normalizedView).filter(\r\n function (candidate) {\r\n if (!candidate || candidate === object || !candidate.zoneId) return false;\r\n const candidateZone = this.getZoneById(candidate.zoneId);\r\n if (!candidateZone) return false;\r\n return this.getZoneSiblingExclusionFamilyKey(candidateZone) === sourceSiblingFamily;\r\n }.bind(this)\r\n );\r\n\r\n return siblingsInFamily.length > 0;\r\n };\r\n\r\n // Special-case UX rule for left sidebar add buttons:\r\n // when editing/selecting the single object currently placed in an exclusive zone family\r\n // (ex: coeur/anti-coeur vs avant A3/A4), keep add-buttons disabled on incompatible zones\r\n // while still allowing drag/move of the selected object itself.\r\n PersonalizerModalApp.prototype.shouldKeepAddButtonsConstrainedForSelectedObject = function (view) {\r\n const selectedObject = this.selectedDesignObject && this.selectedDesignObject.canvas ? this.selectedDesignObject : null;\r\n if (!selectedObject || !selectedObject.zoneId) return false;\r\n const selectedView = normalizeViewId(selectedObject.view);\r\n const normalizedView = normalizeViewId(view || this.activeView);\r\n if (selectedView !== normalizedView) return false;\r\n\r\n const selectedZone = this.getZoneById(selectedObject.zoneId);\r\n if (!selectedZone) return false;\r\n const selectedGroup = String(selectedZone.constraintGroup || '');\r\n const selectedExclusiveWith = Array.isArray(selectedZone.exclusiveWith) ? selectedZone.exclusiveWith : [];\r\n if (!selectedGroup && !selectedExclusiveWith.length) return false;\r\n\r\n const usedObjects = this.getUsedDesignObjectsForView(normalizedView).filter(function (object) {\r\n return !!(object && object.zoneId);\r\n });\r\n if (!usedObjects.length) return false;\r\n\r\n // Count only objects in the same exclusivity family as the selected one.\r\n const familyObjects = usedObjects.filter(function (object) {\r\n const zone = this.getZoneById(object.zoneId);\r\n if (!zone) return false;\r\n const zoneGroup = String(zone.constraintGroup || '');\r\n const zoneExclusiveWith = Array.isArray(zone.exclusiveWith) ? zone.exclusiveWith : [];\r\n if (selectedGroup && zoneExclusiveWith.indexOf(selectedGroup) >= 0) return true;\r\n if (zoneGroup && selectedExclusiveWith.indexOf(zoneGroup) >= 0) return true;\r\n if (selectedGroup && zoneGroup && zoneGroup === selectedGroup) return true;\r\n return false;\r\n }.bind(this));\r\n\r\n return familyObjects.length === 1 && familyObjects[0] === selectedObject;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getAvailableZonesForCurrentView = function () {\r\n const currentView = this.activeView || 'front';\r\n const physicalViewIds = this.getPhysicalViewIdsForView(currentView);\r\n const viewZones = this.getTechniqueFilteredZones().filter(function (zone) {\r\n const zoneView = zone.view || 'front';\r\n return physicalViewIds.indexOf(zoneView) >= 0;\r\n });\r\n return this.getConstraintFilteredZones(viewZones, currentView);\r\n };\r\n\r\n PersonalizerModalApp.prototype.setActiveView = function (view, options) {\r\n const settings = options || {};\r\n const requestedView = normalizeViewId(view);\r\n let nextView = this.isPrintMode() ? this.getNavigationViewForPhysicalView(requestedView) : requestedView;\r\n const availableViews = this.getTechniqueAvailableViews();\r\n if (this.isPrintMode() && availableViews.indexOf(nextView) < 0) {\r\n const currentNavigationView = this.getNavigationViewForPhysicalView(this.activeView);\r\n nextView = availableViews.indexOf(currentNavigationView) >= 0\r\n ? currentNavigationView\r\n : availableViews[0] || 'front';\r\n }\r\n const controlsPanelBeforeTransition = this.activeControlsPanel;\r\n const expectedKindBeforeTransition =\r\n controlsPanelBeforeTransition === 'text'\r\n ? 'text'\r\n : controlsPanelBeforeTransition === 'image'\r\n ? 'image'\r\n : '';\r\n const selectedZoneIdBeforeTransition = this.selectedZone && this.selectedZone.id ? String(this.selectedZone.id) : '';\r\n const selectedObjectBeforeTransition =\r\n this.selectedDesignObject && this.selectedDesignObject.canvas ? this.selectedDesignObject : null;\r\n const shouldRestoreSelectionAfterTransition =\r\n !!selectedObjectBeforeTransition &&\r\n this.getPhysicalViewIdsForView(nextView).indexOf(String(selectedObjectBeforeTransition.view || 'front').toLowerCase()) >= 0;\r\n if (this.activeView === nextView) {\n if (settings.fromSidebar) {\n if (this.canvasEngine && typeof this.canvasEngine.clearSelection === 'function') {\r\n this.canvasEngine.clearSelection();\r\n }\r\n this.selectedDesignObject = null;\n this.selectedDesignKind = '';\n this.zoneOverlayRequested = false;\n this.setControlsPanel('default');\n }\r\n return Promise.resolve();\r\n }\r\n\r\n this.scheduleThumbnailCaptureForView(this.activeView, 90);\r\n this.activeView = nextView;\r\n this.renderViewSwitchers();\r\n this.renderPositionPresets();\r\n this.canvasViewTransitionPending = true;\r\n this.applyActiveZoneToCanvas({ deferCanvasUpdate: true });\r\n\r\n const transitionPromise = this.syncBackgroundWithVariant()\r\n .finally(\r\n function () {\r\n this.canvasViewTransitionPending = false;\r\n this.applyActiveZoneToCanvas();\r\n if (!settings.fromSidebar && this.canvasEngine && typeof this.canvasEngine.selectDesignObject === 'function') {\r\n const objectToReselect =\r\n (shouldRestoreSelectionAfterTransition ? selectedObjectBeforeTransition : null) ||\r\n (expectedKindBeforeTransition\r\n ? this.getViewObjectForKind(nextView, expectedKindBeforeTransition, selectedZoneIdBeforeTransition)\r\n : null);\r\n\r\n if (objectToReselect) {\r\n this.selectedDesignObject = objectToReselect;\r\n this.selectedDesignKind = this.getSelectedObjectKind(objectToReselect);\r\n this.canvasEngine.selectDesignObject(objectToReselect);\r\n }\r\n }\r\n if (this.previewModal && !this.previewModal.classList.contains('is-hidden')) {\r\n this.previewActiveView = this.activeView;\r\n this.renderPreviewModal();\r\n }\r\n if (this.activeControlsPanel === 'background') {\r\n this.syncBackgroundPanelUi();\r\n }\r\n }.bind(this)\r\n );\r\n\r\n if (settings.fromSidebar) {\n if (this.canvasEngine && typeof this.canvasEngine.clearSelection === 'function') {\r\n this.canvasEngine.clearSelection();\r\n }\r\n this.selectedDesignObject = null;\n this.selectedDesignKind = '';\n this.zoneOverlayRequested = false;\n this.setControlsPanel('default');\n }\r\n\r\n return transitionPromise;\r\n };\r\n\r\n PersonalizerModalApp.prototype.applyActiveZoneToCanvas = function (options) {\n if (!this.canvasEngine) return;\r\n const settings = options || {};\r\n\r\n const viewZones = this.getAvailableZonesForCurrentView();\r\n if (!this.selectedZone || !viewZones.some(function (zone) { return zone.id === this.selectedZone.id; }.bind(this))) {\r\n this.selectedZone = viewZones.length ? viewZones[0] : null;\r\n }\r\n\r\n const physicalViewIds = this.getPhysicalViewIdsForView(this.activeView);\r\n const targetPhysicalView = this.selectedZone && physicalViewIds.indexOf(this.selectedZone.view) >= 0\r\n ? this.selectedZone.view\r\n : physicalViewIds[0] || this.activeView;\r\n this.canvasEngine.currentView = targetPhysicalView;\r\n if (typeof this.canvasEngine.setViewPresentation === 'function') {\r\n this.canvasEngine.setViewPresentation(this.activeView, physicalViewIds, targetPhysicalView);\r\n }\r\n if (typeof this.canvasEngine.setZoneDebugEnabled === 'function') {\n this.canvasEngine.setZoneDebugEnabled(this.shouldShowZoneOverlay(this.activeControlsPanel));\n }\r\n if (settings.deferCanvasUpdate || this.canvasViewTransitionPending) {\r\n if (typeof this.canvasEngine.prepareViewZoneTransition === 'function') {\r\n this.canvasEngine.prepareViewZoneTransition(targetPhysicalView, this.selectedZone || null);\r\n }\r\n } else {\r\n this.canvasEngine.setActiveView(targetPhysicalView);\r\n this.canvasEngine.setActiveZone(this.selectedZone || null);\r\n }\r\n this.renderPanelPlacementControls();\n };\n\n PersonalizerModalApp.prototype.shouldShowZoneOverlay = function (panelName) {\n if (!this.selectedZone) return false;\n if (this.isPrintMode()) return this.selectedZone.strict === true;\n const panel = String(panelName || this.activeControlsPanel || 'default');\n const editingZone = panel === 'text' || panel === 'qr' || panel === 'image';\n return this.zoneOverlayRequested === true || !!this.selectedDesignObject || editingZone;\n };\n\r\n PersonalizerModalApp.prototype.syncBackgroundWithVariant = function () {\r\n if (this.isPrintMode() && this.printDocument && this.canvasEngine && this.canvasEngine.fabricCanvas) {\r\n const canvas = this.canvasEngine.fabricCanvas;\r\n canvas.backgroundColor = this.printDocument.background || '#ffffff';\r\n canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas));\r\n this.canvasEngine.recalculateActiveZone();\r\n return Promise.resolve();\r\n }\r\n const colorMockupUrl = window.PersonalizerMetafields.getMockupForColor(\r\n this.activeColorName,\r\n this.activeView,\r\n this.colors\r\n );\r\n const variantMockupUrl = window.PersonalizerMetafields.getMockupUrl(\r\n this.mockups,\r\n this.currentVariant,\r\n this.config.options,\r\n this.config.featuredImage\r\n );\r\n const mockupUrl = colorMockupUrl || variantMockupUrl || this.config.featuredImage;\r\n const placementAdjustment =\r\n window.PersonalizerMetafields && typeof window.PersonalizerMetafields.getMockupAdjustment === 'function'\r\n ? window.PersonalizerMetafields.getMockupAdjustment(\r\n this.mockupAdjustments,\r\n this.activeColorName,\r\n this.activeView,\r\n this.currentVariant\r\n )\r\n : null;\r\n const adjustmentSignature = placementAdjustment\r\n ? [\r\n placementAdjustment.zoom || '',\r\n placementAdjustment.offsetXRatio || 0,\r\n placementAdjustment.offsetYRatio || 0\r\n ].join('|')\r\n : '';\r\n const syncKey = String(this.activeView || 'front') + '|' + String(mockupUrl || '') + '|' + adjustmentSignature;\r\n if (this.lastBackgroundSyncKey === syncKey) return Promise.resolve();\r\n this.lastBackgroundSyncKey = syncKey;\r\n\r\n this.canvasEngine.fallbackUrl = mockupUrl || this.config.featuredImage || '';\r\n const backgroundPromise = this.canvasEngine.setMockupByColor(this.activeColorName, {\r\n placementAdjustment: placementAdjustment\r\n });\r\n\r\n if (this.canvasEngine && typeof this.canvasEngine.preloadMockupUrls === 'function') {\r\n const variantUrl = window.PersonalizerMetafields.getMockupUrl(\r\n this.mockups,\r\n this.currentVariant,\r\n this.config.options,\r\n this.config.featuredImage\r\n );\r\n const preloadUrls = [];\r\n this.getTechniqueAvailableViews().forEach(\r\n function (view) {\r\n const normalizedView = normalizeViewId(view);\r\n preloadUrls.push(\r\n window.PersonalizerMetafields.getMockupForColor(this.activeColorName, normalizedView, this.colors) ||\r\n variantUrl ||\r\n this.config.featuredImage ||\r\n ''\r\n );\r\n }.bind(this)\r\n );\r\n (Array.isArray(this.colors) ? this.colors : []).forEach(\r\n function (colorItem) {\r\n const colorName = colorItem && colorItem.name ? String(colorItem.name) : '';\r\n if (!colorName) return;\r\n preloadUrls.push(\r\n window.PersonalizerMetafields.getMockupForColor(colorName, this.activeView, this.colors) ||\r\n this.config.featuredImage ||\r\n ''\r\n );\r\n }.bind(this)\r\n );\r\n this.canvasEngine.preloadMockupUrls(preloadUrls);\r\n }\r\n\r\n return backgroundPromise;\r\n };\r\n\r\n PersonalizerModalApp.prototype.ensurePrintStyleValues = function () {\r\n const views = this.printDocument && Array.isArray(this.printDocument.views) ? this.printDocument.views : [];\r\n if (!this.printStyleValues || typeof this.printStyleValues !== 'object' || Array.isArray(this.printStyleValues)) {\r\n this.printStyleValues = {};\r\n }\r\n views.forEach(function (view) {\r\n const viewId = normalizeViewId(view && view.id);\r\n const options = view && view.styleOptions && typeof view.styleOptions === 'object' ? view.styleOptions : {};\r\n const values = this.printStyleValues[viewId] && typeof this.printStyleValues[viewId] === 'object'\r\n ? this.printStyleValues[viewId]\r\n : {};\r\n Object.keys(options).forEach(function (key) {\r\n const option = options[key];\r\n const selected = String(values[key] ?? '');\r\n values[key] = option.choices.some(function (choice) { return choice.value === selected; })\r\n ? selected\r\n : option.default;\r\n });\r\n this.printStyleValues[viewId] = values;\r\n }, this);\r\n return this.printStyleValues;\r\n };\r\n\r\n PersonalizerModalApp.prototype.syncPrintStyleValuesToCanvas = function () {\r\n if (!this.canvasEngine) return 0;\r\n this.ensurePrintStyleValues();\r\n if (typeof this.canvasEngine.setPrintStyleValues === 'function') {\r\n this.canvasEngine.setPrintStyleValues(this.printStyleValues);\r\n }\r\n return typeof this.canvasEngine.applyPrintSystemStyles === 'function'\r\n ? this.canvasEngine.applyPrintSystemStyles()\r\n : 0;\r\n };\r\n\r\n PersonalizerModalApp.prototype.restorePrintStyleValuesFromCanvas = function () {\r\n if (!this.canvasEngine || typeof this.canvasEngine.getPrintStyleValues !== 'function') return;\r\n this.printStyleValues = this.canvasEngine.getPrintStyleValues();\r\n this.ensurePrintStyleValues();\r\n this.syncPrintStyleValuesToCanvas();\r\n this.renderPrintStyleOptions();\r\n };\r\n\r\n PersonalizerModalApp.prototype.renderPrintStyleOptions = function () {\r\n if (!this.modal) return;\r\n const wrapper = this.modal.querySelector('[data-print-style-options]');\r\n if (!wrapper) return;\r\n const view = this.getCurrentPrintViewConfig ? this.getCurrentPrintViewConfig() : null;\r\n const options = view && view.styleOptions && typeof view.styleOptions === 'object' ? view.styleOptions : {};\r\n const keys = Object.keys(options);\r\n wrapper.hidden = !keys.length;\r\n if (!keys.length) {\r\n wrapper.innerHTML = '';\r\n return;\r\n }\r\n this.ensurePrintStyleValues();\r\n const viewId = normalizeViewId(view.id);\r\n const values = this.printStyleValues[viewId] || {};\r\n wrapper.innerHTML = keys.map(function (key, index) {\r\n const option = options[key];\r\n const activeChoice = option.choices.find(function (choice) { return choice.value === values[key]; }) || option.choices[0];\r\n const activeTextColor = this.getContrastingTextColor(activeChoice.color);\r\n const activeIsLight = this.isLightColor(activeChoice.color);\r\n return 'Aucun modele n est configure pour ce produit.
';\r\n return;\r\n }\r\n grid.innerHTML = compatibleTemplates\r\n .map(\r\n function (template) {\r\n return (\r\n ''\r\n );\r\n }.bind(this)\r\n )\r\n .join('');\r\n };\r\n\r\n PersonalizerModalApp.prototype.applyPrintTemplateById = function (templateId) {\r\n if (!this.isToolAllowedForCurrentView('template')) return;\r\n const key = String(templateId || '');\r\n const template =\r\n this.printTemplates.find(function (item) {\r\n return String(item.id || '') === key;\r\n }) || null;\r\n if (!template || !this.canvasEngine || typeof this.canvasEngine.applyPrintTemplate !== 'function') return;\r\n const allowedTemplateViews = {};\r\n Object.keys(template.views || {}).forEach(function (viewId) {\r\n const configuredView = this.printDocument && Array.isArray(this.printDocument.views)\r\n ? this.printDocument.views.find(function (view) { return view.id === normalizeViewId(viewId); })\r\n : null;\r\n if (!configuredView || !configuredView.tools || configuredView.tools.template !== false) {\r\n allowedTemplateViews[normalizeViewId(viewId)] = template.views[viewId];\r\n }\r\n }, this);\r\n if (!Object.keys(allowedTemplateViews).length) return;\r\n const applicableTemplate = Object.assign({}, template, { views: allowedTemplateViews });\r\n const requestedView = normalizeViewId(this.activeView);\r\n const availableViews = this.getTechniqueAvailableViews();\r\n const targetView =\r\n availableViews.indexOf(requestedView) >= 0 && applicableTemplate.views[requestedView]\r\n ? requestedView\r\n : (Object.keys(applicableTemplate.views)[0] || availableViews[0] || 'front');\r\n if (this.debugEnabled && typeof console !== 'undefined') {\r\n const systemCount = this.canvasEngine && typeof this.canvasEngine.getDesignObjects === 'function'\r\n ? this.canvasEngine.getDesignObjects().filter(function (object) {\r\n return String(object && object.personalizerSource || '').toLowerCase() === 'system';\r\n }).length\r\n : 0;\r\n console.log('[Print] template target views:', Object.keys(applicableTemplate.views));\r\n console.log('[Print] preserved system objects:', systemCount);\r\n }\r\n this.isApplyingPrintTemplate = true;\r\n try {\r\n this.canvasEngine.applyPrintTemplate(applicableTemplate, {\r\n zones: this.zones,\r\n replace: true\r\n });\r\n } finally {\r\n this.isApplyingPrintTemplate = false;\r\n }\r\n this.selectedDesignKind = '';\r\n this.selectedDesignObject = null;\r\n this.setActiveView(targetView);\r\n this.setControlsPanel('default');\r\n this.updatePrice();\r\n this.scheduleActiveViewThumbnailCapture(120);\r\n };\r\n\r\n PersonalizerModalApp.prototype.getRawEntriesForGroupedEntry = function (batData, groupedEntry) {\r\n if (!batData || !Array.isArray(batData.rawEntries)) return [];\r\n return batData.rawEntries.filter(function (raw) {\r\n return (\r\n raw &&\r\n raw.viewKey === groupedEntry.viewKey &&\r\n String(raw.zoneId || '') === String(groupedEntry.zoneId || '') &&\r\n raw.visibleInZone\r\n );\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.fitRectInBounds = function (boundsWidth, boundsHeight, targetRatio) {\r\n const width = Math.max(1, Number(boundsWidth) || 1);\r\n const height = Math.max(1, Number(boundsHeight) || 1);\r\n const ratio = Math.max(0.01, Number(targetRatio) || 1);\r\n let drawWidth = width;\r\n let drawHeight = drawWidth / ratio;\r\n if (drawHeight > height) {\r\n drawHeight = height;\r\n drawWidth = drawHeight * ratio;\r\n }\r\n return {\r\n width: drawWidth,\r\n height: drawHeight,\r\n x: (width - drawWidth) / 2,\r\n y: (height - drawHeight) / 2\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.getContainedBox = function (boxWidth, boxHeight, sourceWidth, sourceHeight) {\r\n const bw = Math.max(1, Number(boxWidth) || 1);\r\n const bh = Math.max(1, Number(boxHeight) || 1);\r\n const sw = Math.max(1, Number(sourceWidth) || 1);\r\n const sh = Math.max(1, Number(sourceHeight) || 1);\r\n const scale = Math.min(bw / sw, bh / sh);\r\n const width = sw * scale;\r\n const height = sh * scale;\r\n return {\r\n width: width,\r\n height: height,\r\n offsetX: (bw - width) / 2,\r\n offsetY: (bh - height) / 2\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.drawImageDataUrlContained = async function (doc, dataUrl, boxX, boxY, boxW, boxH, compression) {\r\n if (!doc || !dataUrl) return false;\r\n let imageElement = null;\r\n try {\r\n imageElement = await this.loadImageElement(dataUrl);\r\n } catch (error) {\r\n return false;\r\n }\r\n if (!imageElement) return false;\r\n const fit = this.getContainedBox(boxW, boxH, imageElement.width, imageElement.height);\r\n const format = dataUrl.indexOf('image/jpeg') !== -1 || dataUrl.indexOf('image/jpg') !== -1 ? 'JPEG' : 'PNG';\r\n doc.addImage(\r\n dataUrl,\r\n format,\r\n boxX + fit.offsetX,\r\n boxY + fit.offsetY,\r\n fit.width,\r\n fit.height,\r\n undefined,\r\n compression || 'NONE'\r\n );\r\n return true;\r\n };\r\n\r\n PersonalizerModalApp.prototype.computeIndividualPdfPageSizeMm = function (widthMm, heightMm) {\r\n const w = Math.max(10, Number(widthMm) || 10);\r\n const h = Math.max(10, Number(heightMm) || 10);\r\n const margin = 8;\r\n const pageWidth = Math.max(40, w + margin * 2);\r\n const pageHeight = Math.max(40, h + margin * 2 + 12);\r\n return {\r\n pageWidth: pageWidth,\r\n pageHeight: pageHeight,\r\n margin: margin\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.downloadIndividualPersonalizationPdfs = async function (batData, safeTitle) {\r\n if (!batData || !Array.isArray(batData.entries) || !batData.entries.length) return;\r\n const jsPdfLib = window.jspdf && window.jspdf.jsPDF ? window.jspdf.jsPDF : null;\r\n if (!jsPdfLib || !this.canvasEngine) return;\r\n\r\n for (const entry of batData.entries) {\r\n const rect = entry.croppedRect || entry.objectRect;\r\n if (!rect) continue;\r\n const targetWidthMm = Math.max(8, Number((entry.croppedWidthCm || entry.objectWidthCm || 0) * 10) || 8);\r\n const targetHeightMm = Math.max(8, Number((entry.croppedHeightCm || entry.objectHeightCm || 0) * 10) || 8);\r\n const pageSize = this.computeIndividualPdfPageSizeMm(targetWidthMm, targetHeightMm);\r\n const isLandscape = pageSize.pageWidth >= pageSize.pageHeight;\r\n const doc = new jsPdfLib({\r\n unit: 'mm',\r\n orientation: isLandscape ? 'landscape' : 'portrait',\r\n format: [pageSize.pageWidth, pageSize.pageHeight]\r\n });\r\n const pageWidth = doc.internal.pageSize.getWidth();\r\n const pageHeight = doc.internal.pageSize.getHeight();\r\n doc.setFont('helvetica', 'bold');\r\n doc.setFontSize(11);\r\n doc.setTextColor(17, 17, 17);\r\n doc.text('Personnalisation ' + entry.index, pageSize.margin, 6);\r\n doc.setFont('helvetica', 'normal');\r\n doc.setFontSize(8);\r\n doc.text(entry.view + ' - ' + entry.zoneLabel + ' (' + entry.type + ')', pageSize.margin, 10);\r\n const globalSizeText =\r\n 'Global: ' +\r\n this.formatDimensionPx(entry.croppedWidthCm || entry.objectWidthCm || 0) +\r\n ' x ' +\r\n this.formatDimensionPx(entry.croppedHeightCm || entry.objectHeightCm || 0);\r\n doc.text(globalSizeText, pageSize.margin, 13);\r\n\r\n const renderX = pageSize.margin;\r\n const renderY = 18;\r\n const renderW = Math.max(8, pageWidth - pageSize.margin * 2);\r\n const renderH = Math.max(8, pageHeight - renderY - pageSize.margin);\r\n\r\n const rawEntries = this.getRawEntriesForGroupedEntry(batData, entry);\r\n const imageEntries = rawEntries.filter(function (raw) {\r\n return raw.type === 'Image' && raw.imageSource;\r\n });\r\n const textEntries = rawEntries.filter(function (raw) {\r\n return raw.type === 'Texte' && raw.text;\r\n });\r\n const elementDimensionLines = rawEntries\r\n .map(\r\n function (raw, idx) {\r\n const isCrop =\r\n (Number(raw.croppedWidthCm) || 0) > 0 &&\r\n (Number(raw.croppedHeightCm) || 0) > 0 &&\r\n (Math.abs((Number(raw.objectWidthCm) || 0) - (Number(raw.croppedWidthCm) || 0)) > 0.05 ||\r\n Math.abs((Number(raw.objectHeightCm) || 0) - (Number(raw.croppedHeightCm) || 0)) > 0.05);\r\n const w = isCrop ? Number(raw.croppedWidthCm) || 0 : Number(raw.objectWidthCm) || 0;\r\n const h = isCrop ? Number(raw.croppedHeightCm) || 0 : Number(raw.objectHeightCm) || 0;\r\n const label = raw.type === 'Texte' ? 'Texte' : 'Image';\r\n return (\r\n label +\r\n ' ' +\r\n String(idx + 1) +\r\n ': ' +\r\n this.formatDimensionPx(w) +\r\n ' x ' +\r\n this.formatDimensionPx(h) +\r\n (isCrop ? ' (crop)' : '')\r\n );\r\n }.bind(this)\r\n )\r\n .filter(Boolean);\r\n if (elementDimensionLines.length) {\r\n const lineText = 'Elements: ' + elementDimensionLines.join(' | ');\r\n const wrapped = doc.splitTextToSize(lineText, Math.max(20, pageWidth - pageSize.margin * 2));\r\n doc.text(wrapped.slice(0, 2), pageSize.margin, Math.min(pageHeight - pageSize.margin - 2, 16.5));\r\n }\r\n\r\n let rendered = false;\r\n\r\n if (imageEntries.length === 1 && !textEntries.length) {\r\n try {\r\n const source = await this.buildVisibleImageDataUrl(imageEntries[0]);\r\n if (source) {\r\n const ext = source.indexOf('image/jpeg') !== -1 || source.indexOf('image/jpg') !== -1 ? 'JPEG' : 'PNG';\r\n doc.addImage(source, ext, renderX, renderY, renderW, renderH, undefined, 'NONE');\r\n rendered = true;\r\n }\r\n } catch (error) {\r\n rendered = false;\r\n }\r\n }\r\n\r\n if (!rendered) {\r\n let designOnlyPreview = '';\r\n if (typeof this.canvasEngine.getDesignOnlyPreviewDataURL === 'function') {\r\n designOnlyPreview = this.canvasEngine.getDesignOnlyPreviewDataURL({\r\n view: entry.viewKey,\r\n zoneId: entry.zoneId,\r\n multiplier: 6\r\n });\r\n }\r\n if (designOnlyPreview) {\r\n try {\r\n const croppedDesign = await this.cropDataUrlByRect(designOnlyPreview, rect, {\r\n outputWidth: 1800,\r\n outputHeight: 1400,\r\n paddingRatio: 0,\r\n scale: 6,\r\n transparentBackground: true,\r\n matchCropAspect: true\r\n });\r\n if (croppedDesign) {\r\n doc.addImage(croppedDesign, 'PNG', renderX, renderY, renderW, renderH, undefined, 'NONE');\r\n }\r\n } catch (error) {\r\n // Keep empty output if rendering fails.\r\n }\r\n }\r\n }\r\n\r\n const name =\r\n 'bat-' +\r\n String(safeTitle || 'produit') +\r\n '-' +\r\n String(entry.viewKey || 'view') +\r\n '-' +\r\n String(entry.zoneId || ('zone-' + String(entry.index)))\r\n .toLowerCase()\r\n .replace(/[^a-z0-9-]+/g, '-') +\r\n '.pdf';\r\n doc.save(name);\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.getExpectedPanelObjectKind = function () {\r\n if (this.activeControlsPanel === 'text') return 'text';\r\n if (this.activeControlsPanel === 'qr') return 'qr';\r\n if (this.activeControlsPanel === 'image') return 'image';\r\n if (this.activeControlsPanel === 'background') return 'background';\r\n return '';\r\n };\r\n\r\n PersonalizerModalApp.prototype.getActiveDesignObjectKind = function () {\r\n if (!this.canvasEngine || typeof this.canvasEngine.getActiveDesignObject !== 'function') return '';\r\n const object = this.canvasEngine.getActiveDesignObject();\r\n if (!object) return '';\r\n if (String(object.personalizerKind || '').toLowerCase() === 'background') return 'background';\r\n if (String(object.personalizerKind || '').toLowerCase() === 'qr') return 'qr';\r\n const type = String(object.type || '').toLowerCase();\r\n if (type === 'i-text' || type === 'text' || type === 'textbox') return 'text';\r\n if (type === 'image') return 'image';\r\n return 'design';\r\n };\r\n\r\n PersonalizerModalApp.prototype.getSelectedObjectKind = function (object) {\r\n if (!object) return '';\r\n if (String(object.personalizerKind || '').toLowerCase() === 'background') return 'background';\r\n if (String(object.personalizerKind || '').toLowerCase() === 'qr') return 'qr';\r\n const type = String(object.type || '').toLowerCase();\r\n if (type === 'i-text' || type === 'text' || type === 'textbox') return 'text';\r\n if (type === 'image') return 'image';\r\n return 'design';\r\n };\r\n\r\n PersonalizerModalApp.prototype.getSelectedObjectForKind = function (kind) {\r\n if (!this.canvasEngine || typeof this.canvasEngine.getActiveDesignObject !== 'function') return null;\r\n const activeObject = this.canvasEngine.getActiveDesignObject();\r\n const fallbackObject = this.selectedDesignObject;\r\n const object = activeObject || fallbackObject;\r\n if (!object) return null;\r\n if (!object.canvas) return null;\r\n\r\n const objectKind = this.getSelectedObjectKind(object);\r\n if (kind && objectKind !== kind) return null;\r\n return object;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getPanelObjectForKind = function (kind) {\r\n const normalizedKind = String(kind || '').toLowerCase();\r\n const direct = this.getSelectedObjectForKind(normalizedKind);\r\n if (direct) return direct;\r\n\r\n if (!this.canvasEngine || typeof this.canvasEngine.getDesignObjects !== 'function') return null;\r\n const objects = this.getUsedDesignObjectsForView(this.activeView);\r\n for (let index = objects.length - 1; index >= 0; index -= 1) {\r\n const candidate = objects[index];\r\n if (!candidate || !candidate.canvas) continue;\r\n if (!normalizedKind || this.getSelectedObjectKind(candidate) === normalizedKind) {\r\n return candidate;\r\n }\r\n }\r\n\r\n return null;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getViewObjectForKind = function (view, kind, preferredZoneId) {\r\n if (!this.canvasEngine || typeof this.canvasEngine.getDesignObjects !== 'function') return null;\r\n\r\n const normalizedView = normalizeViewId(view);\r\n const normalizedKind = String(kind || '').toLowerCase();\r\n const preferredZoneKey = String(preferredZoneId || '');\r\n const objects = this.canvasEngine.getDesignObjects({ view: normalizedView });\r\n\r\n if (!objects.length) return null;\r\n\r\n for (let index = objects.length - 1; index >= 0; index -= 1) {\r\n const candidate = objects[index];\r\n if (!candidate || !candidate.canvas) continue;\r\n if (normalizedKind && this.getSelectedObjectKind(candidate) !== normalizedKind) continue;\r\n if (preferredZoneKey && String(candidate.zoneId || '') !== preferredZoneKey) continue;\r\n return candidate;\r\n }\r\n\r\n for (let index = objects.length - 1; index >= 0; index -= 1) {\r\n const candidate = objects[index];\r\n if (!candidate || !candidate.canvas) continue;\r\n if (!normalizedKind || this.getSelectedObjectKind(candidate) === normalizedKind) {\r\n return candidate;\r\n }\r\n }\r\n\r\n return null;\r\n };\r\n\r\n PersonalizerModalApp.prototype.syncTextPanelInputFromSelection = function () {\r\n if (!this.modal) return;\r\n const textObject = this.getSelectedObjectForKind('text');\r\n const input = this.modal.querySelector('[data-text-panel-input]');\r\n if (!input) return;\r\n const nextTextValue = textObject && typeof textObject.text === 'string' ? textObject.text : '';\r\n if (input.value !== nextTextValue) {\r\n input.value = nextTextValue;\r\n }\r\n\r\n const colorSelect = this.modal.querySelector('[data-text-panel-color]');\r\n if (colorSelect) {\r\n const colorOptions = Array.from(colorSelect.options || [])\r\n .map(function (option) {\r\n return String(option.value || '').trim();\r\n })\r\n .filter(Boolean);\r\n const normalizeColorToOption = function (value) {\r\n if (!colorOptions.length) return '#111111';\r\n const fallback = colorOptions.includes('#111111') ? '#111111' : colorOptions[0];\r\n const normalized = this.normalizeCssColorValue(value);\r\n if (!normalized) return fallback;\r\n\r\n const exact = colorOptions.find(function (optionValue) {\r\n return String(optionValue).toLowerCase() === String(normalized).toLowerCase();\r\n });\r\n if (exact) return exact;\r\n\r\n const sourceChannels = this.getColorRgbChannels(normalized);\r\n if (!sourceChannels) return fallback;\r\n\r\n let bestOption = fallback;\r\n let bestDistance = Number.POSITIVE_INFINITY;\r\n colorOptions.forEach(\r\n function (optionValue) {\r\n const optionChannels = this.getColorRgbChannels(optionValue);\r\n if (!optionChannels) return;\r\n const distance =\r\n Math.abs(sourceChannels.r - optionChannels.r) +\r\n Math.abs(sourceChannels.g - optionChannels.g) +\r\n Math.abs(sourceChannels.b - optionChannels.b);\r\n if (distance < bestDistance) {\r\n bestDistance = distance;\r\n bestOption = optionValue;\r\n }\r\n }.bind(this)\r\n );\r\n return bestOption;\r\n }.bind(this);\r\n\r\n const baseFill =\r\n textObject && textObject._personalizerBaseStyle && textObject._personalizerBaseStyle.fill\r\n ? textObject._personalizerBaseStyle.fill\r\n : textObject && textObject.fill\r\n ? textObject.fill\r\n : '#111111';\r\n const nextColor = normalizeColorToOption(baseFill);\r\n colorSelect.value = nextColor;\r\n colorSelect.classList.toggle('personalizer-controls__input--light', String(nextColor).toLowerCase() === '#ffffff');\r\n }\r\n\r\n const fontSelect = this.modal.querySelector('[data-text-panel-font]');\r\n if (fontSelect) {\r\n const nextFont = textObject && textObject.fontFamily ? String(textObject.fontFamily) : 'Rubik';\r\n const exists = Array.from(fontSelect.options).some(function (option) {\r\n return String(option.value) === nextFont;\r\n });\r\n if (exists) fontSelect.value = nextFont;\r\n }\r\n\r\n const sizeRange = this.modal.querySelector('[data-text-panel-size]');\r\n if (sizeRange) {\r\n const nextSize = textObject && Number(textObject.fontSize) > 0 ? Math.round(Number(textObject.fontSize)) : 34;\r\n sizeRange.value = String(nextSize);\r\n }\r\n\r\n this.renderTextPanelLiveSize(textObject);\r\n this.syncTextPanelStyleToggleUi(textObject);\r\n this.syncMobileTextSelectOptions();\r\n };\r\n\r\n PersonalizerModalApp.prototype.handleDirectTypingForSelectedText = function (event) {\r\n if (!event || event.defaultPrevented) return false;\r\n if (event.ctrlKey || event.metaKey || event.altKey) return false;\r\n const textObject = this.getSelectedObjectForKind('text');\r\n if (!textObject) return false;\r\n\r\n const input = this.modal ? this.modal.querySelector('[data-text-panel-input]') : null;\r\n if (!input) return false;\r\n\r\n let nextValue = null;\r\n const currentValue = String(typeof textObject.text === 'string' ? textObject.text : input.value || '');\r\n\r\n if (event.key === 'Backspace') {\r\n nextValue = currentValue.slice(0, -1);\r\n } else if (event.key === 'Delete') {\r\n nextValue = currentValue.slice(0, -1);\r\n } else if (event.key === 'Enter') {\r\n nextValue = currentValue + '\\n';\r\n } else if (typeof event.key === 'string' && event.key.length === 1) {\r\n nextValue = currentValue + event.key;\r\n } else {\r\n return false;\r\n }\r\n\r\n event.preventDefault();\r\n event.stopPropagation();\r\n\r\n if (this.activeControlsPanel !== 'text') {\r\n this.setControlsPanel('text');\r\n }\r\n\r\n input.value = nextValue;\r\n this.updateSelectedTextFromPanel(nextValue);\r\n\r\n try {\r\n input.focus({ preventScroll: true });\r\n } catch (error) {\r\n input.focus();\r\n }\r\n if (typeof input.setSelectionRange === 'function') {\r\n const cursor = nextValue.length;\r\n input.setSelectionRange(cursor, cursor);\r\n }\r\n return true;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getSelectedTextObjectSizeLabel = function (textObject) {\r\n if (!textObject || !this.canvasEngine) return '-';\r\n if (typeof this.canvasEngine.getDesignObjectDimensions !== 'function') return '-';\r\n if (typeof this.canvasEngine.getActiveZoneDimensions !== 'function') return '-';\r\n\r\n const objectDimensions = this.canvasEngine.getDesignObjectDimensions(textObject);\r\n const zoneDimensions = this.canvasEngine.getActiveZoneDimensions();\r\n const zoneWidthCm = this.selectedZone && Number(this.selectedZone.widthCm) > 0 ? Number(this.selectedZone.widthCm) : 0;\r\n const zoneHeightCm = this.selectedZone && Number(this.selectedZone.heightCm) > 0 ? Number(this.selectedZone.heightCm) : 0;\r\n if (!objectDimensions || !zoneDimensions || !zoneWidthCm || !zoneHeightCm) return '-';\r\n if (Number(zoneDimensions.width) <= 0 || Number(zoneDimensions.height) <= 0) return '-';\r\n\r\n const widthCm = (Number(objectDimensions.width) / Number(zoneDimensions.width)) * zoneWidthCm;\r\n const heightCm = (Number(objectDimensions.height) / Number(zoneDimensions.height)) * zoneHeightCm;\r\n return this.formatDimensionPair(Math.max(0.1, widthCm), Math.max(0.1, heightCm));\r\n };\r\n\r\n PersonalizerModalApp.prototype.renderTextPanelLiveSize = function (textObject) {\r\n if (!this.modal) return;\r\n const valueNode = this.modal.querySelector('[data-text-panel-size-value]');\r\n const valueNodeMobile = this.modal.querySelector('[data-text-panel-size-value-mobile]');\r\n const label = this.getSelectedTextObjectSizeLabel(textObject);\r\n if (valueNode) valueNode.textContent = label;\r\n if (valueNodeMobile) valueNodeMobile.textContent = label;\r\n };\r\n\r\n PersonalizerModalApp.prototype.syncTextPanelStyleToggleUi = function (textObject) {\r\n if (!this.modal) return;\r\n const boldButton = this.modal.querySelector('[data-action=\"text-toggle-bold\"]');\r\n const italicButton = this.modal.querySelector('[data-action=\"text-toggle-italic\"]');\r\n const underlineButton = this.modal.querySelector('[data-action=\"text-toggle-underline\"]');\r\n\r\n const isBold = !!(textObject && String(textObject.fontWeight || '').toLowerCase() === 'bold');\r\n const isItalic = !!(textObject && String(textObject.fontStyle || '').toLowerCase() === 'italic');\r\n const isUnderline = !!(textObject && textObject.underline === true);\r\n\r\n if (boldButton) {\r\n boldButton.classList.toggle('is-active', isBold);\r\n boldButton.setAttribute('aria-pressed', isBold ? 'true' : 'false');\r\n }\r\n if (italicButton) {\r\n italicButton.classList.toggle('is-active', isItalic);\r\n italicButton.setAttribute('aria-pressed', isItalic ? 'true' : 'false');\r\n }\r\n if (underlineButton) {\r\n underlineButton.classList.toggle('is-active', isUnderline);\r\n underlineButton.setAttribute('aria-pressed', isUnderline ? 'true' : 'false');\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.toggleSelectedTextStyleFromPanel = function (styleKey) {\r\n const textObject = this.getSelectedObjectForKind('text');\r\n if (!textObject) return;\r\n\r\n if (styleKey === 'bold') {\r\n const isBold = String(textObject.fontWeight || '').toLowerCase() === 'bold';\r\n this.updateSelectedTextStyleFromPanel({ fontWeight: isBold ? 'normal' : 'bold' });\r\n return;\r\n }\r\n if (styleKey === 'italic') {\r\n const isItalic = String(textObject.fontStyle || '').toLowerCase() === 'italic';\r\n this.updateSelectedTextStyleFromPanel({ fontStyle: isItalic ? 'normal' : 'italic' });\r\n return;\r\n }\r\n if (styleKey === 'underline') {\r\n this.updateSelectedTextStyleFromPanel({ underline: !(textObject.underline === true) });\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.centerSelectedPanelObjectInZone = function (kind, axis) {\r\n const object = this.getPanelObjectForKind(kind || '');\r\n if (!object || !this.canvasEngine || typeof this.canvasEngine.centerObjectInZone !== 'function') return;\r\n const centered = this.canvasEngine.centerObjectInZone(object, axis);\r\n if (centered) {\r\n const objectKind = this.getSelectedObjectKind(object);\r\n this.selectedDesignObject = object;\r\n this.selectedDesignKind = objectKind;\r\n if (objectKind === 'text') {\r\n this.syncTextPanelInputFromSelection();\r\n }\r\n this.syncDimensionsToolUi();\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.rotateSelectedPanelObjectFromPanel = function (kind, deltaDegrees) {\r\n const object = this.getPanelObjectForKind(kind || '');\r\n if (!object || !this.canvasEngine || typeof this.canvasEngine.rotateDesignObject !== 'function') return;\r\n const rotated = this.canvasEngine.rotateDesignObject(object, deltaDegrees);\r\n if (rotated) {\r\n const objectKind = this.getSelectedObjectKind(object);\r\n this.selectedDesignObject = object;\r\n this.selectedDesignKind = objectKind;\r\n if (objectKind === 'text') {\r\n this.syncTextPanelInputFromSelection();\r\n }\r\n this.syncDimensionsToolUi();\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.centerSelectedTextInZone = function (axis) {\r\n this.centerSelectedPanelObjectInZone('text', axis);\r\n };\r\n\r\n PersonalizerModalApp.prototype.rotateSelectedTextFromPanel = function (deltaDegrees) {\r\n this.rotateSelectedPanelObjectFromPanel('text', deltaDegrees);\r\n };\r\n\r\n PersonalizerModalApp.prototype.duplicateSelectedObjectFromPanel = function () {\r\n const sourceObject = this.getSelectedObjectForKind('');\r\n if (!sourceObject || !this.canvasEngine || typeof this.canvasEngine.duplicateDesignObject !== 'function') return;\r\n\r\n this.canvasEngine\r\n .duplicateDesignObject(sourceObject)\r\n .then(\r\n function (clone) {\r\n if (!clone) return;\r\n this.selectedDesignObject = clone;\r\n this.selectedDesignKind = this.getSelectedObjectKind(clone);\r\n if (this.selectedDesignKind === 'text') {\r\n this.setControlsPanel('text');\r\n this.syncTextPanelInputFromSelection();\r\n } else if (this.selectedDesignKind === 'qr') {\r\n this.setControlsPanel('qr');\r\n this.syncQrPanelInputFromSelection();\r\n } else if (this.selectedDesignKind === 'image') {\r\n this.setControlsPanel('image');\r\n }\r\n this.syncDimensionsToolUi();\r\n }.bind(this)\r\n )\r\n .catch(function () {\r\n // Ignore duplication failures.\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.ensureTextObjectForPanel = function () {\n if (!this.isToolAllowedForCurrentView('text')) return;\r\n if (!this.canvasEngine || typeof this.canvasEngine.addText !== 'function') return;\r\n if (!this.modal) return;\r\n\r\n const existingTextObject = this.getSelectedObjectForKind('text');\n if (existingTextObject) {\r\n this.syncTextPanelInputFromSelection();\r\n return;\n }\n const placement = this.getCurrentUserPlacement();\n if (!this.canCreateInZone(placement.zoneId)) return;\n\n const input = this.modal.querySelector('[data-text-panel-input]');\n const value = input ? input.value.trim() : '';\n const newTextObject = this.canvasEngine.addText(value || 'Votre texte', placement);\r\n if (newTextObject) {\n this.selectedDesignObject = newTextObject;\n this.selectedDesignKind = 'text';\n if (this.usesSharedMarkingColor()) this.applySharedMarkingColor(this.sharedMarkingColor);\n this.syncTextPanelInputFromSelection();\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.startNewTextFromPanel = function () {\n if (!this.isToolAllowedForCurrentView('text')) return;\n if (!this.canvasEngine || typeof this.canvasEngine.addText !== 'function') return;\r\n if (!this.modal) return;\r\n\r\n const placement = this.getCurrentUserPlacement();\n if (!this.canCreateInZone(placement.zoneId)) return;\n if (this.canvasEngine && typeof this.canvasEngine.clearSelection === 'function') {\n this.canvasEngine.clearSelection();\r\n }\r\n\r\n this.selectedDesignObject = null;\r\n this.selectedDesignKind = '';\r\n\r\n const input = this.modal.querySelector('[data-text-panel-input]');\r\n if (input) input.value = '';\r\n\r\n const newTextObject = this.canvasEngine.addText('Votre texte', placement);\n if (!newTextObject) return;\r\n\r\n this.selectedDesignObject = newTextObject;\n this.selectedDesignKind = 'text';\n if (this.usesSharedMarkingColor()) this.applySharedMarkingColor(this.sharedMarkingColor);\n this.syncTextPanelInputFromSelection();\n };\r\n\r\n PersonalizerModalApp.prototype.updateSelectedTextFromPanel = function (value) {\r\n if (!this.canvasEngine || typeof this.canvasEngine.updateTextObjectValue !== 'function') return;\r\n const textObject = this.getSelectedObjectForKind('text');\r\n if (!textObject) return;\r\n\r\n const updated = this.canvasEngine.updateTextObjectValue(textObject, value);\r\n if (updated) {\r\n this.selectedDesignObject = textObject;\r\n this.selectedDesignKind = 'text';\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.updateSelectedTextStyleFromPanel = function (style) {\n if (!this.canvasEngine || typeof this.canvasEngine.updateTextObjectStyle !== 'function') return;\n const textObject = this.getSelectedObjectForKind('text');\n if (!textObject) return;\n\n const nextStyle = Object.assign({}, style || {});\n if (nextStyle.fill !== undefined && nextStyle.fill !== null && nextStyle.fill !== '') {\n nextStyle.fill = this.resolveCanvasRenderColor(nextStyle.fill);\n }\n\n const updated = this.canvasEngine.updateTextObjectStyle(textObject, nextStyle);\n if (updated) {\r\n this.selectedDesignObject = textObject;\r\n this.selectedDesignKind = 'text';\r\n this.syncTextPanelInputFromSelection();\r\n this.syncDimensionsToolUi();\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.getQrDefaultValue = function () {\n return 'https://ag-orion.com/';\n };\n\n PersonalizerModalApp.prototype.resolveCanvasRenderColor = function (value) {\n const raw = String(value || '').trim();\n if (!raw) return '#111111';\n\n const cssVariableMatch = raw.match(/^var\\(\\s*(--[^,\\s)]+)(?:\\s*,\\s*([^\\)]+))?\\s*\\)$/);\n if (cssVariableMatch && typeof window.getComputedStyle === 'function') {\n const variableName = cssVariableMatch[1];\n const fallback = String(cssVariableMatch[2] || '').trim();\n const scopes = [this.modal, document.documentElement].filter(Boolean);\n for (let index = 0; index < scopes.length; index += 1) {\n const resolved = String(window.getComputedStyle(scopes[index]).getPropertyValue(variableName) || '').trim();\n if (resolved) return this.normalizeCssColorValue(resolved) || resolved;\n }\n if (fallback) return this.normalizeCssColorValue(fallback) || fallback;\n return '#111111';\n }\n\n return this.normalizeCssColorValue(raw) || '#111111';\n };\n\n PersonalizerModalApp.prototype.generateQrCodeDataUrl = function (value, color) {\n const textValue = String(value || '').trim();\n const fillColor = this.resolveCanvasRenderColor(color);\n\r\n return new Promise(function (resolve) {\r\n if (!textValue || typeof QRCode === 'undefined') {\r\n resolve('');\r\n return;\r\n }\r\n\r\n try {\r\n const mount = document.createElement('div');\r\n mount.style.position = 'fixed';\r\n mount.style.left = '-9999px';\r\n mount.style.top = '-9999px';\r\n mount.style.width = '256px';\r\n mount.style.height = '256px';\r\n mount.style.pointerEvents = 'none';\r\n mount.style.opacity = '0';\r\n document.body.appendChild(mount);\r\n\r\n const qrCode = new QRCode(mount, {\r\n text: textValue,\r\n width: 256,\r\n height: 256,\r\n colorDark: fillColor,\r\n colorLight: '#0000',\r\n correctLevel: QRCode.CorrectLevel ? QRCode.CorrectLevel.H : undefined\r\n });\r\n\r\n const maxAttempts = 6;\r\n let attempt = 0;\r\n\r\n const cleanup = function () {\r\n if (qrCode && typeof qrCode.clear === 'function') qrCode.clear();\r\n mount.remove();\r\n };\r\n\r\n const resolveFromRenderedNode = function () {\r\n try {\r\n const canvas = mount.querySelector('canvas');\r\n if (canvas && typeof canvas.toDataURL === 'function') {\r\n resolve(canvas.toDataURL('image/png'));\r\n cleanup();\r\n return true;\r\n }\r\n\r\n const image = mount.querySelector('img');\r\n const imageSource = image ? String(image.currentSrc || image.src || '').trim() : '';\r\n if (imageSource) {\r\n resolve(imageSource);\r\n cleanup();\r\n return true;\r\n }\r\n } catch (_error) {\r\n resolve('');\r\n cleanup();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const waitForRender = function () {\r\n attempt += 1;\r\n if (resolveFromRenderedNode()) return;\r\n if (attempt >= maxAttempts) {\r\n resolve('');\r\n cleanup();\r\n return;\r\n }\r\n window.setTimeout(waitForRender, 40);\r\n };\r\n\r\n window.setTimeout(waitForRender, 20);\r\n } catch (_error) {\r\n resolve('');\r\n }\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.syncQrPanelInputFromSelection = function () {\r\n if (!this.modal) return;\r\n const qrObject = this.getSelectedObjectForKind('qr');\r\n const input = this.modal.querySelector('[data-qr-panel-input]');\r\n const colorSelect = this.modal.querySelector('[data-qr-panel-color]');\r\n\r\n if (input) {\r\n const nextValue =\r\n qrObject && !qrObject.personalizerQrUsesDefaultValue && qrObject.personalizerQrValue\r\n ? String(qrObject.personalizerQrValue)\r\n : '';\r\n if (input.value !== nextValue) input.value = nextValue;\r\n }\r\n\r\n if (colorSelect) {\r\n const nextColor = qrObject && qrObject.personalizerQrColor ? String(qrObject.personalizerQrColor) : '#111111';\r\n colorSelect.value = nextColor;\r\n colorSelect.classList.toggle('personalizer-controls__input--light', String(nextColor).toLowerCase() === '#ffffff');\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.ensureQrObjectForPanel = function () {\r\n if (!this.isToolAllowedForCurrentView('qr')) return Promise.resolve(null);\r\n if (this.getSelectedObjectForKind('qr')) {\r\n this.syncQrPanelInputFromSelection();\r\n return Promise.resolve(this.getSelectedObjectForKind('qr'));\r\n }\r\n return this.startNewQrFromPanel();\r\n };\r\n\r\n PersonalizerModalApp.prototype.startNewQrFromPanel = function () {\n if (!this.canvasEngine || typeof this.canvasEngine.addQrCode !== 'function' || !this.modal) {\n return Promise.resolve(null);\r\n }\r\n\r\n const placement = this.getCurrentUserPlacement();\n if (!this.canCreateInZone(placement.zoneId)) return Promise.resolve(null);\n if (this.canvasEngine && typeof this.canvasEngine.clearSelection === 'function') {\n this.canvasEngine.clearSelection();\r\n }\r\n\r\n this.selectedDesignObject = null;\r\n this.selectedDesignKind = '';\r\n\r\n const input = this.modal.querySelector('[data-qr-panel-input]');\r\n const colorSelect = this.modal.querySelector('[data-qr-panel-color]');\r\n const value = input ? String(input.value || '').trim() : '';\r\n const color = this.usesSharedMarkingColor()\n ? String(this.sharedMarkingColor || '#111111')\n : colorSelect ? String(colorSelect.value || '#111111') : '#111111';\n const defaultValue = this.getQrDefaultValue();\r\n const usesDefaultValue = !value && !!defaultValue;\r\n const nextValue = value || defaultValue;\r\n if (!nextValue) {\r\n this.syncQrPanelInputFromSelection();\r\n return Promise.resolve(null);\r\n }\r\n\r\n return this.generateQrCodeDataUrl(nextValue, color).then(function (dataUrl) {\n if (!dataUrl) return null;\r\n return this.canvasEngine.addQrCode(dataUrl, {\r\n value: nextValue,\r\n color: color,\r\n usesDefaultValue: usesDefaultValue,\r\n placement: placement\r\n }).then(function (newQrObject) {\r\n if (!newQrObject) return null;\r\n this.selectedDesignObject = newQrObject;\r\n this.selectedDesignKind = 'qr';\r\n this.syncQrPanelInputFromSelection();\r\n return newQrObject;\r\n }.bind(this));\r\n }.bind(this));\r\n };\r\n\r\n PersonalizerModalApp.prototype.scheduleQrObjectRefresh = function (value, color, options) {\r\n if (this.qrUpdateTimer) {\r\n window.clearTimeout(this.qrUpdateTimer);\r\n this.qrUpdateTimer = 0;\r\n }\r\n\r\n const settings = options || {};\r\n const nextValue = String(value || '').trim();\r\n const nextColor = String(color || '#111111') || '#111111';\r\n const usesDefaultValue = !!settings.usesDefaultValue;\r\n const nonce = ++this.qrRenderNonce;\r\n\r\n this.qrUpdateTimer = window.setTimeout(function () {\r\n this.qrUpdateTimer = 0;\r\n const qrObject = this.getSelectedObjectForKind('qr');\r\n if (!qrObject || !this.canvasEngine || typeof this.canvasEngine.updateQrCodeObject !== 'function') return;\r\n\r\n this.generateQrCodeDataUrl(nextValue, nextColor).then(function (dataUrl) {\r\n if (nonce !== this.qrRenderNonce || !dataUrl) return;\r\n this.canvasEngine.updateQrCodeObject(qrObject, dataUrl, {\r\n value: nextValue,\r\n color: nextColor,\r\n usesDefaultValue: usesDefaultValue\r\n }).then(function (updated) {\r\n if (!updated) return;\r\n this.selectedDesignObject = qrObject;\r\n this.selectedDesignKind = 'qr';\r\n this.syncQrPanelInputFromSelection();\r\n this.syncDimensionsToolUi();\r\n }.bind(this));\r\n }.bind(this));\r\n }.bind(this), 120);\r\n };\r\n\r\n PersonalizerModalApp.prototype.updateSelectedQrFromPanel = function (value) {\r\n const qrObject = this.getSelectedObjectForKind('qr');\r\n if (!qrObject) {\r\n if (!String(value || '').trim()) return;\r\n this.startNewQrFromPanel().then(function (created) {\r\n if (created) this.updateSelectedQrFromPanel(value);\r\n }.bind(this));\r\n return;\r\n }\r\n const colorSelect = this.modal ? this.modal.querySelector('[data-qr-panel-color]') : null;\r\n const nextColor = colorSelect ? String(colorSelect.value || '#111111') : '#111111';\r\n const typedValue = String(value || '').trim();\r\n const defaultValue = this.getQrDefaultValue();\r\n const usesDefaultValue = !typedValue && !!defaultValue;\r\n this.scheduleQrObjectRefresh(typedValue || defaultValue, nextColor, { usesDefaultValue: usesDefaultValue });\r\n };\r\n\r\n PersonalizerModalApp.prototype.updateSelectedQrStyleFromPanel = function (style) {\r\n const qrObject = this.getSelectedObjectForKind('qr');\r\n if (!qrObject || !this.modal) return;\r\n const input = this.modal.querySelector('[data-qr-panel-input]');\r\n const nextValue = input ? String(input.value || '').trim() : '';\r\n const nextColor =\r\n style && style.fill !== undefined && style.fill !== null && style.fill !== ''\r\n ? String(style.fill)\r\n : String(qrObject.personalizerQrColor || '#111111');\r\n const typedValue = String(nextValue || '').trim();\r\n const defaultValue = this.getQrDefaultValue();\r\n const usesDefaultValue = !typedValue && !!defaultValue;\r\n this.scheduleQrObjectRefresh(typedValue || defaultValue, nextColor, { usesDefaultValue: usesDefaultValue });\r\n };\r\n\r\n PersonalizerModalApp.prototype.clearSelectionForPanelSwitch = function () {\r\n const previousApplyingFlag = this.isApplyingPlacement;\r\n this.isApplyingPlacement = true;\r\n if (this.canvasEngine && typeof this.canvasEngine.clearSelection === 'function') {\r\n this.canvasEngine.clearSelection();\r\n }\r\n this.isApplyingPlacement = previousApplyingFlag;\r\n this.selectedDesignObject = null;\r\n this.selectedDesignKind = '';\r\n this.syncTextPanelInputFromSelection();\r\n this.syncQrPanelInputFromSelection();\r\n this.syncDimensionsToolUi();\r\n };\r\n\r\n PersonalizerModalApp.prototype.prepareNewImageFromPanel = function () {\n if (!this.modal) return;\n this.pendingUserPlacement = this.getCurrentUserPlacement();\n if (!this.canCreateInZone(this.pendingUserPlacement.zoneId)) {\n this.pendingUserPlacement = null;\n return;\n }\n this.setControlsPanel('image');\r\n this.renderRecentUploadedImages();\r\n };\r\n\r\n PersonalizerModalApp.prototype.getCurrentUserPlacement = function () {\r\n const zones = this.getAvailableZonesForCurrentView();\r\n const selectedZone = this.selectedZone && zones.some(function (zone) {\r\n return zone.id === this.selectedZone.id && normalizeViewId(zone.view) === normalizeViewId(this.selectedZone.view);\r\n }.bind(this)) ? this.selectedZone : (zones[0] || null);\r\n const physicalViews = this.getPhysicalViewIdsForView(this.activeView);\r\n const view = selectedZone && physicalViews.indexOf(normalizeViewId(selectedZone.view)) >= 0\r\n ? normalizeViewId(selectedZone.view)\r\n : normalizeViewId(physicalViews[0] || this.activeView);\r\n return {\r\n navigationViewId: normalizeViewId(this.activeView),\r\n targetPhysicalViewId: view,\r\n view: view,\r\n zoneId: selectedZone ? selectedZone.id : '',\r\n zone: selectedZone\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.getRecentUploadedImages = function () {\r\n try {\r\n const raw = window.localStorage ? window.localStorage.getItem(RECENT_UPLOADED_IMAGES_KEY) : '';\r\n const parsed = raw ? JSON.parse(raw) : [];\r\n if (!Array.isArray(parsed)) return [];\r\n return parsed\r\n .filter(function (item) {\r\n return item && typeof item.sourceDataUrl === 'string' && item.sourceDataUrl.indexOf('data:image/') === 0;\r\n })\r\n .slice(0, 8);\r\n } catch (error) {\r\n return [];\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.setRecentUploadedImages = function (items) {\r\n this.recentUploadedImages = Array.isArray(items) ? items.slice(0, 8) : [];\r\n try {\r\n if (window.localStorage) {\r\n window.localStorage.setItem(RECENT_UPLOADED_IMAGES_KEY, JSON.stringify(this.recentUploadedImages));\r\n }\r\n } catch (error) {\r\n this.recentUploadedImages = this.recentUploadedImages.slice(0, Math.min(3, this.recentUploadedImages.length));\r\n try {\r\n if (window.localStorage) {\r\n window.localStorage.setItem(RECENT_UPLOADED_IMAGES_KEY, JSON.stringify(this.recentUploadedImages));\r\n }\r\n } catch (storageError) {}\r\n }\r\n this.renderRecentUploadedImages();\r\n };\r\n\r\n PersonalizerModalApp.prototype.rememberUploadedImage = function (result, file) {\r\n if (!result || !result.sourceDataUrl) return;\r\n const sourceDataUrl = String(result.sourceDataUrl || '');\r\n if (sourceDataUrl.indexOf('data:image/') !== 0 || sourceDataUrl.length > 950000) return;\r\n\r\n const item = {\r\n id: 'img_' + String(Date.now()) + '_' + String(Math.floor(Math.random() * 100000)),\r\n sourceDataUrl: sourceDataUrl,\r\n mimeType: String(result.mimeType || (file && file.type) || ''),\r\n name: String(result.name || (file && file.name) || 'Image'),\r\n createdAt: Date.now()\r\n };\r\n const existing = this.getRecentUploadedImages().filter(function (cached) {\r\n return cached && cached.sourceDataUrl !== sourceDataUrl;\r\n });\r\n existing.unshift(item);\r\n this.setRecentUploadedImages(existing);\r\n };\r\n\r\n PersonalizerModalApp.prototype.renderRecentUploadedImages = function () {\r\n if (!this.modal) return;\r\n const self = this;\r\n const containers = Array.prototype.slice.call(this.modal.querySelectorAll('[data-recent-images-list]'));\r\n if (!containers.length) return;\r\n const images = this.getRecentUploadedImages();\r\n this.recentUploadedImages = images;\r\n\r\n containers.forEach(function (container) {\r\n const wrapper = container.closest('[data-recent-images]');\r\n if (wrapper) wrapper.hidden = !images.length;\r\n container.innerHTML = images\r\n .map(function (item) {\r\n const id = String(item.id || '');\r\n const name = String(item.name || 'Image');\r\n const src = String(item.sourceDataUrl || '');\r\n return (\r\n ''\r\n );\r\n })\r\n .join('');\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.focusInControls = function (selector) {\r\n if (!this.modal || !selector) return;\r\n const target = this.modal.querySelector(selector);\r\n if (!target) return;\r\n if (typeof target.scrollIntoView === 'function') {\r\n target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });\r\n }\r\n if (typeof target.focus === 'function') {\r\n try {\r\n target.focus({ preventScroll: true });\r\n } catch (error) {\r\n target.focus();\r\n }\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.openColorDropdownFromMobile = function () {\r\n if (!this.modal) return;\r\n const isMobile = window.matchMedia && window.matchMedia('(max-width: 989px)').matches;\r\n if (isMobile) {\r\n this.setControlsPanel('default');\r\n this.openFlyout('product-color');\r\n this.focusInControls('[data-colors-mobile] [data-color-option][aria-selected=\"true\"]');\r\n return;\r\n }\r\n\r\n const toggle = isMobile\r\n ? this.modal.querySelector('[data-colors-mobile] [data-color-dropdown-toggle]')\r\n : this.modal.querySelector('[data-color-dropdown-toggle]');\r\n if (!toggle) return;\r\n const dropdown = toggle.closest('[data-color-dropdown]');\r\n if (!dropdown) return;\r\n\r\n this.modal.querySelectorAll('[data-color-dropdown].is-open').forEach(function (node) {\r\n if (node !== dropdown) {\r\n node.classList.remove('is-open');\r\n const otherToggle = node.querySelector('[data-color-dropdown-toggle]');\r\n if (otherToggle) otherToggle.setAttribute('aria-expanded', 'false');\r\n }\r\n });\r\n dropdown.classList.add('is-open');\r\n toggle.setAttribute('aria-expanded', 'true');\r\n this.focusInControls(\r\n isMobile ? '[data-colors-mobile] [data-color-dropdown-toggle]' : '[data-color-dropdown-toggle]'\r\n );\r\n };\r\n\r\n PersonalizerModalApp.prototype.openTextInputFlyout = function () {\r\n if (!this.modal) return;\r\n const isMobileTextMode = window.matchMedia && window.matchMedia('(max-width: 989px)').matches;\r\n if (isMobileTextMode) {\r\n if (!this.getSelectedObjectForKind('text')) {\r\n this.clearSelectionForPanelSwitch();\r\n }\r\n this.setControlsPanel('text');\r\n } else if (this.activeControlsPanel !== 'text') {\r\n this.clearSelectionForPanelSwitch();\r\n this.setControlsPanel('text');\r\n this.startNewTextFromPanel();\r\n } else {\r\n this.ensureTextObjectForPanel();\r\n }\r\n\r\n this.syncTextPanelInputFromSelection();\r\n const sourceInput = this.modal.querySelector('[data-text-panel-input]');\r\n const flyoutInput = this.modal.querySelector('[data-mobile-text-input]');\r\n if (flyoutInput) {\r\n flyoutInput.value = sourceInput ? String(sourceInput.value || '') : '';\r\n }\r\n this.openFlyout('text-input');\r\n this.focusInControls('[data-mobile-text-input]');\r\n };\r\n\r\n PersonalizerModalApp.prototype.applyTextInputFlyoutValue = function () {\r\n if (!this.modal) return;\r\n const flyoutInput = this.modal.querySelector('[data-mobile-text-input]');\r\n if (!flyoutInput) return;\r\n const nextValue = String(flyoutInput.value || '');\r\n\r\n const isMobileTextMode = window.matchMedia && window.matchMedia('(max-width: 989px)').matches;\r\n if (isMobileTextMode) {\r\n if (!this.getSelectedObjectForKind('text')) {\r\n this.clearSelectionForPanelSwitch();\r\n this.startNewTextFromPanel();\r\n } else {\r\n this.ensureTextObjectForPanel();\r\n }\r\n this.setControlsPanel('text');\r\n } else if (this.activeControlsPanel !== 'text') {\r\n this.clearSelectionForPanelSwitch();\r\n this.setControlsPanel('text');\r\n this.startNewTextFromPanel();\r\n } else {\r\n this.ensureTextObjectForPanel();\r\n }\r\n\r\n this.updateSelectedTextFromPanel(nextValue);\r\n const sourceInput = this.modal.querySelector('[data-text-panel-input]');\r\n if (sourceInput) sourceInput.value = nextValue;\r\n this.closeFlyout();\r\n };\r\n\r\n PersonalizerModalApp.prototype.syncMobileTextSelectOptions = function () {\r\n if (!this.modal) return;\r\n const fontSource = this.modal.querySelector('[data-text-panel-font]');\r\n const colorSource = this.modal.querySelector('[data-text-panel-color]');\r\n const mobileFont = this.modal.querySelector('[data-mobile-text-font-select]');\r\n const mobileColor = this.modal.querySelector('[data-mobile-text-color-select]');\r\n\r\n if (fontSource && mobileFont) {\r\n mobileFont.innerHTML = fontSource.innerHTML;\r\n mobileFont.value = fontSource.value;\r\n }\r\n if (colorSource && mobileColor) {\r\n mobileColor.innerHTML = colorSource.innerHTML;\r\n mobileColor.value = colorSource.value;\r\n mobileColor.classList.toggle('personalizer-controls__input--light', String(mobileColor.value || '').toLowerCase() === '#ffffff');\r\n }\r\n this.renderMobileTextOptionLists();\r\n };\r\n\r\n PersonalizerModalApp.prototype.renderMobileTextOptionLists = function () {\r\n if (!this.modal) return;\r\n\r\n const fontSelect = this.modal.querySelector('[data-mobile-text-font-select]');\r\n const colorSelect = this.modal.querySelector('[data-mobile-text-color-select]');\r\n const fontContainer = this.modal.querySelector('[data-mobile-text-font-options]');\r\n const colorContainer = this.modal.querySelector('[data-mobile-text-color-options]');\r\n\r\n if (fontSelect && fontContainer) {\r\n const selectedFont = String(fontSelect.value || '');\r\n fontContainer.innerHTML = Array.from(fontSelect.options || [])\r\n .map(\r\n function (option) {\r\n const value = String(option.value || '');\r\n const label = String(option.textContent || value || '').trim();\r\n if (!value) return '';\r\n const selected = value === selectedFont;\r\n return (\r\n ''\r\n );\r\n }.bind(this)\r\n )\r\n .join('');\r\n }\r\n\r\n if (colorSelect && colorContainer) {\r\n const selectedColor = String(colorSelect.value || '').toLowerCase();\r\n colorContainer.innerHTML = Array.from(colorSelect.options || [])\r\n .map(\r\n function (option) {\r\n const value = String(option.value || '');\r\n const label = String(option.textContent || value || '').trim();\r\n if (!value) return '';\r\n const selected = value.toLowerCase() === selectedColor;\r\n const swatch = this.getColorSwatchHex(label || value);\r\n const textColor = this.getContrastingTextColor(swatch);\r\n const isLight = this.isLightColor(swatch);\r\n return (\r\n ''\r\n );\r\n }.bind(this)\r\n )\r\n .join('');\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.openTextFontFlyout = function () {\r\n if (!this.modal) return;\r\n const isMobileTextMode = window.matchMedia && window.matchMedia('(max-width: 989px)').matches;\r\n if (isMobileTextMode) {\r\n if (!this.getSelectedObjectForKind('text')) {\r\n this.clearSelectionForPanelSwitch();\r\n }\r\n } else if (!this.getSelectedObjectForKind('text')) {\r\n this.clearSelectionForPanelSwitch();\r\n this.startNewTextFromPanel();\r\n } else {\r\n this.ensureTextObjectForPanel();\r\n }\r\n this.setControlsPanel('text');\r\n this.syncTextPanelInputFromSelection();\r\n this.syncMobileTextSelectOptions();\r\n this.openFlyout('text-font');\r\n this.focusInControls('[data-mobile-text-font-options]');\r\n };\r\n\r\n PersonalizerModalApp.prototype.openTextColorFlyout = function () {\r\n if (!this.modal) return;\r\n const isMobileTextMode = window.matchMedia && window.matchMedia('(max-width: 989px)').matches;\r\n if (isMobileTextMode) {\r\n if (!this.getSelectedObjectForKind('text')) {\r\n this.clearSelectionForPanelSwitch();\r\n }\r\n } else if (!this.getSelectedObjectForKind('text')) {\r\n this.clearSelectionForPanelSwitch();\r\n this.startNewTextFromPanel();\r\n } else {\r\n this.ensureTextObjectForPanel();\r\n }\r\n this.setControlsPanel('text');\r\n this.syncTextPanelInputFromSelection();\r\n this.syncMobileTextSelectOptions();\r\n this.openFlyout('text-color');\r\n this.focusInControls('[data-mobile-text-color-options]');\r\n };\r\n\r\n PersonalizerModalApp.prototype.openTextFormatFlyout = function () {\r\n if (!this.modal) return;\r\n const isMobileTextMode = window.matchMedia && window.matchMedia('(max-width: 989px)').matches;\r\n if (isMobileTextMode) {\r\n if (!this.getSelectedObjectForKind('text')) {\r\n this.clearSelectionForPanelSwitch();\r\n }\r\n } else if (!this.getSelectedObjectForKind('text')) {\r\n this.clearSelectionForPanelSwitch();\r\n this.startNewTextFromPanel();\r\n } else {\r\n this.ensureTextObjectForPanel();\r\n }\r\n this.setControlsPanel('text');\r\n this.syncTextPanelInputFromSelection();\r\n\r\n const desktopRange = this.modal.querySelector('[data-text-panel-size]');\r\n const mobileRange = this.modal.querySelector('[data-mobile-text-size]');\r\n if (desktopRange && mobileRange) {\r\n mobileRange.value = desktopRange.value;\r\n }\r\n\r\n this.openFlyout('text-format');\r\n this.focusInControls('[data-mobile-text-size]');\r\n };\r\n\r\n PersonalizerModalApp.prototype.openImageUploadFlyout = function () {\r\n if (!this.modal) return;\r\n this.renderRecentUploadedImages();\r\n if (window.matchMedia && window.matchMedia('(max-width: 989px)').matches) {\r\n this.setControlsPanel('default');\r\n }\r\n this.openFlyout('image-upload');\r\n };\r\n\r\n PersonalizerModalApp.prototype.openImageAlignFlyout = function () {\r\n if (!this.modal) return;\r\n if (!this.getSelectedObjectForKind('image')) return;\r\n this.setControlsPanel('image');\r\n this.openFlyout('image-align');\r\n };\r\n\r\n PersonalizerModalApp.prototype.applyPlacementToActivePanelObject = function () {\r\n if (!this.canvasEngine || !this.selectedZone) return;\r\n if (typeof this.canvasEngine.getActiveDesignObject !== 'function') return;\r\n if (typeof this.canvasEngine.reassignObjectToPlacement !== 'function') return;\r\n\r\n const expectedKind = this.getExpectedPanelObjectKind();\r\n if (!expectedKind) return;\r\n\r\n const object = this.getSelectedObjectForKind(expectedKind);\r\n if (!object) return;\r\n if (!this.isZoneAllowedForObject(this.selectedZone.id, this.activeView, object)) return;\r\n const previousObjectView = object && object.view ? String(object.view).toLowerCase() : this.activeView;\r\n\r\n const wasApplyingPlacement = this.isApplyingPlacement;\r\n this.isApplyingPlacement = true;\r\n const moved = this.canvasEngine.reassignObjectToPlacement(object, this.selectedZone, this.activeView);\r\n this.isApplyingPlacement = wasApplyingPlacement;\r\n if (moved) {\r\n this.selectedDesignObject = object;\r\n this.selectedDesignKind = expectedKind;\r\n this.applyActiveZoneToCanvas();\r\n if (expectedKind === 'text') this.syncTextPanelInputFromSelection();\r\n if (expectedKind === 'qr') this.syncQrPanelInputFromSelection();\r\n if (typeof this.canvasEngine.selectDesignObject === 'function') {\r\n this.canvasEngine.selectDesignObject(object);\r\n }\r\n this.renderPanelPlacementControls();\r\n if (previousObjectView !== this.activeView) {\r\n this.viewThumbnails[previousObjectView] = '';\r\n this.viewThumbnailStateKeys[previousObjectView] = '';\r\n }\r\n this.scheduleActiveViewThumbnailCapture(90);\r\n this.syncDimensionsToolUi();\r\n }\r\n };\r\n\r\n PersonalizerModalApp.prototype.getTechniqueAvailableViews = function () {\r\n if (this.isPrintMode() && this.printDocument && Array.isArray(this.printDocument.views) && this.printDocument.views.length) {\r\n return this.printDocument.views.map(function (view) { return normalizeViewId(view.id); });\r\n }\r\n const filteredZones = this.getTechniqueFilteredZones();\r\n const views = [];\r\n filteredZones.forEach(function (zone) {\r\n const view = normalizeViewId(zone && zone.view);\r\n if (views.indexOf(view) < 0) views.push(view);\r\n });\r\n if (!views.length) views.push('front');\r\n return views;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getViewLabel = function (view) {\n return this.getViewDisplay(view).label;\n };\n\n PersonalizerModalApp.prototype.canCreateInZone = function (zoneId) {\n const maxActiveZones = Number(this.customizationRules && this.customizationRules.maxActiveZones) || 0;\n if (maxActiveZones <= 0 || !this.canvasEngine || typeof this.canvasEngine.getDesignObjects !== 'function') return true;\n const targetZoneId = String(zoneId || '');\n const occupiedZoneIds = Array.from(new Set(\n this.canvasEngine.getDesignObjects()\n .map(function (object) { return String(object && object.zoneId || ''); })\n .filter(Boolean)\n ));\n return occupiedZoneIds.length < maxActiveZones || occupiedZoneIds.indexOf(targetZoneId) >= 0;\n };\n\n PersonalizerModalApp.prototype.normalizeViewDisplayConfig = function (input) {\n let config = input;\n if (typeof config === 'string') {\n try { config = JSON.parse(config); } catch (error) { return {}; }\n }\n if (!config || typeof config !== 'object' || Array.isArray(config)) return {};\n\n return ['front', 'back'].reduce(function (result, viewId) {\n const source = config[viewId];\n if (!source || typeof source !== 'object' || Array.isArray(source)) return result;\n const label = typeof source.label === 'string' ? source.label.trim() : '';\n const icon = typeof source.icon === 'string' ? source.icon.trim().toLowerCase() : '';\n const normalized = {};\n if (label) normalized.label = label;\n if (this.isKnownViewIcon(icon)) normalized.icon = icon;\n if (Object.keys(normalized).length) result[viewId] = normalized;\n return result;\n }.bind(this), {});\n };\n\n PersonalizerModalApp.prototype.isKnownViewIcon = function (icon) {\n return ['front-default', 'back-default', 'pen-clip', 'pen-side'].indexOf(String(icon || '')) >= 0;\n };\n\n PersonalizerModalApp.prototype.getViewDisplay = function (view) {\n const viewId = normalizeViewId(view);\n let fallbackLabel = viewId === 'back' ? 'Dos ou col' : 'Avant';\n if (this.isPrintMode()) {\n const configuredViews = this.printDocument\n ? (Array.isArray(this.printDocument.views) ? this.printDocument.views : []).concat(\n Array.isArray(this.printDocument.physicalViews) ? this.printDocument.physicalViews : []\n )\n : [];\n const configuredView = configuredViews.find(function (item) { return item.id === viewId; }) || null;\n fallbackLabel = configuredView ? configuredView.label : (viewId === 'back' ? 'Verso' : 'Recto');\n }\n const custom = this.viewDisplayConfig && this.viewDisplayConfig[viewId] || {};\n const label = custom.label || fallbackLabel;\n const zoneLabel = custom.label\n ? 'Zone ' + label.charAt(0).toLocaleLowerCase('fr-FR') + label.slice(1)\n : (viewId === 'back' ? 'Zone dos / col' : 'Zone avant');\n return {\n id: viewId,\n label: label,\n zoneLabel: zoneLabel,\n icon: custom.icon || (viewId === 'back' ? 'back-default' : 'front-default')\n };\n };\n\n PersonalizerModalApp.prototype.getCustomViewIconMarkup = function (icon) {\n if (icon === 'pen-clip') {\n return '';\n }\n if (icon === 'pen-side') {\n return '';\n }\n return '';\n };\n\n PersonalizerModalApp.prototype.getViewIconMarkup = function (view) {\n const display = this.getViewDisplay(view);\n return this.getCustomViewIconMarkup(display.icon) || this.getZonePlacementIconMarkup(null, display.id, true);\n };\n\n PersonalizerModalApp.prototype.getCurrentPrintViewConfig = function () {\r\n if (!this.isPrintMode() || !this.printDocument || !Array.isArray(this.printDocument.views)) return null;\r\n const viewId = normalizeViewId(this.activeView);\r\n return this.printDocument.views.find(function (view) { return view.id === viewId; }) || null;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getPhysicalViewIdsForView = function (view) {\r\n const viewId = normalizeViewId(view || this.activeView);\r\n if (!this.isPrintMode() || !this.printDocument || !Array.isArray(this.printDocument.views)) return [viewId];\r\n const configured = this.printDocument.views.find(function (item) { return item.id === viewId; });\r\n if (!configured || configured.type !== 'spread' || !Array.isArray(configured.pages)) return [viewId];\r\n const pageIds = configured.pages.map(function (page) { return normalizeViewId(page && page.id); }).filter(Boolean);\r\n return pageIds.length ? pageIds : [viewId];\r\n };\r\n\r\n PersonalizerModalApp.prototype.getNavigationViewForPhysicalView = function (view) {\r\n const viewId = normalizeViewId(view);\r\n if (!this.isPrintMode() || !this.printDocument || !Array.isArray(this.printDocument.views)) return viewId;\r\n const owner = this.printDocument.views.find(function (candidate) {\r\n if (!candidate) return false;\r\n if (candidate.id === viewId) return true;\r\n return candidate.type === 'spread' && Array.isArray(candidate.pages) && candidate.pages.some(function (page) {\r\n return normalizeViewId(page && page.id) === viewId;\r\n });\r\n });\r\n return owner ? owner.id : viewId;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getCurrentViewTools = function () {\r\n const defaults = { image: true, qr: true, text: true, background: true, template: true };\r\n const view = this.getCurrentPrintViewConfig();\r\n return view && view.tools ? Object.assign(defaults, view.tools) : defaults;\r\n };\r\n\r\n PersonalizerModalApp.prototype.isToolAllowedForCurrentView = function (tool) {\r\n if (!this.isPrintMode()) return true;\r\n const tools = this.getCurrentViewTools();\r\n return tools[String(tool || '')] !== false;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getToolForAction = function (action) {\r\n const value = String(action || '');\r\n if (/template/.test(value)) return 'template';\r\n if (/background/.test(value)) return 'background';\r\n if (/qr/.test(value)) return 'qr';\r\n if (/text/.test(value)) return 'text';\r\n if (/image|upload/.test(value)) return 'image';\r\n return '';\r\n };\r\n\r\n PersonalizerModalApp.prototype.isActionAllowedForCurrentView = function (action) {\r\n const tool = this.getToolForAction(action);\r\n return !tool || this.isToolAllowedForCurrentView(tool);\r\n };\r\n\r\n PersonalizerModalApp.prototype.syncCurrentViewToolsUi = function () {\r\n if (!this.modal || !this.isPrintMode()) return;\r\n const tools = this.getCurrentViewTools();\r\n const selectors = {\r\n image: '[data-action=\"open-image-panel\"], [data-action=\"open-image-picker\"], [data-action=\"open-image-upload-flyout\"]',\r\n qr: '[data-action=\"open-qr-panel\"]',\r\n text: '[data-action=\"open-text-panel\"]',\r\n background: '[data-action=\"open-background-panel\"]',\r\n template: '[data-action=\"open-template-panel\"]'\r\n };\r\n Object.keys(selectors).forEach(function (tool) {\r\n this.modal.querySelectorAll(selectors[tool]).forEach(function (node) {\r\n node.hidden = tools[tool] === false;\r\n node.disabled = tools[tool] === false;\r\n node.setAttribute('aria-disabled', tools[tool] === false ? 'true' : 'false');\r\n });\r\n }, this);\r\n const activeTool = this.activeControlsPanel === 'template' ? 'template' : this.activeControlsPanel;\r\n if (tools[activeTool] === false) this.setControlsPanel('default');\r\n if (this.debugEnabled && typeof console !== 'undefined') console.log('[Print] current view tools:', tools);\r\n };\r\n\r\n PersonalizerModalApp.prototype.renderPanelPlacementControls = function () {\r\n if (!this.modal) return;\r\n\r\n const panelName = this.activeControlsPanel;\r\n if (panelName !== 'text' && panelName !== 'qr' && panelName !== 'image') return;\r\n\r\n const zoneContainers = this.modal.querySelectorAll(\r\n '[data-' + panelName + '-panel-zones], [data-' + panelName + '-panel-zones-overlay]'\r\n );\r\n const viewContainers = this.modal.querySelectorAll(\r\n '[data-' + panelName + '-panel-views], [data-' + panelName + '-panel-views-overlay]'\r\n );\r\n if (!zoneContainers.length || !viewContainers.length) return;\r\n\r\n const activeZoneId = this.selectedZone ? this.selectedZone.id : '';\r\n const currentView = this.activeView || 'front';\r\n const zones = this.getAvailableZonesForCurrentView();\r\n\r\n let zonesHtml = 'Aucune zone disponible.
';\r\n if (zones.length) {\r\n const panelObject = this.getPanelObjectForKind(panelName);\r\n zonesHtml = zones\r\n .map(function (zone) {\r\n const active = zone.id === activeZoneId;\r\n const canSelectZone = !panelObject || this.isZoneAllowedForObject(zone.id, currentView, panelObject);\r\n const placementIcon = this.getZonePlacementIconMarkup(zone, currentView);\r\n const placementThumb = this.isPrintMode()\r\n ? ''\r\n : '' +\r\n placementIcon +\r\n '';\r\n return (\r\n ''\r\n );\r\n }.bind(this))\r\n .join('');\r\n }\r\n zoneContainers.forEach(function (container) {\r\n container.innerHTML = zonesHtml;\r\n });\r\n\r\n const availableViews = this.getTechniqueAvailableViews();\r\n const viewsHtml = availableViews\r\n .map(\r\n function (view) {\r\n const label = this.getViewLabel(view);\r\n const active = view === currentView;\r\n const placementIcon = this.getViewIconMarkup(view);\n const placementThumb = this.isPrintMode()\r\n ? ''\r\n : '' +\r\n placementIcon +\r\n '';\r\n return (\r\n ''\r\n );\r\n }.bind(this)\r\n )\r\n .join('');\r\n viewContainers.forEach(function (container) {\r\n container.innerHTML = viewsHtml;\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.getZonePlacementIconMarkup = function (zone, view) {\n const normalizedView = normalizeViewId(view);\n const customIcon = arguments[2] === true ? '' : this.getCustomViewIconMarkup(this.getViewDisplay(normalizedView).icon);\n if (customIcon) return customIcon;\n const zoneKey = String(\r\n (zone && (zone.label || zone.id)) || ''\r\n ).toLowerCase();\r\n const isCollar = /col|nuque|collar/.test(zoneKey);\r\n const isHeart = /coeur|c\u0153ur|heart/.test(zoneKey);\r\n const isAntiHeart = /anti/.test(zoneKey) && isHeart;\r\n const isA3 = /a3/.test(zoneKey);\r\n const isA4 = /a4/.test(zoneKey);\r\n const isLarge = /grand|large|face|dos|avant|front|back/.test(zoneKey);\r\n let marker = '';\r\n\r\n if (isCollar) {\r\n marker = 'Aucune technique disponible.
';\r\n });\r\n return;\r\n }\r\n\r\n const html =\r\n '';\r\n containers.forEach(function (container) {\r\n container.innerHTML = html;\r\n });\r\n };\r\n\r\n PersonalizerModalApp.prototype.renderPositionPresets = function () {\r\n const container = this.modal.querySelector('[data-position-presets]');\r\n const zones = this.getAvailableZonesForCurrentView();\r\n if (!zones.length) {\r\n this.selectedZone = null;\r\n if (container) container.innerHTML = '';\r\n return;\r\n }\r\n\r\n if (!this.selectedZone || !zones.some(function (zone) { return zone.id === this.selectedZone.id; }.bind(this))) {\r\n this.selectedZone = zones[0];\r\n }\r\n\r\n if (!container) return;\r\n\r\n const uniqueZones = zones.filter(function (zone, index, list) {\r\n return list.findIndex(function (candidate) { return candidate.id === zone.id; }) === index;\r\n });\r\n\r\n container.innerHTML = uniqueZones\r\n .map(function (zone) {\r\n const active = this.selectedZone && this.selectedZone.id === zone.id;\r\n return (\r\n ''\r\n );\r\n }.bind(this))\r\n .join('');\r\n };\r\n\r\n PersonalizerModalApp.prototype.normalizeCssColorValue = function (value) {\r\n const raw = String(value || '').trim();\r\n if (!raw) return '';\r\n if (/^[0-9a-fA-F]{3}$/.test(raw) || /^[0-9a-fA-F]{4}$/.test(raw) || /^[0-9a-fA-F]{6}$/.test(raw) || /^[0-9a-fA-F]{8}$/.test(raw)) {\r\n return '#' + raw;\r\n }\r\n if (/^#[0-9a-fA-F]{3}$/.test(raw) || /^#[0-9a-fA-F]{4}$/.test(raw) || /^#[0-9a-fA-F]{6}$/.test(raw) || /^#[0-9a-fA-F]{8}$/.test(raw)) {\r\n return raw;\r\n }\r\n if (window.CSS && typeof window.CSS.supports === 'function' && window.CSS.supports('color', raw)) {\r\n return raw;\r\n }\r\n return '';\r\n };\r\n\r\n PersonalizerModalApp.prototype.getTextColorOptionDescriptor = function (value) {\r\n const colorSelect = this.modal ? this.modal.querySelector('[data-text-panel-color]') : null;\r\n const options = Array.from(colorSelect && colorSelect.options ? colorSelect.options : []).filter(function (option) {\r\n return String(option.value || '').trim();\r\n });\r\n if (!options.length) {\r\n return {\r\n value: String(value || '').trim(),\r\n label: String(value || '').trim()\r\n };\r\n }\r\n\r\n const fallbackOption =\r\n options.find(function (option) {\r\n return String(option.value || '').trim().toLowerCase() === '#111111';\r\n }) || options[0];\r\n\r\n const normalized = this.normalizeCssColorValue(value);\r\n if (!normalized) {\r\n return {\r\n value: String(fallbackOption.value || '').trim(),\r\n label: String(fallbackOption.textContent || fallbackOption.label || fallbackOption.value || '').trim()\r\n };\r\n }\r\n\r\n const exact = options.find(function (option) {\r\n return String(option.value || '').trim().toLowerCase() === String(normalized).toLowerCase();\r\n });\r\n if (exact) {\r\n return {\r\n value: String(exact.value || '').trim(),\r\n label: String(exact.textContent || exact.label || exact.value || '').trim()\r\n };\r\n }\r\n\r\n const sourceChannels = this.getColorRgbChannels(normalized);\r\n if (!sourceChannels) {\r\n return {\r\n value: String(fallbackOption.value || '').trim(),\r\n label: String(fallbackOption.textContent || fallbackOption.label || fallbackOption.value || '').trim()\r\n };\r\n }\r\n\r\n let bestOption = fallbackOption;\r\n let bestDistance = Number.POSITIVE_INFINITY;\r\n options.forEach(\r\n function (option) {\r\n const optionChannels = this.getColorRgbChannels(option.value);\r\n if (!optionChannels) return;\r\n const distance =\r\n Math.abs(sourceChannels.r - optionChannels.r) +\r\n Math.abs(sourceChannels.g - optionChannels.g) +\r\n Math.abs(sourceChannels.b - optionChannels.b);\r\n if (distance < bestDistance) {\r\n bestDistance = distance;\r\n bestOption = option;\r\n }\r\n }.bind(this)\r\n );\r\n\r\n return {\r\n value: String(bestOption.value || '').trim(),\r\n label: String(bestOption.textContent || bestOption.label || bestOption.value || '').trim()\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.getColorRgbChannels = function (colorValue) {\r\n const normalizedColor = this.normalizeCssColorValue(colorValue);\r\n if (!normalizedColor) return null;\r\n\r\n const parserCanvas = this._personalizerColorParserCanvas || document.createElement('canvas');\r\n this._personalizerColorParserCanvas = parserCanvas;\r\n const context = parserCanvas.getContext('2d');\r\n if (!context) return null;\r\n\r\n context.fillStyle = '#000000';\r\n context.fillStyle = normalizedColor;\r\n const parsed = String(context.fillStyle || '');\r\n if (!parsed) return null;\r\n\r\n if (parsed.charAt(0) === '#') {\r\n let hex = parsed.slice(1);\r\n if (hex.length === 3 || hex.length === 4) {\r\n hex = hex\r\n .split('')\r\n .slice(0, 3)\r\n .map(function (char) {\r\n return char + char;\r\n })\r\n .join('');\r\n } else if (hex.length === 8) {\r\n hex = hex.slice(0, 6);\r\n }\r\n if (hex.length === 6 && /^[0-9a-fA-F]{6}$/.test(hex)) {\r\n return {\r\n r: parseInt(hex.slice(0, 2), 16),\r\n g: parseInt(hex.slice(2, 4), 16),\r\n b: parseInt(hex.slice(4, 6), 16)\r\n };\r\n }\r\n return null;\r\n }\r\n\r\n const rgbMatch = parsed.match(/^rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/i);\r\n if (!rgbMatch) return null;\r\n return {\r\n r: Math.max(0, Math.min(255, Number(rgbMatch[1]) || 0)),\r\n g: Math.max(0, Math.min(255, Number(rgbMatch[2]) || 0)),\r\n b: Math.max(0, Math.min(255, Number(rgbMatch[3]) || 0))\r\n };\r\n };\r\n\r\n PersonalizerModalApp.prototype.isLightColor = function (colorValue) {\r\n const channels = this.getColorRgbChannels(colorValue);\r\n if (!channels) return false;\r\n const luminance = (0.299 * channels.r + 0.587 * channels.g + 0.114 * channels.b) / 255;\r\n return luminance > 0.68;\r\n };\r\n\r\n PersonalizerModalApp.prototype.getColorSwatchHex = function (colorName) {\r\n const normalizeKey = function (value) {\r\n return String(value || '')\r\n .trim()\r\n .toLowerCase()\r\n .normalize('NFD')\r\n .replace(/[\\u0300-\\u036f]/g, '')\r\n .replace(/\\s+/g, ' ')\r\n .replace(/[^a-z0-9 ]/g, '');\r\n };\r\n\r\n const key = normalizeKey(colorName);\r\n const colorMatch = Array.isArray(this.colors)\r\n ? this.colors.find(function (item) {\r\n return normalizeKey(item && item.name) === key;\r\n })\r\n : null;\r\n const matchedColor = this.normalizeCssColorValue(colorMatch && colorMatch.swatchHex);\r\n if (matchedColor) {\r\n return matchedColor;\r\n }\r\n\r\n const variantSwatchMatch = Array.isArray(this.variantColorSwatches)\r\n ? this.variantColorSwatches.find(\r\n function (item) {\r\n return normalizeKey(item && item.name) === key;\r\n }.bind(this)\r\n )\r\n : null;\r\n const variantSwatchColor = this.normalizeCssColorValue(variantSwatchMatch && variantSwatchMatch.swatchHex);\r\n if (variantSwatchColor) {\r\n return variantSwatchColor;\r\n }\r\n\r\n const palette = {\r\n blanc: '#ffffff',\r\n white: '#ffffff',\r\n beige: '#e5d2a5',\r\n ecru: '#ede3c8',\r\n 'ecru naturel': '#ede3c8',\r\n naturel: '#e8dcc1',\r\n natural: '#e8dcc1',\r\n sable: '#d7c39a',\r\n sand: '#d7c39a',\r\n creme: '#f2ead2',\r\n cream: '#f2ead2',\r\n noir: '#111111',\r\n black: '#111111',\r\n bleu: '#1e5db8',\r\n blue: '#1e5db8',\r\n rouge: '#c82a2a',\r\n red: '#c82a2a',\r\n vert: '#2f8a3f',\r\n green: '#2f8a3f',\r\n jaune: '#e9ba23',\r\n yellow: '#e9ba23',\r\n gris: '#8c8c8c',\r\n 'gris acier': '#7c8792',\r\n grey: '#8c8c8c',\r\n gray: '#8c8c8c',\r\n fumee: '#6f747b',\r\n 'fumee foncee': '#5f656d',\r\n fum\u00E9e: '#6f747b',\r\n anthracite: '#4a4f57',\r\n marine: '#1c2f5f',\r\n navy: '#1c2f5f'\r\n };\r\n const paletteColor = palette[key] || '';\r\n if (paletteColor) return paletteColor;\r\n\r\n const directColor = this.normalizeCssColorValue(colorName);\r\n return directColor || '#111111';\r\n };\r\n\r\n PersonalizerModalApp.prototype.getContrastingTextColor = function (hexColor) {\n return this.isLightColor(hexColor) ? '#111111' : '#ffffff';\n };\n\n PersonalizerModalApp.prototype.usesSharedMarkingColor = function () {\n return !!(\n this.selectedTechnique &&\n this.selectedTechnique.colorMode === 'mono' &&\n this.selectedTechnique.sharedMarkingColor === true\n );\n };\n\n PersonalizerModalApp.prototype.applySharedMarkingColor = function (color) {\n if (!this.usesSharedMarkingColor()) return Promise.resolve(false);\n const nextColor = this.normalizeCssColorValue(color) || '#111111';\n const renderColor = this.resolveCanvasRenderColor(nextColor);\n this.sharedMarkingColor = nextColor;\n if (this.modal) {\n this.modal.querySelectorAll('[data-text-panel-color], [data-qr-panel-color], [data-mobile-text-color-select]').forEach(function (select) {\n if (Array.from(select.options || []).some(function (option) { return String(option.value).toLowerCase() === nextColor.toLowerCase(); })) {\n select.value = nextColor;\n }\n });\n }\n if (!this.canvasEngine || typeof this.canvasEngine.getDesignObjects !== 'function') return Promise.resolve(false);\n const updates = this.canvasEngine.getDesignObjects().map(function (object) {\n const kind = this.getSelectedObjectKind(object);\n if (kind === 'text' && typeof this.canvasEngine.updateTextObjectStyle === 'function') {\n this.canvasEngine.updateTextObjectStyle(object, { fill: renderColor });\n return Promise.resolve(true);\n }\n if (kind === 'image' && typeof this.canvasEngine.applyMonochromeColorToImage === 'function') {\n return this.canvasEngine.applyMonochromeColorToImage(object, renderColor);\n }\n if (kind === 'qr' && typeof this.canvasEngine.updateQrCodeObject === 'function') {\n const value = String(object.personalizerQrValue || this.getQrDefaultValue());\n return this.generateQrCodeDataUrl(value, renderColor).then(function (source) {\n if (!source) return false;\n return this.canvasEngine.updateQrCodeObject(object, source, {\n value: value,\n color: nextColor,\n usesDefaultValue: !!object.personalizerQrUsesDefaultValue\n });\n }.bind(this));\n }\n return Promise.resolve(false);\n }.bind(this));\n return Promise.all(updates).then(function () { return true; });\n };\n\r\n PersonalizerModalApp.prototype.renderColors = function () {\r\n const wrapper = this.modal.querySelector('[data-colors-wrapper]');\r\n const desktopContainer = this.modal.querySelector('[data-colors]');\r\n const mobileContainer = this.modal.querySelector('[data-colors-mobile]');\r\n if (!wrapper || (!desktopContainer && !mobileContainer)) return;\r\n\r\n if (!this.colors.length) {\r\n wrapper.style.display = 'none';\r\n if (desktopContainer) desktopContainer.innerHTML = '';\r\n if (mobileContainer) mobileContainer.innerHTML = '';\r\n return;\r\n }\r\n\r\n wrapper.style.display = '';\r\n const activeColor = this.activeColorName || (this.colors[0] && this.colors[0].name) || '';\r\n const activeHex = this.getColorSwatchHex(activeColor);\r\n const activeTextColor = this.getContrastingTextColor(activeHex);\r\n const activeIsWhite = this.isLightColor(activeHex);\r\n this.debugColorState('render-colors', {\r\n activeColor: activeColor,\r\n activeHex: activeHex,\r\n normalizedRows: this.colors.map(\r\n function (item) {\r\n const name = String(item && item.name ? item.name : '');\r\n return {\r\n name: name,\r\n swatchHex: item && item.swatchHex ? item.swatchHex : '',\r\n resolvedHex: this.getColorSwatchHex(name)\r\n };\r\n }.bind(this)\r\n )\r\n });\r\n const activeColorLabel = this.escapeHtml(activeColor || 'Couleur');\r\n const desktopDropdownHtml =\r\n 'Par defaut
' +\r\n '