Completed Palette and Slider with integration
This commit is contained in:
parent
2ec8ed5464
commit
e1ecc3f31b
5 changed files with 99 additions and 57 deletions
|
@ -1,13 +1,49 @@
|
||||||
<script>
|
<script>
|
||||||
|
import {onMount} from "svelte"
|
||||||
|
import { getAndConvertHexa, getAndConvertRgba, getHSLA, hsvaToHexa, hsvaToRgba } from "./utils.js"
|
||||||
import Slider from "./Slider.svelte";
|
import Slider from "./Slider.svelte";
|
||||||
import Palette from "./Palette.svelte";
|
import Palette from "./Palette.svelte";
|
||||||
|
|
||||||
export let value = "#00000000";
|
export let value = "#00bfffff";
|
||||||
|
export let format = "hexa";
|
||||||
|
|
||||||
let h = 0;
|
let h = 0;
|
||||||
let s = 0;
|
let s = 0;
|
||||||
let v = 0;
|
let v = 0;
|
||||||
let a = 1;
|
let a = 1;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
let hsva = getFormatAndConvert(value)
|
||||||
|
setHSVA(hsva)
|
||||||
|
})
|
||||||
|
|
||||||
|
function getFormatAndConvert() {
|
||||||
|
if (value.startsWith('#')) {
|
||||||
|
format = "hexa"
|
||||||
|
return getAndConvertHexa(value)
|
||||||
|
} else if (value.startsWith('rgba')) {
|
||||||
|
format = "rgba"
|
||||||
|
return getAndConvertRgba(value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHSVA([hue, sat, val, alpha]) {
|
||||||
|
h = hue;
|
||||||
|
s = sat / 100;
|
||||||
|
v - val / 100;
|
||||||
|
a = alpha;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSaturationAndValue({detail}) {
|
||||||
|
s = detail.s
|
||||||
|
v = detail.v
|
||||||
|
}
|
||||||
|
|
||||||
|
// $: {
|
||||||
|
// let hsva = [h, s, v, a]
|
||||||
|
// value = format === "hexa" ? hsvaToHexa(hsva) : hsvaToRgba(hsva)
|
||||||
|
// console.log("VAL", value)
|
||||||
|
// }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -24,9 +60,9 @@
|
||||||
|
|
||||||
<div class="colorpicker-container">
|
<div class="colorpicker-container">
|
||||||
|
|
||||||
<Palette {h} {a} />
|
<Palette on:change={setSaturationAndValue} {h} {s} {v} {a} />
|
||||||
|
|
||||||
<Slider type="hue" on:change={hue => (h = hue.detail)} />
|
<Slider type="hue" value={h} on:change={hue => (h = hue.detail)} />
|
||||||
|
|
||||||
<Slider type="alpha" on:change={alpha => (a = alpha.detail)} />
|
<Slider type="alpha" value={a} on:change={alpha => (a = alpha.detail)} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,30 +1,39 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount, createEventDispatcher } from "svelte";
|
||||||
export let h,
|
|
||||||
a = 0;
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
|
export let h = 0;
|
||||||
|
export let s = 0;
|
||||||
|
export let v = 0;
|
||||||
|
export let a = 1;
|
||||||
|
|
||||||
let palette;
|
let palette;
|
||||||
let dimensions;
|
|
||||||
|
|
||||||
onMount(() => {
|
let paletteHeight, paletteWidth = 0;
|
||||||
if (palette) {
|
|
||||||
dimensions = palette.getBoundingClientRect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleClick(event) {
|
function handleClick(event) {
|
||||||
const { left, top, width, height } = dimensions;
|
const { left, top } = palette.getBoundingClientRect();
|
||||||
let pickerX = (event.clientX - left) / width;
|
let clickX = (event.clientX - left)
|
||||||
let pickerY = (event.clientY - top) / height;
|
let clickY = (event.clientY - top)
|
||||||
//Saturation - adds white: pickerX * 100
|
if((clickX > 0 && clickY > 0) && (clickX < paletteWidth && clickY < paletteHeight)) {
|
||||||
//value - adds black: 100 - pickerY * 100
|
let s = (clickX / paletteWidth) * 100
|
||||||
console.log("X", pickerX, "Y", pickerY);
|
let v = 100 - ((clickY / paletteHeight) * 100)
|
||||||
|
dispatch("change", {s, v})
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: pickerX = (s * paletteWidth) / 100;
|
||||||
|
$: pickerY = paletteHeight * ((100 - v) / 100)
|
||||||
|
|
||||||
$: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
|
$: paletteGradient = `linear-gradient(to top, rgba(0, 0, 0, 1), transparent),
|
||||||
linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
|
linear-gradient(to left, hsla(${h}, 100%, 50%, ${a}), rgba(255, 255, 255, ${a}))
|
||||||
`;
|
`;
|
||||||
$: style = `background: ${paletteGradient};`;
|
$: style = `background: ${paletteGradient};`;
|
||||||
|
|
||||||
|
$: pickerStyle = `transform: translate(${pickerX - 8}px, ${pickerY - 8}px);`
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -32,18 +41,19 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 175px;
|
height: 175px;
|
||||||
|
cursor: crosshair;
|
||||||
}
|
}
|
||||||
|
|
||||||
.picker {
|
.picker {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 16px;
|
width: 10px;
|
||||||
height: 16px;
|
height: 10px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 2px solid white;
|
border: 2px solid white;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div bind:this={palette} on:click={handleClick} class="palette" {style}>
|
<div bind:this={palette} bind:clientHeight={paletteHeight} bind:clientWidth={paletteWidth} on:click={handleClick} class="palette" {style}>
|
||||||
<div class="picker" />
|
<div class="picker" style={pickerStyle} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,35 +2,30 @@
|
||||||
import { onMount, createEventDispatcher } from "svelte";
|
import { onMount, createEventDispatcher } from "svelte";
|
||||||
import dragable from "./drag.js";
|
import dragable from "./drag.js";
|
||||||
|
|
||||||
|
export let value = 1
|
||||||
export let type = "hue";
|
export let type = "hue";
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
let slider;
|
let slider;
|
||||||
let dimensions = {};
|
let sliderWidth = 0;
|
||||||
let thumbPosition = 0;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
if (slider) {
|
|
||||||
dimensions = slider.getBoundingClientRect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleClick(mouseX) {
|
function handleClick(mouseX) {
|
||||||
const { left, width } = dimensions;
|
const { left } = slider.getBoundingClientRect();
|
||||||
let clickPosition = mouseX - left;
|
let clickPosition = mouseX - left;
|
||||||
debugger;
|
|
||||||
if (clickPosition >= 0 && clickPosition <= width) {
|
if (clickPosition >= 0 && clickPosition <= sliderWidth) {
|
||||||
thumbPosition = clickPosition;
|
let percentageClick = clickPosition / sliderWidth;
|
||||||
let percentageClick = thumbPosition / width;
|
|
||||||
let value =
|
let value =
|
||||||
type === "hue"
|
type === "hue"
|
||||||
? Math.round(360 * percentageClick).toString()
|
? 360 * percentageClick.toString()
|
||||||
: percentageClick.toFixed(2);
|
: percentageClick.toString();
|
||||||
dispatch("change", value);
|
dispatch("change", value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: thumbPosition = type === "hue" ? sliderWidth * (value / 360) : sliderWidth * (value)
|
||||||
|
|
||||||
$: style = `transform: translateX(${thumbPosition - 6}px);`;
|
$: style = `transform: translateX(${thumbPosition - 6}px);`;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -75,6 +70,7 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
bind:this={slider}
|
bind:this={slider}
|
||||||
|
bind:clientWidth={sliderWidth}
|
||||||
on:click={event => handleClick(event.clientX)}
|
on:click={event => handleClick(event.clientX)}
|
||||||
class="color-format-slider"
|
class="color-format-slider"
|
||||||
class:hue={type === 'hue'}
|
class:hue={type === 'hue'}
|
||||||
|
|
|
@ -6,7 +6,6 @@ export default function(node) {
|
||||||
|
|
||||||
function handleMouseMove(event) {
|
function handleMouseMove(event) {
|
||||||
let mouseX = event.clientX;
|
let mouseX = event.clientX;
|
||||||
console.log(mouseX);
|
|
||||||
node.dispatchEvent(
|
node.dispatchEvent(
|
||||||
new CustomEvent('drag', {
|
new CustomEvent('drag', {
|
||||||
detail: mouseX
|
detail: mouseX
|
||||||
|
|
|
@ -12,19 +12,19 @@ export const isValidRgba = (rgba) => {
|
||||||
return isValidLengthRange && isValidColorRange && isValidAlphaRange;
|
return isValidLengthRange && isValidColorRange && isValidAlphaRange;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const determineColorType = (color) => {
|
|
||||||
let hsva = [];
|
|
||||||
if (color.startsWith('#')) {
|
|
||||||
let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
|
|
||||||
hsva = hexaToHSVA([ rHex, gHex, bHex ], aHex);
|
|
||||||
} else if (color.startsWith('rgb')) {
|
|
||||||
let rgba = getRgbaValues(color);
|
|
||||||
hsva = rgbaToHSVA(rgba);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export const getHSLA = (hsv, a) => {
|
export const getAndConvertHexa = (color) => {
|
||||||
const [ h, s, l ] = hsvToHSL(hsv);
|
let [ rHex, gHex, bHex, aHex ] = getHexaValues(color);
|
||||||
|
return hexaToHSVA([ rHex, gHex, bHex ], aHex);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getAndConvertRgba = color => {
|
||||||
|
let rgba = getRgbaValues(color);
|
||||||
|
return rgbaToHSVA(rgba);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getHSLA = ([hue, sat, val, a]) => {
|
||||||
|
const [ h, s, l ] = _hsvToHSL([hue, sat, val]);
|
||||||
return `hsla(${h}, ${s}, ${l}, ${a})`;
|
return `hsla(${h}, ${s}, ${l}, ${a})`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -36,20 +36,21 @@ export const hexaToHSVA = (hex, alpha = 'FF') => {
|
||||||
export const rgbaToHSVA = (rgba) => {
|
export const rgbaToHSVA = (rgba) => {
|
||||||
if (isValidRgba(rgba)) {
|
if (isValidRgba(rgba)) {
|
||||||
const [ r, g, b, a = '1' ] = rgba;
|
const [ r, g, b, a = '1' ] = rgba;
|
||||||
let hsv = rgbToHSV([ r, g, b ]);
|
let hsv = _rgbToHSV([ r, g, b ]);
|
||||||
return [ ...hsv, a ];
|
return [ ...hsv, a ];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export const hsvaToHexa = () => {
|
export const hsvaToHexa = (hsva) => {
|
||||||
const [ r, g, b, a ] = hsvaToRgba();
|
const [ r, g, b, a ] = hsvaToRgba(hsva);
|
||||||
const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
|
const hexa = [ r, g, b ].map((v) => v.toString(16)).concat((a * 255).toFixed(1).toString(16));
|
||||||
return hexa;
|
return `#${hexa.join()}`
|
||||||
};
|
};
|
||||||
|
|
||||||
export const hsvaToRgba = (h, s, v, a) => {
|
export const hsvaToRgba = ([h, s, v, a]) => {
|
||||||
let rgb = _hsvToRgb([ h, s, v ]);
|
let rgb = _hsvToRgb([ h, s, v ]);
|
||||||
return [ ...rgb, a ];
|
let rgba = [ ...rgb, a ];
|
||||||
|
return `rgba(${rgba.join(",")})`
|
||||||
};
|
};
|
||||||
|
|
||||||
//Credit : https://github.com/Qix-/color-convert
|
//Credit : https://github.com/Qix-/color-convert
|
||||||
|
|
Loading…
Reference in a new issue