virtual-tree-canvas 0.4.0 → 0.6.0

package/docs/icon-catalog.json

@@ -0,0 +1,380 @@
+[
+  {
+    "id": "person",
+    "label": "Persona",
+    "category": "Personas y organización",
+    "available": true
+  },
+  {
+    "id": "people",
+    "label": "Grupo",
+    "category": "Personas y organización",
+    "available": true
+  },
+  {
+    "id": "child",
+    "label": "Infancia",
+    "category": "Personas y organización",
+    "available": true
+  },
+  {
+    "id": "dog",
+    "label": "Perro",
+    "category": "Animales",
+    "available": true
+  },
+  {
+    "id": "cat",
+    "label": "Gato",
+    "category": "Animales",
+    "available": true
+  },
+  {
+    "id": "bird",
+    "label": "Ave",
+    "category": "Animales",
+    "available": true
+  },
+  {
+    "id": "fish",
+    "label": "Pez",
+    "category": "Animales",
+    "available": true
+  },
+  {
+    "id": "insect",
+    "label": "Insecto",
+    "category": "Animales",
+    "available": true
+  },
+  {
+    "id": "tree",
+    "label": "Árbol",
+    "category": "Plantas y ecosistemas",
+    "available": true
+  },
+  {
+    "id": "leaf",
+    "label": "Hoja",
+    "category": "Plantas y ecosistemas",
+    "available": true
+  },
+  {
+    "id": "flower",
+    "label": "Flor",
+    "category": "Plantas y ecosistemas",
+    "available": true
+  },
+  {
+    "id": "seedling",
+    "label": "Brote",
+    "category": "Plantas y ecosistemas",
+    "available": true
+  },
+  {
+    "id": "sun",
+    "label": "Sol",
+    "category": "Tiempo atmosférico",
+    "available": true
+  },
+  {
+    "id": "moon",
+    "label": "Luna",
+    "category": "Tiempo atmosférico",
+    "available": true
+  },
+  {
+    "id": "cloud",
+    "label": "Nube",
+    "category": "Tiempo atmosférico",
+    "available": true
+  },
+  {
+    "id": "rain",
+    "label": "Lluvia",
+    "category": "Tiempo atmosférico",
+    "available": true
+  },
+  {
+    "id": "snow",
+    "label": "Nieve",
+    "category": "Tiempo atmosférico",
+    "available": true
+  },
+  {
+    "id": "wind",
+    "label": "Viento",
+    "category": "Tiempo atmosférico",
+    "available": true
+  },
+  {
+    "id": "storm",
+    "label": "Tormenta",
+    "category": "Tiempo atmosférico",
+    "available": true
+  },
+  {
+    "id": "fog",
+    "label": "Niebla",
+    "category": "Tiempo atmosférico",
+    "available": true
+  },
+  {
+    "id": "ground",
+    "label": "Dominio terrestre",
+    "category": "Terreno y agua",
+    "available": true
+  },
+  {
+    "id": "surface",
+    "label": "Dominio de superficie",
+    "category": "Terreno y agua",
+    "available": true
+  },
+  {
+    "id": "subsurface",
+    "label": "Dominio submarino",
+    "category": "Terreno y agua",
+    "available": true
+  },
+  {
+    "id": "car",
+    "label": "Coche",
+    "category": "Transporte terrestre",
+    "available": true
+  },
+  {
+    "id": "bicycle",
+    "label": "Bicicleta",
+    "category": "Transporte terrestre",
+    "available": true
+  },
+  {
+    "id": "bus-vehicle",
+    "label": "Autobús de pasajeros",
+    "category": "Transporte terrestre",
+    "available": true
+  },
+  {
+    "id": "aircraft",
+    "label": "Avión",
+    "category": "Aviación y espacio",
+    "available": true
+  },
+  {
+    "id": "helicopter",
+    "label": "Helicóptero",
+    "category": "Aviación y espacio",
+    "available": true
+  },
+  {
+    "id": "drone",
+    "label": "Dron",
+    "category": "Aviación y espacio",
+    "available": true
+  },
+  {
+    "id": "space",
+    "label": "Dominio espacial",
+    "category": "Aviación y espacio",
+    "available": true
+  },
+  {
+    "id": "ship",
+    "label": "Buque",
+    "category": "Entorno marítimo",
+    "available": true
+  },
+  {
+    "id": "box",
+    "label": "Caja",
+    "category": "Objetos e instalaciones",
+    "available": true
+  },
+  {
+    "id": "building",
+    "label": "Edificio",
+    "category": "Objetos e instalaciones",
+    "available": true
+  },
+  {
+    "id": "data-bus",
+    "label": "Bus de datos",
+    "category": "Datos y redes",
+    "available": true
+  },
+  {
+    "id": "network",
+    "label": "Red",
+    "category": "Datos y redes",
+    "available": true
+  },
+  {
+    "id": "server",
+    "label": "Servidor",
+    "category": "Datos y redes",
+    "available": true
+  },
+  {
+    "id": "database",
+    "label": "Base de datos",
+    "category": "Datos y redes",
+    "available": true
+  },
+  {
+    "id": "link",
+    "label": "Enlace",
+    "category": "Datos y redes",
+    "available": true
+  },
+  {
+    "id": "sensor",
+    "label": "Sensor genérico",
+    "category": "Sensores y mediciones",
+    "available": true
+  },
+  {
+    "id": "radar",
+    "label": "Radar",
+    "category": "Sensores y mediciones",
+    "available": true
+  },
+  {
+    "id": "thermometer",
+    "label": "Termómetro",
+    "category": "Sensores y mediciones",
+    "available": true
+  },
+  {
+    "id": "globe",
+    "label": "Globo terrestre",
+    "category": "Geografía y navegación",
+    "available": true
+  },
+  {
+    "id": "point",
+    "label": "Punto",
+    "category": "Geografía y navegación",
+    "available": true
+  },
+  {
+    "id": "track",
+    "label": "Traza",
+    "category": "Geografía y navegación",
+    "available": true
+  },
+  {
+    "id": "folder",
+    "label": "Carpeta",
+    "category": "Inspector y documentos",
+    "available": true
+  },
+  {
+    "id": "inspector-object",
+    "label": "Objeto de datos",
+    "category": "Inspector y documentos",
+    "available": true
+  },
+  {
+    "id": "inspector-array",
+    "label": "Array",
+    "category": "Inspector y documentos",
+    "available": true
+  },
+  {
+    "id": "inspector-value",
+    "label": "Valor escalar",
+    "category": "Inspector y documentos",
+    "available": true
+  },
+  {
+    "id": "warning",
+    "label": "Advertencia",
+    "category": "Estados y alertas",
+    "available": true
+  },
+  {
+    "id": "error",
+    "label": "Error",
+    "category": "Estados y alertas",
+    "available": true
+  },
+  {
+    "id": "placeholder",
+    "label": "Tipo desconocido",
+    "category": "Estados y alertas",
+    "available": true
+  },
+  {
+    "id": "damage",
+    "label": "Daño",
+    "category": "Estados y alertas",
+    "available": true
+  },
+  {
+    "id": "situation",
+    "label": "Situación",
+    "category": "Estados y alertas",
+    "available": true
+  },
+  {
+    "id": "lock",
+    "label": "Bloqueado",
+    "category": "Estados y alertas",
+    "available": true
+  },
+  {
+    "id": "control",
+    "label": "Control",
+    "category": "Acciones y controles",
+    "available": true
+  },
+  {
+    "id": "task",
+    "label": "Tarea",
+    "category": "Acciones y controles",
+    "available": true
+  },
+  {
+    "id": "star",
+    "label": "Favorito",
+    "category": "Acciones y controles",
+    "available": true
+  },
+  {
+    "id": "pin",
+    "label": "Fijado",
+    "category": "Acciones y controles",
+    "available": true
+  },
+  {
+    "id": "heart",
+    "label": "Preferencia afectiva",
+    "category": "Acciones y controles",
+    "available": true
+  },
+  {
+    "id": "grip",
+    "label": "Asa de arrastre",
+    "category": "Acciones y controles",
+    "available": true
+  },
+  {
+    "id": "clock",
+    "label": "Reloj",
+    "category": "Tiempo y simulación",
+    "available": true
+  },
+  {
+    "id": "calendar",
+    "label": "Calendario",
+    "category": "Tiempo y simulación",
+    "available": true
+  },
+  {
+    "id": "munition",
+    "label": "Munición",
+    "category": "Tiempo y simulación",
+    "available": true
+  }
+]

