Update index.html

index.html

@@ -384,12 +384,37 @@
                     <div>
                         <div class="flex justify-between items-center mb-1">
                             <label class="block text-sm font-bold text-slate-700">5. 自定義圖片</label>
+                            
+                            <!-- Toggle for Image Fit/Fill -->
+                            <div v-if="selectedCellIndices.size > 0" class="flex items-center gap-1">
+                                <button 
+                                    @click="toggleImageScale" 
+                                    class="text-xs px-2 py-1 rounded border transition-all"
+                                    :class="currentImageScale === 'fill' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-500 border-slate-300 hover:bg-slate-50'"
+                                    title="切換圖片填充模式：適中 / 滿版"
+                                >
+                                    <i class="fa-solid" :class="currentImageScale === 'fill' ? 'fa-expand' : 'fa-compress'"></i>
+                                    {{ currentImageScale === 'fill' ? '滿版' : '適中' }}
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="flex gap-2 mb-2">
                             <button 
-                                @click="triggerImageUpload"
-                                class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded hover:bg-indigo-200 font-bold flex items-center gap-1"
+                                @click="triggerImageUpload('single')"
+                                class="flex-1 text-xs bg-indigo-100 text-indigo-700 px-2 py-2 rounded hover:bg-indigo-200 font-bold flex items-center justify-center gap-1"
                             >
-                                <svg viewBox="0 0 512 512" class="w-3 h-3 fill-current mr-1"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48z"/></svg>
-                                上傳圖片
+                                <svg viewBox="0 0 512 512" class="w-3 h-3 fill-current"><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48z"/></svg>
+                                單圖上傳
+                            </button>
+                            <!-- Puzzle Upload Button (Visible only when multiple cells selected) -->
+                            <button 
+                                v-if="selectedCellIndices.size > 1"
+                                @click="triggerImageUpload('puzzle')"
+                                class="flex-1 text-xs bg-purple-100 text-purple-700 px-2 py-2 rounded hover:bg-purple-200 font-bold flex items-center justify-center gap-1"
+                            >
+                                <i class="fa-solid fa-puzzle-piece"></i>
+                                拼圖上傳 (自動分割)
                             </button>
                             <input type="file" ref="imageUploadInput" class="hidden" accept="image/*" @change="handleImageUpload">
                         </div>
@@ -585,7 +610,7 @@
                                         <span v-if="cell.type === 'icon'" class="text-2xl leading-none select-none">{{ icons[cell.content] }}</span>
 
                                         <!-- Image Renderer -->
-                                        <img v-if="cell.type === 'image'" :src="cell.content" class="w-4/5 h-4/5 object-contain">
+                                        <img v-if="cell.type === 'image'" :src="cell.content" class="w-full h-full" :style="{ objectFit: cell.imageScale === 'fill' ? 'cover' : 'contain', width: cell.imageScale === 'fill' ? '100%' : '80%', height: cell.imageScale === 'fill' ? '100%' : '80%' }">
                                     </div>
                                 </div>
                             </div>
@@ -645,7 +670,8 @@
                                     <span v-if="cell.type === 'icon'" class="text-5xl md:text-7xl leading-none select-none">{{ icons[cell.content] }}</span>
 
                                     <!-- Image Renderer -->
-                                    <img v-if="cell.type === 'image'" :src="cell.content" class="w-4/5 h-4/5 object-contain">
+                                    <!-- Dynamic Style for Fit/Fill -->
+                                    <img v-if="cell.type === 'image'" :src="cell.content" class="w-full h-full" :style="{ objectFit: cell.imageScale === 'fill' ? 'cover' : 'contain', width: cell.imageScale === 'fill' ? '100%' : '80%', height: cell.imageScale === 'fill' ? '100%' : '80%' }">
                                 </div>
                             </div>
                         </div>
@@ -733,7 +759,8 @@
                 content: '',
                 rotation: 0,
                 color: '#1e293b', // Default text color
-                bgColor: '#ffffff' // Default bg color
+                bgColor: '#ffffff', // Default bg color
+                imageScale: 'fit' // 'fit' (contain, with padding) or 'fill' (cover, no padding)
             }));
 
             const pages = ref([
@@ -778,6 +805,18 @@
             const tempImageSrc = ref('');
             const customImages = ref([]); // Stores base64 strings
             let cropperInstance = null;
+            
+            // Puzzle Upload State
+            const isPuzzleUpload = ref(false);
+            const puzzleConfig = ref({ rows: 1, cols: 1, targetAspectRatio: 1 });
+
+            // Image Scale State (for UI toggle)
+            const currentImageScale = computed(() => {
+                if (selectedCellIndices.value.size === 0) return 'fit';
+                // Check first selected cell
+                const idx = [...selectedCellIndices.value][0];
+                return activePageCells.value[idx].imageScale || 'fit';
+            });
 
             // --- Auto-Save Key ---
             const AUTOSAVE_KEY = 'magic_origami_autosave_v1';
@@ -900,7 +939,7 @@
                 }
             };
 
