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

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

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

Files changed (2524) hide show

package/fabric-test-editor.html CHANGED Viewed

@@ -1,591 +1,1197 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fabric.js 7 Test Editor</title>
     <script src="./dist/index.js"></script>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-            background-color: #f5f5f5;
-            display: flex;
-            height: 100vh;
-        }
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        background-color: #f5f5f5;
+        display: flex;
+        height: 100vh;
+      }
-        .sidebar {
-            width: 300px;
-            background: white;
-            border-right: 1px solid #e5e7eb;
-            padding: 20px;
-            overflow-y: auto;
-        }
+      .sidebar {
+        width: 300px;
+        background: white;
+        border-right: 1px solid #e5e7eb;
+        padding: 20px;
+        overflow-y: auto;
+      }
-        .canvas-container {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-            position: relative;
-        }
+      .canvas-container {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        position: relative;
+      }
-        #canvas {
-            border: 1px solid #d1d5db;
-            border-radius: 8px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        }
+      #canvas {
+        border: 1px solid #d1d5db;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      }
-        /* Fix for Fabric.js canvas alignment and centering */
-        .canvas-container [data-fabric="wrapper"] {
-            position: relative !important;
-            margin: 0 auto !important;
-        }
+      /* Fix for Fabric.js canvas alignment and centering */
+      .canvas-container [data-fabric='wrapper'] {
+        position: relative !important;
+        margin: 0 auto !important;
+      }
-        .canvas-container [data-fabric="wrapper"] canvas {
-            left: 0 !important;
-            top: 0 !important;
-        }
+      .canvas-container [data-fabric='wrapper'] canvas {
+        left: 0 !important;
+        top: 0 !important;
+      }
-        .control-group {
-            margin-bottom: 20px;
-        }
+      .control-group {
+        margin-bottom: 20px;
+      }
-        .control-group h3 {
-            margin-bottom: 10px;
-            color: #374151;
-            font-size: 14px;
-            font-weight: 600;
-        }
+      .control-group h3 {
+        margin-bottom: 10px;
+        color: #374151;
+        font-size: 14px;
+        font-weight: 600;
+      }
-        button {
-            width: 100%;
-            margin-bottom: 8px;
-            padding: 10px 16px;
-            background: #3b82f6;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-            font-weight: 500;
-            transition: background-color 0.2s;
-        }
+      button {
+        width: 100%;
+        margin-bottom: 8px;
+        padding: 10px 16px;
+        background: #3b82f6;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        transition: background-color 0.2s;
+      }
-        button:hover {
-            background: #2563eb;
-        }
+      button:hover {
+        background: #2563eb;
+      }
-        button.secondary {
-            background: #6b7280;
-        }
+      button.secondary {
+        background: #6b7280;
+      }
-        button.secondary:hover {
-            background: #4b5563;
-        }
+      button.secondary:hover {
+        background: #4b5563;
+      }
-        input, select {
-            width: 100%;
-            margin-bottom: 8px;
-            padding: 8px 12px;
-            border: 1px solid #d1d5db;
-            border-radius: 6px;
-            font-size: 14px;
-        }
+      input,
+      select {
+        width: 100%;
+        margin-bottom: 8px;
+        padding: 8px 12px;
+        border: 1px solid #d1d5db;
+        border-radius: 6px;
+        font-size: 14px;
+      }
-        .color-input {
-            height: 40px;
-            cursor: pointer;
-        }
+      .color-input {
+        height: 40px;
+        cursor: pointer;
+      }
-        .info {
-            background: #f3f4f6;
-            padding: 12px;
-            border-radius: 6px;
-            font-size: 12px;
-            color: #4b5563;
-            margin-bottom: 20px;
-        }
+      .info {
+        background: #f3f4f6;
+        padding: 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        color: #4b5563;
+        margin-bottom: 20px;
+      }
-        .workspace {
-            background: white;
-            border: 2px solid #e5e7eb;
-        }
+      .workspace {
+        background: white;
+        border: 2px solid #e5e7eb;
+      }
+      /* Slider styling */
+      .slider-container {
+        margin-bottom: 8px;
+      }
+      .slider-container label {
+        display: block;
+        font-size: 12px;
+        color: #6b7280;
+        margin-bottom: 4px;
+      }
+      input[type='range'] {
+        width: 100%;
+        height: 6px;
+        border-radius: 3px;
+        background: #e5e7eb;
+        outline: none;
+        -webkit-appearance: none;
+        appearance: none;
+      }
+      input[type='range']::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #3b82f6;
+        cursor: pointer;
+        border: 2px solid #ffffff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      input[type='range']::-webkit-slider-thumb:hover {
+        background: #2563eb;
+      }
+      input[type='range']::-moz-range-thumb {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #3b82f6;
+        cursor: pointer;
+        border: 2px solid #ffffff;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      .slider-value {
+        font-size: 12px;
+        color: #374151;
+        font-weight: 500;
+        text-align: center;
+        margin-top: 4px;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="sidebar">
-        <div class="info">
-            <strong>Fabric.js 7 Beta Test Editor</strong><br>
-            Test your Fabric.js changes here with useOverlayEditing enabled.
-        </div>
+      <div class="info">
+        <strong>Fabric.js 7 Beta Test Editor</strong><br />
+        Test your Fabric.js changes here with useOverlayEditing enabled.
+      </div>
-        <div class="control-group">
-            <h3>Add Objects</h3>
-            <button onclick="addText()">Add Text</button>
-            <button onclick="addRectangle()">Add Rectangle</button>
-            <button onclick="addCircle()">Add Circle</button>
-            <button onclick="addTriangle()">Add Triangle</button>
-        </div>
+      <div class="control-group">
+        <h3>Add Objects</h3>
+        <button onclick="addText()">Add Text</button>
+        <button onclick="addRectangle()">Add Rectangle</button>
+        <button onclick="addCircle()">Add Circle</button>
+        <button onclick="addTriangle()">Add Triangle</button>
+        <button onclick="addPolygon()">Add Polygon</button>
+        <button onclick="addLine()">Add Line</button>
+      </div>
-        <div class="control-group">
-            <h3>Text Options</h3>
-            <input type="text" id="textValue" placeholder="Enter text..." value="Sample Text">
-            <select id="textDirection">
-                <option value="ltr">LTR (Left to Right)</option>
-                <option value="rtl">RTL (Right to Left)</option>
-            </select>
-            <select id="textAlign">
-                <option value="left">Left</option>
-                <option value="center">Center</option>
-                <option value="right">Right</option>
-                <option value="justify">Justify</option>
-                <option value="justify-left">Justify Left</option>
-                <option value="justify-center">Justify Center</option>
-                <option value="justify-right">Justify Right</option>
-            </select>
-            <input type="number" id="fontSize" placeholder="Font Size" value="32" min="8" max="200">
-        </div>
+      <div class="control-group">
+        <h3>Text Options</h3>
+        <input
+          type="text"
+          id="textValue"
+          placeholder="Enter text..."
+          value="Sample Text"
+        />
+        <select id="textDirection">
+          <option value="ltr">LTR (Left to Right)</option>
+          <option value="rtl">RTL (Right to Left)</option>
+        </select>
+        <select id="textAlign">
+          <option value="left">Left</option>
+          <option value="center">Center</option>
+          <option value="right">Right</option>
+          <option value="justify">Justify</option>
+          <option value="justify-left">Justify Left</option>
+          <option value="justify-center">Justify Center</option>
+          <option value="justify-right">Justify Right</option>
+        </select>
+        <input
+          type="number"
+          id="fontSize"
+          placeholder="Font Size"
+          value="32"
+          min="8"
+          max="200"
+        />
+      </div>
-        <div class="control-group">
-            <h3>Font Style</h3>
-            <select id="fontWeight">
-                <option value="normal">Normal</option>
-                <option value="bold">Bold</option>
-                <option value="100">100 - Thin</option>
-                <option value="200">200 - Extra Light</option>
-                <option value="300">300 - Light</option>
-                <option value="400">400 - Normal</option>
-                <option value="500">500 - Medium</option>
-                <option value="600">600 - Semi Bold</option>
-                <option value="700">700 - Bold</option>
-                <option value="800">800 - Extra Bold</option>
-                <option value="900">900 - Black</option>
-            </select>
-            <select id="fontStyle">
-                <option value="normal">Normal</option>
-                <option value="italic">Italic</option>
-                <option value="oblique">Oblique</option>
-            </select>
-            <select id="fontFamily">
-                <option value="Arial">Arial</option>
-                <option value="Georgia">Georgia</option>
-                <option value="Times New Roman">Times New Roman</option>
-                <option value="Courier New">Courier New</option>
-                <option value="Helvetica">Helvetica</option>
-                <option value="Verdana">Verdana</option>
-            </select>
-        </div>
+      <div class="control-group">
+        <h3>Font Style</h3>
+        <select id="fontWeight">
+          <option value="normal">Normal</option>
+          <option value="bold">Bold</option>
+          <option value="100">100 - Thin</option>
+          <option value="200">200 - Extra Light</option>
+          <option value="300">300 - Light</option>
+          <option value="400">400 - Normal</option>
+          <option value="500">500 - Medium</option>
+          <option value="600">600 - Semi Bold</option>
+          <option value="700">700 - Bold</option>
+          <option value="800">800 - Extra Bold</option>
+          <option value="900">900 - Black</option>
+        </select>
+        <select id="fontStyle">
+          <option value="normal">Normal</option>
+          <option value="italic">Italic</option>
+          <option value="oblique">Oblique</option>
+        </select>
+        <select id="fontFamily">
+          <option value="Arial">Arial</option>
+          <option value="Georgia">Georgia</option>
+          <option value="Times New Roman">Times New Roman</option>
+          <option value="Courier New">Courier New</option>
+          <option value="Helvetica">Helvetica</option>
+          <option value="Verdana">Verdana</option>
+        </select>
+      </div>
-        <div class="control-group">
-            <h3>Colors</h3>
-            <input type="color" id="fillColor" class="color-input" value="#000000">
-            <label for="fillColor" style="font-size: 12px; color: #6b7280;">Fill Color</label>
-            <input type="color" id="strokeColor" class="color-input" value="#000000">
-            <label for="strokeColor" style="font-size: 12px; color: #6b7280;">Stroke Color</label>
-            <input type="number" id="strokeWidth" placeholder="Stroke Width" value="2" min="0" max="20">
+      <div class="control-group">
+        <h3>Colors</h3>
+        <input
+          type="color"
+          id="fillColor"
+          class="color-input"
+          value="#000000"
+        />
+        <label for="fillColor" style="font-size: 12px; color: #6b7280"
+          >Fill Color</label
+        >
+        <input
+          type="color"
+          id="strokeColor"
+          class="color-input"
+          value="#000000"
+        />
+        <label for="strokeColor" style="font-size: 12px; color: #6b7280"
+          >Stroke Color</label
+        >
+        <div class="slider-container">
+          <label for="strokeWidth">Stroke Width</label>
+          <input
+            type="range"
+            id="strokeWidth"
+            min="0"
+            max="20"
+            value="2"
+            step="1"
+          />
+          <div class="slider-value" id="strokeWidthValue">2px</div>
         </div>
+      </div>
-        <div class="control-group">
-            <h3>Text Alignment</h3>
-            <button onclick="setTextAlign('left')">Align Left</button>
-            <button onclick="setTextAlign('center')">Align Center</button>
-            <button onclick="setTextAlign('right')">Align Right</button>
-            <button onclick="setTextAlign('justify')">Justify</button>
-            <button onclick="setTextAlign('justify-left')">Justify Left</button>
-            <button onclick="setTextAlign('justify-center')">Justify Center</button>
-            <button onclick="setTextAlign('justify-right')">Justify Right</button>
+      <div class="control-group">
+        <h3>Corner Radius (Canva-style)</h3>
+        <div class="slider-container">
+          <label for="cornerRadius">Corner Radius</label>
+          <input
+            type="range"
+            id="cornerRadius"
+            min="0"
+            max="50"
+            value="0"
+            step="1"
+          />
+          <div class="slider-value" id="cornerRadiusValue">0px</div>
         </div>
+        <button onclick="testCornerRadius()">Test All Corner Radius</button>
+      </div>
+      <div class="control-group">
+        <h3>Line Properties</h3>
+        <div style="margin-bottom: 10px;">
+          <label for="roundedEndpoints" style="display: flex; align-items: center; cursor: pointer;">
+            <input
+              type="checkbox"
+              id="roundedEndpoints"
+              style="margin-right: 8px;"
+            />
+            Rounded Endpoints (Line Caps)
+          </label>
+        </div>
+      </div>
-        <div class="control-group">
-            <h3>Font Controls</h3>
-            <button onclick="toggleBold()">Toggle Bold</button>
-            <button onclick="toggleItalic()">Toggle Italic</button>
-            <button onclick="changeFontFamily()">Change Font</button>
+      <div class="control-group">
+        <h3>Drawing Mode</h3>
+        <button id="enableDrawing" onclick="enableDrawing()">Enable Drawing</button>
+        <button id="disableDrawing" onclick="disableDrawing()">Disable Drawing</button>
+        <div class="slider-container">
+          <label for="brushWidth">Brush Width</label>
+          <input
+            type="range"
+            id="brushWidth"
+            min="1"
+            max="50"
+            value="5"
+            step="1"
+          />
+          <div class="slider-value" id="brushWidthValue">5px</div>
         </div>
+      </div>
+      <div class="control-group">
+        <h3>Text Alignment</h3>
+        <button onclick="setTextAlign('left')">Align Left</button>
+        <button onclick="setTextAlign('center')">Align Center</button>
+        <button onclick="setTextAlign('right')">Align Right</button>
+        <button onclick="setTextAlign('justify')">Justify</button>
+        <button onclick="setTextAlign('justify-left')">Justify Left</button>
+        <button onclick="setTextAlign('justify-center')">Justify Center</button>
+        <button onclick="setTextAlign('justify-right')">Justify Right</button>
+      </div>
-        <div class="control-group">
-            <h3>Actions</h3>
-            <button onclick="deleteSelected()" class="secondary">Delete Selected</button>
-            <button onclick="clearCanvas()" class="secondary">Clear Canvas</button>
-            <button onclick="exportJSON()" class="secondary">Export JSON</button>
+      <div class="control-group">
+        <h3>Font Controls</h3>
+        <button onclick="toggleBold()">Toggle Bold</button>
+        <button onclick="toggleItalic()">Toggle Italic</button>
+        <button onclick="changeFontFamily()">Change Font</button>
+      </div>
+      <div class="control-group">
+        <h3>Actions</h3>
+        <button onclick="deleteSelected()" class="secondary">
+          Delete Selected
+        </button>
+        <button onclick="clearCanvas()" class="secondary">Clear Canvas</button>
+        <button onclick="exportJSON()" class="secondary">Export JSON</button>
+      </div>
+      <div class="control-group">
+        <h3>Canvas Zoom</h3>
+        <div class="slider-container">
+          <label for="canvasZoom">Zoom Level</label>
+          <input
+            type="range"
+            id="canvasZoom"
+            min="0.1"
+            max="3"
+            value="1"
+            step="0.1"
+          />
+          <div class="slider-value" id="canvasZoomValue">100%</div>
         </div>
+        <button onclick="resetZoom()">Reset Zoom (100%)</button>
+        <button onclick="fitToWindow()">Fit to Window</button>
+      </div>
-        <div class="control-group">
-            <h3>Canvas Info</h3>
-            <div id="canvasInfo" style="font-size: 12px; color: #6b7280;">
-                Objects: 0<br>
-                Selected: None
-            </div>
+      <div class="control-group">
+        <h3>Canvas Info</h3>
+        <div id="canvasInfo" style="font-size: 12px; color: #6b7280">
+          Objects: 0<br />
+          Selected: None<br />
+          Zoom: 100%
         </div>
+      </div>
     </div>
     <div class="canvas-container">
-        <canvas id="canvas" width="800" height="600"></canvas>
+      <canvas id="canvas" width="800" height="600"></canvas>
     </div>
     <script>
-        // Initialize Fabric.js canvas
-        const canvas = new fabric.Canvas('canvas', {
-            backgroundColor: 'white',
-            selection: true,
-            preserveObjectStacking: true
+      // Initialize Fabric.js canvas
+      const canvas = new fabric.Canvas('canvas', {
+        backgroundColor: 'white',
+        selection: true,
+        preserveObjectStacking: true,
+      });
+      // Create workspace (like your editor) - removed 'clip' name to prevent clipping issues with line dragging
+      const workspace = new fabric.Rect({
+        left: 100,
+        top: 100,
+        width: 600,
+        height: 400,
+        fill: 'white',
+        stroke: '#e5e7eb',
+        strokeWidth: 2,
+        selectable: false,
+        evented: false,
+        name: 'workspace', // Changed from 'clip' to prevent clipping during line endpoint dragging
+      });
+      canvas.add(workspace);
+      canvas.centerObject(workspace);
+      canvas.renderAll();
+      // Function to fix canvas positioning
+      function fixCanvasPositioning() {
+        const wrapper = document.querySelector('[data-fabric="wrapper"]');
+        if (wrapper) {
+          // Force wrapper to stay centered
+          wrapper.style.position = 'relative';
+          wrapper.style.margin = '0 auto';
+          wrapper.style.left = '';
+          wrapper.style.right = '';
+          wrapper.style.transform = '';
+          // Get both canvas elements
+          const lowerCanvas = wrapper.querySelector('[data-fabric="main"]');
+          const upperCanvas = wrapper.querySelector('[data-fabric="top"]');
+          if (lowerCanvas && upperCanvas) {
+            // Ensure both canvases are positioned identically within wrapper
+            lowerCanvas.style.position = 'absolute';
+            upperCanvas.style.position = 'absolute';
+            lowerCanvas.style.left = '0px';
+            lowerCanvas.style.top = '0px';
+            upperCanvas.style.left = '0px';
+            upperCanvas.style.top = '0px';
+          }
+        }
+      }
+      // Apply fix multiple times to catch Fabric.js overrides
+      setTimeout(fixCanvasPositioning, 0);
+      setTimeout(fixCanvasPositioning, 50);
+      setTimeout(fixCanvasPositioning, 100);
+      setTimeout(fixCanvasPositioning, 200);
+      setTimeout(fixCanvasPositioning, 500);
+      // Also fix on canvas events that might trigger repositioning
+      canvas.on('after:render', fixCanvasPositioning);
+      canvas.on('canvas:cleared', fixCanvasPositioning);
+      // Use MutationObserver to catch any DOM changes to the wrapper
+      const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+          if (
+            mutation.type === 'attributes' &&
+            mutation.target.matches('[data-fabric="wrapper"]') &&
+            (mutation.attributeName === 'style' ||
+              mutation.attributeName === 'class')
+          ) {
+            setTimeout(fixCanvasPositioning, 0);
+          }
         });
+      });
+      // Start observing after a brief delay
+      setTimeout(() => {
+        const wrapper = document.querySelector('[data-fabric="wrapper"]');
+        if (wrapper) {
+          observer.observe(wrapper, {
+            attributes: true,
+            attributeFilter: ['style', 'class'],
+          });
+        }
+      }, 100);
+      // Text options are now dynamically set from UI controls
+      // Helper function to auto-detect text direction (same logic as overlay editor)
+      function autoDetectTextDirection(text) {
+        // Check for RTL characters (Arabic, Hebrew, etc.)
+        const rtlChars = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/;
+        const ltrChars = /[A-Za-z]/;
+        const hasRtl = rtlChars.test(text);
+        const hasLtr = ltrChars.test(text);
+        if (hasRtl && !hasLtr) return 'rtl';
+        if (hasLtr && !hasRtl) return 'ltr';
+        if (hasRtl && hasLtr) {
+          // Mixed text - determine by first strong character
+          for (let char of text) {
+            if (rtlChars.test(char)) return 'rtl';
+            if (ltrChars.test(char)) return 'ltr';
+          }
+        }
+        return 'ltr'; // default
+      }
+      // Add text function (matching your editor)
+      function addText() {
+        const value =
+          document.getElementById('textValue').value || 'Sample Text';
+        let direction = document.getElementById('textDirection').value;
+        const textAlign = document.getElementById('textAlign').value;
+        const fontSize =
+          parseInt(document.getElementById('fontSize').value) || 32;
+        const fillColor = document.getElementById('fillColor').value;
-        // Create workspace (like your editor)
-        const workspace = new fabric.Rect({
-            left: 100,
-            top: 100,
-            width: 600,
-            height: 400,
-            fill: 'white',
-            stroke: '#e5e7eb',
-            strokeWidth: 2,
-            selectable: false,
-            evented: false,
-            name: 'clip'
+        // Get font properties from controls
+        const fontWeight =
+          document.getElementById('fontWeight').value || 'normal';
+        const fontStyle =
+          document.getElementById('fontStyle').value || 'normal';
+        const fontFamily =
+          document.getElementById('fontFamily').value || 'Arial';
+        // Auto-detect direction if user hasn't manually changed it and text looks RTL
+        const autoDetectedDirection = autoDetectTextDirection(value);
+        if (direction === 'ltr' && autoDetectedDirection === 'rtl') {
+          direction = 'rtl';
+          // Update the dropdown to reflect the auto-detected direction
+          document.getElementById('textDirection').value = 'rtl';
+          console.log('🔄 Auto-detected RTL text, switched direction to RTL');
+        }
+        const textbox = new fabric.Textbox(value, {
+          left: 200,
+          top: 200,
+          fill: fillColor,
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          fontWeight: fontWeight,
+          fontStyle: fontStyle,
+          lineHeight: 1.2,
+          // RTL/LTR configuration (now with auto-detection)
+          direction: direction,
+          textAlign: textAlign,
+          // ✅ Enable overlay editing (this handles most text editing)
+          useOverlayEditing: true,
+          // ✅ Keep these
+          lockMovementX: false,
+          lockMovementY: false,
         });
-        canvas.add(workspace);
-        canvas.centerObject(workspace);
+        canvas.add(textbox);
+        canvas.setActiveObject(textbox);
         canvas.renderAll();
+        updateCanvasInfo();
+      }
-        // Function to fix canvas positioning
-        function fixCanvasPositioning() {
-            const wrapper = document.querySelector('[data-fabric="wrapper"]');
-            if (wrapper) {
-                // Force wrapper to stay centered
-                wrapper.style.position = 'relative';
-                wrapper.style.margin = '0 auto';
-                wrapper.style.left = '';
-                wrapper.style.right = '';
-                wrapper.style.transform = '';
-                // Get both canvas elements
-                const lowerCanvas = wrapper.querySelector('[data-fabric="main"]');
-                const upperCanvas = wrapper.querySelector('[data-fabric="top"]');
-                if (lowerCanvas && upperCanvas) {
-                    // Ensure both canvases are positioned identically within wrapper
-                    lowerCanvas.style.position = 'absolute';
-                    upperCanvas.style.position = 'absolute';
-                    lowerCanvas.style.left = '0px';
-                    lowerCanvas.style.top = '0px';
-                    upperCanvas.style.left = '0px';
-                    upperCanvas.style.top = '0px';
-                }
-            }
-        }
+      // Add shapes functions
+      function addRectangle() {
+        const fillColor = document.getElementById('fillColor').value;
+        const strokeColor = document.getElementById('strokeColor').value;
+        const strokeWidth =
+          parseInt(document.getElementById('strokeWidth').value) || 2;
+        const cornerRadius =
+          parseInt(document.getElementById('cornerRadius').value) || 0;
-        // Apply fix multiple times to catch Fabric.js overrides
-        setTimeout(fixCanvasPositioning, 0);
-        setTimeout(fixCanvasPositioning, 50);
-        setTimeout(fixCanvasPositioning, 100);
-        setTimeout(fixCanvasPositioning, 200);
-        setTimeout(fixCanvasPositioning, 500);
-        // Also fix on canvas events that might trigger repositioning
-        canvas.on('after:render', fixCanvasPositioning);
-        canvas.on('canvas:cleared', fixCanvasPositioning);
-        // Use MutationObserver to catch any DOM changes to the wrapper
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type === 'attributes' &&
-                    mutation.target.matches('[data-fabric="wrapper"]') &&
-                    (mutation.attributeName === 'style' || mutation.attributeName === 'class')) {
-                    setTimeout(fixCanvasPositioning, 0);
-                }
-            });
+        const rect = new fabric.Rect({
+          left: 150,
+          top: 150,
+          width: 100,
+          height: 100,
+          fill: fillColor,
+          stroke: strokeColor,
+          strokeWidth: strokeWidth,
+          rx: cornerRadius,
+          ry: cornerRadius,
         });
