Cercando di creare un editor grafico personalizzato per un modello di dati usando HTML5 e SVG

1

Ho bisogno di creare un editor grafico per il nostro modello di dati che funzioni in un browser compatibile con HTML5. Sto cercando una libreria / framework adeguata su cui costruire. Il modello è memorizzato come xml, ma questo dovrebbe essere in gran parte irrilevante per la tecnologia front-end.

Per essere più concreto, sto cercando di costruire una sorta di editor di diagrammi per creare scatole e linee. Ogni riquadro avrà un insieme di proprietà modificabili e un insieme di relazioni ad altre caselle rappresentate come linee di vario tipo (si pensi al diagramma di classe UML, ma un po 'più complesso). Deve essere possibile modificare le proprietà di ciascuna casella tramite l'editor. Richiedo un tipo di barra degli strumenti da cui gli utenti possono selezionare nuove caselle da creare. Infine, vorrei un motore di layout automatico, ma l'utente dovrebbe essere in grado di eseguire l'override tramite trascinamento della selezione.

Eclipse GEF è un buon esempio del tipo di framework che sto cercando. Fornisce una tavolozza degli strumenti, gestori di layout, supporto drag and drop e un'architettura MVC. Tuttavia, ho bisogno che funzioni in un browser, non come un'applicazione RCP basata su Java.

Ci sono un sacco di eccellenti librerie JS là fuori per la visualizzazione di dati (come d3 e jqplot). E ho iniziato la prototipazione in d3. È una libreria potente e flessibile, ma anche di basso livello. Mi sembra che avrei bisogno di implementare la mia barra degli strumenti e le funzionalità di trascinamento della selezione per esempio. Questo è qualcosa che Eclipse GEF fornisce immediatamente.

Devo implementare tutte queste funzionalità da solo o esiste una libreria o un framework più appropriato per il mio obiettivo?

    
posta Andrew Eisenberg 23.07.2013 - 00:10
fonte

1 risposta

1

In un contesto commerciale, yFiles per HTML dovrebbe essere esattamente quello che stai cercando:

È una libreria Javascript lato client che utilizza tecnologie browser HTML5 come SVG, CSS3 e Canvas, oltre alle moderne funzionalità Ecmascript per la visualizzazione e la modifica di strutture simili a grafici. Non dipende da alcun componente del server attivo.

Viene fornito con funzionalità di modifica incorporate che possono essere personalizzate in modo molto sofisticato. Per esempio. se non si è soddisfatti dei gesti predefiniti per la creazione, la connessione o lo spostamento di elementi, se è necessario un gesto diverso per lo zoom o il panning del viewport, tutto questo può essere personalizzato. Inoltre viene fornito con supporto specifico per dispositivi touch e gesti tattili.

È possibile allegare qualsiasi numero e tipo di dati agli elementi e facoltativamente visualizzare tali dati nella visualizzazione. La visualizzazione degli elementi del diagramma (nodi, bordi, etichette, porte, ma anche gli ornamenti grafici come le maniglie di ridimensionamento, i rettangoli di selezione, ecc.) Può essere completamente personalizzata. L'aggiunta di nuovi elementi è semplice perché al suo interno si utilizza SVG semplice, quindi puoi sfruttare elementi grafici e strumenti di progettazione di terze parti esistenti per creare elementi SVG in stile CSS animati e animati.

Per quanto riguarda lo spazio di archiviazione: ovviamente il modello può essere modificato e accessibile tramite una API Javascript e il suo modello di base è Oggetti Javascript Ma ci sono classi di convenienza e esempi su come popolare il grafico da XML, dati JSON o raccolte con osservazioni angolari.

Per quanto riguarda le funzionalità di layout automatico: al momento della scrittura, a mia conoscenza, gli algoritmi di layout automatico della libreria sono di gran lunga le implementazioni più elaborate e complete disponibili come implementazioni native di Javascript. Questa demo online dal vivo mostra alcuni degli algoritmi e alcune delle opzioni di configurazione in azione. Gli algoritmi supportano concetti avanzati come limitazioni di porta, raggruppamento di spigoli, raggruppamento di nodi gerarchici, etichettatura integrata, vincoli di posizionamento e molti altri. La guida per lo sviluppatore fornisce e presenta i vari algoritmi e concetti di layout disponibili.

Sono disponibili demo che mostrano come personalizzare il gesto di trascinamento della selezione e integrare il widget con altri Quadri dell'interfaccia utente Javascript. La libreria non viene fornita con l'implementazione di una barra degli strumenti o implementazioni di altri widget. Invece puoi e dovresti prendere in considerazione l'uso di un widget di strumenti come Dojo, ExtJS, jquery-UI, ecc. Per aggiungere widget come barre degli strumenti, menu contestuali, pannelli delle proprietà, ecc.

In un contesto non commerciale, trovare una biblioteca che faccia tutto questo per te è molto più difficile. D3 è strong nella visualizzazione dei dati in modo rapido e semplice, ma non offre funzionalità di interazione o layout forti pronte all'uso. Il toolkit JsPlumb offre funzionalità di editing gradevoli, ma non offre funzionalità di layout. Le funzionalità di layout accettabili sono offerte dal motore GraphViz open-source. Anche se è una libreria C, ci sono modi per portare quella libreria per farla funzionare come una black-box in Javascript usando il codice sorgente Javascript cross-compilation. Questo ti darà un'interfaccia a riga di comando all'interno del browser per gli algoritmi, che non è molto comoda, ma a seconda delle tue esigenze potrebbe essere sufficiente.

Disclaimer : Lavoro per la società che crea la libreria yFiles, tuttavia su SE non rappresento il mio datore di lavoro. I miei post, pensieri e commenti sono i miei.

    
risposta data 06.12.2013 - 09:01
fonte

Leggi altre domande sui tag