Skip to content
This repository has been archived by the owner on Sep 12, 2024. It is now read-only.

6. Adding interractions

Jump to bottom
Yann LE GOFF edited this page Aug 17, 2022 · 5 revisions

In this section we will see how to put interraction on a shape.

You can add interractions to a shape. An interraction will occure when the users will use a device like a mouse to click on shape.

All the events:

focusOn
focusOut
mouseDragged
mouseDraggedAndDropped
mouseEnter
mouseExit
mouseMoved
mouseRedButtonDroppedFromAnotherView
mouseWheel
redButtonClicked
redButton
redButtonPressed
redButtonReleased
blueButtonClicked
blueButton
blueButtonPressed
blueButtonReleased
yellowButtonClicked
yellowButton
yellowButtonPressed
yellowButtonReleased
keyEvent
keyPressedEvent
keyReleasedEvent

Events mouseEnter, mouseExit, (mouseMoved)

The event #mouseEnter trigger when the mouse enter on the shape. To be abble to trigger it again the mouse has to leave the shape.

The event #mouseExit trigger when the mouse exit on the shape. To be abble to trigger it the mouse has to be first on the shape.

shape  onEvent: #mouseEnter executeAction: [ Transcript show: 'mouseEnter ' ].
shape  onEvent: #mouseExit executeAction: [ Transcript show: 'mouseExit ' ].

(The event #mouseMoved trigger when the mouse moved on the shape. To be abble to trigger it the mouse has to be first on the shape.)

Event mouseWheel

The event #mouseWheel trigger when the mouse wheel is turn on the shape. It's possible to detect the direction of the wheel (see example below).

view := CadeView new open.

other := (100 @ 100 extent: 100 @ 100) asCadeShape.
other fillColor: Color blue.
shape := (150 @ 150 extent: 100 @ 100) asCadeShape.
view addShape: shape; addShape: other.

shape  onEvent: #mouseWheel executeAction: [ :evt |
	evt isDown ifTrue: [ Transcript show: 'down ' ].
	evt isUp ifTrue: [ Transcript show: 'up ' ] ]

Event ButtonPressed, ButtonReleased and ButtonClicked

There are 3 types of events for the button of the mouse, for the 3 buttons of the mouse.

The 3 buttons of the mouse are:

  • red: for the LEFT button.
  • blue: for the MIDLE button (mouse wheel).
  • yellow: for the RIGHT button.

The 3 types of events are:

  • ButtonPressed for when a mouse button is pressed.
  • ButtonReleased for when a mouse button is released.
  • ButtonClicked for when a button is pressed then released.

There are 9 events in total:

  • redButtonClicked, redButtonPressed, redButtonReleased
  • blueButtonClicked, blueButtonPressed, blueButtonReleased
  • yellowButtonClicked, yellowButtonPressed, yellowButtonReleased

Here an example for the LEFT button:

view := CadeView new open.

other := (100 @ 100 extent: 100 @ 100) asCadeShape.
other fillColor: Color blue.
shape := (150 @ 150 extent: 100 @ 100) asCadeShape.
view addShape: shape; addShape: other.

shape action: [ Transcript show: 'action ' ].
shape onEvent: #redButtonClicked executeAction: [ Transcript show: 'clic ' ].
shape onEvent: #redButtonPressed executeAction: [ Transcript show: 'press ' ].
shape onEvent: #redButtonReleased executeAction: [ Transcript show: 'release ' ]

In this example, the shape action: [ " ... " ] is equivalent to shape onEvent: #redButtonClicked executeAction: [ " ... " ].

Clone this wiki locally