commodore
/
sandboxels
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

there be stuf? yes be stuf

This commit is contained in:
Mnem42 2026-02-03 17:39:30 +00:00
parent 1a861f81ce
commit db80f18d38
1 changed files with 123 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
mods/zoom.js
View File

@ -8,17 +8,17 @@
input_container = null; input_container = null;
push_btn = null; push_btn = null;
pop_btn = null; pop_btn = null;
constructor(name, storage_name, default_values = [], desc = "", step = 1, custom_validator = () => true, disabled = false) { constructor(name, storage_name, desc, options) {
super( super(
name, name,
storage_name, storage_name,
[5, 0], [5, 0],
disabled, options.disabled,
default_values ?? [], options.default_values,
desc, desc,
custom_validator options.custom_validator
); );
this.step = step; this.step = options.step ?? 1;
} }
#new_input(value, i) { #new_input(value, i) {
const elem = document.createElement("input"); const elem = document.createElement("input");
@ -182,10 +182,13 @@
canvas_bkg; canvas_bkg;
zoom; zoom;
unl_zoom; unl_zoom;
show_floater;
fpan_speed; fpan_speed;
cpan_speed; cpan_speed;
upan_speed; upan_speed;
use_ijkl;
show_floater;
pan_zeroing_en;
zoom_zeroing_en;
constructor(on_edit) { constructor(on_edit) {
const { Numlist: Numlist2, MultiSetting, SettingGroup } = def_classes(); const { Numlist: Numlist2, MultiSetting, SettingGroup } = def_classes();
const settings_tab = new SettingsTab("zoom.js"); const settings_tab = new SettingsTab("zoom.js");
@ -238,13 +241,42 @@
"Whether to show the floater or not", "Whether to show the floater or not",
validator validator
); );
this.use_ijkl = new Setting(
"Use IJKL",
"use_ijkl",
settingType.BOOLEAN,
false,
false,
"Makes the mod use IJKL instead of WASD for panning (requires refresh)",
validator
);
this.pan_zeroing_en = new Setting(
"Enable pan zeroing",
"en_pzero",
settingType.BOOLEAN,
false,
true,
"Allows the Q key to reset pan (requires refresh)",
validator
);
this.zoom_zeroing_en = new Setting(
"Enable zoom zeroing",
"en_zzero",
settingType.BOOLEAN,
false,
true,
"Allows the P key to reset zoom. Doesn't work with set zoom levels (requires refresh)",
validator
);
const zoom_levels = new Numlist2( const zoom_levels = new Numlist2(
"Zoom levels", "Zoom levels",
"zoom_levels", "zoom_levels",
[0.5, 1, 2, 3, 6, 12],
"Zoom levels", "Zoom levels",
1, {
validator default_values: [0.5, 1, 2, 3, 6, 12],
step: 0.1,
custom_validator: validator
}
); );
this.unl_zoom = new SettingGroup({ this.unl_zoom = new SettingGroup({
speed: new Setting( speed: new Setting(
@ -284,8 +316,17 @@
); );
settings_tab.registerSettings( settings_tab.registerSettings(
void 0, void 0,
this.canvas_bkg, this.canvas_bkg
);
settings_tab.registerSettings(
"Controls",
this.use_ijkl,
this.show_floater, this.show_floater,
this.pan_zeroing_en,
this.zoom_zeroing_en
);
settings_tab.registerSettings(
"Zoom",
this.zoom this.zoom
); );
settings_tab.registerSettings( settings_tab.registerSettings(
@ -328,7 +369,7 @@
runAfterReset(() => { runAfterReset(() => {
this.zoom_level = 1; this.zoom_level = 1;
this.zoom_panning = [0, 0]; this.zoom_panning = [0, 0];
this.rescale(); this.update();
}); });
} }
handle_zoom(direction) { handle_zoom(direction) {
@ -364,7 +405,7 @@
} }
this.zoom_level = Number(this.zoom_level.toPrecision(3)); this.zoom_level = Number(this.zoom_level.toPrecision(3));
} }
this.rescale(); this.update();
} }
handle_pan(direction, speed) { handle_pan(direction, speed) {
switch (direction) { switch (direction) {
@ -381,12 +422,12 @@
this.zoom_panning[1] -= speed; this.zoom_panning[1] -= speed;
break; break;
} }
this.rescale(); this.update();
} }
scale() { scale() {
return this.settings.zoom.value == 0 ? this.settings.zoom.settings[0].value[this.zoom_level] : this.zoom_level; return this.settings.zoom.value == 0 ? this.settings.zoom.settings[0].value[this.zoom_level] : this.zoom_level;
} }
rescale() { update() {
this.log_info(); this.log_info();
const x = this.zoom_panning[0] * (pixelSize * this.scale()); const x = this.zoom_panning[0] * (pixelSize * this.scale());
const y = this.zoom_panning[1] * (pixelSize * this.scale()); const y = this.zoom_panning[1] * (pixelSize * this.scale());
@ -400,19 +441,36 @@
`; `;
this.patcher.zoom_data_div.innerText += `Pan : ${x_pan}, ${y_pan}`; this.patcher.zoom_data_div.innerText += `Pan : ${x_pan}, ${y_pan}`;
} }
kbd_speed_noshift(ev) {
return ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value;
}
patch_keybinds() { patch_keybinds() {
const pan_keys = this.settings.use_ijkl.value ? ["i", "j", "k", "l"] : ["w", "a", "s", "d"];
const pan_keys_upper = this.settings.use_ijkl.value ? ["I", "J", "K", "L"] : ["W", "A", "S", "D"];
keybinds["9"] = () => this.handle_zoom("in"); keybinds["9"] = () => this.handle_zoom("in");
keybinds["0"] = () => this.handle_zoom("out"); keybinds["0"] = () => this.handle_zoom("out");
keybinds["w"] = (ev) => this.handle_pan("up", ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value); keybinds[pan_keys[0]] = (ev) => this.handle_pan("up", this.kbd_speed_noshift(ev));
keybinds["a"] = (ev) => this.handle_pan("left", ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value); keybinds[pan_keys[1]] = (ev) => this.handle_pan("left", this.kbd_speed_noshift(ev));
keybinds["s"] = (ev) => this.handle_pan("down", ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value); keybinds[pan_keys[2]] = (ev) => this.handle_pan("down", this.kbd_speed_noshift(ev));
keybinds["d"] = (ev) => this.handle_pan("right", ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value); keybinds[pan_keys[3]] = (ev) => this.handle_pan("right", this.kbd_speed_noshift(ev));
keybinds["W"] = () => this.handle_pan("up", this.settings.fpan_speed.value); keybinds[pan_keys_upper[0]] = () => this.handle_pan("up", this.settings.fpan_speed.value);
keybinds["A"] = () => this.handle_pan("left", this.settings.fpan_speed.value); keybinds[pan_keys_upper[1]] = () => this.handle_pan("left", this.settings.fpan_speed.value);
keybinds["S"] = () => this.handle_pan("down", this.settings.fpan_speed.value); keybinds[pan_keys_upper[2]] = () => this.handle_pan("down", this.settings.fpan_speed.value);
keybinds["D"] = () => this.handle_pan("right", this.settings.fpan_speed.value); keybinds[pan_keys_upper[3]] = () => this.handle_pan("right", this.settings.fpan_speed.value);
if (this.settings.pan_zeroing_en.value) {
keybinds["q"] = () => {
this.zoom_panning = [0, 0];
this.update();
};
} }
speed() { if (this.settings.zoom_zeroing_en.value) {
keybinds["p"] = () => {
if (this.settings.zoom.value == 1) this.zoom_level = 1;
this.update();
};
}
}
floater_speed() {
switch (this.patcher.panmode_sel.innerText) { switch (this.patcher.panmode_sel.innerText) {
case "C": case "C":
return this.settings.cpan_speed.value; return this.settings.cpan_speed.value;
@ -425,84 +483,59 @@
} }
} }
patch_floater() { patch_floater() {
document.getElementById("zm_floater_u").onclick = () => this.handle_pan("up", this.speed()); function patch(id, fn) {
document.getElementById("zm_floater_d").onclick = () => this.handle_pan("down", this.speed()); document.getElementById(id).onclick = fn;
document.getElementById("zm_floater_l").onclick = () => this.handle_pan("left", this.speed()); }
document.getElementById("zm_floater_r").onclick = () => this.handle_pan("right", this.speed()); patch("zm_floater_zi", () => this.handle_zoom("in"));
patch("zm_floater_zo", () => this.handle_zoom("out"));
patch("zm_floater_u", () => this.handle_pan("up", this.floater_speed()));
patch("zm_floater_d", () => this.handle_pan("down", this.floater_speed()));
patch("zm_floater_l", () => this.handle_pan("left", this.floater_speed()));
patch("zm_floater_r", () => this.handle_pan("right", this.floater_speed()));
} }
}; };
// assets/numlist.css
var numlist_default = "#settingsMenu .zm_nml_btn_container button { font-size: 2em; padding: 0px; margin: 0px;}\r\n#settingsMenu .zm_nml_icontainer { align-self: center }\r\n#settingsMenu .zm_nml_setting { display: grid; grid-template-columns: 7em 1fr;}\r\n\r\n#settingsMenu .zm_nml_setting span {\r\n input { width: 2em; margin-right: 4px; margin-bottom: 4px;}\r\n \r\n input:focus {\r\n outline: none;\r\n box-shadow: none;\r\n border-color: white;\r\n }\r\n}";
// assets/main.css
var main_default = '#zm_data_div { margin-bottom: 10px }\r\n#canvasDiv { overflow: hidden; background-color: var(--opac-85) }\r\n\r\n@media(pointer=coarse){\r\n #zm_floater_container#zm_floater_container { \r\n width: 40%;\r\n height: auto;\r\n }\r\n #zm_floater_container:has(#zm_collapse[data-collapsed="true"]){\r\n width: calc(40% / 3);\r\n }\r\n}\r\n\r\n@media(pointer:coarse) and (orientation:landscape){\r\n #zm_floater_container#zm_floater_container {\r\n width: auto;\r\n top: 5px;\r\n }\r\n #zm_floater_container:has(#zm_collapse[data-collapsed="true"]){\r\n width: calc(40% / 3);\r\n }\r\n}\r\n\r\n#colorSelector { z-index: 1; right: 5px }\r\n#zm_floater_container {\r\n position: absolute;\r\n display: grid;\r\n\r\n right: 5px;\r\n bottom: 5px;\r\n height: 100px;\r\n aspect-ratio: 1;\r\n\r\n max-width: 200px;\r\n max-height: 200px;\r\n\r\n border: 2px solid white;\r\n background-color: black;\r\n font-size: 120%;\r\n\r\n button { text-align: center; border: 0px solid white }\r\n\r\n button:where([data-pos="tl"]) { border-width: 0px 2px 2px 0px };\r\n button:where([data-pos="tr"]) { border-width: 2px 2px 0px 0px };\r\n button:where([data-pos="bl"]) { border-width: 0px 0px 2px 2px };\r\n button:where([data-pos="br"]) { border-width: 2px 0px 0px 2px };\r\n}\r\n#zm_floater_container:has(#zm_collapse[data-collapsed="true"]) {\r\n height: 50px;\r\n \r\n button:not(#zm_collapse) { display: none; }\r\n}\r\n#canvasDiv:has(#colorSelector[style *= "block"]) #zm_floater_container {\r\n bottom: 50px;\r\n}\r\n\r\n.zm_corner { border: 2px solid white; }\r\n\r\n#zm_collapse {\r\n grid-row: 3;\r\n grid-column: 3;\r\n}\r\n#zm_collapse[data-collapsed="true"] {\r\n grid-row: 1;\r\n grid-column: 1;\r\n border-width: 0px;\r\n}';
// assets/multisetting.css
var multisetting_default = '.zm_ms_row {\r\n display: grid;\r\n grid-template-columns: 2.2em 1fr; \r\n}\r\n\r\n.zm_ms_row[data-current="false"] {\r\n .zm_ms_selbtn { color: transparent }\r\n}\r\n\r\n.zm_ms_selbtn.zm_ms_selbtn:not(#_) {\r\n height: 100%;\r\n width: calc(100% - 10px);\r\n\r\n margin-right: 2px;\r\n padding: 0px;\r\n\r\n border: 2px solid var(--theme);\r\n font-size: 1.5em;\r\n}';
// assets/ctrl_info.html // assets/ctrl_info.html
var ctrl_info_default = "<tr>\r\n <td>Zoom in/out</td>\r\n <td>\r\n <kbd>9</kbd>/\r\n <kbd>0</kbd>\r\n </td>\r\n</tr>\r\n<tr>\r\n <td>Pan</td>\r\n <td>\r\n <kbd>W</kbd>\r\n <kbd>A</kbd>\r\n <kbd>S</kbd>\r\n <kbd>D</kbd>\r\n </td>\r\n</tr>\r\n<tr>\r\n <td>Pan (fast)</td>\r\n <td>\r\n <kbd>Shift</kbd> + \r\n <kbd>W</kbd>\r\n <kbd>A</kbd>\r\n <kbd>S</kbd>\r\n <kbd>D</kbd>\r\n </td>\r\n</tr>"; var ctrl_info_default = "<tr>\r\n <td>Zoom in/out</td>\r\n <td>\r\n <kbd>9</kbd>/\r\n <kbd>0</kbd>\r\n </td>\r\n</tr>\r\n<tr>\r\n <td>Pan</td>\r\n <td>\r\n <kbd>W</kbd>\r\n <kbd>A</kbd>\r\n <kbd>S</kbd>\r\n <kbd>D</kbd>\r\n </td>\r\n</tr>\r\n<tr>\r\n <td>Pan (fast)</td>\r\n <td>\r\n <kbd>Shift</kbd> + \r\n <kbd>W</kbd>\r\n <kbd>A</kbd>\r\n <kbd>S</kbd>\r\n <kbd>D</kbd>\r\n </td>\r\n</tr>";
// assets/floater.html // assets/floater.html
var floater_default = '<div id="zm_floater_container">\r\n <button id="zm_floater_u" style="grid-area: 1 / 2;">&uarr;</button>\r\n <button id="zm_floater_d" style="grid-area: 3 / 2;">&darr;</button>\r\n <button id="zm_floater_l" style="grid-area: 2 / 1;">&larr;</button>\r\n <button id="zm_floater_r" style="grid-area: 2 / 3;">&rarr;</button>\r\n \r\n <button id="zm_floater_zi" data-pos="tl" style="grid-area: 1 / 1;">+</button>\r\n <button id="zm_floater_zo" data-pos="bl" style="grid-area: 1 / 3;">-</button>\r\n\r\n <button id="zm_collapse" data-pos="br">#</button>\r\n <button id="zm_panmode_sel" data-pos="tr" style="grid-area: 3 / 1;">C</button>\r\n</div>'; var floater_default = '<div id="zm_floater_container">\r\n <button id="zm_floater_u" style="grid-area: 1 / 2;">&uarr;</button>\r\n <button id="zm_floater_d" style="grid-area: 3 / 2;">&darr;</button>\r\n <button id="zm_floater_l" style="grid-area: 2 / 1;">&larr;</button>\r\n <button id="zm_floater_r" style="grid-area: 2 / 3;">&rarr;</button>\r\n \r\n <button id="zm_floater_zi" data-pos="tl" style="grid-area: 1 / 1;">+</button>\r\n <button id="zm_floater_zo" data-pos="bl" style="grid-area: 1 / 3;">-</button>\r\n\r\n <button id="zm_collapse" data-pos="br">#</button>\r\n <button id="zm_panmode_sel" data-pos="tr" style="grid-area: 3 / 1;">C</button>\r\n</div>';
// assets/main.css
var main_default = '#zm_data_div { margin-bottom: 10px }\r\n#canvasDiv { overflow: hidden; background-color: var(--opac-85) }\r\n\r\n@media(pointer=coarse){\r\n#zm_floater_container#zm_floater_container { \r\n width: 40%;\r\n height: auto;\r\n}\r\n#zm_floater_container:has(#zm_collapse[data-collapsed="true"]){\r\n width: calc(40% / 3);\r\n}\r\n}\r\n\r\n@media(pointer:coarse) and (orientation:landscape){\r\n#zm_floater_container#zm_floater_container {\r\n width: auto;\r\n top: 5px;\r\n}\r\n#zm_floater_container:has(#zm_collapse[data-collapsed="true"]){\r\n width: calc(40% / 3);\r\n}\r\n}\r\n\r\n#colorSelector { z-index: 1; right: 5px }\r\n#zm_floater_container {\r\nposition: absolute;\r\ndisplay: grid;\r\n\r\nright: 5px;\r\nbottom: 5px;\r\nheight: 100px;\r\naspect-ratio: 1;\r\n\r\nmax-width: 200px;\r\nmax-height: 200px;\r\n\r\nborder: 2px solid white;\r\nbackground-color: black;\r\nfont-size: 120%;\r\n\r\nbutton { text-align: center; border: 0px solid white }\r\n\r\nbutton:where([data-pos="tl"]) { border-width: 0px 2px 2px 0px };\r\nbutton:where([data-pos="tr"]) { border-width: 2px 2px 0px 0px };\r\nbutton:where([data-pos="bl"]) { border-width: 0px 0px 2px 2px };\r\nbutton:where([data-pos="br"]) { border-width: 2px 0px 0px 2px };\r\n}\r\n#zm_floater_container:has(#zm_collapse[data-collapsed="true"]) {\r\nheight: 50px;\r\n\r\nbutton:not(#zm_collapse) {\r\n display: none;\r\n}\r\n}\r\n#canvasDiv:has(#colorSelector[style *= "block"]) #zm_floater_container {\r\nbottom: 50px;\r\n}\r\n\r\n.zm_corner { border: 2px solid white; }\r\n\r\n#zm_collapse {\r\ngrid-row: 3;\r\ngrid-column: 3;\r\n}\r\n#zm_collapse[data-collapsed="true"] {\r\ngrid-row: 1;\r\ngrid-column: 1;\r\nborder-width: 0px;\r\n}';
// assets/nlist_spinner.png // assets/nlist_spinner.png
var nlist_spinner_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAYCAYAAADH2bwQAAAAcklEQVQokcWSXQrAIAyDv8oOoPe/49wJzB7coIg/jA2WPhQ1TdOiATsThNmjJ8QV4XjdokIkRHqiEAF2NAgoSw8GlCuD3K3zYEzgFdSQBbA15LaYQN1i9lU+3y16CgDqjSl/MKBoMIk5DyNk46sf9SfhBITwI86iGhy9AAAAAElFTkSuQmCC"; var nlist_spinner_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAYCAYAAADH2bwQAAAAcklEQVQokcWSXQrAIAyDv8oOoPe/49wJzB7coIg/jA2WPhQ1TdOiATsThNmjJ8QV4XjdokIkRHqiEAF2NAgoSw8GlCuD3K3zYEzgFdSQBbA15LaYQN1i9lU+3y16CgDqjSl/MKBoMIk5DyNk46sf9SfhBITwI86iGhy9AAAAAElFTkSuQmCC";
// assets/numlist.css.ts // assets/spinner.css.ts
var CSS = ` var CSS = `
#settingsMenu .zm_nml_btn_container button { #betterSettings\\/div\\/zoom\\.js input::-webkit-inner-spin-button,
font-size: 2em; #betterSettings\\/div\\/zoom\\.js input::-webkit-outer-spin-button {
padding: 0px;
margin: 0px;
}
#settingsMenu .zm_nml_icontainer {
align-self: center
}
#settingsMenu .zm_nml_setting {
display: grid;
grid-template-columns: 7em 1fr;
}
#settingsMenu .zm_nml_setting span {
input {
width: 2em;
margin-right: 4px;
margin-bottom: 4px;
}
input:focus {
outline: none;
box-shadow: none;
border-color: white;
}
/* Sorry, firefox users */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 0.75em; width: 0.75em;
background: #000 url(${nlist_spinner_default}) no-repeat center center; background: #000 url(${nlist_spinner_default}) no-repeat center center;
background-size: 100%; background-size: 100%;
border-left: 2px solid var(--theme); border-left: 2px solid var(--theme);
image-rendering: pixelated; image-rendering: pixelated;
opacity: 0.8; opacity: 0.8;
} }
#betterSettings\\/div\\/zoom\\.js input::-webkit-inner-spin-button:hover,
input::-webkit-inner-spin-button:hover, #betterSettings\\/div\\/zoom\\.js input::-webkit-outer-spin-button:active {
input::-webkit-outer-spin-button:active {
border-left: 2px solid white; border-left: 2px solid white;
opacity: 1; opacity: 1;
} }
}
`; `;
var numlist_css_default = CSS; var spinner_css_default = CSS;
// assets/multisetting.css
var multisetting_default = '.zm_ms_row {\r\n display: grid;\r\n grid-template-columns: 2.2em 1fr; \r\n}\r\n\r\n.zm_ms_row[data-current="false"] {\r\n .zm_ms_selbtn { color: transparent }\r\n}\r\n\r\n.zm_ms_selbtn.zm_ms_selbtn:not(#_) {\r\n height: 100%;\r\n width: calc(100% - 10px);\r\n\r\n margin-right: 2px;\r\n padding: 0px;\r\n\r\n border: 2px solid var(--theme);\r\n font-size: 1.5em;\r\n}';
// src/patcher.ts // src/patcher.ts
var Patcher = class { var Patcher = class {
@ -518,7 +551,7 @@
document.head.appendChild(style_div); document.head.appendChild(style_div);
dependOn("betterSettings.js", () => { dependOn("betterSettings.js", () => {
const style_div2 = document.createElement("style"); const style_div2 = document.createElement("style");
style_div2.innerHTML = numlist_css_default + multisetting_default; style_div2.innerHTML = numlist_default + multisetting_default + spinner_css_default;
document.head.appendChild(style_div2); document.head.appendChild(style_div2);
}); });
this.canvas_div = document.getElementById("canvasDiv"); this.canvas_div = document.getElementById("canvasDiv");
@ -538,6 +571,10 @@
break; break;
} }
}; };
const collapse_btn = document.getElementById("zm_collapse");
collapse_btn.onclick = () => {
collapse_btn.dataset.collapsed = collapse_btn.dataset.collapsed == "true" ? "false" : "true";
};
this.zoom_data_div = document.createElement("div"); this.zoom_data_div = document.createElement("div");
this.zoom_data_div.id = "zm_data_div"; this.zoom_data_div.id = "zm_data_div";
document.getElementById("logDiv")?.prepend(this.zoom_data_div); document.getElementById("logDiv")?.prepend(this.zoom_data_div);