@ankorar/nodex 0.0.1

package/src/components/mindMap/ImageNode.tsx

@@ -0,0 +1,345 @@
+import type { CSSProperties } from "react";
+import type { MindMapNode } from "../../state/mindMap";
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { useMindMapState } from "../../state/mindMap";
+import { useMindMapNodeMouseHandlers } from "../../hooks/mindMap/useMindMapNodeMouseHandlers";
+import { useMindMapNode } from "../../hooks/mindMap/useMindMapNode";
+import { useShallow } from "zustand/react/shallow";
+import { cn } from "../../lib/utils";
+
+interface ImageNodeProps {
+  node: MindMapNode;
+  className?: string;
+  style?: CSSProperties;
+  /** Caixa do conteúdo (imagem ou input URL) */
+  contentClassName?: string;
+  contentStyle?: CSSProperties;
+}
+
+export function ImageNode({
+  node,
+  className,
+  style,
+  contentClassName,
+  contentStyle,
+}: ImageNodeProps) {
+  const { node: logicalNode } = useMindMapNode({ nodeId: node.id });
+
+  const { selectedNodeId, editingNodeId, setEditingNode, readOnly } =
+    useMindMapState(
+    useShallow((state) => ({
+      selectedNodeId: state.selectedNodeId,
+      editingNodeId: state.editingNodeId,
+      setEditingNode: state.setEditingNode,
+      readOnly: state.readOnly,
+    })),
+    );
+
+  const isLeft = logicalNode?.getSide() === "left";
+  const hasChildren = node.childrens.length > 0;
+  const childrenVisible = node.childrens.some((child) => child.isVisible);
+  const hasUrl = node.text.trim().length > 0;
+  const isValidUrl = useMemo(() => {
+    if (!hasUrl) {
+      return false;
+    }
+    try {
+      const parsed = new URL(node.text.trim());
+      return parsed.protocol === "http:" || parsed.protocol === "https:";
+    } catch {
+      return false;
+    }
+  }, [hasUrl, node.text]);
+  const isEditing = editingNodeId === node.id;
+  const showInput = readOnly ? !isValidUrl : !isValidUrl || isEditing;
+  const isLoadingRef = useRef(false);
+  const lastSizedUrlRef = useRef<string | null>(null);
+  const textRef = useRef<HTMLSpanElement | null>(null);
+  const { onMouseDown, onDoubleClick } = useMindMapNodeMouseHandlers(node.id);
+  const isEmpty = node.text.trim().length === 0;
+
+  useLayoutEffect(() => {
+    const element = textRef.current;
+    if (!element) {
+      return;
+    }
+    if (!isEditing && element.textContent !== node.text) {
+      element.textContent = node.text;
+    }
+  }, [isEditing, node.text]);
+
+  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]);
+
+  useLayoutEffect(() => {
+    if (!isEditing || !logicalNode) {
+      return;
+    }
+    const nextW = Math.max(node.style.w, 120);
+    const nextH = Math.max(node.style.h, 120);
+    if (nextW === node.style.w && nextH === node.style.h) {
+      return;
+    }
+    logicalNode.chain().updateSize(nextW, nextH).commit();
+  }, [isEditing, logicalNode, node.style.h, node.style.w]);
+
+  const fitToBounds = (width: number, height: number) => {
+    const maxW = 340;
+    const maxH = 340;
+    const scale = Math.min(maxW / width, maxH / height, 1) * 0.5;
+    return {
+      w: Math.max(8, Math.round(width * scale)),
+      h: Math.max(8, Math.round(height * scale)),
+    };
+  };
+
+  const handleUrlChange = (value: string) => {
+    if (readOnly) {
+      return;
+    }
+
+    const trimmed = value.trim();
+    logicalNode?.chain().updateText(value).commit();
+
+    if (!trimmed || isLoadingRef.current) {
+      return;
+    }
+
+    if (lastSizedUrlRef.current === trimmed) {
+      return;
+    }
+
+    isLoadingRef.current = true;
+
+    const img = new Image();
+
+    img.onload = () => {
+      isLoadingRef.current = false;
+      lastSizedUrlRef.current = trimmed;
+
+      if (!img.naturalWidth || !img.naturalHeight) {
+        return;
+      }
+
+      const nextSize = fitToBounds(img.naturalWidth, img.naturalHeight);
+      logicalNode
+        ?.chain()
+        .updateText(trimmed)
+        .updateSize(nextSize.w, nextSize.h)
+        .commit();
+    };
+
+    img.onerror = () => {
+      isLoadingRef.current = false;
+    };
+    img.src = trimmed;
+  };
+
+  const imageContent = useMemo(() => {
+    if (!isValidUrl) {
+      return null;
+    }
+    return (
+      <img
+        src={node.text.trim()}
+        alt=""
+        className="h-full w-full object-cover"
+        draggable={false}
+      />
+    );
+  }, [isValidUrl, node.text]);
+
+  return (
+    <div
+      className={cn("group absolute", className)}
+      data-nodex-node
+      style={{
+        transform: `translate(${node.pos.x}px, ${node.pos.y}px)`,
+        width: node.style.w + node.style.wrapperPadding * 2,
+        height: node.style.h + node.style.wrapperPadding * 2,
+        ...style,
+      }}
+    >
+      <div
+        className="relative h-full w-full"
+        style={{ padding: node.style.wrapperPadding }}
+      >
+        <div
+          className={cn(
+            "rounded-xl border border-slate-200 bg-white text-slate-900 shadow-sm overflow-hidden",
+            node.style.isBold ? "font-semibold" : "font-medium",
+            node.style.isItalic ? "italic" : "not-italic",
+            isEditing ? "select-text" : "select-none",
+            contentClassName,
+          )}
+          style={{
+            ...contentStyle,
+            width: node.style.w,
+            height: node.style.h,
+            borderColor: node.style.color,
+            textAlign: node.style.textAlign,
+            boxShadow:
+              selectedNodeId === node.id
+                ? `0 0 0 2px ${node.style.color}`
+                : undefined,
+            color: node.style.textColor,
+            backgroundColor: node.style.backgroundColor,
+          }}
+          onMouseDown={onMouseDown}
+          onDoubleClick={onDoubleClick}
+        >
+          {showInput ? (
+            <div className="relative h-full w-full">
+              {isEmpty && (
+                <span className="pointer-events-none absolute left-3 top-2 text-sm text-slate-400">
+                  Cole a URL da imagem
+                </span>
+              )}
+              <span
+                ref={textRef}
+                className="absolute inset-0 rounded-xl bg-transparent px-3 py-2 text-sm outline-none whitespace-pre"
+                contentEditable={!readOnly && isEditing}
+                suppressContentEditableWarning
+                data-nodex-ui
+                onMouseDown={(event) => {
+                  event.stopPropagation();
+                  if (event.detail > 1) {
+                    event.preventDefault();
+                  }
+                }}
+                onFocus={() => {
+                  logicalNode?.select();
+                  if (!readOnly) {
+                    setEditingNode(node.id);
+                  }
+                }}
+                onInput={(event) => {
+                  handleUrlChange(event.currentTarget.textContent ?? "");
+                }}
+                onBlur={(event) => {
+                  if (!readOnly) {
+                    setEditingNode(null);
+                  }
+                  handleUrlChange(event.currentTarget.textContent ?? "");
+                }}
+              />
+            </div>
+          ) : (
+            imageContent
+          )}
+        </div>
+
+        <span
+          aria-hidden="true"
+          className={`pointer-events-none absolute top-1/2 h-[6px] -translate-y-1/2 rounded-md ${
+            !isLeft ? "left-0" : "right-0"
+          } ${selectedNodeId !== node.id ? "block" : "hidden"}`}
+          style={{
+            width: node.style.wrapperPadding,
+            backgroundColor: node.style.color,
+          }}
+        />
+
+        {hasChildren && (
+          <>
+            <span
+              aria-hidden="true"
+              className={`pointer-events-none absolute top-1/2 h-[6px] rounded-md -translate-y-1/2 ${
+                isLeft ? "left-0" : "right-0"
+              }`}
+              style={{
+                width: node.style.wrapperPadding / 2,
+                marginRight: isLeft ? 0 : 12,
+                marginLeft: isLeft ? 12 : 0,
+                backgroundColor: node.style.color,
+              }}
+            />
+
+            <span
+              aria-hidden="true"
+              className={`absolute top-1/2 h-5 w-5 -translate-y-1/2 rounded-full text-xs flex items-center font-bold justify-center border-2 ${
+                isLeft ? "-left-1.5" : "-right-1.5"
+              }`}
+              style={{
+                color: node.style.color,
+                borderColor: node.style.color,
+              }}
+              onMouseDown={(event) => {
+                event.stopPropagation();
+              }}
+              onClick={(event) => {
+                event.stopPropagation();
+                logicalNode?.togglechildrensVisibility();
+              }}
+            >
+              {!childrenVisible && node.childrens.length}
+              {childrenVisible && (
+                <span
+                  className="w-3 h-3 rounded-full"
+                  style={{
+                    backgroundColor: node.style.color,
+                  }}
+                />
+              )}
+            </span>
+          </>
+        )}
+      </div>
+
+      <button
+        type="button"
+        className={`absolute top-1/2 h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border border-slate-300 bg-white text-sm font-bold text-slate-700 shadow-sm transition ${
+          selectedNodeId === node.id && editingNodeId !== node.id && !readOnly
+            ? "flex"
+            : "hidden"
+        } ${isLeft ? "-left-2.5" : "-right-2.5"}`}
+        style={{ borderColor: node.style.color, color: node.style.color }}
+        onMouseDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={(event) => {
+          event.stopPropagation();
+          logicalNode?.addChild();
+        }}
+        aria-label="Adicionar node"
+      >
+        +
+      </button>
+
+      <button
+        type="button"
+        className={`absolute top-1/2 h-6 w-6 -translate-y-1/2 items-center justify-center rounded-full border border-slate-300 bg-white text-sm font-semibold text-slate-700 shadow-sm transition ${
+          selectedNodeId === node.id && !readOnly ? "flex" : "hidden"
+        } ${isLeft ? "-right-3" : "-left-3"}`}
+        style={{ borderColor: node.style.color, color: node.style.color }}
+        onMouseDown={(event) => {
+          event.stopPropagation();
+        }}
+        onClick={(event) => {
+          event.stopPropagation();
+          logicalNode?.destroy();
+        }}
+        aria-label="Remover node"
+      >
+        X
+      </button>
+    </div>
+  );
+}

