evert/icydraw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

color picker

Browse Source
This commit is contained in:
Evert Prants 2022-04-03 17:50:04 +03:00
parent 82c45fd58b
commit 2f555f881b
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
3 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/canvas.ts
View File

@ -359,6 +359,7 @@ export class ViewCanvas {
this._getPlacerFn(x, y).then((placer) => { this._getPlacerFn(x, y).then((placer) => {
if (placer && this._placerRequestTime === order) { if (placer && this._placerRequestTime === order) {
this._showPlacerTag(placer); this._showPlacerTag(placer);
this.picker.setPickColor(placer.color);
} }
}); });
} }
@ -386,6 +387,7 @@ export class ViewCanvas {
private _resetPlacerTag(): void { private _resetPlacerTag(): void {
this._placerRequestTime = 0; this._placerRequestTime = 0;
this.picker.setPickColor(null);
if (this._placerTag) { if (this._placerTag) {
this._cursor.removeChild(this._placerTag); this._cursor.removeChild(this._placerTag);
this._placerTag = null; this._placerTag = null;

26
src/client/picker.ts
View File

@ -5,6 +5,7 @@ import { $ } from './utils/dom';
export class Picker { export class Picker {
private _fn?: (color: number) => void; private _fn?: (color: number) => void;
private _color: number = 0x000000; private _color: number = 0x000000;
private _pickerColor: number | null = null;
private _colorHistory: number[] = []; private _colorHistory: number[] = [];
private _wrapper = $('<div class="controls__wrapper">'); private _wrapper = $('<div class="controls__wrapper">');
@ -16,6 +17,7 @@ export class Picker {
private _placebtn = $('<button class="btn btn-primary btn-place">'); private _placebtn = $('<button class="btn btn-primary btn-place">');
private _palettebtn = $('<button class="btn btn-palette">'); private _palettebtn = $('<button class="btn btn-palette">');
private _clearbtn = $('<button class="btn btn-palette">'); private _clearbtn = $('<button class="btn btn-palette">');
private _pickbtn = $('<button class="btn btn-palette">');
get element() { get element() {
return this._wrapper; return this._wrapper;
@ -38,14 +40,17 @@ export class Picker {
this._placebtn.innerText = 'Log in to place'; this._placebtn.innerText = 'Log in to place';
this._palettebtn.innerText = '>>'; this._palettebtn.innerText = '>>';
this._clearbtn.innerText = 'Clear'; this._clearbtn.innerText = 'Clear';
this._pickbtn.innerText = 'Pick';
this._wrapper.append(this._content); this._wrapper.append(this._content);
this._content.append(this._colorsEl); this._content.append(this._colorsEl);
this._colorsEl.append(this._colorInput); this._colorsEl.append(this._colorInput);
this._colorsEl.append(this._palettebtn); this._colorsEl.append(this._palettebtn);
this._colorsEl.append(this._colorHistoryEl); this._colorsEl.append(this._colorHistoryEl);
this._colorsEl.append(this._clearbtn); this._colorsEl.append(this._clearbtn);
this._colorsEl.append(this._pickbtn);
this._content.append(this._placebtn); this._content.append(this._placebtn);
this._pickbtn.setAttribute('disabled', 'true');
this._placebtn.setAttribute('disabled', 'true'); this._placebtn.setAttribute('disabled', 'true');
this._placebtn.addEventListener('click', (ev) => { this._placebtn.addEventListener('click', (ev) => {
ev.preventDefault(); ev.preventDefault();
@ -66,6 +71,13 @@ export class Picker {
this._preserveHistory(); this._preserveHistory();
}); });
this._pickbtn.addEventListener('click', () => {
if (this._pickerColor) {
this._setColor(this._pickerColor);
this._storeColor(this._pickerColor);
}
});
this._colorHistory = this._getHistory(); this._colorHistory = this._getHistory();
if (this._colorHistory.length) { if (this._colorHistory.length) {
this._setColor(this._colorHistory[0]); this._setColor(this._colorHistory[0]);
@ -86,6 +98,20 @@ export class Picker {
this._fn = fn; this._fn = fn;
} }
public setPickColor(pickColor: number | null) {
if (pickColor !== null) {
this._pickbtn.removeAttribute('disabled');
this._pickbtn.classList.add('pickable');
this._pickbtn.style.setProperty('--pick-color', hexToString(pickColor));
} else if (this._pickerColor !== null && pickColor === null) {
console.log('aa');
this._pickbtn.setAttribute('disabled', 'true');
this._pickbtn.classList.remove('pickable');
this._pickbtn.style.removeProperty('--pick-color');
}
this._pickerColor = pickColor;
}
private _setColor(color: number): void { private _setColor(color: number): void {
this._color = color; this._color = color;
this._colorInput.value = hexToString(color); this._colorInput.value = hexToString(color);

12
src/client/scss/index.scss
View File

@ -165,4 +165,16 @@ body {
font-size: 1.4rem; font-size: 1.4rem;
padding: 0.5rem 1.25rem; padding: 0.5rem 1.25rem;
} }
.btn-palette.pickable {
&::after {
content: '';
width: 10px;
height: 10px;
margin-left: 4px;
margin-bottom: -1px;
display: inline-block;
background-color: var(--pick-color);
}
}
} }