@@ -156,20 +168,22 @@ const dialogTemplate = `
*/
class GUI_colors_class {
- constructor(uiType) {
+ constructor() {
this.el = null;
this.COLOR = '#000000';
this.ALPHA = 255;
- this.uiType = uiType || 'sidebar';
+ this.colorNotSet = true;
+ this.uiType = null;
this.butons = null;
this.sections = null;
this.inputs = null;
this.Helper = new Helper_class();
}
- render_main_colors() {
+ render_main_colors(uiType) {
+ this.uiType = uiType || 'sidebar';
if (this.uiType === 'dialog') {
- this.el = document.getElementById('color_picker_dialog_container');
+ this.el = document.getElementById('dialog_color_picker');
this.el.innerHTML = dialogTemplate;
} else {
var saved_color = this.Helper.getCookie('color');
@@ -178,7 +192,7 @@ class GUI_colors_class {
this.el.innerHTML = sidebarTemplate;
}
this.init_components();
- this.render_range_gradients = Helper.throttle(this.render_range_gradients, 50);
+ this.render_ui_deferred = Helper.throttle(this.render_ui_deferred, 50);
}
init_components() {
@@ -309,7 +323,7 @@ class GUI_colors_class {
});
});
if (this.uiType === 'dialog') {
- this.inputs.swatches.uiSwatches('set_all_hex', $('#color_swatches').uiSwatches('get_all_hex'));
+ this.inputs.swatches.uiSwatches('set_all_hex', config.swatches.default);
}
// Initialize color picker gradient
@@ -326,7 +340,8 @@ class GUI_colors_class {
// Initialize hex entry
this.inputs.hex
- .on('input', () => {
+ .on('input', (event) => {
+ console.log(event);
const value = this.inputs.hex.val();
const trimmedValue = value.trim();
if (value !== trimmedValue) {
@@ -424,6 +439,10 @@ class GUI_colors_class {
if (this.uiType === 'dialog') {
this.COLOR = newColor != null ? newColor : this.COLOR;
this.ALPHA = newAlpha != null ? newAlpha : this.ALPHA;
+ if (this.colorNotSet) {
+ this.colorNotSet = false;
+ $('#dialog_previous_color_sample', this.el)[0].style.background = this.COLOR;
+ }
} else {
config.COLOR = newColor != null ? newColor : config.COLOR;
config.ALPHA = newAlpha != null ? newAlpha : config.ALPHA;
@@ -481,7 +500,7 @@ class GUI_colors_class {
this.inputs.hsl[hslKey].number.uiNumberInput('set_value', hslValue);
}
- this.render_range_gradients({ hsl, hsv });
+ this.render_ui_deferred({ hsl, hsv });
}
/**
@@ -491,7 +510,7 @@ class GUI_colors_class {
* hsl - override for hsl values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
* hsv - override for hsv values so it isn't calculated based on rgb (can lose selected hue/saturation otherwise)
*/
- render_range_gradients(options) {
+ render_ui_deferred(options) {
options = options || {};
const COLOR = this.uiType === 'dialog' ? this.COLOR : config.COLOR;
@@ -548,6 +567,11 @@ class GUI_colors_class {
this.inputs.hsl.l.range.uiRange('set_background',
`linear-gradient(to right, #000000 0%, ${ Helper.hslToHex(rangeMid.h, rangeMid.s, rangeMid.l) } 50%, #ffffff 100%)`
);
+
+ // Store swatch values
+ if (this.uiType === 'sidebar') {
+ config.swatches.default = this.inputs.swatches.uiSwatches('get_all_hex');
+ }
}
}
diff --git a/src/js/core/gui/gui-details.js b/src/js/core/gui/gui-details.js
index 0783694..94632ee 100644
--- a/src/js/core/gui/gui-details.js
+++ b/src/js/core/gui/gui-details.js
@@ -293,14 +293,21 @@ class GUI_details_class {
render_color(events) {
var layer = config.layer;
+ let $colorInput;
+ if (events) {
+ $colorInput = $(document.getElementById('detail_color')).uiColorInput();
+ } else {
+ $colorInput = $(document.getElementById('detail_color'));
+ }
+
if (layer != undefined) {
- document.getElementById('detail_color').value = layer.color;
+ $colorInput.uiColorInput('set_value', layer.color);
}
if (events) {
//events
- document.getElementById('detail_color').addEventListener('change', function (e) {
- var value = this.value;
+ $colorInput.on('change', function (e) {
+ const value = $colorInput.uiColorInput('get_value');
config.layer.color = value;
config.need_render = true;
config.need_render_changed_params = true;
diff --git a/src/js/tools/pick_color.js b/src/js/tools/pick_color.js
index fbc29bc..72a372b 100644
--- a/src/js/tools/pick_color.js
+++ b/src/js/tools/pick_color.js
@@ -40,7 +40,10 @@ class Pick_color_class extends Base_tools_class {
_this.dragMove(event);
});
document.addEventListener('mouseup', function (event) {
- _this.copy_color_to_ckipboard();
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.copy_color_to_clipboard();
});
// collect touch events
@@ -99,7 +102,7 @@ class Pick_color_class extends Base_tools_class {
this.Base_gui.GUI_colors.set_color(newColorDefinition);
}
- copy_color_to_ckipboard() {
+ copy_color_to_clipboard() {
navigator.clipboard.writeText(config.COLOR);
}