package/docs/icon-catalog.md

@@ -0,0 +1,167 @@
+# Catálogo de iconos
+
+Los 63 iconos incluidos están disponibles en `resources/icons/`.
+Consulta la [galería visual](./icon-catalog.html) para verlos sobre fondos claros
+u oscuros y comparar tamaños. `builtinIconNames` permite enumerar sus IDs desde JavaScript.
+
+## Uso
+
+Asigna un ID a la propiedad `icon` del nodo:
+
+```js
+view.setData([{ id: 'operator-1', label: 'Operador', icon: 'person' }]);
+```
+
+- `data-bus` representa un bus de datos; `bus-vehicle`, un autobús.
+- `placeholder` es el icono utilizado cuando no hay uno específico.
+- Acompaña los iconos con etiquetas. Para estados como advertencias o errores,
+  proporciona también texto y no dependas únicamente del color.
+- Para añadir un icono propio, usa `view.registerIcon('custom', svgStringOrUrl)`
+  y asigna `icon: 'custom'` al nodo.
+- Configura `iconsBaseUrl` al crear la vista si los recursos se sirven desde otra URL.
+  Los SVG se cargan al dibujarlos o mediante `view.controller.iconRegistry.prepare()`.
+
+## Iconos disponibles
+
+### Personas y organización
+
+| ID | Significado |
+| --- | --- |
+| `person` | Persona |
+| `people` | Grupo |
+| `child` | Infancia |
+
+### Animales
+
+| ID | Significado |
+| --- | --- |
+| `dog` | Perro |
+| `cat` | Gato |
+| `bird` | Ave |
+| `fish` | Pez |
+| `insect` | Insecto |
+
+### Plantas y ecosistemas
+
+| ID | Significado |
+| --- | --- |
+| `tree` | Árbol |
+| `leaf` | Hoja |
+| `flower` | Flor |
+| `seedling` | Brote |
+
+### Tiempo atmosférico
+
+| ID | Significado |
+| --- | --- |
+| `sun` | Sol |
+| `moon` | Luna |
+| `cloud` | Nube |
+| `rain` | Lluvia |
+| `snow` | Nieve |
+| `wind` | Viento |
+| `storm` | Tormenta |
+| `fog` | Niebla |
+
+### Terreno y agua
+
+| ID | Significado |
+| --- | --- |
+| `ground` | Dominio terrestre |
+| `surface` | Dominio de superficie |
+| `subsurface` | Dominio submarino |
+
+### Transporte terrestre
+
+| ID | Significado |
+| --- | --- |
+| `car` | Coche |
+| `bicycle` | Bicicleta |
+| `bus-vehicle` | Autobús de pasajeros |
+
+### Aviación y espacio
+
+| ID | Significado |
+| --- | --- |
+| `aircraft` | Avión |
+| `helicopter` | Helicóptero |
+| `drone` | Dron |
+| `space` | Dominio espacial |
+
+### Entorno marítimo
+
+| ID | Significado |
+| --- | --- |
+| `ship` | Buque |
+
+### Objetos e instalaciones
+
+| ID | Significado |
+| --- | --- |
+| `box` | Caja |
+| `building` | Edificio |
+
+### Datos y redes
+
+| ID | Significado |
+| --- | --- |
+| `data-bus` | Bus de datos |
+| `network` | Red |
+| `server` | Servidor |
+| `database` | Base de datos |
+| `link` | Enlace |
+
+### Sensores y mediciones
+
+| ID | Significado |
+| --- | --- |
+| `sensor` | Sensor genérico |
+| `radar` | Radar |
+| `thermometer` | Termómetro |
+
+### Geografía y navegación
+
+| ID | Significado |
+| --- | --- |
+| `globe` | Globo terrestre |
+| `point` | Punto |
+| `track` | Traza |
+
+### Inspector y documentos
+
+| ID | Significado |
+| --- | --- |
+| `folder` | Carpeta |
+| `inspector-object` | Objeto de datos |
+| `inspector-array` | Array |
+| `inspector-value` | Valor escalar |
+
+### Estados y alertas
+
+| ID | Significado |
+| --- | --- |
+| `warning` | Advertencia |
+| `error` | Error |
+| `placeholder` | Tipo desconocido |
+| `damage` | Daño |
+| `situation` | Situación |
+| `lock` | Bloqueado |
+
+### Acciones y controles
+
+| ID | Significado |
+| --- | --- |
+| `control` | Control |
+| `task` | Tarea |
+| `star` | Favorito |
+| `pin` | Fijado |
+| `heart` | Preferencia afectiva |
+| `grip` | Asa de arrastre |
+
+### Tiempo y simulación
+
+| ID | Significado |
+| --- | --- |
+| `clock` | Reloj |
+| `calendar` | Calendario |
+| `munition` | Munición |

