TextInputCanvas - konzeptionelle Gedanken, Vorgehensweise, Umsetzung

[hansklok]

Liebe Mitglieder,

an dieser Stelle geht es um konzeptionelle Gedanken und Vorgehensweisen zur Erstellung eines graphischen Texteingabe-Editors. Ich weiß, es gibt das Memofeld und auch das RichEdit, ich möchte aber auch um des Lernens halber das ganze gern mal selbst anpacken.

Was ist angedacht? Ein grafischer Eingabeeditor für Texte. An sich geht es um so etwas wie es OpenOffice und MS Word machen. Buchstaben (Character) sollen via Tastatur auf einem Canvas eingetippt werden können. Dabei kann jeder Buchstabe anders aussehen (Schriftart, Schriftgröße, Farbe, Hintergrundfarbe, Fett, Kursiv, Unterstrichen, Durchgestrichen, Hochgestellt, Tiefgestellt, Umrandet, Schattiert etc.). Es gibt das schier endlose Varianten.

Wie realisiert man nun so etwas? Einige Gedanken dazu:

• Zeilen bestehen aus 0..* Zeichen (Characters)
• Ist die Breite aller Zeichen einer Zeile größer als die Breite des Canvas, so erfolgt ein Zeilenumbruch
• Absätze (Paragraphs) sind eine durch erzwungene Zeilenumbrüche definiert
• Da jeder Buchstabe unterschiedliche Eigenschaften (Schrift) haben kann, ergibt sich die Zeilenhöhe aus dem Buchstaben mit der größten Schriftart, vorausgesetzt, er ist nicht hoch-/tiefgestellt

Wenn man nun einem Canvas die Maße einer DIN A4 Seite gibt, muss man ja kalkulieren, wieviel und welcher Zeilen/Absätze auf dieser darstellbar sind, bis eine neue Seite eingefügt wird. Wie kalkuliert man das? Wie kann man CharAtPosXY realisieren.

Das ganze sieht ja danach aus, als müsste man, wie immer eigentlich, Darstellung und Struktur unabhängig voneinander angehen.

Also der Text (die Eingabe) muss irgendwo gespeichert werden (TextStorage).
Zur Darstellung muss dann geschaut werden, ob dem Text ein Style (Eigenschaften) zugewiesen sind.

Wie könnte man so etwas realisieren. Das schwierige wird ja auch sein, dass innerhalb eines Textbereiches (TextRange mit StartPosition, Length) wieder ein neues Style zugewiesen werden kann.

Ich hoffe, ich habe nicht zu kryptisch geschrieben. Ich hoffe auf Input bezüglich der Struktur und Herangehensweise für solch eine Spielerei.

Beste Grüße

[Slipstream]

Da du ja dabei was lernen willst, würde ich in so einem Fall erstmal eine Klasse erstellen, die für die Datenhaltung verantwortlich ist und eine Klasse, die für die Ausgabe zuständig ist. Bei jeder Neueingabe muss der sichtbare Teil des Canvas neugezeichnet werden. In der Klasse für die Datenhaltung verwaltest du alle notwendigen Parameter, Abstände, Breite, Höhe, Zeilenlänge und was du sonst noch brauchst. Diese Klasse speichert und lädt ein Textdokument, für das du dir eine geeignete Struktur überlegen musst.

[hansklok]

Zitat von Slipstream:

Da du ja dabei was lernen willst, würde ich in so einem Fall erstmal eine Klasse erstellen, die für die Datenhaltung verantwortlich ist und eine Klasse, die für die Ausgabe zuständig ist. Bei jeder Neueingabe muss der sichtbare Teil des Canvas neugezeichnet werden. In der Klasse für die Datenhaltung verwaltest du alle notwendigen Parameter, Abstände, Breite, Höhe, Zeilenlänge und was du sonst noch brauchst. Diese Klasse speichert und lädt ein Textdokument, für das du dir eine geeignete Struktur überlegen musst.

Vielen Dank für die erste Rückmeldung. Genauso habe ich mir das auch gedacht.
Was die Struktur des Textdokuments betrifft, habe ich an das JSON-Format gedacht. Das heißt, dass die graphische Ausgabeklasse dann so etwas wie ein Wrapper für die Struktur des Textdokuments ist?

Genau um die Struktur geht es mir. Wie könnte das Aussehen?

Eine Paragraph besteht aus Characters und jeder Character hat sein eigenen Style. Das gesamte Dokument besteht aus Paragraphs.

[hansklok]

Also die Textdatei, die dann quasi geparst werden soll, könnte so aussehen:

Code:

{PS:0}Das ist mein Text innerhalb eines Absatzes ohne Style (PS:0)
{PS:12}und hier beginnt ein [{CS:5}neuer [{CS:2}Absatz]] mit dem Absatzstyle 12.

