Outbound

├── .github ├── FUNDING.yml ├── maskable-demo.gif └── workflows │ └── main.yml ├── partials ├── ad.hbs ├── github.hbs ├── donate.hbs ├── navbar.hbs ├── meta.hbs ├── clippaths.hbs └── controls.hbs ├── public ├── demo │ ├── proxx.png │ ├── big-island-buses.png │ ├── color-breakdown.png │ ├── svgomg.svg │ ├── spec.svg │ └── insightful-energy.svg ├── favicon │ ├── editor_192.png │ ├── favicon_16.png │ ├── favicon_196.png │ ├── favicon_32.png │ ├── favicon_512.png │ ├── logo.afdesign │ ├── github_social.png │ ├── maskable.afdesign │ ├── maskable_512.png │ ├── monochrome_256.png │ ├── editor.svg │ ├── favicon.svg │ └── maskable.svg ├── toggle │ ├── moon.svg │ └── sun.svg ├── css │ ├── settings.css │ ├── editor.css │ └── viewer.css ├── tigeroakes.svg ├── manifest.json └── kofi.svg ├── .gitignore ├── .editorconfig ├── netlify.toml ├── src ├── viewer │ ├── load-url.js │ ├── libs.js │ ├── keys.js │ ├── change-mask.js │ ├── masks.js │ ├── dialog.js │ └── upload-icon.js ├── settings │ └── mask-settings.js ├── missing-types.d.ts └── editor │ ├── options.js │ ├── history.js │ ├── layer.js │ ├── export.js │ ├── canvas.js │ └── main.js ├── tsconfig.json ├── eslint.config.js ├── netlify └── edge-functions │ └── open.ts ├── LICENSE ├── tests ├── editor │ ├── layer.spec.ts │ └── canvas.spec.ts ├── e2e │ ├── viewer.spec.ts │ ├── settings.spec.ts │ └── export.spec.ts └── viewer │ └── masks.spec.ts ├── README.md ├── playwright.config.ts ├── package.json ├── vite.config.js ├── index.html ├── settings.html └── editor.html /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | ko_fi: notwoods 2 | -------------------------------------------------------------------------------- /partials/ad.hbs: -------------------------------------------------------------------------------- 1 |

-------------------------------------------------------------------------------- /public/demo/proxx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/demo/proxx.png -------------------------------------------------------------------------------- /.github/maskable-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/.github/maskable-demo.gif -------------------------------------------------------------------------------- /public/favicon/editor_192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/editor_192.png -------------------------------------------------------------------------------- /public/favicon/favicon_16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/favicon_16.png -------------------------------------------------------------------------------- /public/favicon/favicon_196.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/favicon_196.png -------------------------------------------------------------------------------- /public/favicon/favicon_32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/favicon_32.png -------------------------------------------------------------------------------- /public/favicon/favicon_512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/favicon_512.png -------------------------------------------------------------------------------- /public/favicon/logo.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/logo.afdesign -------------------------------------------------------------------------------- /public/demo/big-island-buses.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/demo/big-island-buses.png -------------------------------------------------------------------------------- /public/demo/color-breakdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/demo/color-breakdown.png -------------------------------------------------------------------------------- /public/favicon/github_social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/github_social.png -------------------------------------------------------------------------------- /public/favicon/maskable.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/maskable.afdesign -------------------------------------------------------------------------------- /public/favicon/maskable_512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/maskable_512.png -------------------------------------------------------------------------------- /public/favicon/monochrome_256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/NotWoods/maskable/HEAD/public/favicon/monochrome_256.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | dist 4 | /test-results/ 5 | /playwright-report/ 6 | /blob-report/ 7 | /playwright/.cache/ 8 | -------------------------------------------------------------------------------- /partials/github.hbs: -------------------------------------------------------------------------------- 1 |

2 | Edit on 3 | GitHub 4 |

