@miguimono/json-schema 2.0.0

package/dist/schema/lib/components/schema.component.d.ts

@@ -0,0 +1,115 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges, TemplateRef } from "@angular/core";
+import { JsonAdapterService } from "../services/json-adapter.service";
+import { SchemaLayoutService } from "../services/schema-layout.service";
+import { SchemaEdge, SchemaNode, SchemaSettings, LinkStyle, LayoutAlign, LayoutDirection } from "../models";
+import * as i0 from "@angular/core";
+export declare class SchemaComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private adapter;
+    private layoutService;
+    data: import("@angular/core").InputSignal<any>;
+    settings: import("@angular/core").InputSignal<SchemaSettings | null>;
+    cardTemplate: import("@angular/core").InputSignal<TemplateRef<any> | null>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isError: import("@angular/core").InputSignal<boolean>;
+    emptyMessage: import("@angular/core").InputSignal<string>;
+    loadingMessage: import("@angular/core").InputSignal<string>;
+    errorMessage: import("@angular/core").InputSignal<string>;
+    viewportHeight: import("@angular/core").WritableSignal<number>;
+    minViewportHeight: import("@angular/core").WritableSignal<number>;
+    showToolbar: import("@angular/core").WritableSignal<boolean>;
+    nodeClick: EventEmitter<SchemaNode>;
+    linkClick: EventEmitter<SchemaEdge>;
+    private fullGraph;
+    private graph;
+    nodes: import("@angular/core").Signal<SchemaNode[]>;
+    edges: import("@angular/core").Signal<SchemaEdge[]>;
+    rootRef: ElementRef<HTMLElement>;
+    private scale;
+    private minScale;
+    private maxScale;
+    private tx;
+    private ty;
+    private dragging;
+    private lastX;
+    private lastY;
+    private lastViewport;
+    /** Último punto de interacción sobre la stage (coordenadas de pantalla relativas al root). */
+    private lastPointerScreen;
+    private wheelRaf;
+    private pendingWheel;
+    transform: import("@angular/core").Signal<string>;
+    virtualWidth: number;
+    virtualHeight: number;
+    opt_linkStyle: import("@angular/core").WritableSignal<LinkStyle>;
+    opt_layoutAlign: import("@angular/core").WritableSignal<LayoutAlign>;
+    opt_layoutDirection: import("@angular/core").WritableSignal<LayoutDirection>;
+    isLoadingView: import("@angular/core").Signal<boolean>;
+    isErrorView: import("@angular/core").Signal<boolean>;
+    emptyMessageView: import("@angular/core").Signal<string>;
+    loadingMessageView: import("@angular/core").Signal<string>;
+    errorMessageView: import("@angular/core").Signal<string>;
+    private childrenById;
+    private parentsById;
+    private collapsed;
+    private measureIdsToCheck;
+    private lastDataRef;
+    private lastSettingsRef;
+    private hasComputedOnce;
+    enableCollapse: import("@angular/core").Signal<boolean>;
+    toolbarShowLinkStyle: import("@angular/core").Signal<boolean>;
+    toolbarShowLayoutAlign: import("@angular/core").Signal<boolean>;
+    toolbarShowLayoutDirection: import("@angular/core").Signal<boolean>;
+    constructor(adapter: JsonAdapterService, layoutService: SchemaLayoutService);
+    baseSettings: import("@angular/core").Signal<SchemaSettings>;
+    effectiveSettings: import("@angular/core").Signal<SchemaSettings>;
+    private recomputeFromSettings;
+    private resizeObs?;
+    ngAfterViewInit(): void;
+    ngOnChanges(_: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private compute;
+    private relayoutVisible;
+    onCardToggle(n: SchemaNode): Promise<void>;
+    /** Devuelve si el nodo tiene hijos (para pintar botón de colapso). */
+    hasChildren: (id: string) => boolean;
+    /** Devuelve si el nodo está colapsado (estado visual en la card). */
+    isNodeCollapsed: (id: string) => boolean;
+    private animateToGraph;
+    onWheel(e: WheelEvent): void;
+    onPointerDown(e: PointerEvent): void;
+    onPointerMove(e: PointerEvent): void;
+    onPointerUp(): void;
+    onPointerLeave(): void;
+    onDblClick(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    resetView(): void;
+    setLinkStyle(v: string): void;
+    setLayoutAlign(v: string): void;
+    setLayoutDirection(v: string): void;
+    private cloneGraph;
+    private nextFrame;
+    private ensurePinMeta;
+    private updateVirtualSizeFromGraph;
+    private buildIndices;
+    private isVisibleNodeByCollapsedAncestors;
+    private buildVisibleGraphFromCollapsed;
+    private measureAndApply;
+    private getViewportSize;
+    private getGraphBounds;
+    private computeScaleToFit;
+    private fitToViewByBounds;
+    /** Zoom anclado al último punto de interacción sobre la stage; si no hay, usa el centro del viewport. */
+    private applyZoom;
+    private preserveCenterOnResize;
+    private getNodeById;
+    private getNodeScreenCenter;
+    private applyAnchorAfterLayout;
+    private getFirstVisibleNode;
+    private centerOnNode;
+    /** Centra un nodo de forma que su centro quede en una posición de pantalla dada (x,y). */
+    private centerOnNodeAtScreen;
+    private centerOnFirstNodeOrFit;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SchemaComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SchemaComponent, "schema", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "settings": { "alias": "settings"; "required": false; "isSignal": true; }; "cardTemplate": { "alias": "cardTemplate"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isError": { "alias": "isError"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "linkClick": "linkClick"; }, never, never, true, never>;
+}

package/dist/schema/lib/models.d.ts

@@ -0,0 +1 @@
+export * from "./shared/models";

package/dist/schema/lib/services/json-adapter.service.d.ts

@@ -0,0 +1 @@
+export { JsonAdapterService } from "../shared/services/json-adapter.service";

package/dist/schema/lib/services/schema-layout.service.d.ts

@@ -0,0 +1 @@
+export { SchemaLayoutService } from "../shared/services/schema-layout.service";

package/dist/schema/lib/shared/models.d.ts

@@ -0,0 +1,319 @@
+/**
+ * Tipos y modelos base de la librería Schema.
+ * ---------------------------------------------------------------------------
+ * Este archivo define:
+ *  - Tipos de configuración (dirección del layout, estilos, depuración, etc.)
+ *  - Estructuras del grafo normalizado (nodos y aristas)
+ *  - Estructura de configuración SchemaSettings (por secciones)
+ *  - Valores por defecto (DEFAULT_SETTINGS)
+ *
+ * CONVENCIONES:
+ *  - No se realizan operaciones lógicas aquí; solo contratos y defaults.
+ *  - No modifiques nombres de propiedades existentes: otros módulos dependen
+ *    de ellas. Cualquier cambio es breaking.
+ *  - Todos los ejemplos son ilustrativos y no afectan el comportamiento.
+ */
+/**
+ * Dirección del layout del grafo.
+ * - "RIGHT": flujo de izquierda → derecha (X crece).
+ * - "DOWN" : flujo de arriba → abajo (Y crece).
+ *
+ * Ejemplo de uso:
+ *  layoutDirection: "RIGHT"
+ */
+export type LayoutDirection = "RIGHT" | "DOWN";
+/**
+ * Alineación del padre respecto a sus hijos.
+ * - "firstChild": el centro del padre se alinea con el primer hijo (respeta orden JSON).
+ * - "center"    : el centro del padre se alinea con el promedio de los hijos.
+ *
+ * Ejemplo de uso:
+ *  layoutAlign: "center"
+ */
+export type LayoutAlign = "firstChild" | "center";
+/**
+ * Estilo visual de las aristas.
+ * - "orthogonal": segmentos tipo “L”.
+ * - "curve"     : curva cúbica suave.
+ * - "line"      : recta simple.
+ *
+ * Ejemplo de uso:
+ *  linkStyle: "orthogonal"
+ */
+export type LinkStyle = "curve" | "orthogonal" | "line";
+/**
+ * Estrategia de ajuste de imagen en su contenedor.
+ * - "contain"    : mantiene proporción, siempre completa dentro del cuadro.
+ * - "cover"      : mantiene proporción, puede recortar para cubrir el cuadro.
+ * - "scale-down" : como "contain", pero solo escala hacia abajo si es necesario.
+ *
+ * Nota: estos valores se mapean a CSS `object-fit`.
+ */
+export type ImageFit = "contain" | "cover" | "scale-down";
+/**
+ * Nodo del grafo normalizado.
+ * - `id` y `jsonPath` deben ser únicos por nodo.
+ * - `label` es opcionalmente derivado de claves preferidas (titleKeyPriority).
+ * - `data` conserva el objeto original asociado al nodo.
+ * - `width/height` pueden ajustarse dinámicamente tras medición del DOM.
+ */
+export interface SchemaNode {
+    /** Identificador único (por defecto, `jsonPath`). */
+    id: string;
+    /** Etiqueta visible opcional (título corto del nodo). */
+    label: string;
+    /** Ruta JSON (ej: "$.meta.children[0].name"). Debe ser estable y única. */
+    jsonPath: string;
+    /** Objeto original (o sub-objeto) del cual se derivó el nodo. */
+    data: Record<string, any>;
+    /** Metadatos derivados del proceso de normalización. */
+    jsonMeta?: {
+        /** Título calculado a partir de `titleKeyPriority` (si existe). */
+        title?: string;
+        /** Clave usada para el título (si fue encontrada). */
+        titleKeyUsed?: string;
+        /**
+         * Subconjunto de pares clave-valor “visibles” como vista previa.
+         * Incluye escalares y, opcionalmente, arrays escalares (join(", ")).
+         */
+        attributes?: Record<string, any>;
+        /** Número de hijos directos (no incluye descendencia). */
+        childrenCount?: number;
+        /** Cantidades de arrays no escalares por clave (para badges). */
+        arrayCounts?: Record<string, number>;
+        /**
+         * Orden relativo del hijo dentro de su padre (0, 1, 2, ...),
+         * preserva el orden del JSON para un layout estable.
+         */
+        childOrder?: number;
+    };
+    /** Posición X (en px) dentro del “stage”; definida por el layout. */
+    x?: number;
+    /** Posición Y (en px) dentro del “stage”; definida por el layout. */
+    y?: number;
+    /** Ancho del nodo en px (puede ajustarse tras medición). */
+    width?: number;
+    /** Alto del nodo en px (puede ajustarse tras medición). */
+    height?: number;
+}
+/**
+ * Arista entre dos nodos del grafo.
+ * - `source` y `target` son `id` de nodos existentes.
+ * - `points` (opcional) contiene los puntos calculados por el layout; si no
+ *   existen, el renderizador puede trazar una línea simple entre centros.
+ */
+export interface SchemaEdge {
+    /** Identificador único de la arista (sugerido: `${source}__${target}`). */
+    id: string;
+    /** Id del nodo origen. */
+    source: string;
+    /** Id del nodo destino. */
+    target: string;
+    /** Etiqueta opcional. No se usa en el render por defecto. */
+    label?: string;
+    /** Secuencia de puntos en px (para line/curve/orthogonal). */
+    points?: Array<{
+        x: number;
+        y: number;
+    }>;
+}
+/**
+ * Contenedor inmutable de nodos, aristas y metadatos auxiliares.
+ * - `meta` permite transportar información del layout o anclajes (pinX/pinY).
+ */
+export interface NormalizedGraph {
+    nodes: SchemaNode[];
+    edges: SchemaEdge[];
+    meta?: Record<string, any>;
+}
+/** Forma de la miniatura de imagen en la card. */
+export type ImageShape = "square" | "rounded" | "circle";
+/**
+ * Configuración general de Schema, por secciones.
+ * Todas las propiedades son opcionales y se fusionan con DEFAULT_SETTINGS.
+ *
+ * Recomendación:
+ *  - Define solo lo que necesites modificar.
+ *  - Mantén las secciones separadas para claridad (colors/layout/dataView/...).
+ */
+export interface SchemaSettings {
+    messages?: {
+        /** Forzar overlay de “cargando”. */
+        isLoading?: boolean;
+        /** Forzar overlay de “error”. */
+        isError?: boolean;
+        /** Texto del overlay de carga. */
+        loadingMessage?: string;
+        /** Texto del overlay de error. */
+        errorMessage?: string;
+        /** Texto del overlay “vacío”. */
+        emptyMessage?: string;
+    };
+    colors?: {
+        /** Color del trazo de aristas (CSS color). Ej: "#019df4" */
+        linkStroke?: string;
+        /** Grosor del trazo de aristas (px). Ej: 2 */
+        linkStrokeWidth?: number;
+        /**
+         * Clave booleana en `node.data` para acentuar cards.
+         * Si esta clave está presente en un nodo, se pintará su contorno (y/o fondo)
+         * según su valor true/false/null. La clave será omitida de la vista
+         * previa de atributos (se implementa en JsonAdapterService).
+         *      * Ej: "in_damage" | "certified" | null
+         */
+        accentByKey?: string | null;
+        /** Invierte la semántica de los acentos (true ↔ false). */
+        accentInverse?: boolean;
+        /** Si `true`, aplica un relleno de fondo adicional según el valor. */
+        accentFill?: boolean;
+        /** Habilita clase de color para valor `true`. */
+        showColorTrue?: boolean;
+        /** Habilita clase de color para valor `false`. */
+        showColorFalse?: boolean;
+        /** Habilita clase de color para valor `null`. */
+        showColorNull?: boolean;
+    };
+    layout?: {
+        /** Dirección del layout ("RIGHT" | "DOWN"). */
+        layoutDirection?: LayoutDirection;
+        /** Alineación del padre respecto a hijos ("firstChild" | "center"). */
+        layoutAlign?: LayoutAlign;
+        /** Estilo de aristas ("orthogonal" | "curve" | "line"). */
+        linkStyle?: LinkStyle;
+        /**
+         * Tensión para curvas (px). Rango sugerido: 20–200.
+         * Valores altos generan curvas más “amplias”.
+         */
+        curveTension?: number;
+        /**
+         * Umbral (px) por debajo del cual una curva se renderiza como línea recta
+         * (evita “curvas demasiado cortas”). Sugerido: 40–120.
+         */
+        straightThresholdDx?: number;
+        /** Separación horizontal entre columnas (px). */
+        columnGapPx?: number;
+        /** Separación vertical entre filas (px). */
+        rowGapPx?: number;
+    };
+    dataView?: {
+        /**
+         * Prioridad de claves para título del nodo.
+         * Ej: ["name", "title", "id"]
+         */
+        titleKeyPriority?: string[];
+        /**
+         * Claves globales a ocultar en los atributos de vista previa.
+         * Ej: ["_internal", "password"]
+         */
+        hiddenKeysGlobal?: string[];
+        /**
+         * Si `true`, arrays escalares se muestran en la vista previa (join(", ")).
+         * Ejemplo:
+         *  ["red","green"] → "red, green"
+         */
+        treatScalarArraysAsAttribute?: boolean;
+        /**
+         * Profundidad máxima de exploración. Si `null`, sin límite.
+         *  - 0: solo raíz
+         *  - 1: raíz + 1 nivel
+         *  - n: niveles anidados hasta n
+         */
+        maxDepth?: number | null;
+        /**
+         * Mapa de claves → etiqueta legible para UI.
+         * Ej: { first_name: "Nombre", last_name: "Apellido" }
+         */
+        labelData?: Record<string, string>;
+        /**
+         * Máximo de pares (k,v) en la vista previa. Evita cards demasiado largas.
+         * Sugerido: 20–2000 (por defecto alto para depuración).
+         */
+        previewMaxKeys?: number;
+        /**
+         * Trunca valores largos en la vista previa si exceden este número de caracteres.
+         * Si `null`, no se trunca.
+         */
+        valueMaxChars?: number | null;
+        /**
+         * Si `true`, muestra `title` con el valor completo al pasar el mouse por
+         * el valor truncado.
+         */
+        valueShowTooltip?: boolean;
+        /**
+         * Claves que NO deben romper línea en su valor (aplica `white-space: nowrap`).
+         * Útil para IDs, hashes, etc.
+         * Ej: ["id","hash","uuid"]
+         */
+        noWrapKeys?: string[];
+        /** Máximo ancho de la card (px). Si `null`, sin límite. */
+        maxCardWidth?: number | null;
+        /** Máximo alto de la card (px). Si `null`, sin límite. */
+        maxCardHeight?: number | null;
+        /**
+         * Tamaño por defecto de cada nodo (px).
+         * Se ajusta tras medir contenido cuando `autoResizeCards` es `true`.
+         */
+        defaultNodeSize?: {
+            width: number;
+            height: number;
+        };
+        /**
+         * Clave en `node.data` que contiene la URL de imagen.
+         * Ej: "avatarUrl" | "logo" | null (si no hay imagen).
+         */
+        showImage?: string | null;
+        /**
+         * Tamaño de la miniatura en px (ancho/alto idénticos).
+         * Rango sugerido: 16–96.
+         */
+        imageSizePx?: number;
+        /** Forma de la miniatura: "square" | "rounded" | "circle". */
+        imageShape?: ImageShape;
+        /** Si `true`, dibuja un borde sutil alrededor de la miniatura. */
+        imageBorder?: boolean;
+        /** Color o valor CSS para el fondo de la miniatura. Ej: "transparent". */
+        imageBg?: string | null;
+        /** Estrategia de ajuste de la imagen dentro del cuadro (CSS `object-fit`). */
+        imageFit?: ImageFit;
+        /**
+         * URL/local path de imagen de fallback si falla la carga de `showImage`.
+         * Ej: "assets/comingSoon.png" | null para omitir fallback.
+         * Nota: el componente puede optar por no utilizarlo si no se implementa.
+         */
+        imageFallback?: string | null;
+        /**
+         * Habilita/Deshabilita la capacidad de colapsar nodos.
+         * Cuando está activo, los descendientes de un nodo colapsado no se muestran.
+         */
+        enableCollapse?: boolean;
+        /** Recalcula tamaño de cards tras render para ajustar al contenido. */
+        autoResizeCards?: boolean;
+        /** Ancho extra (px) añadido tras la medición (márgenes internos). */
+        paddingWidthPx?: number;
+        /** Alto extra (px) añadido tras la medición (márgenes internos). */
+        paddingHeightPx?: number;
+    };
+    viewport?: {
+        /** Alto del viewport en px (contenedor con scroll oculto). */
+        height?: number;
+        /** Alto mínimo del viewport en px. */
+        minHeight?: number;
+        /** Muestra/oculta la toolbar. */
+        showToolbar?: boolean;
+        /** Controla la visibilidad de selectores en la toolbar. */
+        toolbarControls?: {
+            /** Selector de estilo de enlaces. */
+            showLinkStyle?: boolean;
+            /** Selector de alineación. */
+            showLayoutAlign?: boolean;
+            /** Selector de dirección. */
+            showLayoutDirection?: boolean;
+        };
+    };
+}
+/**
+ * Valores por defecto (seguros) de configuración.
+ * - Estos valores son fusionados con `SchemaSettings` provistos por el usuario.
+ * - No contienen lógica condicional; son constantes.
+ */
+export declare const DEFAULT_SETTINGS: Required<SchemaSettings>;

package/dist/schema/lib/shared/services/json-adapter.service.d.ts

@@ -0,0 +1,12 @@
+import { NormalizedGraph, SchemaSettings } from "../models";
+import * as i0 from "@angular/core";
+export declare class JsonAdapterService {
+    /**
+     * Normaliza un JSON a grafo de nodos y aristas.
+     * @param input Objeto JSON arbitrario.
+     * @param opts  Configuración parcial (`SchemaSettings`).
+     */
+    normalize(input: any, opts?: Partial<SchemaSettings>): NormalizedGraph;
+    static ɵfac: i0.ɵɵFactoryDeclaration<JsonAdapterService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<JsonAdapterService>;
+}

package/dist/schema/lib/shared/services/schema-layout.service.d.ts

@@ -0,0 +1,21 @@
+import { NormalizedGraph, SchemaSettings } from "../models";
+import * as i0 from "@angular/core";
+/**
+ * Servicio de layout tipo “tidy tree” para RIGHT/DOWN.
+ * No gestiona pan/zoom ni overlays; solo posiciones y trayectorias.
+ */
+export declare class SchemaLayoutService {
+    /**
+     * Aplica layout al grafo.
+     * @param g         Grafo normalizado (nodos/aristas).
+     * @param settings  Configuración parcial. Se fusiona con DEFAULT_SETTINGS.
+     * @returns         Grafo con nodos posicionados y aristas con `points`.
+     */
+    layout(g: NormalizedGraph, settings?: SchemaSettings): Promise<NormalizedGraph>;
+    /**
+     * Fusiona settings parciales con DEFAULT_SETTINGS, sección por sección.
+     */
+    private mergeSettings;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SchemaLayoutService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SchemaLayoutService>;
+}