flux-signage-editor

Editor visual de imagens e vídeos para sinalização digital, powered by Fabric.js v6. Disponível como módulo ES puro ou componente React.

Instalação

npm install flux-signage-editor

Para uso com React, instale também as peer dependencies:

npm install react react-dom

Uso — Vanilla JS

import { createEditor } from 'flux-signage-editor';

const editor = createEditor({
  container: '#my-editor',   // seletor CSS ou HTMLElement
  width: 1920,               // largura do artboard (default: 1920)
  height: 1080,              // altura do artboard (default: 1080)
  onReady() {
    console.log('Editor pronto');
  },
  onChange() {
    console.log('Canvas modificado');
  },
});

Uso — React

import { useRef } from 'react';
import { SignageEditor, type SignageEditorRef } from 'flux-signage-editor/react';

function App() {
  const editorRef = useRef<SignageEditorRef>(null);

  const handleExport = () => {
    editorRef.current?.exportPNG((blob) => {
      const url = URL.createObjectURL(blob);
      window.open(url);
    });
  };

  return (
    <>
      <SignageEditor
        ref={editorRef}
        width={1920}
        height={1080}
        onReady={() => console.log('Pronto')}
        onChange={() => console.log('Modificado')}
        style={{ width: '100%', height: '80vh' }}
      />
      <button onClick={handleExport}>Exportar PNG</button>
    </>
  );
}

API

createEditor(config): EditorInstance

Cria e monta o editor dentro do container especificado.

EditorConfig

| Propriedade | Tipo | Default | Descrição | |---|---|---|---| | container | HTMLElement \| string | — | Elemento ou seletor CSS (obrigatório) | | width | number | 1920 | Largura do artboard em pixels | | height | number | 1080 | Altura do artboard em pixels | | onReady | () => void | — | Callback após inicialização | | onChange | () => void | — | Callback a cada mudança no canvas |

EditorInstance

Canvas

editor.setSize(1080, 1920);          // redimensiona o artboard
editor.getSize();                     // → { width, height }
editor.fitToScreen();                 // ajusta zoom ao viewport
editor.setZoom(1.5);                  // define nível de zoom
editor.getZoom();                     // → number

Ferramentas

editor.addRectangle(100, 100);        // retângulo na posição (x, y)
editor.addCircle(200, 200);           // círculo
editor.addHeading();                  // texto título
editor.addSubheading();               // texto subtítulo
editor.addBodyText();                 // texto corpo

await editor.addImageFromURL('https://example.com/img.png');
await editor.addVideoFromURL('https://example.com/video.mp4');

editor.createByType('rectangle');     // factory genérica por nome de tipo

Todos os métodos de ferramenta aceitam (x?, y?) opcionais para posicionamento.

Histórico

editor.undo();
editor.redo();

Páginas

editor.getPages();              // → Page[]
editor.getCurrentPageIndex();   // → number
editor.addPage();
editor.goToPage(2);

Cada Page contém:

interface Page {
  json: string;        // estado serializado do canvas
  name: string;        // nome da página
  thumbnail: string;   // data URL da miniatura
}

Exportação

Todos os métodos de exportação são callback-based:

// PNG (Blob)
editor.exportPNG((blob) => {
  const url = URL.createObjectURL(blob);
  // download, upload, etc.
}, { multiplier: 2 });

// JPG (Blob)
editor.exportJPG((blob) => { ... }, { quality: 0.85 });

// SVG (string)
editor.exportSVG((svgString) => { ... });

// PDF (Blob)
editor.exportPDF((blob) => { ... });

// MP4 (Blob) — exporta animações da timeline
editor.exportMP4((blob) => { ... }, { fps: 60 });

// JSON (string) — estado serializado do canvas
editor.exportJSON((json) => {
  localStorage.setItem('backup', json);
});

// Importar JSON
await editor.importJSON(jsonString);

ExportOptions

| Propriedade | Tipo | Default | Descrição | |---|---|---|---| | quality | number | 0.92 | Qualidade JPG (0–1) | | multiplier | number | 1 | Escala para exports raster (2 = 2x resolução) | | fps | number | 30 | Frames por segundo para MP4 |

Eventos

editor.on('object:modified', (e) => { ... });
editor.on('object:added', (e) => { ... });
editor.off('object:modified', handler);

Acesso direto ao canvas

const canvas = editor.getCanvas(); // instância Fabric.js Canvas

Destruição

editor.destroy(); // remove listeners e libera recursos

TypeScript

Todos os tipos são exportados:

import type {
  EditorConfig,
  EditorInstance,
  ExportFormat,
  ExportOptions,
  Page,
} from 'flux-signage-editor';

Licença

MIT