Hier hätte man also zwei Absätze. Der erste ohne Style (PS = 0) und der zweite mit dem Style 12. innerhalb des zweiten Absatzes gibt's auch eine Textstyle-Definition 5 für den Text "neuer Absatz" und innerhalb dieser extra noch für das Wort "Absatz" eine. Jedoch soll diese auch den Style 5 erben.

[BrightAngel]

Wenn das nur ein Hobbieprojekt ist, dann kannst du das mit dem Json schon so machen. In einem Produkt kann man dir unter Umständen empfehlen, das ganze doch vielleicht mit den schon bekannten HTML Tags umzusetzen; da ist die Einstiegshürde sehr niedrig. Wenn das mal größer wird, kannst du es dann auch gegen was existierendes austauschen, bzw durch z.B. ein Subset von CSS erweitern. Nur so als Vorschlag

Zum Textzeichnen an sich hast du mehrere Möglichkeiten: Die einfachste ist, du nimmst Windows. Einfach dem OS sagen: Dieser Text, dieses Handle, mal mal! Ich weiß nicht, ob das immernoch so ist, aber früher war man dann in den Schriftarten limittiert. Nur was im System installiert ist, kann direkt verwendet werden. Korrigiert mich bitte jemand, falls ich da was übersehen haben sollte...
Man kann Windows auch fragen wie breit das denn werden würde, wenn man 'diesen Text' jetzt zeichnen wollte.

Oder du nimmst sowas wie FreeType zum Malen in deine Abhängigkeiten mit auf. Da brauchst du dann aber noch Delphi Header für das Nötigste. Die erste Methode ist die Standardweise unter Windows und hat imho die geringste Einstiegshürde.

Textsatz: Das kann beliebig komplex werden. Wenn dir da langweilig werden sollte, kannst du du zwecks Textaufteilung auf Linien auch mal bei LaTex (erzeugt aus der Sprache "Tex" PDFs, Postscript, usw; alt; sehr fettes/großes Tool) abschauen: Das Paper/Buch dazu ist eventuell aufschlussreich, falls du dich da wirklich vertiefen willst.
Das Einfachste ist wirklich Zeile für Zeile zu malen, da ja jede neue Zeile auf allen Vorherigen aufbaut. Lehrreich auf jeden Fall.

Wenn du das Ziel hast, das auch mal zu benutzen, kannst du auch einen Webbrowser einbetten und dann da einfach die Formattierungen zu setzen.

Brighty

[freimatz]

Na ja - zum Lernen sollte man erst mal einfaches machen. Du hst dier gleich was vom schwersten rausgesucht.

[Slipstream]

Zitat von hansklok:

Genau um die Struktur geht es mir. Wie könnte das Aussehen?
Eine Paragraph besteht aus Characters und jeder Character hat sein eigenen Style. Das gesamte Dokument besteht aus Paragraphs.

Nicht jedes einzelne Zeichen benötigt seinen eigenen Style, der sich nicht nur in fett, kursiv usw. erschöft, sondern auch Farben, Hoch- und Tiefstellungen, Fontwechsel usw. beinhaltet.

Du kannst dir als Beispiel einmal die RichEdit-Definitionen anschauen oder einfach mit einem normalen Texteditor eine RichEdit-Datei aufmachen und dir die Steuerzeichen anschauen. Wenn du was lernen willst, dann definierst du dir aber selber eine Struktur, und zwar erst einmal auf einem großen leeren weißen Blatt Papier mit Bleistift, damit du bei Bedarf radieren kannst. Du benötigst z.B. ein einleitendes Zeichen, das dem Parser sagt: Achtung, hier kommt ein Steuerzeichen, und ein Ende-Zeichen, wie hier z.B. das /. Wird dann im Text eines der Zeichen, die du als Steuerzeichen verwendest, geschrieben, musst du das kenntlich machen, man nennt das auch "maskieren".

Dann möchtest du Absätze vielleicht nicht nur linksbündig ausgeben, sondern ebenso rechtsbündig, mittig oder im Blocksatz. Auch dafür musst du dir funktionierende Strukturen ausdenken. Diese sind dann auf den gesamten Absatz anwendbar.

Im Grunde musst du dir erstmal alles aufschreiben, was der Texteditor so alles können soll. Du kannst das von einem professionellen Texteditor abschauen, z.B. von OpenOffice, wenn du kein MSWord hast.

Ich denke, du warst da bereits auf der richtigen Fährte.

[p80286]

Zitat von Slipstream:

Zitat von hansklok:

Genau um die Struktur geht es mir. Wie könnte das Aussehen?
Eine Paragraph besteht aus Characters und jeder Character hat sein eigenen Style. Das gesamte Dokument besteht aus Paragraphs.

