Kain344/History-user
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: point view

Browse Source
This commit is contained in:
taDuc
2026-05-12 17:42:59 +07:00
parent d40c3831cb
commit 7b1f7538ab
17 changed files with 89 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/uhm/lib/map/constants.ts
-2
View File
@@ -1,5 +1,3 @@
export const DEFAULT_POINT_ICON_ID = "point-icon-default";
export const POINT_ICON_URL = "/point.png";
export const PATH_ARROW_ICON_ID = "path-arrow-icon";
export const MAP_MIN_ZOOM = 2;
src/uhm/lib/map/styles/geotypes/bridge.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getBridgeLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "bridge-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "bridge"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "bridge-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "bridge"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("bridge", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/capital.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getCapitalLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "capital-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "capital"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "capital-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "capital"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("capital", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/castle.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getCastleLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "castle-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "castle"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "castle-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "castle"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("castle", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/city.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getCityLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "city-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "city"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "city-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "city"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("city", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/fortress.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getFortressLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "fortress-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "fortress"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "fortress-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "fortress"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("fortress", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/index.ts
+1
View File
@@ -1,5 +1,6 @@
import maplibregl from "maplibre-gl";
export const TYPE_MATCH_EXPR: maplibregl.ExpressionSpecification = ["coalesce", ["get", "type"], ["get", "entity_type_id"], ""];
export { ensurePointGeotypeIcons } from "./pointStyle";
import { getDefenseLineLayers } from "./defense_line";
import { getAttackRouteLayers } from "./attack_route";
src/uhm/lib/map/styles/geotypes/person_activity.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getPersonActivityLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "person_activity-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_activity"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "person_activity-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_activity"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("person_activity", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/person_birthplace.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getPersonBirthplaceLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "person_birthplace-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_birthplace"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "person_birthplace-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_birthplace"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("person_birthplace", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/person_deathplace.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getPersonDeathplaceLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "person_deathplace-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_deathplace"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "person_deathplace-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "person_deathplace"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("person_deathplace", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/port.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getPortLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "port-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "port"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "port-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "port"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("port", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/ruin.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getRuinLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "ruin-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "ruin"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "ruin-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "ruin"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("ruin", pointSourceId!);
}
src/uhm/lib/map/styles/geotypes/temple.ts
+4 -49
View File
@@ -1,53 +1,8 @@
import { LayerSpecification } from "maplibre-gl";
import { TYPE_MATCH_EXPR } from "./index";
import { buildPointGeotypeLayers } from "./pointStyle";
export function getTempleLayers(sourceId: string, pathArrowSourceId?: string, pointSourceId?: string): LayerSpecification[] {
return [
{
id: "temple-circle",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "temple"]],
paint: {
"circle-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#22c55e",
"#ef4444"
],
"circle-radius": [
"case",
["boolean", ["feature-state", "selected"], false], 8, 4
],
"circle-stroke-color": [
"case",
["boolean", ["feature-state", "selected"], false], "#14532d",
"#ffffff"
],
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 3, 1
],
"circle-opacity": 0.9
}
},
{
id: "temple-selected-halo",
type: "circle",
source: pointSourceId!,
filter: ["all", ["==", ["geometry-type"], "Point"], ["==", TYPE_MATCH_EXPR, "temple"]],
paint: {
"circle-color": "#22c55e",
"circle-radius": 13,
"circle-opacity": [
"case",
["boolean", ["feature-state", "selected"], false], 0.28, 0
],
"circle-stroke-color": "#14532d",
"circle-stroke-width": [
"case",
["boolean", ["feature-state", "selected"], false], 2, 0
]
}
}
];
void sourceId;
void pathArrowSourceId;
return buildPointGeotypeLayers("temple", pointSourceId!);
}