Skip to content

Commit e3a5abd

Browse files
RobbieTheWagnerRobbieTheWagner
authored
Add color name and zooming functionality to eyedropper (#2417)
* WIP custom color picker * Update magnifying-color-picker.ts * Fix selecting edge colors * Get things working again * Remove unused code * Make grid smaller * Add depends for Ubuntu * Tweak window * Get working with dock * Remove node-screenshots * Get full overlay kind of working * Ensure cursor is in center square * Update magnifying-color-picker.ts * Update magnifier-picker.html * Fix prettier * Delete magnifier.html * Use contextIsolation * Get things working again * Add zooming / density updates * Pretty close * Get things working * Split into utils * Add zoom throttling * Update magnifier-picker.html * Update magnifier-picker.html * Fix lint * Update magnifier-utils-test.ts * Move magnifier to its own folder * Get working again * Move folders * Convert to more tailwind classes * Update lint.yml * Grab types from implementation * Fix types * Remove some non-null assertions * Support multiple monitors * Fix magnifier rendering in top left * Update eslint.config.mjs
1 parent ab8d57f commit e3a5abd

25 files changed

+2279
-1045
lines changed

‎.github/workflows/electron.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,7 @@ jobs:
2121
- run: pnpm install
2222
- name: Get xvfb
2323
run: sudo apt-get install xvfb
24+
- name: Magnifier Test
25+
run: pnpm test:magnifier
2426
- name: Electron Test
2527
run: xvfb-run --auto-servernum pnpm test:electron

‎.github/workflows/lint.yml‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ on:
88

99
jobs:
1010
lint:
11-
name: JS, HBS, Prettier, Types
11+
name: Lint
1212
runs-on: ubuntu-22.04
1313
timeout-minutes: 10
1414
steps:
@@ -19,11 +19,5 @@ jobs:
1919
node-version: 22
2020
cache: 'pnpm'
2121
- run: pnpm install
22-
- name: Lint JS
23-
run: pnpm lint:js
24-
- name: Lint HBS
25-
run: pnpm lint:hbs
26-
- name: Lint Prettier
27-
run: pnpm lint:format
28-
- name: Lint Types
29-
run: pnpm lint:types
22+
- name: Lint
23+
run: pnpm lint

‎.prettierignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
.*/
1111
/pnpm-lock.yaml
1212
ember-cli-update.json
13-
*.html
1413
CHANGELOG.md
1514

1615
# ember-try

‎README.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,20 @@ You will need the following things properly installed on your computer.
2525
- [Ember CLI](https://ember-cli.com/)
2626
- [Google Chrome](https://google.com/chrome/)
2727

28+
### Linux System Requirements
29+
30+
On Linux, the color picker functionality requires additional system libraries. These dependencies are automatically installed when using the `.deb` package, but if building from source, ensure you have:
31+
32+
```bash
33+
# Debian / Ubuntu
34+
sudo apt-get install libxcb1 libxrandr2 libdbus-1-3
35+
36+
# Alpine
37+
sudo apk add libxcb libxrandr dbus
38+
```
39+
40+
These libraries are required for the screenshot functionality used by the magnifying color picker.
41+
2842
## Installation
2943

3044
- `git clone <repository-url>` this repository
@@ -81,9 +95,8 @@ The build system works as follows:
8195

8296
### Building / Packaging
8397

84-
#### Development Builds
98+
#### Testing
8599

86-
- `pnpm build` - Builds just the Ember app for web
87100
- `pnpm test:ember` - Builds and runs Ember tests
88101
- `pnpm test:electron` - Builds and packages Electron, then runs Electron-specific tests
89102

‎app/routes/settings/cloud/profile.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ export default class SettingsAccountRoute extends Route {
1111
@service declare session: Session;
1212

1313
model(): CognitoService['user']['attributes'] {
14-
console.log(this.cognito);
15-
1614
return this.cognito.user?.attributes;
1715
}
1816

‎electron-app/magnifier/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Swach Magnifier</title>
7+
</head>
8+
<body
9+
class="m-0 p-0 bg-transparent cursor-none select-none overflow-hidden w-screen h-screen"
10+
>
11+
<div
12+
class="fixed top-0 left-0 w-screen h-screen cursor-none pointer-events-none"
13+
>
14+
<div
15+
class="absolute top-0 left-0 w-[200px] h-[200px] flex items-center justify-center cursor-none pointer-events-none translate-x-0 translate-y-0"
16+
style="will-change: transform"
17+
id="magnifierContainer"
18+
>
19+
<div
20+
class="magnifier-circle opacity-0 relative w-[150px] h-[150px] rounded-full border-4 border-white bg-black shadow-lg overflow-hidden shrink-0 box-content flex flex-col justify-center items-center"
21+
>
22+
<div
23+
class="absolute top-0 left-0 w-full h-full rounded-full grid grid-cols-9 grid-rows-9 transition-all duration-300 ease-out"
24+
id="pixelGrid"
25+
></div>
26+
<div
27+
class="relative z-20 bg-black/85 text-white px-2 py-1 rounded text-[10px] font-mono pointer-events-none shadow-md flex gap-1 min-w-0 max-w-[min(12rem,70%)] mb-16"
28+
id="color-label"
29+
>
30+
<span
31+
class="overflow-hidden text-ellipsis whitespace-nowrap shrink min-w-0"
32+
id="colorName"
33+
>
34+
Color
35+
</span>
36+
<span class="shrink-0">:</span>
37+
<span class="shrink-0 whitespace-nowrap" id="hexCode">#FFFFFF</span>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
43+
<script type="module" src="./main.ts"></script>
44+
</body>
45+
</html>

0 commit comments

Comments
 (0)