BCODE RAD - Electron Edition

Visual HTML/CSS/JavaScript Designer desarrollado con Electron y Node.js.

Replica exactamente la funcionalidad de BCODE RAD (Free Pascal/Lazarus) en una arquitectura moderna con Electron 33.x y Node.js 22.x.

🚀 Características

• ✅ Editor Visual con drag & drop de componentes Bootstrap
• ✅ Editor de Código Monaco Editor con syntax highlighting
• ✅ Sistema de Plugins JavaScript extensible (6 plugins activos)
• ✅ Sincronización Bidireccional entre vista visual y código
• ✅ Undo/Redo ilimitado (sin límite de 1023 estados)
• ✅ Catálogo de Componentes Bootstrap 3/4 predefinidos
• ✅ Sin límites hardcoded - Arrays dinámicos para componentes y plugins
• ✅ Arquitectura Modular - Separación clara de responsabilidades

📋 Requisitos Previos

• Node.js v18 o superior (recomendado v22.x)
• npm v9 o superior

🔧 Instalación

1. Instalar Dependencias

cd bcode-electron
npm install

2. Ejecutar en Modo Desarrollo

npm start

O con DevTools abierto:

npm run dev

3. Compilar Ejecutable

Windows

npm run build:win

macOS

npm run build:mac

Linux

npm run build:linux

Los ejecutables se generarán en el directorio dist/.

📖 Uso

Crear Nuevo Proyecto

1. Menú: Archivo → Nuevo (o Ctrl+N)
2. Se crea un proyecto HTML5 con Bootstrap precargado

Insertar Componentes

1. Selecciona un componente de la Paleta (izquierda)
2. Haz clic en el Composer Visual donde deseas insertarlo
3. El componente se añadirá automáticamente

Editar Código

1. Presiona F5 o click en "Vista" para alternar entre Visual/Código
2. Edita HTML en el Editor Monaco
3. Presiona F6 o click en "Sincronizar" para actualizar la vista visual

Guardar Proyecto

• Menú: Archivo → Guardar (o Ctrl+S)
• Guardar Como: Archivo → Guardar Como (o Ctrl+Shift+S)

Atajos de Teclado

Atajo	Acción
Ctrl+N	Nuevo proyecto
Ctrl+O	Abrir archivo
Ctrl+S	Guardar
Ctrl+Shift+S	Guardar como
Ctrl+Z	Deshacer
Ctrl+Shift+Z	Rehacer
F5	Alternar Vista Visual/Código
F6	Sincronizar Código → Visual
F7	Sincronizar Visual → Código

🏗️ Arquitectura

bcode-electron/
├── main.js                    # Proceso principal Electron
├── preload.js                 # Capa de seguridad IPC
├── package.json               # Configuración npm
│
├── renderer/
│   ├── index.html             # UI principal
│   ├── styles/
│   │   └── main.css           # Estilos de la aplicación
│   └── scripts/
│       ├── renderer.js        # Orquestador principal
│       ├── PluginManager.js   # Gestión de plugins (TVisualComposer)
│       ├── ComponentManager.js # Gestión de componentes (uCoreWebComps)
│       └── SyncManager.js     # Sincronización + Undo/Redo (uComposer)
│
├── plugins/
│   ├── jquery-3.5.1.min.js    # jQuery 3.5.1
│   ├── editorOnClick.js       # Selección desde editor
│   ├── drp.js                 # Drag & drop + selección
│   ├── resizerPlugin-1.0.js   # Redimensionamiento
│   ├── loadBootstrap3.js      # Carga Bootstrap 3
│   └── selectOnComposer.js    # Doble clic → HTTP POST
│
├── ini/
│   ├── plugins.ini            # Configuración de plugins
│   └── wcomp.ini              # Catálogo de componentes
│
└── litedesigner/components/   # Templates HTML de componentes
    ├── basic/                 # Container, Row, Column
    ├── navbars/               # Barras de navegación
    ├── cards/                 # Tarjetas
    └── buttons/               # Botones

🔌 Sistema de Plugins

Plugins Activos (6)

