Kullanıcılarınıza kendi uygulamanızın içinde gerçek bir diyagram editörü sunun. Şekilleri bir paletten sürükler, birbirine bağlar, metni yerinde yazar ve her şeyi geri alırlar. Tüm diyagramı tek bir çağrıyla düzenler, JSON olarak kaydeder ve penceresi olmayan bir sunucuda bile PNG veya SVG olarak dışa aktarırsınız.
Uygulamanıza gerçek bir diyagram editörü kazandıran on üç özellik.
Bir diyagram aracından bir kullanıcının beklediği her şey, bir forma bıraktığınız iki bileşen olarak.
Kullanıcılarınızın kullanabileceği bir editör
İş uygulamaları çoğu zaman kullanıcının sahip olduğu bir diyagrama ihtiyaç duyar: bir onay akışı, bir süreç haritası, bir üretim hattının planı. Kullanıcıları ayrı bir çizim aracına göndermek yerine editörü kendi formunuzun içine koyun. Bir TsgcVCLDiagramPalette ve bir TsgcVCLDiagramView bırakın, paletin View özelliğiyle bağlayın; kullanıcılarınız şekilleri tuvale sürükler, bağlantı noktalarından bağlayıcılar çizer ve bir düğümün metnini yerinde yazar. Aynı çift FireMonkey, WinForms, WPF ve Avalonia için de vardır.
TsgcVCLDiagramPalette şekilleri sürükleyerek ya da öğeye ve ardından görünüme tıklayarak bırakırTool, dgtSelect, dgtPan, dgtConnector ve dgtShape arasında geçiş yapardglRightToLeft yönü diyagramı sağdan düzenler
Kullanıcılarınızın kullanabileceği bir editör
İş yazılımlarındaki çoğu diyagram küçük ve tanıdık bir söz dağarcığı kullanır ve sgcDiagram bunu hazır sunar. Süreç, karar, sonlandırıcı, veri, belge, tanımlı süreç ve bağlayıcı dairesi akış şeması simgelerini, temel dikdörtgen, yuvarlatılmış dikdörtgen ve elipsi, serbest metni, görüntüleri, başka düğümleri tutan kapsayıcıları ve SVG yol verisinden özel dış çizgileri alırsınız. Her şekil kendi dış çizgisini, metin alanını, varsayılan bağlantı noktalarını ve tema renklerini bilir; böylece bir karar şeklinin bağlantı noktaları köşelerine kod yazmadan yerleşir. Bir düğümü Left, Top, Width ve Height ile yerleştirin, Angle ile döndürün.
Shape, dgsDecision gibi bir TsgcDiagramShape değeri alırdgsPath, SVG yol söz diziminde PathData üzerinden herhangi bir dış çizgiyi çizerdgsContainer alt düğümleri ContainerId ile tutar ve onları birlikte taşırTextAlign ve TextVAlign kaydırılan metni şeklin içine yerleştirir
Kullanıcılarınızın kullanabileceği bir editör
Bir diyagram çizgileri kadar okunaklıdır. Her bağlayıcı kendi türünü seçer: düz çizgiler veya ara noktalardan geçen çok parçalı çizgiler, yatay ve dikey parçalardan oluşan dik açılı rotalar ya da düğüm grafikleri için yumuşak eğriler. AddConnector, belgenin DefaultConnectorKind türünde bir bağlayıcı oluşturur. Her iki uçta ok başları, kesikli veya noktalı çizgiler ve çizgi boyunca yerleştirilen, kullanıcının sürükleyebildiği istenen sayıda etiket, sade bir çizgiyi net bir Evet veya Hayır dalına dönüştürür. Kayıtlı sürümde dik açılı yönlendirici düğümlerin etrafından dolanır ve paralel parçaları birbirinden ayırır.
Kind, dgcStraight, dgcOrthogonal veya dgcCurved olurStartArrow ve EndArrow, dgaTriangle veya dgaDiamond gibi bir TsgcDiagramArrow alırLabels istenen sayıda etiketi tutar, Position ve Offset ile yerleştirilirWaypoints düz ve eğri bağlayıcıları istediğiniz yerden bükerCommunity sürümü dik açılı bağlayıcıları düğümlerden kaçınmayan basit dirsekler olarak yönlendirir.
Yardım konusunu okuyunKullanıcılarınızın kullanabileceği bir editör
Bir kutu taşındığında dağılan bir diyagram kullanıcıyı her şeyden çok sinirlendirir. Her bağlayıcı ucu yapışıktır: adlandırılmış bir bağlantı noktasına, düğümün dış çizgisine ya da bir noktada serbest bırakılmıştır. Bir düğümü taşıyın, boyutlandırın veya döndürün; bağlayıcıları onu izler ve yeniden yönlendirilir. Şekiller kenarlarının orta noktalarında bağlantı noktalarıyla gelir ve kendinizinkini konum, kenar, akış yönü ve başlıkla ekleyebilirsiniz; bir düğüm editörünün türlü girişleri ve çıkışları böyle kurulur. ShowPorts bağlantı noktalarının her zaman, üzerine gelince ya da hiç görünmeyeceğini belirler.
TsgcDiagramPort içinde Id, X, Y, Side, Flow ve Caption bulunurFlow bir bağlantı noktasını dgfIn ile giriş, dgfOut ile çıkış yaparSourcePortId ve TargetPortId bir bağlayıcı ucunu bir bağlantı noktasına yapıştırırShowPorts varsayılan olarak dgvHover, ya da dgvAlways ve dgvNever olurDüzenleme işini koda bırakın: bir grafiği düzenleyin, bir tablodan şema oluşturun veya blokları kurallarla bağlayın.
Kendini kuran diyagramlar Yalnızca Kayıtlı
Koddan oluşturulan ya da bir kullanıcının hızla çizdiği diyagramlar nadiren düzenli görünür. TsgcDiagramLayeredLayout, yönlü bir grafiği Sugiyama yöntemiyle katmanlar halinde düzenler; böylece akış şemaları, süreç haritaları, durum makineleri ve bağımlılık grafikleri az bağlayıcı kesişimiyle ve uzun bağlayıcılar düz kalacak biçimde soldan sağa veya yukarıdan aşağıya çıkar. TsgcDiagramTreeLayout, organizasyon şemaları ve kategori ağaçları için üst düğümleri alt düğümlerinin üzerine ortalar. İkisi de tek bir geri alma adımı olarak çalışır; bir kullanıcı bir yerleşimi deneyip Ctrl+Z ile geri alabilir. SelectionOnly yalnızca seçili bölümü düzenler.
Direction, dglTopToBottom, dglLeftToRight, dglBottomToTop veya dglRightToLeft olurLayerSpacing ve NodeSpacing boşlukları belirler, varsayılan olarak 60 ve 30 dünya birimiCrossings, Execute sonrasında bağlayıcı kesişimlerini bildirirTreeStyle değeri dgoCompactLeaves olduğunda bir yöneticinin ekibi tek sütunda dizilirCommunity sürümünde düğümler kullanıcının veya kodun koyduğu yerde kalır.
Yardım konusunu okuyun
Kendini kuran diyagramlar Yalnızca Kayıtlı
Çalışanlarınız, maliyet merkezleriniz veya ürün kategorileriniz zaten bir anahtar ve bir üst sütunu olan bir tabloda duruyor. TsgcDiagramDataBinding bu satırları bir diyagrama dönüştürür: her satır bir düğüm, her üst anahtar bir bağlayıcı olur ve ağaç ya da katmanlı yerleşim sonucu düzenler. DataSource, KeyField, ParentField ve LabelField değerlerini ayarlayın, Target'ı görünüme yöneltin ve Active yapın. LiveUpdates açıkken kaydedilen bir düzenleme, bir ekleme veya bir silme şemayı mesaj döngüsünün bir sonraki turunda yeniden kurar; satırlar arasında gezinmek ise seçime dokunmaz.
DataSource, KeyField, ParentField ve LabelField sütunları eşlerOnCreateNode her düğümü satırının herhangi bir alanından biçimlendirirdgbAuto bir ağaç için ağaç yerleşimini, birden çok üst düğüm için katmanlı yerleşimi seçerParentSeparator tek bir alanda birden çok üst düğümü listelerCommunity sürümünde veri bağlama yoktur: düğümleri AddNode ve AddConnector ile kodda oluşturun.
Yardım konusunu okuyun
Kendini kuran diyagramlar
Otomasyon kuralları, veri işlem hatları ve IoT akışları birbirine bağlı bloklar olarak en kolay anlaşılır. Her düğüme solda türlü giriş, sağda çıkış bağlantı noktaları verin, DefaultConnectorKind değerini eğri bağlayıcılara çevirin ve blokları OnDrawNode içinde bir başlık bandı ve renkli bağlantı noktası noktalarıyla kendiniz çizin. OnConnecting bir bağlantıyı kurulmadan önce reddetmenizi sağlar; böylece bir sayı çıkışı asla bir metin girişini beslemez. NodeEditor demosu tam olarak bunu kurar: bloklar tek bir geri alma adımında eklenir, grafikler bağlantı noktaları ve başlıklarıyla birlikte JSON olarak kaydedilir.
OnConnecting bir bağlantıyı veto eder, örneğin farklı türlerdeki bağlantı noktaları arasındaOnDrawNode bir düğümü çizer veya varsayılan çizime ekleme yaparDefaultConnectorKind değeri dgcCurved olduğunda klasik düğüm grafiği görünümü elde edilirCaption değeri düğümün içinde onun yanına çizilirKullanıcı için güvenli düzenleme; uygulamanızın güvenebileceği bir belge biçimi ve görüntü çıktısı.
Geri alma, dosyalar ve dışa aktarma
Kullanıcılar geri dönebileceklerini bildiklerinde deneme yapar. Belge bir geri alma ve bir yineleme yığını tutar ve görünümdeki her kullanıcı eylemi bir adımdır. Kodda BeginTransaction ve EndTransaction istenen sayıda değişikliği adlandırılmış tek bir adımda toplar, Rollback ise onları atar. Kopyala ve yapıştır uygulama içinde çalışır; tekrarlanan yapıştırmalar üst üste binmesin diye kaydırılır. Bir düğüm taşınırken veya boyutlandırılırken kenarları ve orta çizgileri ızgaraya ve çevresindeki düğümlere yaslanır, bir kılavuz çizgisi hizalamayı gösterir.
BeginTransaction, EndTransaction ve Rollback kodda yapılan değişiklikleri gruplarUndoLimit varsayılan olarak 100 adım tutar, UndoCaption bir sonraki geri almayı adlandırırCopyToClipboard, CutToClipboard ve PasteFromClipboardSnapToGrid, SnapToGuides ve GridSize hizalama yardımcılarını denetler
Geri alma, dosyalar ve dışa aktarma
Bir diyagram, uygulamanızın sakladığı, gönderdiği ve sürümlediği bir veridir. Belge JSON olarak bir dize, bir dosya veya bir akış biçiminde kaydedilir ve biçim her platformda ve her sürümde aynıdır: bir Delphi masaüstü uygulamasının kaydettiği dosya bir C++ Builder aracında, bir .NET servisinde veya bir Community derlemesinde açılır. Çıktı kanoniktir; anahtar sırası sabittir ve varsayılan değerler dışarıda bırakılır, bu yüzden aynı diyagram her zaman aynı metni verir ve kaynak denetiminde temiz karşılaştırılır. Görüntüler dosyanın içinde PNG verisi olarak taşınır.
SaveToFile ve LoadFromFile, SaveToStream ve LoadFromStreamSaveToJSON ve LoadFromJSONDiagramJSON olarak akıtır
Geri alma, dosyalar ve dışa aktarma
Diyagramlar raporlarda, e-postalarda, wiki sayfalarında ve slaytlarda yer alır. Görünüm gösterdiğini keskin görüntüler için bir ölçek çarpanıyla ve özel çizimi ile temasıyla birlikte PNG veya SVG olarak kaydeder; bu yüzden koyu bir diyagram koyu dışa aktarılır. TsgcDiagramRenderer aynısını hiç görünüm olmadan yapar: bir konsol programı, bir Windows servisi veya bir Linux64 arka plan süreci bir diyagram oluşturur, yerleştirir ve dosyaları yazar. Headless demosu bunu bir destek talebi akış şemasıyla yapar ve Delphi 13 ile derlendiğinde Win32, Win64 ve Linux64'te aynı baytları yazar.
SaveToPNG ve SaveToSVG, dünya birimi başına piksel ölçeğiyleTsgcDiagramRenderer üzerinde SaveToPNGFile ve SaveToSVGFile, pencere gerekmezRenderTo bir belgenin bir bölümünü herhangi bir sgcUICore tuvaline çizerDiyagramları düzenlememesi gereken kişilere, uygulamanızın görünümünde gösterin.
Görüntüleme ve biçimlendirme
Her kullanıcı süreç haritasını düzenlememelidir. ReadOnly ayarlayın, aynı görünüm bir görüntüleyiciye dönüşür: kullanıcılar seçer, Ctrl ve tekerlekle yakınlaştırır, orta düğme veya Space ile kaydırır; ancak hiçbir şey taşınmaz, bağlanmaz ya da silinmez ve palet şekil bırakamaz. İşaretçi bir öğenin üzerinde ele dönüşür ve OnItemClick hangisi olduğunu bildirir; böylece bir düğüme tıklamak ilgili kaydı açabilir. ZoomToFit tüm diyagramı koddan çerçeveler. Bir diyagramın yalnızca bir bölümünü korumak için bunun yerine tek tek öğeleri veya tüm katmanları kilitleyin.
ReadOnly seçimi, yakınlaştırmayı ve kaydırmayı korur, her düzenlemeyi engellerOnItemClick, OnItemDblClick ve OnHover işaretçinin altındaki öğeyi bildirirZoomToFit, ZoomToSelection ve CenterOn görünümü koddan hareket ettirirLocked tek tek öğeleri veya bir katmanın tamamını korurGörüntüleme ve biçimlendirme
Bir diyagram, yapıştırılmış bir resim değil, uygulamanızın bir parçası gibi görünmelidir. Görünümler, paletler ve dışa aktarma sgcUICore temalarını kullanır; böylece tek bir Theme özelliği açık ile koyu arasında geçiş yapar ve aynı formdaki sgcUI ızgaraları, grafikleri ve panolarıyla uyum sağlar. Her düğümün ve bağlayıcının dolgu, çizgi, kesik, köşe yarıçapı ve metin ayarlarını içeren kendi Style değeri vardır; NodeStyle ve ConnectorStyle yeni öğeler için şablonlardır. Tam denetim için OnDrawNode bir düğümü kendiniz çizmenizi sağlar, FontFile ise metni seçtiğiniz bir TrueType yazı tipiyle çizer.
Theme, utDefault (uygulama temasını izler), utLight, utDark veya utCustom alırStyle, Fill, Stroke, StrokeWidth, Dash ve CornerRadius değerlerini ayarlarNodeStyle ve ConnectorStyle her yeni öğeyi biçimlendirirsgcUIARGB kurumsal turkuaz gibi renkler oluştururÖnizleme, yazıcının ve PDF'in alacağı çıktıyı birebir gösterir.
Yazdırma, önizleme ve PDF
Yalnızca kaydırılmış kısım değil, diyagramın tamamı yazdırılır: PNG ve SVG dışa aktarmayla aynı alan. Görünümün yakınlaştırması ve kaydırma konumu sayfaları değiştirmez; seçim, tutamaçlar ve kılavuzlar asla yazdırılmaz.
Print yazdırma iletişim kutusunu gösterir ya da doğrudan varsayılan yazıcıya yazdırır; ShowPrintPreview ise sayfa gezinmesi, yakınlaştırma, sayfa yapısı, yazdırma ve PDF dışa aktarma sunan bir önizleme açarPrintSettings kağıdı, yönü, kenar boşluklarını, ölçeklemeyi ve üst bilgi ile alt bilgi metnini tutar; yazıcı, önizleme ve PDF'in hepsi bunu kullanırExportToPDF gerçek metinli vektör sayfalar yazar, varsayılan olarak etiketli PDF/UA biçiminde, şekillerin ve bağlayıcıların sayısını veren ve ilk 30 şekil metnini sıralayan bir alternatif metinleTsgcUIPDFOptions içindeki PDFALevel arşivleme için PDF/A-2a veya PDF/A-3a ekler, tek başına ya da PDF/UA ile birlikteYazdırma ve önizleme her sürümde, ücretsiz Community sürümü dahil, VCL, FireMonkey, WinForms, WPF ve Avalonia üzerinde bulunur. FireMonkey'de yazdırma Windows ve macOS'ta, önizleme ve PDF dışa aktarma her platformda çalışır. PDF dışa aktarma için sgcUIPDF köprüsü ve lisanslı bir sgcPDF gerekir (.NET'te esegece.sgcUICore.sgcPDF NuGet paketi), bu yüzden Community sürümünde yoktur.
Ekran okuyucular, klavye ve yüksek karşıtlık için UI Automation, kurulum gerektirmeden.
Erişilebilirlik
sgcDiagram düğümleri metinleriyle, aralarındaki bağlantıları ve şekil paletini Microsoft UI Automation'a sunar; diyagram, erişilebilir PDF'e yazdığı metin alternatifinin aynısıyla kendini tanımlar.
Erişilebilirlik her sürümde, ücretsiz Community sürümü dahil, varsayılan olarak açıktır: VCL'de Delphi 7'den Delphi 13'e kadar her Delphi ve C++Builder sürümünde, Windows'ta FireMonkey'de ve WinForms, WPF ve Avalonia üzerinde. Delphi ve C++Builder'da AccessibleName ve AccessibleDescription UI Automation'a sunulan adı ve açıklamayı belirler, .NET'te ise her çerçevenin standart erişilebilir adı ve yardım metni aynı işi yapar. Bkz. erişilebilirlik uygunluk raporları. Bağlayıcı büküm noktaları yalnızca fareyle düzenlenir.
sgcUI paket demolarında sgcDiagram: yerleşik simüle verilerle çevrimdışı çalışan eksiksiz uygulamalar.
Tanklardan dolum makinesine 1. Hat süreç diyagramı; arızalı P-201 pompası kırmızı.
Altamira Plant →
Şerit kalınlığı hacme, rengi duruma göre bir merkez ağı diyagramı.
Altamira Fleet →
Projeler arası kilometre taşı bağımlılıkları, otomatik yerleşimli, kritik bağlantılar vurgulu.
Altamira PMO →
Talepler ızgarası ve onay durumlarının yanında bir satın alma onay iş akışı.
Altamira ERP →
Satın alma onayları, talep yükseltmeleri ve işe alım kontrol listeleri sık değişir ve bunların sahipleri programcı değildir. Editörü gömün; süreç sahibi kararlar ve Evet ya da Hayır etiketleriyle akışı çizsin, veritabanınızda JSON olarak kaydetsin ve uygulamanız gerçek süreci yürütmek için aynı belgeyi okusun. ReadOnly, saklanan akışı herkes için bir haritaya çevirir. FlowchartEditor'dan başlayın.
İK ve ERP sistemleri kimin kime bağlı olduğunu zaten bilir. Çalışanlar tablosunu TsgcDiagramDataBinding ile bağlayın, kompakt yapraklı ağaç yerleşiminin yöneticileri ve ekipleri düzenlemesine izin verin ve her kutuyu OnCreateNode içinde departmana göre renklendirin. İK ızgarada bir değişiklik kaydettiğinde şema kendiliğinden yeniden kurulur ve bir düğüme tıklamak çalışanı seçer. OrgChart demosu 60 çalışanı bu şekilde bağlar.
Müşterilerin veri işlem hatları, otomasyon kuralları veya IoT akışları kurmasını sağlayan ürünler, blokların birbirine bağlandığı bir tuvale ihtiyaç duyar. Türlü bağlantı noktaları, eğri bağlayıcılar ve OnConnecting size kuralları verir, OnDrawNode bloklara kendi görünümünüzü kazandırır ve grafik, motorunuzun çalıştırabileceği JSON olarak kaydedilir. Belgenin arayüze bağımlılığı olmadığı için bir sunucu aynı grafiği yükleyip denetleyebilir.
The same API in Delphi, C++ Builder and C#: add a palette and a view, create shapes and connectors in one undo step, then arrange them. The layout call needs the Registered or Trial edition.
uses
Classes, SysUtils, Forms, Controls,
sgcUICore_Theme, sgcDiagram_Types, sgcDiagram_Model, sgcDiagram_Layout,
sgcDiagram_VCL;
type
TFormOrders = class(TForm)
private
FPalette: TsgcVCLDiagramPalette;
FView: TsgcVCLDiagramView;
procedure DoSelectionChange(Sender: TObject);
public
constructor CreateNew(aOwner: TComponent; Dummy: Integer = 0); override;
procedure BuildFlow;
end;
constructor TFormOrders.CreateNew(aOwner: TComponent; Dummy: Integer);
begin
inherited;
FPalette := TsgcVCLDiagramPalette.Create(Self);
FPalette.Parent := Self;
FPalette.Align := alLeft;
FView := TsgcVCLDiagramView.Create(Self);
FView.Parent := Self;
FView.Align := alClient;
FView.ShowPorts := dgvHover;
FView.Theme := utDark;
FView.OnSelectionChange := DoSelectionChange;
FPalette.View := FView;
end;
procedure TFormOrders.DoSelectionChange(Sender: TObject);
begin
Caption := Format('Orders, %d selected', [FView.Diagram.Selection.Count]);
end;
procedure TFormOrders.BuildFlow;
var
oDoc: TsgcDiagramDocument;
oStart, oStock, oPay, oShip: TsgcDiagramNode;
oLayout: TsgcDiagramLayeredLayout;
begin
oDoc := FView.Diagram;
oDoc.BeginTransaction('Order flow');
try
oStart := oDoc.AddNode(dgsTerminator, 0, 0, 140, 50, 'Order received');
oStock := oDoc.AddNode(dgsDecision, 0, 0, 160, 90, 'In stock?');
oPay := oDoc.AddNode(dgsProcess, 0, 0, 140, 60, 'Charge card');
oShip := oDoc.AddNode(dgsPredefinedProcess, 0, 0, 140, 60, 'Ship order');
oPay.Style.Fill := sgcUIARGB($FF, $00, $96, $88);
oDoc.AddConnector(oStart, oStock);
oDoc.AddConnector(oStock, oPay).Labels.Add.Text := 'Yes';
oDoc.AddConnector(oPay, oShip);
oDoc.AddConnector(oStock, oDoc.AddNode(dgsDocument, 0, 0, 140, 60,
'Backorder note')).Labels.Add.Text := 'No';
finally
oDoc.EndTransaction;
end;
// arrange left to right, one undo step
oLayout := TsgcDiagramLayeredLayout.Create(oDoc);
try
oLayout.Direction := dglLeftToRight;
oLayout.Execute;
finally
oLayout.Free;
end;
FView.ZoomToFit;
FView.SaveToPNG(ExtractFilePath(ParamStr(0)) + 'orders.png', 2);
end;#include <vcl.h>
#include "sgcUICore_Theme.hpp"
#include "sgcDiagram_Types.hpp"
#include "sgcDiagram_Model.hpp"
#include "sgcDiagram_Layout.hpp"
#include "sgcDiagram_VCL.hpp"
void BuildOrderFlow(TForm *Form)
{
TsgcVCLDiagramPalette *Palette = new TsgcVCLDiagramPalette(Form);
Palette->Parent = Form;
Palette->Align = alLeft;
TsgcVCLDiagramView *View = new TsgcVCLDiagramView(Form);
View->Parent = Form;
View->Align = alClient;
View->ShowPorts = dgvHover;
View->Theme = utDark;
Palette->View = View;
TsgcDiagramDocument *Doc = View->Diagram;
Doc->BeginTransaction("Order flow");
try
{
TsgcDiagramNode *Start = Doc->AddNode(dgsTerminator, 0, 0, 140, 50, "Order received");
TsgcDiagramNode *Stock = Doc->AddNode(dgsDecision, 0, 0, 160, 90, "In stock?");
TsgcDiagramNode *Pay = Doc->AddNode(dgsProcess, 0, 0, 140, 60, "Charge card");
TsgcDiagramNode *Ship = Doc->AddNode(dgsPredefinedProcess, 0, 0, 140, 60, "Ship order");
TsgcDiagramNode *Note = Doc->AddNode(dgsDocument, 0, 0, 140, 60, "Backorder note");
Pay->Style->Fill = sgcUIARGB(0xFF, 0x00, 0x96, 0x88);
Doc->AddConnector(Start, Stock, "", "");
Doc->AddConnector(Stock, Pay, "", "")->Labels->Add()->Text = "Yes";
Doc->AddConnector(Pay, Ship, "", "");
Doc->AddConnector(Stock, Note, "", "")->Labels->Add()->Text = "No";
}
__finally
{
Doc->EndTransaction();
}
// arrange left to right, one undo step
TsgcDiagramLayeredLayout *Layout = new TsgcDiagramLayeredLayout(Doc);
try
{
Layout->Direction = dglLeftToRight;
Layout->Execute();
}
__finally
{
delete Layout;
}
View->ZoomToFit();
View->SaveToPNG(ExtractFilePath(ParamStr(0)) + "orders.png", 2);
}using System;
using System.IO;
using System.Windows.Forms;
using esegece.sgcDiagram;
using esegece.sgcUICore;
public class OrdersForm : Form
{
readonly TsgcWinFormsDiagramView View;
public OrdersForm()
{
View = new TsgcWinFormsDiagramView { Dock = DockStyle.Fill };
View.ShowPorts = TsgcDiagramShowPorts.dgvHover;
View.Theme = TsgcUITheme.utDark;
View.OnSelectionChange += Sender =>
Text = "Orders, " + View.Diagram.Selection.Count + " selected";
Controls.Add(View);
Controls.Add(new TsgcWinFormsDiagramPalette { Dock = DockStyle.Left, View = View });
BuildFlow();
}
void BuildFlow()
{
TsgcDiagramDocument oDoc = View.Diagram;
oDoc.BeginTransaction("Order flow");
try
{
TsgcDiagramNode oStart = oDoc.AddNode(TsgcDiagramShape.dgsTerminator, 0, 0, 140, 50, "Order received");
TsgcDiagramNode oStock = oDoc.AddNode(TsgcDiagramShape.dgsDecision, 0, 0, 160, 90, "In stock?");
TsgcDiagramNode oPay = oDoc.AddNode(TsgcDiagramShape.dgsProcess, 0, 0, 140, 60, "Charge card");
TsgcDiagramNode oShip = oDoc.AddNode(TsgcDiagramShape.dgsPredefinedProcess, 0, 0, 140, 60, "Ship order");
TsgcDiagramNode oNote = oDoc.AddNode(TsgcDiagramShape.dgsDocument, 0, 0, 140, 60, "Backorder note");
oPay.Style.Fill = sgcUICore_Theme.sgcUIARGB(0xFF, 0x00, 0x96, 0x88);
oDoc.AddConnector(oStart, oStock);
oDoc.AddConnector(oStock, oPay).Labels.Add().Text = "Yes";
oDoc.AddConnector(oPay, oShip);
oDoc.AddConnector(oStock, oNote).Labels.Add().Text = "No";
}
finally
{
oDoc.EndTransaction();
}
// arrange left to right, one undo step
TsgcDiagramLayeredLayout oLayout = new TsgcDiagramLayeredLayout(oDoc);
oLayout.Direction = TsgcDiagramDirection.dglLeftToRight;
oLayout.Execute();
View.ZoomToFit();
View.SaveToPNG(Path.Combine(AppContext.BaseDirectory, "orders.png"), 2);
}
}dotnet add package esegece.sgcDiagram.WinFormsHer demo Delphi ve C++ Builder için aynı adla gelir. .NET sürümünde FlowchartEditor (WinForms), FlowchartWpf, FlowchartAvalonia, NodeEditor, OrgChart ve ConsoleRender bulunur.
Kodla kurulmuş bir sipariş akışı: şekilleri sürükleyin, bağlantı noktalarından bağlayıcı çizin, bağlayıcı türünü değiştirin, geri alın, katmanlı yerleşimi çalıştırın, JSON açın ve kaydedin, PNG ve SVG dışa aktarın, temayı ve salt okunur modu değiştirin.
Bir TDBGrid içinde 60 çalışan, salt okunur bir diyagram görünümüne bağlı. Bir düzenleme kaydedin, şema kompakt yapraklar, departman renkleri, seçmek için tıklama ve PNG ile SVG dışa aktarma ile yeniden kurulur.
Türlü giriş ve çıkış bağlantı noktaları, OnConnecting içinde bir bağlantı kuralı, eğri bağlayıcılar ve OnDrawNode içinde çizilen bloklar; bağlantı noktaları ve başlıklarıyla JSON olarak kaydedilir.
FireMonkey görünümü ve paletinde akış şeması editörü, Windows ve Android için; dokunuş bir şekil yerleştirir, iki parmakla sıkıştırma yakınlaştırır.
VCL veya FireMonkey birimi olmayan, bir akış şeması oluşturan, katmanlı yerleşimle düzenleyen ve PNG, SVG ve JSON yazan bir konsol programı, Linux64'te de.
Her sgcUI ürününün çalıştırmaya hazır yürütülebilir dosyaları, kurulum gerektirmez.
sgcUI_bin.zip dosyasını indirin →sgcDiagram, sgcUI Enterprise'a dahildir ve ayrıca tek başına da satılır. sgcDiagram ayrıca All-Access paketine de dahildir.
€249 / geliştirici, tam kaynak kodu, 1 yıl güncelleme.
sgcDiagram satın alın → Fiyatlandırmayı görün →Ücretsiz Community sürümü (NuGet üzerinde esegece.sgcDiagram.Community) otomatik yerleşimleri, engellerden kaçınan yönlendirmeyi, veri bağlamayı ve birden çok katmanı içermez. sgcDiagram için bir sgcWebSockets köprüsü yoktur.
| Özellik | Community (ücretsiz) | Kayıtlı |
|---|---|---|
| Palet, görünüm ve yerinde düzenleme | ✓ | ✓ |
| 14 şekil, bağlantı noktaları, gruplar ve kapsayıcılar | ✓ | ✓ |
| Düz, dik açılı ve eğri bağlayıcılar | ✓ | ✓ |
| Geri alma, pano, yaslama ve kılavuzlar | ✓ | ✓ |
| JSON dosyaları, PNG ve SVG dışa aktarma | ✓ | ✓ |
| Açık ve koyu temalar, görüntüleyici modu | ✓ | ✓ |
| Katmanlı ve ağaç yerleşimleri | − | ✓ |
| Engellerden kaçınan dik açılı yönlendirme | − | ✓ |
| Veri bağlama | − | ✓ |
| Birden fazla katman | − | ✓ |
VCL için TsgcVCLDiagramView ve TsgcVCLDiagramPalette, FireMonkey için TsgcFMXDiagramView ve TsgcFMXDiagramPalette.
TsgcDiagramDocument, TsgcDiagramNode, TsgcDiagramConnector ve TsgcDiagramController, arayüze bağımlılık olmadan.
TsgcDiagramRenderer pencere olmadan PNG ve SVG yazar. TsgcDiagramLayeredLayout ve TsgcDiagramTreeLayout diyagramı düzenler. Kayıtlı
TsgcWinFormsDiagramView, TsgcWpfDiagramView ve TsgcAvaloniaDiagramView, her biri kendi paletiyle, esegece.sgcDiagram ad alanında.
| Hedef | Bileşen | Platformlar |
|---|---|---|
| Delphi 7'den 13'e, VCL | TsgcVCLDiagramView, TsgcVCLDiagramPalette | Win32 ve Win64 |
| Delphi XE6'dan 13'e, FireMonkey | TsgcFMXDiagramView, TsgcFMXDiagramPalette | Windows, macOS, iOS ve Android |
| C++ Builder 2007'den 13'e | Aynı bileşenler | Üretilen .hpp başlıkları ve statik kütüphaneler |
| Delphi 10.2'den 13'e, arayüzsüz | Belge, JSON, yönlendirme, yerleşimler, PNG ve SVG çizici | Linux64, örneğin diyagramları bir sunucuda çizmek için |
| .NET Framework 4.7.2, .NET 8, 9 ve 10 | WinForms, WPF ve Avalonia görünümleri | Windows, Linux ve macOS, arayüzsüz JSON, PNG ve SVG |
Evet, görünüm ve palet bunun için vardır. Kullanıcılar şekilleri sürükler, bağlantı noktalarından bağlayıcılar çizer, metni yerinde düzenler, gruplar, kopyalar, yapıştırır ve her eylemi geri alır ya da yineler. Bir kullanıcı yalnızca bakacaksa ReadOnly ayarlayın; diyagramın bir bölümünü korurken geri kalanını düzenlenebilir bırakmak için tek tek öğeleri ve katmanları kilitleyin.
Evet, iki yolla. Kodda BeginTransaction ve EndTransaction içindeki AddNode ve AddConnector herhangi bir diyagramı tek bir geri alma adımı olarak oluşturur. Kayıtlı sürümde TsgcDiagramDataBinding onu bir anahtar ve bir üst sütunu olan bir dataset'ten oluşturur ve veri değiştiğinde yeniden kurar. .NET'te bir DataTable okur.
Kayıtlı ve Deneme sürümlerinde iki tane. TsgcDiagramLayeredLayout, akış şemaları, durum makineleri ve bağımlılık grafikleri gibi yönlü grafikleri az kesişimle katmanlar halinde düzenler. TsgcDiagramTreeLayout, organizasyon şemaları ve kategori ağaçları gibi hiyerarşileri kompakt yapraklar stiliyle düzenler. İkisi de dört yönde çalışır ve tek bir geri alma adımı olarak yürütülür.
Sürüm 1'de hayır. Diyagramlar PNG ve SVG olarak, görünümden ya da pencere olmadan TsgcDiagramRenderer ile dışa aktarılır. SVG kayıpsız ölçeklenir, bu yüzden baskıya ve belgelere uygundur; 2 ölçeğiyle kaydedilen bir PNG slaytlarda keskin kalır. Yazdırma da sürüm 1'in parçası değildir.
Dört gelişmiş özellik: otomatik yerleşimler, engellerden kaçınan dik açılı yönlendirme (Community basit dirsekler çizer), veri bağlama ve ilkinin ötesindeki katmanlar. Geri kalan her şey vardır: her şekil, üç bağlayıcı türü, bağlantı noktaları, kapsayıcılar, geri alma, pano, JSON, PNG ve SVG, temalar, yaslama ve kılavuzlar. Kayıtlı ve Deneme sürümlerinde her şey bulunur.
Evet. JSON biçimi her platformda ve her sürümde aynıdır; bu yüzden bir Delphi veya C++ Builder uygulamasının kaydettiği diyagram bir WinForms, WPF veya Avalonia uygulamasında açılır, tersi de geçerlidir. Kayıtlı sürümün kaydettiği bir dosya katman adlarını koruyan bir Community derlemesinde de açılır.
Evet. FireMonkey görünümü ve paleti Delphi XE6'dan itibaren Windows, macOS, iOS ve Android'de çalışır ve FlowchartEditorFMX demosu Android'de dokunmatik düzenlemeyi gösterir. .NET'te Avalonia görünümü Windows, Linux ve macOS'ta çalışır.
Giriş, Hızlı Başlangıç VCL, Hızlı Başlangıç FMX, Arayüzsüz, Katmanlı yerleşim, Dışa aktarma, Platformlar, Sürümler.
Delphi, C++ Builder ve .NET, tüm sgcUI ürünlerini kapsar.
Editöre geri alma, yakınlaştırma, yerleşim ve dışa aktarma komutları için diyagramla aynı açık ve koyu temada temalı bir araç çubuğu verin.
sgcToolbar ürününü keşfedin →
Salt okunur bir süreç haritasını veya organizasyon şemasını KPI kutucuklarınızın yanına koyun. İkisi de aynı sgcUICore temalarıyla çizilir.
sgcDashboard ürününü keşfedin →sgcDiagram sürüm 1'de PDF dışa aktarmaya sahip değildir. PDF raporunu sgcPDF ile oluşturun ve dışa aktardığınız PNG görüntülerini içine yerleştirin.
sgcPDF ürününü keşfedin →