thandClaude Opus 4.7
184842b2e0
Tiny progressive-enhancement feature using the browser's native
EyeDropper API (Chromium 95+). Adds a small pipette button next
to every colour swatch in the properties panel; clicking it opens
the OS picker and applies the chosen sRGBHex to the bound colour
property.
- src/composables/useEyeDropper.ts: returns { supported, pick }.
`supported` re-detects on every call (not a singleton) so a late-
loaded polyfill or a test-time monkey-patch is observed without
juggling Vite's module cache. `pick()` resolves to the chosen
hex string, returns null on cancel / abort / missing API.
- PropertiesPanel: PhEyedropper button on each of the three colour
rows (fill, stroke, shadow). v-if="eyeDropperSupported" hides
the button entirely on Safari + Firefox — clean PE. Fill and
stroke buttons disable when their "Transparent" toggle is on.
Picked colour writes through the same fillColor / strokeColor /
shadowColorValue computeds, so the keyframe path / asset writer
is identical to a color-input drag.
- properties.eyedropper i18n string.
Tests (7 new under "eyedropper — color sampling from anywhere on the page"):
- supported reflects window.EyeDropper presence at call time.
- pick() resolves with the sRGBHex from a stubbed EyeDropper.
- pick() returns null on AbortError.
- pick() returns null when the API is missing.
- PropertiesPanel renders eyedropper buttons when supported.
- PropertiesPanel hides them when EyeDropper is undefined.
- Clicking the fill eyedropper applies the picked colour through
the layer's keyframe / asset writer.
`claude.txt` backlog complete (wiggle / motion-paths / eyedropper
all shipped).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
30 lines
650 B
JSON
30 lines
650 B
JSON
{
|
|
"name": "ruwio",
|
|
"private": true,
|
|
"version": "1.2.12",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "vue-tsc --noEmit && vite build",
|
|
"preview": "vite preview",
|
|
"type-check": "vue-tsc --noEmit",
|
|
"pack": "bash scripts/pack.sh"
|
|
},
|
|
"dependencies": {
|
|
"@phosphor-icons/vue": "^2.2.1",
|
|
"gifenc": "^1.0.3",
|
|
"konva": "^9.3.16",
|
|
"pinia": "^2.2.6",
|
|
"upng-js": "^2.1.0",
|
|
"vue": "^3.5.13",
|
|
"vue-konva": "^3.1.2"
|
|
},
|
|
"devDependencies": {
|
|
"@types/node": "^22.10.2",
|
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
"typescript": "^5.6.3",
|
|
"vite": "^6.0.3",
|
|
"vue-tsc": "^2.1.10"
|
|
}
|
|
}
|