npm - @nasser-sw/fabric - Versions diffs - 7.0.1-beta1 → 7.0.1-beta2 - Mend

@nasser-sw/fabric 7.0.1-beta1 → 7.0.1-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2509) hide show

package/dist/src/text/overlayEditor.min.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overlayEditor.min.mjs","sources":["../../../src/text/overlayEditor.ts"],"sourcesContent":["/*\r\n Canva/Polotno-style Overlay Text Editor\r\n \r\n Provides seamless inline text editing using an HTML textarea overlay\r\n * that matches canvas text positioning, styling, and transformations.\r\n /\r\n\r\nimport type { Canvas } from '../canvas/Canvas';\r\nimport type { FabricText } from '../shapes/Text/Text';\r\nimport type { IText } from '../shapes/IText/IText';\r\nimport type { Textbox } from '../shapes/Textbox';\r\nimport type { TPointerEventInfo } from '../EventTypeDefs';\r\nimport type { TMat2D } from '../typedefs';\r\nimport { transformPoint } from '../util/misc/matrix';\r\n\r\nexport interface OverlayEditorOptions {\r\n canvas: Canvas;\r\n target: FabricText \| IText \| Textbox;\r\n onCommit?: (text: string) => void;\r\n onCancel?: () => void;\r\n}\r\n\r\nexport interface ScreenTransform {\r\n translateX: number;\r\n translateY: number;\r\n scaleX: number;\r\n scaleY: number;\r\n angle: number; // in radians\r\n}\r\n\r\nexport class OverlayEditor {\r\n private canvas: Canvas;\r\n private target: FabricText \| IText \| Textbox;\r\n private container: HTMLElement;\r\n private textarea: HTMLTextAreaElement;\r\n private hostDiv: HTMLDivElement;\r\n private isDestroyed = false;\r\n private isComposing = false;\r\n private lastText: string;\r\n private onCommit?: (text: string) => void;\r\n private onCancel?: () => void;\r\n\r\n // Bound event handlers for cleanup\r\n private boundHandlers = {\r\n onInput: this.handleInput.bind(this),\r\n onKeyDown: this.handleKeyDown.bind(this),\r\n onBlur: this.handleBlur.bind(this),\r\n onCompositionStart: this.handleCompositionStart.bind(this),\r\n onCompositionEnd: this.handleCompositionEnd.bind(this),\r\n onAfterRender: this.handleAfterRender.bind(this),\r\n onMouseWheel: this.handleMouseWheel.bind(this),\r\n onFocus: this.handleFocus.bind(this),\r\n onMouseDown: this.handleMouseDown.bind(this),\r\n };\r\n\r\n constructor(options: OverlayEditorOptions) {\r\n this.canvas = options.canvas;\r\n this.target = options.target;\r\n this.onCommit = options.onCommit;\r\n this.onCancel = options.onCancel;\r\n this.lastText = this.target.text \|\| '';\r\n\r\n this.container = this.getCanvasContainer();\r\n this.createOverlayDOM();\r\n this.attachEventListeners();\r\n this.refresh();\r\n this.focusTextarea();\r\n\r\n // Note: Don't manage object cursors since IText manages all cursors in _saveEditingProps/_restoreEditingProps\r\n // The IText editing system handles hoverCursor, moveCursor, and canvas cursors properly\r\n\r\n // Note: Canvas cursors are handled by IText's _saveEditingProps/_restoreEditingProps\r\n // We don't need to save/restore them here as it would conflict with IText's restoration\r\n }\r\n\r\n /\r\n Get the container element for the overlay (parent of upperCanvasEl)\r\n /\r\n private getCanvasContainer(): HTMLElement {\r\n const upperCanvas = this.canvas.upperCanvasEl;\r\n const container = upperCanvas.parentElement;\r\n if (!container) {\r\n throw new Error('Canvas must be mounted in DOM to use overlay editing');\r\n }\r\n\r\n // Ensure the container is positioned for absolute overlay positioning\r\n container.style.position = 'relative';\r\n\r\n return container;\r\n }\r\n\r\n /\r\n Create the overlay DOM structure\r\n /\r\n private createOverlayDOM(): void {\r\n // Host div for positioning and overflow control\r\n this.hostDiv = document.createElement('div');\r\n this.hostDiv.style.position = 'absolute';\r\n this.hostDiv.style.pointerEvents = 'none';\r\n this.hostDiv.style.zIndex = '1000';\r\n this.hostDiv.style.transformOrigin = 'left top';\r\n\r\n // Textarea for actual text input\r\n this.textarea = document.createElement('textarea');\r\n this.textarea.style.position = 'absolute';\r\n this.textarea.style.left = '0';\r\n this.textarea.style.top = '0';\r\n this.textarea.style.margin = '0';\r\n this.textarea.style.resize = 'none';\r\n this.textarea.style.pointerEvents = 'auto';\r\n // Set appropriate unicodeBidi based on content and direction\r\n const hasArabicText =\r\n /[\\u0600-\\u06FF\\u0750-\\u077F\\uFB50-\\uFDFF\\uFE70-\\uFEFF]/.test(\r\n this.target.text \|\| '',\r\n );\r\n const hasLatinText = /[a-zA-Z]/.test(this.target.text \|\| '');\r\n const isLTRDirection = (this.target as any).direction === 'ltr';\r\n\r\n if (hasArabicText && hasLatinText && isLTRDirection) {\r\n // For mixed Arabic/Latin text in LTR mode, use embed for consistent line wrapping\r\n this.textarea.style.unicodeBidi = 'embed';\r\n } else if (hasArabicText && isLTRDirection) {\r\n // For Arabic text in LTR mode, use embed to preserve shaping while respecting direction\r\n this.textarea.style.unicodeBidi = 'embed';\r\n } else {\r\n // Default to plaintext for natural text flow\r\n this.textarea.style.unicodeBidi = 'plaintext';\r\n }\r\n this.textarea.style.caretColor = 'auto';\r\n\r\n // Polotno-like base\r\n this.textarea.style.border = 'none';\r\n this.textarea.style.padding = '0';\r\n this.textarea.style.background = 'transparent'; // Transparent so Fabric text shows through\r\n this.textarea.style.outline = 'none';\r\n this.textarea.style.overflow = 'hidden'; // Prevent scrollbars\r\n this.textarea.style.whiteSpace = 'pre-wrap';\r\n this.textarea.style.wordBreak = 'normal';\r\n this.textarea.style.overflowWrap = 'break-word';\r\n this.textarea.style.userSelect = 'text';\r\n this.textarea.style.textTransform = 'none';\r\n\r\n // Start visible - we'll handle transitions differently\r\n this.textarea.style.opacity = '1';\r\n\r\n // Set initial text\r\n this.textarea.value = this.target.text \|\| '';\r\n\r\n this.hostDiv.appendChild(this.textarea);\r\n document.body.appendChild(this.hostDiv);\r\n }\r\n\r\n /\r\n Attach all event listeners\r\n /\r\n private attachEventListeners(): void {\r\n // Textarea events\r\n this.textarea.addEventListener('input', this.boundHandlers.onInput);\r\n this.textarea.addEventListener('keydown', this.boundHandlers.onKeyDown);\r\n this.textarea.addEventListener('blur', this.boundHandlers.onBlur);\r\n this.textarea.addEventListener(\r\n 'compositionstart',\r\n this.boundHandlers.onCompositionStart,\r\n );\r\n this.textarea.addEventListener(\r\n 'compositionend',\r\n this.boundHandlers.onCompositionEnd,\r\n );\r\n this.textarea.addEventListener('focus', this.boundHandlers.onFocus);\r\n\r\n // Canvas events for synchronization\r\n this.canvas.on('after:render', this.boundHandlers.onAfterRender);\r\n this.canvas.on('mouse:wheel', this.boundHandlers.onMouseWheel);\r\n this.canvas.on('mouse:down', this.boundHandlers.onMouseDown);\r\n\r\n // Store original methods to detect viewport changes\r\n this.setupViewportChangeDetection();\r\n }\r\n\r\n /\r\n Remove all event listeners\r\n /\r\n private removeEventListeners(): void {\r\n this.textarea.removeEventListener('input', this.boundHandlers.onInput);\r\n this.textarea.removeEventListener('keydown', this.boundHandlers.onKeyDown);\r\n this.textarea.removeEventListener('blur', this.boundHandlers.onBlur);\r\n this.textarea.removeEventListener(\r\n 'compositionstart',\r\n this.boundHandlers.onCompositionStart,\r\n );\r\n this.textarea.removeEventListener(\r\n 'compositionend',\r\n this.boundHandlers.onCompositionEnd,\r\n );\r\n this.textarea.removeEventListener('focus', this.boundHandlers.onFocus);\r\n\r\n this.canvas.off('after:render', this.boundHandlers.onAfterRender);\r\n this.canvas.off('mouse:wheel', this.boundHandlers.onMouseWheel);\r\n this.canvas.off('mouse:down', this.boundHandlers.onMouseDown);\r\n\r\n // Restore original methods\r\n this.restoreViewportChangeDetection();\r\n }\r\n\r\n /\r\n Simple method to refresh positioning when canvas changes\r\n /\r\n private updatePosition(): void {\r\n this.applyOverlayStyle();\r\n }\r\n\r\n /\r\n Update the Fabric object bounds to match current textarea size\r\n * This ensures Fabric.js selection controls follow the growing textbox\r\n /\r\n private updateObjectBounds(): void {\r\n if (this.isDestroyed) return;\r\n\r\n const target = this.target;\r\n const zoom = this.canvas.getZoom();\r\n\r\n // Get current textbox dimensions from the host div (in canvas coordinates)\r\n const currentWidth = parseFloat(this.hostDiv.style.width) / zoom;\r\n const currentHeight = parseFloat(this.hostDiv.style.height) / zoom;\r\n\r\n // Always update height for responsive controls (especially important for line deletion)\r\n const heightDiff = Math.abs(currentHeight - target.height);\r\n const threshold = 0.5; // Lower threshold for better responsiveness to line changes\r\n\r\n if (heightDiff > threshold) {\r\n const oldHeight = target.height;\r\n target.height = currentHeight;\r\n target.setCoords(); // Update control positions\r\n\r\n // Force dirty to ensure proper re-rendering\r\n target.dirty = true;\r\n this.canvas.requestRenderAll(); // Re-render to show updated selection\r\n\r\n // IMPORTANT: Reposition overlay after height change\r\n requestAnimationFrame(() => {\r\n if (!this.isDestroyed) {\r\n this.applyOverlayStyle();\r\n console.log(\r\n '📐 Height changed - rechecking alignment after repositioning:',\r\n );\r\n }\r\n });\r\n }\r\n }\r\n\r\n /\r\n Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)\r\n /\r\n private letterSpacingPx(charSpacing: number, fontSize: number): number {\r\n return (charSpacing / 1000) fontSize;\r\n }\r\n\r\n /*\r\n Detect text direction using first strong directional character\r\n /\r\n private firstStrongDir(text: string): 'ltr' \| 'rtl' {\r\n // Hebrew: \\u0590-\\u05FF, Arabic: \\u0600-\\u06FF, \\u0750-\\u077F, \\uFB50-\\uFDFF, \\uFE70-\\uFEFF\r\n const rtlRegex =\r\n /[\\u0590-\\u05FF\\u0600-\\u06FF\\u0750-\\u077F\\uFB50-\\uFDFF\\uFE70-\\uFEFF]/;\r\n return rtlRegex.test(text) ? 'rtl' : 'ltr';\r\n }\r\n\r\n private applyOverlayStyle(): void {\r\n const target = this.target;\r\n const canvas = this.canvas;\r\n\r\n // 1. Freshen object's transformations - use aCoords like rtl-test.html\r\n target.setCoords();\r\n const aCoords = target.aCoords;\r\n\r\n // 2. Get canvas position and scroll offsets (like rtl-test.html)\r\n const canvasEl = canvas.upperCanvasEl;\r\n const canvasRect = canvasEl.getBoundingClientRect();\r\n const scrollX = window.scrollX \|\| window.pageXOffset;\r\n const scrollY = window.scrollY \|\| window.pageYOffset;\r\n\r\n // 3. Position and dimensions accounting for Fabric Textbox padding and viewport transform\r\n const zoom = canvas.getZoom();\r\n const vpt = canvas.viewportTransform;\r\n const padding = (target as any).padding \|\| 0;\r\n const paddingX = padding (target.scaleX \|\| 1) * zoom;\r\n const paddingY = padding * (target.scaleY \|\| 1) * zoom;\r\n\r\n // Transform object's top-left corner coordinates to screen coordinates using viewport transform\r\n // aCoords.tl already accounts for object positioning and scaling, just need viewport transform\r\n const screenPoint = transformPoint(\r\n { x: aCoords.tl.x, y: aCoords.tl.y },\r\n vpt,\r\n );\r\n\r\n const left = canvasRect.left + scrollX + screenPoint.x;\r\n const top = canvasRect.top + scrollY + screenPoint.y;\r\n\r\n // 4. Calculate the precise width and height for the container\r\n // THE FIX: Use getBoundingRect() for BOTH width and height.\r\n // This is the most reliable measure of the object's final rendered dimensions.\r\n const objectBounds = target.getBoundingRect();\r\n const width = Math.round(objectBounds.width * zoom);\r\n const height = Math.round(objectBounds.height * zoom);\r\n\r\n // 5. Apply styles to host DIV - absolute positioning like rtl-test.html\r\n this.hostDiv.style.position = 'absolute';\r\n this.hostDiv.style.left = `${left}px`;\r\n this.hostDiv.style.top = `${top}px`;\r\n this.hostDiv.style.width = `${width}px`;\r\n this.hostDiv.style.height = `${height}px`;\r\n this.hostDiv.style.overflow = 'hidden'; // Prevent scrollbars in host div\r\n // Apply rotation matching Fabric.js object transformation\r\n if (target.angle) {\r\n this.hostDiv.style.transform = `rotate(${target.angle}deg)`;\r\n this.hostDiv.style.transformOrigin = 'top left'; // Match Fabric Textbox behavior\r\n } else {\r\n this.hostDiv.style.transform = '';\r\n this.hostDiv.style.transformOrigin = '';\r\n }\r\n\r\n // 6. Style the textarea - match Fabric's exact rendering with padding\r\n const baseFontSize = target.fontSize ?? 16;\r\n // Use scaleX for font scaling to match Fabric text scaling exactly\r\n const scaleX = target.scaleX \|\| 1;\r\n const finalFontSize = baseFontSize * scaleX * zoom;\r\n const fabricLineHeight = target.lineHeight \|\| 1.16;\r\n // THE FIX: Use 'border-box' so the width property includes padding.\r\n // This makes alignment much easier and more reliable.\r\n this.textarea.style.boxSizing = 'border-box';\r\n\r\n // THE FIX: Set the textarea width to be IDENTICAL to the host div's width.\r\n // The padding will now be correctly contained inside this width.\r\n this.textarea.style.width = `${width}px`;\r\n this.textarea.style.height = '100%'; // Let hostDiv control height\r\n this.textarea.style.padding = `${paddingY}px ${paddingX}px`;\r\n\r\n // Apply all other font and text styles to match Fabric\r\n const letterSpacingPx = ((target.charSpacing \|\| 0) / 1000) * finalFontSize;\r\n\r\n this.textarea.style.fontSize = `${finalFontSize}px`;\r\n this.textarea.style.lineHeight = String(fabricLineHeight);\r\n this.textarea.style.fontFamily = target.fontFamily \|\| 'Arial';\r\n this.textarea.style.fontWeight = String(target.fontWeight \|\| 'normal');\r\n this.textarea.style.fontStyle = target.fontStyle \|\| 'normal';\r\n this.textarea.style.textAlign = (target as any).textAlign \|\| 'left';\r\n this.textarea.style.color = target.fill?.toString() \|\| '#000';\r\n this.textarea.style.letterSpacing = `${letterSpacingPx}px`;\r\n this.textarea.style.direction =\r\n (target as any).direction \|\|\r\n this.firstStrongDir(this.textarea.value \|\| '');\r\n this.textarea.style.fontVariant = 'normal';\r\n this.textarea.style.fontStretch = 'normal';\r\n this.textarea.style.textRendering = 'optimizeLegibility';\r\n this.textarea.style.fontKerning = 'normal';\r\n this.textarea.style.fontFeatureSettings = 'normal';\r\n this.textarea.style.fontVariationSettings = 'normal';\r\n this.textarea.style.margin = '0';\r\n this.textarea.style.border = 'none';\r\n this.textarea.style.outline = 'none';\r\n this.textarea.style.background = 'transparent';\r\n this.textarea.style.overflowWrap = 'break-word';\r\n this.textarea.style.whiteSpace = 'pre-wrap';\r\n this.textarea.style.hyphens = 'none';\r\n \r\n (this.textarea.style as any).webkitFontSmoothing = 'antialiased';\r\n (this.textarea.style as any).mozOsxFontSmoothing = 'grayscale';\r\n\r\n // Debug: Compare textarea and canvas object bounding boxes\r\n this.debugBoundingBoxComparison();\r\n\r\n // Debug: Compare text wrapping behavior\r\n this.debugTextWrapping();\r\n\r\n // Initial bounds are set correctly by Fabric.js - don't force update here\r\n }\r\n\r\n /*\r\n Debug method to compare textarea and canvas object bounding boxes\r\n /\r\n private debugBoundingBoxComparison(): void {\r\n const target = this.target;\r\n const canvas = this.canvas;\r\n const zoom = canvas.getZoom();\r\n\r\n // Get textarea bounding box (in screen coordinates)\r\n const textareaRect = this.textarea.getBoundingClientRect();\r\n const hostRect = this.hostDiv.getBoundingClientRect();\r\n\r\n // Get canvas object bounding box (in screen coordinates)\r\n const canvasBounds = target.getBoundingRect();\r\n const canvasRect = canvas.upperCanvasEl.getBoundingClientRect();\r\n\r\n // Convert canvas object bounds to screen coordinates\r\n const vpt = canvas.viewportTransform;\r\n const screenObjectBounds = {\r\n left: canvasRect.left + canvasBounds.left zoom + vpt[4],\r\n top: canvasRect.top + canvasBounds.top * zoom + vpt[5],\r\n width: canvasBounds.width * zoom,\r\n height: canvasBounds.height * zoom,\r\n };\r\n\r\n console.log('🔍 BOUNDING BOX COMPARISON:');\r\n console.log('📦 Textarea Rect:', {\r\n left: Math.round(textareaRect.left * 100) / 100,\r\n top: Math.round(textareaRect.top * 100) / 100,\r\n width: Math.round(textareaRect.width * 100) / 100,\r\n height: Math.round(textareaRect.height * 100) / 100,\r\n });\r\n console.log('📦 Host Div Rect:', {\r\n left: Math.round(hostRect.left * 100) / 100,\r\n top: Math.round(hostRect.top * 100) / 100,\r\n width: Math.round(hostRect.width * 100) / 100,\r\n height: Math.round(hostRect.height * 100) / 100,\r\n });\r\n console.log('📦 Canvas Object Bounds (screen):', {\r\n left: Math.round(screenObjectBounds.left * 100) / 100,\r\n top: Math.round(screenObjectBounds.top * 100) / 100,\r\n width: Math.round(screenObjectBounds.width * 100) / 100,\r\n height: Math.round(screenObjectBounds.height * 100) / 100,\r\n });\r\n console.log('📦 Canvas Object Bounds (canvas):', canvasBounds);\r\n\r\n // Calculate differences\r\n const hostVsObject = {\r\n leftDiff:\r\n Math.round((hostRect.left - screenObjectBounds.left) * 100) / 100,\r\n topDiff: Math.round((hostRect.top - screenObjectBounds.top) * 100) / 100,\r\n widthDiff:\r\n Math.round((hostRect.width - screenObjectBounds.width) * 100) / 100,\r\n heightDiff:\r\n Math.round((hostRect.height - screenObjectBounds.height) * 100) / 100,\r\n };\r\n\r\n const textareaVsObject = {\r\n leftDiff:\r\n Math.round((textareaRect.left - screenObjectBounds.left) * 100) / 100,\r\n topDiff:\r\n Math.round((textareaRect.top - screenObjectBounds.top) * 100) / 100,\r\n widthDiff:\r\n Math.round((textareaRect.width - screenObjectBounds.width) * 100) / 100,\r\n heightDiff:\r\n Math.round((textareaRect.height - screenObjectBounds.height) * 100) /\r\n 100,\r\n };\r\n\r\n console.log('📏 Host Div vs Canvas Object Diff:', hostVsObject);\r\n console.log('📏 Textarea vs Canvas Object Diff:', textareaVsObject);\r\n\r\n // Check if they're aligned (within 2px tolerance)\r\n const tolerance = 2;\r\n const hostAligned =\r\n Math.abs(hostVsObject.leftDiff) < tolerance &&\r\n Math.abs(hostVsObject.topDiff) < tolerance &&\r\n Math.abs(hostVsObject.widthDiff) < tolerance &&\r\n Math.abs(hostVsObject.heightDiff) < tolerance;\r\n\r\n const textareaAligned =\r\n Math.abs(textareaVsObject.leftDiff) < tolerance &&\r\n Math.abs(textareaVsObject.topDiff) < tolerance &&\r\n Math.abs(textareaVsObject.widthDiff) < tolerance &&\r\n Math.abs(textareaVsObject.heightDiff) < tolerance;\r\n\r\n console.log(\r\n hostAligned\r\n ? '✅ Host Div ALIGNED with canvas object'\r\n : '❌ Host Div MISALIGNED with canvas object',\r\n );\r\n console.log(\r\n textareaAligned\r\n ? '✅ Textarea ALIGNED with canvas object'\r\n : '❌ Textarea MISALIGNED with canvas object',\r\n );\r\n console.log('🔍 Zoom:', zoom, 'Viewport Transform:', vpt);\r\n console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');\r\n }\r\n\r\n /*\r\n Debug method to compare text wrapping between textarea and Fabric text object\r\n /\r\n private debugTextWrapping(): void {\r\n const target = this.target;\r\n const text = this.textarea.value;\r\n\r\n console.log('📝 TEXT WRAPPING COMPARISON:');\r\n console.log('📄 Text Content:', `\"${text}\"`);\r\n console.log('📄 Text Length:', text.length);\r\n\r\n // Analyze line breaks\r\n const explicitLines = text.split('\\n');\r\n console.log('📄 Explicit Lines (\\\\n):', explicitLines.length);\r\n explicitLines.forEach((line, i) => {\r\n console.log(` Line ${i + 1}: \"${line}\" (${line.length} chars)`);\r\n });\r\n\r\n // Get textarea computed styles for wrapping analysis\r\n const textareaStyles = window.getComputedStyle(this.textarea);\r\n console.log('📐 Textarea Wrapping Styles:');\r\n console.log(' width:', textareaStyles.width);\r\n console.log(' fontSize:', textareaStyles.fontSize);\r\n console.log(' fontFamily:', textareaStyles.fontFamily);\r\n console.log(' fontWeight:', textareaStyles.fontWeight);\r\n console.log(' letterSpacing:', textareaStyles.letterSpacing);\r\n console.log(' lineHeight:', textareaStyles.lineHeight);\r\n console.log(' whiteSpace:', textareaStyles.whiteSpace);\r\n console.log(' wordWrap:', textareaStyles.wordWrap);\r\n console.log(' overflowWrap:', textareaStyles.overflowWrap);\r\n console.log(' direction:', textareaStyles.direction);\r\n console.log(' textAlign:', textareaStyles.textAlign);\r\n\r\n // Get Fabric text object properties for comparison\r\n console.log('📐 Fabric Text Object Properties:');\r\n console.log(' width:', (target as any).width);\r\n console.log(' fontSize:', target.fontSize);\r\n console.log(' fontFamily:', target.fontFamily);\r\n console.log(' fontWeight:', target.fontWeight);\r\n console.log(' charSpacing:', target.charSpacing);\r\n console.log(' lineHeight:', target.lineHeight);\r\n console.log(' direction:', (target as any).direction);\r\n console.log(' textAlign:', (target as any).textAlign);\r\n console.log(' scaleX:', target.scaleX);\r\n console.log(' scaleY:', target.scaleY);\r\n\r\n // Calculate effective dimensions for comparison - use actual rendered width\r\n // THE FIX:* Use getBoundingRect to get the actual rendered width of the Fabric object.\r\n const fabricEffectiveWidth = this.target.getBoundingRect().width;\r\n // Use the exact width set on textarea for comparison\r\n const textareaComputedWidth = parseFloat(\r\n window.getComputedStyle(this.textarea).width,\r\n );\r\n const textareaEffectiveWidth =\r\n textareaComputedWidth / this.canvas.getZoom();\r\n const widthDiff = Math.abs(textareaEffectiveWidth - fabricEffectiveWidth);\r\n\r\n console.log('📏 Effective Width Comparison:');\r\n console.log(' Textarea Effective Width:', textareaEffectiveWidth);\r\n console.log(' Fabric Effective Width:', fabricEffectiveWidth);\r\n console.log(' Width Difference:', widthDiff.toFixed(2) + 'px');\r\n console.log(\r\n widthDiff < 1\r\n ? '✅ Widths MATCH for wrapping'\r\n : '❌ Width MISMATCH may cause different wrapping',\r\n );\r\n\r\n // Check text direction and bidi handling\r\n const hasRTLText =\r\n /[\\u0590-\\u05FF\\u0600-\\u06FF\\u0750-\\u077F\\uFB50-\\uFDFF\\uFE70-\\uFEFF]/.test(\r\n text,\r\n );\r\n const hasBidiText = /[\\u0590-\\u06FF]/.test(text) && /[a-zA-Z]/.test(text);\r\n\r\n console.log('🌍 Text Direction Analysis:');\r\n console.log(' Has RTL characters:', hasRTLText);\r\n console.log(' Has mixed Bidi text:', hasBidiText);\r\n console.log(' Textarea direction:', textareaStyles.direction);\r\n console.log(' Fabric direction:', (target as any).direction \|\| 'auto');\r\n console.log(' Textarea unicodeBidi:', textareaStyles.unicodeBidi);\r\n\r\n // Measure actual rendered line count\r\n const textareaScrollHeight = this.textarea.scrollHeight;\r\n const textareaLineHeight =\r\n parseFloat(textareaStyles.lineHeight) \|\|\r\n parseFloat(textareaStyles.fontSize) * 1.2;\r\n const estimatedTextareaLines = Math.round(\r\n textareaScrollHeight / textareaLineHeight,\r\n );\r\n\r\n console.log('📊 Line Count Analysis:');\r\n console.log(' Textarea scrollHeight:', textareaScrollHeight);\r\n console.log(' Textarea lineHeight:', textareaLineHeight);\r\n console.log(' Estimated rendered lines:', estimatedTextareaLines);\r\n console.log(' Explicit line breaks:', explicitLines.length);\r\n\r\n if (estimatedTextareaLines > explicitLines.length) {\r\n console.log('🔄 Text wrapping detected in textarea');\r\n console.log(\r\n ' Wrapped lines:',\r\n estimatedTextareaLines - explicitLines.length,\r\n );\r\n } else {\r\n console.log('📏 No text wrapping in textarea');\r\n }\r\n\r\n console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');\r\n }\r\n\r\n\r\n /*\r\n Focus the textarea and position cursor at end\r\n /\r\n private focusTextarea(): void {\r\n // For overlay editing, we want to keep the object in \"selection mode\" not \"editing mode\"\r\n // This means keeping selected=true and isEditing=false to show boundaries\r\n\r\n // Hide the text content only (not the entire object)\r\n this.target.opacity = 0.01; // Nearly transparent but not fully hidden\r\n\r\n // Ensure object stays selected to show boundaries\r\n (this.target as any).selected = true;\r\n (this.target as any).isEditing = false; // Override any editing state\r\n\r\n // Make sure controls are enabled and movement is allowed during overlay editing\r\n this.target.set({\r\n hasControls: true,\r\n hasBorders: true,\r\n selectable: true,\r\n lockMovementX: false,\r\n lockMovementY: false,\r\n });\r\n\r\n // Keep as active object\r\n this.canvas.setActiveObject(this.target);\r\n\r\n this.canvas.requestRenderAll();\r\n this.target.setCoords();\r\n this.applyOverlayStyle();\r\n\r\n this.textarea.focus();\r\n\r\n this.textarea.setSelectionRange(\r\n this.textarea.value.length,\r\n this.textarea.value.length,\r\n );\r\n\r\n // Ensure the object stays selected even after textarea focus\r\n this.canvas.setActiveObject(this.target);\r\n this.canvas.requestRenderAll();\r\n }\r\n\r\n /\r\n Refresh overlay positioning and styling\r\n /\r\n public refresh(): void {\r\n if (this.isDestroyed) return;\r\n this.updatePosition();\r\n // Don't update object bounds on every refresh - only when textarea actually resizes\r\n }\r\n\r\n /\r\n Destroy the overlay editor\r\n /\r\n public destroy(commit: boolean = true): void {\r\n if (this.isDestroyed) return;\r\n this.isDestroyed = true;\r\n\r\n this.removeEventListeners();\r\n\r\n // Restore target visibility before handling commit/cancel\r\n if ((this.target as any).__overlayEditor === this) {\r\n (this.target as any).__overlayEditor = undefined;\r\n\r\n // Restore original opacity\r\n if ((this.target as any).__overlayOriginalOpacity !== undefined) {\r\n this.target.opacity = (this.target as any).__overlayOriginalOpacity;\r\n delete (this.target as any).__overlayOriginalOpacity;\r\n }\r\n }\r\n\r\n // Remove DOM first\r\n if (this.hostDiv.parentNode) {\r\n this.hostDiv.parentNode.removeChild(this.hostDiv);\r\n }\r\n\r\n // Handle commit/cancel after restoring visibility\r\n if (commit && !this.isComposing) {\r\n const finalText = this.textarea.value;\r\n if (this.onCommit) {\r\n this.onCommit(finalText);\r\n }\r\n } else if (!commit && this.onCancel) {\r\n this.onCancel();\r\n }\r\n\r\n // Note: Don't restore object cursors since IText manages all cursors in _restoreEditingProps\r\n // Let the IText editing system handle proper restoration of all cursor properties\r\n\r\n // Note: Canvas cursors are restored by IText's _restoreEditingProps method\r\n // Force a cursor refresh by triggering _setCursorFromEvent\r\n setTimeout(() => {\r\n this.canvas.upperCanvasEl.style.cursor = '';\r\n // Trigger cursor refresh on next mouse move\r\n this.canvas.setCursor(this.canvas.defaultCursor);\r\n }, 0);\r\n\r\n // Request canvas re-render\r\n this.canvas.requestRenderAll();\r\n }\r\n\r\n // Event handlers\r\n private handleInput(): void {\r\n if (!this.isComposing && this.target.text !== this.textarea.value) {\r\n // Live update target text\r\n this.target.text = this.textarea.value;\r\n\r\n\r\n // Auto-resize textarea to match new content\r\n this.autoResizeTextarea();\r\n\r\n // Ensure object stays in selection mode (not editing mode) to show controls\r\n (this.target as any).selected = true;\r\n (this.target as any).isEditing = false;\r\n this.canvas.setActiveObject(this.target);\r\n this.canvas.requestRenderAll();\r\n }\r\n }\r\n\r\n private autoResizeTextarea(): void {\r\n // Store the scroll position and the container's old height for comparison.\r\n const scrollTop = this.textarea.scrollTop;\r\n const oldHeight = parseFloat(this.hostDiv.style.height \|\| '0');\r\n\r\n // 1. Force a reliable reflow.\r\n // First, reset the textarea's height to a minimal value. This is the crucial step\r\n // that forces the browser to recalculate the content's height from scratch,\r\n // ignoring the hostDiv's larger, stale height.\r\n this.textarea.style.height = '1px';\r\n\r\n // 2. Read the now-accurate scrollHeight. This value reflects the minimum\r\n // height required for the content, whether it's single or multi-line.\r\n const scrollHeight = this.textarea.scrollHeight;\r\n\r\n // A small buffer for rendering consistency across browsers.\r\n const buffer = 2;\r\n const newHeight = scrollHeight + buffer;\r\n\r\n // Check if the height has changed significantly.\r\n const heightChanged = Math.abs(newHeight - oldHeight) > 1;\r\n\r\n // 4. Only update heights and object bounds if there was a change.\r\n if (heightChanged) {\r\n this.textarea.style.height = `${newHeight}px`;\r\n this.hostDiv.style.height = `${newHeight}px`;\r\n this.updateObjectBounds();\r\n } else {\r\n // If no significant change, ensure the textarea's height matches the container\r\n // to prevent any minor visual misalignment.\r\n this.textarea.style.height = this.hostDiv.style.height;\r\n }\r\n\r\n // 5. Restore the original scroll position.\r\n this.textarea.scrollTop = scrollTop;\r\n }\r\n\r\n private handleKeyDown(e: KeyboardEvent): void {\r\n if (e.key === 'Escape') {\r\n e.preventDefault();\r\n this.destroy(false); // Cancel\r\n } else if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter') {\r\n e.preventDefault();\r\n this.destroy(true); // Commit\r\n } else if (\r\n e.key === 'Enter' \|\|\r\n e.key === 'Backspace' \|\|\r\n e.key === 'Delete'\r\n ) {\r\n // For keys that might change the height, schedule a resize check\r\n // Use both immediate and delayed checks to catch all scenarios\r\n requestAnimationFrame(() => {\r\n if (!this.isDestroyed) {\r\n this.autoResizeTextarea();\r\n }\r\n });\r\n setTimeout(() => {\r\n if (!this.isDestroyed) {\r\n this.autoResizeTextarea();\r\n }\r\n }, 10); // Small delay to ensure DOM is updated\r\n }\r\n }\r\n\r\n private handleFocus(): void {\r\n // Focus handler - could be used for future enhancements\r\n }\r\n\r\n private handleBlur(): void {\r\n // Commit on blur unless we're in composition mode\r\n if (!this.isComposing) {\r\n this.destroy(true);\r\n }\r\n }\r\n\r\n private handleCompositionStart(): void {\r\n this.isComposing = true;\r\n }\r\n\r\n private handleCompositionEnd(): void {\r\n this.isComposing = false;\r\n this.handleInput(); // Update text after composition\r\n }\r\n\r\n private handleAfterRender(): void {\r\n this.refresh();\r\n }\r\n\r\n private handleMouseWheel(): void {\r\n this.refresh();\r\n }\r\n\r\n private handleMouseDown(e: TPointerEventInfo): void {\r\n if (e.target !== this.target) {\r\n this.destroy(true);\r\n }\r\n }\r\n\r\n /\r\n Setup detection for viewport changes (zoom/pan)\r\n /\r\n private setupViewportChangeDetection(): void {\r\n // Store original methods\r\n (this.canvas as any).__originalSetZoom = this.canvas.setZoom;\r\n (this.canvas as any).__originalSetViewportTransform =\r\n this.canvas.setViewportTransform;\r\n (this.canvas as any).__overlayEditor = this;\r\n\r\n // Override setZoom to detect zoom changes\r\n const originalSetZoom = this.canvas.setZoom.bind(this.canvas);\r\n this.canvas.setZoom = (value: number) => {\r\n const result = originalSetZoom(value);\r\n if ((this.canvas as any).__overlayEditor && !this.isDestroyed) {\r\n this.refresh();\r\n }\r\n return result;\r\n };\r\n\r\n // Override setViewportTransform to detect pan changes\r\n const originalSetViewportTransform = this.canvas.setViewportTransform.bind(\r\n this.canvas,\r\n );\r\n this.canvas.setViewportTransform = (vpt: TMat2D) => {\r\n const result = originalSetViewportTransform(vpt);\r\n if ((this.canvas as any).__overlayEditor && !this.isDestroyed) {\r\n this.refresh();\r\n }\r\n return result;\r\n };\r\n }\r\n\r\n /\r\n Restore original viewport methods\r\n /\r\n private restoreViewportChangeDetection(): void {\r\n if ((this.canvas as any).__originalSetZoom) {\r\n this.canvas.setZoom = (this.canvas as any).__originalSetZoom;\r\n delete (this.canvas as any).__originalSetZoom;\r\n }\r\n if ((this.canvas as any).__originalSetViewportTransform) {\r\n this.canvas.setViewportTransform = (\r\n this.canvas as any\r\n ).__originalSetViewportTransform;\r\n delete (this.canvas as any).__originalSetViewportTransform;\r\n }\r\n delete (this.canvas as any).__overlayEditor;\r\n }\r\n}\r\n\r\n/\r\n Enter overlay text editing mode for a text object\r\n /\r\nexport function enterTextOverlayEdit(\r\n canvas: Canvas,\r\n target: FabricText \| IText \| Textbox,\r\n options?: {\r\n onCommit?: (text: string) => void;\r\n onCancel?: () => void;\r\n },\r\n): OverlayEditor {\r\n // If already in overlay editing, destroy existing editor first\r\n if ((target as any).__overlayEditor) {\r\n (target as any).__overlayEditor.destroy(false);\r\n }\r\n\r\n // Store original opacity so we can restore it later\r\n (target as any).__overlayOriginalOpacity = target.opacity;\r\n\r\n const editor = new OverlayEditor({\r\n canvas,\r\n target,\r\n onCommit: options?.onCommit,\r\n onCancel: options?.onCancel,\r\n });\r\n\r\n // We no longer change fill, so no need to store it\r\n\r\n // Store reference on target for cleanup\r\n (target as any).__overlayEditor = editor;\r\n\r\n return editor;\r\n}\r\n\r\n/\r\n Check if a text object is currently being edited with overlay editor\r\n */\r\nexport function isInOverlayEdit(target: FabricText \| IText \| Textbox): boolean {\r\n return !!(target as any).__overlayEditor?.isActive;\r\n}\r\n"],"names":["OverlayEditor","constructor","options","_defineProperty","this","onInput","handleInput","bind","onKeyDown","handleKeyDown","onBlur","handleBlur","onCompositionStart","handleCompositionStart","onCompositionEnd","handleCompositionEnd","onAfterRender","handleAfterRender","onMouseWheel","handleMouseWheel","onFocus","handleFocus","onMouseDown","handleMouseDown","canvas","target","onCommit","onCancel","lastText","text","container","getCanvasContainer","createOverlayDOM","attachEventListeners","refresh","focusTextarea","upperCanvasEl","parentElement","Error","style","position","hostDiv","document","createElement","pointerEvents","zIndex","transformOrigin","textarea","left","top","margin","resize","hasArabicText","test","hasLatinText","isLTRDirection","direction","unicodeBidi","caretColor","border","padding","background","outline","overflow","whiteSpace","wordBreak","overflowWrap","userSelect","textTransform","opacity","value","appendChild","body","addEventListener","boundHandlers","on","setupViewportChangeDetection","removeEventListeners","removeEventListener","off","restoreViewportChangeDetection","updatePosition","applyOverlayStyle","updateObjectBounds","isDestroyed","zoom","getZoom","parseFloat","width","currentHeight","height","Math","abs","setCoords","dirty","requestRenderAll","requestAnimationFrame","console","log","letterSpacingPx","charSpacing","fontSize","firstStrongDir","_target$fontSize","_target$fill","aCoords","canvasRect","getBoundingClientRect","scrollX","window","pageXOffset","scrollY","pageYOffset","vpt","viewportTransform","paddingX","scaleX","paddingY","scaleY","screenPoint","transformPoint","x","tl","y","objectBounds","getBoundingRect","round","angle","transform","finalFontSize","fabricLineHeight","lineHeight","boxSizing","String","fontFamily","fontWeight","fontStyle","textAlign","color","fill","toString","letterSpacing","fontVariant","fontStretch","textRendering","fontKerning","fontFeatureSettings","fontVariationSettings","hyphens","webkitFontSmoothing","mozOsxFontSmoothing","debugBoundingBoxComparison","debugTextWrapping","textareaRect","hostRect","canvasBounds","screenObjectBounds","hostVsObject","leftDiff","topDiff","widthDiff","heightDiff","textareaVsObject","hostAligned","textareaAligned","length","explicitLines","split","forEach","line","i","textareaStyles","getComputedStyle","wordWrap","fabricEffectiveWidth","textareaEffectiveWidth","toFixed","hasRTLText","hasBidiText","textareaScrollHeight","scrollHeight","textareaLineHeight","estimatedTextareaLines","selected","isEditing","set","hasControls","hasBorders","selectable","lockMovementX","lockMovementY","setActiveObject","focus","setSelectionRange","destroy","commit","arguments","undefined","__overlayEditor","__overlayOriginalOpacity","parentNode","removeChild","isComposing","finalText","setTimeout","cursor","setCursor","defaultCursor","autoResizeTextarea","scrollTop","oldHeight","newHeight","e","key","preventDefault","ctrlKey","metaKey","__originalSetZoom","setZoom","__originalSetViewportTransform","setViewportTransform","originalSetZoom","result","originalSetViewportTransform","enterTextOverlayEdit","editor"],"mappings":"+IA8BO,MAAMA,EAyBXC,WAAAA,CAAYC,GAA+BC,EAAAC,KAAA,cAAA,GAAAD,EAAAC,KAAA,cAAA,GAAAD,EAAAC,KAAA,iBAAA,GAAAD,EAAAC,KAAA,gBAAA,GAAAD,EAAAC,KAAA,eAAA,GAAAD,sBAnBrB,GAAKA,sBACL,GAAKA,EAAAC,KAAA,gBAAA,GAAAD,EAAAC,KAAA,gBAAA,GAAAD,EAAAC,KAAA,gBAAA,GAK3BD,EAAAC,KAAA,gBACwB,CACtBC,QAASD,KAAKE,YAAYC,KAAKH,MAC/BI,UAAWJ,KAAKK,cAAcF,KAAKH,MACnCM,OAAQN,KAAKO,WAAWJ,KAAKH,MAC7BQ,mBAAoBR,KAAKS,uBAAuBN,KAAKH,MACrDU,iBAAkBV,KAAKW,qBAAqBR,KAAKH,MACjDY,cAAeZ,KAAKa,kBAAkBV,KAAKH,MAC3Cc,aAAcd,KAAKe,iBAAiBZ,KAAKH,MACzCgB,QAAShB,KAAKiB,YAAYd,KAAKH,MAC/BkB,YAAalB,KAAKmB,gBAAgBhB,KAAKH,QAIvCA,KAAKoB,OAAStB,EAAQsB,OACtBpB,KAAKqB,OAASvB,EAAQuB,OACtBrB,KAAKsB,SAAWxB,EAAQwB,SACxBtB,KAAKuB,SAAWzB,EAAQyB,SACxBvB,KAAKwB,SAAWxB,KAAKqB,OAAOI,MAAQ,GAEpCzB,KAAK0B,UAAY1B,KAAK2B,qBACtB3B,KAAK4B,mBACL5B,KAAK6B,uBACL7B,KAAK8B,UACL9B,KAAK+B,eAOP,CAKQJ,kBAAAA,GACN,MACMD,EADc1B,KAAKoB,OAAOY,cACFC,cAC9B,IAAKP,EACH,MAAM,IAAIQ,MAAM,wDAMlB,OAFAR,EAAUS,MAAMC,SAAW,WAEpBV,CACT,CAKQE,gBAAAA,GAEN5B,KAAKqC,QAAUC,SAASC,cAAc,OACtCvC,KAAKqC,QAAQF,MAAMC,SAAW,WAC9BpC,KAAKqC,QAAQF,MAAMK,cAAgB,OACnCxC,KAAKqC,QAAQF,MAAMM,OAAS,OAC5BzC,KAAKqC,QAAQF,MAAMO,gBAAkB,WAGrC1C,KAAK2C,SAAWL,SAASC,cAAc,YACvCvC,KAAK2C,SAASR,MAAMC,SAAW,WAC/BpC,KAAK2C,SAASR,MAAMS,KAAO,IAC3B5C,KAAK2C,SAASR,MAAMU,IAAM,IAC1B7C,KAAK2C,SAASR,MAAMW,OAAS,IAC7B9C,KAAK2C,SAASR,MAAMY,OAAS,OAC7B/C,KAAK2C,SAASR,MAAMK,cAAgB,OAEpC,MAAMQ,EACJ,yDAAyDC,KACvDjD,KAAKqB,OAAOI,MAAQ,IAElByB,EAAe,WAAWD,KAAKjD,KAAKqB,OAAOI,MAAQ,IACnD0B,EAAoD,QAAlCnD,KAAKqB,OAAe+B,UAI1CpD,KAAK2C,SAASR,MAAMkB,YAFlBL,GAAiBE,GAAgBC,GAG1BH,GAAiBG,EADQ,QAMA,YAEpCnD,KAAK2C,SAASR,MAAMmB,WAAa,OAGjCtD,KAAK2C,SAASR,MAAMoB,OAAS,OAC7BvD,KAAK2C,SAASR,MAAMqB,QAAU,IAC9BxD,KAAK2C,SAASR,MAAMsB,WAAa,cACjCzD,KAAK2C,SAASR,MAAMuB,QAAU,OAC9B1D,KAAK2C,SAASR,MAAMwB,SAAW,SAC/B3D,KAAK2C,SAASR,MAAMyB,WAAa,WACjC5D,KAAK2C,SAASR,MAAM0B,UAAY,SAChC7D,KAAK2C,SAASR,MAAM2B,aAAe,aACnC9D,KAAK2C,SAASR,MAAM4B,WAAa,OACjC/D,KAAK2C,SAASR,MAAM6B,cAAgB,OAGpChE,KAAK2C,SAASR,MAAM8B,QAAU,IAG9BjE,KAAK2C,SAASuB,MAAQlE,KAAKqB,OAAOI,MAAQ,GAE1CzB,KAAKqC,QAAQ8B,YAAYnE,KAAK2C,UAC9BL,SAAS8B,KAAKD,YAAYnE,KAAKqC,QACjC,CAKQR,oBAAAA,GAEN7B,KAAK2C,SAAS0B,iBAAiB,QAASrE,KAAKsE,cAAcrE,SAC3DD,KAAK2C,SAAS0B,iBAAiB,UAAWrE,KAAKsE,cAAclE,WAC7DJ,KAAK2C,SAAS0B,iBAAiB,OAAQrE,KAAKsE,cAAchE,QAC1DN,KAAK2C,SAAS0B,iBACZ,mBACArE,KAAKsE,cAAc9D,oBAErBR,KAAK2C,SAAS0B,iBACZ,iBACArE,KAAKsE,cAAc5D,kBAErBV,KAAK2C,SAAS0B,iBAAiB,QAASrE,KAAKsE,cAActD,SAG3DhB,KAAKoB,OAAOmD,GAAG,eAAgBvE,KAAKsE,cAAc1D,eAClDZ,KAAKoB,OAAOmD,GAAG,cAAevE,KAAKsE,cAAcxD,cACjDd,KAAKoB,OAAOmD,GAAG,aAAcvE,KAAKsE,cAAcpD,aAGhDlB,KAAKwE,8BACP,CAKQC,oBAAAA,GACNzE,KAAK2C,SAAS+B,oBAAoB,QAAS1E,KAAKsE,cAAcrE,SAC9DD,KAAK2C,SAAS+B,oBAAoB,UAAW1E,KAAKsE,cAAclE,WAChEJ,KAAK2C,SAAS+B,oBAAoB,OAAQ1E,KAAKsE,cAAchE,QAC7DN,KAAK2C,SAAS+B,oBACZ,mBACA1E,KAAKsE,cAAc9D,oBAErBR,KAAK2C,SAAS+B,oBACZ,iBACA1E,KAAKsE,cAAc5D,kBAErBV,KAAK2C,SAAS+B,oBAAoB,QAAS1E,KAAKsE,cAActD,SAE9DhB,KAAKoB,OAAOuD,IAAI,eAAgB3E,KAAKsE,cAAc1D,eACnDZ,KAAKoB,OAAOuD,IAAI,cAAe3E,KAAKsE,cAAcxD,cAClDd,KAAKoB,OAAOuD,IAAI,aAAc3E,KAAKsE,cAAcpD,aAGjDlB,KAAK4E,gCACP,CAKQC,cAAAA,GACN7E,KAAK8E,mBACP,CAMQC,kBAAAA,GACN,GAAI/E,KAAKgF,YAAa,OAEtB,MAAM3D,EAASrB,KAAKqB,OACd4D,EAAOjF,KAAKoB,OAAO8D,UAGJC,WAAWnF,KAAKqC,QAAQF,MAAMiD,OACnD,MAAMC,EAAgBF,WAAWnF,KAAKqC,QAAQF,MAAMmD,QAAUL,EAG3CM,KAAKC,IAAIH,EAAgBhE,EAAOiE,QACjC,KAGEjE,EAAOiE,OACzBjE,EAAOiE,OAASD,EAChBhE,EAAOoE,YAGPpE,EAAOqE,OAAQ,EACf1F,KAAKoB,OAAOuE,mBAGZC,sBAAsB,KACf5F,KAAKgF,cACRhF,KAAK8E,oBACLe,QAAQC,IACN,oEAKV,CAKQC,eAAAA,CAAgBC,EAAqBC,GAC3C,OAAQD,EAAc,IAAQC,CAChC,CAKQC,cAAAA,CAAezE,GAIrB,MADE,sEACcwB,KAAKxB,GAAQ,MAAQ,KACvC,CAEQqD,iBAAAA,GAA0B,IAAAqB,EAAAC,EAChC,MAAM/E,EAASrB,KAAKqB,OACdD,EAASpB,KAAKoB,OAGpBC,EAAOoE,YACP,MAAMY,EAAUhF,EAAOgF,QAIjBC,EADWlF,EAAOY,cACIuE,wBACtBC,EAAUC,OAAOD,SAAWC,OAAOC,YACnCC,EAAUF,OAAOE,SAAWF,OAAOG,YAGnC3B,EAAO7D,EAAO8D,UACd2B,EAAMzF,EAAO0F,kBACbtD,EAAWnC,EAAemC,SAAW,EACrCuD,EAAWvD,GAAWnC,EAAO2F,QAAU,GAAK/B,EAC5CgC,EAAWzD,GAAWnC,EAAO6F,QAAU,GAAKjC,EAI5CkC,EAAcC,EAClB,CAAEC,EAAGhB,EAAQiB,GAAGD,EAAGE,EAAGlB,EAAQiB,GAAGC,GACjCV,GAGIjE,EAAO0D,EAAW1D,KAAO4D,EAAUW,EAAYE,EAC/CxE,EAAMyD,EAAWzD,IAAM8D,EAAUQ,EAAYI,EAK7CC,EAAenG,EAAOoG,kBACtBrC,EAAQG,KAAKmC,MAAMF,EAAapC,MAAQH,GACxCK,EAASC,KAAKmC,MAAMF,EAAalC,OAASL,GAGhDjF,KAAKqC,QAAQF,MAAMC,SAAW,WAC9BpC,KAAKqC,QAAQF,MAAMS,KAAO,GAAGA,MAC7B5C,KAAKqC,QAAQF,MAAMU,IAAM,GAAGA,MAC5B7C,KAAKqC,QAAQF,MAAMiD,MAAQ,GAAGA,MAC9BpF,KAAKqC,QAAQF,MAAMmD,OAAS,GAAGA,MAC/BtF,KAAKqC,QAAQF,MAAMwB,SAAW,SAE1BtC,EAAOsG,OACT3H,KAAKqC,QAAQF,MAAMyF,UAAY,UAAUvG,EAAOsG,YAChD3H,KAAKqC,QAAQF,MAAMO,gBAAkB,aAErC1C,KAAKqC,QAAQF,MAAMyF,UAAY,GAC/B5H,KAAKqC,QAAQF,MAAMO,gBAAkB,IAIvC,MAGMmF,GAH8B,QAAlB1B,EAAG9E,EAAO4E,gBAAQ,IAAAE,EAAAA,EAAI,KAEzB9E,EAAO2F,QAAU,GACc/B,EACxC6C,EAAmBzG,EAAO0G,YAAc,KAG9C/H,KAAK2C,SAASR,MAAM6F,UAAY,aAIhChI,KAAK2C,SAASR,MAAMiD,MAAQ,GAAGA,MAC/BpF,KAAK2C,SAASR,MAAMmD,OAAS,OAC7BtF,KAAK2C,SAASR,MAAMqB,QAAU,GAAGyD,OAAcF,MAG/C,MAAMhB,GAAoB1E,EAAO2E,aAAe,GAAK,IAAQ6B,EAE7D7H,KAAK2C,SAASR,MAAM8D,SAAW,GAAG4B,MAClC7H,KAAK2C,SAASR,MAAM4F,WAAaE,OAAOH,GACxC9H,KAAK2C,SAASR,MAAM+F,WAAa7G,EAAO6G,YAAc,QACtDlI,KAAK2C,SAASR,MAAMgG,WAAaF,OAAO5G,EAAO8G,YAAc,UAC7DnI,KAAK2C,SAASR,MAAMiG,UAAY/G,EAAO+G,WAAa,SACpDpI,KAAK2C,SAASR,MAAMkG,UAAahH,EAAegH,WAAa,OAC7DrI,KAAK2C,SAASR,MAAMmG,OAAmB,QAAXlC,EAAA/E,EAAOkH,YAAI,IAAAnC,OAAA,EAAXA,EAAaoC,aAAc,OACvDxI,KAAK2C,SAASR,MAAMsG,cAAgB,GAAG1C,MACvC/F,KAAK2C,SAASR,MAAMiB,UACjB/B,EAAe+B,WAChBpD,KAAKkG,eAAelG,KAAK2C,SAASuB,OAAS,IAC7ClE,KAAK2C,SAASR,MAAMuG,YAAc,SAClC1I,KAAK2C,SAASR,MAAMwG,YAAc,SAClC3I,KAAK2C,SAASR,MAAMyG,cAAgB,qBACpC5I,KAAK2C,SAASR,MAAM0G,YAAc,SAClC7I,KAAK2C,SAASR,MAAM2G,oBAAsB,SAC1C9I,KAAK2C,SAASR,MAAM4G,sBAAwB,SAC5C/I,KAAK2C,SAASR,MAAMW,OAAS,IAC7B9C,KAAK2C,SAASR,MAAMoB,OAAS,OAC7BvD,KAAK2C,SAASR,MAAMuB,QAAU,OAC9B1D,KAAK2C,SAASR,MAAMsB,WAAa,cACjCzD,KAAK2C,SAASR,MAAM2B,aAAe,aACnC9D,KAAK2C,SAASR,MAAMyB,WAAa,WACjC5D,KAAK2C,SAASR,MAAM6G,QAAU,OAE7BhJ,KAAK2C,SAASR,MAAc8G,oBAAsB,cAClDjJ,KAAK2C,SAASR,MAAc+G,oBAAsB,YAGnDlJ,KAAKmJ,6BAGLnJ,KAAKoJ,mBAGP,CAKQD,0BAAAA,GACN,MAAM9H,EAASrB,KAAKqB,OACdD,EAASpB,KAAKoB,OACd6D,EAAO7D,EAAO8D,UAGdmE,EAAerJ,KAAK2C,SAAS4D,wBAC7B+C,EAAWtJ,KAAKqC,QAAQkE,wBAGxBgD,EAAelI,EAAOoG,kBACtBnB,EAAalF,EAAOY,cAAcuE,wBAGlCM,EAAMzF,EAAO0F,kBACb0C,EACElD,EAAW1D,KAAO2G,EAAa3G,KAAOqC,EAAO4B,EAAI,GADnD2C,EAEClD,EAAWzD,IAAM0G,EAAa1G,IAAMoC,EAAO4B,EAAI,GAFhD2C,EAGGD,EAAanE,MAAQH,EAHxBuE,EAIID,EAAajE,OAASL,EAGhCY,QAAQC,IAAI,+BACZD,QAAQC,IAAI,oBAAqB,CAC/BlD,KAAM2C,KAAKmC,MAA0B,IAApB2B,EAAazG,MAAc,IAC5CC,IAAK0C,KAAKmC,MAAyB,IAAnB2B,EAAaxG,KAAa,IAC1CuC,MAAOG,KAAKmC,MAA2B,IAArB2B,EAAajE,OAAe,IAC9CE,OAAQC,KAAKmC,MAA4B,IAAtB2B,EAAa/D,QAAgB,MAElDO,QAAQC,IAAI,oBAAqB,CAC/BlD,KAAM2C,KAAKmC,MAAsB,IAAhB4B,EAAS1G,MAAc,IACxCC,IAAK0C,KAAKmC,MAAqB,IAAf4B,EAASzG,KAAa,IACtCuC,MAAOG,KAAKmC,MAAuB,IAAjB4B,EAASlE,OAAe,IAC1CE,OAAQC,KAAKmC,MAAwB,IAAlB4B,EAAShE,QAAgB,MAE9CO,QAAQC,IAAI,oCAAqC,CAC/ClD,KAAM2C,KAAKmC,MAAgC,IAA1B8B,GAAiC,IAClD3G,IAAK0C,KAAKmC,MAA+B,IAAzB8B,GAAgC,IAChDpE,MAAOG,KAAKmC,MAAiC,IAA3B8B,GAAkC,IACpDlE,OAAQC,KAAKmC,MAAkC,IAA5B8B,GAAmC,MAExD3D,QAAQC,IAAI,oCAAqCyD,GAGjD,MAAME,EAAe,CACnBC,SACEnE,KAAKmC,MAAkD,KAA3C4B,EAAS1G,KAAO4G,IAAkC,IAChEG,QAASpE,KAAKmC,MAAgD,KAAzC4B,EAASzG,IAAM2G,IAAiC,IACrEI,UACErE,KAAKmC,MAAoD,KAA7C4B,EAASlE,MAAQoE,IAAmC,IAClEK,WACEtE,KAAKmC,MAAsD,KAA/C4B,EAAShE,OAASkE,IAAoC,KAGhEM,EAAmB,CACvBJ,SACEnE,KAAKmC,MAAsD,KAA/C2B,EAAazG,KAAO4G,IAAkC,IACpEG,QACEpE,KAAKmC,MAAoD,KAA7C2B,EAAaxG,IAAM2G,IAAiC,IAClEI,UACErE,KAAKmC,MAAwD,KAAjD2B,EAAajE,MAAQoE,IAAmC,IACtEK,WACEtE,KAAKmC,MAA0D,KAAnD2B,EAAa/D,OAASkE,IAClC,KAGJ3D,QAAQC,IAAI,qCAAsC2D,GAClD5D,QAAQC,IAAI,qCAAsCgE,GAGlD,MACMC,EACJxE,KAAKC,IAAIiE,EAAaC,UAFN,GAGhBnE,KAAKC,IAAIiE,EAAaE,SAHN,GAIhBpE,KAAKC,IAAIiE,EAAaG,WAJN,GAKhBrE,KAAKC,IAAIiE,EAAaI,YALN,EAOZG,EACJzE,KAAKC,IAAIsE,EAAiBJ,UARV,GAShBnE,KAAKC,IAAIsE,EAAiBH,SATV,GAUhBpE,KAAKC,IAAIsE,EAAiBF,WAVV,GAWhBrE,KAAKC,IAAIsE,EAAiBD,YAXV,EAalBhE,QAAQC,IACNiE,EACI,wCACA,4CAENlE,QAAQC,IACNkE,EACI,wCACA,4CAENnE,QAAQC,IAAI,WAAYb,EAAM,sBAAuB4B,GACrDhB,QAAQC,IAAI,qDACd,CAKQsD,iBAAAA,GACN,MAAM/H,EAASrB,KAAKqB,OACdI,EAAOzB,KAAK2C,SAASuB,MAE3B2B,QAAQC,IAAI,gCACZD,QAAQC,IAAI,mBAAoB,IAAIrE,MACpCoE,QAAQC,IAAI,kBAAmBrE,EAAKwI,QAGpC,MAAMC,EAAgBzI,EAAK0I,MAAM,MACjCtE,QAAQC,IAAI,2BAA4BoE,EAAcD,QACtDC,EAAcE,QAAQ,CAACC,EAAMC,KAC3BzE,QAAQC,IAAI,WAAWwE,EAAI,OAAOD,OAAUA,EAAKJ,mBAInD,MAAMM,EAAiB9D,OAAO+D,iBAAiBxK,KAAK2C,UACpDkD,QAAQC,IAAI,gCACZD,QAAQC,IAAI,YAAayE,EAAenF,OACxCS,QAAQC,IAAI,eAAgByE,EAAetE,UAC3CJ,QAAQC,IAAI,iBAAkByE,EAAerC,YAC7CrC,QAAQC,IAAI,iBAAkByE,EAAepC,YAC7CtC,QAAQC,IAAI,oBAAqByE,EAAe9B,eAChD5C,QAAQC,IAAI,iBAAkByE,EAAexC,YAC7ClC,QAAQC,IAAI,iBAAkByE,EAAe3G,YAC7CiC,QAAQC,IAAI,eAAgByE,EAAeE,UAC3C5E,QAAQC,IAAI,mBAAoByE,EAAezG,cAC/C+B,QAAQC,IAAI,gBAAiByE,EAAenH,WAC5CyC,QAAQC,IAAI,gBAAiByE,EAAelC,WAG5CxC,QAAQC,IAAI,qCACZD,QAAQC,IAAI,YAAczE,EAAe+D,OACzCS,QAAQC,IAAI,eAAgBzE,EAAO4E,UACnCJ,QAAQC,IAAI,iBAAkBzE,EAAO6G,YACrCrC,QAAQC,IAAI,iBAAkBzE,EAAO8G,YACrCtC,QAAQC,IAAI,kBAAmBzE,EAAO2E,aACtCH,QAAQC,IAAI,iBAAkBzE,EAAO0G,YACrClC,QAAQC,IAAI,gBAAkBzE,EAAe+B,WAC7CyC,QAAQC,IAAI,gBAAkBzE,EAAegH,WAC7CxC,QAAQC,IAAI,aAAczE,EAAO2F,QACjCnB,QAAQC,IAAI,aAAczE,EAAO6F,QAIjC,MAAMwD,EAAuB1K,KAAKqB,OAAOoG,kBAAkBrC,MAKrDuF,EAHwBxF,WAC5BsB,OAAO+D,iBAAiBxK,KAAK2C,UAAUyC,OAGfpF,KAAKoB,OAAO8D,UAChC0E,EAAYrE,KAAKC,IAAImF,EAAyBD,GAEpD7E,QAAQC,IAAI,kCACZD,QAAQC,IAAI,+BAAgC6E,GAC5C9E,QAAQC,IAAI,6BAA8B4E,GAC1C7E,QAAQC,IAAI,uBAAwB8D,EAAUgB,QAAQ,GAAK,MAC3D/E,QAAQC,IACN8D,EAAY,EACR,8BACA,iDAIN,MAAMiB,EACJ,sEAAsE5H,KACpExB,GAEEqJ,EAAc,kBAAkB7H,KAAKxB,IAAS,WAAWwB,KAAKxB,GAEpEoE,QAAQC,IAAI,+BACZD,QAAQC,IAAI,yBAA0B+E,GACtChF,QAAQC,IAAI,0BAA2BgF,GACvCjF,QAAQC,IAAI,yBAA0ByE,EAAenH,WACrDyC,QAAQC,IAAI,uBAAyBzE,EAAe+B,WAAa,QACjEyC,QAAQC,IAAI,2BAA4ByE,EAAelH,aAGvD,MAAM0H,EAAuB/K,KAAK2C,SAASqI,aACrCC,EACJ9F,WAAWoF,EAAexC,aACY,IAAtC5C,WAAWoF,EAAetE,UACtBiF,EAAyB3F,KAAKmC,MAClCqD,EAAuBE,GAGzBpF,QAAQC,IAAI,2BACZD,QAAQC,IAAI,4BAA6BiF,GACzClF,QAAQC,IAAI,0BAA2BmF,GACvCpF,QAAQC,IAAI,+BAAgCoF,GAC5CrF,QAAQC,IAAI,2BAA4BoE,EAAcD,QAElDiB,EAAyBhB,EAAcD,QACzCpE,QAAQC,IAAI,yCACZD,QAAQC,IACN,oBACAoF,EAAyBhB,EAAcD,SAGzCpE,QAAQC,IAAI,mCAGdD,QAAQC,IAAI,qDACd,CAMQ/D,aAAAA,GAKN/B,KAAKqB,OAAO4C,QAAU,IAGrBjE,KAAKqB,OAAe8J,UAAW,EAC/BnL,KAAKqB,OAAe+J,WAAY,EAGjCpL,KAAKqB,OAAOgK,IAAI,CACdC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,eAAe,IAIjB1L,KAAKoB,OAAOuK,gBAAgB3L,KAAKqB,QAEjCrB,KAAKoB,OAAOuE,mBACZ3F,KAAKqB,OAAOoE,YACZzF,KAAK8E,oBAEL9E,KAAK2C,SAASiJ,QAEd5L,KAAK2C,SAASkJ,kBACZ7L,KAAK2C,SAASuB,MAAM+F,OACpBjK,KAAK2C,SAASuB,MAAM+F,QAItBjK,KAAKoB,OAAOuK,gBAAgB3L,KAAKqB,QACjCrB,KAAKoB,OAAOuE,kBACd,CAKO7D,OAAAA,GACD9B,KAAKgF,aACThF,KAAK6E,gBAEP,CAKOiH,OAAAA,GAAsC,IAA9BC,IAAeC,UAAA/B,OAAA,QAAAgC,IAAAD,UAAA,KAAAA,UAAA,GAC5B,IAAIhM,KAAKgF,YAAT,CAsBA,GArBAhF,KAAKgF,aAAc,EAEnBhF,KAAKyE,uBAGAzE,KAAKqB,OAAe6K,kBAAoBlM,OAC1CA,KAAKqB,OAAe6K,qBAAkBD,OAGeA,IAAjDjM,KAAKqB,OAAe8K,2BACvBnM,KAAKqB,OAAO4C,QAAWjE,KAAKqB,OAAe8K,gCACnCnM,KAAKqB,OAAe8K,2BAK5BnM,KAAKqC,QAAQ+J,YACfpM,KAAKqC,QAAQ+J,WAAWC,YAAYrM,KAAKqC,SAIvC0J,IAAW/L,KAAKsM,YAAa,CAC/B,MAAMC,EAAYvM,KAAK2C,SAASuB,MAC5BlE,KAAKsB,UACPtB,KAAKsB,SAASiL,EAElB,MAAYR,GAAU/L,KAAKuB,UACzBvB,KAAKuB,WAQPiL,WAAW,KACTxM,KAAKoB,OAAOY,cAAcG,MAAMsK,OAAS,GAEzCzM,KAAKoB,OAAOsL,UAAU1M,KAAKoB,OAAOuL,gBACjC,GAGH3M,KAAKoB,OAAOuE,kBA3CU,CA4CxB,CAGQzF,WAAAA,GACDF,KAAKsM,aAAetM,KAAKqB,OAAOI,OAASzB,KAAK2C,SAASuB,QAE1DlE,KAAKqB,OAAOI,KAAOzB,KAAK2C,SAASuB,MAIjClE,KAAK4M,qBAGJ5M,KAAKqB,OAAe8J,UAAW,EAC/BnL,KAAKqB,OAAe+J,WAAY,EACjCpL,KAAKoB,OAAOuK,gBAAgB3L,KAAKqB,QACjCrB,KAAKoB,OAAOuE,mBAEhB,CAEQiH,kBAAAA,GAEN,MAAMC,EAAY7M,KAAK2C,SAASkK,UAC1BC,EAAY3H,WAAWnF,KAAKqC,QAAQF,MAAMmD,QAAU,KAM1DtF,KAAK2C,SAASR,MAAMmD,OAAS,MAI7B,MAIMyH,EAJe/M,KAAK2C,SAASqI,aAGpB,EAIOzF,KAAKC,IAAIuH,EAAYD,GAAa,GAItD9M,KAAK2C,SAASR,MAAMmD,OAAS,GAAGyH,MAChC/M,KAAKqC,QAAQF,MAAMmD,OAAS,GAAGyH,MAC/B/M,KAAK+E,sBAIL/E,KAAK2C,SAASR,MAAMmD,OAAStF,KAAKqC,QAAQF,MAAMmD,OAIlDtF,KAAK2C,SAASkK,UAAYA,CAC5B,CAEQxM,aAAAA,CAAc2M,GACN,WAAVA,EAAEC,KACJD,EAAEE,iBACFlN,KAAK8L,SAAQ,KACHkB,EAAEG,SAAWH,EAAEI,UAAsB,UAAVJ,EAAEC,KACvCD,EAAEE,iBACFlN,KAAK8L,SAAQ,IAEH,UAAVkB,EAAEC,KACQ,cAAVD,EAAEC,KACQ,WAAVD,EAAEC,MAIFrH,sBAAsB,KACf5F,KAAKgF,aACRhF,KAAK4M,uBAGTJ,WAAW,KACJxM,KAAKgF,aACRhF,KAAK4M,sBAEN,IAEP,CAEQ3L,WAAAA,GACN,CAGMV,UAAAA,GAEDP,KAAKsM,aACRtM,KAAK8L,SAAQ,EAEjB,CAEQrL,sBAAAA,GACNT,KAAKsM,aAAc,CACrB,CAEQ3L,oBAAAA,GACNX,KAAKsM,aAAc,EACnBtM,KAAKE,aACP,CAEQW,iBAAAA,GACNb,KAAK8B,SACP,CAEQf,gBAAAA,GACNf,KAAK8B,SACP,CAEQX,eAAAA,CAAgB6L,GAClBA,EAAE3L,SAAWrB,KAAKqB,QACpBrB,KAAK8L,SAAQ,EAEjB,CAKQtH,4BAAAA,GAELxE,KAAKoB,OAAeiM,kBAAoBrN,KAAKoB,OAAOkM,QACpDtN,KAAKoB,OAAemM,+BACnBvN,KAAKoB,OAAOoM,qBACbxN,KAAKoB,OAAe8K,gBAAkBlM,KAGvC,MAAMyN,EAAkBzN,KAAKoB,OAAOkM,QAAQnN,KAAKH,KAAKoB,QACtDpB,KAAKoB,OAAOkM,QAAWpJ,IACrB,MAAMwJ,EAASD,EAAgBvJ,GAI/B,OAHKlE,KAAKoB,OAAe8K,kBAAoBlM,KAAKgF,aAChDhF,KAAK8B,UAEA4L,GAIT,MAAMC,EAA+B3N,KAAKoB,OAAOoM,qBAAqBrN,KACpEH,KAAKoB,QAEPpB,KAAKoB,OAAOoM,qBAAwB3G,IAClC,MAAM6G,EAASC,EAA6B9G,GAI5C,OAHK7G,KAAKoB,OAAe8K,kBAAoBlM,KAAKgF,aAChDhF,KAAK8B,UAEA4L,EAEX,CAKQ9I,8BAAAA,GACD5E,KAAKoB,OAAeiM,oBACvBrN,KAAKoB,OAAOkM,QAAWtN,KAAKoB,OAAeiM,yBACnCrN,KAAKoB,OAAeiM,mBAEzBrN,KAAKoB,OAAemM,iCACvBvN,KAAKoB,OAAOoM,qBACVxN,KAAKoB,OACLmM,sCACMvN,KAAKoB,OAAemM,uCAEtBvN,KAAKoB,OAAe8K,eAC9B,EAMK,SAAS0B,EACdxM,EACAC,EACAvB,GAMKuB,EAAe6K,iBACjB7K,EAAe6K,gBAAgBJ,SAAQ,GAIzCzK,EAAe8K,yBAA2B9K,EAAO4C,QAElD,MAAM4J,EAAS,IAAIjO,EAAc,CAC/BwB,SACAC,SACAC,SAAUxB,aAAO,EAAPA,EAASwB,SACnBC,SAAUzB,aAAO,EAAPA,EAASyB,WAQrB,OAFCF,EAAe6K,gBAAkB2B,EAE3BA,CACT"}
1	+ {"version":3,"file":"overlayEditor.min.mjs","sources":["../../../src/text/overlayEditor.ts"],"sourcesContent":["/*\n Canva/Polotno-style Overlay Text Editor\n \n Provides seamless inline text editing using an HTML textarea overlay\n * that matches canvas text positioning, styling, and transformations.\n /\n\nimport type { Canvas } from '../canvas/Canvas';\nimport type { FabricText } from '../shapes/Text/Text';\nimport type { IText } from '../shapes/IText/IText';\nimport type { Textbox } from '../shapes/Textbox';\nimport type { TPointerEventInfo } from '../EventTypeDefs';\nimport type { TMat2D } from '../typedefs';\nimport { transformPoint } from '../util/misc/matrix';\n\nexport interface OverlayEditorOptions {\n canvas: Canvas;\n target: FabricText \| IText \| Textbox;\n onCommit?: (text: string) => void;\n onCancel?: () => void;\n}\n\nexport interface ScreenTransform {\n translateX: number;\n translateY: number;\n scaleX: number;\n scaleY: number;\n angle: number; // in radians\n}\n\nexport class OverlayEditor {\n private canvas: Canvas;\n private target: FabricText \| IText \| Textbox;\n private container: HTMLElement;\n private textarea: HTMLTextAreaElement;\n private hostDiv: HTMLDivElement;\n private isDestroyed = false;\n private isComposing = false;\n private lastText: string;\n private onCommit?: (text: string) => void;\n private onCancel?: () => void;\n\n // Bound event handlers for cleanup\n private boundHandlers = {\n onInput: this.handleInput.bind(this),\n onKeyDown: this.handleKeyDown.bind(this),\n onBlur: this.handleBlur.bind(this),\n onCompositionStart: this.handleCompositionStart.bind(this),\n onCompositionEnd: this.handleCompositionEnd.bind(this),\n onAfterRender: this.handleAfterRender.bind(this),\n onMouseWheel: this.handleMouseWheel.bind(this),\n onFocus: this.handleFocus.bind(this),\n onMouseDown: this.handleMouseDown.bind(this),\n };\n\n constructor(options: OverlayEditorOptions) {\n this.canvas = options.canvas;\n this.target = options.target;\n this.onCommit = options.onCommit;\n this.onCancel = options.onCancel;\n this.lastText = this.target.text \|\| '';\n\n this.container = this.getCanvasContainer();\n this.createOverlayDOM();\n this.attachEventListeners();\n this.refresh();\n this.focusTextarea();\n\n // Note: Don't manage object cursors since IText manages all cursors in _saveEditingProps/_restoreEditingProps\n // The IText editing system handles hoverCursor, moveCursor, and canvas cursors properly\n\n // Note: Canvas cursors are handled by IText's _saveEditingProps/_restoreEditingProps\n // We don't need to save/restore them here as it would conflict with IText's restoration\n }\n\n /\n Get the container element for the overlay (parent of upperCanvasEl)\n /\n private getCanvasContainer(): HTMLElement {\n const upperCanvas = this.canvas.upperCanvasEl;\n const container = upperCanvas.parentElement;\n if (!container) {\n throw new Error('Canvas must be mounted in DOM to use overlay editing');\n }\n\n // Ensure the container is positioned for absolute overlay positioning\n container.style.position = 'relative';\n\n return container;\n }\n\n /\n Create the overlay DOM structure\n /\n private createOverlayDOM(): void {\n // Host div for positioning and overflow control\n this.hostDiv = document.createElement('div');\n this.hostDiv.style.position = 'absolute';\n this.hostDiv.style.pointerEvents = 'none';\n this.hostDiv.style.zIndex = '1000';\n this.hostDiv.style.transformOrigin = 'left top';\n\n // Textarea for actual text input\n this.textarea = document.createElement('textarea');\n this.textarea.style.position = 'absolute';\n this.textarea.style.left = '0';\n this.textarea.style.top = '0';\n this.textarea.style.margin = '0';\n this.textarea.style.resize = 'none';\n this.textarea.style.pointerEvents = 'auto';\n // Set appropriate unicodeBidi based on content and direction\n const hasArabicText =\n /[\\u0600-\\u06FF\\u0750-\\u077F\\uFB50-\\uFDFF\\uFE70-\\uFEFF]/.test(\n this.target.text \|\| '',\n );\n const hasLatinText = /[a-zA-Z]/.test(this.target.text \|\| '');\n const isLTRDirection = (this.target as any).direction === 'ltr';\n\n if (hasArabicText && hasLatinText && isLTRDirection) {\n // For mixed Arabic/Latin text in LTR mode, use embed for consistent line wrapping\n this.textarea.style.unicodeBidi = 'embed';\n } else if (hasArabicText && isLTRDirection) {\n // For Arabic text in LTR mode, use embed to preserve shaping while respecting direction\n this.textarea.style.unicodeBidi = 'embed';\n } else {\n // Default to plaintext for natural text flow\n this.textarea.style.unicodeBidi = 'plaintext';\n }\n this.textarea.style.caretColor = 'auto';\n\n // Polotno-like base\n this.textarea.style.border = 'none';\n this.textarea.style.padding = '0';\n this.textarea.style.background = 'transparent'; // Transparent so Fabric text shows through\n this.textarea.style.outline = 'none';\n this.textarea.style.overflow = 'hidden'; // Prevent scrollbars\n this.textarea.style.whiteSpace = 'pre-wrap';\n this.textarea.style.wordBreak = 'normal';\n this.textarea.style.overflowWrap = 'break-word';\n this.textarea.style.userSelect = 'text';\n this.textarea.style.textTransform = 'none';\n\n // Start visible - we'll handle transitions differently\n this.textarea.style.opacity = '1';\n\n // Set initial text\n this.textarea.value = this.target.text \|\| '';\n\n this.hostDiv.appendChild(this.textarea);\n document.body.appendChild(this.hostDiv);\n }\n\n /\n Attach all event listeners\n /\n private attachEventListeners(): void {\n // Textarea events\n this.textarea.addEventListener('input', this.boundHandlers.onInput);\n this.textarea.addEventListener('keydown', this.boundHandlers.onKeyDown);\n this.textarea.addEventListener('blur', this.boundHandlers.onBlur);\n this.textarea.addEventListener(\n 'compositionstart',\n this.boundHandlers.onCompositionStart,\n );\n this.textarea.addEventListener(\n 'compositionend',\n this.boundHandlers.onCompositionEnd,\n );\n this.textarea.addEventListener('focus', this.boundHandlers.onFocus);\n\n // Canvas events for synchronization\n this.canvas.on('after:render', this.boundHandlers.onAfterRender);\n this.canvas.on('mouse:wheel', this.boundHandlers.onMouseWheel);\n this.canvas.on('mouse:down', this.boundHandlers.onMouseDown);\n\n // Store original methods to detect viewport changes\n this.setupViewportChangeDetection();\n }\n\n /\n Remove all event listeners\n /\n private removeEventListeners(): void {\n this.textarea.removeEventListener('input', this.boundHandlers.onInput);\n this.textarea.removeEventListener('keydown', this.boundHandlers.onKeyDown);\n this.textarea.removeEventListener('blur', this.boundHandlers.onBlur);\n this.textarea.removeEventListener(\n 'compositionstart',\n this.boundHandlers.onCompositionStart,\n );\n this.textarea.removeEventListener(\n 'compositionend',\n this.boundHandlers.onCompositionEnd,\n );\n this.textarea.removeEventListener('focus', this.boundHandlers.onFocus);\n\n this.canvas.off('after:render', this.boundHandlers.onAfterRender);\n this.canvas.off('mouse:wheel', this.boundHandlers.onMouseWheel);\n this.canvas.off('mouse:down', this.boundHandlers.onMouseDown);\n\n // Restore original methods\n this.restoreViewportChangeDetection();\n }\n\n /\n Simple method to refresh positioning when canvas changes\n /\n private updatePosition(): void {\n this.applyOverlayStyle();\n }\n\n /\n Update the Fabric object bounds to match current textarea size\n * This ensures Fabric.js selection controls follow the growing textbox\n /\n private updateObjectBounds(): void {\n if (this.isDestroyed) return;\n\n const target = this.target;\n const zoom = this.canvas.getZoom();\n\n // Get current textbox dimensions from the host div (in canvas coordinates)\n const currentWidth = parseFloat(this.hostDiv.style.width) / zoom;\n const currentHeight = parseFloat(this.hostDiv.style.height) / zoom;\n\n // Always update height for responsive controls (especially important for line deletion)\n const heightDiff = Math.abs(currentHeight - target.height);\n const threshold = 0.5; // Lower threshold for better responsiveness to line changes\n\n if (heightDiff > threshold) {\n const oldHeight = target.height;\n target.height = currentHeight;\n target.setCoords(); // Update control positions\n\n // Force dirty to ensure proper re-rendering\n target.dirty = true;\n this.canvas.requestRenderAll(); // Re-render to show updated selection\n\n // IMPORTANT: Reposition overlay after height change\n requestAnimationFrame(() => {\n if (!this.isDestroyed) {\n this.applyOverlayStyle();\n console.log(\n '📐 Height changed - rechecking alignment after repositioning:',\n );\n }\n });\n }\n }\n\n /\n Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)\n /\n private letterSpacingPx(charSpacing: number, fontSize: number): number {\n return (charSpacing / 1000) fontSize;\n }\n\n /*\n Detect text direction using first strong directional character\n /\n private firstStrongDir(text: string): 'ltr' \| 'rtl' {\n // Hebrew: \\u0590-\\u05FF, Arabic: \\u0600-\\u06FF, \\u0750-\\u077F, \\uFB50-\\uFDFF, \\uFE70-\\uFEFF\n const rtlRegex =\n /[\\u0590-\\u05FF\\u0600-\\u06FF\\u0750-\\u077F\\uFB50-\\uFDFF\\uFE70-\\uFEFF]/;\n return rtlRegex.test(text) ? 'rtl' : 'ltr';\n }\n\n private applyOverlayStyle(): void {\n const target = this.target;\n const canvas = this.canvas;\n\n // 1. Freshen object's transformations - use aCoords like rtl-test.html\n target.setCoords();\n const aCoords = target.aCoords;\n\n // 2. Get canvas position and scroll offsets (like rtl-test.html)\n const canvasEl = canvas.upperCanvasEl;\n const canvasRect = canvasEl.getBoundingClientRect();\n const scrollX = window.scrollX \|\| window.pageXOffset;\n const scrollY = window.scrollY \|\| window.pageYOffset;\n\n // 3. Position and dimensions accounting for Fabric Textbox padding and viewport transform\n const zoom = canvas.getZoom();\n const vpt = canvas.viewportTransform;\n const padding = (target as any).padding \|\| 0;\n const paddingX = padding (target.scaleX \|\| 1) * zoom;\n const paddingY = padding * (target.scaleY \|\| 1) * zoom;\n\n // Transform object's top-left corner coordinates to screen coordinates using viewport transform\n // aCoords.tl already accounts for object positioning and scaling, just need viewport transform\n const screenPoint = transformPoint(\n { x: aCoords.tl.x, y: aCoords.tl.y },\n vpt,\n );\n\n const left = canvasRect.left + scrollX + screenPoint.x;\n const top = canvasRect.top + scrollY + screenPoint.y;\n\n // 4. Calculate the precise width and height for the container\n // THE FIX: Use getBoundingRect() for BOTH width and height.\n // This is the most reliable measure of the object's final rendered dimensions.\n const objectBounds = target.getBoundingRect();\n const width = Math.round(objectBounds.width * zoom);\n const height = Math.round(objectBounds.height * zoom);\n\n // 5. Apply styles to host DIV - absolute positioning like rtl-test.html\n this.hostDiv.style.position = 'absolute';\n this.hostDiv.style.left = `${left}px`;\n this.hostDiv.style.top = `${top}px`;\n this.hostDiv.style.width = `${width}px`;\n this.hostDiv.style.height = `${height}px`;\n this.hostDiv.style.overflow = 'hidden'; // Prevent scrollbars in host div\n // Apply rotation matching Fabric.js object transformation\n if (target.angle) {\n this.hostDiv.style.transform = `rotate(${target.angle}deg)`;\n this.hostDiv.style.transformOrigin = 'top left'; // Match Fabric Textbox behavior\n } else {\n this.hostDiv.style.transform = '';\n this.hostDiv.style.transformOrigin = '';\n }\n\n // 6. Style the textarea - match Fabric's exact rendering with padding\n const baseFontSize = target.fontSize ?? 16;\n // Use scaleX for font scaling to match Fabric text scaling exactly\n const scaleX = target.scaleX \|\| 1;\n const finalFontSize = baseFontSize * scaleX * zoom;\n const fabricLineHeight = target.lineHeight \|\| 1.16;\n // THE FIX: Use 'border-box' so the width property includes padding.\n // This makes alignment much easier and more reliable.\n this.textarea.style.boxSizing = 'border-box';\n\n // THE FIX: Set the textarea width to be IDENTICAL to the host div's width.\n // The padding will now be correctly contained inside this width.\n this.textarea.style.width = `${width}px`;\n this.textarea.style.height = '100%'; // Let hostDiv control height\n this.textarea.style.padding = `${paddingY}px ${paddingX}px`;\n\n // Apply all other font and text styles to match Fabric\n const letterSpacingPx = ((target.charSpacing \|\| 0) / 1000) * finalFontSize;\n\n this.textarea.style.fontSize = `${finalFontSize}px`;\n this.textarea.style.lineHeight = String(fabricLineHeight);\n this.textarea.style.fontFamily = target.fontFamily \|\| 'Arial';\n this.textarea.style.fontWeight = String(target.fontWeight \|\| 'normal');\n this.textarea.style.fontStyle = target.fontStyle \|\| 'normal';\n // Handle text alignment and justification\n const textAlign = (target as any).textAlign \|\| 'left';\n let cssTextAlign = textAlign;\n \n // Detect text direction from content for proper justify handling\n const autoDetectedDirection = this.firstStrongDir(this.textarea.value \|\| '');\n \n // DEBUG: Log alignment details\n console.log('🔍 ALIGNMENT DEBUG:');\n console.log(' Fabric textAlign:', textAlign);\n console.log(' Fabric direction:', (target as any).direction);\n console.log(' Text content:', JSON.stringify(target.text));\n console.log(' Detected direction:', autoDetectedDirection);\n \n // Map fabric.js justify to CSS\n if (textAlign.includes('justify')) {\n // Try to match fabric.js justify behavior more precisely\n try {\n // For justify, we need to replicate fabric.js space expansion\n // Use CSS justify but with specific settings to match fabric.js better\n cssTextAlign = 'justify';\n \n // Set text-align-last based on justify type and detected direction\n // Smart justify: respect detected direction even when fabric alignment doesn't match\n if (textAlign === 'justify') {\n this.textarea.style.textAlignLast = autoDetectedDirection === 'rtl' ? 'right' : 'left';\n } else if (textAlign === 'justify-left') {\n // If text is RTL but fabric says justify-left, override to justify-right for better UX\n if (autoDetectedDirection === 'rtl') {\n this.textarea.style.textAlignLast = 'right';\n console.log(' → Overrode justify-left to justify-right for RTL text');\n } else {\n this.textarea.style.textAlignLast = 'left';\n }\n } else if (textAlign === 'justify-right') {\n // If text is LTR but fabric says justify-right, override to justify-left for better UX \n if (autoDetectedDirection === 'ltr') {\n this.textarea.style.textAlignLast = 'left';\n console.log(' → Overrode justify-right to justify-left for LTR text');\n } else {\n this.textarea.style.textAlignLast = 'right';\n }\n } else if (textAlign === 'justify-center') {\n this.textarea.style.textAlignLast = 'center';\n }\n \n // Enhanced justify settings for better fabric.js matching\n (this.textarea.style as any).textJustify = 'inter-word';\n (this.textarea.style as any).wordSpacing = 'normal';\n \n // Additional CSS properties for better justify matching\n this.textarea.style.textAlign = 'justify';\n this.textarea.style.textAlignLast = this.textarea.style.textAlignLast;\n \n // Try to force better justify behavior\n (this.textarea.style as any).textJustifyTrim = 'none';\n (this.textarea.style as any).textAutospace = 'none';\n \n console.log(' → Applied justify alignment:', textAlign, 'with last-line:', this.textarea.style.textAlignLast);\n } catch (error) {\n console.warn(' → Justify setup failed, falling back to standard alignment:', error);\n cssTextAlign = textAlign.replace('justify-', '').replace('justify', 'left');\n }\n } else {\n this.textarea.style.textAlignLast = 'auto';\n (this.textarea.style as any).textJustify = 'auto';\n (this.textarea.style as any).wordSpacing = 'normal';\n console.log(' → Applied standard alignment:', cssTextAlign);\n }\n \n this.textarea.style.textAlign = cssTextAlign;\n this.textarea.style.color = target.fill?.toString() \|\| '#000';\n this.textarea.style.letterSpacing = `${letterSpacingPx}px`;\n \n // Use the already detected direction from above\n const fabricDirection = (target as any).direction;\n \n // Use auto-detected direction for better BiDi support, but respect fabric direction if it makes sense\n this.textarea.style.direction = autoDetectedDirection \|\| fabricDirection \|\| 'ltr';\n this.textarea.style.fontVariant = 'normal';\n this.textarea.style.fontStretch = 'normal';\n this.textarea.style.textRendering = 'auto'; // Changed from 'optimizeLegibility' to match canvas\n this.textarea.style.fontKerning = 'normal';\n this.textarea.style.fontFeatureSettings = 'normal';\n this.textarea.style.fontVariationSettings = 'normal';\n this.textarea.style.margin = '0';\n this.textarea.style.border = 'none';\n this.textarea.style.outline = 'none';\n this.textarea.style.background = 'transparent';\n this.textarea.style.overflowWrap = 'break-word';\n this.textarea.style.whiteSpace = 'pre-wrap';\n this.textarea.style.hyphens = 'none';\n \n // DEBUG: Log final CSS properties\n console.log('🎨 FINAL TEXTAREA CSS:');\n console.log(' textAlign:', this.textarea.style.textAlign);\n console.log(' textAlignLast:', this.textarea.style.textAlignLast);\n console.log(' direction:', this.textarea.style.direction);\n console.log(' unicodeBidi:', this.textarea.style.unicodeBidi);\n console.log(' width:', this.textarea.style.width);\n console.log(' textJustify:', (this.textarea.style as any).textJustify);\n console.log(' wordSpacing:', (this.textarea.style as any).wordSpacing);\n console.log(' whiteSpace:', this.textarea.style.whiteSpace);\n \n // If justify, log Fabric object dimensions for comparison\n if (textAlign.includes('justify')) {\n console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');\n console.log(' Fabric width:', (target as any).width);\n console.log(' Fabric calcTextWidth:', (target as any).calcTextWidth?.());\n console.log(' Fabric textAlign:', (target as any).textAlign);\n console.log(' Text lines:', (target as any).textLines);\n }\n \n // Debug font properties matching\n console.log('🔤 FONT PROPERTIES COMPARISON:');\n console.log(' Fabric fontFamily:', target.fontFamily);\n console.log(' Fabric fontWeight:', target.fontWeight);\n console.log(' Fabric fontStyle:', target.fontStyle);\n console.log(' Fabric fontSize:', target.fontSize);\n console.log(' → Textarea fontFamily:', this.textarea.style.fontFamily);\n console.log(' → Textarea fontWeight:', this.textarea.style.fontWeight);\n console.log(' → Textarea fontStyle:', this.textarea.style.fontStyle);\n console.log(' → Textarea fontSize:', this.textarea.style.fontSize);\n \n console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');\n \n // Enhanced font rendering to better match fabric.js canvas rendering\n // Default to auto for more natural rendering\n (this.textarea.style as any).webkitFontSmoothing = 'auto';\n (this.textarea.style as any).mozOsxFontSmoothing = 'auto';\n (this.textarea.style as any).fontSmooth = 'auto';\n (this.textarea.style as any).textSizeAdjust = 'none';\n \n // For bold fonts, use subpixel rendering to match canvas thickness better\n const fontWeight = String(target.fontWeight \|\| 'normal');\n const isBold = fontWeight === 'bold' \|\| fontWeight === '700' \|\| \n (parseInt(fontWeight) >= 600);\n \n if (isBold) {\n (this.textarea.style as any).webkitFontSmoothing = 'subpixel-antialiased';\n (this.textarea.style as any).mozOsxFontSmoothing = 'unset';\n console.log('🔤 Applied enhanced bold rendering for better thickness matching');\n }\n \n console.log('🎨 FONT SMOOTHING APPLIED:');\n console.log(' webkitFontSmoothing:', (this.textarea.style as any).webkitFontSmoothing);\n console.log(' mozOsxFontSmoothing:', (this.textarea.style as any).mozOsxFontSmoothing);\n\n\n // Initial bounds are set correctly by Fabric.js - don't force update here\n }\n\n /*\n Debug method to compare textarea and canvas object bounding boxes\n /\n private debugBoundingBoxComparison(): void {\n const target = this.target;\n const canvas = this.canvas;\n const zoom = canvas.getZoom();\n\n // Get textarea bounding box (in screen coordinates)\n const textareaRect = this.textarea.getBoundingClientRect();\n const hostRect = this.hostDiv.getBoundingClientRect();\n\n // Get canvas object bounding box (in screen coordinates)\n const canvasBounds = target.getBoundingRect();\n const canvasRect = canvas.upperCanvasEl.getBoundingClientRect();\n\n // Convert canvas object bounds to screen coordinates\n const vpt = canvas.viewportTransform;\n const screenObjectBounds = {\n left: canvasRect.left + canvasBounds.left zoom + vpt[4],\n top: canvasRect.top + canvasBounds.top * zoom + vpt[5],\n width: canvasBounds.width * zoom,\n height: canvasBounds.height * zoom,\n };\n\n console.log('🔍 BOUNDING BOX COMPARISON:');\n console.log('📦 Textarea Rect:', {\n left: Math.round(textareaRect.left * 100) / 100,\n top: Math.round(textareaRect.top * 100) / 100,\n width: Math.round(textareaRect.width * 100) / 100,\n height: Math.round(textareaRect.height * 100) / 100,\n });\n console.log('📦 Host Div Rect:', {\n left: Math.round(hostRect.left * 100) / 100,\n top: Math.round(hostRect.top * 100) / 100,\n width: Math.round(hostRect.width * 100) / 100,\n height: Math.round(hostRect.height * 100) / 100,\n });\n console.log('📦 Canvas Object Bounds (screen):', {\n left: Math.round(screenObjectBounds.left * 100) / 100,\n top: Math.round(screenObjectBounds.top * 100) / 100,\n width: Math.round(screenObjectBounds.width * 100) / 100,\n height: Math.round(screenObjectBounds.height * 100) / 100,\n });\n console.log('📦 Canvas Object Bounds (canvas):', canvasBounds);\n\n // Calculate differences\n const hostVsObject = {\n leftDiff:\n Math.round((hostRect.left - screenObjectBounds.left) * 100) / 100,\n topDiff: Math.round((hostRect.top - screenObjectBounds.top) * 100) / 100,\n widthDiff:\n Math.round((hostRect.width - screenObjectBounds.width) * 100) / 100,\n heightDiff:\n Math.round((hostRect.height - screenObjectBounds.height) * 100) / 100,\n };\n\n const textareaVsObject = {\n leftDiff:\n Math.round((textareaRect.left - screenObjectBounds.left) * 100) / 100,\n topDiff:\n Math.round((textareaRect.top - screenObjectBounds.top) * 100) / 100,\n widthDiff:\n Math.round((textareaRect.width - screenObjectBounds.width) * 100) / 100,\n heightDiff:\n Math.round((textareaRect.height - screenObjectBounds.height) * 100) /\n 100,\n };\n\n console.log('📏 Host Div vs Canvas Object Diff:', hostVsObject);\n console.log('📏 Textarea vs Canvas Object Diff:', textareaVsObject);\n\n // Check if they're aligned (within 2px tolerance)\n const tolerance = 2;\n const hostAligned =\n Math.abs(hostVsObject.leftDiff) < tolerance &&\n Math.abs(hostVsObject.topDiff) < tolerance &&\n Math.abs(hostVsObject.widthDiff) < tolerance &&\n Math.abs(hostVsObject.heightDiff) < tolerance;\n\n const textareaAligned =\n Math.abs(textareaVsObject.leftDiff) < tolerance &&\n Math.abs(textareaVsObject.topDiff) < tolerance &&\n Math.abs(textareaVsObject.widthDiff) < tolerance &&\n Math.abs(textareaVsObject.heightDiff) < tolerance;\n\n console.log(\n hostAligned\n ? '✅ Host Div ALIGNED with canvas object'\n : '❌ Host Div MISALIGNED with canvas object',\n );\n console.log(\n textareaAligned\n ? '✅ Textarea ALIGNED with canvas object'\n : '❌ Textarea MISALIGNED with canvas object',\n );\n console.log('🔍 Zoom:', zoom, 'Viewport Transform:', vpt);\n console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');\n }\n\n /*\n Debug method to compare text wrapping between textarea and Fabric text object\n /\n private debugTextWrapping(): void {\n const target = this.target;\n const text = this.textarea.value;\n\n console.log('📝 TEXT WRAPPING COMPARISON:');\n console.log('📄 Text Content:', `\"${text}\"`);\n console.log('📄 Text Length:', text.length);\n\n // Analyze line breaks\n const explicitLines = text.split('\\n');\n console.log('📄 Explicit Lines (\\\\n):', explicitLines.length);\n explicitLines.forEach((line, i) => {\n console.log(` Line ${i + 1}: \"${line}\" (${line.length} chars)`);\n });\n\n // Get textarea computed styles for wrapping analysis\n const textareaStyles = window.getComputedStyle(this.textarea);\n console.log('📐 Textarea Wrapping Styles:');\n console.log(' width:', textareaStyles.width);\n console.log(' fontSize:', textareaStyles.fontSize);\n console.log(' fontFamily:', textareaStyles.fontFamily);\n console.log(' fontWeight:', textareaStyles.fontWeight);\n console.log(' letterSpacing:', textareaStyles.letterSpacing);\n console.log(' lineHeight:', textareaStyles.lineHeight);\n console.log(' whiteSpace:', textareaStyles.whiteSpace);\n console.log(' wordWrap:', textareaStyles.wordWrap);\n console.log(' overflowWrap:', textareaStyles.overflowWrap);\n console.log(' direction:', textareaStyles.direction);\n console.log(' textAlign:', textareaStyles.textAlign);\n\n // Get Fabric text object properties for comparison\n console.log('📐 Fabric Text Object Properties:');\n console.log(' width:', (target as any).width);\n console.log(' fontSize:', target.fontSize);\n console.log(' fontFamily:', target.fontFamily);\n console.log(' fontWeight:', target.fontWeight);\n console.log(' charSpacing:', target.charSpacing);\n console.log(' lineHeight:', target.lineHeight);\n console.log(' direction:', (target as any).direction);\n console.log(' textAlign:', (target as any).textAlign);\n console.log(' scaleX:', target.scaleX);\n console.log(' scaleY:', target.scaleY);\n\n // Calculate effective dimensions for comparison - use actual rendered width\n // THE FIX:* Use getBoundingRect to get the actual rendered width of the Fabric object.\n const fabricEffectiveWidth = this.target.getBoundingRect().width;\n // Use the exact width set on textarea for comparison\n const textareaComputedWidth = parseFloat(\n window.getComputedStyle(this.textarea).width,\n );\n const textareaEffectiveWidth =\n textareaComputedWidth / this.canvas.getZoom();\n const widthDiff = Math.abs(textareaEffectiveWidth - fabricEffectiveWidth);\n\n console.log('📏 Effective Width Comparison:');\n console.log(' Textarea Effective Width:', textareaEffectiveWidth);\n console.log(' Fabric Effective Width:', fabricEffectiveWidth);\n console.log(' Width Difference:', widthDiff.toFixed(2) + 'px');\n console.log(\n widthDiff < 1\n ? '✅ Widths MATCH for wrapping'\n : '❌ Width MISMATCH may cause different wrapping',\n );\n\n // Check text direction and bidi handling\n const hasRTLText =\n /[\\u0590-\\u05FF\\u0600-\\u06FF\\u0750-\\u077F\\uFB50-\\uFDFF\\uFE70-\\uFEFF]/.test(\n text,\n );\n const hasBidiText = /[\\u0590-\\u06FF]/.test(text) && /[a-zA-Z]/.test(text);\n\n console.log('🌍 Text Direction Analysis:');\n console.log(' Has RTL characters:', hasRTLText);\n console.log(' Has mixed Bidi text:', hasBidiText);\n console.log(' Textarea direction:', textareaStyles.direction);\n console.log(' Fabric direction:', (target as any).direction \|\| 'auto');\n console.log(' Textarea unicodeBidi:', textareaStyles.unicodeBidi);\n\n // Measure actual rendered line count\n const textareaScrollHeight = this.textarea.scrollHeight;\n const textareaLineHeight =\n parseFloat(textareaStyles.lineHeight) \|\|\n parseFloat(textareaStyles.fontSize) * 1.2;\n const estimatedTextareaLines = Math.round(\n textareaScrollHeight / textareaLineHeight,\n );\n\n console.log('📊 Line Count Analysis:');\n console.log(' Textarea scrollHeight:', textareaScrollHeight);\n console.log(' Textarea lineHeight:', textareaLineHeight);\n console.log(' Estimated rendered lines:', estimatedTextareaLines);\n console.log(' Explicit line breaks:', explicitLines.length);\n\n if (estimatedTextareaLines > explicitLines.length) {\n console.log('🔄 Text wrapping detected in textarea');\n console.log(\n ' Wrapped lines:',\n estimatedTextareaLines - explicitLines.length,\n );\n } else {\n console.log('📏 No text wrapping in textarea');\n }\n\n console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');\n }\n\n\n /*\n Focus the textarea and position cursor at end\n /\n private focusTextarea(): void {\n // For overlay editing, we want to keep the object in \"selection mode\" not \"editing mode\"\n // This means keeping selected=true and isEditing=false to show boundaries\n\n // Hide the text content only (not the entire object)\n this.target.opacity = 0.01; // Nearly transparent but not fully hidden\n\n // Ensure object stays selected to show boundaries\n (this.target as any).selected = true;\n (this.target as any).isEditing = false; // Override any editing state\n\n // Make sure controls are enabled and movement is allowed during overlay editing\n this.target.set({\n hasControls: true,\n hasBorders: true,\n selectable: true,\n lockMovementX: false,\n lockMovementY: false,\n });\n\n // Keep as active object\n this.canvas.setActiveObject(this.target);\n\n this.canvas.requestRenderAll();\n this.target.setCoords();\n this.applyOverlayStyle();\n\n this.textarea.focus();\n\n this.textarea.setSelectionRange(\n this.textarea.value.length,\n this.textarea.value.length,\n );\n\n // Ensure the object stays selected even after textarea focus\n this.canvas.setActiveObject(this.target);\n this.canvas.requestRenderAll();\n }\n\n /\n Refresh overlay positioning and styling\n /\n public refresh(): void {\n if (this.isDestroyed) return;\n this.updatePosition();\n // Don't update object bounds on every refresh - only when textarea actually resizes\n }\n\n /\n Destroy the overlay editor\n /\n public destroy(commit: boolean = true): void {\n if (this.isDestroyed) return;\n this.isDestroyed = true;\n\n this.removeEventListeners();\n\n // Restore target visibility before handling commit/cancel\n if ((this.target as any).__overlayEditor === this) {\n (this.target as any).__overlayEditor = undefined;\n\n // Restore original opacity\n if ((this.target as any).__overlayOriginalOpacity !== undefined) {\n this.target.opacity = (this.target as any).__overlayOriginalOpacity;\n delete (this.target as any).__overlayOriginalOpacity;\n }\n }\n\n // Remove DOM first\n if (this.hostDiv.parentNode) {\n this.hostDiv.parentNode.removeChild(this.hostDiv);\n }\n\n // Handle commit/cancel after restoring visibility\n if (commit && !this.isComposing) {\n const finalText = this.textarea.value;\n \n // Auto-detect text direction and update fabric object if needed\n const detectedDirection = this.firstStrongDir(finalText);\n const currentDirection = (this.target as any).direction \|\| 'ltr';\n \n if (detectedDirection && detectedDirection !== currentDirection) {\n console.log(`🔄 Overlay Exit: Auto-detected direction change from \"${currentDirection}\" to \"${detectedDirection}\"`);\n console.log(` Text content: \"${finalText.substring(0, 50)}...\"`);\n \n // Update the fabric object's direction\n (this.target as any).set('direction', detectedDirection);\n \n // Force a re-render to apply the direction change\n this.canvas.requestRenderAll();\n \n console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);\n } else {\n console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: \"${finalText.substring(0, 30)}...\"`);\n }\n \n if (this.onCommit) {\n this.onCommit(finalText);\n }\n } else if (!commit && this.onCancel) {\n this.onCancel();\n }\n\n // Note: Don't restore object cursors since IText manages all cursors in _restoreEditingProps\n // Let the IText editing system handle proper restoration of all cursor properties\n\n // Note: Canvas cursors are restored by IText's _restoreEditingProps method\n // Force a cursor refresh by triggering _setCursorFromEvent\n setTimeout(() => {\n this.canvas.upperCanvasEl.style.cursor = '';\n // Trigger cursor refresh on next mouse move\n this.canvas.setCursor(this.canvas.defaultCursor);\n }, 0);\n\n // Request canvas re-render\n this.canvas.requestRenderAll();\n }\n\n // Event handlers\n private handleInput(): void {\n if (!this.isComposing && this.target.text !== this.textarea.value) {\n // Live update target text\n this.target.text = this.textarea.value;\n\n\n // Auto-resize textarea to match new content\n this.autoResizeTextarea();\n\n // Ensure object stays in selection mode (not editing mode) to show controls\n (this.target as any).selected = true;\n (this.target as any).isEditing = false;\n this.canvas.setActiveObject(this.target);\n this.canvas.requestRenderAll();\n }\n }\n\n private autoResizeTextarea(): void {\n // Store the scroll position and the container's old height for comparison.\n const scrollTop = this.textarea.scrollTop;\n const oldHeight = parseFloat(this.hostDiv.style.height \|\| '0');\n\n // 1. Force a reliable reflow.\n // First, reset the textarea's height to a minimal value. This is the crucial step\n // that forces the browser to recalculate the content's height from scratch,\n // ignoring the hostDiv's larger, stale height.\n this.textarea.style.height = '1px';\n\n // 2. Read the now-accurate scrollHeight. This value reflects the minimum\n // height required for the content, whether it's single or multi-line.\n const scrollHeight = this.textarea.scrollHeight;\n\n // A small buffer for rendering consistency across browsers.\n const buffer = 2;\n const newHeight = scrollHeight + buffer;\n\n // Check if the height has changed significantly.\n const heightChanged = Math.abs(newHeight - oldHeight) > 1;\n\n // 4. Only update heights and object bounds if there was a change.\n if (heightChanged) {\n this.textarea.style.height = `${newHeight}px`;\n this.hostDiv.style.height = `${newHeight}px`;\n this.updateObjectBounds();\n } else {\n // If no significant change, ensure the textarea's height matches the container\n // to prevent any minor visual misalignment.\n this.textarea.style.height = this.hostDiv.style.height;\n }\n\n // 5. Restore the original scroll position.\n this.textarea.scrollTop = scrollTop;\n }\n\n private handleKeyDown(e: KeyboardEvent): void {\n if (e.key === 'Escape') {\n e.preventDefault();\n this.destroy(false); // Cancel\n } else if ((e.ctrlKey \|\| e.metaKey) && e.key === 'Enter') {\n e.preventDefault();\n this.destroy(true); // Commit\n } else if (\n e.key === 'Enter' \|\|\n e.key === 'Backspace' \|\|\n e.key === 'Delete'\n ) {\n // For keys that might change the height, schedule a resize check\n // Use both immediate and delayed checks to catch all scenarios\n requestAnimationFrame(() => {\n if (!this.isDestroyed) {\n this.autoResizeTextarea();\n }\n });\n setTimeout(() => {\n if (!this.isDestroyed) {\n this.autoResizeTextarea();\n }\n }, 10); // Small delay to ensure DOM is updated\n }\n }\n\n private handleFocus(): void {\n // Focus handler - could be used for future enhancements\n }\n\n private handleBlur(): void {\n // Commit on blur unless we're in composition mode\n if (!this.isComposing) {\n this.destroy(true);\n }\n }\n\n private handleCompositionStart(): void {\n this.isComposing = true;\n }\n\n private handleCompositionEnd(): void {\n this.isComposing = false;\n this.handleInput(); // Update text after composition\n }\n\n private handleAfterRender(): void {\n this.refresh();\n }\n\n private handleMouseWheel(): void {\n this.refresh();\n }\n\n private handleMouseDown(e: TPointerEventInfo): void {\n if (e.target !== this.target) {\n this.destroy(true);\n }\n }\n\n /\n Setup detection for viewport changes (zoom/pan)\n /\n private setupViewportChangeDetection(): void {\n // Store original methods\n (this.canvas as any).__originalSetZoom = this.canvas.setZoom;\n (this.canvas as any).__originalSetViewportTransform =\n this.canvas.setViewportTransform;\n (this.canvas as any).__overlayEditor = this;\n\n // Override setZoom to detect zoom changes\n const originalSetZoom = this.canvas.setZoom.bind(this.canvas);\n this.canvas.setZoom = (value: number) => {\n const result = originalSetZoom(value);\n if ((this.canvas as any).__overlayEditor && !this.isDestroyed) {\n this.refresh();\n }\n return result;\n };\n\n // Override setViewportTransform to detect pan changes\n const originalSetViewportTransform = this.canvas.setViewportTransform.bind(\n this.canvas,\n );\n this.canvas.setViewportTransform = (vpt: TMat2D) => {\n const result = originalSetViewportTransform(vpt);\n if ((this.canvas as any).__overlayEditor && !this.isDestroyed) {\n this.refresh();\n }\n return result;\n };\n }\n\n /\n Restore original viewport methods\n /\n private restoreViewportChangeDetection(): void {\n if ((this.canvas as any).__originalSetZoom) {\n this.canvas.setZoom = (this.canvas as any).__originalSetZoom;\n delete (this.canvas as any).__originalSetZoom;\n }\n if ((this.canvas as any).__originalSetViewportTransform) {\n this.canvas.setViewportTransform = (\n this.canvas as any\n ).__originalSetViewportTransform;\n delete (this.canvas as any).__originalSetViewportTransform;\n }\n delete (this.canvas as any).__overlayEditor;\n }\n}\n\n/\n Enter overlay text editing mode for a text object\n /\nexport function enterTextOverlayEdit(\n canvas: Canvas,\n target: FabricText \| IText \| Textbox,\n options?: {\n onCommit?: (text: string) => void;\n onCancel?: () => void;\n },\n): OverlayEditor {\n // If already in overlay editing, destroy existing editor first\n if ((target as any).__overlayEditor) {\n (target as any).__overlayEditor.destroy(false);\n }\n\n // Store original opacity so we can restore it later\n (target as any).__overlayOriginalOpacity = target.opacity;\n\n const editor = new OverlayEditor({\n canvas,\n target,\n onCommit: options?.onCommit,\n onCancel: options?.onCancel,\n });\n\n // We no longer change fill, so no need to store it\n\n // Store reference on target for cleanup\n (target as any).__overlayEditor = editor;\n\n return editor;\n}\n\n/\n Check if a text object is currently being edited with overlay editor\n */\nexport function isInOverlayEdit(target: FabricText \| IText \| Textbox): boolean {\n return !!(target as any).__overlayEditor?.isActive;\n}\n"],"names":["OverlayEditor","constructor","options","_defineProperty","this","onInput","handleInput","bind","onKeyDown","handleKeyDown","onBlur","handleBlur","onCompositionStart","handleCompositionStart","onCompositionEnd","handleCompositionEnd","onAfterRender","handleAfterRender","onMouseWheel","handleMouseWheel","onFocus","handleFocus","onMouseDown","handleMouseDown","canvas","target","onCommit","onCancel","lastText","text","container","getCanvasContainer","createOverlayDOM","attachEventListeners","refresh","focusTextarea","upperCanvasEl","parentElement","Error","style","position","hostDiv","document","createElement","pointerEvents","zIndex","transformOrigin","textarea","left","top","margin","resize","hasArabicText","test","hasLatinText","isLTRDirection","direction","unicodeBidi","caretColor","border","padding","background","outline","overflow","whiteSpace","wordBreak","overflowWrap","userSelect","textTransform","opacity","value","appendChild","body","addEventListener","boundHandlers","on","setupViewportChangeDetection","removeEventListeners","removeEventListener","off","restoreViewportChangeDetection","updatePosition","applyOverlayStyle","updateObjectBounds","isDestroyed","zoom","getZoom","parseFloat","width","currentHeight","height","Math","abs","setCoords","dirty","requestRenderAll","requestAnimationFrame","console","log","letterSpacingPx","charSpacing","fontSize","firstStrongDir","_target$fontSize","_target$fill","aCoords","canvasRect","getBoundingClientRect","scrollX","window","pageXOffset","scrollY","pageYOffset","vpt","viewportTransform","paddingX","scaleX","paddingY","scaleY","screenPoint","transformPoint","x","tl","y","objectBounds","getBoundingRect","round","angle","transform","finalFontSize","fabricLineHeight","lineHeight","boxSizing","String","fontFamily","fontWeight","fontStyle","textAlign","cssTextAlign","autoDetectedDirection","JSON","stringify","includes","textAlignLast","textJustify","wordSpacing","textJustifyTrim","textAutospace","error","warn","replace","color","fill","toString","letterSpacing","fabricDirection","_calcTextWidth","_ref","fontVariant","fontStretch","textRendering","fontKerning","fontFeatureSettings","fontVariationSettings","hyphens","calcTextWidth","call","textLines","webkitFontSmoothing","mozOsxFontSmoothing","fontSmooth","textSizeAdjust","parseInt","debugBoundingBoxComparison","textareaRect","hostRect","canvasBounds","screenObjectBounds","hostVsObject","leftDiff","topDiff","widthDiff","heightDiff","textareaVsObject","hostAligned","textareaAligned","debugTextWrapping","length","explicitLines","split","forEach","line","i","textareaStyles","getComputedStyle","wordWrap","fabricEffectiveWidth","textareaEffectiveWidth","toFixed","hasRTLText","hasBidiText","textareaScrollHeight","scrollHeight","textareaLineHeight","estimatedTextareaLines","selected","isEditing","set","hasControls","hasBorders","selectable","lockMovementX","lockMovementY","setActiveObject","focus","setSelectionRange","destroy","commit","arguments","undefined","__overlayEditor","__overlayOriginalOpacity","parentNode","removeChild","isComposing","finalText","detectedDirection","currentDirection","substring","setTimeout","cursor","setCursor","defaultCursor","autoResizeTextarea","scrollTop","oldHeight","newHeight","e","key","preventDefault","ctrlKey","metaKey","__originalSetZoom","setZoom","__originalSetViewportTransform","setViewportTransform","originalSetZoom","result","originalSetViewportTransform","enterTextOverlayEdit","editor"],"mappings":"+IA8BO,MAAMA,EAyBXC,WAAAA,CAAYC,GAA+BC,EAAAC,KAAA,cAAA,GAAAD,EAAAC,KAAA,cAAA,GAAAD,EAAAC,KAAA,iBAAA,GAAAD,EAAAC,KAAA,gBAAA,GAAAD,EAAAC,KAAA,eAAA,GAAAD,sBAnBrB,GAAKA,sBACL,GAAKA,EAAAC,KAAA,gBAAA,GAAAD,EAAAC,KAAA,gBAAA,GAAAD,EAAAC,KAAA,gBAAA,GAK3BD,EAAAC,KAAA,gBACwB,CACtBC,QAASD,KAAKE,YAAYC,KAAKH,MAC/BI,UAAWJ,KAAKK,cAAcF,KAAKH,MACnCM,OAAQN,KAAKO,WAAWJ,KAAKH,MAC7BQ,mBAAoBR,KAAKS,uBAAuBN,KAAKH,MACrDU,iBAAkBV,KAAKW,qBAAqBR,KAAKH,MACjDY,cAAeZ,KAAKa,kBAAkBV,KAAKH,MAC3Cc,aAAcd,KAAKe,iBAAiBZ,KAAKH,MACzCgB,QAAShB,KAAKiB,YAAYd,KAAKH,MAC/BkB,YAAalB,KAAKmB,gBAAgBhB,KAAKH,QAIvCA,KAAKoB,OAAStB,EAAQsB,OACtBpB,KAAKqB,OAASvB,EAAQuB,OACtBrB,KAAKsB,SAAWxB,EAAQwB,SACxBtB,KAAKuB,SAAWzB,EAAQyB,SACxBvB,KAAKwB,SAAWxB,KAAKqB,OAAOI,MAAQ,GAEpCzB,KAAK0B,UAAY1B,KAAK2B,qBACtB3B,KAAK4B,mBACL5B,KAAK6B,uBACL7B,KAAK8B,UACL9B,KAAK+B,eAOP,CAKQJ,kBAAAA,GACN,MACMD,EADc1B,KAAKoB,OAAOY,cACFC,cAC9B,IAAKP,EACH,MAAM,IAAIQ,MAAM,wDAMlB,OAFAR,EAAUS,MAAMC,SAAW,WAEpBV,CACT,CAKQE,gBAAAA,GAEN5B,KAAKqC,QAAUC,SAASC,cAAc,OACtCvC,KAAKqC,QAAQF,MAAMC,SAAW,WAC9BpC,KAAKqC,QAAQF,MAAMK,cAAgB,OACnCxC,KAAKqC,QAAQF,MAAMM,OAAS,OAC5BzC,KAAKqC,QAAQF,MAAMO,gBAAkB,WAGrC1C,KAAK2C,SAAWL,SAASC,cAAc,YACvCvC,KAAK2C,SAASR,MAAMC,SAAW,WAC/BpC,KAAK2C,SAASR,MAAMS,KAAO,IAC3B5C,KAAK2C,SAASR,MAAMU,IAAM,IAC1B7C,KAAK2C,SAASR,MAAMW,OAAS,IAC7B9C,KAAK2C,SAASR,MAAMY,OAAS,OAC7B/C,KAAK2C,SAASR,MAAMK,cAAgB,OAEpC,MAAMQ,EACJ,yDAAyDC,KACvDjD,KAAKqB,OAAOI,MAAQ,IAElByB,EAAe,WAAWD,KAAKjD,KAAKqB,OAAOI,MAAQ,IACnD0B,EAAoD,QAAlCnD,KAAKqB,OAAe+B,UAI1CpD,KAAK2C,SAASR,MAAMkB,YAFlBL,GAAiBE,GAAgBC,GAG1BH,GAAiBG,EADQ,QAMA,YAEpCnD,KAAK2C,SAASR,MAAMmB,WAAa,OAGjCtD,KAAK2C,SAASR,MAAMoB,OAAS,OAC7BvD,KAAK2C,SAASR,MAAMqB,QAAU,IAC9BxD,KAAK2C,SAASR,MAAMsB,WAAa,cACjCzD,KAAK2C,SAASR,MAAMuB,QAAU,OAC9B1D,KAAK2C,SAASR,MAAMwB,SAAW,SAC/B3D,KAAK2C,SAASR,MAAMyB,WAAa,WACjC5D,KAAK2C,SAASR,MAAM0B,UAAY,SAChC7D,KAAK2C,SAASR,MAAM2B,aAAe,aACnC9D,KAAK2C,SAASR,MAAM4B,WAAa,OACjC/D,KAAK2C,SAASR,MAAM6B,cAAgB,OAGpChE,KAAK2C,SAASR,MAAM8B,QAAU,IAG9BjE,KAAK2C,SAASuB,MAAQlE,KAAKqB,OAAOI,MAAQ,GAE1CzB,KAAKqC,QAAQ8B,YAAYnE,KAAK2C,UAC9BL,SAAS8B,KAAKD,YAAYnE,KAAKqC,QACjC,CAKQR,oBAAAA,GAEN7B,KAAK2C,SAAS0B,iBAAiB,QAASrE,KAAKsE,cAAcrE,SAC3DD,KAAK2C,SAAS0B,iBAAiB,UAAWrE,KAAKsE,cAAclE,WAC7DJ,KAAK2C,SAAS0B,iBAAiB,OAAQrE,KAAKsE,cAAchE,QAC1DN,KAAK2C,SAAS0B,iBACZ,mBACArE,KAAKsE,cAAc9D,oBAErBR,KAAK2C,SAAS0B,iBACZ,iBACArE,KAAKsE,cAAc5D,kBAErBV,KAAK2C,SAAS0B,iBAAiB,QAASrE,KAAKsE,cAActD,SAG3DhB,KAAKoB,OAAOmD,GAAG,eAAgBvE,KAAKsE,cAAc1D,eAClDZ,KAAKoB,OAAOmD,GAAG,cAAevE,KAAKsE,cAAcxD,cACjDd,KAAKoB,OAAOmD,GAAG,aAAcvE,KAAKsE,cAAcpD,aAGhDlB,KAAKwE,8BACP,CAKQC,oBAAAA,GACNzE,KAAK2C,SAAS+B,oBAAoB,QAAS1E,KAAKsE,cAAcrE,SAC9DD,KAAK2C,SAAS+B,oBAAoB,UAAW1E,KAAKsE,cAAclE,WAChEJ,KAAK2C,SAAS+B,oBAAoB,OAAQ1E,KAAKsE,cAAchE,QAC7DN,KAAK2C,SAAS+B,oBACZ,mBACA1E,KAAKsE,cAAc9D,oBAErBR,KAAK2C,SAAS+B,oBACZ,iBACA1E,KAAKsE,cAAc5D,kBAErBV,KAAK2C,SAAS+B,oBAAoB,QAAS1E,KAAKsE,cAActD,SAE9DhB,KAAKoB,OAAOuD,IAAI,eAAgB3E,KAAKsE,cAAc1D,eACnDZ,KAAKoB,OAAOuD,IAAI,cAAe3E,KAAKsE,cAAcxD,cAClDd,KAAKoB,OAAOuD,IAAI,aAAc3E,KAAKsE,cAAcpD,aAGjDlB,KAAK4E,gCACP,CAKQC,cAAAA,GACN7E,KAAK8E,mBACP,CAMQC,kBAAAA,GACN,GAAI/E,KAAKgF,YAAa,OAEtB,MAAM3D,EAASrB,KAAKqB,OACd4D,EAAOjF,KAAKoB,OAAO8D,UAGJC,WAAWnF,KAAKqC,QAAQF,MAAMiD,OACnD,MAAMC,EAAgBF,WAAWnF,KAAKqC,QAAQF,MAAMmD,QAAUL,EAG3CM,KAAKC,IAAIH,EAAgBhE,EAAOiE,QACjC,KAGEjE,EAAOiE,OACzBjE,EAAOiE,OAASD,EAChBhE,EAAOoE,YAGPpE,EAAOqE,OAAQ,EACf1F,KAAKoB,OAAOuE,mBAGZC,sBAAsB,KACf5F,KAAKgF,cACRhF,KAAK8E,oBACLe,QAAQC,IACN,oEAKV,CAKQC,eAAAA,CAAgBC,EAAqBC,GAC3C,OAAQD,EAAc,IAAQC,CAChC,CAKQC,cAAAA,CAAezE,GAIrB,MADE,sEACcwB,KAAKxB,GAAQ,MAAQ,KACvC,CAEQqD,iBAAAA,GAA0B,IAAAqB,EAAAC,EAChC,MAAM/E,EAASrB,KAAKqB,OACdD,EAASpB,KAAKoB,OAGpBC,EAAOoE,YACP,MAAMY,EAAUhF,EAAOgF,QAIjBC,EADWlF,EAAOY,cACIuE,wBACtBC,EAAUC,OAAOD,SAAWC,OAAOC,YACnCC,EAAUF,OAAOE,SAAWF,OAAOG,YAGnC3B,EAAO7D,EAAO8D,UACd2B,EAAMzF,EAAO0F,kBACbtD,EAAWnC,EAAemC,SAAW,EACrCuD,EAAWvD,GAAWnC,EAAO2F,QAAU,GAAK/B,EAC5CgC,EAAWzD,GAAWnC,EAAO6F,QAAU,GAAKjC,EAI5CkC,EAAcC,EAClB,CAAEC,EAAGhB,EAAQiB,GAAGD,EAAGE,EAAGlB,EAAQiB,GAAGC,GACjCV,GAGIjE,EAAO0D,EAAW1D,KAAO4D,EAAUW,EAAYE,EAC/CxE,EAAMyD,EAAWzD,IAAM8D,EAAUQ,EAAYI,EAK7CC,EAAenG,EAAOoG,kBACtBrC,EAAQG,KAAKmC,MAAMF,EAAapC,MAAQH,GACxCK,EAASC,KAAKmC,MAAMF,EAAalC,OAASL,GAGhDjF,KAAKqC,QAAQF,MAAMC,SAAW,WAC9BpC,KAAKqC,QAAQF,MAAMS,KAAO,GAAGA,MAC7B5C,KAAKqC,QAAQF,MAAMU,IAAM,GAAGA,MAC5B7C,KAAKqC,QAAQF,MAAMiD,MAAQ,GAAGA,MAC9BpF,KAAKqC,QAAQF,MAAMmD,OAAS,GAAGA,MAC/BtF,KAAKqC,QAAQF,MAAMwB,SAAW,SAE1BtC,EAAOsG,OACT3H,KAAKqC,QAAQF,MAAMyF,UAAY,UAAUvG,EAAOsG,YAChD3H,KAAKqC,QAAQF,MAAMO,gBAAkB,aAErC1C,KAAKqC,QAAQF,MAAMyF,UAAY,GAC/B5H,KAAKqC,QAAQF,MAAMO,gBAAkB,IAIvC,MAGMmF,GAH8B,QAAlB1B,EAAG9E,EAAO4E,gBAAQ,IAAAE,EAAAA,EAAI,KAEzB9E,EAAO2F,QAAU,GACc/B,EACxC6C,EAAmBzG,EAAO0G,YAAc,KAG9C/H,KAAK2C,SAASR,MAAM6F,UAAY,aAIhChI,KAAK2C,SAASR,MAAMiD,MAAQ,GAAGA,MAC/BpF,KAAK2C,SAASR,MAAMmD,OAAS,OAC7BtF,KAAK2C,SAASR,MAAMqB,QAAU,GAAGyD,OAAcF,MAG/C,MAAMhB,GAAoB1E,EAAO2E,aAAe,GAAK,IAAQ6B,EAE7D7H,KAAK2C,SAASR,MAAM8D,SAAW,GAAG4B,MAClC7H,KAAK2C,SAASR,MAAM4F,WAAaE,OAAOH,GACxC9H,KAAK2C,SAASR,MAAM+F,WAAa7G,EAAO6G,YAAc,QACtDlI,KAAK2C,SAASR,MAAMgG,WAAaF,OAAO5G,EAAO8G,YAAc,UAC7DnI,KAAK2C,SAASR,MAAMiG,UAAY/G,EAAO+G,WAAa,SAEpD,MAAMC,EAAahH,EAAegH,WAAa,OAC/C,IAAIC,EAAeD,EAGnB,MAAME,EAAwBvI,KAAKkG,eAAelG,KAAK2C,SAASuB,OAAS,IAUzE,GAPA2B,QAAQC,IAAI,uBACZD,QAAQC,IAAI,uBAAwBuC,GACpCxC,QAAQC,IAAI,uBAAyBzE,EAAe+B,WACpDyC,QAAQC,IAAI,mBAAoB0C,KAAKC,UAAUpH,EAAOI,OACtDoE,QAAQC,IAAI,yBAA0ByC,GAGlCF,EAAUK,SAAS,WAErB,IAGEJ,EAAe,UAIG,YAAdD,EACFrI,KAAK2C,SAASR,MAAMwG,cAA0C,QAA1BJ,EAAkC,QAAU,OACzD,iBAAdF,EAEqB,QAA1BE,GACFvI,KAAK2C,SAASR,MAAMwG,cAAgB,QACpC9C,QAAQC,IAAI,6DAEZ9F,KAAK2C,SAASR,MAAMwG,cAAgB,OAEf,kBAAdN,EAEqB,QAA1BE,GACFvI,KAAK2C,SAASR,MAAMwG,cAAgB,OACpC9C,QAAQC,IAAI,6DAEZ9F,KAAK2C,SAASR,MAAMwG,cAAgB,QAEf,mBAAdN,IACTrI,KAAK2C,SAASR,MAAMwG,cAAgB,UAIrC3I,KAAK2C,SAASR,MAAcyG,YAAc,aAC1C5I,KAAK2C,SAASR,MAAc0G,YAAc,SAG3C7I,KAAK2C,SAASR,MAAMkG,UAAY,UAChCrI,KAAK2C,SAASR,MAAMwG,cAAgB3I,KAAK2C,SAASR,MAAMwG,cAGvD3I,KAAK2C,SAASR,MAAc2G,gBAAkB,OAC9C9I,KAAK2C,SAASR,MAAc4G,cAAgB,OAE7ClD,QAAQC,IAAI,kCAAmCuC,EAAW,kBAAmBrI,KAAK2C,SAASR,MAAMwG,cACnG,CAAE,MAAOK,GACPnD,QAAQoD,KAAK,iEAAkED,GAC/EV,EAAeD,EAAUa,QAAQ,WAAY,IAAIA,QAAQ,UAAW,OACtE,MAEAlJ,KAAK2C,SAASR,MAAMwG,cAAgB,OACnC3I,KAAK2C,SAASR,MAAcyG,YAAc,OAC1C5I,KAAK2C,SAASR,MAAc0G,YAAc,SAC3ChD,QAAQC,IAAI,mCAAoCwC,GAGlDtI,KAAK2C,SAASR,MAAMkG,UAAYC,EAChCtI,KAAK2C,SAASR,MAAMgH,OAAmB,QAAX/C,EAAA/E,EAAO+H,YAAI,IAAAhD,OAAA,EAAXA,EAAaiD,aAAc,OACvDrJ,KAAK2C,SAASR,MAAMmH,cAAgB,GAAGvD,MAGvC,MAAMwD,EAAmBlI,EAAe+B,UA8BL,IAAAoG,EAAAC,GA3BnCzJ,KAAK2C,SAASR,MAAMiB,UAAYmF,GAAyBgB,GAAmB,MAC5EvJ,KAAK2C,SAASR,MAAMuH,YAAc,SAClC1J,KAAK2C,SAASR,MAAMwH,YAAc,SAClC3J,KAAK2C,SAASR,MAAMyH,cAAgB,OACpC5J,KAAK2C,SAASR,MAAM0H,YAAc,SAClC7J,KAAK2C,SAASR,MAAM2H,oBAAsB,SAC1C9J,KAAK2C,SAASR,MAAM4H,sBAAwB,SAC5C/J,KAAK2C,SAASR,MAAMW,OAAS,IAC7B9C,KAAK2C,SAASR,MAAMoB,OAAS,OAC7BvD,KAAK2C,SAASR,MAAMuB,QAAU,OAC9B1D,KAAK2C,SAASR,MAAMsB,WAAa,cACjCzD,KAAK2C,SAASR,MAAM2B,aAAe,aACnC9D,KAAK2C,SAASR,MAAMyB,WAAa,WACjC5D,KAAK2C,SAASR,MAAM6H,QAAU,OAG9BnE,QAAQC,IAAI,0BACZD,QAAQC,IAAI,gBAAiB9F,KAAK2C,SAASR,MAAMkG,WACjDxC,QAAQC,IAAI,oBAAqB9F,KAAK2C,SAASR,MAAMwG,eACrD9C,QAAQC,IAAI,gBAAiB9F,KAAK2C,SAASR,MAAMiB,WACjDyC,QAAQC,IAAI,kBAAmB9F,KAAK2C,SAASR,MAAMkB,aACnDwC,QAAQC,IAAI,YAAa9F,KAAK2C,SAASR,MAAMiD,OAC7CS,QAAQC,IAAI,kBAAoB9F,KAAK2C,SAASR,MAAcyG,aAC5D/C,QAAQC,IAAI,kBAAoB9F,KAAK2C,SAASR,MAAc0G,aAC5DhD,QAAQC,IAAI,iBAAkB9F,KAAK2C,SAASR,MAAMyB,YAG9CyE,EAAUK,SAAS,cACrB7C,QAAQC,IAAI,kCACZD,QAAQC,IAAI,mBAAqBzE,EAAe+D,OAChDS,QAAQC,IAAI,2BAAyD,QAA/B0D,GAAEC,EAACpI,GAAe4I,qBAAa,IAAAT,OAAA,EAA7BA,EAAAU,KAAAT,IACxC5D,QAAQC,IAAI,uBAAyBzE,EAAegH,WACpDxC,QAAQC,IAAI,iBAAmBzE,EAAe8I,YAIhDtE,QAAQC,IAAI,kCACZD,QAAQC,IAAI,wBAAyBzE,EAAO6G,YAC5CrC,QAAQC,IAAI,wBAAyBzE,EAAO8G,YAC5CtC,QAAQC,IAAI,uBAAwBzE,EAAO+G,WAC3CvC,QAAQC,IAAI,sBAAuBzE,EAAO4E,UAC1CJ,QAAQC,IAAI,4BAA6B9F,KAAK2C,SAASR,MAAM+F,YAC7DrC,QAAQC,IAAI,4BAA6B9F,KAAK2C,SAASR,MAAMgG,YAC7DtC,QAAQC,IAAI,2BAA4B9F,KAAK2C,SAASR,MAAMiG,WAC5DvC,QAAQC,IAAI,0BAA2B9F,KAAK2C,SAASR,MAAM8D,UAE3DJ,QAAQC,IAAI,sDAIX9F,KAAK2C,SAASR,MAAciI,oBAAsB,OAClDpK,KAAK2C,SAASR,MAAckI,oBAAsB,OAClDrK,KAAK2C,SAASR,MAAcmI,WAAa,OACzCtK,KAAK2C,SAASR,MAAcoI,eAAiB,OAG9C,MAAMpC,EAAaF,OAAO5G,EAAO8G,YAAc,WACjB,SAAfA,GAAwC,QAAfA,GACxBqC,SAASrC,IAAe,OAGrCnI,KAAK2C,SAASR,MAAciI,oBAAsB,uBAClDpK,KAAK2C,SAASR,MAAckI,oBAAsB,QACnDxE,QAAQC,IAAI,qEAGdD,QAAQC,IAAI,8BACZD,QAAQC,IAAI,0BAA4B9F,KAAK2C,SAASR,MAAciI,qBACpEvE,QAAQC,IAAI,0BAA4B9F,KAAK2C,SAASR,MAAckI,oBAItE,CAKQI,0BAAAA,GACN,MAAMpJ,EAASrB,KAAKqB,OACdD,EAASpB,KAAKoB,OACd6D,EAAO7D,EAAO8D,UAGdwF,EAAe1K,KAAK2C,SAAS4D,wBAC7BoE,EAAW3K,KAAKqC,QAAQkE,wBAGxBqE,EAAevJ,EAAOoG,kBACtBnB,EAAalF,EAAOY,cAAcuE,wBAGlCM,EAAMzF,EAAO0F,kBACb+D,EACEvE,EAAW1D,KAAOgI,EAAahI,KAAOqC,EAAO4B,EAAI,GADnDgE,EAECvE,EAAWzD,IAAM+H,EAAa/H,IAAMoC,EAAO4B,EAAI,GAFhDgE,EAGGD,EAAaxF,MAAQH,EAHxB4F,EAIID,EAAatF,OAASL,EAGhCY,QAAQC,IAAI,+BACZD,QAAQC,IAAI,oBAAqB,CAC/BlD,KAAM2C,KAAKmC,MAA0B,IAApBgD,EAAa9H,MAAc,IAC5CC,IAAK0C,KAAKmC,MAAyB,IAAnBgD,EAAa7H,KAAa,IAC1CuC,MAAOG,KAAKmC,MAA2B,IAArBgD,EAAatF,OAAe,IAC9CE,OAAQC,KAAKmC,MAA4B,IAAtBgD,EAAapF,QAAgB,MAElDO,QAAQC,IAAI,oBAAqB,CAC/BlD,KAAM2C,KAAKmC,MAAsB,IAAhBiD,EAAS/H,MAAc,IACxCC,IAAK0C,KAAKmC,MAAqB,IAAfiD,EAAS9H,KAAa,IACtCuC,MAAOG,KAAKmC,MAAuB,IAAjBiD,EAASvF,OAAe,IAC1CE,OAAQC,KAAKmC,MAAwB,IAAlBiD,EAASrF,QAAgB,MAE9CO,QAAQC,IAAI,oCAAqC,CAC/ClD,KAAM2C,KAAKmC,MAAgC,IAA1BmD,GAAiC,IAClDhI,IAAK0C,KAAKmC,MAA+B,IAAzBmD,GAAgC,IAChDzF,MAAOG,KAAKmC,MAAiC,IAA3BmD,GAAkC,IACpDvF,OAAQC,KAAKmC,MAAkC,IAA5BmD,GAAmC,MAExDhF,QAAQC,IAAI,oCAAqC8E,GAGjD,MAAME,EAAe,CACnBC,SACExF,KAAKmC,MAAkD,KAA3CiD,EAAS/H,KAAOiI,IAAkC,IAChEG,QAASzF,KAAKmC,MAAgD,KAAzCiD,EAAS9H,IAAMgI,IAAiC,IACrEI,UACE1F,KAAKmC,MAAoD,KAA7CiD,EAASvF,MAAQyF,IAAmC,IAClEK,WACE3F,KAAKmC,MAAsD,KAA/CiD,EAASrF,OAASuF,IAAoC,KAGhEM,EAAmB,CACvBJ,SACExF,KAAKmC,MAAsD,KAA/CgD,EAAa9H,KAAOiI,IAAkC,IACpEG,QACEzF,KAAKmC,MAAoD,KAA7CgD,EAAa7H,IAAMgI,IAAiC,IAClEI,UACE1F,KAAKmC,MAAwD,KAAjDgD,EAAatF,MAAQyF,IAAmC,IACtEK,WACE3F,KAAKmC,MAA0D,KAAnDgD,EAAapF,OAASuF,IAClC,KAGJhF,QAAQC,IAAI,qCAAsCgF,GAClDjF,QAAQC,IAAI,qCAAsCqF,GAGlD,MACMC,EACJ7F,KAAKC,IAAIsF,EAAaC,UAFN,GAGhBxF,KAAKC,IAAIsF,EAAaE,SAHN,GAIhBzF,KAAKC,IAAIsF,EAAaG,WAJN,GAKhB1F,KAAKC,IAAIsF,EAAaI,YALN,EAOZG,EACJ9F,KAAKC,IAAI2F,EAAiBJ,UARV,GAShBxF,KAAKC,IAAI2F,EAAiBH,SATV,GAUhBzF,KAAKC,IAAI2F,EAAiBF,WAVV,GAWhB1F,KAAKC,IAAI2F,EAAiBD,YAXV,EAalBrF,QAAQC,IACNsF,EACI,wCACA,4CAENvF,QAAQC,IACNuF,EACI,wCACA,4CAENxF,QAAQC,IAAI,WAAYb,EAAM,sBAAuB4B,GACrDhB,QAAQC,IAAI,qDACd,CAKQwF,iBAAAA,GACN,MAAMjK,EAASrB,KAAKqB,OACdI,EAAOzB,KAAK2C,SAASuB,MAE3B2B,QAAQC,IAAI,gCACZD,QAAQC,IAAI,mBAAoB,IAAIrE,MACpCoE,QAAQC,IAAI,kBAAmBrE,EAAK8J,QAGpC,MAAMC,EAAgB/J,EAAKgK,MAAM,MACjC5F,QAAQC,IAAI,2BAA4B0F,EAAcD,QACtDC,EAAcE,QAAQ,CAACC,EAAMC,KAC3B/F,QAAQC,IAAI,WAAW8F,EAAI,OAAOD,OAAUA,EAAKJ,mBAInD,MAAMM,EAAiBpF,OAAOqF,iBAAiB9L,KAAK2C,UACpDkD,QAAQC,IAAI,gCACZD,QAAQC,IAAI,YAAa+F,EAAezG,OACxCS,QAAQC,IAAI,eAAgB+F,EAAe5F,UAC3CJ,QAAQC,IAAI,iBAAkB+F,EAAe3D,YAC7CrC,QAAQC,IAAI,iBAAkB+F,EAAe1D,YAC7CtC,QAAQC,IAAI,oBAAqB+F,EAAevC,eAChDzD,QAAQC,IAAI,iBAAkB+F,EAAe9D,YAC7ClC,QAAQC,IAAI,iBAAkB+F,EAAejI,YAC7CiC,QAAQC,IAAI,eAAgB+F,EAAeE,UAC3ClG,QAAQC,IAAI,mBAAoB+F,EAAe/H,cAC/C+B,QAAQC,IAAI,gBAAiB+F,EAAezI,WAC5CyC,QAAQC,IAAI,gBAAiB+F,EAAexD,WAG5CxC,QAAQC,IAAI,qCACZD,QAAQC,IAAI,YAAczE,EAAe+D,OACzCS,QAAQC,IAAI,eAAgBzE,EAAO4E,UACnCJ,QAAQC,IAAI,iBAAkBzE,EAAO6G,YACrCrC,QAAQC,IAAI,iBAAkBzE,EAAO8G,YACrCtC,QAAQC,IAAI,kBAAmBzE,EAAO2E,aACtCH,QAAQC,IAAI,iBAAkBzE,EAAO0G,YACrClC,QAAQC,IAAI,gBAAkBzE,EAAe+B,WAC7CyC,QAAQC,IAAI,gBAAkBzE,EAAegH,WAC7CxC,QAAQC,IAAI,aAAczE,EAAO2F,QACjCnB,QAAQC,IAAI,aAAczE,EAAO6F,QAIjC,MAAM8E,EAAuBhM,KAAKqB,OAAOoG,kBAAkBrC,MAKrD6G,EAHwB9G,WAC5BsB,OAAOqF,iBAAiB9L,KAAK2C,UAAUyC,OAGfpF,KAAKoB,OAAO8D,UAChC+F,EAAY1F,KAAKC,IAAIyG,EAAyBD,GAEpDnG,QAAQC,IAAI,kCACZD,QAAQC,IAAI,+BAAgCmG,GAC5CpG,QAAQC,IAAI,6BAA8BkG,GAC1CnG,QAAQC,IAAI,uBAAwBmF,EAAUiB,QAAQ,GAAK,MAC3DrG,QAAQC,IACNmF,EAAY,EACR,8BACA,iDAIN,MAAMkB,EACJ,sEAAsElJ,KACpExB,GAEE2K,EAAc,kBAAkBnJ,KAAKxB,IAAS,WAAWwB,KAAKxB,GAEpEoE,QAAQC,IAAI,+BACZD,QAAQC,IAAI,yBAA0BqG,GACtCtG,QAAQC,IAAI,0BAA2BsG,GACvCvG,QAAQC,IAAI,yBAA0B+F,EAAezI,WACrDyC,QAAQC,IAAI,uBAAyBzE,EAAe+B,WAAa,QACjEyC,QAAQC,IAAI,2BAA4B+F,EAAexI,aAGvD,MAAMgJ,EAAuBrM,KAAK2C,SAAS2J,aACrCC,EACJpH,WAAW0G,EAAe9D,aACY,IAAtC5C,WAAW0G,EAAe5F,UACtBuG,EAAyBjH,KAAKmC,MAClC2E,EAAuBE,GAGzB1G,QAAQC,IAAI,2BACZD,QAAQC,IAAI,4BAA6BuG,GACzCxG,QAAQC,IAAI,0BAA2ByG,GACvC1G,QAAQC,IAAI,+BAAgC0G,GAC5C3G,QAAQC,IAAI,2BAA4B0F,EAAcD,QAElDiB,EAAyBhB,EAAcD,QACzC1F,QAAQC,IAAI,yCACZD,QAAQC,IACN,oBACA0G,EAAyBhB,EAAcD,SAGzC1F,QAAQC,IAAI,mCAGdD,QAAQC,IAAI,qDACd,CAMQ/D,aAAAA,GAKN/B,KAAKqB,OAAO4C,QAAU,IAGrBjE,KAAKqB,OAAeoL,UAAW,EAC/BzM,KAAKqB,OAAeqL,WAAY,EAGjC1M,KAAKqB,OAAOsL,IAAI,CACdC,aAAa,EACbC,YAAY,EACZC,YAAY,EACZC,eAAe,EACfC,eAAe,IAIjBhN,KAAKoB,OAAO6L,gBAAgBjN,KAAKqB,QAEjCrB,KAAKoB,OAAOuE,mBACZ3F,KAAKqB,OAAOoE,YACZzF,KAAK8E,oBAEL9E,KAAK2C,SAASuK,QAEdlN,KAAK2C,SAASwK,kBACZnN,KAAK2C,SAASuB,MAAMqH,OACpBvL,KAAK2C,SAASuB,MAAMqH,QAItBvL,KAAKoB,OAAO6L,gBAAgBjN,KAAKqB,QACjCrB,KAAKoB,OAAOuE,kBACd,CAKO7D,OAAAA,GACD9B,KAAKgF,aACThF,KAAK6E,gBAEP,CAKOuI,OAAAA,GAAsC,IAA9BC,IAAeC,UAAA/B,OAAA,QAAAgC,IAAAD,UAAA,KAAAA,UAAA,GAC5B,IAAItN,KAAKgF,YAAT,CAsBA,GArBAhF,KAAKgF,aAAc,EAEnBhF,KAAKyE,uBAGAzE,KAAKqB,OAAemM,kBAAoBxN,OAC1CA,KAAKqB,OAAemM,qBAAkBD,OAGeA,IAAjDvN,KAAKqB,OAAeoM,2BACvBzN,KAAKqB,OAAO4C,QAAWjE,KAAKqB,OAAeoM,gCACnCzN,KAAKqB,OAAeoM,2BAK5BzN,KAAKqC,QAAQqL,YACf1N,KAAKqC,QAAQqL,WAAWC,YAAY3N,KAAKqC,SAIvCgL,IAAWrN,KAAK4N,YAAa,CAC/B,MAAMC,EAAY7N,KAAK2C,SAASuB,MAG1B4J,EAAoB9N,KAAKkG,eAAe2H,GACxCE,EAAoB/N,KAAKqB,OAAe+B,WAAa,MAEvD0K,GAAqBA,IAAsBC,GAC7ClI,QAAQC,IAAI,yDAAyDiI,UAAyBD,MAC9FjI,QAAQC,IAAI,qBAAqB+H,EAAUG,UAAU,EAAG,WAGvDhO,KAAKqB,OAAesL,IAAI,YAAamB,GAGtC9N,KAAKoB,OAAOuE,mBAEZE,QAAQC,IAAI,yCAAyCgI,MAErDjI,QAAQC,IAAI,yCAAyCiI,cAA6BF,EAAUG,UAAU,EAAG,WAGvGhO,KAAKsB,UACPtB,KAAKsB,SAASuM,EAElB,MAAYR,GAAUrN,KAAKuB,UACzBvB,KAAKuB,WAQP0M,WAAW,KACTjO,KAAKoB,OAAOY,cAAcG,MAAM+L,OAAS,GAEzClO,KAAKoB,OAAO+M,UAAUnO,KAAKoB,OAAOgN,gBACjC,GAGHpO,KAAKoB,OAAOuE,kBA/DU,CAgExB,CAGQzF,WAAAA,GACDF,KAAK4N,aAAe5N,KAAKqB,OAAOI,OAASzB,KAAK2C,SAASuB,QAE1DlE,KAAKqB,OAAOI,KAAOzB,KAAK2C,SAASuB,MAIjClE,KAAKqO,qBAGJrO,KAAKqB,OAAeoL,UAAW,EAC/BzM,KAAKqB,OAAeqL,WAAY,EACjC1M,KAAKoB,OAAO6L,gBAAgBjN,KAAKqB,QACjCrB,KAAKoB,OAAOuE,mBAEhB,CAEQ0I,kBAAAA,GAEN,MAAMC,EAAYtO,KAAK2C,SAAS2L,UAC1BC,EAAYpJ,WAAWnF,KAAKqC,QAAQF,MAAMmD,QAAU,KAM1DtF,KAAK2C,SAASR,MAAMmD,OAAS,MAI7B,MAIMkJ,EAJexO,KAAK2C,SAAS2J,aAGpB,EAIO/G,KAAKC,IAAIgJ,EAAYD,GAAa,GAItDvO,KAAK2C,SAASR,MAAMmD,OAAS,GAAGkJ,MAChCxO,KAAKqC,QAAQF,MAAMmD,OAAS,GAAGkJ,MAC/BxO,KAAK+E,sBAIL/E,KAAK2C,SAASR,MAAMmD,OAAStF,KAAKqC,QAAQF,MAAMmD,OAIlDtF,KAAK2C,SAAS2L,UAAYA,CAC5B,CAEQjO,aAAAA,CAAcoO,GACN,WAAVA,EAAEC,KACJD,EAAEE,iBACF3O,KAAKoN,SAAQ,KACHqB,EAAEG,SAAWH,EAAEI,UAAsB,UAAVJ,EAAEC,KACvCD,EAAEE,iBACF3O,KAAKoN,SAAQ,IAEH,UAAVqB,EAAEC,KACQ,cAAVD,EAAEC,KACQ,WAAVD,EAAEC,MAIF9I,sBAAsB,KACf5F,KAAKgF,aACRhF,KAAKqO,uBAGTJ,WAAW,KACJjO,KAAKgF,aACRhF,KAAKqO,sBAEN,IAEP,CAEQpN,WAAAA,GACN,CAGMV,UAAAA,GAEDP,KAAK4N,aACR5N,KAAKoN,SAAQ,EAEjB,CAEQ3M,sBAAAA,GACNT,KAAK4N,aAAc,CACrB,CAEQjN,oBAAAA,GACNX,KAAK4N,aAAc,EACnB5N,KAAKE,aACP,CAEQW,iBAAAA,GACNb,KAAK8B,SACP,CAEQf,gBAAAA,GACNf,KAAK8B,SACP,CAEQX,eAAAA,CAAgBsN,GAClBA,EAAEpN,SAAWrB,KAAKqB,QACpBrB,KAAKoN,SAAQ,EAEjB,CAKQ5I,4BAAAA,GAELxE,KAAKoB,OAAe0N,kBAAoB9O,KAAKoB,OAAO2N,QACpD/O,KAAKoB,OAAe4N,+BACnBhP,KAAKoB,OAAO6N,qBACbjP,KAAKoB,OAAeoM,gBAAkBxN,KAGvC,MAAMkP,EAAkBlP,KAAKoB,OAAO2N,QAAQ5O,KAAKH,KAAKoB,QACtDpB,KAAKoB,OAAO2N,QAAW7K,IACrB,MAAMiL,EAASD,EAAgBhL,GAI/B,OAHKlE,KAAKoB,OAAeoM,kBAAoBxN,KAAKgF,aAChDhF,KAAK8B,UAEAqN,GAIT,MAAMC,EAA+BpP,KAAKoB,OAAO6N,qBAAqB9O,KACpEH,KAAKoB,QAEPpB,KAAKoB,OAAO6N,qBAAwBpI,IAClC,MAAMsI,EAASC,EAA6BvI,GAI5C,OAHK7G,KAAKoB,OAAeoM,kBAAoBxN,KAAKgF,aAChDhF,KAAK8B,UAEAqN,EAEX,CAKQvK,8BAAAA,GACD5E,KAAKoB,OAAe0N,oBACvB9O,KAAKoB,OAAO2N,QAAW/O,KAAKoB,OAAe0N,yBACnC9O,KAAKoB,OAAe0N,mBAEzB9O,KAAKoB,OAAe4N,iCACvBhP,KAAKoB,OAAO6N,qBACVjP,KAAKoB,OACL4N,sCACMhP,KAAKoB,OAAe4N,uCAEtBhP,KAAKoB,OAAeoM,eAC9B,EAMK,SAAS6B,EACdjO,EACAC,EACAvB,GAMKuB,EAAemM,iBACjBnM,EAAemM,gBAAgBJ,SAAQ,GAIzC/L,EAAeoM,yBAA2BpM,EAAO4C,QAElD,MAAMqL,EAAS,IAAI1P,EAAc,CAC/BwB,SACAC,SACAC,SAAUxB,aAAO,EAAPA,EAASwB,SACnBC,SAAUzB,aAAO,EAAPA,EAASyB,WAQrB,OAFCF,EAAemM,gBAAkB8B,EAE3BA,CACT"}