-            const setCell = (pageIndex, row, col, type, content, rotation = 0, color = '#1e293b', bgColor='#ffffff') => {
+            const setCell = (pageIndex, row, col, type, content, rotation = 0, color = '#1e293b', bgColor='#ffffff', imageScale='fit') => {
                 if (row > currentGrid.value.rows || col > currentGrid.value.cols) return;
                 const cells = pages.value[pageIndex].cells;
                 const index = (row - 1) * currentGrid.value.cols + (col - 1);
@@ -910,6 +949,7 @@
                     cells[index].rotation = rotation;
                     cells[index].color = color;
                     cells[index].bgColor = bgColor;
+                    cells[index].imageScale = imageScale;
                 }
             };
 
@@ -927,9 +967,17 @@
                 });
             };
 
+            const toggleImageScale = () => {
+                const newScale = currentImageScale.value === 'fit' ? 'fill' : 'fit';
+                selectedCellIndices.value.forEach(index => {
+                    activePageCells.value[index].imageScale = newScale;
+                });
+            };
+
             // --- Image Upload Logic ---
 
-            const triggerImageUpload = () => {
+            const triggerImageUpload = (mode = 'single') => {
+                isPuzzleUpload.value = (mode === 'puzzle');
                 imageUploadInput.value.click();
             };
 
@@ -943,15 +991,53 @@
                     showCropper.value = true;
                     event.target.value = '';
                     
+                    // Logic for Puzzle Mode aspect ratio
+                    let aspectRatio = 1; // default square
+                    if (isPuzzleUpload.value && selectedCellIndices.value.size > 1) {
+                        // Calculate bounds
+                        const indices = [...selectedCellIndices.value];
+                        const cols = currentGrid.value.cols;
+                        const rows = currentGrid.value.rows;
+                        
+                        // Map to Row/Col coords
+                        const coords = indices.map(idx => ({ r: Math.floor(idx / cols), c: idx % cols }));
+                        const minR = Math.min(...coords.map(p => p.r));
+                        const maxR = Math.max(...coords.map(p => p.r));
+                        const minC = Math.min(...coords.map(p => p.c));
+                        const maxC = Math.max(...coords.map(p => p.c));
+                        
+                        const selRows = maxR - minR + 1;
+                        const selCols = maxC - minC + 1;
+                        
+                        // Calculate A4-based aspect ratio
+                        // A4 W=210, H=297.
+                        // CellW = 210/cols, CellH = 297/rows
+                        // BlockW = selCols * (210/cols)
+                        // BlockH = selRows * (297/rows)
+                        const blockW = selCols * (210 / cols);
+                        const blockH = selRows * (297 / rows);
+                        
+                        aspectRatio = blockW / blockH;
+                        puzzleConfig.value = { rows: selRows, cols: selCols, minR, minC, targetAspectRatio: aspectRatio };
+                    }
+
                     nextTick(() => {
                         if (cropperInstance) cropperInstance.destroy();
-                        cropperInstance = new Cropper(cropperImgRef.value, {
-                            aspectRatio: 1,
+                        
+                        const options = {
                             viewMode: 1,
                             dragMode: 'move',
                             autoCropArea: 0.9,
                             background: false
-                        });
+                        };
+
+                        if (isPuzzleUpload.value) {
+                            options.aspectRatio = puzzleConfig.value.targetAspectRatio;
+                        } else {
+                            options.aspectRatio = 1; // Default square for single cell
+                        }
+
+                        cropperInstance = new Cropper(cropperImgRef.value, options);
                     });
                 };
                 reader.readAsDataURL(file);
