@ankorar/nodex 0.0.1

package/src/hooks/mindMap/useMindMapNodeEditor.ts

@@ -0,0 +1,91 @@
+import type { FocusEvent, FormEvent, RefObject } from "react";
+import { useLayoutEffect } from "react";
+import { useMindMapState } from "../../state/mindMap";
+import { useMindMapNode } from "./useMindMapNode";
+import { useShallow } from "zustand/react/shallow";
+
+type UseMindMapNodeEditorParams = {
+  nodeId: string;
+  text: string;
+  textRef: RefObject<HTMLElement | null>;
+};
+
+type UseMindMapNodeEditorResult = {
+  onFocus: () => void;
+  onBlur: (event: FocusEvent<HTMLElement>) => void;
+  onInput: (event: FormEvent<HTMLElement>) => void;
+};
+
+export function useMindMapNodeEditor({
+  nodeId,
+  text,
+  textRef,
+}: UseMindMapNodeEditorParams): UseMindMapNodeEditorResult {
+  const { node } = useMindMapNode({ nodeId });
+  const { editingNodeId, setEditingNode, readOnly } = useMindMapState(
+    useShallow((state) => ({
+      editingNodeId: state.editingNodeId,
+      setEditingNode: state.setEditingNode,
+      readOnly: state.readOnly,
+    })),
+  );
+
+  const isEditing = editingNodeId === nodeId;
+
+  useLayoutEffect(() => {
+    const element = textRef.current;
+    if (!element) {
+      return;
+    }
+    if (!isEditing && element.textContent !== text) {
+      element.textContent = text;
+    }
+  }, [text, textRef, isEditing]);
+
+  useLayoutEffect(() => {
+    const element = textRef.current;
+    if (!element || !isEditing) {
+      return;
+    }
+    const focusText = () => {
+      element.focus();
+      const selection = window.getSelection();
+      if (!selection) {
+        return;
+      }
+      const range = document.createRange();
+      range.selectNodeContents(element);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    };
+    requestAnimationFrame(focusText);
+  }, [isEditing, textRef]);
+
+  return {
+    onFocus: () => {
+      node?.select();
+      if (!readOnly) {
+        node?.edit();
+      }
+    },
+    onBlur: () => {
+      setEditingNode(null);
+    },
+    onInput: (event) => {
+      if (readOnly) {
+        return;
+      }
+
+      if (!node) {
+        return;
+      }
+      const element = (event.currentTarget ??
+        textRef.current) as HTMLElement | null;
+      node
+        .chain()
+        .updateText(element?.textContent ?? "")
+        .commit();
+    },
+  };
+}

package/src/hooks/mindMap/useMindMapNodeMouseHandlers.ts

@@ -0,0 +1,24 @@
+import { type MouseEvent } from "react";
+import { useMindMapNode } from "./useMindMapNode";
+import { useMindMapState } from "../../state/mindMap";
+
+export function useMindMapNodeMouseHandlers(nodeId: string) {
+  const { node } = useMindMapNode({ nodeId });
+  const readOnly = useMindMapState((state) => state.readOnly);
+
+  return {
+    onMouseDown: (event: MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+      if (!readOnly) {
+        node?.select();
+      }
+    },
+    onDoubleClick: (event: MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+      if (!readOnly) {
+        node?.select();
+        node?.edit();
+      }
+    },
+  };
+}

package/src/hooks/mindMap/useRootKeyBindHandlers.ts

@@ -0,0 +1,49 @@
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useMindMapState } from "../../state/mindMap";
+import { type RootKeyBinds, rootKeyBinds } from "../../config/rootKeyBinds";
+
+export function useRootKeyBindHandlers() {
+  const { editingNodeId, readOnly } = useMindMapState(
+    useShallow((state) => ({
+      editingNodeId: state.editingNodeId,
+      readOnly: state.readOnly,
+    }))
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (readOnly) {
+        return;
+      }
+
+      const isEditing = !!editingNodeId;
+      let key = e.key;
+
+      if (e.ctrlKey) {
+        key = "Ctrl+" + e.key;
+      }
+
+      if (e.altKey) {
+        key = "Alt+" + e.key;
+      }
+
+      const keyBind = rootKeyBinds[key as RootKeyBinds];
+
+      if (keyBind?.skipOnEditing && isEditing) {
+        return;
+      }
+
+      if (keyBind?.handler) {
+        e.preventDefault();
+        keyBind.handler();
+      }
+    };
+
+    const listenerOptions = { capture: true };
+    document.addEventListener("keydown", handleKeyDown, listenerOptions);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown, listenerOptions);
+    };
+  }, [editingNodeId, readOnly]);
+}