package/dist/src/text/overlayEditor.mjs CHANGED Viewed

@@ -43,8 +43,8 @@ class OverlayEditor {
     // We don't need to save/restore them here as it would conflict with IText's restoration
   }
-  /**
-   * Get the container element for the overlay (parent of upperCanvasEl)
+  /**
+   * Get the container element for the overlay (parent of upperCanvasEl)
    */
   getCanvasContainer() {
     const upperCanvas = this.canvas.upperCanvasEl;
@@ -58,8 +58,8 @@ class OverlayEditor {
     return container;
   }
-  /**
-   * Create the overlay DOM structure
+  /**
+   * Create the overlay DOM structure
    */
   createOverlayDOM() {
     // Host div for positioning and overflow control
@@ -114,8 +114,8 @@ class OverlayEditor {
     document.body.appendChild(this.hostDiv);
   }
-  /**
-   * Attach all event listeners
+  /**
+   * Attach all event listeners
    */
   attachEventListeners() {
     // Textarea events
@@ -135,8 +135,8 @@ class OverlayEditor {
     this.setupViewportChangeDetection();
   }
-  /**
-   * Remove all event listeners
+  /**
+   * Remove all event listeners
    */
   removeEventListeners() {
     this.textarea.removeEventListener('input', this.boundHandlers.onInput);
@@ -153,16 +153,16 @@ class OverlayEditor {
     this.restoreViewportChangeDetection();
   }
-  /**
-   * Simple method to refresh positioning when canvas changes
+  /**
+   * Simple method to refresh positioning when canvas changes
    */
   updatePosition() {
     this.applyOverlayStyle();
   }
-  /**
-   * Update the Fabric object bounds to match current textarea size
-   * This ensures Fabric.js selection controls follow the growing textbox
+  /**
+   * Update the Fabric object bounds to match current textarea size
+   * This ensures Fabric.js selection controls follow the growing textbox
    */
   updateObjectBounds() {
     if (this.isDestroyed) return;
@@ -196,15 +196,15 @@ class OverlayEditor {
     }
   }
-  /**
-   * Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)
+  /**
+   * Convert Fabric charSpacing (1/1000 em) to CSS letter-spacing (px)
    */
   letterSpacingPx(charSpacing, fontSize) {
     return charSpacing / 1000 * fontSize;
   }
-  /**
-   * Detect text direction using first strong directional character
+  /**
+   * Detect text direction using first strong directional character
    */
   firstStrongDir(text) {
     // Hebrew: \u0590-\u05FF, Arabic: \u0600-\u06FF, \u0750-\u077F, \uFB50-\uFDFF, \uFE70-\uFEFF
@@ -288,13 +288,86 @@ class OverlayEditor {
     this.textarea.style.fontFamily = target.fontFamily || 'Arial';
     this.textarea.style.fontWeight = String(target.fontWeight || 'normal');
     this.textarea.style.fontStyle = target.fontStyle || 'normal';
-    this.textarea.style.textAlign = target.textAlign || 'left';
+    // Handle text alignment and justification
+    const textAlign = target.textAlign || 'left';
+    let cssTextAlign = textAlign;
+    // Detect text direction from content for proper justify handling
+    const autoDetectedDirection = this.firstStrongDir(this.textarea.value || '');
+    // DEBUG: Log alignment details
+    console.log('🔍 ALIGNMENT DEBUG:');
+    console.log('   Fabric textAlign:', textAlign);
+    console.log('   Fabric direction:', target.direction);
+    console.log('   Text content:', JSON.stringify(target.text));
+    console.log('   Detected direction:', autoDetectedDirection);
+    // Map fabric.js justify to CSS
+    if (textAlign.includes('justify')) {
+      // Try to match fabric.js justify behavior more precisely
+      try {
+        // For justify, we need to replicate fabric.js space expansion
+        // Use CSS justify but with specific settings to match fabric.js better
+        cssTextAlign = 'justify';
+        // Set text-align-last based on justify type and detected direction
+        // Smart justify: respect detected direction even when fabric alignment doesn't match
+        if (textAlign === 'justify') {
+          this.textarea.style.textAlignLast = autoDetectedDirection === 'rtl' ? 'right' : 'left';
+        } else if (textAlign === 'justify-left') {
+          // If text is RTL but fabric says justify-left, override to justify-right for better UX
+          if (autoDetectedDirection === 'rtl') {
+            this.textarea.style.textAlignLast = 'right';
+            console.log('   → Overrode justify-left to justify-right for RTL text');
+          } else {
+            this.textarea.style.textAlignLast = 'left';
+          }
+        } else if (textAlign === 'justify-right') {
+          // If text is LTR but fabric says justify-right, override to justify-left for better UX
+          if (autoDetectedDirection === 'ltr') {
+            this.textarea.style.textAlignLast = 'left';
+            console.log('   → Overrode justify-right to justify-left for LTR text');
+          } else {
+            this.textarea.style.textAlignLast = 'right';
+          }
+        } else if (textAlign === 'justify-center') {
+          this.textarea.style.textAlignLast = 'center';
+        }
+        // Enhanced justify settings for better fabric.js matching
+        this.textarea.style.textJustify = 'inter-word';
+        this.textarea.style.wordSpacing = 'normal';
+        // Additional CSS properties for better justify matching
+        this.textarea.style.textAlign = 'justify';
+        this.textarea.style.textAlignLast = this.textarea.style.textAlignLast;
+        // Try to force better justify behavior
+        this.textarea.style.textJustifyTrim = 'none';
+        this.textarea.style.textAutospace = 'none';
+        console.log('   → Applied justify alignment:', textAlign, 'with last-line:', this.textarea.style.textAlignLast);
+      } catch (error) {
+        console.warn('   → Justify setup failed, falling back to standard alignment:', error);
+        cssTextAlign = textAlign.replace('justify-', '').replace('justify', 'left');
+      }
+    } else {
+      this.textarea.style.textAlignLast = 'auto';
+      this.textarea.style.textJustify = 'auto';
+      this.textarea.style.wordSpacing = 'normal';
+      console.log('   → Applied standard alignment:', cssTextAlign);
+    }
+    this.textarea.style.textAlign = cssTextAlign;
     this.textarea.style.color = ((_target$fill = target.fill) === null || _target$fill === void 0 ? void 0 : _target$fill.toString()) || '#000';
     this.textarea.style.letterSpacing = `${letterSpacingPx}px`;
-    this.textarea.style.direction = target.direction || this.firstStrongDir(this.textarea.value || '');
+    // Use the already detected direction from above
+    const fabricDirection = target.direction;
+    // Use auto-detected direction for better BiDi support, but respect fabric direction if it makes sense
+    this.textarea.style.direction = autoDetectedDirection || fabricDirection || 'ltr';
     this.textarea.style.fontVariant = 'normal';
     this.textarea.style.fontStretch = 'normal';
-    this.textarea.style.textRendering = 'optimizeLegibility';
+    this.textarea.style.textRendering = 'auto'; // Changed from 'optimizeLegibility' to match canvas
     this.textarea.style.fontKerning = 'normal';
     this.textarea.style.fontFeatureSettings = 'normal';
     this.textarea.style.fontVariationSettings = 'normal';
@@ -305,20 +378,64 @@ class OverlayEditor {
     this.textarea.style.overflowWrap = 'break-word';
     this.textarea.style.whiteSpace = 'pre-wrap';
     this.textarea.style.hyphens = 'none';
-    this.textarea.style.webkitFontSmoothing = 'antialiased';
-    this.textarea.style.mozOsxFontSmoothing = 'grayscale';
-    // Debug: Compare textarea and canvas object bounding boxes
-    this.debugBoundingBoxComparison();
+    // DEBUG: Log final CSS properties
+    console.log('🎨 FINAL TEXTAREA CSS:');
+    console.log('   textAlign:', this.textarea.style.textAlign);
+    console.log('   textAlignLast:', this.textarea.style.textAlignLast);
+    console.log('   direction:', this.textarea.style.direction);
+    console.log('   unicodeBidi:', this.textarea.style.unicodeBidi);
+    console.log('   width:', this.textarea.style.width);
+    console.log('   textJustify:', this.textarea.style.textJustify);
+    console.log('   wordSpacing:', this.textarea.style.wordSpacing);
+    console.log('   whiteSpace:', this.textarea.style.whiteSpace);
+    // If justify, log Fabric object dimensions for comparison
+    if (textAlign.includes('justify')) {
+      var _calcTextWidth, _ref;
+      console.log('🔧 FABRIC OBJECT JUSTIFY INFO:');
+      console.log('   Fabric width:', target.width);
+      console.log('   Fabric calcTextWidth:', (_calcTextWidth = (_ref = target).calcTextWidth) === null || _calcTextWidth === void 0 ? void 0 : _calcTextWidth.call(_ref));
+      console.log('   Fabric textAlign:', target.textAlign);
+      console.log('   Text lines:', target.textLines);
+    }
+    // Debug font properties matching
+    console.log('🔤 FONT PROPERTIES COMPARISON:');
+    console.log('   Fabric fontFamily:', target.fontFamily);
+    console.log('   Fabric fontWeight:', target.fontWeight);
+    console.log('   Fabric fontStyle:', target.fontStyle);
+    console.log('   Fabric fontSize:', target.fontSize);
+    console.log('   → Textarea fontFamily:', this.textarea.style.fontFamily);
+    console.log('   → Textarea fontWeight:', this.textarea.style.fontWeight);
+    console.log('   → Textarea fontStyle:', this.textarea.style.fontStyle);
+    console.log('   → Textarea fontSize:', this.textarea.style.fontSize);
+    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-    // Debug: Compare text wrapping behavior
-    this.debugTextWrapping();
+    // Enhanced font rendering to better match fabric.js canvas rendering
+    // Default to auto for more natural rendering
+    this.textarea.style.webkitFontSmoothing = 'auto';
+    this.textarea.style.mozOsxFontSmoothing = 'auto';
+    this.textarea.style.fontSmooth = 'auto';
+    this.textarea.style.textSizeAdjust = 'none';
+    // For bold fonts, use subpixel rendering to match canvas thickness better
+    const fontWeight = String(target.fontWeight || 'normal');
+    const isBold = fontWeight === 'bold' || fontWeight === '700' || parseInt(fontWeight) >= 600;
+    if (isBold) {
+      this.textarea.style.webkitFontSmoothing = 'subpixel-antialiased';
+      this.textarea.style.mozOsxFontSmoothing = 'unset';
+      console.log('🔤 Applied enhanced bold rendering for better thickness matching');
+    }
+    console.log('🎨 FONT SMOOTHING APPLIED:');
+    console.log('   webkitFontSmoothing:', this.textarea.style.webkitFontSmoothing);
+    console.log('   mozOsxFontSmoothing:', this.textarea.style.mozOsxFontSmoothing);
     // Initial bounds are set correctly by Fabric.js - don't force update here
   }
-  /**
-   * Debug method to compare textarea and canvas object bounding boxes
+  /**
+   * Debug method to compare textarea and canvas object bounding boxes
    */
   debugBoundingBoxComparison() {
     const target = this.target;
@@ -388,8 +505,8 @@ class OverlayEditor {
     console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   }
-  /**
-   * Debug method to compare text wrapping between textarea and Fabric text object
+  /**
+   * Debug method to compare text wrapping between textarea and Fabric text object
    */
   debugTextWrapping() {
     const target = this.target;
@@ -474,8 +591,8 @@ class OverlayEditor {
     console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
   }
-  /**
-   * Focus the textarea and position cursor at end
+  /**
+   * Focus the textarea and position cursor at end
    */
   focusTextarea() {
     // For overlay editing, we want to keep the object in "selection mode" not "editing mode"
@@ -510,8 +627,8 @@ class OverlayEditor {
     this.canvas.requestRenderAll();
   }
-  /**
-   * Refresh overlay positioning and styling
+  /**
+   * Refresh overlay positioning and styling
    */
   refresh() {
     if (this.isDestroyed) return;
@@ -519,8 +636,8 @@ class OverlayEditor {
     // Don't update object bounds on every refresh - only when textarea actually resizes
   }
-  /**
-   * Destroy the overlay editor
+  /**
+   * Destroy the overlay editor
    */
   destroy() {
     let commit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
@@ -547,6 +664,23 @@ class OverlayEditor {
     // Handle commit/cancel after restoring visibility
     if (commit && !this.isComposing) {
       const finalText = this.textarea.value;
+      // Auto-detect text direction and update fabric object if needed
+      const detectedDirection = this.firstStrongDir(finalText);
+      const currentDirection = this.target.direction || 'ltr';
+      if (detectedDirection && detectedDirection !== currentDirection) {
+        console.log(`🔄 Overlay Exit: Auto-detected direction change from "${currentDirection}" to "${detectedDirection}"`);
+        console.log(`   Text content: "${finalText.substring(0, 50)}..."`);
+        // Update the fabric object's direction
+        this.target.set('direction', detectedDirection);
+        // Force a re-render to apply the direction change
+        this.canvas.requestRenderAll();
+        console.log(`✅ Fabric object direction updated to: ${detectedDirection}`);
+      } else {
+        console.log(`📝 Overlay Exit: Direction unchanged (${currentDirection}), text: "${finalText.substring(0, 30)}..."`);
+      }
       if (this.onCommit) {
         this.onCommit(finalText);
       }
@@ -671,8 +805,8 @@ class OverlayEditor {
     }
   }
-  /**
-   * Setup detection for viewport changes (zoom/pan)
+  /**
+   * Setup detection for viewport changes (zoom/pan)
    */
   setupViewportChangeDetection() {
     // Store original methods
@@ -701,8 +835,8 @@ class OverlayEditor {
     };
   }
-  /**
-   * Restore original viewport methods
+  /**
+   * Restore original viewport methods
    */
   restoreViewportChangeDetection() {
     if (this.canvas.__originalSetZoom) {
@@ -717,8 +851,8 @@ class OverlayEditor {
   }
 }
-/**
- * Enter overlay text editing mode for a text object
+/**
+ * Enter overlay text editing mode for a text object
  */
 function enterTextOverlayEdit(canvas, target, options) {
   // If already in overlay editing, destroy existing editor first