Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-05-06 19:59:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Polish Color Filter visibility controls

Browse source
This commit is contained in:
Alexey 2026-04-21 10:14:30 +05:00
parent aadc17cb9f
commit bfd72df077
7 changed files with 103 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
dist/BlueMarble-For-GreasyFork.user.css vendored
View file

@ -583,10 +583,23 @@ input[type=file] {
}
/* src/WindowFilter.css */
#bm-window-filter .bm-filter-eye-icon {
display: block;
width: 1.28em;
height: 1.28em;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
#bm-window-filter p svg {
display: inline;
display: inline-block;
height: 1em;
fill: white;
width: 1em;
color: currentColor;
vertical-align: -0.16em;
}
#bm-window-filter:not(.bm-windowed) {
width: min(50rem, calc(100vw - 0.55rem));
@ -749,16 +762,25 @@ input[type=file] {
background-color: transparent !important;
}
#bm-window-filter .bm-filter-color[data-id="-1"] .bm-filter-container-rgb svg {
fill: white !important;
color: white !important;
}
#bm-window-filter .bm-filter-color[data-id="0"] .bm-filter-container-rgb {
background-color: transparent !important;
}
#bm-window-filter .bm-filter-container-rgb button {
padding: 0.26em 0.14ch;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.24em;
min-width: 2.05rem;
min-height: 2.05rem;
border-radius: 999px;
line-height: 1;
}
#bm-window-filter .bm-filter-container-rgb svg {
width: 4ch;
#bm-window-filter .bm-filter-container-rgb .bm-filter-eye-icon {
width: 1.55rem;
height: 1.55rem;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18));
}
#bm-window-filter .bm-filter-color > .bm-flex-between {
flex-direction: column;
@ -781,9 +803,9 @@ input[type=file] {
--bm-scrollable-max-height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: 268px;
width: 360px;
height: min(60vh, 22rem);
min-width: 228px;
min-width: 360px;
min-height: 180px;
max-width: min(1000px, calc(100vw - 16px)) !important;
max-height: min(1400px, calc(100vh - 16px)) !important;
@ -897,11 +919,12 @@ input[type=file] {
box-sizing: border-box;
}
#bm-window-filter.bm-windowed .bm-filter-container-rgb button {
padding: 0.2em 0.1ch;
padding: 0.2em;
flex: 0 0 auto;
}
#bm-window-filter.bm-windowed .bm-filter-container-rgb svg {
width: 2.7ch;
#bm-window-filter.bm-windowed .bm-filter-container-rgb .bm-filter-eye-icon {
width: 1.36rem;
height: 1.36rem;
}
#bm-window-filter.bm-windowed .bm-filter-color h2 {
font-size: 0.78rem;
@ -1181,4 +1204,4 @@ input[type=file] {
/* src/main.css */
/* Build Hash: ee66c55dba5d */
/* Build Hash: af601d626afd */

24
dist/BlueMarble-For-GreasyFork.user.js vendored
View file

@ -2373,13 +2373,13 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
this.windowSaveTimeout = null;
this.colorRefreshInterval = null;
this.colorRefreshIntervalMS = 1e4;
this.windowMinWidth = 260;
this.windowMinWidth = 360;
this.windowMinHeight = 220;
this.windowMaxWidth = 1e3;
this.windowMaxHeight = 1400;
this.templateManager = executor.apiManager?.templateManager;
this.eyeOpen = '<svg viewBox="0 .5 6 3"><path d="M0,2Q3-1 6,2Q3,5 0,2H2A1,1 0 1 0 3,1Q3,2 2,2"/></svg>';
this.eyeClosed = '<svg viewBox="0 1 12 6"><mask id="a"><path d="M0,0H12V8L0,2" fill="#fff"/></mask><path d="M0,4Q6-2 12,4Q6,10 0,4H4A2,2 0 1 0 6,2Q6,4 4,4ZM1,2L10,6.5L9.5,7L.5,2.5" mask="url(#a)"/></svg>';
this.eyeOpen = '<svg class="bm-filter-eye-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.8 12s3.1-5 8.2-5 8.2 5 8.2 5-3.1 5-8.2 5-8.2-5-8.2-5Z"/><circle cx="12" cy="12" r="2.5"/></svg>';
this.eyeClosed = '<svg class="bm-filter-eye-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4.6 9.8C6.1 8.3 8.6 7 12 7c5.1 0 8.2 5 8.2 5a15.2 15.2 0 0 1-2.2 2.7"/><path d="M14.1 16.7a8.3 8.3 0 0 1-2.1.3c-5.1 0-8.2-5-8.2-5a14.9 14.9 0 0 1 1.8-2.3"/><path d="M5 5l14 14"/><path d="M10.4 10.7a2.5 2.5 0 0 0 2.9 2.9"/></svg>';
const { palette, LUT: _ } = this.templateManager.paletteBM;
this.palette = palette;
this.tilesLoadedTotal = 0;
@ -2475,7 +2475,7 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
this.window = this.addDiv({
"id": this.windowID,
"class": "bm-window bm-windowed",
"style": `width: 300px; height: min(70vh, 32rem); min-width: ${this.windowMinWidth}px; min-height: ${this.windowMinHeight}px; max-width: min(${this.windowMaxWidth}px, calc(100vw - 16px)); max-height: min(${this.windowMaxHeight}px, calc(100vh - 16px));`
"style": `width: 360px; height: min(70vh, 32rem); min-width: ${this.windowMinWidth}px; min-height: ${this.windowMinHeight}px; max-width: min(${this.windowMaxWidth}px, calc(100vw - 16px)); max-height: min(${this.windowMaxHeight}px, calc(100vh - 16px));`
}).addDragbar().addButton({ "class": "bm-button-circle", "innerHTML": minimizeIconExpanded, "aria-label": 'Minimize window "Color Filter"', "data-button-status": "expanded" }, (instance, button) => {
button.onclick = () => {
const windowedColorTotals = document.querySelector("#bm-filter-windowed-color-totals");
@ -2902,19 +2902,20 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
"class": "bm-button-trans " + bgEffectForButtons,
"data-state": isColorHidden ? "hidden" : "shown",
"aria-label": isColorHidden ? `Show the color ${color.name || ""} on templates.` : `Hide the color ${color.name || ""} on templates.`,
"innerHTML": isColorHidden ? this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`)
"innerHTML": isColorHidden ? this.eyeClosed : this.eyeOpen,
"style": `color: ${textColorForPaletteColorBackground};`
},
(instance, button) => {
button.onclick = () => {
button.style.textDecoration = "none";
button.disabled = true;
if (button.dataset["state"] == "shown") {
button.innerHTML = this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`);
button.innerHTML = this.eyeClosed;
button.dataset["state"] = "hidden";
button.ariaLabel = `Show the color ${color.name || ""} on templates.`;
this.templateManager.setColorFiltered(color.id, true);
} else {
button.innerHTML = this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`);
button.innerHTML = this.eyeOpen;
button.dataset["state"] = "shown";
button.ariaLabel = `Hide the color ${color.name || ""} on templates.`;
this.templateManager.setColorFiltered(color.id, false);
@ -2942,19 +2943,20 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
"class": "bm-button-trans " + bgEffectForButtons,
"data-state": isColorHidden ? "hidden" : "shown",
"aria-label": isColorHidden ? `Show the color ${color.name || ""} on templates.` : `Hide the color ${color.name || ""} on templates.`,
"innerHTML": isColorHidden ? this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`)
"innerHTML": isColorHidden ? this.eyeClosed : this.eyeOpen,
"style": `color: ${textColorForPaletteColorBackground};`
},
(instance, button) => {
button.onclick = () => {
button.style.textDecoration = "none";
button.disabled = true;
if (button.dataset["state"] == "shown") {
button.innerHTML = this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`);
button.innerHTML = this.eyeClosed;
button.dataset["state"] = "hidden";
button.ariaLabel = `Show the color ${color.name || ""} on templates.`;
this.templateManager.setColorFiltered(color.id, true);
} else {
button.innerHTML = this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`);
button.innerHTML = this.eyeOpen;
button.dataset["state"] = "shown";
button.ariaLabel = `Hide the color ${color.name || ""} on templates.`;
this.templateManager.setColorFiltered(color.id, false);
@ -4516,4 +4518,4 @@ Time Since Blink: ${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String
}
})();
// Build Hash: 90abdec99d7b
// Build Hash: f31122a513fd

4
dist/BlueMarble-Standalone.user.js vendored
View file

File diff suppressed because one or more lines are too long

4
dist/BlueMarble.user.css vendored
View file

File diff suppressed because one or more lines are too long

4
dist/BlueMarble.user.js vendored
View file

File diff suppressed because one or more lines are too long

49
src/WindowFilter.css
View file

@ -1,10 +1,25 @@
/* @since 0.88.459 */
/* Filter window eye icon inside paragraphs */
/* Filter window visibility icon */
#bm-window-filter .bm-filter-eye-icon {
display: block;
width: 1.28em;
height: 1.28em;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
/* Filter window inline icons inside paragraphs */
#bm-window-filter p svg {
display: inline;
display: inline-block;
height: 1em;
fill: white;
width: 1em;
color: currentColor;
vertical-align: -0.16em;
}
#bm-window-filter:not(.bm-windowed) {
@ -184,7 +199,7 @@
}
#bm-window-filter .bm-filter-color[data-id="-1"] .bm-filter-container-rgb svg {
fill: white !important;
color: white !important;
}
/* Filter window container for RGB color display for Transparent color */
@ -194,12 +209,21 @@
/* Filter window hide color button */
#bm-window-filter .bm-filter-container-rgb button {
padding: 0.26em 0.14ch;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.24em;
min-width: 2.05rem;
min-height: 2.05rem;
border-radius: 999px;
line-height: 1;
}
/* Filter window hide color button SVG */
#bm-window-filter .bm-filter-container-rgb svg {
width: 4ch;
#bm-window-filter .bm-filter-container-rgb .bm-filter-eye-icon {
width: 1.55rem;
height: 1.55rem;
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18));
}
/* Filter window container for color information */
@ -234,9 +258,9 @@
--bm-scrollable-max-height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: 268px;
width: 360px;
height: min(60vh, 22rem);
min-width: 228px;
min-width: 360px;
min-height: 180px;
max-width: min(1000px, calc(100vw - 16px)) !important;
max-height: min(1400px, calc(100vh - 16px)) !important;
@ -366,13 +390,14 @@
/* Filter window hide color button */
#bm-window-filter.bm-windowed .bm-filter-container-rgb button {
padding: 0.2em 0.1ch;
padding: 0.2em;
flex: 0 0 auto;
}
/* Filter window hide color button SVG in windowed mode */
#bm-window-filter.bm-windowed .bm-filter-container-rgb svg {
width: 2.7ch;
#bm-window-filter.bm-windowed .bm-filter-container-rgb .bm-filter-eye-icon {
width: 1.36rem;
height: 1.36rem;
}
/* Filter window header 2 in windowed mode */