package/src/hooks/mindMap/useRootMouseHandlers.ts

@@ -0,0 +1,124 @@
+import type {
+  MouseEvent,
+  RefObject,
+  WheelEvent as WheelReactEvent,
+} from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { useMindMapState } from "../../state/mindMap";
+import { useShallow } from "zustand/react/shallow";
+
+interface UseRootMouseHandlersProps {
+  rootRef: RefObject<HTMLDivElement | null>;
+}
+
+export function useRootMouseHandlers({ rootRef }: UseRootMouseHandlersProps) {
+  const {
+    offset,
+    scale,
+    clampScale,
+    setScale,
+    setOffset,
+    setSelectedNode,
+    setEditingNode,
+    selectedNodeId,
+    helpOpen,
+  } = useMindMapState(
+    useShallow((state) => ({
+      offset: state.offset,
+      scale: state.scale,
+      clampScale: state.clampScale,
+      setScale: state.setScale,
+      setOffset: state.setOffset,
+      setSelectedNode: state.setSelectedNode,
+      setEditingNode: state.setEditingNode,
+      selectedNodeId: state.selectedNodeId,
+      helpOpen: state.helpOpen,
+    })),
+  );
+  const isDraggingRef = useRef(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStartRef = useRef({ x: 0, y: 0 });
+  const offsetStartRef = useRef({ x: 0, y: 0 });
+
+  const onWheel = (event: WheelReactEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    if (helpOpen) return;
+    const zoomSpeed = event.ctrlKey ? 0.0005 : 0.0005;
+    const zoomDelta = -event.deltaY * zoomSpeed;
+    const nextScale = clampScale(scale + zoomDelta);
+    if (nextScale === scale) {
+      return;
+    }
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const pointerX = event.clientX - bounds.left;
+    const pointerY = event.clientY - bounds.top;
+    const worldX = (pointerX - offset.x) / scale;
+    const worldY = (pointerY - offset.y) / scale;
+    const nextOffset = {
+      x: pointerX - worldX * nextScale,
+      y: pointerY - worldY * nextScale,
+    };
+    setScale(nextScale);
+    setOffset(nextOffset);
+  };
+
+  useEffect(() => {
+    const element = rootRef.current;
+    if (!element) return;
+
+    const handleWheel = (event: WheelEvent) => {
+      const e = event as unknown as WheelReactEvent<HTMLDivElement>;
+      onWheel(e);
+    };
+
+    element.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      element.removeEventListener("wheel", handleWheel);
+    };
+  }, [onWheel]);
+
+  return {
+    isDragging,
+    onMouseDown: (event: MouseEvent<HTMLDivElement>) => {
+      const target = event.target as Element | null;
+      const clickedNode = target?.closest?.("[data-nodex-node]");
+      const clickedUi = target?.closest?.("[data-nodex-ui]");
+      if (selectedNodeId && !clickedNode && !clickedUi) {
+        setSelectedNode(null);
+        setEditingNode(null);
+      }
+      if (clickedNode || clickedUi) {
+        return;
+      }
+      if (event.button !== 0) {
+        return;
+      }
+      isDraggingRef.current = true;
+      setIsDragging(true);
+      dragStartRef.current = { x: event.clientX, y: event.clientY };
+      offsetStartRef.current = { x: offset.x, y: offset.y };
+    },
+    onMouseMove: (event: MouseEvent<HTMLDivElement>) => {
+      if (!isDraggingRef.current) {
+        return;
+      }
+      const deltaX = event.clientX - dragStartRef.current.x;
+      const deltaY = event.clientY - dragStartRef.current.y;
+      setOffset({
+        x: offsetStartRef.current.x + deltaX,
+        y: offsetStartRef.current.y + deltaY,
+      });
+    },
+    onMouseUp: () => {
+      isDraggingRef.current = false;
+      setIsDragging(false);
+    },
+    onMouseLeave: () => {
+      isDraggingRef.current = false;
+      setIsDragging(false);
+    },
+    onWheel,
+  };
+}

package/src/hooks/mindMap/useUpdateCenter.ts