package/examples/generate-tree.js

@@ -0,0 +1,86 @@
+/**
+ * @param {number} count
+ * @returns {Array<import('../src/core/types.js').TreeNode>}
+ */
+export function generateTree(count = 10000) {
+  const nodes = [{ id: 'root', label: 'Operations Theater', type: 'root', tags: ['root', 'ops'] }];
+  const systems = ['Command', 'Air Defense', 'ISR', 'Logistics', 'Mission Planning'];
+  const platforms = [
+    { label: 'air', type: 'air', tags: ['air', 'platform'] },
+    { label: 'ground', type: 'ground', tags: ['ground', 'platform'] },
+    { label: 'surface', type: 'surface', tags: ['surface', 'platform'] },
+    { label: 'sub', type: 'subsurface', tags: ['subsurface', 'platform'] },
+    { label: 'space', type: 'space', tags: ['space', 'platform'] },
+  ];
+  const sensors = ['Radar', 'Emitter Beam', 'EO Camera', 'SIGINT', 'IFF', 'Telemetry'];
+  const tasks = ['Patrol', 'Track', 'Inspect', 'Relay', 'Intercept'];
+
+  for (const [index, label] of systems.entries()) {
+    nodes.push({
+      id: `system-${index}`,
+      parentId: 'root',
+      label: `${label} System`,
+      type: 'system',
+      tags: ['system', label.toLowerCase().replaceAll(' ', '-')],
+    });
+  }
+
+  let i = nodes.length;
+  let platformCursor = 0;
+  while (i < count) {
+    const system = nodes[1 + (i % systems.length)];
+    const platformId = `platform-${i}`;
+    const platform = platforms[platformCursor % platforms.length];
+    platformCursor++;
+    nodes.push({
+      id: platformId,
+      parentId: system.id,
+      label: `${platform.label}-${100 + (i % 900)}`,
+      type: platform.type,
+      tags: ['platform', ...platform.tags, i % 5 === 0 ? 'priority' : 'normal'],
+      data: { ordinal: i },
+    });
+    i++;
+    if (i >= count) break;
+
+    for (let s = 0; s < 3 && i < count; s++, i++) {
+      nodes.push({
+        id: `sensor-${i}`,
+        parentId: platformId,
+        label: `${sensors[(i + s) % sensors.length]} ${i}`,
+        type: i % 19 === 0 ? 'warning' : 'sensor',
+        tags: ['sensor', sensors[(i + s) % sensors.length].toLowerCase().replaceAll(' ', '-')],
+        data: { ordinal: i },
+      });
+    }
+
+    for (let t = 0; t < 4 && i < count; t++, i++) {
+      const isWarning = i % 23 === 0;
+      const isMunition = !isWarning && i % 17 === 0;
+      const isGeometry = !isWarning && !isMunition && i % 13 === 0;
+      nodes.push({
+        id: `${isWarning ? 'warning' : isMunition ? 'munition' : isGeometry ? 'point' : 'track'}-${i}`,
+        parentId: platformId,
+        label: `${isWarning ? 'Warning' : isMunition ? 'Mini Missile' : isGeometry ? 'Pointer' : 'Track'} ${String(i).padStart(5, '0')}`,
+        type: isWarning ? 'warning' : isMunition ? 'munition' : isGeometry ? 'geometry' : 'track',
+        tags: [isWarning ? 'warning' : isMunition ? 'munition' : isGeometry ? 'geometry' : 'track', i % 11 === 0 ? 'hot' : 'stable'],
+        data: { ordinal: i },
+      });
+    }
+
+    for (let task = 0; task < 2 && i < count; task++, i++) {
+      const isControl = i % 29 === 0;
+      const isSituation = !isControl && i % 37 === 0;
+      nodes.push({
+        id: `${isControl ? 'control' : isSituation ? 'situation' : 'task'}-${i}`,
+        parentId: platformId,
+        label: `${isControl ? 'Control' : isSituation ? 'Situation' : `${tasks[i % tasks.length]} Task`} ${i}`,
+        type: i % 31 === 0 ? 'error' : isControl ? 'control' : isSituation ? 'situation' : 'task',
+        tags: [isControl ? 'control' : isSituation ? 'situation' : 'task', tasks[i % tasks.length].toLowerCase()],
+        data: { ordinal: i },
+      });
+    }
+  }
+
+  return nodes.slice(0, count);
+}