22
src/WindowFilter.js
View file

@ -33,7 +33,7 @@ export default class WindowFilter extends Overlay {
this.windowSaveTimeout = null; // Debounce timer for resize persistence
this.colorRefreshInterval = null; // Auto-refresh timer for live color statistics
this.colorRefreshIntervalMS = 10000; // Refresh Color Filter statistics every 10 seconds
this.windowMinWidth = 260; // Minimum width for the windowed filter
this.windowMinWidth = 360; // Minimum width for the windowed filter
this.windowMinHeight = 220; // Minimum height for the windowed filter
this.windowMaxWidth = 1000; // Maximum width for the windowed filter
this.windowMaxHeight = 1400; // Maximum height for the windowed filter
@ -42,8 +42,8 @@ export default class WindowFilter extends Overlay {
this.templateManager = executor.apiManager?.templateManager;
// Eye icons
this.eyeOpen = '<svg viewBox="0 .5 6 3"><path d="M0,2Q3-1 6,2Q3,5 0,2H2A1,1 0 1 0 3,1Q3,2 2,2"/></svg>';
this.eyeClosed = '<svg viewBox="0 1 12 6"><mask id="a"><path d="M0,0H12V8L0,2" fill="#fff"/></mask><path d="M0,4Q6-2 12,4Q6,10 0,4H4A2,2 0 1 0 6,2Q6,4 4,4ZM1,2L10,6.5L9.5,7L.5,2.5" mask="url(#a)"/></svg>';
this.eyeOpen = '<svg class="bm-filter-eye-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.8 12s3.1-5 8.2-5 8.2 5 8.2 5-3.1 5-8.2 5-8.2-5-8.2-5Z"/><circle cx="12" cy="12" r="2.5"/></svg>';
this.eyeClosed = '<svg class="bm-filter-eye-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4.6 9.8C6.1 8.3 8.6 7 12 7c5.1 0 8.2 5 8.2 5a15.2 15.2 0 0 1-2.2 2.7"/><path d="M14.1 16.7a8.3 8.3 0 0 1-2.1.3c-5.1 0-8.2-5-8.2-5a14.9 14.9 0 0 1 1.8-2.3"/><path d="M5 5l14 14"/><path d="M10.4 10.7a2.5 2.5 0 0 0 2.9 2.9"/></svg>';
// Obtains the color palette Blue Marble currently uses
const { palette: palette, LUT: _ } = this.templateManager.paletteBM;
@ -234,7 +234,7 @@ export default class WindowFilter extends Overlay {
this.window = this.addDiv({
'id': this.windowID,
'class': 'bm-window bm-windowed',
'style': `width: 300px; height: min(70vh, 32rem); min-width: ${this.windowMinWidth}px; min-height: ${this.windowMinHeight}px; max-width: min(${this.windowMaxWidth}px, calc(100vw - 16px)); max-height: min(${this.windowMaxHeight}px, calc(100vh - 16px));`
'style': `width: 360px; height: min(70vh, 32rem); min-width: ${this.windowMinWidth}px; min-height: ${this.windowMinHeight}px; max-width: min(${this.windowMaxWidth}px, calc(100vw - 16px)); max-height: min(${this.windowMaxHeight}px, calc(100vh - 16px));`
})
.addDragbar()
.addButton({'class': 'bm-button-circle', 'innerHTML': minimizeIconExpanded, 'aria-label': 'Minimize window "Color Filter"', 'data-button-status': 'expanded'}, (instance, button) => {
@ -640,7 +640,8 @@ export default class WindowFilter extends Overlay {
'class': 'bm-button-trans ' + bgEffectForButtons,
'data-state': isColorHidden ? 'hidden' : 'shown',
'aria-label': isColorHidden ? `Show the color ${color.name || ''} on templates.` : `Hide the color ${color.name || ''} on templates.`,
'innerHTML': isColorHidden ? this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`)},
'innerHTML': isColorHidden ? this.eyeClosed : this.eyeOpen,
'style': `color: ${textColorForPaletteColorBackground};`},
(instance, button) => {
// When the button is clicked
@ -648,12 +649,12 @@ export default class WindowFilter extends Overlay {
button.style.textDecoration = 'none';
button.disabled = true;
if (button.dataset['state'] == 'shown') {
button.innerHTML = this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`);
button.innerHTML = this.eyeClosed;
button.dataset['state'] = 'hidden';
button.ariaLabel = `Show the color ${color.name || ''} on templates.`;
this.templateManager.setColorFiltered(color.id, true);
} else {
button.innerHTML = this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`);
button.innerHTML = this.eyeOpen;
button.dataset['state'] = 'shown';
button.ariaLabel = `Hide the color ${color.name || ''} on templates.`;
this.templateManager.setColorFiltered(color.id, false);
@ -689,7 +690,8 @@ export default class WindowFilter extends Overlay {
'class': 'bm-button-trans ' + bgEffectForButtons,
'data-state': isColorHidden ? 'hidden' : 'shown',
'aria-label': isColorHidden ? `Show the color ${color.name || ''} on templates.` : `Hide the color ${color.name || ''} on templates.`,
'innerHTML': isColorHidden ? this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`)},
'innerHTML': isColorHidden ? this.eyeClosed : this.eyeOpen,
'style': `color: ${textColorForPaletteColorBackground};`},
(instance, button) => {
// When the button is clicked
@ -697,12 +699,12 @@ export default class WindowFilter extends Overlay {
button.style.textDecoration = 'none';
button.disabled = true;
if (button.dataset['state'] == 'shown') {
button.innerHTML = this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`);
button.innerHTML = this.eyeClosed;
button.dataset['state'] = 'hidden';
button.ariaLabel = `Show the color ${color.name || ''} on templates.`;
this.templateManager.setColorFiltered(color.id, true);
} else {
button.innerHTML = this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`);
button.innerHTML = this.eyeOpen;
button.dataset['state'] = 'shown';
button.ariaLabel = `Hide the color ${color.name || ''} on templates.`;
this.templateManager.setColorFiltered(color.id, false);