-        // Start observing after a brief delay
-        setTimeout(() => {
-            const wrapper = document.querySelector('[data-fabric="wrapper"]');
-            if (wrapper) {
-                observer.observe(wrapper, {
-                    attributes: true,
-                    attributeFilter: ['style', 'class']
-                });
-            }
-        }, 100);
-        // Text options are now dynamically set from UI controls
-        // Helper function to auto-detect text direction (same logic as overlay editor)
-        function autoDetectTextDirection(text) {
-            // Check for RTL characters (Arabic, Hebrew, etc.)
-            const rtlChars = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/;
-            const ltrChars = /[A-Za-z]/;
-            const hasRtl = rtlChars.test(text);
-            const hasLtr = ltrChars.test(text);
-            if (hasRtl && !hasLtr) return 'rtl';
-            if (hasLtr && !hasRtl) return 'ltr';
-            if (hasRtl && hasLtr) {
-                // Mixed text - determine by first strong character
-                for (let char of text) {
-                    if (rtlChars.test(char)) return 'rtl';
-                    if (ltrChars.test(char)) return 'ltr';
-                }
-            }
-            return 'ltr'; // default
+        canvas.add(rect);
+        canvas.setActiveObject(rect);
+        canvas.renderAll();
+        updateCanvasInfo();
+      }
+      function addCircle() {
+        const fillColor = document.getElementById('fillColor').value;
+        const strokeColor = document.getElementById('strokeColor').value;
+        const strokeWidth =
+          parseInt(document.getElementById('strokeWidth').value) || 2;
+        const circle = new fabric.Circle({
+          left: 150,
+          top: 150,
+          radius: 50,
+          fill: fillColor,
+          stroke: strokeColor,
+          strokeWidth: strokeWidth,
+        });
+        canvas.add(circle);
+        canvas.setActiveObject(circle);
+        canvas.renderAll();
+        updateCanvasInfo();
+      }
+      function addTriangle() {
+        const fillColor = document.getElementById('fillColor').value;
+        const strokeColor = document.getElementById('strokeColor').value;
+        const strokeWidth =
+          parseInt(document.getElementById('strokeWidth').value) || 2;
+        const cornerRadius =
+          parseInt(document.getElementById('cornerRadius').value) || 0;
+        const triangle = new fabric.Triangle({
+          left: 150,
+          top: 150,
+          width: 100,
+          height: 100,
+          fill: fillColor,
+          stroke: strokeColor,
+          strokeWidth: strokeWidth,
+          cornerRadius: cornerRadius,
+        });
+        canvas.add(triangle);
+        canvas.setActiveObject(triangle);
+        canvas.renderAll();
+        updateCanvasInfo();
+      }
+      function addPolygon() {
+        const fillColor = document.getElementById('fillColor').value;
+        const strokeColor = document.getElementById('strokeColor').value;
+        const strokeWidth =
+          parseInt(document.getElementById('strokeWidth').value) || 2;
+        const cornerRadius =
+          parseInt(document.getElementById('cornerRadius').value) || 0;
+        // Create a hexagon
+        const points = [];
+        const sides = 6;
+        const radius = 50;
+        for (let i = 0; i < sides; i++) {
+          const angle = (i * 2 * Math.PI) / sides - Math.PI / 2;
+          points.push({
+            x: radius * Math.cos(angle),
+            y: radius * Math.sin(angle),
+          });
         }
-        // Add text function (matching your editor)
-        function addText() {
-            const value = document.getElementById('textValue').value || 'Sample Text';
-            let direction = document.getElementById('textDirection').value;
-            const textAlign = document.getElementById('textAlign').value;
-            const fontSize = parseInt(document.getElementById('fontSize').value) || 32;
-            const fillColor = document.getElementById('fillColor').value;
-            // Get font properties from controls
-            const fontWeight = document.getElementById('fontWeight').value || 'normal';
-            const fontStyle = document.getElementById('fontStyle').value || 'normal';
-            const fontFamily = document.getElementById('fontFamily').value || 'Arial';
-            // Auto-detect direction if user hasn't manually changed it and text looks RTL
-            const autoDetectedDirection = autoDetectTextDirection(value);
-            if (direction === 'ltr' && autoDetectedDirection === 'rtl') {
-                direction = 'rtl';
-                // Update the dropdown to reflect the auto-detected direction
-                document.getElementById('textDirection').value = 'rtl';
-                console.log('🔄 Auto-detected RTL text, switched direction to RTL');
-            }
+        const polygon = new fabric.Polygon(points, {
+          left: 200,
+          top: 200,
+          fill: fillColor,
+          stroke: strokeColor,
+          strokeWidth: strokeWidth,
+          cornerRadius: cornerRadius,
+        });
+        canvas.add(polygon);
+        canvas.setActiveObject(polygon);
+        canvas.renderAll();
+        updateCanvasInfo();
+      }
+      function addLine() {
+        const strokeColor = document.getElementById('strokeColor').value;
+        const strokeWidth =
+          parseInt(document.getElementById('strokeWidth').value) || 2;
+        const roundedEndpoints = document.getElementById('roundedEndpoints').checked;
+        // Create line with absolute coordinates (start and end points)
+        const line = new fabric.Line([100, 100, 300, 200], {
+          stroke: strokeColor,
+          strokeWidth: Math.max(strokeWidth, 10), // Make sure stroke is thick enough to see line caps
+          selectable: true,
+          evented: true,
+          fill: '', // Lines should not have fill
+          strokeLineCap: roundedEndpoints ? 'round' : 'butt',
+        });
+        canvas.add(line);
+        canvas.setActiveObject(line);
+        canvas.renderAll();
+        updateCanvasInfo();
-            const textbox = new fabric.Textbox(value, {
-                left: 200,
-                top: 200,
-                fill: fillColor,
-                fontSize: fontSize,
-                fontFamily: fontFamily,
-                fontWeight: fontWeight,
-                fontStyle: fontStyle,
-                lineHeight: 1.2,
-                // RTL/LTR configuration (now with auto-detection)
-                direction: direction,
-                textAlign: textAlign,
-                // ✅ Enable overlay editing (this handles most text editing)
-                useOverlayEditing: true,
-                // ✅ Keep these
-                lockMovementX: false,
-                lockMovementY: false,
-            });
-            canvas.add(textbox);
-            canvas.setActiveObject(textbox);
-            canvas.renderAll();
-            updateCanvasInfo();
+        console.log('✏️ Line added with draggable endpoints! Drag the blue circles to adjust.');
+      }
+      // Text alignment function
+      function setTextAlign(alignment) {
+        const activeObject = canvas.getActiveObject();
+        if (
+          activeObject &&
+          (activeObject.type === 'textbox' ||
+            activeObject.type === 'text' ||
+            activeObject.type === 'i-text')
+        ) {
+          activeObject.set('textAlign', alignment);
+          canvas.renderAll();
+          updateCanvasInfo();
         }
+      }
-        // Add shapes functions
-        function addRectangle() {
-            const fillColor = document.getElementById('fillColor').value;
-            const strokeColor = document.getElementById('strokeColor').value;
-            const strokeWidth = parseInt(document.getElementById('strokeWidth').value) || 2;
-            const rect = new fabric.Rect({
-                left: 150,
-                top: 150,
-                width: 100,
-                height: 100,
-                fill: fillColor,
-                stroke: strokeColor,
-                strokeWidth: strokeWidth
-            });
-            canvas.add(rect);
-            canvas.setActiveObject(rect);
-            canvas.renderAll();
-            updateCanvasInfo();
+      // Font control functions
+      function toggleBold() {
+        const activeObject = canvas.getActiveObject();
+        if (
+          activeObject &&
+          (activeObject.type === 'textbox' ||
+            activeObject.type === 'text' ||
+            activeObject.type === 'i-text')
+        ) {
+          const currentWeight = activeObject.fontWeight;
+          const newWeight =
+            currentWeight === 'bold' || currentWeight === '700'
+              ? 'normal'
+              : 'bold';
+          activeObject.set('fontWeight', newWeight);
+          // Update the dropdown to reflect the change
+          document.getElementById('fontWeight').value = newWeight;
+          canvas.renderAll();
+          updateCanvasInfo();
+          console.log('🔤 Font weight changed to:', newWeight);
         }
+      }
-        function addCircle() {
-            const fillColor = document.getElementById('fillColor').value;
-            const strokeColor = document.getElementById('strokeColor').value;
-            const strokeWidth = parseInt(document.getElementById('strokeWidth').value) || 2;
-            const circle = new fabric.Circle({
-                left: 150,
-                top: 150,
-                radius: 50,
-                fill: fillColor,
-                stroke: strokeColor,
-                strokeWidth: strokeWidth
-            });
-            canvas.add(circle);
-            canvas.setActiveObject(circle);
-            canvas.renderAll();
-            updateCanvasInfo();
+      function toggleItalic() {
+        const activeObject = canvas.getActiveObject();
+        if (
+          activeObject &&
+          (activeObject.type === 'textbox' ||
+            activeObject.type === 'text' ||
+            activeObject.type === 'i-text')
+        ) {
+          const currentStyle = activeObject.fontStyle;
+          const newStyle = currentStyle === 'italic' ? 'normal' : 'italic';
+          activeObject.set('fontStyle', newStyle);
+          // Update the dropdown to reflect the change
+          document.getElementById('fontStyle').value = newStyle;
+          canvas.renderAll();
+          updateCanvasInfo();
+          console.log('🔤 Font style changed to:', newStyle);
         }
+      }
-        function addTriangle() {
-            const fillColor = document.getElementById('fillColor').value;
-            const strokeColor = document.getElementById('strokeColor').value;
-            const strokeWidth = parseInt(document.getElementById('strokeWidth').value) || 2;
-            const triangle = new fabric.Triangle({
-                left: 150,
-                top: 150,
-                width: 100,
-                height: 100,
-                fill: fillColor,
-                stroke: strokeColor,
-                strokeWidth: strokeWidth
-            });
-            canvas.add(triangle);
-            canvas.setActiveObject(triangle);
-            canvas.renderAll();
-            updateCanvasInfo();
+      function changeFontFamily() {
+        const activeObject = canvas.getActiveObject();
+        if (
+          activeObject &&
+          (activeObject.type === 'textbox' ||
+            activeObject.type === 'text' ||
+            activeObject.type === 'i-text')
+        ) {
+          const selectedFamily = document.getElementById('fontFamily').value;
+          activeObject.set('fontFamily', selectedFamily);
+          canvas.renderAll();
+          updateCanvasInfo();
+          console.log('🔤 Font family changed to:', selectedFamily);
         }
+      }
-        // Text alignment function
-        function setTextAlign(alignment) {
-            const activeObject = canvas.getActiveObject();
-            if (activeObject && (activeObject.type === 'textbox' || activeObject.type === 'text' || activeObject.type === 'i-text')) {
-                activeObject.set('textAlign', alignment);
-                canvas.renderAll();
-                updateCanvasInfo();
-            }
+      // Action functions
+      function deleteSelected() {
+        const activeObjects = canvas.getActiveObjects();
+        if (activeObjects.length) {
+          canvas.remove(...activeObjects);
+          canvas.discardActiveObject();
+          canvas.renderAll();
+          updateCanvasInfo();
         }
+      }
+      function clearCanvas() {
+        canvas
+          .getObjects()
+          .filter((obj) => obj.name !== 'workspace')
+          .forEach((obj) => canvas.remove(obj));
+        canvas.discardActiveObject();
+        canvas.renderAll();
+        updateCanvasInfo();
+      }
+      function exportJSON() {
+        const json = canvas.toJSON();
+        console.log('Canvas JSON:', json);
+        // Create downloadable JSON file
+        const dataStr = JSON.stringify(json, null, 2);
+        const dataBlob = new Blob([dataStr], { type: 'application/json' });
+        const url = URL.createObjectURL(dataBlob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'canvas-export.json';
+        link.click();
+        URL.revokeObjectURL(url);
+      }
+      // Update canvas info
+      function updateCanvasInfo() {
+        const objects = canvas
+          .getObjects()
+          .filter((obj) => obj.name !== 'workspace');
+        const activeObject = canvas.getActiveObject();
+        const zoom = Math.round(canvas.getZoom() * 100);
+        let selectedInfo = 'None';
+        let directionInfo = '';
+        if (activeObject) {
+          if (activeObject.type === 'activeSelection') {
+            selectedInfo = `${activeObject._objects.length} objects`;
+          } else {
+            selectedInfo = activeObject.type;
-        // Font control functions
-        function toggleBold() {
-            const activeObject = canvas.getActiveObject();
-            if (activeObject && (activeObject.type === 'textbox' || activeObject.type === 'text' || activeObject.type === 'i-text')) {
-                const currentWeight = activeObject.fontWeight;
-                const newWeight = (currentWeight === 'bold' || currentWeight === '700') ? 'normal' : 'bold';
-                activeObject.set('fontWeight', newWeight);
-                // Update the dropdown to reflect the change
-                document.getElementById('fontWeight').value = newWeight;
-                canvas.renderAll();
-                updateCanvasInfo();
-                console.log('🔤 Font weight changed to:', newWeight);
+            // Show direction info for text objects
+            if (
+              activeObject.type === 'textbox' ||
+              activeObject.type === 'text' ||
+              activeObject.type === 'i-text'
+            ) {
+              const direction = activeObject.direction || 'ltr';
+              const textAlign = activeObject.textAlign || 'left';
+              directionInfo = `<br>Direction: ${direction.toUpperCase()}<br>Align: ${textAlign}`;
             }
-        }
-        function toggleItalic() {
-            const activeObject = canvas.getActiveObject();
-            if (activeObject && (activeObject.type === 'textbox' || activeObject.type === 'text' || activeObject.type === 'i-text')) {
-                const currentStyle = activeObject.fontStyle;
-                const newStyle = currentStyle === 'italic' ? 'normal' : 'italic';
-                activeObject.set('fontStyle', newStyle);
-                // Update the dropdown to reflect the change
-                document.getElementById('fontStyle').value = newStyle;
-                canvas.renderAll();
-                updateCanvasInfo();
-                console.log('🔤 Font style changed to:', newStyle);
+            // Sync stroke width slider with selected object
+            if (activeObject.strokeWidth !== undefined) {
+              strokeWidthSlider.value = activeObject.strokeWidth;
+              strokeWidthValue.textContent = activeObject.strokeWidth + 'px';
             }
+          }
         }
-        function changeFontFamily() {
-            const activeObject = canvas.getActiveObject();
-            if (activeObject && (activeObject.type === 'textbox' || activeObject.type === 'text' || activeObject.type === 'i-text')) {
-                const selectedFamily = document.getElementById('fontFamily').value;
-                activeObject.set('fontFamily', selectedFamily);
-                canvas.renderAll();
-                updateCanvasInfo();
-                console.log('🔤 Font family changed to:', selectedFamily);
+        document.getElementById('canvasInfo').innerHTML = `
+                Objects: ${objects.length}<br>
+                Selected: ${selectedInfo}${directionInfo}<br>
+                Zoom: ${zoom}%
+            `;
+      }
+      // Zoom functionality
+      const canvasZoomSlider = document.getElementById('canvasZoom');
+      const canvasZoomValue = document.getElementById('canvasZoomValue');
+      canvasZoomSlider.addEventListener('input', function() {
+        const zoomLevel = parseFloat(this.value);
+        canvas.setZoom(zoomLevel);
+        canvasZoomValue.textContent = Math.round(zoomLevel * 100) + '%';
+        canvas.renderAll();
+        updateCanvasInfo();
+      });
+      function resetZoom() {
+        canvas.setZoom(1);
+        canvasZoomSlider.value = 1;
+        canvasZoomValue.textContent = '100%';
+        canvas.renderAll();
+        updateCanvasInfo();
+        console.log('🔍 Canvas zoom reset to 100%');
+      }
+      function fitToWindow() {
+        const container = document.querySelector('.canvas-container');
+        const containerWidth = container.clientWidth - 40; // padding
+        const containerHeight = container.clientHeight - 40; // padding
+        const canvasWidth = canvas.getWidth();
+        const canvasHeight = canvas.getHeight();
+        const scaleX = containerWidth / canvasWidth;
+        const scaleY = containerHeight / canvasHeight;
+        const scale = Math.min(scaleX, scaleY, 3); // max zoom 300%
+        canvas.setZoom(scale);
+        canvasZoomSlider.value = scale;
+        canvasZoomValue.textContent = Math.round(scale * 100) + '%';
+        canvas.renderAll();
+        updateCanvasInfo();
+        console.log('🔍 Canvas zoom fit to window:', Math.round(scale * 100) + '%');
+      }
+      // Mouse wheel zoom support
+      canvas.on('mouse:wheel', function(opt) {
+        const delta = opt.e.deltaY;
+        let zoom = canvas.getZoom();
+        zoom *= 0.999 ** delta;
+        // Clamp zoom between 10% and 300%
+        zoom = Math.max(0.1, Math.min(3, zoom));
+        canvas.setZoom(zoom);
+        canvasZoomSlider.value = zoom;
+        canvasZoomValue.textContent = Math.round(zoom * 100) + '%';
+        opt.e.preventDefault();
+        opt.e.stopPropagation();
+        updateCanvasInfo();
+        console.log('🔍 Mouse wheel zoom:', Math.round(zoom * 100) + '%');
+      });
+      // Event listeners for canvas changes
+      canvas.on('object:added', updateCanvasInfo);
+      canvas.on('object:removed', updateCanvasInfo);
+      canvas.on('selection:created', updateCanvasInfo);
+      canvas.on('selection:updated', updateCanvasInfo);
+      canvas.on('selection:cleared', updateCanvasInfo);
+      // Initial info update
+      updateCanvasInfo();
+      // Stroke width slider functionality
+      const strokeWidthSlider = document.getElementById('strokeWidth');
+      const strokeWidthValue = document.getElementById('strokeWidthValue');
+      // Update slider value display and selected object in real-time
+      strokeWidthSlider.addEventListener('input', function () {
+        const value = parseInt(this.value);
+        strokeWidthValue.textContent = value + 'px';
+        // Update stroke width of selected object(s) in real-time
+        const activeObjects = canvas.getActiveObjects();
+        if (activeObjects.length > 0) {
+          activeObjects.forEach((obj) => {
+            if (obj.stroke || obj.type === 'line') {
+              obj.set('strokeWidth', value);
             }
+          });
+          canvas.renderAll();
+        }
+      });
+      // Drawing mode functions
+      function enableDrawing() {
+        const strokeColor = document.getElementById('strokeColor').value;
+        const brushWidth = parseInt(document.getElementById('brushWidth').value) || 5;
+        console.log('🎨 Enabling drawing mode with:', { strokeColor, brushWidth });
+        // Ensure brush is properly initialized
+        if (!canvas.freeDrawingBrush) {
+          canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
+        }
+        canvas.freeDrawingBrush.width = brushWidth;
+        canvas.freeDrawingBrush.color = strokeColor;
+        canvas.isDrawingMode = true;
+        console.log('🎨 Drawing mode enabled');
+        updateCanvasInfo();
+      }
+      function disableDrawing() {
+        console.log('🎨 Disabling drawing mode');
+        canvas.isDrawingMode = false;
+        updateCanvasInfo();
+      }
+      // Brush width slider functionality
+      const brushWidthSlider = document.getElementById('brushWidth');
+      const brushWidthValue = document.getElementById('brushWidthValue');
+      brushWidthSlider.addEventListener('input', function () {
+        const value = parseInt(this.value);
+        brushWidthValue.textContent = value + 'px';
+        console.log('🎨 Brush width changed to:', value, 'Canvas objects before:', canvas.getObjects().length);
+        // Update brush width in real-time
+        if (canvas.freeDrawingBrush) {
+          canvas.freeDrawingBrush.width = value;
+          console.log('🎨 Set brush width to:', value);
         }
+        console.log('🎨 Canvas objects after setting brush width:', canvas.getObjects().length);
+      });
+      // Corner radius slider functionality
+      const cornerRadiusSlider = document.getElementById('cornerRadius');
+      const cornerRadiusValue = document.getElementById('cornerRadiusValue');
+      cornerRadiusSlider.addEventListener('input', function () {
+        const value = parseInt(this.value);
+        cornerRadiusValue.textContent = value + 'px';
-        // Action functions
-        function deleteSelected() {
-            const activeObjects = canvas.getActiveObjects();
-            if (activeObjects.length) {
-                canvas.remove(...activeObjects);
-                canvas.discardActiveObject();
-                canvas.renderAll();
-                updateCanvasInfo();
+        // Update corner radius of selected object(s) in real-time
+        const activeObjects = canvas.getActiveObjects();
+        if (activeObjects.length > 0) {
+          activeObjects.forEach((obj) => {
+            if (obj.type === 'triangle' || obj.type === 'polygon' || obj.type === 'polyline') {
+              obj.set('cornerRadius', value);
+            } else if (obj.type === 'rect') {
+              // For rectangles, use rx and ry properties
+              obj.set('rx', value);
+              obj.set('ry', value);
             }
+          });
+          canvas.renderAll();
         }
+      });
-        function clearCanvas() {
-            canvas.getObjects()
-                .filter(obj => obj.name !== 'clip')
-                .forEach(obj => canvas.remove(obj));
-            canvas.discardActiveObject();
-            canvas.renderAll();
-            updateCanvasInfo();
+      // Test function to demonstrate corner radius on all shapes
+      function testCornerRadius() {
+        // Clear canvas first
+        clearCanvas();
+        // Create different shapes with corner radius
+        const cornerRadius = 15;
+        const fillColor = '#3b82f6';
+        const strokeColor = '#1d4ed8';
+        const strokeWidth = 2;
+        // Rounded Rectangle
+        const rect = new fabric.Rect({
+          left: 150,
+          top: 100,
+          width: 80,
+          height: 60,
+          fill: fillColor,
+          stroke: strokeColor,
+          strokeWidth: strokeWidth,
+          rx: cornerRadius,
+          ry: cornerRadius,
+        });
+        // Rounded Triangle
+        const triangle = new fabric.Triangle({
+          left: 150,
+          top: 150,
+          width: 80,
+          height: 80,
+          fill: fillColor,
+          stroke: strokeColor,
+          strokeWidth: strokeWidth,
+          cornerRadius: cornerRadius,
+        });
+        // Rounded Hexagon
+        const hexPoints = [];
+        const sides = 6;
+        const radius = 40;
+        for (let i = 0; i < sides; i++) {
+          const angle = (i * 2 * Math.PI) / sides - Math.PI / 2;
+          hexPoints.push({
+            x: radius * Math.cos(angle),
+            y: radius * Math.sin(angle),
+          });
         }
-        function exportJSON() {
-            const json = canvas.toJSON();
-            console.log('Canvas JSON:', json);
-            // Create downloadable JSON file
-            const dataStr = JSON.stringify(json, null, 2);
-            const dataBlob = new Blob([dataStr], {type: 'application/json'});
-            const url = URL.createObjectURL(dataBlob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = 'canvas-export.json';
-            link.click();
-            URL.revokeObjectURL(url);
+        const hexagon = new fabric.Polygon(hexPoints, {
+          left: 300,
+          top: 150,
+          fill: '#10b981',
+          stroke: '#047857',
+          strokeWidth: strokeWidth,
+          cornerRadius: cornerRadius,
+        });
+        // Rounded Pentagon
+        const pentPoints = [];
+        const pentSides = 5;
+        const pentRadius = 40;
+        for (let i = 0; i < pentSides; i++) {
+          const angle = (i * 2 * Math.PI) / pentSides - Math.PI / 2;
+          pentPoints.push({
+            x: pentRadius * Math.cos(angle),
+            y: pentRadius * Math.sin(angle),
+          });
         }
-        // Update canvas info
-        function updateCanvasInfo() {
-            const objects = canvas.getObjects().filter(obj => obj.name !== 'clip');
-            const activeObject = canvas.getActiveObject();
-            let selectedInfo = 'None';
-            let directionInfo = '';
-            if (activeObject) {
-                if (activeObject.type === 'activeSelection') {
-                    selectedInfo = `${activeObject._objects.length} objects`;
-                } else {
-                    selectedInfo = activeObject.type;
-                    // Show direction info for text objects
-                    if (activeObject.type === 'textbox' || activeObject.type === 'text' || activeObject.type === 'i-text') {
-                        const direction = activeObject.direction || 'ltr';
-                        const textAlign = activeObject.textAlign || 'left';
-                        directionInfo = `<br>Direction: ${direction.toUpperCase()}<br>Align: ${textAlign}`;
-                    }
-                }
-            }
-            document.getElementById('canvasInfo').innerHTML = `
-                Objects: ${objects.length}<br>
-                Selected: ${selectedInfo}${directionInfo}
-            `;
+        const pentagon = new fabric.Polygon(pentPoints, {
+          left: 450,
+          top: 150,
+          fill: '#f59e0b',
+          stroke: '#d97706',
+          strokeWidth: strokeWidth,
+          cornerRadius: cornerRadius,
+        });
+        // Rounded Star
+        const starPoints = [];
+        const outerRadius = 40;
+        const innerRadius = 20;
+        const starSides = 5;
+        for (let i = 0; i < starSides * 2; i++) {
+          const angle = (i * Math.PI) / starSides - Math.PI / 2;
+          const radius = i % 2 === 0 ? outerRadius : innerRadius;
+          starPoints.push({
+            x: radius * Math.cos(angle),
+            y: radius * Math.sin(angle),
+          });
         }
-        // Event listeners for canvas changes
-        canvas.on('object:added', updateCanvasInfo);
-        canvas.on('object:removed', updateCanvasInfo);
-        canvas.on('selection:created', updateCanvasInfo);
-        canvas.on('selection:updated', updateCanvasInfo);
-        canvas.on('selection:cleared', updateCanvasInfo);
+        const star = new fabric.Polygon(starPoints, {
+          left: 150,
+          top: 300,
+          fill: '#ef4444',
+          stroke: '#dc2626',
+          strokeWidth: strokeWidth,
+          cornerRadius: cornerRadius,
+        });
+        // Rounded Arrow
+        const arrowPoints = [
+          { x: 0, y: -20 },
+          { x: 30, y: -20 },
+          { x: 30, y: -40 },
+          { x: 60, y: 0 },
+          { x: 30, y: 40 },
+          { x: 30, y: 20 },
+          { x: 0, y: 20 },
+        ];
+        const arrow = new fabric.Polygon(arrowPoints, {
+          left: 350,
+          top: 300,
+          fill: '#8b5cf6',
+          stroke: '#7c3aed',
+          strokeWidth: strokeWidth,
+          cornerRadius: cornerRadius,
+        });
+        // Regular Line (lines don't support corner radius)
+        const line = new fabric.Line([50, 50, 150, 50], {
+          left: 450,
+          top: 300,
+          stroke: '#374151',
+          strokeWidth: 4,
+        });
-        // Initial info update
+        // Add all shapes to canvas
+        canvas.add(rect, triangle, hexagon, pentagon, star, arrow, line);
+        // Add text label
+        const label = new fabric.Textbox('Corner Radius Demo - All shapes support rounded corners like Canva!', {
+          left: 150,
+          top: 400,
+          fontSize: 16,
+          fontFamily: 'Arial',
+          fill: '#374151',
+          textAlign: 'center',
+          width: 400,
+        });
+        canvas.add(label);
+        canvas.renderAll();
         updateCanvasInfo();
-        // Log Fabric.js version
-        console.log('Fabric.js version:', fabric.version);
-        console.log('Canvas initialized with useOverlayEditing support');
+        console.log('🎨 Corner radius demo created! All shapes now support corner radius like Canva.');
+      }
-        // Test overlay editing on double-click
-        canvas.on('mouse:dblclick', function(options) {
-            if (options.target && options.target.type === 'textbox') {
-                console.log('Double-clicked textbox - overlay editing should activate');
+      // Rounded endpoints checkbox functionality
+      const roundedEndpointsCheckbox = document.getElementById('roundedEndpoints');
+      roundedEndpointsCheckbox.addEventListener('change', function () {
+        const isChecked = this.checked;
+        console.log('🔧 Rounded endpoints checkbox changed:', isChecked);
+        // Update strokeLineCap of selected line object(s) in real-time using Fabric.js built-in property
+        const activeObjects = canvas.getActiveObjects();
+        console.log('🔧 Active objects:', activeObjects.length, activeObjects.map(o => o.type));
+        if (activeObjects.length > 0) {
+          activeObjects.forEach((obj) => {
+            if (obj.type === 'line') {
+              const lineCap = isChecked ? 'round' : 'butt';
+              console.log('🔧 Setting strokeLineCap on line:', lineCap);
+              obj.set('strokeLineCap', lineCap);
+              console.log('🔧 Line strokeLineCap after set:', obj.strokeLineCap);
             }
-        });
+          });
+          canvas.renderAll();
+        }
+      });
+      // Log Fabric.js version
+      console.log('Fabric.js version:', fabric.version);
+      console.log('Canvas initialized with useOverlayEditing support');
+      console.log('🎨 Corner radius support added for all shapes (Triangle, Polygon, etc.)');
+      // Test overlay editing on double-click
+      canvas.on('mouse:dblclick', function (options) {
+        if (options.target && options.target.type === 'textbox') {
+          console.log(
+            'Double-clicked textbox - overlay editing should activate',
+          );
+        }
+      });
     </script>
-</body>
-</html>
+  </body>
+</html>