@nasser-sw/fabric 7.0.0-beta1

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

@@ -0,0 +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 = /[\\u0600-\\u06FF\\u0750-\\u077F\\uFB50-\\uFDFF\\uFE70-\\uFEFF]/.test(this.target.text || '');\r\n    const isLTRDirection = (this.target as any).direction === 'ltr';\r\n    \r\n    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    // Only update if there's a meaningful change (avoid float precision issues)\r\n    const heightDiff = Math.abs(currentHeight - target.height);\r\n    const threshold = 1; // 1px threshold to avoid micro-changes\r\n    \r\n    if (heightDiff > threshold) {\r\n      target.height = currentHeight;\r\n      target.setCoords(); // Update control positions\r\n      this.canvas.requestRenderAll(); // Re-render to show updated selection\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    // DEBUG: Log dimensions before edit\r\n    console.log('BEFORE EDIT:');\r\n    console.log('  target.width =', (target as any).width);\r\n    console.log('  target.height =', target.height);\r\n    console.log('  target.getScaledWidth() =', target.getScaledWidth());\r\n    console.log('  target.getScaledHeight() =', target.getScaledHeight());\r\n    console.log('  target.padding =', (target as any).padding);\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({ x: aCoords.tl.x, y: aCoords.tl.y }, vpt);\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. Get dimensions with zoom scaling - use target.width for text wrapping, scaled height for container\r\n    const width = (target as any).width * (target.scaleX || 1) * zoom; // Account for object scale and viewport zoom\r\n    const height = target.height * (target.scaleY || 1) * zoom;\r\n    \r\n    console.log('WIDTH CALCULATION:');\r\n    console.log('  target.width =', (target as any).width);\r\n    console.log('  scaledWidth =', target.getScaledWidth());\r\n    console.log('  zoom =', zoom);\r\n    console.log('  final width =', width);\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    // Apply padding and dimensions to textarea\r\n    const textareaWidth = paddingX > 0 ? `calc(100% - ${2 * paddingX}px)` : '100%';\r\n    const textareaHeight = paddingY > 0 ? `calc(100% - ${2 * paddingY}px)` : '100%';\r\n    \r\n    this.textarea.style.width = textareaWidth;\r\n    this.textarea.style.height = textareaHeight;\r\n    this.textarea.style.padding = `${paddingY}px ${paddingX}px`;\r\n    \r\n    this.textarea.style.fontSize = `${finalFontSize}px`;\r\n    this.textarea.style.lineHeight = String(fabricLineHeight); // Use unit-less multiplier\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 = `${((target.charSpacing || 0) / 1000)}em`;\r\n    this.textarea.style.direction = (target as any).direction || this.firstStrongDir(this.textarea.value || '');\r\n    \r\n    // Ensure consistent font rendering between Fabric and CSS\r\n    this.textarea.style.fontVariant = 'normal';\r\n    this.textarea.style.fontStretch = 'normal';\r\n    this.textarea.style.textRendering = 'auto';\r\n    this.textarea.style.fontKerning = 'auto';\r\n    this.textarea.style.boxSizing = 'content-box'; // Padding is added outside width/height\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.wordWrap = 'break-word';\r\n    this.textarea.style.whiteSpace = 'pre-wrap';\r\n    \r\n    // DEBUG: Log final textarea dimensions\r\n    console.log('TEXTAREA AFTER SETUP:');\r\n    console.log('  textarea width =', this.textarea.style.width);\r\n    console.log('  textarea height =', this.textarea.style.height);\r\n    console.log('  textarea padding =', this.textarea.style.padding);\r\n    console.log('  paddingX =', paddingX, 'paddingY =', paddingY);\r\n    console.log('  baseFontSize =', baseFontSize);\r\n    console.log('  scaleX =', scaleX);\r\n    console.log('  zoom =', zoom);\r\n    console.log('  finalFontSize =', finalFontSize);\r\n    console.log('  fabricLineHeight =', fabricLineHeight);\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\r\n  /**\r\n   * Focus the textarea and position cursor at end\r\n   */\r\n  private focusTextarea(): void {\r\n    \r\n\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    \r\n\r\n    this.textarea.focus();\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      // 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    // Allow both vertical growth and shrinking; host width stays fixed\r\n    const oldHeight = parseFloat(window.getComputedStyle(this.textarea).height);\r\n    \r\n    // Reset height to measure actual needed height\r\n    this.textarea.style.height = 'auto';\r\n    const scrollHeight = this.textarea.scrollHeight;\r\n    \r\n    // Add extra padding to prevent text clipping (especially for line height)\r\n    const lineHeightBuffer = 8; // Extra space to prevent clipping\r\n    const newHeight = Math.max(scrollHeight + lineHeightBuffer, 25); // Minimum height with buffer\r\n    const heightChanged = Math.abs(newHeight - oldHeight) > 2; // Only if meaningful change\r\n    \r\n    this.textarea.style.height = `${newHeight}px`;\r\n    this.hostDiv.style.height = `${newHeight}px`; // Match exactly\r\n    \r\n    // Only update object bounds if height actually changed\r\n    if (heightChanged) {\r\n      this.updateObjectBounds();\r\n    }\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    }\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 = 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(this.canvas);\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 = (this.canvas as any).__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\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","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","requestRenderAll","letterSpacingPx","charSpacing","fontSize","firstStrongDir","_target$fontSize","_target$fill","aCoords","console","log","getScaledWidth","getScaledHeight","canvasRect","getBoundingClientRect","scrollX","window","pageXOffset","scrollY","pageYOffset","vpt","viewportTransform","paddingX","scaleX","paddingY","scaleY","screenPoint","transformPoint","x","tl","y","angle","transform","baseFontSize","finalFontSize","fabricLineHeight","lineHeight","textareaWidth","textareaHeight","String","fontFamily","fontWeight","fontStyle","textAlign","color","fill","toString","letterSpacing","fontVariant","fontStretch","textRendering","fontKerning","boxSizing","wordWrap","selected","isEditing","set","hasControls","hasBorders","selectable","lockMovementX","lockMovementY","setActiveObject","focus","setSelectionRange","length","destroy","commit","arguments","undefined","__overlayEditor","__overlayOriginalOpacity","parentNode","removeChild","isComposing","finalText","setTimeout","cursor","setCursor","defaultCursor","autoResizeTextarea","oldHeight","getComputedStyle","scrollHeight","newHeight","max","heightChanged","e","key","preventDefault","ctrlKey","metaKey","__originalSetZoom","setZoom","__originalSetViewportTransform","setViewportTransform","originalSetZoom","result","originalSetViewportTransform","enterTextOverlayEdit","editor"],"mappings":"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"}

