Skip to content

Add menu item to load a file as your image / drawing #2

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.

Sign up for GitHub

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

Open
robertecurtin wants to merge 4 commits into
base: master
Choose a base branch
from
+47 −15
Open

Add menu item to load a file as your image / drawing #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4a0a42c
First pass at adding a target image menu option
robertecurtin Feb 25, 2026
6b77f26
now with negative logic!
robertecurtin Feb 25, 2026
d9b4152
Tidying some things and adding documentation
robertecurtin Mar 2, 2026
221f52b
Typos
robertecurtin Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions help/archipelago.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@
appear the same neutral gray as the area around the canvases.</li>
<li>The <b>Pick Color</b> tool, once unlocked, can be used on the target image as well as on the main canvas.
</li>
<li>Your progress is automatically saved within your browser, but you can also use
<b>File->Save</b> or <b>Ctrl+S</b> to save your image. You can then load the saved image
using <b>File->Load Saved Drawing</b> or <b>Ctrl+Alt+O</b>.
</li>
</ul>
</body>

Expand Down
46 changes: 32 additions & 14 deletions src/functions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -961,9 +961,9 @@ async function load_image_from_uri(uri) {
* @param {() => void} [callback]
* @param {() => void} [canceled]
* @param {boolean} [into_existing_session]
* @param {boolean} [from_session_load]
* @param {boolean} [load_into_goal_image]
*/
function open_from_image_info(info, callback, canceled, into_existing_session, from_session_load) {
function open_from_image_info(info, callback, canceled, into_existing_session, load_into_goal_image) {
/*are_you_sure(({ canvas_modified_while_loading } = {}) => {
deselect();
cancel();
Expand All @@ -978,18 +978,18 @@ function open_from_image_info(info, callback, canceled, into_existing_session, f
reset_canvas_and_history(); // (with newly reset colors)
set_magnification(default_magnification);*/

if (from_session_load) {
if (load_into_goal_image) {
createImageBitmap(info.image || info.image_data).then(function (e) {
main_ctx.drawImage(e, 0, 0, e.width, e.height)
current_history_node.name = localize("Open");
current_history_node.image_data = main_ctx.getImageData(0, 0, main_canvas.width, main_canvas.height);
current_history_node.icon = get_help_folder_icon("p_open.png");
goal_ctx.drawImage(e, 0, 0, goal_canvas.width, goal_canvas.height);
$G.triggerHandler("save-goal");
});
}
else {
createImageBitmap(info.image || info.image_data).then(function (e) {
goal_ctx.drawImage(e, 0, 0, goal_canvas.width, goal_canvas.height);
$G.triggerHandler("save-goal");
main_ctx.drawImage(e, 0, 0, e.width, e.height)
current_history_node.name = localize("Open");
current_history_node.image_data = main_ctx.getImageData(0, 0, main_canvas.width, main_canvas.height);
current_history_node.icon = get_help_folder_icon("p_open.png");
});
}
/*apply_file_format_and_palette_info(info);
Expand Down Expand Up @@ -1031,7 +1031,7 @@ function open_from_image_info(info, callback, canceled, into_existing_session, f
* @param {Blob} file
* @param {UserFileHandle} source_file_handle
*/
function open_from_file(file, source_file_handle) {
function open_from_file(file, source_file_handle, targetImage) {
// The browser isn't very smart about MIME types.
// It seems to look at the file extension, but not the actual file contents.
// This is particularly problematic for files with no extension, where file.type gives an empty string.
Expand Down Expand Up @@ -1063,7 +1063,7 @@ function open_from_file(file, source_file_handle) {
return;
}
image_info.source_file_handle = source_file_handle;
open_from_image_info(image_info);
open_from_image_info(image_info, targetImage = targetImage);
});
}

Expand Down Expand Up @@ -1119,9 +1119,27 @@ function file_new() {
set_magnification(default_magnification);
}

async function file_open() {
async function file_open(targetImage = true) {
const { file, fileHandle } = await systemHooks.showOpenFileDialog({ formats: image_formats });
open_from_file(file, fileHandle);
open_from_file(file, fileHandle, targetImage);
}

async function load_saved_drawing() {
const { $window, promise } = showMessageBox({
messageHTML: `
<p>WARNING</p>
<p>This will overwrite your current drawing progress with a saved image.</p>
<p>Are you sure you want to load a saved image as your drawing?</p>
`,
buttons: [
{ label: localize("Yes"), value: "yes", default: true },
{ label: localize("Cancel"), value: "cancel" },
],
});
const result = await promise;
if (result === "yes") {
await file_open(false)
}
}

/** @type {OSGUI$Window} */
Expand Down Expand Up @@ -4305,7 +4323,7 @@ export {
$this_version_news,
apply_file_format_and_palette_info, are_you_sure, calculate_similarity, cancel, change_some_url_params, change_url_param, choose_file_to_paste, cleanup_bitmap_view, clear, confirm_overwrite_capability, delete_selection, deselect, detect_monochrome,
edit_copy, edit_cut, edit_paste, exit_fullscreen_if_ios, file_load_from_url, file_new, file_open, file_print, file_save,
file_save_as, getSelectionText, get_all_url_params, get_history_ancestors, get_tool_by_id, get_uris, get_url_param, go_to_history_node, handle_keyshortcuts, has_any_transparency, image_attributes, image_flip_and_rotate, image_invert_colors, image_stretch_and_skew, load_image_from_uri, load_theme_from_text, make_history_node, make_monochrome_palette, make_monochrome_pattern, make_opaque, make_or_update_undoable, make_stripe_pattern, meld_selection_into_canvas,
file_save_as, getSelectionText, get_all_url_params, get_history_ancestors, get_tool_by_id, get_uris, get_url_param, go_to_history_node, handle_keyshortcuts, has_any_transparency, image_attributes, image_flip_and_rotate, image_invert_colors, image_stretch_and_skew, load_image_from_uri, load_saved_drawing, load_theme_from_text, make_history_node, make_monochrome_palette, make_monochrome_pattern, make_opaque, make_or_update_undoable, make_stripe_pattern, meld_selection_into_canvas,
meld_textbox_into_canvas, open_from_file, open_from_image_info, paste, paste_image_from_file, please_enter_a_number, read_image_file, redo, render_canvas_view, render_history_as_gif, reset_canvas_and_history, reset_file, reset_selected_colors, resize_canvas_and_save_dimensions, resize_canvas_without_saving_dimensions, sanity_check_blob, save_as_prompt, save_selection_to_file, select_all, select_tool, select_tools, set_all_url_params, set_magnification, show_about_paint, show_convert_to_black_and_white, show_custom_zoom_window, show_document_history, show_error_message, show_file_format_errors, show_multi_user_setup_dialog, show_news, show_resource_load_error_message, switch_to_polychrome_palette, toggle_grid,
toggle_thumbnail, try_exec_command, undo, undoable, update_canvas_rect, update_css_classes_for_conditional_messages, update_disable_aa, update_from_saved_file, update_helper_layer,
update_helper_layer_immediately, update_magnified_canvas_size, update_title, view_bitmap, write_image_file
Expand Down
12 changes: 11 additions & 1 deletion src/menus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
/* global $canvas_area, $colorbox, $status_area, $toolbox, available_languages, get_iso_language_name, get_language, get_language_emoji, get_language_endonym, localize, magnification, main_canvas, menu_bar, MENU_DIVIDER, redos, selection, set_language, show_grid, show_thumbnail, systemHooks, undos */
// import { available_languages, get_iso_language_name, get_language, get_language_emoji, get_language_endonym, localize, set_language } from "./app-localization.js";
import { received, show_text_client } from "./archipelago.js";
import { are_you_sure, change_url_param, clear, delete_selection, deselect, edit_copy, edit_cut, file_new, file_open, file_print, file_save, file_save_as, image_attributes, image_flip_and_rotate, image_invert_colors, redo, render_history_as_gif, sanity_check_blob, save_selection_to_file, select_all, set_magnification, show_about_paint, show_custom_zoom_window, show_document_history, toggle_grid, toggle_thumbnail, undo, update_magnified_canvas_size, view_bitmap } from "./functions.js";
import { are_you_sure, change_url_param, clear, delete_selection, deselect, edit_copy, edit_cut, file_new, file_open, file_print, file_save, file_save_as, image_attributes, image_flip_and_rotate, image_invert_colors, load_saved_drawing, redo, render_history_as_gif, sanity_check_blob, save_selection_to_file, select_all, set_magnification, show_about_paint, show_custom_zoom_window, show_document_history, toggle_grid, toggle_thumbnail, undo, update_magnified_canvas_size, view_bitmap } from "./functions.js";
import { show_help } from "./help.js";
import { is_discord_embed } from "./helpers.js";
import { show_imgur_uploader } from "./imgur.js";
Expand Down Expand Up @@ -39,6 +39,16 @@ const menus = {
action: () => { file_open(); },
description: localize("Opens an existing document."),
},
{
label: localize("&Load Saved Drawing"),
...shortcut("Ctrl+Alt+O"),
speech_recognition: [
"load saved drawing",
],
enabled: true,
action: () => { load_saved_drawing(); },
description: localize("Writes the provided file as your drawing."),
},
{
label: localize("&Save"),
...shortcut("Ctrl+S"),
Expand Down