Web-Based Text Editor for Writing Research Daniel Riegelhaupt [email protected]http://msdl.cs.mcgill.ca/people/daniel Supervisor: Professor Hans Vangheluwe University of Antwerp Faculty of Science: Departement of Mathematics and Computer Science Antwerp, Belgium A thesis submitted to the University of Antwerp in partial fulfilment of the requirements of the degree of Bachelor of Science in de Informatica (Bachelor of Science in Computer Science) Copyright c 2011 Daniel Riegelhaupt All rights reserved.
I would like to thank the academy. . . First and foremost I would like to thank Prof. Vangheluwe forhis kind guidance and supervision. Despite my occasional frustration when things went wrong, this wasa very fun project to work on. I would also like to thank Bart Meyers for his supervision in the earlystages of the project.A very big thank you to Jacob Beard, co creator of SCXML-JavaScript and author of the paper andproject I was allowed to use as base for mine; not only for the two previously mentioned facts but alsofor answering my mails filled with idiotic question about scxml.My thanks to my friend Tom Wijsman who solved the GUI problem I had been trying to solve for morethen a day in about 2 minutes.Then there is of course my family:My Mom , whose reaction to my thesis project was:”yes; i can see you’re typing. now show me yourproject”. My Dad who, while I was working, tried to ask anyone but me for help using the computer.My brother for not once saying no when I needed a 30 min penalty shootout break to clear my head.And last but not least to my sister for listening to my complaining when i need to load off and nobodyelse was around.
Abstract
Linguist at the university of Antwerp use logging tools on top of commercial word processors to doresearch on writing behavior. This is of course far from ideal because when the commercial tool changesso should the logger. Even when the editor is open source and there is full access to the code addinglogging capabilities is still a complex task.With this in mind we want to make an editor that uses statecharts to handle user input and to describethe editor’s behavior. That way we can separate the logging aspect form the editor code and make theeditor behavior very flexible.By making the editor web-based we make it platform independent and installation free. All one needs touse it, is a browser. The editor being web-based also allows us to use the SVG (scalable vector graphics)library, supported by all major modern browsers, to display the text; which gives us the option to zoomin and out without pixelation.
In order for linguists to have a maintainable word processor with a logging aspect, we want to create asimple web-based rich text editor.
We want to use statecharts to allow us to have a flexible behavior and to keep to logger a separateaspect from the editor.
In this thesis we build a prototype we can show them. The goal is not to have this prototype used(although, of course, we wouldn’t mind if they do), but to showcase them with a simple example whatwe can do. This would give them a better idea of what features they want added or what they wantto change. The decision can then be made to either build further on this design or do something different.
In short from our point of view the linguist part of the project isn’t important (yet). We are only requiredto add a simple key-click-logger and make sure that this project is properly documented so another personcan pick up were we left it. This documentation comes in form of this thesis and commentary inside thecode itself.
An added requirement from our point of view is to use the SVG (scalable vector graphics) library asbasic glyphs. The library is supported by every major modern browser.
1.1 A quick introduction to the SVG tspan
The SVG tspan DOM (Document Object Model) element [W3C] is the most important part of theeditor.
The editor and accompanying classes are nothing else then code to manipulate and order tspans.
Therefore it merits a bit of explanation.
A tspan has a text content, which is the text displayed on screen and has the the following attributesthat are important for us:
• x: The absolute x coordinate of the tspan. There is also an y but we don’t need it
• dx: The x distance relative to the previous DOM element.
• dy: The y distance relative to the previous DOM element.
1
1.2. REQUIREMENTS CHAPTER 1. INTRODUCTION
• style: Describes the style of the text content. Different style sheets style can be used but we useCSS.
• fill: The color which fills the SVG. In the tspan context it colors our text. Note that there is alsoa color attribute in CSS but for some reason it is ignored.
There are many more attributes - most by inheritance - but those aren’t important for us. The x anddx attributes are mutually exclusive (in our context at least). The relative coordinates might be moreclear with an example:
<tspan x=”0” dy=”0”>some </tspan><tspan dx=”0” dy=”0”>text</tspan>will be displayed likethis (without the quotes):
’some text’
and <tspan x=”0” dy=”0”>some </tspan><tspan dx=”0” dy=”19”>text</tspan>will be displayedlike this (without the quotes):
’some ’’text’
This is allows us to position them as lines.
for more information on the tspan go to http://www.w3.org/TR/SVG/text.html#TSpanElement.
1.2 Requirements
An attempt at formal requirements can be found in appendix A
a few minor revisions should be made:
• 5.4.2.1.1 should be: ‘If there is a next line move the text cursor to the beginning of it. If there isn’tdo nothing’.
• 14.1.4 should be ignored for the moment. This case can’t happen in the current prototype.
• 15.1 should be: ‘to the left of the start point’.
In short the requirements can be summarized as such:
• A user should be able to insert characters into the text or overwrite them (insert key).
• The text should be ordered in flush left alignment.
• The enter, backspace and delete key should do what is expected of them (adding a line break andremoving a character respectively).
• Arrow keys can be used to move around in the text.
• We should be able to click in the text and select text.
• It should be possible to copy or cut the selected text and paste it somewhere else in the document.
• The document can be saved and loaded.
• The document should be scrollable.
• Clicks and keystrokes should be logged.
• The text can be bold, italic, underline and have different colors, font types and sizes.
• Any Action that changes the text (so for example type, cut,. . . but not copy, save, load, scroll. . . )should be undoable, redoable and if possible repeatable.
While making a program web-based makes it platform independent it doesn’t make it browser indepen-dent. Because of the many browsers available it was decided to concentrate on one browser: Firefox.
To make a long story short: in the middle of development efforts were made to get it to work on GoogleChrome (to be more exact the open source version of it Chromium) so a few compromises were madein the code, but it turned out to be almost useless. The main ,but not only, reason being that Chromecatches the well known ’ctrl’ shortcuts like ctrl+c and ctrl+s, making it impossible to save, load, undo,redo, . . .
The idea to have it work in Chrome has been dropped for the moment but the compromises alreadymade are still there.
The editor has primarily been tested (manually) in Firefox 3.6, because that was the version the authorhad while developing.
A quick manual test of features was done in Firefox 5 and it should work; however no guarantee is given.
It should be noted that the CSS text-decoration attribute (underline) is not yet supported for SVG inFirefox, which means underline won’t work until it is.
1.4 Tools used
the following tools were used:
• Commons Scxml-JavaScript (http://commons.apache.org/sandbox/gsoc/2010/scxml-js): wasused to write the statechart in SCXML format and transform it to JavaScript
• Fireug (http://getfirebug.com): was use to debug the JavaScript code
• scxmlgui (http://code.google.com/p/scxmlgui/): was used to create a graphical representationof the SCXML.
• jsdoc-toolkit (http://code.google.com/p/jsdoc-toolkit/): was used to create the documen-tation for the code.
• UMLet (http://www.umlet.com/): was used to draw the UML diagrams
Atom3 (http://atom3.cs.mcgill.ca/) should also be mentioned.It provides the ability to draw stat-echarts and to transform them to SCXML and to javascript (using Scxml-Javascript).
It wasn’t used because the SCXML generated depends on the order in which the states and transitionwere drawn, which proves problematic when we have a global event catcher like ‘*’ which needs to beplaced last. Note that this problem existed mainly in the early prototypes and that Atom3 could havebeen used for the later ones.
1.5 Related works
There are a couple of papers out there that deal with using statecharts for user interfaces. the one thatmost closely relates to this thesis however is the paper: ‘Modelling the Behavior of the Vim Modal TextEditor Using Statecharts: A Case Study’ by Jacob Beard.[Bea11]
The main purpose is the same: create a web-based text editor (albeit with different requirements) usingSVG.
The author based a lot of the design of this thesis project on Jacob Beard’s design. It should be clarifiedthat both his project and this thesis were done under the supervision of Prof. Hans Vangheluwe andexplicit permission was given to do so.
In the next chapter (2) we first discuss the classes that form the editor then we discuss the features asthey are added in an iterative way to the editor. Those features are divided in 4 parts typing, mouse,undo/redo and client/server. We then conclude and talk about future work. Appendix A contains therequirements.
4
2Building the editor
2.1 Classes
Figure 2.1 A detailed API is available with the project in the folder jsdoc. Wat follows is a shortdescription of the classes, their purpose and some important methods. For more information please referto the API doc. DOM nodes are not discussed, those are part of the webpage and our used by ourclasses.
2.1.1 LogEntry
A simple wrapper around a time stamp and data, both strings
2.1.2 Logger
A log book, it contain instances of the LogEntry class. It needs the statechart instance to be able tosend a save request to the client. It can add an entry either from a character code that gets convertedto a character (this happens when we type) or as a string.
2.1.3 Client
A simple class used to communicate with the local server. It’s purpose is to be able to load, save andquit.
2.1.4 Style
A wrapper around the CSS attributes that are currently supported. those are
• font-family (like for example Times New Roman)
• color (for the moment only the rgb(r,g,b) format is supported
• font-size (in points)
• font-weight (either bold or absent)
• font-style (either italic or absent)
• text-decoration (either underline or absent)
5
2.1. CLASSES CHAPTER 2. BUILDING THE EDITOR
Figure 2.1: An overview of the classes and their connections without their members and methods. Theclasses in blue are the classes that can call up methods in the statecharts or in other words classes thatvia the statechart react to user input
It has a few getters and setters, most of them speak for them selves and if not they are documented inthe API documentation. The most important method is toString(). It is used to compare Styles and isin a format that can be used in a tspan style attribute.
2.1.5 GUI
This class serves as interface for the DOM GUI toolbar. in simple words this class gets information fromand sends information to the buttons and dropdown menus in the toolbar. it’s important methods:
• alertStateChart(attr): Sends an event to the statechart that the current style has been changesand which attribute in particular has changed.
• createStyle: Returns a style the editor can use as new current style.
• updateGUI(style): Makes the toolbar display the given style.
2.1.6 DisplayManager
is responsible for keeping the current style, margin values and page height.
2.1.7 Tspan
A class around an SVG tspan (note the class is named Tspan, the DOM element tspan). This is themost basic element of the editor. It is here to facilitate the editing of the tspan, not to hide it. The tspanitself is public. It also contains an instance of the Style Node, it is first used to set the style attributeand then kept to be edited when the style is changed or to compare to another style. Some importantmethods:
• writeCharAt(c, pos): Write character c at position pos.
• removeCharAt(pos): Removes the character at position pos.
• getTextLength(): returns the number of character in the text content of the tspan (Line breaksare ignored! an explanation will follow shortely).
The position are as follow if the text content is ‘abc’ then 0 is before a, 1 after a, 2 after b and 3 after c.So if we add character d at position 1 the new text will be ‘adbc’. Removing the character at position
6
CHAPTER 2. BUILDING THE EDITOR 2.1. CLASSES
0 has no effect.
When the DOM tspan contains no text content it isn’t displayed on screen. if it isn’t displayed onscreen then the tspans following it aren’t displayed as well (remember that they are positioned relativeto each other) therefore Tspans initialize their DOM tspan with a white space as text content. thisallows us to have an empty line, without affecting the rest of the text. this is taken into account insidethe class. When writing to the tspan that white space is removed.
2.1.8 Line
This class contains 1 or more Tspans. If there are more then one Tspans it means that their styles aredifferent in at least one attribute. Some important methods:
• writeCharAt(c, pos): Write character c at position pos. Note that the position is relative to theline.
• addToDOM(): Add the line to the DOM tree
• removeFromDOM(): Removes the line from the DOM tree.
• cutSelection(from, to, includeLineBreak): Removes the text between from (included) and to (notincluded). includeLineBreak is a boolean; when it is true if to is the last character we also copythe trailing line break if its there.
• getFirstWord():Get the Tspans composing the first word.
• getLastWord(): Get the Tspans composing the last word.
• getIndicesContainingPos(pos): This is a private method but an important one. It gets used a lot.it returns the number of the tspan and the position relative to that tspan of the given position onthe line.
When we have more then one Tspan like this <tspan>abc </tspan><tspan>defg</tspan>position 3 on the line can either be position 3 on the first Tspan or position 0 on the next Tspan.’getIndicesContainingPos(3)’ will return Tspan 1 (we start counting at 0) position 0. In certain situation(like asking for the style at position 3) we want Tspan 0 position 3 in that case we need to adjust theposition returned.Another important thing to note is the meaning of the word ‘word’ in the methods getFirst/LastWord.Aword in the requirements is defined as: ”Any sequence of characters separated by a tab , line break , orwhite space”. But those function are there to rearrange the text and in that context the first/last wordcan also be a white space, tab or line break. In addition; in the case of getLastWord if the entire lineconsist of one big word the last character of the line will be returned.
2.1.9 LineManager
All Lines are stored here; as such it has an overview of the entire document. For that reason alignmentis done on this level. It’s most important, but not only, methods are:
• createNewLine(afterPosition): Creates a line after the given position, to create a line at the endor the first line of an empty line manager omit the parameter.
• removeLine(pos): Remove the given line from the list of Lines and from the DOM
• rearangeLinesOnAdd(pos): Rearrange Lines recursively after a something has been added (the linebecomes wider) starting at the given line.
• rearangeLinesOnRemove(pos): Rearrange Lines recursively after a something has been removed(the line becomes less wide) starting at the given line.
7
2.1. CLASSES CHAPTER 2. BUILDING THE EDITOR
2.1.10 Serializer
A class whose purpose is to transform the content of the Document to a string that can be used by theclient to save the document.
2.1.11 Deserializer
A class whose purpose is to put a document that has been loaded by the client in the editor.
2.1.12 TextCursor
This class has access to the DOM text cursor (an SVG rectangle) and remembers its position in the text(row number and column number in that row) as well as its position on the screen (x and y). Becauseit knows where we are in the text it it also responsible for editing it. Every action on the text exceptfor cutting and copying, is done through here; after which the cursor position is correctly updated.For example: writeChar(c) will write character c in the current row at the current column , it will thenrearrange that row (through the LineManager) and finally put the cursor at the correct place (in themost common case it is one place to the right but there are other cases as well).The TextCursor is therefore the highest level class one needs if one isn’t concerned with user input (andselection). The Deserializer class uses the TextCursor to load the text to the editor (actually it loadsthe text to the LineManager). Almost all of its methods are important but here are a few:
• writeBackSpace(): Remove the character left of the current position
• writeChar(c): Write char at current cursor position
• writeDelete(): removes the character at the current position
• writeLineBreak(): adds a line break at the current position
2.1.13 SelectionManager
Manages the selection. It Remembers the start and end of the selection as well as where the user firstclicked to start the selection. It is responsible for drawing the blue highlight rectangles when selectingand removing them as well as cutting and copying the selected text. It also rearranges the text, throughthe line manger, after text has been cut.It’s important method are drawSelection(startx, starty, endx, endy) and drawSelectionIndices(from,to). Both are public but the alter is called by the first. the differences is that the first receives screencoordinates and the second receives from and to indices (row and column).their purpose is to draw see through (opacity of 0.5) blue SVG rectangles above the selection.
2.1.14 CommandHistory
A list of Commands (Commands themselves will be explained later) that have executed and can undone, redone or repeated. Each should be possible to undo and redo each command in the history, but repeatis only possible in certain cases. The difference between redo and repeat is that redo is redoing the exactsame thing at the exact same position after that action has been undone and that repeat is doing thesame action at the current position.Like mentioned in the requirements we repeat only if our present position in the history is the last actionin it and if that action can be repeated. For example ‘write a’ can be repeated (we simply write an a atthe current position) but cutting can’t be because if there is no selection there is nothing to cut.
2.1.15 SVGEditor
The editor instance. It relegates almost everything to either the SelectionManager or the TextCursorthrough use of Commands. It keeps a buffer and a instance of CommandHistory. It’s main purpose is tocapture user input and pass it on correctly to the state chart instance. When working with user inputthe SVGEditor is the highest level possible. For example writeChar(c) receives a character code from
8
CHAPTER 2. BUILDING THE EDITOR 2.1. CLASSES
the statechart. The editor transforms it back into a character and then calls the writeCharCommandwhich uses the TextCursor and DisplayManger to write the character. Being the highest level of editingpossible every method is important.
9
Fig
ure
2.2:A
noverv
iewof
the
entire
SV
GE
dito
rb
ehav
ior
statechart
CHAPTER 2. BUILDING THE EDITOR 2.2. FEATURES
2.2 Features
Figure 2.2 gives an overview of the statechart logic behind the editor behavior. The figure isn’t thatclear, the actions are missing and so are the guards. In what follows we will describe adding the featuresiteratively in an order as logical as possible. While this is not exactly how it happened while developing,its pretty close and gives the reader a good view of the project and the logic behind it. We have 4categories typing, mouse, undo/redo an client.
2.2.1 Typing
The typing features consist of simple keyboard input: character keys, insert key, arrow keys, enter, deleteand backspace. We end this list with adding style to the text. The first thing we need to do is catchkeyboard input. This happens in the editor.
var eventMap = {
8: "backspace",
13: "enter",
37: "left",
38: "up",
39: "right",
40: "down",
45: "insert",
46 : "delete"
}
rootNode.addEventListener("keypress",function(e){
e.preventDefault();
var scEvent = String.fromCharCode(e.charCode) || null;
if((scEvent != null) && (e.charCode != 0)){
if(e.ctrlKey){
scEvent = "ctrl_" + scEvent;
}
scEvent += "_keypress";
}
},true)
rootNode.addEventListener("keydown",function(e){
var scEvent = eventMap[e.keyCode] || null;
if (scEvent != null){
e.preventDefault();
scEvent += "_keypress";
scInstance.GEN(scEvent,e);
}
},true)
The rootnode is the DOM parent of the editor it is the SVG node itself. We add two event listeners to it.A keypress which captures when an a key is pressed down and/or is held down pressed, and a keydownwhich only captures when a key is pressed down.Earlier mention was made of compromises that were made to make the program work in Chromium,this is one of them. First if the reader is not aware there are two types of codes the keyboard sends whena key is typed there is the key code and the character code. A character code is send when we type acharacter key and a keycode is send when we type a key like back space. Firefox sends a keypress eventin both cases, which make it easy for us but apparently this is not really correct (the author hasn’t
11
2.2. FEATURES CHAPTER 2. BUILDING THE EDITOR
checked the W3C standard and can’t comment on the correctness). Chromium only sends a keypressevent when we type a key with a character code. In order to catch a key with a key code we need thekeydown event. This means that while we can hold down a key like ‘a’ and it will keep getting added tothe text; holding down backspace will only work once.Because the keydown event would cancel a keypress event if we prevented the default action we makesure to only prevent the default action if we captured a key with a key code we can use. When the eventis caught we send it to the statechart and let it decide what to do and what methods to call.
2.2.1.1 Insert
Figure 2.3: The most basic statechart: only typing of characters
Figure 2.3 shows the catching of any character typed except one that is also typed with the ctrl key.Note that at the moment of witting the author realizes there was a better way to check for the ctrl key( event.data.ctrlKey instead of checking the name), but we will leave as it is. The following actions areexecuted when the transition is called.
logger.addEntry(_event.data.charCode, true);
editor.writeChar(_event.data.charCode);
The first thing we do is add the character to the logger. Only once it has been added is it written tothe document. We add the character in the current row at the current position and then we rearrangeif needed according to the flush left alignment. There are two cases when we need to rearrange.
1. The most common one: When the line is over the right margin. In that case we take the last wordof the line and transfer it to the next line (we make a next line if needed). this is done recursivelyas long as needed (rearangeLinesOnAdd from the LineManager). Remember that as stated whendescribing the Line class in this context a word can also be a single character, a white space, a tabor a line break
2. A less common case: We typed a white space or tab before the first word or in the middle of itthereby making it a smaller word. If there is a previous line that doesn’t end with a line break andthe first word (in this context a space, tab or word) can fit at the end of it add it there. (basicallyperform rearangeLinesOnRemove on the previous line)
Note that while the tab character has been taken into account in the code it hasn’t yet been addedto the current prototype of the project.The reason being that the tab key sends a keyCode and not acharCode and thus requires special transitions instead of the one described here. This is very easy to dobut of very low priority.
2.2.1.2 Overtype
Overtype mode means that we replace the character at the current position with the typed character.If we are at the end of the line and there is no character to replace we just add it. When we are inovertype mode and catch a ‘*’ event with the correct condition we do this.
12
CHAPTER 2. BUILDING THE EDITOR 2.2. FEATURES
Figure 2.4: Adding overtype mode: pressing insert will switch between them
logger.addEntry(_event.data.charCode, true);
editor.overWriteChar(_event.data.charCode);
The same rearrange rules apply when overwriting and inserting.We switch between the two modes by pressing the insert key. when going from insert to overtype modewe log the insert key and make the cursor thicker
logger.addEntry("INSERT");
editor.textCursor.makeFat();
when go back we log the insert key and make the cursor thinner
logger.addEntry("INSERT");
editor.textCursor.makeThin();
2.2.1.3 Arrow keys
Figure 2.5: Adding arrow keys: We need a state around insert and overtype
We now want to add arrow keys. The arrow key transitions must do the exact same thing whether weare in insert mode or overtype mode. We therefore create a state around those two states. This becomes‘typing mode’. After the action of the arrow keys has been performed we want to go back to the correctstate, so we add a history state. A history state is a statechart state that remembers where we were;which is exactly what we want. The logic behind the arrow keys is already explained in the requirementsbut here they are again:
• Left arrow: If we are at the beginning of a line and there is a previous line go to the end of thatline. If we are not at the beginning of a line go one place left.
13
2.2. FEATURES CHAPTER 2. BUILDING THE EDITOR
• Right arrow: If we are at the end a line and there is a next line go to the beginning of that line.If we are not at the end of line go one place right.
• Up arrow: If we are not on the first line move one place up. if the previous line is shorter then thecurrent line move it at the end of that line.
• Down arrow: If we are not on the last line move one place down. if the next line is shorter thenthe current line move it at the end of that line.
When a transition is activated it does this
logger.addEntry("UP");
editor.textCursor.moveUp();
editor.changeStyle();
if (gui != null){
gui.updateGUI(editor.textCursor.getStyle());
}
This is analogous for all three other arrow keys. the gui part will be explained when we add the style.
2.2.1.4 Enter, backspace and delete
Those keys are added to the state chart in the exact same way as the arrow keys a transition fromtyping mode to it’s history state that logs the key and calls the appropriate action. Those actions arerespectively writeLineBReak(), writeBackSpace() and writeDelete().
Important note about the ”\n” character the \n character isn’t invisible. it has a small width andof course counts as a character when we count the characters. When we want to check if a line is biggerthen the right margin we don’t want the line break (which is an invisible character for the user) to countas part of the width. is is therefore ignored in the getWidth() method.When we add a character to the end of a line we don’t want to add it after the line break we want toadd it before the line break. This is the reason getTextLenght() in line doesn’t count the line break. thismeans that when adding a character, move around with the arrow keys or click at the end of the line;the last position of the line is the character before the line break. When we remove however we do countthe line break as a character. The column position is then adjusted accordingly. the line break is alsotaken into account when rearranging (remember a word can be a line break). To help both the Tspanand the Line classes have a endsWithLineBreak() function which returns true if there is a line break atthe end.
With that important note out of the way let us look at the logic:the enter key: add the character ”\n” at the current position. If needed create a new line. It is needed todo so when the current line doesn’t have a line break and there is no next line or we are at the start ofthe line (and want to move the whole line down). When the current line ends with a line break alwayscreate a new line. Once we have or haven’t created that line; cut everything from the current line andplace it there. when then rearrange the line where everything has been added.For backspace and delete the logic is a bit like move left and move right respectively but instead ofmoving to that position we delete that position. When rearranging we first look if we can move the firstword of the current line to the previous line and call rearangeLinesOnRemove() on the previous line. Ifneeded that will also be recursively called on the current line. If we couldn’t move the first word we callrearangeLinesOnRemove() for the current line.
2.2.1.5 Adding style to it all
Wheter we work with different styles or not we need at least one. Each time we write a character weask the DisplayManger for the current style. To work with different styles then becomes quite easy TheGUI (graphical user interface)- the toolbar basically - alerts the statechart each time it is changed. itsends a ”gui style change” event together with the new style and the CSS name of the attribute that
14
CHAPTER 2. BUILDING THE EDITOR 2.2. FEATURES
was changed. That attribute is not used here. Here we simply give the new style to the DisplayMangerand set is as the current style. We add a transition for the gui style change event which does exactlythat when activated.
editor.changeStyle(_event.data.style);
Adding a character now becomes
1. The current style and the style of the Tspan we want to add to are the same: simply add thecharacter at the given position.
2. The styles are different in that case there are four different situations.
• The current Tspan is empty (we started witting in an empty line): Replace it.
• We are at the beginning of a Tspan: Check to see if there is a previous Tspan with the samestyle. If not add a new Tspan with the current tspan before the current one and write thecharacter there.
• We are at the end of a Tspan: same as previous case but with next and after.
• We are in the middle of a Tspan: we split the current Tspan in two and add a new Tspanwith the current style between the both of them. We write the character in the new Tspan.
We can now also explain the gui part of the arrow keys. when we move the cursor with the arrow keyswe want the current style to become the one left of the cursor (or the first character of the line) sowhen moving we first change the style of the DisplayManger by doing ”editor.changeStyle();” and thenwe update the GUI to show the new current style ”gui.updateGUI(editor.textCursor.getStyle());”. wecheck to see if gui is not null first because nothing forces us to use the editor with a GUI.
Figure 2.6: The statechart after having added all typing features
2.2.2 Mouse
Here we add the ability to click inside the document, select text and copy, cut , remove and paste it.We also add the ability to change the style of the selected text. As with typing we first need to catchthe events.
var mouseMoveListener = function(e){
e.preventDefault();
moved = selectionMgr.drawSelection(downEvent.clientX, downEvent.clientY,
Selecting means holding the left mouse down moving it and letting the left mouse button back up. AClick means pushing the left mouse down and up again (a click event is generated after those two events).In order to be able to capture them both we we first capture mousedown and wait for either a mousemove or a mouse up. Depending on what was done the correct signal is sent to the statechart. Whenwe move the mouse bat move it back again so no character is selected drawSelection will return falseand there fore it will count as a click. Two things should be noted. the mousemove eventlistner is addedon mouse down and then removed on mouse up , because that is the only time we need it. If we leaveit open it would constantly try to draw a selection and would slow things down considerably. Anothernote is that the author first tried drawing the selection in the statechart.While it is perfectly possible todo so it is way to slow. When done directly in the event listener it works almost instantaneously whendone via statechart there is a very noticeable delay. The decision has therefore been made to do it incode and alert the statechart we are in selection mode if needed.
2.2.2.1 Click and Select
From Typing mode we can go to mouse state by pressing the left mouse button. When the transition isactivated it is logged.
logger.addEntry(String("mouse down at x = " + _event.data.clientX + " y = "
+ _event.data.clientY ));
When we enter the mouse state we the textcursor is hidden. From there we can lift the mouse buttonback up. in which case left mouse up is activated
logger.addEntry(String("mouse up at x = " + _event.data.clientX + " y = "
This means we clicked, the cursor is therefore placed where it should be according to the requirements,showed again and the style is updated to the new position. In short this means:
• If we clicked under the last line put it on the last line (or after it).
• If we clicked after a line put it at the end of the line.
• If we clicked in a line put it left as best we can were we clicked it (this means we won’t put it oncharacter but to its left or right)
Or we can also go to selection mode if we receive a mouse selected
logger.addEntry(String("selection end at x = " + _event.data.clientX + " y = "
+ _event.data.clientY ));
editor.moveTextCursorToSelectionClick();
editor.changeStyle();
if (gui != null){
gui.updateGUI(editor.textCursor.getStyle());
}
The GUI displays the style of the start of the selection (note that this isn’t complete according to therequirements, for example if there are multiple fonts the fonts should be left blank instead of showingone font, but for now it will suffice) from there we can a lot of things.
• we can press a character key: The selection is removed, the character is written, the highlights areremoved (we deselect), the cursor is shown again and we go to history.
• We can press delete or backspace: Same as previous without writing the the character
• We can press enter: Same as character but we add a line break instead of writing the character.
• We can press an arrow key: The cursor is where we started the selection. show it again, deselectand move the cursor where it should be moved. The transition goes to history
• We can press down the left mouse button: We deselect the selection and go back to the mousestate.
17
2.2. FEATURES CHAPTER 2. BUILDING THE EDITOR
For example the ‘*’ transition becomes:
logger.addEntry(_event.data.charCode, true);
editor.removeSelection();
editor.deSelect();
editor.showCursor();
editor.writeChar(_event.data.charCode);
2.2.2.2 cut, copy and paste
In selection mode we can also cut or copy the text to the local buffer. When cutting we rearrange byremoving any empty lines caused by the cutting and using rearangeLinesOnRemove() on either the linewhere the selection was started if its still there, the previous line if its not or if there is no previous linethe first line of the LineManager. After both copying and cutting we remove the highlights, show thecursor again and go to the history state.we can also paste what we copied or cut. The condition for the ctrl v keypress transition is that thebuffer cannot be empty
editor.bufferNotEmpty()
We can do this either in typing mode in which case the text is simply pasted at current position andwe go back to history; or from selection mode which does the same except the current selection is firstremoved and highlights are removed as well.
When changing the selection style the specif attribute that was changed does matter. We cut the selec-tion. to a temporary buffer. We change that specif attribute of the style to the same value as the stylereceived by th GUI an we paste the buffer back.Finally we redraw the selection because there is a goodchance the style change has also changed the position of the text.
The author would like to note that he has been made aware of a bug in that feature. after repro-ducing it it turns out that this is not a bug but an error in logic on the authors part. cutting and pastingthe text back does not always work. for example if we cut a whole line and paste it back it will startpasting at the previous line (because that is were the cursor is after cutting) and keep it there if thereis place for it. This is correct from a paste point of view but not from what was intended in this context(put it back on the line we took it from). The solution to this problem is to not cut the text but splitthe Tspans locally where needed. This would result in a rearranged Tspan list and DOM tspan list butwould not necessitate line rearrangement before changing the style. The text would therefore stay at itscorrect place. This solution will be made into practice as soon as possible.
18
CHAPTER 2. BUILDING THE EDITOR 2.2. FEATURES
Figure 2.8: The mouse with selection completed. Note that ETC. . . in typing mode means the same asETC. . . in the selection state except for: The gui style event which is included in typing mode but pointsback to itself in selection. and The ‘*’ event which is included in selection mode but not in the ETC. . . oftyping mode
2.2.3 Undo/redo
We can now edit the text pretty much how we want or how we expect it. We now add features thatenables us to undo what was done , redo what was undone or repeat the last action taken. this featuresmore or less follows the undo redo pattern described in [GHJV95] Adding those features to the statechartis quite easy. We can undo(ctrl+z) or redo(ctrl+y) from typing mode or from selection mode. In both
Figure 2.9: adding undo/redo to a simplified version of the statechart
case we go to history (when we are in selection mode as usual first we deselect). When undoing andredoing an action like for example a style change we want to be able to go back to selection mode, sothat the user can change the style again, choose to leave selection mode (by click or by use of the arrowkeys) or do something else. For that reason some commands can send a undo redo selection event thatgoes from typing mode to selection mode.
Adding undo/redo the the code requires some refactoring and the saving of some information. Insteadof doing certain actions directly from the SelectionManager or TextCursor we now put them insideCommands. those commands are then put in a CommandHistory list. Where the following actions canbe performed.
• Undo: If the CommandHistory is not empty
• Redo: If the present document state is one before this command was executed we can redo thatcommand
• Repeat: When we press redo but in the present document state each command of CommandHistoryhas been executed and the last command is repeatable execute the command at the currentposition.
19
2.2. FEATURES CHAPTER 2. BUILDING THE EDITOR
an example: the writeBackSpaceCommand
• execute(): Remember the current position of the cursor, the character that was removed, the styleof that character and the position of the cursor after removing.
• redo(): Place the cursor where it was before removing (this should normally not be necessary butyou never know) and remove the character.
• repeat(): Create a new writeBackSpaceCommand() execute it and return it so it can be added tothe CommandHistory
• undo(): Place the cursor to the position it had after removing. Set the current style to be the styleof the character that was removed. write the character at the current position.
Figure 2.10: The commands as they should be. The commands in blue are the one currently implementedas unrelated entities.
The commands as they are now are not in a correct Object oriented design, they are complete separateentities who just happen to have the same functions.. The point was to have a basic command withonly an execute method (the only action that could use this is copy) that command would not beput in the CommandHistory. A second Command Class would be UndoableCommand which wouldinherit from Command also have an undo method and a redo method (an example would be the currentCutCommand). As final Command we would have a RepeatableCommand (like the writeCharCommand)which would inherit from the UndoableCommand and would also have a repeat method. Each currentCommmand would then inherit from and overwrite one of those three. this is shown in figure 2.10 The
20
CHAPTER 2. BUILDING THE EDITOR 2.2. FEATURES
reason this was not yet done so is because of the authors hesitance in choosing between emulatingclassical inheritance and or doing prototype inheritance. This was the authors first project in JavaScriptand having never done so he didn’t know which one to use. Under the software engineering motto ”firstdo it, then do it right, then do it fast”, the author first did it with the clear intention of refactoring oncehe would know which one to use. Unfortunately due to time constraints he hasn’t yet had the chanceto look into this.
2.2.4 Client
Since the application is web-based saving and loading a document requires a server, even if it just alocal one. Here we discuss Adding the client side to the application.
Figure 2.11: simplified state chart with client
We can access the client from either selection mode or typing mode and we need to be able to re-turn to the one we came from. With that in mind we add an editor state around typing mode mouseand selection mode. We add a second history so we can go to either selection mode or the history oftyping mode.
• When ctrl + s is pressed the follwoing function is called: editor.save()
• When ctrl + q is pressed the following function is called: editor.close()
• When ctrl + l is pressed the following function is called: logger.saveLog()
• When ctrl + o is pressed the following function is called: editor.load()
In theory they should call a confirm menu and we should have the chance to cancel (hence the canceltransition from the client start) but in practice this isn’t there yet. so the just sent their respectivesignals to the client.
• editor.save(): Sends the save event with the filename and file content as data;
• editor.close(): Sends the close event.
• logger.saveLog: sends the save event with the filename and file content as data.
• editor.load(): Sends the load even with a filename as data.
21
2.2. FEATURES CHAPTER 2. BUILDING THE EDITOR
In the client we send the appropriate Ajax event and wait for a response. there are now 2 possibilities:
1. We don’t receive a response withing half a second. A time out event is send, we alert the user andgo back to history.
2. We receive a response from the server. we take the appropriate action. A server response looks likethis <resp type””>responsetext </resp>
Just because we received a response doesn’t mean it is what we wanted we can receive a error typemessage. This is sent if an expected parameter is forgotten in the request (like no filename for save). Inthat case alert the user and go to history; the client did its job as expected. When the received responseis a success the signal sent to the state chart depends on the request sent.
• save: We ignore the response text and send a client success event to the state chart.
• close: We ignore the response text and send a EXIT EVENT which closes the program(we closethe tab on entry in the final state) and the server. Note that we only close the server because it islocal. If the server is an actual server we musn’t close it.
• load: We load the response text into the editor. that might take some time so before doing thatwe send a loading event to the statechart this will bring us out of the client wait state (andavoid an unjustified timeout) and into the load wait state. When the client is finished loadingthe text it sends a load finished event. and we go to the typing mode history. Before loading weclear the current document, place the TextCursor at row 0 column 0 and clear the buffer andCommandHistory.
Important note about save and load While it was implicitly implied we should be able to save toa subset of the .rtf format this sin’t yet possible. We can only save and load txt. As stated before wecan also not cancel save or load. this also means there is no menu to choose the file we want to load orsave to. This is hardcoded at for the moment. This is by far the worst implemented feature of the wholeproject.
22
3Conclusion and future work
Let us take a look back at the requirements from chapter 1.
3.1 Conclusion
Feature StatusA user should be able to insert characters into thetext or overwrite them (insert key).
Done (slight visual requirement missing, the mousecursor doesn’t disappear)
The text should be ordered in flush left alignment. DoneThe enter, backspace and delete key should do whatis expected of them (adding a line break and remov-ing a character respectively).
Done
Arrow keys can be used to move around in the text. DoneWe should be able to click in the text and select text. DoneIt should be possible to copy or cut the selected textand paste it somewhere else in the document.
Done
The document can be saved and loaded. Bad: we can only save and load .txt and only to hard-coded filenames.
The document should be scrollable. Not implementedClicks and keystrokes should be logged. Done but perhaps too minimalistic for the linguist ?The text can be bold, italic, underline and have dif-ferent colors, font types and sizes.
Medium: There is no problem when typing howeverchanging a selected style is buggy. A slight visualrequirement is missing the gui isn’t updated in ac-cordance with the requirements.
Any Action that changes the text should be un-doable, redoable and if possible repeatable.
Done (but the bug of style change also cause bugon the styleChangeCommand), but should be refac-tored.
This means that while the prototype is obviously not finished there are enough features to show thisas a basic prototype. We can clearly see where project is going (everybody knows what a scrollbar isor what saving and loading means). The project is sufficiently documented so that someone else couldtake over (although the author would still like to add the missing features first). The use of state chartmake the UI very easy to understand and to adapt. This might be an alpha version of the editor but it
23
3.2. FUTURE WORK CHAPTER 3. CONCLUSION AND FUTURE WORK
can definitely be showcased to the linguist of the university for feedback towards future development.
3.2 Future work
Whether the linguists are interested in this project or not; the author would like to add the scrollbarand the save/load to .rtf functions in the near future. Another possibility for save and load is the usageof the .svg format. It would only be editable as document on this editor but it could be viewable on anybrowser that supports SVG. Other features like movable margins or spelling checks are also possibilities.The logger could be made more complex. instead of logging ’C’ it could log ”shift + c = C”or ”shift +c = c” depending on caps lock. the ”caps lock” key could also be added to the logger. . . For the mostpart, it depends on what the Linguist want with the project.
24
Bibliography
[Bea11] Jacob Beard. Modelling the behaviour of the vim modal text editor using statecharts:A case study. http://msdl.cs.mcgill.ca/people/hv/teaching/MSBDesign/projects/
Jacob.Beard, 2011.
[GHJV95] Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides. Design Patterns: Elementsof Reusable Object-Oriented Software. Addison-Wesley, 1995.
Rich Text Editor with Logger Requirements 1.0 Author: Daniel Riegelhaupt
This document describes the first version of system requirements for a simple rich text editor. For this specific assignment an extra requirement is the logging of key pressed and mouse movements.
Terminology in this context: Text: the actual text as the user has typed it.
Document: the text as it is rendered on the screen.
Character /char : any screen printable character, this includes white space and line breaks o We will start with ASCII characters. o If possible support should be added for UNICODE.
Line break: a character that specifically denotes that after it a new line should begin o NOTE that a new line on the document doesn’t mean there is a line break in the text; this
can also happen due to rendering.
Style: the total of the attributes describing the text rendering: font type (a string with a valid font type name), font size (a positive integer value), font color (from standard names in rgb.txt http://sedition.com/perl/rgb.html or RGB values R/G/B each in 0-255 range), bold(true/false), italic (true/false) and underlined (true/false)
Word: a sequence of characters that does not include a tab, white space or line break
Alignment: the way words are ordered on a line, and sentences are cut/wrapped to fit within the document's margins. o The default (and for the moment only) alignment is: Flush left. (aka ‘Left Alignment’ or
‘Ragged Right’) o In future versions support might be added for Flush Right (aka ‘Right Alignment’ or
‘Ragged Left’), Justified and Centered.
Text cursor: the cursor indicating where we type. o The ‘insert text cursor’ : it can look like a (pulsating) |
o The ‘overtype text cursor’: it can look like a (pulsating) █
Mouse cursor: the mouse cursor. o The ‘document mouse cursor’, when the mouse is over an area in the document: it can
look like
o The ‘gui mouse cursor’, when the mouse is over the gui: it is the standard OS version of
the mouse so it can look like
Margin: the left and right vertical borders of the document. o In this version they are constant. o In future versions they might become movable.
Buffer: place were copied or cut text is kept. o For the moment this is only for this program. o If possible the good case would be to use the OS buffer and still be able to keep style
information within the program (and most of it outside)
Line: a line in the document
Beginning of the document: the top left corner of the document
Beginning of a line : the left margin of a line. o NOTE that depending on the alignment used, from the user’s point of view, the
beginning might be the right margin. That ‘beginning’ should be referred to as right
margin; the beginning of the line will always refer to the left. An analogous remark is applicable to ‘beginning of the document’.
o When the text cursor is at the beginning of a line it is at the left margin and to the left of the first character
End of a line: the last character (the one most to the right) of a line. o When the text cursor is at the end of a line it is at the right of the last character of that
line.
End of the document: the end of the last line.
Overtype mode: a mode of operation where we replace the (empty) character indicated by the text cursor with the typed character.
Insert mode: a mode of operation where we insert the typed character in the text in a position left or right of the text cursor depending of the alignment used.
Action: typing (including line breaks, backspace and delete), copy, paste , cut, a font style change.
Use Cases: 0. The Program starts: *the current style is set at default values (like for example times new roman ; 12 ; black; not bold ; not italic ; not underlined) *the current alignment is set to flushed left. *there is an empty document available to be written on * we are in insert mode *the text cursor is the ‘insert text cursor’ and is set at the top left corner of the document 1. Character key (except for line break)is pressed: * if the mouse cursor is shown hide it 1.1 There is no selection 1.1.1 current alignment is Flush Left
1.1.1.1 overtype mode *overwrite the character(or empty space) on which the text cursor is with the new character in the current style.
1.1.1.2 insert mode * the character is written to the right of the text cursor in the current style * if a character is now after the right margin rearrange the document/line according to the flush left alignment algorithm. * the text cursor is moved to the right of the newly typed character
1.2 There is a selection * remove the selection from the text 1.2.1 current alignment is Flush Left
* the text cursor is placed ,but not shown ,to the left of where the selection used to be * continue with 1.1.1.2
2. Backspace key is pressed * if the mouse cursor is shown hide it 2.1 current alignment is Flush Left
2.1.1 there is no selection 2.1.1.1 there is no character to the left of the text cursor in the text * Do nothing 2.1.1.2 there is a character to the left of the text cursor in the text * remove the character to the left of the text cursor
3
* rearrange the line/document according to the alignment algorithm 2.1.2 there is a selection *remove the selection from the text
* rearrange the line/document according to the Alignment algorithm * the text cursor is placed ,but not shown ,to the left of where the selection used to be *the current style becomes the style of the character to the left of text cursor (if there are no more characters it stay as it was)
3. Delete Key is pressed * if the mouse cursor is shown hide it 3.1 current alignment is Flush Left
3.1.1 there is no selection 3.1.1.1 there is no character to the right of the text cursor * Do nothing 3.1.1.2 there is a character to the right of the text cursor
* remove the character to the right of the text cursor * rearrange the line/document according to the Alignment algorithm
3.1.2 there is a selection *remove the entire selection * the text cursor stays where it was
*the current style becomes the style of the character to the left of text cursor (if there are no more characters it stay as it was) 4. enter key is pressed * if the mouse cursor is shown hide it 4.1 there is a selection * delete the selected text.
4.1.1 current alignment is Flush Left * the text cursor is placed ,but not shown ,to the left of where the selection used to be * continue with 4.2
4.2 current alignment is Flush Left * add a line break to the right of the text cursor * put the cursor to the right of the newly added line break. (On the document this means the text cursor is placed on the left margin of the newline) 5. Arrow key is pressed * if the mouse cursor is shown hide it *if there is selected text ; deselect it; show text cursor 5.1 Up arrow 5.1.1 current line is the first line of the document *do nothing 5.1.2 current line is not the first line of the document 5.1.2.1 current alignment is Flush Left 5.1.2.1.1 there is text on the line above the current one
*place text cursor on the line above; to the right of the character closest to the same vertical as the current text cursor position. If there are 2 choices (the distance is equal) choose the left one.
5.1.2.1.2 there is no text on the line above the current one *place the text cursor at the beginning of the line above 5.2 Down arrow
Analogous to UP but wit below instead of above and last line instead of first line 5.3 Left arrow
4
5.3.1 the text cursor is at the beginning of the document *do nothing 5.3.2 the text cursor is not at the beginning of the document 5.3.2 current alignment is Flush Left 5.3.2.1.1 we are at the beginning of a line *place the text cursor to the right of the last character of the line above. (this can also mean the beginning of the line if the line above is empty) 5.3.2.1.2 we are not at the beginning of a line * move the text cursor one place to the left 5.4 Right arrow
Analogous to LEFT with end of line instead of beginning, below instead of above, and right instead of left. Only exception: 5.4.2.1.1 we are at the end of a line
*place the text cursor at the beginning of the next line (= the line below) whether the line is empty or not
*the current style becomes:
- the style of the character to the left of text cursor, if there is one. - the style of the first character, if we are at the beginning of the document - it stays as it was, if there are no characters
6. Insert key is pressed 6.1 we are in insert mode * we are now in overtype mode * text cursor becomes the ‘overtype text cursor’ 6.2 we are in overtype mode * we are now in insert mode * text cursor becomes the ‘insert text cursor’ 7. Copy command the command can be called by GUI or with the shortcut ctrl+c 7.1 there is no selection
* this command CAN’T be used (this means the GUI is grayed out and the shortcut won’t have any effect)
7.2 there is a selection *copy the selected text (style included) to the buffer * deselect the selected text *show the text cursor 8. Cut command the command can be called by GUI or with the shortcut ctrl+x 8.1 there is no selection
* this command CAN’T be used (this means the GUI is grayed out and the shortcut won’t have any effect)
8.2 there is a selection *copy the selected text (style included) to the buffer * remove the selected text
* the text cursor is to placed, the right of the character that came before ( = to the left of) the selection that has just been deleted (this position is independent of the alignment used)
5
9.Paste command the command can be called by GUI or with the shortcut ctrl+v 9.1 the buffer is empty
* this command CAN’T be used (this means the GUI is grayed out and the shortcut won’t have any effect)
9.2 the buffer is not empty 9.2.1 current alignment is Flush Left *insert the text in its own style at the right of text cursor *place the text cursor to the right of the last character of the newly added text *the current style becomes that of the last character of the pasted text *rearrange the line/document according to the current alignment algorithm if necessary 10. Undo command the command can be called by GUI or with the shortcut ctrl+z 10.1 there is no action to be undone
* this command CAN’T be used (this means the GUI is grayed out and the shortcut won’t have any effect)
10.2 there is an action to be undone * Revert 1 action. 11. Repeat command the command can be called by GUI or with the shortcut ctrl+y 10.1 no actions have been done
* this command CAN’T be used (this means the GUI is grayed out and the shortcut won’t have any effect)
10.2 there is an action to be redone * redo that action 10.3 there are no actions to redo but there is an action to undo * repeat the last performed action 12. one of font style attribute type, size or color is changed These attributes will be changed using a drop down menu in the GUI 12.1 no selection
*the current style attribute changes to the new value 12.2 selection
*the style attribute of the selection becomes that of the new value *rearrange the text according to the current alignment algorithm if necessary ( not necessary when color was changed) 13. one of font style attribute bold , italic or underline These attributes will be changed using buttons in the GUI 13.1 no selection
*the current style attribute changes to the new value 13.2 selection *no character in selection has that attribute on *turn that attribute on for the selection
*at least one character has that attribute on *turn that attribute off for the selection
6
*rearrange the text according to the current alignment algorithm if necessary ( not necessary when the attribute was underline) 14. left mouse button pressed and released (=clicked) *if there was a selection, deselect it. *if it was in an area with characters calculate which character was clicked on or where the click happened 14.1 the click happened above or on the last line of the document 14.1.1 the click was on a character *the text cursor is placed to the left of that character 14.1.2 the click was on a part of a line with no text 14.1.2.1 current alignment is Flush Left
*the text cursor is put to the right of the last character (or if the line is empty , the beginning of line)
14.1.3 the click was between characters *the text cursor is placed there 14.1.4 the click was before the left margin *the entire line is selected 14. 2 the click happened below the last line of the document * do this use case as if it were happening on the last line *the current style becomes:
- the style of the character to the left of text cursor, if there is one. - the style of the first character, if we are at the beginning of the document - it stays as it was, if there are no characters
15. left mouse button pressed and hold and dragged (and later on let go of) *the text cursor disappears *the characters over which the mouse hovers are marked as selected (characters font color becomes white and they are marked in blue) *if an empty line is selected a vertical line is marked in blue. *if the mouse hovers back over a selected character it is unselected. *when the mouse is let go of 15.1 the end point of the selection is to the left of the start point in the text (this means to the left or line above in the document) *the text cursor is placed to the left of the end point , but not shown 15.2 the end point of the selection is to the right of the start point in the text (this means to the right or line below in the document) *the text cursor is placed to the right of the end point , but not shown *the current style is set to that of most left character in the text of the selection. *even though the style has deterministically been chosen if there are more than one values for style attribute color, size or type in the selection the drop down menu stays blank. 16. save * a save as dialog appears where user can save file * the file is saved on a server (that server can also be run locally) 17. open * an open dialog appears * the user can open *the document is opened *the text cursor is placed at the beginning of the document *the current style is set as the style of the first character
7
18. The program is closed 18.1 there have been no edits since last save *close the program 18.2 there have been edits since last save * give the user the option to save before closing * once the user has decided (and if chosen: the save action preformed) close the program
Other Requirements: These are requirements that are more easily explained outside a use case context Logging A separate concern/aspect is to log every key press and mouse click. Cursor (mouse or text) movement/placement *when moving/placing a cursor (either text or mouse): even if that cursor was previously hidden, it is shown again. unless it is explicitly stated that is should not be shown. ; *When the text cursor is not shown on the screen, the position that is remembered is its position in the text not that on the document Style changes Whenever the current style changes the GUI dropdown menu of type, size and color will be updated. The scrollbar *Whenever after an edit the total height of the document increases add (or if it is already there Extend) the vertical scrollbar *Whenever after an edit the total height of the document decreases: shorten or completely remove the vertical scrollbar * when the scrollbar is moved: changed the view but the text cursor stays where it is Undo/repeat As this is a bit difficult to explain using only words it will be explained using an example. Consider this: (P = present. this means the document consist of all actions taken from the beginning until and included the action before P , A# is an action)
*if the user makes an action it is added:
*the user can undo this action
*the user can press undo again
A1 A2 P
A1 A2 A3 P
A1 A2 P A3
8
*if the user doesn’t do an action but uses the repast command the a previously undone action is redone
*the user can also redo A3, but if instead he does a new action (A4) every undone action that could be redone is removed.
*in a situation where there are no undone commands to be redone if the user chooses the repeat command again the last performed action will be repeated.
*when saving any action to the right of the present are removed from the list.
Alignment Flush Left Algorithm This tells us how text should be (re)arranged
When adding text (due to typing, pasting, line shifts because of line breaks or merging of words from two lines caused by delete and backspace ):
*if the line consist entirely off a word when the right margin of the line is reached: Simply cut off and continue adding/typing on the next line.
*if the line contains at least 2 words: Put the last word of the sentence on the next line and continue adding/typing from there
If due to adding in the next line words must be pushed apply this recursively until there is no need to continue on a next line.
Consider the following situation: Line a Line b … Line c Line d … When due to an action like:
*removing characters in line a * removing characters from the first word of line b * splitting the first word of line b with a space *removing the line break after line a
The first word of line b can now fit in line a do the following: Move it there, and move as many sequential next words as possible then apply recursively on the lines below until one of the following conditions is met:
A1 P A2 A3
A1 A2 P A3
A1 A2 A4 P
A1 A2 A4 A4 P
9
*the first word of line d can’t fit on line c *line c has a line break *there are no (more) lines below
