diff --git a/index.html b/index.html index 4be20ba..0c0e9cf 100644 --- a/index.html +++ b/index.html @@ -90,6 +90,7 @@ + diff --git a/main.js b/main.js index e96e7d7..985eddb 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,5 @@ -const { app, BrowserWindow, dialog, ipcMain } = require('electron'); +const { app, BrowserWindow, dialog, ipcMain, Menu } = require('electron'); +const fs = require('fs'); const { autoUpdater } = require('electron-updater'); const path = require('path'); @@ -17,6 +18,22 @@ function createWindow() { mainWindow.maximize(); mainWindow.loadFile('index.html'); + const menuTemplate = [ + { + label: 'File', + submenu: [ + { label: 'Save Project', accelerator: 'CmdOrCtrl+S', click: () => mainWindow.webContents.send('menu-save-project') }, + { label: 'Open Project', accelerator: 'CmdOrCtrl+O', click: () => mainWindow.webContents.send('menu-open-project') }, + { type: 'separator' }, + { role: 'quit' } + ] + }, + { role: 'editMenu' }, + { role: 'viewMenu' }, + { role: 'windowMenu' } + ]; + Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplate)); + // Check for updates after window is ready mainWindow.webContents.once('did-finish-load', () => { console.log('Window loaded, checking for updates...'); @@ -107,6 +124,24 @@ ipcMain.handle('get-app-version', () => { return app.getVersion(); }); +ipcMain.handle('save-project-dialog', async () => { + const { filePath } = await dialog.showSaveDialog(mainWindow, { + title: 'Save Project', defaultPath: 'project.trp', + filters: [{ name: 'Texture Ripper Project', extensions: ['trp'] }] + }); + return filePath || null; +}); + +ipcMain.handle('open-project-dialog', async () => { + const { filePaths } = await dialog.showOpenDialog(mainWindow, { + title: 'Open Project', + filters: [{ name: 'Texture Ripper Project', extensions: ['trp'] }], + properties: ['openFile'] + }); + if (filePaths && filePaths.length > 0) return filePaths[0]; + return null; +}); + app.on('ready', createWindow); app.on('window-all-closed', () => { diff --git a/scripts/feedbackManager.js b/scripts/feedbackManager.js index f771f46..24231f9 100644 --- a/scripts/feedbackManager.js +++ b/scripts/feedbackManager.js @@ -1,5 +1,6 @@ const FeedbackManager = (() => { let feedbackEl = null; + let spinnerOverlay = null; function init() { if (!feedbackEl) { @@ -15,7 +16,7 @@ const FeedbackManager = (() => { background: 'rgba(0,0,0,0.85)', color: '#fff', borderRadius: '6px', - zIndex: 9999, + zIndex: 10000, fontFamily: 'sans-serif', fontSize: '16px', pointerEvents: 'none', @@ -29,6 +30,62 @@ const FeedbackManager = (() => { } } + function initSpinner() { + if (!spinnerOverlay) { + spinnerOverlay = document.createElement('div'); + Object.assign(spinnerOverlay.style, { + position: 'fixed', + top: '0', left: '0', width: '100%', height: '100%', + background: 'rgba(0,0,0,0.5)', + display: 'none', + justifyContent: 'center', + alignItems: 'center', + zIndex: 9999 + }); + + const box = document.createElement('div'); + Object.assign(box.style, { + background: 'rgba(0,0,0,0.85)', + borderRadius: '8px', + padding: '24px 32px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '12px' + }); + + const spinner = document.createElement('div'); + Object.assign(spinner.style, { + width: '32px', height: '32px', + border: '3px solid rgba(255,255,255,0.2)', + borderTop: '3px solid #fff', + borderRadius: '50%', + animation: 'feedback-spin 0.8s linear infinite' + }); + + const label = document.createElement('div'); + label.className = 'spinner-label'; + Object.assign(label.style, { + color: '#fff', + fontFamily: 'sans-serif', + fontSize: '14px' + }); + + // Add keyframes + if (!document.getElementById('feedback-spin-style')) { + const style = document.createElement('style'); + style.id = 'feedback-spin-style'; + style.textContent = '@keyframes feedback-spin { to { transform: rotate(360deg); } }'; + document.head.appendChild(style); + } + + box.appendChild(spinner); + box.appendChild(label); + spinnerOverlay.appendChild(box); + document.body.appendChild(spinnerOverlay); + } + } + function show(message, options = {}) { init(); @@ -47,5 +104,17 @@ const FeedbackManager = (() => { }, duration); } - return { show }; + function showSpinner(message = 'Please wait...') { + initSpinner(); + spinnerOverlay.querySelector('.spinner-label').textContent = message; + spinnerOverlay.style.display = 'flex'; + } + + function hideSpinner() { + if (spinnerOverlay) { + spinnerOverlay.style.display = 'none'; + } + } + + return { show, showSpinner, hideSpinner }; })(); diff --git a/scripts/leftPanelManager.js b/scripts/leftPanelManager.js index 97e6537..10390a1 100644 --- a/scripts/leftPanelManager.js +++ b/scripts/leftPanelManager.js @@ -517,6 +517,7 @@ const LeftPanelManager = { PanZoomManager.initPanning(stage); PanZoomManager.initZooming(stage); + // Save/Load API window.leftPanel = { autoPackImages: () => { if (bgImages.length === 0) return; @@ -605,6 +606,105 @@ const LeftPanelManager = { bgLayer.batchDraw(); FeedbackManager.show('Arranged ' + bgImages.length + ' image(s)'); + }, + + getState: () => { + const images = bgImages.map(img => ({ + dataURL: SaveManager.imageToDataURL(img, 'image/jpeg', 0.92), + x: img.x(), + y: img.y(), + width: img.width(), + height: img.height(), + scaleX: img.scaleX(), + scaleY: img.scaleY(), + rotation: img.rotation() + })); + + const polygons = []; + polygonLayer.find('.group').forEach(group => { + const verts = group.vertices.map(v => ({ x: v.x, y: v.y })); + const mids = group.midpoints.map(m => ({ x: m.x, y: m.y, locked: m.locked })); + polygons.push({ + id: group._id, + x: group.x(), + y: group.y(), + vertices: verts, + midpoints: mids + }); + }); + + return { images, polygons }; + }, + + loadState: (state) => { + // Clear existing + bgImages.forEach(img => img.destroy()); + bgImages.length = 0; + polygonLayer.find('.group').forEach(g => g.destroy()); + bgLayer.batchDraw(); + polygonLayer.batchDraw(); + + // Restore images + if (state.images) { + state.images.forEach(imgData => { + const img = new Image(); + img.onload = () => { + const konvaImg = new Konva.Image({ + x: imgData.x, + y: imgData.y, + image: img, + width: imgData.width, + height: imgData.height, + scaleX: imgData.scaleX || 1, + scaleY: imgData.scaleY || 1, + rotation: imgData.rotation || 0, + draggable: !imagesLocked + }); + bgLayer.add(konvaImg); + bgImages.push(konvaImg); + bgLayer.batchDraw(); + }; + img.src = imgData.dataURL; + }); + } + + // Restore polygons + if (state.polygons) { + state.polygons.forEach(polyData => { + const group = PolygonManager.createPolygonGroup( + stage, polygonLayer, polyData.vertices, dirtyPolygons, true + ); + group.position({ x: polyData.x || 0, y: polyData.y || 0 }); + + // Restore midpoints + if (polyData.midpoints) { + polyData.midpoints.forEach((m, i) => { + if (group.midpoints[i]) { + group.midpoints[i].x = m.x; + group.midpoints[i].y = m.y; + group.midpoints[i].locked = m.locked || false; + } + }); + // Update visual midpoint positions + group.find('.midpoint').forEach((mp, i) => { + if (group.midpoints[i]) { + mp.position({ x: group.midpoints[i].x, y: group.midpoints[i].y }); + } + }); + // Redraw polygon and grid with restored midpoints + PolygonManager.drawCurvedPolygon(group, group.vertices, group.midpoints); + GridManager.drawGrid(group, group.vertices, group.midpoints); + const updatedPoints = PolygonManager.computeDragSurfacePoints(group.vertices, group.midpoints); + PolygonManager.updateDragSurface(group, updatedPoints); + } + + // Reassign ID if saved + if (polyData.id) group._id = polyData.id; + + dirtyPolygons.add(group._id); + }); + polygonLayer.batchDraw(); + } } }; diff --git a/scripts/main.js b/scripts/main.js index 8134773..4079efc 100644 --- a/scripts/main.js +++ b/scripts/main.js @@ -61,6 +61,10 @@ document.addEventListener('DOMContentLoaded', () => { if (window.leftPanel) UndoManager.redo(); }); + // Save/Load project functions + window.saveProject = () => SaveManager.save(stageLeft, stageRight); + window.loadProject = () => SaveManager.load(stageLeft, stageRight); + // Export button document.getElementById('exportRight').addEventListener('click', () => { const exportWidth = parseInt(document.getElementById('rightWidth').value); @@ -161,6 +165,13 @@ document.addEventListener('DOMContentLoaded', () => { document.getElementById('requestFeature').addEventListener('click', () => { openExternalURL('https://github.com/raycastly/texture-ripper/issues/new?template=feature_request.yml'); }); + + // Listen for Electron menu events (File > Save/Open) + if (isElectron()) { + const { ipcRenderer } = require('electron'); + ipcRenderer.on('menu-save-project', () => window.saveProject()); + ipcRenderer.on('menu-open-project', () => window.loadProject()); + } }); diff --git a/scripts/polygonManager.js b/scripts/polygonManager.js index a05c1d5..bf06438 100644 --- a/scripts/polygonManager.js +++ b/scripts/polygonManager.js @@ -1,6 +1,25 @@ // ==================== POLYGON MANAGEMENT ==================== const PolygonManager = { // Unified polygon creation function + computeDragSurfacePoints: (vertices, midpoints) => { + const points = []; + for (let i = 0; i < vertices.length; i++) { + const nextIdx = (i + 1) % vertices.length; + const P0 = vertices[i]; + const P2 = vertices[nextIdx]; + const M = midpoints[i]; + const numSamples = 10; + for (let j = 0; j <= numSamples; j++) { + const t = j / numSamples; + const mt = 1 - t; + const x = mt*mt*P0.x + 2*mt*t*M.x + t*t*P2.x; + const y = mt*mt*P0.y + 2*mt*t*M.y + t*t*P2.y; + points.push(x, y); + } + } + return points; + }, + createPolygonGroup: (stage, layer, points = null, dirtyPolygons = null, skipReorder = false) => { const group = new Konva.Group({ draggable: true, diff --git a/scripts/rightPanelManager.js b/scripts/rightPanelManager.js index bf9aef0..cc44af7 100644 --- a/scripts/rightPanelManager.js +++ b/scripts/rightPanelManager.js @@ -495,6 +495,70 @@ const RightPanelManager = { } }, + getState: () => { + const textures = []; + Object.keys(tiedRects).forEach(groupId => { + const img = tiedRects[groupId]; + if (img) { + textures.push({ + groupId: groupId, + dataURL: SaveManager.imageToDataURL(img), + x: img.x(), + y: img.y(), + width: img.width(), + height: img.height(), + scaleX: img.scaleX(), + scaleY: img.scaleY(), + rotation: img.rotation() + }); + } + }); + return { textures }; + }, + + loadState: (state) => { + // Clear existing textures + Object.keys(tiedRects).forEach(id => { + if (tiedRects[id]) tiedRects[id].destroy(); + delete tiedRects[id]; + }); + imageLayer.batchDraw(); + + console.log(`Loading ${state.textures ? state.textures.length : 0} textures`); + if (state.textures) { + state.textures.forEach((texData, i) => { + console.log(`Texture ${i}: groupId=${texData.groupId}, hasDataURL=${!!texData.dataURL}, dataURLLen=${texData.dataURL ? texData.dataURL.length : 0}, w=${texData.width}, h=${texData.height}`); + const img = new Image(); + img.onload = () => { + console.log(`Texture ${i} image loaded: ${img.naturalWidth}x${img.naturalHeight}`); + const konvaImg = new Konva.Image({ + x: texData.x, + y: texData.y, + image: img, + width: texData.width || img.naturalWidth, + height: texData.height || img.naturalHeight, + scaleX: texData.scaleX || 1, + scaleY: texData.scaleY || 1, + rotation: texData.rotation || 0, + id: `rect_${texData.groupId}`, + draggable: true + }); + + konvaImg.on('dragmove', snapping.handleDragging); + konvaImg.on('dragend', snapping.handleDragEnd); + + imageLayer.add(konvaImg); + tiedRects[texData.groupId] = konvaImg; + imageLayer.batchDraw(); + }; + img.onerror = (err) => { + console.error(`Texture ${i} failed to load:`, err); + }; + img.src = texData.dataURL; + }); + } + }, + updateBackground: () => { const width = parseInt(document.getElementById('rightWidth').value); const height = parseInt(document.getElementById('rightHeight').value); diff --git a/scripts/saveManager.js b/scripts/saveManager.js new file mode 100644 index 0000000..190f2dd --- /dev/null +++ b/scripts/saveManager.js @@ -0,0 +1,117 @@ +// ==================== SAVE/LOAD MANAGER ==================== +const SaveManager = { + imageToDataURL(konvaImg, format = 'image/png', quality = 0.92) { + const canvas = document.createElement('canvas'); + const htmlImg = konvaImg.image(); + canvas.width = htmlImg.naturalWidth || htmlImg.width; + canvas.height = htmlImg.naturalHeight || htmlImg.height; + const ctx = canvas.getContext('2d'); + ctx.drawImage(htmlImg, 0, 0); + return canvas.toDataURL(format, quality); + }, + + _buildState(stageLeft, stageRight) { + return { + version: 1, + atlas: { + width: parseInt(document.getElementById('rightWidth').value), + height: parseInt(document.getElementById('rightHeight').value), + transparent: document.getElementById('exportTransparent').checked + }, + leftPanel: window.leftPanel ? window.leftPanel.getState() : { images: [], polygons: [] }, + rightPanel: window.rightPanel && window.rightPanel.getState ? window.rightPanel.getState() : { textures: [] } + }; + }, + + save(stageLeft, stageRight) { + if (isElectron()) { + const { ipcRenderer } = require('electron'); + const fs = require('fs'); + ipcRenderer.invoke('save-project-dialog').then(filePath => { + if (filePath) { + FeedbackManager.showSpinner('Saving project...'); + // Defer to let the spinner render before heavy sync work + setTimeout(() => { + try { + const state = this._buildState(stageLeft, stageRight); + const json = JSON.stringify(state); + fs.writeFileSync(filePath, json, 'utf8'); + FeedbackManager.hideSpinner(); + FeedbackManager.show('Project saved!'); + } catch (err) { + FeedbackManager.hideSpinner(); + FeedbackManager.show('Failed to save project', { bgColor: 'rgba(180,0,0,0.85)' }); + console.error('Save error:', err); + } + }, 50); + } + }); + } else { + const json = JSON.stringify(this._buildState(stageLeft, stageRight)); + const blob = new Blob([json], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; a.download = 'project.trp'; a.click(); + URL.revokeObjectURL(url); + FeedbackManager.show('Project saved!'); + } + }, + + load(stageLeft, stageRight) { + const self = this; + if (isElectron()) { + const { ipcRenderer } = require('electron'); + const fs = require('fs'); + ipcRenderer.invoke('open-project-dialog').then(filePath => { + if (filePath) { + FeedbackManager.showSpinner('Loading project...'); + setTimeout(() => { + try { + const json = fs.readFileSync(filePath, 'utf8'); + self.deserialize(JSON.parse(json), stageLeft, stageRight); + FeedbackManager.hideSpinner(); + FeedbackManager.show('Project loaded!'); + } catch (e) { + FeedbackManager.hideSpinner(); + FeedbackManager.show('Failed to load project', { bgColor: 'rgba(180,0,0,0.85)' }); + console.error('Load error:', e); + } + }, 50); + } + }); + } else { + const input = document.createElement('input'); + input.type = 'file'; input.accept = '.trp,.json'; + input.onchange = (e) => { + const file = e.target.files[0]; if (!file) return; + FeedbackManager.showSpinner('Loading project...'); + const reader = new FileReader(); + reader.onload = (evt) => { + try { + self.deserialize(JSON.parse(evt.target.result), stageLeft, stageRight); + FeedbackManager.hideSpinner(); + FeedbackManager.show('Project loaded!'); + } catch (e) { + FeedbackManager.hideSpinner(); + FeedbackManager.show('Failed to load project', { bgColor: 'rgba(180,0,0,0.85)' }); + console.error('Load error:', e); + } + }; + reader.readAsText(file); + }; + input.click(); + } + }, + + deserialize(state, stageLeft, stageRight) { + if (state.version !== 1) { FeedbackManager.show('Unsupported project file version'); return; } + document.getElementById('rightWidth').value = state.atlas.width; + document.getElementById('rightHeight').value = state.atlas.height; + document.getElementById('exportTransparent').checked = state.atlas.transparent; + stageRight.bgRect.width(state.atlas.width); + stageRight.bgRect.height(state.atlas.height); + RightPanelManager.toggleTransparency(stageRight, state.atlas.transparent); + if (window.leftPanel && window.leftPanel.loadState) window.leftPanel.loadState(state.leftPanel); + if (window.rightPanel && window.rightPanel.loadState) window.rightPanel.loadState(state.rightPanel); + } +}; diff --git a/scripts/shortcutsManager.js b/scripts/shortcutsManager.js index 4d39e99..4f8840f 100644 --- a/scripts/shortcutsManager.js +++ b/scripts/shortcutsManager.js @@ -16,6 +16,18 @@ document.addEventListener('keydown', (e) => { return; } + // Save/Load project + if ((e.ctrlKey || e.metaKey) && e.code === 'KeyS') { + e.preventDefault(); + if (window.saveProject) window.saveProject(); + return; + } + if ((e.ctrlKey || e.metaKey) && e.code === 'KeyO') { + e.preventDefault(); + if (window.loadProject) window.loadProject(); + return; + } + // Drawing mode toggle if (e.code === CONFIG.SHORTCUTS.toggleDrawingMode) { document.getElementById('toggleDrawingMode').click();