Skip to content

Commit 59f26dc

Browse files
valentine195valentine195
committed
feat: Enable marker opacity (close #334)
1 parent 952256a commit 59f26dc

File tree

6 files changed

+64
-47
lines changed

6 files changed

+64
-47
lines changed

‎src/assets/main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
.marker-type-display > .marker-icon-display {
5858
margin-right: 12px;
5959
font-size: 24px;
60-
width: 24px;
60+
width: 18px;
6161
display: flex;
6262
justify-content: center;
6363
align-items: center;

‎src/main.ts

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -623,14 +623,17 @@ export default class ObsidianLeaflet extends Plugin {
623623
node.style.color = icon.color
624624
? icon.color
625625
: this.data.defaultMarker.color;
626-
626+
node.style.opacity = `${
627+
icon.alpha ?? this.data.defaultMarker.alpha ?? 1
628+
}`;
627629
return {
628630
type: icon.type,
629631
html: node.outerHTML,
630632
icon: markerDivIcon({
631633
html: node.outerHTML,
632634
className: `leaflet-div-icon`
633-
})
635+
}),
636+
markerIcon: icon
634637
};
635638
}
636639
public generateMarkerMarkup(
@@ -642,7 +645,8 @@ export default class ObsidianLeaflet extends Plugin {
642645
const defaultHtml = getMarkerIcon(this.data.defaultMarker, {
643646
classes: ["full-width-height"],
644647
styles: {
645-
color: this.data.defaultMarker.color
648+
color: this.data.defaultMarker.color,
649+
opacity: `${this.data.defaultMarker.alpha ?? 1}`
646650
},
647651
maskId: `leaflet-mask-${getId()}`
648652
}).html;
@@ -652,7 +656,8 @@ export default class ObsidianLeaflet extends Plugin {
652656
icon: markerDivIcon({
653657
html: defaultHtml,
654658
className: `leaflet-div-icon`
655-
})
659+
}),
660+
markerIcon: this.data.defaultMarker
656661
});
657662

658663
return ret;
@@ -686,6 +691,7 @@ export default class ObsidianLeaflet extends Plugin {
686691
options?.layer ?? this.data.layerMarkers
687692
? this.data.defaultMarker.color
688693
: this.data.color,
694+
alpha: 1,
689695
layer: options?.layer ?? this.data.layerMarkers,
690696
transform: this.data.defaultMarker.transform,
691697
isImage: false,

‎src/modals/settings.ts

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -386,17 +386,28 @@ export class CreateMarkerModal extends Modal {
386386
});
387387
colorInputNode.oninput = (evt) => {
388388
this.tempMarker.color = (evt.target as HTMLInputElement).value;
389-
390-
iconDisplay.children[0].setAttribute(
391-
"style",
392-
`color: ${this.tempMarker.color}`
393-
);
389+
if (iconDisplay.children.length)
390+
(
391+
iconDisplay.children[0] as HTMLElement
392+
).style.color = `${this.tempMarker.color}`;
394393
};
395394
colorInputNode.onchange = async (evt) => {
396395
this.tempMarker.color = (evt.target as HTMLInputElement).value;
397396

398397
this.display();
399398
};
399+
colorInput.addSlider((s) =>
400+
s
401+
.setLimits(0, 1, 0.01)
402+
.setValue(1)
403+
.onChange((v) => {
404+
this.tempMarker.alpha = v;
405+
if (iconDisplay.children.length)
406+
(
407+
iconDisplay.children[0] as HTMLElement
408+
).style.opacity = `${this.tempMarker.alpha}`;
409+
})
410+
);
400411
}
401412