@@ -969,13 +1055,67 @@
             const confirmCrop = () => {
                 if (!cropperInstance) return;
 
-                const canvas = cropperInstance.getCroppedCanvas({
-                    width: 300, 
-                    height: 300
-                });
-
-                const base64 = canvas.toDataURL('image/jpeg', 0.85); 
-                customImages.value.push(base64);
+                if (isPuzzleUpload.value) {
+                    // --- Puzzle Mode Logic ---
+                    const canvas = cropperInstance.getCroppedCanvas();
+                    const ctx = canvas.getContext('2d');
+                    
+                    const imgW = canvas.width;
+                    const imgH = canvas.height;
+                    const pRows = puzzleConfig.value.rows;
+                    const pCols = puzzleConfig.value.cols;
+                    const pieceW = imgW / pCols;
+                    const pieceH = imgH / pRows;
+
+                    // Iterate through selected cells and assign pieces
+                    const indices = [...selectedCellIndices.value];
+                    const gridCols = currentGrid.value.cols;
+
+                    indices.forEach(idx => {
+                        const r = Math.floor(idx / gridCols);
+                        const c = idx % gridCols;
+                        
+                        // Calculate relative position in the selection block
+                        const relR = r - puzzleConfig.value.minR;
+                        const relC = c - puzzleConfig.value.minC;
+
+                        // Only process if within valid relative bounds (simple check)
+                        if (relR >= 0 && relR < pRows && relC >= 0 && relC < pCols) {
+                            // Create a temporary canvas for this piece
+                            const pCanvas = document.createElement('canvas');
+                            pCanvas.width = pieceW;
+                            pCanvas.height = pieceH;
+                            const pCtx = pCanvas.getContext('2d');
+                            
+                            pCtx.drawImage(canvas, 
+                                relC * pieceW, relR * pieceH, pieceW, pieceH, // Source
+                                0, 0, pieceW, pieceH // Dest
+                            );
+                            
+                            const pieceData = pCanvas.toDataURL('image/jpeg', 0.9);
+                            
+                            // Update cell
+                            const cell = activePageCells.value[idx];
+                            cell.type = 'image';
+                            cell.content = pieceData;
+                            cell.imageScale = 'fill'; // Force fill for puzzle
+                        }
+                    });
+                    
+                    // Save to custom images list (store the whole one or pieces? currently just pieces in cells)
+                    // If we want to add to "Custom Images" panel, maybe add the full one? 
+                    // For simplicity, we just apply to grid.
+                    
+                } else {
+                    // --- Single Mode Logic ---
+                    const canvas = cropperInstance.getCroppedCanvas({
+                        width: 300, 
+                        height: 300
+                    });
+                    const base64 = canvas.toDataURL('image/jpeg', 0.85); 
+                    customImages.value.push(base64);
+                    applyCustomImageToCell(base64);
+                }
                 
                 cancelCrop();
             };
@@ -985,6 +1125,8 @@
                     const cell = activePageCells.value[index];
                     cell.type = 'image';
                     cell.content = imgSrc;
+                    // Keep existing scale preference or default to fit for manual apply
+                    // cell.imageScale = 'fit'; 
                 });
                 inputBuffer.value = '';
                 batchInputBuffer.value = '';
@@ -1449,7 +1591,11 @@
                         const iconChar = icons[cell.content];
                         contentHtml = `<span class="export-text" data-color="${cell.color}" data-size="50" style="font-size: 50px; line-height: 1; user-select: none;">${iconChar}</span>`;
                     } else if (cell.type === 'image') {
-                        contentHtml = `<img src="${cell.content}" style="width: 80%; height: 80%; object-fit: contain;">`;
+                        // Check if image scale is 'fill' (Full Bleed)
+                        const imgStyle = cell.imageScale === 'fill' 
+                            ? 'width: 100%; height: 100%; object-fit: cover;' 
+                            : 'width: 80%; height: 80%; object-fit: contain;';
+                        contentHtml = `<img src="${cell.content}" style="${imgStyle}">`;
                     }
 
                     // New: Inner Highlight for PDF Export
@@ -1618,15 +1764,27 @@
                                     });
                                 } else if (cell.type === 'image') {
                                     // Image
-                                    // Calculate image size to fit within cell (80% padding like HTML)
-                                    const padW = cellW * 0.1;
-                                    const padH = cellH * 0.1;
+                                    let imgX = x, imgY = y, imgW = cellW, imgH = cellH;
+                                    
+                                    // Check fill vs fit
+                                    if (cell.imageScale === 'fill') {
+                                        // Full Bleed: x, y, w, h are full cell
+                                    } else {
+                                        // Fit: 80% with padding
+                                        const padW = cellW * 0.1;
+                                        const padH = cellH * 0.1;
+                                        imgX += padW;
+                                        imgY += padH;
+                                        imgW *= 0.8;
+                                        imgH *= 0.8;
+                                    }
+
                                     slide.addImage({
                                         data: cell.content,
-                                        x: x + padW,
-                                        y: y + padH,
-                                        w: cellW * 0.8,
-                                        h: cellH * 0.8,
+                                        x: imgX,
+                                        y: imgY,
+                                        w: imgW,
+                                        h: imgH,
                                         rotate: cell.rotation
                                     });
                                 }
@@ -1756,7 +1914,10 @@
                 toggleMultiSelectMode,
                 clearSelection,
                 getSelectionOrder,
-                selectedIndicesArray
+                selectedIndicesArray,
+                // Puzzle
+                toggleImageScale,
+                currentImageScale
             };
         }
     }).mount('#app');