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:

Zitat von Slipstream (Beitrag 1359260)

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! :-D 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. :pale:

[Slipstream]

Zitat:

Zitat von hansklok (Beitrag 1359261)

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:

Zitat von Slipstream (Beitrag 1359865)

Zitat:

Zitat von hansklok (Beitrag 1359261)

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:

Zitat von p80286 (Beitrag 1359884)

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.:

Delphi-Quellcode:

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:

Zitat von hansklok (Beitrag 1359970)

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:

Delphi-Quellcode:

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.

[hansklok]

Hihi, ich glaube, wir haben uns falsch verstanden. Ich finde Deine Vorgehensweise schon richtig. Wonach ich zur Zeit suche, und das unterscheidet sich etwas von Deinen Ausführungen, ist eine Variante ohne das es bereits eine Struktur (Textdatei) gibt, eine solche zu schreiben, eben visuell.

Und eine vorhandene könnte so aussehen:

Code:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<document>
  <paragraph>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</paragraph>
  <paragraph style="1">Lorem ipsum dolor sit amet, 
    <textstyle="2">consetetur 
      <textstyle="3">sadipscing</textstyle>
     elitr</textstyle>
    , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</paragraph>
</document>

Du hast nach den Textblöcken gefragt. Die Anregung habe ich von hier bekommen. Das ist allerdings nur eine Projekt zur Darstellung, jedoch kann man nicht den Text auf dem Canvas bearbeiten.

[stahli]

Ich lese interessiert mit, da ich gerade an einem ähnlichen Teilprojekt arbeite...
Ich glaube nicht, dass wir uns konkret gegenseitig helfen können, will aber mal meinen Stand kurz beschreiben:

Hier habe ich eigene "Controls" gezeigt, in denen ich grundlegend schon arbeiten kann: http://www.delphipraxis.net/185623-m...-controls.html

Ich zeichne dazu die "Controls" lediglich auf den Formularcanvas und zeichne auch den Cursor einfach als Strich in das Bild.
Grundsätzlich fühlt sich das im Ergebnis schon wie richtige Controls an (Selektion von Text und C&P geht aber noch nicht).

Gerade bin ich dabei, auch einen Editor für mehrzeiligen Text aufzubauen und als zweiten Schritt einen Code-Editor mit Syntax-Highlighting etc.

Ich parse den Roh-Text dazu in einzelne Worte, z.B. so:
"Ich"
" "
"parse"
" "
"den"
...

Jedes Wort wird in einem Objekt verwaltet und zusätzlich bestimmte Statusinformationen (Bedeutung, Hint etc) die der Editor dann für die Darstellung des Textes verwenden kann.

Der Text wird wiederum in Zeilen untergliedert, die dann jeweils mehrere Wörter enthalten.

Der Editor wird an die Zeilen gebunden, erstellt dann für jede gebundene Zeile eine Art Panel ohne Rand und für jedes Wort in der Zeile ein Edit ohne Rand. Die trennenden Leerzeichen sind in dem Sinne auch Wörter.

Der Editor zeichnet mindestens die sichtbaren Zeilen und schätzt zunächst die Gesamthöhe für den Gesamttext ab um die Scrollbar darzustellen. Wenn Zeit ist kann er auch mehr Text rendern, um genauere Daten zu haben.

Wenn dann Text in einer Zeile geändert wird muss diese als invalide gekennzeichnet und neu gerendert werden.
Die Metadaten zu den einzelnen Zeilen und Wörtern müssen in der Datenschicht verwaltet werden, die Positionen auf der Zeichenfläche aber vom jeweiligen Editor.

In jedem Fall soll bei mir eine Zeile im Editor an eine Zeile im Text gebunden werden und jedes Wort einer Zeile soll wiederum an ein einzelnes Edit gebunden werden (ohne sichtbare Rahmen).

Je Wort ist also dann jeweils ein Edit für die Darstellung und Bearbeitung (incl. Caretpositionierung bei Klick usw) zuständig.

So ist mein aktueller Ansatz, an dem ich arbeite.


Später wäre ein RichEditor noch interessant, das würde dann schon eher zu Deinem Projekt passen. Da wäre das Zerlegen in einzelne Wörter mit zugeordneten Metadaten sicher auch weniger interessant.

[Aviator]

Zitat:

Zitat von stahli (Beitrag 1360027)

Gerade bin ich dabei, auch einen Editor für mehrzeiligen Text aufzubauen und als zweiten Schritt einen Code-Editor mit Syntax-Highlighting etc.

Ich weiß ja nicht was dein Editor später alles noch können soll, aber hast du dir mal die SynEdit Komponenten angeschaut? Die haben auch eine Syntax-Highlighting Funktion und vieles mehr. So in etwas wie der Code Editor in Delphi. Syntax-Highlighter kannst du dir auch selbst erstellen und dem SynMemo zuweisen.

Wäre vielleicht weniger Arbeit. Es sei denn, deine Komponente soll später noch 1000 Dinge mehr können als die SynEdit Komponenten es können.

[stahli]

Ich brauche eine Lösung, die spezielle Rahmenbedingungen erfüllt. Daher habe ich das von Null an aufgebaut.