402413
new Setting(createNewMarker)
@@ -537,6 +548,7 @@ export class CreateMarkerModal extends Modal {
537548
this.marker.type = this.tempMarker.type;
538549
this.marker.iconName = this.tempMarker.iconName;
539550
this.marker.color = this.tempMarker.color;
551+
this.marker.alpha = this.tempMarker.alpha ?? 1;
540552
this.marker.layer = this.tempMarker.layer;
541553
this.marker.transform = this.tempMarker.transform;
542554
this.marker.isImage = this.tempMarker.isImage;

‎src/settings/settings.ts

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,15 @@ import {
1919
setValidationError,
2020
getMarkerIcon,
2121
DEFAULT_TILE_SERVER,
22-
DEFAULT_ATTRIBUTION, DEFAULT_TILE_SUBDOMAINS
22+
DEFAULT_ATTRIBUTION,
23+
DEFAULT_TILE_SUBDOMAINS
2324
} from "src/utils";
2425
import { IconSuggestionModal } from "src/modals";
2526

26-
import type {
27-
MapMarkerData,
28-
Icon,
29-
SavedMarkerProperties,
30-
TooltipDisplay,
31-
} from "../types";
3227
import { FolderSuggestionModal } from "src/modals/path";
3328
import type ObsidianLeaflet from "src/main";
3429
import t from "src/l10n/locale";
30+
import { TooltipDisplay, SavedMarkerProperties, MapMarkerData } from "types";
3531

3632
export class ObsidianLeafletSettingTab extends PluginSettingTab {
3733
plugin: ObsidianLeaflet;
@@ -292,12 +288,12 @@ export class ObsidianLeafletSettingTab extends PluginSettingTab {
292288
let markers = additionalMarkers.createDiv({
293289
cls: "additional-markers"
294290
});
295-
this.data.markerIcons.forEach((marker) => {
291+
this.plugin.markerIcons.slice(1).forEach((marker) => {
296292
let setting = new Setting(markers)
297293
.addExtraButton((b) =>
298294
b.onClick(async () => {
299295
const edit = await this.plugin.createNewMarkerType({
300-
original: marker
296+
original: marker.markerIcon
301297
});
302298
if (!edit || !edit.type || !edit.iconName) {
303299
return;
@@ -328,27 +324,15 @@ export class ObsidianLeafletSettingTab extends PluginSettingTab {
328324
})
329325
);
330326

331-
const params =
332-
marker.layer && !this.data.defaultMarker.isImage
333-
? {
334-
transform: marker.transform,
335-
mask: getIcon(this.data.defaultMarker.iconName)
336-
}
337-
: {};
338-
let iconNode = getMarkerIcon(marker, params).node;
339-
340327
let markerIconDiv = createDiv({
341-
cls: "marker-icon-display",
342-
attr: {
343-
style: `color: ${marker.color};`
344-
}
328+
cls: "marker-icon-display"
345329
});
346-
markerIconDiv.appendChild(iconNode);
330+
markerIconDiv.innerHTML = marker.html;
347331
let name = setting.nameEl.createDiv("marker-type-display");
348332
name.appendChild(markerIconDiv);
349333
name.appendText(marker.type);
350-
if (marker.tags && marker.tags.length) {
351-
setting.setDesc(marker.tags.join(", "));
334+
if (marker.markerIcon.tags && marker.markerIcon.tags.length) {
335+
setting.setDesc(marker.markerIcon.tags.join(", "));
352336
}
353337
});
354338
}
@@ -418,7 +402,9 @@ export class ObsidianLeafletSettingTab extends PluginSettingTab {
418402
new Setting(containerEl)
419403
.setName(t("Default Tile Server"))
420404
.setDesc(
421-
t("It is up to you to ensure you have proper access to this tile server.")
405+
t(
406+
"It is up to you to ensure you have proper access to this tile server."
407+
)
422408
)
423409
.addText((t) => {
424410
t.setValue(this.plugin.data.defaultTile).onChange((v) => {
@@ -440,20 +426,25 @@ export class ObsidianLeafletSettingTab extends PluginSettingTab {
440426
new Setting(containerEl)
441427
.setName(t("Default Tile Server Subdomains"))
442428
.setDesc(
443-
t("Available subdomains for this tile server concurrent requests.")
429+
t(
430+
"Available subdomains for this tile server concurrent requests."
431+
)
444432
)
445433
.addText((t) => {
446-
t.setValue(this.plugin.data.defaultTileSubdomains).onChange((v) => {
447-
this.plugin.data.defaultTileSubdomains = v;
448-
this.plugin.saveSettings();
449-
});
434+
t.setValue(this.plugin.data.defaultTileSubdomains).onChange(
435+
(v) => {
436+
this.plugin.data.defaultTileSubdomains = v;
437+
this.plugin.saveSettings();
438+
}
439+
);
450440
})
451441
.addExtraButton((b) =>
452442
b
453443
.setIcon("reset")
454444
.setTooltip(t("Reset"))
455445
.onClick(() => {
456-
this.plugin.data.defaultTileSubdomains = DEFAULT_TILE_SUBDOMAINS;
446+
this.plugin.data.defaultTileSubdomains =
447+
DEFAULT_TILE_SUBDOMAINS;
457448

458449
this.createMapSettings(containerEl);
459450
this.plugin.saveSettings();
@@ -462,7 +453,9 @@ export class ObsidianLeafletSettingTab extends PluginSettingTab {
462453
new Setting(containerEl)
463454
.setName(t("Default Tile Server Attribution"))
464455
.setDesc(
465-
t("Please ensure your attribution meets all requirements set by the tile server.")
456+
t(
457+
"Please ensure your attribution meets all requirements set by the tile server."
458+
)
466459
)
467460
.addTextArea((t) => {
468461
t.setValue(this.plugin.data.defaultAttribution).onChange(
@@ -487,7 +480,9 @@ export class ObsidianLeafletSettingTab extends PluginSettingTab {
487480
new Setting(containerEl)
488481
.setName(t("Default Tile Server (Dark Mode)"))
489482
.setDesc(
490-
t("It is up to you to ensure you have proper access to this tile server.")
483+
t(
484+
"It is up to you to ensure you have proper access to this tile server."
485+
)
491486
)
492487
.addText((t) => {
493488
t.setValue(this.plugin.data.defaultTileDark).onChange((v) => {
@@ -784,7 +779,8 @@ export class ObsidianLeafletSettingTab extends PluginSettingTab {
784779
lastAccessed: Date.now(),
785780
markers: [],
786781
overlays: [],
787-
shapes: []
782+
shapes: [],
783+
locked: false
788784
};
789785
this.data.mapMarkers.push(map);
790786
}
@@ -823,7 +819,8 @@ export class ObsidianLeafletSettingTab extends PluginSettingTab {
823819
}
824820
} catch (e) {
825821
new Notice(
826-
t("There was an error while importing %1", files[0].name));
822+
t("There was an error while importing %1", files[0].name)
823+
);
827824
console.error(e);
828825
}
829826

‎types/marker.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { TooltipDisplay } from ".";
1+
import { Icon, TooltipDisplay } from ".";
22
import { MarkerDivIcon } from "./map";
33
import type { Marker as MarkerDefinition } from "../layer/marker";
44

@@ -7,6 +7,7 @@ export interface MarkerIcon {
77
readonly type: string;
88
readonly html: string;
99
readonly icon: MarkerDivIcon;
10+
readonly markerIcon: Icon;
1011
}
1112

1213
export interface MarkerProperties {

‎types/saved.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export interface Icon {
1010
isImage?: boolean;
1111
imageUrl?: string;
1212
color?: string;
13+
alpha?: number;
1314
layer?: boolean;
1415
transform?: { size: number; x: number; y: number };
1516
tags?: string[];

0 commit comments

Comments
 (0)