-------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | tab_width = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /public/toggle/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /public/css/settings.css: -------------------------------------------------------------------------------- 1 | .settings { 2 | max-width: 40rem; 3 | margin: 0 auto; 4 | } 5 | .mask-settings { 6 | columns: 2; 7 | column-gap: 1rem; 8 | } 9 | 10 | @media (max-width: 40rem) { 11 | .mask-settings { 12 | columns: 1; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "dist/" 3 | command = "npm run build" 4 | 5 | [build.environment] 6 | NODE_VERSION = "20" 7 | NPM_VERSION = "9.4.0" 8 | 9 | [[plugins]] 10 | # Installs the Lighthouse Build Plugin for all deploy contexts 11 | package = "@netlify/plugin-lighthouse" 12 | 13 | [[edge_functions]] 14 | path = "/open" 15 | function = "open" 16 | -------------------------------------------------------------------------------- /public/demo/svgomg.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /partials/donate.hbs: -------------------------------------------------------------------------------- 1 |

2 |

3 |

4 | Created by 5 | 6 |

7 | 8 |

9 | 10 |

11 | 12 |

-------------------------------------------------------------------------------- /public/toggle/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/viewer/load-url.js: -------------------------------------------------------------------------------- 1 | import { DialogManager } from './dialog.js'; 2 | 3 | const urlDialog = new DialogManager(document.querySelector('.url-dialog')); 4 | urlDialog.setupContent = function () { 5 | const selectedUrl = new URL(location.href).searchParams.get('demo'); 6 | 7 | if (selectedUrl) { 8 | /** @type {HTMLInputElement} */ 9 | const input = this.dialog.querySelector('#url'); 10 | input.value = new URL(selectedUrl, location.href).href; 11 | } 12 | return () => {}; 13 | }; 14 | 15 | for (const element of document.querySelectorAll('.toggle--url')) { 16 | element.addEventListener('click', () => urlDialog.toggleDialog()); 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": ["node_modules/**", "src/*-bundle.js", "workbox-*.js", "sw.js"], 3 | "include": [ 4 | "src/**/*", 5 | "tests/**/*", 6 | "src/missing-types.d.ts", 7 | "*.mjs", 8 | "*.cjs" 9 | ], 10 | "compilerOptions": { 11 | "allowJs": true, 12 | "checkJs": true, 13 | "target": "es2015", 14 | "module": "nodenext", 15 | "moduleResolution": "nodenext", 16 | "skipLibCheck": true, 17 | "strict": true, 18 | "strictNullChecks": false, 19 | "noImplicitAny": false, 20 | "noEmit": true, 21 | "baseUrl": ".", 22 | "types": ["node", "vite/client", "vite-plugin-pwa/client"], 23 | "lib": ["dom", "dom.iterable", "es2015", "es2018.promise"] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import js from '@eslint/js'; 3 | import eslintConfigPrettier from 'eslint-config-prettier'; 4 | import globals from 'globals'; 5 | import gitignore from 'eslint-config-flat-gitignore'; 6 | 7 | /** 8 | * @type {import("eslint").Linter.Config[]} 9 | */ 10 | const config = [ 11 | gitignore(), 12 | js.configs.recommended, 13 | eslintConfigPrettier, 14 | { 15 | languageOptions: { 16 | globals: { 17 | ...globals.browser, 18 | fathom: 'readonly', 19 | }, 20 | 21 | ecmaVersion: 2020, 22 | sourceType: 'module', 23 | }, 24 | 25 | rules: { 26 | 'prefer-arrow-callback': ['error', { allowNamedFunctions: true }], 27 | 'prefer-const': ['error', { destructuring: 'all' }], 28 | 'no-var': 'error', 29 | }, 30 | }, 31 | ]; 32 | 33 | export default config; 34 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | pull_request: 5 | push: 6 | 7 | jobs: 8 | unit_test: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - uses: actions/checkout@v4 13 | - uses: actions/setup-node@v4 14 | with: 15 | node-version: lts/* 16 | cache: 'npm' 17 | - run: npm ci 18 | - run: npm run lint 19 | - run: npm run check 20 | - run: npm run test 21 | 22 | e2e_test: 23 | runs-on: ubuntu-latest 24 | 25 | steps: 26 | - uses: actions/checkout@v4 27 | - uses: actions/setup-node@v4 28 | with: 29 | node-version: lts/* 30 | cache: 'npm' 31 | - run: npm ci 32 | - run: npm run build 33 | - name: Install Playwright Browsers 34 | run: npx playwright install --with-deps 35 | - run: npx playwright test 36 | -------------------------------------------------------------------------------- /public/favicon/editor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon/favicon.svg: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /netlify/edge-functions/open.ts: -------------------------------------------------------------------------------- 1 | function toDataUrl(blob: Blob) { 2 | return new Promise((resolve, reject) => { 3 | const reader = new FileReader(); 4 | reader.onload = () => resolve(reader.result as string); 5 | reader.onerror = () => reject(reader.error); 6 | reader.onabort = () => reject(new Error('Read aborted')); 7 | reader.readAsDataURL(blob); 8 | }); 9 | } 10 | 11 | export default async function open(req: Request) { 12 | if (req.method !== 'POST') { 13 | return new Response('Method Not Allowed', { status: 405 }); 14 | } 15 | 16 | const body = await req.formData(); 17 | const image = body.get('image'); 18 | if (image === null || typeof image === 'string') { 19 | return new Response('Unsupported Media Type', { status: 415 }); 20 | } 21 | 22 | const demoUrl = await toDataUrl(image); 23 | const params = new URLSearchParams({ demo: demoUrl }); 24 | 25 | return Response.redirect(new URL(`/?${params}`, req.url).href, 303); 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Tiger Oakes 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /tests/editor/layer.spec.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, test } from 'vitest'; 2 | import { backgroundLayer, createLayer } from '../../src/editor/layer.js'; 3 | 4 | describe('createLayer', () => { 5 | test('create layer with fill', () => { 6 | expect(createLayer('#f00')).toEqual({ 7 | name: 'Layer', 8 | fill: '#f00', 9 | padding: 0, 10 | x: 0, 11 | y: 0, 12 | alpha: 100, 13 | rotation: 0, 14 | locked: false, 15 | fit: 'contain', 16 | }); 17 | }); 18 | 19 | test('create layer with image', () => { 20 | const img = { close() {} } as ImageBitmap; 21 | expect(createLayer('#ff0', img)).toEqual({ 22 | src: img, 23 | name: 'Layer', 24 | fill: '#ff0', 25 | padding: 0, 26 | x: 0, 27 | y: 0, 28 | alpha: 0, 29 | rotation: 0, 30 | locked: false, 31 | fit: 'contain', 32 | }); 33 | }); 34 | 35 | test('create background layer', () => { 36 | expect(backgroundLayer()).toEqual({ 37 | name: 'Layer', 38 | fill: '#448AFF', 39 | padding: 0, 40 | x: 0, 41 | y: 0, 42 | alpha: 100, 43 | rotation: 0, 44 | locked: true, 45 | fit: 'contain', 46 | }); 47 | }); 48 | }); 49 | -------------------------------------------------------------------------------- /partials/navbar.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | # Maskable.app 4 | 5 | _Preview 6 | [maskable icons](https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/) 7 | in the browser!_ 8 | 9 | ![Demo usage](.github/maskable-demo.gif) 10 | 11 | --- 12 | 13 | [Maskable icons](https://www.w3.org/TR/appmanifest/#examples-of-masks) allow web 14 | developers to specify a full-bleed icon that will be cropped by the user-agent 15 | to match other icons on the device. On Android, this lets developers get rid of 16 | the default white background around their icons and use the entire provided 17 | space. 18 | 19 | It's important to test maskable icons to ensure the important regions of the 20 | icon are visible on any device and in any shape. Upload a maskable icon or drag 21 | and drop it into [Maskable.app](https://maskable.app), then preview how it will 22 | appear on different Android launchers. 23 | 24 | ## Developing 25 | 26 | Install dependencies: 27 | 28 | ```shell 29 | npm install 30 | ``` 31 | 32 | Once the modules are installed, run: 33 | 34 | ```shell 35 | npm run dev 36 | ``` 37 | 38 | This starts a development server using [Vite](https://vitejs.dev/). 39 | 40 | ## Licensing 41 | 42 | This project is available under the MIT License. 43 | -------------------------------------------------------------------------------- /partials/meta.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/viewer/libs.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | if (window.customElements) { 4 | import('file-drop-element'); 5 | import('dark-mode-toggle'); 6 | } 7 | 8 | /** @type {import('dark-mode-toggle').DarkModeToggle} */ 9 | const toggle = document.querySelector('dark-mode-toggle'); 10 | /** @type {HTMLElement | null} */ 11 | const ad = document.querySelector('[data-ea-publisher]'); 12 | 13 | /** 14 | * Set or remove the `dark` class on body and ads. 15 | * @param {boolean} darkMode 16 | */ 17 | function updateDarkModeClasses(darkMode) { 18 | document.body.classList.toggle('dark', darkMode); 19 | if (ad) { 20 | ad.classList.toggle('dark', darkMode); 21 | } 22 | } 23 | 24 | // Initialize the toggle based on `prefers-color-scheme`, defaulting to 'light'. 25 | toggle.mode = matchMedia('(prefers-color-scheme: dark)').matches 26 | ? 'dark' 27 | : 'light'; 28 | // Set or remove the `dark` class the first time. 29 | updateDarkModeClasses(toggle.mode === 'dark'); 30 | // Listen for toggle changes (which includes `prefers-color-scheme` changes) 31 | // and toggle the `dark` class accordingly. 32 | toggle.addEventListener('colorschemechange', () => { 33 | updateDarkModeClasses(toggle.mode === 'dark'); 34 | }); 35 | 36 | if (document.monetization && ad) { 37 | function onMonetizationStart() { 38 | if (document.monetization.state === 'started') { 39 | console.log('Payment started, hiding ads'); 40 | ad.hidden = true; 41 | } 42 | } 43 | document.monetization.addEventListener( 44 | 'monetizationstart', 45 | onMonetizationStart, 46 | ); 47 | } 48 | -------------------------------------------------------------------------------- /src/viewer/keys.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Builds a map of access keys to input elements. 3 | * Inputs with the `accesskey` HTML attribute will be placed in here. 4 | * @returns {ReadonlyMap} 5 | */ 6 | function getAccessKeys() { 7 | /** @type {Map} */ 8 | const accessKeys = new Map(); 9 | /** @type {NodeListOf} */ 10 | const focusable = document.querySelectorAll('input[accesskey]'); 11 | for (const input of focusable) { 12 | accessKeys.set(input.accessKey, input); 13 | } 14 | return accessKeys; 15 | } 16 | 17 | const accessKeys = getAccessKeys(); 18 | const masks = /** @type {HTMLCollectionOf} */ ( 19 | document.getElementsByClassName('mask__option') 20 | ); 21 | document.addEventListener('keydown', (evt) => { 22 | if (evt.repeat) return; // Ignore holding down keys 23 | if (evt.target instanceof HTMLInputElement && evt.target.type === 'text') { 24 | // Ignore typing in text fields 25 | return; 26 | } 27 | 28 | const index = Number(evt.key); 29 | 30 | /** @type {HTMLElement | undefined} */ 31 | let clickable; 32 | if (Number.isNaN(index)) { 33 | clickable = accessKeys.get(evt.key); 34 | } else { 35 | // Find option using 0-9 access key 36 | const maskOption = masks[index]; 37 | if (maskOption instanceof HTMLAnchorElement) { 38 | clickable = maskOption; 39 | } else if (maskOption) { 40 | clickable = maskOption.querySelector('input'); 41 | } 42 | } 43 | 44 | if (clickable) { 45 | evt.preventDefault(); 46 | clickable.click(); 47 | } 48 | }); 49 | -------------------------------------------------------------------------------- /src/settings/mask-settings.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | const form = document.querySelector('form'); 4 | 5 | /** 6 | * Get shown masks from storage. 7 | * Also ensures settings page checkboxes match current saved state. 8 | * @returns {Set} 9 | */ 10 | function loadShownMasks() { 11 | const savedShownMasks = localStorage.getItem('shownMasks'); 12 | if (savedShownMasks != undefined) { 13 | const savedHiddenMasksList = new Set(savedShownMasks.split(',')); 14 | /** @type {NodeListOf} */ 15 | const maskCheckboxes = form['mask']; 16 | for (const mask of maskCheckboxes) { 17 | mask.checked = savedHiddenMasksList.has(mask.value); 18 | } 19 | return savedHiddenMasksList; 20 | } else { 21 | /** @type {NodeListOf} */ 22 | const checkedMasks = form.querySelectorAll('input[name="mask"]:checked'); 23 | return new Set(Array.from(checkedMasks, (element) => element.value)); 24 | } 25 | } 26 | 27 | /** 28 | * Save shown masks to storage. 29 | * @param {Iterable} shownMasks 30 | */ 31 | function saveShownMasks(shownMasks) { 32 | const serialized = Array.from(shownMasks).join(','); 33 | localStorage.setItem('shownMasks', serialized); 34 | } 35 | 36 | const savedMasks = loadShownMasks(); 37 | 38 | form.addEventListener('change', (event) => { 39 | const input = /** @type {HTMLInputElement} */ (event.target); 40 | if (input.name === 'mask') { 41 | if (input.checked) { 42 | savedMasks.add(input.value); 43 | } else { 44 | savedMasks.delete(input.value); 45 | } 46 | saveShownMasks(savedMasks); 47 | } 48 | }); 49 | -------------------------------------------------------------------------------- /partials/clippaths.hbs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, devices } from '@playwright/test'; 2 | 3 | const webServer = !!process.env.CI; 4 | 5 | /** 6 | * See https://playwright.dev/docs/test-configuration. 7 | */ 8 | export default defineConfig({ 9 | testDir: './tests/e2e', 10 | /* Run tests in files in parallel */ 11 | fullyParallel: true, 12 | /* Fail the build on CI if you accidentally left test.only in the source code. */ 13 | forbidOnly: !!process.env.CI, 14 | /* Retry on CI only */ 15 | retries: process.env.CI ? 2 : 0, 16 | workers: process.env.CI ? 1 : undefined, 17 | use: { 18 | baseURL: webServer ? 'http://localhost:4173' : 'https://maskable.app/', 19 | /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ 20 | trace: 'on-first-retry', 21 | }, 22 | 23 | /* Configure projects for major browsers */ 24 | projects: [ 25 | { 26 | name: 'chromium', 27 | use: { ...devices['Desktop Chrome'] }, 28 | }, 29 | 30 | { 31 | name: 'firefox', 32 | use: { ...devices['Desktop Firefox'] }, 33 | }, 34 | 35 | { 36 | name: 'webkit', 37 | use: { ...devices['Desktop Safari'] }, 38 | }, 39 | 40 | /* Test against mobile viewports. */ 41 | { 42 | name: 'Mobile Chrome', 43 | use: { ...devices['Pixel 5'] }, 44 | }, 45 | { 46 | name: 'Mobile Safari', 47 | use: { ...devices['iPhone 12'] }, 48 | }, 49 | ], 50 | 51 | /* Run your local dev server before starting the tests */ 52 | webServer: webServer 53 | ? { 54 | command: 'npm run preview', 55 | port: 4173, 56 | reuseExistingServer: !process.env.CI, 57 | } 58 | : undefined, 59 | }); 60 | -------------------------------------------------------------------------------- /src/missing-types.d.ts: -------------------------------------------------------------------------------- 1 | // Prefixed CSS properties 2 | 3 | import { FileDropEvent } from 'file-drop-element'; 4 | 5 | interface Fathom { 6 | trackPageview(opts?: { url?: string; referrer?: string }): void; 7 | trackGoal(code: string, cents: number): void; 8 | } 9 | 10 | interface ColorSelectionOptions { 11 | /** 12 | * An `AbortSignal`. The eyedropper mode will be aborted when the `AbortSignal`'s `abort()` method is called. 13 | */ 14 | signal?: AbortSignal; 15 | } 16 | 17 | interface ColorSelectionResult { 18 | /** 19 | * A string representing the selected color, in hexadecimal sRGB format (`#aabbcc`). 20 | */ 21 | sRGBHex: string; 22 | } 23 | 24 | declare global { 25 | interface CSSStyleDeclaration { 26 | webkitClipPath?: string; 27 | } 28 | 29 | interface HTMLElementEventMap { 30 | filedrop: FileDropEvent; 31 | } 32 | 33 | /** 34 | * The `EyeDropper` interface represents an instance of an eyedropper tool that can be opened and used by the user to select colors from the screen. 35 | * @see https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper 36 | */ 37 | class EyeDropper { 38 | constructor(); 39 | /** 40 | * The `EyeDropper.open()` method starts the eyedropper mode, 41 | * returning a promise which is fulfilled once the user has either selected a color or dismissed the eyedropper mode. 42 | * @param options An options object to pass an `AbortSignal` signal. 43 | * @see https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper/open 44 | */ 45 | open(options?: ColorSelectionOptions): Promise; 46 | } 47 | 48 | interface Window { 49 | EyeDropper?: typeof EyeDropper; 50 | } 51 | 52 | let fathom: Fathom; 53 | } 54 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "maskable", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "lint": "prettier . --ignore-path .gitignore --check", 7 | "postlint": "eslint .", 8 | "format": "prettier . --ignore-path .gitignore --write", 9 | "postformat": "eslint . --fix", 10 | "test": "npm run check && vitest", 11 | "e2e": "playwright test --project chromium", 12 | "check": "tsc --noEmit", 13 | "dev": "vite", 14 | "build": "vite build", 15 | "preview": "vite preview" 16 | }, 17 | "dependencies": { 18 | "dark-mode-toggle": "^0.15.0", 19 | "file-drop-element": "^1.0.1" 20 | }, 21 | "devDependencies": { 22 | "@eslint/js": "^9.8.0", 23 | "@playwright/test": "^1.46.0", 24 | "@types/node": "^22.1.0", 25 | "@typescript/lib-dom": "npm:@types/web@^0.0.151", 26 | "@vitejs/plugin-legacy": "^5.4.1", 27 | "eslint": "^9.8.0", 28 | "eslint-config-flat-gitignore": "^0.1.8", 29 | "eslint-config-prettier": "^9.1.0", 30 | "globals": "^15.8.0", 31 | "jsdom": "^24.1.1", 32 | "prettier": "~3.3.3", 33 | "types-wm": "^1.1.0", 34 | "typescript": "^5.5.4", 35 | "vite": "^5.3.5", 36 | "vite-plugin-handlebars": "^2.0.0", 37 | "vite-plugin-pwa": "^0.20.1", 38 | "vite-plugin-webfont-dl": "^3.9.4", 39 | "vitest": "^2.0.4" 40 | }, 41 | "prettier": { 42 | "singleQuote": true, 43 | "proseWrap": "always", 44 | "overrides": [ 45 | { 46 | "files": [ 47 | "*.html", 48 | "*.hbs" 49 | ], 50 | "options": { 51 | "printWidth": 120, 52 | "singleQuote": false 53 | } 54 | }, 55 | { 56 | "files": "meta.hbs", 57 | "options": { 58 | "parser": "html" 59 | } 60 | } 61 | ] 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /public/tigeroakes.svg: -------------------------------------------------------------------------------- 1 | 37 | -------------------------------------------------------------------------------- /public/favicon/maskable.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { resolve } from 'node:path'; 2 | import { fileURLToPath } from 'node:url'; 3 | import { defineConfig } from 'vite'; 4 | import legacy from '@vitejs/plugin-legacy'; 5 | import handlebars from 'vite-plugin-handlebars'; 6 | import { VitePWA as pwa } from 'vite-plugin-pwa'; 7 | import { ViteWebfontDownload as webfont } from 'vite-plugin-webfont-dl'; 8 | 9 | const __dirname = fileURLToPath(new URL('.', import.meta.url)); 10 | 11 | export default defineConfig({ 12 | build: { 13 | minify: false, 14 | rollupOptions: { 15 | input: { 16 | viewer: resolve(__dirname, 'index.html'), 17 | editor: resolve(__dirname, 'editor.html'), 18 | settings: resolve(__dirname, 'settings.html'), 19 | }, 20 | }, 21 | }, 22 | plugins: [ 23 | handlebars({ 24 | partialDirectory: resolve(__dirname, 'partials'), 25 | helpers: { 26 | activeIf(context, name) { 27 | if (context === name) { 28 | return ' navbar__link--active'; 29 | } else { 30 | return ''; 31 | } 32 | }, 33 | }, 34 | }), 35 | webfont( 36 | 'https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap', 37 | ), 38 | pwa({ 39 | manifest: false, 40 | workbox: { 41 | cacheId: 'maskable.app', 42 | globPatterns: [ 43 | '*.{html,css,svg,woff2}', 44 | 'assets/*.js', 45 | 'demo/*.{png,svg}', 46 | 'favicon/favicon_*.png', 47 | 'toggle/*.svg', 48 | ], 49 | globIgnores: ['assets/*-legacy.*.js', 'open'], 50 | ignoreURLParametersMatching: [/demo/, /fbclid/], 51 | }, 52 | }), 53 | legacy({ 54 | targets: ['defaults', 'not IE 11', 'kaios >= 2'], 55 | }), 56 | ], 57 | test: { 58 | environment: 'jsdom', 59 | include: ['tests/**/*.spec.ts'], 60 | exclude: ['tests/e2e/**/*'], 61 | }, 62 | }); 63 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Maskable.app", 3 | "short_name": "Maskable", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#fafafa", 7 | "theme_color": "#FFD567", 8 | "description": "Preview maskable icons in the browser.", 9 | "icons": [ 10 | { 11 | "src": "favicon/favicon_512.png", 12 | "sizes": "512x512", 13 | "type": "image/png", 14 | "purpose": "any" 15 | }, 16 | { 17 | "src": "favicon/favicon.svg", 18 | "sizes": "any", 19 | "type": "image/svg+xml", 20 | "purpose": "any" 21 | }, 22 | { 23 | "src": "favicon/maskable_512.png", 24 | "sizes": "512x512", 25 | "type": "image/png", 26 | "purpose": "maskable" 27 | }, 28 | { 29 | "src": "favicon/maskable.svg", 30 | "sizes": "any", 31 | "type": "image/svg+xml", 32 | "purpose": "maskable" 33 | }, 34 | { 35 | "src": "favicon/monochrome_256.png", 36 | "sizes": "256x256", 37 | "type": "image/png", 38 | "purpose": "monochrome" 39 | } 40 | ], 41 | "shortcuts": [ 42 | { 43 | "name": "Editor", 44 | "description": "Build your own maskable icon", 45 | "url": "/editor", 46 | "icons": [ 47 | { 48 | "src": "favicon/editor_192.png", 49 | "sizes": "192x192", 50 | "type": "image/png", 51 | "purpose": "any monochrome" 52 | }, 53 | { 54 | "src": "favicon/editor.svg", 55 | "sizes": "any", 56 | "type": "image/svg+xml", 57 | "purpose": "any monochrome" 58 | } 59 | ] 60 | } 61 | ], 62 | "share_target": { 63 | "action": "/open", 64 | "method": "POST", 65 | "enctype": "multipart/form-data", 66 | "params": { 67 | "files": [ 68 | { 69 | "name": "image", 70 | "accept": ["image/*", ".png"] 71 | } 72 | ] 73 | } 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /tests/e2e/viewer.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test'; 2 | 3 | test.describe('Viewer', () => { 4 | test.beforeEach(async ({ page }) => { 5 | await page.goto('/'); 6 | }); 7 | 8 | test('default preview', async ({ page }) => { 9 | await expect(page).toHaveTitle('Maskable.app'); 10 | 11 | await expect( 12 | page.getByRole('img', { name: 'Preview of maskable icon' }), 13 | ).toHaveAttribute('src', /demo\/spec\.svg$/); 14 | }); 15 | 16 | [ 17 | { name: 'W3C Example', file: 'spec.svg' }, 18 | { name: 'Color Breakdown', file: 'color-breakdown.png' }, 19 | { name: 'Insightful Energy', file: 'insightful-energy.svg' }, 20 | { name: 'Big Island Buses', file: 'big-island-buses.png' }, 21 | { name: 'PROXX', file: 'proxx.png' }, 22 | { name: 'SVGOMG', file: 'svgomg.svg' }, 23 | ].forEach(({ name, file }) => { 24 | test(`demo preview ${name}`, async ({ page }) => { 25 | await page.getByRole('list').getByRole('link', { name }).click(); 26 | 27 | const expectedSrc = new RegExp(`demo/${file.replace('.', '\\.')}$`); 28 | 29 | await expect( 30 | page.getByRole('img', { name: 'Preview of maskable icon' }), 31 | ).toHaveAttribute('src', expectedSrc); 32 | await expect( 33 | page.getByRole('img', { name: 'Preview of original icon' }), 34 | ).toHaveAttribute('src', expectedSrc); 35 | }); 36 | }); 37 | 38 | test('show ghost image when control is checked', async ({ page }) => { 39 | const ghostIcon = page.getByRole('img', { 40 | name: 'Preview of original icon', 41 | }); 42 | const ghostIconContainer = ghostIcon.locator('xpath=..'); 43 | 44 | await expect(ghostIconContainer).toHaveCSS('opacity', '0'); 45 | 46 | await page.getByLabel('Show ghost image').check(); 47 | 48 | await expect(ghostIconContainer).not.toHaveCSS('opacity', '0'); 49 | await expect(ghostIconContainer).toHaveCSS('opacity', '0.4'); 50 | }); 51 | }); 52 | -------------------------------------------------------------------------------- /src/viewer/change-mask.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { applyMask, simpleMasks } from './masks.js'; 3 | 4 | class MaskManager { 5 | constructor() { 6 | this.container = document.querySelector('.masks'); 7 | this.hideMasks(); 8 | } 9 | 10 | /** 11 | * @type {NodeListOf} 12 | */ 13 | get masks() { 14 | return this.container.querySelectorAll('.mask__option input'); 15 | } 16 | 17 | /** 18 | * Get hidden masks from storage. Defaults to masks that aren't well supported. 19 | * @private 20 | * @returns {readonly string[]} 21 | */ 22 | getShownMasks() { 23 | const shownMasks = localStorage.getItem('shownMasks'); 24 | if (shownMasks != undefined) { 25 | return shownMasks.split(','); 26 | } else { 27 | undefined; 28 | } 29 | } 30 | 31 | hideMasks() { 32 | const shownMasks = this.getShownMasks(); 33 | 34 | const toShow = new Set(shownMasks ?? simpleMasks); 35 | for (const mask of this.masks) { 36 | mask.parentElement.hidden = !toShow.has(mask.value); 37 | } 38 | } 39 | } 40 | 41 | /** @type {HTMLElement} */ 42 | const container = document.querySelector('.icon__grid'); 43 | /** @type {NodeListOf} All elements to change the mask of. */ 44 | const masked = document.querySelectorAll('.masked'); 45 | /** @type {NodeListOf} */ 46 | const icons = document.querySelectorAll('.icon'); 47 | 48 | const maskManager = new MaskManager(); 49 | maskManager.container.addEventListener('change', (evt) => { 50 | const radio = /** @type {HTMLInputElement} */ (evt.target); 51 | if (radio.name === 'mask') { 52 | applyMask(masked, icons, radio.value); 53 | } 54 | }); 55 | document.querySelector('.controls').addEventListener('change', (evt) => { 56 | const checkbox = /** @type {HTMLInputElement} */ (evt.target); 57 | switch (checkbox.name) { 58 | case 'shrink': { 59 | // Shrink the icon to 1/4 size 60 | const size = checkbox.checked ? '0.25' : '1'; 61 | container.style.transform = `scale(${size})`; 62 | break; 63 | } 64 | case 'ghost': 65 | // Show ghost image behind icon 66 | container.classList.toggle('icon--ghost', checkbox.checked); 67 | break; 68 | } 69 | }); 70 | -------------------------------------------------------------------------------- /tests/editor/canvas.spec.ts: -------------------------------------------------------------------------------- 1 | import { describe, expect, test } from 'vitest'; 2 | import { backgroundLayer } from '../../src/editor/layer.js'; 3 | import { toUrl, CanvasController } from '../../src/editor/canvas.js'; 4 | 5 | function mockCanvas(opts: { toBlob?: boolean }) { 6 | const canvas = { 7 | toDataURL(type: string) { 8 | if (type === 'image/png') { 9 | return 'data:,MOCK'; 10 | } else { 11 | throw new Error(); 12 | } 13 | }, 14 | } as HTMLCanvasElement; 15 | 16 | if (opts.toBlob) { 17 | canvas.toBlob = function (callback, type) { 18 | if (type === 'image/png') { 19 | callback(new Blob()); 20 | } else { 21 | throw new Error(); 22 | } 23 | }; 24 | } 25 | 26 | return canvas; 27 | } 28 | 29 | globalThis.URL.createObjectURL = () => 'blob:MOCK'; 30 | 31 | describe('toUrl', () => { 32 | test('Return data URL when requested', async () => { 33 | const canvas1 = mockCanvas({ toBlob: true }); 34 | expect(await toUrl(canvas1, false)).toBe('data:,MOCK'); 35 | 36 | const canvas2 = mockCanvas({ toBlob: false }); 37 | expect(await toUrl(canvas2, false)).toBe('data:,MOCK'); 38 | }); 39 | 40 | test('Return blob URL when requested', async () => { 41 | const canvas = mockCanvas({ toBlob: true }); 42 | expect(await toUrl(canvas, true)).toMatch(/^blob:/); 43 | }); 44 | 45 | test(`Return data URL when blob URL isn't supported`, async () => { 46 | const canvas = mockCanvas({ toBlob: false }); 47 | expect(await toUrl(canvas, true)).toBe('data:,MOCK'); 48 | }); 49 | }); 50 | 51 | describe('CanvasController', () => { 52 | test('Default values', async () => { 53 | const controller = new CanvasController(); 54 | expect(controller.getLayerCount()).toBe(0); 55 | expect(controller.getSize()).toBe(1024); 56 | }); 57 | 58 | test('Add and remove layers', async () => { 59 | const controller = new CanvasController(); 60 | const layer1 = backgroundLayer(); 61 | const layer2 = backgroundLayer(); 62 | const layer3 = backgroundLayer(); 63 | controller.add(layer1, []); 64 | controller.add(layer2, []); 65 | expect(controller.getLayerCount()).toBe(2); 66 | 67 | controller.delete(layer1); 68 | expect(controller.getLayerCount()).toBe(1); 69 | 70 | // Layer not in controller 71 | controller.delete(layer3); 72 | expect(controller.getLayerCount()).toBe(1); 73 | }); 74 | }); 75 | -------------------------------------------------------------------------------- /partials/controls.hbs: -------------------------------------------------------------------------------- 1 |

2 | 5 |

Masks

6 | 7 | 8 | None 9 | 10 | 11 | 12 | Minimum safe area 13 | 14 | 15 | 16 | Circle 17 | 18 | 19 | 20 | Rounded Rectangle 21 | 22 | 23 | 24 | Square 25 | 26 | 27 | 28 | Drop 29 | 30 | 31 | 32 | Cylinder 33 | 34 | 35 | 36 | Squircle 37 | 38 | 39 | 40 | Flower 41 | 42 | 43 | 44 | Pebble 45 | 46 | 47 | 48 | Vessel 49 | 50 | 51 | 52 | Hexagon 53 | 54 | 55 | More... 56 | 57 |

58 |

59 |

Controls

60 | 61 | 62 | Shrink 63 | 64 | 65 | 66 | Show ghost image 67 | 68 |

-------------------------------------------------------------------------------- /src/viewer/masks.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @type {Readonly>>} 3 | * Set of masks corresponding to radio buttons on the page. 4 | */ 5 | const defaultMasks = { 6 | none: 'inset(0)', 7 | circle: 'inset(6.36% round 50%)', 8 | rounded_rect: 'inset(6.36% round 34px)', 9 | sharp_rect: 'inset(6.36%)', 10 | drop: 'inset(6.36% round 50% 50% 34px)', 11 | cylinder: 'inset(6.36% round 50% / 30%)', 12 | minimum: 'inset(10% round 50%)', 13 | squircle: 'url(#squircle)', 14 | flower: 'url(#flower)', 15 | pebble: 'url(#pebble)', 16 | vessel: 'url(#vessel)', 17 | hexagon: 'url(#hexagon)', 18 | }; 19 | /** 20 | * @type {Readonly>>} 21 | */ 22 | const borderRadiiAndScale = { 23 | none: ['0', 'scale(1)'], 24 | circle: ['50%', 'scale(1.15)'], 25 | rounded_rect: ['34px', 'scale(1.15)'], 26 | sharp_rect: ['0', 'scale(1.15)'], 27 | drop: ['50% 50% 34px', 'scale(1.15)'], 28 | cylinder: ['50% / 30%', 'scale(1.15)'], 29 | minimum: ['50%', 'scale(1.25)'], 30 | }; 31 | 32 | /** 33 | * Checks if the clip-path CSS property is supported in the browser. 34 | */ 35 | function maskSupport() { 36 | return CSS.supports('(clip-path: inset(0)) or (-webkit-clip-path: inset(0))'); 37 | } 38 | 39 | /** 40 | * Apply the given mask onto the given HTML elements. 41 | * @param {Iterable} masked 42 | * @param {Iterable} icons 43 | * @param {string} maskName Name of a mask. 44 | * @returns {boolean} True if successful. 45 | */ 46 | export function applyMask(masked, icons, maskName) { 47 | if (maskSupport()) { 48 | const clipPath = defaultMasks[maskName]; 49 | if (!clipPath) return false; 50 | 51 | for (const mask of masked) { 52 | // When the radio buttons are selected, 53 | // change the clip path to the new mask. 54 | mask.style.webkitClipPath = clipPath; 55 | mask.style.clipPath = clipPath; 56 | } 57 | } else { 58 | const tuple = borderRadiiAndScale[maskName]; 59 | if (!tuple) return false; 60 | 61 | const [borderRadius, scale] = tuple; 62 | for (const icon of icons) { 63 | icon.style.transform = scale; 64 | } 65 | for (const mask of masked) { 66 | mask.style.borderRadius = borderRadius; 67 | } 68 | } 69 | return true; 70 | } 71 | 72 | /** 73 | * Masks that don't require SVG path references, which can't be animated. 74 | */ 75 | export const simpleMasks = Object.keys(borderRadiiAndScale); 76 | -------------------------------------------------------------------------------- /src/editor/options.js: -------------------------------------------------------------------------------- 1 | /** @type {HTMLFormElement} */ 2 | const options = document.querySelector('.options'); 3 | /** @type {HTMLParagraphElement} */ 4 | const backgroundInfo = document.querySelector('.info--background'); 5 | /** @type {HTMLParagraphElement} */ 6 | const fitInfo = document.querySelector('.info--fit'); 7 | 8 | /** 9 | * Return the preview element corresponding to a changing input. 10 | * @param {HTMLInputElement} input 11 | * @returns {HTMLSpanElement | HTMLInputElement | undefined} 12 | */ 13 | function findPreview(input) { 14 | if (input.className === 'control__input') { 15 | return /** @type {HTMLSpanElement | HTMLInputElement} */ ( 16 | input.nextElementSibling 17 | ); 18 | } else if (input.className === 'control__preview') { 19 | // Special case for the "color" text input 20 | return /** @type {HTMLInputElement} */ (input.previousElementSibling); 21 | } else { 22 | return undefined; 23 | } 24 | } 25 | 26 | /** 27 | * Updates the preview span adjacent to an input with the current value. 28 | * @param {HTMLInputElement} input 29 | */ 30 | export function updatePreview(input) { 31 | const preview = findPreview(input); 32 | if (!preview) return; 33 | 34 | const text = input.value + (preview.dataset.suffix || ''); 35 | if (preview instanceof HTMLInputElement) { 36 | preview.value = text; 37 | } else { 38 | preview.textContent = text; 39 | } 40 | 41 | // Set CSS custom property for accent color styling 42 | if (input.name === 'fill') { 43 | options.style.setProperty('--fill', text); 44 | } 45 | } 46 | 47 | /** 48 | * Sets the selected layer based on a radio element. 49 | * @param {import("./layer.js").Layer} layer 50 | */ 51 | export function selectLayer(layer) { 52 | options.padding.value = layer.padding; 53 | options.padding.disabled = layer.locked; 54 | options.x.value = layer.x; 55 | options.y.value = layer.y; 56 | for (const input of options.fill) { 57 | input.value = layer.fill; 58 | } 59 | options.alpha.value = layer.alpha; 60 | options.alpha.disabled = layer.locked; 61 | options.delete.disabled = layer.locked; 62 | backgroundInfo.hidden = !layer.locked; 63 | options.fit[0].disabled = !layer.src; 64 | fitInfo.hidden = Boolean(layer.src); 65 | options.rotation.value = layer.rotation; 66 | updatePreviews(); 67 | } 68 | 69 | function updatePreviews() { 70 | const inputs = /** @type {HTMLInputElement[]} */ ( 71 | Array.from(options.elements) 72 | ); 73 | inputs.forEach(updatePreview); 74 | } 75 | 76 | updatePreviews(); 77 | -------------------------------------------------------------------------------- /public/demo/spec.svg: -------------------------------------------------------------------------------- 1 | 15 | -------------------------------------------------------------------------------- /tests/e2e/settings.spec.ts: -------------------------------------------------------------------------------- 1 | import { test, expect } from '@playwright/test'; 2 | 3 | [ 4 | { name: 'Viewer', path: '/' }, 5 | { name: 'Editor', path: '/editor' }, 6 | ].forEach(({ name, path }) => { 7 | test.describe(`Settings for ${name}`, () => { 8 | test.beforeEach(async ({ page }) => { 9 | await page.goto(path); 10 | }); 11 | 12 | test.afterEach(async ({ page }) => { 13 | await page.evaluate(() => localStorage.clear()); 14 | }); 15 | 16 | test('default visible masks', async ({ page }) => { 17 | await expect(page.getByLabel('None')).toBeVisible(); 18 | await expect(page.getByLabel('Minimum safe area')).toBeChecked(); 19 | await expect(page.getByLabel('Circle')).toBeVisible(); 20 | await expect(page.getByLabel('Rounded Rectangle')).toBeVisible(); 21 | await expect(page.getByLabel('Square')).toBeVisible(); 22 | await expect(page.getByLabel('Drop')).toBeVisible(); 23 | await expect(page.getByLabel('Cylinder')).toBeVisible(); 24 | }); 25 | 26 | test('disable mask in settings', async ({ page }) => { 27 | // Open settings 28 | await page.getByRole('link', { name: 'More masks' }).click(); 29 | await expect(page).toHaveTitle('Maskable.app Settings'); 30 | 31 | // Disable masks 32 | await expect(page.getByLabel('Minimum safe area')).toBeDisabled(); 33 | await expect(page.getByLabel('Square')).toBeEnabled(); 34 | await page.getByLabel('Circle').uncheck(); 35 | 36 | // Check that the masks are not visible 37 | await page.goBack(); 38 | await expect(page.getByLabel('Minimum safe area')).toBeVisible(); 39 | await expect(page.getByLabel('Circle')).toBeHidden(); 40 | await expect(page.getByLabel('Square')).toBeVisible(); 41 | }); 42 | 43 | test('enable mask in settings', async ({ page }) => { 44 | // Open settings 45 | await page.getByRole('link', { name: 'More masks' }).click(); 46 | await expect(page).toHaveTitle('Maskable.app Settings'); 47 | 48 | // Disable masks 49 | await expect(page.getByLabel('Minimum safe area')).toBeChecked(); 50 | await expect(page.getByLabel('Square')).toBeChecked(); 51 | await expect(page.getByLabel('Squircle')).not.toBeChecked(); 52 | await page.getByLabel('Squircle').check(); 53 | 54 | // Check that the masks are not visible 55 | await page.goBack(); 56 | await expect(page.getByLabel('Minimum safe area')).toBeVisible(); 57 | await expect(page.getByLabel('Square')).toBeVisible(); 58 | await expect(page.getByLabel('Squircle')).toBeVisible(); 59 | }); 60 | }); 61 | }); 62 | -------------------------------------------------------------------------------- /src/editor/history.js: -------------------------------------------------------------------------------- 1 | export class History { 2 | /** 3 | * @param {import('./layer.js').Layer} layer 4 | * @param {HTMLInputElement} input 5 | * @param {Number} position 6 | */ 7 | 8 | constructor(layer, input, position) { 9 | /** 10 | * @type {import("./layer.js").Layer[]} 11 | */ 12 | this.stack = []; 13 | this.stack.push(layer); 14 | /** 15 | * @type {HTMLInputElement[]} 16 | */ 17 | this.inputs = []; 18 | this.inputs.push(input); 19 | 20 | /** 21 | * @type {Number[]} 22 | */ 23 | this.positions = []; 24 | this.positions.push(position); 25 | } 26 | 27 | /** 28 | * @param {import("./layer.js").Layer} layer 29 | * @param {HTMLInputElement} input 30 | */ 31 | push(layer, input, position) { 32 | this.stack.push(layer); 33 | this.inputs.push(input); 34 | this.positions.push(position); 35 | } 36 | 37 | pop() { 38 | return { 39 | layer: this.stack.pop(), 40 | input: this.inputs.pop(), 41 | position: this.positions.pop(), 42 | }; 43 | } 44 | 45 | getLast() { 46 | return { 47 | layer: this.stack[this.stack.length - 1], 48 | input: this.inputs[this.inputs.length - 1], 49 | position: this.positions[this.positions.length - 1], 50 | }; 51 | } 52 | 53 | getLastOfPosition(position) { 54 | const index = this.positions.lastIndexOf(position); 55 | return { 56 | layer: this.stack[index], 57 | input: this.inputs[index], 58 | position: this.positions[index], 59 | }; 60 | } 61 | 62 | increasePosition() { 63 | // this will be called when new layer is added 64 | // new layer is added to the front 65 | this.positions = this.positions.map((pos) => ++pos); 66 | } 67 | 68 | decreasePosition() { 69 | // this will be called when a layer is deleted 70 | this.positions = this.positions.map((pos) => --pos); 71 | } 72 | 73 | isAvailableToPop() { 74 | // stack always has at least 1 element 75 | return this.stack.length > 1; 76 | } 77 | 78 | isLastOne(position) { 79 | return this.positions.indexOf(position) === -1; 80 | } 81 | 82 | removeOnePosition(position) { 83 | const indexes = []; 84 | let i = -1; 85 | while ((i = this.positions.indexOf(position, i + 1)) != -1) { 86 | indexes.push(i); 87 | } 88 | 89 | for (let j = indexes.length - 1; j >= 0; j--) { 90 | this.inputs.splice(indexes[j], 1); 91 | this.stack.splice(indexes[j], 1); 92 | this.positions.splice(indexes[j], 1); 93 | } 94 | 95 | this.positions = this.positions.map((pos) => { 96 | if (pos > position) pos--; 97 | return pos; 98 | }); 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /src/viewer/dialog.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Manages progressively enhancing a `

Maskable.app

Masks

Controls

Icon URL

Settings

Available Masks

Export