Compare commits
9 Commits
293bed9135
...
e42a113c2d
| Author | SHA1 | Date | |
|---|---|---|---|
| e42a113c2d | |||
| 22390acfa6 | |||
| a773b51ece | |||
| 49b67dd10a | |||
| 5a7f7032ef | |||
| 3e849c0286 | |||
| f738bbdd73 | |||
| a527a0e83b | |||
| 8eec236105 |
138
package-lock.json
generated
138
package-lock.json
generated
@ -1313,43 +1313,43 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/node": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.2.tgz",
|
||||
"integrity": "sha512-ZwFnxH+1z8Ehh8bNTMX3YFrYdzAv7JLY5X5X7XSFY+G9QGJVce/P9xb2mh+j5hKt8NceuHmdtllJvAHWKtsNrQ==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.3.tgz",
|
||||
"integrity": "sha512-H/6r6IPFJkCfBJZ2dKZiPJ7Ueb2wbL592+9bQEl2r73qbX6yGnmQVIfiUvDRB2YI0a3PWDrzUwkvQx1XW1bNkA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"enhanced-resolve": "^5.18.1",
|
||||
"jiti": "^2.4.2",
|
||||
"lightningcss": "1.29.2",
|
||||
"tailwindcss": "4.1.2"
|
||||
"tailwindcss": "4.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.2.tgz",
|
||||
"integrity": "sha512-Zwz//1QKo6+KqnCKMT7lA4bspGfwEgcPAHlSthmahtgrpKDfwRGk8PKQrW8Zg/ofCDIlg6EtjSTKSxxSufC+CQ==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.3.tgz",
|
||||
"integrity": "sha512-t16lpHCU7LBxDe/8dCj9ntyNpXaSTAgxWm1u2XQP5NiIu4KGSyrDJJRlK9hJ4U9yJxx0UKCVI67MJWFNll5mOQ==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@tailwindcss/oxide-android-arm64": "4.1.2",
|
||||
"@tailwindcss/oxide-darwin-arm64": "4.1.2",
|
||||
"@tailwindcss/oxide-darwin-x64": "4.1.2",
|
||||
"@tailwindcss/oxide-freebsd-x64": "4.1.2",
|
||||
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.2",
|
||||
"@tailwindcss/oxide-linux-arm64-gnu": "4.1.2",
|
||||
"@tailwindcss/oxide-linux-arm64-musl": "4.1.2",
|
||||
"@tailwindcss/oxide-linux-x64-gnu": "4.1.2",
|
||||
"@tailwindcss/oxide-linux-x64-musl": "4.1.2",
|
||||
"@tailwindcss/oxide-win32-arm64-msvc": "4.1.2",
|
||||
"@tailwindcss/oxide-win32-x64-msvc": "4.1.2"
|
||||
"@tailwindcss/oxide-android-arm64": "4.1.3",
|
||||
"@tailwindcss/oxide-darwin-arm64": "4.1.3",
|
||||
"@tailwindcss/oxide-darwin-x64": "4.1.3",
|
||||
"@tailwindcss/oxide-freebsd-x64": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-arm64-gnu": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-arm64-musl": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-x64-gnu": "4.1.3",
|
||||
"@tailwindcss/oxide-linux-x64-musl": "4.1.3",
|
||||
"@tailwindcss/oxide-win32-arm64-msvc": "4.1.3",
|
||||
"@tailwindcss/oxide-win32-x64-msvc": "4.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-android-arm64": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.2.tgz",
|
||||
"integrity": "sha512-IxkXbntHX8lwGmwURUj4xTr6nezHhLYqeiJeqa179eihGv99pRlKV1W69WByPJDQgSf4qfmwx904H6MkQqTA8w==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.3.tgz",
|
||||
"integrity": "sha512-cxklKjtNLwFl3mDYw4XpEfBY+G8ssSg9ADL4Wm6//5woi3XGqlxFsnV5Zb6v07dxw1NvEX2uoqsxO/zWQsgR+g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1363,9 +1363,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-darwin-arm64": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.2.tgz",
|
||||
"integrity": "sha512-ZRtiHSnFYHb4jHKIdzxlFm6EDfijTCOT4qwUhJ3GWxfDoW2yT3z/y8xg0nE7e72unsmSj6dtfZ9Y5r75FIrlpA==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.3.tgz",
|
||||
"integrity": "sha512-mqkf2tLR5VCrjBvuRDwzKNShRu99gCAVMkVsaEOFvv6cCjlEKXRecPu9DEnxp6STk5z+Vlbh1M5zY3nQCXMXhw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1379,9 +1379,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-darwin-x64": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.2.tgz",
|
||||
"integrity": "sha512-BiKUNZf1A0pBNzndBvnPnBxonCY49mgbOsPfILhcCE5RM7pQlRoOgN7QnwNhY284bDbfQSEOWnFR0zbPo6IDTw==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.3.tgz",
|
||||
"integrity": "sha512-7sGraGaWzXvCLyxrc7d+CCpUN3fYnkkcso3rCzwUmo/LteAl2ZGCDlGvDD8Y/1D3ngxT8KgDj1DSwOnNewKhmg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1395,9 +1395,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-freebsd-x64": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.2.tgz",
|
||||
"integrity": "sha512-Z30VcpUfRGkiddj4l5NRCpzbSGjhmmklVoqkVQdkEC0MOelpY+fJrVhzSaXHmWrmSvnX8yiaEqAbdDScjVujYQ==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.3.tgz",
|
||||
"integrity": "sha512-E2+PbcbzIReaAYZe997wb9rId246yDkCwAakllAWSGqe6VTg9hHle67hfH6ExjpV2LSK/siRzBUs5wVff3RW9w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1411,9 +1411,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.2.tgz",
|
||||
"integrity": "sha512-w3wsK1ChOLeQ3gFOiwabtWU5e8fY3P1Ss8jR3IFIn/V0va3ir//hZ8AwURveS4oK1Pu6b8i+yxesT4qWnLVUow==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.3.tgz",
|
||||
"integrity": "sha512-GvfbJ8wjSSjbLFFE3UYz4Eh8i4L6GiEYqCtA8j2Zd2oXriPuom/Ah/64pg/szWycQpzRnbDiJozoxFU2oJZyfg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -1427,9 +1427,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.2.tgz",
|
||||
"integrity": "sha512-oY/u+xJHpndTj7B5XwtmXGk8mQ1KALMfhjWMMpE8pdVAznjJsF5KkCceJ4Fmn5lS1nHMCwZum5M3/KzdmwDMdw==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.3.tgz",
|
||||
"integrity": "sha512-35UkuCWQTeG9BHcBQXndDOrpsnt3Pj9NVIB4CgNiKmpG8GnCNXeMczkUpOoqcOhO6Cc/mM2W7kaQ/MTEENDDXg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1443,9 +1443,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.2.tgz",
|
||||
"integrity": "sha512-k7G6vcRK/D+JOWqnKzKN/yQq1q4dCkI49fMoLcfs2pVcaUAXEqCP9NmA8Jv+XahBv5DtDjSAY3HJbjosEdKczg==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.3.tgz",
|
||||
"integrity": "sha512-dm18aQiML5QCj9DQo7wMbt1Z2tl3Giht54uVR87a84X8qRtuXxUqnKQkRDK5B4bCOmcZ580lF9YcoMkbDYTXHQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1459,9 +1459,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.2.tgz",
|
||||
"integrity": "sha512-fLL+c678TkYKgkDLLNxSjPPK/SzTec7q/E5pTwvpTqrth867dftV4ezRyhPM5PaiCqX651Y8Yk0wRQMcWUGnmQ==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.3.tgz",
|
||||
"integrity": "sha512-LMdTmGe/NPtGOaOfV2HuO7w07jI3cflPrVq5CXl+2O93DCewADK0uW1ORNAcfu2YxDUS035eY2W38TxrsqngxA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1475,9 +1475,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-linux-x64-musl": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.2.tgz",
|
||||
"integrity": "sha512-0tU1Vjd1WucZ2ooq6y4nI9xyTSaH2g338bhrqk+2yzkMHskBm+pMsOCfY7nEIvALkA1PKPOycR4YVdlV7Czo+A==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.3.tgz",
|
||||
"integrity": "sha512-aalNWwIi54bbFEizwl1/XpmdDrOaCjRFQRgtbv9slWjmNPuJJTIKPHf5/XXDARc9CneW9FkSTqTbyvNecYAEGw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1491,9 +1491,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.2.tgz",
|
||||
"integrity": "sha512-r8QaMo3QKiHqUcn+vXYCypCEha+R0sfYxmaZSgZshx9NfkY+CHz91aS2xwNV/E4dmUDkTPUag7sSdiCHPzFVTg==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.3.tgz",
|
||||
"integrity": "sha512-PEj7XR4OGTGoboTIAdXicKuWl4EQIjKHKuR+bFy9oYN7CFZo0eu74+70O4XuERX4yjqVZGAkCdglBODlgqcCXg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1507,9 +1507,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.2.tgz",
|
||||
"integrity": "sha512-lYCdkPxh9JRHXoBsPE8Pu/mppUsC2xihYArNAESub41PKhHTnvn6++5RpmFM+GLSt3ewyS8fwCVvht7ulWm6cw==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.3.tgz",
|
||||
"integrity": "sha512-T8gfxECWDBENotpw3HR9SmNiHC9AOJdxs+woasRZ8Q/J4VHN0OMs7F+4yVNZ9EVN26Wv6mZbK0jv7eHYuLJLwA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1523,14 +1523,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/vite": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.2.tgz",
|
||||
"integrity": "sha512-3r/ZdMW0gxY8uOx1To0lpYa4coq4CzINcCX4laM1rS340Kcn0ac4A/MMFfHN8qba51aorZMYwMcOxYk4wJ9FYg==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.3.tgz",
|
||||
"integrity": "sha512-lUI/QaDxLtlV52Lho6pu07CG9pSnRYLOPmKGIQjyHdTBagemc6HmgZxyjGAQ/5HMPrNeWBfTVIpQl0/jLXvWHQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tailwindcss/node": "4.1.2",
|
||||
"@tailwindcss/oxide": "4.1.2",
|
||||
"tailwindcss": "4.1.2"
|
||||
"@tailwindcss/node": "4.1.3",
|
||||
"@tailwindcss/oxide": "4.1.3",
|
||||
"tailwindcss": "4.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vite": "^5.2.0 || ^6"
|
||||
@ -2014,9 +2014,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001709",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001709.tgz",
|
||||
"integrity": "sha512-NgL3vUTnDrPCZ3zTahp4fsugQ4dc7EKTSzwQDPEel6DMoMnfH2jhry9n2Zm8onbSR+f/QtKHFOA+iAQu4kbtWA==",
|
||||
"version": "1.0.30001711",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001711.tgz",
|
||||
"integrity": "sha512-OpFA8GsKtoV3lCcsI3U5XBAV+oVrMu96OS8XafKqnhOaEAW2mveD1Mx81Sx/02chERwhDakuXs28zbyEc4QMKg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -2178,9 +2178,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.131",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.131.tgz",
|
||||
"integrity": "sha512-fJFRYXVEJgDCiqFOgRGJm8XR97hZ13tw7FXI9k2yC5hgY+nyzC2tMO8baq1cQR7Ur58iCkASx2zrkZPZUnfzPg==",
|
||||
"version": "1.5.132",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.132.tgz",
|
||||
"integrity": "sha512-QgX9EBvWGmvSRa74zqfnG7+Eno0Ak0vftBll0Pt2/z5b3bEGYL6OUXLgKPtvx73dn3dvwrlyVkjPKRRlhLYTEg==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@ -3393,9 +3393,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.2.tgz",
|
||||
"integrity": "sha512-VCsK+fitIbQF7JlxXaibFhxrPq4E2hDcG8apzHUdWFMCQWD8uLdlHg4iSkZ53cgLCCcZ+FZK7vG8VjvLcnBgKw==",
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.3.tgz",
|
||||
"integrity": "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
@ -3418,9 +3418,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.8.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
|
||||
"integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
|
||||
"version": "5.8.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
|
||||
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
|
||||
"devOptional": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
|
||||
160
src/App.vue
160
src/App.vue
@ -1,79 +1,117 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-900 text-gray-200 font-sans">
|
||||
<!-- Navigation sidebar -->
|
||||
<navigation @show-help="showHelpModal" />
|
||||
<div class="min-h-screen bg-gray-100 p-4">
|
||||
<h1 class="text-2xl font-bold text-center mb-6">Spritesheet Generator</h1>
|
||||
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow p-6">
|
||||
<file-uploader @upload-sprites="handleSpritesUpload" />
|
||||
|
||||
<!-- Main content area -->
|
||||
<div class="pl-16">
|
||||
<!-- Add left padding to accommodate the fixed navigation -->
|
||||
<app-header @toggle-help="showHelpModal" />
|
||||
<div v-if="sprites.length > 0" class="mt-6">
|
||||
<sprite-canvas :sprites="sprites" :columns="columns" @update-sprite="updateSpritePosition" />
|
||||
|
||||
<!-- Admin panel-like layout -->
|
||||
<div class="max-w-7xl mx-auto px-6 py-4">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold">Spritesheet creator</h1>
|
||||
<div class="flex gap-3">
|
||||
<button @click="store.isSpritesModalOpen.value = true" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
|
||||
<i class="fas fa-images"></i> Sprites
|
||||
<span v-if="sprites.length > 0" class="ml-1 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
|
||||
{{ sprites.length }}
|
||||
</span>
|
||||
</button>
|
||||
<button @click="store.isSettingsModalOpen.value = true" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-cog"></i> Settings</button>
|
||||
<div class="mt-4 flex items-center gap-4">
|
||||
<div class="flex items-center">
|
||||
<label for="columns" class="mr-2">Columns:</label>
|
||||
<input id="columns" type="number" v-model="columns" min="1" max="10" class="border rounded px-2 py-1 w-16" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-blue-500 bg-opacity-10 border-l-4 border-blue-500 p-4 mb-6 rounded-r">
|
||||
<p>Container size will adjust to fit the largest sprite. All sprites will be placed in cells of the same size.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<sidebar class="lg:col-span-1" />
|
||||
<main-content class="lg:col-span-3" />
|
||||
<button @click="downloadSpritesheet" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Download Spritesheet</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modals -->
|
||||
<preview-modal ref="previewModalRef" />
|
||||
<settings-modal />
|
||||
<sprites-modal />
|
||||
<help-modal />
|
||||
<notification />
|
||||
<help-button @show-help="showHelpModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, computed } from 'vue';
|
||||
import AppHeader from './components/AppHeader.vue';
|
||||
import Sidebar from './components/Sidebar.vue';
|
||||
import MainContent from './components/MainContent.vue';
|
||||
import PreviewModal from './components/PreviewModal.vue';
|
||||
import SettingsModal from './components/SettingsModal.vue';
|
||||
import SpritesModal from './components/SpritesModal.vue';
|
||||
import HelpModal from './components/HelpModal.vue';
|
||||
import Navigation from './components/Navigation.vue';
|
||||
import Notification from './components/Notification.vue';
|
||||
import HelpButton from './components/HelpButton.vue';
|
||||
import { useSpritesheetStore } from './composables/useSpritesheetStore';
|
||||
import { ref } from 'vue';
|
||||
import FileUploader from './components/FileUploader.vue';
|
||||
import SpriteCanvas from './components/SpriteCanvas.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const previewModalRef = ref<InstanceType<typeof PreviewModal> | null>(null);
|
||||
const sprites = computed(() => store.sprites.value);
|
||||
interface Sprite {
|
||||
id: string;
|
||||
file: File;
|
||||
img: HTMLImageElement;
|
||||
url: string;
|
||||
width: number;
|
||||
height: number;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
// Watch for changes to isModalOpen and call the openModal method when it becomes true
|
||||
watch(
|
||||
() => store.isModalOpen.value,
|
||||
isOpen => {
|
||||
if (isOpen && previewModalRef.value) {
|
||||
previewModalRef.value.openModal();
|
||||
}
|
||||
const sprites = ref<Sprite[]>([]);
|
||||
const columns = ref(4);
|
||||
|
||||
const handleSpritesUpload = (files: File[]) => {
|
||||
Promise.all(
|
||||
files.map(file => {
|
||||
return new Promise<Sprite>(resolve => {
|
||||
const url = URL.createObjectURL(file);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
resolve({
|
||||
id: crypto.randomUUID(),
|
||||
file,
|
||||
img,
|
||||
url,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
});
|
||||
};
|
||||
img.src = url;
|
||||
});
|
||||
})
|
||||
).then(newSprites => {
|
||||
sprites.value = [...sprites.value, ...newSprites];
|
||||
});
|
||||
};
|
||||
|
||||
const updateSpritePosition = (id: string, x: number, y: number) => {
|
||||
const spriteIndex = sprites.value.findIndex(sprite => sprite.id === id);
|
||||
if (spriteIndex !== -1) {
|
||||
sprites.value[spriteIndex].x = x;
|
||||
sprites.value[spriteIndex].y = y;
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const showHelpModal = () => {
|
||||
// Open the help modal instead of showing an alert
|
||||
store.isHelpModalOpen.value = true;
|
||||
const downloadSpritesheet = () => {
|
||||
if (sprites.value.length === 0) return;
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Find max dimensions
|
||||
let maxWidth = 0;
|
||||
let maxHeight = 0;
|
||||
|
||||
sprites.value.forEach(sprite => {
|
||||
if (sprite.width > maxWidth) maxWidth = sprite.width;
|
||||
if (sprite.height > maxHeight) maxHeight = sprite.height;
|
||||
});
|
||||
|
||||
// Set canvas size
|
||||
const rows = Math.ceil(sprites.value.length / columns.value);
|
||||
canvas.width = maxWidth * columns.value;
|
||||
canvas.height = maxHeight * rows;
|
||||
|
||||
// Apply pixel art optimization for the export canvas
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
|
||||
// Draw sprites
|
||||
sprites.value.forEach((sprite, index) => {
|
||||
const col = index % columns.value;
|
||||
const row = Math.floor(index / columns.value);
|
||||
|
||||
const cellX = col * maxWidth;
|
||||
const cellY = row * maxHeight;
|
||||
|
||||
ctx.drawImage(sprite.img, cellX + sprite.x, cellY + sprite.y);
|
||||
});
|
||||
|
||||
// Create download link
|
||||
const link = document.createElement('a');
|
||||
link.download = 'spritesheet.png';
|
||||
link.href = canvas.toDataURL('image/png');
|
||||
link.click();
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<header class="flex items-center justify-between bg-gray-800 p-3 shadow-md sticky top-0 z-40">
|
||||
<!-- Breadcrumb navigation -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-gray-200">Spritesheet editor</span>
|
||||
</div>
|
||||
|
||||
<!-- Right side actions -->
|
||||
<div class="flex gap-3 items-center">
|
||||
<!-- Zoom display -->
|
||||
<div class="text-sm text-gray-400 mr-2">
|
||||
<span>Zoom: {{ Math.round(zoomLevel * 100) }}%</span>
|
||||
</div>
|
||||
|
||||
<!-- Quick zoom controls -->
|
||||
<button @click="zoomIn" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" title="Zoom In">
|
||||
<i class="fas fa-search-plus"></i>
|
||||
</button>
|
||||
<button @click="zoomOut" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors" title="Zoom Out">
|
||||
<i class="fas fa-search-minus"></i>
|
||||
</button>
|
||||
|
||||
<!-- Download button -->
|
||||
<tooltip text="Download Spritesheet" position="bottom">
|
||||
<button @click="downloadSpritesheet" :disabled="sprites.length === 0" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors disabled:opacity-60 disabled:cursor-not-allowed">
|
||||
<i class="fas fa-download"></i>
|
||||
</button>
|
||||
</tooltip>
|
||||
|
||||
<!-- Help button -->
|
||||
<tooltip text="Keyboard Shortcuts" position="bottom">
|
||||
<button @click="openHelpModal" class="p-2 bg-gray-700 border border-gray-600 rounded hover:border-blue-500 transition-colors">
|
||||
<i class="fas fa-keyboard"></i>
|
||||
</button>
|
||||
</tooltip>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
import Tooltip from './Tooltip.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const zoomLevel = computed(() => store.zoomLevel.value);
|
||||
const sprites = computed(() => store.sprites.value);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'toggleHelp'): void;
|
||||
}>();
|
||||
|
||||
const openHelpModal = () => {
|
||||
store.isHelpModalOpen.value = true;
|
||||
};
|
||||
|
||||
// Expose store methods directly
|
||||
const { zoomIn, zoomOut, downloadSpritesheet } = store;
|
||||
</script>
|
||||
@ -1,223 +0,0 @@
|
||||
<template>
|
||||
<!-- Base Modal Component -->
|
||||
<div class="fixed inset-0 flex items-center justify-center z-50 pointer-events-none" v-if="modelValue">
|
||||
<!-- Modal backdrop with semi-transparent background (only if showBackdrop is true) -->
|
||||
<div v-if="showBackdrop" class="absolute inset-0 bg-black bg-opacity-50 pointer-events-auto" @click="closeModal"></div>
|
||||
|
||||
<!-- Modal content -->
|
||||
<div class="bg-gray-800 rounded-lg shadow-lg pointer-events-auto relative flex flex-col" :class="[{ 'border border-gray-400': showBorder }, { 'max-w-2xl w-full max-h-[90vh]': !movable }, customClass]" :style="modalStyle" ref="modalRef">
|
||||
<!-- Modal header - fixed -->
|
||||
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600" :class="{ 'cursor-move': movable }" @mousedown="movable ? startDrag($event) : null">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold">
|
||||
<slot name="header-icon">
|
||||
<i class="fas fa-window-maximize text-blue-500"></i>
|
||||
</slot>
|
||||
<slot name="header-title">Modal</slot>
|
||||
</div>
|
||||
<button @click="closeModal" class="text-gray-400 hover:text-white">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal body - scrollable -->
|
||||
<div class="flex-1 overflow-y-auto min-h-0">
|
||||
<div class="p-6">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resize handle (only if resizable is true) -->
|
||||
<div v-if="resizable" class="absolute bottom-0 right-0 w-8 h-8 cursor-se-resize group" @mousedown="startResize">
|
||||
<div class="absolute bottom-0 right-0 w-full h-full bg-gray-700 bg-opacity-0 group-hover:bg-opacity-50 transition-colors rounded-tl flex items-end justify-end">
|
||||
<i class="fas fa-arrows-alt text-gray-400 group-hover:text-blue-500 transition-colors m-1"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Modal',
|
||||
},
|
||||
showBackdrop: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showBorder: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
movable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
resizable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initialPosition: {
|
||||
type: Object,
|
||||
default: () => ({ x: 0, y: 0 }),
|
||||
},
|
||||
initialSize: {
|
||||
type: Object,
|
||||
default: () => ({ width: 800, height: 600 }),
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(['update:modelValue', 'close']);
|
||||
|
||||
// Refs
|
||||
const modalRef = ref<HTMLElement | null>(null);
|
||||
|
||||
// State
|
||||
const position = ref({
|
||||
x: props.initialPosition.x,
|
||||
y: props.initialPosition.y,
|
||||
});
|
||||
const size = ref({
|
||||
width: props.initialSize.width,
|
||||
height: props.initialSize.height,
|
||||
});
|
||||
const isDragging = ref(false);
|
||||
const dragOffset = ref({ x: 0, y: 0 });
|
||||
const isResizing = ref(false);
|
||||
const resizeStart = ref({ x: 0, y: 0 });
|
||||
const initialSize = ref({ width: 0, height: 0 });
|
||||
|
||||
// Computed
|
||||
const modalStyle = computed(() => {
|
||||
if (props.movable) {
|
||||
return {
|
||||
transform: `translate3d(${position.value.x}px, ${position.value.y}px, 0)`,
|
||||
width: `${size.value.width}px`,
|
||||
height: `${size.value.height}px`,
|
||||
maxWidth: '90vw',
|
||||
maxHeight: '90vh',
|
||||
};
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
// Methods
|
||||
const closeModal = () => {
|
||||
emit('update:modelValue', false);
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const startDrag = (e: MouseEvent) => {
|
||||
// Only start dragging if it's the header (not a button in the header)
|
||||
if ((e.target as HTMLElement).tagName === 'BUTTON' || (e.target as HTMLElement).closest('button')) {
|
||||
return;
|
||||
}
|
||||
|
||||
isDragging.value = true;
|
||||
dragOffset.value = {
|
||||
x: e.clientX - position.value.x,
|
||||
y: e.clientY - position.value.y,
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleDrag);
|
||||
document.addEventListener('mouseup', stopDrag);
|
||||
};
|
||||
|
||||
const handleDrag = (e: MouseEvent) => {
|
||||
if (!isDragging.value) return;
|
||||
|
||||
position.value = {
|
||||
x: e.clientX - dragOffset.value.x,
|
||||
y: e.clientY - dragOffset.value.y,
|
||||
};
|
||||
};
|
||||
|
||||
const stopDrag = () => {
|
||||
isDragging.value = false;
|
||||
document.removeEventListener('mousemove', handleDrag);
|
||||
document.removeEventListener('mouseup', stopDrag);
|
||||
};
|
||||
|
||||
const startResize = (e: MouseEvent) => {
|
||||
isResizing.value = true;
|
||||
resizeStart.value = { x: e.clientX, y: e.clientY };
|
||||
initialSize.value = { ...size.value };
|
||||
|
||||
document.addEventListener('mousemove', handleResize);
|
||||
document.addEventListener('mouseup', stopResize);
|
||||
};
|
||||
|
||||
const handleResize = (e: MouseEvent) => {
|
||||
if (!isResizing.value) return;
|
||||
|
||||
const deltaX = e.clientX - resizeStart.value.x;
|
||||
const deltaY = e.clientY - resizeStart.value.y;
|
||||
|
||||
size.value = {
|
||||
width: Math.max(300, initialSize.value.width + deltaX),
|
||||
height: Math.max(200, initialSize.value.height + deltaY),
|
||||
};
|
||||
};
|
||||
|
||||
const stopResize = () => {
|
||||
isResizing.value = false;
|
||||
document.removeEventListener('mousemove', handleResize);
|
||||
document.removeEventListener('mouseup', stopResize);
|
||||
};
|
||||
|
||||
// Center the modal in the viewport when it opens
|
||||
const centerModal = () => {
|
||||
if (props.movable && props.modelValue) {
|
||||
const viewportWidth = window.innerWidth;
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
position.value = {
|
||||
x: (viewportWidth - size.value.width) / 2,
|
||||
y: (viewportHeight - size.value.height) / 2,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Lifecycle hooks
|
||||
onMounted(() => {
|
||||
if (props.movable) {
|
||||
centerModal();
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.removeEventListener('mousemove', handleDrag);
|
||||
document.removeEventListener('mouseup', stopDrag);
|
||||
document.removeEventListener('mousemove', handleResize);
|
||||
document.removeEventListener('mouseup', stopResize);
|
||||
});
|
||||
|
||||
// Watch for changes in modelValue to center the modal when it opens
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
newValue => {
|
||||
if (newValue && props.movable) {
|
||||
centerModal();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Expose methods
|
||||
defineExpose({
|
||||
closeModal,
|
||||
centerModal,
|
||||
});
|
||||
</script>
|
||||
@ -1,128 +0,0 @@
|
||||
<template>
|
||||
<div @click="openFileDialog" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop" class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center cursor-pointer transition-all" :class="{ 'border-blue-500 bg-blue-500 bg-opacity-5': isDragOver }">
|
||||
<i class="fas fa-cloud-upload-alt text-blue-500 text-3xl mb-4"></i>
|
||||
<p class="text-gray-400">Drag & drop sprite images here<br />or click to select files</p>
|
||||
<input type="file" ref="fileInput" multiple accept="image/*" class="hidden" @change="onFileChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { type Sprite, useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
|
||||
const emit = defineEmits<{
|
||||
'files-uploaded': [sprites: Sprite[]];
|
||||
}>();
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const isDragOver = ref(false);
|
||||
|
||||
const openFileDialog = () => {
|
||||
if (fileInput.value) {
|
||||
fileInput.value.click();
|
||||
}
|
||||
};
|
||||
|
||||
const onDragOver = () => {
|
||||
isDragOver.value = true;
|
||||
};
|
||||
|
||||
const onDragLeave = () => {
|
||||
isDragOver.value = false;
|
||||
};
|
||||
|
||||
const onDrop = (e: DragEvent) => {
|
||||
isDragOver.value = false;
|
||||
if (e.dataTransfer?.files.length) {
|
||||
handleFiles(e.dataTransfer.files);
|
||||
}
|
||||
};
|
||||
|
||||
const onFileChange = (e: Event) => {
|
||||
const input = e.target as HTMLInputElement;
|
||||
if (input.files?.length) {
|
||||
handleFiles(input.files);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFiles = async (files: FileList) => {
|
||||
const imageFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
|
||||
|
||||
if (imageFiles.length === 0) {
|
||||
store.showNotification('Please upload image files only', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const newSprites: Sprite[] = [];
|
||||
let errorCount = 0;
|
||||
|
||||
for (let i = 0; i < imageFiles.length; i++) {
|
||||
const file = imageFiles[i];
|
||||
|
||||
try {
|
||||
const sprite = await createSpriteFromFile(file, i);
|
||||
newSprites.push(sprite);
|
||||
} catch (error) {
|
||||
errorCount++;
|
||||
console.error('Error loading sprite:', error);
|
||||
store.showNotification(`Failed to load ${file.name}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
if (newSprites.length > 0) {
|
||||
store.addSprites(newSprites);
|
||||
emit('files-uploaded', newSprites);
|
||||
store.showNotification(`Added ${newSprites.length} sprites successfully`);
|
||||
} else if (errorCount > 0) {
|
||||
store.showNotification(`Failed to load all ${errorCount} sprites`, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const createSpriteFromFile = (file: File, index: number): Promise<Sprite> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// Create a URL for the file
|
||||
const objectUrl = URL.createObjectURL(file);
|
||||
|
||||
const img = new Image();
|
||||
|
||||
// Set up event handlers
|
||||
img.onload = () => {
|
||||
// Verify the image has loaded properly
|
||||
if (img.width === 0 || img.height === 0) {
|
||||
console.error('Image loaded with invalid dimensions:', file.name, img.width, img.height);
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
reject(new Error(`Image has invalid dimensions: ${file.name}`));
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the sprite object
|
||||
const sprite: Sprite = {
|
||||
img,
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
x: 0,
|
||||
y: 0,
|
||||
name: file.name,
|
||||
id: `sprite-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||||
uploadOrder: index,
|
||||
};
|
||||
|
||||
// Keep the objectUrl reference and don't revoke it yet
|
||||
// The image is still needed for rendering later
|
||||
// URL.revokeObjectURL(objectUrl); - Don't do this anymore
|
||||
|
||||
resolve(sprite);
|
||||
};
|
||||
|
||||
img.onerror = error => {
|
||||
console.error('Error loading image:', file.name, error);
|
||||
URL.revokeObjectURL(objectUrl);
|
||||
reject(new Error(`Failed to load image: ${file.name}`));
|
||||
};
|
||||
|
||||
// Set the source to the object URL
|
||||
img.src = objectUrl;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
55
src/components/FileUploader.vue
Normal file
55
src/components/FileUploader.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center" :class="{ 'bg-blue-50 border-blue-300': isDragging }" @dragenter.prevent="isDragging = true" @dragleave.prevent="isDragging = false" @dragover.prevent @drop.prevent="handleDrop">
|
||||
<input ref="fileInput" type="file" multiple accept="image/*" class="hidden" @change="handleFileChange" />
|
||||
|
||||
<div class="mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p class="text-lg mb-2">Drag and drop your sprite images here</p>
|
||||
<p class="text-sm text-gray-500 mb-4">or</p>
|
||||
|
||||
<button @click="openFileDialog" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Select Files</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'uploadSprites', files: File[]): void;
|
||||
}>();
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const isDragging = ref(false);
|
||||
|
||||
const openFileDialog = () => {
|
||||
fileInput.value?.click();
|
||||
};
|
||||
|
||||
const handleFileChange = (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (input.files && input.files.length > 0) {
|
||||
const files = Array.from(input.files);
|
||||
emit('uploadSprites', files);
|
||||
// Reset input value so uploading the same file again will trigger the event
|
||||
if (fileInput.value) fileInput.value.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (event: DragEvent) => {
|
||||
isDragging.value = false;
|
||||
|
||||
if (event.dataTransfer?.files && event.dataTransfer.files.length > 0) {
|
||||
const files = Array.from(event.dataTransfer.files).filter(file => {
|
||||
return file.type.startsWith('image/');
|
||||
});
|
||||
|
||||
if (files.length > 0) {
|
||||
emit('uploadSprites', files);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<tooltip text="Help & Support" position="left">
|
||||
<button @click="openHelpModal" class="fixed bottom-5 right-5 w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center text-xl shadow-lg cursor-pointer transition-all hover:bg-blue-600 hover:-translate-y-1 z-40">
|
||||
<i class="fas fa-question"></i>
|
||||
</button>
|
||||
</tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
import Tooltip from './Tooltip.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const emit = defineEmits<{
|
||||
showHelp: [];
|
||||
}>();
|
||||
|
||||
const openHelpModal = () => {
|
||||
store.isHelpModalOpen.value = true;
|
||||
emit('showHelp');
|
||||
};
|
||||
</script>
|
||||
@ -1,144 +0,0 @@
|
||||
<template>
|
||||
<BaseModal v-model="isModalOpen" @close="closeModal" :movable="true" :resizable="true" :showBackdrop="false" :showBorder="true">
|
||||
<template #header-icon>
|
||||
<i class="fas fa-question-circle text-blue-500"></i>
|
||||
</template>
|
||||
<template #header-title>Help</template>
|
||||
|
||||
<div class="p-6">
|
||||
<!-- Help content tabs -->
|
||||
<div class="mb-6">
|
||||
<div class="flex border-b border-gray-600 mb-4">
|
||||
<button v-for="tab in tabs" :key="tab.id" @click="activeTab = tab.id" class="px-4 py-2 font-medium text-sm transition-colors" :class="activeTab === tab.id ? 'text-blue-500 border-b-2 border-blue-500' : 'text-gray-400 hover:text-gray-200'">
|
||||
<i :class="tab.icon" class="mr-2"></i>{{ tab.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Shortcuts Tab -->
|
||||
<div v-if="activeTab === 'shortcuts'" class="space-y-4">
|
||||
<h3 class="text-lg font-semibold mb-2">Keyboard Shortcuts</h3>
|
||||
<div class="bg-gray-700 rounded-lg p-4">
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div v-for="(shortcut, index) in shortcuts" :key="index" class="flex justify-between">
|
||||
<span class="font-medium">{{ shortcut.key }}</span>
|
||||
<span class="text-gray-300">{{ shortcut.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Guide Tab -->
|
||||
<div v-if="activeTab === 'guide'" class="space-y-4">
|
||||
<h3 class="text-lg font-semibold mb-2">Usage Guide</h3>
|
||||
<div class="bg-gray-700 rounded-lg p-4 space-y-3">
|
||||
<p>This tool helps you create spritesheets from individual sprite images.</p>
|
||||
<ol class="list-decimal pl-5 space-y-2">
|
||||
<li>Upload your sprite images using the upload area</li>
|
||||
<li>Arrange sprites by dragging them to desired positions</li>
|
||||
<li>Adjust settings like column count in the Settings panel</li>
|
||||
<li>Preview animation by clicking the Play button</li>
|
||||
<li>Download your spritesheet when ready</li>
|
||||
</ol>
|
||||
<p class="bg-blue-600 p-2 rounded">Questions? Add me on discord: <b>nu11ed</b></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Donation Tab -->
|
||||
<div v-if="activeTab === 'donate'" class="space-y-4">
|
||||
<h3 class="text-lg font-semibold mb-2">Buy me a coffee</h3>
|
||||
<p class="text-gray-300 mb-4">If you find this tool useful, please consider supporting its development with a donation.</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-for="wallet in wallets" :key="wallet.type" class="bg-gray-700 rounded-lg p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div class="flex items-center">
|
||||
<i :class="wallet.icon" class="text-xl mr-2 bg-gray-800 p-1 px-2 rounded-lg" :style="{ color: wallet.color }"></i>
|
||||
<span class="font-medium">{{ wallet.name }}</span>
|
||||
</div>
|
||||
<button @click="copyToClipboard(wallet.address)" class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded transition-colors">Copy</button>
|
||||
</div>
|
||||
<div class="bg-gray-800 p-2 rounded text-xs font-mono break-all">
|
||||
{{ wallet.address }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
import BaseModal from './BaseModal.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const isModalOpen = computed({
|
||||
get: () => store.isHelpModalOpen.value,
|
||||
set: value => {
|
||||
store.isHelpModalOpen.value = value;
|
||||
},
|
||||
});
|
||||
const activeTab = ref('shortcuts');
|
||||
|
||||
const tabs = [
|
||||
{ id: 'shortcuts', label: 'Shortcuts', icon: 'fas fa-keyboard' },
|
||||
{ id: 'guide', label: 'Guide', icon: 'fas fa-book' },
|
||||
{ id: 'donate', label: 'Donate', icon: 'fas fa-heart' },
|
||||
];
|
||||
|
||||
const shortcuts = [
|
||||
{ key: 'Shift + Drag', description: 'Fine-tune sprite position' },
|
||||
{ key: 'Space', description: 'Play/Pause animation' },
|
||||
{ key: 'Esc', description: 'Close preview modal' },
|
||||
{ key: 'Arrow Keys', description: 'Navigate frames when paused' },
|
||||
];
|
||||
|
||||
const wallets = [
|
||||
{
|
||||
type: 'paypal',
|
||||
name: 'PayPal',
|
||||
address: 'https://www.paypal.com/paypalme/DennisPostma298',
|
||||
icon: 'fab fa-paypal',
|
||||
color: '#00457c',
|
||||
},
|
||||
{
|
||||
type: 'btc',
|
||||
name: 'Bitcoin native segwit (BTC)',
|
||||
address: 'bc1ql2a3nxnhfwft7qex0cclj5ar2lfsslvs0aygeq',
|
||||
icon: 'fab fa-bitcoin',
|
||||
color: '#f7931a',
|
||||
},
|
||||
{
|
||||
type: 'eth',
|
||||
name: 'Ethereum (ETH)',
|
||||
address: '0x30843c72DF6E9A9226d967bf2403602f1C2aB67b',
|
||||
icon: 'fab fa-ethereum',
|
||||
color: '#627eea',
|
||||
},
|
||||
{
|
||||
type: 'ltc',
|
||||
name: 'Litecoin native segwit (LTC)',
|
||||
address: 'ltc1qdkn46hpt39ppmhk25ed2eycu7m2pj5cdzuxw84',
|
||||
icon: 'fas fa-litecoin-sign',
|
||||
color: '#345d9d',
|
||||
},
|
||||
];
|
||||
|
||||
const closeModal = () => {
|
||||
store.isHelpModalOpen.value = false;
|
||||
};
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard
|
||||
.writeText(text)
|
||||
.then(() => {
|
||||
store.showNotification('Address copied to clipboard');
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to copy: ', err);
|
||||
store.showNotification('Failed to copy address', 'error');
|
||||
});
|
||||
};
|
||||
</script>
|
||||
@ -1,415 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-gray-800 rounded-lg shadow-md overflow-hidden w-full">
|
||||
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold">
|
||||
<i class="fas fa-th-large text-blue-500"></i>
|
||||
<span>Spritesheet</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-400">
|
||||
<span>Zoom: {{ Math.round(store.zoomLevel.value * 100) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div
|
||||
ref="containerEl"
|
||||
class="relative overflow-auto rounded border border-gray-600 h-96"
|
||||
:class="{ 'cursor-grab': !isPanning, 'cursor-grabbing': isPanning }"
|
||||
:style="{
|
||||
backgroundImage: `
|
||||
linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
|
||||
`,
|
||||
backgroundSize: '20px 20px',
|
||||
backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
|
||||
backgroundColor: '#2d3748',
|
||||
}"
|
||||
>
|
||||
<canvas
|
||||
ref="canvasEl"
|
||||
class="block pixel-art"
|
||||
:style="{
|
||||
transform: `scale(${store.zoomLevel.value})`,
|
||||
transformOrigin: 'top left',
|
||||
imageRendering: 'pixelated',
|
||||
backgroundColor: 'transparent',
|
||||
}"
|
||||
></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue';
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const canvasEl = ref<HTMLCanvasElement | null>(null);
|
||||
const containerEl = ref<HTMLDivElement | null>(null);
|
||||
|
||||
// Access the preview border settings
|
||||
const previewBorder = computed(() => store.previewBorder);
|
||||
|
||||
// Panning state
|
||||
const isPanning = ref(false);
|
||||
const isAltPressed = ref(false);
|
||||
const lastPosition = ref({ x: 0, y: 0 });
|
||||
|
||||
// Tooltip state
|
||||
const isTooltipVisible = ref(false);
|
||||
const tooltipText = ref('');
|
||||
const tooltipPosition = ref({ x: 0, y: 0 });
|
||||
|
||||
// Responsive canvas sizing
|
||||
const containerWidth = ref(0);
|
||||
const containerHeight = ref(0);
|
||||
const baseCanvasWidth = ref(0);
|
||||
const baseCanvasHeight = ref(0);
|
||||
|
||||
// Computed properties for zoomed dimensions
|
||||
const zoomedWidth = computed(() => {
|
||||
return baseCanvasWidth.value * store.zoomLevel.value;
|
||||
});
|
||||
|
||||
const zoomedHeight = computed(() => {
|
||||
return baseCanvasHeight.value * store.zoomLevel.value;
|
||||
});
|
||||
|
||||
const tooltipStyle = computed(() => ({
|
||||
left: `${tooltipPosition.value.x + 15}px`,
|
||||
top: `${tooltipPosition.value.y + 15}px`,
|
||||
}));
|
||||
|
||||
// Watch for zoom changes to update the container scroll position
|
||||
watch(
|
||||
() => store.zoomLevel.value,
|
||||
(newZoom, oldZoom) => {
|
||||
if (!containerEl.value) return;
|
||||
|
||||
// Adjust scroll position to keep the center point consistent when zooming
|
||||
const centerX = containerEl.value.scrollLeft + containerEl.value.clientWidth / 2;
|
||||
const centerY = containerEl.value.scrollTop + containerEl.value.clientHeight / 2;
|
||||
|
||||
// Calculate new scroll position based on new zoom level
|
||||
const scaleChange = newZoom / oldZoom;
|
||||
containerEl.value.scrollLeft = centerX * scaleChange - containerEl.value.clientWidth / 2;
|
||||
containerEl.value.scrollTop = centerY * scaleChange - containerEl.value.clientHeight / 2;
|
||||
|
||||
// Re-render the canvas with the new zoom level
|
||||
updateCanvasSize();
|
||||
store.renderSpritesheetPreview();
|
||||
}
|
||||
);
|
||||
|
||||
// Watch for changes in border settings to update the canvas
|
||||
watch(
|
||||
() => previewBorder.value,
|
||||
() => {
|
||||
if (store.sprites.value.length > 0) {
|
||||
store.renderSpritesheetPreview();
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
const setupCheckerboardPattern = () => {
|
||||
// Remove this function or leave it empty since we don't need it anymore
|
||||
};
|
||||
|
||||
const updateCanvasSize = () => {
|
||||
if (!canvasEl.value || !containerEl.value) return;
|
||||
|
||||
// Get the container dimensions
|
||||
containerWidth.value = containerEl.value.clientWidth;
|
||||
containerHeight.value = containerEl.value.clientHeight;
|
||||
|
||||
// Set the base canvas size to fill the container
|
||||
// These are the "unzoomed" dimensions
|
||||
baseCanvasWidth.value = Math.max(containerWidth.value, store.cellSize.width * Math.ceil(containerWidth.value / store.cellSize.width));
|
||||
baseCanvasHeight.value = Math.max(containerHeight.value, store.cellSize.height * Math.ceil(containerHeight.value / store.cellSize.height));
|
||||
|
||||
// Set the actual canvas dimensions - remove any zoom scaling here
|
||||
canvasEl.value.width = baseCanvasWidth.value;
|
||||
canvasEl.value.height = baseCanvasHeight.value;
|
||||
|
||||
// Trigger a re-render
|
||||
store.renderSpritesheetPreview();
|
||||
};
|
||||
|
||||
const handleMouseDown = (e: MouseEvent) => {
|
||||
if (!canvasEl.value || store.sprites.value.length === 0) return;
|
||||
|
||||
const rect = canvasEl.value.getBoundingClientRect();
|
||||
// Adjust coordinates based on zoom level
|
||||
const x = (e.clientX - rect.left) / store.zoomLevel.value;
|
||||
const y = (e.clientY - rect.top) / store.zoomLevel.value;
|
||||
|
||||
// Find which sprite was clicked
|
||||
for (let i = store.sprites.value.length - 1; i >= 0; i--) {
|
||||
const sprite = store.sprites.value[i];
|
||||
if (x >= sprite.x && x <= sprite.x + store.cellSize.width && y >= sprite.y && y <= sprite.y + store.cellSize.height) {
|
||||
store.draggedSprite.value = sprite;
|
||||
store.dragOffset.x = x - sprite.x;
|
||||
store.dragOffset.y = y - sprite.y;
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
// Don't process sprite movement or tooltips while panning
|
||||
if (isPanning.value) return;
|
||||
|
||||
if (!canvasEl.value) return;
|
||||
|
||||
const rect = canvasEl.value.getBoundingClientRect();
|
||||
// Adjust coordinates for zoom
|
||||
const x = (e.clientX - rect.left) / store.zoomLevel.value;
|
||||
const y = (e.clientY - rect.top) / store.zoomLevel.value;
|
||||
|
||||
// Update tooltip
|
||||
const cellX = Math.floor(x / store.cellSize.width);
|
||||
const cellY = Math.floor(y / store.cellSize.height);
|
||||
|
||||
if (canvasEl.value && cellX >= 0 && cellX < canvasEl.value.width / store.cellSize.width && cellY >= 0 && cellY < canvasEl.value.height / store.cellSize.height) {
|
||||
isTooltipVisible.value = true;
|
||||
tooltipText.value = `Cell: (${cellX}, ${cellY})`;
|
||||
tooltipPosition.value.x = e.pageX;
|
||||
tooltipPosition.value.y = e.pageY;
|
||||
} else {
|
||||
isTooltipVisible.value = false;
|
||||
}
|
||||
|
||||
// Move the sprite if we're dragging one
|
||||
if (store.draggedSprite.value) {
|
||||
if (store.isShiftPressed.value) {
|
||||
// Free positioning within the cell bounds when shift is pressed
|
||||
const cellX = Math.floor(store.draggedSprite.value.x / store.cellSize.width);
|
||||
const cellY = Math.floor(store.draggedSprite.value.y / store.cellSize.height);
|
||||
|
||||
// Calculate new position with constraints to stay within the cell
|
||||
const newX = x - store.dragOffset.x;
|
||||
const newY = y - store.dragOffset.y;
|
||||
|
||||
// Calculate cell boundaries
|
||||
const cellLeft = cellX * store.cellSize.width;
|
||||
const cellTop = cellY * store.cellSize.height;
|
||||
const cellRight = cellLeft + store.cellSize.width - store.draggedSprite.value.img.width;
|
||||
const cellBottom = cellTop + store.cellSize.height - store.draggedSprite.value.img.height;
|
||||
|
||||
// Constrain position to stay within the cell
|
||||
store.draggedSprite.value.x = Math.max(cellLeft, Math.min(newX, cellRight));
|
||||
store.draggedSprite.value.y = Math.max(cellTop, Math.min(newY, cellBottom));
|
||||
} else {
|
||||
// Calculate new position based on grid cells (snap to grid)
|
||||
const newCellX = Math.floor((x - store.dragOffset.x) / store.cellSize.width);
|
||||
const newCellY = Math.floor((y - store.dragOffset.y) / store.cellSize.height);
|
||||
|
||||
// Make sure we stay within bounds
|
||||
if (canvasEl.value) {
|
||||
const maxCellX = Math.floor(canvasEl.value.width / store.cellSize.width) - 1;
|
||||
const maxCellY = Math.floor(canvasEl.value.height / store.cellSize.height) - 1;
|
||||
|
||||
const boundedCellX = Math.max(0, Math.min(newCellX, maxCellX));
|
||||
const boundedCellY = Math.max(0, Math.min(newCellY, maxCellY));
|
||||
|
||||
store.draggedSprite.value.x = boundedCellX * store.cellSize.width;
|
||||
store.draggedSprite.value.y = boundedCellY * store.cellSize.height;
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger a re-render
|
||||
store.renderSpritesheetPreview();
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
store.draggedSprite.value = null;
|
||||
};
|
||||
|
||||
const handleMouseOut = () => {
|
||||
isTooltipVisible.value = false;
|
||||
store.draggedSprite.value = null;
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Shift') {
|
||||
store.isShiftPressed.value = true;
|
||||
}
|
||||
|
||||
if (e.key === 'Alt') {
|
||||
e.preventDefault(); // Prevent browser from focusing address bar
|
||||
isAltPressed.value = true;
|
||||
}
|
||||
|
||||
// Add keyboard shortcuts for zooming
|
||||
if (e.ctrlKey || e.metaKey) {
|
||||
if (e.key === '=' || e.key === '+') {
|
||||
e.preventDefault();
|
||||
store.zoomIn();
|
||||
} else if (e.key === '-') {
|
||||
e.preventDefault();
|
||||
store.zoomOut();
|
||||
} else if (e.key === '0') {
|
||||
e.preventDefault();
|
||||
store.resetZoom();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Shift') {
|
||||
store.isShiftPressed.value = false;
|
||||
}
|
||||
|
||||
if (e.key === 'Alt') {
|
||||
isAltPressed.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleCanvasMouseDown = (e: MouseEvent) => {
|
||||
// Middle mouse button or Alt + left click for panning
|
||||
if (e.button === 1 || (e.button === 0 && isAltPressed.value)) {
|
||||
e.preventDefault();
|
||||
isPanning.value = true;
|
||||
lastPosition.value = { x: e.clientX, y: e.clientY };
|
||||
} else {
|
||||
// Regular sprite dragging
|
||||
handleMouseDown(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCanvasMouseMove = (e: MouseEvent) => {
|
||||
if (isPanning.value && containerEl.value) {
|
||||
e.preventDefault();
|
||||
const dx = e.clientX - lastPosition.value.x;
|
||||
const dy = e.clientY - lastPosition.value.y;
|
||||
|
||||
// Scroll the container in the opposite direction of the mouse movement
|
||||
containerEl.value.scrollLeft -= dx;
|
||||
containerEl.value.scrollTop -= dy;
|
||||
|
||||
// Update the last position for the next movement
|
||||
lastPosition.value = { x: e.clientX, y: e.clientY };
|
||||
} else {
|
||||
// Handle regular mouse move for sprites and tooltip
|
||||
handleMouseMove(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCanvasMouseUp = () => {
|
||||
isPanning.value = false;
|
||||
handleMouseUp();
|
||||
};
|
||||
|
||||
const handleCanvasMouseLeave = () => {
|
||||
isPanning.value = false;
|
||||
handleMouseOut();
|
||||
};
|
||||
|
||||
const preventContextMenu = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const setupCanvasEvents = () => {
|
||||
if (!canvasEl.value) return;
|
||||
|
||||
// Set up mouse events for the canvas
|
||||
canvasEl.value.addEventListener('mousedown', handleCanvasMouseDown);
|
||||
canvasEl.value.addEventListener('mousemove', handleCanvasMouseMove);
|
||||
canvasEl.value.addEventListener('mouseup', handleCanvasMouseUp);
|
||||
canvasEl.value.addEventListener('mouseleave', handleCanvasMouseLeave);
|
||||
canvasEl.value.addEventListener('contextmenu', preventContextMenu);
|
||||
};
|
||||
|
||||
// Handle window resize to update canvas dimensions
|
||||
const handleResize = () => {
|
||||
updateCanvasSize();
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// Set up global event listeners
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
window.addEventListener('keyup', handleKeyUp);
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// Initialize the canvas
|
||||
await nextTick();
|
||||
initializeCanvas();
|
||||
|
||||
// Observe container size changes
|
||||
if ('ResizeObserver' in window) {
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
updateCanvasSize();
|
||||
});
|
||||
|
||||
if (containerEl.value) {
|
||||
resizeObserver.observe(containerEl.value);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const initializeCanvas = () => {
|
||||
if (!canvasEl.value || !containerEl.value) return;
|
||||
|
||||
try {
|
||||
const context = canvasEl.value.getContext('2d');
|
||||
if (!context) {
|
||||
console.error('Failed to get 2D context from canvas');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set canvas and context in the store
|
||||
store.canvas.value = canvasEl.value;
|
||||
store.ctx.value = context;
|
||||
|
||||
// Set up the checkerboard pattern
|
||||
setupCheckerboardPattern();
|
||||
|
||||
// Set up canvas mouse events
|
||||
setupCanvasEvents();
|
||||
|
||||
// Set the initial canvas size based on container
|
||||
updateCanvasSize();
|
||||
|
||||
// Update sprites if there are any loaded
|
||||
if (store.sprites.value.length > 0) {
|
||||
store.updateCellSize();
|
||||
store.autoArrangeSprites();
|
||||
store.renderSpritesheetPreview();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error initializing canvas:', error);
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// Remove global event listeners
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
window.removeEventListener('keyup', handleKeyUp);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
|
||||
// Remove canvas event listeners
|
||||
if (canvasEl.value) {
|
||||
canvasEl.value.removeEventListener('mousedown', handleCanvasMouseDown);
|
||||
canvasEl.value.removeEventListener('mousemove', handleCanvasMouseMove);
|
||||
canvasEl.value.removeEventListener('mouseup', handleCanvasMouseUp);
|
||||
canvasEl.value.removeEventListener('mouseleave', handleCanvasMouseLeave);
|
||||
canvasEl.value.removeEventListener('contextmenu', preventContextMenu);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cursor-grab {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.cursor-grabbing {
|
||||
cursor: grabbing;
|
||||
}
|
||||
</style>
|
||||
@ -1,94 +0,0 @@
|
||||
<template>
|
||||
<nav class="fixed left-0 top-0 bottom-0 w-16 bg-gray-800 shadow-lg z-40 flex flex-col items-center py-4">
|
||||
<!-- Logo -->
|
||||
<div class="mb-8">
|
||||
<i class="fas fa-gamepad text-blue-500 text-2xl"></i>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Items -->
|
||||
<div class="flex flex-col gap-6 items-center">
|
||||
<!-- Dashboard/Home -->
|
||||
<tooltip text="Dashboard" position="right">
|
||||
<button class="w-10 h-10 rounded-lg flex items-center justify-center text-gray-200 hover:bg-gray-700 hover:text-blue-500 transition-colors" :class="{ 'bg-gray-700 text-blue-500': activeSection === 'dashboard' }" @click="setActiveSection('dashboard')">
|
||||
<i class="fas fa-home"></i>
|
||||
</button>
|
||||
</tooltip>
|
||||
|
||||
<!-- Sprites -->
|
||||
<tooltip text="Manage sprites" position="right">
|
||||
<button class="w-10 h-10 rounded-lg flex items-center justify-center text-gray-200 hover:bg-gray-700 hover:text-blue-500 transition-colors relative" :class="{ 'bg-gray-700 text-blue-500': activeSection === 'sprites' }" @click="openSpritesModal">
|
||||
<i class="fas fa-images"></i>
|
||||
<span v-if="sprites.length > 0" class="absolute -top-1 -right-1 bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
|
||||
{{ sprites.length }}
|
||||
</span>
|
||||
</button>
|
||||
</tooltip>
|
||||
|
||||
<!-- Preview -->
|
||||
<tooltip text="Preview animation" position="right">
|
||||
<button class="w-10 h-10 rounded-lg flex items-center justify-center text-gray-200 hover:bg-gray-700 hover:text-blue-500 transition-colors" :class="{ 'bg-gray-700 text-blue-500': activeSection === 'preview' }" @click="openPreviewModal" :disabled="sprites.length === 0">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</tooltip>
|
||||
|
||||
<!-- Settings -->
|
||||
<tooltip text="Settings" position="bottom">
|
||||
<button class="w-10 h-10 rounded-lg flex items-center justify-center text-gray-200 hover:bg-gray-700 hover:text-blue-500 transition-colors" :class="{ 'bg-gray-700 text-blue-500': activeSection === 'settings' }" @click="openSettingsModal">
|
||||
<i class="fas fa-cog"></i>
|
||||
</button>
|
||||
</tooltip>
|
||||
</div>
|
||||
|
||||
<!-- Help Button at Bottom -->
|
||||
<div class="mt-auto">
|
||||
<tooltip text="Help & Support" position="bottom">
|
||||
<button class="w-10 h-10 rounded-lg flex items-center justify-center text-gray-200 hover:bg-gray-700 hover:text-blue-500 transition-colors" @click="showHelp">
|
||||
<i class="fas fa-question-circle"></i>
|
||||
</button>
|
||||
</tooltip>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
import Tooltip from './Tooltip.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const sprites = computed(() => store.sprites.value);
|
||||
const activeSection = ref('dashboard');
|
||||
|
||||
const setActiveSection = (section: string) => {
|
||||
activeSection.value = section;
|
||||
};
|
||||
|
||||
const openSpritesModal = () => {
|
||||
setActiveSection('sprites');
|
||||
store.isSpritesModalOpen.value = true;
|
||||
};
|
||||
|
||||
const openSettingsModal = () => {
|
||||
setActiveSection('settings');
|
||||
store.isSettingsModalOpen.value = true;
|
||||
};
|
||||
|
||||
const openPreviewModal = () => {
|
||||
if (sprites.value.length === 0) {
|
||||
store.showNotification('Please add sprites first', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
setActiveSection('preview');
|
||||
store.isModalOpen.value = true;
|
||||
};
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'showHelp'): void;
|
||||
}>();
|
||||
|
||||
const showHelp = () => {
|
||||
// Instead of just emitting, we'll now open the help modal directly
|
||||
store.isHelpModalOpen.value = true;
|
||||
};
|
||||
</script>
|
||||
@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="fixed bottom-5 right-5 bg-gray-700 text-gray-200 p-4 rounded shadow-lg z-50 flex items-center gap-3 transform transition-all duration-300"
|
||||
:class="{
|
||||
'translate-y-0 opacity-100': notification.isVisible,
|
||||
'translate-y-24 opacity-0': !notification.isVisible,
|
||||
'border-l-4 border-green-500': notification.type === 'success',
|
||||
'border-l-4 border-red-500': notification.type === 'error',
|
||||
}"
|
||||
>
|
||||
<i
|
||||
class="text-xl"
|
||||
:class="{
|
||||
'fas fa-check-circle text-green-500': notification.type === 'success',
|
||||
'fas fa-exclamation-circle text-red-500': notification.type === 'error',
|
||||
}"
|
||||
></i>
|
||||
<span>{{ notification.message }}</span>
|
||||
<button @click="closeNotification" class="ml-2 text-gray-400 hover:text-gray-200">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
|
||||
const notification = computed(() => store.notification);
|
||||
|
||||
const closeNotification = () => {
|
||||
store.notification.isVisible = false;
|
||||
};
|
||||
</script>
|
||||
@ -1,753 +0,0 @@
|
||||
<template>
|
||||
<BaseModal v-model="isModalOpen" @close="closeModal" :movable="true" :resizable="true" :showBackdrop="false" :showBorder="true" :initialSize="modalSize" customClass="scrollbar-hide">
|
||||
<template #header-icon>
|
||||
<i class="fas fa-film text-blue-500"></i>
|
||||
</template>
|
||||
<template #header-title>Animation Preview</template>
|
||||
|
||||
<div class="p-6 flex flex-col h-[calc(100%-64px)]">
|
||||
<div class="flex flex-wrap items-center gap-4 mb-6">
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="startAnimation"
|
||||
:disabled="sprites.length === 0"
|
||||
:class="{
|
||||
'bg-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600': !animation.isPlaying,
|
||||
}"
|
||||
class="flex items-center gap-2 border rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
>
|
||||
<i class="fas fa-play"></i> Play
|
||||
</button>
|
||||
<button
|
||||
@click="stopAnimation"
|
||||
:disabled="sprites.length === 0"
|
||||
:class="{
|
||||
'bg-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600': animation.isPlaying,
|
||||
}"
|
||||
class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500"
|
||||
>
|
||||
<i class="fas fa-pause"></i> Pause
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 flex-grow">
|
||||
<div class="flex justify-between text-sm text-gray-400">
|
||||
<label for="frame-slider">Frame:</label>
|
||||
<span>{{ currentFrameDisplay }}</span>
|
||||
</div>
|
||||
<input type="range" id="frame-slider" v-model="currentFrame" :min="0" :max="Math.max(0, sprites.length - 1)" class="w-full h-1 bg-gray-600 rounded appearance-none focus:outline-none cursor-pointer" @input="handleFrameChange" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2 flex-grow">
|
||||
<div class="flex justify-between text-sm text-gray-400">
|
||||
<label for="framerate">Frame Rate:</label>
|
||||
<span>{{ animation.frameRate }} FPS</span>
|
||||
</div>
|
||||
<input type="range" id="framerate" v-model.number="animation.frameRate" min="1" max="30" class="w-full h-1 bg-gray-600 rounded appearance-none focus:outline-none cursor-pointer" @input="handleFrameRateChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
|
||||
<!-- Zoom controls -->
|
||||
<div class="flex items-center gap-2">
|
||||
<button @click="zoomOut" :disabled="previewZoom <= 1" class="flex items-center justify-center w-8 h-8 bg-gray-700 text-gray-200 border border-gray-600 rounded transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">
|
||||
<i class="fas fa-search-minus"></i>
|
||||
</button>
|
||||
<span class="text-sm text-gray-300">{{ Math.round(previewZoom * 100) }}%</span>
|
||||
<button @click="zoomIn" :disabled="previewZoom >= 5" class="flex items-center justify-center w-8 h-8 bg-gray-700 text-gray-200 border border-gray-600 rounded transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">
|
||||
<i class="fas fa-search-plus"></i>
|
||||
</button>
|
||||
<!-- Apply Offset button removed -->
|
||||
<button @click="resetZoom" :disabled="previewZoom === 1" class="flex items-center justify-center px-2 h-8 bg-gray-700 text-gray-200 border border-gray-600 rounded text-xs transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">Reset Zoom</button>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Show all sprites toggle -->
|
||||
<label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
|
||||
<input type="checkbox" v-model="showAllSprites" class="form-checkbox h-4 w-4 text-blue-500 rounded border-gray-600 bg-gray-700 focus:ring-blue-500" />
|
||||
Show all frames
|
||||
</label>
|
||||
|
||||
<!-- Reset sprite position button -->
|
||||
<button @click="resetSpritePosition" :disabled="!hasSpriteOffset" class="flex items-center gap-1 px-2 h-8 bg-gray-700 text-gray-200 border border-gray-600 rounded text-xs transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500" title="Center sprite in cell">
|
||||
<i class="fas fa-crosshairs"></i>
|
||||
Center Sprite
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center items-center bg-gray-700 p-6 rounded mb-6 relative overflow-auto flex-grow">
|
||||
<!-- Tooltip for dragging instructions -->
|
||||
<div class="text-xs text-gray-400 mb-2" v-if="sprites.length > 0">
|
||||
<span>Position: {{ Math.round(spriteOffset.x) }}px, {{ Math.round(spriteOffset.y) }}px (drag to move within cell)</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="canvas-container relative transition-transform duration-100 flex items-center justify-center"
|
||||
:style="{
|
||||
minWidth: `${store.cellSize.width * previewZoom}px`,
|
||||
minHeight: `${store.cellSize.height * previewZoom}px`,
|
||||
cursor: previewZoom > 1 ? (isViewportDragging ? 'grabbing' : 'grab') : 'default',
|
||||
}"
|
||||
@mousedown="startViewportDrag"
|
||||
@wheel="handleCanvasWheel"
|
||||
>
|
||||
<div
|
||||
class="sprite-wrapper"
|
||||
:style="{
|
||||
transform: `scale(${previewZoom}) translate(${viewportOffset.x}px, ${viewportOffset.y}px)`,
|
||||
cursor: isCanvasDragging ? 'grabbing' : 'move',
|
||||
width: `${store.cellSize.width}px`,
|
||||
height: `${store.cellSize.height}px`,
|
||||
backgroundImage: `
|
||||
linear-gradient(45deg, #1a1a1a 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #1a1a1a 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #1a1a1a 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #1a1a1a 75%)
|
||||
`,
|
||||
backgroundSize: '10px 10px',
|
||||
backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',
|
||||
backgroundColor: '#2d3748',
|
||||
}"
|
||||
@mousedown.stop="startCanvasDrag"
|
||||
title="Drag to move sprite within cell"
|
||||
>
|
||||
<canvas ref="animCanvas" class="block pixel-art absolute top-0 left-0"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
import BaseModal from './BaseModal.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const animCanvas = ref<HTMLCanvasElement | null>(null);
|
||||
|
||||
const isModalOpen = computed({
|
||||
get: () => store.isModalOpen.value,
|
||||
set: value => {
|
||||
store.isModalOpen.value = value;
|
||||
},
|
||||
});
|
||||
const sprites = computed(() => store.sprites.value);
|
||||
const animation = computed(() => store.animation);
|
||||
const previewBorder = computed(() => store.previewBorder);
|
||||
|
||||
const currentFrame = ref(0);
|
||||
// Position is now handled by BaseModal
|
||||
|
||||
// New state for added features
|
||||
const previewZoom = ref(1);
|
||||
const showAllSprites = ref(false);
|
||||
// Use a computed property to access and modify the store's sprite offset for the current frame
|
||||
const spriteOffset = computed({
|
||||
get: () => {
|
||||
// Get the offset for the current frame
|
||||
const frameOffset = store.getSpriteOffset(currentFrame.value);
|
||||
// Update the current offset for UI display
|
||||
store.currentSpriteOffset.x = frameOffset.x;
|
||||
store.currentSpriteOffset.y = frameOffset.y;
|
||||
return store.currentSpriteOffset;
|
||||
},
|
||||
set: val => {
|
||||
// Update both the current offset and the frame-specific offset
|
||||
store.currentSpriteOffset.x = val.x;
|
||||
store.currentSpriteOffset.y = val.y;
|
||||
|
||||
// Get the frame-specific offset and update it
|
||||
const frameOffset = store.getSpriteOffset(currentFrame.value);
|
||||
frameOffset.x = val.x;
|
||||
frameOffset.y = val.y;
|
||||
},
|
||||
});
|
||||
const isCanvasDragging = ref(false);
|
||||
const canvasDragStart = ref({ x: 0, y: 0 });
|
||||
|
||||
// Canvas viewport navigation state
|
||||
const viewportOffset = ref({ x: 0, y: 0 });
|
||||
const isViewportDragging = ref(false);
|
||||
const viewportDragStart = ref({ x: 0, y: 0 });
|
||||
|
||||
// Modal size state - used by BaseModal
|
||||
const modalSize = ref({ width: 800, height: 600 });
|
||||
|
||||
const currentFrameDisplay = computed(() => {
|
||||
if (sprites.value.length === 0) return '0 / 0';
|
||||
return `${currentFrame.value + 1} / ${sprites.value.length}`;
|
||||
});
|
||||
|
||||
// Computed property to check if sprite has been moved from original position
|
||||
const hasSpriteOffset = computed(() => {
|
||||
return spriteOffset.x !== 0 || spriteOffset.y !== 0;
|
||||
});
|
||||
|
||||
// applyOffsetsToMainView function removed
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (!isModalOpen.value) return;
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
closeModal();
|
||||
} else if (e.key === ' ' || e.key === 'Spacebar') {
|
||||
// Toggle play/pause
|
||||
if (animation.value.isPlaying) {
|
||||
stopAnimation();
|
||||
} else if (sprites.value.length > 0) {
|
||||
startAnimation();
|
||||
}
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowRight' && !animation.value.isPlaying && sprites.value.length > 0) {
|
||||
// Next frame
|
||||
currentFrame.value = (currentFrame.value + 1) % sprites.value.length;
|
||||
updateFrame();
|
||||
} else if (e.key === 'ArrowLeft' && !animation.value.isPlaying && sprites.value.length > 0) {
|
||||
// Previous frame
|
||||
currentFrame.value = (currentFrame.value - 1 + sprites.value.length) % sprites.value.length;
|
||||
updateFrame();
|
||||
} else if (e.key === '+' || e.key === '=') {
|
||||
// Zoom in
|
||||
zoomIn();
|
||||
e.preventDefault();
|
||||
} else if (e.key === '-' || e.key === '_') {
|
||||
// Zoom out
|
||||
zoomOut();
|
||||
e.preventDefault();
|
||||
} else if (e.key === '0') {
|
||||
// Reset zoom
|
||||
resetZoom();
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'r') {
|
||||
if (e.shiftKey) {
|
||||
// Shift+R: Reset sprite position only
|
||||
resetSpritePosition();
|
||||
} else {
|
||||
// R: Reset both sprite position and viewport
|
||||
resetSpritePosition();
|
||||
updateFrame();
|
||||
store.showNotification('View and position reset');
|
||||
}
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowLeft' && animation.value.isPlaying) {
|
||||
viewportOffset.value.x += panAmount / previewZoom.value;
|
||||
e.preventDefault();
|
||||
} else if (e.key === 'ArrowRight' && animation.value.isPlaying) {
|
||||
viewportOffset.value.x -= panAmount / previewZoom.value;
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const openModal = async () => {
|
||||
if (sprites.value.length === 0) {
|
||||
store.showNotification('Please add sprites first', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset zoom but keep sprite offset if it exists
|
||||
previewZoom.value = 1;
|
||||
viewportOffset.value = { x: 0, y: 0 };
|
||||
|
||||
// Reset modal size to default
|
||||
modalSize.value = { width: 800, height: 600 };
|
||||
// Note: Modal positioning is now handled by BaseModal
|
||||
|
||||
// Reset to first frame
|
||||
currentFrame.value = 0;
|
||||
animation.value.currentFrame = 0;
|
||||
|
||||
// Initialize canvas and retry if it fails
|
||||
await initializeCanvas();
|
||||
|
||||
// If canvas is still not initialized, try again after a short delay
|
||||
if (!animCanvas.value || !store.animation.canvas) {
|
||||
await new Promise(resolve => setTimeout(resolve, 100));
|
||||
await initializeCanvas();
|
||||
}
|
||||
|
||||
// Set modal open state if not already open
|
||||
if (!store.isModalOpen.value) {
|
||||
store.isModalOpen.value = true;
|
||||
}
|
||||
|
||||
// Wait for next frame to ensure DOM is updated
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
|
||||
// Set proper canvas size before rendering
|
||||
updateCanvasSize();
|
||||
|
||||
// Force render the first frame
|
||||
if (sprites.value.length > 0) {
|
||||
// Get the current sprite
|
||||
const currentSprite = sprites.value[0];
|
||||
|
||||
// Calculate center position
|
||||
const centerX = Math.max(0, Math.floor((store.cellSize.width - currentSprite.width) / 2));
|
||||
const centerY = Math.max(0, Math.floor((store.cellSize.height - currentSprite.height) / 2));
|
||||
|
||||
// Get the frame-specific offset for the first frame
|
||||
const frameOffset = store.getSpriteOffset(0);
|
||||
|
||||
// If the offset is (0,0), center the sprite
|
||||
if (frameOffset.x === 0 && frameOffset.y === 0) {
|
||||
frameOffset.x = centerX;
|
||||
frameOffset.y = centerY;
|
||||
}
|
||||
|
||||
// Update the current offset for UI display
|
||||
store.currentSpriteOffset.x = frameOffset.x;
|
||||
store.currentSpriteOffset.y = frameOffset.y;
|
||||
|
||||
// Render with the frame-specific offset
|
||||
store.renderAnimationFrame(0, showAllSprites.value, frameOffset);
|
||||
}
|
||||
};
|
||||
|
||||
const updateCanvasSize = () => {
|
||||
if (!animCanvas.value) {
|
||||
console.warn('PreviewModal: Cannot update canvas size - canvas not found');
|
||||
return;
|
||||
}
|
||||
|
||||
if (store.cellSize.width && store.cellSize.height) {
|
||||
animCanvas.value.width = store.cellSize.width;
|
||||
animCanvas.value.height = store.cellSize.height;
|
||||
|
||||
// Also update container size
|
||||
updateCanvasContainerSize();
|
||||
} else {
|
||||
console.warn('PreviewModal: Cannot update canvas size - invalid cell dimensions');
|
||||
}
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
store.isModalOpen.value = false;
|
||||
|
||||
// Stop animation if it's playing
|
||||
if (animation.value.isPlaying) {
|
||||
stopAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
const startAnimation = () => {
|
||||
if (sprites.value.length === 0) return;
|
||||
store.startAnimation();
|
||||
};
|
||||
|
||||
const stopAnimation = () => {
|
||||
store.stopAnimation();
|
||||
};
|
||||
|
||||
const handleFrameChange = () => {
|
||||
if (animation.value.isPlaying) {
|
||||
stopAnimation();
|
||||
}
|
||||
// Ensure frame is within bounds
|
||||
currentFrame.value = Math.max(0, Math.min(currentFrame.value, sprites.value.length - 1));
|
||||
updateFrame();
|
||||
};
|
||||
|
||||
const updateFrame = () => {
|
||||
// Ensure frame is within bounds
|
||||
currentFrame.value = Math.max(0, Math.min(currentFrame.value, sprites.value.length - 1));
|
||||
animation.value.currentFrame = currentFrame.value;
|
||||
animation.value.manualUpdate = true;
|
||||
|
||||
// Get the frame-specific offset
|
||||
const frameOffset = store.getSpriteOffset(currentFrame.value);
|
||||
store.renderAnimationFrame(currentFrame.value, showAllSprites.value, frameOffset);
|
||||
};
|
||||
|
||||
const handleFrameRateChange = () => {
|
||||
// If animation is currently playing, restart it with the new frame rate
|
||||
if (animation.value.isPlaying) {
|
||||
stopAnimation();
|
||||
startAnimation();
|
||||
}
|
||||
};
|
||||
|
||||
// Modal drag and resize functionality is now handled by BaseModal
|
||||
|
||||
const initializeCanvas = async () => {
|
||||
// Wait for the next tick to ensure the canvas element is rendered
|
||||
await nextTick();
|
||||
|
||||
if (!animCanvas.value) {
|
||||
console.error('PreviewModal: Animation canvas not found');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const context = animCanvas.value.getContext('2d');
|
||||
if (!context) {
|
||||
console.error('PreviewModal: Failed to get 2D context from animation canvas');
|
||||
return;
|
||||
}
|
||||
|
||||
store.animation.canvas = animCanvas.value;
|
||||
store.animation.ctx = context;
|
||||
} catch (error) {
|
||||
console.error('PreviewModal: Error initializing animation canvas:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Zoom functions
|
||||
const zoomIn = () => {
|
||||
if (previewZoom.value < 5) {
|
||||
previewZoom.value = Math.min(5, previewZoom.value + 0.5);
|
||||
|
||||
// Adjust container size after zoom change
|
||||
nextTick(() => {
|
||||
updateCanvasContainerSize();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const zoomOut = () => {
|
||||
if (previewZoom.value > 1) {
|
||||
previewZoom.value = Math.max(1, previewZoom.value - 0.5);
|
||||
|
||||
// Adjust container size after zoom change
|
||||
nextTick(() => {
|
||||
updateCanvasContainerSize();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const resetZoom = () => {
|
||||
previewZoom.value = 1;
|
||||
viewportOffset.value = { x: 0, y: 0 };
|
||||
|
||||
// Adjust container size after zoom change
|
||||
nextTick(() => {
|
||||
updateCanvasContainerSize();
|
||||
});
|
||||
};
|
||||
|
||||
// Reset sprite position to center
|
||||
const resetSpritePosition = () => {
|
||||
// Get current sprite
|
||||
const currentSprite = sprites.value[currentFrame.value];
|
||||
if (!currentSprite) return;
|
||||
|
||||
// Calculate center position
|
||||
const centerX = Math.max(0, Math.floor((store.cellSize.width - currentSprite.width) / 2));
|
||||
const centerY = Math.max(0, Math.floor((store.cellSize.height - currentSprite.height) / 2));
|
||||
|
||||
// Reset the sprite offset for the current frame to the center position
|
||||
const frameOffset = store.getSpriteOffset(currentFrame.value);
|
||||
frameOffset.x = centerX;
|
||||
frameOffset.y = centerY;
|
||||
|
||||
// Also update the current offset
|
||||
store.currentSpriteOffset.x = centerX;
|
||||
store.currentSpriteOffset.y = centerY;
|
||||
|
||||
// Update the frame to reflect the change
|
||||
updateFrame();
|
||||
|
||||
// Show a notification
|
||||
store.showNotification('Sprite position reset to center');
|
||||
};
|
||||
|
||||
// Update canvas container size based on zoom level
|
||||
const updateCanvasContainerSize = () => {
|
||||
// This ensures the container grows with zoom while keeping the sprite visible
|
||||
if (!store.cellSize.width || !store.cellSize.height) return;
|
||||
|
||||
// We'll update the container if needed through the reactive bindings
|
||||
};
|
||||
|
||||
// Canvas drag functions for moving the sprite within its cell
|
||||
const startCanvasDrag = (e: MouseEvent) => {
|
||||
if (sprites.value.length === 0) return;
|
||||
if (isViewportDragging.value) return;
|
||||
|
||||
isCanvasDragging.value = true;
|
||||
|
||||
// Store initial position
|
||||
canvasDragStart.value = {
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', handleCanvasDrag, { capture: true });
|
||||
window.addEventListener('mouseup', stopCanvasDrag, { capture: true });
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
const handleCanvasDrag = (e: MouseEvent) => {
|
||||
if (!isCanvasDragging.value) return;
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
// Get current sprite
|
||||
const currentSprite = sprites.value[currentFrame.value];
|
||||
if (!currentSprite) return;
|
||||
|
||||
// Calculate delta from last position
|
||||
const deltaX = e.clientX - canvasDragStart.value.x;
|
||||
const deltaY = e.clientY - canvasDragStart.value.y;
|
||||
|
||||
// Only move when delta exceeds the threshold for one pixel movement at current zoom
|
||||
const pixelThreshold = previewZoom.value; // One pixel at current zoom level
|
||||
|
||||
// Get the frame-specific offset
|
||||
const frameOffset = store.getSpriteOffset(currentFrame.value);
|
||||
|
||||
// Calculate the maximum allowed offset
|
||||
const maxOffsetX = Math.max(0, store.cellSize.width - currentSprite.width);
|
||||
const maxOffsetY = Math.max(0, store.cellSize.height - currentSprite.height);
|
||||
|
||||
// Move one pixel at a time when threshold is reached
|
||||
if (Math.abs(deltaX) >= pixelThreshold) {
|
||||
const pixelsToMove = Math.sign(deltaX);
|
||||
const newX = frameOffset.x + pixelsToMove;
|
||||
frameOffset.x = Math.max(0, Math.min(maxOffsetX, newX));
|
||||
|
||||
// Reset the start X position for next pixel move
|
||||
canvasDragStart.value.x = e.clientX;
|
||||
}
|
||||
|
||||
if (Math.abs(deltaY) >= pixelThreshold) {
|
||||
const pixelsToMove = Math.sign(deltaY);
|
||||
const newY = frameOffset.y + pixelsToMove;
|
||||
frameOffset.y = Math.max(0, Math.min(maxOffsetY, newY));
|
||||
|
||||
// Reset the start Y position for next pixel move
|
||||
canvasDragStart.value.y = e.clientY;
|
||||
}
|
||||
|
||||
// Update the current offset to match
|
||||
store.currentSpriteOffset.x = frameOffset.x;
|
||||
store.currentSpriteOffset.y = frameOffset.y;
|
||||
|
||||
// Update the frame
|
||||
updateFrame();
|
||||
|
||||
// Re-render the main view
|
||||
store.renderSpritesheetPreview();
|
||||
});
|
||||
};
|
||||
|
||||
const stopCanvasDrag = (e: MouseEvent) => {
|
||||
if (!isCanvasDragging.value) return;
|
||||
|
||||
isCanvasDragging.value = false;
|
||||
window.removeEventListener('mousemove', handleCanvasDrag, { capture: true });
|
||||
window.removeEventListener('mouseup', stopCanvasDrag, { capture: true });
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
// Canvas viewport navigation functions
|
||||
const startViewportDrag = (e: MouseEvent) => {
|
||||
// Only enable viewport dragging when zoomed in
|
||||
if (previewZoom.value <= 1 || isCanvasDragging.value) return;
|
||||
|
||||
isViewportDragging.value = true;
|
||||
viewportDragStart.value = {
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
};
|
||||
|
||||
// Add temporary event listeners
|
||||
window.addEventListener('mousemove', handleViewportDrag);
|
||||
window.addEventListener('mouseup', stopViewportDrag);
|
||||
|
||||
// Prevent default to avoid text selection
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleViewportDrag = (e: MouseEvent) => {
|
||||
if (!isViewportDragging.value) return;
|
||||
|
||||
const deltaX = e.clientX - viewportDragStart.value.x;
|
||||
const deltaY = e.clientY - viewportDragStart.value.y;
|
||||
|
||||
// Update viewport offset with the delta, scaled by zoom level
|
||||
viewportOffset.value = {
|
||||
x: viewportOffset.value.x + deltaX / previewZoom.value,
|
||||
y: viewportOffset.value.y + deltaY / previewZoom.value,
|
||||
};
|
||||
|
||||
// Reset drag start position
|
||||
viewportDragStart.value = {
|
||||
x: e.clientX,
|
||||
y: e.clientY,
|
||||
};
|
||||
};
|
||||
|
||||
const stopViewportDrag = () => {
|
||||
isViewportDragging.value = false;
|
||||
window.removeEventListener('mousemove', handleViewportDrag);
|
||||
window.removeEventListener('mouseup', stopViewportDrag);
|
||||
};
|
||||
|
||||
// Handle mouse wheel zooming and panning
|
||||
const handleCanvasWheel = (e: WheelEvent) => {
|
||||
// Prevent the default scroll behavior
|
||||
e.preventDefault();
|
||||
|
||||
if (e.ctrlKey) {
|
||||
// Ctrl + wheel = zoom in/out
|
||||
if (e.deltaY < 0) {
|
||||
zoomIn();
|
||||
} else {
|
||||
zoomOut();
|
||||
}
|
||||
} else {
|
||||
// Just wheel = pan when zoomed in
|
||||
if (previewZoom.value > 1) {
|
||||
// Adjust pan amount by zoom level
|
||||
const panFactor = 0.5 / previewZoom.value;
|
||||
|
||||
if (e.shiftKey) {
|
||||
// Shift + wheel = horizontal pan
|
||||
viewportOffset.value.x -= e.deltaY * panFactor;
|
||||
} else {
|
||||
// Regular wheel = vertical pan
|
||||
viewportOffset.value.y -= e.deltaY * panFactor;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
// Initialize canvas with a slight delay to ensure DOM is ready
|
||||
await nextTick();
|
||||
await initializeCanvas();
|
||||
|
||||
// Add event listeners
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
window.removeEventListener('mousemove', handleCanvasDrag);
|
||||
window.removeEventListener('mouseup', stopCanvasDrag);
|
||||
window.removeEventListener('mousemove', handleViewportDrag);
|
||||
window.removeEventListener('mouseup', stopViewportDrag);
|
||||
});
|
||||
|
||||
// Keep currentFrame in sync with animation.currentFrame
|
||||
watch(
|
||||
() => animation.value.currentFrame,
|
||||
newVal => {
|
||||
currentFrame.value = newVal;
|
||||
}
|
||||
);
|
||||
|
||||
// Watch for changes in sprites to update the canvas when new sprites are added
|
||||
watch(
|
||||
() => sprites.value,
|
||||
newSprites => {
|
||||
if (isModalOpen.value && newSprites.length > 0) {
|
||||
updateCanvasSize();
|
||||
updateCanvasContainerSize();
|
||||
store.renderAnimationFrame(currentFrame.value, showAllSprites.value, spriteOffset.value);
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// Watch zoom changes to update container size
|
||||
watch(
|
||||
() => previewZoom.value,
|
||||
() => {
|
||||
updateCanvasContainerSize();
|
||||
}
|
||||
);
|
||||
|
||||
// Watch for changes in border settings to update the preview
|
||||
watch(
|
||||
() => previewBorder.value,
|
||||
() => {
|
||||
if (isModalOpen.value && sprites.value.length > 0) {
|
||||
store.renderAnimationFrame(currentFrame.value, showAllSprites.value, spriteOffset.value);
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// Watch for changes in showAllSprites to update the preview
|
||||
watch(
|
||||
() => showAllSprites.value,
|
||||
() => {
|
||||
if (isModalOpen.value && sprites.value.length > 0) {
|
||||
store.renderAnimationFrame(currentFrame.value, showAllSprites.value, spriteOffset.value);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Expose openModal for external use
|
||||
defineExpose({ openModal });
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #0096ff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #0096ff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Prevent text selection while dragging */
|
||||
.cursor-move {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar styles */
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
/* Cursor styles */
|
||||
.cursor-se-resize {
|
||||
cursor: se-resize;
|
||||
}
|
||||
|
||||
/* Canvas container styles */
|
||||
.canvas-container {
|
||||
margin: auto;
|
||||
transition:
|
||||
min-width 0.2s,
|
||||
min-height 0.2s;
|
||||
}
|
||||
|
||||
.sprite-wrapper {
|
||||
transform-origin: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.pixel-art {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
}
|
||||
</style>
|
||||
@ -1,199 +0,0 @@
|
||||
<template>
|
||||
<BaseModal v-model="isModalOpen" @close="closeModal" :movable="true" :resizable="true" :showBackdrop="false" :showBorder="true">
|
||||
<template #header-icon>
|
||||
<i class="fas fa-cog text-blue-500"></i>
|
||||
</template>
|
||||
<template #header-title>Settings</template>
|
||||
|
||||
<div class="p-6">
|
||||
<!-- Tools Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-tools text-blue-500"></i> Tools</h3>
|
||||
<div class="flex flex-wrap gap-3 mb-6">
|
||||
<button @click="autoArrangeSprites" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">
|
||||
<i class="fas fa-th"></i> Auto arrange
|
||||
</button>
|
||||
<button @click="openPreviewModal" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-blue-600 hover:border-blue-600">
|
||||
<i class="fas fa-play"></i> Preview animation
|
||||
</button>
|
||||
<button @click="downloadSpritesheet" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:border-blue-500">
|
||||
<i class="fas fa-download"></i> Download
|
||||
</button>
|
||||
<button @click="confirmClearAll" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-red-600 border border-red-600 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-red-700 hover:border-red-700">
|
||||
<i class="fas fa-trash-alt"></i> Clear all
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Layout Controls Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-th text-blue-500"></i> Layout controls</h3>
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm text-gray-400 mb-2">Column Count</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="range" min="1" max="10" v-model.number="columnCount" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />
|
||||
<span class="text-gray-200 font-medium w-8 text-center">{{ columnCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="applyColumnCount" class="flex items-center gap-2 bg-blue-500 text-white border border-blue-500 rounded px-4 py-2 text-sm transition-colors hover:bg-blue-600 hover:border-blue-600"><i class="fas fa-check"></i> Apply layout</button>
|
||||
</div>
|
||||
|
||||
<!-- Zoom Controls Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-search text-blue-500"></i> Zoom controls</h3>
|
||||
<div class="flex flex-wrap gap-3 mb-6">
|
||||
<button @click="zoomIn" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-plus"></i> Zoom in</button>
|
||||
<button @click="zoomOut" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-search-minus"></i> Zoom out</button>
|
||||
<button @click="resetZoom" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-undo"></i> Reset zoom</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Border Settings Section -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-border-style text-blue-500"></i> Preview border</h3>
|
||||
<div class="mb-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="text-sm text-gray-400">Enable border (preview only)</label>
|
||||
<div class="relative inline-block w-10 align-middle select-none">
|
||||
<input type="checkbox" v-model="previewBorder.enabled" id="toggle-border" class="sr-only" />
|
||||
<label for="toggle-border" class="block h-6 rounded-full bg-gray-600 cursor-pointer"></label>
|
||||
<div :class="{ 'translate-x-4': previewBorder.enabled, 'translate-x-0': !previewBorder.enabled }" class="absolute left-0 top-0 w-6 h-6 rounded-full bg-white border border-gray-300 transform transition-transform duration-200 ease-in-out"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mt-4" v-if="previewBorder.enabled">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-2">Border color</label>
|
||||
<input type="color" v-model="previewBorder.color" class="w-full h-8 bg-gray-700 rounded cursor-pointer" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-400 mb-2">Border width: {{ previewBorder.width }}px</label>
|
||||
<input type="range" v-model.number="previewBorder.width" min="1" max="10" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-400 mt-2"><i class="fas fa-info-circle mr-1"></i> Border will only be visible in the preview and won't be included in the downloaded spritesheet.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Shortcuts Section -->
|
||||
<div>
|
||||
<h3 class="text-lg font-medium text-gray-200 mb-4 flex items-center gap-2"><i class="fas fa-keyboard text-blue-500"></i> Keyboard shortcuts</h3>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-400">
|
||||
<kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Shift + Drag</kbd>
|
||||
<span>Fine-tune position</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-400">
|
||||
<kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Space</kbd>
|
||||
<span>Play/Pause animation</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-400">
|
||||
<kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">Esc</kbd>
|
||||
<span>Close preview</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-400">
|
||||
<kbd class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-xs font-mono">←/→</kbd>
|
||||
<span>Navigate frames</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
import BaseModal from './BaseModal.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const sprites = computed(() => store.sprites.value);
|
||||
const isModalOpen = computed({
|
||||
get: () => store.isSettingsModalOpen.value,
|
||||
set: value => {
|
||||
store.isSettingsModalOpen.value = value;
|
||||
},
|
||||
});
|
||||
const previewBorder = computed(() => store.previewBorder);
|
||||
|
||||
// Column count control
|
||||
const columnCount = ref(store.columns.value);
|
||||
|
||||
const closeModal = () => {
|
||||
store.isSettingsModalOpen.value = false;
|
||||
};
|
||||
|
||||
const openPreviewModal = () => {
|
||||
if (store.sprites.value.length === 0) {
|
||||
store.showNotification('Please add sprites first', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Close settings modal and open preview modal
|
||||
closeModal();
|
||||
store.isModalOpen.value = true;
|
||||
};
|
||||
|
||||
const confirmClearAll = () => {
|
||||
if (confirm('Are you sure you want to clear all sprites?')) {
|
||||
store.clearAllSprites();
|
||||
store.showNotification('All sprites cleared');
|
||||
}
|
||||
};
|
||||
|
||||
// Expose store methods directly
|
||||
const { autoArrangeSprites, downloadSpritesheet, zoomIn, zoomOut, resetZoom } = store;
|
||||
|
||||
// Apply column count changes
|
||||
const applyColumnCount = () => {
|
||||
store.columns.value = columnCount.value;
|
||||
store.updateCanvasSize();
|
||||
store.autoArrangeSprites();
|
||||
store.showNotification(`Column count updated to ${columnCount.value}`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Toggle switch styles */
|
||||
input[type='checkbox'] + label {
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
input[type='checkbox']:checked + label {
|
||||
background-color: #0096ff;
|
||||
}
|
||||
|
||||
/* Range input styles */
|
||||
input[type='range']::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #0096ff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type='range']::-moz-range-thumb {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #0096ff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Color input styles */
|
||||
input[type='color'] {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input[type='color']::-webkit-color-swatch-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type='color']::-webkit-color-swatch {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -1,106 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- Upload Card -->
|
||||
<div class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||||
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold">
|
||||
<i class="fas fa-upload text-blue-500"></i>
|
||||
<span>Upload sprites</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<drop-zone @files-uploaded="handleUpload" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||||
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold">
|
||||
<i class="fas fa-bolt text-blue-500"></i>
|
||||
<span>Quick Actions</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
<div class="flex flex-col gap-3">
|
||||
<button @click="openSpritesModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500">
|
||||
<i class="fas fa-images"></i> Manage sprites
|
||||
<span v-if="sprites.length > 0" class="ml-auto bg-blue-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
|
||||
{{ sprites.length }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button @click="openSettingsModal" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-cog"></i> Settings & tools</button>
|
||||
|
||||
<button @click="openPreviewModal" :disabled="sprites.length === 0" class="flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors disabled:opacity-60 disabled:cursor-not-allowed hover:bg-blue-600 hover:border-blue-600">
|
||||
<i class="fas fa-play"></i> Preview animation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Card -->
|
||||
<div v-if="sprites.length > 0" class="bg-gray-800 rounded-lg shadow-md overflow-hidden">
|
||||
<div class="flex items-center justify-between p-4 bg-gray-700 border-b border-gray-600">
|
||||
<div class="flex items-center gap-2 text-lg font-semibold">
|
||||
<i class="fas fa-chart-bar text-blue-500"></i>
|
||||
<span>Stats</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-gray-700 p-3 rounded">
|
||||
<div class="text-sm text-gray-400">Sprites</div>
|
||||
<div class="text-xl font-semibold">{{ sprites.length }}</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 p-3 rounded">
|
||||
<div class="text-sm text-gray-400">Cell Size</div>
|
||||
<div class="text-xl font-semibold">{{ cellSize.width }}×{{ cellSize.height }}</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 p-3 rounded">
|
||||
<div class="text-sm text-gray-400">Zoom</div>
|
||||
<div class="text-xl font-semibold">{{ Math.round(zoomLevel * 100) }}%</div>
|
||||
</div>
|
||||
<div class="bg-gray-700 p-3 rounded">
|
||||
<div class="text-sm text-gray-400">Columns</div>
|
||||
<div class="text-xl font-semibold">{{ columns }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { type Sprite, useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
import DropZone from './DropZone.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const sprites = computed(() => store.sprites.value);
|
||||
const cellSize = computed(() => store.cellSize);
|
||||
const zoomLevel = computed(() => store.zoomLevel.value);
|
||||
const columns = computed(() => store.columns.value);
|
||||
|
||||
const handleUpload = (sprites: Sprite[]) => {
|
||||
// The dropzone component handles adding sprites to the store
|
||||
// This is just for event handling if needed
|
||||
};
|
||||
|
||||
const openPreviewModal = () => {
|
||||
if (store.sprites.value.length === 0) {
|
||||
store.showNotification('Please add sprites first', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
store.isModalOpen.value = true;
|
||||
};
|
||||
|
||||
const openSpritesModal = () => {
|
||||
store.isSpritesModalOpen.value = true;
|
||||
};
|
||||
|
||||
const openSettingsModal = () => {
|
||||
store.isSettingsModalOpen.value = true;
|
||||
};
|
||||
</script>
|
||||
234
src/components/SpriteCanvas.vue
Normal file
234
src/components/SpriteCanvas.vue
Normal file
@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
<input id="pixel-perfect" type="checkbox" v-model="pixelPerfect" class="mr-2" @change="drawCanvas" />
|
||||
<label for="pixel-perfect">Pixel perfect rendering (for pixel art)</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative border border-gray-300 rounded-lg">
|
||||
<canvas ref="canvasRef" @mousedown="startDrag" @mousemove="drag" @mouseup="stopDrag" @mouseleave="stopDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag" class="w-full"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, computed } from 'vue';
|
||||
|
||||
interface Sprite {
|
||||
id: string;
|
||||
img: HTMLImageElement;
|
||||
width: number;
|
||||
height: number;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
sprites: Sprite[];
|
||||
columns: number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'updateSprite', id: string, x: number, y: number): void;
|
||||
}>();
|
||||
|
||||
// Pixel art optimization
|
||||
const pixelPerfect = ref(true);
|
||||
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null);
|
||||
const ctx = ref<CanvasRenderingContext2D | null>(null);
|
||||
|
||||
// Dragging state
|
||||
const isDragging = ref(false);
|
||||
const activeSpriteId = ref<string | null>(null);
|
||||
const dragStartX = ref(0);
|
||||
const dragStartY = ref(0);
|
||||
const spritePosBeforeDrag = ref({ x: 0, y: 0 });
|
||||
|
||||
const spritePositions = computed(() => {
|
||||
if (!canvasRef.value) return [];
|
||||
|
||||
const { maxWidth, maxHeight } = calculateMaxDimensions();
|
||||
|
||||
return props.sprites.map((sprite, index) => {
|
||||
const col = index % props.columns;
|
||||
const row = Math.floor(index / props.columns);
|
||||
|
||||
return {
|
||||
id: sprite.id,
|
||||
canvasX: col * maxWidth + sprite.x,
|
||||
canvasY: row * maxHeight + sprite.y,
|
||||
cellX: col * maxWidth,
|
||||
cellY: row * maxHeight,
|
||||
width: sprite.width,
|
||||
height: sprite.height,
|
||||
maxWidth,
|
||||
maxHeight,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
const calculateMaxDimensions = () => {
|
||||
let maxWidth = 0;
|
||||
let maxHeight = 0;
|
||||
|
||||
props.sprites.forEach(sprite => {
|
||||
maxWidth = Math.max(maxWidth, sprite.width);
|
||||
maxHeight = Math.max(maxHeight, sprite.height);
|
||||
});
|
||||
|
||||
return { maxWidth, maxHeight };
|
||||
};
|
||||
|
||||
const startDrag = (event: MouseEvent) => {
|
||||
if (!canvasRef.value) return;
|
||||
|
||||
const rect = canvasRef.value.getBoundingClientRect();
|
||||
const scaleX = canvasRef.value.width / rect.width;
|
||||
const scaleY = canvasRef.value.height / rect.height;
|
||||
|
||||
const mouseX = (event.clientX - rect.left) * scaleX;
|
||||
const mouseY = (event.clientY - rect.top) * scaleY;
|
||||
|
||||
const clickedSprite = findSpriteAtPosition(mouseX, mouseY);
|
||||
|
||||
if (clickedSprite) {
|
||||
isDragging.value = true;
|
||||
activeSpriteId.value = clickedSprite.id;
|
||||
dragStartX.value = mouseX;
|
||||
dragStartY.value = mouseY;
|
||||
|
||||
// Find current sprite position
|
||||
const sprite = props.sprites.find(s => s.id === clickedSprite.id);
|
||||
if (sprite) {
|
||||
spritePosBeforeDrag.value = { x: sprite.x, y: sprite.y };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const drag = (event: MouseEvent) => {
|
||||
if (!isDragging.value || !activeSpriteId.value || !canvasRef.value) return;
|
||||
|
||||
const rect = canvasRef.value.getBoundingClientRect();
|
||||
const scaleX = canvasRef.value.width / rect.width;
|
||||
const scaleY = canvasRef.value.height / rect.height;
|
||||
|
||||
const mouseX = (event.clientX - rect.left) * scaleX;
|
||||
const mouseY = (event.clientY - rect.top) * scaleY;
|
||||
|
||||
const deltaX = mouseX - dragStartX.value;
|
||||
const deltaY = mouseY - dragStartY.value;
|
||||
|
||||
// Calculate new position with constraints
|
||||
const spriteIndex = props.sprites.findIndex(s => s.id === activeSpriteId.value);
|
||||
if (spriteIndex === -1) return;
|
||||
|
||||
const position = spritePositions.value.find(pos => pos.id === activeSpriteId.value);
|
||||
if (!position) return;
|
||||
|
||||
let newX = spritePosBeforeDrag.value.x + deltaX;
|
||||
let newY = spritePosBeforeDrag.value.y + deltaY;
|
||||
|
||||
// Constrain movement strictly within cell
|
||||
newX = Math.max(0, Math.min(position.maxWidth - props.sprites[spriteIndex].width, newX));
|
||||
newY = Math.max(0, Math.min(position.maxHeight - props.sprites[spriteIndex].height, newY));
|
||||
|
||||
emit('updateSprite', activeSpriteId.value, newX, newY);
|
||||
drawCanvas();
|
||||
};
|
||||
|
||||
const stopDrag = () => {
|
||||
isDragging.value = false;
|
||||
activeSpriteId.value = null;
|
||||
};
|
||||
|
||||
const handleTouchStart = (event: TouchEvent) => {
|
||||
if (event.touches.length === 1) {
|
||||
const touch = event.touches[0];
|
||||
const mouseEvent = new MouseEvent('mousedown', {
|
||||
clientX: touch.clientX,
|
||||
clientY: touch.clientY,
|
||||
});
|
||||
startDrag(mouseEvent);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchMove = (event: TouchEvent) => {
|
||||
if (event.touches.length === 1) {
|
||||
const touch = event.touches[0];
|
||||
const mouseEvent = new MouseEvent('mousemove', {
|
||||
clientX: touch.clientX,
|
||||
clientY: touch.clientY,
|
||||
});
|
||||
drag(mouseEvent);
|
||||
}
|
||||
};
|
||||
|
||||
const findSpriteAtPosition = (x: number, y: number) => {
|
||||
// Search in reverse order to get the topmost sprite first
|
||||
for (let i = spritePositions.value.length - 1; i >= 0; i--) {
|
||||
const pos = spritePositions.value[i];
|
||||
const sprite = props.sprites.find(s => s.id === pos.id);
|
||||
|
||||
if (!sprite) continue;
|
||||
|
||||
if (x >= pos.canvasX && x <= pos.canvasX + sprite.width && y >= pos.canvasY && y <= pos.canvasY + sprite.height) {
|
||||
return sprite;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const drawCanvas = () => {
|
||||
if (!canvasRef.value || !ctx.value) return;
|
||||
|
||||
const { maxWidth, maxHeight } = calculateMaxDimensions();
|
||||
|
||||
// Set canvas size
|
||||
const rows = Math.ceil(props.sprites.length / props.columns);
|
||||
canvasRef.value.width = maxWidth * props.columns;
|
||||
canvasRef.value.height = maxHeight * rows;
|
||||
|
||||
// Clear canvas
|
||||
ctx.value.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
|
||||
|
||||
// Set pixel art optimization
|
||||
if (pixelPerfect.value) {
|
||||
ctx.value.imageSmoothingEnabled = false;
|
||||
} else {
|
||||
ctx.value.imageSmoothingEnabled = true;
|
||||
}
|
||||
|
||||
// Draw grid
|
||||
ctx.value.strokeStyle = '#e5e7eb';
|
||||
for (let col = 0; col < props.columns; col++) {
|
||||
for (let row = 0; row < rows; row++) {
|
||||
ctx.value.strokeRect(col * maxWidth, row * maxHeight, maxWidth, maxHeight);
|
||||
}
|
||||
}
|
||||
|
||||
// Draw sprites
|
||||
props.sprites.forEach((sprite, index) => {
|
||||
const col = index % props.columns;
|
||||
const row = Math.floor(index / props.columns);
|
||||
|
||||
const cellX = col * maxWidth;
|
||||
const cellY = row * maxHeight;
|
||||
|
||||
// Draw sprite
|
||||
ctx.value?.drawImage(sprite.img, cellX + sprite.x, cellY + sprite.y);
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (canvasRef.value) {
|
||||
ctx.value = canvasRef.value.getContext('2d');
|
||||
drawCanvas();
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.sprites, drawCanvas, { deep: true });
|
||||
watch(() => props.columns, drawCanvas);
|
||||
</script>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div v-if="sprites.length === 0" class="text-center text-gray-400 py-8">No sprites uploaded yet</div>
|
||||
|
||||
<div v-else class="grid grid-cols-2 gap-3 max-h-72 overflow-y-auto p-4">
|
||||
<div v-for="(sprite, index) in sprites" :key="sprite.id" @click="$emit('spriteClicked', sprite.id)" class="border border-gray-600 rounded bg-gray-700 p-2 text-center transition-all cursor-pointer hover:border-blue-500 hover:-translate-y-0.5 hover:shadow-md">
|
||||
<img :src="sprite.img.src" :alt="sprite.name" class="max-w-full max-h-16 mx-auto mb-2 bg-black bg-opacity-20 rounded" />
|
||||
<div class="text-xs text-gray-400 truncate">{{ index + 1 }}. {{ truncateName(sprite.name) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Sprite } from '../composables/useSpritesheetStore';
|
||||
|
||||
defineProps<{
|
||||
sprites: Sprite[];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
spriteClicked: [id: string];
|
||||
}>();
|
||||
|
||||
const truncateName = (name: string) => {
|
||||
return name.length > 10 ? `${name.substring(0, 10)}...` : name;
|
||||
};
|
||||
</script>
|
||||
@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<BaseModal v-model="isModalOpen" @close="closeModal" :movable="true" :resizable="true" :showBackdrop="false" :showBorder="true">
|
||||
<template #header-icon>
|
||||
<i class="fas fa-images text-blue-500"></i>
|
||||
</template>
|
||||
<template #header-title>Sprites</template>
|
||||
|
||||
<div class="p-6">
|
||||
<!-- Sprites List -->
|
||||
<div v-if="sprites.length === 0" class="text-center text-gray-400 py-8">
|
||||
<i class="fas fa-image text-4xl mb-4 opacity-30"></i>
|
||||
<p>No sprites uploaded yet</p>
|
||||
<button @click="showUploadSection" class="mt-4 flex items-center gap-2 bg-blue-500 border border-blue-500 text-white rounded px-4 py-2 text-sm transition-colors mx-auto hover:bg-blue-600 hover:border-blue-600"><i class="fas fa-upload"></i> Upload sprites</button>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-medium text-gray-200 flex items-center gap-2"><i class="fas fa-images text-blue-500"></i> Uploaded Sprites</h3>
|
||||
<span class="text-sm text-gray-400">{{ sprites.length }} sprites</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-4 max-h-96 overflow-y-auto p-2">
|
||||
<div v-for="(sprite, index) in sprites" :key="sprite.id" @click="handleSpriteClick(sprite.id)" class="border border-gray-600 rounded bg-gray-700 p-3 text-center transition-all cursor-pointer hover:border-blue-500 hover:-translate-y-0.5 hover:shadow-md">
|
||||
<img :src="sprite.img.src" :alt="sprite.name" class="max-w-full max-h-20 mx-auto mb-2 bg-black bg-opacity-20 rounded" />
|
||||
<div class="text-xs text-gray-400 truncate">{{ index + 1 }}. {{ truncateName(sprite.name) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3 mt-6">
|
||||
<button @click="showUploadSection" class="flex items-center gap-2 bg-gray-700 text-gray-200 border border-gray-600 rounded px-4 py-2 text-sm transition-colors hover:border-blue-500"><i class="fas fa-upload"></i> Upload more</button>
|
||||
<button @click="confirmClearAll" class="flex items-center gap-2 bg-red-600 border border-red-600 text-white rounded px-4 py-2 text-sm transition-colors hover:bg-red-700 hover:border-red-700"><i class="fas fa-trash-alt"></i> Clear all</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useSpritesheetStore } from '../composables/useSpritesheetStore';
|
||||
import BaseModal from './BaseModal.vue';
|
||||
|
||||
const store = useSpritesheetStore();
|
||||
const sprites = computed(() => store.sprites.value);
|
||||
const isModalOpen = computed({
|
||||
get: () => store.isSpritesModalOpen.value,
|
||||
set: value => {
|
||||
store.isSpritesModalOpen.value = value;
|
||||
},
|
||||
});
|
||||
|
||||
const closeModal = () => {
|
||||
store.isSpritesModalOpen.value = false;
|
||||
};
|
||||
|
||||
const handleSpriteClick = (spriteId: string) => {
|
||||
store.highlightSprite(spriteId);
|
||||
};
|
||||
|
||||
const showUploadSection = () => {
|
||||
// Close sprites modal and focus on upload section
|
||||
closeModal();
|
||||
};
|
||||
|
||||
const confirmClearAll = () => {
|
||||
if (confirm('Are you sure you want to clear all sprites?')) {
|
||||
store.clearAllSprites();
|
||||
store.showNotification('All sprites cleared');
|
||||
}
|
||||
};
|
||||
|
||||
const truncateName = (name: string) => {
|
||||
return name.length > 15 ? `${name.substring(0, 15)}...` : name;
|
||||
};
|
||||
</script>
|
||||
@ -1,141 +0,0 @@
|
||||
<template>
|
||||
<div class="relative inline-block">
|
||||
<div @mouseenter="showTooltip" @mouseleave="hideTooltip">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-show="isVisible" ref="tooltipEl" class="tooltip fixed z-50 px-2 py-1 text-xs font-medium text-white bg-gray-800 rounded shadow-lg whitespace-nowrap" :style="tooltipStyle">
|
||||
{{ text }}
|
||||
<div class="absolute w-2 h-2 bg-gray-800 transform rotate-45" :style="arrowStyle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
text: string;
|
||||
position?: 'top' | 'right' | 'bottom' | 'left';
|
||||
offset?: number;
|
||||
}>();
|
||||
|
||||
const isVisible = ref(false);
|
||||
const tooltipEl = ref<HTMLElement | null>(null);
|
||||
const position = computed(() => props.position || 'top');
|
||||
const offset = computed(() => props.offset || 8);
|
||||
|
||||
// Dynamic styles for tooltip and arrow
|
||||
const tooltipStyle = ref({
|
||||
left: '0px',
|
||||
top: '0px',
|
||||
});
|
||||
|
||||
const arrowStyle = ref({
|
||||
left: '50%',
|
||||
top: '100%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
});
|
||||
|
||||
const updatePosition = (event: MouseEvent) => {
|
||||
if (!isVisible.value || !tooltipEl.value) return;
|
||||
|
||||
const tooltip = tooltipEl.value;
|
||||
const tooltipRect = tooltip.getBoundingClientRect();
|
||||
const padding = 10; // Padding from screen edges
|
||||
|
||||
let left = event.clientX;
|
||||
let top = event.clientY;
|
||||
|
||||
// Calculate positions based on available space
|
||||
const spaceAbove = top;
|
||||
const spaceBelow = window.innerHeight - top;
|
||||
const spaceLeft = left;
|
||||
const spaceRight = window.innerWidth - left;
|
||||
|
||||
// Determine best position
|
||||
let finalPosition = position.value;
|
||||
if (finalPosition === 'top' && spaceAbove < tooltipRect.height + padding) {
|
||||
finalPosition = spaceBelow > tooltipRect.height + padding ? 'bottom' : 'right';
|
||||
} else if (finalPosition === 'bottom' && spaceBelow < tooltipRect.height + padding) {
|
||||
finalPosition = spaceAbove > tooltipRect.height + padding ? 'top' : 'right';
|
||||
} else if (finalPosition === 'left' && spaceLeft < tooltipRect.width + padding) {
|
||||
finalPosition = spaceRight > tooltipRect.width + padding ? 'right' : 'top';
|
||||
} else if (finalPosition === 'right' && spaceRight < tooltipRect.width + padding) {
|
||||
finalPosition = spaceLeft > tooltipRect.width + padding ? 'left' : 'top';
|
||||
}
|
||||
|
||||
// Position tooltip based on final position
|
||||
switch (finalPosition) {
|
||||
case 'top':
|
||||
left -= tooltipRect.width / 2;
|
||||
top -= tooltipRect.height + offset.value;
|
||||
arrowStyle.value = {
|
||||
left: '50%',
|
||||
top: '100%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
};
|
||||
break;
|
||||
case 'bottom':
|
||||
left -= tooltipRect.width / 2;
|
||||
top += offset.value;
|
||||
arrowStyle.value = {
|
||||
left: '50%',
|
||||
top: '0',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
};
|
||||
break;
|
||||
case 'left':
|
||||
left -= tooltipRect.width + offset.value;
|
||||
top -= tooltipRect.height / 2;
|
||||
arrowStyle.value = {
|
||||
left: '100%',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
};
|
||||
break;
|
||||
case 'right':
|
||||
left += offset.value;
|
||||
top -= tooltipRect.height / 2;
|
||||
arrowStyle.value = {
|
||||
left: '0',
|
||||
top: '50%',
|
||||
transform: 'translate(-50%, -50%) rotate(45deg)',
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
||||
// Ensure tooltip stays within screen bounds
|
||||
left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding));
|
||||
top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding));
|
||||
|
||||
tooltipStyle.value = {
|
||||
left: `${left}px`,
|
||||
top: `${top}px`,
|
||||
};
|
||||
};
|
||||
|
||||
const showTooltip = (event: MouseEvent) => {
|
||||
isVisible.value = true;
|
||||
// Wait for next tick to ensure tooltip is rendered
|
||||
setTimeout(() => updatePosition(event), 0);
|
||||
};
|
||||
|
||||
const hideTooltip = () => {
|
||||
isVisible.value = false;
|
||||
};
|
||||
|
||||
// Track mouse movement when tooltip is visible
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
if (isVisible.value) {
|
||||
updatePosition(event);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
});
|
||||
</script>
|
||||
@ -1,669 +0,0 @@
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
|
||||
export interface Sprite {
|
||||
img: HTMLImageElement;
|
||||
width: number;
|
||||
height: number;
|
||||
x: number;
|
||||
y: number;
|
||||
name: string;
|
||||
id: string;
|
||||
uploadOrder: number;
|
||||
}
|
||||
|
||||
export interface CellSize {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface AnimationState {
|
||||
canvas: HTMLCanvasElement | null;
|
||||
ctx: CanvasRenderingContext2D | null;
|
||||
currentFrame: number;
|
||||
isPlaying: boolean;
|
||||
frameRate: number;
|
||||
lastFrameTime: number;
|
||||
animationId: number | null;
|
||||
slider: HTMLInputElement | null;
|
||||
manualUpdate: boolean;
|
||||
}
|
||||
|
||||
const sprites = ref<Sprite[]>([]);
|
||||
const canvas = ref<HTMLCanvasElement | null>(null);
|
||||
const ctx = ref<CanvasRenderingContext2D | null>(null);
|
||||
const cellSize = reactive<CellSize>({ width: 0, height: 0 });
|
||||
const columns = ref(4); // Default number of columns
|
||||
const draggedSprite = ref<Sprite | null>(null);
|
||||
const dragOffset = reactive({ x: 0, y: 0 });
|
||||
const isShiftPressed = ref(false);
|
||||
const isModalOpen = ref(false);
|
||||
const isSettingsModalOpen = ref(false);
|
||||
const isSpritesModalOpen = ref(false);
|
||||
const isHelpModalOpen = ref(false);
|
||||
const zoomLevel = ref(1); // Default zoom level (1 = 100%)
|
||||
|
||||
// Preview border settings
|
||||
const previewBorder = reactive({
|
||||
enabled: false,
|
||||
color: '#ff0000', // Default red color
|
||||
width: 2, // Default width in pixels
|
||||
});
|
||||
|
||||
export function useSpritesheetStore() {
|
||||
const animation = reactive<AnimationState>({
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
currentFrame: 0,
|
||||
isPlaying: false,
|
||||
frameRate: 10,
|
||||
lastFrameTime: 0,
|
||||
animationId: null,
|
||||
slider: null,
|
||||
manualUpdate: false,
|
||||
});
|
||||
|
||||
const notification = reactive({
|
||||
isVisible: false,
|
||||
message: '',
|
||||
type: 'success' as 'success' | 'error',
|
||||
});
|
||||
|
||||
function addSprites(newSprites: Sprite[]) {
|
||||
if (newSprites.length === 0) {
|
||||
console.warn('Store: Attempted to add empty sprites array');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Validate sprites before adding them
|
||||
const validSprites = newSprites.filter(sprite => {
|
||||
if (!sprite.img || sprite.width <= 0 || sprite.height <= 0) {
|
||||
console.error('Store: Invalid sprite detected', sprite);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (validSprites.length === 0) {
|
||||
console.error('Store: No valid sprites to add');
|
||||
return;
|
||||
}
|
||||
|
||||
sprites.value.push(...validSprites);
|
||||
sprites.value.sort((a, b) => a.uploadOrder - b.uploadOrder);
|
||||
updateCellSize();
|
||||
autoArrangeSprites();
|
||||
} catch (error) {
|
||||
console.error('Store: Error adding sprites:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateCellSize() {
|
||||
if (sprites.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
let maxWidth = 0;
|
||||
let maxHeight = 0;
|
||||
|
||||
sprites.value.forEach(sprite => {
|
||||
if (sprite.width <= 0 || sprite.height <= 0) {
|
||||
console.warn('Store: Sprite with invalid dimensions detected', sprite);
|
||||
return;
|
||||
}
|
||||
maxWidth = Math.max(maxWidth, sprite.width);
|
||||
maxHeight = Math.max(maxHeight, sprite.height);
|
||||
});
|
||||
|
||||
if (maxWidth === 0 || maxHeight === 0) {
|
||||
console.error('Store: Failed to calculate valid cell size');
|
||||
return;
|
||||
}
|
||||
|
||||
cellSize.width = maxWidth;
|
||||
cellSize.height = maxHeight;
|
||||
|
||||
updateCanvasSize();
|
||||
} catch (error) {
|
||||
console.error('Store: Error updating cell size:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateCanvasSize() {
|
||||
if (!canvas.value) {
|
||||
console.warn('Store: Canvas not available for size update');
|
||||
return;
|
||||
}
|
||||
|
||||
if (sprites.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const totalSprites = sprites.value.length;
|
||||
const cols = columns.value;
|
||||
const rows = Math.ceil(totalSprites / cols);
|
||||
|
||||
if (cellSize.width <= 0 || cellSize.height <= 0) {
|
||||
console.error('Store: Invalid cell size for canvas update', cellSize);
|
||||
return;
|
||||
}
|
||||
|
||||
const newWidth = cols * cellSize.width;
|
||||
const newHeight = rows * cellSize.height;
|
||||
|
||||
// Ensure the canvas is large enough to display all sprites
|
||||
if (canvas.value.width !== newWidth || canvas.value.height !== newHeight) {
|
||||
canvas.value.width = newWidth;
|
||||
canvas.value.height = newHeight;
|
||||
|
||||
// Emit an event to update the wrapper dimensions
|
||||
window.dispatchEvent(
|
||||
new CustomEvent('canvas-size-updated', {
|
||||
detail: { width: newWidth, height: newHeight },
|
||||
})
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Store: Error updating canvas size:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function autoArrangeSprites() {
|
||||
if (sprites.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (cellSize.width <= 0 || cellSize.height <= 0) {
|
||||
console.error('Store: Invalid cell size for auto-arranging', cellSize);
|
||||
return;
|
||||
}
|
||||
|
||||
// First update the canvas size to ensure it's large enough
|
||||
updateCanvasSize();
|
||||
|
||||
// Then position each sprite in its grid cell
|
||||
sprites.value.forEach((sprite, index) => {
|
||||
const column = index % columns.value;
|
||||
const row = Math.floor(index / columns.value);
|
||||
|
||||
sprite.x = column * cellSize.width;
|
||||
sprite.y = row * cellSize.height;
|
||||
});
|
||||
|
||||
// Check if the canvas is ready before attempting to render
|
||||
if (!ctx.value || !canvas.value) {
|
||||
console.warn('Store: Canvas or context not available for rendering after auto-arrange');
|
||||
return;
|
||||
}
|
||||
|
||||
renderSpritesheetPreview();
|
||||
|
||||
if (!animation.isPlaying && animation.manualUpdate && isModalOpen.value) {
|
||||
renderAnimationFrame(animation.currentFrame);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Store: Error auto-arranging sprites:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function renderSpritesheetPreview(showGrid = true) {
|
||||
if (!ctx.value || !canvas.value) {
|
||||
console.error('Store: Canvas or context not available for rendering, will retry when ready');
|
||||
setTimeout(() => {
|
||||
if (ctx.value && canvas.value) {
|
||||
renderSpritesheetPreview(showGrid);
|
||||
}
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
if (sprites.value.length === 0) return;
|
||||
|
||||
try {
|
||||
// Make sure the canvas size is correct before rendering
|
||||
updateCanvasSize();
|
||||
|
||||
// Clear the canvas
|
||||
ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
|
||||
|
||||
if (showGrid) {
|
||||
drawGrid();
|
||||
}
|
||||
|
||||
// First, collect all occupied cells
|
||||
const occupiedCells = new Set<string>();
|
||||
sprites.value.forEach(sprite => {
|
||||
const cellX = Math.floor(sprite.x / cellSize.width);
|
||||
const cellY = Math.floor(sprite.y / cellSize.height);
|
||||
occupiedCells.add(`${cellX},${cellY}`);
|
||||
});
|
||||
|
||||
// Draw each sprite - remove the zoom scaling from context
|
||||
sprites.value.forEach((sprite, index) => {
|
||||
try {
|
||||
if (!sprite.img) {
|
||||
console.warn(`Store: Sprite at index ${index} has no image, skipping render`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if sprite is within canvas bounds
|
||||
if (sprite.x >= 0 && sprite.y >= 0 && sprite.x + sprite.width <= canvas.value!.width && sprite.y + sprite.height <= canvas.value!.height) {
|
||||
if (sprite.img.complete && sprite.img.naturalWidth !== 0) {
|
||||
// For pixel art, ensure we're drawing at exact pixel boundaries
|
||||
const x = Math.round(sprite.x);
|
||||
const y = Math.round(sprite.y);
|
||||
|
||||
// Get the frame-specific offset for this sprite
|
||||
const frameOffset = getSpriteOffset(index);
|
||||
|
||||
// Apply the frame-specific offset to the sprite position
|
||||
const finalX = x + frameOffset.x;
|
||||
const finalY = y + frameOffset.y;
|
||||
|
||||
// Draw the image at its final position with pixel-perfect rendering
|
||||
ctx.value!.imageSmoothingEnabled = false; // Keep pixel art sharp
|
||||
ctx.value!.drawImage(sprite.img, finalX, finalY, sprite.width, sprite.height);
|
||||
} else {
|
||||
console.warn(`Store: Sprite image ${index} not fully loaded, setting onload handler`);
|
||||
sprite.img.onload = () => {
|
||||
if (ctx.value && canvas.value) {
|
||||
// For pixel art, ensure we're drawing at exact pixel boundaries
|
||||
const x = Math.round(sprite.x);
|
||||
const y = Math.round(sprite.y);
|
||||
|
||||
// Get the frame-specific offset for this sprite
|
||||
const frameOffset = getSpriteOffset(index);
|
||||
|
||||
// Apply the frame-specific offset to the sprite position
|
||||
const finalX = x + frameOffset.x;
|
||||
const finalY = y + frameOffset.y;
|
||||
|
||||
ctx.value.imageSmoothingEnabled = false; // Keep pixel art sharp
|
||||
ctx.value.drawImage(sprite.img, finalX, finalY, sprite.width, sprite.height);
|
||||
}
|
||||
};
|
||||
}
|
||||
} else {
|
||||
console.warn(`Store: Sprite at index ${index} is outside canvas bounds: sprite(${sprite.x},${sprite.y}) canvas(${canvas.value!.width},${canvas.value!.height})`);
|
||||
}
|
||||
} catch (spriteError) {
|
||||
console.error(`Store: Error rendering sprite at index ${index}:`, spriteError);
|
||||
}
|
||||
});
|
||||
|
||||
// Draw borders around occupied cells if enabled (preview only)
|
||||
if (previewBorder.enabled && occupiedCells.size > 0) {
|
||||
ctx.value!.strokeStyle = previewBorder.color;
|
||||
ctx.value!.lineWidth = previewBorder.width / zoomLevel.value; // Adjust for zoom
|
||||
|
||||
// Draw borders around each occupied cell
|
||||
occupiedCells.forEach(cellKey => {
|
||||
const [cellX, cellY] = cellKey.split(',').map(Number);
|
||||
|
||||
// Calculate pixel-perfect coordinates for the cell
|
||||
// Add 0.5 to align with pixel boundaries for crisp lines
|
||||
const x = Math.floor(cellX * cellSize.width) + 0.5;
|
||||
const y = Math.floor(cellY * cellSize.height) + 0.5;
|
||||
|
||||
// Adjust width and height to ensure the border is inside the cell
|
||||
const width = cellSize.width - 1;
|
||||
const height = cellSize.height - 1;
|
||||
|
||||
ctx.value!.strokeRect(x, y, width, height);
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Store: Error in renderSpritesheetPreview:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function applyOffsetsToMainView() {
|
||||
sprites.value.forEach((sprite, index) => {
|
||||
const frameOffset = getSpriteOffset(index);
|
||||
if (frameOffset.x !== 0 || frameOffset.y !== 0) {
|
||||
// Update the sprite's position to include the offset
|
||||
sprite.x += frameOffset.x;
|
||||
sprite.y += frameOffset.y;
|
||||
|
||||
// Reset the offset
|
||||
frameOffset.x = 0;
|
||||
frameOffset.y = 0;
|
||||
}
|
||||
});
|
||||
|
||||
// Reset current offset
|
||||
currentSpriteOffset.x = 0;
|
||||
currentSpriteOffset.y = 0;
|
||||
|
||||
// Re-render the main view
|
||||
renderSpritesheetPreview();
|
||||
}
|
||||
|
||||
function drawGrid() {
|
||||
if (!ctx.value || !canvas.value) return;
|
||||
|
||||
ctx.value.strokeStyle = '#333';
|
||||
ctx.value.lineWidth = 1 / zoomLevel.value; // Adjust line width based on zoom level
|
||||
|
||||
// Calculate the visible area based on zoom level
|
||||
const visibleWidth = canvas.value.width / zoomLevel.value;
|
||||
const visibleHeight = canvas.value.height / zoomLevel.value;
|
||||
|
||||
// Draw vertical lines - ensure pixel-perfect grid lines
|
||||
for (let x = 0; x <= visibleWidth; x += cellSize.width) {
|
||||
const pixelX = Math.floor(x) + 0.5; // Align to pixel boundary for crisp lines
|
||||
ctx.value.beginPath();
|
||||
ctx.value.moveTo(pixelX, 0);
|
||||
ctx.value.lineTo(pixelX, visibleHeight);
|
||||
ctx.value.stroke();
|
||||
}
|
||||
|
||||
// Draw horizontal lines - ensure pixel-perfect grid lines
|
||||
for (let y = 0; y <= visibleHeight; y += cellSize.height) {
|
||||
const pixelY = Math.floor(y) + 0.5; // Align to pixel boundary for crisp lines
|
||||
ctx.value.beginPath();
|
||||
ctx.value.moveTo(0, pixelY);
|
||||
ctx.value.lineTo(visibleWidth, pixelY);
|
||||
ctx.value.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
function highlightSprite(spriteId: string) {
|
||||
if (!ctx.value || !canvas.value) return;
|
||||
|
||||
const sprite = sprites.value.find(s => s.id === spriteId);
|
||||
if (!sprite) return;
|
||||
|
||||
// Calculate the cell coordinates
|
||||
const cellX = Math.floor(sprite.x / cellSize.width);
|
||||
const cellY = Math.floor(sprite.y / cellSize.height);
|
||||
|
||||
// Briefly flash the cell
|
||||
ctx.value.save();
|
||||
ctx.value.fillStyle = 'rgba(0, 150, 255, 0.3)';
|
||||
ctx.value.fillRect(cellX * cellSize.width, cellY * cellSize.height, cellSize.width, cellSize.height);
|
||||
ctx.value.restore();
|
||||
|
||||
// Reset after a short delay
|
||||
setTimeout(() => {
|
||||
renderSpritesheetPreview();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function clearAllSprites() {
|
||||
if (!canvas.value || !ctx.value) return;
|
||||
|
||||
sprites.value = [];
|
||||
canvas.value.width = 400;
|
||||
canvas.value.height = 300;
|
||||
ctx.value.clearRect(0, 0, canvas.value.width, canvas.value.height);
|
||||
|
||||
if (animation.canvas && animation.ctx) {
|
||||
animation.canvas.width = 200;
|
||||
animation.canvas.height = 200;
|
||||
animation.ctx.clearRect(0, 0, animation.canvas.width, animation.canvas.height);
|
||||
}
|
||||
|
||||
animation.currentFrame = 0;
|
||||
isModalOpen.value = false;
|
||||
}
|
||||
|
||||
function downloadSpritesheet() {
|
||||
if (sprites.value.length === 0 || !canvas.value) {
|
||||
showNotification('No sprites to download', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const tempCanvas = document.createElement('canvas');
|
||||
tempCanvas.width = canvas.value.width;
|
||||
tempCanvas.height = canvas.value.height;
|
||||
const tempCtx = tempCanvas.getContext('2d');
|
||||
|
||||
if (!tempCtx) {
|
||||
showNotification('Failed to create download context', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
|
||||
|
||||
// Ensure pixel art remains sharp in the downloaded file
|
||||
tempCtx.imageSmoothingEnabled = false;
|
||||
|
||||
sprites.value.forEach(sprite => {
|
||||
// Use rounded coordinates for pixel-perfect rendering
|
||||
const x = Math.round(sprite.x);
|
||||
const y = Math.round(sprite.y);
|
||||
tempCtx.drawImage(sprite.img, x, y);
|
||||
});
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.download = 'spritesheet.png';
|
||||
link.href = tempCanvas.toDataURL('image/png');
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
showNotification('Spritesheet downloaded successfully');
|
||||
}
|
||||
|
||||
function startAnimation() {
|
||||
if (sprites.value.length === 0 || !animation.canvas) return;
|
||||
|
||||
animation.isPlaying = true;
|
||||
animation.lastFrameTime = performance.now();
|
||||
animation.manualUpdate = false;
|
||||
|
||||
animation.canvas.width = cellSize.width;
|
||||
animation.canvas.height = cellSize.height;
|
||||
|
||||
// Start the animation loop without resetting sprite offset
|
||||
animationLoop();
|
||||
}
|
||||
|
||||
function stopAnimation() {
|
||||
animation.isPlaying = false;
|
||||
|
||||
if (animation.animationId) {
|
||||
cancelAnimationFrame(animation.animationId);
|
||||
animation.animationId = null;
|
||||
}
|
||||
}
|
||||
|
||||
function renderAnimationFrame(frameIndex: number, showAllSprites = false, spriteOffset = { x: 0, y: 0 }) {
|
||||
if (sprites.value.length === 0 || !animation.canvas || !animation.ctx) return;
|
||||
|
||||
if (animation.canvas.width !== cellSize.width || animation.canvas.height !== cellSize.height) {
|
||||
animation.canvas.width = cellSize.width;
|
||||
animation.canvas.height = cellSize.height;
|
||||
}
|
||||
|
||||
animation.ctx.clearRect(0, 0, animation.canvas.width, animation.canvas.height);
|
||||
|
||||
// Draw background (transparent by default)
|
||||
animation.ctx.fillStyle = 'transparent';
|
||||
animation.ctx.fillRect(0, 0, animation.canvas.width, animation.canvas.height);
|
||||
|
||||
// Keep pixel art sharp
|
||||
animation.ctx.imageSmoothingEnabled = false;
|
||||
|
||||
// If showAllSprites is enabled, draw all sprites with transparency
|
||||
if (showAllSprites && sprites.value.length > 1) {
|
||||
// Save the current context state
|
||||
animation.ctx.save();
|
||||
|
||||
// Set global alpha for background sprites
|
||||
animation.ctx.globalAlpha = 0.3;
|
||||
|
||||
// Draw all sprites except the current one
|
||||
sprites.value.forEach((sprite, index) => {
|
||||
if (index !== frameIndex) {
|
||||
const spriteCellX = Math.floor(sprite.x / cellSize.width);
|
||||
const spriteCellY = Math.floor(sprite.y / cellSize.height);
|
||||
|
||||
// Calculate precise offset for pixel-perfect rendering
|
||||
const spriteOffsetX = Math.round(sprite.x - spriteCellX * cellSize.width);
|
||||
const spriteOffsetY = Math.round(sprite.y - spriteCellY * cellSize.height);
|
||||
|
||||
// Draw the sprite with transparency
|
||||
animation.ctx.drawImage(sprite.img, spriteOffsetX, spriteOffsetY);
|
||||
}
|
||||
});
|
||||
|
||||
// Restore the context to full opacity
|
||||
animation.ctx.restore();
|
||||
}
|
||||
|
||||
// Get the current sprite
|
||||
const currentSprite = sprites.value[frameIndex % sprites.value.length];
|
||||
|
||||
const cellX = Math.floor(currentSprite.x / cellSize.width);
|
||||
const cellY = Math.floor(currentSprite.y / cellSize.height);
|
||||
|
||||
// Calculate the original position (without user offset)
|
||||
const originalOffsetX = Math.round(currentSprite.x - cellX * cellSize.width);
|
||||
const originalOffsetY = Math.round(currentSprite.y - cellY * cellSize.height);
|
||||
|
||||
// Calculate precise offset for pixel-perfect rendering, including the user's drag offset
|
||||
// Use the spriteOffset directly as the position within the cell
|
||||
const offsetX = spriteOffset.x;
|
||||
const offsetY = spriteOffset.y;
|
||||
|
||||
// Draw the current sprite at full opacity at the new position
|
||||
animation.ctx.drawImage(currentSprite.img, offsetX, offsetY);
|
||||
|
||||
// Draw border around the cell if enabled (only for preview, not included in download)
|
||||
if (previewBorder.enabled) {
|
||||
animation.ctx.strokeStyle = previewBorder.color;
|
||||
animation.ctx.lineWidth = previewBorder.width;
|
||||
|
||||
// Use pixel-perfect coordinates for the border (0.5 offset for crisp lines)
|
||||
const x = 0.5;
|
||||
const y = 0.5;
|
||||
const width = animation.canvas.width - 1;
|
||||
const height = animation.canvas.height - 1;
|
||||
|
||||
animation.ctx.strokeRect(x, y, width, height);
|
||||
}
|
||||
}
|
||||
|
||||
// Store the current sprite offset for animation playback
|
||||
// We'll use a Map to store offsets for each frame, so they're preserved when switching frames
|
||||
const spriteOffsets = reactive(new Map<number, { x: number; y: number }>());
|
||||
|
||||
// Current sprite offset is a reactive object that will be used for the current frame
|
||||
const currentSpriteOffset = reactive({ x: 0, y: 0 });
|
||||
|
||||
// Helper function to get the offset for a specific frame
|
||||
function getSpriteOffset(frameIndex: number) {
|
||||
if (!spriteOffsets.has(frameIndex)) {
|
||||
spriteOffsets.set(frameIndex, { x: 0, y: 0 });
|
||||
}
|
||||
return spriteOffsets.get(frameIndex)!;
|
||||
}
|
||||
|
||||
function animationLoop(timestamp?: number) {
|
||||
if (!animation.isPlaying) return;
|
||||
|
||||
const currentTime = timestamp || performance.now();
|
||||
const elapsed = currentTime - animation.lastFrameTime;
|
||||
const frameInterval = 1000 / animation.frameRate;
|
||||
|
||||
if (elapsed >= frameInterval) {
|
||||
animation.lastFrameTime = currentTime;
|
||||
|
||||
if (sprites.value.length > 0) {
|
||||
// Get the stored offset for the current frame
|
||||
const frameOffset = getSpriteOffset(animation.currentFrame);
|
||||
|
||||
// Update the current offset for rendering
|
||||
currentSpriteOffset.x = frameOffset.x;
|
||||
currentSpriteOffset.y = frameOffset.y;
|
||||
|
||||
// Render the current frame with its offset
|
||||
renderAnimationFrame(animation.currentFrame, false, frameOffset);
|
||||
|
||||
// Move to the next frame
|
||||
animation.currentFrame = (animation.currentFrame + 1) % sprites.value.length;
|
||||
|
||||
if (animation.slider) {
|
||||
animation.slider.value = animation.currentFrame.toString();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
animation.animationId = requestAnimationFrame(animationLoop);
|
||||
}
|
||||
|
||||
function showNotification(message: string, type: 'success' | 'error' = 'success') {
|
||||
notification.message = message;
|
||||
notification.type = type;
|
||||
notification.isVisible = true;
|
||||
|
||||
setTimeout(() => {
|
||||
notification.isVisible = false;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function zoomIn() {
|
||||
// Increase zoom level by 0.1, max 3.0 (300%)
|
||||
zoomLevel.value = Math.min(3.0, zoomLevel.value + 0.1);
|
||||
renderSpritesheetPreview();
|
||||
showNotification(`Zoom: ${Math.round(zoomLevel.value * 100)}%`);
|
||||
}
|
||||
|
||||
function zoomOut() {
|
||||
// Decrease zoom level by 0.1, min 0.5 (50%)
|
||||
zoomLevel.value = Math.max(0.5, zoomLevel.value - 0.1);
|
||||
renderSpritesheetPreview();
|
||||
showNotification(`Zoom: ${Math.round(zoomLevel.value * 100)}%`);
|
||||
}
|
||||
|
||||
function resetZoom() {
|
||||
// Reset to default zoom level (100%)
|
||||
zoomLevel.value = 1;
|
||||
renderSpritesheetPreview();
|
||||
showNotification('Zoom reset to 100%');
|
||||
}
|
||||
|
||||
return {
|
||||
sprites,
|
||||
canvas,
|
||||
ctx,
|
||||
cellSize,
|
||||
columns,
|
||||
draggedSprite,
|
||||
dragOffset,
|
||||
isShiftPressed,
|
||||
isModalOpen,
|
||||
isSettingsModalOpen,
|
||||
isSpritesModalOpen,
|
||||
isHelpModalOpen,
|
||||
animation,
|
||||
notification,
|
||||
zoomLevel,
|
||||
previewBorder,
|
||||
currentSpriteOffset,
|
||||
spriteOffsets,
|
||||
getSpriteOffset,
|
||||
addSprites,
|
||||
updateCellSize,
|
||||
updateCanvasSize,
|
||||
autoArrangeSprites,
|
||||
renderSpritesheetPreview,
|
||||
drawGrid,
|
||||
highlightSprite,
|
||||
clearAllSprites,
|
||||
downloadSpritesheet,
|
||||
startAnimation,
|
||||
stopAnimation,
|
||||
renderAnimationFrame,
|
||||
showNotification,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
resetZoom,
|
||||
applyOffsetsToMainView,
|
||||
};
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user