text-guitar-chart 0.1.0 → 0.1.1

package/lib/editableSVGuitar.js

@@ -840,45 +840,86 @@ export class EditableSVGuitarChord {
   }
 
   /**
-   * Position dialog relative to the clicked element
+   * Calculate absolute position for a dialog relative to a reference element
+   * @param {HTMLElement} dialog - The dialog element to position
+   * @param {Element} referenceElement - The element to position relative to
+   * @param {object} options - Positioning options
+   * @param {'beside'|'below'} [options.placement] - Whether to place beside or below the reference
+   * @param {number} [options.offset] - Distance from reference element
+   * @returns {{x: number, y: number, arrowSide: string, elementCenterY: number}}
    */
-  positionDialog() {
-    if (!this.currentEditElement || !this.dialog) return;
-
-    // Get the bounding rect of the clicked element
-    const elementRect = this.currentEditElement.getBoundingClientRect();
-    const dialogRect = this.dialog.getBoundingClientRect();
+  calculateDialogPosition(dialog, referenceElement, options = {}) {
+    const { placement = 'beside', offset = 20 } = options;
+    
+    const elementRect = referenceElement.getBoundingClientRect();
+    const dialogRect = dialog.getBoundingClientRect();
     
-    // Calculate position
     const elementCenterX = elementRect.left + elementRect.width / 2;
     const elementCenterY = elementRect.top + elementRect.height / 2;
     
-    // Position dialog to the right and slightly above the dot
-    let dialogX = elementCenterX + 20;
-    let dialogY = elementCenterY - dialogRect.height / 2;
+    let dialogX, dialogY;
+    let arrowSide = 'left';
     
-    // Ensure dialog stays within viewport bounds
     const padding = 10;
     const maxX = window.innerWidth - dialogRect.width - padding;
     const maxY = window.innerHeight - dialogRect.height - padding;
     
-    let arrowSide = 'left'; // Default: arrow points right (dot is to the left of dialog)
-    
-    if (dialogX > maxX) {
-      // Position to the left of the dot instead
-      dialogX = elementCenterX - dialogRect.width - 20;
-      arrowSide = 'right'; // Arrow points left (dot is to the right of dialog)
+    if (placement === 'beside') {
+      // Position to the right and vertically centered
+      dialogX = elementCenterX + offset;
+      dialogY = elementCenterY - dialogRect.height / 2;
+      
+      // Check if dialog fits on the right
+      if (dialogX > maxX) {
+        // Position to the left instead
+        dialogX = elementCenterX - dialogRect.width - offset;
+        arrowSide = 'right';
+      }
+    } else if (placement === 'below') {
+      // Position below the reference element
+      dialogX = elementRect.left;
+      dialogY = elementRect.bottom + offset;
+      
+      // Check if dialog fits below
+      if (dialogY > maxY) {
+        // Position above instead
+        dialogY = elementRect.top - dialogRect.height - offset;
+      }
     }
+    
+    // Ensure dialog stays within viewport bounds
     if (dialogX < padding) dialogX = padding;
+    if (dialogX > maxX) dialogX = maxX;
     if (dialogY < padding) dialogY = padding;
     if (dialogY > maxY) dialogY = maxY;
     
+    // Add scroll offsets to convert from viewport coordinates to absolute page coordinates
+    return {
+      x: dialogX + window.scrollX,
+      y: dialogY + window.scrollY,
+      arrowSide,
+      elementCenterY
+    };
+  }
+
+  /**
+   * Position dialog relative to the clicked element
+   */
+  positionDialog() {
+    if (!this.currentEditElement || !this.dialog) return;
+
+    const position = this.calculateDialogPosition(this.dialog, this.currentEditElement, {
+      placement: 'beside',
+      offset: 20
+    });
+    
     // Apply positioning
-    this.dialog.style.left = `${dialogX}px`;
-    this.dialog.style.top = `${dialogY}px`;
+    this.dialog.style.left = `${position.x}px`;
+    this.dialog.style.top = `${position.y}px`;
     
     // Add arrow CSS class and calculate arrow position
-    this.addArrowCSS(arrowSide, elementCenterY, dialogY, dialogRect.height);
+    const dialogRect = this.dialog.getBoundingClientRect();
+    this.addArrowCSS(position.arrowSide, position.elementCenterY, position.y - window.scrollY, dialogRect.height);
   }
 
   /**
@@ -887,40 +928,18 @@ export class EditableSVGuitarChord {
   positionOpenStringDialog() {
     if (!this.currentEditElement || !this.openStringDialog) return;
 
-    // Get the bounding rect of the clicked element
-    const elementRect = this.currentEditElement.getBoundingClientRect();
-    const dialogRect = this.openStringDialog.getBoundingClientRect();
-    
-    // Calculate position
-    const elementCenterX = elementRect.left + elementRect.width / 2;
-    const elementCenterY = elementRect.top + elementRect.height / 2;
-    
-    // Position dialog to the right and slightly above the open string
-    let dialogX = elementCenterX + 20;
-    let dialogY = elementCenterY - dialogRect.height / 2;
-    
-    // Ensure dialog stays within viewport bounds
-    const padding = 10;
-    const maxX = window.innerWidth - dialogRect.width - padding;
-    const maxY = window.innerHeight - dialogRect.height - padding;
-    
-    let arrowSide = 'left'; // Default: arrow points right (open string is to the left of dialog)
-    
-    if (dialogX > maxX) {
-      // Position to the left of the open string instead
-      dialogX = elementCenterX - dialogRect.width - 20;
-      arrowSide = 'right'; // Arrow points left (open string is to the right of dialog)
-    }
-    if (dialogX < padding) dialogX = padding;
-    if (dialogY < padding) dialogY = padding;
-    if (dialogY > maxY) dialogY = maxY;
+    const position = this.calculateDialogPosition(this.openStringDialog, this.currentEditElement, {
+      placement: 'beside',
+      offset: 20
+    });
     
     // Apply positioning
-    this.openStringDialog.style.left = `${dialogX}px`;
-    this.openStringDialog.style.top = `${dialogY}px`;
+    this.openStringDialog.style.left = `${position.x}px`;
+    this.openStringDialog.style.top = `${position.y}px`;
     
     // Add arrow CSS class and calculate arrow position
-    this.addOpenStringArrowCSS(arrowSide, elementCenterY, dialogY, dialogRect.height);
+    const dialogRect = this.openStringDialog.getBoundingClientRect();
+    this.addOpenStringArrowCSS(position.arrowSide, position.elementCenterY, position.y - window.scrollY, dialogRect.height);
   }
 
   /**
@@ -1273,27 +1292,14 @@ export class EditableSVGuitarChord {
   positionSettingsDialog() {
     if (!this.settingsButton || !this.settingsDialog) return;
 
-    // Get the bounding rect of the settings button
-    const buttonRect = this.settingsButton.getBoundingClientRect();
-    const dialogRect = this.settingsDialog.getBoundingClientRect();
-    
-    // Position dialog below and to the right of the button
-    let dialogX = buttonRect.left;
-    let dialogY = buttonRect.bottom + 5;
-    
-    // Ensure dialog stays within viewport bounds
-    const padding = 10;
-    const maxX = window.innerWidth - dialogRect.width - padding;
-    const maxY = window.innerHeight - dialogRect.height - padding;
-    
-    if (dialogX > maxX) dialogX = maxX;
-    if (dialogX < padding) dialogX = padding;
-    if (dialogY > maxY) dialogY = buttonRect.top - dialogRect.height - 5;
-    if (dialogY < padding) dialogY = padding;
+    const position = this.calculateDialogPosition(this.settingsDialog, this.settingsButton, {
+      placement: 'below',
+      offset: 5
+    });
     
     // Apply positioning
-    this.settingsDialog.style.left = `${dialogX}px`;
-    this.settingsDialog.style.top = `${dialogY}px`;
+    this.settingsDialog.style.left = `${position.x}px`;
+    this.settingsDialog.style.top = `${position.y}px`;
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "text-guitar-chart",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A JavaScript library to write text based guitar chord charts and convert them to SVG.",
   "main": "index.js",
   "types": "types/index.d.ts",