package/src/components/mindMap/KeyboardHelpDialog.tsx

@@ -0,0 +1,108 @@
+import type { CSSProperties } from "react";
+import { useCallback } from "react";
+import { useMindMapState } from "../../state/mindMap";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { type KeyBind, rootKeyBinds } from "../../config/rootKeyBinds";
+import { cn } from "../../lib/utils";
+
+export interface KeyboardHelpDialogStyleSlots {
+  /** Modal content (dialog panel) */
+  contentClassName?: string;
+  contentStyle?: CSSProperties;
+  /** Title ("Atalhos de teclado") */
+  titleClassName?: string;
+  /** Description paragraph below title */
+  descriptionClassName?: string;
+  /** Each shortcut row */
+  itemClassName?: string;
+  /** Shortcut key badge (e.g. "Ctrl + Enter") */
+  shortcutKeyClassName?: string;
+  /** Shortcut description text */
+  shortcutDescriptionClassName?: string;
+}
+
+export interface KeyboardHelpDialogProps
+  extends KeyboardHelpDialogStyleSlots {}
+
+export function KeyboardHelpDialog({
+  contentClassName,
+  contentStyle,
+  titleClassName,
+  descriptionClassName,
+  itemClassName,
+  shortcutKeyClassName,
+  shortcutDescriptionClassName,
+}: KeyboardHelpDialogProps = {}) {
+  const helpOpen = useMindMapState((state) => state.helpOpen);
+  const setHelpOpen = useMindMapState((state) => state.setHelpOpen);
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (nextOpen !== helpOpen) {
+        setHelpOpen(nextOpen);
+      }
+    },
+    [helpOpen, setHelpOpen],
+  );
+
+  const shortcuts = Object.entries(rootKeyBinds).reduce(
+    (acc, [, value]) => [...acc, value],
+    [] as KeyBind[],
+  );
+
+  return (
+    <Dialog open={helpOpen} onOpenChange={handleOpenChange}>
+      <DialogContent
+        className={cn(
+          "h-[520px] max-w-[520px] border-slate-200 bg-white flex flex-col",
+          contentClassName,
+        )}
+        style={contentStyle}
+      >
+        <DialogHeader className="gap-1">
+          <DialogTitle
+            className={cn("text-lg", titleClassName)}
+          >
+            Atalhos de teclado
+          </DialogTitle>
+          <p
+            className={cn(
+              "text-sm text-slate-500",
+              descriptionClassName,
+            )}
+          >
+            Comandos para navegar, editar e controlar o mapa mental.
+          </p>
+        </DialogHeader>
+        <div className="mt-3 min-h-0 flex-1 space-y-2 overflow-y-auto scrollbar -mr-6 pr-6">
+          {shortcuts.map((shortcut) => (
+            <div
+              key={shortcut.shortCut}
+              className={cn(
+                "flex items-start justify-between gap-4 border-b border-slate-100 pb-2 text-sm last:border-none last:pb-0",
+                itemClassName,
+              )}
+            >
+              <span
+                className={cn(
+                  "rounded-md min-w-fit bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-700",
+                  shortcutKeyClassName,
+                )}
+              >
+                {shortcut.shortCut}
+              </span>
+              <span
+                className={cn(
+                  "text-right text-slate-600",
+                  shortcutDescriptionClassName,
+                )}
+              >
+                {shortcut.description}
+              </span>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/mindMap/MineMap.tsx

@@ -0,0 +1,237 @@
+import type { CSSProperties } from "react";
+import { useEffect, useMemo, useState } from "react";
+import type { MindMapNode } from "../../state/mindMap";
+import { useMindMapState } from "../../state/mindMap";
+import { useShallow } from "zustand/react/shallow";
+import { cn } from "../../lib/utils";
+
+export const MINE_MAP_WIDTH = 200;
+export const MINE_MAP_HEIGHT = 120;
+export const MINE_MAP_PADDING = 8;
+
+const MAP_WIDTH = MINE_MAP_WIDTH;
+const MAP_HEIGHT = MINE_MAP_HEIGHT;
+const MAP_PADDING = MINE_MAP_PADDING;
+
+const collectVisibleNodes = (nodes: MindMapNode[]) => {
+  const list: MindMapNode[] = [];
+  const walk = (items: MindMapNode[]) => {
+    for (const node of items) {
+      if (!node.isVisible) {
+        continue;
+      }
+      list.push(node);
+      if (node.childrens.length) {
+        walk(node.childrens);
+      }
+    }
+  };
+  walk(nodes);
+  return list;
+};
+
+export type MineMapNodeToRender = {
+  id: string;
+  x: number;
+  y: number;
+  r: number;
+  color: string;
+};
+
+export type MineMapViewportRect = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
+
+export type MineMapProjectionResult = {
+  nodesToRender: MineMapNodeToRender[];
+  viewportRect: MineMapViewportRect | null;
+};
+
+export function getMineMapProjection(
+  nodes: MindMapNode[],
+  offset: { x: number; y: number },
+  scale: number,
+  rootSize: { w: number; h: number },
+): MineMapProjectionResult {
+  const visibleNodes = collectVisibleNodes(nodes);
+  if (visibleNodes.length === 0) {
+    return { nodesToRender: [], viewportRect: null };
+  }
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of visibleNodes) {
+    const wrapper = node.style.wrapperPadding * 2;
+    const width = node.style.w + wrapper;
+    const height = node.style.h + wrapper;
+    minX = Math.min(minX, node.pos.x);
+    minY = Math.min(minY, node.pos.y);
+    maxX = Math.max(maxX, node.pos.x + width);
+    maxY = Math.max(maxY, node.pos.y + height);
+  }
+  const boundsWidth = Math.max(1, maxX - minX);
+  const boundsHeight = Math.max(1, maxY - minY);
+  const scaleX = (MAP_WIDTH - MAP_PADDING * 2) / boundsWidth;
+  const scaleY = (MAP_HEIGHT - MAP_PADDING * 2) / boundsHeight;
+  const mapScale = Math.min(scaleX, scaleY) * 0.7;
+  const centralNode = visibleNodes.find((node) => node.type === "central");
+  const centralCenter = centralNode
+    ? (() => {
+        const wrapper = centralNode.style.wrapperPadding * 1.5;
+        const width = centralNode.style.w + wrapper;
+        const height = centralNode.style.h + wrapper;
+        return {
+          x: centralNode.pos.x + width / 2.5,
+          y: centralNode.pos.y + height / 2.5,
+        };
+      })()
+    : null;
+  const originX = centralCenter
+    ? centralCenter.x - (MAP_WIDTH / 2 - MAP_PADDING) / mapScale
+    : minX;
+  const originY = centralCenter
+    ? centralCenter.y - (MAP_HEIGHT / 2 - MAP_PADDING) / mapScale
+    : minY;
+
+  const nodesToRender: MineMapNodeToRender[] = visibleNodes.map((node) => {
+    const wrapper = node.style.wrapperPadding * 1.5;
+    const width = node.style.w + wrapper;
+    const height = node.style.h + wrapper;
+    const centerX = node.pos.x + width / 2.5;
+    const centerY = node.pos.y + height / 2.5;
+    return {
+      id: node.id,
+      x: (centerX - originX) * mapScale + MAP_PADDING,
+      y: (centerY - originY) * mapScale + MAP_PADDING,
+      r: node.type === "central" ? 3.5 : 2.5,
+      color: node.style.color,
+    };
+  });
+
+  const viewportRect: MineMapViewportRect | null =
+    rootSize.w && rootSize.h
+      ? {
+          x: (-offset.x / scale - originX) * mapScale + MAP_PADDING,
+          y: (-offset.y / scale - originY) * mapScale + MAP_PADDING,
+          w: (rootSize.w / scale) * mapScale,
+          h: (rootSize.h / scale) * mapScale,
+        }
+      : null;
+
+  return { nodesToRender, viewportRect };
+}
+
+/** Slots para estilizar o MineMap (minimapa) e suas partes internas */
+export interface MineMapStyleSlots {
+  /** Container raiz do minimapa */
+  className?: string;
+  style?: CSSProperties;
+  /** Elemento SVG do mapa */
+  svgClassName?: string;
+  svgStyle?: CSSProperties;
+  /** Cor da borda do quadro do mapa (SVG rect stroke). Default: #e2e8f0 */
+  borderStrokeColor?: string;
+  /** Cor da borda do retângulo de viewport. Default: #0f172a30 */
+  viewportStrokeColor?: string;
+}
+
+interface MineMapProps extends MineMapStyleSlots {}
+
+export function MineMap({
+  className,
+  style,
+  svgClassName,
+  svgStyle,
+  borderStrokeColor = "#e2e8f0",
+  viewportStrokeColor = "#0f172a30",
+}: MineMapProps = {}) {
+  const { nodes, offset, scale, zenMode } = useMindMapState(
+    useShallow((state) => ({
+      nodes: state.nodes,
+      offset: state.offset,
+      scale: state.scale,
+      zenMode: state.zenMode,
+    })),
+  );
+  const [rootSize, setRootSize] = useState({ w: 0, h: 0 });
+
+  useEffect(() => {
+    const root = document.querySelector(
+      "[data-nodex-root]",
+    ) as HTMLElement | null;
+    if (!root) {
+      return;
+    }
+    const updateSize = () => {
+      const bounds = root.getBoundingClientRect();
+      setRootSize({ w: bounds.width, h: bounds.height });
+    };
+    updateSize();
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(root);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  const { nodesToRender, viewportRect } = useMemo(
+    () => getMineMapProjection(nodes, offset, scale, rootSize),
+    [nodes, offset, scale, rootSize.h, rootSize.w],
+  );
+
+  return (
+    <div
+      data-zen={zenMode}
+      className={cn(
+        "pointer-events-none absolute bottom-4 right-4 z-50 transition-all duration-150 rounded-xl border border-slate-200 bg-white/50 p-2 shadow-sm backdrop-blur data-[zen=true]:opacity-0 data-[zen=true]:scale-90 opacity-100 scale-100",
+        className,
+      )}
+      style={style}
+    >
+      <svg
+        width={MAP_WIDTH}
+        height={MAP_HEIGHT}
+        viewBox={`0 0 ${MAP_WIDTH} ${MAP_HEIGHT}`}
+        aria-hidden="true"
+        className={svgClassName}
+        style={svgStyle}
+      >
+        <rect
+          x={0.5}
+          y={0.5}
+          width={MAP_WIDTH - 1}
+          height={MAP_HEIGHT - 1}
+          rx={10}
+          fill="transparent"
+          stroke={borderStrokeColor}
+        />
+        {nodesToRender.map((node) => (
+          <circle
+            key={node.id}
+            cx={node.x}
+            cy={node.y}
+            r={node.r}
+            fill={node.color}
+          />
+        ))}
+        {viewportRect && (
+          <rect
+            x={viewportRect.x}
+            y={viewportRect.y}
+            width={viewportRect.w}
+            height={viewportRect.h}
+            fill="transparent"
+            stroke={viewportStrokeColor}
+            strokeWidth={1}
+            rx={4}
+          />
+        )}
+      </svg>
+    </div>
+  );
+}