package/dist/src/text/overlayEditor.mjs

@@ -0,0 +1,553 @@
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
+import { transformPoint } from '../util/misc/matrix.mjs';
+
+class OverlayEditor {
+  constructor(options) {
+    _defineProperty(this, "canvas", void 0);
+    _defineProperty(this, "target", void 0);
+    _defineProperty(this, "container", void 0);
+    _defineProperty(this, "textarea", void 0);
+    _defineProperty(this, "hostDiv", void 0);
+    _defineProperty(this, "isDestroyed", false);
+    _defineProperty(this, "isComposing", false);
+    _defineProperty(this, "lastText", void 0);
+    _defineProperty(this, "onCommit", void 0);
+    _defineProperty(this, "onCancel", void 0);
+    // Bound event handlers for cleanup
+    _defineProperty(this, "boundHandlers", {
+      onInput: this.handleInput.bind(this),
+      onKeyDown: this.handleKeyDown.bind(this),
+      onBlur: this.handleBlur.bind(this),
+      onCompositionStart: this.handleCompositionStart.bind(this),
+      onCompositionEnd: this.handleCompositionEnd.bind(this),
+      onAfterRender: this.handleAfterRender.bind(this),
+      onMouseWheel: this.handleMouseWheel.bind(this),
+      onFocus: this.handleFocus.bind(this),
+      onMouseDown: this.handleMouseDown.bind(this)
+    });
+    this.canvas = options.canvas;
+    this.target = options.target;
+    this.onCommit = options.onCommit;
+    this.onCancel = options.onCancel;
+    this.lastText = this.target.text || '';
+    this.container = this.getCanvasContainer();
+    this.createOverlayDOM();
+    this.attachEventListeners();
+    this.refresh();
+    this.focusTextarea();
+
+    // Note: Don't manage object cursors since IText manages all cursors in _saveEditingProps/_restoreEditingProps
+    // The IText editing system handles hoverCursor, moveCursor, and canvas cursors properly
+
+    // Note: Canvas cursors are handled by IText's _saveEditingProps/_restoreEditingProps
+    // 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)
+   */
+  getCanvasContainer() {
+    const upperCanvas = this.canvas.upperCanvasEl;
+    const container = upperCanvas.parentElement;
+    if (!container) {
+      throw new Error('Canvas must be mounted in DOM to use overlay editing');
+    }
+
+    // Ensure the container is positioned for absolute overlay positioning
+    container.style.position = 'relative';
+    return container;
+  }
+
+  /**
+   * Create the overlay DOM structure
+   */
+  createOverlayDOM() {
+    // Host div for positioning and overflow control
+    this.hostDiv = document.createElement('div');
+    this.hostDiv.style.position = 'absolute';
+    this.hostDiv.style.pointerEvents = 'none';
+    this.hostDiv.style.zIndex = '1000';
+    this.hostDiv.style.transformOrigin = 'left top';
+
+    // Textarea for actual text input
+    this.textarea = document.createElement('textarea');
+    this.textarea.style.position = 'absolute';
+    this.textarea.style.left = '0';
+    this.textarea.style.top = '0';
+    this.textarea.style.margin = '0';
+    this.textarea.style.resize = 'none';
+    this.textarea.style.pointerEvents = 'auto';
+    // Set appropriate unicodeBidi based on content and direction
+    const hasArabicText = /[\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/.test(this.target.text || '');
+    const isLTRDirection = this.target.direction === 'ltr';
+    if (hasArabicText && isLTRDirection) {
+      // For Arabic text in LTR mode, use embed to preserve shaping while respecting direction
+      this.textarea.style.unicodeBidi = 'embed';
+    } else {
+      // Default to plaintext for natural text flow
+      this.textarea.style.unicodeBidi = 'plaintext';
+    }
+    this.textarea.style.caretColor = 'auto';
+
+    // Polotno-like base
+    this.textarea.style.border = 'none';
+    this.textarea.style.padding = '0';
+    this.textarea.style.background = 'transparent'; // Transparent so Fabric text shows through
+    this.textarea.style.outline = 'none';
+    this.textarea.style.overflow = 'hidden'; // Prevent scrollbars
+    this.textarea.style.whiteSpace = 'pre-wrap';
+    this.textarea.style.wordBreak = 'normal';
+    this.textarea.style.overflowWrap = 'break-word';
+    this.textarea.style.userSelect = 'text';
+    this.textarea.style.textTransform = 'none';
+
+    // Start visible - we'll handle transitions differently
+    this.textarea.style.opacity = '1';
+
+    // Set initial text
+    this.textarea.value = this.target.text || '';
+    this.hostDiv.appendChild(this.textarea);
+    document.body.appendChild(this.hostDiv);
+  }
+
+  /**
+   * Attach all event listeners
+   */
+  attachEventListeners() {
+    // Textarea events
+    this.textarea.addEventListener('input', this.boundHandlers.onInput);
+    this.textarea.addEventListener('keydown', this.boundHandlers.onKeyDown);
+    this.textarea.addEventListener('blur', this.boundHandlers.onBlur);
+    this.textarea.addEventListener('compositionstart', this.boundHandlers.onCompositionStart);
+    this.textarea.addEventListener('compositionend', this.boundHandlers.onCompositionEnd);
+    this.textarea.addEventListener('focus', this.boundHandlers.onFocus);
+
+    // Canvas events for synchronization
+    this.canvas.on('after:render', this.boundHandlers.onAfterRender);
+    this.canvas.on('mouse:wheel', this.boundHandlers.onMouseWheel);
+    this.canvas.on('mouse:down', this.boundHandlers.onMouseDown);
+
+    // Store original methods to detect viewport changes
+    this.setupViewportChangeDetection();
+  }
+
+  /**
+   * Remove all event listeners
+   */
+  removeEventListeners() {
+    this.textarea.removeEventListener('input', this.boundHandlers.onInput);
+    this.textarea.removeEventListener('keydown', this.boundHandlers.onKeyDown);
+    this.textarea.removeEventListener('blur', this.boundHandlers.onBlur);
+    this.textarea.removeEventListener('compositionstart', this.boundHandlers.onCompositionStart);
+    this.textarea.removeEventListener('compositionend', this.boundHandlers.onCompositionEnd);
+    this.textarea.removeEventListener('focus', this.boundHandlers.onFocus);
+    this.canvas.off('after:render', this.boundHandlers.onAfterRender);
+    this.canvas.off('mouse:wheel', this.boundHandlers.onMouseWheel);
+    this.canvas.off('mouse:down', this.boundHandlers.onMouseDown);
+
+    // Restore original methods
+    this.restoreViewportChangeDetection();
+  }
+
+  /**
+   * 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
+   */
+  updateObjectBounds() {
+    if (this.isDestroyed) return;
+    const target = this.target;
+    const zoom = this.canvas.getZoom();
+
+    // Get current textbox dimensions from the host div (in canvas coordinates)
+    parseFloat(this.hostDiv.style.width) / zoom;
+    const currentHeight = parseFloat(this.hostDiv.style.height) / zoom;
+
+    // Only update if there's a meaningful change (avoid float precision issues)
+    const heightDiff = Math.abs(currentHeight - target.height);
+    const threshold = 1; // 1px threshold to avoid micro-changes
+
+    if (heightDiff > threshold) {
+      target.height = currentHeight;
+      target.setCoords(); // Update control positions
+      this.canvas.requestRenderAll(); // Re-render to show updated selection
+    }
+  }
+
+  /**
+   * 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
+   */
+  firstStrongDir(text) {
+    // Hebrew: \u0590-\u05FF, Arabic: \u0600-\u06FF, \u0750-\u077F, \uFB50-\uFDFF, \uFE70-\uFEFF
+    const rtlRegex = /[\u0590-\u05FF\u0600-\u06FF\u0750-\u077F\uFB50-\uFDFF\uFE70-\uFEFF]/;
+    return rtlRegex.test(text) ? 'rtl' : 'ltr';
+  }
+  applyOverlayStyle() {
+    var _target$fontSize, _target$fill;
+    const target = this.target;
+    const canvas = this.canvas;
+
+    // 1. Freshen object's transformations - use aCoords like rtl-test.html
+    target.setCoords();
+    const aCoords = target.aCoords;
+
+    // DEBUG: Log dimensions before edit
+    console.log('BEFORE EDIT:');
+    console.log('  target.width =', target.width);
+    console.log('  target.height =', target.height);
+    console.log('  target.getScaledWidth() =', target.getScaledWidth());
+    console.log('  target.getScaledHeight() =', target.getScaledHeight());
+    console.log('  target.padding =', target.padding);
+
+    // 2. Get canvas position and scroll offsets (like rtl-test.html)
+    const canvasEl = canvas.upperCanvasEl;
+    const canvasRect = canvasEl.getBoundingClientRect();
+    const scrollX = window.scrollX || window.pageXOffset;
+    const scrollY = window.scrollY || window.pageYOffset;
+
+    // 3. Position and dimensions accounting for Fabric Textbox padding and viewport transform
+    const zoom = canvas.getZoom();
+    const vpt = canvas.viewportTransform;
+    const padding = target.padding || 0;
+    const paddingX = padding * (target.scaleX || 1) * zoom;
+    const paddingY = padding * (target.scaleY || 1) * zoom;
+
+    // Transform object's top-left corner coordinates to screen coordinates using viewport transform
+    // aCoords.tl already accounts for object positioning and scaling, just need viewport transform
+    const screenPoint = transformPoint({
+      x: aCoords.tl.x,
+      y: aCoords.tl.y
+    }, vpt);
+    const left = canvasRect.left + scrollX + screenPoint.x;
+    const top = canvasRect.top + scrollY + screenPoint.y;
+
+    // 4. Get dimensions with zoom scaling - use target.width for text wrapping, scaled height for container
+    const width = target.width * (target.scaleX || 1) * zoom; // Account for object scale and viewport zoom
+    const height = target.height * (target.scaleY || 1) * zoom;
+    console.log('WIDTH CALCULATION:');
+    console.log('  target.width =', target.width);
+    console.log('  scaledWidth =', target.getScaledWidth());
+    console.log('  zoom =', zoom);
+    console.log('  final width =', width);
+
+    // 5. Apply styles to host DIV - absolute positioning like rtl-test.html
+    this.hostDiv.style.position = 'absolute';
+    this.hostDiv.style.left = `${left}px`;
+    this.hostDiv.style.top = `${top}px`;
+    this.hostDiv.style.width = `${width}px`;
+    this.hostDiv.style.height = `${height}px`;
+    this.hostDiv.style.overflow = 'hidden'; // Prevent scrollbars in host div
+    // Apply rotation matching Fabric.js object transformation
+    if (target.angle) {
+      this.hostDiv.style.transform = `rotate(${target.angle}deg)`;
+      this.hostDiv.style.transformOrigin = 'top left'; // Match Fabric Textbox behavior
+    } else {
+      this.hostDiv.style.transform = '';
+      this.hostDiv.style.transformOrigin = '';
+    }
+
+    // 6. Style the textarea - match Fabric's exact rendering with padding
+    const baseFontSize = (_target$fontSize = target.fontSize) !== null && _target$fontSize !== void 0 ? _target$fontSize : 16;
+    // Use scaleX for font scaling to match Fabric text scaling exactly
+    const scaleX = target.scaleX || 1;
+    const finalFontSize = baseFontSize * scaleX * zoom;
+    const fabricLineHeight = target.lineHeight || 1.16;
+    // Apply padding and dimensions to textarea
+    const textareaWidth = paddingX > 0 ? `calc(100% - ${2 * paddingX}px)` : '100%';
+    const textareaHeight = paddingY > 0 ? `calc(100% - ${2 * paddingY}px)` : '100%';
+    this.textarea.style.width = textareaWidth;
+    this.textarea.style.height = textareaHeight;
+    this.textarea.style.padding = `${paddingY}px ${paddingX}px`;
+    this.textarea.style.fontSize = `${finalFontSize}px`;
+    this.textarea.style.lineHeight = String(fabricLineHeight); // Use unit-less multiplier
+    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';
+    this.textarea.style.color = ((_target$fill = target.fill) === null || _target$fill === void 0 ? void 0 : _target$fill.toString()) || '#000';
+    this.textarea.style.letterSpacing = `${(target.charSpacing || 0) / 1000}em`;
+    this.textarea.style.direction = target.direction || this.firstStrongDir(this.textarea.value || '');
+
+    // Ensure consistent font rendering between Fabric and CSS
+    this.textarea.style.fontVariant = 'normal';
+    this.textarea.style.fontStretch = 'normal';
+    this.textarea.style.textRendering = 'auto';
+    this.textarea.style.fontKerning = 'auto';
+    this.textarea.style.boxSizing = 'content-box'; // Padding is added outside width/height
+    this.textarea.style.margin = '0';
+    this.textarea.style.border = 'none';
+    this.textarea.style.outline = 'none';
+    this.textarea.style.background = 'transparent';
+    this.textarea.style.wordWrap = 'break-word';
+    this.textarea.style.whiteSpace = 'pre-wrap';
+
+    // DEBUG: Log final textarea dimensions
+    console.log('TEXTAREA AFTER SETUP:');
+    console.log('  textarea width =', this.textarea.style.width);
+    console.log('  textarea height =', this.textarea.style.height);
+    console.log('  textarea padding =', this.textarea.style.padding);
+    console.log('  paddingX =', paddingX, 'paddingY =', paddingY);
+    console.log('  baseFontSize =', baseFontSize);
+    console.log('  scaleX =', scaleX);
+    console.log('  zoom =', zoom);
+    console.log('  finalFontSize =', finalFontSize);
+    console.log('  fabricLineHeight =', fabricLineHeight);
+
+    // Initial bounds are set correctly by Fabric.js - don't force update here
+  }
+
+  /**
+   * Focus the textarea and position cursor at end
+   */
+  focusTextarea() {
+    // For overlay editing, we want to keep the object in "selection mode" not "editing mode"
+    // This means keeping selected=true and isEditing=false to show boundaries
+
+    // Hide the text content only (not the entire object)
+    this.target.opacity = 0.01; // Nearly transparent but not fully hidden
+
+    // Ensure object stays selected to show boundaries
+    this.target.selected = true;
+    this.target.isEditing = false; // Override any editing state
+
+    // Make sure controls are enabled and movement is allowed during overlay editing
+    this.target.set({
+      hasControls: true,
+      hasBorders: true,
+      selectable: true,
+      lockMovementX: false,
+      lockMovementY: false
+    });
+
+    // Keep as active object
+    this.canvas.setActiveObject(this.target);
+    this.canvas.requestRenderAll();
+    this.target.setCoords();
+    this.applyOverlayStyle();
+    this.textarea.focus();
+    this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
+
+    // Ensure the object stays selected even after textarea focus
+    this.canvas.setActiveObject(this.target);
+    this.canvas.requestRenderAll();
+  }
+
+  /**
+   * Refresh overlay positioning and styling
+   */
+  refresh() {
+    if (this.isDestroyed) return;
+    this.updatePosition();
+    // Don't update object bounds on every refresh - only when textarea actually resizes
+  }
+
+  /**
+   * Destroy the overlay editor
+   */
+  destroy() {
+    let commit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (this.isDestroyed) return;
+    this.isDestroyed = true;
+    this.removeEventListeners();
+
+    // Restore target visibility before handling commit/cancel
+    if (this.target.__overlayEditor === this) {
+      this.target.__overlayEditor = undefined;
+
+      // Restore original opacity
+      if (this.target.__overlayOriginalOpacity !== undefined) {
+        this.target.opacity = this.target.__overlayOriginalOpacity;
+        delete this.target.__overlayOriginalOpacity;
+      }
+    }
+
+    // Remove DOM first
+    if (this.hostDiv.parentNode) {
+      this.hostDiv.parentNode.removeChild(this.hostDiv);
+    }
+
+    // Handle commit/cancel after restoring visibility
+    if (commit && !this.isComposing) {
+      const finalText = this.textarea.value;
+      if (this.onCommit) {
+        this.onCommit(finalText);
+      }
+    } else if (!commit && this.onCancel) {
+      this.onCancel();
+    }
+
+    // Note: Don't restore object cursors since IText manages all cursors in _restoreEditingProps
+    // Let the IText editing system handle proper restoration of all cursor properties
+
+    // Note: Canvas cursors are restored by IText's _restoreEditingProps method
+    // Force a cursor refresh by triggering _setCursorFromEvent
+    setTimeout(() => {
+      this.canvas.upperCanvasEl.style.cursor = '';
+      // Trigger cursor refresh on next mouse move
+      this.canvas.setCursor(this.canvas.defaultCursor);
+    }, 0);
+
+    // Request canvas re-render
+    this.canvas.requestRenderAll();
+  }
+
+  // Event handlers
+  handleInput() {
+    if (!this.isComposing && this.target.text !== this.textarea.value) {
+      // Live update target text
+      this.target.text = this.textarea.value;
+
+      // Auto-resize textarea to match new content
+      this.autoResizeTextarea();
+
+      // Ensure object stays in selection mode (not editing mode) to show controls
+      this.target.selected = true;
+      this.target.isEditing = false;
+      this.canvas.setActiveObject(this.target);
+      this.canvas.requestRenderAll();
+    }
+  }
+  autoResizeTextarea() {
+    // Allow both vertical growth and shrinking; host width stays fixed
+    const oldHeight = parseFloat(window.getComputedStyle(this.textarea).height);
+
+    // Reset height to measure actual needed height
+    this.textarea.style.height = 'auto';
+    const scrollHeight = this.textarea.scrollHeight;
+
+    // Add extra padding to prevent text clipping (especially for line height)
+    const lineHeightBuffer = 8; // Extra space to prevent clipping
+    const newHeight = Math.max(scrollHeight + lineHeightBuffer, 25); // Minimum height with buffer
+    const heightChanged = Math.abs(newHeight - oldHeight) > 2; // Only if meaningful change
+
+    this.textarea.style.height = `${newHeight}px`;
+    this.hostDiv.style.height = `${newHeight}px`; // Match exactly
+
+    // Only update object bounds if height actually changed
+    if (heightChanged) {
+      this.updateObjectBounds();
+    }
+  }
+  handleKeyDown(e) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.destroy(false); // Cancel
+    } else if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      this.destroy(true); // Commit
+    }
+  }
+  handleFocus() {
+    // Focus handler - could be used for future enhancements
+  }
+  handleBlur() {
+    // Commit on blur unless we're in composition mode
+    if (!this.isComposing) {
+      this.destroy(true);
+    }
+  }
+  handleCompositionStart() {
+    this.isComposing = true;
+  }
+  handleCompositionEnd() {
+    this.isComposing = false;
+    this.handleInput(); // Update text after composition
+  }
+  handleAfterRender() {
+    this.refresh();
+  }
+  handleMouseWheel() {
+    this.refresh();
+  }
+  handleMouseDown(e) {
+    if (e.target !== this.target) {
+      this.destroy(true);
+    }
+  }
+
+  /**
+   * Setup detection for viewport changes (zoom/pan)
+   */
+  setupViewportChangeDetection() {
+    // Store original methods
+    this.canvas.__originalSetZoom = this.canvas.setZoom;
+    this.canvas.__originalSetViewportTransform = this.canvas.setViewportTransform;
+    this.canvas.__overlayEditor = this;
+
+    // Override setZoom to detect zoom changes
+    const originalSetZoom = this.canvas.setZoom.bind(this.canvas);
+    this.canvas.setZoom = value => {
+      const result = originalSetZoom(value);
+      if (this.canvas.__overlayEditor && !this.isDestroyed) {
+        this.refresh();
+      }
+      return result;
+    };
+
+    // Override setViewportTransform to detect pan changes
+    const originalSetViewportTransform = this.canvas.setViewportTransform.bind(this.canvas);
+    this.canvas.setViewportTransform = vpt => {
+      const result = originalSetViewportTransform(vpt);
+      if (this.canvas.__overlayEditor && !this.isDestroyed) {
+        this.refresh();
+      }
+      return result;
+    };
+  }
+
+  /**
+   * Restore original viewport methods
+   */
+  restoreViewportChangeDetection() {
+    if (this.canvas.__originalSetZoom) {
+      this.canvas.setZoom = this.canvas.__originalSetZoom;
+      delete this.canvas.__originalSetZoom;
+    }
+    if (this.canvas.__originalSetViewportTransform) {
+      this.canvas.setViewportTransform = this.canvas.__originalSetViewportTransform;
+      delete this.canvas.__originalSetViewportTransform;
+    }
+    delete this.canvas.__overlayEditor;
+  }
+}
+
+/**
+ * Enter overlay text editing mode for a text object
+ */
+function enterTextOverlayEdit(canvas, target, options) {
+  // If already in overlay editing, destroy existing editor first
+  if (target.__overlayEditor) {
+    target.__overlayEditor.destroy(false);
+  }
+
+  // Store original opacity so we can restore it later
+  target.__overlayOriginalOpacity = target.opacity;
+  const editor = new OverlayEditor({
+    canvas,
+    target,
+    onCommit: options === null || options === void 0 ? void 0 : options.onCommit,
+    onCancel: options === null || options === void 0 ? void 0 : options.onCancel
+  });
+
+  // We no longer change fill, so no need to store it
+
+  // Store reference on target for cleanup
+  target.__overlayEditor = editor;
+  return editor;
+}
+
+export { OverlayEditor, enterTextOverlayEdit };
+//# sourceMappingURL=overlayEditor.mjs.map