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

Vectorize magnification options

main
Isaiah Odhner 2021-12-02 00:18:40 -05:00
parent c10a48e6b6
commit 92baef4b72
2 changed files with 139 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
images/options-magnification.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

16
src/tool-options.js
View File

@ -68,7 +68,7 @@ const ChooserDiv = (
const svg_url = url;
const on_zoom_etc = () => {
const use_svg = (window.devicePixelRatio >= 3 || (window.devicePixelRatio % 1) !== 0) &&
(get_theme() === "classic.css" || get_theme() === "dark.css");
(get_theme() === "classic.css" || get_theme() === "dark.css" || (get_theme() === "winter.css" && url.match(/magnification/)));
div.style.backgroundImage = `url(${use_svg ? svg_url : png_url})`;
};
if (div._on_zoom_etc) { // condition is needed, otherwise it will remove all listeners! (leading to only the last graphic being updated when zooming)
@ -302,21 +302,21 @@ const $choose_stroke_size = $Choose(
const magnifications = [1, 2, 6, 8, 10];
const $choose_magnification = $Choose(
magnifications,
(scale, is_chosen, reuse_canvas) => {
(scale, is_chosen, reuse_canvas, reuse_div) => {
const i = magnifications.indexOf(scale);
const secret = scale === 10; // 10x is secret
const chooser_canvas = ChooserCanvas(
"images/options-magnification.png",
const chooser_el = ChooserDiv(
"images/options-magnification.svg",
is_chosen, // invert if chosen
39, (secret ? 2 : 13), // width, height of destination canvas
i*23, 0, 23, 9, // x, y, width, height from source image
8, 2, 23, 9, // x, y, width, height on destination
reuse_canvas,
reuse_div,
);
if(secret){
$(chooser_canvas).addClass("secret-option");
$(chooser_el).addClass("secret-option");
}
return chooser_canvas;
return chooser_el;
},
scale => {
set_magnification(scale);
@ -330,7 +330,7 @@ $choose_magnification.on("update", () => {
$choose_magnification
.find(".secret-option")
.parent()
.css({position: "absolute", bottom: "-2px", left: 0, opacity: 0});
.css({position: "absolute", bottom: "-2px", left: 0, opacity: 0, height: 2, overflow: "hidden" });
});
const airbrush_sizes = [9, 16, 24];