pushfeedback 0.1.69 → 0.1.70

package/dist/pushfeedback/canvas-editor.entry.js

@@ -0,0 +1,860 @@
+import { r as registerInstance, e as createEvent, h } from './index-36434da0.js';
+
+const canvasEditorCss = ":host{display:block}.canvas-editor-wrapper{position:relative}.canvas-editor-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0, 0, 0, 0.8);display:flex;align-items:center;justify-content:center;z-index:9999}.canvas-editor-modal{width:95vw;max-width:1400px;max-height:900px;background:var(--feedback-canvas-editor-bg-color, #ffffff);border-radius:8px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0, 0, 0, 0.2)}.canvas-editor-header{background:var(--feedback-canvas-editor-header-bg-color, #f5f5f5);border-bottom:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);padding:12px 16px;display:flex;flex-direction:column;gap:12px}.canvas-editor-title h3{margin:0;font-size:16px;font-weight:600;color:var(--feedback-canvas-editor-tool-text-color, #333)}.canvas-editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px}.toolbar-section{display:flex;align-items:center;gap:8px}.tool-group{display:flex;align-items:center;gap:4px}.tool-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;transition:all 0.2s ease;padding:0}.tool-btn svg{width:18px;height:18px;color:var(--feedback-canvas-editor-tool-text-color, #333)}.tool-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.tool-btn.active,.tool-btn.active:hover{background:var(--feedback-canvas-editor-tool-bg-active, #0070f4);color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn.active svg{color:var(--feedback-canvas-editor-tool-text-active, #ffffff)}.tool-btn:disabled{opacity:0.4;cursor:not-allowed;color:var(--feedback-canvas-editor-tool-text-color, #333)}.toolbar-divider{width:1px;height:24px;background:var(--feedback-canvas-editor-divider-color, #e0e0e0);margin:0 4px}.undo-btn{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff) !important;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0) !important}.undo-btn:hover:not(:disabled){background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0) !important}.color-palette{display:flex;align-items:center;gap:6px}.color-slot-wrapper{position:relative;display:flex;align-items:center}.color-btn{width:32px;height:32px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0)}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--feedback-primary-color, #0070f4);box-shadow:0 0 0 2px rgba(0, 112, 244, 0.2)}.color-btn.editing{border-color:var(--feedback-primary-color, #0070f4)}.color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:4px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.1)}.color-picker-dropdown input[type=\"color\"]{width:40px;height:40px;border:none;border-radius:4px;cursor:pointer}.size-control{display:flex;align-items:center;gap:8px;background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;padding:6px 12px}.size-slider{width:80px;height:20px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.size-slider::-webkit-slider-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;cursor:pointer}.size-slider::-moz-range-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none}.size-slider::-moz-range-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-slider::-ms-track{width:100%;height:4px;background:var(--feedback-canvas-editor-slider-track, #e0e0e0);border-radius:2px;border:none;color:transparent}.size-slider::-ms-thumb{width:16px;height:16px;background:var(--feedback-primary-color, #0070f4);border-radius:50%;border:none;cursor:pointer}.size-value{font-weight:500;color:var(--feedback-canvas-editor-tool-text-color, #333);font-size:12px;min-width:30px}.selected-annotation-controls{border-left:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:12px;margin-left:8px;min-width:200px}.text-controls{display:flex;flex-direction:row;align-items:center;gap:12px}.font-size-control,.border-width-control{display:flex;align-items:center;gap:6px}.font-size-control label,.border-width-control label{font-size:12px;color:var(--feedback-canvas-editor-tool-text-color, #333);font-weight:500;min-width:35px}.action-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--feedback-canvas-editor-border-color, #e0e0e0);border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;min-width:65px;justify-content:center;height:36px}.action-btn.secondary{background:var(--feedback-canvas-editor-tool-bg-color, #ffffff);color:var(--feedback-canvas-editor-tool-text-color, #333);border-color:var(--feedback-canvas-editor-border-color, #e0e0e0)}.action-btn.secondary:hover{background:var(--feedback-canvas-editor-tool-bg-hover, #f0f0f0)}.action-btn.primary{background:var(--feedback-primary-color, #0070f4);color:#ffffff;border-color:var(--feedback-primary-color, #0070f4)}.action-btn.primary:hover{background:#0056cc;border-color:#0056cc}.action-btn.small{height:28px;padding:4px 8px;font-size:12px;min-width:65px}.shape-controls{display:flex;flex-direction:column;gap:8px}.canvas-editor-content{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--feedback-canvas-editor-content-bg, #f5f5f5);overflow:hidden;min-height:0;min-width:0}.annotation-canvas{max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair;border-radius:6px;box-shadow:0px 1px 2px 0px rgba(60, 64, 67, .30), 0px 2px 6px 2px rgba(60, 64, 67, .15);background:#ffffff;transition:box-shadow 0.3s ease;object-fit:contain;display:block}.annotation-canvas:hover{box-shadow:0px 2px 4px 0px rgba(60, 64, 67, .35), 0px 4px 12px 4px rgba(60, 64, 67, .20)}@media screen and (max-width: 768px){.canvas-editor-modal{width:100vw;height:100vh;border-radius:0}.canvas-editor-toolbar{flex-direction:column;align-items:stretch;gap:8px}.toolbar-section{justify-content:center}.selected-annotation-controls{border-left:none;border-top:2px solid var(--feedback-canvas-editor-divider-color, #e0e0e0);padding-left:0;padding-top:8px;margin-left:0;margin-top:8px;min-width:auto}}";
+
+const CanvasEditor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.screenshotReady = createEvent(this, "screenshotReady", 7);
+    this.screenshotCancelled = createEvent(this, "screenshotCancelled", 7);
+    this.screenshotFailed = createEvent(this, "screenshotFailed", 7);
+    this.openScreenShot = async () => {
+      // Show loading state immediately
+      this.takingScreenshot = true;
+      // Clear any previous annotations when taking a new screenshot
+      this.annotations = [];
+      this.currentAnnotation = null;
+      this.isDrawing = false;
+      this.hoveredAnnotation = null;
+      // Hide any feedback buttons on the page
+      this.hideAllFeedbackElements();
+      try {
+        // Wait a moment for UI to update before capturing
+        await new Promise(resolve => setTimeout(resolve, 100));
+        // Capture viewport screenshot using browser API
+        const dataUrl = await this.captureViewportScreenshot();
+        this.originalImageData = dataUrl;
+        // Reset loading state
+        this.takingScreenshot = false;
+        // Go directly to canvas editor
+        this.showCanvasEditor = true;
+        // Restore feedback elements visibility
+        this.showAllFeedbackElements();
+        // Initialize canvas after a short delay to ensure DOM is ready
+        setTimeout(() => {
+          this.initializeCanvas();
+        }, 100);
+      }
+      catch (error) {
+        console.error('Failed to capture screenshot:', error);
+        // Reset loading state on error
+        this.takingScreenshot = false;
+        // Restore feedback elements on error
+        this.showAllFeedbackElements();
+        // Show error message to user
+        this.handleScreenshotError(error);
+      }
+    };
+    this.hideAllFeedbackElements = () => {
+      // Hide all feedback buttons and modals on the page
+      const feedbackElements = document.querySelectorAll('feedback-button, feedback-modal');
+      feedbackElements.forEach(element => {
+        element.style.visibility = 'hidden';
+      });
+    };
+    this.showAllFeedbackElements = () => {
+      // Show all feedback buttons and modals on the page
+      const feedbackElements = document.querySelectorAll('feedback-button, feedback-modal');
+      feedbackElements.forEach(element => {
+        element.style.visibility = 'visible';
+      });
+    };
+    this.handleScreenshotError = (error) => {
+      let errorMessage = this.screenshotErrorGeneral;
+      if (error.name === 'NotAllowedError') {
+        errorMessage += ' ' + this.screenshotErrorPermission;
+      }
+      else if (error.name === 'NotSupportedError') {
+        errorMessage += ' ' + this.screenshotErrorNotSupported;
+      }
+      else if (error.name === 'NotFoundError') {
+        errorMessage += ' ' + this.screenshotErrorNotFound;
+      }
+      else if (error.name === 'AbortError') {
+        errorMessage += ' ' + this.screenshotErrorCancelled;
+      }
+      else if (error.message && error.message.includes('not supported')) {
+        errorMessage += ' ' + this.screenshotErrorBrowserNotSupported;
+      }
+      else {
+        errorMessage += ' ' + this.screenshotErrorUnexpected;
+      }
+      // Just emit the error to parent - don't show internal notification
+      this.screenshotFailed.emit({ error: errorMessage });
+    };
+    this.closeCanvasEditor = () => {
+      this.showCanvasEditor = false;
+      this.screenshotCancelled.emit();
+    };
+    this.saveAnnotations = () => {
+      if (this.canvasRef) {
+        // Create final image with annotations
+        const finalDataUrl = this.canvasRef.toDataURL('image/png');
+        this.screenshotReady.emit({ screenshot: finalDataUrl });
+      }
+      this.showCanvasEditor = false;
+    };
+    this.initializeCanvas = () => {
+      if (!this.canvasRef || !this.originalImageData)
+        return;
+      this.canvasContext = this.canvasRef.getContext('2d');
+      const img = new Image();
+      img.onload = () => {
+        // Set canvas to original image dimensions
+        this.canvasRef.width = img.width;
+        this.canvasRef.height = img.height;
+        // Get available container dimensions
+        const containerWidth = this.canvasRef.parentElement.clientWidth - 32;
+        const containerHeight = this.canvasRef.parentElement.clientHeight - 32;
+        // Calculate scale factors for both dimensions
+        const scaleX = containerWidth / img.width;
+        const scaleY = containerHeight / img.height;
+        // Use the smaller scale to ensure complete image fits
+        const scale = Math.min(scaleX, scaleY, 1);
+        // Calculate final display dimensions
+        const displayWidth = img.width * scale;
+        const displayHeight = img.height * scale;
+        // Set CSS size for display
+        this.canvasRef.style.width = `${displayWidth}px`;
+        this.canvasRef.style.height = `${displayHeight}px`;
+        // Draw the original image at full resolution
+        this.canvasContext.drawImage(img, 0, 0);
+        // Redraw existing annotations
+        this.redrawAnnotations();
+      };
+      img.src = this.originalImageData;
+    };
+    this.redrawAnnotations = () => {
+      if (!this.canvasContext)
+        return;
+      // Clear and redraw background image
+      const img = new Image();
+      img.onload = () => {
+        this.canvasContext.clearRect(0, 0, this.canvasRef.width, this.canvasRef.height);
+        this.canvasContext.drawImage(img, 0, 0);
+        // Draw all annotations
+        this.annotations.forEach(annotation => {
+          this.drawAnnotation(annotation);
+        });
+      };
+      img.src = this.originalImageData;
+    };
+    this.drawAnnotation = (annotation) => {
+      if (!this.canvasContext)
+        return;
+      this.canvasContext.strokeStyle = annotation.color;
+      this.canvasContext.lineWidth = annotation.lineWidth;
+      this.canvasContext.lineCap = 'round';
+      this.canvasContext.lineJoin = 'round';
+      switch (annotation.type) {
+        case 'rectangle':
+          this.canvasContext.strokeRect(annotation.startX, annotation.startY, annotation.width, annotation.height);
+          // Draw selection indicator if this annotation is selected
+          if (this.selectedAnnotation === annotation) {
+            this.drawSelectionIndicator(annotation);
+          }
+          // Draw resize handles if this annotation is hovered
+          if (this.hoveredAnnotation === annotation) {
+            this.drawRectangleResizeHandles(annotation);
+          }
+          break;
+        case 'line':
+          this.canvasContext.beginPath();
+          this.canvasContext.moveTo(annotation.startX, annotation.startY);
+          this.canvasContext.lineTo(annotation.endX, annotation.endY);
+          this.canvasContext.stroke();
+          // Draw selection indicator if this annotation is selected
+          if (this.selectedAnnotation === annotation) {
+            this.drawSelectionIndicator(annotation);
+          }
+          // Draw resize handles if this annotation is hovered
+          if (this.hoveredAnnotation === annotation) {
+            this.drawLineResizeHandles(annotation);
+          }
+          break;
+        case 'arrow':
+          this.drawArrow(annotation.startX, annotation.startY, annotation.endX, annotation.endY);
+          // Draw selection indicator if this annotation is selected
+          if (this.selectedAnnotation === annotation) {
+            this.drawSelectionIndicator(annotation);
+          }
+          // Draw resize handles if this annotation is hovered
+          if (this.hoveredAnnotation === annotation) {
+            this.drawLineResizeHandles(annotation);
+          }
+          break;
+        case 'text':
+          const fontSize = annotation.fontSize || 24;
+          this.canvasContext.fillStyle = annotation.color;
+          this.canvasContext.font = `${fontSize}px Arial`;
+          this.canvasContext.fillText(annotation.text, annotation.x, annotation.y);
+          // Draw selection indicator if this annotation is selected
+          if (this.selectedAnnotation === annotation) {
+            this.drawTextSelectionIndicator(annotation);
+          }
+          break;
+      }
+    };
+    // Draw selection indicator for shapes
+    this.drawSelectionIndicator = (annotation) => {
+      if (!this.canvasContext)
+        return;
+      // Save current context
+      const originalStrokeStyle = this.canvasContext.strokeStyle;
+      const originalLineWidth = this.canvasContext.lineWidth;
+      // Draw selection outline
+      this.canvasContext.strokeStyle = '#0070F4';
+      this.canvasContext.lineWidth = 2;
+      this.canvasContext.setLineDash([5, 5]);
+      switch (annotation.type) {
+        case 'rectangle':
+          this.canvasContext.strokeRect(annotation.startX - 2, annotation.startY - 2, annotation.width + 4, annotation.height + 4);
+          break;
+        case 'line':
+        case 'arrow':
+          this.canvasContext.beginPath();
+          this.canvasContext.moveTo(annotation.startX, annotation.startY);
+          this.canvasContext.lineTo(annotation.endX, annotation.endY);
+          this.canvasContext.stroke();
+          break;
+      }
+      // Restore context
+      this.canvasContext.setLineDash([]);
+      this.canvasContext.strokeStyle = originalStrokeStyle;
+      this.canvasContext.lineWidth = originalLineWidth;
+    };
+    // Draw selection indicator for text
+    this.drawTextSelectionIndicator = (annotation) => {
+      if (!this.canvasContext)
+        return;
+      const fontSize = annotation.fontSize || 24;
+      const textWidth = this.getTextWidth(annotation.text, fontSize);
+      // Save current context
+      const originalStrokeStyle = this.canvasContext.strokeStyle;
+      const originalLineWidth = this.canvasContext.lineWidth;
+      // Draw selection outline around text
+      this.canvasContext.strokeStyle = '#0070F4';
+      this.canvasContext.lineWidth = 2;
+      this.canvasContext.setLineDash([3, 3]);
+      this.canvasContext.strokeRect(annotation.x - 4, annotation.y - fontSize - 4, textWidth + 8, fontSize + 8);
+      // Restore context
+      this.canvasContext.setLineDash([]);
+      this.canvasContext.strokeStyle = originalStrokeStyle;
+      this.canvasContext.lineWidth = originalLineWidth;
+    };
+    this.drawArrow = (fromX, fromY, toX, toY) => {
+      const headlen = 15; // Arrow head length
+      const angle = Math.atan2(toY - fromY, toX - fromX);
+      // Draw line
+      this.canvasContext.beginPath();
+      this.canvasContext.moveTo(fromX, fromY);
+      this.canvasContext.lineTo(toX, toY);
+      this.canvasContext.stroke();
+      // Draw arrow head
+      this.canvasContext.beginPath();
+      this.canvasContext.moveTo(toX, toY);
+      this.canvasContext.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
+      this.canvasContext.moveTo(toX, toY);
+      this.canvasContext.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
+      this.canvasContext.stroke();
+    };
+    this.undoLastAnnotation = () => {
+      this.annotations = this.annotations.slice(0, -1);
+      this.redrawAnnotations();
+    };
+    // Handle color slot editing
+    this.handleColorSlotClick = (colorIndex) => {
+      if (this.editingColorIndex === colorIndex) {
+        // If already editing this slot, just select the color
+        this.canvasDrawingColor = this.defaultColors[colorIndex];
+        this.showColorPicker = false;
+        this.editingColorIndex = -1;
+      }
+      else {
+        // Start editing this color slot
+        this.editingColorIndex = colorIndex;
+        this.showColorPicker = true;
+        this.canvasDrawingColor = this.defaultColors[colorIndex];
+      }
+    };
+    // Update color in slot
+    this.updateColorSlot = (newColor) => {
+      if (this.editingColorIndex >= 0 && this.editingColorIndex < this.defaultColors.length) {
+        this.defaultColors[this.editingColorIndex] = newColor;
+        this.canvasDrawingColor = newColor;
+        this.showColorPicker = false;
+        this.editingColorIndex = -1;
+        // Force reactivity
+        this.defaultColors = [...this.defaultColors];
+      }
+    };
+    // Handle color picker input without closing
+    this.handleColorPickerInput = (event) => {
+      event.stopPropagation();
+      const newColor = event.target.value;
+      if (this.editingColorIndex >= 0 && this.editingColorIndex < this.defaultColors.length) {
+        this.defaultColors[this.editingColorIndex] = newColor;
+        this.canvasDrawingColor = newColor;
+        // Force reactivity
+        this.defaultColors = [...this.defaultColors];
+      }
+    };
+    // Handle color picker click to prevent closing
+    this.handleColorPickerClick = (event) => {
+      event.stopPropagation();
+    };
+    // Close color picker
+    this.closeColorPicker = () => {
+      this.showColorPicker = false;
+      this.editingColorIndex = -1;
+    };
+    // Get text width for resize handle positioning
+    this.getTextWidth = (text, fontSize) => {
+      // Better text width calculation
+      if (!this.canvasContext) {
+        return text.length * fontSize * 0.6; // Fallback
+      }
+      // Use actual canvas measurement for accuracy
+      const originalFont = this.canvasContext.font;
+      this.canvasContext.font = `${fontSize}px Arial`;
+      const width = this.canvasContext.measureText(text).width;
+      this.canvasContext.font = originalFont;
+      return width;
+    };
+    // Check if point is in resize handle for shapes (not text)
+    this.isPointInResizeHandle = (x, y, annotation) => {
+      const handleSize = 8;
+      switch (annotation.type) {
+        case 'rectangle':
+          const right = annotation.startX + annotation.width;
+          const bottom = annotation.startY + annotation.height;
+          // Only check bottom-right corner handle
+          return x >= right - handleSize / 2 && x <= right + handleSize / 2 &&
+            y >= bottom - handleSize / 2 && y <= bottom + handleSize / 2;
+        case 'line':
+        case 'arrow':
+          // Check both endpoint handles
+          const lineHandles = [
+            { x: annotation.startX, y: annotation.startY, point: 'start' },
+            { x: annotation.endX, y: annotation.endY, point: 'end' }
+          ];
+          for (const handle of lineHandles) {
+            if (x >= handle.x - handleSize / 2 && x <= handle.x + handleSize / 2 &&
+              y >= handle.y - handleSize / 2 && y <= handle.y + handleSize / 2) {
+              return handle.point; // Return which endpoint was clicked
+            }
+          }
+          return false;
+        default:
+          return false;
+      }
+    };
+    // Draw resize handles for rectangle annotation (only bottom-right corner)
+    this.drawRectangleResizeHandles = (annotation) => {
+      if (!this.canvasContext || annotation.type !== 'rectangle')
+        return;
+      const handleSize = 8;
+      const right = annotation.startX + annotation.width;
+      const bottom = annotation.startY + annotation.height;
+      // Only draw bottom-right corner handle
+      const handle = { x: right, y: bottom };
+      // Draw the handle
+      this.canvasContext.fillStyle = '#0070F4'; // Primary color
+      this.canvasContext.strokeStyle = '#ffffff';
+      this.canvasContext.lineWidth = 2;
+      this.canvasContext.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+      this.canvasContext.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+    };
+    // Draw resize handles for line/arrow annotation
+    this.drawLineResizeHandles = (annotation) => {
+      if (!this.canvasContext || (annotation.type !== 'line' && annotation.type !== 'arrow'))
+        return;
+      const handleSize = 8;
+      // Define handle positions (2 endpoints)
+      const handles = [
+        { x: annotation.startX, y: annotation.startY },
+        { x: annotation.endX, y: annotation.endY } // End point
+      ];
+      // Draw each handle
+      this.canvasContext.fillStyle = '#0070F4'; // Primary color
+      this.canvasContext.strokeStyle = '#ffffff';
+      this.canvasContext.lineWidth = 2;
+      handles.forEach(handle => {
+        this.canvasContext.fillRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+        this.canvasContext.strokeRect(handle.x - handleSize / 2, handle.y - handleSize / 2, handleSize, handleSize);
+      });
+    };
+    // Start resize for shapes
+    this.startResize = (annotation, handle, startPos) => {
+      this.isResizing = true;
+      this.resizingAnnotation = annotation;
+      this.resizeHandle = handle;
+      this.dragStartPos = startPos;
+      // Store original values for different annotation types
+      if (annotation.type === 'rectangle') {
+        this.resizeStartDimensions = { width: annotation.width, height: annotation.height };
+      }
+    };
+    // Handle resize for different annotation types
+    this.handleResize = (currentPos) => {
+      if (!this.resizingAnnotation || !this.dragStartPos)
+        return;
+      const annotation = this.resizingAnnotation;
+      const index = this.annotations.findIndex(a => a === annotation);
+      if (index === -1)
+        return;
+      let updatedAnnotation = Object.assign({}, annotation);
+      switch (annotation.type) {
+        case 'rectangle':
+          // Rectangle resize logic - only bottom-right corner
+          const rectDeltaX = currentPos.x - this.dragStartPos.x;
+          const rectDeltaY = currentPos.y - this.dragStartPos.y;
+          // Update width and height based on original dimensions plus delta
+          updatedAnnotation.width = Math.max(10, this.resizeStartDimensions.width + rectDeltaX);
+          updatedAnnotation.height = Math.max(10, this.resizeStartDimensions.height + rectDeltaY);
+          break;
+        case 'line':
+        case 'arrow':
+          // Line/arrow resize logic - move endpoints
+          if (this.resizeHandle === 'start') {
+            updatedAnnotation.startX = currentPos.x;
+            updatedAnnotation.startY = currentPos.y;
+          }
+          else if (this.resizeHandle === 'end') {
+            updatedAnnotation.endX = currentPos.x;
+            updatedAnnotation.endY = currentPos.y;
+          }
+          break;
+      }
+      // Update annotation in array
+      this.annotations[index] = updatedAnnotation;
+      this.resizingAnnotation = updatedAnnotation;
+      this.redrawAnnotations();
+    };
+    // Text editing methods
+    this.startTextEditing = (annotation) => {
+      const newText = prompt(this.editTextPromptText, annotation.text);
+      if (newText !== null && newText.trim()) {
+        const index = this.annotations.findIndex(a => a === annotation);
+        if (index !== -1) {
+          this.annotations[index] = Object.assign(Object.assign({}, annotation), { text: newText.trim() });
+          this.selectedAnnotation = this.annotations[index];
+          this.redrawAnnotations();
+        }
+      }
+    };
+    // Update selected annotation font size
+    this.updateSelectedTextSize = (newSize) => {
+      if (this.selectedAnnotation && this.selectedAnnotation.type === 'text') {
+        const index = this.annotations.findIndex(a => a === this.selectedAnnotation);
+        if (index !== -1) {
+          this.annotations[index] = Object.assign(Object.assign({}, this.selectedAnnotation), { fontSize: Math.max(8, Math.min(72, newSize)) });
+          this.selectedAnnotation = this.annotations[index];
+          this.redrawAnnotations();
+        }
+      }
+    };
+    // Update selected annotation border width
+    this.updateSelectedBorderWidth = (newWidth) => {
+      if (this.selectedAnnotation && ['rectangle', 'line', 'arrow'].includes(this.selectedAnnotation.type)) {
+        const index = this.annotations.findIndex(a => a === this.selectedAnnotation);
+        if (index !== -1) {
+          this.annotations[index] = Object.assign(Object.assign({}, this.selectedAnnotation), { lineWidth: Math.max(1, Math.min(20, newWidth)) });
+          this.selectedAnnotation = this.annotations[index];
+          this.redrawAnnotations();
+        }
+      }
+    };
+    // Enhanced mouse down handler with resize support
+    this.handleCanvasMouseDown = (event) => {
+      if (!this.canvasRef)
+        return;
+      // Disable drawing on mobile devices
+      if (window.innerWidth <= 768)
+        return;
+      // Close color picker if open
+      if (this.showColorPicker) {
+        this.closeColorPicker();
+      }
+      const coords = this.getCanvasCoordinates(event);
+      // Check if clicking on existing annotation first
+      const found = this.findAnnotationAt(coords.x, coords.y);
+      if (found) {
+        // Select the annotation
+        this.selectedAnnotation = found.annotation;
+        // Check if clicking on resize handle for shapes (not text)
+        if (found.annotation.type !== 'text') {
+          const handle = this.isPointInResizeHandle(coords.x, coords.y, found.annotation);
+          if (handle) {
+            this.startResize(found.annotation, handle, coords);
+            this.canvasRef.style.cursor = 'nw-resize';
+            return;
+          }
+        }
+        // Check for double-click to edit text
+        if (found.annotation.type === 'text' && event.detail === 2) {
+          this.startTextEditing(found.annotation);
+          return;
+        }
+        // Start dragging existing annotation
+        if (!this.isDrawing) {
+          this.isDragging = true;
+          this.draggedAnnotation = found.annotation;
+          this.dragStartPos = coords;
+          this.canvasRef.style.cursor = 'grabbing';
+          return;
+        }
+      }
+      else {
+        // Clear selection if clicking on empty space
+        this.selectedAnnotation = null;
+      }
+      // Original drawing logic
+      this.isDrawing = true;
+      if (this.canvasDrawingTool === 'text') {
+        const text = prompt(this.editTextPromptText);
+        if (text) {
+          const annotation = {
+            type: 'text',
+            x: coords.x,
+            y: coords.y,
+            text,
+            color: this.canvasDrawingColor,
+            fontSize: this.canvasTextSize
+          };
+          this.annotations = [...this.annotations, annotation];
+          this.redrawAnnotations();
+        }
+        this.isDrawing = false;
+      }
+      else {
+        this.currentAnnotation = {
+          type: this.canvasDrawingTool,
+          startX: coords.x,
+          startY: coords.y,
+          color: this.canvasDrawingColor,
+          lineWidth: this.canvasLineWidth
+        };
+      }
+    };
+    this.handleCanvasMouseMove = (event) => {
+      if (!this.canvasRef)
+        return;
+      // Disable drawing on mobile devices
+      if (window.innerWidth <= 768)
+        return;
+      const coords = this.getCanvasCoordinates(event);
+      // Handle resizing for shapes
+      if (this.isResizing && this.resizingAnnotation) {
+        this.handleResize(coords);
+        return;
+      }
+      // Handle dragging existing annotation
+      if (this.isDragging && this.draggedAnnotation && this.dragStartPos) {
+        const deltaX = coords.x - this.dragStartPos.x;
+        const deltaY = coords.y - this.dragStartPos.y;
+        // Update annotation position
+        const updatedAnnotation = Object.assign({}, this.draggedAnnotation);
+        switch (updatedAnnotation.type) {
+          case 'rectangle':
+            updatedAnnotation.startX += deltaX;
+            updatedAnnotation.startY += deltaY;
+            break;
+          case 'line':
+          case 'arrow':
+            updatedAnnotation.startX += deltaX;
+            updatedAnnotation.startY += deltaY;
+            updatedAnnotation.endX += deltaX;
+            updatedAnnotation.endY += deltaY;
+            break;
+          case 'text':
+            updatedAnnotation.x += deltaX;
+            updatedAnnotation.y += deltaY;
+            break;
+        }
+        // Update annotation in array
+        const index = this.annotations.findIndex(a => a === this.draggedAnnotation);
+        if (index !== -1) {
+          this.annotations[index] = updatedAnnotation;
+          this.draggedAnnotation = updatedAnnotation;
+        }
+        this.dragStartPos = coords;
+        this.redrawAnnotations();
+        return;
+      }
+      // Handle drawing new annotation
+      if (this.isDrawing && this.currentAnnotation) {
+        if (this.canvasDrawingTool === 'rectangle') {
+          this.currentAnnotation.width = coords.x - this.currentAnnotation.startX;
+          this.currentAnnotation.height = coords.y - this.currentAnnotation.startY;
+        }
+        else {
+          this.currentAnnotation.endX = coords.x;
+          this.currentAnnotation.endY = coords.y;
+        }
+        this.redrawAnnotations();
+        this.drawAnnotation(this.currentAnnotation);
+        return;
+      }
+      // Handle hover states and cursor changes
+      const found = this.findAnnotationAt(coords.x, coords.y);
+      if (found) {
+        // Check if hovering over resize handle for shapes (not text)
+        if (found.annotation.type !== 'text') {
+          const handle = this.isPointInResizeHandle(coords.x, coords.y, found.annotation);
+          if (handle) {
+            this.canvasRef.style.cursor = 'nw-resize';
+            this.hoveredAnnotation = found.annotation;
+            this.redrawAnnotations();
+            return;
+          }
+        }
+        // Regular hover over annotation
+        this.canvasRef.style.cursor = 'grab';
+        if (this.hoveredAnnotation !== found.annotation) {
+          this.hoveredAnnotation = found.annotation;
+          this.redrawAnnotations();
+        }
+      }
+      else {
+        // No annotation under cursor
+        this.canvasRef.style.cursor = 'crosshair';
+        if (this.hoveredAnnotation) {
+          this.hoveredAnnotation = null;
+          this.redrawAnnotations();
+        }
+      }
+    };
+    this.handleCanvasMouseUp = () => {
+      // Disable drawing on mobile devices
+      if (window.innerWidth <= 768)
+        return;
+      // Handle end of resizing
+      if (this.isResizing) {
+        this.isResizing = false;
+        this.resizingAnnotation = null;
+        this.dragStartPos = null;
+        this.resizeHandle = false;
+        this.resizeStartDimensions = null;
+        if (this.canvasRef) {
+          this.canvasRef.style.cursor = 'crosshair';
+        }
+        return;
+      }
+      // Handle end of dragging
+      if (this.isDragging) {
+        this.isDragging = false;
+        this.draggedAnnotation = null;
+        this.dragStartPos = null;
+        if (this.canvasRef) {
+          this.canvasRef.style.cursor = 'crosshair';
+        }
+        return;
+      }
+      // Handle end of drawing
+      if (!this.isDrawing || !this.currentAnnotation)
+        return;
+      this.isDrawing = false;
+      this.annotations = [...this.annotations, this.currentAnnotation];
+      this.currentAnnotation = null;
+      this.redrawAnnotations();
+    };
+    // Convert screen coordinates to canvas coordinates
+    this.getCanvasCoordinates = (event) => {
+      if (!this.canvasRef)
+        return { x: 0, y: 0 };
+      const rect = this.canvasRef.getBoundingClientRect();
+      // Calculate the scale factor between display size and actual canvas size
+      const scaleX = this.canvasRef.width / rect.width;
+      const scaleY = this.canvasRef.height / rect.height;
+      const x = (event.clientX - rect.left) * scaleX;
+      const y = (event.clientY - rect.top) * scaleY;
+      return { x, y };
+    };
+    // Find annotation under mouse cursor
+    this.findAnnotationAt = (x, y) => {
+      // Check in reverse order (top to bottom)
+      for (let i = this.annotations.length - 1; i >= 0; i--) {
+        const annotation = this.annotations[i];
+        if (this.isPointInAnnotation(x, y, annotation)) {
+          return { annotation, index: i };
+        }
+      }
+      return null;
+    };
+    // Check if point is within annotation bounds
+    this.isPointInAnnotation = (x, y, annotation) => {
+      const tolerance = 10; // Click tolerance
+      switch (annotation.type) {
+        case 'rectangle':
+          const left = Math.min(annotation.startX, annotation.startX + annotation.width);
+          const right = Math.max(annotation.startX, annotation.startX + annotation.width);
+          const top = Math.min(annotation.startY, annotation.startY + annotation.height);
+          const bottom = Math.max(annotation.startY, annotation.startY + annotation.height);
+          return x >= left - tolerance && x <= right + tolerance &&
+            y >= top - tolerance && y <= bottom + tolerance;
+        case 'line':
+        case 'arrow':
+          // Distance from point to line
+          const A = annotation.endY - annotation.startY;
+          const B = annotation.startX - annotation.endX;
+          const C = annotation.endX * annotation.startY - annotation.startX * annotation.endY;
+          const distance = Math.abs(A * x + B * y + C) / Math.sqrt(A * A + B * B);
+          return distance <= tolerance;
+        case 'text':
+          // Use actual text dimensions for better dragging
+          const fontSize = annotation.fontSize || 24;
+          const textWidth = this.getTextWidth(annotation.text, fontSize);
+          const textHeight = fontSize;
+          // Text bounding box (y coordinate is baseline, so subtract font size for top)
+          const textLeft = annotation.x - tolerance;
+          const textRight = annotation.x + textWidth + tolerance;
+          const textTop = annotation.y - textHeight - tolerance;
+          const textBottom = annotation.y + tolerance;
+          return x >= textLeft && x <= textRight &&
+            y >= textTop && y <= textBottom;
+        default:
+          return false;
+      }
+    };
+    this.canvasEditorTitle = 'Edit screenshot';
+    this.canvasEditorCancelText = 'Cancel';
+    this.canvasEditorSaveText = 'Save';
+    this.screenshotTakingText = 'Taking screenshot...';
+    this.screenshotAttachedText = 'Screenshot attached';
+    this.screenshotButtonText = 'Add a screenshot';
+    this.autoStartScreenshot = false;
+    this.existingScreenshot = '';
+    this.editTextButtonText = 'Edit Text';
+    this.sizeLabelText = 'Size:';
+    this.borderLabelText = 'Border:';
+    this.editTextPromptText = 'Edit text:';
+    this.screenshotErrorGeneral = 'Failed to capture screenshot.';
+    this.screenshotErrorPermission = 'Permission denied. Please allow screen sharing to take screenshots.';
+    this.screenshotErrorNotSupported = 'Screen capture is not supported in this browser.';
+    this.screenshotErrorNotFound = 'No screen sources available for capture.';
+    this.screenshotErrorCancelled = 'Screenshot capture was cancelled.';
+    this.screenshotErrorBrowserNotSupported = 'Your browser does not support screen capture. Please use a browser like Chrome, Firefox, or Safari on desktop.';
+    this.screenshotErrorUnexpected = 'An unexpected error occurred. Please try again.';
+    this.takingScreenshot = false;
+    this.showCanvasEditor = false;
+    this.canvasDrawingTool = 'rectangle';
+    this.canvasDrawingColor = '#ff0000';
+    this.canvasLineWidth = 3;
+    this.canvasTextSize = 24;
+    this.isDrawing = false;
+    this.annotations = [];
+    this.currentAnnotation = null;
+    this.isDragging = false;
+    this.draggedAnnotation = null;
+    this.dragStartPos = null;
+    this.showColorPicker = false;
+    this.editingColorIndex = -1;
+    this.selectedAnnotation = null;
+    this.isResizing = false;
+    this.resizingAnnotation = null;
+    this.resizeStartSize = 24;
+    this.resizeStartDimensions = null;
+    this.hoveredAnnotation = null;
+    this.resizeHandle = false;
+    this.defaultColors = ['#ff0000', '#00ff00', '#0000ff', '#000000'];
+  }
+  componentDidLoad() {
+    if (this.autoStartScreenshot) {
+      // Show the editor UI and start screenshot capture
+      this.showCanvasEditor = true;
+      setTimeout(() => {
+        this.openScreenShot();
+      }, 100); // Small delay to ensure component is fully rendered
+    }
+    else if (this.existingScreenshot) {
+      // Show editor with existing screenshot data
+      this.originalImageData = this.existingScreenshot;
+      this.showCanvasEditor = true;
+      setTimeout(() => {
+        this.initializeCanvas();
+      }, 100);
+    }
+  }
+  async captureViewportScreenshot() {
+    try {
+      // Check if Screen Capture API is supported
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
+        throw new Error('Screen Capture API is not supported in this browser');
+      }
+      // Request screen capture with preference for current tab
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: {
+          mediaSource: 'screen',
+          width: { ideal: window.innerWidth },
+          height: { ideal: window.innerHeight }
+        },
+        audio: false,
+        preferCurrentTab: true
+      });
+      // Create video element to capture frame
+      const video = document.createElement('video');
+      video.srcObject = stream;
+      video.autoplay = true;
+      video.muted = true;
+      return new Promise((resolve, reject) => {
+        video.onloadedmetadata = () => {
+          video.play();
+          // Wait a moment for video to stabilize
+          setTimeout(() => {
+            try {
+              // Create canvas to capture frame
+              const canvas = document.createElement('canvas');
+              canvas.width = video.videoWidth;
+              canvas.height = video.videoHeight;
+              const ctx = canvas.getContext('2d');
+              ctx.drawImage(video, 0, 0);
+              // Stop the stream
+              stream.getTracks().forEach(track => track.stop());
+              // Convert to data URL
+              const dataUrl = canvas.toDataURL('image/png');
+              console.log('Screenshot captured successfully using Screen Capture API');
+              resolve(dataUrl);
+            }
+            catch (error) {
+              stream.getTracks().forEach(track => track.stop());
+              reject(error);
+            }
+          }, 100);
+        };
+        video.onerror = () => {
+          stream.getTracks().forEach(track => track.stop());
+          reject(new Error('Failed to load video for screenshot capture'));
+        };
+      });
+    }
+    catch (error) {
+      console.error('Screen capture failed:', error);
+      throw error;
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    return (h("div", { class: "canvas-editor-wrapper" }, this.showCanvasEditor && (h("div", { class: "canvas-editor-overlay" }, h("div", { class: "canvas-editor-modal" }, h("div", { class: "canvas-editor-header" }, h("div", { class: "canvas-editor-title" }, h("h3", null, this.canvasEditorTitle)), h("div", { class: "canvas-editor-toolbar" }, h("div", { class: "toolbar-section" }, h("div", { class: "tool-group" }, h("button", { class: `tool-btn ${this.canvasDrawingTool === 'rectangle' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'rectangle', title: "Rectangle" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'line' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'line', title: "Line" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "5", y1: "12", x2: "19", y2: "12" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'arrow' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'arrow', title: "Arrow" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "7", y1: "17", x2: "17", y2: "7" }), h("polyline", { points: "7,7 17,7 17,17" }))), h("button", { class: `tool-btn ${this.canvasDrawingTool === 'text' ? 'active' : ''}`, onClick: () => this.canvasDrawingTool = 'text', title: "Text" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "4,7 4,4 20,4 20,7" }), h("line", { x1: "9", y1: "20", x2: "15", y2: "20" }), h("line", { x1: "12", y1: "4", x2: "12", y2: "20" }))), h("div", { class: "toolbar-divider" }), h("button", { class: "tool-btn undo-btn", onClick: this.undoLastAnnotation, disabled: this.annotations.length === 0, title: "Undo" }, h("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "1,4 1,10 7,10" }), h("path", { d: "M3.51,15a9,9,0,0,0,14.85-3.36,9,9,0,0,0-9.19-10.15L1.83,10" }))))), h("div", { class: "toolbar-section" }, h("div", { class: "color-palette" }, this.defaultColors.map((color, index) => (h("div", { class: "color-slot-wrapper" }, h("button", { class: `color-btn ${this.canvasDrawingColor === color ? 'active' : ''} ${this.editingColorIndex === index ? 'editing' : ''}`, style: { backgroundColor: color }, onClick: () => this.handleColorSlotClick(index), title: `Color ${index + 1} - Click to customize` }, this.editingColorIndex === index && (h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "white", "stroke-width": "2" }, h("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" })))), this.editingColorIndex === index && this.showColorPicker && (h("div", { class: "color-picker-dropdown" }, h("input", { type: "color", value: color, onInput: (e) => this.handleColorPickerInput(e), onClick: (e) => this.handleColorPickerClick(e) })))))))), (this.selectedAnnotation || this.canvasDrawingTool) && (h("div", { class: "toolbar-section selected-annotation-controls" }, (((_a = this.selectedAnnotation) === null || _a === void 0 ? void 0 : _a.type) === 'text' || (!this.selectedAnnotation && this.canvasDrawingTool === 'text')) && (h("div", { class: "text-controls" }, h("div", { class: "font-size-control" }, h("label", null, this.sizeLabelText), h("input", { type: "range", min: "8", max: "72", value: ((_b = this.selectedAnnotation) === null || _b === void 0 ? void 0 : _b.fontSize) || this.canvasTextSize, onInput: (e) => {
+        const newSize = parseInt(e.target.value);
+        if (this.selectedAnnotation) {
+          this.updateSelectedTextSize(newSize);
+        }
+        else {
+          this.canvasTextSize = newSize;
+        }
+      }, class: "size-slider" }), h("span", { class: "size-value" }, ((_c = this.selectedAnnotation) === null || _c === void 0 ? void 0 : _c.fontSize) || this.canvasTextSize, "px")), this.selectedAnnotation && (h("button", { class: "action-btn small", onClick: () => this.startTextEditing(this.selectedAnnotation) }, this.editTextButtonText)))), ((['rectangle', 'line', 'arrow'].includes((_d = this.selectedAnnotation) === null || _d === void 0 ? void 0 : _d.type)) ||
+      (!this.selectedAnnotation && ['rectangle', 'line', 'arrow'].includes(this.canvasDrawingTool))) && (h("div", { class: "shape-controls" }, h("div", { class: "border-width-control" }, h("label", null, this.borderLabelText), h("input", { type: "range", min: "1", max: "20", value: ((_e = this.selectedAnnotation) === null || _e === void 0 ? void 0 : _e.lineWidth) || this.canvasLineWidth, onInput: (e) => {
+        const newWidth = parseInt(e.target.value);
+        if (this.selectedAnnotation) {
+          this.updateSelectedBorderWidth(newWidth);
+        }
+        else {
+          this.canvasLineWidth = newWidth;
+        }
+      }, class: "size-slider" }), h("span", { class: "size-value" }, ((_f = this.selectedAnnotation) === null || _f === void 0 ? void 0 : _f.lineWidth) || this.canvasLineWidth, "px")))))), h("div", { class: "toolbar-section" }, h("button", { class: "action-btn secondary", onClick: this.closeCanvasEditor }, this.canvasEditorCancelText), h("button", { class: "action-btn primary", onClick: this.saveAnnotations }, this.canvasEditorSaveText))), h("div", { class: "canvas-editor-content" }, h("canvas", { ref: (el) => this.canvasRef = el, class: "annotation-canvas", onMouseDown: this.handleCanvasMouseDown, onMouseMove: this.handleCanvasMouseMove, onMouseUp: this.handleCanvasMouseUp, onMouseLeave: this.handleCanvasMouseUp }))))))));
+  }
+};
+CanvasEditor.style = canvasEditorCss;
+
+export { CanvasEditor as canvas_editor };