@ankorar/nodex 0.0.1

package/src/components/mindMap/DefaultNode.tsx

@@ -0,0 +1,205 @@
+import type { CSSProperties } from "react";
+import type { MindMapNode } from "../../state/mindMap";
+import { useRef } from "react";
+import { useMindMapState } from "../../state/mindMap";
+import { useShallow } from "zustand/react/shallow";
+import { useMindMapNodeMouseHandlers } from "../../hooks/mindMap/useMindMapNodeMouseHandlers";
+import { useMindMapNode } from "../../hooks/mindMap/useMindMapNode";
+import { useMindMapNodeEditor } from "../../hooks/mindMap/useMindMapNodeEditor";
+import { cn } from "../../lib/utils";
+
+interface DefaultNodeProps {
+  node: MindMapNode;
+  className?: string;
+  style?: CSSProperties;
+  /** Caixa do conteúdo (retângulo com texto) */
+  contentClassName?: string;
+  contentStyle?: CSSProperties;
+}
+
+export function DefaultNode({
+  node,
+  className,
+  style,
+  contentClassName,
+  contentStyle,
+}: DefaultNodeProps) {
+  const { node: logicalNode } = useMindMapNode({ nodeId: node.id });
+
+  if (!logicalNode) return;
+
+  const { editingNodeId, selectedNodeId, readOnly } = useMindMapState(
+    useShallow((state) => ({
+      selectedNodeId: state.selectedNodeId,
+      editingNodeId: state.editingNodeId,
+      readOnly: state.readOnly,
+    })),
+  );
+
+  const side = logicalNode.getSide();
+  const isLeft = side === "left";
+
+  const hasChildren = node.childrens.length > 0;
+  const childrenVisible = node.childrens.some((child) => child.isVisible);
+  const textRef = useRef<HTMLSpanElement | null>(null);
+
+  const editableHandlers = useMindMapNodeEditor({
+    nodeId: node.id,
+    text: node.text,
+    textRef,
+  });
+
+  const { onMouseDown, onDoubleClick } = useMindMapNodeMouseHandlers(node.id);
+
+  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(
+            "flex items-center justify-center rounded-xl text-slate-900 data-[bold=true]:font-semibold data-[italic=true]:italic",
+            editingNodeId === node.id ? "select-text" : "select-none",
+            contentClassName,
+          )}
+          data-bold={node.style.isBold}
+          data-italic={node.style.isItalic}
+          style={{
+            ...contentStyle,
+            width: node.style.w,
+            height: node.style.h,
+            padding: `${node.style.padding.y}px ${node.style.padding.x}px`,
+            borderColor: node.style.color,
+            fontSize: node.style.fontSize,
+            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}
+        >
+          <span
+            ref={textRef}
+            className="inline-block whitespace-pre outline-none leading-none"
+            contentEditable={!readOnly && editingNodeId === node.id}
+            suppressContentEditableWarning
+            onMouseDown={(event) => {
+              if (event.detail > 1) {
+                event.preventDefault();
+              }
+            }}
+            {...editableHandlers}
+          />
+        </div>
+
+        <span
+          aria-hidden="true"
+          data-left={isLeft}
+          data-selected={selectedNodeId === node.id}
+          className="pointer-events-none absolute top-1/2 h-[6px] -translate-y-1/2 rounded-md data-[left=false]:left-0 right-0  data-[selected=true]:hidden block"
+          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/Header.tsx

@@ -0,0 +1,247 @@
+import type { CSSProperties } from "react";
+import { useState } from "react";
+import { useMindMapState } from "../../state/mindMap";
+import { useShallow } from "zustand/react/shallow";
+import { cn } from "../../lib/utils";
+import {
+  SaveStatusIndicator,
+  type MindMapSaveStatus,
+} from "./SaveStatusIndicator";
+import { exportMindMapAsHighQualityImage } from "../../utils/exportMindMapAsHighQualityImage";
+import { exportMindMapAsMarkdown } from "../../utils/exportMindMapAsMarkdown";
+import { exportMindMapAsPdf } from "../../utils/exportMindMapAsPdf";
+import { Download, EllipsisVertical, FileText, LoaderCircle, FileDown } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+
+/** Slots para estilizar cada parte interna do Header (ex.: integrar com tema da aplicação) */
+export interface HeaderStyleSlots {
+  /** Raiz: elemento <header> */
+  className?: string;
+  style?: CSSProperties;
+  /** Container que envolve título e ações */
+  wrapperClassName?: string;
+  wrapperStyle?: CSSProperties;
+  /** Texto do título */
+  titleClassName?: string;
+  titleStyle?: CSSProperties;
+  /** Container dos botões (menu + indicador de save) */
+  actionsClassName?: string;
+  actionsStyle?: CSSProperties;
+  /** Botão do menu (três pontos) */
+  menuTriggerClassName?: string;
+  menuTriggerStyle?: CSSProperties;
+  /** Conteúdo do popover (dropdown de exportar) */
+  popoverContentClassName?: string;
+  popoverContentStyle?: CSSProperties;
+  /** Cada item do menu (Exportar imagem, MD, PDF) */
+  menuItemClassName?: string;
+  menuItemStyle?: CSSProperties;
+  /** Indicador de status de save */
+  saveStatusClassName?: string;
+  saveStatusStyle?: CSSProperties;
+}
+
+export interface HeaderProps extends HeaderStyleSlots {
+  title?: string;
+  saveStatus?: MindMapSaveStatus | null;
+  saveStatusLabels?: Partial<Record<MindMapSaveStatus, string>>;
+  /** When true, shows a menu (three dots) with export and future map options. */
+  showExportImageButton?: boolean;
+  /** Background color for the exported PNG image (e.g. "white", "#1e293b"). */
+  exportBackgroundColor?: string;
+}
+
+export function Header({
+  title = "Nodex",
+  className,
+  style,
+  wrapperClassName,
+  wrapperStyle,
+  titleClassName,
+  titleStyle,
+  actionsClassName,
+  actionsStyle,
+  menuTriggerClassName,
+  menuTriggerStyle,
+  popoverContentClassName,
+  popoverContentStyle,
+  menuItemClassName,
+  menuItemStyle,
+  saveStatus = null,
+  saveStatusClassName,
+  saveStatusStyle,
+  saveStatusLabels,
+  showExportImageButton = false,
+  exportBackgroundColor,
+}: HeaderProps) {
+  const [exporting, setExporting] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const { zenMode, nodes } = useMindMapState(
+    useShallow((state) => ({
+      zenMode: state.zenMode,
+      nodes: state.nodes,
+      getFlatNodes: state.getFlatNodes,
+    })),
+  );
+
+  const slug =
+    (title ?? "mind-map")
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^a-z0-9-]/g, "") || `mind-map-${Date.now()}`;
+
+  const handleExportImage = async () => {
+    if (exporting || nodes.length === 0) return;
+    setExporting(true);
+    try {
+      await exportMindMapAsHighQualityImage(nodes, {
+        filename: slug,
+        exportBackgroundColor,
+      });
+      setMenuOpen(false);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleExportMarkdown = () => {
+    if (nodes.length === 0) return;
+    exportMindMapAsMarkdown(nodes, { filename: slug });
+    setMenuOpen(false);
+  };
+
+  const handleExportPdf = () => {
+    if (nodes.length === 0) return;
+    setExporting(true);
+    try {
+      exportMindMapAsPdf(nodes, { filename: slug });
+      setMenuOpen(false);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  return (
+    <header
+      data-zen={zenMode}
+      className={cn(
+        "overflow-hidden border-b flex items-center w-full border-slate-200 bg-white px-4 py-3 text-base font-semibold transition-all duration-200 data-[zen=true]:pointer-events-none data-[zen=true]:max-h-0 data-[zen=true]:-translate-y-2 data-[zen=true]:opacity-0 max-h-16 translate-y-0 opacity-100",
+        className,
+      )}
+      style={style}
+    >
+      <div
+        className={cn("flex items-center justify-between gap-3 w-full", wrapperClassName)}
+        style={wrapperStyle}
+      >
+        <span className={cn("truncate", titleClassName)} style={titleStyle}>
+          {title}
+        </span>
+
+        <div
+          className={cn("flex shrink-0 items-center gap-2", actionsClassName)}
+          style={actionsStyle}
+        >
+          {showExportImageButton && (
+            <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+              <PopoverTrigger asChild>
+                <button
+                  type="button"
+                  disabled={nodes.length === 0}
+                  className={cn(
+                    "flex h-8 w-8 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 disabled:opacity-50",
+                    menuTriggerClassName,
+                  )}
+                  style={menuTriggerStyle}
+                  title="Opções do mapa"
+                  aria-label="Opções do mapa"
+                  aria-expanded={menuOpen}
+                >
+                  {exporting ? (
+                    <LoaderCircle
+                      className="h-4 w-4 animate-spin"
+                      aria-hidden
+                    />
+                  ) : (
+                    <EllipsisVertical className="h-4 w-4" aria-hidden />
+                  )}
+                </button>
+              </PopoverTrigger>
+              <PopoverContent
+                align="end"
+                className={cn("w-52 p-1", popoverContentClassName)}
+                style={popoverContentStyle}
+              >
+                <button
+                  type="button"
+                  onClick={handleExportImage}
+                  disabled={exporting || nodes.length === 0}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs text-slate-700 transition hover:bg-slate-100 disabled:opacity-50",
+                    menuItemClassName,
+                  )}
+                  style={menuItemStyle}
+                >
+                  {exporting ? (
+                    <LoaderCircle
+                      className="h-4 w-4 shrink-0 animate-spin"
+                      aria-hidden
+                    />
+                  ) : (
+                    <Download className="h-4 w-4 shrink-0" aria-hidden />
+                  )}
+                  <span>
+                    {exporting ? "Exportando…" : "Exportar imagem"}
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  onClick={handleExportMarkdown}
+                  disabled={nodes.length === 0}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs text-slate-700 transition hover:bg-slate-100 disabled:opacity-50",
+                    menuItemClassName,
+                  )}
+                  style={menuItemStyle}
+                >
+                  <FileText className="h-4 w-4 shrink-0" aria-hidden />
+                  <span>Exportar em texto (MD)</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={handleExportPdf}
+                  disabled={exporting || nodes.length === 0}
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs text-slate-700 transition hover:bg-slate-100 disabled:opacity-50",
+                    menuItemClassName,
+                  )}
+                  style={menuItemStyle}
+                >
+                  <FileDown className="h-4 w-4 shrink-0" aria-hidden />
+                  <span>Exportar PDF</span>
+                </button>
+              </PopoverContent>
+            </Popover>
+          )}
+          {saveStatus ? (
+            saveStatusStyle != null ? (
+              <span style={saveStatusStyle}>
+                <SaveStatusIndicator
+                  status={saveStatus}
+                  className={saveStatusClassName}
+                  labels={saveStatusLabels}
+                />
+              </span>
+            ) : (
+              <SaveStatusIndicator
+                status={saveStatus}
+                className={saveStatusClassName}
+                labels={saveStatusLabels}
+              />
+            )
+          ) : null}
+        </div>
+      </div>
+    </header>
+  );
+}