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

editor UI for better experience :))

Browse Source
This commit is contained in:
taDuc
2026-05-12 21:35:27 +07:00
parent 94c58e1d42
commit cb3e720644
8 changed files with 309 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/uhm/components/editor/EntityWikiBindingsPanel.tsx
+47 -26
View File
@@ -1,12 +1,11 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import type { Entity } from "@/uhm/types/entities";
import { useMemo, useState } from "react";
import type { WikiSnapshot } from "@/uhm/types/wiki";
import type { EntityWikiLinkSnapshot } from "@/uhm/types/projects";
type EntityChoice = { id: string; name: string };
type WikiChoice = { id: string; title: string; operation?: string };
type WikiChoice = { id: string; title: string };
type Props = {
entities: EntityChoice[];
@@ -29,7 +28,7 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
() =>
(wikis || [])
.filter((w) => w && typeof w.id === "string" && w.id.trim().length > 0)
.map((w) => ({ id: w.id, title: wikiTitle(w), operation: w.operation })),
.map((w) => ({ id: w.id, title: wikiTitle(w) })),
[wikis]
);
@@ -39,17 +38,6 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
return cleaned;
}, [entities]);
// Don't auto-select entity. The user must explicitly pick one.
// Only clear the selection if the currently selected entity is no longer available.
useEffect(() => {
if (!activeEntityId) return;
const stillExists = entityChoices.some((e) => e.id === activeEntityId);
if (!stillExists) {
setActiveEntityId("");
setActiveWikiId("");
}
}, [activeEntityId, entityChoices]);
const activeLinks = useMemo(() => {
const set = new Set<string>();
for (const l of links || []) {
@@ -144,6 +132,12 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
</option>
))}
</select>
{activeEntityId ? (
<ActiveSelectionLabel
label={entityChoices.find((e) => e.id === activeEntityId)?.name || activeEntityId}
id={activeEntityId}
/>
) : null}
</div>
<div>
@@ -175,6 +169,12 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
</option>
))}
</select>
{activeWikiChoice ? (
<ActiveSelectionLabel
label={activeWikiChoice.title}
id={activeWikiChoice.id}
/>
) : null}
{wikiChoices.length === 0 ? (
<div style={{ fontSize: "12px", color: "#94a3b8" }}>No wiki in project yet.</div>
@@ -228,17 +228,19 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
title={id}
>
<div style={{ minWidth: 0 }}>
<div
style={{
color: "#e5e7eb",
fontSize: 12,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
fontWeight: 700,
}}
>
{w?.title || "Untitled wiki"}
<div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
<span
style={{
color: "#e5e7eb",
fontSize: 12,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
fontWeight: 700,
}}
>
{w?.title || "Untitled wiki"}
</span>
</div>
<div style={{ color: "#94a3b8", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{id}
@@ -279,6 +281,25 @@ export default function EntityWikiBindingsPanel({ entities, wikis, links, setLin
);
}
function ActiveSelectionLabel({
label,
id,
}: {
label: string;
id: string;
}) {
return (
<div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
<span style={{ color: "#cbd5e1", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{label}
</span>
<span style={{ color: "#64748b", fontSize: 11, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{id}
</span>
</div>
);
}
function PlusIcon() {
return (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
src/uhm/components/editor/GeometryBindingPanel.tsx
+101 -10
View File
@@ -1,10 +1,12 @@
"use client";
import { useMemo, useState } from "react";
import { useMemo, useState, type KeyboardEvent } from "react";
import NewBadge from "@/uhm/components/editor/NewBadge";
type GeometryChoice = {
id: string;
label?: string;
isNew?: boolean;
};
type Props = {
@@ -12,6 +14,7 @@ type Props = {
selectedGeometryId: string | null;
selectedGeometryBindingIds: string[];
onToggleBindGeometryForSelectedGeometry?: (geometryId: string, nextChecked: boolean) => void;
onFocusGeometry?: (geometryId: string) => void;
statusText?: string | null;
bindingFilterEnabled: boolean;
onBindingFilterEnabledChange: (next: boolean) => void;
@@ -22,25 +25,37 @@ export default function GeometryBindingPanel({
selectedGeometryId,
selectedGeometryBindingIds,
onToggleBindGeometryForSelectedGeometry,
onFocusGeometry,
statusText,
bindingFilterEnabled,
onBindingFilterEnabledChange,
}: Props) {
const canBindToggle =
Boolean(selectedGeometryId) && typeof onToggleBindGeometryForSelectedGeometry === "function";
const canFocusGeometry = typeof onFocusGeometry === "function";
const [collapsed, setCollapsed] = useState(false);
const rows = useMemo(() => {
const cleaned = (geometries || [])
.filter((g) => g && typeof g.id === "string" && g.id.trim().length > 0)
.map((g) => ({ id: g.id.trim(), label: (g.label || "").trim() }));
.map((g) => ({ id: g.id.trim(), label: (g.label || "").trim(), isNew: Boolean(g.isNew) }));
cleaned.sort((a, b) => a.id.localeCompare(b.id));
return cleaned;
}, [geometries]);
const bindingSet = useMemo(() => new Set(selectedGeometryBindingIds || []), [selectedGeometryBindingIds]);
const selectedGeometry = useMemo(() => {
if (!selectedGeometryId) return null;
return rows.find((g) => g.id === selectedGeometryId) || null;
}, [rows, selectedGeometryId]);
const handleFocusKeyDown = (event: KeyboardEvent<HTMLDivElement>, geometryId: string) => {
if (!canFocusGeometry) return;
if (event.key !== "Enter" && event.key !== " ") return;
event.preventDefault();
onFocusGeometry?.(geometryId);
};
return (
<div
@@ -99,6 +114,64 @@ export default function GeometryBindingPanel({
</div>
</div>
{collapsed ? null : selectedGeometry ? (
<div
style={{
marginTop: 10,
padding: "8px",
borderRadius: "6px",
border: "1px solid rgba(59, 130, 246, 0.45)",
background: "rgba(37, 99, 235, 0.12)",
cursor: canFocusGeometry ? "pointer" : "default",
}}
title={selectedGeometry.id}
role={canFocusGeometry ? "button" : undefined}
tabIndex={canFocusGeometry ? 0 : undefined}
onClick={() => onFocusGeometry?.(selectedGeometry.id)}
onKeyDown={(event) => handleFocusKeyDown(event, selectedGeometry.id)}
>
<div
style={{
fontSize: 10,
color: "#93c5fd",
fontWeight: 900,
textTransform: "uppercase",
lineHeight: 1,
marginBottom: 5,
}}
>
Selected
</div>
<div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
<span
style={{
fontSize: "12px",
color: "#e5e7eb",
fontWeight: 700,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{selectedGeometry.label || selectedGeometry.id}
</span>
{selectedGeometry.isNew ? <NewBadge /> : null}
</div>
<div
style={{
marginTop: 3,
fontSize: "11px",
color: "#94a3b8",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{selectedGeometry.id}
</div>
</div>
) : null}
{collapsed ? null : rows.length ? (
<div style={{ marginTop: "10px", display: "grid", gap: "6px", maxHeight: 250, overflowY: "auto", paddingRight: 4 }}>
{rows
@@ -116,22 +189,37 @@ export default function GeometryBindingPanel({
display: "flex",
alignItems: "center",
gap: 10,
cursor: canFocusGeometry ? "pointer" : "default",
opacity: canBindToggle ? 1 : 0.75,
}}
title={g.id}
role={canFocusGeometry ? "button" : undefined}
tabIndex={canFocusGeometry ? 0 : undefined}
onClick={() => onFocusGeometry?.(g.id)}
onKeyDown={(event) => handleFocusKeyDown(event, g.id)}
>
<div style={{ flex: 1, minWidth: 0 }}>
<div
style={{
fontSize: "12px",
color: "#e5e7eb",
fontWeight: 700,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
display: "flex",
alignItems: "center",
gap: 6,
minWidth: 0,
}}
>
{g.label || g.id}
<span
style={{
fontSize: "12px",
color: "#e5e7eb",
fontWeight: 700,
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{g.label || g.id}
</span>
{g.isNew ? <NewBadge /> : null}
</div>
<div
style={{
@@ -150,7 +238,10 @@ export default function GeometryBindingPanel({
<button
type="button"
title={isBound ? "Unbind from selected geometry" : "Bind to selected geometry"}
onClick={() => onToggleBindGeometryForSelectedGeometry!(g.id, !isBound)}
onClick={(event) => {
event.stopPropagation();
onToggleBindGeometryForSelectedGeometry!(g.id, !isBound);
}}
style={{
display: "inline-flex",
alignItems: "center",
src/uhm/components/editor/ProjectEntityRefsPanel.tsx
+22 -18
View File
@@ -1,8 +1,9 @@
"use client";
import { useEffect, useMemo, useState, type CSSProperties } from "react";
import { useMemo, useState, type CSSProperties } from "react";
import type { EntitySnapshot } from "@/uhm/types/entities";
import type { EntityFormState } from "@/uhm/lib/editor/session/sessionTypes";
import NewBadge from "@/uhm/components/editor/NewBadge";
type Props = {
entityRefs: EntitySnapshot[];
@@ -46,18 +47,11 @@ export default function ProjectEntityRefsPanel({
const [editName, setEditName] = useState("");
const [editDescription, setEditDescription] = useState("");
useEffect(() => {
if (!activeEntityId) return;
if (!entityRefs.some((e) => String(e.id) === String(activeEntityId))) {
setActiveEntityId(null);
}
}, [activeEntityId, entityRefs]);
useEffect(() => {
if (!activeEntity) return;
setEditName(typeof activeEntity.name === "string" ? activeEntity.name : "");
setEditDescription(activeEntity.description == null ? "" : String(activeEntity.description));
}, [activeEntity?.description, activeEntity?.id, activeEntity?.name]);
const openEntityEditor = (entity: EntitySnapshot) => {
setActiveEntityId(String(entity.id));
setEditName(typeof entity.name === "string" ? entity.name : "");
setEditDescription(entity.description == null ? "" : String(entity.description));
};
return (
<div
@@ -113,7 +107,7 @@ export default function ProjectEntityRefsPanel({
>
<button
type="button"
onClick={() => setActiveEntityId(String(e.id))}
onClick={() => openEntityEditor(e)}
title="Chon de sua"
style={{
flex: 1,
@@ -126,8 +120,11 @@ export default function ProjectEntityRefsPanel({
}}
disabled={!canEditEntity}
>
<div style={{ fontSize: "12px", color: "#e5e7eb", fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{e.name || e.id}
<div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
<span style={{ fontSize: "12px", color: "#e5e7eb", fontWeight: 700, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{e.name || e.id}
</span>
{isNewEntityRef(e) ? <NewBadge /> : null}
</div>
<div style={{ fontSize: "11px", color: "#94a3b8", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
{e.id}
@@ -189,8 +186,11 @@ export default function ProjectEntityRefsPanel({
}}
>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
<div style={{ color: "#a7f3d0", fontWeight: 700, fontSize: "12px" }}>
Sua entity
<div style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
<span style={{ color: "#a7f3d0", fontWeight: 700, fontSize: "12px" }}>
Sua entity
</span>
{isNewEntityRef(activeEntity) ? <NewBadge /> : null}
</div>
<button
type="button"
@@ -344,6 +344,10 @@ export default function ProjectEntityRefsPanel({
);
}
function isNewEntityRef(entity: EntitySnapshot | null | undefined): boolean {
return entity?.source === "inline" && entity?.operation === "create";
}
const entityInputStyle: CSSProperties = {
width: "100%",
borderRadius: "6px",
src/uhm/components/map/mapUtils.ts
+13 -5
View File
@@ -265,21 +265,29 @@ export function setSelectedFeatureState(
export function fitMapToFeatureCollection(
map: maplibregl.Map,
fc: FeatureCollection,
padding?: number | maplibregl.PaddingOptions
padding?: number | maplibregl.PaddingOptions,
options?: {
duration?: number;
maxZoom?: number;
pointZoom?: number;
}
): boolean {
const bbox = getFeatureCollectionBBox(fc);
if (!bbox) return false;
const resolvedPadding = typeof padding === "number" || padding ? padding : 58;
const duration = options?.duration ?? 0;
const maxZoom = options?.maxZoom ?? 7;
const pointZoom = options?.pointZoom ?? 6;
const lngSpan = Math.abs(bbox.maxLng - bbox.minLng);
const latSpan = Math.abs(bbox.maxLat - bbox.minLat);
if (lngSpan < 0.000001 && latSpan < 0.000001) {
map.easeTo({
center: [bbox.minLng, bbox.minLat],
zoom: 6,
zoom: pointZoom,
padding: resolvedPadding,
duration: 0,
duration,
});
return true;
}
@@ -291,8 +299,8 @@ export function fitMapToFeatureCollection(
],
{
padding: resolvedPadding,
maxZoom: 7,
duration: 0,
maxZoom,
duration,
}
);
return true;
src/uhm/components/map/useMapSync.ts
+26 -10
View File
@@ -65,9 +65,6 @@ export function useMapSync({
const respectBindingFilterRef = useRef(respectBindingFilter);
const fitToDraftBoundsRef = useRef(fitToDraftBounds);
const highlightFeaturesRef = useRef<FeatureCollection | null>(highlightFeatures || null);
const focusFeatureCollectionRef = useRef<FeatureCollection | null>(focusFeatureCollection || null);
const focusRequestKeyRef = useRef<string | number | null>(focusRequestKey || null);
const focusPaddingRef = useRef<number | maplibregl.PaddingOptions | undefined>(focusPadding);
const fitBoundsAppliedRef = useRef(false);
@@ -79,9 +76,6 @@ export function useMapSync({
useEffect(() => { respectBindingFilterRef.current = respectBindingFilter; }, [respectBindingFilter]);
useEffect(() => { fitToDraftBoundsRef.current = fitToDraftBounds; }, [fitToDraftBounds]);
useEffect(() => { highlightFeaturesRef.current = highlightFeatures || null; }, [highlightFeatures]);
useEffect(() => { focusFeatureCollectionRef.current = focusFeatureCollection || null; }, [focusFeatureCollection]);
useEffect(() => { focusRequestKeyRef.current = focusRequestKey || null; }, [focusRequestKey]);
useEffect(() => { focusPaddingRef.current = focusPadding; }, [focusPadding]);
useEffect(() => {
fitBoundsAppliedRef.current = false;
@@ -205,11 +199,33 @@ export function useMapSync({
useEffect(() => {
if (focusRequestKey === null || focusRequestKey === undefined) return;
const map = mapRef.current;
if (!map || !map.isStyleLoaded()) return;
const target = focusFeatureCollectionRef.current;
const target = focusFeatureCollection;
if (!target || !target.features.length) return;
fitMapToFeatureCollection(map, target, focusPaddingRef.current);
}, [focusRequestKey, mapRef]);
if (!map) return;
let cancelled = false;
let rafId: number | null = null;
const focus = () => {
if (cancelled || mapRef.current !== map || !map.isStyleLoaded()) return;
fitMapToFeatureCollection(map, target, focusPadding, {
duration: 550,
maxZoom: 10,
pointZoom: 9,
});
};
if (map.isStyleLoaded()) {
rafId = requestAnimationFrame(focus);
} else {
map.once("idle", focus);
}
return () => {
cancelled = true;
if (rafId !== null) cancelAnimationFrame(rafId);
};
}, [focusFeatureCollection, focusPadding, focusRequestKey, mapRef]);
return {
applyDraftToMap,
src/uhm/components/wiki/WikiSidebarPanel.tsx
+45 -30
View File
@@ -12,8 +12,29 @@ import type { WikiSnapshot } from "@/uhm/types/wiki";
import { newId } from "@/uhm/lib/utils/id";
import type ReactQuill from "react-quill-new";
import { checkWikiSlugExists, fetchWikiBySlug, searchWikisByTitle, type Wiki } from "@/uhm/api/wikis";
import NewBadge from "@/uhm/components/editor/NewBadge";
type ReactQuillProps = ComponentProps<typeof ReactQuill>;
type QuillRange = { index: number; length: number };
type QuillLike = {
getSelection?: () => QuillRange | null;
getFormat?: (...args: unknown[]) => Record<string, unknown>;
setSelection?: (...args: unknown[]) => void;
formatText?: (...args: unknown[]) => void;
insertText?: (...args: unknown[]) => void;
format?: (...args: unknown[]) => void;
getText?: (index: number, length: number) => string;
};
type QuillModule = {
Quill?: {
import?: (path: string) => unknown;
};
};
type QuillLinkFormat = {
sanitize?: (url: unknown) => unknown;
__uhmAllowSlugHref?: boolean;
__uhmOriginalSanitize?: unknown;
};
const ReactQuillEditor = dynamic<ReactQuillProps>(() => import("react-quill-new"), {
ssr: false,
@@ -55,12 +76,12 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
// Quill: custom link UI (link-to-wiki by slug).
const wikiLinkIntentRef = useRef<{
quill: any;
range: { index: number; length: number } | null;
quill: QuillLike;
range: QuillRange | null;
activeWikiId: string | null;
existingHref: string | null;
} | null>(null);
const wikiLinkHandlerRef = useRef<(quill: any) => void>(() => {});
const wikiLinkHandlerRef = useRef<(quill: QuillLike | null | undefined) => void>(() => {});
const [isWikiLinkOpen, setIsWikiLinkOpen] = useState(false);
const [wikiLinkQuery, setWikiLinkQuery] = useState("");
const [wikiLinkError, setWikiLinkError] = useState<string | null>(null);
@@ -85,13 +106,13 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
(async () => {
try {
const mod: any = await import("react-quill-new");
const mod = await import("react-quill-new") as QuillModule;
const Quill = mod?.Quill;
if (!Quill) return;
const Link = Quill.import?.("formats/link");
if (!Link) return;
const anyLink = Link as any;
const anyLink = Link as QuillLinkFormat;
if (anyLink.__uhmAllowSlugHref) return;
const original = anyLink.sanitize;
anyLink.sanitize = (url: unknown) => {
@@ -136,24 +157,6 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [wikis.length]);
const openEditor = () => {
if (!wikis.length) {
const id = newId();
const seed: WikiSnapshot = {
id,
source: "inline",
operation: "create",
title: "Untitled wiki",
slug: null,
doc: "",
updated_at: new Date().toISOString(),
};
setWikis((prev) => [seed, ...prev]);
setActiveId(id);
}
setOpen(true);
};
const createWikiAndOpen = (title?: string, slug?: string | null) => {
const id = newId();
const seedTitle = clampTitle(title || "Untitled wiki");
@@ -501,7 +504,7 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
}, [closeWikiLinkModal]);
// Keep handler ref updated while keeping modules object stable.
wikiLinkHandlerRef.current = (quill: any) => {
wikiLinkHandlerRef.current = (quill: QuillLike | null | undefined) => {
if (!quill) return;
const range = quill.getSelection?.() ?? null;
// Try to read current link format (if any) from the selection.
@@ -529,7 +532,7 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
container: QUILL_TOOLBAR,
handlers: {
// NOTE: use function() to preserve Quill toolbar `this` binding.
link: function (this: any) {
link: function (this: { quill?: QuillLike }) {
wikiLinkHandlerRef.current(this?.quill);
},
},
@@ -602,14 +605,22 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
background: "transparent",
color: "#e5e7eb",
cursor: "pointer",
fontSize: "12px",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
title={w.title}
>
{w.title}
<span style={{ display: "flex", alignItems: "center", gap: 6, minWidth: 0 }}>
<span
style={{
fontSize: "12px",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{w.title}
</span>
{isNewWiki(w) ? <NewBadge /> : null}
</span>
</button>
<button
type="button"
@@ -974,6 +985,10 @@ export default function WikiSidebarPanel({ projectId, wikis, setWikis, autoOpen,
);
}
function isNewWiki(wiki: WikiSnapshot | null | undefined): boolean {
return wiki?.source === "inline" && wiki?.operation === "create";
}
function PlusIcon() {
return (
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">