1. jQuery 3.5.1 - Biblioteca base
2. editorOnClick.js - Selección de elementos desde el editor
3. drp.js - Drag & drop + sistema de selección visual
4. resizerPlugin-1.0.js - Redimensionamiento de componentes
5. loadBootstrap3.js - Carga dinámica de Bootstrap 3
6. selectOnComposer.js - Doble clic → envío al editor

Estructura de Plugin

[p1]
plugin=nombre-plugin.js
beginfunc=funcionInicio()
endfunc=funcionFin('$CompID')
timerfunc=
interval=0
enable=1

• plugin: Nombre del archivo JavaScript
• beginfunc: Función a ejecutar al iniciar el composer
• endfunc: Función a ejecutar después de insertar componente
• timerfunc: Función a ejecutar periódicamente
• interval: Intervalo del timer (ms)
• enable: 1 = habilitado, 0 = deshabilitado

Añadir Nuevo Plugin

1. Crea archivo JavaScript en plugins/
2. Edita ini/plugins.ini y añade sección:

[p7]
plugin=mi-plugin.js
beginfunc=miPluginStart()
endfunc=miPluginEnd('$CompID')
timerfunc=
interval=0
enable=1

3. Reinicia la aplicación

📦 Sistema de Componentes

Añadir Nuevo Componente

1. Crea archivo HTML en litedesigner/components/categoria/

<div class="uwc mi-componente" id="ucompid">
  <!-- Tu HTML aquí -->
</div>

Importante: Usa id="ucompid" como placeholder, se reemplazará automáticamente.

2. Edita ini/wcomp.ini:

[mi_componente]
name=Mi Componente
tab=MiCategoria
path=litedesigner/components/categoria/mi_componente.html

3. Reinicia la aplicación

🔄 Diferencias con BCODE Pascal

Aspecto	BCODE Pascal	BCODE Electron
Límite de componentes	101 (array estático)	Ilimitado (array dinámico)
Límite de plugins	1024 (array estático)	Ilimitado (array dinámico)
Undo/Redo	1023 estados	100 estados (configurable)
Editor de código	SynEdit	Monaco Editor
Composer visual	TWebkitComposer	iframe con sandbox
Plataforma	Windows/Linux	Windows/macOS/Linux
Lenguaje	Free Pascal	JavaScript/Node.js

🛠️ Desarrollo

Estructura de Clases Principales

PluginManager

Replica TVisualComposer de coreplugins.pas

class PluginManager {
  loadPlugins()              // Carga plugins desde ini/plugins.ini
  runBeginFuncQueue()        // Ejecuta beginfunc de plugins
  runEndFuncQueue(compID)    // Ejecuta endfunc con ID de componente
  setupTimers()              // Configura timerfunc periódicos
}

ComponentManager

Replica uCoreWebComps de corewebcomps.pas

class ComponentManager {
  loadCatalog()              // Carga catálogo desde ini/wcomp.ini
  createComponent(name, html) // Crea nuevo componente con ID único
  generateId()               // Genera ID único (Date.now)
}

SyncManager

Replica uComposer de utypes.pas

class SyncManager {
  saveUndo()                 // Guarda estado actual
  undo()                     // Deshace último cambio
  redo()                     // Rehace cambio deshecho
  syncCodeToVisual()         // Sincroniza código → visual
  syncVisualToCode()         // Sincroniza visual → código
}

🐛 Troubleshooting

Error: "Module not found"

rm -rf node_modules package-lock.json
npm install

La vista visual no se actualiza

1. Presiona F6 para forzar sincronización
2. Verifica la consola del navegador (DevTools)

Los componentes no se insertan

1. Verifica que jQuery esté cargado en el composer
2. Comprueba la consola para errores de plugins
3. Asegúrate de estar en vista visual (F5)

Electron no compila

Verifica versiones:

node -v    # Debe ser v18+
npm -v     # Debe ser v9+

📝 Licencia

GPL2 License

👨‍💻 Autor

Benjamin Sanchez Cardenas | bsanchezcardenas@gmail.com Desarrollado como réplica moderna de BCODE RAD (Free Pascal/Lazarus).

---

Versión: 1.0.0
Electron: 33.0.2
Node.js: 22.x
Fecha: Noviembre 2025