Nicht jedes einzelne Zeichen benötigt seinen eigenen Style, der sich nicht nur in fett, kursiv usw. erschöft, sondern auch Farben, Hoch- und Tiefstellungen, Fontwechsel usw. beinhaltet.

Wenn Du nicht permanent rechnen willst, dann hat jedes Zeichen seine eigenen Attribute. RTF,HTML und alle anderen Formate beschreiben ja nur die Texteingabe. Die Darstellung des Textes ist da eine ganz andere Baustelle.

Gruß
K-H

[hansklok]

Vielen lieben Dank für die zahlreichen Beiträge. Der letzte Beitrag von p80286 trifft es ganz gut. Die Struktur an sich habe ich. Mir geht es um deren Darstellung innerhalb eines Canvas, so das man sie auch bearbeiten kann a la WYSIWYG. Dazu habe ich mir folgende Gedanken gemacht:

Ein Absatz besteht aus einer Zeile. Ist diese Zeile länger als die Canvas Breite, wird diese umgebrochen. Also gibt es innerhalb von Absätzen Codeblöcke, die jeweils die Zeilen enthalten. Geht eine Textzeile also über zwei Zeilen (wegen des Umbruchs), so muss der Absatz 2 Codeblöcke enthalten. Codeblock 2 bezieht seine Position dann aus der Position des vorherigen Codeblocks.
Das Dokument wiederum hat dann eine Liste von Absätzen, die es dann untereinander darstellen kann. Analog zu den Codeblöcken oben, beziehen die Absätze ihr Position jeweils aus der Position und Höhe des vorherigen.

Das sind die Gedanken zur Darstellung. Nun gilt es einen Weg zu finden, Zeilen innerhalb des Canvas bei der WYSIWYG-Eingabe umzubrechen, also einen neuen Codeblock innerhalb des aktiven Absatzes anzulegen. Welches Absatz und welcher Codeblock aktiv ist, müssten anhand der Koordinaten des Mauszeigers errechnet werden. Ebenfalls, an welcher Stelle sich der Cursor (Caret) befindet, um Text weiter einzugeben.

Eine Textzeile besteht aus Wörtern. Diese haben z.B. im Constructor fest definierte Anfangswerte für Größe, Schriftart, Schriftfarbe etc. Wird ein Teile des Wortes markiert und die Werte geändert, müsste also innerhalb des WordsArray der Textzeile an der entsprechenden Stelle ein neues Wort eingefügt werden. Dann mit den neuen Eigenschaftswerten.

Meine Gedanken dazu.

Was dann später noch dazukommt, und da habe ich überhaupt keine Ahnung, wie man, damit man sich den Arbeitsspeicher nicht zukracht, immer nur den benötigten Ausschnitt auf dem Canvas darstellt. Oder anders, wie man eine Seitendarstellung (A4 etc.) machen kann, die kontinuierlich scrollt, aber ebenfalls nicht den Arbeitsspeicher crasht.

[Slipstream]

Zitat von p80286:

Wenn Du nicht permanent rechnen willst, dann hat jedes Zeichen seine eigenen Attribute. RTF,HTML und alle anderen Formate beschreiben ja nur die Texteingabe. Die Darstellung des Textes ist da eine ganz andere Baustelle.

Sagen wir mal, ich gebe mit TextOut eine Zeile aus, dann hab ich doch vorher schon alles andere berechnet: Schriftart, -stil, -grösse, -farbe usw.: TextOut(X, Y, MeineZeile); Ich muss vor der Ausgabe also nur "rechnen" (den Prozessor beanspruchen), wenn sich in der Zeile Änderungen an diesen Parametern ergeben, z.B. ein {b} für die Einleitung von Fettschrift. Ich brauch also einen Parser für das Text-Script (Text mit Steuerzeichen), der alles veranlasst. Das stelle ich mir so vor, dass ich eine Klasse habe, die eine Struktur anbietet, in der ich z.B. eine Zeile zusammenstellen kann. Im Parser muss ich mir auch nicht jedes Zeichen anschauen, sondern immer nur nach den Steuerzeichen suchen. Alles zwischen zwei Steuerzeichen bleibt unverändert. Findet er ein Steuerzeichen, muss er darauf mit einer Methode reagieren, die die Schriftparameter setzt. Dabei habe ich im Speicher in einer anderen Struktur Platz für einen kompletten Satz von Steuerzeichen (eine weitere Klasse, aus der ich Steuerzeichensätze instanziere), den ich durch das Script-Steuerzeichen identifizieren kann. Habe ich eine Zeile zusammen, wird die im Schleifendurchlauf ausgegeben, wobei die Schleife nur einmal durchläuft, wenn in der Zeile keine Steuerzeichen sind.

