@ankorar/nodex 0.0.1

package/src/handlers/rootKeyBinds/handleArrowVerticalRootKeyBind.ts

@@ -0,0 +1,44 @@
+import { centerNode } from "../../helpers/centerNode";
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleArrowVerticalRootKeyBind = (dir: "up" | "down") => {
+  const {
+    selectedNodeId,
+    getCentralNode,
+    setSelectedNode,
+    findNode,
+    findNodeParent,
+  } = useMindMapState.getState();
+
+  const centralNode = getCentralNode();
+  const node = findNode(selectedNodeId ?? centralNode?.id ?? "");
+
+  if (!node) return;
+
+  if (node.type === "central") {
+    centerNode(node);
+    return;
+  }
+
+  const parent = findNodeParent(node.id);
+  if (!parent) return;
+
+  const siblings = parent.childrens
+    .filter((child) => child.isVisible)
+    .sort((a, b) => a.sequence - b.sequence);
+
+  const currentIndex = siblings.findIndex((child) => child.id === node.id);
+  const step = dir === "down" ? 1 : -1;
+  const siblingTarget = siblings[currentIndex + step];
+
+  if (siblingTarget) {
+    setSelectedNode(siblingTarget.id);
+    centerNode(siblingTarget);
+    return;
+  }
+
+  if (!siblingTarget && parent) {
+    setSelectedNode(parent.id);
+    centerNode(parent);
+  }
+};

package/src/handlers/rootKeyBinds/handleBackEspaceKeyBind.ts

@@ -0,0 +1,12 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleBackEspaceKeyBind = () => {
+  const { selectedNodeId, findNode, setSelectedNode, removeNode } =
+    useMindMapState.getState();
+
+  const node = findNode(selectedNodeId ?? "");
+  if (!node) return;
+
+  setSelectedNode(null);
+  removeNode(node.id);
+};

package/src/handlers/rootKeyBinds/handleERootKeyBind.ts

@@ -0,0 +1,16 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleERootKeyBind = () => {
+  const { findNode, selectedNodeId, updateNode } = useMindMapState.getState();
+
+  const node = findNode(selectedNodeId ?? "");
+
+  if (!node) return;
+
+  node.childrens = node.childrens.map((child) => ({
+    ...child,
+    isVisible: !child.isVisible,
+  }));
+
+  updateNode(node);
+};

package/src/handlers/rootKeyBinds/handleEnterRootKeyBind.ts

@@ -0,0 +1,35 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleEnterRootKeyBind = () => {
+  const {
+    findNode,
+    getCentralNode,
+    findNodeParent,
+    makeChildNode,
+    updateNode,
+    setEditingNode,
+    setSelectedNode,
+    selectedNodeId,
+  } = useMindMapState.getState();
+
+  const centralNode = getCentralNode();
+  const node = findNode(selectedNodeId ?? centralNode?.id ?? "");
+
+  if (!node) return;
+
+  const parent = findNodeParent(node.id);
+  if (!parent) return;
+
+  const newNode = makeChildNode(parent);
+  parent?.childrens.push(newNode);
+
+  const textValue = node.text.trim();
+
+  if (textValue.length === 0 && selectedNodeId) {
+    parent.childrens = parent.childrens.filter((child) => child.id !== node.id);
+  }
+
+  updateNode(parent);
+  setSelectedNode(newNode.id);
+  setEditingNode(newNode.id);
+};

package/src/handlers/rootKeyBinds/handleEscapeKeyBind.ts

@@ -0,0 +1,24 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleEscapeKeyBind = () => {
+  const {
+    editingNodeId,
+    findNode,
+    removeNode,
+    setSelectedNode,
+    setEditingNode,
+  } = useMindMapState.getState();
+
+  setSelectedNode(null);
+  const node = findNode(editingNodeId ?? "");
+
+  if (!node) return;
+
+  const textValue = node.text.trim();
+
+  if (textValue.length === 0 && editingNodeId) {
+    removeNode(editingNodeId);
+  }
+
+  setEditingNode(null);
+};

package/src/handlers/rootKeyBinds/handleEspaceKeyBind.ts

@@ -0,0 +1,11 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleEspaceKeyBind = () => {
+  const { selectedNodeId, findNode, setEditingNode } =
+    useMindMapState.getState();
+
+  const node = findNode(selectedNodeId ?? "");
+  if (!node) return;
+
+  setEditingNode(selectedNodeId);
+};

package/src/handlers/rootKeyBinds/handleMoveByWorldKeyBind.ts

@@ -0,0 +1,6 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleMoveByWorldKeyBind = (x: number, y: number) => {
+  const { offset, setOffset } = useMindMapState.getState();
+  setOffset({ x: offset.x + x, y: offset.y + y });
+};

package/src/handlers/rootKeyBinds/handleRedoRootKeyBind.ts

@@ -0,0 +1,23 @@
+import { useMindMapHistory, createMindMapSnapshot } from "../../state/mindMapHistory";
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleRedoRootKeyBind = () => {
+  const state = useMindMapState.getState();
+  const current = createMindMapSnapshot({
+    nodes: state.nodes,
+    selectedNodeId: state.selectedNodeId,
+    editingNodeId: state.editingNodeId,
+    offset: state.offset,
+    scale: state.scale,
+  });
+
+  useMindMapHistory.getState().redo(current, (snapshot) => {
+    useMindMapState.setState({
+      nodes: snapshot.nodes,
+      selectedNodeId: snapshot.selectedNodeId,
+      editingNodeId: snapshot.editingNodeId,
+      offset: snapshot.offset,
+      scale: snapshot.scale,
+    });
+  });
+};

package/src/handlers/rootKeyBinds/handleTabRootKeyBind.ts

@@ -0,0 +1,49 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleTabRootKeyBind = () => {
+  const {
+    editingNodeId,
+    selectedNodeId,
+    findNode,
+    getCentralNode,
+    removeNode,
+    updateNode,
+    makeChildNode,
+    setEditingNode,
+    setSelectedNode,
+  } = useMindMapState.getState();
+
+  const isEditing = !!editingNodeId;
+  const nodeEditing = findNode(editingNodeId ?? "");
+  const centralNode = getCentralNode();
+  const currentNode = findNode(selectedNodeId ?? centralNode?.id ?? "");
+
+  if (isEditing && nodeEditing) {
+    const textValue = nodeEditing.text.trim();
+
+    if (textValue.length === 0) {
+      removeNode(editingNodeId);
+      return;
+    }
+  }
+
+  if (!currentNode) {
+    return;
+  }
+
+  const newNode = currentNode;
+
+  if (currentNode.childrens.some((child) => !child.isVisible)) {
+    newNode.childrens = currentNode.childrens.map((child) => ({
+      ...child,
+      isVisible: true,
+    }));
+  }
+
+  const newChildNode = makeChildNode(newNode);
+  newNode.childrens.push(newChildNode);
+
+  updateNode(newNode);
+  setSelectedNode(newChildNode.id);
+  setEditingNode(newChildNode.id);
+};

package/src/handlers/rootKeyBinds/handleTransformNodeKeyBind.ts

@@ -0,0 +1,39 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleTransformNodeKeyBind = (
+  transformation: ("bold" | "italic" | "image")[],
+) => {
+  const {
+    getCentralNode,
+    findNode,
+    updateNode,
+    setSelectedNode,
+    setEditingNode,
+    selectedNodeId,
+  } = useMindMapState.getState();
+
+  const centralNode = getCentralNode();
+  const node = findNode(selectedNodeId ?? centralNode?.id ?? "");
+
+  if (!node) return;
+
+  if (transformation.includes("bold")) {
+    node.style.isBold = !node.style.isBold;
+  }
+
+  if (transformation.includes("italic")) {
+    node.style.isItalic = !node.style.isItalic;
+  }
+
+  if (transformation.includes("image")) {
+    node.style.isBold = false;
+    node.style.isItalic = false;
+    node.text = "";
+    node.type = "image";
+
+    setSelectedNode(node.id);
+    setEditingNode(node.id);
+  }
+
+  updateNode(node);
+};

package/src/handlers/rootKeyBinds/handleUndoRootKeyBind.ts

@@ -0,0 +1,23 @@
+import { useMindMapHistory, createMindMapSnapshot } from "../../state/mindMapHistory";
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleUndoRootKeyBind = () => {
+  const state = useMindMapState.getState();
+  const current = createMindMapSnapshot({
+    nodes: state.nodes,
+    selectedNodeId: state.selectedNodeId,
+    editingNodeId: state.editingNodeId,
+    offset: state.offset,
+    scale: state.scale,
+  });
+
+  useMindMapHistory.getState().undo(current, (snapshot) => {
+    useMindMapState.setState({
+      nodes: snapshot.nodes,
+      selectedNodeId: snapshot.selectedNodeId,
+      editingNodeId: snapshot.editingNodeId,
+      offset: snapshot.offset,
+      scale: snapshot.scale,
+    });
+  });
+};

package/src/handlers/rootKeyBinds/handleZoonByKeyBind.ts

@@ -0,0 +1,31 @@
+import { useMindMapState } from "../../state/mindMap";
+
+export const handleZoomByKeyBind = (delta: number) => {
+  const { clampScale, setScale, setOffset, scale, offset } =
+    useMindMapState.getState();
+  const rootElement = document.querySelector(
+    "[data-nodex-root]",
+  ) as HTMLElement | null;
+
+  const bounds = rootElement?.getBoundingClientRect();
+
+  const viewportWidth = bounds?.width ?? window.innerWidth;
+  const viewportHeight = bounds?.height ?? window.innerHeight;
+
+  const pointerX = viewportWidth / 2;
+  const pointerY = viewportHeight / 2;
+
+  const nextScale = clampScale(scale + delta);
+
+  if (nextScale === scale) {
+    return;
+  }
+  const worldX = (pointerX - offset.x) / scale;
+  const worldY = (pointerY - offset.y) / scale;
+
+  setScale(nextScale);
+  setOffset({
+    x: pointerX - worldX * nextScale,
+    y: pointerY - worldY * nextScale,
+  });
+};

package/src/helpers/centerNode.ts

@@ -0,0 +1,19 @@
+import { type MindMapNode, useMindMapState } from "../state/mindMap";
+
+export const centerNode = (node: MindMapNode | null) => {
+  if (!node) return;
+
+  const { setOffset, scale } = useMindMapState.getState();
+
+  const rootElement = document.querySelector(
+    "[data-nodex-root]"
+  ) as HTMLElement | null;
+  const bounds = rootElement?.getBoundingClientRect();
+  const viewportWidth = bounds?.width ?? window.innerWidth;
+  const viewportHeight = bounds?.height ?? window.innerHeight;
+
+  setOffset({
+    x: viewportWidth / 2 - (node.pos.x + node.style.w / 2) * scale,
+    y: viewportHeight / 2 - (node.pos.y + node.style.h / 2) * scale,
+  });
+};

package/src/helpers/getNodeSide.ts

@@ -0,0 +1,16 @@
+import { type MindMapNode, useMindMapState } from "../state/mindMap";
+
+export const getNodeSide = (node: MindMapNode | null) => {
+  const { getCentralNode } = useMindMapState.getState();
+
+  const centralNode = getCentralNode();
+
+  if (!node || node.type === "central" || !centralNode) {
+    return "center";
+  }
+
+  const nodeCenterX = node.pos.x + node.style.w / 2;
+  const centralCenterX = centralNode?.pos.x + centralNode.style.w / 2;
+
+  return nodeCenterX < centralCenterX ? "left" : "right";
+};

package/src/hooks/mindMap/useHelpers.tsx

@@ -0,0 +1,9 @@
+import { centerNode } from "../../helpers/centerNode";
+import { getNodeSide } from "../../helpers/getNodeSide";
+
+export function useHelpers() {
+  return {
+    getNodeSide,
+    centerNode,
+  };
+}

package/src/hooks/mindMap/useMindMapDebounce.ts

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from "react";
+
+import { useMindMapState } from "../../state/mindMap";
+import { getMindMapPreviewDataUrl } from "../../utils/getMindMapPreviewDataUrl";
+
+type UseMindMapDebouncedChangeOptions = {
+  delayMs?: number;
+};
+
+export function useMindMapDebounce(
+  onChange: (
+    nodes: ReturnType<typeof useMindMapState.getState>["nodes"],
+    previewDataUrl: string | null,
+  ) => void | Promise<void>,
+  options: UseMindMapDebouncedChangeOptions = {},
+) {
+  const nodes = useMindMapState((state) => state.nodes);
+  const delayMs = options.delayMs ?? 1500;
+  const timeoutRef = useRef<number | null>(null);
+  const latestNodesRef = useRef(nodes);
+  const callbackRef = useRef(onChange);
+
+  useEffect(() => {
+    callbackRef.current = onChange;
+  }, [onChange]);
+
+  useEffect(() => {
+    latestNodesRef.current = nodes;
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = window.setTimeout(() => {
+      const nextNodes = latestNodesRef.current;
+      if (nextNodes.length === 0) {
+        return;
+      }
+      const previewDataUrl = getMindMapPreviewDataUrl(nextNodes);
+      callbackRef.current(nextNodes, previewDataUrl);
+    }, delayMs);
+
+    return () => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [nodes, delayMs]);
+}

package/src/hooks/mindMap/useMindMapHistoryDebounce.ts

@@ -0,0 +1,69 @@
+import { useEffect, useRef } from "react";
+
+import {
+  type MindMapSnapshot,
+  createMindMapSnapshot,
+  useMindMapHistory,
+} from "../../state/mindMapHistory";
+import { useMindMapState } from "../../state/mindMap";
+import { useMindMapDebounce } from "./useMindMapDebounce";
+
+type UseMindMapHistoryDebounceOptions = {
+  delayMs?: number;
+};
+
+export function useMindMapHistoryDebounce(
+  options: UseMindMapHistoryDebounceOptions = {},
+) {
+  const delayMs = options.delayMs ?? 3000;
+  const nodes = useMindMapState((state) => state.nodes);
+  const resetVersion = useMindMapHistory((state) => state.resetVersion);
+  const lastSnapshotRef = useRef<MindMapSnapshot | null>(null);
+  const pendingSnapshotRef = useRef<MindMapSnapshot | null>(null);
+  const pendingResetVersionRef = useRef(resetVersion);
+
+  useEffect(() => {
+    pendingResetVersionRef.current = resetVersion;
+    lastSnapshotRef.current = null;
+    pendingSnapshotRef.current = null;
+  }, [resetVersion]);
+
+  useEffect(() => {
+    const state = useMindMapState.getState();
+    const currentSnapshot = createMindMapSnapshot({
+      nodes: state.nodes,
+      selectedNodeId: state.selectedNodeId,
+      editingNodeId: state.editingNodeId,
+      offset: state.offset,
+      scale: state.scale,
+    });
+
+    if (!lastSnapshotRef.current) {
+      lastSnapshotRef.current = currentSnapshot;
+      return;
+    }
+
+    if (!pendingSnapshotRef.current) {
+      pendingSnapshotRef.current = lastSnapshotRef.current;
+      pendingResetVersionRef.current = resetVersion;
+    }
+
+    lastSnapshotRef.current = currentSnapshot;
+  }, [nodes, resetVersion]);
+
+  useMindMapDebounce(
+    () => {
+      const pendingSnapshot = pendingSnapshotRef.current;
+      if (!pendingSnapshot) {
+        return;
+      }
+      if (pendingResetVersionRef.current !== useMindMapHistory.getState().resetVersion) {
+        pendingSnapshotRef.current = null;
+        return;
+      }
+      useMindMapHistory.getState().pushSnapshot(pendingSnapshot);
+      pendingSnapshotRef.current = null;
+    },
+    { delayMs },
+  );
+}

package/src/hooks/mindMap/useMindMapNode.tsx

@@ -0,0 +1,203 @@
+import {
+  type MindMapNodeFontSize,
+  type MindMapNodeTextAlign,
+  type MindMapNodeType,
+  useMindMapState,
+} from "../../state/mindMap";
+import { useMemo } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useHelpers } from "./useHelpers";
+
+interface UseMindMapNodeProps {
+  nodeId?: string | null;
+}
+
+export function useMindMapNode({ nodeId }: UseMindMapNodeProps) {
+  const helpers = useHelpers();
+  const {
+    nodes,
+    findNode,
+    findNodeParent,
+    updateNode,
+    setSelectedNode,
+    setEditingNode,
+    removeNode,
+    toggleNodeChildrenVisibility,
+    makeChildNode,
+    readOnly,
+  } = useMindMapState(
+    useShallow((state) => ({
+      nodes: state.nodes,
+      findNode: state.findNode,
+      findNodeParent: state.findNodeParent,
+      updateNode: state.updateNode,
+      setSelectedNode: state.setSelectedNode,
+      setEditingNode: state.setEditingNode,
+      removeNode: state.removeNode,
+      toggleNodeChildrenVisibility: state.toggleNodeChildrenVisibility,
+      makeChildNode: state.makeChildNode,
+      readOnly: state.readOnly,
+    }))
+  );
+
+  const nId = nodeId ?? "";
+  const { node, parent } = useMemo(
+    () => ({
+      node: findNode(nId),
+      parent: findNodeParent(nId),
+    }),
+    [nodeId, nodes]
+  );
+
+  const updater = (cb: () => void) => {
+    if (readOnly) {
+      return createLogicalNode();
+    }
+
+    cb();
+    return createLogicalNode();
+  };
+
+  const toggleBold = () =>
+    updater(() => {
+      node!.style.isBold = !node!.style.isBold;
+    });
+
+  const toggleItalic = () =>
+    updater(() => {
+      node!.style.isItalic = !node!.style.isItalic;
+    });
+
+  const updateFontSize = (fontSize: MindMapNodeFontSize) =>
+    updater(() => {
+      node!.style.fontSize = fontSize;
+    });
+
+  const updateType = (type: MindMapNodeType) =>
+    updater(() => {
+      if (type === "central") return createLogicalNode();
+      node!.type = type;
+    });
+
+  const updateTextAling = (textAling: MindMapNodeTextAlign) =>
+    updater(() => {
+      node!.style.textAlign = textAling;
+    });
+
+  const clearText = () =>
+    updater(() => {
+      node!.text = "";
+    });
+
+  const updateBackgroundColor = (backgroundCollor: string) =>
+    updater(() => {
+      node!.style.backgroundColor = backgroundCollor;
+    });
+
+  const updateTextColor = (textColor: string) =>
+    updater(() => {
+      node!.style.textColor = textColor;
+    });
+
+  const updateText = (text?: string | null) =>
+    updater(() => {
+      if (text === undefined) return;
+      node!.text = text ?? "";
+    });
+
+  const updateSize = (w?: number, h?: number) =>
+    updater(() => {
+      if (w) {
+        node!.style.w = w;
+      }
+
+      if (h) {
+        node!.style.h = h;
+      }
+    });
+
+  const commit = () => {
+    if (!node || readOnly) return;
+    updateNode(node);
+  };
+
+  const chain = () => {
+    return createLogicalNode();
+  };
+
+  const select = () => {
+    if (!node) return;
+    setSelectedNode(node.id);
+  };
+
+  const edit = () => {
+    if (!node || readOnly) return;
+    setEditingNode(node.id);
+  };
+
+  const getSide = () => {
+    return helpers.getNodeSide(node);
+  };
+
+  const destroy = () => {
+    if (!node || readOnly) return;
+    removeNode(node.id);
+  };
+
+  const togglechildrensVisibility = () => {
+    if (!node) return;
+    toggleNodeChildrenVisibility(node.id);
+  };
+
+  const addChild = () => {
+    if (!node || readOnly) return;
+    const newchildrens = node.childrens;
+
+    const newChilderen = makeChildNode(node);
+
+    newchildrens.push(newChilderen);
+
+    node.childrens = newchildrens;
+    updateNode(node);
+    setSelectedNode(newChilderen.id);
+    setEditingNode(newChilderen.id);
+  };
+
+  const createLogicalNode = () => {
+    return {
+      ...node!,
+      toggleBold,
+      toggleItalic,
+
+      updateFontSize,
+      updateType,
+      updateTextAling,
+      updateBackgroundColor,
+      updateTextColor,
+      updateText,
+      updateSize,
+      commit,
+
+      clearText,
+    };
+  };
+
+  const createNode = () => {
+    if (!node) return null;
+    return {
+      ...node,
+      parent,
+      chain,
+      select,
+      edit,
+      getSide,
+      destroy,
+      togglechildrensVisibility,
+      addChild,
+    };
+  };
+
+  return {
+    node: createNode(),
+  };
+}