Update templates/index.html

templates/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CELL CLIPPER</title>
+    <title>CELL CLIPPER / V1.1</title>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono&display=swap');
 
@@ -38,7 +38,6 @@
             overflow-y: auto;
         }
 
-        /* Убрали h1, подняли всё вверх */
         .section { margin-bottom: 30px; }
 
         .section-title {
@@ -75,7 +74,6 @@
         }
         .label-row span:last-child { font-family: var(--font-mono); }
 
-        /* Стили для Select */
         select {
             width: 100%;
             padding: 8px;
@@ -182,9 +180,14 @@
     <div class="section">
         <span class="section-title">03 / Shape Transformation</span>
         <div class="control-group">
-            <div class="label-row"><span>Base Width</span> <span id="val-base">1.0</span></div>
+            <div class="label-row"><span>Base Scale</span> <span id="val-base">1.0</span></div>
             <input type="range" id="base" min="0.1" max="2.0" step="0.05" value="1.0">
         </div>
+
+        <div class="control-group">
+            <div class="label-row"><span>Rotation</span> <span id="val-rotation">0</span></div>
+            <input type="range" id="rotation" min="-90" max="90" step="1" value="0">
+        </div>
         
         <div class="control-group">
             <div class="label-row"><span>Growth Algorithm</span></div>
@@ -231,6 +234,7 @@
         shift: document.getElementById('shift'),
         wave: document.getElementById('wave'),
         base: document.getElementById('base'),
+        rotation: document.getElementById('rotation'),
         growth: document.getElementById('growth'),
         growth_type: document.getElementById('growth_type')
     };
@@ -245,7 +249,7 @@
             const svgEl = xmlDoc.querySelector('svg');
             if (svgEl) {
                 viewBox = svgEl.getAttribute('viewBox') || `0 0 ${svgEl.getAttribute('width') || 100} ${svgEl.getAttribute('height') || 100}`;
-                symbolContent = `<g fill="black">${svgEl.innerHTML}</g>`;
+                symbolContent = svgEl.innerHTML;
                 dropZone.innerText = file.name;
                 update();
             }
@@ -269,9 +273,13 @@
         const shiftStagger = getParam('shift');
         const shiftWave = getParam('wave');
         const baseScale = getParam('base');
+        const rotation = getParam('rotation');
         const growth = getParam('growth');
         const growthType = getParam('growth_type');
 
+        const vb = viewBox.split(' ').map(Number);
+        const vW = vb[2], vH = vb[3];
+
         const canvasSize = 1000;
         const step = canvasSize / density;
         const cellWMax = step * (1.0 - gapX);
@@ -284,10 +292,9 @@
             let rowWave = Math.sin(r * 0.5) * shiftWave * step;
             let rowShift = (r * shiftStagger * step) + rowWave;
             for (let c = 0; c < density; c++) {
-                let cx = (c * step + rowShift) % canvasSize;
-                let cy = r * step;
+                let cx_grid = (c * step + rowShift) % canvasSize;
+                let cy_grid = r * step;
                 
-                // Выбор алгоритма
                 let waveNorm = 0;
                 if (growthType === 'sine') {
                     waveNorm = (Math.sin(c * 0.3 + r * 0.3) + 1) / 2;
@@ -299,32 +306,28 @@
                 }
                 
                 let modW = Math.max(0, 1.0 - (waveNorm * growth));
-                
                 let contentW = cellWMax * baseScale * modW;
                 let contentH = cellHMax * baseScale;
-                let contentX = (cellWMax - contentW) / 2;
-                let contentY = (cellHMax - contentH) / 2;
 
-                body += `
-                <g transform="translate(${(cx + offsetXBase).toFixed(2)}, ${(cy + offsetYBase).toFixed(2)})" clip-path="url(#cp)">
-                    <use href="#s" x="${contentX.toFixed(2)}" y="${contentY.toFixed(2)}" 
-                         width="${contentW.toFixed(2)}" height="${contentH.toFixed(2)}" />
+                // Центр ячейки
+                let centerX = cx_grid + offsetXBase + cellWMax / 2;
+                let centerY = cy_grid + offsetYBase + cellHMax / 2;
+
+                let sX = (contentW / vW).toFixed(4);
+                let sY = (contentH / vH).toFixed(4);
+
+                // Оптимизированная трансформа для Figma: Translate -> Rotate -> Scale -> Translate back to object origin
+                body += `<g transform="translate(${centerX.toFixed(2)} ${centerY.toFixed(2)}) rotate(${rotation}) scale(${sX} ${sY}) translate(${-vW/2} ${-vH/2})">
+                    ${symbolContent}
                 </g>`;
             }
         }
 
-        return `<svg id="main-svg" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">
-            <defs>
-                <clipPath id="cp"><rect width="${cellWMax.toFixed(2)}" height="${cellHMax.toFixed(2)}" /></clipPath>
-                <symbol id="s" viewBox="${viewBox}" preserveAspectRatio="none">${symbolContent}</symbol>
-            </defs>
-            ${body}
-        </svg>`;
+        return `<svg id="main-svg" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">${body}</svg>`;
     }
 
     function update() { svgContainer.innerHTML = generateSVG(); }
     
-    // Навешиваем обработчики на все контролы
     Object.values(controls).forEach(input => {
         input.addEventListener('input', update);
         if(input.tagName === 'SELECT') input.addEventListener('change', update);
@@ -335,7 +338,7 @@
         const blob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
         const url = URL.createObjectURL(blob);
         const link = document.createElement('a');
-        link.href = url; link.download = 'cell-clipper-export.svg'; link.click();
+        link.href = url; link.download = 'cell-clipper-clean.svg'; link.click();
     };
     update();
 </script>