feat(book_properties): group map style into vector & raster

This commit is contained in:
Elian Doran 2025-07-24 21:49:55 +03:00
parent b5a57b3c66
commit d17f5b8447
No known key found for this signature in database
4 changed files with 62 additions and 20 deletions

View File

@ -1967,7 +1967,9 @@
"hide-weekends": "Hide weekends",
"display-week-numbers": "Display week numbers",
"map-style": "Map style:",
"max-nesting-depth": "Max nesting depth:"
"max-nesting-depth": "Max nesting depth:",
"raster": "Raster",
"vector": "Vector"
},
"table_context_menu": {
"delete_row": "Delete row"

View File

@ -59,7 +59,9 @@ const TPL = /*html*/`
<span style="white-space: nowrap">${t("book_properties.view_type")}:&nbsp; &nbsp;</span>
<select class="view-type-select form-select form-select-sm">
${Object.entries(VIEW_TYPE_MAPPINGS).map(([type, label]) => `
${Object.entries(VIEW_TYPE_MAPPINGS)
.filter(([type]) => type !== "raster")
.map(([type, label]) => `
<option value="${type}">${label}</option>
`).join("")}
</select>
@ -215,16 +217,17 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
const $select = $("<select>", {
class: "form-select form-select-sm"
});
const actualValue = note.getLabelValue(property.bindToLabel) ?? property.defaultValue;
const actualValue = note.getLabelValue(property.bindToLabel) ?? property.defaultValue ?? "";
for (const option of property.options) {
const $option = $("<option>", {
value: option.value,
text: option.label
});
if (actualValue === option.value) {
$option.prop("selected", true);
if ("items" in option) {
const $optGroup = $("<optgroup>", { label: option.name });
for (const item of option.items) {
buildComboBoxItem(item, actualValue).appendTo($optGroup);
}
$optGroup.appendTo($select);
} else {
buildComboBoxItem(option, actualValue).appendTo($select);
}
$select.append($option);
}
$select.on("change", () => {
const value = $select.val();
@ -246,3 +249,14 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
}
function buildComboBoxItem({ value, label }: { value: string, label: string }, actualValue: string) {
const $option = $("<option>", {
value,
text: label
});
if (actualValue === value) {
$option.prop("selected", true);
}
return $option;
}

View File

@ -31,6 +31,16 @@ interface NumberProperty {
min?: number;
}
interface ComboBoxItem {
value: string;
label: string;
}
interface ComboBoxGroup {
name: string;
items: ComboBoxItem[];
}
interface ComboBoxProperty {
type: "combobox",
label: string;
@ -39,7 +49,7 @@ interface ComboBoxProperty {
* The default value is used when the label is not set.
*/
defaultValue?: string;
options: { value: string; label: string }[];
options: (ComboBoxItem | ComboBoxGroup)[];
}
export type BookProperty = CheckBoxProperty | ButtonProperty | NumberProperty | ComboBoxProperty;
@ -108,10 +118,26 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
type: "combobox",
bindToLabel: "mapStyle",
defaultValue: DEFAULT_MAP_LAYER_NAME,
options: Object.entries(MAP_LAYERS).map(([id, layer]) => ({
value: id,
label: layer.name
}))
options: [
{
name: t("book_properties_config.raster"),
items: Object.entries(MAP_LAYERS)
.filter(([_, layer]) => layer.type === "raster")
.map(([id, layer]) => ({
value: id,
label: layer.name
}))
},
{
name: t("book_properties_config.vector"),
items: Object.entries(MAP_LAYERS)
.filter(([_, layer]) => layer.type === "vector")
.map(([id, layer]) => ({
value: id,
label: layer.name
}))
}
]
}
]
},

View File

@ -22,28 +22,28 @@ export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
},
"versatiles-colorful": {
name: "VersaTiles Colorful (vector)",
name: "VersaTiles Colorful",
type: "vector",
style: async () => (await import("./styles/colorful/en.json")).default
},
"versatiles-eclipse": {
name: "VersaTiles Eclipse (vector)",
name: "VersaTiles Eclipse",
type: "vector",
style: async () => (await import("./styles/eclipse/en.json")).default,
isDarkTheme: true
},
"versatiles-graybeard": {
name: "VersaTiles Graybeard (vector)",
name: "VersaTiles Graybeard",
type: "vector",
style: async () => (await import("./styles/graybeard/en.json")).default
},
"versatiles-neutrino": {
name: "VersaTiles Neutrino (vector)",
name: "VersaTiles Neutrino",
type: "vector",
style: async () => (await import("./styles/neutrino/en.json")).default
},
"versatiles-shadow": {
name: "VersaTiles Shadow (vector)",
name: "VersaTiles Shadow",
type: "vector",
style: async () => (await import("./styles/shadow/en.json")).default,
isDarkTheme: true