@lingkkkk/atlas-mindmap 0.1.0

package/dist/index.css

@@ -0,0 +1,237 @@
+/* ../vanilla/src/styles.css */
+.mm-root {
+  --mm-surface-base: #090d16;
+  --mm-focus-glow: rgba(91, 75, 191, 0.18);
+  --mm-grid-dot: rgba(131, 145, 181, 0.13);
+  --mm-canvas-top: rgba(13, 18, 31, 0.82);
+  --mm-canvas-bottom: rgba(7, 10, 18, 0.98);
+  --mm-color: #dfe7ff;
+  --mm-overlay-border: rgba(150, 160, 225, 0.22);
+  --mm-overlay-bg: rgba(17, 23, 43, 0.94);
+  --mm-overlay-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
+  --mm-overlay-text: #dce4ff;
+  --mm-overlay-hover: rgba(124, 108, 255, 0.25);
+  --mm-editor-border: #8f82ff;
+  --mm-editor-color: #fff;
+  --mm-editor-bg: #171e37;
+  --mm-editor-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
+  --mm-hud-border: rgba(127, 145, 211, 0.18);
+  --mm-hud-color: #aebbdc;
+  --mm-hud-bg: rgba(9, 14, 28, 0.84);
+  --mm-hud-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
+  --mm-hud-title: #d9e2ff;
+  --mm-hud-value: #e7ecff;
+  --mm-status-border: rgba(79, 230, 188, 0.28);
+  --mm-status-color: #bff9e8;
+  --mm-status-bg: rgba(12, 43, 39, 0.92);
+  --mm-error-border: rgba(255, 114, 142, 0.35);
+  --mm-error-color: #ffd2da;
+  --mm-error-bg: rgba(56, 18, 31, 0.94);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+  overflow: hidden;
+  color: var(--mm-color);
+  background-color: var(--mm-surface-base);
+  background-image:
+    radial-gradient(
+      circle at 18% 12%,
+      var(--mm-focus-glow),
+      transparent 36%),
+    radial-gradient(
+      circle,
+      var(--mm-grid-dot) 0.85px,
+      transparent 1px),
+    linear-gradient(
+      180deg,
+      var(--mm-canvas-top),
+      var(--mm-canvas-bottom));
+  background-position:
+    0 0,
+    0 0,
+    0 0;
+  background-size:
+    auto,
+    28px 28px,
+    auto;
+  outline: none;
+  user-select: none;
+}
+.mm-root[data-theme=light] {
+  --mm-surface-base: #f0f3f8;
+  --mm-focus-glow: rgba(105, 92, 224, 0.1);
+  --mm-grid-dot: rgba(74, 88, 119, 0.15);
+  --mm-canvas-top: rgba(248, 250, 255, 0.96);
+  --mm-canvas-bottom: rgba(236, 241, 248, 0.98);
+  --mm-color: #273149;
+  --mm-overlay-border: rgba(72, 84, 122, 0.18);
+  --mm-overlay-bg: rgba(255, 255, 255, 0.94);
+  --mm-overlay-shadow: 0 12px 28px rgba(42, 50, 75, 0.15);
+  --mm-overlay-text: #303b55;
+  --mm-overlay-hover: rgba(104, 87, 229, 0.12);
+  --mm-editor-border: #6758d9;
+  --mm-editor-color: #202840;
+  --mm-editor-bg: #fff;
+  --mm-editor-shadow: 0 14px 34px rgba(42, 50, 75, 0.2);
+  --mm-hud-border: rgba(72, 84, 122, 0.18);
+  --mm-hud-color: #59647d;
+  --mm-hud-bg: rgba(255, 255, 255, 0.88);
+  --mm-hud-shadow: 0 16px 36px rgba(42, 50, 75, 0.14);
+  --mm-hud-title: #303a52;
+  --mm-hud-value: #202940;
+  --mm-status-border: rgba(22, 139, 116, 0.24);
+  --mm-status-color: #126f5e;
+  --mm-status-bg: rgba(231, 250, 244, 0.96);
+  --mm-error-border: rgba(194, 54, 84, 0.24);
+  --mm-error-color: #9d2843;
+  --mm-error-bg: rgba(255, 238, 242, 0.96);
+}
+.mm-root:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(129, 119, 255, 0.72);
+}
+.mm-canvas {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  touch-action: none;
+}
+.mm-canvas:active {
+  cursor: grabbing;
+}
+.mm-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.mm-shared-toolbar {
+  position: absolute;
+  z-index: 5;
+  display: flex;
+  gap: 4px;
+  padding: 5px;
+  border: 1px solid var(--mm-overlay-border);
+  border-radius: 11px;
+  background: var(--mm-overlay-bg);
+  box-shadow: var(--mm-overlay-shadow);
+  backdrop-filter: blur(14px);
+  pointer-events: auto;
+}
+.mm-shared-toolbar[hidden] {
+  display: none;
+}
+.mm-shared-toolbar button {
+  width: 28px;
+  height: 28px;
+  border: 0;
+  border-radius: 7px;
+  color: var(--mm-overlay-text);
+  background: transparent;
+  cursor: pointer;
+}
+.mm-shared-toolbar button:hover {
+  background: var(--mm-overlay-hover);
+}
+.mm-text-editor {
+  position: absolute;
+  z-index: 8;
+  box-sizing: border-box;
+  border: 2px solid var(--mm-editor-border);
+  border-radius: 11px;
+  padding: 0 12px;
+  color: var(--mm-editor-color);
+  background: var(--mm-editor-bg);
+  box-shadow: var(--mm-editor-shadow);
+  font:
+    550 13px Inter,
+    system-ui,
+    sans-serif;
+  outline: none;
+  pointer-events: auto;
+}
+.mm-performance-hud {
+  position: absolute;
+  z-index: 3;
+  right: 16px;
+  bottom: 16px;
+  width: 232px;
+  padding: 13px 15px;
+  border: 1px solid var(--mm-hud-border);
+  border-radius: 14px;
+  color: var(--mm-hud-color);
+  background: var(--mm-hud-bg);
+  box-shadow: var(--mm-hud-shadow);
+  backdrop-filter: blur(15px);
+  font:
+    500 11px/1.45 Inter,
+    system-ui,
+    sans-serif;
+}
+.mm-hud-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 9px;
+  color: var(--mm-hud-title);
+  font-size: 10px;
+  font-weight: 750;
+  letter-spacing: 0.13em;
+}
+.mm-live-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #42e2b8;
+  box-shadow: 0 0 12px rgba(66, 226, 184, 0.75);
+}
+.mm-hud-grid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 4px 12px;
+}
+.mm-hud-grid strong {
+  color: var(--mm-hud-value);
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+  text-align: right;
+}
+.mm-status {
+  position: absolute;
+  left: 50%;
+  bottom: 26px;
+  z-index: 10;
+  padding: 9px 14px;
+  border: 1px solid var(--mm-status-border);
+  border-radius: 9px;
+  color: var(--mm-status-color);
+  background: var(--mm-status-bg);
+  opacity: 0;
+  transform: translate(-50%, 10px);
+  transition: 160ms ease;
+  font:
+    600 12px Inter,
+    system-ui,
+    sans-serif;
+}
+.mm-status[data-tone=error] {
+  border-color: var(--mm-error-border);
+  color: var(--mm-error-color);
+  background: var(--mm-error-bg);
+}
+.mm-status.is-visible {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+@media (max-width: 720px) {
+  .mm-performance-hud {
+    right: 8px;
+    bottom: 8px;
+    width: 190px;
+  }
+  .mm-hud-grid {
+    gap-inline: 8px;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,486 @@
+declare class EventEmitter<Events extends object> {
+    private readonly listeners;
+    on<Key extends keyof Events>(event: Key, listener: (payload: Events[Key]) => void): () => void;
+    emit<Key extends keyof Events>(event: Key, payload: Events[Key]): void;
+    clear(): void;
+}
+
+type TopicKind = 'central' | 'main' | 'subtopic' | 'floating' | 'summary-topic';
+type StructureType = 'mind-map' | 'logic-chart' | 'tree-chart' | 'org-chart' | 'brace-map' | 'timeline' | 'fishbone' | 'matrix' | 'tree-table';
+interface TopicStyle {
+    fill?: string;
+    border?: string;
+    color?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    shape?: 'rounded' | 'pill' | 'rect' | 'underline';
+}
+interface TopicInput {
+    id: string;
+    text: string;
+    children?: TopicInput[];
+    expanded?: boolean;
+    kind?: TopicKind;
+    structure?: StructureType;
+    style?: TopicStyle;
+    markers?: string[];
+    labels?: string[];
+    note?: string;
+    hyperlink?: string;
+    image?: string;
+    attachment?: string;
+    equation?: string;
+    task?: {
+        progress: number;
+        dueAt?: string;
+        priority?: number;
+    };
+    extensions?: Record<string, unknown>;
+}
+interface Topic extends Omit<TopicInput, 'children'> {
+    parentId: string | null;
+    childIds: string[];
+    expanded: boolean;
+    kind: TopicKind;
+}
+type TopicPatch = Partial<Pick<Topic, 'text' | 'expanded' | 'kind' | 'structure' | 'style' | 'markers' | 'labels' | 'note' | 'hyperlink' | 'image' | 'attachment' | 'equation' | 'task' | 'extensions'>>;
+interface MindMapErrorData {
+    code: string;
+    message: string;
+    recoverable: boolean;
+    cause?: unknown;
+    context?: Record<string, unknown>;
+}
+interface MindMapPlugin {
+    name: string;
+    version?: string;
+    install(host: unknown): void | Promise<void>;
+    destroy?(): void | Promise<void>;
+}
+interface RelationshipData {
+    id: string;
+    fromId: string;
+    toId: string;
+    text?: string;
+    controlPoints?: Array<{
+        x: number;
+        y: number;
+    }>;
+    extensions?: Record<string, unknown>;
+}
+interface BoundaryData {
+    id: string;
+    ownerTopicId: string;
+    startChildId?: string;
+    endChildId?: string;
+    text?: string;
+    extensions?: Record<string, unknown>;
+}
+interface SummaryData extends BoundaryData {
+    summaryTopicId: string;
+}
+interface MindMapDocumentData {
+    version: 1;
+    title?: string;
+    root: TopicInput;
+    relationships?: RelationshipData[];
+    boundaries?: BoundaryData[];
+    summaries?: SummaryData[];
+    extensions?: Record<string, unknown>;
+}
+
+declare class TopicStore {
+    readonly rootId: string;
+    private readonly topics;
+    private constructor();
+    static fromTree(root: TopicInput): TopicStore;
+    get size(): number;
+    has(id: string): boolean;
+    get(id: string): Topic;
+    tryGet(id: string): Topic | undefined;
+    values(): IterableIterator<Topic>;
+    clone(id: string): Topic;
+    add(parentId: string, input: TopicInput, index?: number): Topic;
+    update(id: string, patch: TopicPatch): Topic;
+    move(id: string, parentId: string, index?: number): Topic;
+    removeSubtree(id: string): Topic[];
+    restoreSubtree(topics: Topic[], parentId: string, index: number): void;
+    setExpanded(id: string, expanded: boolean): boolean;
+    toggle(id: string): boolean;
+    isAncestor(ancestorId: string, possibleDescendantId: string): boolean;
+    depthOf(id: string): number;
+    visibleIds(): string[];
+    toTree(): TopicInput;
+}
+
+type NewTopicInput = Omit<TopicInput, 'id' | 'children'> & {
+    id?: string;
+};
+type DocumentChangeType = 'add' | 'update' | 'delete' | 'move' | 'toggle' | 'reveal' | 'import' | 'undo' | 'redo';
+interface DocumentChange {
+    type: DocumentChangeType;
+    topicId?: string;
+    label?: string;
+    layoutAffecting?: boolean;
+}
+type EngineEvents = {
+    'document:change': DocumentChange;
+    error: MindMapErrorData;
+};
+interface SearchResult {
+    id: string;
+    text: string;
+    path: string[];
+}
+declare class MindMapEngine {
+    store: TopicStore;
+    private readonly events;
+    private readonly history;
+    private idSequence;
+    constructor(root: TopicInput);
+    static fromJSON(json: string): MindMapEngine;
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    on<Key extends keyof EngineEvents>(event: Key, listener: (payload: EngineEvents[Key]) => void): () => void;
+    addChild(parentId: string, input: NewTopicInput): Topic;
+    addSibling(topicId: string, input: NewTopicInput): Topic;
+    updateTopic(topicId: string, patch: TopicPatch): Topic;
+    deleteTopic(topicId: string): void;
+    moveTopic(topicId: string, parentId: string, index?: number): Topic;
+    toggleTopic(topicId: string): boolean;
+    setExpanded(topicId: string, expanded: boolean): void;
+    revealTopic(topicId: string): void;
+    search(query: string, limit?: number): SearchResult[];
+    undo(): boolean;
+    redo(): boolean;
+    exportJSON(): string;
+    importJSON(json: string): void;
+    private static parseDocument;
+    private createTopicInput;
+    private topicPath;
+    private commit;
+}
+
+interface HistoryEntry {
+    label: string;
+    redo(): void;
+    undo(): void;
+}
+declare class History {
+    private readonly undoEntries;
+    private readonly redoEntries;
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    execute(entry: HistoryEntry): void;
+    undo(): HistoryEntry | undefined;
+    redo(): HistoryEntry | undefined;
+    clear(): void;
+}
+
+declare class PluginManager {
+    private readonly host;
+    private readonly onError;
+    private readonly plugins;
+    constructor(host: unknown, onError: (plugin: MindMapPlugin, cause: unknown) => void);
+    use(plugin: MindMapPlugin): Promise<void>;
+    destroy(): Promise<void>;
+}
+
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+interface LayoutResult {
+    ids: string[];
+    indexById: Map<string, number>;
+    parentIndices: Int32Array;
+    x: Float32Array;
+    y: Float32Array;
+    width: Float32Array;
+    height: Float32Array;
+    depth: Uint16Array;
+    branchIndex: Uint16Array;
+    bounds: Rect;
+    maxDepth: number;
+    durationMs: number;
+}
+interface MindMapLayoutOptions {
+    columnGap?: number;
+    rootGap?: number;
+    rowGap?: number;
+    nodeHeight?: number;
+    minNodeWidth?: number;
+    maxNodeWidth?: number;
+}
+
+declare class MindMapLayout {
+    private readonly options;
+    constructor(options?: MindMapLayoutOptions);
+    layout(store: TopicStore): LayoutResult;
+}
+
+interface Point {
+    x: number;
+    y: number;
+}
+interface CameraState {
+    x: number;
+    y: number;
+    scale: number;
+}
+interface CameraOptions extends Partial<CameraState> {
+    minScale?: number;
+    maxScale?: number;
+}
+declare class Camera {
+    x: number;
+    y: number;
+    scale: number;
+    readonly minScale: number;
+    readonly maxScale: number;
+    constructor(options?: CameraOptions);
+    get state(): CameraState;
+    screenToWorld(point: Point): Point;
+    worldToScreen(point: Point): Point;
+    panBy(dx: number, dy: number): void;
+    zoomBy(factor: number, anchor: Point): void;
+    zoomTo(scale: number, anchor: Point): void;
+    fit(bounds: Rect, viewport: {
+        width: number;
+        height: number;
+    }, padding?: number): void;
+    center(bounds: Rect, viewport: {
+        width: number;
+        height: number;
+    }): void;
+    reset(): void;
+    viewport(width: number, height: number): Rect;
+    private clampScale;
+}
+
+interface FrameSample {
+    timestamp: number;
+    frameMs: number;
+    cullMs: number;
+    drawMs: number;
+    rendered: number;
+}
+interface MetricsSnapshot {
+    fps: number;
+    frameP50: number;
+    frameP95: number;
+    frameP99: number;
+    cullMs: number;
+    drawMs: number;
+    rendered: number;
+    sampleCount: number;
+}
+declare class RollingMetrics {
+    private readonly capacity;
+    private readonly samples;
+    constructor(capacity?: number);
+    record(sample: FrameSample): void;
+    snapshot(): MetricsSnapshot;
+}
+
+type LodLevel = 'dots' | 'blocks' | 'labels' | 'full';
+type MindMapThemeName = 'dark' | 'light';
+declare const resolveLod: (scale: number) => LodLevel;
+interface CanvasRendererOptions {
+    canvas: HTMLCanvasElement;
+    camera?: Camera;
+    theme?: MindMapThemeName;
+    requestFrame?: (callback: FrameRequestCallback) => number;
+    cancelFrame?: (id: number) => void;
+    continuous?: boolean;
+}
+interface NodeScreenRect extends Rect {
+    id: string;
+}
+declare class CanvasRenderer {
+    readonly camera: Camera;
+    readonly metrics: RollingMetrics;
+    private readonly canvas;
+    private readonly context;
+    private readonly requestFrame;
+    private readonly cancelFrame;
+    private readonly spatialIndex;
+    private readonly candidates;
+    private store?;
+    private layout?;
+    private width;
+    private height;
+    private dpr;
+    private frameId;
+    private destroyed;
+    private continuous;
+    private themeName;
+    private palette;
+    private lastTimestamp;
+    private firstRenderTimestampMs;
+    private selectedIds;
+    private hoverId?;
+    private dragId?;
+    private dropTargetId?;
+    private dragPoint?;
+    private rootIndex;
+    private readonly rootChildren;
+    private rootBusBounds?;
+    constructor(options: CanvasRendererOptions);
+    get firstRenderAtMs(): number | null;
+    setScene(store: TopicStore, layout: LayoutResult): void;
+    resize(width: number, height: number, dpr?: number): void;
+    start(): void;
+    stop(): void;
+    invalidate(): void;
+    renderNow(timestamp?: number): void;
+    hitTest(screenPoint: Point): string | undefined;
+    getNodeScreenRect(id: string): NodeScreenRect | undefined;
+    setSelection(ids: Iterable<string>): void;
+    setHover(id?: string): void;
+    setDragState(id?: string, point?: Point, dropTargetId?: string): void;
+    get theme(): MindMapThemeName;
+    setTheme(theme: MindMapThemeName): void;
+    destroy(): void;
+    private onFrame;
+    private draw;
+    private drawRootBus;
+    private drawBranchEdges;
+    private cacheRootBus;
+    private drawTopic;
+    private drawDragPreview;
+    private assertAlive;
+}
+
+declare class SpatialIndex {
+    readonly cellSize: number;
+    private readonly buckets;
+    private layout?;
+    private marks;
+    private generation;
+    constructor(cellSize?: number);
+    build(layout: LayoutResult): void;
+    query(rect: Rect, output?: number[]): number[];
+    intersects(index: number, rect: Rect): boolean;
+}
+
+interface MindMapOptions {
+    container: HTMLElement | string;
+    document: TopicInput;
+    theme?: MindMapThemeName;
+    editable?: boolean;
+    continuousMetrics?: boolean;
+    requestFrame?: (callback: FrameRequestCallback) => number;
+    cancelFrame?: (id: number) => void;
+}
+interface ExpandAllOptions {
+    view?: 'preserve' | 'root' | 'branch' | 'fit';
+}
+interface FocusTopicOptions {
+    scale?: number;
+}
+interface PerformanceSnapshot extends MetricsSnapshot {
+    totalTopics: number;
+    layoutVisible: number;
+    renderRate: number;
+    layoutMs: number;
+    maxDepth: number;
+    scale: number;
+    domElements: number;
+    heapMB: number | null;
+    firstRenderAtMs: number | null;
+}
+declare class MindMap {
+    readonly container: HTMLElement;
+    readonly root: HTMLDivElement;
+    readonly canvas: HTMLCanvasElement;
+    readonly camera: Camera;
+    layout: LayoutResult;
+    private readonly engine;
+    private readonly layoutEngine;
+    private readonly renderer;
+    private readonly pluginManager;
+    private readonly toolbar;
+    private readonly editor;
+    private readonly hud;
+    private readonly status;
+    private readonly editable;
+    private readonly selection;
+    private readonly cleanups;
+    private resizeObserver?;
+    private hudTimer?;
+    private destroyed;
+    private panState?;
+    private dragState?;
+    private editingId?;
+    private hoveredId?;
+    constructor(options: MindMapOptions);
+    get totalTopics(): number;
+    get theme(): MindMapThemeName;
+    setTheme(theme: MindMapThemeName): void;
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    getTopic(id: string): Topic;
+    hasTopic(id: string): boolean;
+    addTopic(parentId: string, input: NewTopicInput): Topic;
+    addSibling(topicId: string, input: NewTopicInput): Topic;
+    updateTopic(topicId: string, patch: TopicPatch): Topic;
+    editTopic(topicId: string): void;
+    deleteTopic(topicId: string): void;
+    moveTopic(topicId: string, parentId: string, index?: number): Topic;
+    expand(topicId: string): void;
+    collapse(topicId: string): void;
+    toggle(topicId: string): boolean;
+    expandAll(options?: ExpandAllOptions): void;
+    collapseToLevel(level: number): void;
+    select(topicId: string, additive?: boolean): void;
+    clearSelection(): void;
+    getSelection(): string[];
+    search(query: string): SearchResult[];
+    focusTopic(topicId: string, options?: FocusTopicOptions): void;
+    undo(): boolean;
+    redo(): boolean;
+    zoomIn(): void;
+    zoomOut(): void;
+    zoomBy(factor: number, anchor?: Point): void;
+    zoomTo(scale: number, anchor?: Point): void;
+    panBy(dx: number, dy: number): void;
+    fitView(): void;
+    resetView(): void;
+    private centerReadableBranch;
+    resize(): void;
+    exportJSON(): string;
+    importJSON(json: string): void;
+    use(plugin: MindMapPlugin): Promise<void>;
+    getPerformanceSnapshot(): PerformanceSnapshot;
+    getCameraState(): CameraState;
+    destroy(): void;
+    private relayout;
+    private handleDocumentChange;
+    private createToolbar;
+    private createHud;
+    private installInteractions;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onKeyDown;
+    private onToolbarAction;
+    private openEditor;
+    private commitEditor;
+    private onEditorKeyDown;
+    private syncSelection;
+    private refreshToolbarPosition;
+    private positionToolbar;
+    private validDropTarget;
+    private pointerPoint;
+    private viewportSize;
+    private updateHud;
+    private setMetric;
+    private showStatus;
+    private listen;
+    private assertAlive;
+}
+
+export { type BoundaryData, Camera, type CameraOptions, type CameraState, CanvasRenderer, type CanvasRendererOptions, type DocumentChange, type DocumentChangeType, type EngineEvents, EventEmitter, type ExpandAllOptions, type FocusTopicOptions, type FrameSample, History, type HistoryEntry, type LayoutResult, type LodLevel, type MetricsSnapshot, MindMap, type MindMapDocumentData, MindMapEngine, type MindMapErrorData, MindMapLayout, type MindMapLayoutOptions, type MindMapOptions, type MindMapPlugin, type MindMapThemeName, type NewTopicInput, type NodeScreenRect, type PerformanceSnapshot, PluginManager, type Point, type Rect, type RelationshipData, RollingMetrics, type SearchResult, SpatialIndex, type StructureType, type SummaryData, type Topic, type TopicInput, type TopicKind, type TopicPatch, TopicStore, type TopicStyle, resolveLod };