radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rename selected colors global

main
Isaiah Odhner 2021-02-10 21:04:35 -05:00
parent e4d2a24eb6
commit 60e6dfc69f
11 changed files with 60 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.js
View File

@ -41,7 +41,7 @@ module.exports = {
"transparency": "writable",
"aliasing": "writable",
"monochrome": "writable",
"colors": "writable",
"selected_colors": "writable",
"palette": "writable",
"polychrome_palette": "writable",
"monochrome_palette": "writable",
@ -125,6 +125,6 @@ module.exports = {
"no-unused-vars": 0, // ditto
// To target specific variables to rename or otherwise adress:
// "no-restricted-globals": ["error", "event", "canvas", "ctx"]
"no-restricted-globals": ["error", "event", "canvas", "ctx", "colors"]
}
};

12
cypress/integration/tool-tests.spec.js
View File

@ -13,14 +13,14 @@ context('tool tests', () => {
it(`(fake test for setup)`, () => {
cy.visit('/')
cy.setResolution([800, 500]);
cy.window().should('have.property', 'colors'); // wait for app to be loaded
cy.window().should('have.property', 'selected_colors'); // wait for app to be loaded
before_first_real_test = false;
});
beforeEach(() => {
if (before_first_real_test) return;
cy.window().then({timeout: 60000}, async (win)=> {
win.colors.foreground = "#000";
win.colors.background = "#fff";
win.selected_colors.foreground = "#000";
win.selected_colors.background = "#fff";
win.brush_shape = win.default_brush_shape;
win.brush_size = win.default_brush_size
win.eraser_size = win.default_eraser_size;
@ -172,15 +172,15 @@ context('tool tests', () => {
win.$('body').trigger(new win.$.Event("keydown", {key: "NumpadPlus", keyCode: 107, which: 107}));
}
}
win.colors.background = "#f0f";
win.selected_colors.background = "#f0f";
const start = {x: 0.05 + o*0.05, y: 0.1 + 0.1*row};
const end = {x: start.x + 0.04, y: start.y + 0.04};
await simulateGesture(win, {shift: false, secondary: false, start, end});
if (secondary) {
// eslint-disable-next-line require-atomic-updates
win.colors.background = "#ff0";
win.selected_colors.background = "#ff0";
// eslint-disable-next-line require-atomic-updates
win.colors.foreground = "#f0f";
win.selected_colors.foreground = "#f0f";
const start = {x: 0.04 + o*0.05, y: 0.11 + 0.1*row};
const end = {x: start.x + 0.03, y: start.y + 0.02};
await simulateGesture(win, {shift: false, secondary: true, start, end});

20
src/$ColorBox.js
View File

@ -40,25 +40,25 @@ function update_$swatch($swatch, new_color) {
function $ColorBox(vertical){
const $cb = $(E("div")).addClass("color-box");
const $current_colors = $Swatch(colors.ternary).addClass("current-colors");
const $current_colors = $Swatch(selected_colors.ternary).addClass("current-colors");
const $palette = $(E("div")).addClass("palette");
$cb.append($current_colors, $palette);
const $foreground_color = $Swatch(colors.foreground).addClass("color-selection foreground-color");
const $background_color = $Swatch(colors.background).addClass("color-selection background-color");
const $foreground_color = $Swatch(selected_colors.foreground).addClass("color-selection foreground-color");
const $background_color = $Swatch(selected_colors.background).addClass("color-selection background-color");
$current_colors.append($background_color, $foreground_color);
$G.on("option-changed", () => {
update_$swatch($foreground_color, colors.foreground);
update_$swatch($background_color, colors.background);
update_$swatch($current_colors, colors.ternary);
update_$swatch($foreground_color, selected_colors.foreground);
update_$swatch($background_color, selected_colors.background);
update_$swatch($current_colors, selected_colors.ternary);
});
$current_colors.on("pointerdown", () => {
const new_bg = colors.foreground;
colors.foreground = colors.background;
colors.background = new_bg;
const new_bg = selected_colors.foreground;
selected_colors.foreground = selected_colors.background;
selected_colors.background = new_bg;
$G.triggerHandler("option-changed");
});
@ -86,7 +86,7 @@ function $ColorBox(vertical){
if (within_double_click_period && button === double_click_button) {
show_edit_colors_window($b, color_selection_slot);
} else {
colors[color_selection_slot] = $b.data("swatch");
selected_colors[color_selection_slot] = $b.data("swatch");
$G.trigger("option-changed");
}

10
src/OnCanvasSelection.js
View File

@ -5,15 +5,15 @@ class OnCanvasSelection extends OnCanvasObject {
this.$el.addClass("selection");
let last_tool_transparent_mode = tool_transparent_mode;
let last_background_color = colors.background;
let last_background_color = selected_colors.background;
this._on_option_changed = () => {
if (!this.source_canvas) {
return;
}
if (last_tool_transparent_mode !== tool_transparent_mode ||
last_background_color !== colors.background) {
last_background_color !== selected_colors.background) {
last_tool_transparent_mode = tool_transparent_mode;
last_background_color = colors.background;
last_background_color = selected_colors.background;
this.update_tool_transparent_mode();
}
};
@ -153,7 +153,7 @@ class OnCanvasSelection extends OnCanvasObject {
// this is mainly in order to support patterns as the background color
// NOTE: must come before cutout canvas is modified
const colored_cutout = make_canvas(cutout);
replace_colors_with_swatch(colored_cutout.ctx, colors.background, this.x, this.y);
replace_colors_with_swatch(colored_cutout.ctx, selected_colors.background, this.x, this.y);
// const colored_cutout_image_data = colored_cutout.ctx.getImageData(0, 0, this.width, this.height);
// }
for (let i = 0; i < cutoutImageData.data.length; i += 4) {
@ -198,7 +198,7 @@ class OnCanvasSelection extends OnCanvasObject {
update_tool_transparent_mode() {
const sourceImageData = this.source_canvas.ctx.getImageData(0, 0, this.width, this.height);
const cutoutImageData = this.canvas.ctx.createImageData(this.width, this.height);
const background_color_rgba = get_rgba_from_color(colors.background);
const background_color_rgba = get_rgba_from_color(selected_colors.background);
// NOTE: In b&w mode, mspaint treats the transparency color as white,
// regardless of the pattern selected, even if the selected background color is pure black.
// We allow any kind of image data while in our "b&w mode".

4
src/OnCanvasTextBox.js
View File

@ -65,8 +65,8 @@ class OnCanvasTextBox extends OnCanvasObject {
const font = text_tool_font;
const get_solid_color = (swatch)=> `rgba(${get_rgba_from_color(swatch).join(", ")}`;
font.color = get_solid_color(colors.foreground);
font.background = tool_transparent_mode ? "transparent" : get_solid_color(colors.background);
font.color = get_solid_color(selected_colors.foreground);
font.background = tool_transparent_mode ? "transparent" : get_solid_color(selected_colors.background);
this.$editor.add(this.canvas).css({
transform: `scale(${magnification})`,
transformOrigin: "left top",

12
src/app.js
View File

@ -198,7 +198,7 @@ let fill_color_k = "background"; // enum of "foreground", "background", "ternary
let selected_tool = default_tool;
let selected_tools = [selected_tool];
let return_to_tools = [selected_tool];
window.colors = { // declared like this for Cypress tests
window.selected_colors = { // declared like this for Cypress tests
foreground: "",
background: "",
ternary: "",
@ -729,7 +729,7 @@ storage.get({
main_canvas.height = Math.max(1, my_canvas_height);
main_ctx.disable_image_smoothing();
if(!transparency){
main_ctx.fillStyle = colors.background;
main_ctx.fillStyle = selected_colors.background;
main_ctx.fillRect(0, 0, main_canvas.width, main_canvas.height);
}
$canvas_area.trigger("resize");
@ -861,8 +861,8 @@ function update_fill_and_stroke_colors_and_lineWidth(selected_tool) {
const reverse_because_fill_only = selected_tool.$options && selected_tool.$options.fill && !selected_tool.$options.stroke;
main_ctx.fillStyle = fill_color =
main_ctx.strokeStyle = stroke_color =
colors[
(ctrl && colors.ternary && pointer_active) ? "ternary" :
selected_colors[
(ctrl && selected_colors.ternary && pointer_active) ? "ternary" :
((reverse ^ reverse_because_fill_only) ? "background" : "foreground")
];
@ -880,8 +880,8 @@ function update_fill_and_stroke_colors_and_lineWidth(selected_tool) {
stroke_color_k = "foreground";
}
}
main_ctx.fillStyle = fill_color = colors[fill_color_k];
main_ctx.strokeStyle = stroke_color = colors[stroke_color_k];
main_ctx.fillStyle = fill_color = selected_colors[fill_color_k];
main_ctx.strokeStyle = stroke_color = selected_colors[stroke_color_k];
}
}

10
src/edit-colors.js
View File

@ -57,7 +57,7 @@ function show_edit_colors_window($swatch_to_edit, color_selection_slot_to_edit)
const $palette = $swatch_to_edit.closest(".palette, .color-box");
const swatch_index = $palette.find(".swatch").toArray().indexOf($swatch_to_edit[0]);
const initial_color = colors[color_selection_slot_to_edit];
const initial_color = selected_colors[color_selection_slot_to_edit];
choose_color(initial_color, (color)=> {
// The palette may have changed or rerendered due to switching themes,
// toggling vertical color box mode, or monochrome document mode.
@ -126,14 +126,14 @@ function show_edit_colors_window($swatch_to_edit, color_selection_slot_to_edit)
palette = make_monochrome_palette(new_rgba, other_rgba);
}
$colorbox.rebuild_palette();
colors.foreground = palette[0];
colors.background = palette[14]; // first in second row
colors.ternary = "";
selected_colors.foreground = palette[0];
selected_colors.background = palette[14]; // first in second row
selected_colors.ternary = "";
$G.triggerHandler("option-changed");
} else {
palette[swatch_index] = color;
update_$swatch($swatch_to_edit, color);
colors[color_selection_slot_to_edit] = color;
selected_colors[color_selection_slot_to_edit] = color;
$G.triggerHandler("option-changed");
window.console && console.log(`Updated palette: ${palette.map(()=> `%c█`).join("")}`, ...palette.map((color)=> `color: ${color};`));
}

34
src/functions.js
View File

@ -391,7 +391,7 @@ function toggle_grid() {
}
function reset_colors(){
colors = {
selected_colors = {
foreground: "#000000",
background: "#ffffff",
ternary: "",
@ -420,7 +420,7 @@ function reset_canvas_and_history(){
main_canvas.width = Math.max(1, my_canvas_width);
main_canvas.height = Math.max(1, my_canvas_height);
main_ctx.disable_image_smoothing();
main_ctx.fillStyle = colors.background;
main_ctx.fillStyle = selected_colors.background;
main_ctx.fillRect(0, 0, main_canvas.width, main_canvas.height);
current_history_node.image_data = main_ctx.getImageData(0, 0, main_canvas.width, main_canvas.height);
@ -781,14 +781,14 @@ function load_format_and_palette_from_image_file(file, callback) {
if (colorTable.length >= 2) {
if (colorTable.length === 2) {
palette = make_monochrome_palette(...colorTable.map((color)=> [color.r, color.g, color.b, 255]));
colors.foreground = palette[0];
colors.background = palette[14]; // first in second row
selected_colors.foreground = palette[0];
selected_colors.background = palette[14]; // first in second row
monochrome = true;
} else {
palette = colorTable.map((color)=> `rgb(${color.r}, ${color.g}, ${color.b})`);
// who knows what colors we should select
colors.foreground = palette[0];
colors.background = palette[1];
selected_colors.foreground = palette[0];
selected_colors.background = palette[1];
monochrome = false;
}
if (monochrome) {
@ -1423,8 +1423,8 @@ function go_to_history_node(target_history_node, canceling) {
text_tool_font[k] = v;
}
colors.foreground = target_history_node.foreground_color;
colors.background = target_history_node.background_color;
selected_colors.foreground = target_history_node.foreground_color;
selected_colors.background = target_history_node.background_color;
tool_transparent_mode = target_history_node.tool_transparent_mode;
$G.trigger("option-changed");
@ -1510,9 +1510,9 @@ function undoable({name, icon, use_loose_canvas_changes, soft}, callback){
textbox_height: textbox && textbox.height,
text_tool_font: JSON.parse(JSON.stringify(text_tool_font)),
tool_transparent_mode,
foreground_color: colors.foreground,
background_color: colors.background,
ternary_color: colors.ternary,
foreground_color: selected_colors.foreground,
background_color: selected_colors.background,
ternary_color: selected_colors.ternary,
parent: current_history_node,
name,
icon,
@ -1930,7 +1930,7 @@ function clear(){
if(transparency){
main_ctx.clearRect(0, 0, main_canvas.width, main_canvas.height);
}else{
main_ctx.fillStyle = colors.background;
main_ctx.fillStyle = selected_colors.background;
main_ctx.fillRect(0, 0, main_canvas.width, main_canvas.height);
}
});
@ -2146,7 +2146,7 @@ function make_opaque() {
main_ctx.save();
main_ctx.globalCompositeOperation = "destination-atop";
main_ctx.fillStyle = colors.background;
main_ctx.fillStyle = selected_colors.background;
main_ctx.fillRect(0, 0, main_canvas.width, main_canvas.height);
// in case the selected background color is transparent/translucent
@ -2171,7 +2171,7 @@ function resize_canvas_without_saving_dimensions(unclamped_width, unclamped_heig
main_ctx.disable_image_smoothing();
if(!transparency){
main_ctx.fillStyle = colors.background;
main_ctx.fillStyle = selected_colors.background;
main_ctx.fillRect(0, 0, main_canvas.width, main_canvas.height);
}
@ -2305,9 +2305,9 @@ function image_attributes(){
}else{
palette = polychrome_palette;
}
colors.foreground = palette[0];
colors.background = palette[14]; // first in second row
colors.ternary = "";
selected_colors.foreground = palette[0];
selected_colors.background = palette[14]; // first in second row
selected_colors.ternary = "";
$colorbox.rebuild_palette();
$G.trigger("option-changed");
}

4
src/image-manipulation.js
View File

@ -660,7 +660,7 @@ function rotate(angle){
new_ctx.disable_image_smoothing();
if(!transparency){
new_ctx.fillStyle = colors.background;
new_ctx.fillStyle = selected_colors.background;
new_ctx.fillRect(0, 0, new_canvas.width, new_canvas.height);
}
@ -720,7 +720,7 @@ function stretch_and_skew(xscale, yscale, hsa, vsa){
new_ctx.disable_image_smoothing();
if(!transparency){
new_ctx.fillStyle = colors.background;
new_ctx.fillStyle = selected_colors.background;
new_ctx.fillRect(0, 0, new_canvas.width, new_canvas.height);
}

2
src/speech-recognition.js
View File

@ -1396,7 +1396,7 @@ window.interpret_command = (input_text, default_to_entering_text)=> {
add_interpretation({
match_text: color,
exec: ((color)=> ()=> {
colors.foreground = color;
selected_colors.foreground = color;
$G.trigger("option-changed");
})(color),
});

8
src/tools.js
View File

@ -285,7 +285,7 @@ window.tools = [{
}
}
ctx.fillStyle = colors.background;
ctx.fillStyle = selected_colors.background;
ctx.fillRect(rect_x, rect_y, rect_w, rect_h);
},
drawPreviewAboveGrid(ctx, x, y, grid_visible, scale, translate_x, translate_y) {
@ -315,7 +315,7 @@ window.tools = [{
ctx.restore();
if (previewing || !transparency) {
let color = colors.background;
let color = selected_colors.background;
if (transparency) {
const t = performance.now() / 2000;
// 5 distinct colors, 5 distinct gradients, 7 color stops, 6 gradients
@ -370,7 +370,7 @@ window.tools = [{
// Right click with the eraser to selectively replace
// the selected foreground color with the selected background color
const fg_rgba = get_rgba_from_color(colors.foreground);
const fg_rgba = get_rgba_from_color(selected_colors.foreground);
const test_image_data = ctx.getImageData(rect_x, rect_y, rect_w, rect_h);
const result_image_data = this.mask_canvas.ctx.getImageData(rect_x, rect_y, rect_w, rect_h);
@ -475,7 +475,7 @@ window.tools = [{
this.display_current_color();
},
pointerup() {
colors[fill_color_k] = this.current_color;
selected_colors[fill_color_k] = this.current_color;
$G.trigger("option-changed");
},
$options: $(E("div"))