Die Länge der Zeile ist nochmal eine andere Baustelle, das hab ich jetzt erstmal unterschlagen. Aber ich denke, wenn ich in meiner Klassenstruktur jedem Zeichen alle verfügbaren Attribute verpasse, muss ich mehr rechnen. Vielleicht irre ich mich ja auch, dann wäre es lieb, wenn du mir genauer erklärst, warum man bei deiner Vorgehensweise weniger rechnen muss.

Zitat von hansklok:

Ein Absatz besteht aus einer Zeile. Ist diese Zeile länger als die Canvas Breite, wird diese umgebrochen. Also gibt es innerhalb von Absätzen Codeblöcke, die jeweils die Zeilen enthalten. Geht eine Textzeile also über zwei Zeilen (wegen des Umbruchs), so muss der Absatz 2 Codeblöcke enthalten. Codeblock 2 bezieht seine Position dann aus der Position des vorherigen Codeblocks. Das Dokument wiederum hat dann eine Liste von Absätzen, die es dann untereinander darstellen kann. Analog zu den Codeblöcken oben, beziehen die Absätze ihr Position jeweils aus der Position und Höhe des vorherigen.

Das sind die Gedanken zur Darstellung. Nun gilt es einen Weg zu finden, Zeilen innerhalb des Canvas bei der WYSIWYG-Eingabe umzubrechen, also einen neuen Codeblock innerhalb des aktiven Absatzes anzulegen. Welches Absatz und welcher Codeblock aktiv ist, müssten anhand der Koordinaten des Mauszeigers errechnet werden. Ebenfalls, an welcher Stelle sich der Cursor (Caret) befindet, um Text weiter einzugeben.

Eine Textzeile besteht aus Wörtern. Diese haben z.B. im Constructor fest definierte Anfangswerte für Größe, Schriftart, Schriftfarbe etc. Wird ein Teile des Wortes markiert und die Werte geändert, müsste also innerhalb des WordsArray der Textzeile an der entsprechenden Stelle ein neues Wort eingefügt werden. Dann mit den neuen Eigenschaftswerten.

Meine Gedanken dazu.

Was dann später noch dazukommt, und da habe ich überhaupt keine Ahnung, wie man, damit man sich den Arbeitsspeicher nicht zukracht, immer nur den benötigten Ausschnitt auf dem Canvas darstellt. Oder anders, wie man eine Seitendarstellung (A4 etc.) machen kann, die kontinuierlich scrollt, aber ebenfalls nicht den Arbeitsspeicher crasht.

Ich weiss nicht so recht, was du mit "Codeblock" meinst. Man muss hier wirklich sehr sorgfältig und gründlich vorgehen und alle Eventualitäten berücksichtigen. Und am besten man fängt erst zu programmieren an, wenn man das ganze Konzept vorher auf Papier ausgearbeitet hat.

Angenommen, du hast eine Zeile auszugeben, die wie die folgende aussehen soll:

Wenn man ein Fachbuch über das Schreiben von Fachbüchern schreibt, gerät man in eine vertrackt selbstreflexive Position.

Dann berechnest du erstmal die Länge der Zeile, indem du die Längen jeder Einheit dieser Zeile addierst. Als Einheit verstehe ich Zeichen, die zwischen zwei Anweisungen stehen, hier erstmal das W mit grösserer Schrift und in Fett: L := TextWidth(MeinText); natürlich mit vorangegangener Einstellung der Textparameter. Zu diesem Zweck hast du einen virtuellen Canvas im Speicher. Ist die gesamte Zeile (alle Resultate der verschiedenen Textlängenberechnungen addiert) länger als die Breite des Ziel-Canvas, musst du die Zeile kürzen.

Ich hab das auch noch nie gemacht, obwohl mir schon ein paarmal der Gedanke kam, das war mir aber dann doch zuviel Arbeit. Heute verwende ich auf Arbeit eine professionelle Lösung von einem Drittanbieter, um professionell aussehende Texte ausgeben zu können. Da stecken garantiert ungezählte Mannjahre an Arbeit drin. Trotzdem bin ich sicher, dass du, wenn du nach und nach das ganze Konzept erarbeitet hast, zu einer funktionierenden Umsetzung kommst. Du musst halt nur vorher wissen, was du alles brauchst und dir dann überlegen, wie du diese Dinge in Delphi realisierst, also eine Klasse, die deine mit dem Parser zu analysierenden Zeilen enthält. Da du mit D2010 arbeitest, hast du Unicode-Strings und kannst in so einen String einen ganzen Absatz reinpacken, das wäre dann eine Zeile in der Klassenstruktur, oder eine Stringliste. Wie man die Berechnungen jetzt alle so macht, willst du ja eigentlich selber herausfinden, um was zu lernen, wenn ich das richtig verstanden habe.