20256426/Map-Jurnal
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added logo image and slogan to sign in page

Browse Source
This commit is contained in:
haerikimmm
2026-06-16 15:20:07 +09:00
parent 06e5fe5593
commit d2fb40f692
26 changed files with 1553 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/world-map/WorldMap.svelte
View File

@@ -3,7 +3,7 @@
import * as d3 from 'd3';
import { feature } from 'topojson-client';
import worldData from 'world-atlas/countries-50m.json';
import { getSelected, toggle, setTotalCount, getHomeCountryCode } from '../layout/selection.svelte.js';
import { getSelected, setTotalCount } from '../layout/selection.svelte.js';
let { onCountryClick = (_name) => {} } = $props();
@@ -84,10 +84,9 @@
function updateAllFills() {
const sel = getSelected();
const hc = getHomeCountryCode();
if (!_paths || !_g) return;
_paths.attr('fill', d => countryColor(d, sel, hc));
_g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, hc));
_paths.attr('fill', d => countryColor(d, sel, null));
_g.selectAll('.micro-state').attr('fill', d => countryColor(d, sel, null));
}
$effect(updateAllFills);
@@ -123,24 +122,14 @@
.attr('class', 'tooltip')
.style('display', 'none');
function updateFill(sel) {
const s = getSelected();
const hc = getHomeCountryCode();
sel.attr('fill', d => countryColor(d, s, hc));
_g.selectAll('.micro-state').attr('fill', d => countryColor(d, s, hc));
}
function attachEvents(sel) {
sel
.on('click', (event, d) => {
toggle(effId(d));
updateFill(d3.select(event.currentTarget));
onCountryClick(d.properties.name);
})
.on('mouseenter', (event, d) => {
const s = getSelected();
const hc = getHomeCountryCode();
d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, hc));
d3.select(event.currentTarget).attr('fill', countryHoverColor(d, s, null));
tooltip.style('display', 'block').text(d.properties.name);
})
.on('mousemove', (event) => {
@@ -149,8 +138,7 @@
})
.on('mouseleave', (event, d) => {
const s = getSelected();
const hc = getHomeCountryCode();
d3.select(event.currentTarget).attr('fill', countryColor(d, s, hc));
d3.select(event.currentTarget).attr('fill', countryColor(d, s, null));
tooltip.style('display', 'none');
});
}
@@ -172,14 +160,13 @@
const { width, height } = this.getBBox();
if (width < threshold && height < threshold) {
const [cx, cy] = path.centroid(d);
const hc = getHomeCountryCode();
const c = _g.append('circle')
.attr('class', 'micro-state')
.datum(d)
.attr('cx', cx)
.attr('cy', cy)
.attr('r', 2)
.attr('fill', countryColor(d, getSelected(), hc))
.attr('fill', countryColor(d, getSelected(), null))
.attr('stroke', '#94a3b8')
.attr('stroke-width', 0.5);
attachEvents(c);