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

209
mods/zoom.js
View File

@ -8,17 +8,17 @@
input_container = null;
push_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(
name,
storage_name,
[5, 0],
disabled,
default_values ?? [],
options.disabled,
options.default_values,
desc,
custom_validator
options.custom_validator
);
this.step = step;
this.step = options.step ?? 1;
}
#new_input(value, i) {
const elem = document.createElement("input");
@ -182,10 +182,13 @@
canvas_bkg;
zoom;
unl_zoom;
show_floater;
fpan_speed;
cpan_speed;
upan_speed;
use_ijkl;
show_floater;
pan_zeroing_en;
zoom_zeroing_en;
constructor(on_edit) {
const { Numlist: Numlist2, MultiSetting, SettingGroup } = def_classes();
const settings_tab = new SettingsTab("zoom.js");
@ -238,13 +241,42 @@
"Whether to show the floater or not",
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(
"Zoom levels",
"zoom_levels",
[0.5, 1, 2, 3, 6, 12],
"Zoom levels",
1,
validator
{
default_values: [0.5, 1, 2, 3, 6, 12],
step: 0.1,
custom_validator: validator
}
);
this.unl_zoom = new SettingGroup({
speed: new Setting(
@ -284,8 +316,17 @@
);
settings_tab.registerSettings(
void 0,
this.canvas_bkg,
this.canvas_bkg
);
settings_tab.registerSettings(
"Controls",
this.use_ijkl,
this.show_floater,
this.pan_zeroing_en,
this.zoom_zeroing_en
);
settings_tab.registerSettings(
"Zoom",
this.zoom
);
settings_tab.registerSettings(
@ -328,7 +369,7 @@
runAfterReset(() => {
this.zoom_level = 1;
this.zoom_panning = [0, 0];
this.rescale();
this.update();
});
}
handle_zoom(direction) {
@ -364,7 +405,7 @@
}
this.zoom_level = Number(this.zoom_level.toPrecision(3));
}
this.rescale();
this.update();
}
handle_pan(direction, speed) {
switch (direction) {
@ -381,12 +422,12 @@
this.zoom_panning[1] -= speed;
break;
}
this.rescale();
this.update();
}
scale() {
return this.settings.zoom.value == 0 ? this.settings.zoom.settings[0].value[this.zoom_level] : this.zoom_level;
}
rescale() {
update() {
this.log_info();
const x = this.zoom_panning[0] * (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}`;
}
kbd_speed_noshift(ev) {
return ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value;
}
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["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["a"] = (ev) => this.handle_pan("left", ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value);
keybinds["s"] = (ev) => this.handle_pan("down", ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value);
keybinds["d"] = (ev) => this.handle_pan("right", ev.altKey ? this.settings.upan_speed.value : this.settings.cpan_speed.value);
keybinds["W"] = () => this.handle_pan("up", this.settings.fpan_speed.value);
keybinds["A"] = () => this.handle_pan("left", this.settings.fpan_speed.value);
keybinds["S"] = () => this.handle_pan("down", this.settings.fpan_speed.value);
keybinds["D"] = () => this.handle_pan("right", this.settings.fpan_speed.value);
keybinds[pan_keys[0]] = (ev) => this.handle_pan("up", this.kbd_speed_noshift(ev));
keybinds[pan_keys[1]] = (ev) => this.handle_pan("left", this.kbd_speed_noshift(ev));
keybinds[pan_keys[2]] = (ev) => this.handle_pan("down", this.kbd_speed_noshift(ev));
keybinds[pan_keys[3]] = (ev) => this.handle_pan("right", this.kbd_speed_noshift(ev));
keybinds[pan_keys_upper[0]] = () => this.handle_pan("up", this.settings.fpan_speed.value);
keybinds[pan_keys_upper[1]] = () => this.handle_pan("left", this.settings.fpan_speed.value);
keybinds[pan_keys_upper[2]] = () => this.handle_pan("down", 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();
};
}
if (this.settings.zoom_zeroing_en.value) {
keybinds["p"] = () => {
if (this.settings.zoom.value == 1) this.zoom_level = 1;
this.update();
};
}
}
speed() {
floater_speed() {
switch (this.patcher.panmode_sel.innerText) {
case "C":
return this.settings.cpan_speed.value;
@ -425,84 +483,59 @@
}
}
patch_floater() {
document.getElementById("zm_floater_u").onclick = () => this.handle_pan("up", this.speed());
document.getElementById("zm_floater_d").onclick = () => this.handle_pan("down", this.speed());
document.getElementById("zm_floater_l").onclick = () => this.handle_pan("left", this.speed());
document.getElementById("zm_floater_r").onclick = () => this.handle_pan("right", this.speed());
function patch(id, fn) {
document.getElementById(id).onclick = fn;
}
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
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
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
var nlist_spinner_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAYCAYAAADH2bwQAAAAcklEQVQokcWSXQrAIAyDv8oOoPe/49wJzB7coIg/jA2WPhQ1TdOiATsThNmjJ8QV4XjdokIkRHqiEAF2NAgoSw8GlCuD3K3zYEzgFdSQBbA15LaYQN1i9lU+3y16CgDqjSl/MKBoMIk5DyNk46sf9SfhBITwI86iGhy9AAAAAElFTkSuQmCC";
// assets/numlist.css.ts
// assets/spinner.css.ts
var CSS = `
#settingsMenu .zm_nml_btn_container button {
font-size: 2em;
padding: 0px;
margin: 0px;
#betterSettings\\/div\\/zoom\\.js input::-webkit-inner-spin-button,
#betterSettings\\/div\\/zoom\\.js input::-webkit-outer-spin-button {
-webkit-appearance: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0.75em;
background: #000 url(${nlist_spinner_default}) no-repeat center center;
background-size: 100%;
border-left: 2px solid var(--theme);
image-rendering: pixelated;
opacity: 0.8;
}
#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;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 0.75em;
background: #000 url(${nlist_spinner_default}) no-repeat center center;
background-size: 100%;
border-left: 2px solid var(--theme);
image-rendering: pixelated;
opacity: 0.8;
}
input::-webkit-inner-spin-button:hover,
input::-webkit-outer-spin-button:active {
border-left: 2px solid white;
opacity: 1;
}
#betterSettings\\/div\\/zoom\\.js input::-webkit-inner-spin-button:hover,
#betterSettings\\/div\\/zoom\\.js input::-webkit-outer-spin-button:active {
border-left: 2px solid white;
opacity: 1;
}
`;
var numlist_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}';
var spinner_css_default = CSS;
// src/patcher.ts
var Patcher = class {
@ -518,7 +551,7 @@
document.head.appendChild(style_div);
dependOn("betterSettings.js", () => {
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);
});
this.canvas_div = document.getElementById("canvasDiv");
@ -538,6 +571,10 @@
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.id = "zm_data_div";
document.getElementById("logDiv")?.prepend(this.zoom_data_div);