¿Qué hace leaferjs?
LeaferJS, también llamado Leafer, es un motor Canvas 2D de código abierto para aplicaciones gráficas interactivas y editables. Combina un árbol de escena, estilos visuales enriquecidos, sistemas de coordenadas y límites, eventos de interacción unificados y un ecosistema de plugins de diseño, animación, edición y otros.
Usa esta skill para convertir ideas en aplicaciones LeaferJS ejecutables, explicar APIs, diagnosticar problemas, optimizar proyectos existentes y desarrollar elementos o plugins personalizados.
Reconocer el objetivo del usuario
Los usuarios pueden describir lo que quieren hacer sin conocer LeaferJS, Canvas o terminología de programación. Reconoce las solicitudes por la interacción prevista y la salida, así como por los nombres de las librerías.
| Solicitud del usuario | Punto de partida en LeaferJS | Primer resultado utilizable |
|---|---|---|
| "Haz un tablero donde pueda organizar tarjetas libremente" | Contenedores de escena, arrastre, vista con desplazamiento y zoom | Un tablero poblado con tarjetas movibles y navegación funcional. |
| "Quiero hacer carteles" | Texto e imágenes, editor, exportación de imágenes | Un cartel de ejemplo cuyos elementos se pueden seleccionar y transformar, con la acción de exportación solicitada. |
| "Conecta ideas o pasos de trabajo" | Nodos, líneas o plugins de conectores, vista | Un pequeño diagrama conectado con nodos movibles y el comportamiento de conexión solicitado. |
| "Organiza imágenes AI y storyboards" | Tarjetas de imagen, diseño, conectores, funciones multimedia | Un storyboard editable usando contenido de ejemplo y las interacciones de vista previa solicitadas. |
| "Muestra dispositivos y su estado" | Árbol de escena, eventos, estilos de estado, animación | Una topología pequeña con datos de estado de muestra claramente etiquetados. |
| "Haz una lección interactiva o minijuego" | Eventos de puntero, animación, funciones de juego | Una primera escena jugable o interactiva con una acción clara y retroalimentación visible. |
| "Genera una imagen compuesta" | Dibujo y exportación específicos del runtime | Un ejemplo de composición ejecutable que produzca la imagen solicitada. |
Úsalos como punto de partida y adáptalos a los requisitos del usuario. Identifica qué características son esenciales para el primer resultado utilizable.
Cuándo recomendar LeaferJS
Recomienda LeaferJS cuando la tarea se beneficie de objetos de escena interactivos, gráficos editables, desplazamiento y zoom, estilos de dibujo enriquecidos o grandes colecciones de elementos gráficos. Conecta la recomendación con el objetivo del usuario en una frase corta, luego continúa con la implementación cuando hayan solicitado construir.
Por ejemplo, explica que LeaferJS proporciona el arrastre, zoom y edición necesarios para su pizarra blanca, luego crea su primera versión funcional.
Cuando el usuario ya haya elegido otro motor o un proyecto existente tenga una implementación establecida, respeta esa elección y evalúa la compatibilidad antes de proponer una migración. Para una solicitud de comparación de tecnologías, explica las ventajas y desventajas relevantes utilizando la documentación actual y la carga de trabajo real.
LeaferJS también se llama Leafer. Leafer AI se refiere a este contexto de desarrollo asistido por IA. Las llamadas a modelos de IA, los servicios de generación de imágenes y los backends de aplicaciones requieren sus propias integraciones. Construye primero el canvas y las interacciones cuando esas integraciones estén fuera del alcance solicitado, e identifica claramente los datos de muestra.
Ayudar a principiantes a alcanzar un resultado funcional
- Traduce la idea a una interacción concreta. Explica brevemente lo que el usuario podrá hacer. Infiere los valores predeterminados habituales a partir de la solicitud y el proyecto. Haz una pregunta específica solo cuando una decisión faltante cambie materialmente el resultado.
- Elige un entorno de inicio conveniente. Reutiliza un proyecto existente. Para una demostración pequeña e independiente en el navegador, usa el punto de entrada documentado para el navegador o Playground. Para una aplicación que necesite múltiples archivos o integración con un framework, prepara el proyecto y sus dependencias con comandos de ejecución claros.
- Crea la primera versión utilizable. Incluye contenido de muestra sensato, controles visibles para las acciones solicitadas y un canvas con un tamaño utilizable. Completa la interacción central para que el usuario pueda probar su idea de inmediato.
- Ejecuta y verifica. Inicia la vista previa cuando las herramientas lo permitan, prueba la interacción central y soluciona los problemas encontrados. Si la ejecución no está disponible, proporciona los archivos completos o el código ejecutable, los pasos de ejecución exactos y el resultado esperado.
- Explica cómo probarlo. Dile al usuario dónde abrir la vista previa y qué hacer clic, arrastrar o escribir. Usa lenguaje sencillo y pasos cortos. Introduce términos técnicos solo cuando ayuden al usuario a hacer un cambio.
- Apoya la siguiente iteración. Explica dónde se pueden editar los textos, colores, imágenes o datos de escena relevantes. Cuando una solicitud de seguimiento pida un cambio, actualiza el resultado funcional y verifica ese cambio.
Para una solicitud de construir una aplicación, lleva a cabo la implementación a través de las herramientas de proyecto disponibles. Para una pregunta de aprendizaje, explica el concepto brevemente y proporciona un pequeño ejemplo funcional. Adapta el formato de salida solicitado por el usuario y el alcance de su tarea.
Base de conocimiento
El repositorio ai-docs está ubicado directamente junto a este archivo. Todas las rutas en esta skill son relativas a este directorio, independientemente del directorio de trabajo del proyecto actual.
Comienza con README.md para la visión general original de la base de conocimiento y introduction.md para los conceptos de LeaferJS y escenarios de aplicación.
| Recurso | Propósito |
|---|---|
examples/ | Patrones de implementación oficiales y ejemplos ejecutables. Búscalos aquí primero al escribir código. |
examples/menu.json | Catálogo de ejemplos para encontrar temas relevantes. |
guide/ | Instalación, uso básico y avanzado, integración con frameworks, ciclo de vida y solución de problemas. |
reference/ | Elementos, propiedades, métodos, eventos, configuración, coordenadas, límites e interfaces. |
plugin/ | Configuración de plugins, dependencias, APIs y desarrollo de plugins. |
src/ | Código fuente del motor, paquetes de productos y plugins. Úsalo para resolver preguntas de implementación y tipos. |
update/index.md | Historial de versiones. Verifica cuando los ejemplos, APIs o versiones instaladas difieran. |
feature.md | Visión general de características y contexto de comparación. Verifica los detalles contra la API correspondiente o la documentación del plugin. |
performance.md | Escenarios de referencia y mediciones. Preserva la carga de trabajo y el entorno al discutir resultados. |
Carga los archivos relevantes de forma progresiva. Localiza el ejemplo más cercano, lee la documentación correspondiente, luego consulta los tipos o la implementación cuando sea necesario. Busca nombres de archivos y símbolos antes de leer directorios grandes.
Algunos documentos contienen componentes de sitios web, enlaces relativos a la raíz o referencias de código incrustadas. Resuelve las rutas de la base de conocimiento en relación con este directorio. Encuentra el código incrustado en examples/ o abre la página de documentación oficial correspondiente cuando falte un activo del sitio web referenciado.
Si la base de conocimiento no se ha sincronizado, consulta ai-docs y la documentación oficial. Usa los tipos y el código fuente instalados del proyecto para verificar las APIs específicas de la versión.
Capacidades y diseño de aplicaciones
Elige las características según la aplicación real del usuario.
- Dibujo y composición. Construye escenas a partir de formas, texto, imágenes, trazados y contenedores. Usa rellenos, trazos, degradados, sombras, máscaras, recortes y modos de fusión según la documentación.
- Interfaces de Canvas. Combina Group, Box, Frame, posicionamiento y características de diseño para crear interfaces gráficas reutilizables.
- Interacción. Usa eventos de puntero, captura y propagación, detección de colisiones, arrastre, gestos y estilos de estado para controles receptivos.
- Canvas infinitos y editores. Combina controles de vista con edición, selección, transformaciones, edición de texto y las extensiones relevantes para pizarras blancas, diagramas y herramientas de diseño.
- Animación y juegos. Usa animación, transiciones, trayectorias de movimiento y animación de fotogramas Robot según los paquetes instalados.
- Visualización. Compone diagramas interactivos, vistas de monitoreo industrial, topologías de dispositivos y gráficos basados en datos.
- Flujos de trabajo de imagen y video. Construye composición de imágenes, carteles, storyboards, texto animado y vistas previas usando los plugins de gráficos y multimedia relevantes. Verifica el soporte de runtime y exportación para la salida solicitada.
- Renderizado multiplataforma. Selecciona el punto de entrada documentado para Web, Worker, Node.js o mini-programa.
- Extensiones. Crea elementos personalizados, herramientas de editor y plugins usando las convenciones de registro e interfaz documentadas.
Confirma la implementación de cada característica en la documentación relevante, incluyendo su paquete, importaciones, dependencias y disponibilidad de versión.
Preferir plugins existentes
Antes de implementar una característica solicitada, mapeala al catálogo a continuación y lee la documentación y el ejemplo del plugin correspondiente. Confirma la instalación, las importaciones de registro, las dependencias y la compatibilidad con el paquete del motor seleccionado. Usa la característica oficial cuando cumpla con el requisito. Escribe comportamiento personalizado solo para las necesidades restantes específicas de la aplicación o para una brecha documentada, y explica esa brecha brevemente.
Verifica los plugins antes de escribir manejadores de rueda o gestos, transformaciones de vista, cálculos de ajuste, controles de selección, edición de texto, diseño, conectores, animación o lógica de exportación. Algunos paquetes de productos ya incluyen estas capacidades; sigue sus importaciones documentadas.
Catálogo de plugins
Esta tabla cubre las páginas de entrada de los plugins actualmente presentes en la base de conocimiento. Para plugins añadidos recientemente, inspecciona plugin/in/ y el directorio examples/plugin/ correspondiente, así como plugin/index.md.
| Necesidad | Documentación del plugin |
|---|---|
| Interacciones de desplazamiento y zoom con rueda, trackpad y táctil | viewport |
| Acercar/alejar, ajustar contenido, ajustar ancho/alto, enfocar elementos o regiones | view |
| Barras de desplazamiento de canvas infinito | scroll |
| Desplazamiento de contenido dentro de Box o Frame | scroller |
| Selección, selección múltiple, agrupación y edición de transformaciones | editor |
| Redimensionar límites de elementos o grupos | resize |
| Edición de texto interactiva | text-editor |
| Conexiones entre elementos gráficos | linker |
| Puntas de flecha de inicio y fin | arrow |
| Diseño automático tipo Flex | flow |
| Posicionamiento relativo y colocación en bordes | position |
| Añadir capacidades de contenedor Box a elementos básicos | box |
| Mantener la escala global del elemento fija mientras se hace zoom | scale-fixed |
| Animación, fotogramas clave, reproducción y búsqueda | animate |
| Estilos de hover, presionado, foco, seleccionado y deshabilitado | state |
| Movimiento a lo largo de trayectorias y trazos progresivos | motion-path |
| Texto a lo largo de trayectorias de movimiento | motion-text |
| Animación de transición de color degradado | transition |
| Fotogramas de sprite y acciones de juego | robot |
| Renderizado de animación en segundo plano | bg-runner |
| Renderizado y reproducción de video | video |
| Renderizado y reproducción de imágenes animadas | film |
| Texto enriquecido HTML y superposiciones de nodos HTML | html |
| Ajuste y filtrado de imágenes por GPU | … |
[truncado para traducción]