Wiki source code of Collaborative Web Editor
Last modified by Vincent Massol on 2024/11/19 16:12
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | == Use case May 2007 == | ||
| 2 | |||
| 3 | == Abstract == | ||
| 4 | |||
| 5 | This Requirements Engineering sheet, due to its very broad scope, will be incomplete, and will evolve over time. In its current state, this usage scenario is somewhat simplified: there might be additional constraints, etc. Indeed, modifications may occur due to possible future requests, but also as a consequence of the actual implementation | ||
| 6 | |||
| 7 | == Description == | ||
| 8 | |||
| 9 | CoW Editor is the actual client-side editor for collaborative web drawing application. | ||
| 10 | |||
| 11 | This editor is designed as a plugin for xwiki. Thus, it will be launched in a similar manner as the HTML WYSIWYG editor in Xwiki So, Xwiki menu shall be used for some functionalities such as save, save and preview, etc. The plugin also has an enclosed chat to help interaction between collaborating users. In the chat, each user will be assigned an unique color; this color will mark the object that he is currently editing, for sake of good cooperation (concurrency issues prevention). | ||
| 12 | |||
| 13 | == Actors & Goals == | ||
| 14 | |||
| 15 | User: edits a simple diagram / drawing in an interactive way, sharing his workspace with other logged on users. | ||
| 16 | |||
| 17 | Goal: ensuring collaborative web editing | ||
| 18 | |||
| 19 | == Usage scenarios == | ||
| 20 | |||
| 21 | The following use cases describe how a user would actually use this editor in his browser. We shall allow free-hand drawing, usage of basic shapes (e.g. rectangle, circle), connectors, images and text boxes. For sake of consensus, we shall further denote these as ?drawing objects?. | ||
| 22 | |||
| 23 | === Basic scenarios === | ||
| 24 | |||
| 25 | 1. __User creates a new shape__ | ||
| 26 | 11. Goal / Context: Creating a new shape (e.g., freehand, rectangle, circle) | ||
| 27 | 11. Scenario / Steps | ||
| 28 | 111. The user presses the corresponding button on the existing tool bar. | ||
| 29 | 111. The user clicks into the canvas of the workspace, drags and releases the mouse button.If he only clicks, a default size object is created | ||
| 30 | 111. The object is created and gets the focus, being the object currently selected by this user. | ||
| 31 | 111. The user clicks on the canvas and the creation mode continues: he creates a new object. | ||
| 32 | 111. User can leave creation mode by selecting from the tool bar another tool. | ||
| 33 | 11. Extensions: The creation of objects by other sequence of actions than ?click-drag-click?.( e.g, for polyline, the action is ?click- click- click...- click - double click?) | ||
| 34 | 11. Technologies / Requirements: Not specified yet. | ||
| 35 | 1. __User selects an existing object__ | ||
| 36 | 11. Goal / Context: Selecting an object currently on the canvas. | ||
| 37 | 11. Scenario / Steps | ||
| 38 | 111. The user selects the select tool from the tool bar.. | ||
| 39 | 111. The user clicks on a visible part of the object. | ||
| 40 | 111. The object is selected and gets the focus. | ||
| 41 | 111*. The object is visibly signaled as being selected by the user. (e.g., the border color is changed) | ||
| 42 | 111*. As a symbol of the selection, in the lower left corner of the object, a colored locker is drawn. This color is the color associated with the user. When the mouse hoovers over the locker, the name of the corresponding user is displayed. | ||
| 43 | 11. Extensions | ||
| 44 | 111. Using the CTRL modifier, the user can select other objects (adding to the current selected ones) or deselect objects (that are selected) | ||
| 45 | 111. Multiselect: the user draws a selection rectangle: all objects within the marked area are selected upon release. | ||
| 46 | 111. On selection, a small toolbar with the most frequent actions is displayed next to the object. (eg. change color, delete, move etc.) | ||
| 47 | 11. Technologies / Requirements: Not specified yet. | ||
| 48 | 1. __User deletes an existing object__ | ||
| 49 | 11. Goal / Context: The user wants to delete an object. | ||
| 50 | 11. Scenario / Steps | ||
| 51 | 111. The user selects the object. | ||
| 52 | 111. The presses on the ?delete? tool on the tool bar. | ||
| 53 | 11. Extensions: If several objects are selected and the ?delete? tool then pressed, all these objects get deleted. | ||
| 54 | 11. Technologies / Requirements: Not specified yet. | ||
| 55 | 1. __User moves an object__ | ||
| 56 | 11. Goal / Context: The user wants to change position of an object . | ||
| 57 | 11. Scenario / Steps | ||
| 58 | 111. The user has the pointer over the object. | ||
| 59 | 111. The user clicks, drags and releases at a new position. | ||
| 60 | 11. Extensions | ||
| 61 | 111. A ?move? tool can be added to the tool bar in order to avoid undesired moving of object during selection. | ||
| 62 | 111. Moving can be applied to a multiple selection if the case arises. | ||
| 63 | 11. Technologies / Requirements: Not specified yet. | ||
| 64 | 1. __User creates a text box__ | ||
| 65 | 11. Goal / Context: The user wants to introduce some piece of text in the workspace. | ||
| 66 | 11. Scenario / Steps | ||
| 67 | 111. The user clicks on the corresponding tool in the tool bar. | ||
| 68 | 111. The user clicks on the canvas. | ||
| 69 | 111. A default size text box is created and its interior captures focus for text input. | ||
| 70 | 11. Extensions: If the text does not fit in the text box, a scrolling bar is assigned to it. | ||
| 71 | 11. Technologies / Requirements: Not specified yet. | ||
| 72 | 1. __User edits the text in an existing text box.__ | ||
| 73 | 11. Goal / Contex: The user wants to edit a text on the canvas. | ||
| 74 | 11. Scenario / Steps | ||
| 75 | 111. The user double clicks on the text box. | ||
| 76 | 111. The focus is set onto the text in the text box and editing mode is enabled. | ||
| 77 | 111. The user clicks outside the text box and commits his modification. | ||
| 78 | 11. Extensions: None. | ||
| 79 | 11. Technologies / Requirements: Not specified yet. | ||
| 80 | 1. __User creates an image__ | ||
| 81 | 11. Goal / Context: The user wants to insert an image in the workspace.. | ||
| 82 | 11. Scenario / Steps | ||
| 83 | 111. The user clicks on the corresponding ?insert image? tool in the tool bar. | ||
| 84 | 111. A dialog appears, asking for the url of the image. | ||
| 85 | 111. The user click on the canvas, at the position of the wanted insertion. | ||
| 86 | 111. The image is inserted and displayed with a default height/width for fitting reasons.. | ||
| 87 | 11. Extensions: None. | ||
| 88 | 11. Technologies / Requirements: Not specified yet. | ||
| 89 | 1. __User is changing the size of an object.__ | ||
| 90 | 11. Goal / Context: The user wants to change size of an existing object. | ||
| 91 | 11. Scenario / Steps | ||
| 92 | 111. The user clicks onto the due object. | ||
| 93 | 111. On selection, a small right corner square appears. Dragging this square allows size changing. | ||
| 94 | 11. Extensions: None. | ||
| 95 | 11. Technologies / Requirements: Not specified yet. | ||
| 96 | 1. __User changes color of an object.__ | ||
| 97 | 11. Goal / Context: The user wants to change the color of an existing object. | ||
| 98 | 11. Scenario / Steps | ||
| 99 | 111. The user selects an object. | ||
| 100 | 111. The user clicks on the ?color picker? tool on the tool bar. | ||
| 101 | 111. The user chooses a color: | ||
| 102 | 111*. user left-clicks on a color swatch and the fill color of the object is consequently changed | ||
| 103 | 111*. user right-clicks on a color swatch and the border color of the object is consequently changed | ||
| 104 | 111. The user closes the ?color picker?. | ||
| 105 | 111. If clicked outside the object, the object is deselected. | ||
| 106 | 11. Extensions: None. | ||
| 107 | 11. Technologies / Requirements: Not specified yet. | ||
| 108 | 1. __User creates a connector__ | ||
| 109 | 11. Goal / Context: The user wants to connect two existing objects using a connector. A connector is a double ended arrow with specially marked ends. | ||
| 110 | 11. Scenario / Steps | ||
| 111 | 111. The user selects the connector tool from the toolbar. | ||
| 112 | 111. The user clicks on the first object to be connected and drags towards the second object. | ||
| 113 | 111. When the mouse pointer is over a linkable object, the border of the object starts blinking. | ||
| 114 | 111*. the user releases the button and the connector is thus created | ||
| 115 | 111*. the user moves the pointer over another object/over the canvas | ||
| 116 | 111. The user releases the mouse when the mouse pointer is over the canvas or over an unlinkable object. The creation of the connector is aborted. | ||
| 117 | 11. Extensions: None. | ||
| 118 | 11. Technologies / Requirements: Not specified yet. | ||
| 119 | 1. __User sends a message in the chat.__ | ||
| 120 | 11. Goal / Context: The user wants to send a message in the chat. | ||
| 121 | 11. Scenario / Steps | ||
| 122 | 111. The user clicks into the chat input textbox and writes a message. | ||
| 123 | 111. The user presses the ENTER key or clicks on the send button. | ||
| 124 | 111. His message is visible in the chat window. | ||
| 125 | 11. Extensions: None. | ||
| 126 | 11. Technologies / Requirements: Not specified yet. | ||
| 127 | 1. __User saves the document in the workspace.__ | ||
| 128 | 11. Goal / Context: The user wants to save the current state of the document. | ||
| 129 | 11. Scenario / Steps | ||
| 130 | 111. The user presses on the save button in the menu. | ||
| 131 | 111. A confirmation dialog appears, allowing the user to specify a minor edit version or a new version to be saved. | ||
| 132 | 111. The document is saved accordingly. | ||
| 133 | 111. The users continue their collaborative editing session. | ||
| 134 | 11. Extensions: None. | ||
| 135 | 11. Technologies / Requirements: Not specified yet. | ||
| 136 | |||
| 137 | === Extended scenarios === | ||
| 138 | |||
| 139 | 1. __User edits the properties of an object.__ | ||
| 140 | 11. Goal / Context: The user wants to change some properties of an existing object. | ||
| 141 | 11. Scenario / Steps | ||
| 142 | 111. The user selects an object. | ||
| 143 | 111. The user clicks on the Properties Tool from the toolbar. | ||
| 144 | 111. A dialogue displaying the editable properties appears. | ||
| 145 | 111. The user proceeds in editing the properties. | ||
| 146 | 111. The user closes the dialogue: | ||
| 147 | 111*. The user presses the cancel button: the modifications are dropped, the object remains unchanged. | ||
| 148 | 111*. The user presses the apply button: the object is modified accordingly. | ||
| 149 | 11. Extensions: None. | ||
| 150 | 11. Technologies / Requirements: Not specified yet. | ||
| 151 | |||
| 152 | == Notes on the scenario == | ||
| 153 | |||
| 154 | As a Requirements Engineering process, this scenario refers to a primary version of this editor. | ||
| 155 | |||
| 156 | Modifications can be operated as suggestions are welcomed. |
