-
Notifications
You must be signed in to change notification settings - Fork 16
fix: canvas color issue and refactor Sass removal & rgbToHsl optimization #44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
quarksb
commented
Sep 29, 2025
- fix: color of canvas initial error
- refactor: rm sass due to sass error(Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.)
- refactor: optimize rgbToHsl function for improved readability and performance
…i]: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR addresses multiple issues including canvas color initialization problems, removes Sass dependencies due to deprecation warnings, and optimizes the rgbToHsl function. The changes modernize the codebase by migrating from Sass to vanilla CSS and improving color coordinate calculations.
- Fixed canvas color initialization errors with proper pointer positioning and resize handling
- Removed Sass dependency and converted SCSS syntax to vanilla CSS
- Optimized rgbToHsl function using Math.max/min and cleaner logic flow
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
File | Description |
---|---|
src/core/helper/converters.ts | Optimized rgbToHsl function with cleaner algorithm and better performance |
src/components/Vue3ColorPicker.vue | Major refactor: added pointer positioning logic, lifecycle management, and converted SCSS to CSS |
src/components/PickerWrap.vue | Removed empty SCSS style block |
src/components/PickerMenu.vue | Removed empty SCSS style block |
src/components/PickerHue.vue | Removed empty SCSS style block |
src/components/OpacityBar.vue | Removed empty SCSS style block |
src/components/GradientBar.vue | Removed empty SCSS style block |
src/components/ColorInputMenu.vue | Removed empty SCSS style block |
package.json | Removed sass dependency and updated TypeScript version |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
switch (max) { | ||
case nr: | ||
h = (ng - nb) / delta; | ||
break; | ||
case ng: | ||
h = 2 + (nb - nr) / delta; | ||
break; | ||
default: | ||
h = 4 + (nr - ng) / delta; | ||
break; |
Copilot
AI
Sep 29, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The switch statement comparing floating-point numbers with strict equality may fail due to precision issues. Use a tolerance-based comparison or restructure the logic to avoid direct floating-point equality checks.
switch (max) { | |
case nr: | |
h = (ng - nb) / delta; | |
break; | |
case ng: | |
h = 2 + (nb - nr) / delta; | |
break; | |
default: | |
h = 4 + (nr - ng) / delta; | |
break; | |
const EPSILON = 1e-10; | |
if (Math.abs(max - nr) < EPSILON) { | |
h = (ng - nb) / delta; | |
} else if (Math.abs(max - ng) < EPSILON) { | |
h = 2 + (nb - nr) / delta; | |
} else { | |
h = 4 + (nr - ng) / delta; |
Copilot uses AI. Check for mistakes.
pickerWrap.value.offsetHeight - pickerPointer.value.offsetHeight; | ||
if (rightLine <= 0 || bottomLine <= 0) { | ||
if (pointerRetryCount < 5 && pointerUpdateFrame === null) { |
Copilot
AI
Sep 29, 2025
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The magic number 5 for retry count should be extracted as a named constant to improve maintainability and make the retry limit configurable.
Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <[email protected]>