Compare commits
No commits in common. "main" and "setup_i18n" have entirely different histories.
main
...
setup_i18n
142 changed files with 2207 additions and 8770 deletions
|
|
@ -1,17 +0,0 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# http://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[{package.json,*.yml,*.js}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
es2022: true,
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:svelte/recommended',
|
||||
'prettier',
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
processor: 'svelte3/svelte3',
|
||||
},
|
||||
],
|
||||
plugins: ['svelte'],
|
||||
settings: {
|
||||
// Let ESLint understand Svelte
|
||||
'svelte3/ignore-styles': () => true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
},
|
||||
rules: {
|
||||
// Customize your rules here
|
||||
},
|
||||
};
|
||||
|
|
@ -13,15 +13,28 @@ jobs:
|
|||
- name: Checkout code
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Set up SSH
|
||||
- name: Use Node.js 16
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 16
|
||||
|
||||
- name: Install rsync
|
||||
run: |
|
||||
mkdir -p ~/.ssh/
|
||||
echo "${{ secrets.SSH_KEY }}" > ./deploy.key
|
||||
chmod 600 ./deploy.key
|
||||
echo "${{ secrets.SSH_KNOWN_HOSTS }}" > ~/.ssh/known_hosts
|
||||
apt-get update
|
||||
apt-get install -y rsync
|
||||
|
||||
- name: Install PM2
|
||||
run: npm i -g pm2
|
||||
- name: Install dependencies
|
||||
run: npm install
|
||||
|
||||
- name: Deploy
|
||||
run: pm2 deploy ecosystem.config.cjs production
|
||||
- name: Build app
|
||||
run: npm run build
|
||||
|
||||
- name: Add Deploy Key to SSH
|
||||
run: |
|
||||
mkdir ~/.ssh
|
||||
echo "${{ secrets.SSH_KEY }}" >> ~/.ssh/id_ed25519_embroideryviewer
|
||||
chmod 400 ~/.ssh/id_ed25519_embroideryviewer
|
||||
echo -e "Host embroideryviewer\n\tUser embroideryviewer\n\tHostname 45.76.5.44\n\tIdentityFile ~/.ssh/id_ed25519_embroideryviewer\n\tStrictHostKeyChecking No" >> ~/.ssh/config
|
||||
|
||||
- name: Upload changes to server
|
||||
run: rsync -avz --progress dist/ embroideryviewer:web/prod
|
||||
96
.gitignore
vendored
96
.gitignore
vendored
|
|
@ -1,75 +1,25 @@
|
|||
.DS_Store
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
deploy.key
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
vite: {
|
||||
server: {
|
||||
port: 7280,
|
||||
},
|
||||
},
|
||||
|
||||
server {
|
||||
if ($host = www.embroideryviewer.xyz) {
|
||||
return 301 https://$host$request_uri;
|
||||
} # managed by Certbot
|
||||
|
||||
|
||||
if ($host = embroideryviewer.xyz) {
|
||||
return 301 https://$host$request_uri;
|
||||
} # managed by Certbot
|
||||
|
||||
|
||||
listen 80;
|
||||
listen [::]:80;
|
||||
server_name embroideryviewer.xyz www.embroideryviewer.xyz;
|
||||
|
||||
location / {
|
||||
proxy_pass http://embroidery; # Replace with actual port
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl;
|
||||
server_name embroideryviewer.xyz www.embroideryviewer.xyz;
|
||||
|
||||
|
||||
location / {
|
||||
proxy_pass http://embroidery; # Replace with actual port
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection "upgrade";
|
||||
}
|
||||
|
||||
ssl_certificate /etc/letsencrypt/live/embroideryviewer.xyz/fullchain.pem; # managed by Certbot
|
||||
ssl_certificate_key /etc/letsencrypt/live/embroideryviewer.xyz/privkey.pem; # managed by Certbot
|
||||
|
||||
}
|
||||
|
||||
server {
|
||||
listen 80 default_server;
|
||||
listen [::]:80 default_server;
|
||||
server_name _;
|
||||
|
||||
return 444; # Or return 404;
|
||||
}
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
/.vscode
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
# Ignore node_modules
|
||||
node_modules/
|
||||
|
||||
# Build output
|
||||
.build/
|
||||
.svelte-kit/
|
||||
dist/
|
||||
|
||||
# Ignore lock files
|
||||
package-lock.json
|
||||
pnpm-lock.yaml
|
||||
yarn.lock
|
||||
|
||||
# Ignore environment files
|
||||
.env
|
||||
.env.*.local
|
||||
|
||||
# VSCode settings
|
||||
.vscode/
|
||||
|
||||
# Ignore output from lint or test tools
|
||||
coverage/
|
||||
10
.prettierrc
10
.prettierrc
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"singleQuote": true,
|
||||
"useTabs": false,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 80,
|
||||
"semi": true,
|
||||
"bracketSpacing": true,
|
||||
"arrowParens": "always"
|
||||
}
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2022 Leonardo Murça
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
# Embroidery Viewer
|
||||
|
||||
A free online tool to view embroidery files.
|
||||
Available at https://embroideryviewer.xyz.
|
||||
Available at https://embroideryviewer.xyz..
|
||||
|
||||
|
||||
|
||||
Current supported formats: **.pes, .dst, .pec, .jef and .exp**.
|
||||
|
||||
Inspired by https://github.com/redteam316/html5-embroidery.git..
|
||||
Inspired by https://github.com/redteam316/html5-embroidery.git.
|
||||
|
|
|
|||
BIN
demo.gif
BIN
demo.gif
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 MiB After Width: | Height: | Size: 13 MiB |
|
|
@ -1,35 +0,0 @@
|
|||
module.exports = {
|
||||
apps: [
|
||||
{
|
||||
name: 'embroidery-viewer-prod',
|
||||
script: './build/index.js',
|
||||
time: true,
|
||||
instances: 1,
|
||||
autorestart: true,
|
||||
max_restarts: 50,
|
||||
watch: false,
|
||||
max_memory_restart: '1G',
|
||||
env: {
|
||||
NODE_ENV: 'production',
|
||||
PORT: 7281,
|
||||
},
|
||||
},
|
||||
],
|
||||
deploy: {
|
||||
production: {
|
||||
user: 'deployer',
|
||||
host: '45.76.5.44',
|
||||
key: 'deploy.key',
|
||||
ref: 'origin/main',
|
||||
repo: 'git@git.leomurca.xyz:leomurca/embroidery-viewer.git',
|
||||
path: '/home/deployer/embroidery-viewer',
|
||||
'pre-deploy': 'rm package-lock.json && npm i',
|
||||
'post-deploy':
|
||||
'npm run build && pm2 reload ecosystem.config.cjs --only embroidery-viewer-prod --env production && pm2 save',
|
||||
env: {
|
||||
PORT: 7281,
|
||||
NODE_ENV: 'production',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import prettier from 'eslint-config-prettier';
|
||||
import js from '@eslint/js';
|
||||
import { includeIgnoreFile } from '@eslint/compat';
|
||||
import svelte from 'eslint-plugin-svelte';
|
||||
import globals from 'globals';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
import svelteConfig from './svelte.config.js';
|
||||
|
||||
const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
|
||||
|
||||
export default [
|
||||
includeIgnoreFile(gitignorePath),
|
||||
js.configs.recommended,
|
||||
...svelte.configs.recommended,
|
||||
prettier,
|
||||
...svelte.configs.prettier,
|
||||
{
|
||||
languageOptions: {
|
||||
globals: { ...globals.browser, ...globals.node }
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ['**/*.svelte', '**/*.svelte.js'],
|
||||
languageOptions: { parserOptions: { svelteConfig } }
|
||||
}
|
||||
];
|
||||
42
index.html
Normal file
42
index.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="author" content="Leonardo Murça" />
|
||||
<meta name="description" content="Free online embroidery viewer.">
|
||||
<meta name="keywords"
|
||||
content="Free Emrbroidery Viewer, embroidery design, sewing machine, preview .pes files, preview embroider designs, brother machine.">
|
||||
|
||||
<script async defer data-website-id="e9089f5e-32ea-45f1-a000-b16af1dba58a"
|
||||
src="https://umami.leomurca.xyz/umami.js"></script>
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<title>Embroidery Viewer</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,19 +1,33 @@
|
|||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "Node",
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
/**
|
||||
* svelte-preprocess cannot figure out whether you have
|
||||
* a value or a type, so tell TypeScript to enforce using
|
||||
* `import type` instead of `import` for Types.
|
||||
*/
|
||||
"importsNotUsedAsValues": "error",
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
/**
|
||||
* To have warnings / errors of the Svelte compiler at the
|
||||
* correct position, enable source maps by default.
|
||||
*/
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
/**
|
||||
* Typecheck JS in `.svelte` and `.js` files by default.
|
||||
* Disable this if you'd like to use dynamic types.
|
||||
*/
|
||||
"checkJs": true
|
||||
},
|
||||
/**
|
||||
* Use global.d.ts instead of compilerOptions.types
|
||||
* to avoid limiting type declarations.
|
||||
*/
|
||||
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
|
||||
}
|
||||
|
|
|
|||
3129
package-lock.json
generated
3129
package-lock.json
generated
File diff suppressed because it is too large
Load diff
32
package.json
32
package.json
|
|
@ -1,37 +1,17 @@
|
|||
{
|
||||
"name": "embroidery-viewer",
|
||||
"private": true,
|
||||
"version": "2.1.1",
|
||||
"version": "1.2.4",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"prepare": "svelte-kit sync || echo ''",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
|
||||
"format": "prettier --write .",
|
||||
"lint": "prettier --check . && eslint ."
|
||||
"postbuild": "npx svelte-sitemap --domain https://embroideryviewer.xyz -o dist"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/compat": "^1.2.5",
|
||||
"@eslint/js": "^9.18.0",
|
||||
"@sveltejs/kit": "^2.16.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
||||
"eslint": "^9.28.0",
|
||||
"eslint-config-prettier": "^10.0.1",
|
||||
"eslint-plugin-svelte": "^3.9.1",
|
||||
"globals": "^16.0.0",
|
||||
"prettier": "^3.5.3",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^6.2.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-node": "^5.2.12",
|
||||
"accept-language-parser": "^1.5.0",
|
||||
"sveltekit-i18n": "^2.4.2"
|
||||
"@sveltejs/vite-plugin-svelte": "^2.4.1",
|
||||
"svelte": "^3.59.1",
|
||||
"vite": "^4.3.9"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
public/android-icon-144x144.png
Normal file
BIN
public/android-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
public/android-icon-192x192.png
Normal file
BIN
public/android-icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/android-icon-36x36.png
Normal file
BIN
public/android-icon-36x36.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
public/android-icon-48x48.png
Normal file
BIN
public/android-icon-48x48.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
public/android-icon-72x72.png
Normal file
BIN
public/android-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
public/android-icon-96x96.png
Normal file
BIN
public/android-icon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/apple-icon-114x114.png
Normal file
BIN
public/apple-icon-114x114.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
public/apple-icon-120x120.png
Normal file
BIN
public/apple-icon-120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
BIN
public/apple-icon-144x144.png
Normal file
BIN
public/apple-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
public/apple-icon-152x152.png
Normal file
BIN
public/apple-icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
public/apple-icon-180x180.png
Normal file
BIN
public/apple-icon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/apple-icon-57x57.png
Normal file
BIN
public/apple-icon-57x57.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/apple-icon-60x60.png
Normal file
BIN
public/apple-icon-60x60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
public/apple-icon-72x72.png
Normal file
BIN
public/apple-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
public/apple-icon-76x76.png
Normal file
BIN
public/apple-icon-76x76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/apple-icon-precomposed.png
Normal file
BIN
public/apple-icon-precomposed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
public/apple-icon.png
Normal file
BIN
public/apple-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
2
public/browserconfig.xml
Normal file
2
public/browserconfig.xml
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
|
||||
BIN
public/favicon-16x16.png
Normal file
BIN
public/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/favicon-32x32.png
Normal file
BIN
public/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/favicon-96x96.png
Normal file
BIN
public/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
41
public/manifest.json
Normal file
41
public/manifest.json
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"name": "App",
|
||||
"icons": [
|
||||
{
|
||||
"src": "\/android-icon-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image\/png",
|
||||
"density": "0.75"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image\/png",
|
||||
"density": "1.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image\/png",
|
||||
"density": "1.5"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image\/png",
|
||||
"density": "2.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image\/png",
|
||||
"density": "3.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png",
|
||||
"density": "4.0"
|
||||
}
|
||||
]
|
||||
}
|
||||
BIN
public/ms-icon-144x144.png
Normal file
BIN
public/ms-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
public/ms-icon-150x150.png
Normal file
BIN
public/ms-icon-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
BIN
public/ms-icon-310x310.png
Normal file
BIN
public/ms-icon-310x310.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
public/ms-icon-70x70.png
Normal file
BIN
public/ms-icon-70x70.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
22
src/App.svelte
Normal file
22
src/App.svelte
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<script>
|
||||
import Header from "./lib/Header.svelte";
|
||||
import FileViewer from "./lib/FileViewer.svelte";
|
||||
import Footer from "./lib/Footer.svelte";
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
<main>
|
||||
<FileViewer />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
61
src/app.css
Normal file
61
src/app.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #F2F6F5;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
margin-top: 20px;
|
||||
background-color: #05345f;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body a {
|
||||
text-decoration: none;
|
||||
color: #06345F;
|
||||
border-bottom: 3px solid #06345F;
|
||||
}
|
||||
|
||||
body a:hover {
|
||||
background-color: #06345F;
|
||||
color: #ffffff;
|
||||
}
|
||||
13
src/app.d.ts
vendored
13
src/app.d.ts
vendored
|
|
@ -1,13 +0,0 @@
|
|||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
95
src/app.html
95
src/app.html
|
|
@ -1,95 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<style>
|
||||
:root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #f2f6f5;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
margin-top: 20px;
|
||||
background-color: #05345f;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type='submit']:hover {
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body a {
|
||||
text-decoration: none;
|
||||
color: #06345f;
|
||||
border-bottom: 3px solid #06345f;
|
||||
}
|
||||
|
||||
body a:hover {
|
||||
background-color: #06345f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) {
|
||||
color: #06345f;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #06345f;
|
||||
}
|
||||
|
||||
ul li::marker {
|
||||
color: #06345f;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="canonical" href="https://embroideryviewer.xyz/" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
src/assets/embroidery-viewer-logo-mobile.webp
Normal file
BIN
src/assets/embroidery-viewer-logo-mobile.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/embroidery-viewer-logo.webp
Normal file
BIN
src/assets/embroidery-viewer-logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/thumbnail.webp
Normal file
BIN
src/assets/thumbnail.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
75
src/file-renderer/index.js
Normal file
75
src/file-renderer/index.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import { jDataView } from "./jdataview";
|
||||
import { supportedFormats } from "../format-readers";
|
||||
import { Pattern } from "./pattern";
|
||||
|
||||
function renderFile(filename, evt, canvas, colorView, stitchesView, sizeView, localizedStrings) {
|
||||
const fileExtension = filename.toLowerCase().split(".").pop();
|
||||
const view = jDataView(evt.target.result, 0, evt.size);
|
||||
const pattern = new Pattern();
|
||||
|
||||
supportedFormats[fileExtension].read(view, pattern);
|
||||
|
||||
pattern.moveToPositive();
|
||||
pattern.drawShapeTo(canvas);
|
||||
pattern.drawColorsTo(colorView);
|
||||
pattern.drawStitchesCountTo(stitchesView, localizedStrings.stitches);
|
||||
pattern.drawSizeValuesTo(stitchesView, localizedStrings.dimensions);
|
||||
}
|
||||
|
||||
function renderAbortMessage(errorMessageRef) {
|
||||
errorMessageRef.innerHTML = "Render aborted!";
|
||||
}
|
||||
|
||||
function renderErrorMessage(errorName, errorMessageRef) {
|
||||
let message;
|
||||
switch (errorName) {
|
||||
case "NotFoundError":
|
||||
message =
|
||||
"The file could not be found at the time the read was processed.";
|
||||
break;
|
||||
case "SecurityError":
|
||||
message = "<p>A file security error occured. This can be due to:</p>";
|
||||
message +=
|
||||
"<ul><li>Accessing certain files deemed unsafe for Web applications.</li>";
|
||||
message += "<li>Performing too many read calls on file resources.</li>";
|
||||
message +=
|
||||
"<li>The file has changed on disk since the user selected it.</li></ul>";
|
||||
break;
|
||||
case "NotReadableError":
|
||||
message =
|
||||
"The file cannot be read. This can occur if the file is open in another application.";
|
||||
break;
|
||||
case "EncodingError":
|
||||
message = "The length of the data URL for the file is too long.";
|
||||
break;
|
||||
default:
|
||||
message = "Something wrong happened!";
|
||||
break;
|
||||
}
|
||||
|
||||
errorMessageRef.innerHTML = message;
|
||||
}
|
||||
|
||||
export default function renderFileToCanvas(
|
||||
fileObject,
|
||||
canvas,
|
||||
errorMessageRef,
|
||||
colorView,
|
||||
stitchesView,
|
||||
sizeView,
|
||||
localizedStrings
|
||||
) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onloadend = (evt) =>
|
||||
renderFile(fileObject.name, evt, canvas, colorView, stitchesView, sizeView, localizedStrings);
|
||||
reader.abort = (/** @type {any} */ _) => renderAbortMessage(errorMessageRef);
|
||||
reader.onerror = (evt) =>
|
||||
renderErrorMessage(evt.target.error.name, errorMessageRef);
|
||||
|
||||
if (fileObject) {
|
||||
reader.readAsArrayBuffer(fileObject);
|
||||
}
|
||||
|
||||
return "";
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable no-undef */
|
||||
// @ts-nocheck
|
||||
import { browser } from '$app/environment';
|
||||
//
|
||||
// jDataView by Vjeux <vjeuxx@gmail.com> - Jan 2010
|
||||
// Continued by RReverser <me@rreverser.com> - Feb 2013
|
||||
//
|
||||
|
|
@ -11,22 +9,22 @@ import { browser } from '$app/environment';
|
|||
|
||||
var compatibility = {
|
||||
// NodeJS Buffer in v0.5.5 and newer
|
||||
NodeBuffer: 'Buffer' in globalThis && 'readInt16LE' in Buffer.prototype,
|
||||
NodeBuffer: "Buffer" in globalThis && "readInt16LE" in Buffer.prototype,
|
||||
DataView:
|
||||
'DataView' in globalThis &&
|
||||
('getFloat64' in DataView.prototype || // Chrome
|
||||
'getFloat64' in new DataView(new ArrayBuffer(1))), // Node
|
||||
ArrayBuffer: 'ArrayBuffer' in globalThis,
|
||||
"DataView" in globalThis &&
|
||||
("getFloat64" in DataView.prototype || // Chrome
|
||||
"getFloat64" in new DataView(new ArrayBuffer(1))), // Node
|
||||
ArrayBuffer: "ArrayBuffer" in globalThis,
|
||||
PixelData:
|
||||
'CanvasPixelArray' in globalThis &&
|
||||
'ImageData' in globalThis &&
|
||||
'document' in globalThis,
|
||||
"CanvasPixelArray" in globalThis &&
|
||||
"ImageData" in globalThis &&
|
||||
"document" in globalThis,
|
||||
};
|
||||
|
||||
var createPixelData = function (byteLength, buffer) {
|
||||
var data = createPixelData.context2d.createImageData(
|
||||
(byteLength + 3) / 4,
|
||||
1,
|
||||
1
|
||||
).data;
|
||||
data.byteLength = byteLength;
|
||||
if (buffer !== undefined) {
|
||||
|
|
@ -36,8 +34,7 @@ var createPixelData = function (byteLength, buffer) {
|
|||
}
|
||||
return data;
|
||||
};
|
||||
createPixelData.context2d =
|
||||
browser ?? document.createElement('canvas').getContext('2d');
|
||||
createPixelData.context2d = document.createElement("canvas").getContext("2d");
|
||||
|
||||
var dataTypes = {
|
||||
Int8: 1,
|
||||
|
|
@ -51,14 +48,14 @@ var dataTypes = {
|
|||
};
|
||||
|
||||
var nodeNaming = {
|
||||
Int8: 'Int8',
|
||||
Int16: 'Int16',
|
||||
Int32: 'Int32',
|
||||
Uint8: 'UInt8',
|
||||
Uint16: 'UInt16',
|
||||
Uint32: 'UInt32',
|
||||
Float32: 'Float',
|
||||
Float64: 'Double',
|
||||
Int8: "Int8",
|
||||
Int16: "Int16",
|
||||
Int32: "Int32",
|
||||
Uint8: "UInt8",
|
||||
Uint16: "UInt16",
|
||||
Uint32: "UInt32",
|
||||
Float32: "Float",
|
||||
Float64: "Double",
|
||||
};
|
||||
|
||||
function arrayFrom(arrayLike, forceCopy) {
|
||||
|
|
@ -101,13 +98,13 @@ export function jDataView(buffer, byteOffset, byteLength, littleEndian) {
|
|||
!this._isPixelData &&
|
||||
!(buffer instanceof Array)
|
||||
) {
|
||||
throw new TypeError('jDataView buffer has an incompatible type');
|
||||
throw new TypeError("jDataView buffer has an incompatible type");
|
||||
}
|
||||
|
||||
// Default Values
|
||||
this._littleEndian = !!littleEndian;
|
||||
|
||||
var bufferLength = 'byteLength' in buffer ? buffer.byteLength : buffer.length;
|
||||
var bufferLength = "byteLength" in buffer ? buffer.byteLength : buffer.length;
|
||||
this.byteOffset = byteOffset = defined(byteOffset, 0);
|
||||
this.byteLength = byteLength = defined(byteLength, bufferLength - byteOffset);
|
||||
|
||||
|
|
@ -122,15 +119,15 @@ export function jDataView(buffer, byteOffset, byteLength, littleEndian) {
|
|||
this._engineAction = this._isDataView
|
||||
? this._dataViewAction
|
||||
: this._isNodeBuffer
|
||||
? this._nodeBufferAction
|
||||
: this._isArrayBuffer
|
||||
? this._arrayBufferAction
|
||||
: this._arrayAction;
|
||||
? this._nodeBufferAction
|
||||
: this._isArrayBuffer
|
||||
? this._arrayBufferAction
|
||||
: this._arrayAction;
|
||||
}
|
||||
|
||||
function getCharCodes(string) {
|
||||
if (compatibility.NodeBuffer) {
|
||||
return new Buffer(string, 'binary');
|
||||
return new Buffer(string, "binary");
|
||||
}
|
||||
|
||||
var Type = compatibility.ArrayBuffer ? Uint8Array : Array,
|
||||
|
|
@ -145,7 +142,7 @@ function getCharCodes(string) {
|
|||
// mostly internal function for wrapping any supported input (String or Array-like) to best suitable buffer format
|
||||
jDataView.wrapBuffer = function (buffer) {
|
||||
switch (typeof buffer) {
|
||||
case 'number':
|
||||
case "number":
|
||||
if (compatibility.NodeBuffer) {
|
||||
buffer = new Buffer(buffer);
|
||||
buffer.fill(0);
|
||||
|
|
@ -161,12 +158,12 @@ jDataView.wrapBuffer = function (buffer) {
|
|||
}
|
||||
return buffer;
|
||||
|
||||
case 'string':
|
||||
case "string":
|
||||
buffer = getCharCodes(buffer);
|
||||
/* falls through */
|
||||
default:
|
||||
if (
|
||||
'length' in buffer &&
|
||||
"length" in buffer &&
|
||||
!(
|
||||
(compatibility.NodeBuffer && buffer instanceof Buffer) ||
|
||||
(compatibility.ArrayBuffer && buffer instanceof ArrayBuffer) ||
|
||||
|
|
@ -233,7 +230,7 @@ function Int64(lo, hi) {
|
|||
jDataView.Int64 = Int64;
|
||||
|
||||
Int64.prototype =
|
||||
'create' in Object ? Object.create(Uint64.prototype) : new Uint64();
|
||||
"create" in Object ? Object.create(Uint64.prototype) : new Uint64();
|
||||
|
||||
Int64.prototype.valueOf = function () {
|
||||
if (this.hi < pow2(31)) {
|
||||
|
|
@ -264,20 +261,20 @@ jDataView.prototype = {
|
|||
|
||||
_checkBounds: function (byteOffset, byteLength, maxLength) {
|
||||
// Do additional checks to simulate DataView
|
||||
if (typeof byteOffset !== 'number') {
|
||||
throw new TypeError('Offset is not a number.');
|
||||
if (typeof byteOffset !== "number") {
|
||||
throw new TypeError("Offset is not a number.");
|
||||
}
|
||||
if (typeof byteLength !== 'number') {
|
||||
throw new TypeError('Size is not a number.');
|
||||
if (typeof byteLength !== "number") {
|
||||
throw new TypeError("Size is not a number.");
|
||||
}
|
||||
if (byteLength < 0) {
|
||||
throw new RangeError('Length is negative.');
|
||||
throw new RangeError("Length is negative.");
|
||||
}
|
||||
if (
|
||||
byteOffset < 0 ||
|
||||
byteOffset + byteLength > defined(maxLength, this.byteLength)
|
||||
) {
|
||||
throw new RangeError('Offsets are out of bounds.');
|
||||
throw new RangeError("Offsets are out of bounds.");
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -287,7 +284,7 @@ jDataView.prototype = {
|
|||
isReadAction,
|
||||
defined(byteOffset, this._offset),
|
||||
defined(littleEndian, this._littleEndian),
|
||||
value,
|
||||
value
|
||||
);
|
||||
},
|
||||
|
||||
|
|
@ -296,13 +293,13 @@ jDataView.prototype = {
|
|||
isReadAction,
|
||||
byteOffset,
|
||||
littleEndian,
|
||||
value,
|
||||
value
|
||||
) {
|
||||
// Move the internal offset forward
|
||||
this._offset = byteOffset + dataTypes[type];
|
||||
return isReadAction
|
||||
? this._view['get' + type](byteOffset, littleEndian)
|
||||
: this._view['set' + type](byteOffset, value, littleEndian);
|
||||
? this._view["get" + type](byteOffset, littleEndian)
|
||||
: this._view["set" + type](byteOffset, value, littleEndian);
|
||||
},
|
||||
|
||||
_nodeBufferAction: function (
|
||||
|
|
@ -310,17 +307,17 @@ jDataView.prototype = {
|
|||
isReadAction,
|
||||
byteOffset,
|
||||
littleEndian,
|
||||
value,
|
||||
value
|
||||
) {
|
||||
// Move the internal offset forward
|
||||
this._offset = byteOffset + dataTypes[type];
|
||||
var nodeName =
|
||||
nodeNaming[type] +
|
||||
(type === 'Int8' || type === 'Uint8' ? '' : littleEndian ? 'LE' : 'BE');
|
||||
(type === "Int8" || type === "Uint8" ? "" : littleEndian ? "LE" : "BE");
|
||||
byteOffset += this.byteOffset;
|
||||
return isReadAction
|
||||
? this.buffer['read' + nodeName](byteOffset)
|
||||
: this.buffer['write' + nodeName](value, byteOffset);
|
||||
? this.buffer["read" + nodeName](byteOffset)
|
||||
: this.buffer["write" + nodeName](value, byteOffset);
|
||||
},
|
||||
|
||||
_arrayBufferAction: function (
|
||||
|
|
@ -328,10 +325,10 @@ jDataView.prototype = {
|
|||
isReadAction,
|
||||
byteOffset,
|
||||
littleEndian,
|
||||
value,
|
||||
value
|
||||
) {
|
||||
var size = dataTypes[type],
|
||||
TypedArray = globalThis[type + 'Array'],
|
||||
TypedArray = globalThis[type + "Array"],
|
||||
typedArray;
|
||||
|
||||
littleEndian = defined(littleEndian, this._littleEndian);
|
||||
|
|
@ -348,7 +345,7 @@ jDataView.prototype = {
|
|||
var bytes = new Uint8Array(
|
||||
isReadAction
|
||||
? this.getBytes(size, byteOffset, littleEndian, true)
|
||||
: size,
|
||||
: size
|
||||
);
|
||||
typedArray = new TypedArray(bytes.buffer, 0, 1);
|
||||
|
||||
|
|
@ -363,8 +360,8 @@ jDataView.prototype = {
|
|||
|
||||
_arrayAction: function (type, isReadAction, byteOffset, littleEndian, value) {
|
||||
return isReadAction
|
||||
? this['_get' + type](byteOffset, littleEndian)
|
||||
: this['_set' + type](byteOffset, value, littleEndian);
|
||||
? this["_get" + type](byteOffset, littleEndian)
|
||||
: this["_set" + type](byteOffset, value, littleEndian);
|
||||
},
|
||||
|
||||
// Helpers
|
||||
|
|
@ -385,7 +382,7 @@ jDataView.prototype = {
|
|||
: (this.buffer.slice || Array.prototype.slice).call(
|
||||
this.buffer,
|
||||
byteOffset,
|
||||
byteOffset + length,
|
||||
byteOffset + length
|
||||
);
|
||||
|
||||
return littleEndian || length <= 1 ? result : arrayFrom(result).reverse();
|
||||
|
|
@ -396,7 +393,7 @@ jDataView.prototype = {
|
|||
var result = this._getBytes(
|
||||
length,
|
||||
byteOffset,
|
||||
defined(littleEndian, true),
|
||||
defined(littleEndian, true)
|
||||
);
|
||||
return toArray ? arrayFrom(result) : result;
|
||||
},
|
||||
|
|
@ -448,18 +445,18 @@ jDataView.prototype = {
|
|||
|
||||
this._offset = byteOffset + byteLength;
|
||||
return this.buffer.toString(
|
||||
encoding || 'binary',
|
||||
encoding || "binary",
|
||||
this.byteOffset + byteOffset,
|
||||
this.byteOffset + this._offset,
|
||||
this.byteOffset + this._offset
|
||||
);
|
||||
}
|
||||
var bytes = this._getBytes(byteLength, byteOffset, true),
|
||||
string = '';
|
||||
string = "";
|
||||
byteLength = bytes.length;
|
||||
for (var i = 0; i < byteLength; i++) {
|
||||
string += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
if (encoding === 'utf8') {
|
||||
if (encoding === "utf8") {
|
||||
string = decodeURIComponent(escape(string));
|
||||
}
|
||||
return string;
|
||||
|
|
@ -474,11 +471,11 @@ jDataView.prototype = {
|
|||
this.buffer.write(
|
||||
subString,
|
||||
this.byteOffset + byteOffset,
|
||||
encoding || 'binary',
|
||||
encoding || "binary"
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (encoding === 'utf8') {
|
||||
if (encoding === "utf8") {
|
||||
subString = unescape(encodeURIComponent(subString));
|
||||
}
|
||||
this._setBytes(byteOffset, getCharCodes(subString), true);
|
||||
|
|
@ -519,13 +516,13 @@ jDataView.prototype = {
|
|||
this.getBytes(end - start, start, true, true),
|
||||
undefined,
|
||||
undefined,
|
||||
this._littleEndian,
|
||||
this._littleEndian
|
||||
)
|
||||
: new jDataView(
|
||||
this.buffer,
|
||||
this.byteOffset + start,
|
||||
end - start,
|
||||
this._littleEndian,
|
||||
this._littleEndian
|
||||
);
|
||||
},
|
||||
|
||||
|
|
@ -682,7 +679,7 @@ jDataView.prototype = {
|
|||
value,
|
||||
mantSize,
|
||||
expSize,
|
||||
littleEndian,
|
||||
littleEndian
|
||||
) {
|
||||
var signBit = value < 0 ? 1 : 0,
|
||||
exponent,
|
||||
|
|
@ -754,7 +751,7 @@ jDataView.prototype = {
|
|||
this.setUint32(
|
||||
byteOffset + parts[partName],
|
||||
value[partName],
|
||||
littleEndian,
|
||||
littleEndian
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -773,7 +770,7 @@ jDataView.prototype = {
|
|||
this._setBytes(
|
||||
byteOffset,
|
||||
[value & 0xff, (value >>> 8) & 0xff, (value >>> 16) & 0xff, value >>> 24],
|
||||
littleEndian,
|
||||
littleEndian
|
||||
);
|
||||
},
|
||||
|
||||
|
|
@ -781,7 +778,7 @@ jDataView.prototype = {
|
|||
this._setBytes(
|
||||
byteOffset,
|
||||
[value & 0xff, (value >>> 8) & 0xff],
|
||||
littleEndian,
|
||||
littleEndian
|
||||
);
|
||||
},
|
||||
|
||||
|
|
@ -811,10 +808,10 @@ var proto = jDataView.prototype;
|
|||
|
||||
for (var type in dataTypes) {
|
||||
(function (type) {
|
||||
proto['get' + type] = function (byteOffset, littleEndian) {
|
||||
proto["get" + type] = function (byteOffset, littleEndian) {
|
||||
return this._action(type, true, byteOffset, littleEndian);
|
||||
};
|
||||
proto['set' + type] = function (byteOffset, value, littleEndian) {
|
||||
proto["set" + type] = function (byteOffset, value, littleEndian) {
|
||||
this._action(type, false, byteOffset, littleEndian, value);
|
||||
};
|
||||
})(type);
|
||||
|
|
@ -826,19 +823,19 @@ proto._setInt8 = proto._setUint8;
|
|||
proto.setSigned = proto.setUnsigned;
|
||||
|
||||
for (var method in proto) {
|
||||
if (method.slice(0, 3) === 'set') {
|
||||
if (method.slice(0, 3) === "set") {
|
||||
(function (type) {
|
||||
proto['write' + type] = function () {
|
||||
proto["write" + type] = function () {
|
||||
Array.prototype.unshift.call(arguments, undefined);
|
||||
this['set' + type].apply(this, arguments);
|
||||
this["set" + type].apply(this, arguments);
|
||||
};
|
||||
})(method.slice(3));
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports === 'object') {
|
||||
if (typeof module !== "undefined" && typeof module.exports === "object") {
|
||||
module.exports = jDataView;
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
} else if (typeof define === "function" && define.amd) {
|
||||
define([], function () {
|
||||
return jDataView;
|
||||
});
|
||||
225
src/file-renderer/pattern.js
Normal file
225
src/file-renderer/pattern.js
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
import { rgbToHex } from "../utils/rgbToHex";
|
||||
import { shadeColor } from "../utils/shadeColor";
|
||||
|
||||
function Stitch(x, y, flags, color) {
|
||||
this.flags = flags;
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.color = color;
|
||||
}
|
||||
|
||||
function Color(r, g, b, description) {
|
||||
this.r = r;
|
||||
this.g = g;
|
||||
this.b = b;
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
const stitchTypes = {
|
||||
normal: 0,
|
||||
jump: 1,
|
||||
trim: 2,
|
||||
stop: 4,
|
||||
end: 8,
|
||||
};
|
||||
|
||||
function Pattern() {
|
||||
this.colors = [];
|
||||
this.stitches = [];
|
||||
this.hoop = {};
|
||||
this.lastX = 0;
|
||||
this.lastY = 0;
|
||||
this.top = 0;
|
||||
this.bottom = 0;
|
||||
this.left = 0;
|
||||
this.right = 0;
|
||||
this.currentColorIndex = 0;
|
||||
}
|
||||
|
||||
Pattern.prototype.addColorRgb = function (r, g, b, description) {
|
||||
this.colors[this.colors.length] = new Color(r, g, b, description);
|
||||
};
|
||||
|
||||
Pattern.prototype.addColor = function (color) {
|
||||
this.colors[this.colors.length] = color;
|
||||
};
|
||||
|
||||
Pattern.prototype.addStitchAbs = function (x, y, flags, isAutoColorIndex) {
|
||||
if ((flags & stitchTypes.end) === stitchTypes.end) {
|
||||
this.calculateBoundingBox();
|
||||
this.fixColorCount();
|
||||
}
|
||||
if (
|
||||
(flags & stitchTypes.stop) === stitchTypes.stop &&
|
||||
this.stitches.length === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if ((flags & stitchTypes.stop) === stitchTypes.stop && isAutoColorIndex) {
|
||||
this.currentColorIndex += 1;
|
||||
}
|
||||
this.stitches[this.stitches.length] = new Stitch(
|
||||
x,
|
||||
y,
|
||||
flags,
|
||||
this.currentColorIndex
|
||||
);
|
||||
};
|
||||
|
||||
Pattern.prototype.addStitchRel = function (dx, dy, flags, isAutoColorIndex) {
|
||||
if (this.stitches.length !== 0) {
|
||||
let nx = this.lastX + dx,
|
||||
ny = this.lastY + dy;
|
||||
this.lastX = nx;
|
||||
this.lastY = ny;
|
||||
this.addStitchAbs(nx, ny, flags, isAutoColorIndex);
|
||||
} else {
|
||||
this.addStitchAbs(dx, dy, flags, isAutoColorIndex);
|
||||
}
|
||||
};
|
||||
|
||||
Pattern.prototype.calculateBoundingBox = function () {
|
||||
let i = 0,
|
||||
stitchCount = this.stitches.length,
|
||||
pt;
|
||||
if (stitchCount === 0) {
|
||||
this.bottom = 1;
|
||||
this.right = 1;
|
||||
return;
|
||||
}
|
||||
this.left = 99999;
|
||||
this.top = 99999;
|
||||
this.right = -99999;
|
||||
this.bottom = -99999;
|
||||
|
||||
for (i = 0; i < stitchCount; i += 1) {
|
||||
pt = this.stitches[i];
|
||||
if (!(pt.flags & stitchTypes.trim)) {
|
||||
this.left = this.left < pt.x ? this.left : pt.x;
|
||||
this.top = this.top < pt.y ? this.top : pt.y;
|
||||
this.right = this.right > pt.x ? this.right : pt.x;
|
||||
this.bottom = this.bottom > pt.y ? this.bottom : pt.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Pattern.prototype.moveToPositive = function () {
|
||||
let i = 0,
|
||||
stitchCount = this.stitches.length;
|
||||
for (i = 0; i < stitchCount; i += 1) {
|
||||
this.stitches[i].x -= this.left;
|
||||
this.stitches[i].y -= this.top;
|
||||
}
|
||||
this.right -= this.left;
|
||||
this.left = 0;
|
||||
this.bottom -= this.top;
|
||||
this.top = 0;
|
||||
};
|
||||
|
||||
Pattern.prototype.invertPatternVertical = function () {
|
||||
let i = 0,
|
||||
temp = -this.top,
|
||||
stitchCount = this.stitches.length;
|
||||
for (i = 0; i < stitchCount; i += 1) {
|
||||
this.stitches[i].y = -this.stitches[i].y;
|
||||
}
|
||||
this.top = -this.bottom;
|
||||
this.bottom = temp;
|
||||
};
|
||||
|
||||
Pattern.prototype.addColorRandom = function () {
|
||||
this.colors[this.colors.length] = new Color(
|
||||
Math.round(Math.random() * 256),
|
||||
Math.round(Math.random() * 256),
|
||||
Math.round(Math.random() * 256),
|
||||
"random"
|
||||
);
|
||||
};
|
||||
|
||||
Pattern.prototype.fixColorCount = function () {
|
||||
let maxColorIndex = 0,
|
||||
stitchCount = this.stitches.length,
|
||||
i;
|
||||
for (i = 0; i < stitchCount; i += 1) {
|
||||
maxColorIndex = Math.max(maxColorIndex, this.stitches[i].color);
|
||||
}
|
||||
while (this.colors.length <= maxColorIndex) {
|
||||
this.addColorRandom();
|
||||
}
|
||||
this.colors.splice(maxColorIndex + 1, this.colors.length - maxColorIndex - 1);
|
||||
};
|
||||
|
||||
Pattern.prototype.drawShapeTo = function (canvas) {
|
||||
canvas.width = this.right;
|
||||
canvas.height = this.bottom;
|
||||
|
||||
let gradient, tx, ty;
|
||||
let lastStitch = this.stitches[0];
|
||||
let gWidth = 100;
|
||||
if (canvas.getContext) {
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.lineWidth = 3;
|
||||
ctx.lineJoin = "round";
|
||||
|
||||
let color = this.colors[this.stitches[0].color];
|
||||
for (let i = 0; i < this.stitches.length; i++) {
|
||||
const currentStitch = this.stitches[i];
|
||||
if (i > 0) lastStitch = this.stitches[i - 1];
|
||||
tx = currentStitch.x - lastStitch.x;
|
||||
ty = currentStitch.y - lastStitch.y;
|
||||
|
||||
gWidth = Math.sqrt(tx * tx + ty * ty);
|
||||
gradient = ctx.createRadialGradient(
|
||||
currentStitch.x - tx,
|
||||
currentStitch.y - ty,
|
||||
0,
|
||||
currentStitch.x - tx,
|
||||
currentStitch.y - ty,
|
||||
gWidth * 1.4
|
||||
);
|
||||
|
||||
gradient.addColorStop("0", shadeColor(rgbToHex(color), -60));
|
||||
gradient.addColorStop("0.05", rgbToHex(color));
|
||||
gradient.addColorStop("0.5", shadeColor(rgbToHex(color), 60));
|
||||
gradient.addColorStop("0.9", rgbToHex(color));
|
||||
gradient.addColorStop("1.0", shadeColor(rgbToHex(color), -60));
|
||||
|
||||
ctx.strokeStyle = gradient;
|
||||
if (
|
||||
currentStitch.flags === stitchTypes.jump ||
|
||||
currentStitch.flags === stitchTypes.trim ||
|
||||
currentStitch.flags === stitchTypes.stop
|
||||
) {
|
||||
color = this.colors[currentStitch.color];
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle =
|
||||
"rgba(" + color.r + "," + color.g + "," + color.b + ",0)";
|
||||
ctx.moveTo(currentStitch.x, currentStitch.y);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastStitch.x, lastStitch.y);
|
||||
ctx.lineTo(currentStitch.x, currentStitch.y);
|
||||
ctx.stroke();
|
||||
lastStitch = currentStitch;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Pattern.prototype.drawColorsTo = function (colorContainer) {
|
||||
this.colors.forEach((color) => {
|
||||
colorContainer.innerHTML += `<div style='background-color: rgb(${color.r}, ${color.g}, ${color.b}); height: 25px; width: 25px; border: 1px solid #000000;'></div>`;
|
||||
});
|
||||
};
|
||||
|
||||
Pattern.prototype.drawStitchesCountTo = function (stitchesContainer, stitchesString) {
|
||||
stitchesContainer.innerHTML += `<div><strong>${stitchesString}:</strong> ${this.stitches.length} </div>`;
|
||||
};
|
||||
|
||||
Pattern.prototype.drawSizeValuesTo = function (sizeContainer, dimensionsString) {
|
||||
sizeContainer.innerHTML += `<div><strong>${dimensionsString}:</strong> ${Math.round(
|
||||
this.right / 10
|
||||
)}mm x ${Math.round(this.bottom / 10)}mm </div>`;
|
||||
};
|
||||
|
||||
export { Pattern, Color, stitchTypes };
|
||||
107
src/format-readers/dst.js
Normal file
107
src/format-readers/dst.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
// @ts-nocheck
|
||||
import { stitchTypes } from "../file-renderer/pattern";
|
||||
|
||||
function decodeExp(b2) {
|
||||
let returnCode = 0;
|
||||
if (b2 === 0xf3) {
|
||||
return stitchTypes.end;
|
||||
}
|
||||
if ((b2 & 0xc3) === 0xc3) {
|
||||
return stitchTypes.trim | stitchTypes.stop;
|
||||
}
|
||||
if (b2 & 0x80) {
|
||||
returnCode |= stitchTypes.trim;
|
||||
}
|
||||
if (b2 & 0x40) {
|
||||
returnCode |= stitchTypes.stop;
|
||||
}
|
||||
return returnCode;
|
||||
}
|
||||
|
||||
export function dstRead(file, pattern) {
|
||||
let flags,
|
||||
x,
|
||||
y,
|
||||
prevJump = false,
|
||||
thisJump = false,
|
||||
b = [],
|
||||
byteCount = file.byteLength;
|
||||
file.seek(512);
|
||||
|
||||
while (file.tell() < byteCount - 3) {
|
||||
b[0] = file.getUint8();
|
||||
b[1] = file.getUint8();
|
||||
b[2] = file.getUint8();
|
||||
x = 0;
|
||||
y = 0;
|
||||
if (b[0] & 0x01) {
|
||||
x += 1;
|
||||
}
|
||||
if (b[0] & 0x02) {
|
||||
x -= 1;
|
||||
}
|
||||
if (b[0] & 0x04) {
|
||||
x += 9;
|
||||
}
|
||||
if (b[0] & 0x08) {
|
||||
x -= 9;
|
||||
}
|
||||
if (b[0] & 0x80) {
|
||||
y += 1;
|
||||
}
|
||||
if (b[0] & 0x40) {
|
||||
y -= 1;
|
||||
}
|
||||
if (b[0] & 0x20) {
|
||||
y += 9;
|
||||
}
|
||||
if (b[0] & 0x10) {
|
||||
y -= 9;
|
||||
}
|
||||
if (b[1] & 0x01) {
|
||||
x += 3;
|
||||
}
|
||||
if (b[1] & 0x02) {
|
||||
x -= 3;
|
||||
}
|
||||
if (b[1] & 0x04) {
|
||||
x += 27;
|
||||
}
|
||||
if (b[1] & 0x08) {
|
||||
x -= 27;
|
||||
}
|
||||
if (b[1] & 0x80) {
|
||||
y += 3;
|
||||
}
|
||||
if (b[1] & 0x40) {
|
||||
y -= 3;
|
||||
}
|
||||
if (b[1] & 0x20) {
|
||||
y += 27;
|
||||
}
|
||||
if (b[1] & 0x10) {
|
||||
y -= 27;
|
||||
}
|
||||
if (b[2] & 0x04) {
|
||||
x += 81;
|
||||
}
|
||||
if (b[2] & 0x08) {
|
||||
x -= 81;
|
||||
}
|
||||
if (b[2] & 0x20) {
|
||||
y += 81;
|
||||
}
|
||||
if (b[2] & 0x10) {
|
||||
y -= 81;
|
||||
}
|
||||
flags = decodeExp(b[2]);
|
||||
thisJump = flags & stitchTypes.jump;
|
||||
if (prevJump) {
|
||||
flags |= stitchTypes.jump;
|
||||
}
|
||||
pattern.addStitchRel(x, y, flags, true);
|
||||
prevJump = thisJump;
|
||||
}
|
||||
pattern.addStitchRel(0, 0, stitchTypes.end, true);
|
||||
pattern.invertPatternVertical();
|
||||
}
|
||||
50
src/format-readers/exp.js
Normal file
50
src/format-readers/exp.js
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import { stitchTypes } from "../file-renderer/pattern";
|
||||
|
||||
function expDecode(input) {
|
||||
return input > 128 ? -(~input & 255) - 1 : input;
|
||||
}
|
||||
|
||||
export function expRead(file, pattern) {
|
||||
let b0 = 0,
|
||||
b1 = 0,
|
||||
dx = 0,
|
||||
dy = 0,
|
||||
flags = 0,
|
||||
i = 0,
|
||||
byteCount = file.byteLength;
|
||||
while (i < byteCount) {
|
||||
flags = stitchTypes.normal;
|
||||
b0 = file.getInt8(i);
|
||||
i += 1;
|
||||
b1 = file.getInt8(i);
|
||||
i += 1;
|
||||
if (b0 === -128) {
|
||||
if (b1 & 1) {
|
||||
b0 = file.getInt8(i);
|
||||
i += 1;
|
||||
b1 = file.getInt8(i);
|
||||
i += 1;
|
||||
flags = stitchTypes.stop;
|
||||
} else if (b1 === 2 || b1 === 4) {
|
||||
b0 = file.getInt8(i);
|
||||
i += 1;
|
||||
b1 = file.getInt8(i);
|
||||
i += 1;
|
||||
flags = stitchTypes.trim;
|
||||
} else if (b1 === -128) {
|
||||
b0 = file.getInt8(i);
|
||||
i += 1;
|
||||
b1 = file.getInt8(i);
|
||||
i += 1;
|
||||
b0 = 0;
|
||||
b1 = 0;
|
||||
flags = stitchTypes.trim;
|
||||
}
|
||||
}
|
||||
dx = expDecode(b0);
|
||||
dy = expDecode(b1);
|
||||
pattern.addStitchRel(dx, dy, flags, true);
|
||||
}
|
||||
pattern.addStitchRel(0, 0, stitchTypes.end);
|
||||
pattern.invertPatternVertical();
|
||||
}
|
||||
15
src/format-readers/index.js
Normal file
15
src/format-readers/index.js
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { dstRead } from "./dst";
|
||||
import { expRead } from "./exp";
|
||||
import { jefRead } from "./jef";
|
||||
import { pecRead } from "./pec";
|
||||
import { pesRead } from "./pes";
|
||||
|
||||
const supportedFormats = {
|
||||
pes: { ext: ".pes", read: pesRead },
|
||||
dst: { ext: ".dst", read: dstRead },
|
||||
pec: { ext: ".pec", read: pecRead },
|
||||
jef: { ext: ".jef", read: jefRead },
|
||||
exp: { ext: ".exp", read: expRead },
|
||||
};
|
||||
|
||||
export { supportedFormats };
|
||||
133
src/format-readers/jef.js
Normal file
133
src/format-readers/jef.js
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
import { Color, stitchTypes } from "../file-renderer/pattern";
|
||||
|
||||
const colors = [
|
||||
new Color(0, 0, 0, "Black"),
|
||||
new Color(0, 0, 0, "Black"),
|
||||
new Color(255, 255, 255, "White"),
|
||||
new Color(255, 255, 23, "Yellow"),
|
||||
new Color(250, 160, 96, "Orange"),
|
||||
new Color(92, 118, 73, "Olive Green"),
|
||||
new Color(64, 192, 48, "Green"),
|
||||
new Color(101, 194, 200, "Sky"),
|
||||
new Color(172, 128, 190, "Purple"),
|
||||
new Color(245, 188, 203, "Pink"),
|
||||
new Color(255, 0, 0, "Red"),
|
||||
new Color(192, 128, 0, "Brown"),
|
||||
new Color(0, 0, 240, "Blue"),
|
||||
new Color(228, 195, 93, "Gold"),
|
||||
new Color(165, 42, 42, "Dark Brown"),
|
||||
new Color(213, 176, 212, "Pale Violet"),
|
||||
new Color(252, 242, 148, "Pale Yellow"),
|
||||
new Color(240, 208, 192, "Pale Pink"),
|
||||
new Color(255, 192, 0, "Peach"),
|
||||
new Color(201, 164, 128, "Beige"),
|
||||
new Color(155, 61, 75, "Wine Red"),
|
||||
new Color(160, 184, 204, "Pale Sky"),
|
||||
new Color(127, 194, 28, "Yellow Green"),
|
||||
new Color(185, 185, 185, "Silver Grey"),
|
||||
new Color(160, 160, 160, "Grey"),
|
||||
new Color(152, 214, 189, "Pale Aqua"),
|
||||
new Color(184, 240, 240, "Baby Blue"),
|
||||
new Color(54, 139, 160, "Powder Blue"),
|
||||
new Color(79, 131, 171, "Bright Blue"),
|
||||
new Color(56, 106, 145, "Slate Blue"),
|
||||
new Color(0, 32, 107, "Nave Blue"),
|
||||
new Color(229, 197, 202, "Salmon Pink"),
|
||||
new Color(249, 103, 107, "Coral"),
|
||||
new Color(227, 49, 31, "Burnt Orange"),
|
||||
new Color(226, 161, 136, "Cinnamon"),
|
||||
new Color(181, 148, 116, "Umber"),
|
||||
new Color(228, 207, 153, "Blonde"),
|
||||
new Color(225, 203, 0, "Sunflower"),
|
||||
new Color(225, 173, 212, "Orchid Pink"),
|
||||
new Color(195, 0, 126, "Peony Purple"),
|
||||
new Color(128, 0, 75, "Burgundy"),
|
||||
new Color(160, 96, 176, "Royal Purple"),
|
||||
new Color(192, 64, 32, "Cardinal Red"),
|
||||
new Color(202, 224, 192, "Opal Green"),
|
||||
new Color(137, 152, 86, "Moss Green"),
|
||||
new Color(0, 170, 0, "Meadow Green"),
|
||||
new Color(33, 138, 33, "Dark Green"),
|
||||
new Color(93, 174, 148, "Aquamarine"),
|
||||
new Color(76, 191, 143, "Emerald Green"),
|
||||
new Color(0, 119, 114, "Peacock Green"),
|
||||
new Color(112, 112, 112, "Dark Grey"),
|
||||
new Color(242, 255, 255, "Ivory White"),
|
||||
new Color(177, 88, 24, "Hazel"),
|
||||
new Color(203, 138, 7, "Toast"),
|
||||
new Color(247, 146, 123, "Salmon"),
|
||||
new Color(152, 105, 45, "Cocoa Brown"),
|
||||
new Color(162, 113, 72, "Sienna"),
|
||||
new Color(123, 85, 74, "Sepia"),
|
||||
new Color(79, 57, 70, "Dark Sepia"),
|
||||
new Color(82, 58, 151, "Violet Blue"),
|
||||
new Color(0, 0, 160, "Blue Ink"),
|
||||
new Color(0, 150, 222, "Solar Blue"),
|
||||
new Color(178, 221, 83, "Green Dust"),
|
||||
new Color(250, 143, 187, "Crimson"),
|
||||
new Color(222, 100, 158, "Floral Pink"),
|
||||
new Color(181, 80, 102, "Wine"),
|
||||
new Color(94, 87, 71, "Olive Drab"),
|
||||
new Color(76, 136, 31, "Meadow"),
|
||||
new Color(228, 220, 121, "Mustard"),
|
||||
new Color(203, 138, 26, "Yellow Ochre"),
|
||||
new Color(198, 170, 66, "Old Gold"),
|
||||
new Color(236, 176, 44, "Honeydew"),
|
||||
new Color(248, 128, 64, "Tangerine"),
|
||||
new Color(255, 229, 5, "Canary Yellow"),
|
||||
new Color(250, 122, 122, "Vermillion"),
|
||||
new Color(107, 224, 0, "Bright Green"),
|
||||
new Color(56, 108, 174, "Ocean Blue"),
|
||||
new Color(227, 196, 180, "Beige Grey"),
|
||||
new Color(227, 172, 129, "Bamboo"),
|
||||
];
|
||||
|
||||
const jefDecode = (byte) => (byte >= 0x80 ? -(~byte & 0xff) - 1 : byte);
|
||||
const isSpecialStitch = (byte) => byte === 0x80;
|
||||
const isStopOrTrim = (byte) => (byte & 0x01) !== 0 || byte === 0x02 || byte === 0x04;
|
||||
const isEndOfPattern = (byte) => byte === 0x10;
|
||||
const isStop = (byte) => byte & 0x01;
|
||||
const readStitchData = (file) => ({ byte1: file.getUint8(), byte2: file.getUint8() });
|
||||
|
||||
const addColorsToPattern = (file, pattern, colorCount) => {
|
||||
for (let i = 0; i < colorCount; i++) {
|
||||
pattern.addColor(colors[file.getUint32(file.tell(), true) % colors.length]);
|
||||
}
|
||||
};
|
||||
|
||||
const determineStitchType = (file, byte1, byte2) => {
|
||||
if (isSpecialStitch(byte1)) {
|
||||
if (isStopOrTrim(byte2)) {
|
||||
return { type: isStop(byte2) ? stitchTypes.stop : stitchTypes.trim, byte1: file.getUint8(), byte2: file.getUint8() };
|
||||
} else if (isEndOfPattern(byte2)) {
|
||||
return { type: stitchTypes.end, byte1: 0, byte2: 0, end: true };
|
||||
}
|
||||
}
|
||||
return { type: stitchTypes.normal, byte1, byte2 };
|
||||
}
|
||||
|
||||
const processStitches = (file, pattern, stitchCount) => {
|
||||
let stitchesProcessed = 0;
|
||||
while (stitchesProcessed < stitchCount + 100) {
|
||||
let { byte1, byte2 } = readStitchData(file);
|
||||
let { type, byte1: decodedByte1, byte2: decodedByte2, end } = determineStitchType(file, byte1, byte2);
|
||||
pattern.addStitchRel(jefDecode(decodedByte1), jefDecode(decodedByte2), type, true);
|
||||
if (end) break;
|
||||
stitchesProcessed++;
|
||||
}
|
||||
}
|
||||
|
||||
export function jefRead(file, pattern) {
|
||||
file.seek(24);
|
||||
const colorCount = file.getInt32(file.tell(), true);
|
||||
const stitchCount = file.getInt32(file.tell(), true);
|
||||
file.seek(file.tell() + 84);
|
||||
|
||||
addColorsToPattern(file, pattern, colorCount);
|
||||
file.seek(file.tell() + (6 - colorCount) * 4);
|
||||
|
||||
processStitches(file, pattern, stitchCount);
|
||||
pattern.invertPatternVertical();
|
||||
}
|
||||
|
||||
export const jefColors = colors;
|
||||
|
|
@ -1,10 +1,5 @@
|
|||
import { pecColors, pecReadStitches } from './pes';
|
||||
import { pecColors, pecReadStitches } from "./pes";
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {EmbroideryFileView} file
|
||||
* @param {EmbroideryPattern} pattern
|
||||
*/
|
||||
export function pecRead(file, pattern) {
|
||||
let colorChanges, i;
|
||||
file.seek(0x38);
|
||||
153
src/format-readers/pes.js
Normal file
153
src/format-readers/pes.js
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import { Color, stitchTypes } from "../file-renderer/pattern";
|
||||
|
||||
const namedColors = [
|
||||
new Color(0, 0, 0, "Unknown"),
|
||||
new Color(14, 31, 124, "Prussian Blue"),
|
||||
new Color(10, 85, 163, "Blue"),
|
||||
new Color(0, 135, 119, "Teal Green"),
|
||||
new Color(75, 107, 175, "Cornflower Blue"),
|
||||
new Color(237, 23, 31, "Red"),
|
||||
new Color(209, 92, 0, "Reddish Brown"),
|
||||
new Color(145, 54, 151, "Magenta"),
|
||||
new Color(228, 154, 203, "Light Lilac"),
|
||||
new Color(145, 95, 172, "Lilac"),
|
||||
new Color(158, 214, 125, "Mint Green"),
|
||||
new Color(232, 169, 0, "Deep Gold"),
|
||||
new Color(254, 186, 53, "Orange"),
|
||||
new Color(255, 255, 0, "Yellow"),
|
||||
new Color(112, 188, 31, "Lime Green"),
|
||||
new Color(186, 152, 0, "Brass"),
|
||||
new Color(168, 168, 168, "Silver"),
|
||||
new Color(125, 111, 0, "Russet Brown"),
|
||||
new Color(255, 255, 179, "Cream Brown"),
|
||||
new Color(79, 85, 86, "Pewter"),
|
||||
new Color(0, 0, 0, "Black"),
|
||||
new Color(11, 61, 145, "Ultramarine"),
|
||||
new Color(119, 1, 118, "Royal Purple"),
|
||||
new Color(41, 49, 51, "Dark Gray"),
|
||||
new Color(42, 19, 1, "Dark Brown"),
|
||||
new Color(246, 74, 138, "Deep Rose"),
|
||||
new Color(178, 118, 36, "Light Brown"),
|
||||
new Color(252, 187, 197, "Salmon Pink"),
|
||||
new Color(254, 55, 15, "Vermillion"),
|
||||
new Color(240, 240, 240, "White"),
|
||||
new Color(106, 28, 138, "Violet"),
|
||||
new Color(168, 221, 196, "Seacrest"),
|
||||
new Color(37, 132, 187, "Sky Blue"),
|
||||
new Color(254, 179, 67, "Pumpkin"),
|
||||
new Color(255, 243, 107, "Cream Yellow"),
|
||||
new Color(208, 166, 96, "Khaki"),
|
||||
new Color(209, 84, 0, "Clay Brown"),
|
||||
new Color(102, 186, 73, "Leaf Green"),
|
||||
new Color(19, 74, 70, "Peacock Blue"),
|
||||
new Color(135, 135, 135, "Gray"),
|
||||
new Color(216, 204, 198, "Warm Gray"),
|
||||
new Color(67, 86, 7, "Dark Olive"),
|
||||
new Color(253, 217, 222, "Flesh Pink"),
|
||||
new Color(249, 147, 188, "Pink"),
|
||||
new Color(0, 56, 34, "Deep Green"),
|
||||
new Color(178, 175, 212, "Lavender"),
|
||||
new Color(104, 106, 176, "Wisteria Violet"),
|
||||
new Color(239, 227, 185, "Beige"),
|
||||
new Color(247, 56, 102, "Carmine"),
|
||||
new Color(181, 75, 100, "Amber Red"),
|
||||
new Color(19, 43, 26, "Olive Green"),
|
||||
new Color(199, 1, 86, "Dark Fuschia"),
|
||||
new Color(254, 158, 50, "Tangerine"),
|
||||
new Color(168, 222, 235, "Light Blue"),
|
||||
new Color(0, 103, 62, "Emerald Green"),
|
||||
new Color(78, 41, 144, "Purple"),
|
||||
new Color(47, 126, 32, "Moss Green"),
|
||||
new Color(255, 204, 204, "Flesh Pink"),
|
||||
new Color(255, 217, 17, "Harvest Gold"),
|
||||
new Color(9, 91, 166, "Electric Blue"),
|
||||
new Color(240, 249, 112, "Lemon Yellow"),
|
||||
new Color(227, 243, 91, "Fresh Green"),
|
||||
new Color(255, 153, 0, "Orange"),
|
||||
new Color(255, 240, 141, "Cream Yellow"),
|
||||
new Color(255, 200, 200, "Applique"),
|
||||
];
|
||||
|
||||
function readPecStitches(file, pattern) {
|
||||
let stitchNumber = 0;
|
||||
const byteCount = file.byteLength;
|
||||
|
||||
while (file.tell() < byteCount) {
|
||||
let [xOffset, yOffset] = [file.getUint8(), file.getUint8()];
|
||||
let stitchType = stitchTypes.normal;
|
||||
|
||||
if (isEndStitch(xOffset, yOffset)) {
|
||||
pattern.addStitchRel(0, 0, stitchTypes.end, true);
|
||||
break;
|
||||
}
|
||||
|
||||
if (isStopStitch(xOffset, yOffset)) {
|
||||
file.getInt8(); // Skip extra byte
|
||||
pattern.addStitchRel(0, 0, stitchTypes.stop, true);
|
||||
stitchNumber++;
|
||||
continue;
|
||||
}
|
||||
|
||||
stitchType = determineStitchType(xOffset, yOffset);
|
||||
[xOffset, yOffset] = decodeCoordinates(xOffset, yOffset, file);
|
||||
|
||||
pattern.addStitchRel(xOffset, yOffset, stitchType, true);
|
||||
stitchNumber++;
|
||||
}
|
||||
}
|
||||
|
||||
function isEndStitch(xOffset, yOffset) {
|
||||
return xOffset === 0xff && yOffset === 0x00;
|
||||
}
|
||||
|
||||
function isStopStitch(xOffset, yOffset) {
|
||||
return xOffset === 0xfe && yOffset === 0xb0;
|
||||
}
|
||||
|
||||
function determineStitchType(xOffset, yOffset) {
|
||||
if (xOffset & 0x80) {
|
||||
if (xOffset & 0x20) return stitchTypes.trim;
|
||||
if (xOffset & 0x10) return stitchTypes.jump;
|
||||
}
|
||||
if (yOffset & 0x80) {
|
||||
if (yOffset & 0x20) return stitchTypes.trim;
|
||||
if (yOffset & 0x10) return stitchTypes.jump;
|
||||
}
|
||||
return stitchTypes.normal;
|
||||
}
|
||||
|
||||
function decodeCoordinates(xOffset, yOffset, file) {
|
||||
if (xOffset & 0x80) {
|
||||
xOffset = ((xOffset & 0x0f) << 8) + yOffset;
|
||||
if (xOffset & 0x800) xOffset -= 0x1000;
|
||||
yOffset = file.getUint8();
|
||||
} else if (xOffset >= 0x40) {
|
||||
xOffset -= 0x80;
|
||||
}
|
||||
|
||||
if (yOffset & 0x80) {
|
||||
yOffset = ((yOffset & 0x0f) << 8) + file.getUint8();
|
||||
if (yOffset & 0x800) yOffset -= 0x1000;
|
||||
} else if (yOffset > 0x3f) {
|
||||
yOffset -= 0x80;
|
||||
}
|
||||
|
||||
return [xOffset, yOffset];
|
||||
}
|
||||
|
||||
export function pesRead(file, pattern) {
|
||||
const pecStart = file.getInt32(8, true);
|
||||
file.seek(pecStart + 48);
|
||||
|
||||
const numColors = file.getInt8() + 1;
|
||||
for (let i = 0; i < numColors; i++) {
|
||||
pattern.addColor(namedColors[file.getInt8()]);
|
||||
}
|
||||
|
||||
file.seek(pecStart + 532);
|
||||
readPecStitches(file, pattern);
|
||||
pattern.addStitchRel(0, 0, stitchTypes.end);
|
||||
}
|
||||
|
||||
export const pecReadStitches = readPecStitches;
|
||||
export const pecColors = namedColors;
|
||||
35
src/i18n/index.js
Normal file
35
src/i18n/index.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { derived, writable } from "svelte/store";
|
||||
import translations from "./translations";
|
||||
|
||||
const browserLocale = navigator.language || "en";
|
||||
const [baseLang, region] = browserLocale.split("-");
|
||||
|
||||
export const DEFAULT_LOCALE = translations[browserLocale] ? browserLocale : translations[baseLang] ? baseLang :"en";
|
||||
export const locale = writable(DEFAULT_LOCALE);
|
||||
export const locales = Object.entries(translations).map(([key, lang]) => [key, lang.name]);
|
||||
|
||||
function translate(locale, key, vars = {}) {
|
||||
if (!key) throw new Error("Translation key is required.");
|
||||
|
||||
const validLocale = translations[locale]
|
||||
? locale
|
||||
: translations[baseLang]
|
||||
? baseLang
|
||||
: "en";
|
||||
|
||||
let text = translations[validLocale][key] || translations["en"][key];
|
||||
|
||||
if (!text) {
|
||||
console.error(`Missing translation for key "${key}" in locale "${validLocale}".`);
|
||||
return key;
|
||||
}
|
||||
|
||||
return Object.entries(vars).reduce(
|
||||
(str, [varKey, value]) => str.replaceAll(`{{${varKey}}}`, value),
|
||||
text
|
||||
);
|
||||
}
|
||||
|
||||
export const t = derived(locale, ($locale) => (key, vars = {}) =>
|
||||
translate($locale, key, vars)
|
||||
);
|
||||
32
src/i18n/translations.js
Normal file
32
src/i18n/translations.js
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
export default {
|
||||
en: {
|
||||
"main.title": "Upload files",
|
||||
"main.languageSwitch": "Mudar para Português",
|
||||
"main.fileSize": "Max file size is <strong>{{fileSize}}kb</strong>.",
|
||||
"main.supportedFormats": "Accepted formats: <strong>{{supportedFormats}}</strong>.",
|
||||
"main.render": "Render files",
|
||||
"main.dropzone": "Drag and drop files here or click to upload.",
|
||||
"main.selected": "Selected files",
|
||||
"main.rejected": "Rejected files",
|
||||
"main.stitches": "Stitches",
|
||||
"main.dimensions": "Dimensions (x, y)",
|
||||
"main.download": "Download image",
|
||||
"main.copyright": "Copyright © {{year}} <a href=\"{{website}}\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> All rights reserved.",
|
||||
"main.version": "Version: {{version}}"
|
||||
},
|
||||
pt: {
|
||||
"main.title": "Carregar arquivos",
|
||||
"main.languageSwitch": "Switch to English",
|
||||
"main.fileSize": "O tamanho máximo do arquivo é <strong>{{fileSize}}kb</strong>.",
|
||||
"main.supportedFormats": "Formatos aceitos: <strong>{{supportedFormats}}</strong>.",
|
||||
"main.render": "Renderizar arquivos",
|
||||
"main.dropzone": "Arraste e solte os arquivos aqui ou clique para fazer upload.",
|
||||
"main.selected": "Arquivos selecionados",
|
||||
"main.rejected": "Arquivos recusados",
|
||||
"main.stitches": "Pontos",
|
||||
"main.dimensions": "Dimensões (x, y)",
|
||||
"main.download": "Baixar imagem",
|
||||
"main.copyright": "Copyright © {{year}} <a href=\"{{website}}/pt-br\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> Todos os direitos reservados.",
|
||||
"main.version": "Versão: {{version}}"
|
||||
},
|
||||
};
|
||||
|
|
@ -1,51 +1,32 @@
|
|||
<script>
|
||||
import { t } from '$lib/translations';
|
||||
import renderFileToCanvas from '$lib/file-renderer';
|
||||
import { t } from "../i18n"
|
||||
import renderFileToCanvas from "../file-renderer";
|
||||
|
||||
/**
|
||||
* @type {ArrayLike<any>}
|
||||
*/
|
||||
export let files = [];
|
||||
|
||||
/**
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
let errorMessageRef;
|
||||
let canvasRefs = [];
|
||||
let colorRefs = [];
|
||||
let stitchesRefs = [];
|
||||
let sizeRefs = [];
|
||||
let errorMessageRef;
|
||||
let localizedStrings = {
|
||||
stitches: $t('viewer.stitches'),
|
||||
dimensions: $t('viewer.dimensions'),
|
||||
};
|
||||
stitches: $t("main.stitches"),
|
||||
dimensions: $t("main.dimensions"),
|
||||
}
|
||||
|
||||
/**
|
||||
* Downloads a given HTMLCanvasElement as a PNG image.
|
||||
*
|
||||
* @param {HTMLCanvasElement} canvas - The canvas element to export as an image.
|
||||
* @param {string} filename - The desired name of the downloaded file (extension will be replaced with `.png`).
|
||||
*/
|
||||
const downloadCanvasAsImage = (canvas, filename) => {
|
||||
const image = canvas
|
||||
.toDataURL('image/png')
|
||||
.replace('image/png', 'image/octet-stream');
|
||||
.toDataURL("image/png")
|
||||
.replace("image/png", "image/octet-stream");
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.download = `${filename.split('.').slice(0, -1).join('.')}.png`;
|
||||
const link = document.createElement("a");
|
||||
link.download = `${filename.split(".").slice(0, -1).join(".")}.png`;
|
||||
link.href = image;
|
||||
link.click();
|
||||
};
|
||||
|
||||
/**
|
||||
* Cliks the button to render the files when user press enter.
|
||||
*
|
||||
* @param {KeyboardEvent} evt - The event that triggered the language switch.
|
||||
*/
|
||||
const onKeydown = (evt) => {
|
||||
if (evt.key === 'Enter') {
|
||||
const button = document.getElementById('download-button');
|
||||
if (button) button.click();
|
||||
if (evt.key === "Enter") {
|
||||
document.getElementById("download-button").click();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -54,19 +35,18 @@
|
|||
<div id="container" style="width: 100%; heigth: 100vh;">
|
||||
{#each Array.from(files) as file, i}
|
||||
<div class="canvas-container">
|
||||
<canvas bind:this={canvasRefs[i]} class="canvas"></canvas>
|
||||
<canvas bind:this={canvasRefs[i]} class="canvas" />
|
||||
<p><strong>{file.name}</strong></p>
|
||||
<div class="stitches-container" bind:this={stitchesRefs[i]}></div>
|
||||
<div class="size-container" bind:this={sizeRefs[i]}></div>
|
||||
<div class="colors-container" bind:this={colorRefs[i]}></div>
|
||||
<div class="stitches-container" bind:this={stitchesRefs[i]} />
|
||||
<div class="size-container" bind:this={sizeRefs[i]} />
|
||||
<div class="colors-container" bind:this={colorRefs[i]} />
|
||||
<div
|
||||
id="download-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onkeydown={onKeydown}
|
||||
onclick={() => downloadCanvasAsImage(canvasRefs[i], file.name)}
|
||||
on:keydown={onKeydown}
|
||||
on:click={() => downloadCanvasAsImage(canvasRefs[i], file.name)}
|
||||
>
|
||||
{$t('viewer.download')}
|
||||
{$t("main.download")}
|
||||
</div>
|
||||
</div>
|
||||
{canvasRefs[i] &&
|
||||
|
|
@ -77,11 +57,11 @@
|
|||
colorRefs[i],
|
||||
stitchesRefs[i],
|
||||
sizeRefs[i],
|
||||
localizedStrings,
|
||||
localizedStrings
|
||||
)}
|
||||
{/each}
|
||||
<!-- svelte-ignore a11y-missing-content -->
|
||||
<h1 bind:this={errorMessageRef}></h1>
|
||||
<h1 bind:this={errorMessageRef} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
@ -103,9 +83,7 @@
|
|||
max-height: 1000px;
|
||||
margin-bottom: 15px;
|
||||
padding: 10px;
|
||||
/* border: 2px solid black;*/
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 16px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
|
|
@ -127,18 +105,15 @@
|
|||
padding: 10px 0;
|
||||
}
|
||||
|
||||
div[role='button'] {
|
||||
div[role="button"] {
|
||||
background-color: #05345f;
|
||||
font-weight: bold;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
div[role='button']:hover {
|
||||
div[role="button"]:hover {
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
color: white;
|
||||
|
|
@ -153,10 +128,5 @@
|
|||
#container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div[role='button'] {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
65
src/lib/Dropzone.svelte
Normal file
65
src/lib/Dropzone.svelte
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<script>
|
||||
import { t } from "../i18n"
|
||||
|
||||
export let files;
|
||||
export let supportedFormats;
|
||||
export let onKeydown;
|
||||
export let onClick;
|
||||
export let onDrop;
|
||||
export let onChange;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div
|
||||
id="dropzone"
|
||||
tabindex={0}
|
||||
on:keydown={onKeydown}
|
||||
on:click={onClick}
|
||||
on:dragover|preventDefault|stopPropagation
|
||||
on:drop|preventDefault|stopPropagation={onDrop}
|
||||
>
|
||||
<label id="file-label" for="file-input"
|
||||
>{$t("main.dropzone")}</label
|
||||
>
|
||||
<input
|
||||
id="file-input"
|
||||
type="file"
|
||||
name="files[]"
|
||||
accept={supportedFormats.join(",")}
|
||||
multiple
|
||||
on:change={onChange}
|
||||
bind:files
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#dropzone {
|
||||
display: flex;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
border: 5px dotted black;
|
||||
padding: 15px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#file-label {
|
||||
z-index: -1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#dropzone:hover {
|
||||
cursor: pointer;
|
||||
border: 5px dotted #05345f;
|
||||
color: #05345f;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 812px) {
|
||||
#dropzone {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
44
src/lib/FileList.svelte
Normal file
44
src/lib/FileList.svelte
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script>
|
||||
export let title;
|
||||
export let files = [];
|
||||
export let isError = false;
|
||||
</script>
|
||||
|
||||
{#if files.length !== 0}
|
||||
<div id="selected-files-container">
|
||||
<h2>{title}:</h2>
|
||||
{#each Array.from(files) as file}
|
||||
<div id={isError ? "selected-file-card-error" : "selected-file-card"}>
|
||||
<p>{file.name} ({file.size / 1000} kb)</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#selected-file-card {
|
||||
border: 1px solid #000;
|
||||
width: 500px;
|
||||
padding-left: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#selected-file-card-error {
|
||||
border: 1px solid red;
|
||||
width: 500px;
|
||||
padding-left: 15px;
|
||||
margin-top: 10px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 812px) {
|
||||
#selected-files-container,
|
||||
#selected-file-card-error {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#selected-file-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
143
src/lib/FileViewer.svelte
Normal file
143
src/lib/FileViewer.svelte
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
<script>
|
||||
import CardList from "./CardList.svelte";
|
||||
import Dropzone from "./Dropzone.svelte";
|
||||
import FileList from "./FileList.svelte";
|
||||
import LanguageIcon from './LanguageIcon.svelte';
|
||||
|
||||
import { filterFiles } from "../utils/filterFiles";
|
||||
import { supportedFormats } from "../format-readers";
|
||||
import { t, locale, locales } from "../i18n"
|
||||
|
||||
let acceptedFiles;
|
||||
let rejectedFiles;
|
||||
let areAcceptedFilesRendered = false;
|
||||
const fileRequirements = {
|
||||
supportedFormats: Object.values(supportedFormats).map((f) => f.ext),
|
||||
maxSize: 700000,
|
||||
};
|
||||
|
||||
const onSubmit = () => {
|
||||
areAcceptedFilesRendered = true;
|
||||
};
|
||||
|
||||
const onDrop = (evt) => {
|
||||
onChange(evt);
|
||||
};
|
||||
|
||||
const onChange = (evt) => {
|
||||
acceptedFiles = null;
|
||||
areAcceptedFilesRendered = false;
|
||||
|
||||
const changedFiles = evt.dataTransfer
|
||||
? evt.dataTransfer.files
|
||||
: evt.target.files;
|
||||
|
||||
const results = filterFiles(changedFiles, fileRequirements);
|
||||
acceptedFiles = results.accepted;
|
||||
rejectedFiles = results.rejected;
|
||||
};
|
||||
|
||||
const onClick = () => {
|
||||
document.getElementById("file-input").click();
|
||||
};
|
||||
|
||||
const onKeydown = (evt) => {
|
||||
if (evt.key === "Enter") {
|
||||
document.getElementById("file-input").click();
|
||||
}
|
||||
};
|
||||
|
||||
const onSwitchToOppositeLang = () => {
|
||||
const oppositeLang = locales.find(item => item[0] !== $locale);
|
||||
locale.set(oppositeLang[0]);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<form
|
||||
id="form"
|
||||
enctype="multipart/form-data"
|
||||
on:submit|preventDefault|stopPropagation={onSubmit}
|
||||
>
|
||||
<div class="title-container">
|
||||
<h2>{$t("main.title")}</h2>
|
||||
<a class="common-switch {$locale === 'en' ? 'portuguese-switch' : 'english-switch' }" href="#" on:click|preventDefault={onSwitchToOppositeLang}>
|
||||
<div style="display: flex; width: fit-content;">
|
||||
<div class="language-icon">
|
||||
<LanguageIcon cssClass="{$locale === 'en' ? 'portuguese-switch' : 'english-switch' }" />
|
||||
</div>
|
||||
<span>{$t("main.languageSwitch")}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<p>
|
||||
{@html $t("main.fileSize", { fileSize: fileRequirements.maxSize / 1000 })}
|
||||
{@html $t("main.supportedFormats", { supportedFormats: fileRequirements.supportedFormats.join(", ") })}
|
||||
</p>
|
||||
|
||||
<Dropzone
|
||||
files={acceptedFiles}
|
||||
supportedFormats={fileRequirements.supportedFormats}
|
||||
{onKeydown}
|
||||
{onClick}
|
||||
{onDrop}
|
||||
{onChange}
|
||||
/>
|
||||
|
||||
<input type="submit" value={$t("main.render")} />
|
||||
</form>
|
||||
|
||||
{#if areAcceptedFilesRendered}
|
||||
<CardList files={acceptedFiles} />
|
||||
{:else}
|
||||
<FileList title={$t("main.selected")} files={acceptedFiles} />
|
||||
<FileList title={$t("main.rejected")} files={rejectedFiles} isError />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.title-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.language-icon {
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.common-switch {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.portuguese-switch {
|
||||
color: #0C8F27;
|
||||
border-bottom: 3px solid #0C8F27;
|
||||
fill: #0C8F27 !important;
|
||||
}
|
||||
|
||||
.portuguese-switch:hover {
|
||||
background: #0C8F27;
|
||||
color: #ffffff;
|
||||
fill: #ffffff !important;
|
||||
}
|
||||
|
||||
.english-switch{
|
||||
color: #BE0A2F;
|
||||
border-bottom: 3px solid #BE0A2F;
|
||||
width: fit-content;
|
||||
fill: #BE0A2F !important;
|
||||
}
|
||||
|
||||
.english-switch:hover {
|
||||
background: #BE0A2F;
|
||||
color: #ffffff;
|
||||
fill: #ffffff !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 812px) {
|
||||
#form {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
18
src/lib/Footer.svelte
Normal file
18
src/lib/Footer.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script>
|
||||
import { t } from "../i18n"
|
||||
import { appVersion } from "../utils/env";
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<p>{@html $t("main.copyright", { year: new Date().getFullYear(), website: "https://leomurca.xyz" })}</p>
|
||||
<p>{@html $t("main.version", { version: appVersion() })}</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
bottom: 0;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
42
src/lib/Header.svelte
Normal file
42
src/lib/Header.svelte
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<script>
|
||||
import MediaQuery from "../lib/MediaQuery.svelte";
|
||||
import logo from "../assets/embroidery-viewer-logo.webp";
|
||||
import logoMobile from "../assets/embroidery-viewer-logo-mobile.webp";
|
||||
|
||||
const configsFor = (matches) => {
|
||||
return matches
|
||||
? { src: logoMobile, width: 350, height: 96 }
|
||||
: { src: logo, width: 460, height: 200 };
|
||||
};
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<a href="/">
|
||||
<MediaQuery query="(min-width: 481px) and (max-width: 812px)" let:matches>
|
||||
{@const configs = configsFor(matches)}
|
||||
<img
|
||||
class="logo"
|
||||
alt="Embroidery viewer logo."
|
||||
src={configs.src}
|
||||
width={configs.width}
|
||||
height={configs.height}
|
||||
/>
|
||||
</MediaQuery>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
margin-top: 100px;
|
||||
}
|
||||
.logo {
|
||||
background-image: logo;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 812px) {
|
||||
.logo {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
63
src/lib/LanguageIcon.svelte
Normal file
63
src/lib/LanguageIcon.svelte
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<script>
|
||||
export let cssClass;
|
||||
</script>
|
||||
<svg version="1.1" id="Optimized" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 841.8897705 595.2755737" style="enable-background:new 0 0 841.8897705 595.2755737;" xml:space="preserve">
|
||||
<polygon class={cssClass} style="fill: #020203;" points="512.5472412,488.2385864 542.3688354,537.3009033 558.0941772,491.724762 "/>
|
||||
<path class={cssClass} style="fill:#020203;" d="M277.7966003,213.2223663c-1.1176147-1.0975342,1.4554749,8.9684143,5.0365906,12.5897064
|
||||
c6.3496399,6.4062805,11.3096008,7.23172,13.9502563,7.3376465c5.8437805,0.2337646,13.0553894-1.4554596,17.3377991-3.2506104
|
||||
c4.1435852-1.767746,11.404541-5.4748993,14.1529236-10.8822479c0.5825195-1.1559601,2.1731262-3.0972137,1.1742859-7.8927765
|
||||
c-0.7579041-3.6888733-3.1064148-4.980011-5.9698181-4.7754517c-2.8634644,0.1935883-11.5323792,2.5055237-15.7253113,3.7948151
|
||||
c-4.1947021,1.2728424-12.8344116,3.9025269-16.6000366,4.7188416
|
||||
C287.3968811,215.6767426,279.1151123,214.4842987,277.7966003,213.2223663z"/>
|
||||
<path class={cssClass} style="fill: #020203;" d="M383.9637451,333.5533752c-1.6582031-0.6026001-35.9649353-14.8140564-40.828064-17.1424255
|
||||
c-3.979248-1.9137573-13.7365417-6.0391541-18.3276062-7.9127808c12.9312439-19.9383545,21.0942688-34.984314,22.1808472-37.276123
|
||||
c2.0106506-4.1929321,15.697876-30.9757843,16.0174561-32.6248322c0.3104858-1.6709595,0.6994324-7.8434601,0.3981323-9.3098907
|
||||
c-0.3013-1.495636-5.3196411,1.3787689-12.1331482,3.6889343c-6.8244629,2.3009491-19.7940674,10.7361145-24.8032837,11.7934723
|
||||
c-5.0274658,1.048233-21.0942688,7.134964-29.3157349,9.8631897c-8.2214966,2.7283783-23.7732849,7.4745941-30.1704102,9.2021637
|
||||
c-6.4062805,1.7275696-11.9980316,1.8645325-15.5810242,2.9511414c0,0,0.4766541,5.0183411,1.4280701,6.5231934
|
||||
c0.9404755,1.5046997,4.329895,5.193634,8.270813,6.2235718c3.9408875,1.037262,10.4640198,0.6208801,13.4352112-0.0584412
|
||||
c2.9693909-0.6903381,8.1137695-3.203125,8.8040161-4.3006287c0.6976929-1.1158447-0.3596802-4.5527039,0.8144836-5.5917969
|
||||
c1.1852417-1.0281067,16.8429565-4.6878052,22.754303-6.4738464c5.911377-1.8170166,28.5396118-9.6112061,31.6076355-9.2130585
|
||||
c-0.9715576,3.2231903-19.1731262,39.2757416-25.0351562,50.0319366
|
||||
c-5.8639221,10.7544556-39.9259338,58.0690613-47.1777039,66.4074402
|
||||
c-5.5041504,6.3386841-18.8425598,22.5588379-23.4628143,26.2185059c1.1650848,0.3214722,9.4249115-0.3870544,10.9296875-1.3184509
|
||||
c9.3774872-5.7762756,24.9968414-25.219635,30.0261078-31.1419983
|
||||
c14.9492188-17.5313721,28.0831604-35.9465942,38.4978638-51.7503967h0.0109558
|
||||
c2.0288696,0.8454895,18.4335022,14.2113342,22.7140503,17.1734619c4.2806396,2.9602051,21.172821,12.3851318,24.832489,13.9483643
|
||||
c3.6596985,1.5832825,17.7249756,8.0681152,18.3166809,5.8730469
|
||||
C388.7592468,347.1237793,385.6236877,334.1834412,383.9637451,333.5533752z"/>
|
||||
<path class={cssClass} style="fill-rule:evenodd;clip-rule:evenodd;fill:#020203;" d="M304.6889954,512.2145996
|
||||
c3.2871399,2.0087891,6.3916626,3.6523438,9.8614197,5.2958984c6.9394836,3.4697876,14.7920837,7.1221313,22.2794495,9.8614502
|
||||
c10.2266541,3.8349609,20.4532776,6.9395142,30.6799316,9.3135376c5.6611633,1.2783203,11.8701782,2.3740234,17.8966064,3.2871094
|
||||
c0.5478516,0,16.8009033,2.0087891,20.0880432,2.0087891h16.4356689c6.3916321-0.5478516,12.4180603-0.9130859,18.8096924-1.8261719
|
||||
c5.1133423-0.7304688,10.7745056-1.6435547,16.2530518-2.921875c4.0176086-0.9130859,8.2178345-1.8261719,12.2354431-3.1045532
|
||||
c3.8349915-1.0957031,8.2178345-2.5566406,12.4180603-4.0175781c2.7392883-0.9130859,5.6611938-2.1914062,8.5830688-3.2871094
|
||||
c2.374054-1.0957642,5.2959595-2.3740845,8.0352173-3.4697876c3.2871399-1.4609375,7.1221313-3.4697266,10.7745056-5.2958984
|
||||
c2.9219055-1.4609985,6.2090149-3.2871704,9.3135681-5.1133423c2.3740234-1.2783508,7.8526001-5.4785767,10.7744751-5.4785767
|
||||
c3.2871094,0,5.4785767,2.9219055,5.4785767,5.4785767c0,5.2959595-7.1221313,6.9395142-10.4093018,9.3135376
|
||||
c-3.4697266,2.3740234-7.6699829,4.2002563-11.3223267,6.2090454c-7.3047485,3.8349609-14.7921143,7.1221313-21.9142151,9.8613892
|
||||
c-9.3135681,3.4697266-19.5401917,6.756897-28.6711121,8.9483032c-3.4697571,0.7304688-6.9395142,1.6435547-10.4092712,2.1914062
|
||||
c-1.8261719,0.3652344-20.818512,3.2871704-26.1144409,3.2871704h-24.1056519
|
||||
c-6.3916626-0.5478516-13.1485291-1.2783203-19.5401917-2.1914673c-5.6611633-0.9130859-11.6875916-2.0087891-17.3487549-3.2871094
|
||||
c-4.382843-0.9130859-9.1309204-2.1914062-13.3311462-3.4697266c-7.3047485-2.0088501-14.4268799-4.5654907-21.366394-7.3047485
|
||||
c-12.6006775-4.7481079-25.7492065-10.9571533-38.1672668-19.1749878c-2.1914062-1.4609375-2.3740234-2.921875-2.3740234-4.5654297
|
||||
c0-2.7392883,2.0087891-5.2959595,5.295929-5.2959595C297.7495117,507.4664917,303.5932922,511.6667175,304.6889954,512.2145996z"/>
|
||||
<g>
|
||||
<path class={cssClass} d="M639.8383789,180.4025879l-40.7682495-12.975708V48.3634644
|
||||
c0-3.4697266-2.5567017-5.843811-5.843811-5.843811c-2.5567017,0-84.9176636,28.3059082-91.4918823,30.6799316
|
||||
c-22.3344727,7.4448242-86.798645,29.7334595-86.798645,29.7334595l-0.000061,0.0002441
|
||||
c-1.0336304,0.2964478-2.6376953,0.7871704-4.7411499,1.4482422L252.854248,48.8499756
|
||||
c-1.1881714-0.4193726-2.43396,0.4620972-2.43396,1.7220459v2v104.723877
|
||||
c-24.4053345,8.1710205-41.8085327,14.0198364-42.7017212,14.335083c-1.6435547,0.5478516-4.2002563,0.9130859-5.6611938,2.921875
|
||||
c-0.7304688,0.7304688-0.9130859,2.0088501-1.2783203,2.921936V484.456543c0,0.3652344,0.1826172,0.5478516,0.1826172,0.7304688
|
||||
c1.0957031,2.3740845,3.1044922,3.835022,5.2959595,3.835022c2.7392578,0,208.3677368-69.0298462,212.9332275-70.8560181
|
||||
c0.2156372-0.0718994,0.458374-0.2409668,0.6971436-0.4380493l218.84198,69.75177
|
||||
c1.1779175,0.3754883,2.3807373-0.50354,2.3807373-1.7399292V182.1427612
|
||||
C641.1107178,181.3475952,640.5961304,180.6437988,639.8383789,180.4025879z M410.9730225,409.4003296l-199.0542603,66.2905273
|
||||
V182.0402222l199.0542603-66.2905273V409.4003296z M587.9303589,55.6682129v108.2130737l-164.4921875-52.3546143
|
||||
L587.9303589,55.6682129z M567.6870728,385.267334l-10.5206299-38.4284668l-60.5161133-18.3422241l-13.0134277,31.3044434
|
||||
l-29.2919922-8.8861084l62.1779785-152.5870361l28.5085449,8.6360474l51.9385376,187.1876831L567.6870728,385.267334z"/>
|
||||
<polygon class={cssClass} style="fill: #020203;" points="507.8375244,300.3788452 547.7670288,312.4828491 529.5562744,247.8833618 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -1,15 +1,9 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount } from "svelte";
|
||||
|
||||
export let query;
|
||||
|
||||
/**
|
||||
* @type {MediaQueryList}
|
||||
*/
|
||||
let mql;
|
||||
/**
|
||||
* @type {((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null}
|
||||
*/
|
||||
let mqlListener;
|
||||
let wasMounted = false;
|
||||
let matches = false;
|
||||
|
|
@ -28,9 +22,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} query
|
||||
*/
|
||||
function addNewListener(query) {
|
||||
mql = window.matchMedia(query);
|
||||
mqlListener = (v) => (matches = v.matches);
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 155 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 130 KiB |
|
|
@ -1,18 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="68.965652mm"
|
||||
height="68.948975mm"
|
||||
viewBox="0 0 68.965652 68.948975"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs1" /><g
|
||||
id="layer1"
|
||||
transform="translate(-78.581248,-114.14203)"><path
|
||||
d="m 101.71922,133.815 7.89657,-7.93103 v 33.06897 c 0,4.59771 6.89657,4.59771 6.89657,0 v -33.06897 l 7.89657,7.93103 c 1.34889,1.35999 3.54767,1.35999 4.89656,0 1.36001,-1.34889 1.36001,-3.5477 0,-4.89659 l -13.79313,-13.79308 c -0.32789,-0.31411 -0.71459,-0.56036 -1.1379,-0.72463 -0.83953,-0.34489 -1.78117,-0.34489 -2.6207,0 -0.42331,0.16427 -0.81001,0.41052 -1.1379,0.72463 l -13.793128,13.79308 c -3.265094,3.26437 1.631464,8.16096 4.896558,4.89659 z m 42.3794,14.7931 c -1.90447,0 -3.44833,1.5439 -3.44828,3.44837 v 20.68969 c -2e-5,1.90442 -1.54386,3.44824 -3.44828,3.44824 H 88.926098 c -1.904415,0 -3.448254,-1.54382 -3.448278,-3.44824 v -20.68969 c 0,-4.59771 -6.89657,-4.59771 -6.89657,0 v 20.68969 c -10e-7,5.7133 4.631545,10.34485 10.344848,10.34485 h 48.275962 c 5.7133,0 10.34485,-4.63155 10.34485,-10.34485 v -20.68969 c 5e-5,-1.90447 -1.54382,-3.44837 -3.44829,-3.44837 z"
|
||||
id="path1"
|
||||
style="opacity:1;mix-blend-mode:normal;fill:#06345f;fill-opacity:1;stroke-width:3.448;stroke-dasharray:none" /></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
<script>
|
||||
import { isDevelopment } from '$lib/utils/env';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#if !isDevelopment()}
|
||||
<script
|
||||
defer
|
||||
src="https://umami.leomurca.xyz/script.js"
|
||||
data-website-id="bd4c0533-36e6-402d-ac04-577993aaf43a"
|
||||
></script>
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<script>
|
||||
import { t } from '$lib/translations';
|
||||
import upload from '$lib/assets/upload.svg';
|
||||
|
||||
export let files;
|
||||
export let supportedFormats;
|
||||
export let onKeydown;
|
||||
export let onClick;
|
||||
export let onDrop;
|
||||
export let onChange;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<div
|
||||
id="dropzone"
|
||||
tabindex={0}
|
||||
role="region"
|
||||
on:keydown={onKeydown}
|
||||
on:dragover|preventDefault|stopPropagation
|
||||
on:drop|preventDefault|stopPropagation={onDrop}
|
||||
>
|
||||
<img src={upload} width="40" height="40" alt="Upload icon" />
|
||||
<label id="file-label" for="file-input">{@html $t('viewer.dropzone')}</label>
|
||||
<input
|
||||
id="file-input"
|
||||
type="file"
|
||||
name="files[]"
|
||||
accept={supportedFormats.join(',')}
|
||||
multiple
|
||||
on:change={onChange}
|
||||
bind:this={files}
|
||||
/>
|
||||
<button on:click|preventDefault={onClick}>{$t('viewer.browse')}</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#dropzone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
border: 1px solid #d3dce6;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#file-label {
|
||||
z-index: -1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 20px;
|
||||
padding: 12px 24px;
|
||||
background-color: #06345f;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
width: 60%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 812px) {
|
||||
#dropzone {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<script>
|
||||
export let title;
|
||||
/**
|
||||
* @type {ArrayLike<any>}
|
||||
*/
|
||||
export let files = [];
|
||||
export let isError = false;
|
||||
</script>
|
||||
|
||||
{#if files.length !== 0}
|
||||
<div id="selected-files-container">
|
||||
<h2>{title}:</h2>
|
||||
<div id="files-list">
|
||||
{#each Array.from(files) as file}
|
||||
<div id={isError ? 'selected-file-card-error' : 'selected-file-card'}>
|
||||
<span>{file.name}</span>
|
||||
<span>{Math.round(file.size / 1000)} KB</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#selected-files-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#files-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#selected-file-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #06345f;
|
||||
font-weight: bolder;
|
||||
width: 500px;
|
||||
padding-left: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#selected-file-card-error {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #06345f;
|
||||
font-weight: bolder;
|
||||
width: 500px;
|
||||
padding-left: 15px;
|
||||
margin-top: 10px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 812px) {
|
||||
#selected-files-container,
|
||||
#selected-file-card-error {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#selected-file-card {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<script>
|
||||
import { t } from '$lib/translations';
|
||||
import { appVersion } from '$lib/utils/env';
|
||||
</script>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-info">
|
||||
<p>
|
||||
{@html $t(
|
||||
'footer.copyright',
|
||||
/** @type {any} */ ({
|
||||
year: new Date().getFullYear(),
|
||||
website: 'https://leomurca.xyz',
|
||||
}),
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{@html $t(
|
||||
'footer.version',
|
||||
/** @type {any} */ ({ version: appVersion() }),
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<nav class="footer-nav">
|
||||
<a href="/about">{$t('footer.about')}</a>
|
||||
<a href="/privacy-policy">{$t('footer.privacy.policy')}</a>
|
||||
<a href="/terms-of-service">{$t('footer.terms.of.service')}</a>
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
flex: 1 1 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-info p {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.footer-info p:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
margin: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.footer-content {
|
||||
flex-wrap: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-info,
|
||||
.footer-nav {
|
||||
flex: 1 1 50%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,227 +0,0 @@
|
|||
<script>
|
||||
import { t, locale, SUPPORTED_LOCALES } from '$lib/translations';
|
||||
import logo from '$lib/assets/logo.webp';
|
||||
import MediaQuery from './MediaQuery.svelte';
|
||||
|
||||
/**
|
||||
*
|
||||
* Returns logo image configuration based on the screen size match.
|
||||
*
|
||||
* @param {boolean} matches - The event that triggered the language switch.
|
||||
*/
|
||||
const configsFor = (matches) => {
|
||||
return matches
|
||||
? { src: logo, width: 150, height: 70 } // mobile
|
||||
: { src: logo, width: 150, height: 100 }; // desktop
|
||||
};
|
||||
|
||||
/**
|
||||
* Switches the current locale to the opposite language (EN_US <-> PT_BR).
|
||||
* Prevents the default link behavior (e.g., page jump).
|
||||
*
|
||||
* @param {MouseEvent | KeyboardEvent} e - The event that triggered the language switch.
|
||||
*/
|
||||
const onSwitchToOppositeLang = (e) => {
|
||||
e.preventDefault();
|
||||
$locale =
|
||||
$locale === SUPPORTED_LOCALES.EN_US
|
||||
? SUPPORTED_LOCALES.PT_BR
|
||||
: SUPPORTED_LOCALES.EN_US;
|
||||
};
|
||||
|
||||
let isMenuOpen = false;
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="logo">
|
||||
<MediaQuery query="(max-width: 768px)" let:matches>
|
||||
{@const configs = configsFor(matches)}
|
||||
<a href="/">
|
||||
<img
|
||||
src={configs.src}
|
||||
alt="Embroidery viewer logo"
|
||||
width={configs.width}
|
||||
height={configs.height}
|
||||
/>
|
||||
</a>
|
||||
</MediaQuery>
|
||||
</div>
|
||||
|
||||
<div class="nav-container">
|
||||
<MediaQuery query="(max-width: 768px)" let:matches>
|
||||
<slot let-matches>
|
||||
{#if matches}
|
||||
<button class="hamburger" onclick={() => (isMenuOpen = !isMenuOpen)}>
|
||||
{#if isMenuOpen}x{:else}☰{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</slot>
|
||||
</MediaQuery>
|
||||
<nav class:is-open={isMenuOpen}>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">{$t('header.homeNav')}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/viewer">{$t('header.viewerNav')}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about">{$t('header.aboutNav')}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/donate">{$t('header.donateNav')}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="common-switch {$locale === SUPPORTED_LOCALES.EN_US
|
||||
? 'portuguese-switch'
|
||||
: 'english-switch'}"
|
||||
onclick={onSwitchToOppositeLang}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onSwitchToOppositeLang(e);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div style="display: flex; width: fit-content;">
|
||||
<span style="font-size: 20px;">{$t('header.languageSwitch')}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 100px;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: auto;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.logo a:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 35px;
|
||||
width: 35px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.common-switch {
|
||||
border: none;
|
||||
background-color: unset;
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.portuguese-switch {
|
||||
color: #0c8f27;
|
||||
border-bottom: 3px solid #0c8f27 !important;
|
||||
fill: #0c8f27 !important;
|
||||
}
|
||||
|
||||
.portuguese-switch:hover {
|
||||
background: #0c8f27;
|
||||
color: #ffffff;
|
||||
fill: #ffffff !important;
|
||||
}
|
||||
|
||||
.english-switch {
|
||||
color: #be0a2f;
|
||||
border-bottom: 3px solid #be0a2f;
|
||||
width: fit-content;
|
||||
fill: #be0a2f !important;
|
||||
}
|
||||
|
||||
.english-switch:hover {
|
||||
background: #be0a2f;
|
||||
color: #ffffff;
|
||||
fill: #ffffff !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.hamburger {
|
||||
display: block;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background-color: #f8f9fa;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 0;
|
||||
border: 1px solid #ddd;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
nav.is-open {
|
||||
display: inline-block;
|
||||
margin-top: 25px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
<script>
|
||||
import { t } from '$lib/translations';
|
||||
|
||||
/** @type {string} Title of the page */
|
||||
export let title;
|
||||
|
||||
/** @type {string} Description of the page */
|
||||
export let description;
|
||||
|
||||
/** @type {string} SEO keywords */
|
||||
export let keywords;
|
||||
|
||||
/** @type {string} Canonical URL of the page */
|
||||
export let url;
|
||||
|
||||
/** @type {string} Main image URL for sharing */
|
||||
export let image;
|
||||
|
||||
/** @type {string} Open Graph type (e.g., 'website', 'article') */
|
||||
export let ogType = 'website';
|
||||
|
||||
/** @type {string} Open Graph title (defaults to title) */
|
||||
export let ogTitle = title;
|
||||
|
||||
/** @type {string} Open Graph description (defaults to description) */
|
||||
export let ogDescription = description;
|
||||
|
||||
/** @type {string} Open Graph image (defaults to image) */
|
||||
export let ogImage = image;
|
||||
|
||||
/** @type {string} Twitter card type (e.g., 'summary_large_image') */
|
||||
export let twitterCard = 'summary_large_image';
|
||||
|
||||
/** @type {string} Twitter title (defaults to title) */
|
||||
export let twitterTitle = title;
|
||||
|
||||
/** @type {string} Twitter description (defaults to description) */
|
||||
export let twitterDescription = description;
|
||||
|
||||
/** @type {string} Twitter image (defaults to image) */
|
||||
export let twitterImage = image;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{$t(title)}</title>
|
||||
<meta name="description" content={$t(description)} />
|
||||
<meta name="keywords" content={$t(keywords)} />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:type" content={ogType} />
|
||||
<meta property="og:title" content={$t(ogTitle)} />
|
||||
<meta property="og:description" content={$t(ogDescription)} />
|
||||
<!-- <meta property="og:image" content={$t(ogImage)} /> -->
|
||||
<meta property="og:url" content={$t(url)} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<!-- <meta name="twitter:card" content={$t(twitterCard)} /> -->
|
||||
<meta name="twitter:title" content={$t(twitterTitle)} />
|
||||
<meta name="twitter:description" content={$t(twitterDescription)} />
|
||||
<!-- <meta name="twitter:image" content={$t(twitterImage)} /> -->
|
||||
</svelte:head>
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
import { supportedFormats } from '$lib/format-readers';
|
||||
import { jDataView } from './jdataview';
|
||||
import { Pattern } from './pattern';
|
||||
|
||||
/**
|
||||
* Render the embroidery pattern file to the provided canvas and update views.
|
||||
* @param {string} filename - The name of the file.
|
||||
* @param {ProgressEvent<FileReader>} evt - The file load event.
|
||||
* @param {HTMLCanvasElement} canvas - Canvas to render the pattern.
|
||||
* @param {HTMLElement} colorView - Element to display colors.
|
||||
* @param {HTMLElement} stitchesView - Element to display stitch count.
|
||||
* @param {HTMLElement} sizeView - Element to display size.
|
||||
* @param {{stitches: string, dimensions: string}} localizedStrings - Localized labels.
|
||||
*/
|
||||
function renderFile(
|
||||
filename,
|
||||
evt,
|
||||
canvas,
|
||||
colorView,
|
||||
stitchesView,
|
||||
sizeView,
|
||||
localizedStrings,
|
||||
) {
|
||||
const fileExtension = filename.toLowerCase().split('.').pop();
|
||||
const arrayBuffer = evt.target?.result;
|
||||
|
||||
if (!(fileExtension && arrayBuffer)) {
|
||||
throw new Error('Invalid file extension or file data');
|
||||
}
|
||||
|
||||
const view = new jDataView(arrayBuffer, 0, evt.total || 0);
|
||||
const pattern = new Pattern();
|
||||
|
||||
const formatReader = supportedFormats[fileExtension];
|
||||
if (!formatReader || typeof formatReader.read !== 'function') {
|
||||
throw new Error(`Unsupported file format: ${fileExtension}`);
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
formatReader.read(view, pattern);
|
||||
|
||||
pattern.moveToPositive();
|
||||
pattern.drawShapeTo(canvas);
|
||||
pattern.drawColorsTo(colorView);
|
||||
pattern.drawStitchesCountTo(stitchesView, localizedStrings.stitches);
|
||||
pattern.drawSizeValuesTo(sizeView, localizedStrings.dimensions);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a generic abort message.
|
||||
* @param {HTMLElement} errorMessageRef - Element to display the message.
|
||||
*/
|
||||
function renderAbortMessage(errorMessageRef) {
|
||||
errorMessageRef.textContent = 'Render aborted!';
|
||||
}
|
||||
|
||||
/**
|
||||
* Display a detailed error message based on error type.
|
||||
* @param {string} errorName - The name of the error.
|
||||
* @param {HTMLElement} errorMessageRef - Element to display the message.
|
||||
*/
|
||||
function renderErrorMessage(errorName, errorMessageRef) {
|
||||
/** @type {string} */
|
||||
let message;
|
||||
|
||||
switch (errorName) {
|
||||
case 'NotFoundError':
|
||||
message =
|
||||
'The file could not be found at the time the read was processed.';
|
||||
break;
|
||||
case 'SecurityError':
|
||||
message =
|
||||
'<p>A file security error occurred. This can be due to:</p>' +
|
||||
'<ul>' +
|
||||
'<li>Accessing certain files deemed unsafe for Web applications.</li>' +
|
||||
'<li>Performing too many read calls on file resources.</li>' +
|
||||
'<li>The file has changed on disk since the user selected it.</li>' +
|
||||
'</ul>';
|
||||
break;
|
||||
case 'NotReadableError':
|
||||
message =
|
||||
'The file cannot be read. This can occur if the file is open in another application.';
|
||||
break;
|
||||
case 'EncodingError':
|
||||
message = 'The length of the data URL for the file is too long.';
|
||||
break;
|
||||
default:
|
||||
message = 'Something went wrong!';
|
||||
break;
|
||||
}
|
||||
|
||||
errorMessageRef.innerHTML = message;
|
||||
}
|
||||
|
||||
/**
|
||||
* Read a file and render its pattern to canvas with error handling.
|
||||
* @param {File} fileObject - The file to read.
|
||||
* @param {HTMLCanvasElement} canvas - The canvas to render on.
|
||||
* @param {HTMLElement} errorMessageRef - Element to show error messages.
|
||||
* @param {HTMLElement} colorView - Element to display colors.
|
||||
* @param {HTMLElement} stitchesView - Element to display stitch count.
|
||||
* @param {HTMLElement} sizeView - Element to display size.
|
||||
* @param {{stitches: string, dimensions: string}} localizedStrings - Localized strings.
|
||||
* @returns {string} Empty string after starting file read.
|
||||
*/
|
||||
export default function renderFileToCanvas(
|
||||
fileObject,
|
||||
canvas,
|
||||
errorMessageRef,
|
||||
colorView,
|
||||
stitchesView,
|
||||
sizeView,
|
||||
localizedStrings,
|
||||
) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onloadend = (evt) =>
|
||||
renderFile(
|
||||
fileObject.name,
|
||||
evt,
|
||||
canvas,
|
||||
colorView,
|
||||
stitchesView,
|
||||
sizeView,
|
||||
localizedStrings,
|
||||
);
|
||||
|
||||
reader.onabort = () => renderAbortMessage(errorMessageRef);
|
||||
reader.onerror = (evt) =>
|
||||
renderErrorMessage(
|
||||
// @ts-ignore
|
||||
evt.target.error?.name || 'UnknownError',
|
||||
errorMessageRef,
|
||||
);
|
||||
|
||||
if (fileObject) {
|
||||
reader.readAsArrayBuffer(fileObject);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
|
@ -1,331 +0,0 @@
|
|||
import { rgbToHex } from '$lib/utils/rgbToHex';
|
||||
import { shadeColor } from '$lib/utils/shadeColor';
|
||||
|
||||
/**
|
||||
* Represents a single stitch in the pattern.
|
||||
* @param {number} x - The absolute x position of the stitch.
|
||||
* @param {number} y - The absolute y position of the stitch.
|
||||
* @param {number} flags - Stitch flags (e.g. jump, trim).
|
||||
* @param {number} color - Index of the stitch color.
|
||||
* @constructor
|
||||
*/
|
||||
function Stitch(x, y, flags, color) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.flags = flags;
|
||||
this.color = color;
|
||||
}
|
||||
|
||||
/**
|
||||
* Represents a color with RGB components and an optional description.
|
||||
* @param {number} r - Red component (0-255).
|
||||
* @param {number} g - Green component (0-255).
|
||||
* @param {number} b - Blue component (0-255).
|
||||
* @param {string} description - Color description.
|
||||
* @constructor
|
||||
*/
|
||||
function Color(r, g, b, description) {
|
||||
this.r = r;
|
||||
this.g = g;
|
||||
this.b = b;
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
/**
|
||||
* Stitch type bit flags.
|
||||
* @readonly
|
||||
* @enum {number}
|
||||
*/
|
||||
const stitchTypes = {
|
||||
normal: 0,
|
||||
jump: 1,
|
||||
trim: 2,
|
||||
stop: 4,
|
||||
end: 8,
|
||||
};
|
||||
|
||||
/**
|
||||
* Represents an embroidery pattern containing stitches and colors.
|
||||
* @constructor
|
||||
*/
|
||||
function Pattern() {
|
||||
/** @type {Color[]} */
|
||||
this.colors = [];
|
||||
|
||||
/** @type {Stitch[]} */
|
||||
this.stitches = [];
|
||||
|
||||
/** Hoop info (not typed, depends on implementation) */
|
||||
this.hoop = {};
|
||||
|
||||
/** Last stitch position for relative moves */
|
||||
this.lastX = 0;
|
||||
this.lastY = 0;
|
||||
|
||||
/** Bounding box */
|
||||
this.top = 0;
|
||||
this.bottom = 0;
|
||||
this.left = 0;
|
||||
this.right = 0;
|
||||
|
||||
/** Current color index used for new stitches */
|
||||
this.currentColorIndex = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a color by RGB values.
|
||||
* @param {number} r
|
||||
* @param {number} g
|
||||
* @param {number} b
|
||||
* @param {string} description
|
||||
*/
|
||||
Pattern.prototype.addColorRgb = function (r, g, b, description) {
|
||||
this.colors.push(new Color(r, g, b, description));
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds an existing Color instance.
|
||||
* @param {Color} color
|
||||
*/
|
||||
Pattern.prototype.addColor = function (color) {
|
||||
this.colors.push(color);
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds a stitch at absolute coordinates.
|
||||
* @param {number} x - Absolute X coordinate.
|
||||
* @param {number} y - Absolute Y coordinate.
|
||||
* @param {number} flags - Stitch flags.
|
||||
* @param {boolean} isAutoColorIndex - Whether to automatically increment color on stop.
|
||||
*/
|
||||
Pattern.prototype.addStitchAbs = function (x, y, flags, isAutoColorIndex) {
|
||||
if ((flags & stitchTypes.end) === stitchTypes.end) {
|
||||
this.calculateBoundingBox();
|
||||
this.fixColorCount();
|
||||
}
|
||||
if (
|
||||
(flags & stitchTypes.stop) === stitchTypes.stop &&
|
||||
this.stitches.length === 0
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if ((flags & stitchTypes.stop) === stitchTypes.stop && isAutoColorIndex) {
|
||||
this.currentColorIndex += 1;
|
||||
}
|
||||
this.stitches.push(new Stitch(x, y, flags, this.currentColorIndex));
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds a stitch relative to the last stitch.
|
||||
* @param {number} dx - Delta X from last stitch.
|
||||
* @param {number} dy - Delta Y from last stitch.
|
||||
* @param {number} flags - Stitch flags.
|
||||
* @param {boolean} [isAutoColorIndex=false] - Whether to automatically increment color on stop. Optional.
|
||||
*/
|
||||
Pattern.prototype.addStitchRel = function (dx, dy, flags, isAutoColorIndex) {
|
||||
if (typeof isAutoColorIndex === 'undefined') {
|
||||
isAutoColorIndex = false;
|
||||
}
|
||||
|
||||
if (this.stitches.length !== 0) {
|
||||
const nx = this.lastX + dx;
|
||||
const ny = this.lastY + dy;
|
||||
this.lastX = nx;
|
||||
this.lastY = ny;
|
||||
this.addStitchAbs(nx, ny, flags, isAutoColorIndex);
|
||||
} else {
|
||||
this.addStitchAbs(dx, dy, flags, isAutoColorIndex);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the bounding box of all stitches, excluding trims.
|
||||
*/
|
||||
Pattern.prototype.calculateBoundingBox = function () {
|
||||
const stitchCount = this.stitches.length;
|
||||
if (stitchCount === 0) {
|
||||
this.bottom = 1;
|
||||
this.right = 1;
|
||||
return;
|
||||
}
|
||||
this.left = Infinity;
|
||||
this.top = Infinity;
|
||||
this.right = -Infinity;
|
||||
this.bottom = -Infinity;
|
||||
|
||||
for (let i = 0; i < stitchCount; i++) {
|
||||
const pt = this.stitches[i];
|
||||
if (!(pt.flags & stitchTypes.trim)) {
|
||||
if (pt.x < this.left) this.left = pt.x;
|
||||
if (pt.y < this.top) this.top = pt.y;
|
||||
if (pt.x > this.right) this.right = pt.x;
|
||||
if (pt.y > this.bottom) this.bottom = pt.y;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Moves all stitches so the pattern is positioned at positive coordinates.
|
||||
*/
|
||||
Pattern.prototype.moveToPositive = function () {
|
||||
const stitchCount = this.stitches.length;
|
||||
for (let i = 0; i < stitchCount; i++) {
|
||||
this.stitches[i].x -= this.left;
|
||||
this.stitches[i].y -= this.top;
|
||||
}
|
||||
this.right -= this.left;
|
||||
this.left = 0;
|
||||
this.bottom -= this.top;
|
||||
this.top = 0;
|
||||
};
|
||||
|
||||
/**
|
||||
* Flips the pattern vertically.
|
||||
*/
|
||||
Pattern.prototype.invertPatternVertical = function () {
|
||||
const stitchCount = this.stitches.length;
|
||||
const tempTop = -this.top;
|
||||
for (let i = 0; i < stitchCount; i++) {
|
||||
this.stitches[i].y = -this.stitches[i].y;
|
||||
}
|
||||
this.top = -this.bottom;
|
||||
this.bottom = tempTop;
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds a random color to the pattern.
|
||||
*/
|
||||
Pattern.prototype.addColorRandom = function () {
|
||||
this.colors.push(
|
||||
new Color(
|
||||
Math.round(Math.random() * 256),
|
||||
Math.round(Math.random() * 256),
|
||||
Math.round(Math.random() * 256),
|
||||
'random',
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Fixes the color count so colors match used indices in stitches.
|
||||
*/
|
||||
Pattern.prototype.fixColorCount = function () {
|
||||
let maxColorIndex = 0;
|
||||
const stitchCount = this.stitches.length;
|
||||
|
||||
for (let i = 0; i < stitchCount; i++) {
|
||||
if (this.stitches[i].color > maxColorIndex) {
|
||||
maxColorIndex = this.stitches[i].color;
|
||||
}
|
||||
}
|
||||
|
||||
while (this.colors.length <= maxColorIndex) {
|
||||
this.addColorRandom();
|
||||
}
|
||||
|
||||
// Remove extra colors beyond max used index
|
||||
this.colors.splice(maxColorIndex + 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* Draws the stitch pattern to a canvas element.
|
||||
* @param {HTMLCanvasElement} canvas
|
||||
*/
|
||||
Pattern.prototype.drawShapeTo = function (canvas) {
|
||||
canvas.width = this.right;
|
||||
canvas.height = this.bottom;
|
||||
|
||||
let gradient, tx, ty;
|
||||
let lastStitch = this.stitches[0];
|
||||
let gWidth = 100;
|
||||
|
||||
if (canvas.getContext) {
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) {
|
||||
// If context is null, just return or handle accordingly
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.lineWidth = 3;
|
||||
ctx.lineJoin = 'round';
|
||||
|
||||
let color = this.colors[this.stitches[0].color];
|
||||
for (let i = 0; i < this.stitches.length; i++) {
|
||||
const currentStitch = this.stitches[i];
|
||||
if (i > 0) lastStitch = this.stitches[i - 1];
|
||||
tx = currentStitch.x - lastStitch.x;
|
||||
ty = currentStitch.y - lastStitch.y;
|
||||
|
||||
gWidth = Math.sqrt(tx * tx + ty * ty);
|
||||
gradient = ctx.createRadialGradient(
|
||||
currentStitch.x - tx,
|
||||
currentStitch.y - ty,
|
||||
0,
|
||||
currentStitch.x - tx,
|
||||
currentStitch.y - ty,
|
||||
gWidth * 1.4,
|
||||
);
|
||||
|
||||
gradient.addColorStop(0, shadeColor(rgbToHex(color), -60));
|
||||
gradient.addColorStop(0.05, rgbToHex(color));
|
||||
gradient.addColorStop(0.5, shadeColor(rgbToHex(color), 60));
|
||||
gradient.addColorStop(0.9, rgbToHex(color));
|
||||
gradient.addColorStop(1.0, shadeColor(rgbToHex(color), -60));
|
||||
|
||||
ctx.strokeStyle = gradient;
|
||||
if (
|
||||
currentStitch.flags === stitchTypes.jump ||
|
||||
currentStitch.flags === stitchTypes.trim ||
|
||||
currentStitch.flags === stitchTypes.stop
|
||||
) {
|
||||
color = this.colors[currentStitch.color];
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle =
|
||||
'rgba(' + color.r + ',' + color.g + ',' + color.b + ',0)';
|
||||
ctx.moveTo(currentStitch.x, currentStitch.y);
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastStitch.x, lastStitch.y);
|
||||
ctx.lineTo(currentStitch.x, currentStitch.y);
|
||||
ctx.stroke();
|
||||
lastStitch = currentStitch;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Draws color swatches into a container element.
|
||||
* @param {HTMLElement} colorContainer
|
||||
*/
|
||||
Pattern.prototype.drawColorsTo = function (colorContainer) {
|
||||
this.colors.forEach((color) => {
|
||||
colorContainer.innerHTML += `<div style='background-color: rgb(${color.r}, ${color.g}, ${color.b}); height: 25px; width: 25px; border: 1px solid #000000; border-radius: 16px;'></div>`;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Displays the stitch count in a container element.
|
||||
* @param {HTMLElement} stitchesContainer
|
||||
* @param {string} stitchesString - Label for stitches count.
|
||||
*/
|
||||
Pattern.prototype.drawStitchesCountTo = function (
|
||||
stitchesContainer,
|
||||
stitchesString,
|
||||
) {
|
||||
stitchesContainer.innerHTML += `<div><strong>${stitchesString}:</strong> ${this.stitches.length}</div>`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Displays pattern dimensions in a container element.
|
||||
* @param {HTMLElement} sizeContainer
|
||||
* @param {string} dimensionsString - Label for dimensions.
|
||||
*/
|
||||
Pattern.prototype.drawSizeValuesTo = function (
|
||||
sizeContainer,
|
||||
dimensionsString,
|
||||
) {
|
||||
sizeContainer.innerHTML += `<div><strong>${dimensionsString}:</strong> ${Math.round(this.right / 10)}mm x ${Math.round(this.bottom / 10)}mm</div>`;
|
||||
};
|
||||
|
||||
export { Pattern, Color, stitchTypes };
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
import { stitchTypes } from '$lib/file-renderer/pattern';
|
||||
|
||||
/**
|
||||
* Decodes stitch flags from the 3rd byte of a DST stitch command.
|
||||
*
|
||||
* @param {number} b2 The third byte of the stitch command.
|
||||
* @returns {number} Bitmask representing stitch types.
|
||||
*/
|
||||
function decodeExp(b2) {
|
||||
if (b2 === 0xf3) {
|
||||
return stitchTypes.end;
|
||||
}
|
||||
if ((b2 & 0xc3) === 0xc3) {
|
||||
return stitchTypes.trim | stitchTypes.stop;
|
||||
}
|
||||
|
||||
let returnCode = 0;
|
||||
if (b2 & 0x80) {
|
||||
returnCode |= stitchTypes.trim;
|
||||
}
|
||||
if (b2 & 0x40) {
|
||||
returnCode |= stitchTypes.stop;
|
||||
}
|
||||
return returnCode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads a DST embroidery file and populates the pattern object.
|
||||
*
|
||||
*
|
||||
* @param {EmbroideryFileView} file
|
||||
* @param {EmbroideryPattern} pattern
|
||||
*/
|
||||
export function dstRead(file, pattern) {
|
||||
let prevJump = false;
|
||||
const byteCount = file.byteLength;
|
||||
|
||||
file.seek(512); // Skip DST header
|
||||
|
||||
while (file.tell() < byteCount - 3) {
|
||||
/** @type {number[]} */
|
||||
const b = [file.getUint8(), file.getUint8(), file.getUint8()];
|
||||
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
|
||||
// Decode X movements
|
||||
if (b[0] & 0x01) x += 1;
|
||||
if (b[0] & 0x02) x -= 1;
|
||||
if (b[0] & 0x04) x += 9;
|
||||
if (b[0] & 0x08) x -= 9;
|
||||
|
||||
if (b[1] & 0x01) x += 3;
|
||||
if (b[1] & 0x02) x -= 3;
|
||||
if (b[1] & 0x04) x += 27;
|
||||
if (b[1] & 0x08) x -= 27;
|
||||
|
||||
if (b[2] & 0x04) x += 81;
|
||||
if (b[2] & 0x08) x -= 81;
|
||||
|
||||
// Decode Y movements
|
||||
if (b[0] & 0x80) y += 1;
|
||||
if (b[0] & 0x40) y -= 1;
|
||||
if (b[0] & 0x20) y += 9;
|
||||
if (b[0] & 0x10) y -= 9;
|
||||
|
||||
if (b[1] & 0x80) y += 3;
|
||||
if (b[1] & 0x40) y -= 3;
|
||||
if (b[1] & 0x20) y += 27;
|
||||
if (b[1] & 0x10) y -= 27;
|
||||
|
||||
if (b[2] & 0x20) y += 81;
|
||||
if (b[2] & 0x10) y -= 81;
|
||||
|
||||
let flags = decodeExp(b[2]);
|
||||
const thisJump = (flags & stitchTypes.jump) !== 0;
|
||||
|
||||
if (prevJump) {
|
||||
flags |= stitchTypes.jump;
|
||||
}
|
||||
|
||||
pattern.addStitchRel(x, y, flags, true);
|
||||
|
||||
prevJump = thisJump;
|
||||
}
|
||||
|
||||
pattern.addStitchRel(0, 0, stitchTypes.end, true);
|
||||
pattern.invertPatternVertical();
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
import { stitchTypes } from '$lib/file-renderer/pattern';
|
||||
|
||||
/**
|
||||
* Decodes a single byte with EXP format rules.
|
||||
* Values above 128 are negative numbers encoded with bitwise operations.
|
||||
*
|
||||
* @param {number} input - A signed 8-bit integer (-128 to 127).
|
||||
* @returns {number} - Decoded signed integer.
|
||||
*/
|
||||
function expDecode(input) {
|
||||
return input > 128 ? -(~input & 0xff) - 1 : input;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads an EXP format file and adds stitches to the given pattern.
|
||||
*
|
||||
* @param {EmbroideryFileView} file - A DataView representing the binary EXP file content.
|
||||
* @param {EmbroideryPattern} pattern - The pattern object with addStitchRel and invertPatternVertical methods.
|
||||
* @returns {void}
|
||||
*/
|
||||
export function expRead(file, pattern) {
|
||||
let index = 0;
|
||||
const byteCount = file.byteLength;
|
||||
|
||||
while (index < byteCount) {
|
||||
let flags = stitchTypes.normal;
|
||||
let b0 = file.getInt8(index++);
|
||||
let b1 = file.getInt8(index++);
|
||||
|
||||
if (b0 === -128) {
|
||||
if (b1 & 1) {
|
||||
b0 = file.getInt8(index++);
|
||||
b1 = file.getInt8(index++);
|
||||
flags = stitchTypes.stop;
|
||||
} else if (b1 === 2 || b1 === 4) {
|
||||
b0 = file.getInt8(index++);
|
||||
b1 = file.getInt8(index++);
|
||||
flags = stitchTypes.trim;
|
||||
} else if (b1 === -128) {
|
||||
b0 = file.getInt8(index++);
|
||||
b1 = file.getInt8(index++);
|
||||
b0 = 0;
|
||||
b1 = 0;
|
||||
flags = stitchTypes.trim;
|
||||
}
|
||||
}
|
||||
|
||||
const dx = expDecode(b0);
|
||||
const dy = expDecode(b1);
|
||||
|
||||
pattern.addStitchRel(dx, dy, flags, true);
|
||||
}
|
||||
|
||||
pattern.addStitchRel(0, 0, stitchTypes.end);
|
||||
pattern.invertPatternVertical();
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { dstRead } from './dst';
|
||||
import { expRead } from './exp';
|
||||
import { jefRead } from './jef';
|
||||
import { pecRead } from './pec';
|
||||
import { pesRead } from './pes';
|
||||
|
||||
/**
|
||||
* Supported embroidery file formats.
|
||||
* @type {SupportedFormats}
|
||||
*/
|
||||
const supportedFormats = {
|
||||
pes: { ext: '.pes', read: pesRead },
|
||||
dst: { ext: '.dst', read: dstRead },
|
||||
pec: { ext: '.pec', read: pecRead },
|
||||
jef: { ext: '.jef', read: jefRead },
|
||||
exp: { ext: '.exp', read: expRead },
|
||||
};
|
||||
|
||||
export { supportedFormats };
|
||||
|
|
@ -1,212 +0,0 @@
|
|||
import { Color, stitchTypes } from '$lib/file-renderer/pattern';
|
||||
|
||||
/** @type {Color[]} */
|
||||
const colors = [
|
||||
new Color(0, 0, 0, 'Black'),
|
||||
new Color(0, 0, 0, 'Black'),
|
||||
new Color(255, 255, 255, 'White'),
|
||||
new Color(255, 255, 23, 'Yellow'),
|
||||
new Color(250, 160, 96, 'Orange'),
|
||||
new Color(92, 118, 73, 'Olive Green'),
|
||||
new Color(64, 192, 48, 'Green'),
|
||||
new Color(101, 194, 200, 'Sky'),
|
||||
new Color(172, 128, 190, 'Purple'),
|
||||
new Color(245, 188, 203, 'Pink'),
|
||||
new Color(255, 0, 0, 'Red'),
|
||||
new Color(192, 128, 0, 'Brown'),
|
||||
new Color(0, 0, 240, 'Blue'),
|
||||
new Color(228, 195, 93, 'Gold'),
|
||||
new Color(165, 42, 42, 'Dark Brown'),
|
||||
new Color(213, 176, 212, 'Pale Violet'),
|
||||
new Color(252, 242, 148, 'Pale Yellow'),
|
||||
new Color(240, 208, 192, 'Pale Pink'),
|
||||
new Color(255, 192, 0, 'Peach'),
|
||||
new Color(201, 164, 128, 'Beige'),
|
||||
new Color(155, 61, 75, 'Wine Red'),
|
||||
new Color(160, 184, 204, 'Pale Sky'),
|
||||
new Color(127, 194, 28, 'Yellow Green'),
|
||||
new Color(185, 185, 185, 'Silver Grey'),
|
||||
new Color(160, 160, 160, 'Grey'),
|
||||
new Color(152, 214, 189, 'Pale Aqua'),
|
||||
new Color(184, 240, 240, 'Baby Blue'),
|
||||
new Color(54, 139, 160, 'Powder Blue'),
|
||||
new Color(79, 131, 171, 'Bright Blue'),
|
||||
new Color(56, 106, 145, 'Slate Blue'),
|
||||
new Color(0, 32, 107, 'Nave Blue'),
|
||||
new Color(229, 197, 202, 'Salmon Pink'),
|
||||
new Color(249, 103, 107, 'Coral'),
|
||||
new Color(227, 49, 31, 'Burnt Orange'),
|
||||
new Color(226, 161, 136, 'Cinnamon'),
|
||||
new Color(181, 148, 116, 'Umber'),
|
||||
new Color(228, 207, 153, 'Blonde'),
|
||||
new Color(225, 203, 0, 'Sunflower'),
|
||||
new Color(225, 173, 212, 'Orchid Pink'),
|
||||
new Color(195, 0, 126, 'Peony Purple'),
|
||||
new Color(128, 0, 75, 'Burgundy'),
|
||||
new Color(160, 96, 176, 'Royal Purple'),
|
||||
new Color(192, 64, 32, 'Cardinal Red'),
|
||||
new Color(202, 224, 192, 'Opal Green'),
|
||||
new Color(137, 152, 86, 'Moss Green'),
|
||||
new Color(0, 170, 0, 'Meadow Green'),
|
||||
new Color(33, 138, 33, 'Dark Green'),
|
||||
new Color(93, 174, 148, 'Aquamarine'),
|
||||
new Color(76, 191, 143, 'Emerald Green'),
|
||||
new Color(0, 119, 114, 'Peacock Green'),
|
||||
new Color(112, 112, 112, 'Dark Grey'),
|
||||
new Color(242, 255, 255, 'Ivory White'),
|
||||
new Color(177, 88, 24, 'Hazel'),
|
||||
new Color(203, 138, 7, 'Toast'),
|
||||
new Color(247, 146, 123, 'Salmon'),
|
||||
new Color(152, 105, 45, 'Cocoa Brown'),
|
||||
new Color(162, 113, 72, 'Sienna'),
|
||||
new Color(123, 85, 74, 'Sepia'),
|
||||
new Color(79, 57, 70, 'Dark Sepia'),
|
||||
new Color(82, 58, 151, 'Violet Blue'),
|
||||
new Color(0, 0, 160, 'Blue Ink'),
|
||||
new Color(0, 150, 222, 'Solar Blue'),
|
||||
new Color(178, 221, 83, 'Green Dust'),
|
||||
new Color(250, 143, 187, 'Crimson'),
|
||||
new Color(222, 100, 158, 'Floral Pink'),
|
||||
new Color(181, 80, 102, 'Wine'),
|
||||
new Color(94, 87, 71, 'Olive Drab'),
|
||||
new Color(76, 136, 31, 'Meadow'),
|
||||
new Color(228, 220, 121, 'Mustard'),
|
||||
new Color(203, 138, 26, 'Yellow Ochre'),
|
||||
new Color(198, 170, 66, 'Old Gold'),
|
||||
new Color(236, 176, 44, 'Honeydew'),
|
||||
new Color(248, 128, 64, 'Tangerine'),
|
||||
new Color(255, 229, 5, 'Canary Yellow'),
|
||||
new Color(250, 122, 122, 'Vermillion'),
|
||||
new Color(107, 224, 0, 'Bright Green'),
|
||||
new Color(56, 108, 174, 'Ocean Blue'),
|
||||
new Color(227, 196, 180, 'Beige Grey'),
|
||||
new Color(227, 172, 129, 'Bamboo'),
|
||||
];
|
||||
|
||||
/**
|
||||
* Decode a single byte for JEF stitch data (signed int8-like with special encoding).
|
||||
* @param {number} byte
|
||||
* @returns {number}
|
||||
*/
|
||||
const jefDecode = (byte) => (byte >= 0x80 ? -(~byte & 0xff) - 1 : byte);
|
||||
|
||||
/**
|
||||
* Check if a byte represents a special stitch (0x80).
|
||||
* @param {number} byte
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const isSpecialStitch = (byte) => byte === 0x80;
|
||||
|
||||
/**
|
||||
* Check if a byte represents a stop or trim command.
|
||||
* @param {number} byte
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const isStopOrTrim = (byte) =>
|
||||
(byte & 0x01) !== 0 || byte === 0x02 || byte === 0x04;
|
||||
|
||||
/**
|
||||
* Check if a byte indicates end of pattern.
|
||||
* @param {number} byte
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const isEndOfPattern = (byte) => byte === 0x10;
|
||||
|
||||
/**
|
||||
* Check if a byte indicates a stop command.
|
||||
* @param {number} byte
|
||||
* @returns {boolean}
|
||||
*/
|
||||
const isStop = (byte) => (byte & 0x01) !== 0;
|
||||
|
||||
/**
|
||||
* Read two stitch data bytes from the file.
|
||||
* @param {EmbroideryFileView} file
|
||||
* @returns {{ byte1: number, byte2: number }}
|
||||
*/
|
||||
const readStitchData = (file) => ({
|
||||
byte1: file.getUint8(),
|
||||
byte2: file.getUint8(),
|
||||
});
|
||||
|
||||
/**
|
||||
* Add colors from file data to the pattern.
|
||||
* @param {EmbroideryFileView} file
|
||||
* @param {EmbroideryPattern} pattern
|
||||
* @param {number} colorCount
|
||||
*/
|
||||
const addColorsToPattern = (file, pattern, colorCount) => {
|
||||
for (let i = 0; i < colorCount; i++) {
|
||||
const colorIndex = file.getUint32(file.tell(), true) % colors.length;
|
||||
pattern.addColor(colors[colorIndex]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Determine the stitch type and potentially read additional bytes.
|
||||
* @param {EmbroideryFileView} file
|
||||
* @param {number} byte1
|
||||
* @param {number} byte2
|
||||
* @returns {{ type: number, byte1: number, byte2: number, end?: boolean }}
|
||||
*/
|
||||
const determineStitchType = (file, byte1, byte2) => {
|
||||
if (isSpecialStitch(byte1)) {
|
||||
if (isStopOrTrim(byte2)) {
|
||||
return {
|
||||
type: isStop(byte2) ? stitchTypes.stop : stitchTypes.trim,
|
||||
byte1: file.getUint8(),
|
||||
byte2: file.getUint8(),
|
||||
};
|
||||
} else if (isEndOfPattern(byte2)) {
|
||||
return { type: stitchTypes.end, byte1: 0, byte2: 0, end: true };
|
||||
}
|
||||
}
|
||||
return { type: stitchTypes.normal, byte1, byte2 };
|
||||
};
|
||||
|
||||
/**
|
||||
* Process stitches in the file and add them to the pattern.
|
||||
* @param {EmbroideryFileView} file
|
||||
* @param {EmbroideryPattern} pattern
|
||||
* @param {number} stitchCount
|
||||
*/
|
||||
const processStitches = (file, pattern, stitchCount) => {
|
||||
let stitchesProcessed = 0;
|
||||
while (stitchesProcessed < stitchCount + 100) {
|
||||
const { byte1, byte2 } = readStitchData(file);
|
||||
const {
|
||||
type,
|
||||
byte1: decodedByte1,
|
||||
byte2: decodedByte2,
|
||||
end,
|
||||
} = determineStitchType(file, byte1, byte2);
|
||||
pattern.addStitchRel(
|
||||
jefDecode(decodedByte1),
|
||||
jefDecode(decodedByte2),
|
||||
type,
|
||||
true,
|
||||
);
|
||||
if (end) break;
|
||||
stitchesProcessed++;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Reads a JEF file and adds stitches and colors to the pattern.
|
||||
* @param {EmbroideryFileView} file
|
||||
* @param {EmbroideryPattern} pattern
|
||||
*/
|
||||
export function jefRead(file, pattern) {
|
||||
file.seek(24);
|
||||
const colorCount = file.getInt32(file.tell(), true);
|
||||
const stitchCount = file.getInt32(file.tell(), true);
|
||||
file.seek(file.tell() + 84);
|
||||
|
||||
addColorsToPattern(file, pattern, colorCount);
|
||||
file.seek(file.tell() + (6 - colorCount) * 4);
|
||||
|
||||
processStitches(file, pattern, stitchCount);
|
||||
pattern.invertPatternVertical();
|
||||
}
|
||||
|
||||
export const jefColors = colors;
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
import { Color, stitchTypes } from '$lib/file-renderer/pattern';
|
||||
|
||||
/**
|
||||
* Array of predefined embroidery colors used in PEC files.
|
||||
* @type {Color[]}
|
||||
*/
|
||||
export const pecColors = [
|
||||
new Color(0, 0, 0, 'Unknown'),
|
||||
new Color(14, 31, 124, 'Prussian Blue'),
|
||||
new Color(10, 85, 163, 'Blue'),
|
||||
new Color(0, 135, 119, 'Teal Green'),
|
||||
new Color(75, 107, 175, 'Cornflower Blue'),
|
||||
new Color(237, 23, 31, 'Red'),
|
||||
new Color(209, 92, 0, 'Reddish Brown'),
|
||||
new Color(145, 54, 151, 'Magenta'),
|
||||
new Color(228, 154, 203, 'Light Lilac'),
|
||||
new Color(145, 95, 172, 'Lilac'),
|
||||
new Color(158, 214, 125, 'Mint Green'),
|
||||
new Color(232, 169, 0, 'Deep Gold'),
|
||||
new Color(254, 186, 53, 'Orange'),
|
||||
new Color(255, 255, 0, 'Yellow'),
|
||||
new Color(112, 188, 31, 'Lime Green'),
|
||||
new Color(186, 152, 0, 'Brass'),
|
||||
new Color(168, 168, 168, 'Silver'),
|
||||
new Color(125, 111, 0, 'Russet Brown'),
|
||||
new Color(255, 255, 179, 'Cream Brown'),
|
||||
new Color(79, 85, 86, 'Pewter'),
|
||||
new Color(0, 0, 0, 'Black'),
|
||||
new Color(11, 61, 145, 'Ultramarine'),
|
||||
new Color(119, 1, 118, 'Royal Purple'),
|
||||
new Color(41, 49, 51, 'Dark Gray'),
|
||||
new Color(42, 19, 1, 'Dark Brown'),
|
||||
new Color(246, 74, 138, 'Deep Rose'),
|
||||
new Color(178, 118, 36, 'Light Brown'),
|
||||
new Color(252, 187, 197, 'Salmon Pink'),
|
||||
new Color(254, 55, 15, 'Vermillion'),
|
||||
new Color(240, 240, 240, 'White'),
|
||||
new Color(106, 28, 138, 'Violet'),
|
||||
new Color(168, 221, 196, 'Seacrest'),
|
||||
new Color(37, 132, 187, 'Sky Blue'),
|
||||
new Color(254, 179, 67, 'Pumpkin'),
|
||||
new Color(255, 243, 107, 'Cream Yellow'),
|
||||
new Color(208, 166, 96, 'Khaki'),
|
||||
new Color(209, 84, 0, 'Clay Brown'),
|
||||
new Color(102, 186, 73, 'Leaf Green'),
|
||||
new Color(19, 74, 70, 'Peacock Blue'),
|
||||
new Color(135, 135, 135, 'Gray'),
|
||||
new Color(216, 204, 198, 'Warm Gray'),
|
||||
new Color(67, 86, 7, 'Dark Olive'),
|
||||
new Color(253, 217, 222, 'Flesh Pink'),
|
||||
new Color(249, 147, 188, 'Pink'),
|
||||
new Color(0, 56, 34, 'Deep Green'),
|
||||
new Color(178, 175, 212, 'Lavender'),
|
||||
new Color(104, 106, 176, 'Wisteria Violet'),
|
||||
new Color(239, 227, 185, 'Beige'),
|
||||
new Color(247, 56, 102, 'Carmine'),
|
||||
new Color(181, 75, 100, 'Amber Red'),
|
||||
new Color(19, 43, 26, 'Olive Green'),
|
||||
new Color(199, 1, 86, 'Dark Fuschia'),
|
||||
new Color(254, 158, 50, 'Tangerine'),
|
||||
new Color(168, 222, 235, 'Light Blue'),
|
||||
new Color(0, 103, 62, 'Emerald Green'),
|
||||
new Color(78, 41, 144, 'Purple'),
|
||||
new Color(47, 126, 32, 'Moss Green'),
|
||||
new Color(255, 204, 204, 'Flesh Pink'),
|
||||
new Color(255, 217, 17, 'Harvest Gold'),
|
||||
new Color(9, 91, 166, 'Electric Blue'),
|
||||
new Color(240, 249, 112, 'Lemon Yellow'),
|
||||
new Color(227, 243, 91, 'Fresh Green'),
|
||||
new Color(255, 153, 0, 'Orange'),
|
||||
new Color(255, 240, 141, 'Cream Yellow'),
|
||||
new Color(255, 200, 200, 'Applique'),
|
||||
];
|
||||
|
||||
/**
|
||||
* Reads stitch data from a PEC embroidery file and adds it to the pattern.
|
||||
* @param {EmbroideryFileView} file
|
||||
* @param {EmbroideryPattern} pattern - The pattern to populate.
|
||||
*/
|
||||
function readPecStitches(file, pattern) {
|
||||
let stitchNumber = 0;
|
||||
const byteCount = file.byteLength;
|
||||
|
||||
while (file.tell() < byteCount) {
|
||||
let [xOffset, yOffset] = [file.getUint8(), file.getUint8()];
|
||||
let stitchType = stitchTypes.normal;
|
||||
|
||||
if (isEndStitch(xOffset, yOffset)) {
|
||||
pattern.addStitchRel(0, 0, stitchTypes.end, true);
|
||||
break;
|
||||
}
|
||||
|
||||
if (isStopStitch(xOffset, yOffset)) {
|
||||
file.getInt8(); // Skip extra byte
|
||||
pattern.addStitchRel(0, 0, stitchTypes.stop, true);
|
||||
stitchNumber++;
|
||||
continue;
|
||||
}
|
||||
|
||||
stitchType = determineStitchType(xOffset, yOffset);
|
||||
[xOffset, yOffset] = decodeCoordinates(xOffset, yOffset, file);
|
||||
|
||||
pattern.addStitchRel(xOffset, yOffset, stitchType, true);
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
stitchNumber++;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines whether the stitch is an "end" stitch.
|
||||
* @param {number} xOffset
|
||||
* @param {number} yOffset
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function isEndStitch(xOffset, yOffset) {
|
||||
return xOffset === 0xff && yOffset === 0x00;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines whether the stitch is a "stop" stitch.
|
||||
* @param {number} xOffset
|
||||
* @param {number} yOffset
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function isStopStitch(xOffset, yOffset) {
|
||||
return xOffset === 0xfe && yOffset === 0xb0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Infers the stitch type from byte flags.
|
||||
* @param {number} xOffset
|
||||
* @param {number} yOffset
|
||||
* @returns {number}
|
||||
*/
|
||||
function determineStitchType(xOffset, yOffset) {
|
||||
if (xOffset & 0x80) {
|
||||
if (xOffset & 0x20) return stitchTypes.trim;
|
||||
if (xOffset & 0x10) return stitchTypes.jump;
|
||||
}
|
||||
if (yOffset & 0x80) {
|
||||
if (yOffset & 0x20) return stitchTypes.trim;
|
||||
if (yOffset & 0x10) return stitchTypes.jump;
|
||||
}
|
||||
return stitchTypes.normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Decodes 12-bit signed coordinates from PEC format.
|
||||
* @param {number} xOffset
|
||||
* @param {number} yOffset
|
||||
* @param {DataView & { tell: () => number, seek: (pos: number) => void, getUint8: () => number, getInt8: () => number }} file
|
||||
* @returns {[number, number]} - Decoded [x, y] coordinates.
|
||||
*/
|
||||
function decodeCoordinates(xOffset, yOffset, file) {
|
||||
if (xOffset & 0x80) {
|
||||
xOffset = ((xOffset & 0x0f) << 8) + yOffset;
|
||||
if (xOffset & 0x800) xOffset -= 0x1000;
|
||||
yOffset = file.getUint8();
|
||||
} else if (xOffset >= 0x40) {
|
||||
xOffset -= 0x80;
|
||||
}
|
||||
|
||||
if (yOffset & 0x80) {
|
||||
yOffset = ((yOffset & 0x0f) << 8) + file.getUint8();
|
||||
if (yOffset & 0x800) yOffset -= 0x1000;
|
||||
} else if (yOffset > 0x3f) {
|
||||
yOffset -= 0x80;
|
||||
}
|
||||
|
||||
return [xOffset, yOffset];
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses a PES file and adds stitch and color data to the pattern.
|
||||
* @param {DataView & { tell: () => number, seek: (pos: number) => void, getUint8: () => number, getInt8: () => number }} file
|
||||
* @param {EmbroideryPattern} pattern - The pattern to populate.
|
||||
*/
|
||||
export function pesRead(file, pattern) {
|
||||
const pecStart = file.getInt32(8, true);
|
||||
file.seek(pecStart + 48);
|
||||
|
||||
const numColors = file.getInt8() + 1;
|
||||
for (let i = 0; i < numColors; i++) {
|
||||
pattern.addColor(pecColors[file.getInt8()]);
|
||||
}
|
||||
|
||||
file.seek(pecStart + 532);
|
||||
readPecStitches(file, pattern);
|
||||
pattern.addStitchRel(0, 0, stitchTypes.end);
|
||||
}
|
||||
|
||||
export const pecReadStitches = readPecStitches;
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
/**
|
||||
* A custom DataView with embroidery reader-specific helper methods.
|
||||
* @typedef {DataView & {
|
||||
* tell: () => number;
|
||||
* seek: (pos: number) => void;
|
||||
* getUint8: () => number;
|
||||
* getInt8: () => number;
|
||||
* getInt32: (pos: number, littleEndian: boolean) => number;
|
||||
* }} EmbroideryFileView
|
||||
*/
|
||||
|
||||
/**
|
||||
* A Pattern extended with optional embroidery reader methods.
|
||||
* @typedef {import('$lib/file-renderer/pattern').Pattern & {
|
||||
* addColor?: (color: import('$lib/file-renderer/pattern').Color) => void;
|
||||
* addStitchRel: (dx: number, dy: number, stitchType: string, autoAdvance?: boolean) => void;
|
||||
* invertPatternVertical?: () => void;
|
||||
* }} EmbroideryPattern
|
||||
*/
|
||||
|
||||
/**
|
||||
* Represents a reader for a specific embroidery file format.
|
||||
* @typedef {Object} FormatReader
|
||||
* @property {string} ext - File extension (e.g., '.pes', '.dst').
|
||||
* @property {(view: EmbroideryFileView, pattern: EmbroideryPattern) => void} read - Function to parse the embroidery format and populate the pattern.
|
||||
*/
|
||||
|
||||
/**
|
||||
* A map of supported embroidery file formats keyed by format name (e.g., "pes", "dst").
|
||||
* @typedef {Object.<string, FormatReader>} SupportedFormats
|
||||
*/
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"title": "ℹ About Embroidery Viewer",
|
||||
"content": "<p>Hi there! 👋</p><p><strong>⭐️ Embroidery Viewer</strong> was born out of a simple need — helping someone I care about. 💖</p><p>My girlfriend loves embroidery, but she often struggled to find an easy and free way to preview her embroidery design files before stitching them. Most tools she tried were either paid, overly complex, or required technical knowledge — and she’s not a techie.</p><p>So, to make things easier for her (and others like her), I decided to build this web application.</p><p>Over the course of a few weeks, I created <strong>Embroidery Viewer</strong> — a lightweight, fast, and free tool that lets you view embroidery files directly in your browser. No installation, no setup, and no tech hurdles. Just upload your file and see your design.</p><p>It’s not a super sophisticated tool, but it solves the problem it was meant to solve: making embroidery file previews accessible to everyone.</p><p>If this tool has helped you too, that makes me really happy! I plan to continue improving it based on feedback from users like you.</p><p>Thanks for stopping by — and happy stitching! 🧵✨</p>",
|
||||
"seo.title": "ℹ About Embroidery Viewer – The Story Behind the Tool",
|
||||
"seo.description": "Learn the story behind Embroidery Viewer — a free, online tool created to make embroidery file previews simple, fast, and accessible to everyone.",
|
||||
"seo.keywords": "about embroidery viewer, embroidery viewer story, free embroidery viewer, why embroidery viewer was created, who created embroidery viewer, online embroidery viewer, free embroidery tool, embroidery viewer about",
|
||||
"seo.url": "https://embroideryviewer.xyz/about",
|
||||
"seo.image": "https://embroideryviewer.xyz/og/about.png"
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"title": "💖 Donate",
|
||||
"subtitle": "Help support Embroidery Viewer and its development!",
|
||||
"description": "⭐️ <strong>Embroidery Viewer</strong> is free to use. If you find this tool helpful, please consider making a donation to keep it running and fund future improvements.",
|
||||
"ways": "💸 Ways to Donate",
|
||||
"bitcoin.description": "Scan or copy the address",
|
||||
"copy": "Copy Address",
|
||||
"copied": "Copied to Clipboard!",
|
||||
"copy.failed": "Copy Failed!",
|
||||
"monero.description": "Private and secure donation option.",
|
||||
"paypal.description": "Want to show support in a friendly way?",
|
||||
"paypal.link": "Open Donation link",
|
||||
"seo.title": "💖 Donate – Support Embroidery Viewer",
|
||||
"seo.description": "Help keep Embroidery Viewer free and improving by making a donation. Choose from Bitcoin, Monero, PayPal, or other secure options to support ongoing development and hosting.",
|
||||
"seo.keywords": "donate embroidery viewer, support embroidery viewer, embroidery viewer donations, help embroidery viewer, fund embroidery viewer, bitcoin donation embroidery, monero donation embroidery, paypal donation embroidery",
|
||||
"url": "https://embroideryviewer.xyz/donate",
|
||||
"image": "https://embroideryviewer.xyz/og/donate.png"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"about": "ℹ About",
|
||||
"privacy.policy": "🔐 Privacy Policy",
|
||||
"terms.of.service": "📝 Terms of Service",
|
||||
"copyright": "Copyright © {{year}} <a href=\"{{website}}\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> All rights reserved.",
|
||||
"version": "🧵 Version: {{version}}"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"languageSwitch": "🇧🇷",
|
||||
"homeNav": "🏠 Home",
|
||||
"aboutNav": "ℹ About",
|
||||
"viewerNav": "🧵 Viewer",
|
||||
"donateNav": "💖 Donate"
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
{
|
||||
"main.title": "🧵 Free Online Embroidery File Viewer",
|
||||
"main.description": "<p>✨Upload and preview your embroidery designs instantly – no software needed.</p> <p><strong>Embroidery Viewer</strong> is a free, browser-based tool that supports multiple embroidery file formats. View your designs quickly and securely, right in your browser.</p>",
|
||||
"features.title": "🚀 Features",
|
||||
"features.list": "<ul><li>📂 <strong>Supports Multiple Formats:</strong> DST, PES, JEF, EXP, VP3, and more</li><li>⚡ <strong>Quick Previews:</strong> See your embroidery files rendered as images</li><li>🧷 <strong>Multiple Files at Once:</strong> Upload several designs and view them side-by-side</li><li>🔒 <strong>No Upload to Server:</strong> Your files stay private – all processing happens locally</li><li>⬇️ <strong>Download as Image:</strong> Save each embroidery design preview as a PNG</li><li>💸 <strong>Fast & Free:</strong> No installations, no sign-ups – just open and use</li></ul>",
|
||||
"howtouse.title": "📘 How to Use",
|
||||
"howtouse.list": "<ol><li>📁 <strong>Click</strong> the upload button <em>or</em> <strong>drag and drop</strong> your embroidery files into the drop area</li><li>🧵 Select one or more embroidery files</li><li>▶️ Click the <strong>“Render files”</strong> button to preview your designs</li><li>👀 Instantly view your designs right in your browser – it’s that simple</li></ol>",
|
||||
"testimonials.title": "❤️ Loved by Hobbyists and Professionals",
|
||||
"testimonials.description": "<p>Whether you're a hobbyist working on your next DIY project or a professional digitizer reviewing client files, <strong>Embroidery Viewer</strong> gives you a no-fuss, instant way to visualize your work.</p>",
|
||||
"donation.title": "💖 Help Keep It Free",
|
||||
"donation.description": "<p><strong>Embroidery Viewer is completely free</strong> for everyone to use.</p><p>If you find it useful and want to support ongoing development and hosting costs, please consider making a small donation.</p>",
|
||||
"donation.cta": "🙌 Donate Now",
|
||||
"donation.cta.description": "every little bit helps!",
|
||||
"cta.title": "🚀 Try It Now",
|
||||
"cta.cta": "🧵 Open Viewer",
|
||||
"cta.cta.description": "the fastest <strong>Free Online Embroidery File Viewer</strong>.",
|
||||
"seo.title": "🏠 Free Online Embroidery File Viewer - Fast, Private & No Signup",
|
||||
"seo.description": "Upload and preview embroidery files instantly with Embroidery Viewer. Supports DST, PES, JEF, EXP, VP3 and more. No installs, no uploads – 100% browser-based and free.",
|
||||
"seo.keywords": "embroidery viewer, online embroidery viewer, embroidery file preview, DST viewer, PES viewer, free embroidery tool, JEF viewer, EXP embroidery, VP3 embroidery viewer, embroidery preview tool, browser embroidery renderer, convert embroidery to PNG",
|
||||
"seo.url": "https://embroideryviewer.xyz",
|
||||
"seo.image": "https://embroideryviewer.xyz/og/"
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"title": "🔐 Privacy Policy",
|
||||
"last.update": "Last updated: May 9, 2025",
|
||||
"content": "<p>At <strong>Embroidery Viewer</strong> (<a href=\"https://embroideryviewer.xyz\">embroideryviewer.xyz</a>), we respect your privacy and are committed to protecting any information you share while using our service.</p><h2>1. Personal Information</h2><p>Embroidery Viewer does <strong>not</strong> collect or store any personal information. You do not need to create an account, and we do not ask for your name, email address, or any identifying details.</p><h2>2. File Uploads</h2><p>When you upload an embroidery file to the viewer, the file is processed in your browser or temporarily on our server (if required) for preview purposes only. <strong>No uploaded files are stored, saved, or shared.</strong></p><p>Please avoid uploading any copyrighted or sensitive material unless you have permission to use it.</p><h2>3. Analytics</h2><p>We use <strong>Umami</strong> to collect anonymous usage statistics about our website, such as the number of visitors, page views, device types, and referral sources. This data helps us understand how the site is being used and improve it over time.</p><p>Umami is a privacy-friendly, cookie-free analytics tool. It does <strong>not</strong> track users across sites, collect personal data, or use cookies. All data is aggregated and anonymized.</p><h2>4. Cookies</h2><p>Embroidery Viewer does <strong>not</strong> use cookies or other tracking mechanisms in your browser.</p><h2>5. Third-Party Services</h2><p>We do not use third-party advertising, embed external trackers, or share data with third parties.</p><h2>6. Changes to This Policy</h2><p>We may update this Privacy Policy from time to time. All updates will be posted on this page with the updated date.</p><h2>7. Contact</h2><p>If you have any questions about this Privacy Policy, you can reach us at <a href=\"mailto:leo@leomurca.xyz\">leo@leomurca.xyz</a>.</p>",
|
||||
"seo.title": "🔐 Privacy Policy - Embroidery Viewer",
|
||||
"seo.description": "Learn how Embroidery Viewer respects your privacy. No personal data collected, files processed locally or temporarily, anonymous analytics only, no cookies or trackers used.",
|
||||
"seo.keywords": "privacy policy, data protection, embroidery viewer privacy, file uploads privacy, anonymous analytics, no cookies, user privacy, privacy-friendly analytics, data security, embroideryviewer.xyz",
|
||||
"seo.url": "https://embroideryviewer.xyz/privacy-policy",
|
||||
"seo.image": "https://embroideryviewer.xyz/og/privacy-policy.png"
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
{
|
||||
"title": "📝 Terms of Service",
|
||||
"update": "May 9, 2025",
|
||||
"content": "<p>Welcome to <strong>Embroidery Viewer</strong> (<a href=\"https://embroideryviewer.xyz\">embroideryviewer.xyz</a>). By accessing or using this website, you agree to be bound by the following Terms of Service. If you do not agree with any part of these terms, please do not use the site.</p><h2>1. Description of Service</h2><p>Embroidery Viewer is a free, browser-based tool that allows users to preview embroidery design files online. The service is intended for personal, non-commercial use.</p><h2>2. Use of the Service</h2><p>You agree to use the service only for lawful purposes. You are solely responsible for any content (including embroidery files) you upload, and you confirm that you have the legal right to use, view, and process those files.</p><p>You agree not to upload any files that are illegal, offensive, infringe on intellectual property rights, or contain malicious code.</p><h2>3. File Processing</h2><p>Files uploaded to Embroidery Viewer are processed either directly in your browser or temporarily on our servers. Files are not stored permanently, shared, or backed up.</p><p>While we aim to keep your content secure, you acknowledge that no system is 100% secure and you use the service at your own risk.</p><h2>4. No Warranty</h2><p>This service is provided \"as is\" and \"as available\" without any warranties, express or implied. We do not guarantee that the service will be uninterrupted, secure, or error-free.</p><h2>5. Limitation of Liability</h2><p>Embroidery Viewer shall not be held liable for any damages resulting from the use or inability to use the service, including but not limited to loss of data, loss of profits, or other incidental or consequential damages.</p><h2>6. Modifications to the Service</h2><p>We reserve the right to modify, suspend, or discontinue the service at any time without notice. We may also update these Terms of Service from time to time. Continued use of the service after changes constitutes your acceptance of the new terms.</p><h2>7. Governing Law</h2><p>These Terms shall be governed by and interpreted in accordance with the laws of Brazil, without regard to its conflict of law principles.</p><h2>8. Contact</h2><p>If you have any questions about these Terms of Service, feel free to contact us at <a href=\"mailto:leo@leomurca.xyz\">leo@leomurca.xyz</a>.</p>",
|
||||
"seo.title": "📝 Terms of Service - Embroidery Viewer",
|
||||
"seo.description": "Read the Terms of Service for Embroidery Viewer. Personal use, upload rules, file processing, warranty disclaimers, liability limitations, and governing law.",
|
||||
"seo.keywords": "terms of service, terms of use, personal use, file upload, file processing, warranty disclaimer, liability limitation, Brazilian law, embroideryviewer.xyz",
|
||||
"seo.url": "https://embroideryviewer.xyz/terms-of-service",
|
||||
"seo.image": "https://embroideryviewer.xyz/og/terms-of-service.png"
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
{
|
||||
"title": "Upload files",
|
||||
"fileSize": "Max file size is <strong>{{fileSize}}MB</strong>.",
|
||||
"supportedFormats": "Accepted formats: <strong>{{supportedFormats}}</strong>.",
|
||||
"render": "Render files",
|
||||
"dropzone": "<strong>Choose files</strong><br /><span>or drag and drop them here</span>",
|
||||
"browse": "Browse",
|
||||
"selected": "Selected files",
|
||||
"rejected": "Rejected files",
|
||||
"stitches": "Stitches",
|
||||
"dimensions": "Dimensions (x, y)",
|
||||
"download": "Download image",
|
||||
"warning.copyright": "Do not upload copyrighted material you do not own or have rights to.",
|
||||
"seo.title": "🧵 Free Online Embroidery File Viewer – Fast, Private & No Signup",
|
||||
"seo.description": "Upload and preview your embroidery files instantly with Embroidery Viewer. Supports DST, PES, JEF, EXP, VP3, and more. No installs, no uploads – 100% browser-based and free.",
|
||||
"seo.keywords": "embroidery viewer, online embroidery viewer, embroidery file preview, DST viewer, PES viewer, free embroidery tool, JEF viewer, EXP embroidery, VP3 embroidery viewer, embroidery preview tool, browser embroidery renderer, convert embroidery to PNG",
|
||||
"seo.url": "https://embroideryviewer.xyz/viewer",
|
||||
"seo.image": "https://embroideryviewer.xyz/og/viewer.png"
|
||||
}
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
import i18n from 'sveltekit-i18n';
|
||||
|
||||
/**
|
||||
* A frozen object mapping locale identifiers to their respective locale codes.
|
||||
*
|
||||
* These values represent the supported languages in the application.
|
||||
* Used for validating user preferences and loading the correct translations.
|
||||
*
|
||||
* @readonly
|
||||
* @enum {string}
|
||||
*/
|
||||
export const SUPPORTED_LOCALES = Object.freeze({
|
||||
EN_US: 'en-US',
|
||||
PT_BR: 'pt-BR',
|
||||
});
|
||||
|
||||
/** @type {import('sveltekit-i18n').Config} */
|
||||
const config = {
|
||||
initLocale: SUPPORTED_LOCALES.EN_US,
|
||||
fallbackLocale: SUPPORTED_LOCALES.EN_US,
|
||||
loaders: [
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.EN_US,
|
||||
key: 'header',
|
||||
loader: async () => (await import('./en-US/header.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.EN_US,
|
||||
key: 'footer',
|
||||
loader: async () => (await import('./en-US/footer.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.EN_US,
|
||||
key: 'home',
|
||||
routes: ['/'],
|
||||
loader: async () => (await import('./en-US/home.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.EN_US,
|
||||
key: 'about',
|
||||
routes: ['/about'],
|
||||
loader: async () => (await import('./en-US/about.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.EN_US,
|
||||
key: 'donate',
|
||||
routes: ['/donate'],
|
||||
loader: async () => (await import('./en-US/donate.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.EN_US,
|
||||
key: 'privacy.policy',
|
||||
routes: ['/privacy-policy'],
|
||||
loader: async () => (await import('./en-US/privacy-policy.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.EN_US,
|
||||
key: 'terms.of.service',
|
||||
routes: ['/terms-of-service'],
|
||||
loader: async () =>
|
||||
(await import('./en-US/terms-of-service.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.EN_US,
|
||||
key: 'viewer',
|
||||
routes: ['/viewer'],
|
||||
loader: async () => (await import('./en-US/viewer.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.PT_BR,
|
||||
key: 'header',
|
||||
loader: async () => (await import('./pt-BR/header.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.PT_BR,
|
||||
key: 'footer',
|
||||
loader: async () => (await import('./pt-BR/footer.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.PT_BR,
|
||||
key: 'home',
|
||||
routes: ['/'],
|
||||
loader: async () => (await import('./pt-BR/home.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.PT_BR,
|
||||
key: 'about',
|
||||
routes: ['/about'],
|
||||
loader: async () => (await import('./pt-BR/about.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.PT_BR,
|
||||
key: 'donate',
|
||||
routes: ['/donate'],
|
||||
loader: async () => (await import('./pt-BR/donate.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.PT_BR,
|
||||
key: 'privacy.policy',
|
||||
routes: ['/privacy-policy'],
|
||||
loader: async () => (await import('./pt-BR/privacy-policy.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.PT_BR,
|
||||
key: 'terms.of.service',
|
||||
routes: ['/terms-of-service'],
|
||||
loader: async () =>
|
||||
(await import('./pt-BR/terms-of-service.json')).default,
|
||||
},
|
||||
{
|
||||
locale: SUPPORTED_LOCALES.PT_BR,
|
||||
key: 'viewer',
|
||||
routes: ['/viewer'],
|
||||
loader: async () => (await import('./pt-BR/viewer.json')).default,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const {
|
||||
t,
|
||||
locale,
|
||||
locales,
|
||||
loading,
|
||||
loadTranslations,
|
||||
setRoute,
|
||||
setLocale,
|
||||
} = new i18n(config);
|
||||
|
||||
locale.subscribe(($locale) => {
|
||||
if (typeof localStorage !== 'undefined' && $locale) {
|
||||
const existing = localStorage.getItem('locale');
|
||||
if (existing !== $locale) {
|
||||
localStorage.setItem('locale', $locale);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"title": "ℹ Sobre o Embroidery Viewer",
|
||||
"content": "<p>Oi! 👋</p><p><strong>⭐️ Embroidery Viewer</strong> nasceu de uma necessidade simples — ajudar alguém que eu amo. 💖</p><p>Minha namorada adora bordado, mas ela sempre teve dificuldades para encontrar uma maneira fácil e gratuita de visualizar os arquivos de design de bordado antes de começar a costurar. A maioria das ferramentas que ela tentou eram pagas, muito complexas ou exigiam conhecimento técnico — e ela não é da área de tecnologia.</p><p>Então, para facilitar a vida dela (e de outras pessoas como ela), decidi criar este aplicativo web.</p><p>Ao longo de algumas semanas, criei o <strong>Embroidery Viewer</strong> — uma ferramenta leve, rápida e gratuita que permite visualizar arquivos de bordado diretamente no navegador. Sem instalação, sem configuração e sem obstáculos técnicos. Basta enviar o arquivo e ver o design.</p><p>Não é uma ferramenta super sofisticada, mas resolve o problema para o qual foi criada: tornar a visualização de arquivos de bordado acessível para todos.</p><p>Se essa ferramenta também te ajudou, isso me deixa muito feliz! Pretendo continuar melhorando com base no feedback de usuários como você.</p><p>Obrigado por visitar — e bons bordados! 🧵✨</p>",
|
||||
"seo.title": "ℹSobre o Embroidery Viewer - Por que esta ferramenta foi criada",
|
||||
"seo.description": "Conheça a história por trás do Embroidery Viewer — uma ferramenta gratuita e online criada para tornar a visualização de arquivos de bordado simples, rápida e acessível a todos.",
|
||||
"seo.keywords": "sobre embroidery viewer, história do embroidery viewer, visualizador de bordado gratuito, motivo da criação do embroidery viewer, quem criou o embroidery viewer, visualizador online de bordado, ferramenta gratuita para bordado, embroidery viewer sobre",
|
||||
"seo.url": "https://embroideryviewer.xyz/about",
|
||||
"seo.image": "https://embroideryviewer.xyz/og/about.png"
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"title": "💖 Doe",
|
||||
"subtitle": "Ajude a apoiar o Embroidery Viewer e seu desenvolvimento!",
|
||||
"description": "⭐️ O <strong>Embroidery Viewer</strong> é gratuito. Se você achar esta ferramenta útil, considere fazer uma doação para mantê-la funcionando e financiar melhorias futuras.",
|
||||
"ways": "💸 Formas de doar",
|
||||
"bitcoin.description": "Escaneie ou copie o endereço",
|
||||
"copy": "Copiar Endereço",
|
||||
"copied": "Copiado para a área de transferência!",
|
||||
"copy.failed": "Falha na Cópia!",
|
||||
"monero.description": "Opção de doação privada e segura.",
|
||||
"paypal.description": "Quer demonstrar apoio de uma forma amigável?",
|
||||
"paypal.link": "Abrir Link de Doação",
|
||||
"seo.title": "💖 Doe – Apoie o Embroidery Viewer",
|
||||
"seo.description": "Ajude a manter o Embroidery Viewer gratuito e em constante melhoria fazendo uma doação. Escolha entre Bitcoin, Monero, PayPal ou outras opções seguras para apoiar o desenvolvimento e hospedagem.",
|
||||
"seo.keywords": "doar embroidery viewer, apoie embroidery viewer, doações embroidery viewer, ajudar embroidery viewer, financiar embroidery viewer, doação bitcoin embroidery, doação monero embroidery, doação paypal embroidery",
|
||||
"url": "https://embroideryviewer.xyz/doar",
|
||||
"image": "https://embroideryviewer.xyz/og/doar.png"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"about": "ℹ Sobre",
|
||||
"privacy.policy": "🔐 Política de Privacidade",
|
||||
"terms.of.service": "📝 Termos de Serviço",
|
||||
"copyright": "Copyright © {{year}} <a href=\"{{website}}/pt-br\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> Todos os direitos reservados.",
|
||||
"version": "🧵 Versão: {{version}}"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue