Español ES

Editor interactivo

La incrustación de solo lectura (renderScheme) es una envoltura ligera sobre el editor completo. La clase StockSharpDiagram — junto con StockSharpPalette y StockSharpCatalog, todas exportadas desde @stocksharp/diagram — es un editor visual completo: arrastra elementos desde la paleta, conecta puertos, mueve y elimina nodos, deshaz/rehaz y valida enlaces con tipos. La edición está activada de forma predeterminada.

Demo en vivo

Arrastra un elemento desde la paleta hacia el lienzo, arrastra entre puertos para conectarlos, haz clic derecho para abrir el menú y usa Deshacer/Rehacer. Las conexiones incompatibles se rechazan (observa la línea de estado). Pulsa Error para mostrar un error de ejecución animado en un nodo (consulta Eventos y API).

Configuración

Crea un catálogo de tipos de puertos y de elementos, y luego genera el diagrama y la paleta a partir de él:

import {
  StockSharpDiagram, StockSharpCatalog, StockSharpPalette,
  Node, PortType, DiagramNode, Link, PALETTE_DRAG_MIME,
} from '@stocksharp/diagram';

// 1) Catálogo: los tipos de conector (puerto) y los tipos de elemento (nodo).
const catalog = new StockSharpCatalog();
catalog.addPortType(new PortType({ name: 'Candle', color: '#4aa3ff' }));
catalog.addPortType(new PortType({ name: 'Indicator', color: '#a779e9' }));
catalog.addNodeType(new Node({
  id: 'candles', name: 'Candles', groupName: 'Sources',
  outPorts: [{ id: 'Output', name: 'Output', type: 'Candle' }],
}));
catalog.addNodeType(new Node({
  id: 'sma', name: 'SMA', groupName: 'Indicators',
  inPorts: [{ id: 'Input', name: 'Input', type: 'Candle', maxLinks: 1 }],
  outPorts: [{ id: 'Output', name: 'Output', type: 'Indicator' }],
}));

// 2) Diagrama editable + caja de herramientas de la paleta (cada uno se renderiza en su propio elemento).
const diagram = new StockSharpDiagram({ div: canvasHost, catalog, showFullscreenButton: true });
const palette = new StockSharpPalette({ div: paletteHost, catalog });

// 3) Añade nodos desde la paleta: doble clic, o arrastrar y soltar nativo sobre el lienzo.
palette.on('nodeActivated', ({ node }) => diagram.dropNodeFromPalette(node.id, centerX, centerY));
canvasHost.addEventListener('drop', event => {
  const { typeId } = JSON.parse(event.dataTransfer.getData(PALETTE_DRAG_MIME) || '{}');
  if (typeId) diagram.dropNodeFromPalette(typeId, event.clientX, event.clientY);
});

// 4) Carga un esquema inicial y reacciona a las ediciones.
diagram.load(
  [new DiagramNode({ id: 'c', typeId: 'candles', name: 'Candles', x: 60, y: 120 })],
  [],
);
diagram.on('linkValidation', ({ allowed, reason }) => { if (!allowed) console.log('rechazado:', reason); });
diagram.zoomToFit();

En lugar de construir el catálogo a mano, puedes alimentarlo con un JSON de paleta (el mismo designer-palette.json que obtiene la incrustación de solo lectura), convirtiendo los socketTypes en PortType y los elements en Node.

Para convertir la incrustación de solo lectura en un editor sin volver a crearla, accede mediante el manejador que devuelve — .diagram es la instancia completa:

import { renderScheme } from '@stocksharp/diagram/embed';

const handle = await renderScheme(host, '/data/designer-palette.json', scheme);
handle.diagram.setReadOnly(false);   // edición activada

Véase también