package/examples/reorder-table.html

@@ -0,0 +1,33 @@
+<!doctype html><html lang="es"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Orden manual · virtual-tree-canvas</title>
+<style>*{box-sizing:border-box}body{font:15px system-ui;background:#0b1020;color:#e2e8f0;padding:30px;max-width:1100px;margin:auto}h1{font-size:26px;margin-bottom:8px}p{line-height:1.5;color:#aabbd1}button,input{background:#172339;color:inherit;border:1px solid #64748b;border-radius:6px;padding:8px 12px;font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #38bdf8;outline-offset:3px}header{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}#host{position:relative;height:390px;border:1px solid #334155;border-radius:8px;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%}output{display:block;min-height:28px;margin-top:16px;color:#67e8f9}code{font-size:13px}#order{color:#94a3b8;overflow-wrap:anywhere}</style>
+<h1>Tabla con orden manual</h1><p>Arrastra el asa de una fila o usa sus flechas. Con la tabla enfocada, <kbd>Alt</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd> mueve la fila. <kbd>Esc</kbd> cancela el arrastre. Los valores siguen actualizándose.</p>
+<header><button id="clear">Quitar filtro y ordenación</button><button id="pause">Pausar valores</button><button id="reset">Restablecer orden</button></header>
+<div id="host"></div><output id="status" aria-live="polite">Orden manual activo</output><p id="order"></p>
+<script type="module">
+import { TreeView } from '../src/index.js';
+const host=document.querySelector('#host');
+const rows=[
+{id:'altitude',label:'Altitud',icon:'aircraft',data:{unit:'m'}},
+{id:'speed',label:'Velocidad',icon:'car',data:{unit:'m/s'}},
+{id:'temperature',label:'Temperatura',icon:'thermometer',data:{unit:'°C'}},
+{id:'wind',label:'Viento',icon:'wind',data:{unit:'m/s'}},
+{id:'power',label:'Potencia',icon:'sensor',data:{unit:'W'}},
+{id:'signal',label:'Señal del bus de datos',icon:'data-bus',data:{unit:'dB'}},
+{id:'people',label:'Personas detectadas',icon:'people',data:{unit:''}},
+{id:'range',label:'Distancia',icon:'radar',data:{unit:'m'}}];
+const view=new TreeView(host,{rowReorder:true,editable:false,iconsBaseUrl:'../resources/icons/',columns:[{id:'name',kind:'tree',label:'Propiedad',width:380,value:n=>n.label},{id:'value',label:'Valor',width:160,value:(_n,s)=>s.value??'—'},{id:'unit',label:'Unidad',width:120,value:n=>n.data?.unit??''}]});
+const controller=view.controller;
+window.demoView=view;window.demoController=controller;window.reorderEvents=[];
+const key='vtc-demo-manual-order';
+function install(order){const byId=new Map(rows.map(n=>[n.id,n]));const ordered=order.map(id=>byId.get(id)).filter(Boolean);const seen=new Set(ordered.map(n=>n.id));view.setData([...ordered,...rows.filter(n=>!seen.has(n.id))]);showOrder();}
+function showOrder(){document.querySelector('#order').textContent='Orden: '+controller.getRowOrder().join(' → ');}
+let saved=[];try{saved=JSON.parse(localStorage.getItem(key)||'[]');}catch{}install(Array.isArray(saved)?saved:[]);
+controller.on('rowreorder',({detail})=>{window.reorderEvents.push(detail);localStorage.setItem(key,JSON.stringify(detail.order));document.querySelector('#status').textContent=`${detail.nodeId}: posición ${detail.toIndex+1}`;showOrder();});
+function mode(){document.querySelector('#status').textContent=controller.canReorderRows()?'Orden manual activo':'Quita el filtro y la ordenación para mover filas.';}
+controller.on('filterchange',mode);controller.on('sortchange',mode);
+document.querySelector('#clear').onclick=()=>{controller.clearFilter();controller.clearSort();};
+document.querySelector('#reset').onclick=()=>{localStorage.removeItem(key);install([]);};
+let paused=false,tick=0;document.querySelector('#pause').onclick=e=>{paused=!paused;e.target.textContent=paused?'Reanudar valores':'Pausar valores';};
+const timer=setInterval(()=>{if(paused)return;tick++;controller.setDynamicState(rows.map((n,i)=>({id:n.id,state:{value:n.id==='people'?Math.floor(tick/20)%8:(100+i*20+Math.sin(tick/8+i)*5).toFixed(2)}})));},150);
+window.addEventListener('pagehide',()=>{clearInterval(timer);view.destroy();});
+</script></html>