https://github.com/interacto/demo-session
https://github.com/interacto/demo-session
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/interacto/demo-session
- Owner: interacto
- Created: 2021-06-07T13:09:51.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-14T14:11:54.000Z (almost 5 years ago)
- Last Synced: 2025-01-14T13:15:02.150Z (over 1 year ago)
- Language: TypeScript
- Size: 254 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Practical Session with Interacto
- clone the project and run `npm install` in the project folder to install the dependencies
- run the Angular app (run `Angular CLI Server`)
- Open the documentation we provided on Interacto (https://interacto.github.io/)
## #1 -- Triple click to change a color
A triple-click on the div element `triple` (located in the HTML file) must change the color contained in `dataService` to a random color value.
The background color of this `triple` div element uses `dataService.color` so that you should be able to see the change.
The class `DataService` already provides a method `setNewRandomColor` to set its `color` attribute with a new random value.
**Question 1** Implement this feature without considering undo/redo.
- With Interacto, `clicksBinder(nb)` refers to an N-click interaction.
- Using the Web/Angular API: a mouse event has an attribute `detail` that refers to the number of clicks.
**Question 2** Adapt your code to be able to undo/redo color changes.
## #2 -- Write text
Editing the text of the `textarea` HTML element must change `dataService.text`.
A precision: do this action when the textarea is idle for 1 second.
For example: the user writes a sequence of letters and then stops for more than 1 second, so that `dataService.text` is updated.
This is a mainstream optimisation that many text processing tools implement to limit the number of editing actions.
**Question 1** Implement this feature without considering undo/redo.
## #3 -- Drag-and-drop a shape
The last exercise consists in moving a rectangle using a drag-and-drop interaction:
Press on the rectangle, drag it to a location, and release it to end its translation.
The rectangle to move is the rectangle `rec` defined in the HTML file.
**Question 1** Implement this feature without considering undo/redo.
Note that the Interacto `dndBinder(true)` may help you.
Using the Web/Angular API you can use the classical `mousedown`, `mouseup`, `mousemove` event listeners or https://v7.material.angular.io/cdk/drag-drop/overview#getting-started.
Note that the attribute `dataService.position` defines the x/y coordinates of the rectangle.
**Question 2** Adapt your code to be able to undo/redo the moves.