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

Improve reference screenshot comparison setup

main
Isaiah Odhner 2021-11-26 00:54:09 -05:00
parent 9b4bcc7209
commit 757ca454bd
5 changed files with 69 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@ -401,6 +401,7 @@
"undecagons",
"undoable",
"undoables",
"undock",
"undocked",
"undos",
"unfocusing",

BIN
images/mspaint-win98-reference-tool-windows.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

54
src/$Component.js
View File

@ -152,6 +152,29 @@ function $Component(title, className, orientation, $el){
$last_docked_to = $dock_to;
last_docked_to_pos = pos;
};
const undock_to = (x, y) => {
const component_area_el = $c.closest(".component-area")[0];
// must get layout state *before* changing it
const segments = get_segments(component_area_el, pos_axis, $c[0]);
$c.css("position", "relative");
$c.css(`margin-${pos_axis}`, "");
// Put the component in the window
$w.$content.append($c);
// Show and position the window
$w.show();
$w.css({
left: x,
top: y,
});
const total_available_length = pos_axis === "top" ? $(component_area_el).height() : $(component_area_el).width();
// console.log("before adjustment", JSON.stringify(segments, (_key,val)=> (val instanceof Element) ? val.className : val));
adjust_segments(segments, total_available_length);
// console.log("after adjustment", JSON.stringify(segments, (_key,val)=> (val instanceof Element) ? val.className : val));
apply_segments(component_area_el, pos_axis, segments);
};
$w.on("window-drag-start", (e)=> {
e.preventDefault();
@ -337,28 +360,8 @@ function $Component(title, className, orientation, $el){
if($dock_to){
// Dock component to $dock_to
dock_to($dock_to);
}else{
const component_area_el = $c.closest(".component-area")[0];
// must get layout state *before* changing it
const segments = get_segments(component_area_el, pos_axis, $c[0]);
$c.css("position", "relative");
$c.css(`margin-${pos_axis}`, "");
// Put the component in the window
$w.$content.append($c);
// Show and position the window
$w.show();
$w.css({
left: e.clientX + ox2,
top: e.clientY + oy2,
});
const total_available_length = pos_axis === "top" ? $(component_area_el).height() : $(component_area_el).width();
// console.log("before adjustment", JSON.stringify(segments, (_key,val)=> (val instanceof Element) ? val.className : val));
adjust_segments(segments, total_available_length);
// console.log("after adjustment", JSON.stringify(segments, (_key,val)=> (val instanceof Element) ? val.className : val));
apply_segments(component_area_el, pos_axis, segments);
} else {
undock_to(e.clientX + ox2, e.clientY + oy2);
}
$ghost && $ghost.remove();
@ -367,10 +370,11 @@ function $Component(title, className, orientation, $el){
$G.trigger("resize");
};
$c.dock = () => {
pos = last_docked_to_pos;
dock_to($last_docked_to);
$c.dock = ($dock_to) => {
pos = last_docked_to_pos ?? 0;
dock_to($dock_to ?? $last_docked_to);
};
$c.undock_to = undock_to;
$c.show = () => {
$($c[0]).show(); // avoid recursion

33
src/app.js
View File

@ -518,6 +518,39 @@ const update_from_url_params = ()=> {
}
$("body").toggleClass("compare-reference", !!location.hash.match(/compare-reference/i));
$("body").toggleClass("compare-reference-tool-windows", !!location.hash.match(/compare-reference-tool-windows/i));
setTimeout(() => {
if (location.hash.match(/compare-reference/i)) { // including compare-reference-tool-windows
select_tool(get_tool_by_id(TOOL_SELECT));
const test_canvas_width = 576;
const test_canvas_height = 432;
if (main_canvas.width !== test_canvas_width || main_canvas.height !== test_canvas_height) {
// Unfortunately, right now this can cause a reverse "Save changes?" dialog,
// where Discard will restore your drawing, Cancel will discard it, and Save will save a blank canvas,
// because the load from storage happens after this resize.
// But this is just a helper for development, so it's not a big deal.
// are_you_sure here doesn't help, either.
// are_you_sure(() => {
resize_canvas_without_saving_dimensions(test_canvas_width, test_canvas_height);
// });
}
if (!location.hash.match(/compare-reference-tool-windows/i)) {
$toolbox.dock($left);
$colorbox.dock($bottom);
window.debugKeepMenusOpen = false;
}
}
if (location.hash.match(/compare-reference-tool-windows/i)) {
$toolbox.undock_to(84, 35);
$colorbox.undock_to(239, 195);
window.debugKeepMenusOpen = true;
// $(".help-menu-button").click(); // have to trigger pointerdown/up, it doesn't respond to click
// $(".help-menu-button").trigger("pointerdown").trigger("pointerup"); // and it doesn't use jQuery
$(".help-menu-button")[0].dispatchEvent(new Event("pointerdown"));
$(".help-menu-button")[0].dispatchEvent(new Event("pointerup"));
$('[aria-label="About Paint"]')[0].dispatchEvent(new Event("pointerenter"));
}
}, 500);
};
update_from_url_params();
$G.on("hashchange popstate change-url-params", update_from_url_params);

8
styles/themes/classic.css
View File

@ -13,11 +13,14 @@
top: -23px;
left: -4px;
z-index: 10000;
opacity: 0.5;
opacity: 1;
transition: opacity 0.5s;
}
.compare-reference-tool-windows::after {
content: url("../../images/mspaint-win98-reference-tool-windows.png");
}
.compare-reference:hover::after {
opacity: 1;
opacity: 0.5;
}
.compare-reference:active::after {
opacity: 0;
@ -25,6 +28,7 @@
.compare-reference {
width: calc(567px - 4px - 4px);
height: calc(402px - 23px - 4px);
background: var(--Background);
}
.jspaint {