@@ -0,0 +1,54 @@
+import { useMindMapState } from "../../state/mindMap";
+import { type RefObject, useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useMindMapNode } from "./useMindMapNode";
+import { useHelpers } from "./useHelpers";
+
+interface UseUpdateCenterProps {
+  rootRef: RefObject<HTMLDivElement | null>;
+}
+
+export function useUpdateCenter({ rootRef }: UseUpdateCenterProps) {
+  const helpers = useHelpers();
+  const { getCentralNode, setOffset, editingNodeId } = useMindMapState(
+    useShallow((state) => ({
+      getCentralNode: state.getCentralNode,
+      setOffset: state.setOffset,
+      editingNodeId: state.editingNodeId,
+    }))
+  );
+
+  const { node } = useMindMapNode({ nodeId: editingNodeId });
+
+  useEffect(() => {
+    if (node && node.text === "") {
+      helpers.centerNode(node);
+    }
+  }, [node]);
+
+  useEffect(() => {
+    const updateCenter = () => {
+      const element = rootRef.current;
+      if (!element) return;
+
+      const centralNode = getCentralNode();
+      if (!centralNode) return;
+
+      const centralPos = centralNode.pos;
+      const centralSize = centralNode.style;
+      const bounds = element.getBoundingClientRect();
+
+      setOffset({
+        x: bounds.width / 2 - (centralPos.x + centralSize.w / 2),
+        y: bounds.height / 2 - (centralPos.y + centralSize.h / 2),
+      });
+    };
+
+    updateCenter();
+    window.addEventListener("resize", updateCenter);
+
+    return () => {
+      window.removeEventListener("resize", updateCenter);
+    };
+  }, [setOffset]);
+}

package/src/index.ts

@@ -0,0 +1,76 @@
+export {
+  useMindMapState,
+  layoutMindMapNodes,
+  wrapTextAtWords,
+  applyBranchColorsToNodes,
+} from "./state/mindMap";
+export {
+  useMindMapHistory,
+  createMindMapSnapshot,
+  clearMindMapHistory,
+} from "./state/mindMapHistory";
+export { useMindMapDebounce } from "./hooks/mindMap/useMindMapDebounce";
+export { getMindMapPreviewDataUrl } from "./utils/getMindMapPreviewDataUrl";
+export {
+  createMindMapExportCanvas,
+  exportMindMapAsHighQualityImage,
+  HIGH_QUALITY_EXPORT_SCALE,
+  type CreateMindMapCanvasOptions,
+  type ExportImageOptions,
+} from "./utils/exportMindMapAsHighQualityImage";
+export {
+  exportMindMapAsMarkdown,
+  mindMapToMarkdown,
+  type ExportMarkdownOptions,
+} from "./utils/exportMindMapAsMarkdown";
+export {
+  exportMindMapAsPdf,
+  type ExportPdfOptions,
+} from "./utils/exportMindMapAsPdf";
+export { useMindMapHistoryDebounce } from "./hooks/mindMap/useMindMapHistoryDebounce";
+
+export { Background, type BackgroundProps } from "./components/mindMap/Background";
+export {
+  Board,
+  type BoardProps,
+  type BoardStyleSlots,
+} from "./components/mindMap/Board";
+export { CentalNode } from "./components/mindMap/CentalNode";
+export { DefaultNode } from "./components/mindMap/DefaultNode";
+export {
+  Header as MindMapHeader,
+  type HeaderProps,
+  type HeaderStyleSlots,
+} from "./components/mindMap/Header";
+export {
+  SaveStatusIndicator,
+  type MindMapSaveStatus,
+} from "./components/mindMap/SaveStatusIndicator";
+export { ImageNode } from "./components/mindMap/ImageNode";
+export {
+  KeyboardHelpDialog,
+  type KeyboardHelpDialogProps,
+  type KeyboardHelpDialogStyleSlots,
+} from "./components/mindMap/KeyboardHelpDialog";
+export {
+  MineMap,
+  type MineMapStyleSlots,
+} from "./components/mindMap/MineMap";
+export {
+  NodeStylePopover,
+  type NodeStylePopoverColorOption,
+  type NodeStylePopoverStyleSlots,
+} from "./components/mindMap/NodeStylePopover";
+export { Nodes } from "./components/mindMap/Nodes";
+export { Nodex } from "./components/mindMap/Nodex";
+export { Segments } from "./components/mindMap/Segments";
+export { ZenCard, type ZenCardProps } from "./components/mindMap/ZenCard";
+
+export type {
+  MindMapNode,
+  MindMapNodeStyle,
+  MindMapNodeType,
+  MindMapNodeTextAlign,
+  MindMapNodeFontSize,
+} from "./state/mindMap";
+export type { NodeEditorCustomButton } from "./contexts/MindMapNodeEditorContext";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}